Spaces:

samirerty
/

anycoder-5bccc721

Running

App Files Files Community

samirerty commited on 19 days ago

Commit

6877882

verified ·

1 Parent(s): 5abd225

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +292 -421

index.html CHANGED Viewed

@@ -3,24 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>چت روم شیشه‌ای | iOS Glassmorphism</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            --glass-bg: rgba(255, 255, 255, 0.15);
-            --glass-border: rgba(255, 255, 255, 0.25);
-            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
             --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
             --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-            --text-primary: #1a1a2e;
-            --text-secondary: #4a4a6a;
-            --white: #ffffff;
-            --blur-amount: blur(20px);
         }
         * {
@@ -31,28 +27,22 @@
         body {
             font-family: 'Vazirmatn', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
-            background-size: 400% 400%;
-            animation: gradientShift 15s ease infinite;
             min-height: 100vh;
             overflow-x: hidden;
             position: relative;
         }
-        @keyframes gradientShift {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
-        }
-        /* Floating Background Elements */
         .bg-shapes {
             position: fixed;
             width: 100%;
             height: 100%;
             overflow: hidden;
-            z-index: 0;
-            pointer-events: none;
         }
         .shape {
@@ -65,31 +55,29 @@
         .shape-1 {
             width: 400px;
             height: 400px;
-            background: rgba(255, 255, 255, 0.4);
-            border-radius: 50%;
-            top: -10%;
-            right: -10%;
             animation-delay: 0s;
         }
         .shape-2 {
             width: 300px;
             height: 300px;
-            background: rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            bottom: 10%;
-            left: -5%;
-            animation-delay: -5s;
         }
         .shape-3 {
             width: 250px;
             height: 250px;
-            background: rgba(255, 255, 255, 0.35);
-            border-radius: 50%;
-            top: 40%;
-            left: 30%;
-            animation-delay: -10s;
         }
         @keyframes float {
@@ -98,154 +86,122 @@
             66% { transform: translate(-20px, 20px) scale(0.9); }
         }
-        /* Header */
         .header {
             position: fixed;
             top: 0;
-            width: 100%;
             padding: 1rem 2rem;
-            z-index: 1000;
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: var(--blur-amount);
-            -webkit-backdrop-filter: var(--blur-amount);
             border-bottom: 1px solid var(--glass-border);
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
-        .brand {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            color: var(--white);
-            font-weight: 700;
-            font-size: 1.2rem;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        .brand i {
             font-size: 1.5rem;
         }
-        .built-with {
-            background: rgba(255, 255, 255, 0.2);
             padding: 0.5rem 1rem;
-            border-radius: 50px;
-            color: var(--white);
             text-decoration: none;
             font-size: 0.85rem;
-            font-weight: 500;
             transition: all 0.3s ease;
-            border: 1px solid rgba(255, 255, 255, 0.3);
             backdrop-filter: blur(10px);
         }
-        .built-with:hover {
-            background: rgba(255, 255, 255, 0.3);
             transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
         }
         /* Main Container */
         .container {
-            position: relative;
-            z-index: 1;
             max-width: 1200px;
             margin: 0 auto;
             padding: 8rem 2rem 4rem;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 3rem;
         }
-        /* Hero Section Glass Card */
-        .hero-glass {
             background: var(--glass-bg);
-            backdrop-filter: var(--blur-amount);
-            -webkit-backdrop-filter: var(--blur-amount);
             border: 1px solid var(--glass-border);
             border-radius: 30px;
             padding: 3rem;
-            width: 100%;
-            max-width: 800px;
-            box-shadow: var(--glass-shadow);
-            text-align: center;
             position: relative;
             overflow: hidden;
-            transform: translateY(0);
-            transition: transform 0.3s ease;
         }
-        .hero-glass::before {
             content: '';
             position: absolute;
             top: -50%;
             left: -50%;
             width: 200%;
             height: 200%;
-            background: linear-gradient(
-                45deg,
-                transparent 30%,
-                rgba(255, 255, 255, 0.3) 50%,
-                transparent 70%
-            );
-            transform: rotate(45deg);
-            transition: all 0.6s;
-            opacity: 0;
-        }
-        .hero-glass:hover::before {
-            animation: shimmer 0.6s ease-in-out;
         }
         @keyframes shimmer {
-            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
-            50% { opacity: 1; }
-            100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
         }
-        .hero-glass:hover {
-            transform: translateY(-5px);
-        }
-        .hero-icon {
-            width: 100px;
-            height: 100px;
-            background: var(--white);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 auto 1.5rem;
-            font-size: 3rem;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
             position: relative;
-            overflow: hidden;
         }
-        .hero-icon::after {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background: var(--primary-gradient);
-            opacity: 0.1;
         }
-        h1 {
-            font-size: 2.5rem;
-            font-weight: 800;
-            color: var(--text-primary);
-            margin-bottom: 0.5rem;
-            text-shadow: 0 2px 4px rgba(0,0,0,0.05);
         }
         .subtitle {
             font-size: 1.25rem;
             color: var(--text-secondary);
-            font-weight: 500;
-            opacity: 0.9;
         }
         /* Features Grid */
@@ -253,24 +209,23 @@
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
             gap: 2rem;
-            width: 100%;
-            max-width: 1000px;
         }
-        .feature-card {
             background: var(--glass-bg);
-            backdrop-filter: var(--blur-amount);
-            -webkit-backdrop-filter: var(--blur-amount);
             border: 1px solid var(--glass-border);
             border-radius: 24px;
-            padding: 2rem;
             text-align: center;
             transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             position: relative;
             overflow: hidden;
         }
-        .feature-card::before {
             content: '';
             position: absolute;
             top: 0;
@@ -279,127 +234,117 @@
             height: 4px;
             background: var(--accent-gradient);
             transform: scaleX(0);
-            transition: transform 0.3s ease;
         }
-        .feature-card:hover {
             transform: translateY(-10px) scale(1.02);
-            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
-            background: rgba(255, 255, 255, 0.25);
         }
-        .feature-card:hover::before {
             transform: scaleX(1);
         }
         .feature-icon {
-            width: 70px;
-            height: 70px;
-            background: rgba(255, 255, 255, 0.5);
-            border-radius: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
             margin: 0 auto 1.5rem;
             font-size: 2rem;
-            color: var(--text-primary);
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
         }
-        .feature-card:hover .feature-icon {
             transform: scale(1.1) rotate(5deg);
-            background: var(--white);
         }
-        .feature-card h3 {
-            font-size: 1.3rem;
             color: var(--text-primary);
-            margin-bottom: 0.5rem;
-            font-weight: 700;
         }
-        .feature-card p {
             color: var(--text-secondary);
-            font-size: 0.95rem;
             line-height: 1.6;
         }
         /* CTA Section */
-        .cta-glass {
-            background: rgba(255, 255, 255, 0.2);
-            backdrop-filter: var(--blur-amount);
-            -webkit-backdrop-filter: var(--blur-amount);
-            border: 1px solid var(--glass-border);
-            border-radius: 50px;
-            padding: 1rem;
             display: flex;
-            gap: 1rem;
-            flex-wrap: wrap;
             justify-content: center;
-            box-shadow: var(--glass-shadow);
-            margin-top: 1rem;
         }
         .btn {
-            padding: 1rem 2.5rem;
             border-radius: 50px;
-            text-decoration: none;
-            font-weight: 600;
             font-size: 1.1rem;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             border: none;
             cursor: pointer;
-            position: relative;
             overflow: hidden;
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
         }
         .btn-primary {
-            background: var(--white);
-            color: #667eea;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         }
-        .btn-primary:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
-            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
         }
-        .btn-secondary {
-            background: transparent;
-            color: var(--white);
-            border: 2px solid rgba(255, 255, 255, 0.5);
         }
-        .btn-secondary:hover {
-            background: rgba(255, 255, 255, 0.2);
-            border-color: var(--white);
-            transform: translateY(-2px);
         }
-        .btn::after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 0;
-            height: 0;
-            border-radius: 50%;
-            background: rgba(255, 255, 255, 0.5);
-            transform: translate(-50%, -50%);
-            transition: width 0.6s, height 0.6s;
         }
-        .btn:active::after {
-            width: 300px;
-            height: 300px;
         }
-        /* Particles */
         .particles {
             position: fixed;
             top: 0;
@@ -414,14 +359,14 @@
             position: absolute;
             width: 6px;
             height: 6px;
-            background: rgba(255, 255, 255, 0.5);
             border-radius: 50%;
-            animation: particleFloat 15s infinite;
         }
-        @keyframes particleFloat {
-            0%, 100% {
-                transform: translateY(100vh) rotate(0deg);
                 opacity: 0;
             }
             10% {
@@ -431,65 +376,67 @@
                 opacity: 1;
             }
             100% {
-                transform: translateY(-100vh) rotate(720deg);
                 opacity: 0;
             }
         }
-        /* Responsive */
         @media (max-width: 768px) {
-            h1 {
-                font-size: 1.8rem;
             }
-            .hero-glass {
-                padding: 2rem 1.5rem;
             }
             .features {
                 grid-template-columns: 1fr;
             }
-            .cta-glass {
                 flex-direction: column;
-                width: 100%;
             }
             .btn {
                 width: 100%;
                 justify-content: center;
             }
             .header {
-                padding: 1rem;
             }
         }
         /* Loading Animation */
-        .loader {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             z-index: 9999;
             display: flex;
-            justify-content: center;
             align-items: center;
-            transition: opacity 0.5s ease;
         }
-        .loader.hidden {
             opacity: 0;
-            pointer-events: none;
         }
-        .loader-spinner {
-            width: 50px;
-            height: 50px;
-            border: 4px solid rgba(255, 255, 255, 0.3);
-            border-top-color: var(--white);
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
@@ -498,38 +445,29 @@
             to { transform: rotate(360deg); }
         }
-        /* Interactive Elements */
-        .status-indicator {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            background: rgba(255, 255, 255, 0.2);
-            padding: 0.5rem 1rem;
-            border-radius: 50px;
-            font-size: 0.9rem;
-            color: var(--white);
-            margin-top: 1rem;
-            backdrop-filter: blur(10px);
-        }
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            background: #4ade80;
-            border-radius: 50%;
-            animation: pulse 2s infinite;
         }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
         }
     </style>
 </head>
 <body>
-    <!-- Loader -->
-    <div class="loader" id="loader">
-        <div class="loader-spinner"></div>
     </div>
     <!-- Background Shapes -->
@@ -539,71 +477,64 @@
         <div class="shape shape-3"></div>
     </div>
-    <!-- Particles Container -->
     <div class="particles" id="particles"></div>
     <!-- Header -->
     <header class="header">
-        <div class="brand">
-            <i class="fas fa-comments"></i>
-            <span>چت روم شیشه‌ای</span>
         </div>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
-            <i class="fas fa-code"></i>
-            Built with anycoder
         </a>
     </header>
     <!-- Main Content -->
     <div class="container">
-        <!-- Hero Section -->
-        <div class="hero-glass" data-tilt>
-            <div class="hero-icon">
-                <i class="fas fa-comment-dots" style="background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
-            </div>
-            <h1>💬 چت روم ساده</h1>
-            <p class="subtitle">محلی برای گفتگو با دوستان در فضایی مدرن و شیشه‌ای</p>
-            <div class="status-indicator">
-                <span class="status-dot"></span>
-                <span>۱۲۳ کاربر آنلاین</span>
             </div>
         </div>
-        <!-- Features Grid -->
         <div class="features">
-            <div class="feature-card">
                 <div class="feature-icon">
-                    <i class="fas fa-mobile-alt" style="color: #667eea;"></i>
                 </div>
                 <h3>ثبت‌نام آسان</h3>
-                <p>با شماره موبایل ثبت‌نام کنید و در کمتر از ۳۰ ثانیه وارد شوید</p>
             </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <i class="fas fa-users" style="color: #f5576c;"></i>
                 </div>
                 <h3>ساخت اتاق</h3>
                 <p>تا ۳ اتاق مختلف بسازید و دوستان خود را دعوت کنید</p>
             </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <i class="fas fa-bolt" style="color: #4facfe;"></i>
                 </div>
                 <h3>چت زنده</h3>
-                <p>گفتگوی آنلاین و سریع با سرعت انتقال پیام کمتر از ۱۰۰ میلی‌ثانیه</p>
             </div>
         </div>
-        <!-- CTA Section -->
-        <div class="cta-glass">
-            <a href="#" class="btn btn-primary" onclick="handleAction('register')">
                 <i class="fas fa-rocket"></i>
                 شروع کنید
             </a>
-            <a href="#" class="btn btn-secondary" onclick="handleAction('login')">
                 <i class="fas fa-sign-in-alt"></i>
                 ورود
             </a>
@@ -621,169 +552,109 @@
         // Create floating particles
         function createParticles() {
             const container = document.getElementById('particles');
-            const particleCount = 20;
             for (let i = 0; i < particleCount; i++) {
                 const particle = document.createElement('div');
                 particle.className = 'particle';
                 particle.style.left = Math.random() * 100 + '%';
-                particle.style.animationDelay = Math.random() * 15 + 's';
                 particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
                 container.appendChild(particle);
             }
         }
         createParticles();
-        // 3D Tilt Effect for Hero Card
-        const heroCard = document.querySelector('.hero-glass');
-        heroCard.addEventListener('mousemove', (e) => {
-            const rect = heroCard.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            const centerX = rect.width / 2;
-            const centerY = rect.height / 2;
-            const rotateX = (y - centerY) / 20;
-            const rotateY = (centerX - x) / 20;
-            heroCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
-        });
-        heroCard.addEventListener('mouseleave', () => {
-            heroCard.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
         });
-        // Button Click Handlers
-        function handleAction(action) {
-            const btn = event.currentTarget;
-            // Create ripple effect
-            const ripple = document.createElement('span');
-            ripple.style.position = 'absolute';
-            ripple.style.width = '20px';
-            ripple.style.height = '20px';
-            ripple.style.background = 'rgba(255,255,255,0.5)';
-            ripple.style.borderRadius = '50%';
-            ripple.style.transform = 'translate(-50%, -50%)';
-            ripple.style.pointerEvents = 'none';
-            ripple.style.animation = 'ripple 0.6s ease-out';
-            const rect = btn.getBoundingClientRect();
-            ripple.style.left = (event.clientX - rect.left) + 'px';
-            ripple.style.top = (event.clientY - rect.top) + 'px';
-            btn.style.position = 'relative';
-            btn.style.overflow = 'hidden';
-            btn.appendChild(ripple);
-            setTimeout(() => ripple.remove(), 600);
-            // Simulate action
-            setTimeout(() => {
-                if (action === 'register') {
-                    showNotification('در حال انتقال به صفحه ثبت‌نام...', 'info');
-                } else {
-                    showNotification('در حال انتقال به صفحه ورود...', 'info');
-                }
-            }, 300);
-        }
-        // Custom Notification System
-        function showNotification(message, type = 'info') {
-            const notification = document.createElement('div');
-            notification.style.cssText = `
-                position: fixed;
-                top: 100px;
-                left: 50%;
-                transform: translateX(-50%) translateY(-20px);
-                background: rgba(255, 255, 255, 0.9);
-                backdrop-filter: blur(20px);
-                padding: 1rem 2rem;
-                border-radius: 16px;
-                box-shadow: 0 10px 40px rgba(0,0,0,0.1);
-                z-index: 9999;
-                font-family: 'Vazirmatn', sans-serif;
-                font-weight: 600;
-                color: #667eea;
-                border: 1px solid rgba(255,255,255,0.5);
-                opacity: 0;
-                transition: all 0.3s ease;
-                direction: rtl;
-            `;
-            notification.textContent = message;
-            document.body.appendChild(notification);
-            // Animate in
-            requestAnimationFrame(() => {
-                notification.style.opacity = '1';
-                notification.style.transform = 'translateX(-50%) translateY(0)';
             });
-            // Remove after delay
-            setTimeout(() => {
-                notification.style.opacity = '0';
-                notification.style.transform = 'translateX(-50%) translateY(-20px)';
-                setTimeout(() => notification.remove(), 300);
-            }, 3000);
-        }
-        // Add ripple animation to styles dynamically
         const style = document.createElement('style');
         style.textContent = `
             @keyframes ripple {
                 to {
-                    width: 200px;
-                    height: 200px;
                     opacity: 0;
                 }
             }
         `;
         document.head.appendChild(style);
-        // Parallax effect on scroll
-        window.addEventListener('scroll', () => {
-            const scrolled = window.pageYOffset;
-            const parallax = document.querySelector('.shape-1');
-            const parallax2 = document.querySelector('.shape-2');
-            parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
-            parallax2.style.transform = `translateY(${scrolled * 0.3}px)`;
-        });
-        // Intersection Observer for fade-in animations
-        const observerOptions = {
-            threshold: 0.1,
-            rootMargin: '0px 0px -50px 0px'
-        };
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.style.opacity = '1';
-                    entry.target.style.transform = 'translateY(0)';
                 }
             });
-        }, observerOptions);
-        // Observe feature cards
-        document.querySelectorAll('.feature-card').forEach((card, index) => {
-            card.style.opacity = '0';
-            card.style.transform = 'translateY(30px)';
-            card.style.transition = `all 0.6s ease ${index * 0.1}s`;
-            observer.observe(card);
         });
-        // Dynamic online user count
-        setInterval(() => {
-            const statusSpan = document.querySelector('.status-indicator span:last-child');
-            const currentUsers = parseInt(statusSpan.textContent);
-            const change = Math.floor(Math.random() * 5) - 2; // -2 to +2
-            const newUsers = Math.max(100, currentUsers + change);
-            statusSpan.textContent = `${newUsers} کاربر آنلاین`;
-        }, 5000);
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>چت روم ساده | iOS Glassmorphism</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;800&display=swap" rel="stylesheet">
     <style>
         :root {
+            --glass-bg: rgba(255, 255, 255, 0.1);
+            --glass-border: rgba(255, 255, 255, 0.2);
+            --glass-shadow: rgba(0, 0, 0, 0.1);
             --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
             --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --text-primary: #ffffff;
+            --text-secondary: rgba(255, 255, 255, 0.8);
+            --blur-amount: 20px;
         }
         * {
         body {
             font-family: 'Vazirmatn', sans-serif;
             min-height: 100vh;
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #6e48aa 100%);
+            background-attachment: fixed;
             overflow-x: hidden;
             position: relative;
         }
+        /* Animated Background Shapes */
         .bg-shapes {
             position: fixed;
+            top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
             overflow: hidden;
+            z-index: -1;
         }
         .shape {
         .shape-1 {
             width: 400px;
             height: 400px;
+            background: #ff6b6b;
+            top: -100px;
+            right: -100px;
             animation-delay: 0s;
         }
         .shape-2 {
             width: 300px;
             height: 300px;
+            background: #4ecdc4;
+            bottom: -50px;
+            left: -50px;
+            animation-delay: 5s;
         }
         .shape-3 {
             width: 250px;
             height: 250px;
+            background: #ffe66d;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            animation-delay: 10s;
         }
         @keyframes float {
             66% { transform: translate(-20px, 20px) scale(0.9); }
         }
+        /* Header with anycoder link */
         .header {
             position: fixed;
             top: 0;
+            left: 0;
+            right: 0;
             padding: 1rem 2rem;
+            background: var(--glass-bg);
+            backdrop-filter: blur(var(--blur-amount));
+            -webkit-backdrop-filter: blur(var(--blur-amount));
             border-bottom: 1px solid var(--glass-border);
+            z-index: 1000;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
+        .logo {
             font-size: 1.5rem;
+            font-weight: 800;
+            color: var(--text-primary);
+            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
         }
+        .anycoder-link {
+            background: var(--glass-bg);
+            border: 1px solid var(--glass-border);
             padding: 0.5rem 1rem;
+            border-radius: 20px;
+            color: var(--text-primary);
             text-decoration: none;
             font-size: 0.85rem;
             transition: all 0.3s ease;
             backdrop-filter: blur(10px);
         }
+        .anycoder-link:hover {
+            background: rgba(255,255,255,0.2);
             transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
         }
         /* Main Container */
         .container {
             max-width: 1200px;
             margin: 0 auto;
             padding: 8rem 2rem 4rem;
+            position: relative;
+        }
+        /* Hero Section with Glassmorphism */
+        .hero {
+            text-align: center;
+            margin-bottom: 4rem;
+            position: relative;
         }
+        .hero-card {
             background: var(--glass-bg);
+            backdrop-filter: blur(var(--blur-amount));
+            -webkit-backdrop-filter: blur(var(--blur-amount));
             border: 1px solid var(--glass-border);
             border-radius: 30px;
             padding: 3rem;
+            box-shadow:
+                0 8px 32px 0 var(--glass-shadow),
+                inset 0 0 0 1px rgba(255,255,255,0.1);
             position: relative;
             overflow: hidden;
         }
+        .hero-card::before {
             content: '';
             position: absolute;
             top: -50%;
             left: -50%;
             width: 200%;
             height: 200%;
+            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
+            animation: shimmer 10s infinite linear;
         }
         @keyframes shimmer {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        .hero h1 {
+            font-size: 3.5rem;
+            font-weight: 800;
+            color: var(--text-primary);
+            margin-bottom: 1rem;
+            text-shadow: 0 4px 8px rgba(0,0,0,0.3);
             position: relative;
+            z-index: 1;
         }
+        .hero-icon {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+            display: inline-block;
+            animation: bounce 2s infinite;
+            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
         }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
         }
         .subtitle {
             font-size: 1.25rem;
             color: var(--text-secondary);
+            font-weight: 300;
+            position: relative;
+            z-index: 1;
         }
         /* Features Grid */
             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
             gap: 2rem;
+            margin-bottom: 4rem;
         }
+        .feature {
             background: var(--glass-bg);
+            backdrop-filter: blur(var(--blur-amount));
+            -webkit-backdrop-filter: blur(var(--blur-amount));
             border: 1px solid var(--glass-border);
             border-radius: 24px;
+            padding: 2.5rem;
             text-align: center;
             transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
             position: relative;
             overflow: hidden;
         }
+        .feature::before {
             content: '';
             position: absolute;
             top: 0;
             height: 4px;
             background: var(--accent-gradient);
             transform: scaleX(0);
+            transition: transform 0.4s ease;
         }
+        .feature:hover {
             transform: translateY(-10px) scale(1.02);
+            box-shadow:
+                0 20px 40px rgba(0,0,0,0.2),
+                inset 0 0 0 1px rgba(255,255,255,0.2);
         }
+        .feature:hover::before {
             transform: scaleX(1);
         }
         .feature-icon {
+            width: 80px;
+            height: 80px;
+            background: var(--primary-gradient);
+            border-radius: 24px;
             display: flex;
             align-items: center;
             justify-content: center;
             margin: 0 auto 1.5rem;
             font-size: 2rem;
+            color: white;
+            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+            transition: transform 0.3s ease;
         }
+        .feature:hover .feature-icon {
             transform: scale(1.1) rotate(5deg);
         }
+        .feature h3 {
             color: var(--text-primary);
+            font-size: 1.5rem;
+            margin-bottom: 0.75rem;
+            font-weight: 600;
         }
+        .feature p {
             color: var(--text-secondary);
+            font-size: 1rem;
             line-height: 1.6;
         }
         /* CTA Section */
+        .cta {
             display: flex;
+            gap: 1.5rem;
             justify-content: center;
+            flex-wrap: wrap;
+            margin-top: 3rem;
         }
         .btn {
+            position: relative;
+            padding: 1.25rem 3rem;
             border-radius: 50px;
             font-size: 1.1rem;
+            font-weight: 600;
+            text-decoration: none;
+            color: white;
             border: none;
             cursor: pointer;
             overflow: hidden;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
         }
         .btn-primary {
+            background: var(--primary-gradient);
+            box-shadow:
+                0 10px 30px rgba(102, 126, 234, 0.4),
+                inset 0 1px 0 rgba(255,255,255,0.3);
         }
+        .btn-secondary {
+            background: var(--glass-bg);
+            border: 2px solid rgba(255,255,255,0.3);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         }
+        .btn::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+            transition: left 0.5s ease;
         }
+        .btn:hover::before {
+            left: 100%;
         }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.3);
         }
+        .btn:active {
+            transform: translateY(-1px);
         }
+        /* Floating Particles */
         .particles {
             position: fixed;
             top: 0;
             position: absolute;
             width: 6px;
             height: 6px;
+            background: rgba(255,255,255,0.5);
             border-radius: 50%;
+            animation: particle-float 15s infinite linear;
         }
+        @keyframes particle-float {
+            0% {
+                transform: translateY(100vh) translateX(0);
                 opacity: 0;
             }
             10% {
                 opacity: 1;
             }
             100% {
+                transform: translateY(-100vh) translateX(100px);
                 opacity: 0;
             }
         }
+        /* Responsive Design */
         @media (max-width: 768px) {
+            .hero h1 {
+                font-size: 2.5rem;
             }
+            .hero-card {
+                padding: 2rem;
             }
             .features {
                 grid-template-columns: 1fr;
+                gap: 1.5rem;
             }
+            .cta {
                 flex-direction: column;
+                align-items: center;
             }
             .btn {
                 width: 100%;
+                max-width: 300px;
                 justify-content: center;
             }
             .header {
+                padding: 0.75rem 1rem;
             }
         }
         /* Loading Animation */
+        .loading-overlay {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
             z-index: 9999;
             display: flex;
             align-items: center;
+            justify-content: center;
+            transition: opacity 0.5s ease, visibility 0.5s ease;
         }
+        .loading-overlay.hidden {
             opacity: 0;
+            visibility: hidden;
         }
+        .loader {
+            width: 60px;
+            height: 60px;
+            border: 4px solid rgba(255,255,255,0.1);
+            border-top-color: white;
             border-radius: 50%;
             animation: spin 1s linear infinite;
         }
             to { transform: rotate(360deg); }
         }
+        /* Scroll Indicator */
+        .scroll-indicator {
+            position: absolute;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%);
+            animation: bounce-down 2s infinite;
+            color: white;
+            font-size: 1.5rem;
+            opacity: 0.7;
         }
+        @keyframes bounce-down {
+            0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
+            40% { transform: translateX(-50%) translateY(-10px); }
+            60% { transform: translateX(-50%) translateY(-5px); }
         }
     </style>
 </head>
 <body>
+    <!-- Loading Screen -->
+    <div class="loading-overlay" id="loader">
+        <div class="loader"></div>
     </div>
     <!-- Background Shapes -->
         <div class="shape shape-3"></div>
     </div>
+    <!-- Floating Particles -->
     <div class="particles" id="particles"></div>
     <!-- Header -->
     <header class="header">
+        <div class="logo">
+            <i class="fas fa-comments"></i> چت روم
         </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">
+            <i class="fas fa-code"></i> Built with anycoder
         </a>
     </header>
     <!-- Main Content -->
     <div class="container">
+        <div class="hero">
+            <div class="hero-card">
+                <div class="hero-icon">💬</div>
+                <h1>چت روم ساده</h1>
+                <p class="subtitle">محلی برای گفتگو با دوستان</p>
+                <div class="scroll-indicator">
+                    <i class="fas fa-chevron-down"></i>
+                </div>
             </div>
         </div>
         <div class="features">
+            <div class="feature" data-delay="0">
                 <div class="feature-icon">
+                    <i class="fas fa-mobile-alt"></i>
                 </div>
                 <h3>ثبت‌نام آسان</h3>
+                <p>با شماره موبایل ثبت‌نام کنید و در کمترین زمان عضو شوید</p>
             </div>
+            <div class="feature" data-delay="100">
+                <div class="feature-icon" style="background: var(--secondary-gradient);">
+                    <i class="fas fa-users"></i>
                 </div>
                 <h3>ساخت اتاق</h3>
                 <p>تا ۳ اتاق مختلف بسازید و دوستان خود را دعوت کنید</p>
             </div>
+            <div class="feature" data-delay="200">
+                <div class="feature-icon" style="background: var(--accent-gradient);">
+                    <i class="fas fa-bolt"></i>
                 </div>
                 <h3>چت زنده</h3>
+                <p>گفتگوی آنلاین و سریع با کمترین تاخیر ممکن</p>
             </div>
         </div>
+        <div class="cta">
+            <a href="register.php" class="btn btn-primary">
                 <i class="fas fa-rocket"></i>
                 شروع کنید
             </a>
+            <a href="login.php" class="btn btn-secondary">
                 <i class="fas fa-sign-in-alt"></i>
                 ورود
             </a>
         // Create floating particles
         function createParticles() {
             const container = document.getElementById('particles');
+            const particleCount = 30;
             for (let i = 0; i < particleCount; i++) {
                 const particle = document.createElement('div');
                 particle.className = 'particle';
                 particle.style.left = Math.random() * 100 + '%';
                 particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
+                particle.style.animationDelay = Math.random() * 5 + 's';
+                particle.style.opacity = Math.random() * 0.5 + 0.2;
                 container.appendChild(particle);
             }
         }
         createParticles();
+        // Intersection Observer for feature animations
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }
+            });
+        }, observerOptions);
+        // Initialize feature animations
+        document.querySelectorAll('.feature').forEach((feature, index) => {
+            feature.style.opacity = '0';
+            feature.style.transform = 'translateY(30px)';
+            feature.style.transition = `all 0.6s ease ${index * 0.1}s`;
+            observer.observe(feature);
         });
+        // Parallax effect for background shapes
+        document.addEventListener('mousemove', (e) => {
+            const shapes = document.querySelectorAll('.shape');
+            const x = e.clientX / window.innerWidth;
+            const y = e.clientY / window.innerHeight;
+            shapes.forEach((shape, index) => {
+                const speed = (index + 1) * 20;
+                const xOffset = (0.5 - x) * speed;
+                const yOffset = (0.5 - y) * speed;
+                shape.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
             });
+        });
+        // Button click effects
+        document.querySelectorAll('.btn').forEach(btn => {
+            btn.addEventListener('click', function(e) {
+                // Create ripple effect
+                const ripple = document.createElement('span');
+                const rect = this.getBoundingClientRect();
+                const size = Math.max(rect.width, rect.height);
+                const x = e.clientX - rect.left - size / 2;
+                const y = e.clientY - rect.top - size / 2;
+                ripple.style.cssText = `
+                    position: absolute;
+                    width: ${size}px;
+                    height: ${size}px;
+                    left: ${x}px;
+                    top: ${y}px;
+                    background: rgba(255,255,255,0.5);
+                    border-radius: 50%;
+                    transform: scale(0);
+                    animation: ripple 0.6s ease-out;
+                    pointer-events: none;
+                `;
+                this.appendChild(ripple);
+                setTimeout(() => ripple.remove(), 600);
+            });
+        });
+        // Add ripple animation keyframes dynamically
         const style = document.createElement('style');
         style.textContent = `
             @keyframes ripple {
                 to {
+                    transform: scale(2);
                     opacity: 0;
                 }
             }
         `;
         document.head.appendChild(style);
+        // Smooth scroll behavior
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                 }
             });
         });
     </script>
 </body>
 </html>