<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>KyFlo Snake</title> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link rel="stylesheet" type="text/css" href="sources/css/style.css"> </head> <body> <div class="row"> <div class="col s12"> <h1 class="linear-wipe">KyFlo Snake</h1> </div> </div> <div class="row" id="menu"> <div class="col s6 offset-s3"> <div class="col s10 offset-s1" style="padding: 0"> <input type="text" id="nickname" placeholder="Choose a nickname :"> </div> <div class="menu-level col s12 row"> </div> </div> </div> <div id="game" class="invisible"> <canvas id="canvas"></canvas> <div class="col s6 offset-s3 row statsgame"> <p class="stats col s4" id="score">Score: </p> <p class="stats col s4" id="lives">Lives: </p> <p class="stats col s4" id="speed">Speed: </p> </div> </div> <div id="gameovermodal" class="modal"> <div class="modal-content"> <h1 class="linear-wipe">GAME OVER</h1> <p>Your score : <span id="gameoverscore"></span></p> </div> </div> <div id="scoreboard" class="close"> <h1>Scoreboard</h1> </div> <script type="module" src="sources/js/index.js"></script> </body> </html>