From 1d2782c58136071e3c75d9301993972d6074eabb Mon Sep 17 00:00:00 2001 From: Gourab Dey Date: Sat, 26 Jul 2025 16:36:36 +0530 Subject: [PATCH 1/3] Refactor timer component: remove unused imports and function --- src/app/_components/timer.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/app/_components/timer.tsx b/src/app/_components/timer.tsx index 1f6d37a..cbbd0af 100644 --- a/src/app/_components/timer.tsx +++ b/src/app/_components/timer.tsx @@ -1,6 +1,6 @@ "use client"; import React, { useState, useEffect } from "react"; -import { useRouter, useSearchParams } from "next/navigation"; +import { useSearchParams } from "next/navigation"; interface TimerProps { initialHours?: number; @@ -43,8 +43,6 @@ const CountdownTimer = ({ window.history.replaceState({}, "", newUrl); }; - const getTotalSeconds = (h: number, m: number, s: number) => - h * 3600 + m * 60 + s; From cb1d289530b23e6b5ef14a34899e82c67238ec09 Mon Sep 17 00:00:00 2001 From: Gourab Dey Date: Sat, 26 Jul 2025 16:36:42 +0530 Subject: [PATCH 2/3] Remove unnecessary blank line in CountdownTimer component --- src/app/_components/timer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/_components/timer.tsx b/src/app/_components/timer.tsx index cbbd0af..7b5ae47 100644 --- a/src/app/_components/timer.tsx +++ b/src/app/_components/timer.tsx @@ -192,7 +192,6 @@ const CountdownTimer = ({ - {/* Control Buttons */}
{/* Start button - always visible when timer is not running */} From 5cb70b89392f065f2667a69c736aac277919c597 Mon Sep 17 00:00:00 2001 From: Gourab Dey Date: Sat, 26 Jul 2025 17:17:37 +0530 Subject: [PATCH 3/3] Fix CountdownTimer to calculate IST time correctly and improve UI elements --- src/app/_components/timer.tsx | 187 ++++++++++++++++++---------------- src/app/globals.css | 5 +- 2 files changed, 100 insertions(+), 92 deletions(-) diff --git a/src/app/_components/timer.tsx b/src/app/_components/timer.tsx index 7b5ae47..a64fccb 100644 --- a/src/app/_components/timer.tsx +++ b/src/app/_components/timer.tsx @@ -1,50 +1,55 @@ "use client"; import React, { useState, useEffect } from "react"; -import { useSearchParams } from "next/navigation"; interface TimerProps { + // Props are now optional since we'll calculate from IST initialHours?: number; initialMinutes?: number; initialSeconds?: number; } const CountdownTimer = ({ - initialHours = 30, - initialMinutes = 0, - initialSeconds = 0, }: TimerProps) => { - const searchParams = useSearchParams(); - - // Initialize time from URL params or use default values - const getInitialTime = () => { - const urlHours = searchParams.get("h"); - const urlMinutes = searchParams.get("m"); - const urlSeconds = searchParams.get("s"); - - return { - hours: urlHours ? parseInt(urlHours) : initialHours, - minutes: urlMinutes ? parseInt(urlMinutes) : initialMinutes, - seconds: urlSeconds ? parseInt(urlSeconds) : initialSeconds, - }; + // Function to get current IST time - FIXED + const getISTTime = () => { + const now = new Date(); + // Use toLocaleString to get proper IST time + const istString = now.toLocaleString('en-US', { + timeZone: 'Asia/Kolkata' + }); + return new Date(istString); }; - const [timeLeft, setTimeLeft] = useState(getInitialTime); - const [isRunning, setIsRunning] = useState(false); - const [isHovered, setIsHovered] = useState(false); - - // Update URL params when time changes - const updateUrlParams = (hours: number, minutes: number, seconds: number) => { - const params = new URLSearchParams(window.location.search); - params.set("h", hours.toString()); - params.set("m", minutes.toString()); - params.set("s", seconds.toString()); - const newUrl = `${window.location.pathname}?${params.toString()}`; - window.history.replaceState({}, "", newUrl); + // Function to get target time: July 27, 2025, 4:00 PM IST - FIXED + const getTargetTime = () => { + + // Alternative method: create the exact target time + const targetIST = new Date(2025, 6, 27, 16, 0, 0); // Month is 0-indexed, so 6 = July + return targetIST; }; + // Calculate initial time remaining - FIXED + const calculateTimeRemaining = () => { + const istNow = getISTTime(); + const target = getTargetTime(); + const timeDiff = target.getTime() - istNow.getTime(); + + if (timeDiff <= 0) { + return { hours: 0, minutes: 0, seconds: 0 }; + } + const hours = Math.floor(timeDiff / (1000 * 60 * 60)); + const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000); + return { hours, minutes, seconds }; + }; + + const [timeLeft, setTimeLeft] = useState(calculateTimeRemaining); + const [isRunning, setIsRunning] = useState(true); // Auto-start + const [isHovered, setIsHovered] = useState(false); + const [currentISTTime, setCurrentISTTime] = useState(getISTTime()); const getCheckpoint = () => { const hoursLeft = @@ -102,52 +107,22 @@ const CountdownTimer = ({ return Math.max(0, Math.min(100, progressWithinCheckpoint)); }; - // Timer countdown effect + // Timer countdown effect - updates every second based on real IST time useEffect(() => { let interval: NodeJS.Timeout; if (isRunning) { interval = setInterval(() => { - setTimeLeft((prev) => { - // Check if timer has reached zero - if (prev.hours === 0 && prev.minutes === 0 && prev.seconds === 0) { - setIsRunning(false); - return prev; - } - - let newSeconds = prev.seconds - 1; - let newMinutes = prev.minutes; - let newHours = prev.hours; - - if (newSeconds < 0) { - newSeconds = 59; - newMinutes -= 1; - } - - if (newMinutes < 0 && newHours > 0) { - newMinutes = 59; - newHours -= 1; - } - - // Ensure we don't go below zero - if (newHours < 0) { - newHours = 0; - newMinutes = 0; - newSeconds = 0; - setIsRunning(false); - } - - const newTime = { - hours: Math.max(0, newHours), - minutes: Math.max(0, newMinutes), - seconds: Math.max(0, newSeconds), - }; - - // Update URL params with new time - updateUrlParams(newTime.hours, newTime.minutes, newTime.seconds); - - return newTime; - }); + const newTimeRemaining = calculateTimeRemaining(); + const newISTTime = getISTTime(); + + setTimeLeft(newTimeRemaining); + setCurrentISTTime(newISTTime); + + // Check if timer has reached zero + if (newTimeRemaining.hours === 0 && newTimeRemaining.minutes === 0 && newTimeRemaining.seconds === 0) { + setIsRunning(false); + } }, 1000); } @@ -161,20 +136,52 @@ const CountdownTimer = ({ }; const handleReset = () => { - setIsRunning(false); - const resetTime = { - hours: initialHours, - minutes: initialMinutes, - seconds: initialSeconds, - }; + setIsRunning(true); // Auto-restart + const resetTime = calculateTimeRemaining(); setTimeLeft(resetTime); - updateUrlParams(resetTime.hours, resetTime.minutes, resetTime.seconds); + setCurrentISTTime(getISTTime()); }; const currentCheckpoint = getCheckpoint(); + // Format IST time for display - FIXED + const formatISTTime = (date: Date) => { + return date.toLocaleString('en-IN', { + timeZone: 'Asia/Kolkata', + weekday: 'short', + year: 'numeric', + month: 'short', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', + hour12: true + }); + }; + + return ( -
+
+ {/* Title */} +
+

+ INNOFUSION 2.0 +

+
+ + {/* IST Time Display */} +
+
+
Current IST Time
+
+ {formatISTTime(currentISTTime)} +
+
+
+ Target: Sun, 27 Jul, 2025, 04:00:00 pm +
+
+ {/* Main Timer Display */}
- + : - + :
{/* Control Buttons */}
- {/* Start button - always visible when timer is not running */} + {/* Start button - visible when timer is not running */} {!isRunning && (
@@ -238,14 +245,14 @@ const CountdownTimer = ({ {currentCheckpoint.name} - {/* Checkpoint Progress Bar - Fixed with white color */} -
+ {/* Checkpoint Progress Bar */} +
{/* Animated glow effect */} -
+
@@ -269,15 +276,15 @@ const CountdownTimer = ({ const TimeUnit = ({ value, label }: { value: number; label: string }) => (
-
- +
+ {value.toString().padStart(2, "0")}
- + {label}
); -export default CountdownTimer; +export default CountdownTimer; \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index 4c3cad5..9dbcce5 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -75,11 +75,12 @@ body { body { @apply bg-background text-foreground; } - .hero { + + .hero { position: relative; top: 0; background: url("/hero/hero1.png"); - background-size: 43%; + background-size: 75%; background-position: center; justify-self: center; background-repeat: no-repeat;