From 94b37ca6091516f1f12c64e448ac9defdf3184a5 Mon Sep 17 00:00:00 2001
From: kleph <kleph@kleph.eu>
Date: Fri, 14 Feb 2020 17:12:12 +0100
Subject: [PATCH] Add blinking text when timer elapsed

---
 static/beer.html | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)
diff --git a/static/beer.html b/static/beer.html
index 77e09af..e00e48f 100644
--- a/static/beer.html
+++ b/static/beer.html
@@ -2,11 +2,47 @@
 <html lang="en">
 <head>
 	<title>beer</title>
+	<style>
+		blink, .blink {
+		  -webkit-animation: blink 1s step-end infinite;
+		  -moz-animation: blink 1s step-end infinite;
+		  -o-animation: blink 1s step-end infinite;
+		  animation: blink 1s step-end infinite;
+		}
+		
+		@-webkit-keyframes blink {
+		    67% { opacity: 0 }
+		}
+		
+		@-moz-keyframes blink {
+		    67% { opacity: 0 }
+		}
+		
+		@-o-keyframes blink {
+		    67% { opacity: 0 }
+		}
+		
+		@keyframes blink {
+		    67% { opacity: 0 }
+		}
+	</style>
 </head>
 <body>
 <!-- Display the countdown timer in an element -->
 <p id="demo"></p>
 
+<script type="text/javascript">
+  (function() {
+  var blinks = document.getElementsByTagName('blink');
+  var visibility = 'hidden';
+  window.setInterval(function() {
+    for (var i = blinks.length - 1; i >= 0; i--) {
+         blinks[i].style.visibility = visibility;
+    }
+    visibility = (visibility === 'visible') ? 'hidden' : 'visible';
+  }, 250);
+})();
+</script>
 <script>
 // Update the count down every 1 second
 
@@ -33,7 +69,7 @@ var x = setInterval(function() {
   // If the count down is finished, write some text
   if (distance < 0) {
     clearInterval(x);
-    document.getElementById("demo").innerHTML = "BEER TIME !";
+	  document.getElementById("demo").innerHTML = "<blink>BEER TIME !</blink>";
   }
 }, 1000);
 </script>
