Skip to content

Commit

Permalink
style update
Browse files Browse the repository at this point in the history
  • Loading branch information
@antoinem
antoinem committed Aug 17, 2016
1 parent bd27e7b commit 26c0c21
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 52 deletions.
1 change: 1 addition & 0 deletions images/teamodoro.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
72 changes: 41 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,41 @@
<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:#342E37; width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Helvetica Neue, Helvetica', Arial, sans-serif; font-weight: 300; color:#A6A6A4; font-size:16px; line-height:24px; }
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; right:5%; bottom:90px; }
a { color: #f1f1f1; text-decoration:none; }
#canvas { position: relative; height: calc(100% - 80px - 10%); top: 5%; margin: 0 5%; }
footer { position: fixed; bottom:0; width:100%; height:80px; background:rgba(255,255,255,.1); line-height:80px; vertical-align:center; padding:0 5%; }
h1 { margin:0; padding:0; display:inline-block; font-weight:100; color:#EF2B59; float:left; }
h1 span { display: none; margin-left:12px; }
.credits span { display: none; }
#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; }

footer img { height:40px; margin:20px 0 0; float:left; }
footer .credits { display:inline-block; position:absolute; right:5%; font-size:.8em; }
footer a { display:inline; }
footer a.btn { background:#342E37; margin:15px 12px 0; width:50px; height:50px; text-align:center; font-weight:bold; border-radius:50%; line-height:50px; display:inline-block; }
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; }

@media (min-width: 800px) {
footer img { height:50px; margin:15px 0 0; }
h1 span { display: inline-block; }
footer .credits { font-size:1rem; }
.credits span { display: inline-block; }
}

.why { display: none; position: absolute; top:0; right:0; bottom:80px; left:0; background:rgba(0,0,0,0.8); padding:5%; overflow-y:auto; }

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>

Expand All @@ -45,20 +50,23 @@
</div>
<figure id="canvas"></figure>

<footer>
<h1><img src="images/teamodoro.png" alt="logo" /><span>Teamodoro</span></h1>
<a href="#" class="btn" id="about">?</a>
<nav class="credits">
<span>Made </span>by <a href="http://basesecrete.com">Base Secrète</a>.
</nav>
</footer>
<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="http://basesecrete.com">Base Secrète</a>
</span>

<div class="why" id="why">
<a class="close" href="#" id="close">close</a>
<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>What is Pomodoro?</h3>
<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="http://en.wikipedia.org/wiki/Pomodoro_Technique" target="_blank">Read more.</a></p>
<h3>What is Teamodoro?</h3>
<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.
Expand All @@ -69,8 +77,10 @@ <h3>Source code</h3>
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 class="credits">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>

<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="http://basesecrete.com">Base Secrète</a>
</span>
</div>

<audio controls="controls" style="display:none;" id="beep">
Expand Down
45 changes: 24 additions & 21 deletions javascripts/svg.clock.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ SVG.Clock = function(size, options) {
this.date = new Date;

var i;
var red = "#EF2B59";
var green = "#9FD356";
var font = "Helvetcia Neue, Helvetcia, Arial";
var red = "#F8333C";
var green = "#20BF55";
var font = "Signika, sans-serif";

/* create nested svg element */
this.constructor.call(this, SVG.create('svg'));
Expand All @@ -17,45 +17,48 @@ SVG.Clock = function(size, options) {
/* create base plate */
this.plate = this.ellipse(100, 100).fill("transparent")

/* small bar every minute */
for (i = 59; i >= 0; i--)
if (i % 5 != 0)
this.rect(1, 1).move(50, 4).fill("rgba(255,255,255,.1)").rotate(i * 6, 50, 50)
/* bar every five minutes */
for (i = 59; i >= 0; i--)
this.rect(1, 3).move(50, 3).fill("rgba(255,255,255,.1)").rotate(i * 30, 50, 50)
for (i = 59; i >= 0; i--)
this.rect(1, 3).move(50, 4).fill("rgba(255,255,255,.1)").rotate(i * 30, 50, 50)


/* small bar every minute */
for (i = 59; i >= 0; i--)
if (i % 5 != 0)
this.rect(1, 1).move(50, 3).fill("rgba(255,255,255,.1)").rotate(i * 6, 50, 50)

/* pomodoro1 */
for (i = 149; i >= 0; i--)
this.rect(1, 3).move(50, 0).fill(red).rotate(i * 1, 50, 50)
this.rect(1, 4).move(50, 0).fill(red).rotate(i * 1, 50, 50)

/* pomodoro2 */
for (i = 329; i >= 180; i--)
this.rect(1, 3).move(50, 0).fill(red).rotate(i * 1, 50, 50)
this.rect(1, 4).move(50, 0).fill(red).rotate(i * 1, 50, 50)

/* break1 */
for (i = 359; i >= 330; i--)
this.rect(1, 3).move(50, 0).fill(green).rotate(i * 1, 50, 50)
this.rect(1, 4).move(50, 0).fill(green).rotate(i * 1, 50, 50)

/* break2 */
for (i = 179; i >= 150; i--)
this.rect(1, 3).move(50, 0).fill(green).rotate(i * 1, 50, 50)
this.rect(1, 4).move(50, 0).fill(green).rotate(i * 1, 50, 50)



/* draw minute pointer */
this.minutes = this.circle(3).move(49,0).fill("#FFF");
this.minutes = this.circle(4).move(49, 0).fill("#fff").stroke("#181A21");

this.focusLabel = this.text('Focus').move(50, 20).fill(red).
font({anchor: 'middle', size: 6, family: font, weight: '300'});
this.focusLabel = this.text('FOCUS').move(50, 25).fill(red).
font({anchor: 'middle', size: 6, family: font, weight: '300', length: '50px'});

this.focusTime = this.text("").move(50, 38).fill(red).
font({anchor: 'middle', size: 18, family: font, weight: '600'});
this.focusTime = this.text("").move(50, 35).fill(red).
font({anchor: 'middle', size: 24, family: font, weight: '700'});

this.breakLabel = this.text('Break').move(50, 20).fill(green)
this.breakLabel = this.text('BREAK').move(50, 25).fill(green)
.font({anchor: 'middle', size: 6, family: font, weight: '300'});

this.breakTime = this.text("").move(50, 38).fill(green)
.font({anchor: 'middle', size: 18, family: font, weight: '600'});
this.breakTime = this.text("").move(50, 35).fill(green)
.font({anchor: 'middle', size: 24, family: font, weight: '700'});
}

SVG.Clock.prototype = new SVG.Container
Expand Down

0 comments on commit 26c0c21

Please sign in to comment.