Spaces:

samirerty
/

anycoder-17067b18

Running

App Files Files Community

samirerty commited on 13 days ago

Commit

795c00c

verified ·

1 Parent(s): b00fe80

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1302 -19

index.html CHANGED Viewed

@@ -1,19 +1,1302 @@
-<!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">
+    <title>چت روم | پلتفرم گفتگوی آنلاین</title>
+    <!-- Google Fonts: Vazirmatn for Persian -->
+    <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">
+    <!-- Phosphor Icons -->
+    <script src="https://unpkg.com/@phosphor-icons/web"></script>
+    <style>
+        :root {
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --secondary: #ec4899;
+            --bg: #0f172a;
+            --surface: #1e293b;
+            --surface-light: #334155;
+            --text: #f8fafc;
+            --text-muted: #94a3b8;
+            --success: #10b981;
+            --warning: #f59e0b;
+            --error: #ef4444;
+            --glass: rgba(30, 41, 59, 0.7);
+            --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            --radius: 1rem;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            min-height: 100vh;
+            overflow-x: hidden;
+            line-height: 1.6;
+        }
+        /* Animated Background */
+        .bg-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            background:
+                radial-gradient(circle at 20% 50%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+                radial-gradient(circle at 80% 80%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
+                radial-gradient(circle at 40% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
+            filter: blur(60px);
+        }
+        /* Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--bg);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--surface-light);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--primary);
+        }
+        /* Layout */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1rem;
+            min-height: 100vh;
+        }
+        .hidden {
+            display: none !important;
+        }
+        /* Header */
+        header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem 2rem;
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: 1.5rem;
+            font-weight: 900;
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-decoration: none;
+        }
+        .nav-links {
+            display: flex;
+            gap: 2rem;
+            align-items: center;
+        }
+        .nav-links a {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .nav-links a:hover {
+            color: var(--text);
+            transform: translateY(-2px);
+        }
+        .user-menu {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .avatar-small {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: var(--surface);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.5rem;
+            border: 2px solid var(--primary);
+            cursor: pointer;
+            transition: transform 0.3s;
+        }
+        .avatar-small:hover {
+            transform: scale(1.1);
+        }
+        /* Buttons */
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border: none;
+            border-radius: var(--radius);
+            font-family: inherit;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            font-size: 1rem;
+        }
+        .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-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
+        }
+        .btn-secondary {
+            background: var(--surface);
+            color: var(--text);
+            border: 1px solid var(--surface-light);
+        }
+        .btn-secondary:hover {
+            background: var(--surface-light);
+        }
+        .btn-danger {
+            background: rgba(239, 68, 68, 0.2);
+            color: var(--error);
+            border: 1px solid var(--error);
+        }
+        .btn-danger:hover {
+            background: var(--error);
+            color: white;
+        }
+        .btn-ghost {
+            background: transparent;
+            color: var(--text-muted);
+        }
+        .btn-ghost:hover {
+            color: var(--text);
+            background: rgba(255,255,255,0.05);
+        }
+        /* Cards */
+        .card {
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255,255,255,0.1);
+            border-radius: var(--radius);
+            padding: 2rem;
+            box-shadow: var(--shadow);
+        }
+        /* Forms */
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: var(--text-muted);
+            font-weight: 500;
+        }
+        .form-control {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            background: var(--surface);
+            border: 1px solid var(--surface-light);
+            border-radius: var(--radius);
+            color: var(--text);
+            font-family: inherit;
+            font-size: 1rem;
+            transition: all 0.3s;
+        }
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+        }
+        /* Landing Page */
+        .hero {
+            min-height: 80vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            padding: 2rem;
+        }
+        .hero h1 {
+            font-size: clamp(2.5rem, 8vw, 4rem);
+            font-weight: 900;
+            margin-bottom: 1rem;
+            line-height: 1.2;
+        }
+        .hero h1 span {
+            background: linear-gradient(135deg, var(--primary), var(--secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .hero p {
+            font-size: 1.25rem;
+            color: var(--text-muted);
+            max-width: 600px;
+            margin-bottom: 2rem;
+        }
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+            margin-top: 4rem;
+            width: 100%;
+            max-width: 1000px;
+        }
+        .feature-card {
+            background: var(--glass);
+            padding: 2rem;
+            border-radius: var(--radius);
+            border: 1px solid rgba(255,255,255,0.1);
+            transition: transform 0.3s;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            border-color: var(--primary);
+        }
+        .feature-card i {
+            font-size: 2.5rem;
+            color: var(--primary);
+            margin-bottom: 1rem;
+        }
+        /* Auth Pages */
+        .auth-container {
+            min-height: 80vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+        }
+        .auth-box {
+            width: 100%;
+            max-width: 450px;
+        }
+        .auth-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .auth-header h2 {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+        }
+        .auth-header p {
+            color: var(--text-muted);
+        }
+        /* Rooms Grid */
+        .rooms-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 1.5rem;
+            margin-top: 2rem;
+        }
+        .room-card {
+            background: var(--surface);
+            border-radius: var(--radius);
+            padding: 1.5rem;
+            border: 1px solid var(--surface-light);
+            transition: all 0.3s;
+            position: relative;
+            overflow: hidden;
+        }
+        .room-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(90deg, var(--primary), var(--secondary));
+            transform: scaleX(0);
+            transition: transform 0.3s;
+        }
+        .room-card:hover::before {
+            transform: scaleX(1);
+        }
+        .room-card:hover {
+            transform: translateY(-3px);
+            border-color: var(--primary);
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+        .room-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: start;
+            margin-bottom: 1rem;
+        }
+        .room-title {
+            font-size: 1.25rem;
+            font-weight: 700;
+        }
+        .room-meta {
+            display: flex;
+            gap: 1rem;
+            color: var(--text-muted);
+            font-size: 0.875rem;
+            margin-bottom: 1rem;
+        }
+        .room-actions {
+            display: flex;
+            gap: 0.5rem;
+            margin-top: 1rem;
+        }
+        .btn-small {
+            padding: 0.5rem 1rem;
+            font-size: 0.875rem;
+        }
+        /* Chat Layout */
+        .chat-container {
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            height: calc(100vh - 80px);
+            gap: 1rem;
+            padding: 1rem;
+        }
+        .sidebar {
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border-radius: var(--radius);
+            border: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .sidebar-header {
+            padding: 1.5rem;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        .users-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 1rem;
+        }
+        .user-item {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+            margin-bottom: 0.5rem;
+            transition: background 0.3s;
+        }
+        .user-item:hover {
+            background: rgba(255,255,255,0.05);
+        }
+        .user-item .avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: var(--surface-light);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 1.25rem;
+        }
+        .user-item .info {
+            flex: 1;
+        }
+        .user-item .name {
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+        .user-item .status {
+            font-size: 0.75rem;
+            color: var(--success);
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+        }
+        .chat-area {
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border-radius: var(--radius);
+            border: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .chat-header {
+            padding: 1rem 1.5rem;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            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;
+            border-radius: var(--radius);
+            position: relative;
+            animation: messageSlide 0.3s ease-out;
+        }
+        @keyframes messageSlide {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .message.own {
+            align-self: flex-end;
+            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+            color: white;
+            border-bottom-right-radius: 0.25rem;
+        }
+        .message.other {
+            align-self: flex-start;
+            background: var(--surface);
+            border-bottom-left-radius: 0.25rem;
+        }
+        .message-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 0.5rem;
+            font-size: 0.875rem;
+            opacity: 0.9;
+        }
+        .message-text {
+            line-height: 1.5;
+        }
+        .message-time {
+            font-size: 0.75rem;
+            opacity: 0.7;
+            margin-top: 0.5rem;
+            text-align: left;
+        }
+        .chat-input-area {
+            padding: 1rem 1.5rem;
+            border-top: 1px solid rgba(255,255,255,0.1);
+            display: flex;
+            gap: 0.75rem;
+        }
+        .chat-input {
+            flex: 1;
+            background: var(--surface);
+            border: 1px solid var(--surface-light);
+            border-radius: 2rem;
+            padding: 0.75rem 1.25rem;
+            color: var(--text);
+            font-family: inherit;
+            font-size: 1rem;
+            transition: all 0.3s;
+        }
+        .chat-input:focus {
+            outline: none;
+            border-color: var(--primary);
+        }
+        .btn-icon {
+            width: 48px;
+            height: 48px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0;
+        }
+        /* Settings */
+        .settings-grid {
+            display: grid;
+            grid-template-columns: 250px 1fr;
+            gap: 2rem;
+            max-width: 900px;
+            margin: 2rem auto;
+        }
+        .settings-nav {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .settings-nav-item {
+            padding: 1rem;
+            border-radius: var(--radius);
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            color: var(--text-muted);
+        }
+        .settings-nav-item:hover,
+        .settings-nav-item.active {
+            background: var(--surface);
+            color: var(--text);
+        }
+        .settings-nav-item.active {
+            background: var(--primary);
+            color: white;
+        }
+        .settings-content {
+            background: var(--glass);
+            backdrop-filter: blur(12px);
+            border-radius: var(--radius);
+            padding: 2rem;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+        .avatar-selector {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+        .avatar-option {
+            aspect-ratio: 1;
+            background: var(--surface);
+            border-radius: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2.5rem;
+            cursor: pointer;
+            border: 2px solid transparent;
+            transition: all 0.3s;
+        }
+        .avatar-option:hover {
+            transform: scale(1.1);
+            border-color: var(--primary);
+        }
+        .avatar-option.selected {
+            border-color: var(--primary);
+            background: rgba(99, 102, 241, 0.2);
+            box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
+        }
+        /* Toast Notifications */
+        .toast-container {
+            position: fixed;
+            top: 100px;
+            left: 2rem;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+        }
+        .toast {
+            background: var(--surface);
+            color: var(--text);
+            padding: 1rem 1.5rem;
+            border-radius: var(--radius);
+            border-right: 4px solid var(--primary);
+            box-shadow: var(--shadow);
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            animation: slideIn 0.3s ease-out;
+            min-width: 300px;
+        }
+        .toast.success { border-right-color: var(--success); }
+        .toast.error { border-right-color: var(--error); }
+        .toast.warning { border-right-color: var(--warning); }
+        @keyframes slideIn {
+            from {
+                transform: translateX(-100%);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(0);
+                opacity: 1;
+            }
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .chat-container {
+                grid-template-columns: 1fr;
+            }
+            .sidebar {
+                display: none;
+            }
+            .settings-grid {
+                grid-template-columns: 1fr;
+            }
+            .nav-links {
+                display: none;
+            }
+            .message {
+                max-width: 85%;
+            }
+        }
+        /* Empty State */
+        .empty-state {
+            text-align: center;
+            padding: 4rem 2rem;
+            color: var(--text-muted);
+        }
+        .empty-state i {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+            opacity: 0.5;
+        }
+        /* Modal */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(5px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s;
+        }
+        .modal-overlay.active {
+            opacity: 1;
+            visibility: visible;
+        }
+        .modal {
+            background: var(--surface);
+            border-radius: var(--radius);
+            padding: 2rem;
+            width: 90%;
+            max-width: 500px;
+            transform: scale(0.9);
+            transition: transform 0.3s;
+        }
+        .modal-overlay.active .modal {
+            transform: scale(1);
+        }
+        .modal-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
+        }
+        .modal-header h3 {
+            font-size: 1.5rem;
+        }
+        .close-btn {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            font-size: 1.5rem;
+            cursor: pointer;
+            transition: color 0.3s;
+        }
+        .close-btn:hover {
+            color: var(--text);
+        }
+        /* Built with anycoder */
+        .built-with {
+            position: fixed;
+            bottom: 1rem;
+            left: 1rem;
+            background: rgba(99, 102, 241, 0.2);
+            color: var(--primary);
+            padding: 0.5rem 1rem;
+            border-radius: 2rem;
+            font-size: 0.875rem;
+            text-decoration: none;
+            border: 1px solid rgba(99, 102, 241, 0.3);
+            transition: all 0.3s;
+            z-index: 50;
+        }
+        .built-with:hover {
+            background: var(--primary);
+            color: white;
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-animation"></div>
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+    <!-- Header -->
+    <header id="mainHeader" class="hidden">
+        <a href="#" class="logo" onclick="router.navigate('home')">
+            <i class="ph ph-chat-circle-text"></i>
+            <span>چت روم</span>
+        </a>
+        <nav class="nav-links">
+            <a href="#" onclick="router.navigate('rooms')">
+                <i class="ph ph-house"></i>
+                روم‌های من
+            </a>
+            <a href="#" onclick="router.navigate('settings')">
+                <i class="ph ph-gear"></i>
+                تنظیمات
+            </a>
+        </nav>
+        <div class="user-menu">
+            <span id="userNameDisplay"></span>
+            <div class="avatar-small" id="headerAvatar" onclick="router.navigate('settings')"></div>
+            <button class="btn btn-ghost" onclick="auth.logout()">
+                <i class="ph ph-sign-out"></i>
+            </button>
+        </div>
+    </header>
+    <!-- Main Container -->
+    <div class="container">
+        <!-- Landing Page -->
+        <section id="page-home" class="page">
+            <div class="hero">
+                <h1>به <span>چت روم</span> خوش آمدید</h1>
+                <p>پلتفرم گفتگوی آنلاین با قابلیت ایجاد روم‌های خصوصی، اشتراک‌گذاری لینک و چت لحظه‌ای با دوستان</p>
+                <div style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
+                    <button class="btn btn-primary btn-lg" onclick="router.navigate('register')">
+                        <i class="ph ph-user-plus"></i>
+                        شروع کنید
+                    </button>
+                    <button class="btn btn-secondary" onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
+                        <i class="ph ph-info"></i>
+                        بیشتر بدانید
+                    </button>
+                </div>
+                <div class="features" id="features">
+                    <div class="feature-card">
+                        <i class="ph ph-lock-key"></i>
+                        <h3>امنیت بالا</h3>
+                        <p>ورود با شماره تلفن و رمز عبور امن</p>
+                    </div>
+                    <div class="feature-card">
+                        <i class="ph ph-users-three"></i>
+                        <h3>روم‌های خصوصی</h3>
+                        <p>تا ۳ روم خصوصی ایجاد کنید و لینک را به اشتراک بگذارید</p>
+                    </div>
+                    <div class="feature-card">
+                        <i class="ph ph-lightning"></i>
+                        <h3>چت لحظه‌ای</h3>
+                        <p>گفتگوی آنلاین بدون تأخیر با کاربران</p>
+                    </div>
+                </div>
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a>
+            </div>
+        </section>
+        <!-- Register Page -->
+        <section id="page-register" class="page hidden">
+            <div class="auth-container">
+                <div class="auth-box card">
+                    <div class="auth-header">
+                        <h2>ثبت نام</h2>
+                        <p>برای استفاده از چت روم ثبت نام کنید</p>
+                    </div>
+                    <form id="registerForm" onsubmit="auth.register(event)">
+                        <div class="form-group">
+                            <label>شماره تلفن</label>
+                            <input type="tel" class="form-control" id="regPhone" placeholder="مثال: 09123456789" required pattern="09[0-9]{9}">
+                        </div>
+                        <div class="form-group">
+                            <label>رمز عبور</label>
+                            <input type="password" class="form-control" id="regPassword" placeholder="حداقل ۶ کاراکتر" required minlength="6">
+                        </div>
+                        <div class="form-group">
+                            <label>نام نمایشی</label>
+                            <input type="text" class="form-control" id="regName" placeholder="نام شما در چت" required>
+                        </div>
+                        <button type="submit" class="btn btn-primary" style="width: 100%;">
+                            <i class="ph ph-user-plus"></i>
+                            ثبت نام
+                        </button>
+                    </form>
+                    <div style="text-align: center; margin-top: 1.5rem; color: var(--text-muted);">
+                        قبلاً ثبت نام کرده‌اید؟
+                        <a href="#" onclick="router.navigate('login')" style="color: var(--primary); text-decoration: none;">وارد شوید</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Login Page -->
+        <section id="page-login" class="page hidden">
+            <div class="auth-container">
+                <div class="auth-box card">
+                    <div class="auth-header">
+                        <h2>ورود</h2>
+                        <p>وارد حساب کاربری خود شوید</p>
+                    </div>
+                    <form id="loginForm" onsubmit="auth.login(event)">
+                        <div class="form-group">
+                            <label>شماره تلفن</label>
+                            <input type="tel" class="form-control" id="loginPhone" placeholder="شماره تلفن" required>
+                        </div>
+                        <div class="form-group">
+                            <label>رمز عبور</label>
+                            <input type="password" class="form-control" id="loginPassword" placeholder="رمز عبور" required>
+                        </div>
+                        <button type="submit" class="btn btn-primary" style="width: 100%;">
+                            <i class="ph ph-sign-in"></i>
+                            ورود
+                        </button>
+                    </form>
+                    <div style="text-align: center; margin-top: 1.5rem; color: var(--text-muted);">
+                        حساب ندارید؟
+                        <a href="#" onclick="router.navigate('register')" style="color: var(--primary); text-decoration: none;">ثبت نام کنید</a>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Rooms Page -->
+        <section id="page-rooms" class="page hidden">
+            <div style="max-width: 1000px; margin: 0 auto; padding: 2rem 0;">
+                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
+                    <div>
+                        <h2>روم‌های من</h2>
+                        <p style="color: var(--text-muted);">تا ۳ روم می‌توانید ایجاد کنید</p>
+                    </div>
+                    <button class="btn btn-primary" onclick="roomManager.showCreateModal()">
+                        <i class="ph ph-plus"></i>
+                        روم جدید
+                    </button>
+                </div>
+                <div id="roomsList" class="rooms-grid">
+                    <!-- Rooms will be loaded here -->
+                </div>
+                <div id="emptyRooms" class="empty-state hidden">
+                    <i class="ph ph-chat-teardrop-text"></i>
+                    <h3>هنوز رومی ایجاد نکرده‌اید</h3>
+                    <p>با ایجاد روم، لینک را با دوستان خود به اشتراک بگذارید</p>
+                </div>
+            </div>
+        </section>
+        <!-- Chat Page -->
+        <section id="page-chat" class="page hidden">
+            <div class="chat-container">
+                <aside class="sidebar">
+                    <div class="sidebar-header">
+                        <h3>کاربران آنلاین</h3>
+                    </div>
+                    <div class="users-list" id="onlineUsers">
+                        <!-- Users will be loaded here -->
+                    </div>
+                </aside>
+                <div class="chat-area">
+                    <div class="chat-header">
+                        <div>
+                            <h3 id="chatRoomName">نام روم</h3>
+                            <small style="color: var(--text-muted);" id="chatRoomId">شناسه: -</small>
+                        </div>
+                        <div style="display: flex; gap: 0.5rem;">
+                            <button class="btn btn-secondary btn-small" onclick="chat.copyLink()">
+                                <i class="ph ph-link"></i>
+                                کپی لینک
+                            </button>
+                            <button class="btn btn-ghost" onclick="router.navigate('rooms')">
+                                <i class="ph ph-x"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="chat-messages" id="chatMessages">
+                        <!-- Messages will appear here -->
+                    </div>
+                    <div class="chat-input-area">
+                        <input type="text" class="chat-input" id="messageInput" placeholder="پیام خود را بنویسید..." onkeypress="if(event.key==='Enter') chat.sendMessage()">
+                        <button class="btn btn-primary btn-icon" onclick="chat.sendMessage()">
+                            <i class="ph ph-paper-plane-right"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Settings Page -->
+        <section id="page-settings" class="page hidden">
+            <div class="settings-grid">
+                <div class="settings-nav">
+                    <div class="settings-nav-item active" onclick="settings.showTab('profile')">
+                        <i class="ph ph-user"></i>
+                        پروفایل
+                    </div>
+                    <div class="settings-nav-item" onclick="settings.showTab('account')">
+                        <i class="ph ph-lock"></i>
+                        حساب کاربری
+                    </div>
+                </div>
+                <div class="settings-content">
+                    <div id="tab-profile">
+                        <h2 style="margin-bottom: 1.5rem;">تنظیمات پروفایل</h2>
+                        <div class="form-group">
+                            <label>نام نمایشی</label>
+                            <input type="text" class="form-control" id="settingsName" placeholder="نام شما">
+                        </div>
+                        <div class="form-group">
+                            <label>انتخاب آواتار</label>
+                            <div class="avatar-selector" id="avatarSelector">
+                                <!-- Avatars will be generated here -->
+                            </div>
+                        </div>
+                        <button class="btn btn-primary" onclick="settings.saveProfile()">
+                            <i class="ph ph-floppy-disk"></i>
+                            ذخیره تغییرات
+                        </button>
+                    </div>
+                    <div id="tab-account" class="hidden">
+                        <h2 style="margin-bottom: 1.5rem;">حساب کاربری</h2>
+                        <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid var(--error); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem;">
+                            <h4 style="color: var(--error); margin-bottom: 0.5rem;">
+                                <i class="ph ph-warning"></i>
+                                هشدار
+                            </h4>
+                            <p style="color: var(--text-muted); font-size: 0.9rem;">
+                                حذف حساب کاربری باعث حذف تمام روم‌ها و پیام‌های شما می‌شود. این عملیات قابل بازگشت نیست.
+                            </p>
+                        </div>
+                        <button class="btn btn-danger" onclick="auth.deleteAccount()">
+                            <i class="ph ph-trash"></i>
+                            حذف حساب کاربری
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+    <!-- Create Room Modal -->
+    <div class="modal-overlay" id="createRoomModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3>ایجاد روم جدید</h3>
+                <button class="close-btn" onclick="roomManager.hideCreateModal()">
+                    <i class="ph ph-x"></i>
+                </button>
+            </div>
+            <form onsubmit="roomManager.createRoom(event)">
+                <div class="form-group">
+                    <label>نام روم</label>
+                    <input type="text" class="form-control" id="newRoomName" placeholder="مثال: گفتگوی دوستانه" required>
+                </div>
+                <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem;">
+                    <button type="button" class="btn btn-secondary" onclick="roomManager.hideCreateModal()">انصراف</button>
+                    <button type="submit" class="btn btn-primary">ایجاد روم</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    <script>
+        // Data Management
+        const db = {
+            getUsers() {
+                return JSON.parse(localStorage.getItem('chat_users') || '[]');
+            },
+            saveUsers(users) {
+                localStorage.setItem('chat_users', JSON.stringify(users));
+            },
+            getRooms() {
+                return JSON.parse(localStorage.getItem('chat_rooms') || '[]');
+            },
+            saveRooms(rooms) {
+                localStorage.setItem('chat_rooms', JSON.stringify(rooms));
+            },
+            getMessages() {
+                return JSON.parse(localStorage.getItem('chat_messages') || '{}');
+            },
+            saveMessages(messages) {
+                localStorage.setItem('chat_messages', JSON.stringify(messages));
+            },
+            getCurrentUser() {
+                return JSON.parse(sessionStorage.getItem('current_user') || 'null');
+            },
+            setCurrentUser(user) {
+                sessionStorage.setItem('current_user', JSON.stringify(user));
+            }
+        };
+        // Toast Notification
+        const toast = {
+            show(message, type = 'info') {
+                const container = document.getElementById('toastContainer');
+                const toast = document.createElement('div');
+                toast.className = `toast ${type}`;
+                const icons = {
+                    success: 'ph-check-circle',
+                    error: 'ph-x-circle',
+                    warning: 'ph-warning',
+                    info: 'ph-info'
+                };
+                toast.innerHTML = `
+                    <i class="ph ${icons[type]}"></i>
+                    <span>${message}</span>
+                `;
+                container.appendChild(toast);
+                setTimeout(() => {
+                    toast.style.opacity = '0';
+                    toast.style.transform = 'translateX(-100%)';
+                    setTimeout(() => toast.remove(), 300);
+                }, 3000);
+            }
+        };
+        // Router
+        const router = {
+            currentPage: '',
+            navigate(page, params = {}) {
+                // Check auth for protected pages
+                const protectedPages = ['rooms', 'chat', 'settings'];
+                const publicPages = ['home', 'login', 'register'];
+                if (protectedPages.includes(page) && !db.getCurrentUser()) {
+                    toast.show('لطفاً ابتدا وارد شوید', 'warning');
+                    page = 'login';
+                }
+                if (publicPages.includes(page) && db.getCurrentUser() && (page === 'login' || page === 'register')) {
+                    page = 'rooms';
+                }
+                // Hide all pages
+                document.querySelectorAll('.page').forEach(p => p.classList.add('hidden'));
+                // Show target page
+                const targetPage = document.getElementById(`page-${page}`);
+                if (targetPage) {
+                    targetPage.classList.remove('hidden');
+                    this.currentPage = page;
+                    // Update UI based on page
+                    if (page === 'rooms') roomManager.loadRooms();
+                    if (page === 'settings') settings.load();
+                    if (page === 'chat' && params.roomId) chat.loadRoom(params.roomId);
+                    // Show/hide header
+                    const header = document.getElementById('mainHeader');
+                    if (page === 'home' || page === 'login' || page === 'register') {
+                        header.classList.add('hidden');
+                    } else {
+                        header.classList.remove('hidden');
+                        this.updateHeader();
+                    }
+                }
+                window.location.hash = page;
+            },
+            updateHeader() {
+                const user = db.getCurrentUser();
+                if (user) {
+                    document.getElementById('userNameDisplay').textContent = user.name;
+                    document.getElementById('headerAvatar').textContent = user.avatar;
+                }
+            },
+            init() {
+                const hash = window.location.hash.slice(1) || 'home';
+                const params = {};
+                if (hash.includes('chat/')) {
+                    const parts = hash.split('/');
+                    params.roomId = parts[1];
+                    this.navigate('chat', params);
+                } else {
+                    this.navigate(hash);
+                }
+            }
+        };
+        // Auth Manager
+        const auth = {
+            register(e) {
+                e.preventDefault();
+                const phone = document.getElementById('regPhone').value;
+                const password = document.getElementById('regPassword').value;
+                const name = document.getElementById('regName').value;
+                const users = db.getUsers();
+                if (users.find(u => u.phone === phone)) {
+                    toast.show('این شماره قبلاً ثبت شده است', 'error');
+                    return;
+                }
+                const newUser = {
+                    id: Date.now().toString(),
+                    phone,
+                    password,
+                    name,
+                    avatar: '👤',
+                    createdAt: new Date().toISOString()
+                };
+                users.push(newUser);
+                db.saveUsers(users);
+                db.setCurrentUser(newUser);
+                toast.show('ثبت نام با موفقیت انجام شد', 'success');
+                router.navigate('rooms');
+            },
+            login(e) {
+                e.preventDefault();
+                const phone = document.getElementById('loginPhone').value;
+                const password = document.get