summaryrefslogtreecommitdiff
path: root/dashboard_website/templates
diff options
context:
space:
mode:
authoritsGarrin <garrin.shieh@gmail.com>2023-11-07 10:40:14 -0500
committeritsGarrin <garrin.shieh@gmail.com>2023-11-07 10:40:14 -0500
commite2e38322580304b8c0168f3e3a8a3986d229b0fd (patch)
treeb4d6f99882ed5628b9447893e42e8421b4517d91 /dashboard_website/templates
parent8dad8eaf2d1a9992e2779053f306f6d0736886bf (diff)
parent20f22f05a8a7b049c6946ac056773bef954642e9 (diff)
Merge remote-tracking branch 'origin/master'
Diffstat (limited to 'dashboard_website/templates')
-rw-r--r--dashboard_website/templates/index.html169
1 files changed, 164 insertions, 5 deletions
diff --git a/dashboard_website/templates/index.html b/dashboard_website/templates/index.html
index ab90904..1317145 100644
--- a/dashboard_website/templates/index.html
+++ b/dashboard_website/templates/index.html
@@ -1,19 +1,178 @@
<!DOCTYPE html>
-<html>
+<html style="height:100%">
<head>
+ <title>MMHC HQ</title>
+ <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
+
<link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet.css') }}"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
- <link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet_mods.css') }}"/>
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}"/>
<script src="{{ url_for('static', filename='js/leaflet.js') }}"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
- <script src="{{ url_for('static', filename='js/map.js') }}"></script>
+ <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script>
+ <script src="{{ url_for('static', filename='js/utils.js') }}"></script>
+ <script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
</head>
-<body>
- <div id="map"></div>
+<body style="height:100%">
+ <style>
+ #map { height: 100%; }
+ * {
+ box-sizing: border-box;
+ }
+ html{
+ padding:0;
+ margin: 0;
+ height:100%;
+ }
+
+ body{
+ padding:0;
+ margin: 0;
+ height:100%;
+ }
+ .page-container {
+
+ display: flex;
+
+
+ background-color: black;
+ height: 100%;
+ gap: 5px;
+ height:100%;
+ padding:10px;
+
+ }
+ .page-container > div{
+ padding: 8px;
+ }
+
+
+ .left-column {
+ /* flex:0.75 1 auto; */
+ flex-grow:0;
+ flex-basis:75em;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .left-column > div{
+ background: black;
+ border: 3px double lightgray;
+ padding: 0px;
+ }
+ .page-title {
+ /* flex:0.2 1 auto; */
+ flex-grow:0.03;
+ display: flex;
+ align-items: center;
+ }
+ .map-frame {
+ /* flex:0.2 1 auto; */
+ flex-grow:1.0;
+ }
+ .route-controls {
+ /* flex:0.6 1 auto; */
+ flex-grow:0.15;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .right-column {
+ /* flex:0.25 1 auto; */
+ flex-grow:0;
+ flex-basis:25em;
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ }
+ .right-column > div{
+ background: black;
+ border: 3px double lightgray;
+ padding: 0px;
+ }
+ .clue-stats {
+ /* flex:0.2 1 auto; */
+ flex-grow:0.05;
+ display: flex;
+ flex-direction: column;
+ }
+ .bike-teams {
+ /* flex:0.2 1 auto; */
+ flex-grow:0.35;
+ display: flex;
+ flex-direction: column;
+ align-content:stretch;
+ }
+ .add-clue {
+ /* flex:0.6 1 auto; */
+ flex-grow:0.6;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .leaflet-popup-content {
+ color: black;
+ }
+ .leaflet-control-layers-overlays > label > span > span {
+ color: black;
+ }
+ .leaflet-bike-marker {
+ transition: all 5s;
+ }
+ input {
+ color: black;
+ }
+ button {
+ color: black;
+ }
+
+ </style>
+
+ <div class="page-container">
+
+ <div class="left-column">
+ <div class="page-title">
+ <h1 style="color:white;margin: 0px;margin-left:15px">CLUBHOUSE HQ | <span id="titletime" style="color:lightgray"></span></h1>
+ </div>
+ <div class="map-frame">
+ <div id="map"></div>
+ </div>
+ <div class="route-controls">
+ <span style="margin:-1px;margin-left:5px;margin-top:5px;">ROUTE PARAMETERS</span>
+ <hr style="width:100%;padding:0px;"/>
+ </div>
+ </div>
+ <div class="right-column">
+ <div class="clue-stats">
+ <span style="margin:-1px;margin-left:5px;margin-top:5px;">CLUE STATS</span>
+ <hr style="width:100%;padding:0px;"/>
+ <div style="margin:0px;margin-left:5px;display:flex;flex-direction:row"><span id="total_count" style="margin-right:5px;">XX</span><span>total clues (</span><span id="unvisited_count" style="margin-right:5px;">XX</span><span>unvisited)</span></div>
+ <div style="margin:0px;margin-left:5px;display:flex;flex-direction:row;"><span id="visited_count" style="margin-right:5px;">XX</span><span>visited clues (</span><span id="percent_visited">XX</span><span>%)</span></div>
+ <div style="margin:0px;margin-left:5px;display:flex;flex-direction:row"><span>Average visited distance: </span><span id="avg_visited_distance" style="margin-left:5px">XX</span><span>(mi)</span></div>
+ </div>
+ <div class="bike-teams">
+ <span style="margin:-1px;margin-left:5px;margin-top:5px;">BIKE TEAMS</span>
+ <hr style="width:100%;padding:0px;"/>
+ <table id="bike-teams-table" style="width:100%">
+ </table>
+ </div>
+ <div class="add-clue">
+ <span style="margin:-1px;margin-left:5px;margin-top:5px;">ADD CLUE</span>
+ <hr style="width:100%;padding:0px;"/>
+ <div style="margin:5px;display:flex;flex-direction:row"> <span>Clue Name: </span> <input type="input" id="new_clue_name" style="flex:1;" placeholder="e.g., C34"/></div>
+ <div style="margin:5px;display:flex;flex-direction:row"> <span>Clue Information: </span> <input type="input" id="new_clue_info" style="flex:1;" placeholder="e.g., Savenor's Butcher"/></div>
+ <div style="margin:5px;display:flex;flex-direction:row"> <span>Longitude: </span> <input autocomplete=off type="input" onchange="previewZoom()" onkeyup="previewZoom()" id="new_clue_longitude" style="flex:1;" placeholder="e.g., -71.0688746"/></div>
+ <div style="margin:5px;display:flex;flex-direction:row"> <span>Latitude: </span> <input autocomplete=off type="input" onchange="previewZoom()" onkeyup="previewZoom()" id="new_clue_latitude" style="flex:1;" placeholder="e.g., 40.3587273"/></div>
+ <div id="previewmap" style="height:70%; margin:5px;"></div>
+ <div style="margin:5px;display:flex;flex-direction:row; justify-content: center;"> <button onclick="addClue()">Submit</button> <button>Clear</button></div>
+ </div>
+ </div>
+
+ </div>
</body>
</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-21 15:10:59 +0000