-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
317 lines (280 loc) · 24.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta name="theme-color" content="#d35400" />
<title>Ouija Online - A horror experience</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<!-- Social sharing meta tags. -->
<meta property="og:title" content="Ouija Online - a web horror experience">
<meta property="og:type" content="website" />
<meta property="og:image" content="https://ouija.attejuvonen.fi/assets/screenshot.jpg">
<meta property="og:url" content="https://ouija.attejuvonen.fi/">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:description" content="Communicate with spirits using a Ouija board (powered by evil chatbots).">
<meta property="og:site_name" content="Ouija Online - a web horror experience">
<meta name="twitter:image:alt" content="Ouija Online - a web horror experience">
<!-- Search engine description. -->
<meta name="description"
content="Ouija Online is a web horror experience where you can communicate with spirits using a Ouija board (powered by evil chatbots)." />
</head>
<body>
<!-- Loading overlay exists to prevent mousemagic when page is loading, because mousemagic mouse movements during load would be sluggish and erratic. -->
<div id="loadingOverlay">
<noscript>
<h1>
<!-- This is just a good place for this warning; loadingOverlay exists for unrelated reasons. -->
This web app can't run without JavaScript. Please enable JavaScript and refresh.
</h1>
</noscript>
</div>
<!-- Suicide prevention overlay -->
<div id="suicidePreventionOverlay">
<div id="suicideTextContainer">
<h1>Your life matters</h1>
<p>We all go through rough patches. It's okay to ask for help. Sometimes just talking about it can help.</p>
<p>For text-based support in the U.S., U.K., Canada, and Ireland, text HOME to 741741.</p>
<p><a href="https://www.google.com/search?q=suicide+helpline&oq=suicide+helpline" target="_blank">Phone support</a> is available around the world.</p>
<p>The Ouija board is disabled because it can make you feel worse when you're already in a bad state of mind. Take care of yourself first. You are important.</p>
</div>
</div>
<div id="lightFlash" style="display: none;"></div>
<!-- Glass crack overlay for banshee ending. -->
<img id="glassCrack" src="assets/glass-crack.png"></img>
<!-- Background element for mousemove events -->
<div id="bg">
</div>
<!-- Warning: dont move elements outside boardContainer, otherwise browser resizing will cause inconsistencies in positioning! -->
<div id="boardContainer">
<!-- Board visual. -->
<img id="board" src="assets/ouija_bg.jpg"></img>
<img id="boardEasterEggHelper" src="assets/ouija_bg_face_outline.jpg"></img>
<!-- Banshee ending. -->
<img id="banshee" src="assets/face-no-eyes.png"></img>
<!-- Fix edge case where mousemove events aren't captured on board's rounded corners -->
<div id="hoverBoard"></div>
<!-- Planchette is visible and moves according to fake cursor, planchetteHelper is invisible and moves according to real cursor -->
<img id="planchette" class="planchette-no-glow" src="assets/planchette2.png"></img>
<img id="planchetteHelper" src="assets/planchette2.png"></img>
<!-- Smokey tooltip -->
<div id="tooltipContainer">
<div id="tooltipSymbol">?</div>
<svg width="0">
<filter id="smokeFilter">
<feTurbulence id="smokeFilterTurbulence" type="fractalNoise" baseFrequency=".03" numOctaves="20" />
<feDisplacementMap id="smokeFilterMap" in="SourceGraphic" scale="50">
<animate id="animateToFocus" attributeName="scale" from="50" to="15" dur="2s" repeatCount="0"
restart="always" begin="indefinite" fill="freeze" />
<animate id="animateRemoveFocus" attributeName="scale" from="15" to="50" dur="2s"
repeatCount="0" restart="always" begin="indefinite" fill="freeze" />
<animate id="animateDissipate" attributeName="scale" from="15" to="200" dur="2s" repeatCount="0"
restart="always" begin="indefinite" fill="freeze" />
</feDisplacementMap>
</filter>
</svg>
</div>
<!-- Magnifying glass -->
<div id="magnifying-glass">
<div id="magnifying-glass-surface"></div>
</div>
<!-- Revealed portion of spirit message -->
<div id="spiritMessageContainer" data-text=""></div>
<!-- User message -->
<div id="userMessageContainer">
<pre id="userMessagePre" class="blinking-caret"></pre>
</div>
<!-- Consent popup for first-time visitors -->
<div id="consentPopup" class="popupContainer">
<div class="popupHoverboard"></div>
<h1 class="consentText">Welcome, friend</h1>
<ul class="consentText">
<li>This website provides a horror experience. It is akin to a magic show; no actual spirits are
involved.
</li>
<li>Your conversations with spirits are recorded for development purposes, so do not divulge any
sensitive
information.</li>
<li id="mouseRequirement">This experience requires a mouse. Please use your mouse to proceed.</li>
</ul>
<p id="changingConsentText">Would you like to offer your soul to support this website?</p>
<div class="popupButtonsContainer">
<div id="consentYes" class="popupButton primaryButton">Consent to selling<br>your soul</div>
<div id="consentNo" class="popupButton">Enter without selling<br>your soul</div>
</div>
</div>
<!-- Tooltip popup -->
<div id="tooltipPopup" class="popupContainer">
<div class="popupHoverboard"></div>
<div id="tooltipContent">
</div>
<div class="popupButtonsContainer">
<div id="tooltipContinueButton" class="popupButton primaryButton">Continue</div>
<div id="tooltipShutUpButton" class="popupButton">No more tips</div>
</div>
</div>
<!-- Settings popup -->
<div id="settingsPopup" class="popupContainer">
<div class="popupHoverboard"></div>
<div id="popupSettings">
<h1>Switchboard</h1>
<a href="https://github.com/baobabKoodaa/ouija" target="_blank">
<div id="extRowGithub" class="externalLinkRow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z" />
</svg>
<span>View source code</span>
</div>
</a>
<a href="https://attejuvonen.fi/contact" target="_blank">
<div id="extRowFeedback" class="externalLinkRow">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M384 320c-17.67 0-32 14.33-32 32v96H64V160h96c17.67 0 32-14.32 32-32s-14.33-32-32-32L64 96c-35.35 0-64 28.65-64 64V448c0 35.34 28.65 64 64 64h288c35.35 0 64-28.66 64-64v-96C416 334.3 401.7 320 384 320zM488 0H352c-12.94 0-24.62 7.797-29.56 19.75c-4.969 11.97-2.219 25.72 6.938 34.88L370.8 96L169.4 297.4c-12.5 12.5-12.5 32.75 0 45.25C175.6 348.9 183.8 352 192 352s16.38-3.125 22.62-9.375L416 141.3l41.38 41.38c9.156 9.141 22.88 11.84 34.88 6.938C504.2 184.6 512 172.9 512 160V24C512 10.74 501.3 0 488 0z" />
</svg>
<span>Contact</span>
</div>
</a>
<label class="switch" id="easyModeSlider">
<span id="easyModeSliderSlider" class="slider"></span>
<p class="slider-text">Easy to play mode</p>
</label>
<label class="switch" id="showTipsSlider">
<span id="showTipsSliderSlider" class="slider checked"></span>
<p class="slider-text">Show tips</p>
</label>
<label class="switch" id="revealMouseSlider">
<span id="revealMouseSliderSlider" class="slider"></span>
<p class="slider-text">Reveal mouse magic</p>
</label>
<label class="switch" id="speedModeSlider">
<span id="speedModeSliderSlider" class="slider"></span>
<p class="slider-text">Speed mode</p>
</label>
<label class="switch" id="openAISlider">
<span id="openAISliderSlider" class="slider"></span>
<p class="slider-text">Use gpt3 (requires openai api key)</p>
</label>
</div>
<input id="textInputAPIKey" type="password" placeholder="Paste your OpenAI API key here"
onChange="userPastedAPIKey()"></input>
<div id="settingsPopupButtonsContainer" class="popupButtonsContainer">
<div id="saveSettings" class="popupButton primaryButton">Continue</div>
</div>
</div>
<!-- Preload cursor icons like this -->
<img src="assets/aero_arrow.cur" style="visibility: hidden; position: absolute; pointer-events: none;" />
<img src="assets/aero_link.cur" style="visibility: hidden; position: absolute; pointer-events: none;" />
<img src="assets/grab.cur" style="visibility: hidden; position: absolute; pointer-events: none;" />
<img src="assets/grabbing.cur" style="visibility: hidden; position: absolute; pointer-events: none;" />
<img src="assets/beam_i.cur" style="visibility: hidden; position: absolute; pointer-events: none;" />
<!-- Displayed cursor whose src is altered as needed -->
<img src="assets/aero_arrow.cur" id="cursor" />
</div>
<!-- Settings gear icon -->
<div id="settingsGearHoverboard"></div>
<div id="settingsGear">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" />
</svg>
</div>
<!-- Achievement icons -->
<div id="achievement-hoverboard"></div>
<div id="achievement-row">
<!-- When achievements are unlocked, these are deleted and new elements are added in their place. -->
<svg class="not-achieved" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<title>Locked achievement</title>
<path
d="M288 358.3c13.98-8.088 17.53-30.04 28.88-41.39c11.35-11.35 33.3-14.88 41.39-28.87c7.98-13.79 .1658-34.54 4.373-50.29C366.7 222.5 383.1 208.5 383.1 192c0-16.5-17.27-30.52-21.34-45.73c-4.207-15.75 3.612-36.5-4.365-50.29c-8.086-13.98-30.03-17.52-41.38-28.87c-11.35-11.35-14.89-33.3-28.87-41.39c-13.79-7.979-34.54-.1637-50.29-4.375C222.5 17.27 208.5 0 192 0C175.5 0 161.5 17.27 146.3 21.34C130.5 25.54 109.8 17.73 95.98 25.7C82 33.79 78.46 55.74 67.11 67.08C55.77 78.43 33.81 81.97 25.72 95.95C17.74 109.7 25.56 130.5 21.35 146.2C17.27 161.5 .0008 175.5 .0008 192c0 16.5 17.27 30.52 21.34 45.73c4.207 15.75-3.615 36.5 4.361 50.29C33.8 302 55.74 305.5 67.08 316.9c11.35 11.35 14.89 33.3 28.88 41.4c13.79 7.979 34.53 .1582 50.28 4.369C161.5 366.7 175.5 384 192 384c16.5 0 30.52-17.27 45.74-21.34C253.5 358.5 274.2 366.3 288 358.3zM112 192c0-44.27 35.81-80 80-80s80 35.73 80 80c0 44.17-35.81 80-80 80S112 236.2 112 192zM1.719 433.2c-3.25 8.188-1.781 17.48 3.875 24.25c5.656 6.75 14.53 9.898 23.12 8.148l45.19-9.035l21.43 42.27C99.46 507 107.6 512 116.7 512c.3438 0 .6641-.0117 1.008-.0273c9.5-.375 17.65-6.082 21.24-14.88l33.58-82.08c-53.71-4.639-102-28.12-138.2-63.95L1.719 433.2zM349.6 351.1c-36.15 35.83-84.45 59.31-138.2 63.95l33.58 82.08c3.594 8.797 11.74 14.5 21.24 14.88C266.6 511.1 266.1 512 267.3 512c9.094 0 17.23-4.973 21.35-13.14l21.43-42.28l45.19 9.035c8.594 1.75 17.47-1.398 23.12-8.148c5.656-6.766 7.125-16.06 3.875-24.25L349.6 351.1z" />
</svg>
<svg class="not-achieved" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<title>Locked achievement</title>
<path
d="M288 358.3c13.98-8.088 17.53-30.04 28.88-41.39c11.35-11.35 33.3-14.88 41.39-28.87c7.98-13.79 .1658-34.54 4.373-50.29C366.7 222.5 383.1 208.5 383.1 192c0-16.5-17.27-30.52-21.34-45.73c-4.207-15.75 3.612-36.5-4.365-50.29c-8.086-13.98-30.03-17.52-41.38-28.87c-11.35-11.35-14.89-33.3-28.87-41.39c-13.79-7.979-34.54-.1637-50.29-4.375C222.5 17.27 208.5 0 192 0C175.5 0 161.5 17.27 146.3 21.34C130.5 25.54 109.8 17.73 95.98 25.7C82 33.79 78.46 55.74 67.11 67.08C55.77 78.43 33.81 81.97 25.72 95.95C17.74 109.7 25.56 130.5 21.35 146.2C17.27 161.5 .0008 175.5 .0008 192c0 16.5 17.27 30.52 21.34 45.73c4.207 15.75-3.615 36.5 4.361 50.29C33.8 302 55.74 305.5 67.08 316.9c11.35 11.35 14.89 33.3 28.88 41.4c13.79 7.979 34.53 .1582 50.28 4.369C161.5 366.7 175.5 384 192 384c16.5 0 30.52-17.27 45.74-21.34C253.5 358.5 274.2 366.3 288 358.3zM112 192c0-44.27 35.81-80 80-80s80 35.73 80 80c0 44.17-35.81 80-80 80S112 236.2 112 192zM1.719 433.2c-3.25 8.188-1.781 17.48 3.875 24.25c5.656 6.75 14.53 9.898 23.12 8.148l45.19-9.035l21.43 42.27C99.46 507 107.6 512 116.7 512c.3438 0 .6641-.0117 1.008-.0273c9.5-.375 17.65-6.082 21.24-14.88l33.58-82.08c-53.71-4.639-102-28.12-138.2-63.95L1.719 433.2zM349.6 351.1c-36.15 35.83-84.45 59.31-138.2 63.95l33.58 82.08c3.594 8.797 11.74 14.5 21.24 14.88C266.6 511.1 266.1 512 267.3 512c9.094 0 17.23-4.973 21.35-13.14l21.43-42.28l45.19 9.035c8.594 1.75 17.47-1.398 23.12-8.148c5.656-6.766 7.125-16.06 3.875-24.25L349.6 351.1z" />
</svg>
<svg class="not-achieved" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<title>Locked achievement</title>
<path
d="M288 358.3c13.98-8.088 17.53-30.04 28.88-41.39c11.35-11.35 33.3-14.88 41.39-28.87c7.98-13.79 .1658-34.54 4.373-50.29C366.7 222.5 383.1 208.5 383.1 192c0-16.5-17.27-30.52-21.34-45.73c-4.207-15.75 3.612-36.5-4.365-50.29c-8.086-13.98-30.03-17.52-41.38-28.87c-11.35-11.35-14.89-33.3-28.87-41.39c-13.79-7.979-34.54-.1637-50.29-4.375C222.5 17.27 208.5 0 192 0C175.5 0 161.5 17.27 146.3 21.34C130.5 25.54 109.8 17.73 95.98 25.7C82 33.79 78.46 55.74 67.11 67.08C55.77 78.43 33.81 81.97 25.72 95.95C17.74 109.7 25.56 130.5 21.35 146.2C17.27 161.5 .0008 175.5 .0008 192c0 16.5 17.27 30.52 21.34 45.73c4.207 15.75-3.615 36.5 4.361 50.29C33.8 302 55.74 305.5 67.08 316.9c11.35 11.35 14.89 33.3 28.88 41.4c13.79 7.979 34.53 .1582 50.28 4.369C161.5 366.7 175.5 384 192 384c16.5 0 30.52-17.27 45.74-21.34C253.5 358.5 274.2 366.3 288 358.3zM112 192c0-44.27 35.81-80 80-80s80 35.73 80 80c0 44.17-35.81 80-80 80S112 236.2 112 192zM1.719 433.2c-3.25 8.188-1.781 17.48 3.875 24.25c5.656 6.75 14.53 9.898 23.12 8.148l45.19-9.035l21.43 42.27C99.46 507 107.6 512 116.7 512c.3438 0 .6641-.0117 1.008-.0273c9.5-.375 17.65-6.082 21.24-14.88l33.58-82.08c-53.71-4.639-102-28.12-138.2-63.95L1.719 433.2zM349.6 351.1c-36.15 35.83-84.45 59.31-138.2 63.95l33.58 82.08c3.594 8.797 11.74 14.5 21.24 14.88C266.6 511.1 266.1 512 267.3 512c9.094 0 17.23-4.973 21.35-13.14l21.43-42.28l45.19 9.035c8.594 1.75 17.47-1.398 23.12-8.148c5.656-6.766 7.125-16.06 3.875-24.25L349.6 351.1z" />
</svg>
</div>
<!-- Achievement notifications -->
<div id="achievementPossessed-notification" class="achievement-notification">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path
d="M288 358.3c13.98-8.088 17.53-30.04 28.88-41.39c11.35-11.35 33.3-14.88 41.39-28.87c7.98-13.79 .1658-34.54 4.373-50.29C366.7 222.5 383.1 208.5 383.1 192c0-16.5-17.27-30.52-21.34-45.73c-4.207-15.75 3.612-36.5-4.365-50.29c-8.086-13.98-30.03-17.52-41.38-28.87c-11.35-11.35-14.89-33.3-28.87-41.39c-13.79-7.979-34.54-.1637-50.29-4.375C222.5 17.27 208.5 0 192 0C175.5 0 161.5 17.27 146.3 21.34C130.5 25.54 109.8 17.73 95.98 25.7C82 33.79 78.46 55.74 67.11 67.08C55.77 78.43 33.81 81.97 25.72 95.95C17.74 109.7 25.56 130.5 21.35 146.2C17.27 161.5 .0008 175.5 .0008 192c0 16.5 17.27 30.52 21.34 45.73c4.207 15.75-3.615 36.5 4.361 50.29C33.8 302 55.74 305.5 67.08 316.9c11.35 11.35 14.89 33.3 28.88 41.4c13.79 7.979 34.53 .1582 50.28 4.369C161.5 366.7 175.5 384 192 384c16.5 0 30.52-17.27 45.74-21.34C253.5 358.5 274.2 366.3 288 358.3zM112 192c0-44.27 35.81-80 80-80s80 35.73 80 80c0 44.17-35.81 80-80 80S112 236.2 112 192zM1.719 433.2c-3.25 8.188-1.781 17.48 3.875 24.25c5.656 6.75 14.53 9.898 23.12 8.148l45.19-9.035l21.43 42.27C99.46 507 107.6 512 116.7 512c.3438 0 .6641-.0117 1.008-.0273c9.5-.375 17.65-6.082 21.24-14.88l33.58-82.08c-53.71-4.639-102-28.12-138.2-63.95L1.719 433.2zM349.6 351.1c-36.15 35.83-84.45 59.31-138.2 63.95l33.58 82.08c3.594 8.797 11.74 14.5 21.24 14.88C266.6 511.1 266.1 512 267.3 512c9.094 0 17.23-4.973 21.35-13.14l21.43-42.28l45.19 9.035c8.594 1.75 17.47-1.398 23.12-8.148c5.656-6.766 7.125-16.06 3.875-24.25L349.6 351.1z" />
</svg>
<div class="achievementText">
<h1>
Ghost writer
</h1>
<p>
Evil spirit possessed you to write and you let it happen.
</p>
</div>
</div>
<div id="achievementEasterEgg-notification" class="achievement-notification">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path
d="M288 358.3c13.98-8.088 17.53-30.04 28.88-41.39c11.35-11.35 33.3-14.88 41.39-28.87c7.98-13.79 .1658-34.54 4.373-50.29C366.7 222.5 383.1 208.5 383.1 192c0-16.5-17.27-30.52-21.34-45.73c-4.207-15.75 3.612-36.5-4.365-50.29c-8.086-13.98-30.03-17.52-41.38-28.87c-11.35-11.35-14.89-33.3-28.87-41.39c-13.79-7.979-34.54-.1637-50.29-4.375C222.5 17.27 208.5 0 192 0C175.5 0 161.5 17.27 146.3 21.34C130.5 25.54 109.8 17.73 95.98 25.7C82 33.79 78.46 55.74 67.11 67.08C55.77 78.43 33.81 81.97 25.72 95.95C17.74 109.7 25.56 130.5 21.35 146.2C17.27 161.5 .0008 175.5 .0008 192c0 16.5 17.27 30.52 21.34 45.73c4.207 15.75-3.615 36.5 4.361 50.29C33.8 302 55.74 305.5 67.08 316.9c11.35 11.35 14.89 33.3 28.88 41.4c13.79 7.979 34.53 .1582 50.28 4.369C161.5 366.7 175.5 384 192 384c16.5 0 30.52-17.27 45.74-21.34C253.5 358.5 274.2 366.3 288 358.3zM112 192c0-44.27 35.81-80 80-80s80 35.73 80 80c0 44.17-35.81 80-80 80S112 236.2 112 192zM1.719 433.2c-3.25 8.188-1.781 17.48 3.875 24.25c5.656 6.75 14.53 9.898 23.12 8.148l45.19-9.035l21.43 42.27C99.46 507 107.6 512 116.7 512c.3438 0 .6641-.0117 1.008-.0273c9.5-.375 17.65-6.082 21.24-14.88l33.58-82.08c-53.71-4.639-102-28.12-138.2-63.95L1.719 433.2zM349.6 351.1c-36.15 35.83-84.45 59.31-138.2 63.95l33.58 82.08c3.594 8.797 11.74 14.5 21.24 14.88C266.6 511.1 266.1 512 267.3 512c9.094 0 17.23-4.973 21.35-13.14l21.43-42.28l45.19 9.035c8.594 1.75 17.47-1.398 23.12-8.148c5.656-6.766 7.125-16.06 3.875-24.25L349.6 351.1z" />
</svg>
<div class="achievementText">
<h1>
That looks like nothing to me
</h1>
<p>
You used the planchette to inspect the board closer.
</p>
</div>
</div>
<div id="achievementFalseProphets-notification" class="achievement-notification">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
<path
d="M288 358.3c13.98-8.088 17.53-30.04 28.88-41.39c11.35-11.35 33.3-14.88 41.39-28.87c7.98-13.79 .1658-34.54 4.373-50.29C366.7 222.5 383.1 208.5 383.1 192c0-16.5-17.27-30.52-21.34-45.73c-4.207-15.75 3.612-36.5-4.365-50.29c-8.086-13.98-30.03-17.52-41.38-28.87c-11.35-11.35-14.89-33.3-28.87-41.39c-13.79-7.979-34.54-.1637-50.29-4.375C222.5 17.27 208.5 0 192 0C175.5 0 161.5 17.27 146.3 21.34C130.5 25.54 109.8 17.73 95.98 25.7C82 33.79 78.46 55.74 67.11 67.08C55.77 78.43 33.81 81.97 25.72 95.95C17.74 109.7 25.56 130.5 21.35 146.2C17.27 161.5 .0008 175.5 .0008 192c0 16.5 17.27 30.52 21.34 45.73c4.207 15.75-3.615 36.5 4.361 50.29C33.8 302 55.74 305.5 67.08 316.9c11.35 11.35 14.89 33.3 28.88 41.4c13.79 7.979 34.53 .1582 50.28 4.369C161.5 366.7 175.5 384 192 384c16.5 0 30.52-17.27 45.74-21.34C253.5 358.5 274.2 366.3 288 358.3zM112 192c0-44.27 35.81-80 80-80s80 35.73 80 80c0 44.17-35.81 80-80 80S112 236.2 112 192zM1.719 433.2c-3.25 8.188-1.781 17.48 3.875 24.25c5.656 6.75 14.53 9.898 23.12 8.148l45.19-9.035l21.43 42.27C99.46 507 107.6 512 116.7 512c.3438 0 .6641-.0117 1.008-.0273c9.5-.375 17.65-6.082 21.24-14.88l33.58-82.08c-53.71-4.639-102-28.12-138.2-63.95L1.719 433.2zM349.6 351.1c-36.15 35.83-84.45 59.31-138.2 63.95l33.58 82.08c3.594 8.797 11.74 14.5 21.24 14.88C266.6 511.1 266.1 512 267.3 512c9.094 0 17.23-4.973 21.35-13.14l21.43-42.28l45.19 9.035c8.594 1.75 17.47-1.398 23.12-8.148c5.656-6.766 7.125-16.06 3.875-24.25L349.6 351.1z" />
</svg>
<div class="achievementText">
<h1>
Beware of false prophets
</h1>
<p>
You thought angering the spirit would be a good idea.
</p>
</div>
</div>
<!-- Suicide prevention -->
<div id="suicide-prevention-popup">
<div class="achievementText">
<h1>
Sorry to interrupt the game...
</h1>
<p>
How are you doing?
</p>
<p id="suicide-prevention-button-fine" class="button">
😊 I'm fine, just playing
</p>
<p id="suicide-prevention-button-help" class="button">
😔 It's a rough time for me
</p>
</div>
</div>
<!-- Preload fonts to prevent flashing unstyled text. -->
<div class="font_preload" style="opacity: 0; width: 0; height: 0;">
<span style="font-family: 'Feral'"></span>
<span style="font-family: 'Carnivalee Freakshow'"></span>
<span style="font-family: 'Kingthings Trypewriter 2'"></span>
</div>
<script async src="assets/mouse_recordings.js"></script>
<script src="app.js"></script>
<script src="chatbot.js"></script>
<audio id="audio-jack" preload="auto" src="assets/jack_in_the_box.mp3"
style="visibility: none; position: absolute; bottom: -300px"></audio>
<audio id="audio-drum1" preload="auto" src="assets/mixkit-hard-horror-hit-drum-565.mp3"
style="visibility: none; position: absolute; bottom: -300px"></audio>
<audio id="audio-scream1" preload="auto" src="assets/demonic-woman-scream-6333.mp3"
style="visibility: none; position: absolute; bottom: -300px"></audio>
<audio id="audio-crack1" preload="auto" src="assets/ice-cracking.mp3"
style="visibility: none; position: absolute; bottom: -300px"></audio>
</body>
</html>