222 lines
8.4 KiB
HTML
222 lines
8.4 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="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="styles/index.css" />
|
||
</head>
|
||
<body>
|
||
<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">
|
||
<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">
|
||
<a href="#hero" class="nav__link">Play</a>
|
||
<a href="#about" class="nav__link">How to play</a>
|
||
<a href="#register" class="nav__cta">Login / Register</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<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"><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 it works</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="globe-card reveal reveal-delay-1">
|
||
<div class="globe">
|
||
<div class="continent c1"></div>
|
||
<div class="continent c2"></div>
|
||
<div class="continent c3"></div>
|
||
<div class="continent c4"></div>
|
||
<div class="globe-line gl1"></div>
|
||
<div class="globe-line gl2"></div>
|
||
<div class="globe-line gl3"></div>
|
||
<div class="globe-line gl4"></div>
|
||
</div>
|
||
|
||
<div class="globe-badge gb--score">
|
||
<span class="gb__dot gb__dot--green"></span>
|
||
<span>Score: 94%</span>
|
||
</div>
|
||
|
||
<div class="globe-badge gb--country">
|
||
<span class="gb__dot gb__dot--blue"></span>
|
||
<span>Norway — Round 3</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
<section class="about" id="about">
|
||
<div class="container about__inner">
|
||
|
||
<div class="about__left">
|
||
<p class="section-label reveal">About the game</p>
|
||
<h2 class="section-title reveal reveal-delay-1">What it is &<br>How to play</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="mini-globe-wrap reveal reveal-delay-3">
|
||
<div class="map-outline">
|
||
<svg viewBox="0 0 100 130" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M50 4 L78 14 L90 34 L82 56 L88 82 L62 110 L36 100 L16 76 L18 46 Z"
|
||
fill="rgba(26,127,196,.12)"
|
||
stroke="var(--sea)"
|
||
stroke-width="2.5"
|
||
stroke-linejoin="round"/>
|
||
<path d="M50 4 L78 14 L90 34 L82 56 L88 82 L62 110 L36 100 L16 76 L18 46 Z"
|
||
fill="none"
|
||
stroke="var(--leaf)"
|
||
stroke-width="1.5"
|
||
stroke-dasharray="5 4"
|
||
stroke-linejoin="round"
|
||
transform="translate(4,-2) scale(0.96) translate(-2,2)"/>
|
||
</svg>
|
||
</div>
|
||
</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">Join the game</p>
|
||
<h2 class="section-title">Create your<br>account</h2>
|
||
<p class="register__desc">
|
||
Sign up to track your progress, compete on the leaderboard, and save your match history. Frontend-only for now — backend coming soon.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="register__card reveal reveal-delay-1">
|
||
<p class="card-title">Register</p>
|
||
|
||
<div class="form">
|
||
<div class="field">
|
||
<label for="username">Username</label>
|
||
<input id="username" type="text" placeholder="e.g. mapmaster42" autocomplete="username" />
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="email">Email address</label>
|
||
<input id="email" type="email" placeholder="you@example.com" autocomplete="email" />
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="password">Password</label>
|
||
<input id="password" type="password" placeholder="Min. 8 characters" autocomplete="new-password" />
|
||
</div>
|
||
|
||
<button type="button" class="btn btn--primary btn--full" id="reg-btn">
|
||
Create account
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</button>
|
||
|
||
<p class="form-footer">Already have an account? <a href="#" style="color:var(--sea);font-weight:600;">Log in</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ─── FOOTER ─── -->
|
||
<footer class="footer">
|
||
<div class="container footer__inner">
|
||
|
||
<div class="footer__left">
|
||
<a href="#hero" class="footer__brand">GeoDraw</a>
|
||
<p class="footer__sub">© 2026 · Browser geography game</p>
|
||
</div>
|
||
|
||
<div class="footer__center">
|
||
<p class="footer__label">Follow us</p>
|
||
<div class="socials">
|
||
<a href="#" class="social" aria-label="Facebook">f</a>
|
||
<a href="#" class="social" aria-label="YouTube">▶</a>
|
||
<a href="#" class="social" aria-label="LinkedIn">in</a>
|
||
<a href="#" class="social" aria-label="X / Twitter">𝕏</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer__right">
|
||
<a href="#" class="footer__link">Impressum</a>
|
||
<a href="#" class="footer__link">Datenschutz</a>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
</div><!-- /wrap -->
|
||
|
||
<script src="scripts/index.js"></script>
|
||
</body>
|
||
</html> |