Spaces:

samirerty
/

anycoder-67db3049

Running

App Files Files Community

samirerty commited on Feb 4

Commit

29f19ce

verified ·

1 Parent(s): d026f9a

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +415 -667

index.html CHANGED Viewed

@@ -3,26 +3,24 @@
 <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;
         }
         * {
@@ -35,223 +33,175 @@
         }
         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;
@@ -260,273 +210,91 @@
             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;
@@ -539,372 +307,352 @@
         }
         .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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ورود با شیشه مایع</title>
+    <!-- فونت وزیرمتن برای ظاهر فارسی زیبا -->
+    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
+    <!-- آیکون‌های FontAwesome -->
     <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.05);
             --glass-border: rgba(255, 255, 255, 0.1);
+            --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+            --primary-color: #0a84ff;
+            --text-color: #ffffff;
+            --text-muted: #a1a1aa;
+            --error-color: #ff453a;
+            --success-color: #30d158;
         }
         * {
         }
         body {
+            background-color: #000;
+            min-height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
+            overflow: hidden;
             position: relative;
+            color: var(--text-color);
+        }
+        /* پس‌زمینه متحرک و گرادینت دارک */
+        .background-blobs {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            overflow: hidden;
         }
+        .blob {
             position: absolute;
             border-radius: 50%;
             filter: blur(80px);
             opacity: 0.6;
+            animation: float 10s infinite ease-in-out;
         }
+        .blob-1 {
+            top: -10%;
+            left: -10%;
+            width: 50vw;
+            height: 50vw;
+            background: radial-gradient(circle, #4f2d7f, #000);
+            animation-delay: 0s;
         }
+        .blob-2 {
+            bottom: -10%;
+            right: -10%;
+            width: 60vw;
+            height: 60vw;
+            background: radial-gradient(circle, #0f4c75, #000);
             animation-delay: -5s;
         }
+        .blob-3 {
             top: 40%;
+            left: 40%;
+            width: 30vw;
+            height: 30vw;
+            background: radial-gradient(circle, #1a1a2e, #000);
+            animation-duration: 15s;
         }
         @keyframes float {
+            0%, 100% { transform: translate(0, 0) scale(1); }
+            50% { transform: translate(20px, -20px) scale(1.1); }
         }
+        /* کانتینر اصلی شیشه‌ای */
         .login-container {
+            width: 90%;
             max-width: 420px;
+            background: var(--glass-bg);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border: 1px solid var(--glass-border);
             border-radius: 24px;
+            box-shadow: var(--glass-shadow);
+            padding: 40px 30px;
             text-align: center;
+            transition: height 0.3s ease;
             position: relative;
+            overflow: hidden;
         }
+        /* هدر */
+        .header {
+            margin-bottom: 30px;
         }
+        .header h1 {
+            font-size: 1.8rem;
             font-weight: 700;
+            margin-bottom: 10px;
+            background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
+        .header p {
             color: var(--text-muted);
+            font-size: 0.9rem;
         }
+        /* استایل فرم‌ها و ورودی‌ها */
         .input-group {
+            margin-bottom: 20px;
             position: relative;
             text-align: right;
         }
         .input-group i {
             position: absolute;
             top: 50%;
+            right: 15px;
             transform: translateY(-50%);
             color: var(--text-muted);
             transition: color 0.3s;
         }
+        .input-group input {
             width: 100%;
+            background: rgba(0, 0, 0, 0.2);
             border: 1px solid var(--glass-border);
             border-radius: 12px;
+            padding: 14px 45px 14px 15px;
+            color: #fff;
             font-size: 1rem;
+            transition: all 0.3s ease;
         }
+        .input-group input:focus {
+            border-color: var(--primary-color);
+            background: rgba(0, 0, 0, 0.4);
+            box-shadow: 0 0 15px rgba(10, 132, 255, 0.2);
         }
+        .input-group input:focus + i {
+            color: var(--primary-color);
         }
+        /* بخش کپچا */
+        .captcha-box {
             display: flex;
             align-items: center;
             justify-content: space-between;
+            background: rgba(255, 255, 255, 0.03);
             border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            padding: 10px 15px;
+            margin-bottom: 25px;
         }
+        .captcha-question {
+            font-size: 1.1rem;
+            font-weight: bold;
+            letter-spacing: 2px;
+            user-select: none;
+            color: #d1d5db;
         }
+        .captcha-input {
+            background: transparent;
+            border: none;
+            color: white;
+            width: 60px;
+            text-align: center;
+            font-size: 1.1rem;
+            border-bottom: 1px solid var(--glass-border);
         }
+        .captcha-input:focus {
+            border-bottom-color: var(--primary-color);
         }
+        /* دکمه‌ها */
         .btn {
             width: 100%;
             padding: 14px;
             font-size: 1rem;
             font-weight: 600;
             cursor: pointer;
+            transition: all 0.3s ease;
             display: flex;
             align-items: center;
             justify-content: center;
+            gap: 10px;
         }
         .btn-primary {
+            background: linear-gradient(135deg, var(--primary-color), #0062cc);
             color: white;
+            box-shadow: 0 4px 15px rgba(10, 132, 255, 0.3);
         }
         .btn-primary:hover {
             transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(10, 132, 255, 0.4);
+        }
+        .btn-primary:active {
+            transform: translateY(0);
         }
+        .btn-primary:disabled {
+            background: #333;
+            color: #666;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .btn-link {
             background: transparent;
             color: var(--text-muted);
+            margin-top: 15px;
+            font-size: 0.9rem;
         }
+        .btn-link:hover {
+            color: white;
+            text-decoration: underline;
+        }
+        /* مدیریت مراحل (Steps) */
+        .step {
             display: none;
+            animation: fadeIn 0.5s ease;
+        }
+        .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: 15px;
+            min-height: 20px;
         }
+        .timer-text span {
+            color: var(--primary-color);
+            font-weight: bold;
         }
+        /* صفحه موفقیت */
+        .success-icon {
+            font-size: 4rem;
+            color: var(--success-color);
+            margin-bottom: 20px;
+            animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
         }
         @keyframes popIn {
+            0% { transform: scale(0); }
+            80% { transform: scale(1.2); }
+            100% { transform: scale(1); }
         }
+        /* Toast Notification */
         .toast-container {
             position: fixed;
             top: 20px;
         }
         .toast {
+            background: rgba(20, 20, 20, 0.9);
+            backdrop-filter: blur(10px);
+            color: white;
             padding: 12px 24px;
             border-radius: 50px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+            border: 1px solid var(--glass-border);
             display: flex;
             align-items: center;
             gap: 10px;
+            font-size: 0.9rem;
+            opacity: 0;
+            transform: translateY(-20px);
+            transition: all 0.3s ease;
+        }
+        .toast.show {
+            opacity: 1;
+            transform: translateY(0);
         }
+        .toast.error i { color: var(--error-color); }
+        .toast.success i { color: var(--success-color); }
+        .toast.info i { color: var(--primary-color); }
+        /* لینک اجباری AnyCoder */
+        .anycoder-link {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            font-size: 0.8rem;
+            color: rgba(255, 255, 255, 0.3);
+            text-decoration: none;
+            transition: color 0.3s;
+            z-index: 10;
         }
+        .anycoder-link:hover {
+            color: var(--primary-color);
         }
+        /* ریسپانسیو */
+        @media (max-width: 480px) {
+            .login-container {
+                width: 95%;
+                padding: 30px 20px;
+            }
+            .header h1 {
+                font-size: 1.5rem;
+            }
+        }
     </style>
 </head>
 <body>
+    <!-- لینک اجباری -->
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+        Built with anycoder
     </a>
+    <!-- پس‌زمینه متحرک -->
+    <div class="background-blobs">
+        <div class="blob blob-1"></div>
+        <div class="blob blob-2"></div>
+        <div class="blob blob-3"></div>
+    </div>
+    <!-- کانتینر اعلان‌ها -->
     <div class="toast-container" id="toastContainer"></div>
+    <!-- کارت اصلی لاگین -->
+    <main class="login-container">
+        <!-- مرحله ۱: ورود شماره موبایل و کپچا -->
+        <div id="step1" class="step active">
+            <header class="header">
+                <div class="icon-circle" style="font-size: 2.5rem; margin-bottom: 15px; color: var(--primary-color);">
+                    <i class="fa-solid fa-user-astronaut"></i>
                 </div>
+                <h1>خوش آمدید</h1>
+                <p>برای ادامه شماره موبایل خود را وارد کنید</p>
+            </header>
+            <form id="phoneForm" onsubmit="handleSendCode(event)">
+                <div class="input-group">
+                    <i class="fa-solid fa-mobile-screen"></i>
+                    <input type="tel" id="phoneInput" placeholder="شماره موبایل (مثال: 09123456789)" maxlength="11" autocomplete="off">
                 </div>
+                <!-- کپچا ساده -->
+                <div class="captcha-box">
+                    <span class="captcha-question" id="captchaQuestion">5 + 3 = ?</span>
+                    <input type="number" id="captchaInput" class="captcha-input" placeholder="?" autocomplete="off">
+                </div>
+                <button type="submit" class="btn btn-primary" id="sendCodeBtn">
+                    <span>دریافت کد تایید</span>
+                    <i class="fa-solid fa-arrow-left"></i>
+                </button>
+            </form>
         </div>
+        <!-- مرحله ۲: تایید کد -->
+        <div id="step2" class="step">
+            <header class="header">
+                <div style="font-size: 2.5rem; margin-bottom: 15px; color: var(--primary-color);">
+                    <i class="fa-solid fa-shield-halved"></i>
+                </div>
+                <h1>تایید شماره</h1>
+                <p>کد ارسال شده به <span id="displayPhone" style="color: white; direction: ltr;"></span> را وارد کنید</p>
+            </header>
+            <form id="otpForm" onsubmit="handleVerifyCode(event)">
+                <div class="input-group">
+                    <i class="fa-solid fa-key"></i>
+                    <input type="tel" id="otpInput" placeholder="کد ۵ رقمی" maxlength="5" inputmode="numeric" autocomplete="one-time-code">
+                </div>
+                <button type="submit" class="btn btn-primary" id="verifyBtn">
+                    <span>تایید و ورود</span>
+                    <i class="fa-solid fa-check"></i>
+                </button>
+            </form>
+            <div class="timer-text" id="timerArea">
+                ارسال مجدد کد تا <span id="timerCount">120</span> ثانیه دیگر امکان‌پذیر است.
             </div>
+            <button class="btn btn-link" id="resendBtn" onclick="resendCode()" style="display: none;">
+                ارسال مجدد کد تایید
+            </button>
+            <button class="btn btn-link" onclick="goBack()">
+                <i class="fa-solid fa-arrow-right"></i> تغییر شماره
             </button>
         </div>
+        <!-- مرحله ۳: ورود موفق -->
+        <div id="step3" class="step">
+            <div class="success-icon">
+                <i class="fa-solid fa-circle-check"></i>
             </div>
+            <h1>ورود موفقیت‌آمیز!</h1>
+            <p style="margin-bottom: 30px; color: var(--text-muted);">شما با موفقیت احراز هویت شدید.</p>
+            <button class="btn btn-primary" onclick="window.location.reload()">
+                <span>بازگشت به خانه</span>
+                <i class="fa-solid fa-house"></i>
+            </button>
+        </div>
+    </main>
     <script>
+        // --- متغیرهای وضعیت ---
+        let currentCaptchaAnswer = 0;
         let countdownInterval;
+        const RESEND_TIME = 120; // 2 دقیقه به ثانیه
+        // --- المان‌های DOM ---
+        const steps = {
+            1: document.getElementById('step1'),
+            2: document.getElementById('step2'),
+            3: document.getElementById('step3')
+        };
         const phoneInput = document.getElementById('phoneInput');
+        const captchaQuestion = document.getElementById('captchaQuestion');
+        const captchaInput = document.getElementById('captchaInput');
+        const displayPhone = document.getElementById('displayPhone');
         const otpInput = document.getElementById('otpInput');
+        const timerArea = document.getElementById('timerArea');
+        const timerCount = document.getElementById('timerCount');
         const resendBtn = document.getElementById('resendBtn');
+        // --- راه‌اندازی اولیه ---
+        window.onload = () => {
+            generateCaptcha();
+        };
+        // --- توابع کمکی ---
+        // نمایش اعلان (Toast)
         function showToast(message, type = 'info') {
             const container = document.getElementById('toastContainer');
             const toast = document.createElement('div');
             toast.className = `toast ${type}`;
+            let iconClass = 'fa-circle-info';
+            if (type === 'error') iconClass = 'fa-circle-xmark';
+            if (type === 'success') iconClass = 'fa-circle-check';
+            toast.innerHTML = `<i class="fa-solid ${iconClass}"></i> <span>${message}</span>`;
             container.appendChild(toast);
+            // انیمیشن ورود
+            requestAnimationFrame(() => {
+                toast.classList.add('show');
+            });
+            // حذف خودکار
             setTimeout(() => {
+                toast.classList.remove('show');
                 setTimeout(() => toast.remove(), 300);
             }, 3000);
         }
+        // تولید کپچای ریاضی
+        function generateCaptcha() {
+            const num1 = Math.floor(Math.random() * 10);
+            const num2 = Math.floor(Math.random() * 10);
+            currentCaptchaAnswer = num1 + num2;
+            captchaQuestion.innerText = `${num1}  +  ${num2}  =  ?`;
+            captchaInput.value = '';
+        }
+        // اعتبارسنجی شماره موبایل ایران
+        function isValidPhone(phone) {
+            const regex = /^09[0-9]{9}$/;
+            return regex.test(phone);
         }
+        // تغییر مراحل
+        function showStep(stepNumber) {
+            Object.values(steps).forEach(el => el.classList.remove('active'));
+            steps[stepNumber].classList.add('active');
+        }
+        // --- منطق اصلی ---
+        // هندل کردن ارسال کد (مرحله 1)
+        function handleSendCode(e) {
+            e.preventDefault();
             const phone = phoneInput.value.trim();
+            const captchaUserAnswer = parseInt(captchaInput.value);
+            // 1. اعتبارسنجی شماره
+            if (!isValidPhone(phone)) {
+                showToast('لطفاً شماره موبایل معتبر وارد کنید (با 09 شروع شود)', 'error');
+                phoneInput.focus();
                 return;
             }
+            // 2. اعتبارسنجی کپچا
+            if (isNaN(captchaUserAnswer) || captchaUserAnswer !== currentCaptchaAnswer) {
+                showToast('جمع صحیح نیست!', 'error');
+                captchaInput.value = '';
+                generateCaptcha(); // ریست کردن کپچا برای امنیت بیشتر
+                captchaInput.focus();
+                return;
+            }
+            // موفقیت آمیز بودن - شبیه‌سازی ارسال کد
+            displayPhone.innerText = phone;
+            showToast('کد تایید ارسال شد (کد تست: 12345)', 'success');
+            // شروع تایمر
             startTimer();
+            // انتقال به مرحله بعد
+            showStep(2);
+            otpInput.focus();
         }
+        // هندل کردن تایید کد (مرحله 2)
+        function handleVerifyCode(e) {
+            e.preventDefault();
             const code = otpInput.value.trim();
             if (code.length < 4) {
                 showToast('کد تایید نامعتبر است', 'error');
                 return;
             }
+            // شبیه‌سازی بررسی کد (در اینجا هر کد 5 رقمی یا کد خاصی قبول میشود)
+            // برای دمو، کد 12345 یا هر چیز 5 رقمی قبول میکنیم
+            if (code === '12345' || code.length === 5) {
+                showToast('در حال ورود...', 'info');
+                // تاخیر مصنوعی برای حس واقعی بودن
+                setTimeout(() => {
+                    showStep(3);
+                }, 1000);
+            } else {
+                showToast('کد اشتباه است. دوباره تلاش کنید.', 'error');
+            }
+        }
+        // تایمر شمارش معکوس (2 دقیقه)
+        function startTimer() {
+            let timeLeft = RESEND_TIME;
+            // نمایش تایمر و مخفی کردن دکمه ارسال مجدد
+            timerArea.style.display = 'block';
+            resendBtn.style.display = 'none';
+            timerCount.innerText = timeLeft;
+            // پاک کردن تایمر قبلی اگر وجود دارد
+            if (countdownInterval) clearInterval(countdownInterval);
+            countdownInterval = setInterval(() => {
+                timeLeft--;
+                timerCount.innerText = timeLeft;
+                if (timeLeft <= 0) {
+                    clearInterval(countdownInterval);
+                    timerArea.style.display = 'none'; // مخفی کردن متن تایمر
+                    resendBtn.style.display = 'inline-block'; // نمایش دکمه ارسال مجدد
+                    showToast('اکنون می‌توانید کد جدید بگیرید', 'info');
+                }
             }, 1000);
         }
+        // ارسال مجدد کد
+        function resendCode() {
+            const phone = phoneInput.value.trim();
+            if (!isValidPhone(phone)) return;
+            showToast('کد تایید جدید ارسال شد', 'success');
+            otpInput.value = ''; // پاک کردن ورودی قبلی
+            otpInput.focus();
+            startTimer(); // شروع مجدد تایمر
+        }
+        // بازگشت به مرحله قبل
+        function goBack() {
+            showStep(1);
+            // پاک کردن تایمر زمانی که کاربر برمی‌گردد تا منابع مصرف نشوند
+            if (countdownInterval) clearInterval(countdownInterval);
         }
+        // فرمت خودکار ورودی شماره موبایل (فقط عدد)
+        phoneInput.addEventListener('input', function(e) {
+            this.value = this.value.replace(/[^0-9]/g, '');
+        });
+        // فرمت خودکار ورودی کپچا
+        captchaInput.addEventListener('input', function(e) {
+            this.value = this.value.replace(/[^0-9]/g, '');
+        });
+        // فرمت خودکار ورودی کد تایید
+        otpInput.addEventListener('input', function(e) {
+            this.value = this.value.replace(/[^0-9]/g, '');
+        });
     </script>
 </body>