martijn.diersmann@pm.me
86 lines
3.1 KiB
HTML
86 lines
3.1 KiB
HTML
<!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">🕹️ Zet je vinger op de baan — de auto rijdt meteen naar die plek en blijft er staan. Ontwijk pylonen & 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="spectate" class="hidden">
|
|
<div class="spectate-head">🏆 KOPLOPERS</div>
|
|
<div id="kopCount" class="spectate-count"></div>
|
|
<ol id="kopList"></ol>
|
|
<div id="kopFollow" class="spectate-follow"></div>
|
|
</div>
|
|
<div id="controls">
|
|
<div class="ctrl"><span class="arrow">◀</span> volgen</div>
|
|
<div class="tipzoom" id="tipZoom">🌐</div>
|
|
<div class="ctrl">volgen <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>
|