-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
58 lines (56 loc) · 2.49 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Study Bomb</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<section id="intro">
<h1>Welcome to study bomb!</h1>
<p>The logic behind this utility is simple.</p>
<p>
Do you have problems with your attention span? Do you feel the urge to make frequent study breaks while
preparing for exams to check your phone, pets, children (lol)?
</p>
<p>
Simply put a subtle pressure upon yourself to discourage your brain from stopping to read your study
materials.
</p>
<p>
Make an estimate how much time do you need to read one page of your textbook (or PDF document or anything
really). Then set this time in the clock and set them running. Once you finish reading the page, press the
button to add the same amount of time to the countdown again.
</p>
<p>
If the time runs out, a randomly selected annoying song will play. This should stress you enough to make you
want to avoid the countdown hitting zero.
</p>
<form id="input-form">
<label for="time-input">How much time do you need to read one page on average?</label><br>
<span>Use format <code>minutes:seconds</code></span><br>
<input id="time-input" type="text" maxlength="5" required/>
<input type="submit" value="Set" />
</form>
<div class="tipbox">TIP: Press F11 to enable full-screen mode and get rid of any unnecessary distractions.</div>
</section>
<section id="timer" class="hidden">
<div id="timer-container">
<code id="timer-minutes"></code>
<code id="timer-minutes-label" class="hidden"> min</code>
<code id="timer-colon">:</code>
<code id="timer-seconds"></code>
</div>
<button id="timer-button">Next<br>page</button>
<div id="total-timer" class="small">You've been studying <code id="total-time"></code> in total.</div>
<div id="punishment-placeholder">
<audio id="punishment" src="media/punishment.mp3" loop></audio> <!-- TEMPORARY -->
</div>
</section>
<section id="settings">
<button id="theme-button">Switch theme</button>
<button id="distractions-button">Minimal distractions mode</button>
</section>
</body>
</html>