Spaces:

samirerty
/

anycoder-e53a6ece

Running

App Files Files Community

samirerty commited on Feb 5

Commit

0337603

verified ·

1 Parent(s): f2c09fd

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +682 -577

index.html CHANGED Viewed

@@ -1,587 +1,692 @@
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ورود به چت روم | Chat Room Login</title>
-    <!-- استفاده از FontAwesome برای آیکون‌ها -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        /* تنظیمات کلی و متغیرهای رنگی */
-        :root {
-            --bg-color: #0f172a;
-            --card-bg: rgba(30, 41, 59, 0.6);
-            --primary: #6366f1; /* رنگ اصلی بنفش-آبی */
-            --primary-hover: #4f46e5;
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
-            --border-color: rgba(148, 163, 184, 0.2);
-            --error: #ef4444;
-            --success: #10b981;
-            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-            outline: none;
-        }
-        body {
-            font-family: var(--font-family);
-            background-color: var(--bg-color);
-            background-image:
-                radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
-                radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
-                radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
-            color: var(--text-main);
-            height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            overflow: hidden;
-        }
-        /* هدر و لینک anycoder */
-        header {
-            position: absolute;
-            top: 20px;
-            width: 100%;
-            text-align: center;
-            z-index: 10;
-        }
-        .anycoder-link {
-            color: var(--text-muted);
-            text-decoration: none;
-            font-size: 0.9rem;
-            transition: color 0.3s ease;
-        }
-        .anycoder-link:hover {
-            color: var(--primary);
-            text-shadow: 0 0 8px var(--primary);
-        }
-        /* کانتینر اصلی کارت */
-        .container {
-            width: 100%;
-            max-width: 420px;
-            padding: 20px;
-            perspective: 1000px;
-        }
-        .card {
-            background: var(--card-bg);
-            backdrop-filter: blur(12px);
-            -webkit-backdrop-filter: blur(12px);
-            border: 1px solid var(--border-color);
-            border-radius: 20px;
-            padding: 40px 30px;
-            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-            animation: fadeIn 0.8s ease-out;
-            position: relative;
-            overflow: hidden;
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        /* تب‌های سوئیچ */
-        .tabs {
-            display: flex;
-            justify-content: center;
-            margin-bottom: 30px;
-            position: relative;
-            border-bottom: 1px solid var(--border-color);
-        }
-        .tab-btn {
-            background: transparent;
-            border: none;
-            color: var(--text-muted);
-            font-family: inherit;
-            font-size: 1rem;
-            padding: 10px 20px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            position: relative;
-            z-index: 1;
-        }
-        .tab-btn.active {
-            color: var(--text-main);
-            font-weight: bold;
-        }
-        .tab-btn.active::after {
-            content: '';
-            position: absolute;
-            bottom: -1px;
-            left: 0;
-            width: 100%;
-            height: 3px;
-            background: var(--primary);
-            border-radius: 3px 3px 0 0;
-            box-shadow: 0 -2px 10px var(--primary);
-        }
-        /* فرم‌ها */
-        .form-wrapper {
-            position: relative;
-            min-height: 320px; /* ارتفاع ثابت برای جلوگیری از پرش */
-        }
-        .form-content {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-            opacity: 0;
-            visibility: hidden;
-            transform: translateX(50px);
-        }
-        .form-content.active {
-            opacity: 1;
-            visibility: visible;
-            transform: translateX(0);
-            position: relative;
-        }
-        /* استایل ورودی‌ها */
-        .input-group {
-            position: relative;
-            margin-bottom: 20px;
-        }
-        .input-group i {
-            position: absolute;
-            top: 50%;
-            right: 15px;
-            transform: translateY(-50%);
-            color: var(--text-muted);
-            transition: color 0.3s;
-        }
-        .form-input {
-            width: 100%;
-            background: rgba(15, 23, 42, 0.6);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 12px 45px 12px 15px;
-            color: var(--text-main);
-            font-size: 0.95rem;
-            transition: all 0.3s ease;
-        }
-        .form-input:focus {
-            border-color: var(--primary);
-            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
-        }
-        .form-input:focus + i {
-            color: var(--primary);
-        }
-        /* دکمه نمایش رمز عبور */
-        .toggle-password {
-            position: absolute;
-            left: 15px;
-            right: auto !important;
-            cursor: pointer;
-        }
-        /* بخش کپچا */
-        .captcha-area {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 20px;
-            background: rgba(255, 255, 255, 0.05);
-            padding: 10px;
-            border-radius: 12px;
-        }
-        #captchaCanvas {
-            background: #fff;
-            border-radius: 8px;
-            cursor: pointer;
-        }
-        .captcha-input {
-            flex: 1;
-            background: transparent;
-            border: none;
-            border-bottom: 1px solid var(--border-color);
-            color: var(--text-main);
-            padding: 5px;
-            text-align: center;
-            font-family: monospace;
-            font-size: 1.1rem;
-            letter-spacing: 2px;
-        }
-        .captcha-input:focus {
-            border-bottom-color: var(--primary);
-        }
-        /* دکمه اصلی */
-        .submit-btn {
-            width: 100%;
-            padding: 14px;
-            background: linear-gradient(135deg, var(--primary), #818cf8);
-            color: white;
-            border: none;
-            border-radius: 12px;
-            font-size: 1rem;
-            font-weight: bold;
-            cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
-            font-family: inherit;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 10px;
-        }
-        .submit-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px -10px var(--primary);
-        }
-        .submit-btn:active {
-            transform: translateY(0);
-        }
-        /* سیستم Toast Notification */
-        .toast-container {
-            position: fixed;
-            top: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: 1000;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-        .toast {
-            min-width: 300px;
-            padding: 16px;
-            border-radius: 10px;
-            color: white;
-            font-size: 0.9rem;
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
-            animation: slideDown 0.4s ease forwards;
-            backdrop-filter: blur(5px);
-        }
-        .toast.success { background: rgba(16, 185, 129, 0.9); border-right: 4px solid #059669; }
-        .toast.error { background: rgba(239, 68, 68, 0.9); border-right: 4px solid #dc2626; }
-        .toast.info { background: rgba(59, 130, 246, 0.9); border-right: 4px solid #2563eb; }
-        @keyframes slideDown {
-            from { opacity: 0; transform: translateY(-20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes fadeOut {
-            to { opacity: 0; transform: translateY(-20px); }
-        }
-        /* ریسپانسیو */
-        @media (max-width: 480px) {
-            .card {
-                padding: 30px 20px;
-                width: 95%;
-            }
-            .container {
-                padding: 10px;
-            }
-        }
-    </style>
 </head>
 <body>
-    <!-- هدر شامل لینک مورد نظر -->
-    <header>
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
-            Built with anycoder <i class="fas fa-code"></i>
-        </a>
-    </header>
-    <!-- کانتینر اصلی -->
-    <div class="container">
-        <div class="card">
-            <!-- تب‌های تغییر وضعیت -->
-            <div class="tabs">
-                <button class="tab-btn active" onclick="switchTab('login')">ورود</button>
-                <button class="tab-btn" onclick="switchTab('register')">ثبت‌نام</button>
-            </div>
-            <div class="form-wrapper">
-                <!-- فرم ورود -->
-                <form id="loginForm" class="form-content active" novalidate onsubmit="handleLogin(event)">
-                    <div class="input-group">
-                        <input type="text" class="form-input" placeholder="نام کاربری" required>
-                        <i class="fas fa-user"></i>
-                    </div>
-                    <div class="input-group">
-                        <input type="password" class="form-input" placeholder="رمز عبور" required>
-                        <i class="fas fa-lock"></i>
-                        <i class="fas fa-eye toggle-password" onclick="togglePassword(this)"></i>
-                    </div>
-                    <div class="captcha-area">
-                        <canvas id="loginCaptcha" width="100" height="40" onclick="generateCaptcha('loginCaptcha')"></canvas>
-                        <input type="text" class="captcha-input" placeholder="کد تصویر" maxlength="5">
-                        <i class="fas fa-sync-alt" onclick="generateCaptcha('loginCaptcha')" style="cursor:pointer; color:var(--primary)"></i>
-                    </div>
-                    <button type="submit" class="submit-btn">
-                        <span>ورود به حساب</span>
-                        <i class="fas fa-arrow-left"></i>
-                    </button>
-                </form>
-                <!-- فرم ثبت‌نام -->
-                <form id="registerForm" class="form-content" novalidate onsubmit="handleRegister(event)">
-                    <div class="input-group">
-                        <input type="text" class="form-input" placeholder="نام کاربری جدید" required>
-                        <i class="fas fa-user-plus"></i>
-                    </div>
-                    <div class="input-group">
-                        <input type="password" class="form-input" id="regPass" placeholder="رمز عبور" required>
-                        <i class="fas fa-lock"></i>
-                        <i class="fas fa-eye toggle-password" onclick="togglePassword(this)"></i>
-                    </div>
-                    <div class="input-group">
-                        <input type="password" class="form-input" placeholder="تکرار رمز عبور" required>
-                        <i class="fas fa-check-double"></i>
-                    </div>
-                    <div class="captcha-area">
-                        <canvas id="regCaptcha" width="100" height="40" onclick="generateCaptcha('regCaptcha')"></canvas>
-                        <input type="text" class="captcha-input" placeholder="کد تصویر" maxlength="5">
-                        <i class="fas fa-sync-alt" onclick="generateCaptcha('regCaptcha')" style="cursor:pointer; color:var(--primary)"></i>
-                    </div>
-                    <button type="submit" class="submit-btn">
-                        <span>ساخت حساب کاربری</span>
-                        <i class="fas fa-user-check"></i>
-                    </button>
-                </form>
-            </div>
-        </div>
     </div>
-    <!-- کانتینر پیام‌ها -->
-    <div class="toast-container" id="toastContainer"></div>
-    <script>
-        // --- مدیریت تب‌ها ---
-        function switchTab(tab) {
-            const loginForm = document.getElementById('loginForm');
-            const registerForm = document.getElementById('registerForm');
-            const btns = document.querySelectorAll('.tab-btn');
-            if (tab === 'login') {
-                loginForm.classList.add('active');
-                registerForm.classList.remove('active');
-                btns[0].classList.add('active');
-                btns[1].classList.remove('active');
-                generateCaptcha('loginCaptcha'); // رفرش کپچا برای امنیت
-            } else {
-                loginForm.classList.remove('active');
-                registerForm.classList.add('active');
-                btns[0].classList.remove('active');
-                btns[1].classList.add('active');
-                generateCaptcha('regCaptcha'); // رفرش کپچا برای امنیت
-            }
-        }
-        // --- مدیریت نمایش/مخفی کردن رمز عبور ---
-        function togglePassword(icon) {
-            const input = icon.previousElementSibling.previousElementSibling;
-            if (input.type === 'password') {
-                input.type = 'text';
-                icon.classList.remove('fa-eye');
-                icon.classList.add('fa-eye-slash');
-            } else {
-                input.type = 'password';
-                icon.classList.remove('fa-eye-slash');
-                icon.classList.add('fa-eye');
-            }
-        }
-        // --- سیستم تولید کپچا (بدون نیاز به سرور) ---
-        const captchaCodes = {};
-        function generateCaptcha(canvasId) {
-            const canvas = document.getElementById(canvasId);
-            const ctx = canvas.getContext('2d');
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            // پس‌زمینه نویز
-            ctx.fillStyle = '#f1f5f9';
-            ctx.fillRect(0, 0, canvas.width, canvas.height);
-            // تولید کد رندوم 5 کاراکتری
-            const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-            let code = '';
-            for (let i = 0; i < 5; i++) {
-                code += chars[Math.floor(Math.random() * chars.length)];
-            }
-            captchaCodes[canvasId] = code;
-            // رسم متن
-            ctx.font = 'bold 24px monospace';
-            ctx.textBaseline = 'middle';
-            for (let i = 0; i < code.length; i++) {
-                ctx.save();
-                // چرخش و موقعیت تصادفی برای هر حرف
-                const x = 15 + i * 18;
-                const y = 20 + (Math.random() - 0.5) * 10;
-                const angle = (Math.random() - 0.5) * 0.4;
-                ctx.translate(x, y);
-                ctx.rotate(angle);
-                ctx.fillStyle = `rgb(${Math.random()*100}, ${Math.random()*100}, ${Math.random()*150})`;
-                ctx.fillText(code[i], 0, 0);
-                ctx.restore();
-            }
-            // اضافه کردن خطوط نویز
-            for (let i = 0; i < 5; i++) {
-                ctx.strokeStyle = `rgba(0,0,0,0.2)`;
-                ctx.beginPath();
-                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
-                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
-                ctx.stroke();
-            }
-        }
-        // --- سیستم نمایش پیام (Toast) ---
-        function showToast(message, type = 'info') {
-            const container = document.getElementById('toastContainer');
-            const toast = document.createElement('div');
-            toast.className = `toast ${type}`;
-            let icon = 'fa-info-circle';
-            if (type === 'success') icon = 'fa-check-circle';
-            if (type === 'error') icon = 'fa-exclamation-circle';
-            toast.innerHTML = `<i class="fas ${icon}"></i> <span>${message}</span>`;
-            container.appendChild(toast);
-            // حذف خودکار بعد از 3 ثانیه
-            setTimeout(() => {
-                toast.style.animation = 'fadeOut 0.4s ease forwards';
-                toast.addEventListener('animationend', () => {
-                    toast.remove();
-                });
-            }, 3000);
-        }
-        // --- منطق فرم ورود ---
-        function handleLogin(e) {
-            e.preventDefault();
-            const inputs = e.target.querySelectorAll('input');
-            const username = inputs[0].value.trim();
-            const password = inputs[1].value.trim();
-            const captchaInput = inputs[2].value.trim();
-            const canvasId = 'loginCaptcha';
-            // اعتبارسنجی
-            if (!username || !password) {
-                showToast('لطفا تمام فیلدها را پر کنید', 'error');
-                return;
-            }
-            if (captchaInput.toLowerCase() !== captchaCodes[canvasId].toLowerCase()) {
-                showToast('کد تصویر اشتباه است', 'error');
-                generateCaptcha(canvasId);
-                inputs[2].value = '';
-                return;
-            }
-            // شبیه‌سازی ارسال به سرور
-            const btn = e.target.querySelector('button');
-            const originalText = btn.innerHTML;
-            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> بررسی...';
-            btn.disabled = true;
-            setTimeout(() => {
-                btn.innerHTML = originalText;
-                btn.disabled = false;
-                showToast('خوش آمدید! ورود موفقیت آمیز بود.', 'success');
-                // اینجا می‌توان کاربر را به صفحه چت ردایرکت کرد
-            }, 1500);
-        }
-        // --- منطق فرم ثبت‌نام ---
-        function handleRegister(e) {
-            e.preventDefault();
-            const inputs = e.target.querySelectorAll('input');
-            const username = inputs[0].value.trim();
-            const pass = inputs[1].value.trim();
-            const confirmPass = inputs[2].value.trim();
-            const captchaInput = inputs[3].value.trim();
-            const canvasId = 'regCaptcha';
-            // اعتبارسنجی
-            if (!username || !pass || !confirmPass) {
-                showToast('لطفا تمام فیلدها را پر کنید', 'error');
-                return;
-            }
-            if (pass.length < 4) {
-                showToast('رمز عبور باید حداقل ۴ کاراکتر باشد', 'error');
-                return;
-            }
-            if (pass !== confirmPass) {
-                showToast('رمز عبور و تکرار آن مطابقت ندارند', 'error');
-                return;
-            }
-            if (captchaInput.toLowerCase() !== captchaCodes[canvasId].toLowerCase()) {
-                showToast('کد تصویر اشتباه است', 'error');
-                generateCaptcha(canvasId);
-                inputs[3].value = '';
-                return;
-            }
-            // شبیه‌سازی ثبت‌نام
-            const btn = e.target.querySelector('button');
-            const originalText = btn.innerHTML;
-            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> در حال ثبت...';
-            btn.disabled = true;
-            setTimeout(() => {
-                btn.innerHTML = originalText;
-                btn.disabled = false;
-                showToast('حساب کاربری با موفقیت ساخته شد!', 'success');
-                // پاک کردن فرم و رفتن به تب ورود
-                e.target.reset();
-                switchTab('login');
-            }, 1500);
-        }
-        // مقداردهی اولیه کپچاها
-        window.onload = function() {
-            generateCaptcha('loginCaptcha');
-            generateCaptcha('regCaptcha');
-        };
-    </script>
 </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>ورود به چت روم | Chat Room Login</title>
+  <!-- استفاده از FontAwesome برای آیکون‌ها -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    /* تنظیمات کلی و متغیرهای رنگی - تم دارک پیشرفته */
+    :root {
+      --bg-color: #020617; /* بسیار تیره (Slate 950) */
+      --card-bg: rgba(15, 23, 42, 0.4); /* شیشه‌ای تیره */
+      --card-border: rgba(255, 255, 255, 0.08);
+      --primary: #6366f1; /* Indigo */
+      --primary-glow: rgba(99, 102, 241, 0.5);
+      --primary-hover: #4f46e5;
+      --text-main: #f1f5f9;
+      --text-muted: #94a3b8;
+      --input-bg: rgba(2, 6, 23, 0.6);
+      --border-color: rgba(148, 163, 184, 0.1);
+      --error: #ef4444;
+      --success: #10b981;
+      --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      outline: none;
+      -webkit-tap-highlight-color: transparent;
+    }
+    body {
+      font-family: var(--font-family);
+      background-color: var(--bg-color);
+      /* گرادینت متحرک و عمیق برای پس‌زمینه */
+      background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e1b4b 100%);
+      background-size: 400% 400%;
+      animation: gradientBG 15s ease infinite;
+      color: var(--text-main);
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+    }
+    @keyframes gradientBG {
+      0% { background-position: 0% 50%; }
+      50% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+    /* هدر و لینک anycoder */
+    header {
+      position: absolute;
+      top: 20px;
+      width: 100%;
+      text-align: center;
+      z-index: 10;
+    }
+    .anycoder-link {
+      color: var(--text-muted);
+      text-decoration: none;
+      font-size: 0.9rem;
+      padding: 8px 16px;
+      border-radius: 20px;
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border-color);
+      transition: all 0.3s ease;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .anycoder-link:hover {
+      color: var(--primary);
+      background: rgba(99, 102, 241, 0.1);
+      border-color: var(--primary);
+      box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
+    }
+    /* کانتینر اصلی کارت */
+    .container {
+      width: 100%;
+      max-width: 420px;
+      padding: 20px;
+      perspective: 1000px;
+    }
+    .card {
+      background: var(--card-bg);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid var(--card-border);
+      border-radius: 24px;
+      padding: 40px 30px;
+      box-shadow:
+        0 25px 50px -12px rgba(0, 0, 0, 0.7),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+      animation: fadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+    }
+    /* افکت نورانی ملایم پشت کارت */
+    .card::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
+      pointer-events: none;
+      z-index: -1;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(30px) scale(0.98); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    /* تب‌های سوئیچ */
+    .tabs {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 35px;
+      position: relative;
+      background: rgba(0, 0, 0, 0.2);
+      padding: 5px;
+      border-radius: 12px;
+    }
+    .tab-btn {
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      font-family: inherit;
+      font-size: 0.95rem;
+      padding: 10px 25px;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      z-index: 1;
+      border-radius: 8px;
+      width: 50%;
+      font-weight: 500;
+    }
+    .tab-btn.active {
+      color: #fff;
+      background: var(--primary);
+      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+    }
+    /* فرم‌ها */
+    .form-wrapper {
+      position: relative;
+      min-height: 340px;
+    }
+    .form-content {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
+      opacity: 0;
+      visibility: hidden;
+      transform: translateX(30px);
+    }
+    .form-content.active {
+      opacity: 1;
+      visibility: visible;
+      transform: translateX(0);
+      position: relative;
+    }
+    /* استایل ورودی‌ها */
+    .input-group {
+      position: relative;
+      margin-bottom: 22px;
+    }
+    .input-group i.icon-main {
+      position: absolute;
+      top: 50%;
+      right: 16px;
+      transform: translateY(-50%);
+      color: var(--text-muted);
+      transition: color 0.3s;
+      pointer-events: none;
+    }
+    .form-input {
+      width: 100%;
+      background: var(--input-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 14px;
+      padding: 14px 45px 14px 15px;
+      color: var(--text-main);
+      font-size: 0.95rem;
+      transition: all 0.3s ease;
+    }
+    .form-input::placeholder {
+      color: rgba(148, 163, 184, 0.5);
+    }
+    .form-input:focus {
+      border-color: var(--primary);
+      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
+      background: rgba(2, 6, 23, 0.8);
+    }
+    .form-input:focus + .icon-main {
+      color: var(--primary);
+    }
+    /* دکمه نمایش رمز عبور */
+    .toggle-password {
+      position: absolute;
+      left: 16px;
+      right: auto !important;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+      color: var(--text-muted);
+      transition: color 0.3s;
+    }
+    .toggle-password:hover {
+      color: var(--text-main);
+    }
+    /* بخش کپچا - استایل دارک */
+    .captcha-area {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 25px;
+      background: rgba(255, 255, 255, 0.03);
+      padding: 8px 12px;
+      border-radius: 14px;
+      border: 1px solid var(--border-color);
+    }
+    #captchaCanvas {
+      border-radius: 8px;
+      cursor: pointer;
+      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    }
+    .captcha-input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      border-bottom: 2px solid var(--border-color);
+      color: var(--text-main);
+      padding: 8px 5px;
+      text-align: center;
+      font-family: monospace;
+      font-size: 1.2rem;
+      letter-spacing: 3px;
+      transition: border-color 0.3s;
+    }
+    .captcha-input:focus {
+      border-bottom-color: var(--primary);
+    }
+    .captcha-refresh {
+      cursor: pointer;
+      color: var(--text-muted);
+      transition: transform 0.3s, color 0.3s;
+    }
+    .captcha-refresh:hover {
+      color: var(--primary);
+      transform: rotate(180deg);
+    }
+    /* دکمه اصلی */
+    .submit-btn {
+      width: 100%;
+      padding: 15px;
+      background: linear-gradient(135deg, var(--primary), #4338ca);
+      color: white;
+      border: none;
+      border-radius: 14px;
+      font-size: 1rem;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      font-family: inherit;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      gap: 10px;
+      box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
+    }
+    .submit-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 25px rgba(79, 70, 229, 0.5);
+      background: linear-gradient(135deg, var(--primary-hover), #3730a3);
+    }
+    .submit-btn:active {
+      transform: scale(0.98);
+    }
+    .submit-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      transform: none;
+    }
+    /* سیستم Toast Notification - نسخه دارک */
+    .toast-container {
+      position: fixed;
+      top: 30px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 1000;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      width: 90%;
+      max-width: 350px;
+      pointer-events: none; /* اجازه کلیک روی فضای خالی */
+    }
+    .toast {
+      padding: 16px 20px;
+      border-radius: 12px;
+      color: white;
+      font-size: 0.9rem;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+      animation: slideDown 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
+      backdrop-filter: blur(10px);
+      pointer-events: auto;
+      position: relative;
+      overflow: hidden;
+    }
+    /* خط رنگی کنار توست */
+    .toast::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      width: 4px;
+    }
+    .toast.success {
+      background: rgba(5, 150, 105, 0.2);
+      border: 1px solid rgba(16, 185, 129, 0.3);
+    }
+    .toast.success::after { background: var(--success); }
+    .toast.error {
+      background: rgba(220, 38, 38, 0.2);
+      border: 1px solid rgba(239, 68, 68, 0.3);
+    }
+    .toast.error::after { background: var(--error); }
+    .toast.info {
+      background: rgba(37, 99, 235, 0.2);
+      border: 1px solid rgba(59, 130, 246, 0.3);
+    }
+    .toast.info::after { background: #3b82f6; }
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(-30px) scale(0.9); }
+      to { opacity: 1; transform: translateY(0) scale(1); }
+    }
+    @keyframes fadeOut {
+      to { opacity: 0; transform: translateY(-20px) scale(0.95); }
+    }
+    /* ریسپانسیو */
+    @media (max-width: 480px) {
+      .card {
+        padding: 30px 20px;
+        width: 90%;
+      }
+      .container {
+        padding: 10px;
+      }
+      header {
+        top: 10px;
+      }
+    }
+  </style>
 </head>
 <body>
+  <!-- هدر شامل لینک مورد نظر -->
+  <header>
+    <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+      Built with anycoder <i class="fas fa-code"></i>
+    </a>
+  </header>
+  <!-- کانتینر اصلی -->
+  <div class="container">
+    <div class="card">
+      <!-- تب‌های تغییر وضعیت -->
+      <div class="tabs">
+        <button class="tab-btn active" onclick="switchTab('login')">ورود</button>
+        <button class="tab-btn" onclick="switchTab('register')">ثبت‌نام</button>
+      </div>
+      <div class="form-wrapper">
+        <!-- فرم ورود -->
+        <form id="loginForm" class="form-content active" novalidate onsubmit="handleLogin(event)">
+          <div class="input-group">
+            <input type="text" class="form-input" placeholder="نام کاربری" required>
+            <i class="fas fa-user icon-main"></i>
+          </div>
+          <div class="input-group">
+            <input type="password" class="form-input" placeholder="رمز عبور" required>
+            <i class="fas fa-lock icon-main"></i>
+            <i class="fas fa-eye toggle-password" onclick="togglePassword(this)"></i>
+          </div>
+          <div class="captcha-area">
+            <canvas id="loginCaptcha" width="100" height="40" onclick="generateCaptcha('loginCaptcha')"></canvas>
+            <input type="text" class="captcha-input" placeholder="کد تصویر" maxlength="5">
+            <i class="fas fa-sync-alt captcha-refresh" onclick="generateCaptcha('loginCaptcha')"></i>
+          </div>
+          <button type="submit" class="submit-btn">
+            <span>ورود به حساب</span>
+            <i class="fas fa-arrow-left"></i>
+          </button>
+        </form>
+        <!-- فرم ثبت‌نام -->
+        <form id="registerForm" class="form-content" novalidate onsubmit="handleRegister(event)">
+          <div class="input-group">
+            <input type="text" class="form-input" placeholder="نام کاربری جدید" required>
+            <i class="fas fa-user-plus icon-main"></i>
+          </div>
+          <div class="input-group">
+            <input type="password" class="form-input" id="regPass" placeholder="رمز عبور" required>
+            <i class="fas fa-lock icon-main"></i>
+            <i class="fas fa-eye toggle-password" onclick="togglePassword(this)"></i>
+          </div>
+          <div class="input-group">
+            <input type="password" class="form-input" placeholder="تکرار رمز عبور" required>
+            <i class="fas fa-check-double icon-main"></i>
+          </div>
+          <div class="captcha-area">
+            <canvas id="regCaptcha" width="100" height="40" onclick="generateCaptcha('regCaptcha')"></canvas>
+            <input type="text" class="captcha-input" placeholder="کد تصویر" maxlength="5">
+            <i class="fas fa-sync-alt captcha-refresh" onclick="generateCaptcha('regCaptcha')"></i>
+          </div>
+          <button type="submit" class="submit-btn">
+            <span>ساخت حساب کاربری</span>
+            <i class="fas fa-user-check"></i>
+          </button>
+        </form>
+      </div>
     </div>
+  </div>
+  <!-- کانتینر پیام‌ها -->
+  <div class="toast-container" id="toastContainer"></div>
+  <script>
+    // --- مدیریت تب‌ها ---
+    function switchTab(tab) {
+      const loginForm = document.getElementById('loginForm');
+      const registerForm = document.getElementById('registerForm');
+      const btns = document.querySelectorAll('.tab-btn');
+      if (tab === 'login') {
+        loginForm.classList.add('active');
+        registerForm.classList.remove('active');
+        btns[0].classList.add('active');
+        btns[1].classList.remove('active');
+        generateCaptcha('loginCaptcha');
+      } else {
+        loginForm.classList.remove('active');
+        registerForm.classList.add('active');
+        btns[0].classList.remove('active');
+        btns[1].classList.add('active');
+        generateCaptcha('regCaptcha');
+      }
+    }
+    // --- مدیریت نمایش/مخفی کردن رمز عبور ---
+    function togglePassword(icon) {
+      const input = icon.previousElementSibling.previousElementSibling;
+      if (input.type === 'password') {
+        input.type = 'text';
+        icon.classList.remove('fa-eye');
+        icon.classList.add('fa-eye-slash');
+      } else {
+        input.type = 'password';
+        icon.classList.remove('fa-eye-slash');
+        icon.classList.add('fa-eye');
+      }
+    }
+    // --- سیستم تولید کپچا (تطبیق یافته با تم دارک) ---
+    const captchaCodes = {};
+    function generateCaptcha(canvasId) {
+      const canvas = document.getElementById(canvasId);
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      // پس‌زمینه تیره برای سازگاری با دارک مود
+      ctx.fillStyle = '#1e293b';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      // اضافه کردن نویز پس‌زمینه (دایره‌های کمرنگ)
+      for(let i=0; i<30; i++) {
+        ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.05})`;
+        ctx.beginPath();
+        ctx.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 20, 0, 2 * Math.PI);
+        ctx.fill();
+      }
+      // تولید کد رندوم 5 کاراکتری
+      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
+      let code = '';
+      for (let i = 0; i < 5; i++) {
+        code += chars[Math.floor(Math.random() * chars.length)];
+      }
+      captchaCodes[canvasId] = code;
+      // رسم متن (رنگ روشن)
+      ctx.font = 'bold 24px monospace';
+      ctx.textBaseline = 'middle';
+      for (let i = 0; i < code.length; i++) {
+        ctx.save();
+        const x = 15 + i * 18;
+        const y = 20 + (Math.random() - 0.5) * 8;
+        const angle = (Math.random() - 0.5) * 0.4;
+        ctx.translate(x, y);
+        ctx.rotate(angle);
+        // متن به رنگ سفید/خاکستری روشن
+        ctx.fillStyle = `rgb(${200 + Math.random()*55}, ${200 + Math.random()*55}, ${255})`;
+        ctx.shadowColor = "rgba(0,0,0,0.5)";
+        ctx.shadowBlur = 4;
+        ctx.fillText(code[i], 0, 0);
+        ctx.restore();
+      }
+      // اضافه کردن خطوط نویز (رنگ روشن)
+      for (let i = 0; i < 5; i++) {
+        ctx.strokeStyle = `rgba(255,255,255,0.15)`;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
+        ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
+        ctx.stroke();
+      }
+    }
+    // --- سیستم نمایش پیام (Toast) ---
+    function showToast(message, type = 'info') {
+      const container = document.getElementById('toastContainer');
+      const toast = document.createElement('div');
+      toast.className = `toast ${type}`;
+      let icon = 'fa-info-circle';
+      if (type === 'success') icon = 'fa-check-circle';
+      if (type === 'error') icon = 'fa-exclamation-triangle';
+      toast.innerHTML = `<i class="fas ${icon}"></i> <span>${message}</span>`;
+      container.appendChild(toast);
+      // حذف خودکار بعد از 3.5 ثانیه
+      setTimeout(() => {
+        toast.style.animation = 'fadeOut 0.4s ease forwards';
+        toast.addEventListener('animationend', () => {
+          toast.remove();
+        });
+      }, 3500);
+    }
+    // --- منطق فرم ورود ---
+    function handleLogin(e) {
+      e.preventDefault();
+      const inputs = e.target.querySelectorAll('input');
+      const username = inputs[0].value.trim();
+      const password = inputs[1].value.trim();
+      const captchaInput = inputs[2].value.trim();
+      const canvasId = 'loginCaptcha';
+      if (!username || !password) {
+        showToast('لطفا تمام فیلدها را پر کنید', 'error');
+        return;
+      }
+      if (captchaInput.toLowerCase() !== captchaCodes[canvasId].toLowerCase()) {
+        showToast('کد تصویر اشتباه است', 'error');
+        generateCaptcha(canvasId);
+        inputs[2].value = '';
+        return;
+      }
+      // شبیه‌سازی ارسال به سرور
+      const btn = e.target.querySelector('button');
+      const originalText = btn.innerHTML;
+      btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> بررسی...';
+      btn.disabled = true;
+      setTimeout(() => {
+        btn.innerHTML = originalText;
+        btn.disabled = false;
+        showToast('خوش آمدید! ورود موفقیت آمیز بود.', 'success');
+      }, 1500);
+    }
+    // --- منطق فرم ثبت‌نام ---
+    function handleRegister(e) {
+      e.preventDefault();
+      const inputs = e.target.querySelectorAll('input');
+      const username = inputs[0].value.trim();
+      const pass = inputs[1].value.trim();
+      const confirmPass = inputs[2].value.trim();
+      const captchaInput = inputs[3].value.trim();
+      const canvasId = 'regCaptcha';
+      if (!username || !pass || !confirmPass) {
+        showToast('لطفا تمام فیلدها را پر کنید', 'error');
+        return;
+      }
+      if (pass.length < 4) {
+        showToast('رمز عبور باید حداقل ۴ کاراکتر باشد', 'error');
+        return;
+      }
+      if (pass !== confirmPass) {
+        showToast('رمز عبور و تکرار آن مطابقت ندارند', 'error');
+        return;
+      }
+      if (captchaInput.toLowerCase() !== captchaCodes[canvasId].toLowerCase()) {
+        showToast('کد تصویر اشتباه است', 'error');
+        generateCaptcha(canvasId);
+        inputs[3].value = '';
+        return;
+      }
+      // شبیه‌سازی ثبت‌نام
+      const btn = e.target.querySelector('button');
+      const originalText = btn.innerHTML;
+      btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> در حال ثبت...';
+      btn.disabled = true;
+      setTimeout(() => {
+        btn.innerHTML = originalText;
+        btn.disabled = false;
+        showToast('حساب کاربری با موفقیت ساخته شد!', 'success');
+        e.target.reset();
+        switchTab('login');
+      }, 1500);
+    }
+    // مقداردهی اولیه کپچاها
+    window.onload = function() {
+      generateCaptcha('loginCaptcha');
+      generateCaptcha('regCaptcha');
+    };
+  </script>
 </body>
 </html>