diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/LoginBody.astro | 2 | ||||
| -rw-r--r-- | src/components/ResultsBody.astro | 5 | ||||
| -rw-r--r-- | src/components/SignupBody.astro | 2 | ||||
| -rw-r--r-- | src/pages/announce.astro | 74 | ||||
| -rw-r--r-- | src/pages/login.astro | 2 | ||||
| -rw-r--r-- | src/pages/results.astro | 6 | ||||
| -rw-r--r-- | src/utils/confetti.js | 232 |
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--; + } + } + } + } +})(); |