Spaces:

samirerty
/

anycoder-64eadd6e

Running

App Files Files Community

samirerty commited on Feb 1

Commit

bf170d4

verified ·

1 Parent(s): b96dc0d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1051 -19

index.html CHANGED Viewed

@@ -1,19 +1,1051 @@
-<!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>
+  <!-- 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;
+      outline: none;
+    }
+    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;
+      pointer-events: none;
+    }
+    .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);
+      -webkit-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;
+      background-clip: text;
+      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;
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+    .built-with:hover {
+      background: var(--primary);
+      color: white;
+      transform: translateY(-2px);
+      border-color: var(--primary);
+    }
+    .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);
+      border-color: 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);
+      -webkit-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;
+      cursor: pointer;
+    }
+    .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);
+      backdrop-filter: blur(20px);
+    }
+    .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);
+      background: rgba(255, 255, 255, 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);
+      color: white;
+    }
+    .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 cubic-bezier(0.25, 1, 0.5, 1);
+      word-wrap: break-word;
+    }
+    @keyframes messageSlide {
+      from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+      }
+    }
+    .message.sent {
+      align-self: flex-start; /* In RTL, flex-start is Right */
+      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+      color: white;
+      border-bottom-right-radius: 0.25rem;
+    }
+    .message.received {
+      align-self: flex-end; /* In RTL, flex-end is Left */
+      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;
+      text-align: left;
+    }
+    .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;
+      transition: border-color 0.3s;
+    }
+    .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) rotate(-10deg);
+    }
+    /* 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 cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: var(--shadow);
+        background: var(--background); /* Solid background for mobile sidebar */
+      }
+      .sidebar.open {
+        right: 0;
+      }
+      .mobile-menu-btn {
+        display: block !important;
+      }
+      .features {
+        grid-template-columns: 1fr;
+      }
+      .hero h1 {
+        font-size: 2.5rem;
+      }
+    }
+    .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-end; /* Left side in RTL */
+      background: var(--glass);
+      padding: 1rem 1.5rem;
+      border-radius: 1.25rem;
+      border-bottom-left-radius: 0.25rem;
+      border: 1px solid var(--border);
+      margin-bottom: 1rem;
+    }
+    .typing-indicator.active {
+      display: flex;
+      gap: 0.25rem;
+      animation: messageSlide 0.3s ease;
+    }
+    .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; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.1)'" onmouseout="this.style.transform='scale(1)'">
+                        <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; transition: background 0.3s;" onmouseover="this.style.background='var(--primary)'" onmouseout="this.style.background='var(--glass)'">
+                            <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; transition: background 0.3s;" onmouseover="this.style.background='var(--secondary)'" onmouseout="this.style.background='var(--glass)'">
+                            <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; transition: color 0.3s;" onmouseover="this.style.color='var(--primary)'" onmouseout="this.style.color='var(--text-muted)'">
+                        <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 }
+        ];
+        // Random Responses for simulation
+        const randomResponses = [
+            "بسیار عالی! 👍",
+            "من موافقم.",
+            "می‌توانی بیشتر توضیح بدهی؟",
+            "این جالب است! 🤔",
+            "هoho! 😂",
+            "بله، درست می‌گویی.",
+            "منتظر پیام بعدی هستم..."
+        ];
+        // 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');
+        }