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">