Spaces:

samirerty
/

anycoder-5bccc721

Running

App Files Files Community

samirerty commited on 18 days ago

Commit

f2bee13

verified ·

1 Parent(s): 6877882

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +237 -487

index.html CHANGED Viewed

@@ -2,657 +2,407 @@
 <html lang="fa" dir="rtl">
 <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;
         }
         * {
             margin: 0;
             padding: 0;
-            box-sizing: border-box;
         }
         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 {
             position: absolute;
             filter: blur(80px);
             opacity: 0.6;
-            animation: float 20s infinite ease-in-out;
         }
-        .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 {
-            0%, 100% { transform: translate(0, 0) scale(1); }
-            33% { transform: translate(30px, -30px) scale(1.1); }
-            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 */
         .features {
             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;
-            left: 0;
-            right: 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;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 0;
         }
-        .particle {
-            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;
-            }
-            90% {
-                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;
-        }
-        @keyframes spin {
-            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="bg-shapes">
-        <div class="shape shape-1"></div>
-        <div class="shape shape-2"></div>
-        <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>
         </div>
     </div>
     <script>
-        // Remove loader when page loads
-        window.addEventListener('load', () => {
-            setTimeout(() => {
-                document.getElementById('loader').classList.add('hidden');
-            }, 500);
-        });
-        // 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>

 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>چت روم ساده | iOS Glassmorphism</title>
+    <!-- Importing Vazirmatn font for beautiful Persian typography -->
+    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
+    <!-- Importing Remix Icon for modern icons -->
+    <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
     <style>
         :root {
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             --glass-bg: rgba(255, 255, 255, 0.1);
             --glass-border: rgba(255, 255, 255, 0.2);
+            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+            --text-color: #ffffff;
+            --secondary-text: rgba(255, 255, 255, 0.7);
+            --accent-color: #ff2e63;
         }
         * {
+            box-sizing: border-box;
             margin: 0;
             padding: 0;
+            -webkit-tap-highlight-color: transparent;
         }
         body {
             font-family: 'Vazirmatn', sans-serif;
+            background: var(--primary-gradient);
             min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: var(--text-color);
             overflow-x: hidden;
             position: relative;
         }
+        /* Animated Background Blobs */
+        .blob {
             position: absolute;
+            border-radius: 50%;
             filter: blur(80px);
             opacity: 0.6;
+            z-index: 0;
+            animation: float 10s infinite ease-in-out alternate;
         }
+        .blob-1 {
+            top: -10%;
+            left: -10%;
+            width: 300px;
+            height: 300px;
+            background: #ff00cc;
             animation-delay: 0s;
         }
+        .blob-2 {
+            bottom: -10%;
+            right: -10%;
+            width: 400px;
+            height: 400px;
+            background: #333399;
+            animation-delay: -5s;
         }
+        .blob-3 {
+            top: 40%;
+            left: 40%;
+            width: 200px;
+            height: 200px;
+            background: #00d2ff;
+            animation-delay: -2s;
         }
         @keyframes float {
+            0% { transform: translate(0, 0) scale(1); }
+            100% { transform: translate(30px, 50px) scale(1.1); }
         }
+        /* iOS Status Bar Simulation */
+        .status-bar {
             position: fixed;
             top: 0;
             left: 0;
+            width: 100%;
+            height: 44px;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding: 0 20px;
+            z-index: 100;
+            font-size: 14px;
+            font-weight: 600;
+            background: rgba(0, 0, 0, 0.1);
             backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(255,255,255,0.05);
         }
+        .status-icons {
+            display: flex;
+            gap: 8px;
+            align-items: center;
         }
         /* Main Container */
         .container {
             position: relative;
+            z-index: 10;
+            width: 90%;
+            max-width: 450px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 30px;
+            animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
         }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translate3d(0, 40px, 0);
+            }
+            to {
+                opacity: 1;
+                transform: translate3d(0, 0, 0);
+            }
         }
+        /* Hero Section */
+        .hero {
+            text-align: center;
+            margin-bottom: 10px;
         }
         .hero h1 {
+            font-size: 2.5rem;
             font-weight: 800;
+            margin-bottom: 10px;
+            text-shadow: 0 4px 10px rgba(0,0,0,0.2);
+            letter-spacing: -0.5px;
         }
+        .hero .subtitle {
+            color: var(--secondary-text);
+            font-size: 1.1rem;
+            font-weight: 400;
         }
         /* Features Grid */
         .features {
             display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+            gap: 15px;
         }
         .feature {
             background: var(--glass-bg);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
             border: 1px solid var(--glass-border);
             border-radius: 24px;
+            padding: 20px 10px;
             text-align: center;
+            box-shadow: var(--glass-shadow);
+            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
+            cursor: default;
         }
         .feature:hover {
+            transform: translateY(-5px) scale(1.02);
+            background: rgba(255, 255, 255, 0.15);
         }
+        .feature .icon {
+            width: 50px;
+            height: 50px;
+            background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
+            border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
+            margin: 0 auto 15px;
+            font-size: 1.5rem;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
         }
         .feature h3 {
+            font-size: 1rem;
+            margin-bottom: 5px;
+            font-weight: 700;
         }
         .feature p {
+            font-size: 0.8rem;
+            color: var(--secondary-text);
+            line-height: 1.4;
         }
+        /* Buttons (CTA) */
         .cta {
             display: flex;
+            flex-direction: column;
+            gap: 15px;
+            margin-top: 10px;
         }
         .btn {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            padding: 16px 32px;
             border-radius: 50px;
             text-decoration: none;
+            font-weight: 700;
+            font-size: 1.1rem;
             transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            backdrop-filter: blur(5px);
+            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
         }
         .btn::before {
             content: '';
             position: absolute;
             top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
+            background: linear-gradient(rgba(255,255,255,0.2), transparent);
+            opacity: 0;
+            transition: opacity 0.3s;
         }
         .btn:hover::before {
+            opacity: 1;
         }
+        .btn:active {
+            transform: scale(0.96);
         }
+        .btn-primary {
+            background: rgba(255, 255, 255, 0.9);
+            color: #764ba2;
+            border: 1px solid rgba(255,255,255,0.5);
         }
+        .btn-primary:hover {
+            background: #ffffff;
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
         }
+        .btn-secondary {
+            background: rgba(0, 0, 0, 0.2);
+            color: #ffffff;
+            border: 1px solid rgba(255,255,255,0.1);
         }
+        .btn-secondary:hover {
+            background: rgba(0, 0, 0, 0.3);
+            border-color: rgba(255,255,255,0.3);
+        }
+        /* AnyCoder Link */
+        .footer-link {
+            text-align: center;
+            margin-top: 20px;
+            font-size: 0.8rem;
+            color: rgba(255,255,255,0.5);
+        }
+        .footer-link a {
+            color: rgba(255,255,255,0.8);
+            text-decoration: none;
+            border-bottom: 1px dashed rgba(255,255,255,0.5);
+            transition: color 0.3s;
+        }
+        .footer-link a:hover {
+            color: #fff;
+            border-bottom-style: solid;
         }
+        /* Responsive Tweaks */
+        @media (max-width: 400px) {
             .hero h1 {
+                font-size: 2rem;
             }
             .features {
                 grid-template-columns: 1fr;
             }
+            .feature {
+                display: flex;
                 align-items: center;
+                text-align: right;
+                padding: 15px 20px;
             }
+            .feature .icon {
+                margin: 0 15px 0 0;
+                width: 40px;
+                height: 40px;
+                font-size: 1.2rem;
             }
         }
     </style>
 </head>
 <body>
+    <!-- Animated Background Elements -->
+    <div class="blob blob-1"></div>
+    <div class="blob blob-2"></div>
+    <div class="blob blob-3"></div>
+    <!-- iOS Status Bar Simulation -->
+    <div class="status-bar">
+        <div class="time" id="clock">12:00</div>
+        <div class="status-icons">
+            <i class="ri-signal-wifi-fill"></i>
+            <i class="ri-battery-fill"></i>
         </div>
+    </div>
     <div class="container">
+        <!-- Header / Hero Section -->
         <div class="hero">
+            <h1>💬 چت روم ساده</h1>
+            <p class="subtitle">محلی امن و زیبا برای گفتگو با دوستان</p>
         </div>
+        <!-- Features Cards -->
         <div class="features">
+            <div class="feature">
+                <div class="icon"><i class="ri-lock-password-line"></i></div>
                 <h3>ثبت‌نام آسان</h3>
+                <p>با شماره موبایل ثبت‌نام کنید</p>
             </div>
+            <div class="feature">
+                <div class="icon"><i class="ri-group-line"></i></div>
                 <h3>ساخت اتاق</h3>
+                <p>تا ۳ اتاق مختلف بسازید</p>
             </div>
+            <div class="feature">
+                <div class="icon"><i class="ri-chat-smile-3-line"></i></div>
                 <h3>چت زنده</h3>
+                <p>گفتگوی آنلاین و سریع</p>
             </div>
         </div>
+        <!-- Call to Action Buttons -->
         <div class="cta">
+            <a href="register.php" class="btn btn-primary">شروع کنید</a>
+            <a href="login.php" class="btn btn-secondary">ورود</a>
+        </div>
+        <!-- Footer Credit -->
+        <div class="footer-link">
+            Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
         </div>
     </div>
     <script>
+        // Simple script to update the simulated iOS status bar clock
+        function updateClock() {
+            const now = new Date();
+            const hours = String(now.getHours()).padStart(2, '0');
+            const minutes = String(now.getMinutes()).padStart(2, '0');
+            document.getElementById('clock').textContent = `${hours}:${minutes}`;
         }
+        // Update clock immediately and then every minute
+        updateClock();
+        setInterval(updateClock, 1000);
+        // Add subtle parallax effect to blobs on mouse move (Desktop only)
         document.addEventListener('mousemove', (e) => {
             const x = e.clientX / window.innerWidth;
             const y = e.clientY / window.innerHeight;
+            const blobs = document.querySelectorAll('.blob');
+            blobs.forEach((blob, index) => {
                 const speed = (index + 1) * 20;
+                const xOffset = (window.innerWidth / 2 - e.clientX) / speed;
+                const yOffset = (window.innerHeight / 2 - e.clientY) / speed;
+                // Keep the animation but add slight offset
+                blob.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
             });
         });
+        // Add touch feedback for mobile
+        const buttons = document.querySelectorAll('.btn, .feature');
+        buttons.forEach(btn => {
+            btn.addEventListener('touchstart', () => {
+                btn.style.transform = 'scale(0.95)';
+            });
+            btn.addEventListener('touchend', () => {
+                btn.style.transform = 'scale(1)';
             });
         });
     </script>