-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (87 loc) · 3.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D Route Runner</title>
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Cesium.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.105/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
<body class="bg-gray-100">
<div class="flex h-screen">
<!-- Sidebar -->
<div class="sidebar w-64 p-4 bg-white bg-opacity-70 backdrop-filter backdrop-blur-lg">
<div class="sidebar-header">3D Route Runner</div>
<label for="fileInput" style="font-size: 10px;">Upload GPX File</label>
<input type="file" id="fileInput" class="file-input" accept=".gpx" />
<div class="flex flex-col">
<button id="startButton" class="button bg-blue-500">Start</button>
<button id="pauseButton" class="button bg-gray-500">Pause</button>
<button id="speedUpButton" class="button bg-green-500">Speed Up</button>
<button id="speedDownButton" class="button bg-red-500">Slow Down</button>
</div>
<!-- Display Data -->
<div class="live-data-container">
<div class="live-data-header">Live Data</div>
<div id="routeNameDisplay" class="display-data">Route: --</div>
<div id="timeDisplay" class="display-data">Time: --:--:--</div>
<div id="distanceDisplay" class="display-data">Distance: -- mi</div>
<div id="paceDisplay" class="display-data">Pace: -- min/mi</div>
<div id="elevationDisplay" class="display-data">Elevation: -- meters</div>
<div id="heartRateDisplay">Heart Rate: -- bpm</div>
<div id="cadenceDisplay">Cadence: -- rpm</div>
<div id="temperatureDisplay">Temperature: -- °C</div>
</div>
<!-- Toggle Switches -->
<div class="dropdown">
<button id="dropdownButton" class="dropdown-button">Settings</button>
<div id="dropdownContent" class="dropdown-content">
<div class="form-check">
<input type="checkbox" id="togglePace" class="toggle-switch" checked />
<label for="togglePace"></label>
<span>Use Moving Time Pace</span>
</div>
<div class="form-check">
<input type="checkbox" id="toggleMileMarkers" class="toggle-switch" checked />
<label for="toggleMileMarkers"></label>
<span>Show Mile Markers</span>
</div>
<div class="form-check">
<input type="checkbox" id="togglePaceDisplay" class="toggle-switch" checked disabled />
<label for="togglePaceDisplay"></label>
<span>Show Pace</span>
</div>
<div class="form-check">
<input type="checkbox" id="toggleTimeDisplay" class="toggle-switch" checked disabled />
<label for="toggleTimeDisplay"></label>
<span>Show Time</span>
</div>
<div class="form-check">
<input type="checkbox" id="toggleDynamicLighting" class="toggle-switch" checked/>
<label for="toggleDynamicLighting"></label>
<span>Enable Dynamic Lighting</span>
</div>
</div>
</div>
</div>
<!-- Cesium Container -->
<div class="flex-grow" id="cesiumContainer"></div>
</div>
<!-- JavaScript Scripts -->
<script src="scripts/gpxParser.js"></script>
<script src="scripts/routeVisualizer.js"></script>
<script src="scripts/mileMarker.js"></script>
<script src="scripts/app.js"></script>
<script>
document.getElementById('dropdownButton').addEventListener('click', function() {
var dropdownContent = document.getElementById('dropdownContent');
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
</script>
</body>
</html>