-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
312 lines (310 loc) · 12.3 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
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
<!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" />
<link rel="stylesheet" href="./styles/general/style.css" />
<link rel="stylesheet" href="./styles/puzzel-2.css" />
<title>The Great Escape</title>
</head>
<body class="overflow-hidden">
<section class="progress_bar">
<label for="progress">Ontsnapping</label>
<progress id="progress" value="0" max="100"></progress>
</section>
<main class="scroll-snap">
<section class="full-screen overflow-hidden">
<article class="welcome">
<h2>
Welkom bij <br />
The Great Escape
</h2>
<button onclick="nextSection()">Start Hier</button>
</article>
</section>
<section class="full-screen overflow-hidden" id="second">
<article class="second">
<h2>Het dagboek van Giovanni</h2>
<h3>7 Januari 2022:</h3>
<p>
Toen ik wakker werd zag ik dat er een brief op me deurmat lag. Ik
maakte hem natuurlijk gelijk open, toen die was geopend las ik al
gauw dat ik rechtzaak aan me broek had. Er is al een datum bekend,
27 Januari 2022. Maar wat zou ik hebben gedaan, ze zijn toch niet
achter dat ene gekomen?? Ik ga in ieder geval maar zoeken naar een
goede advocaat voor het geval van het ergste.
</p>
<button class="volgende" onclick="nextText()">volgende</button>
</article>
<article class="second hidden">
<h2>Het dagboek van Giovanni</h2>
<h3>27 Januari 2022:</h3>
<p>
Vandaag is de rechtzaak, ik hoop dat ik mijn advocaat genoeg heb
betaald hiervoor. <br />De uitslag van de rechtzaak is binnen, en
het is slecht nieuws. Ik ben onterecht veroordeeld tot 20 jaar in de
gevangenis. En onterecht is ook echt onterecht in dit geval, want ik
ben veroordeeld voor een misdaad puur omdat ik op iemand leek. Ook
zeiden ze bij de rechtzaak dat ik geen persoonlijke items mee mocht
nemen naar de gevangenis. Dus dit zal voorlopig 1 van de laatste
dingen zijn die ik hierin zet aangezien ze me morgen op komen halen.
</p>
<button class="volgende" onclick="nextText()">volgende</button>
</article>
<article class="second hidden">
<h2>Het dagboek van Giovanni</h2>
<h3>28 Januari 2022:</h3>
<p>
Vandaag is me laatste dag in vrijheid. Ik wil dan ook in dit dagboek
iedereen bedanken voor het leven dat ik heb gehad tot nu toe.
Bedankt mam en pap en ook bedankt aan me vrienden voor het altijd er
zijn. Dit is dan het laatste voor 20 jaar dat ik hierin schrijf, ook
is er wel een kans dat dit anders gaat zijn want ik ga proberen me
dagboek mee te smokkelen.
</p>
<button class="volgende" onclick="nextText()">volgende</button>
</article>
<article class="second hidden">
<h2>Het dagboek van Giovanni</h2>
<h3>31 Januari 2022:</h3>
<p>
Het is me gelukt. Het is me gewoon gelukt, geweldig. Het is gelukt
om me dagboek mee te smokkelen, ik wachtte wel een paar dagen met
erin schrijven want anders zou het teveel opvallen. De gevangenis
hier is raar, er zijn veel gevangenen maar er gaan er ook veel weg.
Voor de rest is het eten hier droog en weinig. Verder is het ook
raar want elke avond gaan de lichten uit voor een paar minuten, en
elke ochtend zijn er vaak weer gevangenen ontsnapt. Ik denk dat ik
dat maar moet gaan onderzoeken.
</p>
<button class="volgende" onclick="nextText()">volgende</button>
</article>
<article class="second hidden">
<h2>Het dagboek van Giovanni</h2>
<h3>31 Januari 2037:</h3>
<p>
Het is 15 jaar in deze gevangenis, ik ben er van overtuigd dat ik
nog de enige ben die hier gevangen zit. Ik had, toen er nog wel
mensen waren, gehoord dat de gevangenis uit dienst gaat, maar ik ben
nu nogsteeds hier en zij zijn al allemaal wel. Het is nu alleen nog
maar hele enge bewaker en ik in de gevangenis. De enge bewaker zorgt
ervoor dat ik nog grager wil ontsnappen, nu nog een manier vinden.
De lichten gaan nogsteeds elke dag een paar minuten uit, misschien
zou ik daar wat mee kunnen....
</p>
<button class="volgende" onclick="nextText()">volgende</button>
</article>
</section>
<section class="full-screen puzzel-1" id="two">
<nav>
<section class="b1 btn">
<h1>Letters Gepakt</h1>
<h2 id="score-player">0</h2>
<h2>van de 7</h2>
</section>
<section class="tijd1 btn">
<h1>Resterende Tijd</h1>
<p id="countdown">2:00</p>
</section>
</nav>
<section class="container">
<section class="letter-container">
<section onclick="changeColor()" class="letter btn">
<a class="box">Z</a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section onclick="changeColor()" class="letter7 btn">
<a class="box">P</a>
</section>
<section class="letter hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section onclick="changeColor()" class="letter4 btn">
<a class="box">L</a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#">p</a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section onclick="changeColor()" class="letter6 btn">
<a class="box">M</a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section onclick="changeColor()" class="letter2 btn">
<a class="box">A</a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section onclick="changeColor()" class="letter5 btn">
<a class="box">A</a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section class="letters hide-letter btn">
<a href="#"></a>
</section>
<section onclick="changeColor()" class="letter3 btn">
<a class="box">K</a>
</section>
</section>
</section>
</section>
<section class="full-screen second" id="three">
<article class="welcome">
<h2>Het dagboek van Giovanni</h2>
<h3>7 Januari 2037:</h3>
<p>
Ik heb nu alle letters op de muur gevonden. Ik riep ze om en ineens
gingen alle lampen uit. Gelukkig heb ik een zaklamp. Ik zie weer
allemaal letter. Voer alle letters in die je en ontsnap uit je cel.
</p>
<a href="/puzzel.html">Naar de puzzel</a>
</article>
</section>
<section class="full-screen second">
<article class="welcome">
<h2>Het dagboek van Giovanni</h2>
<h3>7 Januari 2037:</h3>
<p>
Ik ben bijna ontsnapt. Alleen nog de laatste puzzel. Waarbij je de
slot moet hotwiren zodat de laatste deur open gaat
</p>
<a href="/puzzel.html">Naar de laatste puzzel</a>
</article>
</section>
</main>
<script src="./script.js"></script>
</body>
</html>