From 2795a9e5a19cb56ed056f7fe3c275065e02396b2 Mon Sep 17 00:00:00 2001
From: mstamboroski <mstamboroski@gmail.com>
Date: Mon, 6 Nov 2017 17:40:52 -0200
Subject: [PATCH 1/2] Automating countdown using time-frames

---
 css/countdown.min.css   |  4 +-
 index.html              | 83 +++++++++++++++++++++++++++++++++++++----
 src/scss/countdown.scss | 14 ++++++-
 3 files changed, 90 insertions(+), 11 deletions(-)

diff --git a/css/countdown.min.css b/css/countdown.min.css
index 1bc4318..cd1b494 100644
--- a/css/countdown.min.css
+++ b/css/countdown.min.css
@@ -1,2 +1,2 @@
-@charset "UTF-8";#countdown,body{font-family:'Share Tech Mono',monospace;text-align:center}#countdown,#countdown div>span,#countdown>div{display:inline-block}@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;src:local("Share Tech Mono"),local("ShareTechMono-Regular"),url(../fonts/RQxK-3RA0Lnf3gnnnNrAsYdJ2JT0J65PSe7wdxAnx_I.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}body{background:linear-gradient(to right,rgba(84,0,55,.95),rgba(221,124,54,.95));background:-webkit-gradient(linear,left top,right top,from(rgba(84,0,55,.95)),to(rgba(221,124,54,.95)));transition:background 2s ease-in-out;font-weight:400}body.alert{animation:alert .7s infinite alternate}body.finish{background:#B90000}#countdown{color:#fff;font-size:30em;letter-spacing:-30px}#countdown div>span{border-radius:3px}.smalltext{padding-top:5px;font-size:16px}.wrapper-days,.wrapper-hours{display:none!important}.wrapper-minutes:after{content:":"}.applauses{background:#F9FD55;color:#B90000;font-size:160px;font-weight:700;width:900px;height:300px;line-height:300px;position:fixed;left:50%;margin-left:-450px;margin-right:-450px;bottom:-400px;transform:rotate(-5deg) scale(0);top:170px;margin-top:-150px;transition:all 1s ease-in-out}body.finish .applauses{transform:rotate(-5deg) scale(1);color:#B90000}@keyframes alert{0%{background:#DC4949}100%{background:#B90000}}@keyframes blink{0%{opacity:1}50%{opacity:.5}}@media only screen and (max-width:640px){body{font-size:10px}}@media only screen and (max-width:320px){#countdown{font-size:14em;letter-spacing:-20px}}@media only screen and (min-width:321px) and (max-width:767px){#countdown{font-size:16em;letter-spacing:-15px}}@media only screen and (min-width:768px) and (max-width:1024px){#countdown{font-size:20em}}
-/*# sourceMappingURL=maps/countdown.min.css.map */
+@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;src:local("Share Tech Mono"),local("ShareTechMono-Regular"),url(./../../fonts/RQxK-3RA0Lnf3gnnnNrAsYdJ2JT0J65PSe7wdxAnx_I.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}body{text-align:center;background:linear-gradient(to right, rgba(84,0,55,0.95), rgba(221,124,54,0.95));background:-webkit-gradient(linear, left top, right top, from(rgba(84,0,55,0.95)), to(rgba(221,124,54,0.95)));font-family:'Share Tech Mono', monospace;transition:background 2s ease-in-out;font-weight:normal}body.alert{animation:alert 0.7s infinite alternate}body.finish{background:#B90000}#countdown{font-family:'Share Tech Mono', monospace;color:#fff;display:inline-block;text-align:center;font-size:30em;letter-spacing:-30px}#countdown>div{display:inline-block}#countdown div>span{border-radius:3px;display:inline-block}.smalltext{padding-top:5px;font-size:16px}.wrapper-days,.wrapper-hours{display:none !important}.wrapper-minutes:after{content:":"}.applauses{background:#F9FD55;color:#B90000;font-size:160px;font-weight:bold;width:900px;height:300px;line-height:300px;position:fixed;left:50%;margin-left:-450px;margin-right:-450px;bottom:-400px;transform:rotate(-5deg) scale(0);top:170px;margin-top:-150px;transition:all 1s ease-in-out}body.finish .applauses{transform:rotate(-5deg) scale(1);color:#B90000}ol{list-style:none}.time-slot{font-size:3em}li.time-slot:hover{background:rgba(255,255,255,0.6)}@keyframes alert{0%{background:#DC4949}100%{background:#B90000}}@keyframes blink{0%{opacity:1}50%{opacity:0.5}}@media only screen and (max-width: 640px){body{font-size:10px}}@media only screen and (max-width: 320px){#countdown{font-size:14em;letter-spacing:-20px}}@media only screen and (min-width: 321px) and (max-width: 767px){#countdown{font-size:16em;letter-spacing:-15px}}@media only screen and (min-width: 768px) and (max-width: 1024px){#countdown{font-size:20em}}
+/*# sourceMappingURL=coutndown.min.css.map */
diff --git a/index.html b/index.html
index 4bed237..950955b 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,10 @@
 	 -->
 	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
 	<style>
-		@import url('./css/countdown.min.css');
+		<!-- @import url('./css/countdown.min.css'); -->
+		<!-- @import url('./src/css/countdown.css'); -->
 	</style>
-	<!-- <link rel="stylesheet" href="/css/countdown.css"> -->
+	<!--<link rel="stylesheet" href="./src/css/countdown.css">-->	
 </head>
 <body>
 	<div id="countdown">
@@ -33,15 +34,15 @@
 	      ">
 
 	<div id="actions">
-	   <a href="#start" id="play"><img src="play.svg" style="
+	   <a href="#start"><img src="play.svg" style="
 	      width: 40px;
 	      margin-right: 10px;
 	      "></a>
-	   <a href="#pause" id="pause"><img src="pause.svg" style="
+	   <a href="#pause"><img src="pause.svg" style="
 	      width: 40px;
 	      margin-right: 10px;
 	      "></a>
-	   <a href="#reset" id="reset"><img src="replay.svg" style="
+	   <a href="#reset"><img src="replay.svg" style="
 	      width: 30px;
 	      "></a>
 	   <select id="time" style="
@@ -56,8 +57,8 @@
 	      position: relative;
 	      top: -12px;
 	      display: block;
-	      margin: 40px auto;
-	      " onchange="changeTime()">
+	      margin: 40px auto;"
+		  onchange="changeTime()">
 	      <option value="01:00">01:00</option>
 	      <option value="05:00">05:00</option>
 	      <option value="10:00">10:00</option>
@@ -71,6 +72,32 @@
 		<span>APLAUSOS</span>
 	</div>
 	
+	<div class="presentation-time-slots">
+		<ol id="time-slots-list">
+			<li class="time-slot" title="10:00">10:00am - 10 min</li>
+			<li class="time-slot" title="10:00">10:10am - 10 min</li>
+			<li class="time-slot" title="20:00">10:20am - 20 min</li>
+			<li class="time-slot" title="30:00">10:40am - 30 min</li>
+			<li class="time-slot" title="10:00">11:10am - 10 min</li>
+			<li class="time-slot" title="10:00">11:20am - 10 min</li>
+			<li class="time-slot" title="20:00">11:30am - 20 min</li>
+			<li class="time-slot" title="30:00">11:50am - 30 min</li>
+			<li class="time-slot" title="10:00">12:20pm - 10 min</li>
+			<li class="time-slot" title="10:00">12:30pm - 10 min</li>
+			<li class="time-slot" title="10:00">12:40pm - 10 min</li>
+			<li class="time-slot" title="20:00">03:00pm - 20 min</li>
+			<li class="time-slot" title="20:00">03:20pm - 20 min</li>
+			<li class="time-slot" title="20:00">03:40pm - 20 min</li>
+			<li class="time-slot" title="20:00">04:00pm - 20 min</li>
+			<li class="time-slot" title="10:00">04:20pm - 10 min</li>
+			<li class="time-slot" title="30:00">04:30pm - 30 min</li>
+			<li class="time-slot" title="10:00">05:40pm - 10 min</li>
+			<li class="time-slot" title="30:00">05:50pm - 30 min</li>
+			<li class="time-slot" title="10:00">06:20pm - 10 min</li>
+			<li class="time-slot" title="30:00">06:30pm - 30 min</li>
+		</ol>
+	</div>
+	
 	<script>
 		window.name = 'countdown';
 		
@@ -139,6 +166,7 @@
 				if (t.total <= 0) {
 					clearInterval(countdown.timeinterval);
 					document.body.className = "finish";
+					setTimeout(goToNextTimeSlot, 30000 /* 30 segundos */);					
 				}
 				countdown.timeInitial = countdown.timeInitial - 1000;
 			},
@@ -208,7 +236,46 @@
 			document.location.hash = '#' + time;
 		};
 		
-		// window.open('./countdown-control.html', 'Countdown Control', 'menubar=1, resizable=1, width=150, height=150');
+		function getEventTarget(e) {
+			e = e || window.event;
+			return e.target || e.srcElement; 
+		}
+
+		var timeSlotsList = document.getElementById('time-slots-list');
+		
+		timeSlotsList.onclick = function(event) {
+			var target = getEventTarget(event);
+			//alert(target.innerHTML);
+			if (target.tagName != "LI") {
+				// avoid multi-line selection
+				return;
+			}
+			for (var i = 0; i < timeSlotsList.children.length; i++) {				
+				timeSlotsList.children[i].style.backgroundColor = "";
+				timeSlotsList.children[i].classList.remove("selected");
+			}
+			selectNewTimeSlot(target);
+		};
+		
+		var selectNewTimeSlot = function(targetSlot) {
+			targetSlot.style.backgroundColor = "white";
+			targetSlot.classList.add("selected");
+			document.location.hash = '#' + targetSlot.title;
+			document.body.className = "";
+		};
+		
+		var goToNextTimeSlot = function() {
+			for (var i = 0; i < timeSlotsList.children.length; i++) {								
+				if (timeSlotsList.children[i].classList.contains("selected")) {
+					timeSlotsList.children[i].classList.remove("selected");
+					timeSlotsList.children[i].style.backgroundColor = "";
+					var nextListIndex = i != timeSlotsList.children.length - 1 ? i + 1 : 0;
+					selectNewTimeSlot(timeSlotsList.children[nextListIndex]);
+					return;
+				}
+			}
+		};
+
 	</script>
 </body>
 </html>
diff --git a/src/scss/countdown.scss b/src/scss/countdown.scss
index 7e3a42d..b6fbeca 100644
--- a/src/scss/countdown.scss
+++ b/src/scss/countdown.scss
@@ -4,7 +4,7 @@
     font-weight: 400;
     src: local('Share Tech Mono'),
          local('ShareTechMono-Regular'), 
-         url(./../fonts/RQxK-3RA0Lnf3gnnnNrAsYdJ2JT0J65PSe7wdxAnx_I.woff2) format('woff2');
+         url(./../../fonts/RQxK-3RA0Lnf3gnnnNrAsYdJ2JT0J65PSe7wdxAnx_I.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
 }
 body{
@@ -79,6 +79,18 @@ body.finish .applauses {
 	color: #B90000;
 }
 
+ol {
+	list-style: none;
+}
+
+.time-slot {
+	font-size: 3em;
+}
+
+li.time-slot:hover {
+	background: rgba(255, 255, 255, 0.6);
+}
+
 @keyframes alert {
     0% {
         background: #DC4949;

From d9897e2ca18ea864336dcc014e6332aabccab4e3 Mon Sep 17 00:00:00 2001
From: mstamboroski <mstamboroski@gmail.com>
Date: Mon, 6 Nov 2017 23:08:10 -0200
Subject: [PATCH 2/2] Problems with font-size on specific resolutions

---
 css/countdown.min.css   |  4 ++--
 src/scss/countdown.scss | 14 +++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/css/countdown.min.css b/css/countdown.min.css
index cd1b494..25518c0 100644
--- a/css/countdown.min.css
+++ b/css/countdown.min.css
@@ -1,2 +1,2 @@
-@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;src:local("Share Tech Mono"),local("ShareTechMono-Regular"),url(./../../fonts/RQxK-3RA0Lnf3gnnnNrAsYdJ2JT0J65PSe7wdxAnx_I.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}body{text-align:center;background:linear-gradient(to right, rgba(84,0,55,0.95), rgba(221,124,54,0.95));background:-webkit-gradient(linear, left top, right top, from(rgba(84,0,55,0.95)), to(rgba(221,124,54,0.95)));font-family:'Share Tech Mono', monospace;transition:background 2s ease-in-out;font-weight:normal}body.alert{animation:alert 0.7s infinite alternate}body.finish{background:#B90000}#countdown{font-family:'Share Tech Mono', monospace;color:#fff;display:inline-block;text-align:center;font-size:30em;letter-spacing:-30px}#countdown>div{display:inline-block}#countdown div>span{border-radius:3px;display:inline-block}.smalltext{padding-top:5px;font-size:16px}.wrapper-days,.wrapper-hours{display:none !important}.wrapper-minutes:after{content:":"}.applauses{background:#F9FD55;color:#B90000;font-size:160px;font-weight:bold;width:900px;height:300px;line-height:300px;position:fixed;left:50%;margin-left:-450px;margin-right:-450px;bottom:-400px;transform:rotate(-5deg) scale(0);top:170px;margin-top:-150px;transition:all 1s ease-in-out}body.finish .applauses{transform:rotate(-5deg) scale(1);color:#B90000}ol{list-style:none}.time-slot{font-size:3em}li.time-slot:hover{background:rgba(255,255,255,0.6)}@keyframes alert{0%{background:#DC4949}100%{background:#B90000}}@keyframes blink{0%{opacity:1}50%{opacity:0.5}}@media only screen and (max-width: 640px){body{font-size:10px}}@media only screen and (max-width: 320px){#countdown{font-size:14em;letter-spacing:-20px}}@media only screen and (min-width: 321px) and (max-width: 767px){#countdown{font-size:16em;letter-spacing:-15px}}@media only screen and (min-width: 768px) and (max-width: 1024px){#countdown{font-size:20em}}
-/*# sourceMappingURL=coutndown.min.css.map */
+@font-face{font-family:'Share Tech Mono';font-style:normal;font-weight:400;src:local("Share Tech Mono"),local("ShareTechMono-Regular"),url(./../../fonts/RQxK-3RA0Lnf3gnnnNrAsYdJ2JT0J65PSe7wdxAnx_I.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}body{text-align:center;background:linear-gradient(to right, rgba(84,0,55,0.95), rgba(221,124,54,0.95));background:-webkit-gradient(linear, left top, right top, from(rgba(84,0,55,0.95)), to(rgba(221,124,54,0.95)));font-family:'Share Tech Mono', monospace;transition:background 2s ease-in-out;font-weight:normal}body.alert{animation:alert 0.7s infinite alternate}body.finish{background:#B90000}#countdown{font-family:'Share Tech Mono', monospace;color:#fff;display:inline-block;text-align:center;font-size:30em;letter-spacing:-30px}#countdown>div{display:inline-block}#countdown div>span{border-radius:3px;display:inline-block}.smalltext{padding-top:5px;font-size:16px}.wrapper-days,.wrapper-hours{display:none !important}.wrapper-minutes:after{content:":"}.applauses{background:#F9FD55;color:#B90000;font-size:160px;font-weight:bold;width:900px;height:300px;line-height:300px;position:fixed;left:50%;margin-left:-450px;margin-right:-450px;bottom:-400px;transform:rotate(-5deg) scale(0);top:170px;margin-top:-150px;transition:all 1s ease-in-out}body.finish .applauses{transform:rotate(-5deg) scale(1);color:#B90000}ol{list-style:none}.time-slot{font-size:3em}li.time-slot:hover{background:rgba(255,255,255,0.6)}@keyframes alert{0%{background:#DC4949}100%{background:#B90000}}@keyframes blink{0%{opacity:1}50%{opacity:0.5}}@media only screen and (max-width: 640px){body{font-size:10px}#countdown{font-size:14em;letter-spacing:-20px}}@media only screen and (min-width: 321px) and (max-width: 767px){#countdown{font-size:16em;letter-spacing:-15px}}@media only screen and (min-width: 768px) and (max-width: 1024px){#countdown{font-size:18em}}@media only screen and (min-width: 1025px) and (max-width: 1920px){#countdown{font-size:24em}}
+/*# sourceMappingURL=countdown.min.css.map */
diff --git a/src/scss/countdown.scss b/src/scss/countdown.scss
index b6fbeca..cbf5d3a 100644
--- a/src/scss/countdown.scss
+++ b/src/scss/countdown.scss
@@ -108,11 +108,9 @@ li.time-slot:hover {
     }
 }
 
-@media only screen and (max-width: 640px) {
-	body { font-size: 10px; }
-}
 
-@media only screen and (max-width: 320px) {
+@media only screen and (max-width: 640px) {
+    body { font-size: 10px; }
     #countdown {
         font-size: 14em;
         letter-spacing: -20px;
@@ -126,6 +124,12 @@ li.time-slot:hover {
 }
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
     #countdown {
-        font-size: 20em;
+        font-size: 18em;
+    }   
+}
+
+@media only screen and (min-width: 1025px) and (max-width: 1920px) {
+    #countdown {
+        font-size: 24em;
     }   
 }
\ No newline at end of file