96 lines
2.9 KiB
HTML
96 lines
2.9 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 — Leaderboard</title>
|
|
<link rel="stylesheet" href="./styles/main.css" />
|
|
<link rel="stylesheet" href="./styles/leader.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="lobby.html" class="nav__cta">Play again →</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="container lb-page">
|
|
<div class="lb-inner">
|
|
|
|
<div class="lb-head">
|
|
<div>
|
|
<p class="section-label">Top players</p>
|
|
<h1 class="lb-title">Leader<em>board</em></h1>
|
|
</div>
|
|
<div class="lb-actions">
|
|
<a href="lobby.html" class="btn btn--primary btn--sm">Play again →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="lb-table" id="lb-table">
|
|
<div class="lb-table-head">
|
|
<span class="lb-th">#</span>
|
|
<span class="lb-th">Player</span>
|
|
<span class="lb-th hide-sm right">Rounds</span>
|
|
<span class="lb-th hide-sm right">Date</span>
|
|
<span class="lb-th right">Score</span>
|
|
</div>
|
|
<div class="lb-body" id="lb-body">
|
|
<!-- filled by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<div id="your-bar" class="your-score-bar" style="display:none">
|
|
<p class="your-score-bar__text">Your latest: <strong id="your-bar-name">—</strong></p>
|
|
<p class="your-score-bar__text">Score: <strong id="your-bar-score" style="color:var(--sea)">—</strong> / 300</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</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 src="scripts/storage.js"></script>
|
|
<script src="scripts/leaderboard.js"></script>
|
|
</body>
|
|
</html>
|