From dc759df03863b1b290b138662ef3d27ad8b60756 Mon Sep 17 00:00:00 2001 From: Aditya Siregar Date: Sat, 16 Aug 2025 11:30:55 +0700 Subject: [PATCH] Update Result Page --- app/globals.css | 126 ++++++++++++++++++++++++++++++++--- app/results/page.tsx | 42 ++++++++++-- components/reveal-screen.tsx | 50 ++++++++++++++ public/logo.jpeg | Bin 0 -> 6407 bytes 4 files changed, 205 insertions(+), 13 deletions(-) create mode 100644 components/reveal-screen.tsx create mode 100644 public/logo.jpeg diff --git a/app/globals.css b/app/globals.css index b9cd56e..a4bf8e3 100644 --- a/app/globals.css +++ b/app/globals.css @@ -182,7 +182,7 @@ /* Fullscreen styles for event overview */ [data-fullscreen-target="event-overview"]:fullscreen { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: #118a69; padding: 4rem; display: flex; flex-direction: column; @@ -425,6 +425,30 @@ to { transform: rotate(360deg); } } +@keyframes pulse { + 0% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.05); + opacity: 0.9; + } + 100% { + transform: scale(1); + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + [data-fullscreen-target="event-overview"]:fullscreen .bg-gradient-to-r .text-3xl { font-size: 7rem !important; font-weight: 900 !important; @@ -455,7 +479,7 @@ /* Fullscreen styles for Ready to Reveal Results */ [data-fullscreen-target="reveal-results"]:fullscreen { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + background: #118a69; display: flex; flex-direction: column; justify-content: center; @@ -647,13 +671,33 @@ margin: 1rem auto; } -[data-fullscreen-target="reveal-results"]:fullscreen .trophy-icon { - height: 5rem !important; - width: 5rem !important; - color: #FFD700 !important; - filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4)); - animation: pulse 2s ease-in-out infinite, float 3s ease-in-out infinite; - margin-bottom: 1rem !important; +/* METI Logo styling */ +[data-fullscreen-target="reveal-results"]:not(:fullscreen) .meti-logo-container { + display: none; +} + +[data-fullscreen-target="reveal-results"]:fullscreen .meti-logo-container { + position: absolute; + top: 2rem; + left: 2rem; + z-index: 100; + animation: fadeIn 0.8s ease-out; +} + +[data-fullscreen-target="reveal-results"]:fullscreen .meti-logo { + width: 120px !important; + height: 120px !important; + object-fit: contain; + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); +} + +/* Trophy icon: show in normal mode, hide in fullscreen */ +[data-fullscreen-target="reveal-results"]:not(:fullscreen) .trophy-icon-normal { + display: block; +} + +[data-fullscreen-target="reveal-results"]:fullscreen .trophy-icon-normal { + display: none !important; } [data-fullscreen-target="reveal-results"]:fullscreen .reveal-title { @@ -1105,6 +1149,70 @@ } /* Fullscreen Results Display Styles within Container */ +/* Fullscreen Logo */ +.fullscreen-logo { + display: none; +} + +[data-fullscreen-target="results-container"]:fullscreen .fullscreen-logo { + display: block !important; + position: fixed !important; + top: 2rem !important; + left: 2rem !important; + z-index: 100; +} + +[data-fullscreen-target="results-container"]:fullscreen .fullscreen-logo img { + width: 120px !important; + height: 120px !important; + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); + transition: transform 0.3s ease; +} + +[data-fullscreen-target="results-container"]:fullscreen .fullscreen-logo img:hover { + transform: scale(1.1); +} + +/* Fullscreen Logo for Event Overview */ +[data-fullscreen-target="event-overview"]:fullscreen .fullscreen-logo { + display: block !important; + position: fixed !important; + top: 2rem !important; + left: 2rem !important; + z-index: 100; +} + +[data-fullscreen-target="event-overview"]:fullscreen .fullscreen-logo img { + width: 120px !important; + height: 120px !important; + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); + transition: transform 0.3s ease; +} + +[data-fullscreen-target="event-overview"]:fullscreen .fullscreen-logo img:hover { + transform: scale(1.1); +} + +/* Fullscreen Logo for Reveal Results */ +[data-fullscreen-target="reveal-results"]:fullscreen .fullscreen-logo { + display: block !important; + position: fixed !important; + top: 2rem !important; + left: 2rem !important; + z-index: 100; +} + +[data-fullscreen-target="reveal-results"]:fullscreen .fullscreen-logo img { + width: 200px !important; + height: 200px !important; + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); + transition: transform 0.3s ease; +} + +[data-fullscreen-target="reveal-results"]:fullscreen .fullscreen-logo img:hover { + transform: scale(1.1); +} + [data-fullscreen-target="results-container"]:fullscreen .fullscreen-results-btn { position: fixed !important; top: 2rem !important; diff --git a/app/results/page.tsx b/app/results/page.tsx index 7d004a1..d9052ff 100644 --- a/app/results/page.tsx +++ b/app/results/page.tsx @@ -88,13 +88,13 @@ function ResultsPageContent() { if (selectedEventId) { fetchEventDetails(selectedEventId, false) fetchResults(selectedEventId, false) - + // Set up interval for live updates every 10 seconds const interval = setInterval(() => { fetchEventDetails(selectedEventId, true) fetchResults(selectedEventId, true) }, 10000) // 10 seconds - + // Cleanup interval on unmount or when selectedEventId changes return () => clearInterval(interval) } @@ -459,6 +459,17 @@ function ResultsPageContent() {
{/* Event Overview */} + {/* Logo for Fullscreen Mode */} +
+ Logo +
+
{isRefreshing && ( @@ -534,6 +545,17 @@ function ResultsPageContent() { {/* Show Results Button */} + {/* Logo for Fullscreen Mode */} +
+ Logo +
+
)} - -

Ready to Reveal Results?

+ {/* Trophy icon for normal mode */} + +

{selectedEvent?.title}

Click the button below to see the voting results for "{selectedEvent?.title}"

@@ -629,6 +652,17 @@ function ResultsPageContent() { {/* Results Container - Wraps both countdown and results for seamless fullscreen */}
+ {/* Logo for Fullscreen Mode */} +
+ Logo +
+ {/* Countdown Animation */} {showCountdown && ( diff --git a/components/reveal-screen.tsx b/components/reveal-screen.tsx new file mode 100644 index 0000000..25e0145 --- /dev/null +++ b/components/reveal-screen.tsx @@ -0,0 +1,50 @@ +"use client" + +import { useEffect, useState } from "react" +import Image from "next/image" + +export function RevealScreen() { + const [isVisible, setIsVisible] = useState(true) + const [isAnimating, setIsAnimating] = useState(false) + + useEffect(() => { + // Start fade out animation after 2 seconds + const timer = setTimeout(() => { + setIsAnimating(true) + // Remove the component after animation completes + setTimeout(() => { + setIsVisible(false) + }, 500) + }, 2000) + + return () => clearTimeout(timer) + }, []) + + if (!isVisible) return null + + return ( +
+
+
+ METI Logo +
+
+
+
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/public/logo.jpeg b/public/logo.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..330fb032c08a801d81bce0f8d211678c012a6e18 GIT binary patch literal 6407 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 z