Spaces:

samirerty
/

anycoder-5bccc721

Running

App Files Files Community

samirerty commited on 19 days ago

Commit

5abd225

verified ·

1 Parent(s): 91497b3

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +771 -833

index.html CHANGED Viewed

@@ -1,851 +1,789 @@
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <title>AnyCoder - چت روم پیشرفته</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-  <style>
-    :root {
-      --ios-bg-dark: #1a1a2e;
-      --ios-bg-mid: #16213e;
-      --ios-bg-light: #0f3460;
-      --ios-accent-pink: #E94584;
-      --ios-accent-teal: #4FD3C4;
-      --ios-purple: #533483;
-      --glass-bg: rgba(255, 255, 255, 0.08);
-      --glass-border: rgba(255, 255, 255, 0.15);
-      --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-      --text-primary: rgba(255, 255, 255, 0.95);
-      --text-secondary: rgba(255, 255, 255, 0.6);
-      --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      --safe-area-top: env(safe-area-inset-top);
-    }
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-      -webkit-tap-highlight-color: transparent;
-    }
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Tahoma', 'Vazirmatn', sans-serif;
-      background: linear-gradient(135deg, var(--ios-bg-dark) 0%, var(--ios-bg-mid) 50%, var(--ios-bg-light) 100%);
-      min-height: 100vh;
-      color: var(--text-primary);
-      overflow-x: hidden;
-      position: relative;
-    }
-    /* Background Shapes */
-    body::before {
-      content: '';
-      position: fixed;
-      top: -20%;
-      right: -10%;
-      width: 600px;
-      height: 600px;
-      background: radial-gradient(circle, rgba(233, 69, 132, 0.2) 0%, transparent 70%);
-      border-radius: 50%;
-      pointer-events: none;
-      z-index: 0;
-      animation: floatBlob 20s infinite alternate;
-    }
-    body::after {
-      content: '';
-      position: fixed;
-      bottom: -10%;
-      left: -10%;
-      width: 500px;
-      height: 500px;
-      background: radial-gradient(circle, rgba(79, 211, 196, 0.15) 0%, transparent 70%);
-      border-radius: 50%;
-      pointer-events: none;
-      z-index: 0;
-      animation: floatBlob 15s infinite alternate-reverse;
-    }
-    /* iOS Status Bar */
-    .status-bar {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 0.8rem 1.5rem;
-      padding-top: calc(0.8rem + var(--safe-area-top));
-      font-size: 0.85rem;
-      font-weight: 600;
-      position: sticky;
-      top: 0;
-      z-index: 100;
-      backdrop-filter: blur(20px);
-      -webkit-backdrop-filter: blur(20px);
-      background: rgba(26, 26, 46, 0.6);
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    }
-    .status-left {
-      display: flex;
-      align-items: center;
-      gap: 0.8rem;
-    }
-    .status-right {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-    .status-link {
-      color: var(--ios-accent-teal);
-      text-decoration: none;
-      font-size: 0.75rem;
-      font-weight: bold;
-      background: rgba(79, 211, 196, 0.1);
-      padding: 4px 10px;
-      border-radius: 12px;
-      border: 1px solid rgba(79, 211, 196, 0.2);
-      transition: var(--transition-smooth);
-    }
-    .status-link:hover {
-      background: rgba(79, 211, 196, 0.2);
-    }
-    .battery-icon {
-      display: flex;
-      align-items: center;
-      gap: 0.3rem;
-    }
-    /* Main Container */
-    .ios-container {
-      max-width: 480px;
-      margin: 0 auto;
-      padding: 1.5rem;
-      position: relative;
-      z-index: 1;
-      min-height: calc(100vh - 80px);
-      display: flex;
-      flex-direction: column;
-      padding-bottom: 2rem;
-    }
-    /* Views System */
-    .view-section {
-      display: none;
-      animation: fadeIn 0.4s ease-out;
-      flex-direction: column;
-      height: 100%;
-    }
-    .view-section.active {
-      display: flex;
-    }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    /* Glass Hero */
-    .glass-hero {
-      backdrop-filter: blur(20px);
-      background: var(--glass-bg);
-      border: 1px solid var(--glass-border);
-      border-radius: 24px;
-      padding: 2rem;
-      margin-bottom: 2rem;
-      box-shadow: var(--glass-shadow);
-      text-align: center;
-      position: relative;
-      overflow: hidden;
-    }
-    .hero-icon {
-      width: 80px;
-      height: 80px;
-      background: linear-gradient(135deg, var(--ios-accent-pink), var(--ios-purple));
-      border-radius: 22px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0 auto 1.5rem;
-      font-size: 2.5rem;
-      box-shadow: 0 10px 30px rgba(233, 69, 132, 0.3);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-    }
-    .glass-hero h1 {
-      font-size: 1.8rem;
-      margin-bottom: 0.5rem;
-      font-weight: 800;
-    }
-    .subtitle {
-      color: var(--text-secondary);
-      font-size: 1rem;
-      margin-bottom: 1.5rem;
-    }
-    /* App Grid */
-    .app-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 1.5rem 1rem;
-      margin-bottom: 2rem;
-    }
-    .app-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 0.6rem;
-      cursor: pointer;
-      transition: var(--transition-smooth);
-    }
-    .app-item:active {
-      transform: scale(0.9);
-    }
-    .app-icon {
-      width: 65px;
-      height: 65px;
-      border-radius: 18px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.8rem;
-      color: white;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    .app-label {
-      font-size: 0.8rem;
-      color: var(--text-secondary);
-      font-weight: 500;
-    }
-    /* Icon Gradients */
-    .icon-gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
-    .icon-gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
-    .icon-gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
-    .icon-gradient-4 { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
-    .icon-gradient-5 { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
-    .icon-gradient-6 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
-    /* iOS Dock */
-    .ios-dock {
-      backdrop-filter: blur(25px);
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.15);
-      border-radius: 35px;
-      padding: 1rem 1.5rem;
-      display: flex;
-      justify-content: space-around;
-      margin-top: auto;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-    }
-    .dock-item {
-      width: 55px;
-      height: 55px;
-      border-radius: 14px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.5rem;
-      color: white;
-      cursor: pointer;
-      transition: var(--transition-smooth);
-      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
-    }
-    .dock-item:hover {
-      transform: translateY(-5px) scale(1.05);
-    }
-    /* --- CHAT INTERFACE --- */
-    .chat-header {
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-      margin-bottom: 1rem;
-      padding: 0.5rem;
-      background: var(--glass-bg);
-      border-radius: 16px;
-      border: 1px solid var(--glass-border);
-    }
-    .back-btn {
-      background: none;
-      border: none;
-      color: var(--ios-accent-pink);
-      font-size: 1.2rem;
-      cursor: pointer;
-      padding: 5px;
-    }
-    .chat-user-info h3 { font-size: 1rem; margin-bottom: 2px; }
-    .chat-user-info span { font-size: 0.75rem; color: var(--ios-accent-teal); }
-    .chat-window {
-      flex: 1;
-      background: rgba(0,0,0,0.2);
-      border-radius: 20px;
-      padding: 1rem;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-      margin-bottom: 1rem;
-      min-height: 300px;
-      max-height: 50vh;
-      scrollbar-width: thin;
-      scrollbar-color: rgba(255,255,255,0.2) transparent;
-    }
-    .message {
-      max-width: 75%;
-      padding: 10px 15px;
-      border-radius: 18px;
-      font-size: 0.95rem;
-      line-height: 1.4;
-      position: relative;
-      animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    }
-    @keyframes popIn {
-      from { transform: scale(0.8); opacity: 0; }
-      to { transform: scale(1); opacity: 1; }
-    }
-    /* RTL Chat Logic */
-    .message.received {
-      align-self: flex-start; /* Right side in RTL */
-      background: rgba(255, 255, 255, 0.1);
-      border-bottom-right-radius: 4px;
-      color: var(--text-primary);
-    }
-    .message.sent {
-      align-self: flex-end; /* Left side in RTL */
-      background: linear-gradient(135deg, var(--ios-accent-pink), var(--ios-purple));
-      border-bottom-left-radius: 4px;
-      color: white;
-      box-shadow: 0 4px 15px rgba(233, 69, 132, 0.3);
-    }
-    .message-time {
-      display: block;
-      font-size: 0.65rem;
-      margin-top: 5px;
-      opacity: 0.7;
-      text-align: left;
-    }
-    .message.sent .message-time { text-align: right; }
-    .chat-input-area {
-      display: flex;
-      gap: 0.8rem;
-      background: var(--glass-bg);
-      padding: 0.5rem;
-      border-radius: 30px;
-      border: 1px solid var(--glass-border);
-    }
-    .chat-input {
-      flex: 1;
-      background: transparent;
-      border: none;
-      color: white;
-      padding: 0.8rem;
-      font-family: inherit;
-      outline: none;
-    }
-    .send-btn {
-      width: 45px;
-      height: 45px;
-      border-radius: 50%;
-      background: var(--ios-accent-pink);
-      border: none;
-      color: white;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: var(--transition-smooth);
-    }
-    .send-btn:hover { background: var(--ios-purple); transform: scale(1.05); }
-    /* --- FORMS (Login/Register) --- */
-    .form-container {
-      background: var(--glass-bg);
-      padding: 2rem;
-      border-radius: 24px;
-      border: 1px solid var(--glass-border);
-      backdrop-filter: blur(20px);
-    }
-    .input-group {
-      margin-bottom: 1.2rem;
-    }
-    .input-group label {
-      display: block;
-      margin-bottom: 0.5rem;
-      font-size: 0.9rem;
-      color: var(--text-secondary);
-    }
-    .glass-input {
-      width: 100%;
-      padding: 1rem;
-      background: rgba(0,0,0,0.2);
-      border: 1px solid rgba(255,255,255,0.1);
-      border-radius: 12px;
-      color: white;
-      font-family: inherit;
-      outline: none;
-      transition: var(--transition-smooth);
-    }
-    .glass-input:focus {
-      border-color: var(--ios-accent-teal);
-      background: rgba(0,0,0,0.3);
-    }
-    .btn-primary {
-      width: 100%;
-      padding: 1rem;
-      background: linear-gradient(135deg, var(--ios-accent-pink), var(--ios-purple));
-      border: none;
-      border-radius: 12px;
-      color: white;
-      font-weight: bold;
-      font-size: 1rem;
-      cursor: pointer;
-      transition: var(--transition-smooth);
-      margin-top: 1rem;
-    }
-    .btn-primary:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 5px 20px rgba(233, 69, 132, 0.4);
-    }
-    /* --- TOAST NOTIFICATIONS --- */
-    .toast-container {
-      position: fixed;
-      top: 80px;
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: 1000;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      pointer-events: none;
-      width: 90%;
-      max-width: 350px;
-    }
-    .toast {
-      background: rgba(22, 33, 62, 0.9);
-      backdrop-filter: blur(10px);
-      color: white;
-      padding: 12px 20px;
-      border-radius: 16px;
-      border: 1px solid rgba(255,255,255,0.1);
-      box-shadow: 0 5px 20px rgba(0,0,0,0.4);
-      font-size: 0.9rem;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      animation: slideDown 0.3s ease-out forwards;
-    }
-    .toast.success i { color: var(--ios-accent-teal); }
-    .toast.error i { color: var(--ios-accent-pink); }
-    @keyframes slideDown {
-      from { opacity: 0; transform: translateY(-20px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    @keyframes slideUpFade {
-      to { opacity: 0; transform: translateY(-20px); }
-    }
-    @keyframes floatBlob {
-      0% { transform: translate(0, 0) scale(1); }
-      100% { transform: translate(20px, -20px) scale(1.1); }
-    }
-    /* Responsive */
-    @media (max-width: 480px) {
-      .ios-container { padding: 1rem; }
-      .app-icon { width: 55px; height: 55px; font-size: 1.5rem; }
-    }
-  </style>
 </head>
 <body>
-  <!-- Toast Container -->
-  <div class="toast-container" id="toastContainer"></div>
-  <!-- iOS Status Bar -->
-  <div class="status-bar">
-    <div class="status-left">
-      <span class="time" id="clock">۰۹:۴۱</span>
     </div>
-    <div class="status-right">
-      <!-- AnyCoder Link in Header -->
-      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="status-link">
-        <i class="fas fa-bolt"></i> AnyCoder
-      </a>
-      <div class="battery-icon">
-        <i class="fas fa-battery-three-quarters" style="font-size: 0.9rem;"></i>
-      </div>
-    </div>
-  </div>
-  <div class="ios-container">
-    <!-- VIEW 1: DASHBOARD -->
-    <section id="view-dashboard" class="view-section active">
-      <div class="glass-hero">
-        <div class="hero-icon">
-          <i class="fas fa-comments"></i>
-        </div>
-        <h1>چت روم ساده</h1>
-        <p class="subtitle">ارتباط سریع، امن و زیبا</p>
-      </div>
-      <!-- Info Widgets -->
-      <div style="display: flex; gap: 10px; overflow-x: auto; margin-bottom: 2rem; padding-bottom: 5px;">
-        <div style="min-width: 120px; background: var(--glass-bg); padding: 1rem; border-radius: 16px; border: 1px solid var(--glass-border); text-align: center;">
-          <div style="color: var(--ios-accent-teal); font-weight: bold; font-size: 1.2rem;">۱۲۵۴</div>
-          <div style="font-size: 0.75rem; color: var(--text-secondary);">کاربران آنلاین</div>
-        </div>
-        <div style="min-width: 120px; background: var(--glass-bg); padding: 1rem; border-radius: 16px; border: 1px solid var(--glass-border); text-align: center;">
-          <div style="color: var(--ios-accent-pink); font-weight: bold; font-size: 1.2rem;">۴۸</div>
-          <div style="font-size: 0.75rem; color: var(--text-secondary);">اتاق فعال</div>
-        </div>
-      </div>
-      <!-- App Grid -->
-      <div class="app-grid">
-        <div class="app-item" onclick="router('register')">
-          <div class="app-icon icon-gradient-1"><i class="fas fa-user-plus"></i></div>
-          <span class="app-label">ثبت‌نام</span>
-        </div>
-        <div class="app-item" onclick="router('rooms')">
-          <div class="app-icon icon-gradient-2"><i class="fas fa-door-open"></i></div>
-          <span class="app-label">اتاق‌ها</span>
-        </div>
-        <div class="app-item" onclick="router('chat')">
-          <div class="app-icon icon-gradient-3"><i class="fas fa-comments"></i></div>
-          <span class="app-label">چت زنده</span>
-        </div>
-        <div class="app-item" onclick="router('login')">
-          <div class="app-icon icon-gradient-4"><i class="fas fa-sign-in-alt"></i></div>
-          <span class="app-label">ورود</span>
-        </div>
-        <div class="app-item" onclick="showToast('بخش تحلیل به زودی فعال می‌شود', 'info')">
-          <div class="app-icon icon-gradient-6"><i class="fas fa-chart-line"></i></div>
-          <span class="app-label">تحلیل</span>
-        </div>
-        <div class="app-item" onclick="showToast('شما از قبل خارج شده‌اید', 'error')">
-          <div class="app-icon icon-gradient-5"><i class="fas fa-sign-out-alt"></i></div>
-          <span class="app-label">خروج</span>
-        </div>
-      </div>
-    </section>
-    <!-- VIEW 2: CHAT -->
-    <section id="view-chat" class="view-section">
-      <div class="chat-header">
-        <button class="back-btn" onclick="router('dashboard')"><i class="fas fa-arrow-right"></i></button>
-        <div style="width: 40px; height: 40px; background: linear-gradient(135deg, #f093fb, #f5576c); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem;">ف</div>
-        <div class="chat-user-info">
-          <h3>اتاق عمومی</h3>
-          <span><i class="fas fa-circle" style="font-size: 6px; vertical-align: middle;"></i> ۱۲۴ آنلاین</span>
-        </div>
-        <div style="margin-right: auto; color: var(--text-secondary);"><i class="fas fa-ellipsis-v"></i></div>
-      </div>
-      <div class="chat-window" id="chatWindow">
-        <div class="message received">
-          سلام! به چت روم خوش آمدید.
-          <span class="message-time">۰۹:۴۱</span>
-        </div>
-        <div class="message received">
-          چطور می‌توانم کمکتان کنم؟
-          <span class="message-time">۰۹:۴۱</span>
         </div>
-      </div>
-      <div class="chat-input-area">
-        <button style="background:none; border:none; color: var(--text-secondary); padding: 0 10px; cursor: pointer;"><i class="fas fa-plus"></i></button>
-        <input type="text" class="chat-input" id="messageInput" placeholder="پیام خود را بنویسید..." autocomplete="off">
-        <button class="send-btn" onclick="sendMessage()"><i class="fas fa-paper-plane"></i></button>
-      </div>
-    </section>
-    <!-- VIEW 3: LOGIN -->
-    <section id="view-login" class="view-section">
-      <div class="glass-hero" style="padding: 1.5rem;">
-        <h2>ورود به حساب</h2>
-        <p class="subtitle">خوشحال می‌بینیم که برگشتید</p>
-      </div>
-      <div class="form-container">
-        <form onsubmit="handleLogin(event)">
-          <div class="input-group">
-            <label>نام کاربری</label>
-            <input type="text" class="glass-input" required placeholder="example">
-          </div>
-          <div class="input-group">
-            <label>رمز عبور</label>
-            <input type="password" class="glass-input" required placeholder="••••••••">
-          </div>
-          <button type="submit" class="btn-primary">ورود</button>
-          <p style="text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--text-secondary);">
-            حساب ندارید؟ <a href="#" onclick="router('register')" style="color: var(--ios-accent-teal);">ثبت نام کنید</a>
-          </p>
-        </form>
-      </div>
-    </section>
-    <!-- VIEW 4: REGISTER -->
-    <section id="view-register" class="view-section">
-      <div class="glass-hero" style="padding: 1.5rem;">
-        <h2>ایجاد حساب</h2>
-        <p class="subtitle">به جمع ما بپیوندید</p>
-      </div>
-      <div class="form-container">
-        <form onsubmit="handleRegister(event)">
-          <div class="input-group">
-            <label>نام کامل</label>
-            <input type="text" class="glass-input" required>
-          </div>
-          <div class="input-group">
-            <label>نام کاربری</label>
-            <input type="text" class="glass-input" required>
-          </div>
-          <div class="input-group">
-            <label>رمز عبور</label>
-            <input type="password" class="glass-input" required>
-          </div>
-          <button type="submit" class="btn-primary">ثبت نام</button>
-          <p style="text-align: center; margin-top: 1rem; font-size: 0.9rem; color: var(--text-secondary);">
-            قبلاً ثبت نام کرده‌اید؟ <a href="#" onclick="router('login')" style="color: var(--ios-accent-teal);">وارد شوید</a>
-          </p>
-        </form>
-      </div>
-    </section>
-    <!-- VIEW 5: ROOMS -->
-    <section id="view-rooms" class="view-section">
-      <div class="chat-header">
-        <button class="back-btn" onclick="router('dashboard')"><i class="fas fa-arrow-right"></i></button>
-        <h2>اتاق‌های گفتگو</h2>
-      </div>
-      <div style="display: flex; flex-direction: column; gap: 1rem;">
-        <!-- Room Item -->
-        <div onclick="router('chat')" style="background: var(--glass-bg); padding: 1rem; border-radius: 16px; border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: var(--transition-smooth);">
-          <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #4facfe, #00f2fe); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white;">
-            <i class="fas fa-globe"></i>
-          </div>
-          <div style="flex: 1;">
-            <h4 style="margin-bottom: 4px;">گفتگوی آزاد</h4>
-            <span style="font-size: 0.8rem; color: var(--text-secondary);">بحث در مورد تکنولوژی و برنامه‌نویسی</span>
-          </div>
-          <div style="text-align: left;">
-            <div style="font-size: 0.9rem; font-weight: bold; color: var(--ios-accent-teal);">۴۵</div>
-            <div style="font-size: 0.7rem; color: var(--text-secondary);">نفر</div>
-          </div>
         </div>
-        <!-- Room Item -->
-        <div onclick="router('chat')" style="background: var(--glass-bg); padding: 1rem; border-radius: 16px; border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: var(--transition-smooth);">
-          <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #f093fb, #f5576c); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white;">
-            <i class="fas fa-gamepad"></i>
-          </div>
-          <div style="flex: 1;">
-            <h4 style="margin-bottom: 4px;">گیمرها</h4>
-            <span style="font-size: 0.8rem; color: var(--text-secondary);">اخبار بازی و گیم‌پلی</span>
-          </div>
-          <div style="text-align: left;">
-            <div style="font-size: 0.9rem; font-weight: bold; color: var(--ios-accent-pink);">۱۲۰</div>
-            <div style="font-size: 0.7rem; color: var(--text-secondary);">نفر</div>
-          </div>
         </div>
-        <!-- Room Item -->
-        <div onclick="router('chat')" style="background: var(--glass-bg); padding: 1rem; border-radius: 16px; border: 1px solid var(--glass-border); display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: var(--transition-smooth);">
-          <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #43e97b, #38f9d7); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white;">
-            <i class="fas fa-music"></i>
-          </div>
-          <div style="flex: 1;">
-            <h4 style="margin-bottom: 4px;">موسیقی</h4>
-            <span style="font-size: 0.8rem; color: var(--text-secondary);">بهترین آهنگ‌های روز</span>
-          </div>
-          <div style="text-align: left;">
-            <div style="font-size: 0.9rem; font-weight: bold; color: var(--ios-accent-teal);">۸۰</div>
-            <div style="font-size: 0.7rem; color: var(--text-secondary);">نفر</div>
-          </div>
         </div>
-      </div>
-    </section>
-    <!-- iOS Dock (Visible on Dashboard only) -->
-    <div class="ios-dock" id="main-dock">
-      <div class="dock-item icon-gradient-1" onclick="router('register')"><i class="fas fa-user-plus"></i></div>
-      <div class="dock-item icon-gradient-3" onclick="router('chat')"><i class="fas fa-comment"></i></div>
-      <div class="dock-item icon-gradient-2" onclick="router('rooms')"><i class="fas fa-door-open"></i></div>
-      <div class="dock-item icon-gradient-4" onclick="router('login')"><i class="fas fa-user"></i></div>
     </div>
-  </div>
-  <script>
-    // --- UTILITIES ---
-    function toPersianNum(num) {
-      const persian = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
-      return num.toString().replace(/\d/g, w => persian[w]);
-    }
-    function updateClock() {
-      const now = new Date();
-      const hours = String(now.getHours()).padStart(2, '0');
-      const minutes = String(now.getMinutes()).padStart(2, '0');
-      document.getElementById('clock').textContent = toPersianNum(`${hours}:${minutes}`);
-    }
-    setInterval(updateClock, 1000);
-    updateClock();
-    // --- NAVIGATION ROUTER ---
-    function router(viewId) {
-      // Hide all views
-      document.querySelectorAll('.view-section').forEach(el => {
-        el.classList.remove('active');
-      });
-      // Show target view
-      const target = document.getElementById(`view-${viewId}`);
-      if(target) {
-        target.classList.add('active');
-      }
-      // Handle Dock Visibility
-      const dock = document.getElementById('main-dock');
-      if (viewId === 'dashboard') {
-        dock.style.display = 'flex';
-      } else {
-        dock.style.display = 'none';
-      }
-      // Scroll to top
-      window.scrollTo(0, 0);
-    }
-    // --- TOAST NOTIFICATION SYSTEM ---
-    function showToast(message, type = 'success') {
-      const container = document.getElementById('toastContainer');
-      const toast = document.createElement('div');
-      toast.className = `toast ${type}`;
-      let icon = type === 'success' ? 'fa-check-circle' : (type === 'error' ? 'fa-exclamation-circle' : 'fa-info-circle');
-      toast.innerHTML = `<i class="fas ${icon}"></i> <span>${message}</span>`;
-      container.appendChild(toast);
-      // Trigger animation
-      setTimeout(() => {
-        toast.style.animation = 'slideUpFade 0.3s ease-in forwards';
-        setTimeout(() => toast.remove(), 300);
-      }, 3000);
-    }
-    // --- FORM HANDLERS ---
-    function handleLogin(e) {
-      e.preventDefault();
-      // Simulate API call
-      const btn = e.target.querySelector('button');
-      const originalText = btn.innerText;
-      btn.innerText = 'در حال پردازش...';
-      btn.disabled = true;
-      setTimeout(() => {
-        btn.innerText = originalText;
-        btn.disabled = false;
-        showToast('با موفقیت وارد شدید', 'success');
-        router('chat');
-      }, 1500);
-    }
-    function handleRegister(e) {
-      e.preventDefault();
-      const btn = e.target.querySelector('button');
-      const originalText = btn.innerText;
-      btn.innerText = 'ثبت نام...';
-      btn.disabled = true;
-      setTimeout(() => {
-        btn.innerText = originalText;
-        btn.disabled = false;
-        showToast('حساب کاربری ایجاد شد', 'success');
-        router('dashboard');
-      }, 1500);
-    }
-    // --- CHAT LOGIC ---
-    const chatWindow = document.getElementById('chatWindow');
-    const messageInput = document.getElementById('messageInput');
-    // Auto-reply messages
-    const botReplies = [
-      "خیلی جالب بود!",
-      "می‌توانید بیشتر توضیح دهید؟",
-      "من هم همینطور فکر می‌کنم.",
-      "این عالی است 🎉",
-      "لطفاً صبر کنید، در حال بررسی هستم...",
-      "ممنون از اشتراک گذاری!"
-    ];
-    function sendMessage() {
-      const text = messageInput.value.trim();
-      if (!text) return;
-      // Add User Message
-      addMessage(text, 'sent');
-      messageInput.value = '';
-      // Simulate Bot Reply
-      setTimeout(() => {
-        const randomReply = botReplies[Math.floor(Math.random() * botReplies.length)];
-        addMessage(randomReply, 'received');
-      }, 1000 + Math.random() * 1000);
-    }
-    function addMessage(text, type) {
-      const now = new Date();
-      const timeStr = toPersianNum(`${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`);
-      const msgDiv = document.createElement('div');
-      msgDiv.className = `message ${type}`;
-      msgDiv.innerHTML = `
-        ${text}
-        <span class="message-time">${timeStr}</span>
-      `;
-      chatWindow.appendChild(msgDiv);
-      chatWindow.scrollTop = chatWindow.scrollHeight;

 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>چت روم شیشه‌ای | iOS Glassmorphism</title>
+    <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@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --glass-bg: rgba(255, 255, 255, 0.15);
+            --glass-border: rgba(255, 255, 255, 0.25);
+            --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
+            --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            --accent-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+            --text-primary: #1a1a2e;
+            --text-secondary: #4a4a6a;
+            --white: #ffffff;
+            --blur-amount: blur(20px);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Vazirmatn', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
+            background-size: 400% 400%;
+            animation: gradientShift 15s ease infinite;
+            min-height: 100vh;
+            overflow-x: hidden;
+            position: relative;
+        }
+        @keyframes gradientShift {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        /* Floating Background Elements */
+        .bg-shapes {
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: 0;
+            pointer-events: none;
+        }
+        .shape {
+            position: absolute;
+            filter: blur(80px);
+            opacity: 0.6;
+            animation: float 20s infinite ease-in-out;
+        }
+        .shape-1 {
+            width: 400px;
+            height: 400px;
+            background: rgba(255, 255, 255, 0.4);
+            border-radius: 50%;
+            top: -10%;
+            right: -10%;
+            animation-delay: 0s;
+        }
+        .shape-2 {
+            width: 300px;
+            height: 300px;
+            background: rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            bottom: 10%;
+            left: -5%;
+            animation-delay: -5s;
+        }
+        .shape-3 {
+            width: 250px;
+            height: 250px;
+            background: rgba(255, 255, 255, 0.35);
+            border-radius: 50%;
+            top: 40%;
+            left: 30%;
+            animation-delay: -10s;
+        }
+        @keyframes float {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            33% { transform: translate(30px, -30px) scale(1.1); }
+            66% { transform: translate(-20px, 20px) scale(0.9); }
+        }
+        /* Header */
+        .header {
+            position: fixed;
+            top: 0;
+            width: 100%;
+            padding: 1rem 2rem;
+            z-index: 1000;
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: var(--blur-amount);
+            -webkit-backdrop-filter: var(--blur-amount);
+            border-bottom: 1px solid var(--glass-border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            color: var(--white);
+            font-weight: 700;
+            font-size: 1.2rem;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .brand i {
+            font-size: 1.5rem;
+        }
+        .built-with {
+            background: rgba(255, 255, 255, 0.2);
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
+            color: var(--white);
+            text-decoration: none;
+            font-size: 0.85rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            backdrop-filter: blur(10px);
+        }
+        .built-with:hover {
+            background: rgba(255, 255, 255, 0.3);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        }
+        /* Main Container */
+        .container {
+            position: relative;
+            z-index: 1;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 8rem 2rem 4rem;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 3rem;
+        }
+        /* Hero Section Glass Card */
+        .hero-glass {
+            background: var(--glass-bg);
+            backdrop-filter: var(--blur-amount);
+            -webkit-backdrop-filter: var(--blur-amount);
+            border: 1px solid var(--glass-border);
+            border-radius: 30px;
+            padding: 3rem;
+            width: 100%;
+            max-width: 800px;
+            box-shadow: var(--glass-shadow);
+            text-align: center;
+            position: relative;
+            overflow: hidden;
+            transform: translateY(0);
+            transition: transform 0.3s ease;
+        }
+        .hero-glass::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            background: linear-gradient(
+                45deg,
+                transparent 30%,
+                rgba(255, 255, 255, 0.3) 50%,
+                transparent 70%
+            );
+            transform: rotate(45deg);
+            transition: all 0.6s;
+            opacity: 0;
+        }
+        .hero-glass:hover::before {
+            animation: shimmer 0.6s ease-in-out;
+        }
+        @keyframes shimmer {
+            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0; }
+            50% { opacity: 1; }
+            100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0; }
+        }
+        .hero-glass:hover {
+            transform: translateY(-5px);
+        }
+        .hero-icon {
+            width: 100px;
+            height: 100px;
+            background: var(--white);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 1.5rem;
+            font-size: 3rem;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        .hero-icon::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: var(--primary-gradient);
+            opacity: 0.1;
+        }
+        h1 {
+            font-size: 2.5rem;
+            font-weight: 800;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+        .subtitle {
+            font-size: 1.25rem;
+            color: var(--text-secondary);
+            font-weight: 500;
+            opacity: 0.9;
+        }
+        /* Features Grid */
+        .features {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 2rem;
+            width: 100%;
+            max-width: 1000px;
+        }
+        .feature-card {
+            background: var(--glass-bg);
+            backdrop-filter: var(--blur-amount);
+            -webkit-backdrop-filter: var(--blur-amount);
+            border: 1px solid var(--glass-border);
+            border-radius: 24px;
+            padding: 2rem;
+            text-align: center;
+            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+            position: relative;
+            overflow: hidden;
+        }
+        .feature-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 4px;
+            background: var(--accent-gradient);
+            transform: scaleX(0);
+            transition: transform 0.3s ease;
+        }
+        .feature-card:hover {
+            transform: translateY(-10px) scale(1.02);
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            background: rgba(255, 255, 255, 0.25);
+        }
+        .feature-card:hover::before {
+            transform: scaleX(1);
+        }
+        .feature-icon {
+            width: 70px;
+            height: 70px;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 1.5rem;
+            font-size: 2rem;
+            color: var(--text-primary);
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+        }
+        .feature-card:hover .feature-icon {
+            transform: scale(1.1) rotate(5deg);
+            background: var(--white);
+        }
+        .feature-card h3 {
+            font-size: 1.3rem;
+            color: var(--text-primary);
+            margin-bottom: 0.5rem;
+            font-weight: 700;
+        }
+        .feature-card p {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+            line-height: 1.6;
+        }
+        /* CTA Section */
+        .cta-glass {
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: var(--blur-amount);
+            -webkit-backdrop-filter: var(--blur-amount);
+            border: 1px solid var(--glass-border);
+            border-radius: 50px;
+            padding: 1rem;
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+            justify-content: center;
+            box-shadow: var(--glass-shadow);
+            margin-top: 1rem;
+        }
+        .btn {
+            padding: 1rem 2.5rem;
+            border-radius: 50px;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1.1rem;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border: none;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .btn-primary {
+            background: var(--white);
+            color: #667eea;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+            background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
+        }
+        .btn-secondary {
+            background: transparent;
+            color: var(--white);
+            border: 2px solid rgba(255, 255, 255, 0.5);
+        }
+        .btn-secondary:hover {
+            background: rgba(255, 255, 255, 0.2);
+            border-color: var(--white);
+            transform: translateY(-2px);
+        }
+        .btn::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 0;
+            height: 0;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.5);
+            transform: translate(-50%, -50%);
+            transition: width 0.6s, height 0.6s;
+        }
+        .btn:active::after {
+            width: 300px;
+            height: 300px;
+        }
+        /* Particles */
+        .particles {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 0;
+        }
+        .particle {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            background: rgba(255, 255, 255, 0.5);
+            border-radius: 50%;
+            animation: particleFloat 15s infinite;
+        }
+        @keyframes particleFloat {
+            0%, 100% {
+                transform: translateY(100vh) rotate(0deg);
+                opacity: 0;
+            }
+            10% {
+                opacity: 1;
+            }
+            90% {
+                opacity: 1;
+            }
+            100% {
+                transform: translateY(-100vh) rotate(720deg);
+                opacity: 0;
+            }
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            h1 {
+                font-size: 1.8rem;
+            }
+            .hero-glass {
+                padding: 2rem 1.5rem;
+            }
+            .features {
+                grid-template-columns: 1fr;
+            }
+            .cta-glass {
+                flex-direction: column;
+                width: 100%;
+            }
+            .btn {
+                width: 100%;
+                justify-content: center;
+            }
+            .header {
+                padding: 1rem;
+            }
+        }
+        /* Loading Animation */
+        .loader {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            z-index: 9999;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            transition: opacity 0.5s ease;
+        }
+        .loader.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+        .loader-spinner {
+            width: 50px;
+            height: 50px;
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-top-color: var(--white);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Interactive Elements */
+        .status-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            background: rgba(255, 255, 255, 0.2);
+            padding: 0.5rem 1rem;
+            border-radius: 50px;
+            font-size: 0.9rem;
+            color: var(--white);
+            margin-top: 1rem;
+            backdrop-filter: blur(10px);
+        }
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            background: #4ade80;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+    </style>
 </head>
 <body>
+    <!-- Loader -->
+    <div class="loader" id="loader">
+        <div class="loader-spinner"></div>
     </div>
+    <!-- Background Shapes -->
+    <div class="bg-shapes">
+        <div class="shape shape-1"></div>
+        <div class="shape shape-2"></div>
+        <div class="shape shape-3"></div>
+    </div>
+    <!-- Particles Container -->
+    <div class="particles" id="particles"></div>
+    <!-- Header -->
+    <header class="header">
+        <div class="brand">
+            <i class="fas fa-comments"></i>
+            <span>چت روم شیشه‌ای</span>
         </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+            <i class="fas fa-code"></i>
+            Built with anycoder
+        </a>
+    </header>
+    <!-- Main Content -->
+    <div class="container">
+        <!-- Hero Section -->
+        <div class="hero-glass" data-tilt>
+            <div class="hero-icon">
+                <i class="fas fa-comment-dots" style="background: var(--primary-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i>
+            </div>
+            <h1>💬 چت روم ساده</h1>
+            <p class="subtitle">محلی برای گفتگو با دوستان در فضایی مدرن و شیشه‌ای</p>
+            <div class="status-indicator">
+                <span class="status-dot"></span>
+                <span>۱۲۳ کاربر آنلاین</span>
+            </div>
         </div>
+        <!-- Features Grid -->
+        <div class="features">
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-mobile-alt" style="color: #667eea;"></i>
+                </div>
+                <h3>ثبت‌نام آسان</h3>
+                <p>با شماره موبایل ثبت‌نام کنید و در کمتر از ۳۰ ثانیه وارد شوید</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-users" style="color: #f5576c;"></i>
+                </div>
+                <h3>ساخت اتاق</h3>
+                <p>تا ۳ اتاق مختلف بسازید و دوستان خود را دعوت کنید</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-bolt" style="color: #4facfe;"></i>
+                </div>
+                <h3>چت زنده</h3>
+                <p>گفتگوی آنلاین و سریع با سرعت انتقال پیام کمتر از ۱۰۰ میلی‌ثانیه</p>
+            </div>
         </div>
+        <!-- CTA Section -->
+        <div class="cta-glass">
+            <a href="#" class="btn btn-primary" onclick="handleAction('register')">
+                <i class="fas fa-rocket"></i>
+                شروع کنید
+            </a>
+            <a href="#" class="btn btn-secondary" onclick="handleAction('login')">
+                <i class="fas fa-sign-in-alt"></i>
+                ورود
+            </a>
         </div>
     </div>
+    <script>
+        // Remove loader when page loads
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                document.getElementById('loader').classList.add('hidden');
+            }, 500);
+        });
+        // Create floating particles
+        function createParticles() {
+            const container = document.getElementById('particles');
+            const particleCount = 20;
+            for (let i = 0; i < particleCount; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'particle';
+                particle.style.left = Math.random() * 100 + '%';
+                particle.style.animationDelay = Math.random() * 15 + 's';
+                particle.style.animationDuration = (Math.random() * 10 + 10) + 's';
+                container.appendChild(particle);
+            }
+        }
+        createParticles();
+        // 3D Tilt Effect for Hero Card
+        const heroCard = document.querySelector('.hero-glass');
+        heroCard.addEventListener('mousemove', (e) => {
+            const rect = heroCard.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            const centerX = rect.width / 2;
+            const centerY = rect.height / 2;
+            const rotateX = (y - centerY) / 20;
+            const rotateY = (centerX - x) / 20;
+            heroCard.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-5px)`;
+        });
+        heroCard.addEventListener('mouseleave', () => {
+            heroCard.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateY(0)';
+        });
+        // Button Click Handlers
+        function handleAction(action) {
+            const btn = event.currentTarget;
+            // Create ripple effect
+            const ripple = document.createElement('span');
+            ripple.style.position = 'absolute';
+            ripple.style.width = '20px';
+            ripple.style.height = '20px';
+            ripple.style.background = 'rgba(255,255,255,0.5)';
+            ripple.style.borderRadius = '50%';
+            ripple.style.transform = 'translate(-50%, -50%)';
+            ripple.style.pointerEvents = 'none';
+            ripple.style.animation = 'ripple 0.6s ease-out';
+            const rect = btn.getBoundingClientRect();
+            ripple.style.left = (event.clientX - rect.left) + 'px';
+            ripple.style.top = (event.clientY - rect.top) + 'px';
+            btn.style.position = 'relative';
+            btn.style.overflow = 'hidden';
+            btn.appendChild(ripple);
+            setTimeout(() => ripple.remove(), 600);
+            // Simulate action
+            setTimeout(() => {
+                if (action === 'register') {
+                    showNotification('در حال انتقال به صفحه ثبت‌نام...', 'info');
+                } else {
+                    showNotification('در حال انتقال به صفحه ورود...', 'info');
+                }
+            }, 300);
+        }
+        // Custom Notification System
+        function showNotification(message, type = 'info') {
+            const notification = document.createElement('div');
+            notification.style.cssText = `
+                position: fixed;
+                top: 100px;
+                left: 50%;
+                transform: translateX(-50%) translateY(-20px);
+                background: rgba(255, 255, 255, 0.9);
+                backdrop-filter: blur(20px);
+                padding: 1rem 2rem;
+                border-radius: 16px;
+                box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+                z-index: 9999;
+                font-family: 'Vazirmatn', sans-serif;
+                font-weight: 600;
+                color: #667eea;
+                border: 1px solid rgba(255,255,255,0.5);
+                opacity: 0;
+                transition: all 0.3s ease;
+                direction: rtl;
+            `;
+            notification.textContent = message;
+            document.body.appendChild(notification);
+            // Animate in
+            requestAnimationFrame(() => {
+                notification.style.opacity = '1';
+                notification.style.transform = 'translateX(-50%) translateY(0)';
+            });
+            // Remove after delay
+            setTimeout(() => {
+                notification.style.opacity = '0';
+                notification.style.transform = 'translateX(-50%) translateY(-20px)';
+                setTimeout(() => notification.remove(), 300);
+            }, 3000);
+        }
+        // Add ripple animation to styles dynamically
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes ripple {
+                to {
+                    width: 200px;
+                    height: 200px;
+                    opacity: 0;
+                }
+            }
+        `;
+        document.head.appendChild(style);
+        // Parallax effect on scroll
+        window.addEventListener('scroll', () => {
+            const scrolled = window.pageYOffset;
+            const parallax = document.querySelector('.shape-1');
+            const parallax2 = document.querySelector('.shape-2');
+            parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
+            parallax2.style.transform = `translateY(${scrolled * 0.3}px)`;
+        });
+        // Intersection Observer for fade-in animations
+        const observerOptions = {
+            threshold: 0.1,
+            rootMargin: '0px 0px -50px 0px'
+        };
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    entry.target.style.opacity = '1';
+                    entry.target.style.transform = 'translateY(0)';
+                }
+            });
+        }, observerOptions);
+        // Observe feature cards
+        document.querySelectorAll('.feature-card').forEach((card, index) => {
+            card.style.opacity = '0';
+            card.style.transform = 'translateY(30px)';
+            card.style.transition = `all 0.6s ease ${index * 0.1}s`;
+            observer.observe(card);
+        });
+        // Dynamic online user count
+        setInterval(() => {
+            const statusSpan = document.querySelector('.status-indicator span:last-child');
+            const currentUsers = parseInt(statusSpan.textContent);
+            const change = Math.floor(Math.random() * 5) - 2; // -2 to +2
+            const newUsers = Math.max(100, currentUsers + change);
+            statusSpan.textContent = `${newUsers} کاربر آنلاین`;
+        }, 5000);
+    </script>
+</body>
+</html>