Upload 24 files

static/admin.js

@@ -0,0 +1,143 @@
+let map;
+let drawingManager;
+let lastDrawnShape = null;
+let displayedShapes = [];
+
+const difficultyColors = {
+    easy: '#34A853',   // Green
+    medium: '#F9AB00', // Yellow
+    hard: '#EA4335'    // Red
+};
+
+function initAdminMap() {
+    map = new google.maps.Map(document.getElementById('map'), {
+        center: { lat: 20, lng: 0 },
+        zoom: 2,
+    });
+
+    drawingManager = new google.maps.drawing.DrawingManager({
+        drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
+        drawingControl: true,
+        drawingControlOptions: {
+            position: google.maps.ControlPosition.TOP_CENTER,
+            drawingModes: [google.maps.drawing.OverlayType.RECTANGLE],
+        },
+        rectangleOptions: {
+            fillColor: '#F97316',
+            fillOpacity: 0.3,
+            strokeWeight: 1,
+            clickable: true,
+            editable: true,
+            zIndex: 1,
+        },
+    });
+
+    drawingManager.setMap(map);
+
+    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
+        if (lastDrawnShape) {
+            lastDrawnShape.setMap(null);
+        }
+        lastDrawnShape = event.overlay;
+        drawingManager.setDrawingMode(null); // Exit drawing mode
+        document.getElementById('save-zone').disabled = false;
+    });
+
+    document.getElementById('save-zone').addEventListener('click', saveLastZone);
+    document.getElementById('new-zone-btn').addEventListener('click', () => {
+        drawingManager.setDrawingMode(google.maps.drawing.OverlayType.RECTANGLE);
+        document.getElementById('save-zone').disabled = true;
+    });
+
+    loadExistingZones();
+}
+
+function saveLastZone() {
+    if (!lastDrawnShape) {
+        alert('Please draw a zone first.');
+        return;
+    }
+
+    const difficulty = document.getElementById('difficulty-select').value;
+    const bounds = lastDrawnShape.getBounds().toJSON();
+
+    const zoneData = {
+        type: 'rectangle',
+        bounds: bounds,
+    };
+
+    fetch('/api/zones', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ difficulty: difficulty, zone: zoneData }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        const statusMsg = document.getElementById('status-message');
+        statusMsg.textContent = data.message || `Error: ${data.error}`;
+        setTimeout(() => statusMsg.textContent = '', 3000);
+        
+        // Clean up the drawn shape and reload all zones to get the new one with its listener
+        if (lastDrawnShape) {
+            lastDrawnShape.setMap(null);
+            lastDrawnShape = null;
+        }
+        document.getElementById('save-zone').disabled = true;
+        loadExistingZones();
+    });
+}
+
+function loadExistingZones() {
+    // Clear existing shapes from the map
+    displayedShapes.forEach(shape => shape.setMap(null));
+    displayedShapes = [];
+
+    fetch('/api/zones')
+        .then(response => response.json())
+        .then(zones => {
+            for (const difficulty in zones) {
+                zones[difficulty].forEach(zone => {
+                    if (zone.type === 'rectangle') {
+                        const rectangle = new google.maps.Rectangle({
+                            bounds: zone.bounds,
+                            map: map,
+                            fillColor: difficultyColors[difficulty],
+                            fillOpacity: 0.35,
+                            strokeColor: difficultyColors[difficulty],
+                            strokeWeight: 2,
+                            editable: false,
+                            clickable: true,
+                        });
+
+                        rectangle.zoneId = zone.id;
+                        
+                        google.maps.event.addListener(rectangle, 'click', function() {
+                            if (confirm('Are you sure you want to delete this zone?')) {
+                                deleteZone(this.zoneId, this);
+                            }
+                        });
+
+                        displayedShapes.push(rectangle);
+                    }
+                });
+            }
+        });
+}
+
+function deleteZone(zoneId, shape) {
+    fetch('/api/zones', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ zone_id: zoneId })
+    })
+    .then(response => response.json())
+    .then(data => {
+        const statusMsg = document.getElementById('status-message');
+        statusMsg.textContent = data.message || `Error: ${data.error}`;
+        setTimeout(() => statusMsg.textContent = '', 3000);
+
+        if (data.message) {
+            shape.setMap(null);
+        }
+    });
+} 

static/script.js

@@ -0,0 +1,412 @@
+let map, panorama, guessMarker, gameId, googleMapsApiKey;
+let startLocation;
+let onFirstLinksLoaded; // Promise that resolves when the first panorama links are loaded
+
+function initLobby() {
+    document.getElementById('new-game-form').addEventListener('submit', (e) => {
+        e.preventDefault();
+        startGame();
+    });
+    document.getElementById('replay-form').addEventListener('submit', (e) => {
+        e.preventDefault();
+        replayGame();
+    });
+    document.getElementById('play-again').addEventListener('click', showLobby);
+}
+
+function showLobby() {
+    document.getElementById('lobby-container').style.display = 'block';
+    document.getElementById('game-container').style.display = 'none';
+    document.getElementById('result-screen').style.display = 'none';
+}
+
+function showGame() {
+    document.getElementById('lobby-container').style.display = 'none';
+    document.getElementById('game-container').style.display = 'flex';
+    document.getElementById('result-screen').style.display = 'none';
+}
+
+function startGame() {
+    showGame();
+    const difficulty = document.getElementById('difficulty-select-lobby').value;
+    fetch('/start_game', { 
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ difficulty: difficulty })
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                alert(data.error);
+                showLobby();
+                return;
+            }
+            gameId = data.game_id;
+            startLocation = data.start_location;
+            googleMapsApiKey = data.google_maps_api_key;
+            
+            const chatLog = document.getElementById('chat-log');
+            chatLog.innerHTML = '';
+            addChatMessage('Agent', `New game started (ID: ${gameId}). Finding my location...`);
+
+            initStreetView(startLocation);
+            initMap();
+            
+            //runFakeAgent();
+        });
+}
+
+function replayGame() {
+    const replayId = document.getElementById('replay-id-input').value;
+    if (!replayId) {
+        alert('Please enter a Game ID to replay.');
+        return;
+    }
+
+    fetch(`/game/${replayId}/state`)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Game not found.');
+            }
+            return response.json();
+        })
+        .then(data => {
+            if (!data.game_over) {
+                alert('This game has not finished yet.');
+                return;
+            }
+            showGame();
+            gameId = replayId;
+            startLocation = data.start_location;
+
+            const chatLog = document.getElementById('chat-log');
+            chatLog.innerHTML = '';
+            addChatMessage('System', `Replaying game: ${gameId}`);
+
+            initStreetView(startLocation);
+            initMap(true); // isReplay = true
+            
+            replayActions(data.actions);
+        })
+        .catch(error => {
+            alert(error.message);
+        });
+}
+
+async function replayActions(actions) {
+    for (const action of actions) {
+        await sleep(2000);
+        if (action.type === 'move') {
+            addChatMessage('Agent (Replay)', `Moved to: ${action.location.lat.toFixed(4)}, ${action.location.lng.toFixed(4)}`);
+            panorama.setPosition(action.location);
+        } else if (action.type === 'guess') {
+            addChatMessage('Agent (Replay)', `Guessed: ${action.location.lat.toFixed(4)}, ${action.location.lng.toFixed(4)}`);
+            placeGuessMarker(action.location);
+            
+            await sleep(2000);
+            const resultData = {
+                guess_location: action.location,
+                actual_location: startLocation,
+                distance_km: action.result.distance_km,
+                score: action.result.score
+            };
+            showResultScreen(resultData);
+        }
+    }
+}
+
+function initStreetView(location) {
+    onFirstLinksLoaded = new Promise(resolve => {
+        panorama = new google.maps.StreetViewPanorama(
+            document.getElementById('streetview'), {
+                position: location,
+                pov: { heading: 34, pitch: 10 },
+                visible: true,
+                linksControl: true, // Ensure links are enabled
+                clickToGo: true,      // Ensure click-to-go is enabled
+            }
+        );
+
+        const linksChangedListener = panorama.addListener('links_changed', () => {
+            console.log("links_changed event fired for the first time.");
+            // We got links, resolve the promise, and remove the one-time listener.
+            google.maps.event.removeListener(linksChangedListener);
+            resolve();
+        });
+
+        panorama.addListener('position_changed', function() {
+            const newLocation = panorama.getPosition();
+            updateAgentLocation(newLocation.lat(), newLocation.lng());
+        });
+    });
+}
+
+function initMap(isReplay = false) {
+    map = new google.maps.Map(document.getElementById('map'), {
+        center: { lat: 0, lng: 0 },
+        zoom: 1,
+    });
+
+    if (!isReplay) {
+        map.addListener('click', function(e) {
+            placeGuessMarker(e.latLng);
+            makeGuess(e.latLng.lat(), e.latLng.lng());
+        });
+    }
+}
+
+function placeGuessMarker(location) {
+    if (guessMarker) {
+        guessMarker.setMap(null);
+    }
+    guessMarker = new google.maps.Marker({
+        position: location,
+        map: map
+    });
+    map.setCenter(location);
+}
+
+function addChatMessage(sender, message) {
+    const chatLog = document.getElementById('chat-log');
+    const messageElement = document.createElement('div');
+    messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
+    chatLog.appendChild(messageElement);
+    chatLog.scrollTop = chatLog.scrollHeight;
+}
+
+// --- Fake LLM Agent Logic ---
+
+async function runFakeAgent() {
+    addChatMessage('Agent', 'Initializing...');
+    console.log('runFakeAgent: Waiting for initial Street View data...');
+    
+    // Wait for the first links_changed event to ensure panorama is ready
+    await onFirstLinksLoaded;
+    await sleep(1000); // Wait a bit for the panorama to be fully rendered
+    
+    console.log('runFakeAgent: Initial data loaded. Starting navigation.');
+    await takeActionWithScreenshot('I have my bearings. Starting to move.');
+    await sleep(2000);
+
+    const numberOfMoves = 3;
+    let moved = false;
+
+    for (let i = 0; i < numberOfMoves; i++) {
+        addChatMessage('Agent', `Planning move ${i + 1}/${numberOfMoves}...`);
+        await sleep(1000);
+
+        // Let the agent look around
+        await takeActionWithScreenshot(`Let me check my surroundings...`);
+        await sleep(1000);
+        await turnCamera(-90); // Look 90 degrees left
+        await sleep(1500);
+        await turnCamera(180); // Look 180 degrees right (which is 90 deg right from origin)
+        await sleep(1500);
+        await turnCamera(-90); // Turn back to the front
+        await sleep(1000);
+
+        // The agent will always try to move forward in this simplified logic
+        moved = await agentMove('forward');
+        
+        console.log(`runFakeAgent: Move ${i + 1} result (moved):`, moved);
+        if (!moved) {
+            break; // Stop if we hit a dead end
+        }
+
+        // After moving, we need to wait for the new panorama to load its links
+        await new Promise(resolve => {
+            const listener = panorama.addListener('links_changed', () => {
+                google.maps.event.removeListener(listener);
+                resolve();
+            });
+        });
+        await sleep(2000); // Pause for the user to see the new location
+    }
+
+    addChatMessage('Agent', `I'm done moving. Now I will make a guess.`);
+    console.log('runFakeAgent: Finished moving, now making a guess.');
+    await makeEducatedGuess();
+}
+
+/**
+ * Moves the Street View agent in a specified direction.
+ * @param {('forward'|'backward'|'left'|'right'|number)} direction - The direction to move.
+ * @returns {Promise<boolean>} - True if the move was successful, false otherwise.
+ */
+async function agentMove(direction = 'forward') {
+    await takeActionWithScreenshot(`Trying to move ${direction}...`);
+
+    const links = panorama.getLinks();
+    if (!links || links.length === 0) {
+        addChatMessage('Agent', "I'm at a dead end, can't move from here.");
+        console.log('agentMove: No links found.');
+        return false;
+    }
+
+    const currentPov = panorama.getPov();
+    let targetHeading;
+
+    switch(direction) {
+        case 'forward':
+            targetHeading = currentPov.heading;
+            break;
+        case 'backward':
+            targetHeading = (currentPov.heading + 180) % 360;
+            break;
+        case 'left':
+            targetHeading = (currentPov.heading - 90 + 360) % 360;
+            break;
+        case 'right':
+            targetHeading = (currentPov.heading + 90) % 360;
+            break;
+        default:
+            if (typeof direction === 'number' && direction >= 0 && direction < 360) {
+                targetHeading = direction;
+            } else {
+                addChatMessage('Agent', `Unknown direction: ${direction}. Defaulting to forward.`);
+                targetHeading = currentPov.heading;
+            }
+            break;
+    }
+
+    let bestLink = null;
+    let minAngleDiff = 360;
+
+    await sleep(1000);
+
+    links.forEach(link => {
+        let diff = Math.abs(targetHeading - link.heading);
+        if (diff > 180) diff = 360 - diff; // Find the shortest angle
+
+        if (diff < minAngleDiff) {
+            minAngleDiff = diff;
+            bestLink = link;
+        }
+    });
+
+    if (bestLink) {
+        console.log(`agentMove: Best link found:`, bestLink, `with angle diff ${minAngleDiff}`);
+        await sleep(1500);
+        await takeActionWithScreenshot(`Best path is at ${bestLink.heading.toFixed(1)}° (a ${minAngleDiff.toFixed(1)}° turn). Moving...`);
+        
+        panorama.setPano(bestLink.pano);
+        return true;
+    } else {
+        // This case should be rare if there are any links at all
+        addChatMessage('Agent', "Couldn't find a suitable path in that direction.");
+        console.log('agentMove: No suitable link found.');
+        return false;
+    }
+}
+
+/**
+ * Turns the camera view relative to the current heading.
+ * @param {number} angle - The angle in degrees to turn. Negative values turn left, positive values turn right.
+ */
+async function turnCamera(angle) {
+    const currentPov = panorama.getPov();
+    const newHeading = (currentPov.heading + angle % 360 + 360) % 360;
+
+    const direction = angle < 0 ? 'left' : 'right';
+    await takeActionWithScreenshot(`Turning ${direction} by ${Math.abs(angle)} degrees.`);
+    
+    panorama.setPov({ heading: newHeading, pitch: currentPov.pitch });
+
+    await sleep(1000); // Simulate action time
+}
+
+async function makeEducatedGuess() {
+     // 2. Guess (a bit off from the start location to simulate a guess)
+     await takeActionWithScreenshot('Okay, I think I have an idea. I will make a guess in 10 seconds...');
+     await sleep(10000);
+     addChatMessage('Agent', 'Making my guess now!');
+
+     const guessLat = startLocation.lat + (Math.random() - 0.5) * 0.1;
+     const guessLng = startLocation.lng + (Math.random() - 0.5) * 0.1;
+ 
+     placeGuessMarker({ lat: guessLat, lng: guessLng });
+     makeGuess(guessLat, guessLng);
+}
+
+async function takeActionWithScreenshot(actionMessage) {
+    if (!googleMapsApiKey) {
+        addChatMessage('Agent', actionMessage); // Fallback if key is not available
+        console.warn("Google Maps API key not available for screenshot.");
+        return;
+    }
+
+    await sleep(500); // Give panorama a moment to update image
+
+    const pov = panorama.getPov();
+    const position = panorama.getPosition();
+    const location = `${position.lat()},${position.lng()}`;
+    
+    const imageUrl = `https://maps.googleapis.com/maps/api/streetview?size=400x250&location=${location}&heading=${pov.heading}&pitch=${pov.pitch}&fov=90&key=${googleMapsApiKey}`;
+
+    const message = `
+        ${actionMessage}<br>
+        <img src="${imageUrl}" alt="Agent's view" style="width: 100%; border-radius: 5px; margin-top: 5px; border: 1px solid #ccc;">
+    `;
+    addChatMessage('Agent', message);
+    console.log(`Action taken: ${actionMessage}`);
+}
+
+async function updateAgentLocation(lat, lng) {
+    await fetch(`/game/${gameId}/move`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ lat: lat, lng: lng }),
+    });
+}
+
+async function makeGuess(lat, lng) {
+    addChatMessage('You', `Guessed: ${lat.toFixed(4)}, ${lng.toFixed(4)}`);
+    const response = await fetch(`/game/${gameId}/guess`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ lat: lat, lng: lng }),
+    });
+    const result = await response.json();
+    showResultScreen(result);
+}
+
+function showResultScreen(result) {
+    document.getElementById('game-container').style.display = 'none';
+    document.getElementById('result-screen').style.display = 'block';
+
+    const resultSummary = document.getElementById('result-summary');
+    resultSummary.innerHTML = `
+        <p>Your guess was ${result.distance_km.toFixed(2)} km away.</p>
+        <p>You scored ${result.score.toFixed(0)} points.</p>
+    `;
+
+    const resultMap = new google.maps.Map(document.getElementById('result-map'), {
+        zoom: 3,
+        center: result.actual_location
+    });
+
+    new google.maps.Marker({
+        position: result.actual_location,
+        map: resultMap,
+        label: 'A' // Actual
+    });
+
+    new google.maps.Marker({
+        position: result.guess_location,
+        map: resultMap,
+        label: 'G' // Guess
+    });
+
+    new google.maps.Polyline({
+        path: [result.actual_location, result.guess_location],
+        geodesic: true,
+        strokeColor: '#F97316',
+        strokeOpacity: 1.0,
+        strokeWeight: 2,
+        map: resultMap
+    });
+}
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}

static/style.css

@@ -0,0 +1,169 @@
+:root {
+    --primary-color: #F97316; /* Orange */
+    --secondary-color: #EA580C; /* Darker Orange */
+    --accent-color: #FB923C; /* Lighter Orange */
+    --dark-color: #202124;
+    --light-color: #FFFBEB; /* Creamy White */
+    --border-radius: 8px;
+}
+
+body {
+    font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--light-color);
+    color: var(--dark-color);
+}
+
+h1 {
+    text-align: center;
+    margin: 20px 0;
+    color: var(--primary-color);
+    font-size: 2.5rem;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+#game-container {
+    display: flex;
+    justify-content: space-around;
+    margin: 20px;
+    height: 80vh;
+    gap: 20px;
+    display: none; /* Hidden by default */
+}
+
+#streetview-container {
+    width: 50%;
+    height: 100%;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+#map-container {
+    width: 30%;
+    height: 100%;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+#chat-container {
+    width: 20%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--border-radius);
+    background-color: white;
+    padding: 15px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+#streetview, #map, #result-map {
+    height: 100%;
+    width: 100%;
+    border-radius: var(--border-radius);
+}
+
+#chat-log {
+    flex-grow: 1;
+    overflow-y: auto;
+    margin-bottom: 15px;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-radius: var(--border-radius);
+}
+
+#chat-log div {
+    margin-bottom: 10px;
+    padding: 8px 12px;
+    background-color: white;
+    border-radius: 18px;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+#chat-log div strong {
+    color: var(--primary-color);
+}
+
+#controls {
+    display: flex;
+    justify-content: center;
+}
+
+button {
+    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+button:hover {
+    background: linear-gradient(135deg, #D9500B, #E56A15); /* Slightly darker gradient on hover */
+    transform: translateY(-1px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+}
+
+#result-screen {
+    margin: 20px auto;
+    max-width: 800px;
+    text-align: center;
+    background-color: white;
+    padding: 30px;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+#result-summary {
+    margin: 20px 0;
+    font-size: 1.2rem;
+}
+
+#result-summary p {
+    margin: 10px 0;
+}
+
+.marker-label {
+    color: white;
+    font-weight: bold;
+    text-align: center;
+    padding: 2px 6px;
+    border-radius: 50%;
+}
+
+#lobby-container {
+    max-width: 500px;
+    margin: 40px auto;
+    padding: 30px;
+    background-color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    text-align: center;
+}
+
+#lobby-container h2 {
+    margin-top: 0;
+    margin-bottom: 20px;
+}
+
+#lobby-container hr {
+    margin: 20px 0;
+    border: 0;
+    border-top: 1px solid #eee;
+}
+
+#lobby-container input {
+    width: calc(100% - 22px);
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: var(--border-radius);
+}
+
+/* Hide the address text in Street View */
+.gm-iv-address {
+    display: none !important;
+}

templates/admin.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Admin Panel - LLM GeoGuessr</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <style>
+        h1 {
+            color: var(--dark-color);
+            text-align: center;
+        }
+        #controls {
+            width: 90%;
+            max-width: 800px;
+            margin: 20px auto;
+            padding: 20px;
+            background-color: white;
+            border-radius: var(--border-radius);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            flex-wrap: wrap;
+        }
+        #controls h2 {
+            display: none; /* Title is obvious from context */
+        }
+        #controls .control-item {
+            margin: 5px 10px;
+        }
+        #controls .control-item p {
+            margin: 0;
+            font-size: 0.9rem;
+            color: #555;
+        }
+        #controls .control-item label {
+            margin-right: 5px;
+        }
+        #controls .control-item select,
+        #controls .control-item button {
+            width: 100%;
+            padding: 10px;
+            box-sizing: border-box; /* Ensures padding is included in the width */
+        }
+        #map {
+            height: 75vh;
+            margin: 0 auto;
+            width: calc(100% - 40px);
+            border-radius: var(--border-radius);
+        }
+    </style>
+</head>
+<body>
+    <h1>Admin Panel</h1>
+    <div id="controls">
+        <div class="control-item">
+            <p>Select "Draw" then use the rectangle tool on the map.</p>
+        </div>
+        <div class="control-item">
+            <button id="new-zone-btn">Draw New Zone</button>
+        </div>
+        <div class="control-item">
+            <label for="difficulty-select">Difficulty:</label>
+            <select id="difficulty-select">
+                <option value="easy">Easy</option>
+                <option value="medium">Medium</option>
+                <option value="hard">Hard</option>
+            </select>
+        </div>
+        <div class="control-item">
+            <button id="save-zone" disabled>Save Zone</button>
+        </div>
+    </div>
+    <div id="status-message-container" style="text-align: center; margin-bottom: 10px;">
+         <p id="status-message"></p>
+    </div>
+    <div id="map"></div>
+    <script src="{{ url_for('static', filename='admin.js') }}"></script>
+    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=drawing&callback=initAdminMap"></script>
+</body>
+</html> 

templates/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>LLM GeoGuessr</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <h1>LLM GeoGuessr</h1>
+
+    <div id="lobby-container">
+        <h2>Welcome</h2>
+        <form id="new-game-form">
+            <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 type="submit">Start New Game</button>
+        </form>
+        <hr>
+        <form id="replay-form">
+            <p>Or replay a previous game:</p>    
+            <input type="text" id="replay-id-input" placeholder="Enter Game ID">
+            <button type="submit">Replay Game</button>
+        </form>
+    </div>
+
+    <div id="game-container" style="display: none;">
+        <div id="streetview-container">
+            <div id="streetview"></div>
+        </div>
+        <div id="map-container">
+            <div id="map"></div>
+        </div>
+        <div id="chat-container">
+            <div id="chat-log"></div>
+            <div id="controls">
+                <!-- In-game controls can go here -->
+            </div>
+        </div>
+    </div>
+
+    <div id="result-screen" style="display: none;">
+        <h2>Results</h2>
+        <div id="result-map"></div>
+        <div id="result-summary"></div>
+        <button id="play-again">Back to Lobby</button>
+    </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=initLobby"></script>
+</body>
+</html>