web-sim/index.html at main · KnightLightUCF/web-sim · GitHub

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
<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title>KnightLight Show Previewing Platform</title>
		<link rel="stylesheet" href="styles.css">

		<!-- Dependency for import functionality -->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>
		<script src="https://kit.fontawesome.com/d59a57c743.js" crossorigin="anonymous"></script>

		<script type="module" src="/index.js"></script>
		<script type="module" src="/main.js"></script>
	</head>
	<body>
		<div class="video-footer">
			<div id="video_controls">
				<div id="progress_bar_wrapper">
					<div id="show_progression"></div>
					<div id="draggable_circle"></div>
				</div>

				<div class="left_controls">
					<button id="play_pause_btn" class="control_btn">
						<i class="fa-solid fa-play iconWhite" id="play_icon"></i>
						<i class="fa-solid fa-pause iconWhite" id="pause_icon" style="display: none;"></i>
					</button>
					<!-- <div class="volume_wrapper">
						<div id="volume_control" class="control_btn">
							<i class="fa-solid fa-volume-high iconWhite" id="volume_icon"></i>
						</div>
						<div id="volume_slider_container" class="control_btn slider-container">
							<input type="range" id="volume_slider" min="0" max="100" value="100" class="volume-slider"/>
						</div>
					</div> -->
					<div>
						<span class="time" id="currentTime">00:00</span>
						<span class="time">/</span>
						<span class="time" id="duration">00:00</span>
					</div>
				</div>
				<div class="right_controls">
					<!-- <button id="cc_btn" class="control_btn">
						<i class="fa-solid fa-closed-captioning iconWhite"></i>
					</button> -->
					<button id="settings_btn" class="control_btn">
						<i class="fa-solid fa-gear iconWhite"></i>
					</button>
					<div id="settings_popup" class="settings-popup" style="display: none;">
						<div class="setting-option" style="padding-bottom: 5px;">
							<div class="setting-label">Playback Speed:</div>
							<select id="playback_speed" class="styled-select">
								<option value="0.5">0.5x</option>
								<option value="1" selected>1x</option>
								<option value="2">2x</option>
								<option value="5">5x</option>
							</select>
						</div>
						<div class="setting-option" style="padding-bottom: 5px;">
							<div class="setting-label">Always Focus on Drone(s):</div>
							<label class="switch">
								<input type="checkbox" id="focus_drones">
								<span class="slider round"></span>
							</label>
						</div>

						<div class="setting-option">
							<div class="setting-label">Display Performance Stats:</div>
							<label class="switch">
								<input type="checkbox" id="performance_stats">
								<span class="slider round"></span>
							</label>
						</div>
					</div>

					<button id="fullscreen_btn" class="control_btn">
						<i class="fa-solid fa-expand iconWhite" id="expand_icon"></i>
						<i class="fa-solid fa-compress iconWhite" id="compress_icon" style="display: none;"></i>
					</button>
				</div>
			</div>

			<select id="views_dropdown_menu"></select>
		</div>
	</body>
</html>