-
Notifications
You must be signed in to change notification settings - Fork 30
/
index.html
346 lines (310 loc) · 10.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
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
<!-----------------------------------------------------
sleepyti.me bedtime calculator
Author: David Shaw (dshaw dot jobs at gmail dot com)
URL: http://github.com/davidshaw/sleepyti.me/
------------------------------------------------------>
<html>
<head>
<title>sleepyti.me bedtime calculator</title>
<META NAME="Description" CONTENT="Sleepyti.me is a bedtime calculator that can help you calculate when to fall asleep. By counting backwards in sleep cycles, sleepyti.me has the ability to help you wake up refreshed, instead of feeling groggy. Sleepyti.me can also help you figure out what time to set your alarm if you are going to sleep at that moment.">
<META NAME="Keywords" CONTENT="sleep, refreshed, sleeping, health, bedtime, bed, bed time, calculator, ajax, javascript">
<META NAME="robots" CONTENT="index">
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
function ren() {
// render the page -- in case you're wondering,
// nothing will work without javascript!
$("#tit").html('<font face="Garamond"><h1> <i>sleepyti.me <font color="#33CC33">beta 3</font></i></h1></font>');
var mrend = '';
mrend = mrend +
'<table><tr width="100%">' +
'<td width="20%"></td>' +
'<td><span class="intro"><font face="Garamond" size=5>I have to wake up at <span class="waketime" style="display:none;"></span> </td>' +
'<td>' +
'<select id="hour">' +
'<option>(hour)</option>';
// populate our lists
for(var h = 1; h <= 12; h++) {
mrend = mrend + '<option>' + h + '</option>';
}
mrend = mrend + '</select></td><td><select id="minute"><option>(minute)</option>';
for(var m = 0; m <= 55; m += 5) {
if(m < 10) {
mrend = mrend + '<option value="' + m + '">0' + m + '</option>';
}
else {
mrend = mrend + '<option>' + m + '</option>';
}
}
mrend = mrend + '</select></td><td><select id="ampm">' +
'<option>AM</option><option>PM</option></select></td></tr>' +
'<tr><td><hr color="white"></td></tr>' +
'<tr valign=TOP><td></td><td align="center"><span id="nowtop"><hr color="white" width="25%"><big><font color="#666666"><i>or, find out when to wake up<br/>if you go to bed now</i></font></big></td><td align="center"><hr color="white" width="25%"><input type="button" value="zzz" id="sleepnow"/></span></td>' +
'<td></td></span>' +
'<td></tr><tr><span class="results" style="display:none;"></span></td>' +
'</tr></table>';
$('#main').html(mrend);
}
ren();
function putads() {
// let's throw in some ads
$('#amazon').fadeIn(2500);
}
// calculates an hour and a half back
function sleepback(hr, min, an) {
var rmin = 0;
var rhr = 0;
var a = an;
if(min < 30) {
rmin = (min * 1) + (30 * 1);
rhr = hr - 2;
}
else if(min >= 30) {
rmin = min - 30;
rhr = hr - 1;
}
if(rhr < 1) {
rhr = 12 + rhr;
if(a == "AM") {
a = "PM";
}
else {
a = "AM";
}
}
var r = [rhr, rmin, a];
return r;
}
// knockout takes a date object and returns a
// string with wake times!
// time + :14 + (multiples of 90 mins)
function knockout(rightnow) {
var r = ''; // return string
var hr = rightnow.getHours();
var dhr = 0; // separate variable to display because (24 hr clock)
var ap = '';
// it takes 14 minutes to fall asleep
var min = rightnow.getMinutes() + 14;
if(min > 60) {
min = min - 60;
hr = hr + 1;
if(hr >= 24) {
if(hr == 24) {
hr = 0; // midnight, must adjust!
}
else if(hr == 25) {
hr = 1;
}
}
}
r = '<table><tr><td width="5%"></td><td><font size="5"><p>It takes the average human <b>fourteen minutes</b> to fall asleep.</p><p>If you head to bed right now, you should try to wake up at one of the following times:</p><h2><font color="#666666">';
for(var ctr = 0; ctr < 6; ctr++) { // normal sleep schedule
// add an hour and a half
if(min < 30) {
min = min + 30;
}
else {
min = min - 30;
hr = hr + 1
}
hr = hr + 1;
if(hr == 24) {
hr = 0;
}
if(hr == 25) {
hr = 1;
}
if(hr < 12) {
ap = ' AM';
dhr = hr;
if(hr == 0) {
dhr = "12";
}
}
else {
ap = ' PM';
dhr = hr - 12;
}
if(dhr == 0) {
dhr = 12;
}
if(ctr == 0) {
if(min > 9) {
r = r + dhr + ':' + min + ap;
}
else {
r = r + dhr + ':0' + min + ap;
}
}
else if(ctr == 4 || ctr == 5) {
if(min > 9) {
r = r + ' <i>or</i> <font color="#00CC33">' + dhr + ':' + min + ap + '</font>';
}
else {
r = r + ' <i>or</i> <font color="#00CC33">' + dhr + ':0' + min + ap;
}
}
else if(ctr == 3) {
if(min > 9) {
r = r + ' <i>or</i> <font color="#99CC66">' + dhr + ':' + min + ap + '</font>';
}
else {
r = r + ' <i>or</i> <font color="#99CC66">' + dhr + ':0' + min + ap + '</font>';
}
}
else {
if(min > 9) {
r = r + ' <i>or</i> ' + dhr + ':' + min + ap;
}
else {
r = r + ' <i>or</i> ' + dhr + ':0' + min + ap;
}
}
}
r = r + '</h2></font><p>A good night\'s sleep consists of 5-6 complete sleep cycles.</p>';
r = r + '<center><a href="index.html"><h3>back</h3></a></center>';
return r;
}
// handle "sleep now" requests
// this currently fades out the #main id,
// and works in a totally separate div
$("#sleepnow").click(function() {
var st = '';
var answ = ''; // this is the text we return
var d = new Date();
answ = knockout(d); // knockout takes a Date() and returns a string of wake times
st = '<span id="bit" style=display:none><font face="Garamond" size=5>' +
answ + '</font></span>';
$('#main').hide();
$('#instant').html(st);
$('#instant').show()
$('#bit').show(250);
putads()
});
// user changes the list, so we calculate times!
$("#main select").change(function () {
if($("#hour").val() == '(hour)' || $("#minute").val() == '(minute)') {
return false;
}
$('#nowtop').fadeOut(500); // ???
var ampm = $("#ampm").val();
var hr = $("#hour").val();
var min = $("#minute").val();
var orig = [hr, min, ampm];
if(hr == 12) {
if(ampm == "AM") {
ampm = "PM";
}
else {
ampm = "AM";
}
}
var txt = '<table><tr><td width="5%"></td><td><font face="Garamond" size=5>You should try to <b>fall asleep</b> at one of the following times:<br/><br/><font size=6>';
var first = true;
var times = new Array();
for(var c = 1; c <= 10; c++) {
var back = sleepback(hr, min, ampm);
var nhr = back[0];
var nmin = back[1];
ampm = back[2];
var ampmt = "";
ampmt = back[2];
// countdown from 12, but that's not
// how am/pm system works... whoops!
if(nhr == 12) {
if(ampm == "AM") {
ampmt = "PM";
}
else {
ampmt = "AM";
}
}
// TODO: reverse display order
if(c == 6 || c == 4 || c == 5 || c == 3) {
var temp = '';
if(nmin > 9) {
if(c == 6) {
temp = '<font color="#01DF74" size="7">' + nhr + ':' + nmin + ' ' + ampmt + '</font>';
times.push(temp);
}
else {
temp = ' <i>or</i> ' + '<font color="#01DF74" size="7">' + nhr + ':' + nmin + ' ' + ampmt + '</font>';
times.push(temp);
}
}
else { // insert 0
if(c == 6) {
temp = '<font color="#01DF74" size="7">' + nhr + ':0' + nmin + ' ' + ampmt + '</font>';
times.push(temp);
}
else {
temp = ' <i>or</i> ' + '<font color="#01DF74" size="7">' + nhr + ':0' + nmin + ' ' + ampmt + '</font>';
times.push(temp);
}
}
}
hr = nhr;
min = nmin;
}
for(i = 3; i >= 0; i--) {
txt = txt + times[i];
}
txt = txt + '</font>';
txt = txt + '<br/><br/><font color="#0080FF">Please keep in mind that you should be <i>falling asleep</i> at these times.<br/><br/> The average adult human takes <b>fourteen minutes</b> to fall asleep, so plan accordingly!</font>';
txt = txt + '<br/></br><font color="#9966CC">sleepyti.me works by counting backwards in <b>sleep cycles</b>. Sleep cycles typically last <b>90 minutes</b>.<br/><br/>Waking up in the middle of a sleep cycle leaves you feeling tired and groggy, but waking up <i>in between</i> cycles lets you wake up feeling refreshed and alert!</font>';
txt = txt + '<br/><br/><center><a href="index.html"><h3>back</h3></a></center>';
$('#main').hide();
$('#instant').html(txt)
$('#instant').show(500)
var wtime = "";
if(orig[1] > 9) {
wtime = '<b>' + orig[0] + ':' + orig[1] + ' ' + orig[2] + '</b>';
}
else {
wtime = '<b>' + orig[0] + ':0' + orig[1] + ' ' + orig[2] + '</b>';
}
$('.waketime').html(wtime);
$('.waketime').fadeIn(1000);
putads();
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19580945-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body link="#0080FF" vlink="#0080FF">
<noscript><font face="Garamond" size="5"><center>Hello, and welcome to sleepyti.me. Sleepyti.me is a bedtime calculator that counts backwards in sleep cycles and tells you when to go to sleep so that you can wake up refreshed! This site is written in Javascript, which must be enabled in order to use the page. Thanks for visiting, and sorry for the inconvenience!</noscript>
<div id="tit"></div>
<div id="main"></div>
<div id="instant" style="display:none;"></div>
<div id="amazon" style="display:none;" align="center" valign="bottom">
<hr color="#CCCCCC" width="30%"><font face="Garamond" size=5 color="#666666"><i>Sleepyti.me is provided as a free service thanks to support from our ads.<br/><br/>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-7082199327067068";
/* sleepy */
google_ad_slot = "4113086282";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="fb">
<hr color="white">
<hr color="white">
<hr color="white">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fsleepyti.me&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
</div>
</body>
</html>