frontend/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="manifest" href="static/manifest.json">
    <link rel="shortcut icon" href="static/favicon.ico">
    <link rel="stylesheet" href="static/materializecss/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link rel="apple-touch-icon" sizes="180x180" href="static/images/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon-16x16.png">
    <link rel="mask-icon" href="static/images/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="static/images/favicon.ico">
    <meta name="msapplication-TileColor" content="#00aba9">
    <meta name="theme-color" content="#000000">

    <title>Quack Stanley</title>

    <style>
        html {
            background: url("static/images/bg.png");
        }
    </style>
    <script type="module" src="src/index.js"></script>
</head>
<body>
    <div id="root"></div>

    <noscript>
        <style>
            .stanley--noscript {
                width: 120px;
                height: 120px;
                background-color: #4CAF50;
                border-radius: 60px;
                border: solid 2px #424242;
                margin-bottom: 20px;
                animation: stanley-colour linear 15s infinite alternate;
            }

            .noscript-message {
                margin-top: 100px;
            }

            @keyframes stanley-colour {
                0% {
                    background-color: #CAF50;
                }
                50% {
                    background-color: #2196F3;
                }
                100% {
                    background-color: #9c27b0;
                }
            }
        </style>
        <main>
            <div class="container">
                <div class="row">
                    <div class="col s12">
                        <div class="noscript-message center-align flow-text">
                            <img src="static/images/stanley.png" class="stanley--noscript" />
                            <br />
                            <div class="card-panel">
                                <strong>Enable JavaScript</strong> to play Quack Stanley
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </noscript>
</body>
</html>