fitst version

public/index.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
+<meta name="theme-color" content="#0b0f2a">
+<title>Turbo Race</title>
+<link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="stars"></div>
+  <canvas id="game"></canvas>
+
+  <!-- Aanmeldscherm -->
+  <section id="join" class="overlay">
+    <div class="card">
+      <h1 class="logo">TURBO<span>RACE</span></h1>
+      <p class="tagline">Tot 20 coureurs · 1 baan · max 1:30 min</p>
+      <input id="nameInput" maxlength="14" placeholder="Jouw racenaam" autocomplete="off">
+      <div id="colors" class="colors"></div>
+      <button id="joinBtn" class="btn">Aanmelden ▶</button>
+      <p id="joinMsg" class="msg"></p>
+      <p class="hint">🕹️ Hou links of rechts van het scherm vast om te sturen, ontwijk pylonen &amp; olie, pak power-ups en word de snelste!</p>
+    </div>
+  </section>
+
+  <!-- Spel / kamer -->
+  <section id="room" class="hidden">
+    <div id="hud">
+      <div class="hud-left">
+        <div id="hudTimer" class="hud-timer">01:30</div>
+        <div id="hudSpeed" class="hud-speed">0 km/u</div>
+      </div>
+      <div class="hud-center">
+        <div id="hudPos" class="hud-pos">#? / 20</div>
+        <div id="hudDist" class="hud-dist">0 m</div>
+      </div>
+    </div>
+    <div id="lead" class="hidden"><span id="leadText"></span></div>
+    <div id="board" class="board">
+      <div class="board-head" id="boardHead">Aanmelders (0/20)</div>
+      <ol id="boardList"></ol>
+    </div>
+    <div id="minimapWrap"><canvas id="minimap"></canvas></div>
+    <div id="toasts"></div>
+    <div id="controls">
+      <div class="ctrl"><span class="arrow">◀</span> stuur</div>
+      <div class="tipzoom" id="tipZoom">🌐</div>
+      <div class="ctrl">stuur <span class="arrow">▶</span></div>
+    </div>
+  </section>
+
+  <!-- Countdown -->
+  <section id="countdown" class="overlay hidden">
+    <div id="cdNum" class="cd-num">0</div>
+    <div id="cdLabel" class="cd-label">RACE START IN</div>
+    <div class="cd-sub">Nieuwe aanmelders zijn nog welkom!</div>
+  </section>
+
+  <!-- Uitslag -->
+  <section id="results" class="overlay hidden">
+    <div class="card results-card">
+      <h2 class="res-title">🏆 UITSLAG</h2>
+      <div id="podium" class="podium"></div>
+      <ol id="resultsList" class="results-list"></ol>
+      <button id="againBtn" class="btn">↻ Nog een keer</button>
+      <p class="hint" id="resSub"></p>
+    </div>
+  </section>
+
+  <!-- Verbinding verbroken -->
+  <section id="dead" class="overlay hidden">
+    <div class="card"><h2>⚠️ Verbinding verbroken</h2><p>Herlaad de pagina om opnieuw mee te doen.</p></div>
+  </section>
+
+  <script src="render.js"></script>
+  <script src="client.js"></script>
+</body>
+</html>