Create back and start buttons

css/map.css

@@ -1,3 +1,8 @@
+#back-button {
+    margin-left: 1em;
+    cursor: pointer;
+}
+
 body {
     margin: 0;
     padding: 0;
@@ -7,6 +12,35 @@ html, body, #map {
     height: 90%;
 }
 
+#chrono {
+    font-weight: bold;
+    margin-top: 1em;
+    text-transform: uppercase;
+}
+
+.game-button {
+    background-color: #3498db;
+    border: 2px solid #3498db;
+    border-radius: 5px;
+    color: #fff;
+    cursor: pointer;
+    font-size: 15px;
+    margin-bottom: .3em;
+    padding: 8px 15px;
+    transition: all 0.3s ease;
+}
+
+.game-button:hover {
+    background-color: #2980b9;
+    border-color: #2980b9;
+}
+
+.game-button:disabled {
+    background-color: #d8d8d8;
+    border-color: #d8d8d8;
+    cursor: not-allowed;
+}
+
 #title,div {
     text-align: center;
 }

game-control/back.php

@@ -0,0 +1,9 @@
+<?= "
+    <div style='display: flex; justify-content: center; align-items: center;'>
+        <h1 id='title'>$zone</h1>
+        <a style='text-decoration: none;' href='/'>
+            <button id='back-button'>🔙 Retour</button>
+        </a>
+    </div>
+";
+?>

game-control/start.php

@@ -0,0 +1,12 @@
+<?= "
+    <div style='display: flex; justify-content: center;'>
+        <button class='game-button' disabled style='margin-right: 2em;' onClick='startGame()' id='start' type='button'>Commencer la partie</button>
+        <button class='game-button' disabled onClick='restartGame()' id='restart' type='button'>Recommencer</button>
+    </div>
+
+    <div id='chrono'></div>
+    <div id='score' style='display: flex; justify-content: center;'></div>
+
+    <div id='question'></div>
+";
+?>