119 lines
3.8 KiB
HTML
119 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>GeoDraw — Lobby</title>
|
|
<link rel="stylesheet" href="./styles/main.css" />
|
|
<link rel="stylesheet" href="./styles/lobby.css" />
|
|
</head>
|
|
<body>
|
|
<noscript>
|
|
<p class="noscript-msg">GeoDraw requires JavaScript. Please enable it in your browser settings.</p>
|
|
</noscript>
|
|
<div class="wrap">
|
|
|
|
<header class="header">
|
|
<div class="container header__inner">
|
|
<a href="index.html" class="logo">
|
|
<div class="logo__mark">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="9" stroke="white" stroke-width="1.6"/>
|
|
<path d="M3 12 Q8 8 12 12 Q16 16 21 12" stroke="white" stroke-width="1.4" fill="none"/>
|
|
<path d="M12 3 Q14 8 12 12 Q10 16 12 21" stroke="white" stroke-width="1.4" fill="none"/>
|
|
</svg>
|
|
</div>
|
|
<span class="logo__text">GeoDraw</span>
|
|
</a>
|
|
<nav class="nav" aria-label="Main navigation">
|
|
<a href="index.html" class="nav__link">Home</a>
|
|
<a href="leaderboard.html" class="nav__link">Leaderboard</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="lobby">
|
|
<div class="container lobby__inner">
|
|
|
|
<!-- Left: promo -->
|
|
<div class="lobby__promo">
|
|
<div class="eyebrow">
|
|
<span class="eyebrow__dot"></span>
|
|
Multiplayer · 3 rounds
|
|
</div>
|
|
|
|
<div class="lobby__name-badge" id="lobby-name-badge">
|
|
<span class="lobby__name-icon">🏠</span>
|
|
<span id="lobby-name-display">Lobby</span>
|
|
</div>
|
|
|
|
<h1 class="lobby__title">
|
|
Ready to<br><em>test your</em><br>geography?
|
|
</h1>
|
|
|
|
<p class="lobby__desc">
|
|
You'll get 3 countries to draw from memory. Each round lasts 60 seconds. Your score is based on accuracy — the closer your borders, the higher the points.
|
|
</p>
|
|
|
|
<div class="lobby__badges">
|
|
<span class="badge"><span class="badge__icon">🌍</span> 3 Rounds</span>
|
|
<span class="badge"><span class="badge__icon">⏱</span> 60 sec each</span>
|
|
<span class="badge"><span class="badge__icon">🏆</span> Leaderboard</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: form -->
|
|
<div class="lobby__card">
|
|
<h2 class="lobby__card-title">Enter your name</h2>
|
|
<p class="lobby__card-sub">Your name will appear on the leaderboard.</p>
|
|
|
|
<div class="form">
|
|
<div class="field">
|
|
<label for="username">Username</label>
|
|
<input
|
|
id="username"
|
|
type="text"
|
|
placeholder="e.g. mapmaster42"
|
|
maxlength="24"
|
|
autocomplete="nickname"
|
|
/>
|
|
<span class="field-error" id="name-error"></span>
|
|
</div>
|
|
|
|
<button id="btn-start" class="btn btn--primary btn--full">
|
|
Start Game
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container footer__inner">
|
|
|
|
<div class="footer__left">
|
|
|
|
</div>
|
|
|
|
<div class="footer__center">
|
|
<a href="index.html" class="footer__brand">GeoDraw</a>
|
|
<p class="footer__sub">Browser geography game</p>
|
|
</div>
|
|
|
|
<div class="footer__right">
|
|
</div>
|
|
|
|
</div>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<script type="module" src="scripts/lobby.js"></script>
|
|
</body>
|
|
</html> |