Spaces:
Running
Running
| <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 ; | |
| 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> |