Home countdown

css/index.css

@@ -1,7 +1,11 @@
 html {
 	scroll-behavior: smooth;
   }
-
+  @font-face {
+	font-family: numberfont;
+	src: url('SansitaSwashed-Regular.ttf');
+  }
+
   .body{
 	  background-color: #cfe5cc;
   }
@@ -320,7 +324,60 @@ html {
 	  padding: 20px;
   }
 
+  #anniv-timer .main-timer{
+	background: repeating-linear-gradient(45deg, orange 0%, orange 15%, #1b4793 15%, #1b4793 85%, orange 85%, orange 100%);
+	width: 400px;
+	height: 150px;
+	margin-top: 40px;
+	border-radius: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+  }
+
+  .display-num{
+	  height: 50px;
+	  width: 25px;
+	  background-color: white;
+	  border-radius: 3px;
+	  display: flex;
+	  align-items: center;
+	  justify-content: center;
+	  margin: 10px;
+  }
+
+  .display-num .num-center{
+	  font-family: numberfont;
+	  font-size: 24px;
+	  font-weight: lighter;	
+  }
+
+  .colon-separator .num-center{
+	font-size: large;
+	font-weight: bolder;
+  }
+
+  #anniv-text{
+	  display: flex; 
+	  align-items: center; 
+	  justify-content:center; 
+	  font-size: 42px; 
+	  margin-top: 20px; 
+	  font-family: 'Alatsi', sans-serif;
+  }
+
+  .rainbow{
+	  animation-name: rainbow-animate;
+	  animation-duration: 2s;
+	  animation-fill-mode: forwards;
+  }
 
+  @keyframes rainbow-animate{
+	100% {
+		color: #ff28bc;
+	}
+  }
   /* xs */
   @media (min-width: 0px) {
 
@@ -362,8 +419,7 @@ html {
 
 	  .main-header p2{
 		  font-size: 35px;
-	  }
-
+	  } 
   }
 
   /* md */
@@ -630,4 +686,27 @@ html {
 	  .image-box1{
 		width: 40%;
 	}
-  }
+  }
+
+  .animate-pop{
+	  animation-name: pop;
+	  animation-duration: .75s;
+  }
+
+  @keyframes pop{
+	  75% {
+		transform: scale(1.25);
+	  }
+	  100%{
+		  transform: scale(1.0);
+	  }
+  }
+
+@media (max-width: 576px) {
+
+	#anniv-timer .main-timer{
+		width: 80vw;
+		height: 40vw;
+	} 
+
+}

index.html

@@ -50,6 +50,7 @@
 	<!-- Google Analytics-->
 	<!-- Global site tag (gtag.js) - Google Analytics -->
 	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156009380-1"></script>
+
 	<script>
 		window.dataLayer = window.dataLayer || [];
 		function gtag() { dataLayer.push(arguments); }
@@ -167,7 +168,7 @@
 						<div class="overlap">
 							<p1>ACM-W<b> NITK</b></p1>
 							<br>
-							<p2>Association for Computing Machinery - Women</p2>
+							<p2> Association for Women in Computing Machinery</p2>
 							<hr>
 							<p2 class="ml3">Inform Involve Inspire</p2>
 						</div>
@@ -177,6 +178,27 @@
 		</div>
 	</div>
 
+	<!-- ACM-W 1 Year Anniversary Timer -->
+	<section id="anniv-timer">
+		<div class="col-12" style="display: flex;">
+			<div class="col-12">
+				<div class="main-timer container-fluid">
+					<div class="display-num"><span class="num-center">1</span></div>
+					<div class="display-num" style="margin-left: 0px;"><span class="num-center">3</span></div>
+					<div class="colon-separator"><span class="num-center">:</span></div>
+					<div class="display-num"><span class="num-center">3</span></div>
+					<div class="display-num" style="margin-left: 0px;"><span class="num-center">3</span></div>
+					<div class="colon-separator"><span class="num-center">:</span></div>
+					<div class="display-num"><span class="num-center">3</span></div>
+					<div class="display-num" style="margin-left: 0px;"><span class="num-center">3</span></div>
+				</div>
+			</div>	
+		</div>
+		<div class="col-12 container-fluid" id="anniv-text">
+			<span id="text-inner">Yayy ACM W has completed its First Year</span>
+		</div>
+	</section>
+
 	<div class="about container-fluid" style="align-items: center; align-items: center;  " id="about" class="about">
 		<div class="row">
 			<div class="container about" style="align-content: center;">
@@ -395,10 +417,12 @@
 	</div>
 
 	<!-- Local Imports for JS -->
+	<script src="https://cdn.jsdelivr.net/gh/mathusummut/confetti.js/confetti.min.js"></script>
 	<script type="text/javascript" src="js/header.js"></script>
 	<script type="text/javascript" src="js/index.js"></script>
 
 	<script type="text/javascript">
+
 		(function (w, d) {
 			function r() {
 				var s = document.createElement('script'); s.async = 1; s.type = 'text/javascript'; s.src = 'https://chatflow.io/static/1.2/chatflow.php'; (d.body || d.head).appendChild(s);
@@ -410,6 +434,7 @@
 			}
 			if (w.attachEvent) { w.attachEvent('onload', r) } else { w.addEventListener('load', r, false) }
 		})(window, document);
+
 	</script>
 
 </body>

js/index.js

@@ -24,4 +24,33 @@ anime.timeline({loop: true})
     duration: 1000,
     easing: "easeOutExpo",
     delay: 1000
-  });
+  });
+
+  var change_numbers = Array.from(document.getElementsByClassName("display-num"));
+  var run_interval = 40, max_int = 13;
+
+  var change_number_interval = setInterval(function changeNumbers(){
+
+    for(i=0 ; i<change_numbers.length; i++){
+      random_number = Math.floor(Math.random() * max_int);
+      change_numbers[i].getElementsByClassName("num-center")[0].innerHTML = random_number;
+      if(i== 0 && random_number == 0 ){
+        change_numbers.shift();
+        if(change_numbers.length!=0)
+          max_int = Math.max(parseInt(change_numbers[0].getElementsByClassName("num-center")[0].innerHTML), 5);
+      }
+    }
+
+    if(change_numbers.length == 0){
+      startConfetti();
+      clearInterval(change_number_interval);
+    }
+
+  }, run_interval, change_numbers);
+
+  function startConfetti(){
+    document.getElementsByClassName("main-timer")[0].classList.add('animate-pop');
+    document.getElementById("text-inner").classList.add('rainbow');
+    confetti.start();
+    return;
+  }