Merge branch 'main' of https://git-eng.ukwms.ac.id/2526-web/kelompok06-2048

2048.css

@@ -1,4 +1,3 @@
-
 * {
     margin: 0;
     padding: 0;
@@ -6,9 +5,10 @@
 }
 
 body {
-    background: radial-gradient(circle at center, #0a0a0a, #000);
+    background: radial-gradient(circle at 20% 20%, #3b0066, #0c001a 70%);
-    background-size: 300% 300%;
+    background-size: 100% 100%;
-    animation: bgMove 15s infinite alternate;
+    background-attachment: fixed;
+    
     font-family: 'Poppins', sans-serif;
     color: white;
     text-align: center;
@@ -20,14 +20,63 @@ body {
     justify-content: center;
     padding: 10px;
     overflow: hidden;
+    position: relative;
 }
 
-@keyframes bgMove {
+/* ADDED: Animated Grid Pattern (optional, bisa dihapus kalau ga suka) */
-    0% { background-position: 0% 30%; }
+body::before {
-    50% { background-position: 50% 70%; }
+    content: '';
-    100% { background-position: 100% 30%; }
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: 
+        linear-gradient(rgba(0, 234, 255, 0.02) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 0, 255, 0.02) 1px, transparent 1px);
+    background-size: 40px 40px;
+    animation: gridMove 25s linear infinite;
+    z-index: 0;
+    pointer-events: none;
 }
 
+@keyframes gridMove {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(40px, 40px);
+    }
+}
+
+/* ADDED: Floating gradient blobs for depth */
+body::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(ellipse at 10% 20%, rgba(0, 234, 255, 0.08), transparent 50%),
+        radial-gradient(ellipse at 90% 80%, rgba(255, 0, 255, 0.08), transparent 50%),
+        radial-gradient(ellipse at 50% 50%, rgba(138, 43, 226, 0.05), transparent 60%);
+    filter: blur(60px);
+    animation: blobFloat 20s ease-in-out infinite;
+    z-index: 0;
+    pointer-events: none;
+}
+
+@keyframes blobFloat {
+    0%, 100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0.6;
+    }
+    50% {
+        transform: translate(30px, -30px) scale(1.1);
+        opacity: 0.8;
+    }
+}
 /* ======================
    GAME CONTAINER
 ====================== */
@@ -282,6 +331,18 @@ h1 {
     transform: scale(1.1);
 }
 
+/* FORCE tombol sound untuk selalu visible */
+.btn-sound-main {
+    display: flex !important;
+    position: relative !important;
+    z-index: 103 !important;
+}
+
+.volume-panel {
+    position: relative !important;
+    z-index: 102 !important;
+} 
+
 /* Mobile Responsive */
 @media (max-width: 768px) {
     .sound-controls {
@@ -1310,6 +1371,85 @@ h1 {
     will-change: transform, opacity;
     filter: blur(1px) drop-shadow(0 0 8px rgba(255,255,255,0.1));
 }
+/* ==========================
+   ENHANCED BACKGROUND EFFECTS
+
+/* Update .particles styling */
+.particles {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 0;
+    background:
+      radial-gradient(circle at 20% 30%, rgba(0,234,255,0.15), transparent 40%),
+      radial-gradient(circle at 80% 70%, rgba(255,0,90,0.15), transparent 40%),
+      radial-gradient(circle at 50% 50%, rgba(140,0,255,0.12), transparent 50%),
+      radial-gradient(circle at 10% 85%, rgba(0,255,200,0.1), transparent 50%),
+      radial-gradient(circle at 90% 15%, rgba(255,0,255,0.13), transparent 40%);
+    filter: blur(50px) brightness(110%);
+    animation: particlesFloat 18s ease-in-out infinite alternate;
+}
+
+@keyframes particlesFloat {
+    0%   { 
+        transform: translateY(0px) translateX(0px); 
+        opacity: 0.8;
+    }
+    50%  { 
+        transform: translateY(-25px) translateX(15px); 
+        opacity: 1;
+    }
+    100% { 
+        transform: translateY(-40px) translateX(-20px); 
+        opacity: 0.8;
+    }
+}
+
+/* Enhanced Starfield */
+.starfield {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.starfield span {
+    position: absolute;
+    width: 3px;
+    height: 3px;
+    background: rgba(0,255,255,0.7);
+    border-radius: 50%;
+    filter: blur(1.5px);
+    box-shadow: 0 0 8px rgba(0, 234, 255, 0.6);
+    animation: starMove linear infinite;
+}
+
+@keyframes starMove {
+    0% { 
+        transform: translateY(0); 
+        opacity: 0.7; 
+    }
+    100% { 
+        transform: translateY(-750px); 
+        opacity: 0; 
+    }
+}
+
+/* Enhanced Cursor Light */
+.cursor-light {
+    position: absolute;
+    width: 280px;
+    height: 280px;
+    background: radial-gradient(circle, rgba(0,255,255,0.2), rgba(255,0,255,0.15) 50%, transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+    transform: translate(-50%, -50%);
+    filter: blur(50px);
+    mix-blend-mode: screen;
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
+}
 
 /* ==========================
    RESPONSIVE DESIGN
@@ -1346,7 +1486,26 @@ h1 {
     position: fixed;
     top: clamp(10px, 2vh, 20px);
     left: clamp(10px, 2vw, 20px);
-    z-index: 100;
+    z-index: 101;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+}
+
+/* Backdrop Overlay untuk Mobile */
+.volume-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(8px);
+    z-index: 99;
+    animation: fadeIn 0.2s ease-out;
+}
+
+.volume-backdrop.active {
+    display: block;
 }
 
 /* Main Sound Button */
@@ -1418,9 +1577,7 @@ h1 {
 
 /* Volume Panel */
 .volume-panel {
-    position: absolute;
+    display: none;
-    top: clamp(46px, 8vh, 60px);
-    left: 0;
     background: linear-gradient(145deg, rgba(20, 0, 40, 0.98), rgba(30, 0, 50, 0.98));
     backdrop-filter: blur(25px);
     border: 2px solid rgba(0, 217, 255, 0.4);
@@ -1432,6 +1589,11 @@ h1 {
         0 0 50px rgba(0, 217, 255, 0.3),
         inset 0 1px 0 rgba(255, 255, 255, 0.1);
     animation: slideDown 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+    z-index: 102;
+}
+
+.volume-panel.active {
+    display: block;
 }
 
 @keyframes slideDown {

2048.html

@@ -21,13 +21,12 @@
 
     <!-- SOUND CONTROL - KIRI ATAS -->
     <div class="sound-control-container">
-      <!-- Main Sound Button -->
+      <!-- Backdrop Overlay (Hidden by default) -->
-      <button
+      <div class="volume-backdrop" id="volume-backdrop"></div>
-        class="icon-btn btn-sound-main"
+    
-        id="btn-sound-main"
+      <!-- Main Sound Button - HAPUS class "icon-btn" -->
-        title="Sound Settings"
+      <button class="btn-sound-main" id="btn-sound-main" title="Sound Settings">
-      >
+        <!-- Icon Full Sound (avg ≥ 60%) -->
-        <!-- Icon Full Sound (all ON) -->
         <svg
           class="sound-full"
           viewBox="0 0 24 24"
@@ -36,11 +35,10 @@
           stroke-width="2.5"
         >
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
-          <path
+          <path d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14" />
-            d="M15.54 8.46a5 5 0 0 1 0 7.07M19.07 4.93a10 10 0 0 1 0 14.14"
-          />
         </svg>
-        <!-- Icon Medium Sound (some muted) -->
+        
+        <!-- Icon Medium Sound (avg ≥ 30% && < 60%) -->
         <svg
           class="sound-medium"
           viewBox="0 0 24 24"
@@ -52,7 +50,8 @@
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
           <path d="M15.54 8.46a5 5 0 0 1 0 7.07" />
         </svg>
-        <!-- Icon Low Sound (mostly muted) -->
+
+        <!-- Icon Low Sound (avg > 0% && < 30%) -->
         <svg
           class="sound-low"
           viewBox="0 0 24 24"
@@ -63,7 +62,8 @@
         >
           <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
         </svg>
-        <!-- Icon Muted (all OFF) -->
+        
+        <!-- Icon Muted (all volumes = 0%) -->
         <svg
           class="sound-muted"
           viewBox="0 0 24 24"
@@ -79,20 +79,18 @@
       </button>
 
       <!-- Volume Sliders Panel (Hidden by default) -->
-      <div class="volume-panel" id="volume-panel" style="display: none">
+      <div class="volume-panel" id="volume-panel">
         <!-- Music Volume -->
         <div class="volume-item">
           <div class="volume-header">
             <svg
-              class="volume-icon"
+              class="volume-icon icon-music"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
             >
-              <path
+              <path d="M9 18V5l12-2v13M9 18c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm12-2c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z" />
-                d="M9 18V5l12-2v13M9 18c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3zm12-2c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"
-              />
             </svg>
             <span class="volume-label">Music</span>
             <span class="volume-value" id="vol-music-display">25%</span>
@@ -111,7 +109,7 @@
         <div class="volume-item">
           <div class="volume-header">
             <svg
-              class="volume-icon"
+              class="volume-icon icon-pop"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
@@ -137,15 +135,13 @@
         <div class="volume-item">
           <div class="volume-header">
             <svg
-              class="volume-icon"
+              class="volume-icon icon-merge"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
             >
-              <path
+              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
-              />
             </svg>
             <span class="volume-label">Merge SFX</span>
             <span class="volume-value" id="vol-merge-display">100%</span>
@@ -161,13 +157,10 @@
         </div>
       </div>
     </div>
+
     <!-- Top Right Controls -->
     <div class="top-controls">
-      <button
+      <button class="icon-btn btn-tutorial" id="btn-tutorial" title="How to Play">
-        class="icon-btn btn-tutorial"
-        id="btn-tutorial"
-        title="How to Play"
-      >
         <svg
           viewBox="0 0 24 24"
           fill="none"
@@ -179,20 +172,14 @@
           <line x1="12" y1="17" x2="12.01" y2="17" />
         </svg>
       </button>
-      <button
+      <button class="icon-btn btn-restart-icon" id="btn-restart" title="Restart Game">
-        class="icon-btn btn-restart-icon"
-        id="btn-restart"
-        title="Restart Game"
-      >
         <svg
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2.5"
         >
-          <path
+          <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" />
-            d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
-          />
         </svg>
       </button>
     </div>
@@ -222,12 +209,7 @@
     <div class="tutorial-overlay" id="tutorial-overlay" style="display: none">
       <div class="tutorial-modal">
         <button class="modal-close" id="close-tutorial">
-          <svg
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-          >
             <line x1="18" y1="6" x2="6" y2="18" />
             <line x1="6" y1="6" x2="18" y2="18" />
           </svg>
@@ -236,11 +218,10 @@
         <h2 class="tutorial-title">How to Play</h2>
 
         <div class="tutorial-content">
-          <!-- PC Controls - Hidden on Mobile -->
+          <!-- PC Controls -->
           <div class="tutorial-section pc-controls">
             <h3>🖥️ PC Controls</h3>
             <div class="keys-container">
-              <!-- WASD Keys -->
               <div class="keys-group">
                 <div class="keys-grid-wasd">
                   <div class="key-empty"></div>
@@ -252,10 +233,7 @@
                 </div>
                 <p class="keys-label">WASD</p>
               </div>
-
               <div class="keys-separator">or</div>
-
-              <!-- Arrow Keys -->
               <div class="keys-group">
                 <div class="keys-grid-arrow">
                   <div class="key-empty"></div>
@@ -270,7 +248,7 @@
             </div>
           </div>
 
-          <!-- Mobile Controls - Hidden on PC -->
+          <!-- Mobile Controls -->
           <div class="tutorial-section mobile-controls">
             <h3>📱 Mobile Controls</h3>
             <div class="swipe-demo">
@@ -282,8 +260,7 @@
           <div class="tutorial-section">
             <h3>🎯 Objective</h3>
             <p class="objective-text">
-              Combine tiles with the same numbers to reach
+              Combine tiles with the same numbers to reach <strong>2048</strong>!
-              <strong>2048</strong>!
             </p>
           </div>
         </div>
@@ -293,84 +270,39 @@
     <!-- Game Over Modal -->
     <div class="game-over-overlay" id="game-over-overlay" style="display: none">
       <div class="game-over-modal">
-        <!-- Close Button (X) -->
         <button class="game-over-close" id="game-over-close">
-          <svg
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2.5"
-          >
             <line x1="18" y1="6" x2="6" y2="18" />
             <line x1="6" y1="6" x2="18" y2="18" />
           </svg>
         </button>
 
-        <!-- Title -->
         <div class="game-over-title">No More Moves!</div>
         <div class="game-over-subtitle">Game Over</div>
 
-        <!-- Score Section -->
         <div class="game-over-score">
           <div class="game-over-score-label">Your Score</div>
           <div class="game-over-score-value" id="final-score">0</div>
 
-          <!-- New High Score Badge - show if new record -->
+          <div class="new-high-score" id="new-high-score-badge" style="display: none">
-          <div
+            🏆 New High Score!
-            class="new-high-score"
-            id="new-high-score-badge"
-            style="display: none"
-          >
-            New High Score
           </div>
 
-          <!-- high Score Display - show if NOT new record -->
+          <div class="high-score-display" id="high-score-display" style="display: none">
-          <div
-            class="high-score-display"
-            id="high-score-display"
-            style="display: none"
-          >
             <div class="high-score-label">High Score</div>
             <div class="high-score-value" id="modal-high-score">0</div>
           </div>
         </div>
 
-        <!-- Action Buttons - ICON ONLY -->
         <div class="game-over-buttons">
-          <!-- Restart Button -->
+          <button class="btn-game-icon btn-restart-game" id="btn-play-again" title="Restart Game">
-          <button
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            class="btn-game-icon btn-restart-game"
+              <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" />
-            id="btn-play-again"
-            title="Restart Game"
-          >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
-              <path
-                d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
-              />
             </svg>
           </button>
 
-          <!-- Home Button -->
+          <button class="btn-game-icon btn-home-game" id="btn-home" title="Back to Home">
-          <button
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
-            class="btn-game-icon btn-home-game"
-            id="btn-home"
-            title="Back to Home"
-          >
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2.5"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-            >
               <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
               <polyline points="9 22 9 12 15 12 15 22" />
             </svg>
@@ -378,6 +310,7 @@
         </div>
       </div>
     </div>
+
     <script src="Score_Request.js"></script>
     <script src="2048.js"></script>
     <script src="Audio_2048.js"></script>

2048_Controls.js

@@ -1,8 +1,13 @@
 /* ------------------------
    6. INPUT HANDLER
-   ------------------------ */
+   ------------------------ 
+   */
+
+let inputLocked = false;
+
 function handleKey(e) {
-  if (isMoving) return;
+  if (isMoving || inputLocked) return;   // ⛔ BLOK kalau sedang buka sound panel
+
   
   let moved = false;
   const k = e.key;
@@ -35,14 +40,18 @@ function handleKey(e) {
 let touchStartX = 0;
 let touchStartY = 0;
 
+
 document.addEventListener("touchstart", function (e) {
+  if (inputLocked) return;   // ⛔ jangan catat swipe
+  
   const t = e.touches[0];
   touchStartX = t.clientX;
   touchStartY = t.clientY;
 }, { passive: true });
 
+
 document.addEventListener("touchend", function (e) {
-  if (isMoving) return;
+  if (isMoving || inputLocked) return;  // ⛔ swipe diblok saat sound panel aktif
   
   const t = e.changedTouches[0];
   const dx = t.clientX - touchStartX;

Animation_Homepage.js

@@ -1,66 +1,318 @@
-// Neon Particles Animation - Optimized for Academic Project
+(function() {
-const particlesContainer = document.getElementById('particles');
+    'use strict';
-const particleCount = 25; // Reduced for better performance
     
-function createParticle() {
+    // ==================== DOM ELEMENTS ====================
-  const particle = document.createElement('div');
+    const elements = {
-  particle.className = 'particle';
+        logo: null,
+        authBtn: null,
+        playBtn: null,
+        leaderboardBtn: null,
+        heroTitle: null,
+        heroSubtitle: null,
+        logoutOverlay: null,
+        logoutFailedOverlay: null
+    };
     
-  // Random position
+    // ==================== INITIALIZE ====================
-  particle.style.left = Math.random() * 100 + '%';
+    function init() {
-  particle.style.top = Math.random() * 100 + '%';
+        if (document.readyState === 'loading') {
-  
+            document.addEventListener('DOMContentLoaded', initAll);
-  // Random animation duration
+        } else {
-  const duration = 20 + Math.random() * 20;
+            initAll();
-  particle.style.animationDuration = duration + 's';
-  
-  // Random delay
-  particle.style.animationDelay = Math.random() * 10 + 's';
-  
-  // Random size variation (smaller)
-  const size = 3 + Math.random() * 3;
-  particle.style.width = size + 'px';
-  particle.style.height = size + 'px';
-  
-  // Random colors (neon theme)
-  const colors = [
-    'radial-gradient(circle, #00ffff, #0099ff)',
-    'radial-gradient(circle, #ff00ff, #cc00ff)',
-    'radial-gradient(circle, #00ff99, #00cc77)'
-  ];
-  particle.style.background = colors[Math.floor(Math.random() * colors.length)];
-  
-  // Add floating animation
-  particle.style.animation = `floatParticle ${duration}s ease-in-out infinite`;
-  
-  particlesContainer.appendChild(particle);
-}
-
-// Create particles
-for (let i = 0; i < particleCount; i++) {
-  createParticle();
-}
-
-// Add CSS animation dynamically
-const style = document.createElement('style');
-style.textContent = `
-  @keyframes floatParticle {
-    0%, 100% {
-      transform: translate(0, 0) scale(1);
-      opacity: 0.3;
-    }
-    25% {
-      transform: translate(15px, -25px) scale(1.1);
-      opacity: 0.6;
-    }
-    50% {
-      transform: translate(-10px, -50px) scale(0.9);
-      opacity: 0.4;
-    }
-    75% {
-      transform: translate(20px, -35px) scale(1.05);
-      opacity: 0.5;
         }
     }
-`;
+    
-document.head.appendChild(style);
+    function initAll() {
+        try {
+            // Cache DOM elements
+            cacheElements();
+            
+            // Validate elements
+            if (!validateElements()) {
+                console.error('Some required elements are missing');
+                return;
+            }
+            
+            // Setup event listeners
+            setupEventListeners();
+            
+            // Initialize smooth scroll
+            initSmoothScroll();
+            
+            // Check login status and update button
+            updateAuthButton();
+            
+            console.log('✅ Homepage initialized successfully');
+        } catch (error) {
+            console.error('Error initializing homepage:', error);
+        }
+    }
+    
+    // ==================== CACHE ELEMENTS ====================
+    function cacheElements() {
+        elements.logo = document.querySelector('.logo');
+        elements.authBtn = document.getElementById('auth-button');
+        elements.playBtn = document.querySelector('a[href="2048.html"]');
+        elements.leaderboardBtn = document.querySelector('a[href="leaderboard.html"]');
+        elements.heroTitle = document.querySelector('.hero-title');
+        elements.heroSubtitle = document.querySelector('.hero-subtitle');
+        elements.logoutOverlay = document.getElementById('logout-overlay');
+        elements.logoutFailedOverlay = document.getElementById('logout-failed-overlay');
+    }
+    
+    // ==================== VALIDATE ELEMENTS ====================
+    function validateElements() {
+        const requiredElements = ['logo', 'authBtn', 'playBtn'];
+        const missingElements = requiredElements.filter(key => !elements[key]);
+        
+        if (missingElements.length > 0) {
+            console.warn('Missing elements:', missingElements);
+            return false;
+        }
+        
+        return true;
+    }
+    
+    // ==================== UPDATE AUTH BUTTON ====================
+    function updateAuthButton() {
+        // Cek dari localStorage (authToken & username) atau sessionStorage
+        const authToken = localStorage.getItem('authToken');
+        const username = localStorage.getItem('username');
+        const loggedInUser = sessionStorage.getItem('loggedInUser');
+        
+        if (authToken || username || loggedInUser) {
+            // User is logged in - show LOGOUT button
+            elements.authBtn.textContent = 'LOGOUT';
+            elements.authBtn.classList.add('logout-mode');
+        } else {
+            // User is not logged in - show LOGIN button
+            elements.authBtn.textContent = 'LOGIN';
+            elements.authBtn.classList.remove('logout-mode');
+        }
+    }
+    
+    // ==================== EVENT LISTENERS ====================
+    function setupEventListeners() {
+        // Logo click - reload page
+        if (elements.logo) {
+            elements.logo.addEventListener('click', handleLogoClick);
+        }
+        
+        // Auth button (Login/Logout)
+        if (elements.authBtn) {
+            elements.authBtn.addEventListener('click', handleAuthClick);
+        }
+        
+        // Play button
+        if (elements.playBtn) {
+            elements.playBtn.addEventListener('click', handlePlayClick);
+        }
+        
+        // Leaderboard button
+        if (elements.leaderboardBtn) {
+            elements.leaderboardBtn.addEventListener('click', handleLeaderboardClick);
+        }
+        
+        // Keyboard shortcuts
+        document.addEventListener('keydown', handleKeyPress);
+        
+        // Window events
+        window.addEventListener('resize', handleResize);
+        window.addEventListener('beforeunload', handleBeforeUnload);
+    }
+    
+    // ==================== EVENT HANDLERS ====================
+    function handleLogoClick(e) {
+        e.preventDefault();
+        window.location.href = 'Homepage.html';
+    }
+    
+    function handleAuthClick(e) {
+        // Cek dari localStorage atau sessionStorage
+        const authToken = localStorage.getItem('authToken');
+        const username = localStorage.getItem('username');
+        const loggedInUser = sessionStorage.getItem('loggedInUser');
+        
+        if (authToken || username || loggedInUser) {
+            // User is logged in - perform logout
+            handleLogout();
+        } else {
+            // User is not logged in - go to login page
+            window.location.href = 'Login.html';
+        }
+    }
+    
+    async function handleLogout() {
+        try {
+            // Panggil PHP untuk hapus session
+            const response = await fetch("http://localhost/Kelompok06_2048/Logout.php", {
+                method: "POST"
+            });
+            
+            const data = await response.json();
+            
+            // Hapus token & username dari localStorage
+            localStorage.removeItem("authToken");
+            localStorage.removeItem("username");
+            
+            // Hapus juga dari sessionStorage (jika ada)
+            sessionStorage.removeItem('loggedInUser');
+            sessionStorage.removeItem('showTutorial');
+            
+            // Show success modal
+            if (elements.logoutOverlay) {
+                elements.logoutOverlay.style.display = 'flex';
+                
+                // Auto close after 2 seconds and redirect to homepage
+                setTimeout(() => {
+                    elements.logoutOverlay.style.display = 'none';
+                    window.location.href = "Homepage.html";
+                }, 2000);
+            }
+        } catch (error) {
+            console.error('Logout failed:', error);
+            
+            // Tetap hapus data lokal meski server error
+            localStorage.removeItem("authToken");
+            localStorage.removeItem("username");
+            sessionStorage.removeItem('loggedInUser');
+            sessionStorage.removeItem('showTutorial');
+            
+            // Show error modal
+            if (elements.logoutFailedOverlay) {
+                elements.logoutFailedOverlay.style.display = 'flex';
+                
+                // Auto close after 2.5 seconds and redirect anyway
+                setTimeout(() => {
+                    elements.logoutFailedOverlay.style.display = 'none';
+                    window.location.href = "Homepage.html";
+                }, 2500);
+            }
+        }
+    }
+    
+    function handlePlayClick(e) {
+        // Allow default behavior (navigate to 2048.html)
+        console.log('Starting game...');
+    }
+    
+    function handleLeaderboardClick(e) {
+        // Allow default behavior (navigate to leaderboard.html)
+        console.log('Opening leaderboard...');
+    }
+    
+    function handleKeyPress(e) {
+        // Press 'P' to play
+        if (e.key === 'p' || e.key === 'P') {
+            if (elements.playBtn) {
+                elements.playBtn.click();
+            }
+        }
+        
+        // Press 'L' for login/logout
+        if (e.key === 'l' || e.key === 'L') {
+            if (elements.authBtn) {
+                elements.authBtn.click();
+            }
+        }
+        
+        // Press 'B' for leaderboard
+        if (e.key === 'b' || e.key === 'B') {
+            if (elements.leaderboardBtn) {
+                elements.leaderboardBtn.click();
+            }
+        }
+    }
+    
+    function handleResize() {
+        // Handle responsive behavior if needed
+        const width = window.innerWidth;
+        
+        if (width < 768) {
+            console.log('Mobile view');
+        } else if (width < 1024) {
+            console.log('Tablet view');
+        } else {
+            console.log('Desktop view');
+        }
+    }
+    
+    function handleBeforeUnload(e) {
+        // Cleanup before page unload
+        console.log('Page unloading...');
+    }
+    
+    // ==================== SMOOTH SCROLL ====================
+    function initSmoothScroll() {
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                const href = this.getAttribute('href');
+                if (href === '#' || !href) return;
+                
+                e.preventDefault();
+                const target = document.querySelector(href);
+                
+                if (target) {
+                    target.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            });
+        });
+    }
+    
+    // ==================== UTILITY FUNCTIONS ====================
+    function checkBrowserSupport() {
+        const features = {
+            localStorage: typeof(Storage) !== 'undefined',
+            flexbox: CSS.supports('display', 'flex'),
+            grid: CSS.supports('display', 'grid')
+        };
+        
+        console.log('Browser support:', features);
+        return features;
+    }
+    
+    function isMobile() {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+    }
+    
+    // ==================== PUBLIC API ====================
+    window.Homepage = {
+        init: initAll,
+        isMobile: isMobile,
+        checkSupport: checkBrowserSupport,
+        updateAuthButton: updateAuthButton
+    };
+    
+    // ==================== CLEANUP ====================
+    window.cleanupHomepage = function() {
+        // Remove event listeners
+        if (elements.logo) {
+            elements.logo.removeEventListener('click', handleLogoClick);
+        }
+        
+        if (elements.authBtn) {
+            elements.authBtn.removeEventListener('click', handleAuthClick);
+        }
+        
+        if (elements.playBtn) {
+            elements.playBtn.removeEventListener('click', handlePlayClick);
+        }
+        
+        if (elements.leaderboardBtn) {
+            elements.leaderboardBtn.removeEventListener('click', handleLeaderboardClick);
+        }
+        
+        document.removeEventListener('keydown', handleKeyPress);
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('beforeunload', handleBeforeUnload);
+        
+        console.log('Homepage cleaned up');
+    };
+    
+    // Start initialization
+    init();
+    
+})();

Audio_2048.js

@@ -111,17 +111,40 @@ function initVolumeControl() {
 function setupVolumePanelEvents() {
     const btnSoundMain = document.getElementById('btn-sound-main');
     const volumePanel = document.getElementById('volume-panel');
+    const volumeBackdrop = document.getElementById('volume-backdrop');
     
     if (btnSoundMain && volumePanel) {
       btnSoundMain.addEventListener('click', (e) => {
         e.stopPropagation();
-        const isVisible = volumePanel.style.display === 'block';
+        const isActive = volumePanel.classList.contains('active');
-        volumePanel.style.display = isVisible ? 'none' : 'block';
+        
+        if (isActive) {
+          volumePanel.classList.remove('active');
+        if (volumeBackdrop) volumeBackdrop.classList.remove('active');
+          inputLocked = false; // 🔓 buka panel -> input kembali
+        } else {
+          volumePanel.classList.add('active');
+          if (volumeBackdrop) volumeBackdrop.classList.add('active');
+          inputLocked = true;  // 🔒 panel sound aktif -> swipe & keyboard mati
+        }
       });
       
+      // Close when clicking backdrop
+      volumeBackdrop.addEventListener('click', () => {
+        volumePanel.classList.remove('active');
+        volumeBackdrop.classList.remove('active');
+        inputLocked = false; // 🔓 unlock
+        });
+
+      
+      // Close when clicking outside (desktop)
       document.addEventListener('click', (e) => {
-        if (!volumePanel.contains(e.target) && !btnSoundMain.contains(e.target)) {
+        if (!volumePanel.contains(e.target) && 
-          volumePanel.style.display = 'none';
+            !btnSoundMain.contains(e.target) &&
+            (!volumeBackdrop || !volumeBackdrop.contains(e.target))) {
+          volumePanel.classList.remove('active');
+          if (volumeBackdrop) volumeBackdrop.classList.remove('active');
+          inputLocked = false; // 🔓 unlock input
         }
       });
       

Homepage.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@400;700;900&family=Rajdhani:wght@500;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@400;700;900&display=swap');
 
 * {
   margin: 0;
@@ -13,8 +13,6 @@ body {
   overflow-x: hidden;
   min-height: 100vh;
   position: relative;
-  display: flex;
-  flex-direction: column;
 }
 
 /* Animated Background Grid */
@@ -26,10 +24,10 @@ body::before {
   width: 100%;
   height: 100%;
   background-image: 
-    linear-gradient(rgba(0, 234, 255, 0.04) 2px, transparent 2px),
+    linear-gradient(rgba(0, 234, 255, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255, 0, 255, 0.04) 2px, transparent 2px);
+    linear-gradient(90deg, rgba(255, 0, 255, 0.03) 1px, transparent 1px);
-  background-size: 60px 60px;
+  background-size: 50px 50px;
-  animation: gridMove 25s linear infinite;
+  animation: gridMove 20s linear infinite;
   z-index: 1;
   pointer-events: none;
 }
@@ -39,77 +37,7 @@ body::before {
     transform: translate(0, 0);
   }
   100% {
-    transform: translate(60px, 60px);
+    transform: translate(50px, 50px);
-  }
-}
-
-/* Floating Orbs */
-.orb {
-  position: fixed;
-  border-radius: 50%;
-  filter: blur(80px);
-  opacity: 0.3;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.orb-1 {
-  width: 400px;
-  height: 400px;
-  background: radial-gradient(circle, #00eaff, transparent);
-  top: 10%;
-  left: 5%;
-  animation: float1 15s ease-in-out infinite;
-}
-
-.orb-2 {
-  width: 500px;
-  height: 500px;
-  background: radial-gradient(circle, #ff00ff, transparent);
-  top: 50%;
-  right: 10%;
-  animation: float2 18s ease-in-out infinite;
-}
-
-.orb-3 {
-  width: 350px;
-  height: 350px;
-  background: radial-gradient(circle, #ffd700, transparent);
-  bottom: 10%;
-  left: 50%;
-  animation: float3 20s ease-in-out infinite;
-}
-
-@keyframes float1 {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  33% {
-    transform: translate(50px, -80px) scale(1.1);
-  }
-  66% {
-    transform: translate(-30px, 50px) scale(0.9);
-  }
-}
-
-@keyframes float2 {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  33% {
-    transform: translate(-60px, 70px) scale(1.15);
-  }
-  66% {
-    transform: translate(40px, -40px) scale(0.95);
-  }
-}
-
-@keyframes float3 {
-  0%, 100% {
-    transform: translate(0, 0) scale(1);
-  }
-  50% {
-    transform: translate(80px, -60px) scale(1.2);
   }
 }
 
@@ -126,31 +54,23 @@ body::before {
 
 .particle {
   position: absolute;
-  width: 8px;
+  width: 6px;
-  height: 8px;
+  height: 6px;
   border-radius: 50%;
   background: radial-gradient(circle, #00ffff, #0099ff);
-  box-shadow: 0 0 20px #00eaff, 0 0 40px #0088ff;
+  box-shadow: 0 0 15px #00eaff, 0 0 30px #0088ff;
   pointer-events: none;
-  animation: particleFloat 10s ease-in-out infinite;
+  animation: particleFloat 8s ease-in-out infinite;
 }
 
 @keyframes particleFloat {
   0%, 100% {
-    transform: translateY(0) translateX(0) scale(1) rotate(0deg);
+    transform: translateY(0) translateX(0) scale(1);
-    opacity: 0.7;
-  }
-  25% {
-    transform: translateY(-40px) translateX(20px) scale(1.3) rotate(90deg);
-    opacity: 1;
-  }
-  50% {
-    transform: translateY(-20px) translateX(-15px) scale(0.9) rotate(180deg);
     opacity: 0.8;
   }
-  75% {
+  50% {
-    transform: translateY(10px) translateX(30px) scale(1.1) rotate(270deg);
+    transform: translateY(-30px) translateX(15px) scale(1.2);
-    opacity: 0.9;
+    opacity: 1;
   }
 }
 
@@ -162,14 +82,14 @@ header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: rgba(20, 0, 40, 0.75);
+  background: rgba(20, 0, 40, 0.7);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(15px);
-  border-bottom: 3px solid rgba(0, 234, 255, 0.5);
+  border-bottom: 3px solid rgba(0, 234, 255, 0.4);
-  box-shadow: 0 4px 40px rgba(0, 234, 255, 0.25);
+  box-shadow: 0 4px 30px rgba(0, 234, 255, 0.2);
 }
 
 .logo {
-  font-size: 42px;
+  font-size: 36px;
   font-weight: 900;
   font-family: 'Orbitron', sans-serif;
   background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
@@ -177,16 +97,10 @@ header {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  letter-spacing: 6px;
+  letter-spacing: 5px;
   text-transform: uppercase;
   animation: gradientShift 4s ease infinite;
-  filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7));
+  filter: drop-shadow(0 0 20px rgba(0, 234, 255, 0.6));
-  cursor: pointer;
-  transition: transform 0.3s ease;
-}
-
-.logo:hover {
-  transform: scale(1.05);
 }
 
 @keyframes gradientShift {
@@ -224,28 +138,28 @@ header {
   width: 0;
   height: 0;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.25);
+  background: rgba(255, 255, 255, 0.2);
   transform: translate(-50%, -50%);
   transition: width 0.6s, height 0.6s;
 }
 
 .btn:hover::before {
-  width: 350px;
+  width: 300px;
-  height: 350px;
+  height: 300px;
 }
 
 .btn-primary {
   background: linear-gradient(135deg, #00eaff, #ff00ff);
   color: #fff;
   font-weight: 900;
-  box-shadow: 0 6px 35px rgba(0, 217, 255, 0.6);
+  box-shadow: 0 6px 30px rgba(0, 217, 255, 0.5);
   position: relative;
   z-index: 1;
 }
 
 .btn-primary:hover {
-  box-shadow: 0 12px 50px rgba(0, 217, 255, 0.9), 0 0 35px rgba(255, 0, 255, 0.7);
+  box-shadow: 0 10px 45px rgba(0, 217, 255, 0.8), 0 0 30px rgba(255, 0, 255, 0.6);
-  transform: translateY(-4px) scale(1.08);
+  transform: translateY(-4px) scale(1.05);
 }
 
 /* Hero Section */
@@ -253,42 +167,29 @@ header {
   position: relative;
   z-index: 10;
   text-align: center;
-  padding: 80px 20px 60px;
+  padding: 140px 20px 120px;
-  max-width: 1200px;
+  max-width: 1100px;
   margin: 0 auto;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-}
-
-/* Title Wrapper with Rings */
-.title-wrapper {
-  position: relative;
-  display: inline-block;
-  margin-bottom: 35px;
 }
 
 .hero-title {
-  font-size: 160px;
+  font-size: 140px;
   font-weight: 900;
+  margin-bottom: 25px;
   font-family: 'Orbitron', sans-serif;
   background: linear-gradient(135deg, #00d9ff 0%, #ff00ff 50%, #00d9ff 100%);
   background-size: 200% 200%;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  letter-spacing: 20px;
+  letter-spacing: 18px;
   text-transform: uppercase;
   animation: titleAnimation 6s ease-in-out infinite, titleGlow 3s ease-in-out infinite alternate;
-  line-height: 1;
+  line-height: 1.1;
   position: relative;
-  z-index: 2;
 }
 
-.hero-title::before {
+.hero-title::after {
   content: '2048';
   position: absolute;
   top: 0;
@@ -298,66 +199,12 @@ header {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
-  filter: blur(30px);
+  filter: blur(20px);
-  opacity: 0.6;
+  opacity: 0.5;
   z-index: -1;
   animation: titleBlur 3s ease-in-out infinite alternate;
 }
 
-/* Rings Around Title */
-.title-rings {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.ring {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  border-radius: 50%;
-  border: 2px solid;
-  transform: translate(-50%, -50%);
-  opacity: 0.3;
-}
-
-.ring-1 {
-  width: 120%;
-  height: 120%;
-  border-color: #00eaff;
-  animation: ringPulse 4s ease-in-out infinite;
-}
-
-.ring-2 {
-  width: 140%;
-  height: 140%;
-  border-color: #ff00ff;
-  animation: ringPulse 4s ease-in-out infinite 0.5s;
-}
-
-.ring-3 {
-  width: 160%;
-  height: 160%;
-  border-color: #ffd700;
-  animation: ringPulse 4s ease-in-out infinite 1s;
-}
-
-@keyframes ringPulse {
-  0%, 100% {
-    transform: translate(-50%, -50%) scale(1);
-    opacity: 0.3;
-  }
-  50% {
-    transform: translate(-50%, -50%) scale(1.1);
-    opacity: 0.6;
-  }
-}
-
 @keyframes titleAnimation {
   0%, 100% {
     background-position: 0% 50%;
@@ -365,86 +212,64 @@ header {
   }
   50% {
     background-position: 100% 50%;
-    transform: scale(1.03);
+    transform: scale(1.02);
   }
 }
 
 @keyframes titleGlow {
   0% {
-    filter: drop-shadow(0 0 30px rgba(0, 234, 255, 0.8)) 
+    filter: drop-shadow(0 0 25px rgba(0, 234, 255, 0.7)) 
-            drop-shadow(0 0 60px rgba(0, 234, 255, 0.6));
+            drop-shadow(0 0 50px rgba(0, 234, 255, 0.5));
   }
   100% {
-    filter: drop-shadow(0 0 45px rgba(255, 0, 255, 1)) 
+    filter: drop-shadow(0 0 40px rgba(255, 0, 255, 0.9)) 
-            drop-shadow(0 0 90px rgba(255, 0, 255, 0.7));
+            drop-shadow(0 0 80px rgba(255, 0, 255, 0.6));
   }
 }
 
 @keyframes titleBlur {
   0% {
-    opacity: 0.4;
+    opacity: 0.3;
   }
   100% { 
-    opacity: 0.8;
+    opacity: 0.7;
   }
 }
 
-/* Subtitle with Word Animation */
 .hero-subtitle {
-  font-size: 28px;
+  font-size: 24px;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 255, 255, 0.8);
-  margin-bottom: 60px;
+  margin-bottom: 55px;
-  font-weight: 500;
+  font-weight: 400;
-  letter-spacing: 7px;
+  letter-spacing: 6px;
   text-transform: uppercase;
-  font-family: 'Rajdhani', sans-serif;
+  font-family: 'Exo 2', sans-serif;
-  display: flex;
+  animation: subtitleFade 2s ease-in-out infinite alternate;
-  gap: 12px;
-  justify-content: center;
-  flex-wrap: wrap;
 }
 
-.subtitle-word {
+@keyframes subtitleFade {
-  display: inline-block;
+  0% {
-  animation: wordFloat 3s ease-in-out infinite;
+    opacity: 0.7;
-}
-
-.subtitle-word:nth-child(1) { animation-delay: 0s; }
-.subtitle-word:nth-child(2) { animation-delay: 0.2s; }
-.subtitle-word:nth-child(3) { animation-delay: 0.4s; }
-.subtitle-word:nth-child(4) { animation-delay: 0.6s; }
-.subtitle-word:nth-child(5) { 
-  animation-delay: 0.8s;
-  background: linear-gradient(135deg, #ffd700, #ffaa00);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  font-weight: 700;
-}
-
-@keyframes wordFloat {
-  0%, 100% {
     transform: translateY(0);
   }
-  50% {
+  100% {
-    transform: translateY(-8px);
+    opacity: 1;
+    transform: translateY(-3px);
   }
 }
 
-/* CTA Buttons */
 .cta-buttons {
   display: flex;
-  gap: 30px;
+  gap: 25px;
   justify-content: center;
   flex-wrap: wrap;
-  animation: buttonsSlideUp 1.2s ease-out;
+  animation: buttonsSlideUp 1s ease-out;
-  margin-bottom: 80px;
 }
 
 @keyframes buttonsSlideUp {
   from {
     opacity: 0;
-    transform: translateY(40px);
+    transform: translateY(30px);
   }
   to {
     opacity: 1;
@@ -453,9 +278,9 @@ header {
 }
 
 .btn-cta {
-  padding: 20px 50px;
+  padding: 18px 45px;
-  font-size: 20px;
+  font-size: 19px;
-  border-radius: 18px;
+  border-radius: 15px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 3px;
@@ -464,18 +289,6 @@ header {
   position: relative;
   overflow: hidden;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.btn-icon {
-  font-size: 24px;
-  transition: transform 0.3s ease;
-}
-
-.btn-cta:hover .btn-icon {
-  transform: scale(1.3) rotate(15deg);
 }
 
 .btn-cta::after {
@@ -485,9 +298,9 @@ header {
   left: -50%;
   width: 200%;
   height: 200%;
-  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.35), transparent);
+  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   transform: rotate(45deg);
-  animation: buttonShine 4s infinite;
+  animation: buttonShine 3s infinite;
 }
 
 @keyframes buttonShine {
@@ -501,100 +314,24 @@ header {
 
 .btn-play {
   background: linear-gradient(135deg, #ff00ff, #ff0066);
-  box-shadow: 0 8px 40px rgba(255, 0, 255, 0.7);
+  box-shadow: 0 6px 35px rgba(255, 0, 255, 0.6);
   color: #fff;
 }
 
 .btn-play:hover {
-  transform: translateY(-6px) scale(1.1);
+  transform: translateY(-5px) scale(1.08);
-  box-shadow: 0 15px 60px rgba(255, 0, 255, 1), 0 0 50px rgba(255, 0, 102, 0.8);
+  box-shadow: 0 12px 50px rgba(255, 0, 255, 0.9), 0 0 40px rgba(255, 0, 102, 0.7);
 }
 
 .btn-leaderboard {
   background: linear-gradient(135deg, #ffd700, #ffaa00);
   color: #0c001a;
-  box-shadow: 0 8px 40px rgba(255, 215, 0, 0.7);
+  box-shadow: 0 6px 35px rgba(255, 215, 0, 0.6);
 }
 
 .btn-leaderboard:hover {
-  transform: translateY(-6px) scale(1.1);
+  transform: translateY(-5px) scale(1.08);
-  box-shadow: 0 15px 60px rgba(255, 215, 0, 1), 0 0 50px rgba(255, 170, 0, 0.8);
+  box-shadow: 0 12px 50px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 170, 0, 0.7);
-}
-
-/* Stats Container */
-.stats-container {
-  display: flex;
-  gap: 40px;
-  justify-content: center;
-  flex-wrap: wrap;
-  animation: statsSlideUp 1.5s ease-out;
-}
-
-@keyframes statsSlideUp {
-  from {
-    opacity: 0;
-    transform: translateY(50px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.stat-card {
-  background: rgba(30, 0, 50, 0.6);
-  border: 2px solid rgba(0, 234, 255, 0.4);
-  border-radius: 20px;
-  padding: 25px 40px;
-  text-align: center;
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-  backdrop-filter: blur(15px);
-  min-width: 150px;
-  position: relative;
-  overflow: hidden;
-}
-
-.stat-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(0, 234, 255, 0.2), transparent);
-  transition: left 0.6s ease;
-}
-
-.stat-card:hover::before {
-  left: 100%;
-}
-
-.stat-card:hover {
-  transform: translateY(-10px) scale(1.05);
-  border-color: #00eaff;
-  box-shadow: 0 15px 45px rgba(0, 234, 255, 0.5);
-  background: rgba(30, 0, 50, 0.8);
-}
-
-.stat-number {
-  font-size: 48px;
-  font-weight: 900;
-  font-family: 'Orbitron', sans-serif;
-  background: linear-gradient(135deg, #00eaff, #ff00ff);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-  margin-bottom: 10px;
-  line-height: 1;
-}
-
-.stat-label {
-  font-size: 14px;
-  color: rgba(255, 255, 255, 0.7);
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  font-family: 'Rajdhani', sans-serif;
-  font-weight: 600;
 }
 
 /* Footer */
@@ -602,29 +339,69 @@ footer {
   position: relative;
   z-index: 10;
   text-align: center;
-  padding: 40px 20px;
+  padding: 50px 20px;
-  margin-top: auto;
+  margin-top: 150px;
-  background: rgba(20, 0, 40, 0.75);
+  background: rgba(20, 0, 40, 0.7);
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(15px);
-  border-top: 3px solid rgba(0, 234, 255, 0.5);
+  border-top: 3px solid rgba(0, 234, 255, 0.4);
-  box-shadow: 0 -4px 40px rgba(0, 234, 255, 0.25);
+  box-shadow: 0 -4px 30px rgba(0, 234, 255, 0.2);
 }
 
 footer p {
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.65);
   font-size: 15px;
   font-family: 'Exo 2', sans-serif;
-  letter-spacing: 2px;
+  letter-spacing: 1.5px;
 }
 
-/* Responsive */
+/* Floating Decoration Elements */
-@media (max-width: 1200px) {
+.hero::before {
-  .hero-title {
+  content: '';
-    font-size: 130px;
+  position: absolute;
-    letter-spacing: 16px;
+  top: 50%;
+  left: -100px;
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(0, 234, 255, 0.15), transparent);
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: floatLeft 8s ease-in-out infinite;
+  z-index: -1;
+}
+
+.hero::after {
+  content: '';
+  position: absolute;
+  top: 30%;
+  right: -100px;
+  width: 350px;
+  height: 350px;
+  background: radial-gradient(circle, rgba(255, 0, 255, 0.15), transparent);
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: floatRight 10s ease-in-out infinite;
+  z-index: -1;
+}
+
+@keyframes floatLeft {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(30px, -30px) scale(1.1);
   }
 }
 
+@keyframes floatRight {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(-30px, 30px) scale(1.1);
+  }
+}
+
+/* Responsive */
 @media (max-width: 1024px) {
   .hero-title {
     font-size: 110px;
@@ -632,146 +409,85 @@ footer p {
   }
   
   .hero-subtitle {
-    font-size: 24px;
+    font-size: 20px;
-    letter-spacing: 5px;
-  }
-
-  .stat-card {
-    min-width: 130px;
-    padding: 20px 30px;
-  }
-
-  .stat-number {
-    font-size: 40px;
   }
 }
 
 @media (max-width: 768px) {
   header {
-    padding: 20px 30px;
+    padding: 20px 25px;
-  }
+    flex-direction: column;
-
+    gap: 15px;
-  .logo {
-    font-size: 32px;
-    letter-spacing: 4px;
-  }
-
-  .hero {
-    padding: 60px 20px 40px;
-  }
-
-  .hero-title {
-    font-size: 85px;
-    letter-spacing: 10px;
-  }
-
-  .hero-subtitle {
-    font-size: 20px;
-    letter-spacing: 4px;
-    margin-bottom: 50px;
-  }
-
-  .btn-cta {
-    padding: 18px 40px;
-    font-size: 18px;
-  }
-
-  .stats-container {
-    gap: 25px;
-  }
-
-  .stat-card {
-    min-width: 120px;
-    padding: 18px 25px;
-  }
-
-  .stat-number {
-    font-size: 36px;
-  }
-}
-
-@media (max-width: 480px) {
-  header {
-    padding: 18px 20px;
   }
 
   .logo {
     font-size: 28px;
+    letter-spacing: 3px;
   }
 
   .hero {
-    padding: 50px 15px 35px;
+    padding: 100px 20px 80px;
   }
 
   .hero-title {
-    font-size: 64px;
+    font-size: 80px;
-    letter-spacing: 6px;
+    letter-spacing: 8px;
   }
 
   .hero-subtitle {
-    font-size: 16px;
+    font-size: 18px;
     letter-spacing: 3px;
-    margin-bottom: 40px;
-    gap: 8px;
   }
 
   .btn-cta {
-    padding: 16px 35px;
+    padding: 16px 38px;
     font-size: 17px;
+  }
+
+  footer {
+    margin-top: 100px;
+  }
+}
+
+@media (max-width: 480px) {
+  .hero {
+    padding: 70px 15px 60px;
+  }
+
+  .hero-title {
+    font-size: 60px;
+    letter-spacing: 5px;
+  }
+
+  .hero-subtitle {
+    font-size: 15px;
+    letter-spacing: 2px;
+    margin-bottom: 45px;
+  }
+
+  .btn-cta {
+    padding: 15px 32px;
+    font-size: 16px;
     letter-spacing: 2px;
   }
 
-  .btn-icon {
-    font-size: 20px;
-  }
-
   .cta-buttons {
-    gap: 20px;
+    gap: 18px;
-    margin-bottom: 60px;
-  }
-
-  .stats-container {
-    gap: 20px;
-  }
-
-  .stat-card {
-    min-width: 100px;
-    padding: 15px 20px;
-  }
-
-  .stat-number {
-    font-size: 32px;
-  }
-
-  .stat-label {
-    font-size: 12px;
   }
 }
 
 @media (max-width: 360px) {
   .hero-title {
-    font-size: 52px;
+    font-size: 48px;
-    letter-spacing: 5px;
+    letter-spacing: 4px;
   }
 
   .hero-subtitle {
     font-size: 14px;
-    letter-spacing: 2px;
   }
 
   .btn-cta {
-    padding: 14px 30px;
+    padding: 14px 28px;
-    font-size: 16px;
+    font-size: 15px;
-  }
-
-  .stat-number {
-    font-size: 28px;
-  }
-}
-
-/* Center All Content */
-@media (min-height: 800px) {
-  .hero {
-    min-height: calc(100vh - 250px);
   }
 }

Homepage.html

@@ -28,7 +28,44 @@
     </div>
   </section>
 
+  <!-- Footer -->
 
-  <script src="Animation_Homepage.js"></script>
+
+  <!-- Logout Confirmation Modal -->
+<div class="logout-overlay" id="logout-overlay" style="display: none">
+  <div class="logout-modal">
+    <div class="logout-icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+        <polyline points="16 17 21 12 16 7"/>
+        <line x1="21" y1="12" x2="9" y2="12"/>
+      </svg>
+    </div>
+    <h2 class="logout-title">Logout Confirmation</h2>
+    <p class="logout-message">Are you sure you want to logout?</p>
+    
+    <div class="logout-buttons">
+      <button class="btn-logout-cancel" id="btn-logout-cancel">Cancel</button>
+      <button class="btn-logout-confirm" id="btn-logout-confirm">Logout</button>
+    </div>
+  </div>
+</div>
+
+<!-- Logout Success Modal -->
+<div class="logout-success-overlay" id="logout-success-overlay" style="display: none">
+  <div class="logout-success-modal">
+    <div class="success-icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
+        <polyline points="20 6 9 17 4 12"/>
+      </svg>
+    </div>
+    <h2 class="success-title">Logout Successful!</h2>
+    <p class="success-message">You have been logged out successfully</p>
+  </div>
+</div>
+
+<script src="Animation_Homepage.js"></script>
+<script src="logout.js"></script>
+<script src="Homepage.js"></script>
 </body>
 </html>

Logout.js

@@ -1,12 +1,136 @@
-async function logout() {
+// ==========================
-    // Panggil PHP untuk hapus session (opsional)
+// LOGOUT SYSTEM WITH PHP INTEGRATION
-    await fetch("http://localhost/Kelompok06_2048/Logout.php", {
+// ==========================
-        method: "POST"
+
+document.addEventListener("DOMContentLoaded", () => {
+    checkLoginStatus();
+    setupLogoutListeners();
+});
+
+// Cek status login dan update button
+function checkLoginStatus() {
+    const loggedInUser = sessionStorage.getItem("loggedInUser");
+    const authToken = localStorage.getItem("authToken"); // Cek token juga
+    const loginBtn = document.querySelector('.login-btn, .logout-btn'); // Cari button
+    
+    if (!loginBtn) return;
+    
+    // Kalau ada user login ATAU ada authToken
+    if (loggedInUser || authToken) {
+        // User sudah login - ubah jadi logout button
+        loginBtn.textContent = 'Logout';
+        loginBtn.className = 'logout-btn'; // Set class langsung
+        loginBtn.onclick = showLogoutConfirmation;
+    } else {
+        // User belum login - tampilkan login button
+        loginBtn.textContent = 'Login';
+        loginBtn.className = 'login-btn'; // Set class langsung
+        loginBtn.onclick = () => window.location.href = 'Login.html';
+    }
+}
+
+// Setup event listeners untuk logout modals
+function setupLogoutListeners() {
+    const btnLogoutCancel = document.getElementById('btn-logout-cancel');
+    const btnLogoutConfirm = document.getElementById('btn-logout-confirm');
+    const logoutOverlay = document.getElementById('logout-overlay');
+    
+    if (btnLogoutCancel) {
+        btnLogoutCancel.addEventListener('click', hideLogoutConfirmation);
+    }
+    
+    if (btnLogoutConfirm) {
+        btnLogoutConfirm.addEventListener('click', performLogout);
+    }
+    
+    // Close modal ketika klik di luar
+    if (logoutOverlay) {
+        logoutOverlay.addEventListener('click', (e) => {
+            if (e.target === logoutOverlay) {
+                hideLogoutConfirmation();
+            }
+        });
+    }
+}
+
+// Tampilkan konfirmasi logout
+function showLogoutConfirmation() {
+    const overlay = document.getElementById('logout-overlay');
+    if (overlay) {
+        overlay.style.display = 'flex';
+    }
+}
+
+// Sembunyikan konfirmasi logout
+function hideLogoutConfirmation() {
+    const overlay = document.getElementById('logout-overlay');
+    if (overlay) {
+        overlay.style.display = 'none';
+    }
+}
+
+// Perform logout dengan integrasi PHP
+async function performLogout() {
+    try {
+        // Panggil PHP untuk hapus session
+        const response = await fetch("http://localhost/Kelompok06_2048/Logout.php", {
+            method: "POST",
+            headers: {
+                'Content-Type': 'application/json'
+            }
         });
 
-    // Hapus token & username dari localStorage
+        const result = await response.json();
+        
+        // Hapus data dari localStorage & sessionStorage
         localStorage.removeItem("authToken");
         localStorage.removeItem("username");
+        sessionStorage.removeItem("loggedInUser");
+        sessionStorage.removeItem("showTutorial");
         
+        // Sembunyikan confirmation modal
+        hideLogoutConfirmation();
+        
+        // Tampilkan success modal
+        showLogoutSuccess();
+        
+        // Setelah 2 detik, reload/redirect ke homepage
+        setTimeout(() => {
             window.location.href = "Homepage.html";
+        }, 2000);
+        
+    } catch (error) {
+        console.error("Logout error:", error);
+        
+        // Kalau gagal koneksi ke PHP, tetap logout dari client side
+        localStorage.removeItem("authToken");
+        localStorage.removeItem("username");
+        sessionStorage.removeItem("loggedInUser");
+        sessionStorage.removeItem("showTutorial");
+        
+        // Tampilkan error modal (opsional)
+        showLogoutError();
+        
+        // Tetap redirect setelah 2 detik
+        setTimeout(() => {
+            window.location.href = "Homepage.html";
+        }, 2000);
+    }
+}
+
+// Tampilkan logout success
+function showLogoutSuccess() {
+    const overlay = document.getElementById('logout-success-overlay');
+    if (overlay) {
+        overlay.style.display = 'flex';
+    }
+}
+
+// Tampilkan logout error (OPSIONAL - tambahkan modal error jika mau)
+function showLogoutError() {
+    // Bisa pakai alert sederhana atau buat modal error sendiri
+    console.log("Logout gagal terhubung ke server, tapi data lokal sudah dihapus");
+    
+    // Atau tetap tampilkan success (karena client-side logout berhasil)
+    showLogoutSuccess();
 }