Spaces:

samirerty
/

anycoder-a5a3f55d

Running

App Files Files Community

samirerty commited on Feb 4

Commit

0dce550

verified ·

1 Parent(s): 8ab97c9

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +901 -19

index.html CHANGED Viewed

@@ -1,19 +1,901 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>چت روم مینیمال | Minimal Chat Room</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Vazirmatn Font -->
+    <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;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <!-- Confetti for effects -->
+    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Vazirmatn', 'sans-serif'],
+                    },
+                    colors: {
+                        glass: {
+                            100: 'rgba(255, 255, 255, 0.1)',
+                            200: 'rgba(255, 255, 255, 0.2)',
+                            300: 'rgba(255, 255, 255, 0.3)',
+                            400: 'rgba(255, 255, 255, 0.4)',
+                            800: 'rgba(0, 0, 0, 0.3)',
+                            900: 'rgba(0, 0, 0, 0.6)',
+                        },
+                        primary: {
+                            50: '#f0fdfa',
+                            100: '#ccfbf1',
+                            200: '#99f6e4',
+                            300: '#5eead4',
+                            400: '#2dd4bf',
+                            500: '#14b8a6',
+                            600: '#0d9488',
+                            700: '#0f766e',
+                            800: '#115e59',
+                            900: '#134e4a',
+                        }
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'slide-up': 'slideUp 0.5s ease-out',
+                        'slide-down': 'slideDown 0.5s ease-out',
+                        'fade-in': 'fadeIn 0.3s ease-out',
+                        'bounce-gentle': 'bounceGentle 2s ease-in-out infinite',
+                        'shake': 'shake 0.5s ease-in-out',
+                        'spin-slow': 'spin 3s linear infinite',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        },
+                        slideUp: {
+                            '0%': { transform: 'translateY(100%)', opacity: '0' },
+                            '100%': { transform: 'translateY(0)', opacity: '1' },
+                        },
+                        slideDown: {
+                            '0%': { transform: 'translateY(-100%)', opacity: '0' },
+                            '100%': { transform: 'translateY(0)', opacity: '1' },
+                        },
+                        fadeIn: {
+                            '0%': { opacity: '0' },
+                            '100%': { opacity: '1' },
+                        },
+                        bounceGentle: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-10px)' },
+                        },
+                        shake: {
+                            '0%, 100%': { transform: 'translateX(0)' },
+                            '25%': { transform: 'translateX(-5px)' },
+                            '75%': { transform: 'translateX(5px)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        /* CSS Custom Properties for theming */
+        :root {
+            --glass-blur: 20px;
+            --glass-saturation: 180%;
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --dark-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+        }
+        /* Global Reset */
+        * {
+            -webkit-tap-highlight-color: transparent;
+            -webkit-touch-callout: none;
+        }
+        /* Smooth Scrolling */
+        html {
+            scroll-behavior: smooth;
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+        /* Glassmorphism Base */
+        .glass {
+            background: rgba(255, 255, 255, 0.08);
+            backdrop-filter: blur(var(--glass-blur));
+            -webkit-backdrop-filter: blur(var(--glass-blur));
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .glass-dark {
+            background: rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(var(--glass-blur));
+            -webkit-backdrop-filter: blur(var(--glass-blur));
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        .glass-card {
+            background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+            backdrop-filter: blur(var(--glass-blur));
+            -webkit-backdrop-filter: blur(var(--glass-blur));
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+        /* Animated Background */
+        .aurora-bg {
+            background: var(--dark-gradient);
+            position: fixed;
+            inset: 0;
+            z-index: -1;
+            overflow: hidden;
+        }
+        .aurora-bg::before {
+            content: '';
+            position: absolute;
+            width: 200%;
+            height: 200%;
+            top: -50%;
+            left: -50%;
+            background:
+                radial-gradient(ellipse at 20% 20%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(ellipse at 80% 80%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
+                radial-gradient(ellipse at 40% 60%, rgba(99, 102, 241, 0.2) 0%, transparent 50%);
+            animation: aurora 20s ease-in-out infinite;
+        }
+        @keyframes aurora {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            33% { transform: translate(30px, -50px) rotate(120deg); }
+            66% { transform: translate(-20px, 20px) rotate(240deg); }
+        }
+        /* Floating Particles */
+        .particle {
+            position: absolute;
+            border-radius: 50%;
+            opacity: 0.5;
+            animation: float 15s ease-in-out infinite;
+        }
+        /* Message Bubbles */
+        .message-bubble {
+            position: relative;
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .message-bubble.sent {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-radius: 20px 20px 4px 20px;
+        }
+        .message-bubble.received {
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 20px 20px 20px 4px;
+        }
+        /* Typing Indicator */
+        .typing-indicator {
+            display: flex;
+            gap: 4px;
+            padding: 12px 16px;
+        }
+        .typing-indicator span {
+            width: 8px;
+            height: 8px;
+            background: rgba(255, 255, 255, 0.6);
+            border-radius: 50%;
+            animation: typingBounce 1.4s ease-in-out infinite both;
+        }
+        .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+        .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+        @keyframes typingBounce {
+            0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
+            40% { transform: scale(1); opacity: 1; }
+        }
+        /* Input Focus Effects */
+        .input-glow:focus {
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3);
+        }
+        /* Button Ripple Effect */
+        .btn-ripple {
+            position: relative;
+            overflow: hidden;
+        }
+        .btn-ripple::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
+            transform: scale(0);
+            opacity: 0;
+            transition: transform 0.5s, opacity 0.3s;
+        }
+        .btn-ripple:active::after {
+            transform: scale(2);
+            opacity: 1;
+            transition: 0s;
+        }
+        /* Mobile Optimizations */
+        @media (max-width: 768px) {
+            .mobile-safe-bottom {
+                padding-bottom: env(safe-area-inset-bottom, 20px);
+            }
+            .mobile-touch-target {
+                min-height: 44px;
+                min-width: 44px;
+            }
+            .message-bubble {
+                max-width: 90%;
+            }
+        }
+        /* Dark Mode Support */
+        @media (prefers-color-scheme: dark) {
+            :root {
+                color-scheme: dark;
+            }
+        }
+        /* Reduced Motion */
+        @media (prefers-reduced-motion: reduce) {
+            *, *::before, *::after {
+                animation-duration: 0.01ms !important;
+                animation-iteration-count: 1 !important;
+                transition-duration: 0.01ms !important;
+            }
+        }
+        /* Utility Classes */
+        .text-gradient {
+            background: linear-gradient(135deg, #667eea 0%, #f093fb 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .glow-effect {
+            box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
+        }
+        /* Room Card Hover */
+        .room-card {
+            transition: all 0.3s ease;
+        }
+        .room-card:hover {
+            transform: translateY(-4px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+        }
+        .room-card.active {
+            background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
+            border-color: rgba(102, 126, 234, 0.5);
+        }
+        /* Swipe Indicator */
+        .swipe-hint {
+            animation: swipeHint 2s ease-in-out infinite;
+        }
+        @keyframes swipeHint {
+            0%, 100% { transform: translateX(0); opacity: 0.5; }
+            50% { transform: translateX(-10px); opacity: 1; }
+        }
+        /* Loading Shimmer */
+        .shimmer {
+            background: linear-gradient(90deg,
+                rgba(255,255,255,0) 0%,
+                rgba(255,255,255,0.1) 50%,
+                rgba(255,255,255,0) 100%);
+            background-size: 200% 100%;
+            animation: shimmer 1.5s infinite;
+        }
+        @keyframes shimmer {
+            0% { background-position: -200% 0; }
+            100% { background-position: 200% 0; }
+        }
+    </style>
+</head>
+<body class="font-sans text-white min-h-screen overflow-hidden">
+    <!-- Animated Background -->
+    <div class="aurora-bg" id="auroraBg"></div>
+    <!-- Floating Particles Container -->
+    <div id="particles" class="fixed inset-0 pointer-events-none"></div>
+    <!-- Main App Container -->
+    <div id="app" class="relative h-screen flex flex-col">
+        <!-- Header with Built with anycoder -->
+        <header class="glass-dark px-4 py-3 flex items-center justify-between z-50">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
+                    <i class="ph ph-chat-circle-text text-xl"></i>
+                </div>
+                <div>
+                    <h1 class="font-bold text-lg">چت روم مینیمال</h1>
+                    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs text-primary-300 hover:text-primary-200 transition-colors">
+                        Built with anycoder
+                    </a>
+                </div>
+            </div>
+            <button id="themeToggle" class="p-2 rounded-lg hover:bg-white/10 transition-colors mobile-touch-target">
+                <i class="ph ph-moon text-xl"></i>
+            </button>
+        </header>
+        <!-- Auth Screen -->
+        <div id="authScreen" class="flex-1 flex items-center justify-center p-4">
+            <div class="glass-card rounded-3xl p-8 w-full max-w-md animate-slide-up">
+                <div class="text-center mb-8">
+                    <div class="w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br from-primary-400 to-purple-600 flex items-center justify-center mb-4 animate-bounce-gentle">
+                        <i class="ph ph-chat-teardrop-text text-4xl"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold mb-2">خوش آمدید</h2>
+                    <p class="text-gray-400">برای ورود شماره موبایل خود را وارد کنید</p>
+                </div>
+                <form id="authForm" class="space-y-4">
+                    <div class="relative">
+                        <i class="ph ph-device-mobile absolute right-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                        <input
+                            type="tel"
+                            id="phoneInput"
+                            placeholder="۰۹۱۲۳۴۵۶۷۸۹"
+                            class="w-full bg-glass-100 border border-glass-200 rounded-xl py-4 pr-12 pl-4 text-left placeholder:text-gray-500 focus:outline-none focus:border-primary-400 input-glow transition-all"
+                            maxlength="11"
+                            dir="ltr"
+                        >
+                    </div>
+                    <div id="otpSection" class="hidden space-y-4 animate-fade-in">
+                        <div class="relative">
+                            <i class="ph ph-lock-key absolute right-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                            <input
+                                type="text"
+                                id="otpInput"
+                                placeholder="کد تأیید"
+                                class="w-full bg-glass-100 border border-glass-200 rounded-xl py-4 pr-12 pl-4 text-center text-2xl tracking-[0.5em] placeholder:text-gray-500 placeholder:tracking-normal placeholder:text-base focus:outline-none focus:border-primary-400 input-glow transition-all"
+                                maxlength="6"
+                                dir="ltr"
+                            >
+                        </div>
+                        <div class="flex items-center justify-between text-sm">
+                            <span id="timer" class="text-gray-400">۰۲:۰۰</span>
+                            <button type="button" id="resendBtn" class="text-primary-400 hover:text-primary-300 disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                                ارسال مجدد
+                            </button>
+                        </div>
+                    </div>
+                    <button
+                        type="submit"
+                        id="authBtn"
+                        class="w-full bg-gradient-to-r from-primary-500 to-purple-600 hover:from-primary-600 hover:to-purple-700 text-white font-semibold py-4 rounded-xl btn-ripple transition-all transform hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-2"
+                    >
+                        <span id="authBtnText">دریافت کد تأیید</span>
+                        <i id="authBtnIcon" class="ph ph-arrow-left"></i>
+                        <div id="authLoading" class="hidden w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                    </button>
+                </form>
+                <div class="mt-6 text-center">
+                    <p class="text-sm text-gray-500">
+                        با ورود، <a href="#" class="text-primary-400 hover:underline">قوانین و مقررات</a> را می‌پذیرم
+                    </p>
+                </div>
+            </div>
+        </div>
+        <!-- Main Chat Interface (Hidden initially) -->
+        <div id="chatInterface" class="hidden flex-1 flex overflow-hidden">
+            <!-- Sidebar - Room List -->
+            <aside id="sidebar" class="w-80 glass-dark flex flex-col transition-transform duration-300 absolute md:relative z-40 h-full -translate-x-full md:translate-x-0">
+                <!-- User Profile -->
+                <div class="p-4 border-b border-glass-200">
+                    <div class="flex items-center gap-3">
+                        <div class="relative">
+                            <img src="https://api.dicebear.com/7.x/avataaars/svg?seed=user123" alt="Profile" class="w-12 h-12 rounded-full bg-glass-200">
+                            <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-gray-900"></div>
+                        </div>
+                        <div class="flex-1">
+                            <h3 id="userName" class="font-semibold">کاربر مهمان</h3>
+                            <p class="text-xs text-gray-400">آنلاین</p>
+                        </div>
+                        <button class="p-2 rounded-lg hover:bg-white/10">
+                            <i class="ph ph-gear text-lg"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Search -->
+                <div class="p-4">
+                    <div class="relative">
+                        <i class="ph ph-magnifying-glass absolute right-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                        <input
+                            type="text"
+                            placeholder="جستجوی اتاق..."
+                            class="w-full bg-glass-100 rounded-xl py-2.5 pr-10 pl-4 text-sm placeholder:text-gray-500 focus:outline-none focus:bg-glass-200 transition-all"
+                        >
+                    </div>
+                </div>
+                <!-- Room List -->
+                <div class="flex-1 overflow-y-auto p-2 space-y-2" id="roomList">
+                    <!-- Rooms will be populated by JS -->
+                </div>
+                <!-- Create Room Button -->
+                <div class="p-4 border-t border-glass-200">
+                    <button onclick="app.createRoom()" class="w-full glass-card rounded-xl py-3 flex items-center justify-center gap-2 hover:bg-white/10 transition-all btn-ripple">
+                        <i class="ph ph-plus-circle text-primary-400"></i>
+                        <span>ایجاد اتاق جدید</span>
+                    </button>
+                </div>
+            </aside>
+            <!-- Overlay for mobile sidebar -->
+            <div id="sidebarOverlay" class="fixed inset-0 bg-black/50 z-30 hidden md:hidden backdrop-blur-sm" onclick="app.toggleSidebar()"></div>
+            <!-- Chat Area -->
+            <main class="flex-1 flex flex-col min-w-0">
+                <!-- Chat Header -->
+                <div class="glass px-4 py-3 flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                        <button onclick="app.toggleSidebar()" class="md:hidden p-2 rounded-lg hover:bg-white/10 mobile-touch-target">
+                            <i class="ph ph-list text-xl"></i>
+                        </button>
+                        <div class="relative">
+                            <img id="currentRoomAvatar" src="" alt="Room" class="w-10 h-10 rounded-xl bg-glass-200">
+                            <div id="roomOnlineIndicator" class="absolute -bottom-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-900 hidden"></div>
+                        </div>
+                        <div class="min-w-0">
+                            <h3 id="currentRoomName" class="font-semibold truncate">انتخاب اتاق</h3>
+                            <p id="currentRoomStatus" class="text-xs text-gray-400 truncate">یک اتاق را انتخاب کنید</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center gap-2">
+                        <button class="p-2 rounded-lg hover:bg-white/10 mobile-touch-target" onclick="app.toggleSearch()">
+                            <i class="ph ph-magnifying-glass text-lg"></i>
+                        </button>
+                        <button class="p-2 rounded-lg hover:bg-white/10 mobile-touch-target relative" onclick="app.showMembers()">
+                            <i class="ph ph-users text-lg"></i>
+                            <span id="memberCount" class="absolute -top-1 -right-1 w-5 h-5 bg-primary-500 rounded-full text-xs flex items-center justify-center hidden">0</span>
+                        </button>
+                        <button class="p-2 rounded-lg hover:bg-white/10 mobile-touch-target">
+                            <i class="ph ph-dots-three-vertical text-lg"></i>
+                        </button>
+                    </div>
+                </div>
+                <!-- Messages Container -->
+                <div id="messagesContainer" class="flex-1 overflow-y-auto p-4 space-y-4 mobile-safe-bottom">
+                    <div class="flex flex-col items-center justify-center h-full text-gray-400">
+                        <i class="ph ph-chat-circle-dots text-6xl mb-4 opacity-50"></i>
+                        <p>پیامی وجود ندارد</p>
+                        <p class="text-sm mt-2">اولین پیام را ارسال کنید!</p>
+                    </div>
+                </div>
+                <!-- Typing Indicator -->
+                <div id="typingIndicator" class="hidden px-4 py-2">
+                    <div class="glass rounded-2xl rounded-tr-sm inline-flex">
+                        <div class="typing-indicator">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                    <span class="text-xs text-gray-400 mr-2" id="typingName">درحال تایپ...</span>
+                </div>
+                <!-- Input Area -->
+                <div class="glass-dark p-4 mobile-safe-bottom">
+                    <div class="flex items-end gap-2 max-w-4xl mx-auto">
+                        <button class="p-3 rounded-xl hover:bg-white/10 transition-colors mobile-touch-target flex-shrink-0" onclick="app.attachFile()">
+                            <i class="ph ph-paperclip text-xl text-gray-400"></i>
+                        </button>
+                        <div class="flex-1 relative">
+                            <textarea
+                                id="messageInput"
+                                placeholder="پیام خود را بنویسید..."
+                                class="w-full bg-glass-100 rounded-2xl py-3 px-4 pr-12 resize-none focus:outline-none focus:bg-glass-200 transition-all max-h-32"
+                                rows="1"
+                                oninput="app.autoResize(this)"
+                                onkeydown="app.handleEnter(event)"
+                            ></textarea>
+                            <button class="absolute left-3 bottom-3 p-1.5 rounded-lg hover:bg-white/10 transition-colors" onclick="app.insertEmoji()">
+                                <i class="ph ph-smiley text-xl text-gray-400"></i>
+                            </button>
+                        </div>
+                        <button
+                            id="sendBtn"
+                            onclick="app.sendMessage()"
+                            class="p-3 rounded-xl bg-gradient-to-r from-primary-500 to-purple-600 hover:from-primary-600 hover:to-purple-700 transition-all btn-ripple mobile-touch-target flex-shrink-0 disabled:opacity-50 disabled:cursor-not-allowed"
+                            disabled
+                        >
+                            <i class="ph ph-paper-plane-right text-xl"></i>
+                        </button>
+                    </div>
+                </div>
+            </main>
+        </div>
+        <!-- Create Room Modal -->
+        <div id="createRoomModal" class="fixed inset-0 z-50 hidden items-center justify-center p-4">
+            <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="app.closeCreateRoom()"></div>
+            <div class="glass-card rounded-2xl p-6 w-full max-w-md relative animate-slide-up">
+                <button onclick="app.closeCreateRoom()" class="absolute top-4 left-4 p-2 rounded-lg hover:bg-white/10">
+                    <i class="ph ph-x text-xl"></i>
+                </button>
+                <h3 class="text-xl font-bold mb-6">ایجاد اتاق جدید</h3>
+                <form onsubmit="app.submitCreateRoom(event)" class="space-y-4">
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">نام اتاق</label>
+                        <input type="text" id="newRoomName" required class="w-full bg-glass-100 rounded-xl py-3 px-4 focus:outline-none focus:border-primary-400 border border-transparent input-glow" placeholder="مثال: گفتگوی عمومی">
+                    </div>
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">توضیحات</label>
+                        <textarea id="newRoomDesc" rows="3" class="w-full bg-glass-100 rounded-xl py-3 px-4 focus:outline-none focus:border-primary-400 border border-transparent input-glow resize-none" placeholder="توضیحات اتاق..."></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-sm text-gray-400 mb-2">رنگ تم</label>
+                        <div class="flex gap-3">
+                            <button type="button" onclick="app.selectColor('blue')" class="w-10 h-10 rounded-xl bg-blue-500 ring-2 ring-offset-2 ring-offset-gray-900 ring-transparent hover:ring-white transition-all color-select selected" data-color="blue"></button>
+                            <button type="button" onclick="app.selectColor('purple')" class="w-10 h-10 rounded-xl bg-purple-500 ring-2 ring-offset-2 ring-offset-gray-900 ring-transparent hover:ring-white transition-all color-select" data-color="purple"></button>
+                            <button type="button" onclick="app.selectColor('pink')" class="w-10 h-10 rounded-xl bg-pink-500 ring-2 ring-offset-2 ring-offset-gray-900 ring-transparent hover:ring-white transition-all color-select" data-color="pink"></button>
+                            <button type="button" onclick="app.selectColor('green')" class="w-10 h-10 rounded-xl bg-green-500 ring-2 ring-offset-2 ring-offset-gray-900 ring-transparent hover:ring-white transition-all color-select" data-color="green"></button>
+                            <button type="button" onclick="app.selectColor('orange')" class="w-10 h-10 rounded-xl bg-orange-500 ring-2 ring-offset-2 ring-offset-gray-900 ring-transparent hover:ring-white transition-all color-select" data-color="orange"></button>
+                        </div>
+                    </div>
+                    <button type="submit" class="w-full bg-gradient-to-r from-primary-500 to-purple-600 hover:from-primary-600 hover:to-purple-700 text-white font-semibold py-3 rounded-xl btn-ripple transition-all">
+                        ایجاد اتاق
+                    </button>
+                </form>
+            </div>
+        </div>
+        <!-- Members Modal -->
+        <div id="membersModal" class="fixed inset-0 z-50 hidden items-center justify-end md:justify-center">
+            <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" onclick="app.closeMembers()"></div>
+            <div class="glass-card h-full md:h-auto md:max-h-[80vh] md:rounded-2xl w-full md:w-80 relative animate-slide-up md:animate-fade-in flex flex-col">
+                <div class="p-4 border-b border-glass-200 flex items-center justify-between">
+                    <h3 class="font-bold">اعضای اتاق</h3>
+                    <button onclick="app.closeMembers()" class="p-2 rounded-lg hover:bg-white/10">
+                        <i class="ph ph-x text-xl"></i>
+                    </button>
+                </div>
+                <div id="membersList" class="flex-1 overflow-y-auto p-2 space-y-1">
+                    <!-- Members populated by JS -->
+                </div>
+            </div>
+        </div>
+        <!-- Emoji Picker -->
+        <div id="emojiPicker" class="fixed bottom-20 left-4 right-4 md:left-auto md:right-20 md:w-80 glass-card rounded-2xl p-4 hidden z-40">
+            <div class="grid grid-cols-8 gap-2">
+                <!-- Emojis populated by JS -->
+            </div>
+        </div>
+        <!-- Toast Container -->
+        <div id="toastContainer" class="fixed top-20 left-4 right-4 md:left-auto md:right-4 md:w-80 space-y-2 z-50 pointer-events-none"></div>
+    </div>
+    <script>
+        // Application State
+        const state = {
+            user: null,
+            currentRoom: null,
+            rooms: [],
+            messages: {},
+            typingTimeout: null,
+            selectedColor: 'blue',
+            isSidebarOpen: false
+        };
+        // Sample Data
+        const sampleRooms = [
+            { id: 1, name: 'گفتگوی عمومی', desc: 'بحث آزاد درباره هر موضوعی', color: 'blue', members: 234, online: 45, avatar: 'https://api.dicebear.com/7.x/identicon/svg?seed=general' },
+            { id: 2, name: 'برنامه‌نویسی', desc: 'بحث‌های فنی و کدنویسی', color: 'purple', members: 156, online: 23, avatar: 'https://api.dicebear.com/7.x/identicon/svg?seed=code' },
+            { id: 3, name: 'طراحی UI/UX', desc: 'طراحی رابط کاربری و تجربه کاربری', color: 'pink', members: 89, online: 12, avatar: 'https://api.dicebear.com/7.x/identicon/svg?seed=design' },
+            { id: 4, name: 'بازی و سرگرمی', desc: 'گیمینگ و بحث‌های مرتبط', color: 'green', members: 312, online: 78, avatar: 'https://api.dicebear.com/7.x/identicon/svg?seed=game' },
+        ];
+        const sampleMembers = [
+            { id: 1, name: 'علی محمدی', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=ali', online: true },
+            { id: 2, name: 'سارا احمدی', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=sara', online: true },
+            { id: 3, name: 'محمد رضایی', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=mohammad', online: false },
+            { id: 4, name: 'مریم کریمی', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=maryam', online: true },
+            { id: 5, name: 'حسن نوری', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=hassan', online: false },
+        ];
+        const emojis = ['😀', '😂', '🥰', '😎', '🤔', '👍', '❤️', '🔥', '🎉', '✨', '😊', '😉', '😋', '🤗', '🤩', '😴', '😭', '😤', '💪', '🙏', '👏', '🎊', '💯', '🚀', '💡', '🌟', '🍕', '🎮', '📱', '💻', '⌨️', '🖱️'];
+        // Application Controller
+        const app = {
+            init() {
+                this.createParticles();
+                this.populateEmojiPicker();
+                this.setupEventListeners();
+                this.loadRooms();
+            },
+            createParticles() {
+                const container = document.getElementById('particles');
+                const colors = ['rgba(102, 126, 234, 0.3)', 'rgba(118, 75, 162, 0.3)', 'rgba(240, 147, 251, 0.2)'];
+                for (let i = 0; i < 20; i++) {
+                    const particle = document.createElement('div');
+                    particle.className = 'particle';
+                    particle.style.width = Math.random() * 100 + 50 + 'px';
+                    particle.style.height = particle.style.width;
+                    particle.style.left = Math.random() * 100 + '%';
+                    particle.style.top = Math.random() * 100 + '%';
+                    particle.style.background = colors[Math.floor(Math.random() * colors.length)];
+                    particle.style.animationDelay = Math.random() * 15 + 's';
+                    particle.style.animationDuration = (Math.random() * 10 + 15) + 's';
+                    container.appendChild(particle);
+                }
+            },
+            populateEmojiPicker() {
+                const grid = document.querySelector('#emojiPicker .grid');
+                emojis.forEach(emoji => {
+                    const btn = document.createElement('button');
+                    btn.className = 'p-2 rounded-lg hover:bg-white/10 transition-colors text-2xl';
+                    btn.textContent = emoji;
+                    btn.onclick = () => this.insertEmojiToInput(emoji);
+                    grid.appendChild(btn);
+                });
+            },
+            setupEventListeners() {
+                // Phone input formatting
+                const phoneInput = document.getElementById('phoneInput');
+                phoneInput.addEventListener('input', (e) => {
+                    let value = e.target.value.replace(/\D/g, '');
+                    if (value.length > 11) value = value.slice(0, 11);
+                    e.target.value = this.toPersianNumber(value);
+                });
+                // OTP input
+                const otpInput = document.getElementById('otpInput');
+                otpInput.addEventListener('input', (e) => {
+                    e.target.value = e.target.value.replace(/\D/g, '');
+                });
+                // Auth form
+                document.getElementById('authForm').addEventListener('submit', (e) => this.handleAuth(e));
+                // Message input
+                const messageInput = document.getElementById('messageInput');
+                messageInput.addEventListener('input', () => {
+                    document.getElementById('sendBtn').disabled = !messageInput.value.trim();
+                    this.handleTyping();
+                });
+                // Click outside to close emoji picker
+                document.addEventListener('click', (e) => {
+                    const emojiPicker = document.getElementById('emojiPicker');
+                    if (!e.target.closest('#emojiPicker') && !e.target.closest('[onclick="app.insertEmoji()"]')) {
+                        emojiPicker.classList.add('hidden');
+                    }
+                });
+                // Keyboard shortcuts
+                document.addEventListener('keydown', (e) => {
+                    if (e.key === 'Escape') {
+                        this.closeCreateRoom();
+                        this.closeMembers();
+                        document.getElementById('emojiPicker').classList.add('hidden');
+                    }
+                });
+            },
+            toPersianNumber(num) {
+                const persian = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+                return num.toString().replace(/\d/g, d => persian[d]);
+            },
+            toEnglishNumber(num) {
+                return num.replace(/[۰-۹]/g, d => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d));
+            },
+            handleAuth(e) {
+                e.preventDefault();
+                const phoneInput = document.getElementById('phoneInput');
+                const otpSection = document.getElementById('otpSection');
+                const authBtn = document.getElementById('authBtn');
+                const authBtnText = document.getElementById('authBtnText');
+                const authLoading = document.getElementById('authLoading');
+                const phone = this.toEnglishNumber(phoneInput.value);
+                if (!otpSection.classList.contains('hidden')) {
+                    // Verify OTP
+                    const otp = document.getElementById('otpInput').value;
+                    if (otp.length === 6) {
+                        this.completeAuth(phone);
+                    } else {
+                        this.showToast('لطفاً کد ۶ رقمی را وارد کنید', 'error');
+                        document.getElementById('otpInput').parentElement.classList.add('animate-shake');
+                        setTimeout(() => document.getElementById('otpInput').parentElement.classList.remove('animate-shake'), 500);
+                    }
+                } else {
+                    // Send OTP
+                    if (phone.length === 11 && phone.startsWith('09')) {
+                        authBtn.disabled = true;
+                        authBtnText.textContent = 'در حال ارسال...';
+                        authLoading.classList.remove('hidden');
+                        document.getElementById('authBtnIcon').classList.add('hidden');
+                        setTimeout(() => {
+                            otpSection.classList.remove('hidden');
+                            authBtnText.textContent = 'ورود';
+                            authLoading.classList.add('hidden');
+                            document.getElementById('authBtnIcon').classList.remove('hidden');
+                            authBtn.disabled = false;
+                            document.getElementById('otpInput').focus();
+                            this.startTimer();
+                            this.showToast('کد تأیید ارسال شد: ۱۲۳۴۵۶', 'success');
+                        }, 1500);
+                    } else {
+                        this.showToast('شماره موبایل معتبر نیست', 'error');
+                        phoneInput.parentElement.classList.add('animate-shake');
+                        setTimeout(() => phoneInput.parentElement.classList.remove('animate-shake'), 500);
+                    }
+                }
+            },
+            startTimer() {
+                let seconds = 120;
+                const timerEl = document.getElementById('timer');
+                const resendBtn = document.getElementById('resendBtn');
+                const interval = setInterval(() => {
+                    seconds--;
+                    const mins = Math.floor(seconds / 60);
+                    const secs = seconds % 60;
+                    timerEl.textContent = this.toPersianNumber(`${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`);
+                    if (seconds <= 0) {
+                        clearInterval(interval);
+                        resendBtn.disabled = false;
+                        timerEl.textContent = '۰۰:۰۰';
+                    }
+                }, 1000);
+            },
+            completeAuth(phone) {
+                const authBtn = document.getElementById('authBtn');
+                const authBtnText = document.getElementById('authBtnText');
+                const authLoading = document.getElementById('authLoading');
+                authBtn.disabled = true;
+                authBtnText.textContent = 'در حال ورود...';
+                authLoading.classList.remove('hidden');
+                document.getElementById('authBtnIcon').classList.add('hidden');
+                setTimeout(() => {
+                    state.user = {
+                        phone: phone,
+                        name: 'کاربر ' + phone.slice(-4),
+                        avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${phone}`
+                    };
+                    document.getElementById('userName').textContent = state.user.name;
+                    document.querySelector('#sidebar img').src = state.user.avatar;
+                    // Confetti effect
+                    confetti({
+                        particleCount: 100,
+                        spread: 70,
+                        origin: { y: 0.6 },
+                        colors: ['#667eea', '#764ba2', '#f093fb']
+                    });
+                    document.getElementById('authScreen').classList.add('hidden');
+                    document.getElementById('chatInterface').classList.remove('hidden');
+                    document.getElementById('chatInterface').classList.add('animate-fade-in');
+                    this.selectRoom(state.rooms[0].id);
+                    this.showToast(`خوش آمدید ${state.user.name}!`, 'success');
+                }, 1500);
+            },
+            loadRooms() {
+                state.rooms = [...sampleRooms];
+                this.renderRooms();
+            },
+            renderRooms() {
+                const container = document.getElementById('roomList');
+                container.innerHTML = state.rooms.map(room => `
+                    <div class="room-card p-3 rounded-xl cursor-pointer flex items-center gap-3 ${state.currentRoom?.id === room.id ? 'active' : ''}"
+                         onclick="app.selectRoom(${room.id})" data-room-id="${room.id}">
+                        <div class="relative">
+                            <img src="${room.avatar}" alt="${room.name}" class="w-12 h-12 rounded-xl bg-glass-200">
+                            ${room.online > 0 ? `<div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-gray-900 flex items-center justify-center">
+                                <span class="text-[8px] font-bold">${room.online > 99 ? '99+' : room.online}</span>
+                            </div>` : ''}
+                        </div>
+                        <div class="flex-1 min-w-0">
+                            <div class="flex items-center justify-between">
+                                <h4 class="font-semibold truncate">${room.name}</h4>
+                                <span class="text-xs text-gray-500">۱۲:۳۰</span>
+                            </div>
+                            <p class="text-sm text-gray-400 truncate">${room.desc}</p>
+                        </div>
+                        ${Math.random() > 0.5 ? `<div class="w-5 h-5 bg-primary-500 rounded-full flex items-center justify-center text-xs font-bold">${Math.floor(Math.random() * 5) + 1}</div>` : ''}
+                    </div>
+                `).join('');
+            },
+            selectRoom(roomId) {
+                const room = state.rooms.find(r => r.id === roomId);
+                if (!room) return;
+                state.currentRoom = room;
+                // Update UI
+                document.getElementById('currentRoomName').textContent = room.name;
+                document.getElementById('currentRoomStatus').textContent = `${this.toPersianNumber(room.members.toString())} عضو • ${this.toPersianNumber(room.online.toString())} آنلاین`;
+                document.getElementById('currentRoomAvatar').src = room.avatar;
+                document.getElementById('roomOnlineIndicator').classList.remove('hidden');
+                document.getElementById('memberCount').textContent = room.online;
+                document.getElementById('memberCount').classList.remove('hidden');
+                // Update active state in sidebar