Add countdown (fixes #6)

index.html

@@ -34,12 +34,15 @@
     <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type='text/css' media='all' href="static/css/svg-icons.css">
 
+    <!-- CSS Countdown -->
+    <link rel="stylesheet" type='text/css' media='all' href="static/css/countdown.css">
+
     <!-- SOCIAL CARDS (ADD YOUR INFO) -->
 
     <!-- FACEBOOK -->
     <meta property="og:url" content="http://www.facebook.com/felicity.iiith">
     <meta property="og:type" content="article">
-    <meta property="og:title" content="Felicity · IIIT-Hyderabad"> 
+    <meta property="og:title" content="Felicity · IIIT-Hyderabad">
     <!-- <meta property="og:image" content="static/images/share-webslides.jpg"> <!-- EDIT -->
 
     <!-- TWITTER -->
@@ -150,11 +153,35 @@ <h2>Parth Shrivastava</h2>
                       [email protected]
                     </a>
                     (+91) 8142657575
-                    <center><a href="https://www.facebook.com/parth20shri"><img style="width: 20px ; height: 20px" src="static/images/logos/fb2.svg"></a></center>                
+                    <center><a href="https://www.facebook.com/parth20shri"><img style="width: 20px ; height: 20px" src="static/images/logos/fb2.svg"></a></center>
                 </td>
                 </table>
           </div>
         </section>
+        <section class="bg-gradient-h bg-red">
+        <span class="background light" style="background-image:url('static/images/backgrounds/4.jpg')"></span>
+        <div class="content-center bg-trans-dark fadeInUp">
+          <h1 class="countdown">Countdown To Felicity</h1>
+          <div id="clockdiv">
+            <div>
+              <span class="days"></span>
+              <div class="smalltext">Days</div>
+            </div>
+            <div>
+              <span class="hours"></span>
+              <div class="smalltext">Hours</div>
+            </div>
+            <div>
+              <span class="minutes"></span>
+              <div class="smalltext">Minutes</div>
+            </div>
+            <div>
+              <span class="seconds"></span>
+              <div class="smalltext">Seconds</div>
+            </div>
+          </div>
+        </div>
+      </section>
       </article>
       <!-- end article -->
     </main>
@@ -170,6 +197,7 @@ <h2>Parth Shrivastava</h2>
 
     <!-- Required -->
     <script src="static/js/webslides.js"></script>
+    <script src="static/js/countdown.js"></script>
     <script>
       window.ws = new WebSlides({
         loop: false

static/css/countdown.css

@@ -0,0 +1,34 @@
+
+h1.countdown{
+  font-size: 40px;
+  margin: 40px 0px 20px;
+}
+
+#clockdiv{
+  font-family: sans-serif;
+  color: #fff;
+  display: inline-block;
+  font-weight: 300;
+  text-align: center;
+  font-size: 40px;
+}
+
+#clockdiv > div{
+  padding: 10px;
+  border-radius: 5px;
+  background: #00BF96;
+  display: inline-block;
+}
+
+#clockdiv div > span{
+  padding: 15px;
+  border-radius: 3px;
+  background: #00816A;
+  display: inline-block;
+}
+
+div.smalltext{
+  padding-top: 5px;
+  font-size: 25px;
+  font-weight: 500;
+}

static/js/countdown.js

@@ -0,0 +1,41 @@
+function getTimeRemaining(endtime) {
+  var t = Date.parse("Jan 27, 2018") - Date.parse(new Date());
+  var seconds = Math.floor((t / 1000) % 60);
+  var minutes = Math.floor((t / 1000 / 60) % 60);
+  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
+  var days = Math.floor(t / (1000 * 60 * 60 * 24));
+  return {
+    'total': t,
+    'days': days,
+    'hours': hours,
+    'minutes': minutes,
+    'seconds': seconds
+  };
+}
+
+function initializeClock(id, endtime) {
+  var clock = document.getElementById(id);
+  var daysSpan = clock.querySelector('.days');
+  var hoursSpan = clock.querySelector('.hours');
+  var minutesSpan = clock.querySelector('.minutes');
+  var secondsSpan = clock.querySelector('.seconds');
+
+  function updateClock() {
+    var t = getTimeRemaining(endtime);
+
+    daysSpan.innerHTML = t.days;
+    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
+    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
+    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
+
+    if (t.total <= 0) {
+      clearInterval(timeinterval);
+    }
+  }
+
+  updateClock();
+  var timeinterval = setInterval(updateClock, 1000);
+}
+
+var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
+initializeClock('clockdiv', deadline);