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 0000000..330fb03 Binary files /dev/null and b/public/logo.jpeg differ