Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Admin Panel - LLM GeoGuessr</title> | |
| <link rel="stylesheet" href="{{ base_path }}/static/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="{{ base_path }}/static/admin.js"></script> | |
| <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ google_maps_api_key }}&libraries=drawing&callback=initAdminMap&loading=async"></script> | |
| </body> | |
| </html> | |