This repository has been archived by the owner on Apr 3, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (55 loc) · 2.54 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
<!DOCTYPE html>
<html>
<!--
To be done...
INTERFACE
- Support i18n of some sort
LOGIC
- Fade in rain sound when user presses Start. Then ring bell.
- Have a maximum period length threshold
-->
<head>
<title>Train your attention</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Qwigley">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Rain pours basically without interruption. -->
<!-- Since <audio> tags won't loop seamlessly we just store the mp3 name in a <span>. It's a hack but it works. -->
<span id="rain" style="display:none">heavy_rain.mp3</span>
<!-- Bell rings one at the beginning and once at the end -->
<audio id="bell" preload>
<source src="meditation_bell.mp3" type="audio/mp3"/>
<h1>Sorry! This won't work because your web browser does not support HTML5 audio.</h1>
</audio>
<!-- Bottom container: Simple feedback during meditation session -->
<div id="bottom_container" class="frosted_container transparent">
<div>
<div id="fb_listen" class="transparent overlap">Listen to the rain...</div>
<div id="fb_theend" class="transparent overlap">End of this session.</div>
<br/>
</div>
<div>
<span id="fb_goodjob" class="transparent overlap positive">Good job!</span>
<span id="fb_wander" class="transparent overlap negative">Your attention wandered.</span>
<span id="fb_eager" class="transparent overlap negative">You pressed a key too early.</span>
<br/>
</div>
<div id="fb_score" class="transparent">Today's score is <span id="score_value" class="positive"></span>.</div>
</div>
<!-- Top container: Instructions and Start button -->
<div id="top_container" class="frosted_container">
<h1>Train your attention</h1>
<p>Once you click the Start button below you will hear a meditation bell and rain drumming in the background.
Gently place your attention on the sound of the rain pouring down.</p>
<p>After a little while the rain will become noticeably quieter. This is your cue to press the space bar to show that
you are still paying attention. It's that simple. The meditation session will come to an end when you miss the cue or press a key
too early.</p>
<p>If during the session you notice your mind starts to wander, don't feel bad. You did nothing wrong. Calmly bring your
attention back to the sound of the rain, like a bumblebee that strayed away from the flowers and now decides to come back.</p>
<p>Ready?</p>
<div id="start_button" onmousedown="start_button_pressed()">Start</div>
</div>
<script src="script.js"></script>
</body>
</html>