Update Result Page

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;

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() {
                   <div className="space-y-6 mb-8 animate-fade-in-up">
                     {/* Event Overview */}
                     <Card data-fullscreen-target="event-overview" className="relative">
+                      {/* Logo for Fullscreen Mode */}
+                      <div className="fullscreen-logo">
+                        <Image
+                          src="/logo.jpeg"
+                          alt="Logo"
+                          width={80}
+                          height={80}
+                          className="rounded-lg shadow-lg"
+                        />
+                      </div>
+
                       <CardHeader className="card-header">
                             <div className="flex items-center justify-center gap-3 mb-2">
                               {isRefreshing && (
@@ -534,6 +545,17 @@ function ResultsPageContent() {
 
                 {/* Show Results Button */}
                 <Card data-fullscreen-target="reveal-results" className="relative">
+                  {/* Logo for Fullscreen Mode */}
+                  <div className="fullscreen-logo">
+                    <Image
+                      src="/logo.jpeg"
+                      alt="Logo"
+                      width={80}
+                      height={80}
+                      className="rounded-lg shadow-lg"
+                    />
+                  </div>
+
                   <CardContent className="text-center py-16 reveal-content">
                     <Button
                       onClick={() => {
@@ -605,8 +627,9 @@ function ResultsPageContent() {
                       </div>
                     )}
 
-                    <Trophy className="h-16 w-16 text-blue-500 mx-auto mb-6 trophy-icon" />
-                    <h2 className="text-2xl font-bold mb-4 reveal-title">Ready to Reveal Results?</h2>
+                    {/* Trophy icon for normal mode */}
+                    <Trophy className="h-16 w-16 text-blue-500 mx-auto mb-6 trophy-icon-normal" />
+                    <h2 className="text-2xl font-bold mb-4 reveal-title">{selectedEvent?.title}</h2>
                     <p className="text-gray-600 mb-8 reveal-description">
                       Click the button below to see the voting results for "{selectedEvent?.title}"
                     </p>
@@ -629,6 +652,17 @@ function ResultsPageContent() {
 
             {/* Results Container - Wraps both countdown and results for seamless fullscreen */}
             <div data-fullscreen-target="results-container" className="results-fullscreen-container">
+              {/* Logo for Fullscreen Mode */}
+              <div className="fullscreen-logo">
+                <Image
+                  src="/logo.jpeg"
+                  alt="Logo"
+                  width={80}
+                  height={80}
+                  className="rounded-lg shadow-lg"
+                />
+              </div>
+
               {/* Countdown Animation */}
               {showCountdown && (
                 <Card className="relative countdown-card">

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 (
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-500 ${
+        isAnimating ? "opacity-0" : "opacity-100"
+      }`}
+      style={{ backgroundColor: "#118a69" }}
+    >
+      <div className="flex flex-col items-center">
+        <div className="relative w-48 h-48 sm:w-64 sm:h-64 animate-pulse">
+          <Image
+            src="/images/meti-logo.png"
+            alt="METI Logo"
+            fill
+            style={{ objectFit: "contain" }}
+            priority
+          />
+        </div>
+        <div className="mt-8 flex space-x-2">
+          <div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "0ms" }}></div>
+          <div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "150ms" }}></div>
+          <div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "300ms" }}></div>
+        </div>
+      </div>
+    </div>
+  )
+}