Spaces:

samirerty
/

anycoder-5bccc721

Running

App Files Files Community

samirerty commited on 18 days ago

Commit

8092a61

verified ·

1 Parent(s): f2bee13

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1025 -243

index.html CHANGED Viewed

@@ -2,409 +2,1191 @@
 <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>
 </body>
 </html>

 <html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>چت روم ساده | گفتگوی آنلاین</title>
+    <!-- Persian Font: Vazirmatn -->
+    <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@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --secondary: #ec4899;
+            --background: #0f172a;
+            --surface: rgba(30, 41, 59, 0.7);
+            --text: #f8fafc;
+            --text-muted: #94a3b8;
+            --border: rgba(148, 163, 184, 0.1);
+            --success: #10b981;
+            --warning: #f59e0b;
+            --glass: rgba(255, 255, 255, 0.05);
+            --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+        }
+        [data-theme="light"] {
+            --background: #f1f5f9;
+            --surface: rgba(255, 255, 255, 0.8);
+            --text: #1e293b;
+            --text-muted: #64748b;
+            --border: rgba(148, 163, 184, 0.2);
+            --glass: rgba(255, 255, 255, 0.6);
         }
         * {
             margin: 0;
             padding: 0;
+            box-sizing: border-box;
+        }
+        html {
+            scroll-behavior: smooth;
         }
         body {
             font-family: 'Vazirmatn', sans-serif;
+            background: var(--background);
+            color: var(--text);
             min-height: 100vh;
             overflow-x: hidden;
+            transition: background 0.3s ease, color 0.3s ease;
         }
+        /* Animated Background */
+        .bg-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
+        }
+        .bg-animation .circle {
             position: absolute;
             border-radius: 50%;
             filter: blur(80px);
+            opacity: 0.4;
+            animation: float 20s infinite ease-in-out;
         }
+        .circle:nth-child(1) {
+            width: 400px;
+            height: 400px;
+            background: var(--primary);
+            top: -100px;
+            right: -100px;
             animation-delay: 0s;
         }
+        .circle:nth-child(2) {
+            width: 300px;
+            height: 300px;
+            background: var(--secondary);
+            bottom: -50px;
+            left: -50px;
+            animation-delay: 5s;
         }
+        .circle:nth-child(3) {
+            width: 250px;
+            height: 250px;
+            background: var(--success);
+            top: 50%;
+            left: 50%;
+            animation-delay: 10s;
         }
         @keyframes float {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            33% { transform: translate(30px, -50px) scale(1.1); }
+            66% { transform: translate(-20px, 20px) scale(0.9); }
         }
+        /* Header */
+        header {
             position: fixed;
             top: 0;
             width: 100%;
+            padding: 1rem 2rem;
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid var(--border);
+            z-index: 1000;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 900;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .header-actions {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+        .built-with {
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 2rem;
+            background: var(--glass);
+            border: 1px solid var(--border);
+            transition: all 0.3s ease;
+        }
+        .built-with:hover {
+            background: var(--primary);
+            color: white;
+            transform: translateY(-2px);
+        }
+        .theme-toggle {
+            background: var(--glass);
+            border: 1px solid var(--border);
+            color: var(--text);
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            cursor: pointer;
             display: flex;
             align-items: center;
+            justify-content: center;
+            transition: all 0.3s ease;
+        }
+        .theme-toggle:hover {
+            transform: rotate(180deg);
+            background: var(--primary);
         }
         /* Main Container */
         .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 6rem 2rem 2rem;
+        }
+        /* Hero Section */
+        .hero {
+            text-align: center;
+            padding: 4rem 0;
+            animation: fadeInUp 1s ease;
         }
         @keyframes fadeInUp {
             from {
                 opacity: 0;
+                transform: translateY(30px);
             }
             to {
                 opacity: 1;
+                transform: translateY(0);
             }
         }
+        .hero h1 {
+            font-size: clamp(2rem, 5vw, 4rem);
+            font-weight: 900;
+            margin-bottom: 1rem;
+            line-height: 1.2;
         }
+        .hero h1 .emoji {
+            display: inline-block;
+            animation: bounce 2s infinite;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
         }
+        .subtitle {
+            font-size: 1.25rem;
+            color: var(--text-muted);
+            margin-bottom: 2rem;
+            font-weight: 300;
         }
         /* Features Grid */
         .features {
             display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+            margin: 4rem 0;
+            perspective: 1000px;
         }
         .feature {
+            background: var(--surface);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--border);
+            border-radius: 1.5rem;
+            padding: 2rem;
             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;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, transparent, rgba(255,255,255,0.05));
+            opacity: 0;
+            transition: opacity 0.3s;
         }
         .feature:hover {
+            transform: translateY(-10px) rotateX(5deg);
+            box-shadow: var(--shadow);
+            border-color: var(--primary);
         }
+        .feature:hover::before {
+            opacity: 1;
+        }
+        .icon {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            display: inline-block;
+            transition: transform 0.3s;
+        }
+        .feature:hover .icon {
+            transform: scale(1.2) rotate(10deg);
         }
         .feature h3 {
+            font-size: 1.25rem;
+            margin-bottom: 0.5rem;
+            color: var(--text);
         }
         .feature p {
+            color: var(--text-muted);
+            font-size: 0.95rem;
+            line-height: 1.6;
         }
+        /* CTA Section */
         .cta {
             display: flex;
+            gap: 1rem;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin: 3rem 0;
         }
         .btn {
+            padding: 1rem 2.5rem;
+            border-radius: 2rem;
+            font-family: inherit;
+            font-size: 1rem;
             font-weight: 700;
+            cursor: pointer;
             transition: all 0.3s ease;
+            border: none;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
             position: relative;
             overflow: hidden;
         }
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+        }
+        .btn-secondary {
+            background: var(--glass);
+            color: var(--text);
+            border: 2px solid var(--border);
+            backdrop-filter: blur(10px);
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        }
+        .btn:active {
+            transform: translateY(-1px);
+        }
+        .btn::after {
             content: '';
             position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.3);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+        .btn:active::after {
+            width: 300px;
+            height: 300px;
+        }
+        /* Modal Styles */
+        .modal {
+            display: none;
+            position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(5px);
+            z-index: 2000;
+            justify-content: center;
+            align-items: center;
             opacity: 0;
             transition: opacity 0.3s;
         }
+        .modal.active {
+            display: flex;
             opacity: 1;
         }
+        .modal-content {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 2rem;
+            padding: 2.5rem;
+            width: 90%;
+            max-width: 450px;
+            position: relative;
+            transform: scale(0.9);
+            transition: transform 0.3s;
+            box-shadow: var(--shadow);
         }
+        .modal.active .modal-content {
+            transform: scale(1);
+        }
+        .close-modal {
+            position: absolute;
+            top: 1rem;
+            left: 1rem;
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            font-size: 1.5rem;
+            cursor: pointer;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
         }
+        .close-modal:hover {
+            background: var(--glass);
+            color: var(--text);
+            transform: rotate(90deg);
         }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: var(--text);
+            font-weight: 500;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 2px solid var(--border);
+            border-radius: 1rem;
+            background: var(--glass);
+            color: var(--text);
+            font-family: inherit;
+            font-size: 1rem;
+            transition: all 0.3s;
         }
+        .form-group input:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
         }
+        .form-submit {
+            width: 100%;
+            margin-top: 1rem;
+        }
+        /* Chat Application Interface */
+        #chat-app {
+            display: none;
+            height: calc(100vh - 80px);
+            margin-top: 80px;
+        }
+        .chat-container {
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            height: 100%;
+            gap: 1rem;
+            padding: 1rem;
+        }
+        .sidebar {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 1.5rem;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            backdrop-filter: blur(10px);
+        }
+        .user-profile {
             text-align: center;
+            padding-bottom: 1rem;
+            border-bottom: 1px solid var(--border);
         }
+        .avatar {
+            width: 80px;
+            height: 80px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            margin: 0 auto 0.5rem;
+            border: 3px solid var(--border);
         }
+        .rooms-list {
+            flex: 1;
+            overflow-y: auto;
         }
+        .room-item {
+            padding: 1rem;
+            margin-bottom: 0.5rem;
+            border-radius: 1rem;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            border: 1px solid transparent;
+        }
+        .room-item:hover, .room-item.active {
+            background: var(--glass);
+            border-color: var(--primary);
+        }
+        .room-item.active {
+            background: rgba(99, 102, 241, 0.1);
+        }
+        .chat-area {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            backdrop-filter: blur(10px);
+        }
+        .chat-header {
+            padding: 1.5rem;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+        .message {
+            max-width: 70%;
+            padding: 1rem 1.25rem;
+            border-radius: 1.25rem;
+            position: relative;
+            animation: messageSlide 0.3s ease;
+        }
+        @keyframes messageSlide {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
             }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .message.sent {
+            align-self: flex-start;
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            border-bottom-right-radius: 0.25rem;
+        }
+        .message.received {
+            align-self: flex-end;
+            background: var(--glass);
+            border: 1px solid var(--border);
+            border-bottom-left-radius: 0.25rem;
+        }
+        .message-author {
+            font-size: 0.75rem;
+            opacity: 0.8;
+            margin-bottom: 0.25rem;
+            font-weight: 700;
+        }
+        .message-time {
+            font-size: 0.7rem;
+            opacity: 0.6;
+            margin-top: 0.5rem;
+            display: block;
+        }
+        .chat-input {
+            padding: 1.5rem;
+            border-top: 1px solid var(--border);
+            display: flex;
+            gap: 1rem;
+        }
+        .chat-input input {
+            flex: 1;
+            padding: 0.75rem 1.25rem;
+            border: 2px solid var(--border);
+            border-radius: 2rem;
+            background: var(--glass);
+            color: var(--text);
+            font-family: inherit;
+            font-size: 1rem;
+        }
+        .chat-input input:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        .send-btn {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background: var(--primary);
+            color: white;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.3s;
+            font-size: 1.25rem;
+        }
+        .send-btn:hover {
+            background: var(--primary-dark);
+            transform: scale(1.1);
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .chat-container {
                 grid-template-columns: 1fr;
+                position: relative;
             }
+            .sidebar {
+                position: absolute;
+                right: -100%;
+                top: 0;
+                height: 100%;
+                width: 280px;
+                z-index: 100;
+                transition: right 0.3s;
+                box-shadow: var(--shadow);
             }
+            .sidebar.open {
+                right: 0;
             }
+            .mobile-menu-btn {
+                display: block !important;
+            }
+            .features {
+                grid-template-columns: 1fr;
+            }
+        }
+        .mobile-menu-btn {
+            display: none;
+            background: var(--glass);
+            border: 1px solid var(--border);
+            color: var(--text);
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            cursor: pointer;
+        }
+        /* Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--border);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--primary);
+        }
+        /* Loading Animation */
+        .typing-indicator {
+            display: none;
+            align-self: flex-start;
+            background: var(--glass);
+            padding: 1rem 1.5rem;
+            border-radius: 1.25rem;
+            border-bottom-right-radius: 0.25rem;
+        }
+        .typing-indicator.active {
+            display: flex;
+            gap: 0.25rem;
+        }
+        .typing-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--text-muted);
+            border-radius: 50%;
+            animation: typing 1.4s infinite;
+        }
+        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-10px); }
         }
     </style>
 </head>
 <body>
+    <!-- Animated Background -->
+    <div class="bg-animation">
+        <div class="circle"></div>
+        <div class="circle"></div>
+        <div class="circle"></div>
+    </div>
+    <!-- Header -->
+    <header>
+        <div class="logo">
+            <i class="fas fa-comments"></i>
+            <span>چت روم</span>
         </div>
+        <div class="header-actions">
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+                <i class="fas fa-code"></i> Built with anycoder
+            </a>
+            <button class="theme-toggle" onclick="toggleTheme()" title="تغییر تم">
+                <i class="fas fa-moon"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Landing Page -->
+    <div id="landing" class="container">
         <div class="hero">
+            <h1><span class="emoji">💬</span> چت روم ساده</h1>
+            <p class="subtitle">محلی امن و سریع برای گفتگو با دوستان و همکاران</p>
         </div>
         <div class="features">
+            <div class="feature" onclick="showRegister()">
+                <div class="icon">🔐</div>
                 <h3>ثبت‌نام آسان</h3>
+                <p>با چند کلیک ساده ثبت‌نام کنید و بلافاصله شروع به چت کنید</p>
             </div>
+            <div class="feature" onclick="showRegister()">
+                <div class="icon">👥</div>
+                <h3>اتاق‌های گفتگو</h3>
+                <p>تا ۳ اتاق مختلف بسازید و گروه‌های خصوصی ایجاد کنید</p>
             </div>
+            <div class="feature" onclick="showRegister()">
+                <div class="icon">⚡</div>
                 <h3>چت زنده</h3>
+                <p>ارسال پیام فوری با قابلیت مشاهده وضعیت تایپ</p>
             </div>
         </div>
         <div class="cta">
+            <button onclick="showRegister()" class="btn btn-primary">
+                <i class="fas fa-rocket"></i>
+                شروع کنید
+            </button>
+            <button onclick="showLogin()" class="btn btn-secondary">
+                <i class="fas fa-sign-in-alt"></i>
+                ورود
+            </button>
+        </div>
+    </div>
+    <!-- Auth Modals -->
+    <div id="login-modal" class="modal">
+        <div class="modal-content">
+            <button class="close-modal" onclick="closeModals()">
+                <i class="fas fa-times"></i>
+            </button>
+            <h2 style="margin-bottom: 1.5rem; text-align: center;">
+                <i class="fas fa-sign-in-alt" style="color: var(--primary);"></i>
+                ورود به حساب
+            </h2>
+            <form onsubmit="handleLogin(event)">
+                <div class="form-group">
+                    <label>شماره موبایل</label>
+                    <input type="tel" placeholder="09*********" required pattern="09[0-9]{9}">
+                </div>
+                <div class="form-group">
+                    <label>رمز عبور</label>
+                    <input type="password" placeholder="••••••••" required>
+                </div>
+                <button type="submit" class="btn btn-primary form-submit">
+                    ورود
+                </button>
+            </form>
+            <p style="text-align: center; margin-top: 1rem; color: var(--text-muted);">
+                حساب ندارید؟
+                <a href="#" onclick="closeModals(); showRegister();" style="color: var(--primary); text-decoration: none;">ثبت‌نام کنید</a>
+            </p>
+        </div>
+    </div>
+    <div id="register-modal" class="modal">
+        <div class="modal-content">
+            <button class="close-modal" onclick="closeModals()">
+                <i class="fas fa-times"></i>
+            </button>
+            <h2 style="margin-bottom: 1.5rem; text-align: center;">
+                <i class="fas fa-user-plus" style="color: var(--secondary);"></i>
+                ایجاد حساب جدید
+            </h2>
+            <form onsubmit="handleRegister(event)">
+                <div class="form-group">
+                    <label>نام کامل</label>
+                    <input type="text" placeholder="نام و نام خانوادگی" required>
+                </div>
+                <div class="form-group">
+                    <label>شماره موبایل</label>
+                    <input type="tel" placeholder="09*********" required pattern="09[0-9]{9}">
+                </div>
+                <div class="form-group">
+                    <label>رمز عبور</label>
+                    <input type="password" placeholder="حداقل ۸ کاراکتر" required minlength="8">
+                </div>
+                <button type="submit" class="btn btn-primary form-submit">
+                    ثبت‌نام
+                </button>
+            </form>
         </div>
+    </div>
+    <!-- Chat Application -->
+    <div id="chat-app">
+        <div class="chat-container">
+            <aside class="sidebar" id="sidebar">
+                <div class="user-profile">
+                    <div class="avatar" id="user-avatar">👤</div>
+                    <h3 id="user-name">کاربر مهمان</h3>
+                    <p style="color: var(--text-muted); font-size: 0.875rem;">آنلاین</p>
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                    <h4 style="font-size: 0.875rem; color: var(--text-muted);">اتاق‌های شما</h4>
+                    <button onclick="createNewRoom()" style="background: var(--primary); color: white; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer;">
+                        <i class="fas fa-plus"></i>
+                    </button>
+                </div>
+                <div class="rooms-list" id="rooms-list">
+                    <div class="room-item active" onclick="switchRoom(0)">
+                        <i class="fas fa-hashtag" style="color: var(--primary);"></i>
+                        <div>
+                            <div style="font-weight: 700;">عمومی</div>
+                            <div style="font-size: 0.75rem; color: var(--text-muted);">۱۲ عضو آنلاین</div>
+                        </div>
+                    </div>
+                    <div class="room-item" onclick="switchRoom(1)">
+                        <i class="fas fa-lock" style="color: var(--secondary);"></i>
+                        <div>
+                            <div style="font-weight: 700;">خصوصی</div>
+                            <div style="font-size: 0.75rem; color: var(--text-muted);">۳ عضو</div>
+                        </div>
+                    </div>
+                </div>
+                <button onclick="logout()" class="btn btn-secondary" style="width: 100%; margin-top: auto;">
+                    <i class="fas fa-sign-out-alt"></i>
+                    خروج
+                </button>
+            </aside>
+            <main class="chat-area">
+                <div class="chat-header">
+                    <div style="display: flex; align-items: center; gap: 1rem;">
+                        <button class="mobile-menu-btn" onclick="toggleSidebar()">
+                            <i class="fas fa-bars"></i>
+                        </button>
+                        <div>
+                            <h3 id="current-room-name">اتاق عمومی</h3>
+                            <p style="font-size: 0.875rem; color: var(--text-muted);">
+                                <span class="online-count">۱۲</span> عضو آنلاین
+                            </p>
+                        </div>
+                    </div>
+                    <div style="display: flex; gap: 0.5rem;">
+                        <button style="background: var(--glass); border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: 50%; cursor: pointer;">
+                            <i class="fas fa-search"></i>
+                        </button>
+                        <button style="background: var(--glass); border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: 50%; cursor: pointer;">
+                            <i class="fas fa-ellipsis-v"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="chat-messages" id="chat-messages">
+                    <div class="message received">
+                        <div class="message-author">پشتیبانی</div>
+                        به چت روم خوش آمدید! 👋
+                        <span class="message-time">۱۰:۳۰</span>
+                    </div>
+                </div>
+                <div class="typing-indicator" id="typing-indicator">
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                    <div class="typing-dot"></div>
+                </div>
+                <div class="chat-input">
+                    <button style="background: none; border: none; color: var(--text-muted); font-size: 1.25rem; cursor: pointer;">
+                        <i class="fas fa-paperclip"></i>
+                    </button>
+                    <input type="text" id="message-input" placeholder="پیام خود را بنویسید..." onkeypress="handleKeyPress(event)">
+                    <button class="send-btn" onclick="sendMessage()">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+            </main>
         </div>
     </div>
     <script>
+        // State Management
+        let currentUser = null;
+        let currentRoom = 0;
+        let rooms = [
+            { name: 'عمومی', messages: [], online: 12 },
+            { name: 'خصوصی', messages: [], online: 3 }
+        ];
+        // Theme Toggle
+        function toggleTheme() {
+            const html = document.documentElement;
+            const currentTheme = html.getAttribute('data-theme');
+            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+            html.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            const icon = document.querySelector('.theme-toggle i');
+            icon.className = newTheme === 'light' ? 'fas fa-sun' : 'fas fa-moon';
+        }
+        // Initialize Theme
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        document.querySelector('.theme-toggle i').className = savedTheme === 'light' ? 'fas fa-sun' : 'fas fa-moon';
+        // Modal Functions
+        function showLogin() {
+            document.getElementById('login-modal').classList.add('active');
+        }
+        function showRegister() {
+            document.getElementById('register-modal').classList.add('active');
+        }
+        function closeModals() {
+            document.querySelectorAll('.modal').forEach(modal => {
+                modal.classList.remove('active');
+            });
+        }
+        // Close modal on outside click
+        document.querySelectorAll('.modal').forEach(modal => {
+            modal.addEventListener('click', (e) => {
+                if (e.target === modal) closeModals();
             });
         });
+        // Auth Functions
+        function handleLogin(e) {
+            e.preventDefault();
+            const phone = e.target.querySelector('input[type="tel"]').value;
+            const name = 'کاربر ' + phone.slice(-4);
+            loginUser(name);
+        }
+        function handleRegister(e) {
+            e.preventDefault();
+            const name = e.target.querySelector('input[type="text"]').value;
+            loginUser(name);
+        }
+        function loginUser(name) {
+            currentUser = name;
+            document.getElementById('user-name').textContent = name;
+            document.getElementById('user-avatar').textContent = name.charAt(0);
+            closeModals();
+            document.getElementById('landing').style.display = 'none';
+            document.getElementById('chat-app').style.display = 'block';
+            // Add welcome message
+            setTimeout(() => {
+                addMessage('system', `خوش آمدید ${name}! 🎉`);
+            }, 500);
+        }
+        function logout() {
+            currentUser = null;
+            document.getElementById('chat-app').style.display = 'none';
+            document.getElementById('landing').style.display = 'block';
+            document.getElementById('landing').style.animation = 'fadeInUp 1s ease';
+        }
+        // Chat Functions
+        function switchRoom(index) {
+            currentRoom = index;
+            // Update UI
+            document.querySelectorAll('.room-item').forEach((item, i) => {
+                item.classList.toggle('active', i === index);
             });
+            document.getElementById('current-room-name').textContent = rooms[index].name;
+            document.querySelector('.online-count').textContent = rooms[index].online;
+            // Clear and load messages
+            const messagesContainer = document.getElementById('chat-messages');
+            messagesContainer.innerHTML = '';
+            // Load room messages
+            if (rooms[index].messages.length === 0) {
+                const defaultMessages = [
+                    { author: 'پشتیبانی', text: `به اتاق ${rooms[index].name} خوش آمدید!`, time: '۱۰:۳۰', type: 'received' }
+                ];
+                rooms[index].messages = defaultMessages;
+            }
+            rooms[index].messages.forEach(msg => {
+                appendMessageToDOM(msg);
             });
+            // Mobile: close sidebar
+            if (window.innerWidth <= 768) {
+                document.getElementById('sidebar').classList.remove('open');
+            }
+        }
+        function createNewRoom() {
+            if (rooms.length >= 3) {
+                alert('حداکثر ۳ اتاق می‌توانید داشته باشید!');
+                return;
+            }
+            const name = prompt('نام اتاق جدید:');
+            if (name) {
+                rooms.push({ name, messages: [], online: 1 });
+                const roomHtml = `
+                    <div class="room-item" onclick="switchRoom(${rooms.length - 1})">
+                        <i class="fas fa-hashtag" style="color: var(--success);"></i>
+                        <div>
+                            <div style="font-weight: 700;">${name}</div>
+                            <div style="font-size: 0.75rem; color: var(--text-muted);">۱ عضو</div>
+                        </div>
+                    </div>
+                `;
+                document.getElementById('rooms-list').insertAdjacentHTML('beforeend', roomHtml);
+                switchRoom(rooms.length - 1);
+            }
+        }
+        function sendMessage() {
+            const input = document.getElementById('message-input');
+            const text = input.value.trim();
+            if (!text) return;
+            const message = {
+                author: currentUser,
+                text: text,
+                time: new Date().toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' }),
+                type: 'sent'
+            };
+            rooms[currentRoom].messages.push(message);
+            appendMessageToDOM(message);
+            input.value = '';
+            // Simulate received message
+            showTyping();
+            setTimeout(() => {
+                hideTyping();
+                const reply = {
+                    author: 'کاربر تصادفی',
+                    text: 'پیام شما دریافت شد! 👍',
+                    time: new Date().toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' }),
+                    type: 'received'
+                };
+                rooms[currentRoom].messages.push(reply);
+                appendMessageToDOM(reply);
+            }, 2000);
+            scrollToBottom();
+        }
+        function addMessage(author, text) {
+            const message = {
+                author: author === 'system' ? 'سیستم' : author,
+                text: text,
+                time: new Date().toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' }),
+                type: author === currentUser ? 'sent' : 'received'
+            };
+            rooms[currentRoom].messages.push(message);
+            appendMessageToDOM(message);
+            scrollToBottom();
+        }
+        function appendMessageToDOM(message) {
+            const container = document.getElementById('chat-messages');
+            const div = document.createElement('div');
+            div.className = `message ${message.type}`;
+            div.innerHTML = `
+                <div class="message-author">${message.author}</div>
+                ${message.text}
+                <span class="message-time">${message.time}</span>
+            `;
+            container.appendChild(div);
+            scrollToBottom();
+        }
+        function showTyping() {
+            document.getElementById('typing-indicator').classList.add('active');
+            scrollToBottom();
+        }
+        function hideTyping() {
+            document.getElementById('typing-indicator').classList.remove('active');
+        }
+        function scrollToBottom() {
+            const container = document.getElementById('chat-messages');
+            container.scrollTop = container.scrollHeight;
+        }
+        function handleKeyPress(e) {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        }
+        function toggleSidebar() {
+            document.getElementById('sidebar').classList.toggle('open');
+        }
+        // Initialize first room
+        switchRoom(0);
+        // Simulate random activity
+        setInterval(() => {
+            if (currentUser && Math.random() > 0.7) {
+                const roomIndex = Math.floor(Math.random() * rooms.length);
+                rooms[roomIndex].online += Math.random() > 0.5 ? 1 : -1;
+                if (rooms[roomIndex].online < 1) rooms[roomIndex].online = 1;
+                if (roomIndex === currentRoom) {
+                    document.querySelector('.online-count').textContent = rooms[roomIndex].online;
+                }
+            }
+        }, 10000);
     </script>
 </body>
 </html>