Something went wrong. Try again.
TV-friendly front end for the TimeGuessr daily
Something went wrong. Try again.
5.4 kB · 119 lines
HTML
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Temporamancer</title> <meta name="description" content="A TV-friendly way to play the TimeGuessr daily."> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" crossorigin=""> <link rel="stylesheet" href="/style.css"></head><body> <main id="stage" class="phase-loading"> <div id="photo-wrap"> <img id="photo" alt="" draggable="false"> <div id="photo-status" class="status">Loading today's daily…</div> </div>
<header id="hud"> <div class="chip"><span class="chip-label">Daily</span><strong id="hud-no">—</strong></div> <div class="chip"><span class="chip-label">Round</span><strong id="hud-round">—</strong></div> <div class="chip"><span class="chip-label">Score</span><strong id="hud-score">0</strong></div> </header>
<div id="photo-tools"> <button class="tool" data-action="zoom-in" aria-label="Zoom in" title="Zoom in (+)">+</button> <button class="tool" data-action="zoom-out" aria-label="Zoom out" title="Zoom out (−)">−</button> <button class="tool" data-action="fill" id="fill-btn" aria-label="Fill the screen" title="Fill the screen (F)">⤢</button> <button class="tool" data-action="help" aria-label="Help" title="Controls (?)">?</button> </div>
<aside id="year-panel" class="panel"> <div class="year-row"> <button class="step" data-step="-1" aria-label="Previous year">◀</button> <output id="year-out" for="year-range">1962</output> <button class="step" data-step="1" aria-label="Next year">▶</button> </div> <input id="year-range" type="range" min="1900" max="2026" step="1" value="1962" aria-label="Year"> <div class="year-scale"><span id="year-min">1900</span><span id="year-max">2026</span></div> <button id="guess-btn" disabled>Guess</button> </aside>
<aside id="map-panel" class="panel"> <div id="map"></div> <button id="map-pin" class="tool" aria-pressed="false" aria-label="Keep the map open" title="Keep the map open (M)">⌖</button> </aside> </main>
<section id="results" class="overlay" hidden> <div class="overlay-inner results-grid"> <div id="results-map"></div> <div class="results-detail"> <p class="eyebrow" id="results-eyebrow">Round 1 of 5</p> <h2 id="results-headline"></h2> <p id="results-sub"></p> <dl class="scores"> <div class="score-row"> <dt>Year</dt> <dd><span id="score-year">0</span><small>/ 5,000</small><i class="bar"><b id="bar-year"></b></i></dd> </div> <div class="score-row"> <dt>Location</dt> <dd><span id="score-dist">0</span><small>/ 5,000</small><i class="bar"><b id="bar-dist"></b></i></dd> </div> <div class="score-row total"> <dt>Round</dt> <dd><span id="score-round">0</span><small>/ 10,000</small></dd> </div> </dl> <figure class="caption"> <img id="results-thumb" alt=""> <figcaption> <p id="results-desc"></p> <p class="license" id="results-license"></p> </figcaption> </figure> <div class="actions"> <button id="next-btn" class="primary">Next round</button> <span class="kbd-hint">Enter</span> <p class="running">Total so far <strong id="results-total">0</strong></p> </div> </div> </div> </section>
<section id="final" class="overlay" hidden> <div class="overlay-inner final-inner"> <p class="eyebrow" id="final-eyebrow">Daily complete</p> <h1 class="final-total"><span id="final-score">0</span><small>/ 50,000</small></h1> <ol id="final-rounds" class="final-rounds"></ol> <p class="final-foot">A new daily arrives tomorrow. <span class="muted">Shift+R twice replays today.</span></p> </div> </section>
<section id="help" class="overlay" hidden> <div class="overlay-inner help-inner"> <h2>Controls</h2> <dl class="keys"> <dt><kbd>←</kbd> <kbd>→</kbd></dt><dd>Year ±1 (hold <kbd>Shift</kbd> for ±10)</dd> <dt><kbd>↑</kbd> <kbd>↓</kbd></dt><dd>Year ±10</dd> <dt><kbd>0</kbd>–<kbd>9</kbd></dt><dd>Type a four-digit year</dd> <dt><kbd>Enter</kbd></dt><dd>Submit your guess, then advance to the next round</dd> <dt><kbd>M</kbd></dt><dd>Keep the map expanded</dd> <dt><kbd>Esc</kbd></dt><dd>Clear the pin</dd> <dt><kbd>Scroll</kbd></dt><dd>Zoom the photo at the cursor, then drag to pan</dd> <dt><kbd>+</kbd> <kbd>−</kbd> <kbd>Backspace</kbd></dt><dd>Zoom the photo in, out, and reset</dd> <dt><kbd>F</kbd></dt><dd>Toggle filling the whole screen with the photo</dd> <dt><kbd>U</kbd></dt><dd>Toggle miles and kilometres</dd> <dt><kbd>Shift</kbd>+<kbd>R</kbd></dt><dd>Press twice to replay today's daily from round one</dd> </dl> <p class="muted">Press any key to close</p> </div> </section>
<div id="toast" hidden></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" crossorigin=""></script> <script src="/app.js"></script></body></html>