summaryrefslogtreecommitdiff
path: root/dashboard_website/templates/index.html
diff options
context:
space:
mode:
authoritsGarrin <garrin.shieh@gmail.com>2024-07-02 13:01:08 -0700
committeritsGarrin <garrin.shieh@gmail.com>2024-07-02 13:01:08 -0700
commit80cfb271b27bceb9e357d77d34449cd368d72240 (patch)
tree0220627916debfd68afb39a1fa62a1f3a47c70ce /dashboard_website/templates/index.html
parent9cbf1fe52bd33b122c6eff81d34b081ed25f8c1b (diff)
reformatted code
Diffstat (limited to 'dashboard_website/templates/index.html')
-rw-r--r--dashboard_website/templates/index.html339
1 files changed, 186 insertions, 153 deletions
diff --git a/dashboard_website/templates/index.html b/dashboard_website/templates/index.html
index d4f8196..68a85be 100644
--- a/dashboard_website/templates/index.html
+++ b/dashboard_website/templates/index.html
@@ -6,174 +6,207 @@
<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=""/>
+ integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+ crossorigin=""/>
<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>
+ integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+ crossorigin=""></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 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; */
- height:15%;
- display: flex;
- flex-direction: column;
- }
-
- .right-column {
- /* flex:0.25 1 auto; */
- flex-grow:0;
- flex-basis:35em;
- 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>
+<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; */
+ height:15%;
+ display: flex;
+ flex-direction: column;
+ }
+
+ .right-column {
+ /* flex:0.25 1 auto; */
+ flex-grow:0;
+ flex-basis:35em;
+ 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;" id="routeinfo">ROUTE INFO</span>
+ <hr style="width:100%;padding:0px;"/>
+ <!--<input type="time" id="endtime" value="18:30">-->
+ </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 class="map-frame">
- <div id="map"></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 class="route-controls">
- <span style="margin:-1px;margin-left:5px;margin-top:5px;" id="routeinfo">ROUTE INFO</span>
- <hr style="width:100%;padding:0px;"/>
- <!--<input type="time" id="endtime" value="18:30">-->
+ <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>
- <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 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 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 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 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 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>
+
+</div>
</body>
</html> \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-21 06:23:25 +0000