Spaces:

samirerty
/

anycoder-67db3049

Running

App Files Files Community

samirerty commited on Feb 4

Commit

734b3b0

verified ·

1 Parent(s): 25debea

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +911 -19

index.html CHANGED Viewed

@@ -1,19 +1,911 @@
-<!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>چت‌روم شیشه‌ای مات | Modern Liquid Glass</title>
+    <!-- Importing Vazirmatn Font for Persian -->
+    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
+    <!-- Importing FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --bg-dark: #0f172a;
+            --glass-bg: rgba(30, 41, 59, 0.4);
+            --glass-border: rgba(255, 255, 255, 0.1);
+            --glass-shine: rgba(255, 255, 255, 0.05);
+            --primary: #3b82f6;
+            --primary-hover: #2563eb;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --danger: #ef4444;
+            --success: #10b981;
+            --blur-amount: 24px;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            outline: none;
+            font-family: 'Vazirmatn', sans-serif;
+            -webkit-tap-highlight-color: transparent;
+        }
+        body {
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            height: 100vh;
+            width: 100vw;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+        }
+        /* --- Animated Background Orbs --- */
+        .orb {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(80px);
+            z-index: -1;
+            animation: float 10s infinite ease-in-out alternate;
+            opacity: 0.6;
+        }
+        .orb-1 {
+            width: 400px;
+            height: 400px;
+            background: #4f46e5;
+            top: -100px;
+            left: -100px;
+        }
+        .orb-2 {
+            width: 300px;
+            height: 300px;
+            background: #ec4899;
+            bottom: -50px;
+            right: -50px;
+            animation-delay: -5s;
+        }
+        .orb-3 {
+            width: 200px;
+            height: 200px;
+            background: #06b6d4;
+            top: 40%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            animation: pulse 8s infinite;
+        }
+        @keyframes float {
+            0% { transform: translate(0, 0); }
+            100% { transform: translate(30px, 50px); }
+        }
+        @keyframes pulse {
+            0% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
+            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.6; }
+            100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
+        }
+        /* --- Glassmorphism Base Class --- */
+        .glass-panel {
+            background: var(--glass-bg);
+            backdrop-filter: blur(var(--blur-amount));
+            -webkit-backdrop-filter: blur(var(--blur-amount));
+            border: 1px solid var(--glass-border);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+        }
+        /* --- Header / Brand --- */
+        .header-brand {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 100;
+            font-size: 0.9rem;
+            color: var(--text-muted);
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+        .header-brand:hover { color: var(--text-main); }
+        /* --- Login Container --- */
+        .login-container {
+            width: 100%;
+            max-width: 420px;
+            padding: 2.5rem;
+            border-radius: 24px;
+            text-align: center;
+            transition: all 0.4s ease;
+            display: flex; /* Initially visible */
+            flex-direction: column;
+            gap: 1.5rem;
+            position: relative;
+            z-index: 10;
+        }
+        .app-logo {
+            font-size: 3rem;
+            background: linear-gradient(135deg, #60a5fa, #c084fc);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 0.5rem;
+        }
+        .title {
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+        .subtitle {
+            font-size: 0.9rem;
+            color: var(--text-muted);
+        }
+        /* --- Forms & Inputs --- */
+        .input-group {
+            position: relative;
+            margin-bottom: 1rem;
+            text-align: right;
+        }
+        .input-group i {
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: var(--text-muted);
+            transition: color 0.3s;
+        }
+        .input-field {
+            width: 100%;
+            padding: 14px 45px 14px 16px;
+            background: rgba(15, 23, 42, 0.4);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            color: white;
+            font-size: 1rem;
+            transition: all 0.3s;
+        }
+        .input-field:focus {
+            border-color: var(--primary);
+            background: rgba(15, 23, 42, 0.6);
+            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+        }
+        .input-field:focus + i {
+            color: var(--primary);
+        }
+        /* --- Custom Checkbox / Captcha --- */
+        .captcha-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: rgba(0,0,0,0.2);
+            padding: 10px 15px;
+            border-radius: 12px;
+            margin-bottom: 1.5rem;
+            border: 1px solid var(--glass-border);
+            cursor: pointer;
+            user-select: none;
+            transition: background 0.3s;
+        }
+        .captcha-container:hover { background: rgba(0,0,0,0.3); }
+        .captcha-checkbox {
+            width: 24px;
+            height: 24px;
+            border: 2px solid var(--text-muted);
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-left: 10px;
+            transition: all 0.3s;
+        }
+        .captcha-checkbox.checked {
+            background: var(--success);
+            border-color: var(--success);
+        }
+        .captcha-checkbox i {
+            font-size: 14px;
+            color: white;
+            transform: scale(0);
+            transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        .captcha-checkbox.checked i {
+            transform: scale(1);
+        }
+        .captcha-text {
+            flex-grow: 1;
+            font-size: 0.9rem;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .captcha-spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--text-muted);
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            display: none;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+        /* --- Buttons --- */
+        .btn {
+            width: 100%;
+            padding: 14px;
+            border: none;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary), #6366f1);
+            color: white;
+            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
+        }
+        .btn-primary:active { transform: translateY(0); }
+        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+        .btn-ghost {
+            background: transparent;
+            color: var(--text-muted);
+            font-size: 0.85rem;
+            padding: 5px;
+        }
+        .btn-ghost:hover { color: var(--primary); text-decoration: underline; }
+        /* --- Auth Steps Transitions --- */
+        .auth-step {
+            display: none;
+            animation: fadeIn 0.4s ease;
+        }
+        .auth-step.active { display: block; }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .timer-text {
+            font-size: 0.85rem;
+            color: var(--text-muted);
+            margin-top: 10px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        /* --- Chat Room Layout --- */
+        #chat-room {
+            display: none; /* Hidden initially */
+            width: 95vw;
+            height: 90vh;
+            border-radius: 24px;
+            overflow: hidden;
+            flex-direction: row;
+            position: relative;
+            animation: scaleUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+        @keyframes scaleUp {
+            from { opacity: 0; transform: scale(0.95); }
+            to { opacity: 1; transform: scale(1); }
+        }
+        /* Sidebar */
+        .sidebar {
+            width: 280px;
+            border-left: 1px solid var(--glass-border);
+            display: flex;
+            flex-direction: column;
+            background: rgba(0,0,0,0.2);
+        }
+        .sidebar-header {
+            padding: 20px;
+            border-bottom: 1px solid var(--glass-border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .user-profile-mini {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            object-fit: cover;
+            border: 2px solid var(--primary);
+        }
+        .search-bar {
+            padding: 15px;
+        }
+        .search-input {
+            width: 100%;
+            background: rgba(255,255,255,0.05);
+            border: none;
+            padding: 10px 15px;
+            border-radius: 10px;
+            color: white;
+            font-size: 0.9rem;
+        }
+        .chat-list {
+            flex-grow: 1;
+            overflow-y: auto;
+            padding: 10px;
+        }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: transparent; }
+        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
+        .chat-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: background 0.2s;
+            margin-bottom: 5px;
+        }
+        .chat-item:hover, .chat-item.active {
+            background: rgba(255,255,255,0.08);
+        }
+        .chat-info h4 { font-size: 0.95rem; margin-bottom: 4px; }
+        .chat-info p { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
+        /* Main Chat Area */
+        .chat-area {
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+        .chat-top-bar {
+            padding: 15px 25px;
+            border-bottom: 1px solid var(--glass-border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: rgba(30, 41, 59, 0.2);
+        }
+        .chat-top-info {
+            display: flex;
+            flex-direction: column;
+        }
+        .chat-top-name { font-weight: 700; }
+        .chat-top-status { font-size: 0.75rem; color: var(--success); }
+        .messages-container {
+            flex-grow: 1;
+            padding: 20px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+        }
+        .message {
+            max-width: 70%;
+            padding: 12px 16px;
+            border-radius: 18px;
+            font-size: 0.95rem;
+            line-height: 1.5;
+            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; }
+        }
+        .message.received {
+            align-self: flex-start;
+            background: rgba(255, 255, 255, 0.1);
+            color: var(--text-main);
+            border-bottom-right-radius: 4px;
+        }
+        .message.sent {
+            align-self: flex-end;
+            background: var(--primary);
+            color: white;
+            border-bottom-left-radius: 4px;
+            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
+        }
+        .message-time {
+            font-size: 0.7rem;
+            margin-top: 5px;
+            opacity: 0.7;
+            text-align: left;
+        }
+        .input-area {
+            padding: 20px;
+            background: rgba(15, 23, 42, 0.3);
+            border-top: 1px solid var(--glass-border);
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+        .attach-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            border: none;
+            background: rgba(255,255,255,0.05);
+            color: var(--text-muted);
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .attach-btn:hover { background: rgba(255,255,255,0.1); color: white; }
+        .message-input {
+            flex-grow: 1;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid var(--glass-border);
+            padding: 12px 20px;
+            border-radius: 25px;
+            color: white;
+            resize: none;
+            height: 45px;
+            line-height: 20px;
+            transition: all 0.3s;
+        }
+        .message-input:focus { background: rgba(0,0,0,0.2); border-color: var(--primary); }
+        .send-btn {
+            width: 45px;
+            height: 45px;
+            border-radius: 50%;
+            border: none;
+            background: var(--primary);
+            color: white;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: transform 0.2s;
+        }
+        .send-btn:hover { transform: scale(1.1); background: var(--primary-hover); }
+        .send-btn:active { transform: scale(0.95); }
+        /* --- Toast Notification --- */
+        .toast-container {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .toast {
+            padding: 12px 24px;
+            border-radius: 50px;
+            color: white;
+            font-size: 0.9rem;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            animation: slideDown 0.3s ease;
+        }
+        .toast.error { background: rgba(239, 68, 68, 0.9); }
+        .toast.success { background: rgba(16, 185, 129, 0.9); }
+        .toast.info { background: rgba(59, 130, 246, 0.9); }
+        @keyframes slideDown {
+            from { transform: translateY(-20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        /* --- Responsive Design --- */
+        @media (max-width: 768px) {
+            .login-container { padding: 1.5rem; width: 90%; }
+            .sidebar { display: none; /* Hide sidebar on mobile for simplicity */ }
+            #chat-room { width: 100%; height: 100%; border-radius: 0; }
+            .top-bar-back-btn { display: block; }
+        }
+        .top-bar-back-btn { display: none; background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; }
+    </style>
+</head>
+<body>
+    <!-- Background Orbs -->
+    <div class="orb orb-1"></div>
+    <div class="orb orb-2"></div>
+    <div class="orb orb-3"></div>
+    <!-- Branding Link -->
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-brand">
+        Built with anycoder <i class="fas fa-external-link-alt" style="font-size: 0.7em;"></i>
+    </a>
+    <!-- Toast Container -->
+    <div class="toast-container" id="toastContainer"></div>
+    <!-- LOGIN / AUTH SECTION -->
+    <div class="glass-panel login-container" id="loginSection">
+        <div class="app-logo"><i class="fas fa-comment-dots"></i></div>
+        <h1 class="title">ورود به حساب</h1>
+        <p class="subtitle">به چت‌روم شیشه‌ای خوش آمدید</p>
+        <!-- Step 1: Phone & Captcha -->
+        <div id="step1" class="auth-step active">
+            <div class="captcha-container" id="captchaBox" onclick="toggleCaptcha()">
+                <div class="captcha-checkbox" id="captchaCheck">
+                    <i class="fas fa-check"></i>
+                </div>
+                <div class="captcha-text">
+                    <span>من ربات نیستم</span>
+                    <div class="captcha-spinner" id="captchaSpinner"></div>
+                </div>
+                <i class="fas fa-robot" style="color: var(--text-muted);"></i>
+            </div>
+            <div class="input-group">
+                <input type="tel" id="phoneInput" class="input-field" placeholder="شماره موبایل (مثال: 09123456789)" maxlength="11">
+                <i class="fas fa-mobile-alt"></i>
+            </div>
+            <button class="btn btn-primary" onclick="sendCode()">
+                دریافت کد تایید <i class="fas fa-paper-plane"></i>
+            </button>
+        </div>
+        <!-- Step 2: Verify Code -->
+        <div id="step2" class="auth-step">
+            <div class="input-group">
+                <input type="text" id="otpInput" class="input-field" placeholder="کد ۵ رقمی را وارد کنید" maxlength="5" style="letter-spacing: 5px; text-align: center; direction: ltr;">
+                <i class="fas fa-shield-alt"></i>
+            </div>
+            <button class="btn btn-primary" id="verifyBtn" onclick="verifyCode()">
+                تایید و ورود <i class="fas fa-sign-in-alt"></i>
+            </button>
+            <div class="timer-text">
+                <span id="timerDisplay">02:00</span>
+                <button class="btn-ghost" id="resendBtn" onclick="sendCode()" disabled>ارسال مجدد کد</button>
+            </div>
+            <button class="btn-ghost" onclick="resetAuth()" style="margin-top: 10px;">
+                <i class="fas fa-arrow-right"></i> تغییر شماره
+            </button>
+        </div>
+    </div>
+    <!-- CHAT ROOM SECTION -->
+    <div class="glass-panel" id="chat-room">
+        <!-- Sidebar -->
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <div class="user-profile-mini">
+                    <img src="https://picsum.photos/seed/user1/100/100" class="avatar" alt="User">
+                    <div style="font-size: 0.9rem; font-weight: bold;">کاربر من</div>
+                </div>
+                <div style="display: flex; gap: 10px;">
+                    <i class="fas fa-cog" style="color: var(--text-muted); cursor: pointer;"></i>
+                    <i class="fas fa-edit" style="color: var(--text-muted); cursor: pointer;"></i>
+                </div>
+            </div>
+            <div class="search-bar">
+                <input type="text" class="search-input" placeholder="جستجو...">
+            </div>
+            <div class="chat-list">
+                <div class="chat-item active">
+                    <img src="https://picsum.photos/seed/tech/100/100" class="avatar" style="border-color: var(--success);">
+                    <div class="chat-info">
+                        <h4>گروه برنامه‌نویسی</h4>
+                        <p>علی: پروژه جدید کی شروع میشه؟</p>
+                    </div>
+                    <span style="font-size: 0.7rem; color: var(--text-muted); margin-right: auto;">10:30</span>
+                </div>
+                <div class="chat-item">
+                    <img src="https://picsum.photos/seed/friend/100/100" class="avatar">
+                    <div class="chat-info">
+                        <h4>سارا احمدی</h4>
+                        <p>سلام، چطوری؟</p>
+                    </div>
+                </div>
+                <div class="chat-item">
+                    <img src="https://picsum.photos/seed/work/100/100" class="avatar">
+                    <div class="chat-info">
+                        <h4>اتاق گفتگوی عمومی</h4>
+                        <p>پیام جدیدی وجود ندارد</p>
+                    </div>
+                </div>
+            </div>
+        </aside>
+        <!-- Main Chat -->
+        <main class="chat-area">
+            <div class="chat-top-bar">
+                <div style="display: flex; align-items: center; gap: 15px;">
+                    <button class="top-bar-back-btn"><i class="fas fa-arrow-right"></i></button>
+                    <img src="https://picsum.photos/seed/tech/100/100" class="avatar" style="width: 35px; height: 35px; border-color: var(--success);">
+                    <div class="chat-top-info">
+                        <span class="chat-top-name">گروه برنامه‌نویسی</span>
+                        <span class="chat-top-status"><i class="fas fa-circle" style="font-size: 8px;"></i> آنلاین</span>
+                    </div>
+                </div>
+                <div>
+                    <i class="fas fa-phone" style="margin-left: 15px; cursor: pointer; color: var(--text-muted);"></i>
+                    <i class="fas fa-video" style="margin-left: 15px; cursor: pointer; color: var(--text-muted);"></i>
+                    <i class="fas fa-ellipsis-v" style="cursor: pointer; color: var(--text-muted);"></i>
+                </div>
+            </div>
+            <div class="messages-container" id="messagesList">
+                <div style="text-align: center; font-size: 0.8rem; color: var(--text-muted); margin: 10px 0;">امروز</div>
+                <div class="message received">
+                    سلام به همه! خوشحالم که اینجا هستید.
+                    <div class="message-time">09:15</div>
+                </div>
+                <div class="message sent">
+                    سلام وقت بخیر، منم خوشحالم.
+                    <div class="message-time">09:16</div>
+                </div>
+                <div class="message received">
+                    کسی درباره استایل جدید Liquid Glass چیزی می‌دونه؟
+                    <div class="message-time">09:18</div>
+                </div>
+                <div class="message sent">
+                    آره، خیلی ترند شده. توی همین صفحه هم داریم ازش استفاده می‌کنیم!
+                    <div class="message-time">09:20</div>
+                </div>
+            </div>
+            <div class="input-area">
+                <button class="attach-btn"><i class="fas fa-paperclip"></i></button>
+                <button class="attach-btn"><i class="far fa-smile"></i></button>
+                <input type="text" class="message-input" id="msgInput" placeholder="پیام خود را بنویسید..." onkeypress="handleEnter(event)">
+                <button class="send-btn" onclick="sendMessage()"><i class="fas fa-paper-plane"></i></button>
+            </div>
+        </main>
+    </div>
+    <script>
+        // --- State Management ---
+        let captchaVerified = false;
+        let phoneNumber = "";
+        let countdownInterval;
+        const RESEND_TIME = 120; // 2 minutes in seconds
+        // --- DOM Elements ---
+        const loginSection = document.getElementById('loginSection');
+        const chatRoom = document.getElementById('chat-room');
+        const step1 = document.getElementById('step1');
+        const step2 = document.getElementById('step2');
+        const captchaBox = document.getElementById('captchaBox');
+        const captchaCheck = document.getElementById('captchaCheck');
+        const captchaSpinner = document.getElementById('captchaSpinner');
+        const phoneInput = document.getElementById('phoneInput');
+        const otpInput = document.getElementById('otpInput');
+        const timerDisplay = document.getElementById('timerDisplay');
+        const resendBtn = document.getElementById('resendBtn');
+        const messagesList = document.getElementById('messagesList');
+        const msgInput = document.getElementById('msgInput');
+        // --- Functions ---
+        function showToast(message, type = 'info') {
+            const container = document.getElementById('toastContainer');
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            let icon = 'info-circle';
+            if (type === 'success') icon = 'check-circle';
+            if (type === 'error') icon = 'exclamation-circle';
+            toast.innerHTML = `<i class="fas fa-${icon}"></i> ${message}`;
+            container.appendChild(toast);
+            setTimeout(() => {
+                toast.style.opacity = '0';
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+        function toggleCaptcha() {
+            if (captchaVerified) return; // Already verified
+            captchaSpinner.style.display = 'block';
+            // Simulate API check delay
+            setTimeout(() => {
+                captchaSpinner.style.display = 'none';
+                captchaCheck.classList.add('checked');
+                captchaVerified = true;
+                showToast('ربات نبودن شما تایید شد', 'success');
+            }, 800);
+        }
+        function sendCode() {
+            // Validation Step 1
+            if (!captchaVerified) {
+                showToast('لطفاً تیک "من ربات نیستم" را بزنید', 'error');
+                return;
+            }
+            const phone = phoneInput.value.trim();
+            const phoneRegex = /^09\d{9}$/;
+            if (!phoneRegex.test(phone)) {
+                showToast('شماره موبایل نامعتبر است (۱۰ رقمی با ۰۹)', 'error');
+                return;
+            }
+            phoneNumber = phone;
+            // Simulate Sending Code
+            showToast(`کد تایید برای ${phoneNumber} ارسال شد`, 'success');
+            // Switch Step
+            step1.classList.remove('active');
+            step2.classList.add('active');
+            startTimer();
+        }
+        function startTimer() {
+            let timeLeft = RESEND_TIME;
+            resendBtn.disabled = true;
+            resendBtn.style.opacity = '0.5';
+            resendBtn.style.cursor = 'not-allowed';
+            clearInterval(countdownInterval);
+            countdownInterval = setInterval(() => {
+                const minutes = Math.floor(timeLeft / 60);
+                const seconds = timeLeft % 60;
+                timerDisplay.textContent = `0${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+                if (timeLeft <= 0) {
+                    clearInterval(countdownInterval);
+                    timerDisplay.textContent = "ارسال مجدد";
+                    resendBtn.disabled = false;
+                    resendBtn.style.opacity = '1';
+                    resendBtn.style.cursor = 'pointer';
+                }
+                timeLeft--;
+            }, 1000);
+        }
+        function verifyCode() {
+            const code = otpInput.value.trim();
+            if (code.length < 4) {
+                showToast('کد تایید نامعتبر است', 'error');
+                return;
+            }
+            // Simulate Verification Success
+            showToast('ورود موفقیت‌آمیز!', 'success');
+            // Transition to Chat
+            setTimeout(() => {
+                loginSection.style.display = 'none';
+                chatRoom.style.display = 'flex';
+            }, 1000);
+        }
+        function resetAuth() {
+            step2.classList.remove('active');
+            step1.classList.add('active');
+            clearInterval(countdownInterval);
+            otpInput.value = '';
+        }
+        // --- Chat Functions ---
+        function handleEnter(e) {
+            if (e.key === 'Enter') sendMessage();
+        }
+        function sendMessage() {
+            const text = msgInput.value.trim();
+            if (!text) return;
+            // Add User Message
+            addMessage(text, 'sent');
+            msgInput.value = '';
+            // Simulate Auto Reply
+            setTimeout(() => {
+                const replies = [
+                    "جالب بود!",
+                    "می‌شه بیشتر توضیح بدی؟",
+                    "باشه، حتما.",
+                    "من موافقم.",
+                    "الان سرم شلوغه، بعدا صحبت می‌کنیم."
+                ];
+                const randomReply = replies[Math.floor(Math.random() * replies.length)];
+                addMessage(randomReply, 'received');
+            }, 2000 + Math.random() * 2000);
+        }
+        function addMessage(text, type) {
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `message ${type}`;
+            const now = new Date();
+            const timeString = `${now.getHours()}:${now.getMinutes() < 10 ? '0' : ''}${now.getMinutes()}`;
+            msgDiv.innerHTML = `
+                ${text}
+                <div class="message-time">${timeString}</div>
+            `;
+            messagesList.appendChild(msgDiv);
+            messagesList.scrollTop = messagesList.scrollHeight;
+        }
+    </script>
+</body>
+</html>