File size: 3,008 Bytes
a303b0f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
    <title>LLM GeoGuessr</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <style>
        #auth-card, #gate-card { max-width: 560px; margin: 20px auto; background: white; padding: 24px; border-radius: var(--border-radius); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .muted { color: #666; font-size: 0.95rem; }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="referrer" content="no-referrer" />
    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin" />
    <meta http-equiv="Cross-Origin-Embedder-Policy" content="require-corp" />
    <meta http-equiv="X-Content-Type-Options" content="nosniff" />
    <meta http-equiv="X-Frame-Options" content="DENY" />
    <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
    <meta http-equiv="Cache-Control" content="no-store" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="google-maps-api-key" content="{{ google_maps_api_key }}" />
    <meta name="description" content="Daily GeoGuessr-style challenge with LLM rival" />
    <meta name="theme-color" content="#F97316" />
    <link rel="preconnect" href="https://maps.googleapis.com" crossorigin>
    <link rel="preconnect" href="https://maps.gstatic.com" crossorigin>
    <link rel="dns-prefetch" href="https://maps.googleapis.com">
    <link rel="dns-prefetch" href="https://maps.gstatic.com">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>🗺️</text></svg>">
    <meta name="robots" content="noindex, nofollow">
</head>
<body>
    <h1>LLM GeoGuessr</h1>

    <div id="auth-card">
        <div id="auth-section">
            <p class="muted">Sign in to play today’s single round set.</p>
            <a id="signin-btn" href="/login"><button>Sign in with Hugging Face</button></a>
            <div id="signedin" style="display:none;">
                <p>Signed in as <strong id="username"></strong></p>
                <a href="/logout"><button>Sign out</button></a>
            </div>
        </div>
    </div>

    <div id="gate-card">
        <div id="play-gate">
            <label for="difficulty-select-lobby">Choose a difficulty:</label>
            <select id="difficulty-select-lobby">
                <option value="easy">Easy</option>
                <option value="medium">Medium</option>
                <option value="hard">Hard</option>
            </select>
            <button id="start-btn" disabled>Start Today’s Game</button>
            <p id="limit-msg" class="muted" style="display:none;"></p>
        </div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&callback=initIndexApp"></script>
</body>
</html>