feat: retheme to professional Deep Eco-Green and add cinematic scrolling waste accumulation story

frontend/app.js

@@ -1054,4 +1054,85 @@ window.sortWaste = sortWaste;
 // Initialize the game automatically
 document.addEventListener("DOMContentLoaded", () => {
     loadNextWasteItem();
+    initCrisisStoryScroller();
 });
+
+// ==========================================
+// CINEMATIC CRISIS STORYTELLING SCROLLER
+// ==========================================
+function initCrisisStoryScroller() {
+    const storyCards = document.querySelectorAll(".story-card");
+    const wasteFill = document.getElementById("waste-pile-fill");
+    const tonsVal = document.getElementById("simulated-tons-val");
+    
+    if (!storyCards.length || !wasteFill || !tonsVal) return;
+
+    // Use IntersectionObserver to detect which card is currently active/visible in the center of screen
+    const observerOptions = {
+        root: null,
+        rootMargin: "-25% 0px -40% 0px", // Focus on the middle of the screen
+        threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                // Highlight active card
+                storyCards.forEach(c => {
+                    c.style.borderColor = "var(--border-color)";
+                    c.style.background = "rgba(8,18,14,0.6)";
+                    c.style.boxShadow = "none";
+                });
+                entry.target.style.borderColor = "var(--cyan)";
+                entry.target.style.background = "rgba(16, 185, 129, 0.08)";
+                entry.target.style.boxShadow = "0 0 15px rgba(16, 185, 129, 0.1)";
+                
+                // Get parameters
+                const targetHeight = entry.target.getAttribute("data-height");
+                const targetTons = entry.target.getAttribute("data-tons");
+                
+                // Set fill height and text counter
+                wasteFill.style.height = `${targetHeight}%`;
+                
+                // If it is the last critical card, change color to red
+                if (targetHeight === "95") {
+                    wasteFill.style.background = "linear-gradient(180deg, var(--red) 0%, #7f1d1d 100%)";
+                    wasteFill.style.boxShadow = "0 0 20px rgba(239, 68, 68, 0.4)";
+                } else {
+                    wasteFill.style.background = "linear-gradient(180deg, var(--yellow) 0%, #78350F 100%)";
+                    wasteFill.style.boxShadow = "0 0 20px rgba(245, 158, 11, 0.3)";
+                }
+                
+                // Animate tons text value counter
+                animateTonsCounter(parseInt(tonsVal.textContent.replace(/,/g, "")), parseInt(targetTons));
+            }
+        });
+    }, observerOptions);
+
+    storyCards.forEach(card => observer.observe(card));
+}
+
+function animateTonsCounter(start, end) {
+    const tonsVal = document.getElementById("simulated-tons-val");
+    if (!tonsVal) return;
+    
+    const duration = 800; // ms
+    const startTime = performance.now();
+    
+    function update(now) {
+        const elapsed = now - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        
+        // Ease out quadratic
+        const easeProgress = progress * (2 - progress);
+        const current = Math.round(start + (end - start) * easeProgress);
+        
+        tonsVal.textContent = `${current.toLocaleString('en-US')} Tons`;
+        
+        if (progress < 1) {
+            requestAnimationFrame(update);
+        }
+    }
+    
+    requestAnimationFrame(update);
+}

frontend/index.html

@@ -196,6 +196,61 @@
             </div>
         </section>
 
+        <!-- Cinematic Waste Crisis Scroll Section -->
+        <section class="container crisis-story-section" style="margin-top: 4rem; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; position: relative;">
+            
+            <!-- Sticky Left Panel (Waste Tower Visualizer) -->
+            <div class="sticky-visualizer-panel" style="position: sticky; top: 120px; height: 450px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(5, 12, 10, 0.4); border: 1px solid var(--border-color); border-radius: 16px; padding: 2rem; overflow: hidden; box-shadow: 0 0 30px rgba(16, 185, 129, 0.05);">
+                <h3 style="font-family: var(--font-display); font-size: 1.1rem; color: #FFF; margin-bottom: 1.5rem; letter-spacing: 1px; text-transform: uppercase;">JAKARTA DAILY ACCUMULATION TOWER</h3>
+                
+                <!-- The Wireframe Tower -->
+                <div class="waste-tower-outline" style="position: relative; width: 140px; height: 260px; border: 2px dashed rgba(16, 185, 129, 0.3); border-radius: 12px 12px 0 0; background: rgba(255,255,255,0.01); overflow: hidden; display: flex; align-items: flex-end;">
+                    <!-- Raising Waste Fill -->
+                    <div id="waste-pile-fill" style="width: 100%; height: 10%; background: linear-gradient(180deg, var(--yellow) 0%, #78350F 100%); opacity: 0.85; transition: height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);">
+                        <!-- Bubbles/Particles inside fill -->
+                        <div class="waste-steam" style="position: absolute; top: -10px; left: 0; width: 100%; height: 12px; background: rgba(245, 158, 11, 0.6); filter: blur(4px); animation: steam-pulse 1.5s infinite alternate; pointer-events: none;"></div>
+                    </div>
+                    
+                    <!-- Height Markers -->
+                    <div style="position: absolute; right: 10px; top: 10px; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.3); pointer-events: none;">CRITICAL</div>
+                    <div style="position: absolute; right: 10px; top: 120px; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.3); pointer-events: none;">WARNING</div>
+                    <div style="position: absolute; right: 10px; top: 230px; font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.3); pointer-events: none;">NORMAL</div>
+                </div>
+                
+                <!-- Live Ticking Indicator -->
+                <div class="tower-status" style="margin-top: 1.5rem; text-align: center;">
+                    <div style="font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase;">Simulated Tonnage</div>
+                    <div style="font-family: var(--font-mono); font-size: 1.8rem; color: var(--yellow); font-weight: bold; text-shadow: 0 0 10px rgba(245,158,11,0.2);" id="simulated-tons-val">905 Tons</div>
+                </div>
+            </div>
+
+            <!-- Scrolling Narrative Cards -->
+            <div class="story-scroll-cards" style="display: flex; flex-direction: column; gap: 6rem; padding-bottom: 8rem;">
+                
+                <!-- Card 1 -->
+                <div class="story-card panel" data-height="25" data-tons="2264" style="padding: 2.2rem; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; background: rgba(8,18,14,0.6); border:1px solid var(--border-color); border-radius:12px;">
+                    <span style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block;">STAGE 01: MORNING LOADS (09:00 AM)</span>
+                    <h3 style="font-family: var(--font-display); font-size: 1.3rem; color: #FFF; margin-bottom: 0.8rem;">2.264 TON SAMPAH TERKUMPUL</h3>
+                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">Memasuki jam kerja awal, tumpukan sampah dari pasar tradisional dan wilayah residensial se-DKI Jakarta mulai berdatangan di TPS. Kecepatan pengangkutan sangat krusial agar TPS lokal tidak mengalami kelumpuhan penumpukan.</p>
+                </div>
+
+                <!-- Card 2 -->
+                <div class="story-card panel" data-height="55" data-tons="4982" style="padding: 2.2rem; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; background: rgba(8,18,14,0.6); border:1px solid var(--border-color); border-radius:12px;">
+                    <span style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--green); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block;">STAGE 02: MID-DAY PEAK (03:00 PM)</span>
+                    <h3 style="font-family: var(--font-display); font-size: 1.3rem; color: #FFF; margin-bottom: 0.8rem;">4.982 TON SAMPAH TERKUMPUL</h3>
+                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">Di siang hari, aktivitas logistik pengiriman sampah ke TPST Bantargebang memuncak. Kepadatan lalu lintas jalan tol Jakarta-Bekasi dan antrean panjang truk di gerbang timbang Bantargebang mulai memicu bottleneck operasional pengangkutan.</p>
+                </div>
+
+                <!-- Card 3 -->
+                <div class="story-card panel" data-height="95" data-tons="9059" style="padding: 2.2rem; min-height: 250px; display: flex; flex-direction: column; justify-content: center; transition: all 0.3s; background: rgba(8,18,14,0.6); border:1px solid var(--border-color); border-radius:12px;">
+                    <span style="font-family: var(--font-mono); font-size: 0.75rem; color: var(--red); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.5rem; display: block;">STAGE 03: EOD OVERLOAD (11:59 PM)</span>
+                    <h3 style="font-family: var(--font-display); font-size: 1.3rem; color: #FFF; margin-bottom: 0.8rem;">9.059 TON SAMPAH HARIAN</h3>
+                    <p style="font-size: 0.9rem; color: var(--text-muted); line-height: 1.6;">Sebelum hari berakhir, total timbulan sampah DKI mencapai kapasitas maksimalnya. TPST Bantargebang yang kini melebihi daya tampung aman (ketinggian gunungan sampah di atas 50 meter) berada pada status siaga kritis. Di sinilah Aeterna AI memitigasi krisis tersebut dengan analisis logistik prediktif.</p>
+                </div>
+
+            </div>
+        </section>
+
         <!-- Sumber Data & Akuntabilitas -->
         <section class="container data-sources-section">
             <h2 class="section-title">TRANSPARANSI SUMBER DATA</h2>

frontend/style.css

@@ -1,22 +1,22 @@
 /* CSS Variables for Theming */
 :root {
-    --bg-void: #02040a;
-    --bg-panel: rgba(6, 10, 22, 0.75);
-    --border-color: rgba(0, 240, 255, 0.12);
-    --border-hover: rgba(0, 240, 255, 0.3);
+    --bg-void: #030806;
+    --bg-panel: rgba(8, 18, 14, 0.85);
+    --border-color: rgba(16, 185, 129, 0.15);
+    --border-hover: rgba(16, 185, 129, 0.4);
     
-    --text-main: #E1E3E8;
-    --text-muted: #8c93a3;
+    --text-main: #E2E8F0;
+    --text-muted: #94A3B8;
     
-    /* Neon Colors */
-    --cyan: #00F0FF;
-    --cyan-glow: rgba(0, 240, 255, 0.45);
-    --green: #39FF14;
-    --green-glow: rgba(57, 255, 20, 0.35);
-    --yellow: #FFE600;
-    --yellow-glow: rgba(255, 230, 0, 0.35);
-    --red: #FF0055;
-    --red-glow: rgba(255, 0, 85, 0.45);
+    /* Professional Eco-Urban Colors */
+    --cyan: #10B981; /* Eco Emerald Green (Primary) */
+    --cyan-glow: rgba(16, 185, 129, 0.4);
+    --green: #34D399; /* Bright Mint Green */
+    --green-glow: rgba(52, 211, 153, 0.3);
+    --yellow: #F59E0B; /* Amber Orange (Warning) */
+    --yellow-glow: rgba(245, 158, 11, 0.3);
+    --red: #EF4444; /* Alert Coral Red (Critical) */
+    --red-glow: rgba(239, 68, 68, 0.4);
     
     /* Fonts */
     --font-display: 'Outfit', 'Space Grotesk', system-ui, sans-serif;
@@ -1573,5 +1573,27 @@ body::after {
     }
 }
 
+@keyframes steam-pulse {
+    0% { opacity: 0.3; transform: scaleY(0.9); }
+    100% { opacity: 0.75; transform: scaleY(1.1); }
+}
+
+@media (max-width: 992px) {
+    .crisis-story-section {
+        grid-template-columns: 1fr !important;
+        gap: 2rem !important;
+    }
+    .sticky-visualizer-panel {
+        position: relative !important;
+        top: 0 !important;
+        height: auto !important;
+        padding: 1.5rem !important;
+    }
+    .story-scroll-cards {
+        gap: 3rem !important;
+        padding-bottom: 2rem !important;
+    }
+}
+