-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
144 lines (137 loc) · 9.09 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Productivity stopwatch">
<meta property="og:title" content="Work 3 Hours">
<meta property="og:site_name" content="Work 3 Hours">
<meta property="og:url" content="http://work3hours.com/">
<meta property="og:description" content="Work for 3 hours split into 70, 50, and 30 minutes with 10 minute breaks in between.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://work3hours.com/images/work3-fbimg-01.jpg">
<meta name="keywords" content="productivity, productive, work, flow, watch, timer, three, hours, 3">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/skeleton.css">
<link type="text/plain" rel="author" href="http://work3hours.com/humans.txt" />
<script src="https://www.google.com/jsapi"></script>
<script> google.load('jquery', '1.3.1'); </script>
<script type="text/javascript" src="jquery.animate-colors-min.js"></script>
<script language="javascript" type="text/javascript" src="clockscript.js"></script>
<link rel="shortcut icon" href="http://work3hours.com/favicons/favicon.ico" />
<link rel="apple-touch-icon" sizes="57x57" href="favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicons/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicons/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="./favicons/android-chrome-manifest.json">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<title>Work 3 Hours</title>
<div class = "container">
<div class="row">
<div class="offset-by-three button digits six columns"><span>START WORKING FOR 3 HOURS</span></div>
<div class="offset-by-two one column">
<div class="reset">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 0h24v24h-24z" fill="none"/>
<path d="M13 3c-4.97 0-9 4.03-9 9h-3l3.89 3.89.07.14 4.04-4.03h-3c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42c1.63 1.63 3.87 2.64 6.36 2.64 4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08v-4.25h-1.5z"/>
</svg>
</div>
</div>
</div>
<div class="progresscontainer">
<div class="progressvalue"></div>
<div class="work bar session1"></div>
<div class="break bar"></div>
<div class="work bar session2"></div>
<div class="break bar"></div>
<div class="work bar session3"></div>
<div class="break bar"></div>
<!--
The code below contains the numbers that will count down as during the breaks. They shouldn't be there before the START button is hit. I can put them in a div that we activate upon start but I dunno what the best way to do that would be yet. The one thing I prepared for is turning them opaque when they are ticking down. Just add the class 'active' to the break that's counting and make sure there is no text when it's done.
-->
<div class="wrapper">
<div class="work gap session1"></div>
<div class="break gap recessDigits1">10m</div>
<div class="work gap session2"></div>
<div class="break gap recessDigits2">10m</div>
<div class="work gap session3"></div>
<div class="break gap recessDigits3">10m</div>
</div>
<div class="breakexplain"> <!--whole breakexplain div should be killed when start is pressed-->
<div class="work gap session1"></div>
<div class="break line"></div>
<div class="work gap session2"></div>
<div class="break line"></div>
<div class="work gap session3"></div>
<div class="break line"></div>
<!--This is where the text comes in-->
<div class="work gap session1"></div>
<div class="break gap active">10</div>
<div class="work gap session2 active" style="text-align: left;">minute breaks</div>
<div class="break gap"></div>
<div class=x"work gap session3"></div>
<div class="break gap"></div>
</div>
</div>
</div>
</body>
<footer>
<div class="description">
<div class = "container">
<table>
<tr>
<td>Work for 3 hours split into 70, 50, and 30 minutes with 10 minute breaks in between.</td>
</tr>
</table>
</div>
</div>
<div class="linkies">
<div class = "container">
<table>
<tr>
<td>
A Self-taught project
</td>
<td>
<a href="http://work3hours.com/humans.txt"><img src="http://humanstxt.org/img/oficial-logos/humanstxt-transparent-1ink.png"></a>
</td>
<td>
<a href="https://github.com/samisayegh/StopClock" target="_blank">
<svg width="30px" height="30px" viewBox="0 0 33 33" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M16.608,0.455 C7.614,0.455 0.32,7.748 0.32,16.745 C0.32,23.942 4.987,30.047 11.46,32.201 C12.275,32.351 12.572,31.848 12.572,31.416 C12.572,31.029 12.558,30.005 12.55,28.646 C8.019,29.63 7.063,26.462 7.063,26.462 C6.322,24.58 5.254,24.079 5.254,24.079 C3.775,23.069 5.366,23.089 5.366,23.089 C7.001,23.204 7.861,24.768 7.861,24.768 C9.314,27.257 11.674,26.538 12.602,26.121 C12.75,25.069 13.171,24.351 13.636,23.944 C10.019,23.533 6.216,22.135 6.216,15.893 C6.216,14.115 6.851,12.66 7.893,11.522 C7.725,11.11 7.166,9.453 8.053,7.211 C8.053,7.211 9.42,6.773 12.532,8.881 C13.831,8.519 15.225,8.339 16.61,8.332 C17.994,8.339 19.387,8.519 20.688,8.881 C23.798,6.773 25.163,7.211 25.163,7.211 C26.052,9.453 25.493,11.11 25.326,11.522 C26.37,12.66 27,14.115 27,15.893 C27,22.151 23.191,23.528 19.563,23.931 C20.147,24.434 20.668,25.428 20.668,26.947 C20.668,29.125 20.648,30.882 20.648,31.416 C20.648,31.852 20.942,32.359 21.768,32.2 C28.236,30.041 32.899,23.94 32.899,16.745 C32.899,7.748 25.605,0.455 16.608,0.455" id="github-mark" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
</g>
</svg>
</a>
</td>
<td>
Developed in Montreal
</td>
</tr>
</table>
</div>
</div>
</footer>
<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-59106018-1', 'auto');
ga('send', 'pageview');
</script>
</html>