-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
108 lines (104 loc) · 5.44 KB
/
index.html
File metadata and controls
108 lines (104 loc) · 5.44 KB
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rollout!</title>
<link rel="icon" href="/games/img/rollout_icon.png">
<meta name="darkreader-lock">
<link rel="stylesheet" type="text/css" href="./css/index.css">
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>-->
</head>
<body oncontextmenu="return false;">
<!--
<p id="accel" style="font-size: 2rem"></p>
<p id="vel" style="font-size: 2rem"></p>
--> <div class="root flex">
<div id="sqr" class="flex">
<div id="world" class="flex column absolute">
<div id="drop-shadow" class="absolute ball-shadow"></div>
<div id="drop-fire" class="flex column absolute ball-fire">
<img id="fire-texture" src="./img/fire.gif" class="absolute" style="width: 100%; height: auto; margin-top: 75%; opacity: 0; align-self: start; transform: rotate(180deg);"></img>
</div>
<div id="player-ball-div" class="absolute flex" style="z-index: 10;">
<img id="player-ball-overlay" class="align justify" src="./img/marble_overlay0.png"></img> </div>
</div>
</div>
<div id="ui-root" class="flex column" style="backdrop-filter: blur(2vmin);">
<div id="performance-graph" class="performance-graph">
<canvas id="perf-canvas"></canvas>
</div>
<div id="nickname-div" class="flex column center-all">
<div id="menu-div-start" class="absolute flex column center-all" style="width: inherit; height: inherit;">
<label for="input-nickname" class="bauhaus" style="font-size: 3vmin; height: 25%;">Nickname</label>
<input id="input-nickname" type="text" maxlength="12" style="width: 60%; height: 25%; font-size: 2.5vmin;">
<div id="lets-get-it-started" class="flex disabled-start">
<p class="bauhaus">Let's roll!</p>
</div>
</div>
<div id="menu-div-settings" class="absolute flex column center-all" style="width: inherit; height: inherit; display: none; justify-content: flex-start;">
<p class="bauhaus" style="font-size: 3vmin; height: 15%;">Settings</p>
<div class="flex row setting-item" style="width: 100%; height: 3vmin; justify-content: center; margin-bottom: 1vmin;">
<label for="toggle-shadows" class="bauhaus" style="font-size: 2vmin; width: 20vmin; text-align: right; margin-right: 2vmin;">Shadows</label>
<label class="toggle">
<input id="toggle-shadows" type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="flex row setting-item" style="width: 100%; height: 3vmin; justify-content: center; margin-bottom: 1vmin;">
<label for="toggle-textures" class="bauhaus" style="font-size: 2vmin; width: 20vmin; text-align: right; margin-right: 2vmin;">High Res Textures</label>
<label class="toggle">
<input id="toggle-textures" type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="flex row setting-item" style="width: 100%; height: 3vmin; justify-content: center; margin-bottom: 1vmin;">
<label for="toggle-speedfx" class="bauhaus" style="font-size: 2vmin; width: 20vmin; text-align: right; margin-right: 2vmin;">Speed Effects</label>
<label class="toggle">
<input id="toggle-speedfx" type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="flex row setting-item" style="width: 100%; height: 3vmin; justify-content: center; margin-bottom: 1vmin;">
<label for="toggle-blur" class="bauhaus" style="font-size: 2vmin; width: 20vmin; text-align: right; margin-right: 2vmin;">Blur Effects</label>
<label class="toggle">
<input id="toggle-blur" type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<div class="flex row setting-item" style="width: 100%; height: 3vmin; justify-content: center; margin-bottom: 1vmin;">
<label for="toggle-rumble" class="bauhaus" style="font-size: 2vmin; width: 20vmin; text-align: right; margin-right: 2vmin;">Rumble</label>
<label class="toggle">
<input id="toggle-rumble" type="checkbox" checked>
<span class="slider"></span>
</label>
</div>
<p class="bauhaus" style="font-size: 2vmin;">Advanced</p>
<div class="flex row setting-item" style="width: 100%; height: 3vmin; justify-content: center; margin-bottom: 1vmin;">
<label for="toggle-benchmarks" class="bauhaus" style="font-size: 1vmin; width: 20vmin; text-align: right; margin-right: 2vmin;">Benchmarks During Gameplay</label>
<label class="advanced-toggle">
<input id="toggle-benchmarks" type="checkbox" checked>
<span class="advanced-slider"></span>
</label>
</div>
<div class="flex row setting-item" style="width: 100%; height: 3vmin; justify-content: center; margin-bottom: 1vmin;">
<label for="toggle-graphs" class="bauhaus" style="font-size: 1vmin; width: 20vmin; text-align: right; margin-right: 2vmin;">Performance Graphs</label>
<label class="advanced-toggle">
<input id="toggle-graphs" type="checkbox" checked>
<span class="advanced-slider"></span>
</label>
</div>
<!--
<div id="apply-settings" class="flex disabled-start">
<p class="bauhaus">Refresh to Apply Changes</p>
</div>
-->
</div>
<div id="settings-back-button" class="absolute flex">
<p id="settings-back-text" class="bauhaus">Settings</p>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="./js/index.js"></script>
</html>