-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
102 lines (95 loc) · 4.16 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
<!DOCTYPE html>
<html>
<head>
<title>Are You Being Mindful?</title>
<link rel='stylesheet' href='style.css'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<img class="gc-analytics-img" src="https://analytics.shantaram.xyz/count?p=/hammer">
</head>
<body class='v-flex-centered'>
<form id='form' class='v-flex-centered'>
<p class='text v-flex-centered'>
Having trouble keeping your code full of best practices? Keep resorting to writing your code with a hammer,
trying to beat it into submission? This site is for you! Pick an interval, and a suitably snarky message,
and hit "Remind me!" to be pinged with annoying reminders to write better code! Who wouldn't want this? And
I guess you could also use it as a reminder to commit...
</p>
<div id='ideas-container' class='text v-flex-centered'>
Ideas for things to use as a message:
<div class='select-wrapper'>
<select id='ideas'>
<option value='---'>(Select an option)</option>
</select>
</div>
</div>
<div id='form-heading'>Are you being mindful?</div>
<div class='input-wrapper'>
<label for='interval'>How often do you want to be reminded?</label>
<div class='select-wrapper'>
<select id='interval'>
<option value='15'>Every 15 minutes</option>
<option value='30'>Every 30 minutes</option>
<option value='60'>Every hour</option>
<option value='180'>Every 3 hours</option>
<option value='360'>Every 6 hours</option>
</select>
</div>
</div>
<div class='input-wrapper'>
<label for='sound-selector'>Select the sound to use</label>
<div class='select-wrapper'>
<select id='sound-selector'>
<option value='digital'>Digital Alert</option>
<option value='gong'>Gong</option>
<option value='electric'>Electric Bell</option>
<option value='8bit'>8-bit</option>
<option value='asshole'>Obnoxious Alarm Clock</option>
</select>
</div>
</div>
<div class='input-wrapper'>
<label for='message'>Message to remind you with:</label>
<input type='text' id='message'>
</div>
<div id='button-wrapper'>
<div class='input-wrapper'>
<button id='test-alert' type="button">Test Alert</button>
</div>
<div class='input-wrapper'>
<button id='remind-me' type="button">Remind me!</button>
</div>
</div>
</form>
<div id='credits'>
<div>Based on a concept by <a href='https://notlaura.com'>Lara Schenck</a>, from her talk "The Algorithms of
CSS".</div>
<div>Site by <a href='https://shantaram.xyz'>shantaram</a>.</div>
</div>
<div id='mask' class='v-flex-centered'>
<div id='alert' class='v-flex-centered'>
<div id='alert-header'>
test
</div>
<div id='alert-body'>
</div>
<div id='alert-footer'>
<button id='alert-close'>Close</button>
<button id='alert-action'>Action</button>
</div>
</div>
</div>
<audio src='digital.mp3' id='audio'></audio>
<script src='ideas.js'></script>
<script src='notif.js'></script>
<script src='alert.js'></script>
<script src='AlertWorkerManager.js'></script>
<script src='main.js'></script>
</body>
</html>