add_retroactive_countdown

JioSwap · Sep 25, 2022 · 985bd13 · 985bd13
1 parent 4b4956a
commit 985bd13
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 1 deletion.
diff --git a/countdown.js b/countdown.js
@@ -0,0 +1,23 @@
+function updateTimer() {
+    future = Date.parse("jan 2, 2023 00:00:00");
+    now = new Date();
+    diff = future - now;
+
+    days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    hours = Math.floor(diff / (1000 * 60 * 60));
+    mins = Math.floor(diff / (1000 * 60));
+    secs = Math.floor(diff / 1000);
+
+    d = days;
+    h = hours - days * 24;
+    m = mins - hours * 60;
+    s = secs - mins * 60;
+
+    document.getElementById("timer")
+        .innerHTML =
+        '<div>' + d + '<span>days</span></div>' +
+        '<div>' + h + '<span>hours</span></div>' +
+        '<div>' + m + '<span>minutes</span></div>' +
+        '<div>' + s + '<span>seconds</span></div>';
+}
+setInterval('updateTimer()', 1000);
diff --git a/css/styles.css b/css/styles.css
@@ -350,3 +350,23 @@ footer .nav-link:hover {
     font-size: 1.1rem;
   }
 }
+
+
+#timer {
+  font-size: 3em;
+  font-weight: 100;
+  color: white;
+  text-shadow: 0 0 20px #c906ea;
+}
+
+#timer div {
+  display: inline-block;
+  min-width: 90px;
+}
+
+#timer div span {
+  color: #B1CDF1;
+  display: block;
+  font-size: .35em;
+  font-weight: 400;
+}
diff --git a/index.html b/index.html
@@ -25,6 +25,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
     </script>
     <script src="calctvl.js"></script>
+    <script src="countdown.js"></script>
 </head>
 
 <body>
@@ -70,7 +71,7 @@ <h1 class="m-0">
                             Hi im Jio, <br>
                             a <span>DeFi</span> cross-chain protocol
                         </h1>
-                        <p class="m-0">Multi-Chain. lightning fast. & <span>Safe.</p>
+                        <p class="m-0">Multi-Chain. lightning fast. & <span />Safe.</p>
                                 <div class="btn-group" role="group" aria-label="">
                                     <button type="button" class="btn btn-launch"
                                         onClick="window.open('https://app.jioswap.finance');">Launch app <i
@@ -98,6 +99,18 @@ <h6 class="m-0">N.A</h6>
                 </div>
             </div>
         </header>
+        <!-- <section class="mevolution"> -->
+
+            <div class="container">
+                <div class="text-center">
+                <h1 class="m-0">
+                    Countdown to <span>Retroactive</span> Airdrop
+                </h1>
+                <div id="timer"></div>
+            </div>
+            </div>
+
+        <!-- </section> -->
         <section class="mevolution">
             <div class="container">
                 <div class="mevol-inner text-center">