-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
66 lines (60 loc) · 2.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Where is Waldo?</title>
</head>
<body>
<div class="game-container">
<h1 id="title">Where's Waldo?</h1>
<h2 id="subtitle">RP Edition <span id="info-sign">ⓘ</span></h2>
<div id="info-popup" class="info-popup">
<div class="info-content">
<span id="close-info-popup" class="close-info-popup">×</span>
<h3>What is Retinitis Pigmentosa?</h3>
<p>Retinitis pigmentosa (RP) is a group of inherited eye disorders that affect the retina. It causes a
gradual loss of vision over time, typically starting with night blindness and tunnel vision.</p>
<p>This game is designed to emphasize this difficulty of RP. As oppose to people with normal vision
which might find this empty version of the game quite easy, people with RP, who have a limited field
of vision, will find it much harder to find Waldo, hence the name of the game.</p>
</div>
</div>
<button id="start-button">Start</button>
<button id="stop-button">Stop</button>
<div id="counter">Score: 0</div>
<div id="stopwatch">0:00</div>
<div id="badge">
<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fmenisadi.github.io%2FRPWaldo%2F">
<img
src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Fmenisadi.github.io%2FRPWaldo%2F&label=Players&countColor=%23ff8a65" />
</a>
</div>
<div id="waldo"></div>
<svg id="svg" class="svg" viewBox="0 0 3920 3080">
<mask id="myMask">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100%" height="100%" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<circle id="mask" cx="50" cy="50" r="600" fill="black" />
</mask>
<rect x="0" y="0" width="100%" height="100%" fill="white" mask="url(#myMask)" />
</svg>
<div class="toggle-container">
<div class="toggle-label">
<label for="toggle-switch">Toggle Tunnel Vision</label>
</div>
<div class="toggle-sub-label">
<label for="toggle-switch">(Desktop Only)</label>
</div>
<label class="switch">
<input type="checkbox" id="toggle-switch">
<span class="slider"></span>
</label>
</div>
</div>
<script src="script.js"></script>
</body>
</html>