Update index.html

index.html

@@ -861,6 +861,115 @@
             height: 100vh;
         }
 
+        /* --- 3D World & Advanced Animations --- */
+        :root {
+            --3d-perspective: 1200px;
+            --3d-tilt-intensity: 15deg;
+            --transition-smooth: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+        }
+
+        body {
+            perspective: var(--3d-perspective);
+            transform-style: preserve-3d;
+        }
+
+        .main-area {
+            transform-style: preserve-3d;
+            transition: var(--transition-smooth);
+        }
+
+        /* 3D Glassmorphism Cards */
+        .suggestion-card, .feature-item, .image-card, .tool-output-card {
+            position: relative;
+            transform-style: preserve-3d;
+            transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.3s ease;
+            will-change: transform;
+        }
+
+        .suggestion-card:hover, .feature-item:hover {
+            transform: translateZ(20px) rotateX(2deg) rotateY(-2deg);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px var(--glass-border);
+        }
+
+        /* 3D Floating Particles Background */
+        #canvas3d {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            pointer-events: none;
+            opacity: 0.6;
+        }
+
+        /* Page Transition Animations */
+        .page-fade-enter {
+            opacity: 0;
+            transform: scale(0.98) translateZ(-50px);
+        }
+
+        .page-fade-exit {
+            opacity: 0;
+            transform: scale(1.02) translateZ(50px);
+        }
+
+        .transitioning {
+            pointer-events: none;
+            filter: blur(4px);
+            transition: var(--transition-smooth);
+        }
+
+        /* Smooth 3D Button Micro-interactions */
+        .send-button, .action-btn, .new-chat-btn {
+            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
+        }
+
+        .send-button:hover, .action-btn:hover {
+            transform: translateY(-2px) scale(1.05);
+            box-shadow: 0 5px 15px rgba(16, 163, 127, 0.3);
+        }
+
+        .send-button:active {
+            transform: translateY(0) scale(0.95);
+        }
+
+        /* High-Performance 3D Grid Overlay */
+        .grid-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: linear-gradient(var(--glass-border) 1px, transparent 1px),
+                              linear-gradient(90deg, var(--glass-border) 1px, transparent 1px);
+            background-size: 50px 50px;
+            perspective: 500px;
+            transform: rotateX(60deg) translateY(-50%) translateZ(-200px);
+            opacity: 0.05;
+            z-index: -1;
+            mask-image: radial-gradient(circle at center, black, transparent 80%);
+            pointer-events: none;
+        }
+
+        /* Smooth Chat Entrance */
+        .message {
+            transform-origin: left center;
+            animation: messageAppear3d 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
+            opacity: 0;
+        }
+
+        @keyframes messageAppear3d {
+            0% {
+                opacity: 0;
+                transform: translateX(-20px) rotateY(-15deg) scale(0.95);
+            }
+            100% {
+                opacity: 1;
+                transform: translateX(0) rotateY(0) scale(1);
+            }
+        }
+
         .chat-history {
             flex: 1;
             overflow-y: auto;
@@ -4520,9 +4629,11 @@
         <!-- Main Area -->
         <main class="main-area hero-mode">
             <div class="main-background-lighting">
-                <div class="ambient-glow glow-1"></div>
-                <div class="ambient-glow glow-2"></div>
-            </div>
+        <div class="ambient-glow glow-1"></div>
+        <div class="ambient-glow glow-2"></div>
+        <div class="grid-overlay"></div>
+        <canvas id="canvas3d"></canvas>
+    </div>
 
             <div id="memoryIndicator" class="memory-indicator">
                 <i data-lucide="brain"></i>
@@ -7511,25 +7622,49 @@
 
         function handleRouting() {
             const path = window.location.pathname;
+            const mainArea = document.querySelector('.main-area');
             
-            // Protected routes
-            if (path === '/chat' && !currentUser) {
-                window.history.pushState({}, '', '/login');
-                renderLogin();
-                return;
-            }
-            
-            if ((path === '/login' || path === '/signup') && currentUser) {
-                window.history.pushState({}, '', '/chat');
-                renderChat();
-                return;
+            // Add transition effect
+            if (mainArea) {
+                mainArea.classList.add('transitioning');
+                mainArea.style.opacity = '0';
+                mainArea.style.transform = 'scale(0.98) translateZ(-50px)';
             }
 
-            const renderFunc = routes[path] || renderLanding;
-            renderFunc();
-            
-            if (window.innerWidth <= 768) {
-                sidebar?.classList.remove('open');
+            setTimeout(() => {
+                // Protected routes
+                if (path === '/chat' && !currentUser) {
+                    window.history.pushState({}, '', '/login');
+                    renderLogin();
+                    finishTransition();
+                    return;
+                }
+                
+                if ((path === '/login' || path === '/signup') && currentUser) {
+                    window.history.pushState({}, '', '/chat');
+                    renderChat();
+                    finishTransition();
+                    return;
+                }
+
+                const renderFunc = routes[path] || renderLanding;
+                renderFunc();
+                
+                if (window.innerWidth <= 768) {
+                    sidebar?.classList.remove('open');
+                }
+                finishTransition();
+            }, 300);
+        }
+
+        function finishTransition() {
+            const mainArea = document.querySelector('.main-area');
+            if (mainArea) {
+                setTimeout(() => {
+                    mainArea.classList.remove('transitioning');
+                    mainArea.style.opacity = '1';
+                    mainArea.style.transform = 'scale(1) translateZ(0)';
+                }, 50);
             }
         }
 
@@ -8517,6 +8652,91 @@
             setTimeout(triggerLightning, Math.random() * 8000 + 4000);
         }
 
+        // --- 3D Background System ---
+        function init3DBackground() {
+            const canvas = document.getElementById('canvas3d');
+            if (!canvas) return;
+            const ctx = canvas.getContext('2d');
+            let w, h;
+            const particles = [];
+            const particleCount = 60;
+
+            function resize() {
+                w = canvas.width = window.innerWidth;
+                h = canvas.height = window.innerHeight;
+            }
+
+            class Particle {
+                constructor() {
+                    this.reset();
+                }
+                reset() {
+                    this.x = Math.random() * w;
+                    this.y = Math.random() * h;
+                    this.z = Math.random() * 1000;
+                    this.size = 1 + Math.random() * 2;
+                    this.speed = 0.5 + Math.random() * 1.5;
+                    this.vx = (Math.random() - 0.5) * 0.5;
+                    this.vy = (Math.random() - 0.5) * 0.5;
+                }
+                update() {
+                    this.z -= this.speed;
+                    this.x += this.vx;
+                    this.y += this.vy;
+                    if (this.z <= 0) this.reset();
+                }
+                draw() {
+                    const scale = 500 / (500 + this.z);
+                    const x2d = (this.x - w / 2) * scale + w / 2;
+                    const y2d = (this.y - h / 2) * scale + h / 2;
+                    const opacity = Math.min(1, (1000 - this.z) / 800) * 0.3;
+                    
+                    ctx.fillStyle = `rgba(16, 163, 127, ${opacity})`;
+                    ctx.beginPath();
+                    ctx.arc(x2d, y2d, this.size * scale, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+
+            for (let i = 0; i < particleCount; i++) particles.push(new Particle());
+
+            function animate() {
+                ctx.clearRect(0, 0, w, h);
+                particles.forEach(p => {
+                    p.update();
+                    p.draw();
+                });
+                requestAnimationFrame(animate);
+            }
+
+            window.addEventListener('resize', resize);
+            resize();
+            animate();
+        }
+
+        // --- 3D Card Tilt Effect ---
+        function init3DTilt() {
+            document.addEventListener('mousemove', e => {
+                const cards = document.querySelectorAll('.suggestion-card, .feature-item');
+                cards.forEach(card => {
+                    const rect = card.getBoundingClientRect();
+                    const x = e.clientX - rect.left;
+                    const y = e.clientY - rect.top;
+                    
+                    if (x > 0 && x < rect.width && y > 0 && y < rect.height) {
+                        const centerX = rect.width / 2;
+                        const centerY = rect.height / 2;
+                        const rotateX = (y - centerY) / 10;
+                        const rotateY = (centerX - x) / 10;
+                        
+                        card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateZ(10px)`;
+                    } else {
+                        card.style.transform = '';
+                    }
+                });
+            });
+        }
+
         // Initialize
         window.addEventListener('DOMContentLoaded', async () => {
             try {
@@ -8538,6 +8758,8 @@
                 // 3. Start animations
                 setTimeout(typeEffect, 1000);
                 setTimeout(triggerLightning, 3000);
+                init3DBackground();
+                init3DTilt();
 
                 refreshIcons();