|
|
<!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"> |
|
|
|
|
|
</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> |
