diff options
Diffstat (limited to 'dashboard_website/templates')
| -rw-r--r-- | dashboard_website/templates/index.html | 169 |
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 |