97 lines
3.3 KiB
HTML
97 lines
3.3 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 — Results</title>
|
||
<link rel="stylesheet" href="styles/main.css" />
|
||
<link rel="stylesheet" href="styles/results.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" 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>
|
||
<a href="lobby.html" class="nav__cta">Play again →</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="container results-page">
|
||
<div class="results-inner">
|
||
|
||
<div class="results-header">
|
||
<span class="results-emoji" id="results-emoji">🌍</span>
|
||
<h1 class="results-title" id="results-title">Game over!</h1>
|
||
<p class="results-player">Played by <strong id="results-player">—</strong></p>
|
||
</div>
|
||
|
||
<div class="score-total-card">
|
||
<p class="score-total-label">Total Score</p>
|
||
<div class="score-total-num">
|
||
<span id="total-score">0</span><span class="score-total-max"> / 300</span>
|
||
</div>
|
||
<span class="score-grade" id="total-grade">—</span>
|
||
</div>
|
||
|
||
<div class="rounds-card">
|
||
<p class="rounds-card-title">Round breakdown</p>
|
||
<div class="round-rows" id="round-rows">
|
||
<!-- filled by JS -->
|
||
</div>
|
||
<div class="countries-row" id="countries-row"></div>
|
||
</div>
|
||
|
||
<div class="results-actions">
|
||
<a href="lobby.html" class="btn btn--primary">Play Again →</a>
|
||
<a href="leaderboard.html" class="btn btn--ghost">🏆 Leaderboard</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
<footer class="footer">
|
||
<div class="container footer__inner">
|
||
<div class="footer__left">
|
||
<a href="index.html" 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">𝕏</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>
|
||
|
||
<script type="module" src="scripts/results.js"></script>
|
||
</body>
|
||
</html> |