-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
520 lines (353 loc) · 38.9 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
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
516
517
518
519
520
<!doctype html>
<html lang="en">
<head>
<title>CAUTION WEIRD FLOOR</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- <link href="style.css" rel="stylesheet" type="text/css" media="all" /> -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="isotope.pkgd.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="leaflet.curve.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<script src="html5-qrcode.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="easy-button.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
<!-- <script src="html2canvas.min.js"></script> -->
<!-- <link rel="preload" href="https://cdn.shareaholic.net/assets/pub/shareaholic.js" as="script" />
<meta name="shareaholic:site_id" content="a5d8b0fda7e53d64e099b7bf3fae3025" />
<script data-cfasync="false" async src="https://cdn.shareaholic.net/assets/pub/shareaholic.js"></script> -->
</head>
<body>
<!-- BOTTONI -->
<div id="buttons">
<p id="instruToggle" onclick="showInstru()">Help!</p>
<p id="mapToggle" onclick="showMap()">Map</p>
<p id="infoToggle" onclick="showInfo()">Credits</p>
</div>
<div class="popup" id="instru">
<h1 class="arrowBack" onclick="$('#instru').fadeOut();$('#pathcreator').fadeIn();
">🡠</h1>
<div>
<h5>Help!</h5>
<p>Create a <span>custom path</span> picking up locations through tags. You cannot go to the <span><i>Map</i></span> before selecting one or more locations.</p>
<p>You <span>must give access to the GPS</span> in order to use this app, but do not worry: <span><b>we will not save any kind of data</b></span>.</p>
<p>At the top of the interface, click on <span><i>Map</i></span> to see the path you created.</p>
<p>Go to the locations and scan the <b>QR code</b> you will find on the yellow signs.<br>Click on the button "<img style='width: 20px;' src="qr.png">" which is on the map interface, it will open a popup: click on </span><i>"select file"</i></span> and you will be able to take a photo: shoot the QR code and confirm it. <span>✓</span></p>
<p><span><b>Pay attention! You have to be very close to the QR code to scan it.</b></span></p>
<p>At each location, you will generate a part of a <span>speculative poem</span> :)</p>
<p>If you want to modify the locations, you can go back to the menu through the arrow you can find on the map interface (<span>🡠</span>) or modify the path directly by clicking on the markers on the map.</p>
<p>If the app seems blocked you could have <span>cookie problems</span>: activate the cookies storing in your browser settings.</p>
<p><span>Delete the cookies</span> to restart the game whenever you want.</p>
</div>
<h1 class="arrowBack" onclick="$('#instru').fadeOut();$('#pathcreator').fadeIn();
">🡠</h1>
</div>
<div class="popup" id="info">
<h1 class="arrowBack" onclick="$('#info').fadeOut();$('#pathcreator').fadeIn();">🡠</h1>
<div>
<h1>Caution Weird Floor<br>An XPUB Geocatching Game</h1>
<p>Conceptualised, designed and developed by <a href="http://funix.xyz/">Federico Poni</a> and <a href="http://martinfoucaut.com">Martin Foucaut</a> from the master <a href="http://xpub.nl">Experimental Publishing, Piet Zwart Institute</a> for <a href="http://weekend.thehaguecontemporary.nl">The Hague Contemporary Art Weekend 2021</a>. </p>
<p>We would like to thanks Sebastien from <a href="http://page-not-found
Nl">Page Not Found</a> for the trust and all our tutors and collegues for all the support!</p>
<p>To report an issue, please <a href="mailto:poni@riseup.net">contact us</a>.</p>
<p>The repo of this project can be found <a href="http://github.com/pnofrc/THC">here</a>.<br>
We use cookies <b>only</b> for store <b>locally</b> player's choices instead to use databases: we don't get your data.</p>
<p>We used those libraries:<br>
<a href="http://leafletjs.com/">leaflet.js</a><br>
<a href="https://github.com/mebjas/html5-qrcode">html5-qrcode</a><br>
<a href="https://sweetalert.js.org/">Sweetalert</a><br>
<a href="https://github.com/js-cookie/js-cookie">js-cookies</a><br><br>
and we would like to thanks the open source community.
</p>
<p>Type set:<br>
<a href="">Brute Grotesque (Bureau Brut)</a><br>
<a href="">At Apoc Light (Blaze Type)</a>
</p>
<p>Weird Floor Locations:<br><br>
— 1646<br>
— Beelden Aan Zee<br>
— Beeldengalerij, The Sculpture Gallery<br>
— Dürst Britt & Mayhew<br>
— Fotomuseum Den Haag<br>
— Galerie Maurits van de Laar<br>
— Galerie Ramakers<br>
— Gallery Nono<br>
— Heden<br>
— KABK<br>
— KM21<br>
— Kunstmuseum<br>
— NEST<br>
— Page Not Found<br>
— Parts Project<br>
— PIP Den Haag<br>
— Stroom Den Haag <br>
— Arte Sìn Limites<br>
— The Grey Space in the Middle <br>
— The Hague Street Art<br>
— Trixie<br>
— Uit het Gareel<br>
— West Den Haag <br>
<p><b>We respect each other - the license will be written soon</b></p>
</p>
</div>
<h1 class="arrowBack" onclick="$('#info').fadeOut();$('#pathcreator').fadeIn();
">🡠</h1>
</div>
<div class="popup ins" id="instructions">
<h5>Welcome to Caution Weird Floor</h5>
<p>A game by XPUB students <a>Martin Foucaut</a> and <a></a>Federico Poni</a></p>
<p><b>Read carefully!</b></p>
<p>Create a <span>custom path</span> picking up locations through tags. You cannot go to the <span><i>Map</i></span> before selecting one or more locations.</p>
<p>You <span>must give access to the GPS</span> in order to use this app, but do not worry: <span><b>we will not save any kind of data</b></span>.</p>
<p>At the top of the interface, click on <span><i>Map</i></span> to see the path you created.</p>
<p>Go to the locations and scan the <b>QR code</b> you will find on the yellow signs.<br>Click on the button "<img style='width: 20px;' src="qr.png">" which is on the map interface, it will open a popup: click on </span><i>"select file"</i></span> and you will be able to take a photo: shoot the QR code and confirm it. <span>✓</span></p>
<p><span><b>Pay attention! You have to be very close to the QR code to scan it.</b></span></p>
<p>At each location, you will generate a part of a <span>speculative poem</span> :)</p>
<p>If you want to modify the locations, you can go back to the menu through the arrow you can find on the map interface (<span>🡠</span>) or modify the path directly by clicking on the markers on the map.</p>
<p>If the app seems blocked you could have <span>cookie problems</span>: activate the cookies storing in your browser settings.</p>
<p><span>Delete the cookies</span> to restart the game whenever you want.</p>
<p>You can read those <span>instructions</span> clicking on <span><i>Help</i></span> at the left corner and read the <span><i>Credits</i></span> on the right corner</p>
<button onclick="$('#instructions').fadeOut(); $('#pathcreator').fadeIn()">Start!</button></div>
<div class="popup" id="showCurrentQR"></div>
<div id="end">
<div id="endContent"> </div>
<!-- <canvas id="download_canvas" width="210" height="160"></canvas><br>
<button onclick="downloadCanvas()">Download Me!</button> -->
<button onclick="end()">End!</button>
</div>
<!------------- POET OVER MAP --------------------------------------------------------->
<div id="showPic"><div id="showPicContent"></div></div>
<!------------- IN MAP --------------------------------------------------------->
<div id="map"></div>
<!------------- QR SCAN --------------------------------------------------------->
<div id="reader"><input type="file" id="qr-input-file" accept="image/*" capture></div>
<!------------- TITLE --------------------------------------------------------->
<h5>CAUTION<br>WEIRD FLOOR</h5>
<!------------- FILTERS --------------------------------------------------------->
<div id="pathcreator" class="container">
<div class="filter">
<button data-name='.All' class="btn btn-success">All</button>
<button data-name=".Exhibition" class="btn btn-success">Exhibtion</button>
<button data-name=".Books" class="btn btn-success">Books</button>
<button data-name=".Graduates" class="btn btn-success">Graduates</button>
<button data-name=".LargeScale" class="btn btn-success">Large Scale</button>
<button data-name=".AutonomousPractice" class="btn btn-success">Autonomous Practice</button>
<button data-name=".Painting" class="btn btn-success">Painting</button>
<button data-name=".Poetry" class="btn btn-success">Poetry</button>
<button data-name=".Workshop" class="btn btn-success">Workshop</button>
<button data-name=".Collage" class="btn btn-success">Collage</button>
<button data-name=".FoodandDrink" class="btn btn-success">Food & Drink</button>
<button data-name=".Talk" class="btn btn-success">Talk</button>
<button data-name=".Retrospective" class="btn btn-success">Retrospective</button>
<button data-name=".Film" class="btn btn-success">Film</button>
<button data-name=".ConcerteArt" class="btn btn-success">Concerte Art</button>
<button data-name=".AbstractArt" class="btn btn-success">Abstract Art</button>
<button data-name=".Performance" class="btn btn-success">Performance</button>
<button data-name=".Livestream" class="btn btn-success">Livestream</button>
<button data-name=".Music" class="btn btn-success">Music</button>
<button data-name=".Photography" class="btn btn-success">Photography</button>
<button data-name=".Litterature" class="btn btn-success">Literature</button>
<button data-name=".Interview" class="btn btn-success">Interview</button>
<button data-name=".Podcast" class="btn btn-success">Podcast</button>
<button data-name=".Typography" class="btn btn-success">Typography</button>
<button data-name=".TheHagueStreetArt" class="btn btn-success">Street Art</button>
<button data-name=".Video" class="btn btn-success">Video</button>
<button data-name=".OpenStudio" class="btn btn-success">Open Studio</button>
<button data-name=".Installation" class="btn btn-success">Installation</button>
<button data-name=".Publishing" class="btn btn-success">Publishing</button>
<button data-name=".Conversation" class="btn btn-success">Conversation</button>
<button data-name=".City" class="btn btn-success">City</button>
<button data-name=".DJ" class="btn btn-success">DJ</button>
<button data-name=".Group" class="btn btn-success">Group</button>
<button data-name=".Solo" class="btn btn-success">Solo</button>
<button data-name=".Collaborative" class="btn btn-success">Collaborative</button>
<button data-name=".Design" class="btn btn-success">Design</button>
<button data-name=".Art" class="btn btn-success">Art</button>
<button data-name=".Archive" class="btn btn-success">Archive</button>
</div>
<!-------------GROUP / SOLO / RANDOM SORTING --------------------------------------------------------->
<div class="grid">
<!----------------------- Dürst Britt & Mayhew ---------------------------------------->
<div onclick="checkCookies('DurstBrittMayhew')" class="DurstBrittMayhew grid-item All">Plankenkoorts<h2>Dürst Britt & Mayhew</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('DurstBrittMayhew')" class="DurstBrittMayhew grid-item Solo">Plankenkoorts<h2>Dürst Britt & Mayhew</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('DurstBrittMayhew')" class="DurstBrittMayhew grid-item Exhibition">Plankenkoorts<h2>Dürst Britt & Mayhew</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('DurstBrittMayhew')" class="DurstBrittMayhew grid-item Painting">Plankenkoorts<h2>Dürst Britt & Mayhew</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('DurstBrittMayhew')" class="DurstBrittMayhew grid-item AbstractArt">Plankenkoorts<h2>Dürst Britt & Mayhew</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<!----------------------- Fotomuseum Den Haag ---------------------------------------->
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item All">Paper & Light<h2>Fotomuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item Exhibition">Paper & Light<h2>Fotomuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item Photography">Paper & Light<h2>Fotomuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item Installation">Paper & Light<h2>Fotomuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item All">Popel Coumou - Workshop<h2>Fotomuseum Den Haag</h2><h3>Sunday</h3></div>
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item Workshop">Popel Coumou - Workshop<h2>Fotomuseum Den Haag</h2><h3>Sunday</h3></div>
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item Collage">Popel Coumou - Workshop<h2>Fotomuseum Den Haag</h2><h3>Sunday</h3></div>
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item OpenStudio">Popel Coumou - Workshop<h2>Fotomuseum Den Haag</h2><h3>Sunday</h3></div>
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item Collage">Popel Coumou - Workshop<h2>Fotomuseum Den Haag</h2><h3>Sunday</h3></div>
<div onclick="checkCookies('Fotomuseum')" class="Fotomuseum grid-item Art">Popel Coumou - Workshop<h2>Fotomuseum Den Haag</h2><h3>Sunday</h3></div>
<!----------------------- Maurits van de Laar ---------------------------------------->
<div onclick="checkCookies('GalerieMauritsvandeLaar')" class="GalerieMauritsvandeLaar grid-item All">Monster<h2>Galerie Maurits van de Laar</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('GalerieMauritsvandeLaar')" class="GalerieMauritsvandeLaar grid-item Exhibition">Monster<h2>Galerie Maurits van de Laar</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('GalerieMauritsvandeLaar')" class="GalerieMauritsvandeLaar grid-item Painting">Monster<h2>Galerie Maurits van de Laar</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('GalerieMauritsvandeLaar')" class="GalerieMauritsvandeLaar grid-item Art">Monster<h2>Galerie Maurits van de Laar</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<!----------------------- Galerie Ramakers ---------------------------------------->
<div onclick="checkCookies('GalerieRamakers')" class="GalerieRamakers grid-item All">Cool Gray Yellow C<h2>Galerie Ramakers</h2><h3>Saturday, Sunday</h3></div>
<div onclick="checkCookies('GalerieRamakers')" class="GalerieRamakers grid-item Exhibition">Cool Gray Yellow C<h2>Galerie Ramakers</h2><h3>Saturday, Sunday</h3></div>
<div onclick="checkCookies('GalerieRamakers')" class="GalerieRamakers grid-item Painting">Cool Gray Yellow C<h2>Galerie Ramakers</h2><h3>Saturday, Sunday</h3></div>
<div onclick="checkCookies('GalerieRamakers')" class="GalerieRamakers grid-item Group">Cool Gray Yellow C<h2>Galerie Ramakers</h2><h3>Saturday, Sunday</h3></div>
<div onclick="checkCookies('GalerieRamakers')" class="GalerieRamakers grid-item Art">Cool Gray Yellow C<h2>Galerie Ramakers</h2><h3>Saturday, Sunday</h3></div>
<!----------------------- Gallery Nono ---------------------------------------->
<div onclick="checkCookies('Nono')" class="Nono grid-item All">Welcome to Nono!<h2>Gallery Nono</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Nono')" class="Nono grid-item Exhibition">Welcome to Nono!<h2>Gallery Nono</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Nono')" class="Nono grid-item Group">Welcome to Nono!<h2>Gallery Nono</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Nono')" class="Nono grid-item Art">Welcome to Nono!<h2>Gallery Nono</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<!----------------------- Heden ---------------------------------------->
<div onclick="checkCookies('Heden')" class="Heden grid-item All">Heden Recollected<h2>Heden</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Heden')" class="Heden grid-item Exhibition">Heden Recollected<h2>Heden</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Heden')" class="Heden grid-item Painting">Heden Recollected<h2>Heden</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Heden')" class="Heden grid-item Video">Heden Recollected<h2>Heden</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Heden')" class="Heden grid-item Photography">Heden Recollected<h2>Heden</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Heden')" class="Heden grid-item All">Art Breakfast<h2>Heden</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('Heden')" class="Heden grid-item FoodandDrink">Art Breakfast<h2>Heden</h2><h3>Saturday</h3></div>
<!----------------------- KM21 ---------------------------------------->
<div onclick="checkCookies('KM21')" class="KM21 grid-item All">Upaya<h2>KM21</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KM21')" class="KM21 grid-item Exhibition">Upaya<h2>KM21</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KM21')" class="KM21 grid-item Installation">Upaya<h2>KM21</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KM21')" class="KM21 grid-item Solo">Upaya<h2>KM21</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KM21')" class="KM21 grid-item Art">Upaya<h2>KM21</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KM21')" class="KM21 grid-item All">Yasmijn Yarram with Mickey Yang<h2>KM21</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KM21')" class="KM21 grid-item Talk">Yasmijn Yarram with Mickey Yang<h2>KM21</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KM21')" class="KM21 grid-item Video">Yasmijn Yarram with Mickey Yang<h2>KM21</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('KM21')" class="KM21 grid-item Conversation">Yasmijn Yarram with Mickey Yang<h2>KM21</h2><h3>Saturday</h3></div>
<!----------------------- Kunstmuseum Den Haag --------------------------------------->
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item All">Bob Bonies<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item Exhibition">Bob Bonies<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item Retrospective">Bob Bonies<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item ConcerteArt">Bob Bonies<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item Painting">Bob Bonies<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item AbstractArt">Bob Bonies<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item Art">Bob Bonies<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item All">Bob Bonies Movie<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item Film">Bob Bonies Movie<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item Painting">Bob Bonies Movie<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Kunstmuseum')" class="Kunstmuseum grid-item Art">Bob Bonies Movie<h2>Kunstmuseum Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<!----------------------- NEST--------------------------------------->
<div onclick="checkCookies('NEST')" class="NEST grid-item All">She spins the thread (...)<h2>NEST</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('NEST')" class="NEST grid-item Exhibition">She spins the thread (...)<h2>NEST</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('NEST')" class="NEST grid-item Group">She spins the thread (...)<h2>NEST</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('NEST')" class="NEST grid-item All">You’ll have to scream LOUDER<h2>NEST</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('NEST')" class="NEST grid-item Poetry">You’ll have to scream LOUDER<h2>NEST</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('NEST')" class="NEST grid-item Music">You’ll have to scream LOUDER<h2>NEST</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('NEST')" class="NEST grid-item Litterature">You’ll have to scream LOUDER<h2>NEST</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('NEST')" class="NEST grid-item DJ">You’ll have to scream LOUDER<h2>NEST</h2><h3>Saturday</h3></div>
<!----------------------- Uit het Gareel--------------------------------------->
<!-- <div onclick="checkCookies('UithetGareel')" class="UithetGareel grid-item All">Uit het Gareel x PAARD<h2>Uit het Gareel</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('UithetGareel')" class="UithetGareel grid-item Exhibition">Uit het Gareel x PAARD<h2>Uit het Gareel</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('UithetGareel')" class="UithetGareel grid-item Group">Uit het Gareel x PAARD<h2>Uit het Gareel</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('UithetGareel')" class="UithetGareel grid-item Music">Uit het Gareel x PAARD<h2>Uit het Gareel</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('UithetGareel')" class="UithetGareel grid-item Art">Uit het Gareel x PAARD<h2>Uit het Gareel</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('UithetGareel')" class="UithetGareel grid-item Market">Uit het Gareel x PAARD<h2>Uit het Gareel</h2><h3>Saturday</h3></div>
<div onclick="checkCookies('UithetGareel')" class="UithetGareel grid-item Performance">Uit het Gareel x PAARD<h2>Uit het Gareel</h2><h3>Saturday</h3></div> -->
<!----------------------- Page Not Found --------------------------------------->
<div onclick="checkCookies('PNF')" class="PNF grid-item All">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Exhibition">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Books">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Performance">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Publishing">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Interview">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Collaborative">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Archive">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Design">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Litterature">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PNF')" class="PNF grid-item Installation">Pavilionesque<h2>Page Not Found</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<!----------------------- Parts Project --------------------------------------->
<div onclick="checkCookies('PP')" class="PP grid-item All">PP-19 Meet Me in the Middle<h2>Parts Project</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PP')" class="PP grid-item Exhibition">PP-19 Meet Me in the Middle<h2>Parts Project</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('PP')" class="PP grid-item Group">PP-19 Meet Me in the Middle<h2>Parts Project</h2><h3>Friday, Sunday</h3></div>
<div onclick="checkCookies('PP')" class="PP grid-item All">Conversation Pieces<h2>Parts Project</h2><h3>Friday, Sunday</h3></div>
<div onclick="checkCookies('PP')" class="PP grid-item Performance">Conversation Pieces<h2>Parts Project</h2><h3>Friday, Sunday</h3></div>
<div onclick="checkCookies('PP')" class="PP grid-item Conversation">Conversation Pieces<h2>Parts Project</h2><h3>Friday, Sunday</h3></div>
<!----------------------- The Royal Academy of Art The Hague --------------------------------------->
<div onclick="checkCookies('KABK')" class="KABK grid-item All">Graduation Show 2021<h2>The Royal Academy of Art The Hague </h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KABK')" class="KABK grid-item Exhibition">Graduation Show 2021<h2>The Royal Academy of Art The Hague </h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KABK')" class="KABK grid-item Graduates">Graduation Show 2021<h2>The Royal Academy of Art The Hague </h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KABK')" class="KABK grid-item AutonomousPractice">Graduation Show 2021<h2>The Royal Academy of Art The Hague </h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KABK')" class="KABK grid-item Group">Graduation Show 2021<h2>The Royal Academy of Art The Hague </h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KABK')" class="KABK grid-item Design">Graduation Show 2021<h2>The Royal Academy of Art The Hague </h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KABK')" class="KABK grid-item Art">Graduation Show 2021<h2>The Royal Academy of Art The Hague </h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KABK')" class="KABK grid-item Painting">Graduation Show 2021<h2>The Royal Academy of Art The Hague </h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('KABK')" class="KABK grid-item Typography">Graduation Show 2021<h2>The Royal Academy of Art The Hague </h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<!----------------------- Stroom Den Haag --------------------------------------->
<div onclick="checkCookies('Stroom')" class="Stroom grid-item All">Matters, Acts<h2>Stroom Den Haag</h2><h3>Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Stroom')" class="Stroom grid-item Exhibition">Matters, Acts<h2>Stroom Den Haag</h2><h3>Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Stroom')" class="Stroom grid-item Installation">Matters, Acts<h2>Stroom Den Haag</h2><h3>Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Stroom')" class="Stroom grid-item Video">Matters, Acts<h2>Stroom Den Haag</h2><h3>Friday, Saturday, Sunday</h3></div>
<!----------------------- Studio Saber --------------------------------------->
<div onclick="checkCookies('StudioSaber')" class="StudioSaber grid-item All">36DaysOfType08: Saber Javanmard<h2>Arte Sin Límites</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('StudioSaber')" class="StudioSaber grid-item OpenStudio">36DaysOfType08: Saber Javanmard<h2>Arte Sin Límites</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('StudioSaber')" class="StudioSaber grid-item Typography">36DaysOfType08: Saber Javanmard<h2>Arte Sin Límites</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('StudioSaber')" class="StudioSaber grid-item Design">36DaysOfType08: Saber Javanmard<h2>Arte Sin Límites</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<!----------------------- The Grey Space in the Middle --------------------------------------->
<div onclick="checkCookies('Grey')" class="Grey grid-item All">Thursday Dinner Session<h2>The Grey Space in the Middle</h2><h3>Thursday [18:30]</h3></div>
<div onclick="checkCookies('Grey')" class="Grey grid-item FoodandDrink">Thursday Dinner Session<h2>The Grey Space in the Middle</h2><h3>Thursday [18:30]</h3></div>
<div onclick="checkCookies('Grey')" class="Grey grid-item Music">Thursday Dinner Session<h2>The Grey Space in the Middle</h2><h3>Thursday [18:30]</h3></div>
<div onclick="checkCookies('Grey')" class="Grey grid-item DJ">Thursday Dinner Session<h2>The Grey Space in the Middle</h2><h3>Thursday [18:30]</h3></div>
<div onclick="checkCookies('Grey')" class="Grey grid-item All">Facing non objects, can we still run?<h2>Mike & Sid - The Grey Space in the Middle</h2><h3>Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Grey')" class="Grey grid-item Livestream">Facing non objects, can we still run?<h2>Mike & Sid - The Grey Space in the Middle</h2><h3>Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Grey')" class="Grey grid-item Performance">Facing non objects, can we still run?<h2>Mike & Sid - The Grey Space in the Middle</h2><h3>Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Grey')" class="Grey grid-item Collaborative">Facing non objects, can we still run?<h2>Mike & Sid - The Grey Space in the Middle</h2><h3>Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Grey')" class="Grey grid-item Art">Facing non objects, can we still run?<h2>Mike & Sid - The Grey Space in the Middle</h2><h3>Friday, Saturday, Sunday</h3></div>
<!----------------------- Den Haag Street Art --------------------------------------->
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item All">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item Exhibition">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item StreetArt">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item City">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item Painting">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item Talk">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item Art">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item LargeScale">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item Video">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('TheHagueStreetArt')" class="TheHagueStreetArt grid-item Installation">The Hague Street Art<h2>The Hague Street Art</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<!----------------------- Trixie --------------------------------------->
<div onclick="checkCookies('Trixie')" class="Trixie grid-item All"> First Open Studios of Trixie <h2>Trixie</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Trixie')" class="Trixie grid-item OpenStudio"> First Open Studios of Trixie <h2>Trixie</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Trixie')" class="Trixie grid-item Workshop"> First Open Studios of Trixie <h2>Trixie</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Trixie')" class="Trixie grid-item Graduates"> First Open Studios of Trixie <h2>Trixie</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Trixie')" class="Trixie grid-item AutonomousPractice"> First Open Studios of Trixie <h2>Trixie</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Trixie')" class="Trixie grid-item Exhibition"> First Open Studios of Trixie <h2>Trixie</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('Trixie')" class="Trixie grid-item All"> Thirsty Words Off the Page <h2>Trixie</h2><h3>Friday [16:00]</h3></div>
<div onclick="checkCookies('Trixie')" class="Trixie grid-item Poetry"> Thirsty Words Off the Page <h2>Trixie</h2><h3>Friday [16:00]</h3></div>
<div onclick="checkCookies('Trixie')" class="Trixie grid-item Collaborative"> Thirsty Words Off the Page <h2>Trixie</h2><h3>Friday [16:00]</h3></div>
<div onclick="checkCookies('Trixie')" class="Trixie grid-item OpenStudio"> Thirsty Words Off the Page <h2>Trixie</h2><h3>Friday [16:00]</h3></div>
<!----------------------- West Den Haag --------------------------------------->
<div onclick="checkCookies('West')" class="West grid-item All">With/Out<h2>West Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('West')" class="West grid-item Exhibition">With/Out<h2>West Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('West')" class="West grid-item Group">With/Out<h2>West Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('West')" class="West grid-item All">Broeders verheft u ter vrijheid<h2>West Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('West')" class="West grid-item Film">Broeders verheft u ter vrijheid<h2>West Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('West')" class="West grid-item Installation">Broeders verheft u ter vrijheid<h2>West Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('West')" class="West grid-item Performance">Broeders verheft u ter vrijheid<h2>West Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('West')" class="West grid-item Exhibition">Broeders verheft u ter vrijheid<h2>West Den Haag</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<!----------------------- 1646 --------------------------------------->
<div onclick="checkCookies('1646')" class="1646 grid-item All">Tarwe en Walnoot<h2>1646</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('1646')" class="1646 grid-item Exhibition">Tarwe en Walnoot<h2>1646</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('1646')" class="1646 grid-item Video">Tarwe en Walnoot<h2>1646</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('1646')" class="1646 grid-item Solo">Tarwe en Walnoot<h2>1646</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
<div onclick="checkCookies('1646')" class="1646 grid-item Art">Tarwe en Walnoot<h2>1646</h2><h3>Thursday, Friday, Saturday, Sunday</h3></div>
</div>
</div>
<script src="app.js" defer></script>
</body>
</html>