-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (129 loc) · 4.4 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
132
133
134
<!DOCTYPE html>
<!-- Defines the document type as HTML -->
<html>
<!-- Root element of the HTML document -->
<head>
<!-- Contains metadata and external resources -->
<title>Quiz App</title>
<!-- Sets the title of the document -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Links an external CSS file -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<!-- Links an external font stylesheet -->
<meta name="viewport" content="width=device-width, viewport-fit=cover" />
<!-- Sets the viewport for responsive design -->
</head>
<body>
<!-- Contains the visible content of the document -->
<!-- Language selector dropdown -->
<div class="language-selector">
<!-- Container for the language selector dropdown -->
<label for="language-select">Select Language:</label>
<!-- Label for the dropdown -->
<select id="language-select" onchange="changeLanguage(this.value)">
<!-- Dropdown for selecting language -->
<option value="en">English</option>
<!-- Option for English language -->
<option value="es">Spanish</option>
<!-- Option for Spanish language -->
<!-- Add more language options -->
</select>
</div>
<div id="particle-container">
<!-- Container for particles -->
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>
<div class="quiz-app-homescreen">
<!-- Container for quiz app content -->
<!-- Quiz app content -->
<h1 id="title-en">Welcome to the Quiz App</h1>
<!-- Heading for English language -->
<h1 id="title-es" style="display: none">
Bienvenido a la Aplicación de Preguntas
</h1>
<!-- Heading for Spanish language -->
<a href="start-quiz.html" id="start-button-en" class="button start-button"
>Start</a
>
<!-- Start button for English language -->
<a
href="start-quiz.html"
id="start-button-es"
class="button start-button"
style="display: none"
>Comenzar</a
>
<!-- Start button for Spanish language -->
<button
id="high-scores-button-es"
class="button high-scores-button"
style="display: none"
>
Puntuaciones Altas
</button>
<!-- High scores button for Spanish language -->
</div>
<div class="menu-bar">
<!-- Container for menu bar icons -->
<!-- Menu bar icons -->
<i class="material-icons menu-icon">home</i>
<!-- Home icon -->
<i
class="material-icons menu-icon"
onclick="window.location.href='settingspage.html'"
>settings</i
>
<!-- Settings icon with onclick event -->
</div>
<section class="water-wave" id="background">
<!-- Container for water wave effect -->
<!-- Water wave effect -->
<div class="content">
<!-- Content within the water wave effect -->
<h2>Home</h2>
<!-- Heading within the water wave effect -->
<h2>Home</h2>
<!-- Heading within the water wave effect -->
</div>
</section>
<!-- JavaScript files -->
<script src="js.js"></script>
<!-- Links an external JavaScript file -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Links an external jQuery library -->
</body>
<!-- Closing body tag -->
</html>