-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (128 loc) · 7.41 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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Slumbr.in Sleep Cycle Calculator</title>
<meta name="description" content="Slumbr.in is a sleep cycle calculator that finds the best times to go to sleep or wake up.">
<meta name="keywords" content="Sleep cycle calculator">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href='http://fonts.googleapis.com/css?family=Coming+Soon' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52478120-1', 'auto');
ga('send', 'pageview');
</script>
<link href='http://fonts.googleapis.com/css?family=Raleway+Dots' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="sleep.css">
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=273904279450264&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script type="text/javascript">
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){
js=d.createElement(s);js.id=id;
js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}
(document,"script","twitter-wjs");
</script>
<div class="header">
<h1><a style="text-decoration:none;color:white;font-size:26px" href="/">slumbr.in <span><img src="http://i.imgur.com/z3wXiY6.png" style="width:30px;height:30px;"></span></a></h1>
</div>
<div class="sleeporwake" id="contain">
<h1>If you can sleep better, you should.</h1>
<p class="description">slumbr calculates the best times to sleep and wake up.</p>
<div style="height:20px;">
<div class="alert" id="alert">Please use a 12 hour time format hh:mm</div>
</div>
<span style="display:inline-block">I want to</span>
<div class="onoffswitch2">
<input type="checkbox" name="onoffswitch2" class="onoffswitch2-checkbox" id="myonoffswitch2" checked>
<label class="onoffswitch2-label" for="myonoffswitch2">
<div class="onoffswitch2-inner"></div>
<div class="onoffswitch2-switch"></div>
</label>
</div>
<span>at</span>
<div style="display:inline-block;">
<div style="display:inline-block;margin-left:5px">
<form onsubmit="return false;">
<input placeholder="00" type="tel" id="hourInput" size="2" tabindex="1" maxlength="2"> <span>:</span>
<input type="tel" placeholder="00" id="minInput" size="3" tabindex="2" maxlength="2">
</form>
</div>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
<label class="onoffswitch-label" for="myonoffswitch">
<div class="onoffswitch-inner"></div>
<div class="onoffswitch-switch"></div>
</label>
</div>
</div>
<div class="calcbtn">
<button style="display:inline-block;width:100%" id="go" onclick="wakeUp()">Calculate times <span id="what"></span>»</button>
<hr>
<p>Find out when to wake up if you go to bed now:</p>
<button id="sleepnow" onclick="sleepNow()">I want to sleep now. <!--Calculate <span style="margin-top:15px;"><img src="http://i.imgur.com/z3wXiY6.png" style="width:30px;height:30px;"></span> --></button>
</div>
</div>
<div class="show" style="margin:0px auto;">
<div style="clear:both;text-align:center;max-width:800px;margin:0 auto">
<p class="disclaimer">From most to least number of sleep cycles, here are your best times:</p>
<div class="results" style="margin-top:25px;margin-bottom:25px;">
<div class="high time-slot" id="6" title="6th sleep cycle, 9 hours of sleep"></div>
<div class="high time-slot" id="5" title="5th sleep cycle, 7.5 hours of sleep"></div>
<div class="med time-slot" id="4" title="4th sleep cycle, 6 hours of sleep"></div>
<div class="low time-slot" id="3" title="3rd sleep cycle, 4.5 hours of sleep"></div>
<div class="low time-slot" id="2" title="2nd sleep cycle, 3 hours of sleep"></div>
</div>
<div class="info">
<p>Slumbr chooses times when you are most likely to wake up at the end of a sleep cycle, thus feeling refreshed. Each cycle is approximately 90 minutes long, and you should aim to get about 5 or 6 cycles. <br> <a href="http://www.helpguide.org/life/sleeping.htm" target="_blank"> Read about how sleep cycles work.</a>
</p>
</div>
<a style="font-size:18px;font-weight:bold;text-decoration: underline;clear:both;cursor:pointer;"id="back" >↩ Go Back</a>
</div>
</div>
<footer>
<a href="https://twitter.com/share" style="display:inline-block" class="twitter-share-button" data-related="jasoncosta" data-lang="en" data-size="large" data-count="none">Tweet</a>
<div class="fb-like" style="display:inline-block;margin-left:15px;margin-top:5px;" data-href="http://patrickelhage.com/apps/Test.html" data-width="76" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
</footer>
<script type="text/javascript" src="slumbr.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$('#go').click(function(){
if( $('#hourInput').val() == 0 || $('#hourInput').val() > 12 || $('#minInput').val() < 0 || $('#minInput').val() > 59 || isNaN($('#minInput').val()) || isNaN($('#hourInput').val()) ){
$('.alert').fadeIn('fast');
}
else {
$('#contain').fadeOut('slow', function(){
$('.show').fadeIn('fast');
$('.alert').hide();
});
}
});
$('#sleepnow').click(function(){
$('#contain').fadeOut('slow', function(){
$('.show').fadeIn('fast');
});
});
$('#back').click(function(){
$('.show').fadeOut('slow', function(){
$('#contain').fadeIn('fast');
});
});
</script>
</body>
</html>