diff --git a/Frontend/public/events/AGTechathon-2.0.png b/Frontend/public/events/AGTechathon-2.0.png new file mode 100644 index 0000000..50550ce Binary files /dev/null and b/Frontend/public/events/AGTechathon-2.0.png differ diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx index 4f88215..712d29d 100644 --- a/Frontend/src/App.tsx +++ b/Frontend/src/App.tsx @@ -8,6 +8,7 @@ import Userpage from './components/user_page/Userpage' import Admin from './components/Admin/Admin' import Hackathon from './components/Events/Hackathon' import HackathonCountdownPage from './pages/hackathon-countdown' +import HackathonCountdownTest from './components/Events/HackathonCountdownTest' import StaffLogin from './components/staff/StaffLogin'; import StaffDashboard from './components/staff/StaffDashboard'; import UserProfileSection from './components/user_page/UserProfileSection'; @@ -41,6 +42,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/Frontend/src/components/Events/HackathonCountdown.tsx b/Frontend/src/components/Events/HackathonCountdown.tsx index 2aadbd9..303b27d 100644 --- a/Frontend/src/components/Events/HackathonCountdown.tsx +++ b/Frontend/src/components/Events/HackathonCountdown.tsx @@ -3,8 +3,8 @@ import { motion } from "framer-motion"; // Set to actual hackathon times for real event phase const HACKATHON_START = new Date("2026-06-05T11:15:00"); -const HACKATHON_END = new Date("2026-06-14T11:15:00"); -const HACKATHON_2026_LOGO = "/events/image.png"; +const HACKATHON_END = new Date("2026-06-14T12:00:00"); +const HACKATHON_2026_LOGO = "/events/AGTechathon-2.0.png"; function getTimeLeft() { const now = new Date(); @@ -44,7 +44,7 @@ export default function HackathonCountdown() { }; return ( -
+
{/* Subtle background glow */} + {/* Show final 00:00:00 timer with bounce animation */} + + {["Hours", "Minutes", "Seconds"].map((label, i) => ( + +
+ + 00 + +
+ {label} +
+
+ {i < 2 && ( + : + )} + + ))} +
Hackathon Ended
Thank you for participating.
 diff --git a/Frontend/src/components/Events/HackathonCountdownTest.tsx b/Frontend/src/components/Events/HackathonCountdownTest.tsx new file mode 100644 index 0000000..24ca323 --- /dev/null +++ b/Frontend/src/components/Events/HackathonCountdownTest.tsx @@ -0,0 +1,270 @@ +import { useState } from "react"; +import { motion } from "framer-motion"; + +/** + * Test/Demo Component for HackathonCountdown + * Use this to visually test countdown behavior at different phases + */ + +const HACKATHON_START = new Date("2026-06-05T11:15:00"); +const HACKATHON_END = new Date("2026-06-14T11:15:00"); + +function getTimeLeftWithDate(testDate: Date) { + const now = testDate; + if (now < HACKATHON_START) { + const diff = HACKATHON_START.getTime() - now.getTime(); + const days = Math.floor(diff / (1000 * 60 * 60 * 24)); + const hours = Math.floor((diff / (1000 * 60 * 60)) % 24); + const minutes = Math.floor((diff / (1000 * 60)) % 60); + const seconds = Math.floor((diff / 1000) % 60); + return { phase: "before", days, hours, minutes, seconds }; + } else if (now >= HACKATHON_START && now < HACKATHON_END) { + const diff = HACKATHON_END.getTime() - now.getTime(); + const days = Math.floor(diff / (1000 * 60 * 60 * 24)); + const hours = Math.floor((diff / (1000 * 60 * 60)) % 24); + const minutes = Math.floor((diff / (1000 * 60)) % 60); + const seconds = Math.floor((diff / 1000) % 60); + return { phase: "live", days, hours, minutes, seconds }; + } else { + return { phase: "ended", days: 0, hours: 0, minutes: 0, seconds: 0 }; + } +} + +export default function HackathonCountdownTest() { + const [testPhase, setTestPhase] = useState<"before" | "live" | "ended">( + "before" + ); + + let testDate = new Date(); + if (testPhase === "before") { + testDate = new Date("2026-06-01T00:00:00"); + } else if (testPhase === "live") { + testDate = new Date("2026-06-10T00:00:00"); + } else { + testDate = new Date("2026-06-15T00:00:00"); + } + + const timeLeft = getTimeLeftWithDate(testDate); + + const endedShake = { + animate: { x: [0, -10, 10, -10, 10, 0] }, + transition: { repeat: Infinity, duration: 0.7, ease: "easeInOut" } + }; + + return ( +
+ {/* Test Controls */} +
+

๐Ÿงช Countdown Timer Test

+

+ Select a phase to test the countdown behavior +

+ +
+ + + +
+ +
+
Current Phase: {testPhase}
+
Test Date: {testDate.toLocaleString()}
+
Time Left: Days={timeLeft.days}, Hours={timeLeft.hours}, Minutes={timeLeft.minutes}, Seconds={timeLeft.seconds}
+
+
+ + {/* Countdown Display */} +
+ {/* Subtle background glow */} + + + + + + AGTechathon 2.0 2k26 Countdown + + + {/* BEFORE PHASE */} + {testPhase === "before" && ( + + {["Days", "Hours", "Minutes", "Seconds"].map((label, i) => ( + +
+ + {Object.values(timeLeft).slice(1)[i]} + +
+ {label} +
+
+ {i < 3 && ( + + : + + )} + + ))} + + )} + + {/* LIVE PHASE */} + {testPhase === "live" && ( +
+

+ AGTechathon 2.0 2k26 is LIVE! +

+

+ 24 Hours of Nonstop Coding, Collaboration & Creativity +

+
+ {["Hours", "Minutes", "Seconds"].map((label, i) => ( +
+
+ {String([timeLeft.hours, timeLeft.minutes, timeLeft.seconds][i]).padStart(2, "0")} +
+
+ {label} +
+
+ ))} +
+
+ )} + + {/* ENDED PHASE - Test the 00:00:00 timer with bounce */} + {testPhase === "ended" && ( + + {/* Show final 00:00:00 timer with bounce animation */} + + {["Hours", "Minutes", "Seconds"].map((label, i) => ( + +
+ + 00 + +
+ {label} +
+
+ {i < 2 && ( + + : + + )} + + ))} + +
+ Hackathon Ended +
+
+ Thank you for participating. +
+ + )} + + {/* Test Notes */} +
+

โœ… Test Checklist

+
    +
  • + โœ“ + Timer stops at 00:00:00 when event ends +
    • +
  • + โœ“ + Red color on 00:00:00 indicates finished state +
    • +
  • + โœ“ + Bouncing animations on numbers (scale) and whole timer (y-axis) +
    • +
  • + โœ“ + "Hackathon Ended" text bounces when countdown finishes +
    • +
  • + โœ“ + Shake animation on the entire ended container +
    • +
+
+
+
+ ); +}