index.html

<!DOCTYPE html>

<html>

<head>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <script src="/static/js/jquery-3.5.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
</head>

<body>
<div id="main" class="container d-flex flex-column justify-content-center vh-100 p-5">
    <button type="button" disabled="disabled" class="btn btn-light my-1">
        <h1>Flut-Test</h1>
    </button>
</div>
</body>
<script>
    async function setup() {
        const result = await fetch(`/titles.json`);
        result.json().then(
            (Titles) => {
                for (const title_data of Titles) {
                    console.log(title_data);
                    $('#main').append($(
                        `<a type="button" class="btn btn-primary my-1 d-flex flex-row align-items-center" href="/test.html?test=${title_data.link}">
                <div class="bg-light rounded text-hide position-absolute">
                    <img src="/static/image/${title_data.image}" draggable="false"/>
                </div>
                <div class="d-flex justify-content-center container-fluid">
                    <h2>
                        ${title_data.name}
                    </h2>
                </div>
            </a>`
                    ));
                }
            }
        );
    }

    setup();

</script>
</html>