Javascript/profile.html at master · bashmohandes/Javascript · GitHub

1
2
3
4
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name="theme-color" content="#101827"><title>Profile · JavaScript Arcade</title><script src="theme-init.js"></script><link rel="icon" href="icon.svg" type="image/svg+xml"><link rel="stylesheet" href="arcade.css"><style>
:root{color-scheme:light;--ink:#20352f;--muted:#65766f;--page:#f7f3eb;--glow:#68cab347;--panel:#fffdf8cc;--line:#20352f24;--field:#f3eee5;--stat:#20352f0a;--accent:#168267;--accent-contrast:#fff}:root[data-theme="dark"]{color-scheme:dark;--ink:#f7f8fc;--muted:#aab4c5;--page:#0d1420;--glow:#24516488;--panel:#182335cc;--line:#ffffff1c;--field:#0d1420;--stat:#ffffff0a;--accent:#83e6c3;--accent-contrast:#10271f}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:radial-gradient(circle at 10% 0,var(--glow),transparent 34rem),var(--page);font-family:Inter,system-ui,sans-serif}.shell{width:min(1000px,calc(100% - 32px));margin:auto;padding:36px 0 80px}.back{color:var(--accent);text-decoration:none}.hero{margin:70px 0 32px}h1{margin:.2em 0;font-size:clamp(42px,8vw,72px);letter-spacing:-.05em}.muted{color:var(--muted)}.panel{margin:18px 0;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat{padding:18px;background:var(--stat);border-radius:14px}.stat-game{display:block;color:var(--muted);font-size:13px}.stat-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}.stat-metrics div+div{padding-left:14px;border-left:1px solid var(--line)}.stat-metrics strong{display:block;font-size:24px;line-height:1.1}.stat-metrics small{display:block;margin-top:5px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}form{display:flex;flex-wrap:wrap;gap:10px}input,select,button{padding:11px 13px;color:inherit;background:var(--field);border:1px solid var(--line);border-radius:10px;font:inherit}button{color:var(--accent-contrast);background:var(--accent);font-weight:700;cursor:pointer}button:disabled{opacity:.45;cursor:default}table{width:100%;border-collapse:collapse}th,td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:12px;text-transform:uppercase}.tabs{display:flex;gap:8px;margin-bottom:12px}.tabs button[aria-pressed=true]{outline:2px solid var(--accent)}.pagination{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:16px}.pagination span{min-width:90px;color:var(--muted);text-align:center}.empty{padding:30px;text-align:center;color:var(--muted)}.achievement-summary{display:flex;align-items:baseline;gap:10px}.achievement-summary strong{font-size:34px}.profile-achievements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.profile-achievement{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:15px;background:var(--stat);border:1px solid var(--line);border-radius:14px}.profile-achievement.is-locked{filter:grayscale(1);opacity:.6}.profile-achievement .icon{font-size:26px}.profile-achievement strong,.profile-achievement small{display:block}.profile-achievement small{color:var(--muted)}.profile-achievement p{margin:4px 0;color:var(--muted);font-size:13px}.profile-achievement progress{width:100%;accent-color:var(--accent)}@media(max-width:650px){.grid,.profile-achievements{grid-template-columns:1fr}.table-wrap{overflow:auto}.hero{margin-top:35px}.tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tabs button{min-width:0;padding-inline:8px;font-size:13px}}
</style></head><body><main class="shell"><a class="back" href="index.html">← Back to games</a><section class="hero"><p class="muted">Your arcade</p><h1 id="profile-title">Scores & profile</h1><p class="muted" id="profile-note">Sign in to see your play history. Leaderboards are open to everyone.</p></section><section class="panel" id="account-panel" hidden><h2>Profile management</h2><form id="profile-form"><input name="gamertag" aria-label="Gamertag" minlength="3" maxlength="24" required><input name="passcode" aria-label="New passcode" type="password" minlength="4" maxlength="128" placeholder="New passcode (optional)"><button>Save profile</button></form><p id="profile-message" role="status"></p></section><section class="panel" id="stats-panel" hidden><h2>Your games</h2><div class="grid" id="stats"></div><h3>Recent games</h3><div class="table-wrap"><table><thead><tr><th>Game</th><th>Result</th><th>Score</th><th>Time</th><th>Played</th></tr></thead><tbody id="history"></tbody></table></div><nav class="pagination" id="history-pagination" aria-label="Game history pages" hidden><button type="button" data-page-action="previous">Previous</button><span id="history-page" aria-live="polite"></span><button type="button" data-page-action="next">Next</button></nav></section><section class="panel" id="achievements" hidden><div class="achievement-summary"><h2>Achievement cabinet</h2><strong id="achievement-count">0 / 0</strong></div><p class="muted">Every glorious badge, including the ones still plotting against you.</p><div class="profile-achievements" id="profile-achievements"></div></section><section class="panel" id="leaderboards"><h2>Top scores</h2><div class="tabs" id="game-tabs"><button data-game="pong" aria-pressed="true">Pong</button><button data-game="sudoku" aria-pressed="false">Sudoku</button><button data-game="minesweeper" aria-pressed="false">Minesweeper</button><button data-game="tictactoe" aria-pressed="false">Tic-tac-toe</button><button data-game="battletanks" aria-pressed="false">Battle Tanks</button></div><div class="table-wrap"><table><thead><tr><th>Rank</th><th>Gamertag</th><th>Score</th><th>Time</th><th>Details</th></tr></thead><tbody id="leaders"></tbody></table></div></section></main><script src="arcade.js"></script><script src="scripts/share-result.js"></script><script src="profile.js"></script></body></html>