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>ورود به حساب کاربری | پنل مدیریت</title> | |
| <!-- Import Vazirmatn Font for professional Persian typography --> | |
| <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" /> | |
| <!-- Import FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| /* Color Palette */ | |
| --primary-color: #0f172a; /* Dark Navy/Black */ | |
| --primary-hover: #334155; | |
| --accent-color: #10b981; /* Soft Emerald Green for success/accents */ | |
| --bg-color: #f8fafc; | |
| --card-bg: #ffffff; | |
| --text-main: #1e293b; | |
| --text-muted: #64748b; | |
| --border-color: #e2e8f0; | |
| --input-bg: #f1f5f9; | |
| --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08); | |
| --radius-lg: 24px; | |
| --radius-md: 12px; | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| outline: none; | |
| } | |
| body { | |
| font-family: 'Vazirmatn', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* Abstract Background Pattern */ | |
| .bg-pattern { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| background-image: | |
| radial-gradient(at 0% 0%, hsla(253,16%,7%,0) 0, transparent 50%), | |
| radial-gradient(at 50% 0%, hsla(225,39%,30%,0) 0, transparent 50%), | |
| radial-gradient(at 100% 0%, hsla(339,49%,30%,0) 0, transparent 50%); | |
| background-size: 100% 100%; | |
| overflow: hidden; | |
| } | |
| .bg-wave { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 50vh; | |
| background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23e2e8f0' fill-opacity='0.3' d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E"); | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| background-position: bottom; | |
| z-index: -1; | |
| } | |
| /* Main Card Container */ | |
| .login-container { | |
| display: flex; | |
| width: 90%; | |
| max-width: 1000px; | |
| background: var(--card-bg); | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-soft); | |
| overflow: hidden; | |
| min-height: 600px; | |
| position: relative; | |
| margin: 20px 0; | |
| } | |
| /* Left Side - Visual Panel (Note: In RTL, Left means 'Left' visually, but DOM order might vary. We use Flexbox `row-reverse` or explicit positioning) */ | |
| .visual-panel { | |
| flex: 1; | |
| position: relative; | |
| background-color: #ccc; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| /* Using a high-quality architectural/abstract image */ | |
| .visual-panel img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: transform 10s ease; | |
| } | |
| /* Subtle zoom effect on hover */ | |
| .visual-panel:hover img { | |
| transform: scale(1.05); | |
| } | |
| /* Right Side - Form Panel */ | |
| .form-panel { | |
| flex: 1; | |
| padding: 40px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| background: var(--card-bg); | |
| } | |
| /* Header Section inside Form */ | |
| .form-header { | |
| text-align: center; /* Or slightly right-aligned as requested: margin-right */ | |
| margin-bottom: 30px; | |
| text-align: right; | |
| } | |
| .brand-logo { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--primary-color); | |
| color: white; | |
| border-radius: 16px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| margin-bottom: 20px; | |
| box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2); | |
| } | |
| .form-header h1 { | |
| font-size: 24px; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| color: var(--text-main); | |
| } | |
| .form-header p { | |
| font-size: 14px; | |
| color: var(--text-muted); | |
| } | |
| /* Form Elements */ | |
| .form-group { | |
| margin-bottom: 20px; | |
| position: relative; | |
| } | |
| .form-label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-size: 13px; | |
| font-weight: 500; | |
| color: var(--text-main); | |
| } | |
| .input-wrapper { | |
| position: relative; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .input-wrapper i { | |
| position: absolute; | |
| right: 16px; /* RTL Icon positioning */ | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| pointer-events: none; | |
| transition: var(--transition); | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 14px 45px 14px 16px; /* Space for right icon */ | |
| border: 1px solid var(--border-color); | |
| background-color: var(--input-bg); | |
| border-radius: var(--radius-md); | |
| font-family: 'Vazirmatn', sans-serif; | |
| font-size: 14px; | |
| color: var(--text-main); | |
| transition: var(--transition); | |
| } | |
| .form-input::placeholder { | |
| color: #94a3b8; | |
| } | |
| .form-input:focus { | |
| border-color: var(--primary-color); | |
| background-color: #fff; | |
| box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.05); | |
| } | |
| .form-input:focus + i { | |
| color: var(--primary-color); | |
| } | |
| /* Captcha Section */ | |
| .captcha-group { | |
| display: flex; | |
| gap: 10px; | |
| align-items: center; | |
| } | |
| .captcha-code { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: #e2e8f0; | |
| color: #64748b; | |
| font-family: monospace; | |
| font-size: 18px; | |
| font-weight: bold; | |
| letter-spacing: 4px; | |
| border-radius: var(--radius-md); | |
| padding: 0 15px; | |
| height: 48px; | |
| flex: 1; | |
| user-select: none; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| /* Decorative lines for captcha to look real */ | |
| .captcha-code::before { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 1px; | |
| background: rgba(0,0,0,0.1); | |
| transform: rotate(-15deg); | |
| } | |
| .captcha-code::after { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 1px; | |
| background: rgba(0,0,0,0.1); | |
| transform: rotate(15deg); | |
| top: 50%; | |
| } | |
| /* Buttons */ | |
| .btn { | |
| width: 100%; | |
| padding: 14px; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-family: 'Vazirmatn', sans-serif; | |
| font-size: 15px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| margin-top: 10px; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2); | |
| } | |
| .btn-primary:active { | |
| transform: translateY(0); | |
| } | |
| .divider { | |
| display: flex; | |
| align-items: center; | |
| text-align: center; | |
| margin: 24px 0; | |
| color: var(--text-muted); | |
| font-size: 12px; | |
| } | |
| .divider::before, | |
| .divider::after { | |
| content: ''; | |
| flex: 1; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .divider span { | |
| padding: 0 10px; | |
| } | |
| .btn-google { | |
| background-color: white; | |
| border: 1px solid var(--border-color); | |
| color: var(--text-main); | |
| } | |
| .btn-google:hover { | |
| background-color: #f8fafc; | |
| border-color: #cbd5e1; | |
| } | |
| .btn-google img { | |
| width: 20px; | |
| height: 20px; | |
| } | |
| /* Footer Links */ | |
| .form-footer { | |
| margin-top: 24px; | |
| text-align: center; | |
| font-size: 13px; | |
| color: var(--text-muted); | |
| } | |
| .form-footer a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 600; | |
| margin-right: 4px; | |
| } | |
| .form-footer a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Link to anycoder */ | |
| .built-with { | |
| position: absolute; | |
| top: 20px; | |
| left: 20px; /* RTL: Left side */ | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| z-index: 10; | |
| } | |
| .built-with a { | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .built-with a:hover { | |
| color: var(--primary-color); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 900px) { | |
| .visual-panel { | |
| display: none; /* Hide image on tablet/mobile */ | |
| } | |
| .login-container { | |
| max-width: 500px; | |
| width: 90%; | |
| min-height: auto; | |
| } | |
| .form-panel { | |
| padding: 30px 20px; | |
| } | |
| } | |
| /* Small mobile adjustments */ | |
| @media (max-width: 480px) { | |
| .form-header h1 { | |
| font-size: 20px; | |
| } | |
| .btn { | |
| padding: 12px; | |
| } | |
| .captcha-group { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| } | |
| /* Toast Notification styling */ | |
| .toast { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%) translateY(-100px); | |
| background: white; | |
| padding: 12px 24px; | |
| border-radius: 50px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.15); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| z-index: 1000; | |
| transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| border: 1px solid var(--border-color); | |
| } | |
| .toast.show { | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| .toast i { | |
| color: var(--accent-color); | |
| } | |
| .toast span { | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Background Elements --> | |
| <div class="bg-pattern"></div> | |
| <div class="bg-wave"></div> | |
| <!-- Built with Link --> | |
| <div class="built-with"> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | |
| </div> | |
| <!-- Toast Notification --> | |
| <div id="toast" class="toast"> | |
| <i class="fa-solid fa-circle-check"></i> | |
| <span>در حال پردازش اطلاعات...</span> | |
| </div> | |
| <main class="login-container"> | |
| <!-- Left Column: Image (Visual Panel) --> | |
| <div class="visual-panel"> | |
| <!-- Abstract architectural image from picsum --> | |
| <img src="https://picsum.photos/seed/arch_modern/800/1000" alt="تصویر هنری" /> | |
| </div> | |
| <!-- Right Column: Login Form (Form Panel) --> | |
| <div class="form-panel"> | |
| <header class="form-header"> | |
| <div class="brand-logo"> | |
| <i class="fa-solid fa-cube"></i> | |
| </div> | |
| <h1>خوش آمدید</h1> | |
| <p>لطفاً برای دسترسی به پنل وارد شوید</p> | |
| </header> | |
| <form id="loginForm" novalidate> | |
| <!-- Username / Email Input --> | |
| <div class="form-group"> | |
| <label for="username" class="form-label">ایمیل یا شماره موبایل</label> | |
| <div class="input-wrapper"> | |
| <input type="text" id="username" class="form-input" placeholder="مثلا: name@example.com" required> | |
| <i class="fa-regular fa-envelope"></i> | |
| </div> | |
| </div> | |
| <!-- Password Input --> | |
| <div class="form-group"> | |
| <label for="password" class="form-label">رمز عبور</label> | |
| <div class="input-wrapper"> | |
| <input type="password" id="password" class="form-input" placeholder="رمز عبور خود را وارد کنید" required> | |
| <i class="fa-solid fa-lock"></i> | |
| </div> | |
| </div> | |
| <!-- Captcha Section --> | |
| <div class="form-group"> | |
| <label for="captcha" class="form-label">کد امنیتی</label> | |
| <div class="captcha-group"> | |
| <div class="input-wrapper" style="flex: 2;"> | |
| <input type="text" id="captcha" class="form-input" placeholder="کد را وارد کنید" required> | |
| <i class="fa-solid fa-shield-halved"></i> | |
| </div> | |
| <!-- Visual Captcha Code --> | |
| <div class="captcha-code" id="captchaDisplay" title="برای تغییر کلیک کنید"> | |
| 8A3F | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Actions: Remember me & Forgot Password --> | |
| <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 13px;"> | |
| <label style="display: flex; align-items: center; gap: 8px; color: var(--text-muted); cursor: pointer;"> | |
| <input type="checkbox" style="accent-color: var(--primary-color);"> | |
| مرا به خاطر بسپار | |
| </label> | |
| <a href="#" style="color: var(--primary-color); text-decoration: none; font-weight: 500;">فراموشی رمز؟</a> | |
| </div> | |
| <!-- Primary Button --> | |
| <button type="submit" class="btn btn-primary"> | |
| ورود یا عضویت | |
| <i class="fa-solid fa-arrow-left" style="font-size: 12px;"></i> | |
| </button> | |
| <!-- Divider --> | |
| <div class="divider"> | |
| <span>یا ورود با</span> | |
| </div> | |
| <!-- Google Login Button --> | |
| <button type="button" class="btn btn-google"> | |
| <img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google Logo"> | |
| ورود با گوگل | |
| </button> | |
| <!-- Footer --> | |
| <div class="form-footer"> | |
| حساب کاربری ندارید؟ | |
| <a href="#">ثبت نام کنید</a> | |
| </div> | |
| </form> | |
| </div> | |
| </main> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const loginForm = document.getElementById('loginForm'); | |
| const captchaDisplay = document.getElementById('captchaDisplay'); | |
| const captchaInput = document.getElementById('captcha'); | |
| const toast = document.getElementById('toast'); | |
| const toastMsg = toast.querySelector('span'); | |
| // 1. Captcha Logic | |
| function generateCaptcha() { | |
| const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; | |
| let result = ''; | |
| for (let i = 0; i < 4; i++) { | |
| result += chars.charAt(Math.floor(Math.random() * chars.length)); | |
| } | |
| return result; | |
| } | |
| let currentCaptcha = generateCaptcha(); | |
| captchaDisplay.textContent = currentCaptcha; | |
| // Refresh Captcha on click | |
| captchaDisplay.addEventListener('click', () => { | |
| currentCaptcha = generateCaptcha(); | |
| captchaDisplay.textContent = currentCaptcha; | |
| // Animation effect | |
| captchaDisplay.style.opacity = '0.5'; | |
| setTimeout(() => captchaDisplay.style.opacity = '1', 200); | |
| }); | |
| // 2. Toast Notification Helper | |
| function showToast(message, isError = false) { | |
| toastMsg.textContent = message; | |
| const icon = toast.querySelector('i'); | |
| if(isError) { | |
| icon.className = 'fa-solid fa-circle-xmark'; | |
| icon.style.color = '#ef4444'; | |
| } else { | |
| icon.className = 'fa-solid fa-circle-check'; | |
| icon.style.color = '#10b981'; | |
| } | |
| toast.classList.add('show'); | |
| // Hide after 3 seconds | |
| setTimeout(() => { | |
| toast.classList.remove('show'); | |
| }, 3000); | |
| } | |
| // 3. Form Submission Handler | |
| loginForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| const username = document.getElementById('username').value.trim(); | |
| const password = document.getElementById('password').value.trim(); | |
| const captchaVal = captchaInput.value.trim().toUpperCase(); | |
| // Simple Validation | |
| if (!username || !password) { | |
| showToast('لطفاً تمام فیلدها را پر کنید', true); | |
| return; | |
| } | |
| if (captchaVal !== currentCaptcha) { | |
| showToast('کد امنیتی اشتباه است', true); | |
| captchaInput.value = ''; | |
| captchaInput.focus(); | |
| // Refresh captcha on error for security simulation | |
| currentCaptcha = generateCaptcha(); | |
| captchaDisplay.textContent = currentCaptcha; | |
| return; | |
| } | |
| // Simulate API Call | |
| const btn = loginForm.querySelector('.btn-primary'); | |
| const originalText = btn.innerHTML; | |
| btn.disabled = true; | |
| btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> در حال پردازش...'; | |
| btn.style.opacity = '0.8'; | |
| setTimeout(() => { | |
| showToast('ورود با موفقیت انجام شد'); | |
| btn.disabled = false; | |
| btn.innerHTML = originalText; | |
| btn.style.opacity = '1'; | |
| // Here you would normally redirect | |
| // window.location.href = '/dashboard'; | |
| }, 2000); | |
| }); | |
| // 4. Input Animation Effects (Floating labels optional polish) | |
| const inputs = document.querySelectorAll('.form-input'); | |
| inputs.forEach(input => { | |
| input.addEventListener('focus', () => { | |
| input.parentElement.parentElement.querySelector('.form-label').style.color = 'var(--primary-color)'; | |
| }); | |
| input.addEventListener('blur', () => { | |
| input.parentElement.parentElement.querySelector('.form-label').style.color = 'var(--text-main)'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |