| <!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; |
| } |
| #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; |
| } |
| #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> |
