-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (131 loc) · 4.95 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Doumaverse | Quiz</title>
<!-- ! Website icon -->
<link rel="website icon" href="Assets/imgs/logo.png" type="png" />
<!-- ! Animate css Library -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<!-- ! bootstrap -->
<link rel="stylesheet" href="CSS/bootstrap.min.css" />
<!-- ! fontawesome -->
<link rel="stylesheet" href="CSS/all.min.css" />
<!-- ! main css file -->
<link rel="stylesheet" href="CSS/index.css" />
</head>
<body>
<main class="min-vh-100 d-flex justify-content-center align-items-center">
<div
class="container d-flex flex-column justify-content-center align-items-center"
>
<div class="heading animate__animated animate__zoomInDown">
<h1 class="mb-0">Doumaquiz</h1>
</div>
<form
class="w-75 p-3 text-center animate__animated animate__zoomInUp animate__delay-1s"
id="quizSelection"
>
<div class="form-floating">
<select
class="form-select my-3"
id="categoryMenu"
aria-label="category Select"
>
<option selected="" value="">Any Category</option>
<option value="9">General Knowledge</option>
<option value="27">Animals</option>
<option value="18">Science: Computers</option>
<option value="19">Science: Mathematics</option>
<option value="20">Mythology</option>
<option value="21">Sports</option>
<option value="22">Geography</option>
<option value="23">History</option>
<option value="24">Politics</option>
<option value="25">Art</option>
</select>
<label for="categoryMenu">Choose Category</label>
</div>
<div class="form-floating">
<select
class="form-select my-3"
id="levelMenu"
aria-label="difficulty Select"
>
<option value="easy" selected>Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<label for="levelMenu">Choose difficulty level</label>
</div>
<div class="form-floating">
<input
type="number"
class="form-control"
id="questionsNumber"
placeholder="Number of Questions"
/>
<label for="questionsNumber">Number of Questions</label>
</div>
<button
type="button"
class="w-100 btn btn-outline-primary fw-bold text-white my-3"
id="startBtn"
>
Start
</button>
<div
class="social-links mt-3 my-3 d-flex align-items-start justify-content-center gap-3"
>
<span
class="rounded-circle d-flex justify-content-center align-items-center"
><a
class="fab fa-facebook-f fa-lg text-decoration-none"
href="https://www.facebook.com/adham.gamal.9404/"
></a
></span>
<span
class="rounded-circle d-flex justify-content-center align-items-center"
><a
class="fab fa-linkedin-in fa-lg text-decoration-none"
href="https://www.linkedin.com/in/adham-gamal-abdelnasser-%F0%9F%87%B5%F0%9F%87%B8-b47312225/"
></a
></span>
<span
class="rounded-circle d-flex justify-content-center align-items-center"
><a
class="fab fa-github fa-lg text-decoration-none"
href="https://github.com/Adham-Gamal-Abdelnasser"
></a
></span>
<span
class="doma d-flex justify-content-center align-items-center rounded-circle mt-1"
>
<a
href="https://www.linkedin.com/in/adham-gamal-abdelnasser-%F0%9F%87%B5%F0%9F%87%B8-b47312225/"
class="douma d-flex justify-content-center align-items-center translate-middle-y"
><img src="Assets/imgs/logo.png" class="w-100"
/></a>
</span>
</div>
</form>
<div
class="question-container d-none w-75 bg-white p-3 rounded-3 animate__animated animate__bounceIn"
>
<div
class="question d-flex flex-column justify-content-center align-items-center"
id="questionView"
></div>
</div>
</div>
</main>
<!-- ! bootstrap file -->
<script src="JS/bootstrap.bundle.min.js"></script>
<!-- ! main operation file -->
<script src="JS/index.js" type="module"></script>
</body>
</html>