-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
101 lines (88 loc) · 5.39 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
<!doctype html>
<html>
<head>
<title>Teamodoro: pomodoro timer for teams</title>
<meta name="description" content="Teamodoro is a simple pomodoro timer for teams. It helps improving the productivity of your team and reducing interruptions. Made by Base Secrète" />
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" media="screen">
@import 'https://fonts.googleapis.com/css?family=Signika:300,700';
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
html, body { background:#181A21; width: 100%; height: 100%; margin: 0; padding: 0;
font-family: 'Signika', sans-serif;
font-weight: 300; color:#dddcdd; font-size:16px; line-height:24px; }
#break-gif { background: transparent no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; width:100%; height:100%; position:fixed; opacity:.25; }
#break-gif .poweredby { position: fixed; left:5%; bottom:5%; }
a { color: #181A21; background:#20BF55; text-decoration:none; }
#canvas { position: relative; height: calc(100% - 10%); top: 5%; margin: 0 5%; }
img.logo { height: 48px; position: absolute;
top: 5%;
left: 5%; }
h2 { font-size: 4.3rem; line-height: 72px; margin: 96px 0 0; font-weight: 700; color:#F8333C; }
h3 { font-size: 1.728rem; font-weight: 300; line-height: 48px; margin: 48px 0 0; color:#F8333C; }
p { margin:0; letter-spacing: 1px; font-weight: 300; }
a.btn, .why a.btn { display:inline-block; background:rgba(255, 255, 255, 0.3); color:#181A21; width:48px; height:48px; text-align:center;
font-weight:bold; border-radius:50%; line-height:48px; font-size: 1.2rem; font-weight: bold;
position:absolute; right:5%; top: 5%; text-decoration: none; }
a.btn:hover, .why a.btn:hover { background:rgba(255, 255, 255, 0.5); }
.why { display: none; position: absolute; top:0; right:0; bottom:0; left:0; background:rgba(24,26,33,.95); padding:5% 5% 15%; overflow-y:auto; }
.why a { color: #dddcdd; text-decoration:underline; background: transparent; }
.close { position:absolute; right:5%; }
.credits { display:inline-block; position:fixed; right:0%; bottom: 0%; background:#20BF55; padding:12px; color:#555; }
.credits a { color:#181A21; text-decoration: none; }
</style>
</head>
<body>
<div id="break-gif" style="display:none;">
<a href="https://giphy.com" target="_blank"><img src="images/poweredby.png" class="poweredby" /></a>
</div>
<figure id="canvas"></figure>
<a href="index.html" title="Teamodoro">
<img src="images/teamodoro.svg" alt="Teamodoro" class="logo" />
</a>
<a href="#" class="btn" id="about">?</a>
<span class="credits">
By <a href="https://basesecrete.com">Base Secrète</a>
</span>
<div class="why" id="why">
<a href="index.html" title="Teamodoro">
<img src="images/teamodoro.svg" alt="Teamodoro" class="logo" />
</a>
<a class="btn close" href="#" id="close">X</a>
<h2>Teamodoro is a pomodoro timer for teams.</h2>
<h3>Pomodoro?</h3>
<p>The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break down work into intervals traditionally 25 minutes in length, separated by short breaks. The method is based on the idea that frequent breaks can improve mental agility. <a href="https://en.wikipedia.org/wiki/Pomodoro_Technique" target="_blank">Read more.</a></p>
<h3>Teamodoro?</h3>
<p>
The Pomodoro techniques works well for individuals. A team willing to use this technique must synchronize in order to prevent interruptions.
Interruptions kill productivity and require a significant recovery period.
<a href="https://thetomorrowlab.com/2015/01/why-developers-hate-being-interrupted/" target="_blank">Read more.</a>
</p>
<h3>Source code</h3>
<p>
The source code is available on <a href="https://github.com/alexisbernard/teamodoro" target="_blank">Github</a> and is released under the MIT license.
</p>
<p>Made by <a href="https://twitter.com/alexis_bernard" target="_blank">@alexis_bernard</a> and <a href="https://twitter.com/antoinem" target="_blank">@antoinem</a>.</p>
<span class="credits">
By <a href="https://basesecrete.com">Base Secrète</a>
</span>
</div>
<audio controls="controls" style="display:none;" id="beep">
<source src="/audio/stop.ogg" type="audio/ogg"/>
<source src="/audio/stop.mp3" type="audio/mp3"/>
</audio>
</body>
<script type="text/javascript" src="javascripts/favicon.js"></script>
<script type="text/javascript" src="javascripts/teamodoro.js"></script>
<script type="text/javascript" src="javascripts/svg.min.js" charset="utf-8"></script>
<script type="text/javascript" src="javascripts/svg.clock.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
document.readyState != "loading" ? Teamodoro.start() : document.addEventListener("DOMContentLoaded", Teamodoro.start.bind(Teamodoro));
</script>
<script async defer data-domain="teamodoro.com" src="https://plausible.io/js/plausible.js"></script>
</html>