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