-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (73 loc) · 3.08 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Trivia</title>
<meta name="description" content="A simple trivia game using the Open Trivia Database">
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<div class="preloader-container">
<div class="preloader">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="25 25 50 50">
<circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke="#8A2BE2" stroke-linecap="round" stroke-dashoffset="0" stroke-dasharray="100, 200">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="2.5s" repeatCount="indefinite"/>
<animate attributeName="stroke-dashoffset" values="0;-30;-124" dur="1.25s" repeatCount="indefinite"/>
<animate attributeName="stroke-dasharray" values="0,200;110,200;110,200" dur="1.25s" repeatCount="indefinite"/>
</circle>
</svg>
</div>
</div>
<div id="game-container" class="game-container hide">
<div class="stat-container">
<div class="flex row center-v">
<div class="hs-text">Max Streak:</div>
<div id="max-streak" class="hs-text ml-5"></div>
</div>
<div class="flex row center-v mt-5">
<div class="hs-text">High Score:</div>
<div id="high-score" class="hs-text ml-5"></div>
</div>
</div>
<div class="body-container">
<div class="card-container">
<div class="top-bar">
<div class="w-50">
<div class="flex center-v streak-container">
<i class="ri-fire-line streak-icon"></i>
<div class="streak-text"><span id="streak"></span></div>
</div>
</div>
<div class="flex w-50 right-align">
<div class="flex center-v score-container">
<i class="ri-star-line score-icon"></i>
<div class="score-text"><span id="score"></span></div>
</div>
</div>
</div>
<div class="category-container flex center-h w-90">
<div id="category" class="category-text text-center"></div>
</div>
<div class="question-container flex center-h w-90">
<div id="question" class="question-text text-center"></div>
</div>
<div class="options-container w-80">
<input type="radio" id="1" name="answer" value="1">
<label for="1" id="label-1"></label><br>
<input type="radio" id="2" name="answer" value="2">
<label for="2" id="label-2"></label><br>
<input type="radio" id="3" name="answer" value="3">
<label for="3" id="label-3"></label><br>
<input type="radio" id="4" name="answer" value="4">
<label for="4" id="label-4"></label><br>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>