239 lines
10 KiB
HTML
239 lines
10 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</title>
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
<link rel="stylesheet" href="styles/index.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="#hero" 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="#about" class="nav__link">How to play</a>
|
|
<a href="#register" class="nav__cta">Play</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
|
|
<!-- ─── HERO ─── -->
|
|
<section class="hero" id="hero">
|
|
<div class="container hero__inner">
|
|
|
|
<div class="hero__content">
|
|
<div class="eyebrow reveal">
|
|
<span class="eyebrow__dot"></span>
|
|
Browser geography game
|
|
</div>
|
|
|
|
<h1 class="hero__title reveal reveal-delay-1">
|
|
Draw.<br><em>Compare.</em><br>Win.
|
|
</h1>
|
|
|
|
<p class="hero__desc reveal reveal-delay-2">
|
|
GeoDraw challenges you to sketch country borders from memory. The more accurate your drawing, the higher your score. Compete with players worldwide.
|
|
</p>
|
|
|
|
<div class="hero__actions reveal reveal-delay-3">
|
|
<a href="#register" class="btn btn--primary">
|
|
Start Playing
|
|
<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>
|
|
</a>
|
|
<a href="#about" class="btn btn--ghost">How to play</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="globe-card reveal reveal-delay-1">
|
|
<div class="globe">
|
|
<div class="continent continent--a"></div>
|
|
<div class="continent continent--b"></div>
|
|
<div class="continent continent--c"></div>
|
|
<div class="continent continent--d"></div>
|
|
<div class="globe-line globe-line--meridian-sm"></div>
|
|
<div class="globe-line globe-line--meridian-lg"></div>
|
|
<div class="globe-line globe-line--parallel-sm"></div>
|
|
<div class="globe-line globe-line--parallel-lg"></div>
|
|
</div>
|
|
|
|
<div class="globe-badge globe-badge--score">
|
|
<span class="globe-badge__dot globe-badge__dot--green"></span>
|
|
<span>Score: 94%</span>
|
|
</div>
|
|
|
|
<div class="globe-badge globe-badge--country">
|
|
<span class="globe-badge__dot globe-badge__dot--blue"></span>
|
|
<span>Norway — Round 3</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── ABOUT ─── -->
|
|
<section class="about" id="about">
|
|
<div class="container about__inner">
|
|
|
|
<div class="about__left">
|
|
<p class="section-label reveal">How to play</p>
|
|
<h2 class="section-title reveal reveal-delay-1">About<br>the Game</h2>
|
|
<p class="about__desc reveal reveal-delay-2">
|
|
GeoDraw is a competitive browser game built on memory and precision. You get a country name, sketch its outline, and the system calculates how close you were to the real border.
|
|
</p>
|
|
|
|
<div class="game-preview reveal reveal-delay-3">
|
|
<svg class="game-preview__svg" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
|
<!-- Grid lines -->
|
|
<line x1="0" y1="66" x2="200" y2="66" stroke="rgba(11,31,42,.06)" stroke-width="1"/>
|
|
<line x1="0" y1="133" x2="200" y2="133" stroke="rgba(11,31,42,.06)" stroke-width="1"/>
|
|
<line x1="66" y1="0" x2="66" y2="200" stroke="rgba(11,31,42,.06)" stroke-width="1"/>
|
|
<line x1="133" y1="0" x2="133" y2="200" stroke="rgba(11,31,42,.06)" stroke-width="1"/>
|
|
<!-- Reference outline (filled) -->
|
|
<path d="M100 22 L148 40 L162 76 L150 112 L124 148 L80 142 L52 108 L54 66 Z"
|
|
fill="rgba(26,127,196,.10)"
|
|
stroke="rgba(26,127,196,.5)"
|
|
stroke-width="2"
|
|
stroke-linejoin="round"/>
|
|
<!-- Player's drawn path -->
|
|
<path d="M96 26 L152 44 L164 82 L146 118 L120 152 L76 144 L48 106 L52 62 Z"
|
|
fill="none"
|
|
stroke="#1a7fc4"
|
|
stroke-width="2.5"
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"/>
|
|
<!-- City dot: Bern -->
|
|
<circle cx="96" cy="100" r="4" fill="rgba(240,180,40,.9)"/>
|
|
<circle cx="96" cy="100" r="4" fill="none" stroke="white" stroke-width="1.5"/>
|
|
<!-- City dot: Zurich -->
|
|
<circle cx="118" cy="72" r="4" fill="rgba(240,180,40,.9)"/>
|
|
<circle cx="118" cy="72" r="4" fill="none" stroke="white" stroke-width="1.5"/>
|
|
<!-- Score badge -->
|
|
<rect x="118" y="22" width="62" height="26" rx="8" fill="white" filter="url(#shadow)"/>
|
|
<defs>
|
|
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="rgba(11,31,42,.12)"/>
|
|
</filter>
|
|
</defs>
|
|
<circle cx="131" cy="35" r="4" fill="#41b869"/>
|
|
<text x="139" y="39" font-family="Syne, sans-serif" font-weight="700" font-size="11" fill="#0b1f2a">82%</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="about__right">
|
|
<div class="steps">
|
|
<div class="step reveal">
|
|
<div class="step__num">01</div>
|
|
<div class="step__body">
|
|
<p class="step__title">Get a country</p>
|
|
<p class="step__text">Each round you receive a random country name from around the world.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step reveal reveal-delay-1">
|
|
<div class="step__num">02</div>
|
|
<div class="step__body">
|
|
<p class="step__title">Draw from memory</p>
|
|
<p class="step__text">Sketch the country's border on a blank canvas — no hints, pure memory.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step reveal reveal-delay-2">
|
|
<div class="step__num">03</div>
|
|
<div class="step__body">
|
|
<p class="step__title">Compare & score</p>
|
|
<p class="step__text">Your drawing is overlaid on the real border and scored by accuracy percentage.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ─── REGISTER ─── -->
|
|
<section class="register" id="register">
|
|
<div class="container register__inner">
|
|
|
|
<div class="register__intro reveal">
|
|
<p class="section-label">Play</p>
|
|
<h2 class="section-title">Create or join<br>a lobby</h2>
|
|
<p class="register__desc">
|
|
Create your own lobby and share the name with friends, or enter an existing lobby name to join their game.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="register__card reveal reveal-delay-1">
|
|
|
|
<div class="lobby-toggle" role="group" aria-label="Lobby action">
|
|
<button type="button" class="lobby-toggle__btn lobby-toggle__btn--active" id="toggle-create-btn">Create</button>
|
|
<button type="button" class="lobby-toggle__btn" id="toggle-join-btn">Join</button>
|
|
</div>
|
|
|
|
<div id="form-create">
|
|
<p class="card-title">Create a game</p>
|
|
<div class="form">
|
|
<div class="field">
|
|
<label for="lobby-create">Lobby name</label>
|
|
<input id="lobby-create" type="text" placeholder="myLobby" />
|
|
</div>
|
|
<button type="button" class="btn btn--primary btn--full" id="reg-btn">
|
|
Create 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>
|
|
<span class="field-error" id="lobby-error" role="alert"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="form-join" hidden>
|
|
<p class="card-title">Join a game</p>
|
|
<div class="form">
|
|
<div class="field">
|
|
<label for="lobby-join">Lobby name</label>
|
|
<input id="lobby-join" type="text" placeholder="myLobby" />
|
|
</div>
|
|
<button type="button" class="btn btn--primary btn--full" id="join-btn">
|
|
Join 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>
|
|
<span class="field-error" id="join-error" role="alert"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<div class="container footer__inner">
|
|
<div class="footer__center">
|
|
<a href="#hero" class="footer__brand">GeoDraw</a>
|
|
<p class="footer__sub">Browser geography game</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
</div><!-- /wrap -->
|
|
|
|
<script type="module" src="scripts/index.js"></script>
|
|
</body>
|
|
</html> |