Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>GeoGuess — you vs machines</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <svg width="0" height="0" style="position:absolute" aria-hidden="true"> | |
| <symbol id="i-globe" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.6 3.8 5.6 3.8 9s-1.2 6.4-3.8 9c-2.6-2.6-3.8-5.6-3.8-9S9.4 5.6 12 3z"/></g></symbol> | |
| <symbol id="i-pad" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M7 7h10a5 5 0 0 1 4.9 6l-.8 3.6a2.5 2.5 0 0 1-4.3 1.1L14.5 15h-5l-2.3 2.7a2.5 2.5 0 0 1-4.3-1.1L2.1 13A5 5 0 0 1 7 7z"/><path d="M7.5 10v3M6 11.5h3"/><circle cx="16" cy="10.5" r=".6" fill="currentColor"/><circle cx="17.5" cy="12.5" r=".6" fill="currentColor"/></g></symbol> | |
| <symbol id="i-bot" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><rect x="4" y="7" width="16" height="12" rx="3"/><path d="M12 3v4M9.5 12v1.5M14.5 12v1.5M1.5 12v3M22.5 12v3"/></g></symbol> | |
| <symbol id="i-lock" viewBox="0 0 24 24"><path fill="currentColor" d="M7 10V8a5 5 0 0 1 10 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h6V8a3 3 0 0 0-6 0v2z"/></symbol> | |
| <symbol id="i-check" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" d="M6 12.5l4 4 8-9"/></symbol> | |
| <symbol id="i-info" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 7.5v.5" stroke-linecap="round"/></g></symbol> | |
| <symbol id="i-pen" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" d="M4 20l1-4L16 5l3 3L8 19l-4 1zM14 7l3 3"/></symbol> | |
| <symbol id="i-back" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M20 12H5M11 6l-6 6 6 6"/></symbol> | |
| </svg> | |
| <header class="topbar"> | |
| <a class="brand" href="/"><span class="logo"><img src="/static/icons/earth.svg" alt=""></span><span>GeoGuess</span></a> | |
| <nav> | |
| <button id="nav-rules" class="link">How it works</button> | |
| <a id="nav-traces" class="link" target="_blank" rel="noopener">Traces</a> | |
| <span id="nav-auth"></span> | |
| </nav> | |
| </header> | |
| <!-- ============ LOBBY ============ --> | |
| <section id="lobby" class="screen active"> | |
| <div class="lobby-wrap"> | |
| <div class="hero"> | |
| <p>Same drop, same clock. You roam Street View while AI agents walk, look, zoom and pin with tools. | |
| Their feed stays blind until you lock in: you see what they do, never what they see.</p> | |
| </div> | |
| <div class="lobby-grid"> | |
| <div class="game-col"> | |
| <section class="panel"> | |
| <header class="panel-head"><span class="ico"><svg><use href="#i-pad"/></svg></span><h2>Your Game</h2></header> | |
| <div class="panel-body"> | |
| <div class="player-row"> | |
| <span id="player-avatar" class="avatar md human"></span> | |
| <input id="player-name" maxlength="40" placeholder="Your name" autocomplete="nickname"> | |
| <button id="name-change" class="link muted">Change <svg class="i"><use href="#i-pen"/></svg></button> | |
| <span id="sign-out-slot"></span> | |
| </div> | |
| <h3 class="label">Map</h3> | |
| <div id="mode-picker" class="segmented"></div> | |
| <div id="rules-hint" class="stats"></div> | |
| <p id="login-note" class="note hidden"><svg class="i"><use href="#i-info"/></svg> | |
| <span>Sign in to unlock the open models and the rest of the roster. Inference runs on your HF account.</span></p> | |
| </div> | |
| </section> | |
| <div class="cta"> | |
| <a id="hf-login" class="btn dark hidden" href="/oauth/huggingface/login">Sign in with Hugging Face</a> | |
| <button id="start-btn" class="btn primary">Start Match</button> | |
| <span id="lobby-error" class="error"></span> | |
| </div> | |
| </div> | |
| <section class="panel opponents"> | |
| <header class="panel-head"><span class="ico"><svg><use href="#i-bot"/></svg></span><h2>Select Opponents</h2> | |
| <span class="count" id="opp-count"></span></header> | |
| <div class="panel-body"> | |
| <div id="model-grid" class="roster"></div> | |
| <p class="note"><svg class="i"><use href="#i-info"/></svg><span id="key-hint"></span></p> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ============ PLAY ============ --> | |
| <section id="play" class="screen"> | |
| <div id="pano"></div> | |
| <button id="return-btn" class="btn dark return" title="Back to where you started"><svg class="i"><use href="#i-back"/></svg> Back to start</button> | |
| <div class="scoreboard"> | |
| <div class="cell round"><b id="hud-round">1/3</b><small>Rounds</small></div> | |
| <div class="timer" id="hud-timer">3:00</div> | |
| <div class="cell score"><b id="hud-score">0</b><small>Score</small></div> | |
| </div> | |
| <aside id="rivals" class="rivals"> | |
| <div class="rivals-head"><span>Rivals</span><span class="live"><i></i>Live <i></i><span id="live-mode">Blind</span> | |
| <button id="traces-toggle" class="traces-toggle hidden" title="Show or hide the agents' traces">Collapse</button></span></div> | |
| <div id="rival-list"></div> | |
| </aside> | |
| <div id="guess-box" class="guess-box"> | |
| <div id="guess-map"></div> | |
| <button id="guess-btn" class="btn dark" disabled>Place your Pin</button> | |
| </div> | |
| <div id="locked-banner" class="locked-banner hidden"> | |
| <b>Locked in.</b> <span id="waiting-text">Waiting for the machines…</span> | |
| </div> | |
| </section> | |
| <!-- ============ REVEAL ============ --> | |
| <section id="reveal" class="screen"> | |
| <div id="reveal-map"></div> | |
| <aside class="reveal-panel"> | |
| <div class="reveal-head"> | |
| <span class="eyebrow" id="reveal-title">Round 1</span> | |
| <h2 id="reveal-headline"></h2> | |
| <div id="reveal-sub" class="muted"></div> | |
| </div> | |
| <div id="round-table"></div> | |
| <div id="replay" class="replay hidden"> | |
| <div class="replay-head"> | |
| <button id="replay-back" class="btn dark small"><svg class="i"><use href="#i-back"/></svg> Results</button> | |
| <b id="replay-title"></b> | |
| </div> | |
| <div id="replay-body"></div> | |
| </div> | |
| <div class="reveal-actions"> | |
| <button id="next-btn" class="btn primary">Next round →</button> | |
| </div> | |
| </aside> | |
| </section> | |
| <!-- ============ FINAL ============ --> | |
| <section id="final" class="screen"> | |
| <div class="final-wrap"> | |
| <span class="eyebrow">Final results</span> | |
| <h1 id="final-title">Final results</h1> | |
| <p id="final-sub" class="muted"></p> | |
| <div id="podium" class="podium"></div> | |
| <div id="final-table"></div> | |
| <button id="again-btn" class="btn primary">Rematch</button> | |
| </div> | |
| </section> | |
| <div id="rules-modal" class="modal hidden"> | |
| <div class="modal-card"> | |
| <header class="panel-head"><span class="ico"><svg><use href="#i-info"/></svg></span><h2>How it works</h2></header> | |
| <div class="panel-body" id="rules-body"></div> | |
| </div> | |
| </div> | |
| <div id="loading" class="loading hidden"><div class="spinner"></div><span id="loading-text">Finding a place…</span></div> | |
| <div id="lightbox" class="lightbox hidden"><img alt=""></div> | |
| <script src="/static/app.js"></script> | |
| </body> | |
| </html> | |