Added intermediate route for results pageHEADmain

7 files changed, 316 insertions, 7 deletions

diff --git a/src/components/LoginBody.astro b/src/components/LoginBody.astro
index d965274..59c2ca1 100644
--- a/src/components/LoginBody.astro
+++ b/src/components/LoginBody.astro
@@ -45,7 +45,7 @@
 
 		// Redirect to admin page if login is successful
 		if (response.ok) {
-			window.location.href = "/admin";
+			window.location.href = "/announce";
 		} else {
 			errorMessageElement.innerText = (await response.json()).error;
 		}
diff --git a/src/components/ResultsBody.astro b/src/components/ResultsBody.astro
index b08b017..03914db 100644
--- a/src/components/ResultsBody.astro
+++ b/src/components/ResultsBody.astro
@@ -1,4 +1,6 @@
 ---
+import CountdownTimer from "./CountdownTimer.astro";
+
 
 // Can be used in other pages to check if the user is logged in or not
 
@@ -15,8 +17,9 @@ else{
 
 ---
 
-<div class="resultsContainer">
+<div class="resultsContainer ">
     <div class="pre min-h-screen flex flex-col items-center justify-center">
+        <CountdownTimer />
         <h1 class="mb-10">Results will be announced soon</h1>
         <a href = "/login" type="submit" class="w-40 bg-purple-600 no-underline text-center text-white py-2 rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600" id="Adminbtn">Admin Login<a/>
     </div>
diff --git a/src/components/SignupBody.astro b/src/components/SignupBody.astro
index 70b12df..f98afb9 100644
--- a/src/components/SignupBody.astro
+++ b/src/components/SignupBody.astro
@@ -47,7 +47,7 @@
 		});
         // Redirect to admin page if successful
 		if (response.ok) {
-			window.location.href = "/admin";
+			window.location.href = "/announce";
 		} else {
 			errorMessageElement.innerText = (await response.json()).error;
 		}
diff --git a/src/pages/announce.astro b/src/pages/announce.astro
new file mode 100644
index 0000000..7cb85bc
--- /dev/null
+++ b/src/pages/announce.astro
@@ -0,0 +1,74 @@
+---
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout title="Welcome to FOSSEE.">
+  <main class="flex flex-col items-center justify-center min-h-screen bg-slate-800">
+    <div class="flex flex-col items-center">
+      <h1 class="text-6xl font-bold relative">
+        <!-- Congratulations -->
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">C</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">o</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">n</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">g</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">r</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">a</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">t</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">u</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">l</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">a</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">t</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">i</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">o</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">n</span>
+        <span class="inline-block text-pink-500 transform transition-all duration-500 ease-in-out animate-bounce">s</span>
+      </h1>
+    </div>
+  </main>
+</Layout>
+
+<style>
+  @keyframes bounce {
+    0%, 100% {
+      transform: translateY(0);
+    }
+    50% {
+      transform: translateY(-20px);
+    }
+  }
+
+  h1 span {
+    animation: bounce 1s infinite;
+  }
+</style>
+
+<script>
+
+  // Animation for each letter
+  const spans = document.querySelectorAll('h1 span');
+    // console.log(spans);
+    spans.forEach((span, index) => {
+      (span as HTMLElement).style.animationDelay = `${index * 0.1}s`;
+  });
+
+
+ // Confetti Animation
+  import { confetti } from "../utils/confetti";
+  
+  const startConfetti = () => {
+    setTimeout(function () {
+        confetti.start();
+    }, 1000);
+  };
+  
+  const stopConfettiAndRedirect = () => {
+    setTimeout(function () {
+        confetti.stop();
+      window.location.href = '/admin';
+    }, 5000); // Change this duration as needed
+  };
+  
+  startConfetti();
+  stopConfettiAndRedirect();
+
+</script>
diff --git a/src/pages/login.astro b/src/pages/login.astro
index f57d6ca..51644a5 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -3,7 +3,7 @@
 const user = Astro.locals.user; // Fetch the user from session or locals
 
 if (user) {		// If user is already logged in, redirect to admin page
-  return Astro.redirect("/admin");
+  return Astro.redirect("/announce");
 }
 import Layout from '../layouts/Layout.astro';
 import TopBar from '../components/TopBar.astro';
diff --git a/src/pages/results.astro b/src/pages/results.astro
index 15b6c49..df229c7 100644
--- a/src/pages/results.astro
+++ b/src/pages/results.astro
@@ -5,10 +5,10 @@ import Navbar from '../components/Navbar.astro';
 import Footer from '../components/Footer.astro';
 import ResultsBody from '../components/ResultsBody.astro';
 import IconBar from '../components/IconBar.astro';
-import configFile from '../../config.json';
 
 // Import your configuration file
-const config = configFile
+import config from '../../config.json';
+
 const resultDate = config.resultDate;
 
 // Calculate current time
@@ -23,7 +23,7 @@ console.log("Current date: ", currentDate);
 // Check if current time is past target time
 if (currentDate >= targetTime) {
   // Redirect if condition met
-  return Astro.redirect('/admin');
+  return Astro.redirect('/announce');
 }
 ---
 
diff --git a/src/utils/confetti.js b/src/utils/confetti.js
new file mode 100644
index 0000000..4369a09
--- /dev/null
+++ b/src/utils/confetti.js
@@ -0,0 +1,232 @@
+export var confetti = {
+  maxCount: 150, //set max confetti count
+  speed: 2, //set the particle animation speed
+  frameInterval: 15, //the confetti animation frame interval in milliseconds
+  alpha: 1.0, //the alpha opacity of the confetti (between 0 and 1, where 1 is opaque and 0 is invisible)
+  gradient: false, //whether to use gradients for the confetti particles
+  start: null, //call to start confetti animation (with optional timeout in milliseconds, and optional min and max random confetti count)
+  stop: null, //call to stop adding confetti
+  toggle: null, //call to start or stop the confetti animation depending on whether it's already running
+  pause: null, //call to freeze confetti animation
+  resume: null, //call to unfreeze confetti animation
+  togglePause: null, //call to toggle whether the confetti animation is paused
+  remove: null, //call to stop the confetti animation and remove all confetti immediately
+  isPaused: null, //call and returns true or false depending on whether the confetti animation is paused
+  isRunning: null, //call and returns true or false depending on whether the animation is running
+};
+
+(function () {
+  confetti.start = startConfetti;
+  confetti.stop = stopConfetti;
+  confetti.toggle = toggleConfetti;
+  confetti.pause = pauseConfetti;
+  confetti.resume = resumeConfetti;
+  confetti.togglePause = toggleConfettiPause;
+  confetti.isPaused = isConfettiPaused;
+  confetti.remove = removeConfetti;
+  confetti.isRunning = isConfettiRunning;
+  var supportsAnimationFrame =
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame;
+  var colors = [
+    "rgba(30,144,255,",
+    "rgba(107,142,35,",
+    "rgba(255,215,0,",
+    "rgba(255,192,203,",
+    "rgba(106,90,205,",
+    "rgba(173,216,230,",
+    "rgba(238,130,238,",
+    "rgba(152,251,152,",
+    "rgba(70,130,180,",
+    "rgba(244,164,96,",
+    "rgba(210,105,30,",
+    "rgba(220,20,60,",
+  ];
+  var streamingConfetti = false;
+  var animationTimer = null;
+  var pause = false;
+  var lastFrameTime = Date.now();
+  var particles = [];
+  var waveAngle = 0;
+  var context = null;
+
+  function resetParticle(particle, width, height) {
+    particle.color =
+      colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
+    particle.color2 =
+      colors[(Math.random() * colors.length) | 0] + (confetti.alpha + ")");
+    particle.x = Math.random() * width;
+    particle.y = Math.random() * height - height;
+    particle.diameter = Math.random() * 10 + 5;
+    particle.tilt = Math.random() * 10 - 10;
+    particle.tiltAngleIncrement = Math.random() * 0.07 + 0.05;
+    particle.tiltAngle = Math.random() * Math.PI;
+    return particle;
+  }
+
+  function toggleConfettiPause() {
+    if (pause) resumeConfetti();
+    else pauseConfetti();
+  }
+
+  function isConfettiPaused() {
+    return pause;
+  }
+
+  function pauseConfetti() {
+    pause = true;
+  }
+
+  function resumeConfetti() {
+    pause = false;
+    runAnimation();
+  }
+
+  function runAnimation() {
+    if (pause) return;
+    else if (particles.length === 0) {
+      context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+      animationTimer = null;
+    } else {
+      var now = Date.now();
+      var delta = now - lastFrameTime;
+      if (!supportsAnimationFrame || delta > confetti.frameInterval) {
+        context.clearRect(0, 0, window.innerWidth, window.innerHeight);
+        updateParticles();
+        drawParticles(context);
+        lastFrameTime = now - (delta % confetti.frameInterval);
+      }
+      animationTimer = requestAnimationFrame(runAnimation);
+    }
+  }
+
+  function startConfetti(timeout, min, max) {
+    var width = window.innerWidth;
+    var height = window.innerHeight;
+    window.requestAnimationFrame = (function () {
+      return (
+        window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        window.mozRequestAnimationFrame ||
+        window.oRequestAnimationFrame ||
+        window.msRequestAnimationFrame ||
+        function (callback) {
+          return window.setTimeout(callback, confetti.frameInterval);
+        }
+      );
+    })();
+    var canvas = document.getElementById("confetti-canvas");
+    if (canvas === null) {
+      canvas = document.createElement("canvas");
+      canvas.setAttribute("id", "confetti-canvas");
+      canvas.setAttribute(
+        "style",
+        "display:block;z-index:999999;pointer-events:none;position:fixed;top:0"
+      );
+      document.body.prepend(canvas);
+      canvas.width = width;
+      canvas.height = height;
+      window.addEventListener(
+        "resize",
+        function () {
+          canvas.width = window.innerWidth;
+          canvas.height = window.innerHeight;
+        },
+        true
+      );
+      context = canvas.getContext("2d");
+    } else if (context === null) context = canvas.getContext("2d");
+    var count = confetti.maxCount;
+    if (min) {
+      if (max) {
+        if (min == max) count = particles.length + max;
+        else {
+          if (min > max) {
+            var temp = min;
+            min = max;
+            max = temp;
+          }
+          count = particles.length + ((Math.random() * (max - min) + min) | 0);
+        }
+      } else count = particles.length + min;
+    } else if (max) count = particles.length + max;
+    while (particles.length < count)
+      particles.push(resetParticle({}, width, height));
+    streamingConfetti = true;
+    pause = false;
+    runAnimation();
+    if (timeout) {
+      window.setTimeout(stopConfetti, timeout);
+    }
+  }
+
+  function stopConfetti() {
+    streamingConfetti = false;
+  }
+
+  function removeConfetti() {
+    stop();
+    pause = false;
+    particles = [];
+  }
+
+  function toggleConfetti() {
+    if (streamingConfetti) stopConfetti();
+    else startConfetti();
+  }
+
+  function isConfettiRunning() {
+    return streamingConfetti;
+  }
+
+  function drawParticles(context) {
+    var particle;
+    var x, y, x2, y2;
+    for (var i = 0; i < particles.length; i++) {
+      particle = particles[i];
+      context.beginPath();
+      context.lineWidth = particle.diameter;
+      x2 = particle.x + particle.tilt;
+      x = x2 + particle.diameter / 2;
+      y2 = particle.y + particle.tilt + particle.diameter / 2;
+      if (confetti.gradient) {
+        var gradient = context.createLinearGradient(x, particle.y, x2, y2);
+        gradient.addColorStop("0", particle.color);
+        gradient.addColorStop("1.0", particle.color2);
+        context.strokeStyle = gradient;
+      } else context.strokeStyle = particle.color;
+      context.moveTo(x, particle.y);
+      context.lineTo(x2, y2);
+      context.stroke();
+    }
+  }
+
+  function updateParticles() {
+    var width = window.innerWidth;
+    var height = window.innerHeight;
+    var particle;
+    waveAngle += 0.01;
+    for (var i = 0; i < particles.length; i++) {
+      particle = particles[i];
+      if (!streamingConfetti && particle.y < -15) particle.y = height + 100;
+      else {
+        particle.tiltAngle += particle.tiltAngleIncrement;
+        particle.x += Math.sin(waveAngle) - 0.5;
+        particle.y +=
+          (Math.cos(waveAngle) + particle.diameter + confetti.speed) * 0.5;
+        particle.tilt = Math.sin(particle.tiltAngle) * 15;
+      }
+      if (particle.x > width + 20 || particle.x < -20 || particle.y > height) {
+        if (streamingConfetti && particles.length <= confetti.maxCount)
+          resetParticle(particle, width, height);
+        else {
+          particles.splice(i, 1);
+          i--;
+        }
+      }
+    }
+  }
+})();