-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
515 lines (512 loc) · 28.8 KB
/
index.html
File metadata and controls
515 lines (512 loc) · 28.8 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" media="(prefers-color-scheme: dark)" />
<link rel="shortcut icon" href="favicon-dark.ico" type="image/x-icon" media="(prefers-color-scheme: light)" />
<title>Virtual Clicker</title>
<meta property="og:title" content="Virtual Clicker" />
<meta property="og:image" content="https://click.vssfalcons.com/banner-meta.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Virtual Clicker" />
<meta name="twitter:image" content="https://click.vssfalcons.com/banner-meta.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet" />
</head>
<body class="col">
<div id="header">
<svg xmlns="http://www.w3.org/2000/svg" height="3.5rem" viewBox="0 0 1024 1024" class="virtual-clicker-logo">
<path fill="currentColor"
d="M189.838,206.009C202.279,201.862 210.44,202.484 217.578,206.052C224.715,209.621 230.493,216.931 235.656,232.419C251.225,279.126 278.027,359.533 299.189,423.017C304.344,438.483 312.472,443.078 322.252,443.078C332.033,443.078 339.718,439.813 345.627,422.086C360.443,377.638 378.763,322.677 396.583,269.218C430.426,167.688 472.963,146.121 567.37,146.121C702.785,146.121 897.037,146.121 984.213,146.121C1007.19,146.121 1013.22,150.77 1018.88,158.617C1024.53,166.463 1025.91,177.048 1020.96,191.878C1003.43,244.493 978.676,318.741 965.135,359.363C958.535,379.162 942.92,390.595 922.051,390.561C867.547,390.472 734.987,390.238 660.22,390.117C626.461,390.062 609.299,402.41 598.623,434.437C585.437,473.995 567.7,527.206 553.255,570.541C547.69,587.236 549.36,603.931 557.708,615.513C566.057,627.096 578.691,633.96 596.163,633.96C665.057,633.96 769.309,633.96 828.841,633.96C841.883,633.96 850.611,638.609 856.266,646.455C861.921,654.301 863.336,664.76 859.639,675.852C842.137,728.356 816.643,804.838 803.139,845.351C797.202,863.16 778.155,877.879 759.383,877.879C688.339,877.879 487.826,877.879 340.593,877.879C241.323,877.879 180.603,838.6 149.211,744.424C101.094,600.075 30.348,387.837 3.648,307.735C-1.509,292.265 -0.672,284.75 2.896,277.613C6.465,270.475 10.977,265.63 28.36,259.835C72.841,245.008 145.357,220.836 189.838,206.009Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="3.5rem" viewBox="0 0 939.26 845.57" id="atreides-logo">
<path fill="currentColor"
d="M939.26 0v160.43L540.42 559.27v215.51l-70.79 70.79-70.79-70.79V559.27L0 160.43V0l469.63 470.64L939.26 0z" />
<path fill="currentColor"
d="M372.56 569.37v179.14l-97.74-97.75v-82.63L58.83 352.14v-96.51l313.73 313.74zM547.49 358.93l-77.28 77.28-77.77-77.77 77.19-77.19h69.24l5.68 5.68v21.9l-7.34-7.34-23.58 23.58 33.86 33.86ZM566.7 569.37v179.14l97.74-97.75v-82.63l215.99-215.99v-96.51L566.7 569.37z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="3.5rem" viewBox="0 0 1024 806.99" id="virtual-clicker-butterfly">
<path fill="currentColor"
d="M363.41 378.38s-41.8-226.57-225.55-224.82c-221.29 2.11-134.61 298.78-27.42 425.27 107.19 126.48 302.27 274.41 420.18 214.38 117.91-60.03 87.28-309.52 68.6-452.34-14.67-112.11-29.57-188.01-135.93-182.37-134.65 7.13-99.88 219.89-99.88 219.89Z" />
<path fill="currentColor"
d="M862.92 0C673.83.59 599.44 155.06 616.9 263.97c19.52 121.75 29.65 162.85 28.07 274.12-1.7 120.31-17.36 201.71 55.47 224.8 81.26 25.76 143.18 1.37 202.14-72.59 58.95-73.96 62.17-119.32 33.23-165.07-28.94-45.75-115.22 2.5-124.34-83.31-8.58-80.69-24.56-154.76 26.8-200.74 47.06-42.14 48.24 57.88 102.9 56.81C1046.28 295.93 1081.58-.68 862.92 0ZM424.16 102.01c0 22.1-16.64 36.8-37.16 36.8s-37.16-14.7-37.16-36.8S366.48 64.49 387 64.49s37.16 15.42 37.16 37.52ZM556.06 70.92c0 24.96-15.06 45.2-40.02 45.2s-40.91-20.24-40.91-45.2 15.5-42.7 40.46-42.7 40.46 17.73 40.46 42.7Z" />
</svg>
<div class="info">
<h1>Virtual Clicker</h1>
<button class="icon menu" data-modal-view="menu" tooltip="Menu" reverse>
<i class="bi bi-list"></i>
</button>
</div>
</div>
<div id="clicker">
<div class="input-group">
<h1><span class="code" data-modal-view="settings/code">000</span></h1>
<div class="alert" hidden>
<img src="" alt="Announcement image">
<div>
<i class="bi bi-megaphone-fill"></i>
<div>
<h3>Announcement</h3>
<p>No course announcement.</p>
</div>
<button class="fit" tooltip="Visit Link">Go <i class="bi bi-arrow-right-short"></i></button>
</div>
</div>
<label for="question-input">Question #</label>
<div class="space" id="question-container">
<input type="text" autocomplete="off" id="question-input" />
<div id="answer-mode-selector" data-button-select>
<button aria-selected="true" data-value="input">Text</button>
<button aria-selected="false" data-value="math">Math</button>
<button aria-selected="false" data-value="set">Set</button>
<button aria-selected="false" data-value="matrix">Matrix</button>
<button aria-selected="false" data-value="frq">FRQ</button>
<!-- <button aria-selected="false" data-value="draw">Draw</button> -->
</div>
</div>
</div>
<div class="input-group">
<label for="answer-input">Answer</label>
<div class="space" id="answer-container">
<div data-answer-mode="input">
<div class="button-grid extra-space">
<button data-multiple-choice="a">A</button>
<button data-multiple-choice="b">B</button>
<button data-multiple-choice="c">C</button>
<button data-multiple-choice="d">D</button>
<button data-multiple-choice="e">E</button>
</div>
<div id="answer-textarea-container">
<textarea rows="5" autocomplete="off" id="answer-input"></textarea>
<p id="answer-suggestion"></p>
</div>
<div class="row">
<div class="button-grid" id="insert-row">
<button data-insert-symbol="0"></button>
<button data-insert-symbol="1"></button>
<button data-insert-symbol="2"></button>
<button data-insert-symbol="3"></button>
<button data-insert-symbol="4"></button>
<button data-insert-symbol="5"></button>
<button data-insert-symbol="6"></button>
<button data-insert-symbol="7"></button>
<button data-insert-symbol="8"></button>
<button data-insert-symbol="9"></button>
</div>
<button class="icon" data-modal-view="symbols" tooltip="All Symbols">
<i class="bi bi-three-dots"></i>
</button>
</div>
</div>
<div data-answer-mode="choice">
<div></div>
<button class="icon" id="remove-choice-button">
<i class="bi bi-x-lg"></i>
</button>
</div>
<div data-answer-mode="math">
<math-field id="math-input"></math-field>
</div>
<div data-answer-mode="set">
<div class="row">
<div class="button-grid" id="insert-row">
<button data-insert-symbol="0" data-target-input="set-input"></button>
<button data-insert-symbol="1" data-target-input="set-input"></button>
<button data-insert-symbol="2" data-target-input="set-input"></button>
<button data-insert-symbol="3" data-target-input="set-input"></button>
<button data-insert-symbol="4" data-target-input="set-input"></button>
<button data-insert-symbol="5" data-target-input="set-input"></button>
<button data-insert-symbol="6" data-target-input="set-input"></button>
<button data-insert-symbol="7" data-target-input="set-input"></button>
<button data-insert-symbol="8" data-target-input="set-input"></button>
<button data-insert-symbol="9" data-target-input="set-input"></button>
</div>
<button class="icon" data-modal-view="symbols" tooltip="All Symbols">
<i class="bi bi-three-dots"></i>
</button>
</div>
<div class="row">
<div id="set-type-selector" data-button-select>
<button aria-selected="true" data-value="brackets">{ Brackets }</button>
<button aria-selected="false" data-value="vector">< Vector ></button>
<button aria-selected="false" data-value="array">[ Array ]</button>
<button aria-selected="false" data-value="coordinate">( Coordinate )</button>
<button aria-selected="false" data-value="product">⟨ Product ⟩</button>
</div>
<div class="button-grid" style="width: fit-content; margin-left: auto;">
<button data-insert-symbol="40" data-target-input="set-input"></button>
<button data-insert-symbol="41" data-target-input="set-input"></button>
<button data-insert-symbol="42" data-target-input="set-input"></button>
</div>
</div>
<div class="button-grid">
<input type="text" autocomplete="off" id="set-input" data-set-input="1" />
<button square data-add-set-input tooltip="Add Set Item"><i class="bi bi-plus"></i></button>
<button square data-remove-set-input disabled tooltip="Remove Set Item"><i class="bi bi-dash"></i></button>
</div>
</div>
<div data-answer-mode="matrix">
<div class="row">
<div class="button-grid" id="insert-row">
<button data-insert-symbol="0" data-target-input="set-input"></button>
<button data-insert-symbol="1" data-target-input="set-input"></button>
<button data-insert-symbol="2" data-target-input="set-input"></button>
<button data-insert-symbol="3" data-target-input="set-input"></button>
<button data-insert-symbol="4" data-target-input="set-input"></button>
<button data-insert-symbol="5" data-target-input="set-input"></button>
<button data-insert-symbol="6" data-target-input="set-input"></button>
<button data-insert-symbol="7" data-target-input="set-input"></button>
<button data-insert-symbol="8" data-target-input="set-input"></button>
<button data-insert-symbol="9" data-target-input="set-input"></button>
</div>
<button class="icon" data-modal-view="symbols" tooltip="All Symbols">
<i class="bi bi-three-dots"></i>
</button>
</div>
<div class="input-group" id="matrix">
<div class="row" data-matrix-row="1">
<input type="text" autocomplete="off" id="matrix-column" data-matrix-column="1" />
<input type="text" autocomplete="off" id="matrix-column" data-matrix-column="2" />
</div>
<div class="row" data-matrix-row="2">
<input type="text" autocomplete="off" id="matrix-column" data-matrix-column="1" />
<input type="text" autocomplete="off" id="matrix-column" data-matrix-column="2" />
</div>
</div>
<div class="button-grid">
<button square data-add-matrix-column tooltip="Add Matrix Column"><i
class="bi bi-arrow-90deg-left rotate-right"></i></button>
<button square data-remove-matrix-column tooltip="Remove Matrix Column"><i class="bi bi-x"></i></button>
</div>
<div class="button-grid">
<button square data-add-matrix-row tooltip="Add Matrix Row"><i class="bi bi-arrow-return-left"></i></button>
<button square data-remove-matrix-row tooltip="Remove Matrix Row"><i class="bi bi-x"></i></button>
</div>
</div>
<div data-answer-mode="frq">
<div class="row">
<div class="button-grid" id="insert-row">
<button data-insert-symbol="0" data-target-input="default-frq-part-symbols"></button>
<button data-insert-symbol="1" data-target-input="default-frq-part-symbols"></button>
<button data-insert-symbol="2" data-target-input="default-frq-part-symbols"></button>
<button data-insert-symbol="3" data-target-input="default-frq-part-symbols"></button>
<button data-insert-symbol="4" data-target-input="default-frq-part-symbols"></button>
<button data-insert-symbol="5" data-target-input="default-frq-part-symbols"></button>
<button data-insert-symbol="6" data-target-input="default-frq-part-symbols"></button>
<button data-insert-symbol="7" data-target-input="default-frq-part-symbols"></button>
<button data-insert-symbol="8" data-target-input="default-frq-part-symbols"></button>
<button data-insert-symbol="9" data-target-input="default-frq-part-symbols"></button>
</div>
<button class="icon" data-modal-view="symbols" tooltip="All Symbols">
<i class="bi bi-three-dots"></i>
</button>
</div>
<div class="frq-parts">
<div class="part">
<div class="prefix">a.</div>
<input type="text" autocomplete="off" data-frq-part="a" id="default-frq-part-symbols" />
<button data-save-part="a">Save</button>
</div>
<div class="part">
<div class="prefix">b.</div>
<input type="text" autocomplete="off" data-frq-part="b" />
<button data-save-part="b">Save</button>
</div>
<div class="part">
<div class="prefix">c.</div>
<input type="text" autocomplete="off" data-frq-part="c" />
<button data-save-part="c">Save</button>
</div>
<div class="part">
<div class="prefix">d.</div>
<input type="text" autocomplete="off" data-frq-part="d" />
<button data-save-part="d">Save</button>
</div>
<div class="button-grid">
<button square data-add-frq-part tooltip="Add FRQ Part"><i class="bi bi-plus"></i></button>
<button square data-remove-frq-part disabled tooltip="Remove FRQ Part"><i class="bi bi-dash"></i></button>
</div>
</div>
<input type="range" min="0" max="9" value="4" step="1" id="frq-input" />
<h1 id="frq-score">4</h1>
</div>
<div data-answer-mode="draw">
<canvas disabled></canvas>
<div class="button-grid">
<button data-action="undo" disabled>Undo</button>
<button data-action="clear" disabled>Clear</button>
<button data-action="redo" disabled>Redo</button>
</div>
</div>
</div>
<button class="pill space" id="submit-button">Submit</button>
</div>
</div>
<!-- Controls -->
<div id="controls-container" class="pill">
<button class="icon" data-modal-view="store" tooltip="Theme Store">
<i class="bi bi-shop-window"></i>
</button>
<button class="icon" data-modal-view="settings" tooltip="Settings">
<i class="bi bi-gear"></i>
</button>
<button class="pill" data-modal-view="settings/code" tooltip="Change Seat Code">
<span class="code">000</span>
</button>
<button class="icon" data-modal-view="settings/makeup" tooltip="Make Up Clicks">
<i class="bi bi-calendar-check"></i>
</button>
<button class="icon" data-modal-view="history" tooltip="Click History">
<i class="bi bi-clock-history"></i>
</button>
<!-- <button class="icon" data-modal-view="clear-data-fix" tooltip="Clear Data Fix">
<i class="bi bi-exclamation-triangle"></i>
</button> -->
</div>
<!-- Symbols -->
<dialog data-modal-page="symbols" data-page-title="Symbols">
<div id="symbols-grid"></div>
</dialog>
<!-- History -->
<dialog data-modal-page="history" data-page-title="History">
<h2 id="history-date"></h2>
<div class="col" id="history-feed"></div>
<button data-reset="cache">Refresh Data</button>
<div id="history-navigation" class="row center">
<button class="icon" id="history-first">
<i class="bi bi-chevron-double-left"></i>
</button>
<button class="icon" id="history-backward">
<i class="bi bi-chevron-left"></i>
</button>
<button class="icon" id="history-forward">
<i class="bi bi-chevron-right"></i>
</button>
<button class="icon" id="history-last">
<i class="bi bi-chevron-double-right"></i>
</button>
</div>
</dialog>
<!-- Settings -->
<dialog data-modal-page="settings" data-page-title="Settings">
<img src="banner-transparent.png" alt="Virtual Clicker Banner">
<span class="version" id="version-string"></span>
<button data-modal-view="settings/code">Seat Code</button>
<button data-modal-view="store">Theme Store</button>
<button data-modal-view="settings/keybinds">Keyboard Shortcuts</button>
<button data-modal-view="settings/makeup">Make Up Clicks</button>
<button data-modal-view="settings/reset">Reset</button>
<button data-modal-view="settings/credits">Credits</button>
<button data-sync>Manual Sync</button>
<button data-report-bug>Report Bug</button>
<button data-suggestions>Make Suggestion</button>
<button data-logout>Log Out</button>
<div data-modal-page="code" data-page-title="Seat Code">
<input type="text" inputmode="numeric" placeholder="000" maxlength="3" id="code-input" />
<button data-modal-view="settings/code/help">Need help?</button>
<div data-modal-actions>
<button id="save-code-button">Save</button>
</div>
<div data-modal-page="help" data-page-title="Seat Code Finder">
<label for="period-input">Period</label>
<select id="period-input">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<p>Where do you sit?</p>
<p class="hint">Screen</p>
<div id="seat-grid"></div>
</div>
</div>
<div data-modal-page="keybinds" data-page-title="Keyboard Shortcuts">
<p><kbd>Ctrl</kbd> + <kbd>Enter</kbd> Submit click</p>
<p><kbd>Alt</kbd> + <kbd>1-9</kbd> Insert nth symbol</p>
<p><kbd>Ctrl</kbd> + <kbd>/</kbd> Open Keyboard Shortcuts</p>
<p><kbd>Ctrl</kbd> + <kbd>,</kbd> Open Settings</p>
<p><kbd>Ctrl</kbd> + <kbd>.</kbd> Open History</p>
<p><kbd>Shift</kbd> + <kbd>R</kbd> Reset theme and cache</p>
<p><kbd>Ctrl</kbd> + <kbd>b</kbd> Open Report Bug</p>
<p><kbd>Ctrl</kbd> + <kbd>s</kbd> Open Make Suggestion</p>
</div>
<div data-modal-page="reset" data-page-title="Reset">
<button data-reset="history">Clear Local History</button>
<button data-reset="all">Reset All Settings</button>
<button data-reset="cache">Force Reset Cache</button>
<button onclick="window.open('/resetcookies')">How To Reset Cookies</button>
</div>
<div data-modal-page="makeup" data-page-title="Making Up Clicks?">
<p>You will be submitting your click outside school hours. To make up clicks, select the date of the class to make
up.</p>
<label for="date-input">Date</label>
<input type="date" id="date-input" />
<div data-modal-actions>
<button id="dismiss-makeup-button">Continue Anyway</button>
<button id="makeup-click-button">Make Up Clicks</button>
</div>
</div>
<div data-modal-page="credits" data-page-title="Credits">
<img src="banner-transparent.png" alt="Virtual Clicker Banner">
<div></div>
<div></div>
<p><a href="https://github.com/faisalnjs"><img src="https://avatars.githubusercontent.com/u/84286255" />Faisal N
(@faisalnjs)</a> - Commits after 5/21/2024 including Set, Matrix, and FRQ input modes, make-up mode, Live
Drawings, banner images, authentication, syncing</p>
<p><a href="https://github.com/khui0">khui0</a> - Original design and development, logo image</p>
<div class="row center" style="gap: 7.5px; margin-top: 5px;">
<a href="https://github.com/faisalnjs/virtual-clicker" class="icon" tooltip="GitHub Repository"><i
class="bi bi-github"></i></a>
<a href="https://dangoweb.com/?from=virtual-clicker" class="icon" tooltip="Cloud Hosting"><i
class="bi bi-cloud-fill"></i></a>
<a href="https://github.com/users/faisalnjs/projects/4" class="icon" tooltip="Project"><i
class="bi bi-kanban-fill"></i></a>
</div>
</div>
</dialog>
<dialog data-modal-page="clear-data-fix" data-page-title="Settings May Not Save">
<p>
VSCHSD administration enforces a setting which clears site settings when you close your
browser
</p>
<p>Fix this by adding an exception for this site:</p>
<ol>
<li>
In a new tab, open
<code>edge://settings/clearBrowsingDataOnClose</code>
</li>
<li>Click "Add" under "Cookies and other site data"</li>
<li>
Add <code><span class="hostname"></span></code>
</li>
</ol>
</dialog>
<dialog data-modal-page="api-fail" data-page-title="API Offline">
<p>
The Virtual Clicker API is currently offline. Please try again later, check for <a
href="https://status.dangoweb.com/">server maintenance</a>, or contact support below.
</p>
<div class="row center" style="gap: 7.5px; margin-top: 5px;">
<a href="https://github.com/users/faisalnjs/projects/4/views/7?filterQuery=-status%3ADone%2CAbandoned"
class="icon" tooltip="Track Project"><i class="bi bi-github"></i></a>
<a href="https://dangoweb.com/community" class="icon" tooltip="Support"><i class="bi bi-life-preserver"></i></a>
<a href="mailto:contact@faisaln.com" class="icon" tooltip="Email"><i class="bi bi-envelope-fill"></i></a>
</div>
<div data-modal-actions>
<button class="cancel-button" id="continue-without-api">Continue without API</button>
</div>
</dialog>
<dialog data-modal-page="maintenance-mode" data-page-title="Maintenance">
<p>
The Virtual Clicker is undergoing maintenance. Please try again later.
</p>
</dialog>
<!-- Theme Store -->
<dialog data-modal-page="store" data-page-title="Theme Store">
<div data-modal-page="theme" data-page-title="Your Themes">
<div id="theme-preview">
<h1 class="text-placeholder">000</h1>
<p class="text-placeholder">Question</p>
<div class="control-placeholder"></div>
<div class="control-placeholder"></div>
<p class="text-placeholder">Answer</p>
<div class="control-placeholder"></div>
<div class="control-placeholder pill"></div>
</div>
<div id="theme-selector">
<button data-modal-view="settings/store/editor">Custom</button>
</div>
<div data-modal-actions>
<button id="theme-reset">Reset</button>
<button id="theme-apply">Apply</button>
</div>
</div>
<div data-modal-page="editor" data-page-title="Custom Theme">
<div id="editor-preview">
<h1 class="text-placeholder">000</h1>
<p class="text-placeholder">Question</p>
<div class="control-placeholder"></div>
<div class="control-placeholder"></div>
<p class="text-placeholder">Answer</p>
<div class="control-placeholder"></div>
<div class="control-placeholder pill"></div>
</div>
<div id="theme-editor">
<label>
Color Scheme
<select name="color-scheme">
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</label>
<label>
Text
<div data-color-input="text-color"></div>
</label>
<label>
Background
<div data-color-input="background-color"></div>
</label>
<label>
Surface
<div data-color-input="surface-color"></div>
</label>
<label>
Accent
<div data-color-input="accent-color"></div>
</label>
<label>
Accent Text
<div data-color-input="accent-text-color"></div>
</label>
<label>
Error
<div data-color-input="error-color"></div>
</label>
</div>
<label>
Theme Code
<input type="text" id="theme-code" />
</label>
<div data-modal-actions>
<button data-suggest-theme>Suggest Theme</button>
</div>
<div data-modal-actions>
<button id="editor-reset">Reset</button>
<button id="editor-apply">Apply</button>
</div>
</div>
</dialog>
<dialog data-modal-page="menu" data-page-title="Virtual Clicker">
<div class="menu-icons">
<a href="https://check.vssfalcons.com/" tooltip="Virtual Checker">
<svg xmlns="http://www.w3.org/2000/svg" height="0.9em" viewBox="0 0 1041 732" fill="none"
class="virtual-checker-logo" style="margin: 0.45rem 0;">
<path
d="M1001.56 250.595C983.616 254.368 892.908 369.961 882.983 372.138C873.058 374.314 843.39 317.676 827.439 319.483C811.489 321.291 784.543 340.121 788.414 358.53C792.284 376.94 862.808 450.073 882.983 450.241C903.158 450.409 1037.91 305.154 1040.6 289.631C1043.28 274.109 1019.51 246.823 1001.56 250.595Z"
fill="currentColor" />
<path
d="M189.838 59.888C202.279 55.741 210.44 56.363 217.578 59.931C224.715 63.5 230.493 70.81 235.656 86.298C251.225 133.005 278.027 213.412 299.189 276.896C304.344 292.362 312.472 296.957 322.252 296.957C332.033 296.957 339.718 293.692 345.627 275.965C360.443 231.517 378.763 176.556 396.583 123.097C430.426 21.567 472.963 0 567.37 0C702.785 0 897.037 0 984.213 0C1007.19 0 1013.22 4.649 1018.88 12.496C1024.53 20.342 1025.91 30.927 1020.96 45.757C1003.43 98.372 978.676 172.62 965.135 213.242C958.535 233.041 942.92 244.474 922.051 244.44C867.547 244.351 734.987 244.117 660.22 243.996C626.461 243.941 609.299 256.289 598.623 288.316C585.437 327.874 567.7 381.085 553.255 424.42C547.69 441.115 549.36 457.81 557.708 469.392C566.057 480.975 578.691 487.839 596.163 487.839C665.057 487.839 769.309 487.839 828.841 487.839C841.883 487.839 850.611 492.488 856.266 500.334C861.921 508.18 863.336 518.639 859.639 529.731C842.137 582.235 816.643 658.717 803.139 699.23C797.202 717.039 778.155 731.758 759.383 731.758C688.339 731.758 487.826 731.758 340.593 731.758C241.323 731.758 180.603 692.479 149.211 598.303C101.094 453.954 30.348 241.716 3.64795 161.614C-1.50905 146.144 -0.672047 138.629 2.89595 131.492C6.46495 124.354 10.977 119.509 28.36 113.714C72.841 98.887 145.357 74.715 189.838 59.888Z"
fill="currentColor" />
</svg>
</a>
</div>
</dialog>
<div id="loader" class="active">
<svg xmlns="http://www.w3.org/2000/svg" height="3.5rem" viewBox="0 0 1024 1024" class="virtual-clicker-logo">
<path fill="currentColor"
d="M189.838,206.009C202.279,201.862 210.44,202.484 217.578,206.052C224.715,209.621 230.493,216.931 235.656,232.419C251.225,279.126 278.027,359.533 299.189,423.017C304.344,438.483 312.472,443.078 322.252,443.078C332.033,443.078 339.718,439.813 345.627,422.086C360.443,377.638 378.763,322.677 396.583,269.218C430.426,167.688 472.963,146.121 567.37,146.121C702.785,146.121 897.037,146.121 984.213,146.121C1007.19,146.121 1013.22,150.77 1018.88,158.617C1024.53,166.463 1025.91,177.048 1020.96,191.878C1003.43,244.493 978.676,318.741 965.135,359.363C958.535,379.162 942.92,390.595 922.051,390.561C867.547,390.472 734.987,390.238 660.22,390.117C626.461,390.062 609.299,402.41 598.623,434.437C585.437,473.995 567.7,527.206 553.255,570.541C547.69,587.236 549.36,603.931 557.708,615.513C566.057,627.096 578.691,633.96 596.163,633.96C665.057,633.96 769.309,633.96 828.841,633.96C841.883,633.96 850.611,638.609 856.266,646.455C861.921,654.301 863.336,664.76 859.639,675.852C842.137,728.356 816.643,804.838 803.139,845.351C797.202,863.16 778.155,877.879 759.383,877.879C688.339,877.879 487.826,877.879 340.593,877.879C241.323,877.879 180.603,838.6 149.211,744.424C101.094,600.075 30.348,387.837 3.648,307.735C-1.509,292.265 -0.672,284.75 2.896,277.613C6.465,270.475 10.977,265.63 28.36,259.835C72.841,245.008 145.357,220.836 189.838,206.009Z" />
</svg>
<script src="src/main.js" type="module"></script>
</body>
</html>