Spaces:

samirerty
/

anycoder-5bccc721

Running

App Files Files Community

samirerty commited on 18 days ago

Commit

abe3648

verified ·

1 Parent(s): 8092a61

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +3 -1192

index.html CHANGED Viewed

@@ -1,1192 +1,3 @@
-<!DOCTYPE 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>

+<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+    <i class="fas fa-code"></i> Built with anycoder
+</a>