Spaces:
Running
Running
| <html dir="rtl" lang="fa-IR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>میهن وردپرس - ورود و ثبت نام</title> | |
| <!-- Import Vazirmatn Font for beautiful 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 { | |
| --primary-color: #246cfc; | |
| --primary-dark: #1a4bd3; | |
| --text-color: #333; | |
| --text-light: #666; | |
| --bg-color: #f0f2f5; | |
| --card-bg: rgba(255, 255, 255, 0.95); | |
| --input-bg: #f9f9f9; | |
| --input-border: #e0e0e0; | |
| --error-color: #ff4d4f; | |
| --success-color: #52c41a; | |
| --radius: 16px; | |
| --shadow: 0 10px 30px rgba(0, 0, 0, 0.08); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| outline: none; | |
| } | |
| body { | |
| font-family: 'Vazirmatn', sans-serif; | |
| 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%); | |
| background-size: cover; | |
| background-attachment: fixed; | |
| margin: 0; | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 20px; | |
| color: var(--text-color); | |
| } | |
| /* Container */ | |
| .mwpl-container { | |
| background: var(--card-bg); | |
| width: 100%; | |
| max-width: 900px; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| overflow: hidden; | |
| position: relative; | |
| backdrop-filter: blur(10px); | |
| min-height: 600px; | |
| } | |
| /* "Built with anycoder" Link */ | |
| .anycoder-credit { | |
| position: absolute; | |
| top: 15px; | |
| left: 15px; /* RTL layout, so left is the opposite side */ | |
| z-index: 100; | |
| font-size: 0.8rem; | |
| color: rgba(255,255,255,0.7); | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .anycoder-credit:hover { | |
| color: #fff; | |
| } | |
| /* Left Side - Cover Image */ | |
| .mwpl-cover-section { | |
| background: linear-gradient(135deg, #4f00d7 0%, #246cfc 100%); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 40px; | |
| text-align: center; | |
| color: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .mwpl-cover-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: url('https://picsum.photos/seed/tech/600/800') center/cover; | |
| opacity: 0.2; | |
| mix-blend-mode: overlay; | |
| } | |
| .cover-content { | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .cover-content h2 { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| } | |
| .cover-content p { | |
| font-size: 1.1rem; | |
| opacity: 0.9; | |
| line-height: 1.6; | |
| } | |
| /* Right Side - Form Section */ | |
| .mwpl-form-section { | |
| padding: 40px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| /* Logo */ | |
| .mwpl-logo { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| } | |
| .mwpl-logo img { | |
| height: 50px; | |
| width: auto; | |
| } | |
| /* Form Wrapper */ | |
| .form-wrapper { | |
| transition: var(--transition); | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .form-wrapper.hidden { | |
| display: none; | |
| opacity: 0; | |
| transform: translateX(20px); | |
| } | |
| /* Inputs */ | |
| .input-group { | |
| position: relative; | |
| margin-bottom: 20px; | |
| } | |
| .input-field { | |
| width: 100%; | |
| padding: 15px 45px 15px 15px; | |
| border: 2px solid var(--input-border); | |
| border-radius: 12px; | |
| background: var(--input-bg); | |
| font-family: 'Vazirmatn', sans-serif; | |
| font-size: 0.95rem; | |
| transition: var(--transition); | |
| } | |
| .input-field:focus { | |
| border-color: var(--primary-color); | |
| background: #fff; | |
| box-shadow: 0 0 0 4px rgba(36, 108, 252, 0.1); | |
| } | |
| /* Icons inside input */ | |
| .input-icon { | |
| position: absolute; | |
| right: 15px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: #999; | |
| transition: var(--transition); | |
| } | |
| .input-field:focus + .input-icon { | |
| color: var(--primary-color); | |
| } | |
| /* Password Toggle */ | |
| .toggle-password { | |
| position: absolute; | |
| left: 15px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| cursor: pointer; | |
| color: #999; | |
| } | |
| .toggle-password:hover { | |
| color: var(--primary-color); | |
| } | |
| /* Captcha */ | |
| .captcha-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .captcha-canvas { | |
| background: #fff; | |
| border: 1px solid var(--input-border); | |
| border-radius: 8px; | |
| cursor: pointer; | |
| } | |
| .refresh-icon { | |
| cursor: pointer; | |
| color: var(--primary-color); | |
| font-size: 1.2rem; | |
| transition: transform 0.3s; | |
| } | |
| .refresh-icon:hover { | |
| transform: rotate(180deg); | |
| } | |
| /* Buttons */ | |
| .btn { | |
| width: 100%; | |
| padding: 14px; | |
| border: none; | |
| border-radius: 12px; | |
| font-family: 'Vazirmatn', sans-serif; | |
| font-size: 1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-primary { | |
| background-color: #131200; | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #000; | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0,0,0,0.2); | |
| } | |
| .btn-google { | |
| background-color: #fff; | |
| color: #333; | |
| border: 2px solid #eee; | |
| margin-top: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .btn-google:hover { | |
| background-color: #f8f9fa; | |
| border-color: #ddd; | |
| } | |
| /* Toggle Link */ | |
| .toggle-form-text { | |
| text-align: center; | |
| margin-top: 20px; | |
| font-size: 0.9rem; | |
| color: var(--text-light); | |
| } | |
| .toggle-form-text span { | |
| color: var(--primary-color); | |
| font-weight: bold; | |
| cursor: pointer; | |
| } | |
| .toggle-form-text span:hover { | |
| text-decoration: underline; | |
| } | |
| /* Message Box */ | |
| .message-box { | |
| padding: 10px; | |
| border-radius: 8px; | |
| margin-bottom: 20px; | |
| font-size: 0.85rem; | |
| display: none; | |
| text-align: center; | |
| } | |
| .message-box.error { | |
| background-color: #ffeef0; | |
| color: var(--error-color); | |
| border: 1px solid #ffccc7; | |
| display: block; | |
| } | |
| .message-box.success { | |
| background-color: #f6ffed; | |
| color: var(--success-color); | |
| border: 1px solid #b7eb8f; | |
| display: block; | |
| } | |
| /* Spinner */ | |
| .spinner { | |
| display: inline-block; | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid rgba(255,255,255,0.3); | |
| border-radius: 50%; | |
| border-top-color: #fff; | |
| animation: spin 1s ease-in-out infinite; | |
| margin-left: 10px; | |
| vertical-align: middle; | |
| display: none; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .mwpl-container { | |
| grid-template-columns: 1fr; | |
| max-width: 450px; | |
| min-height: auto; | |
| } | |
| .mwpl-cover-section { | |
| display: none; | |
| } | |
| .mwpl-form-section { | |
| padding: 30px 20px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-credit">Built with anycoder</a> | |
| <main class="mwpl-container"> | |
| <!-- Cover Section (Left) --> | |
| <section class="mwpl-cover-section"> | |
| <div class="cover-content"> | |
| <!-- Using a placeholder logo for the concept --> | |
| <div style="font-size: 3rem; margin-bottom: 20px;"> | |
| <i class="fa-brands fa-wordpress"></i> | |
| </div> | |
| <h2>به خانواده بزرگ وردپرس خوش آمدید</h2> | |
| <p>دسترسی به بهترین قالبها و افزونههای فارسی وردپرس</p> | |
| </div> | |
| </section> | |
| <!-- Form Section (Right) --> | |
| <section class="mwpl-form-section"> | |
| <!-- Logo Area --> | |
| <div class="mwpl-logo"> | |
| <img src="https://mihanwp.com/wp-content/uploads/2022/03/logo-type.svg" alt="MihanWP Logo" onerror="this.style.display='none'; this.parentElement.innerHTML='<h2 style=\'color:#131200\'>میهن وردپرس</h2>'"> | |
| </div> | |
| <!-- Login Form --> | |
| <form id="login-form" class="form-wrapper"> | |
| <div id="login-message" class="message-box"></div> | |
| <!-- Username/Email --> | |
| <div class="input-group"> | |
| <input type="text" id="login-username" class="input-field" placeholder="نام کاربری، ایمیل یا شماره تلفن" required> | |
| <i class="fa-regular fa-user input-icon"></i> | |
| </div> | |
| <!-- Password --> | |
| <div class="input-group"> | |
| <input type="password" id="login-password" class="input-field" placeholder="رمز عبور" required> | |
| <i class="fa-solid fa-lock input-icon"></i> | |
| <i class="fa-regular fa-eye toggle-password" onclick="togglePassword('login-password', this)"></i> | |
| </div> | |
| <!-- Captcha --> | |
| <div class="captcha-container"> | |
| <div class="input-group" style="margin-bottom: 0; flex-grow: 1;"> | |
| <input type="text" id="login-captcha-input" class="input-field" placeholder="کد امنیتی" style="padding-left: 15px;"> | |
| <i class="fa-solid fa-shield-halved input-icon"></i> | |
| </div> | |
| <canvas id="login-canvas" width="100" height="48" class="captcha-canvas" title="کلیک برای تعویض"></canvas> | |
| <i class="fa-solid fa-rotate-right refresh-icon" onclick="generateCaptcha('login-canvas')"></i> | |
| </div> | |
| <!-- Submit Button --> | |
| <button type="submit" class="btn btn-primary"> | |
| ورود به حساب کاربری | |
| <span class="spinner"></span> | |
| </button> | |
| <!-- Google Login --> | |
| <button type="button" class="btn btn-google"> | |
| <img src="https://mihanwp.com/wp-content/plugins/mihanpanel/pro/assets/img/google-logo.svg" alt="Google" style="width: 20px;"> | |
| ورود با حساب گوگل | |
| </button> | |
| <!-- Toggle to Register --> | |
| <div class="toggle-form-text"> | |
| حساب کاربری ندارید؟ | |
| <span onclick="switchForm('register')">ثبت نام کنید</span> | |
| </div> | |
| </form> | |
| <!-- Register Form --> | |
| <form id="register-form" class="form-wrapper hidden"> | |
| <div id="register-message" class="message-box" style="background-color: #e6f7ff; color: #1890ff; border: 1px solid #91d5ff; display: block;"> | |
| به خانواده ۱۰۰ هزار نفری هممیهنان وردپرسی بپیوندید. | |
| </div> | |
| <!-- Username --> | |
| <div class="input-group"> | |
| <input type="text" id="reg-username" class="input-field" placeholder="نام کاربری" required> | |
| <i class="fa-regular fa-user input-icon"></i> | |
| </div> | |
| <!-- Email --> | |
| <div class="input-group"> | |
| <input type="email" id="reg-email" class="input-field" placeholder="ایمیل" required> | |
| <i class="fa-regular fa-envelope input-icon"></i> | |
| </div> | |
| <!-- Password --> | |
| <div class="input-group"> | |
| <input type="password" id="reg-password" class="input-field" placeholder="رمز عبور" required> | |
| <i class="fa-solid fa-lock input-icon"></i> | |
| <i class="fa-regular fa-eye toggle-password" onclick="togglePassword('reg-password', this)"></i> | |
| </div> | |
| <!-- Captcha --> | |
| <div class="captcha-container"> | |
| <div class="input-group" style="margin-bottom: 0; flex-grow: 1;"> | |
| <input type="text" id="reg-captcha-input" class="input-field" placeholder="کد امنیتی" style="padding-left: 15px;"> | |
| <i class="fa-solid fa-shield-halved input-icon"></i> | |
| </div> | |
| <canvas id="reg-canvas" width="100" height="48" class="captcha-canvas" title="کلیک برای تعویض"></canvas> | |
| <i class="fa-solid fa-rotate-right refresh-icon" onclick="generateCaptcha('reg-canvas')"></i> | |
| </div> | |
| <!-- Submit Button --> | |
| <button type="submit" class="btn btn-primary"> | |
| ثبت نام | |
| <span class="spinner"></span> | |
| </button> | |
| <!-- Toggle to Login --> | |
| <div class="toggle-form-text"> | |
| قبلاً ثبت نام کردهاید؟ | |
| <span onclick="switchForm('login')">وارد شوید</span> | |
| </div> | |
| </form> | |
| </section> | |
| </main> | |
| <script> | |
| // --- State Management --- | |
| let currentCaptcha = { login: '', register: '' }; | |
| // --- Initialization --- | |
| document.addEventListener('DOMContentLoaded', () => { | |
| generateCaptcha('login-canvas'); | |
| generateCaptcha('reg-canvas'); | |
| // Canvas click event to refresh | |
| document.getElementById('login-canvas').addEventListener('click', () => generateCaptcha('login-canvas')); | |
| document.getElementById('reg-canvas').addEventListener('click', () => generateCaptcha('reg-canvas')); | |
| }); | |
| // --- UI Functions --- | |
| // Toggle Password Visibility | |
| function togglePassword(inputId, iconElement) { | |
| const input = document.getElementById(inputId); | |
| if (input.type === "password") { | |
| input.type = "text"; | |
| iconElement.classList.remove('fa-eye'); | |
| iconElement.classList.add('fa-eye-slash'); | |
| } else { | |
| input.type = "password"; | |
| iconElement.classList.remove('fa-eye-slash'); | |
| iconElement.classList.add('fa-eye'); | |
| } | |
| } | |
| // Switch Between Forms | |
| function switchForm(target) { | |
| const loginForm = document.getElementById('login-form'); | |
| const registerForm = document.getElementById('register-form'); | |
| if (target === 'register') { | |
| loginForm.style.opacity = '0'; | |
| setTimeout(() => { | |
| loginForm.classList.add('hidden'); | |
| registerForm.classList.remove('hidden'); | |
| // Small delay to allow display:block to apply before opacity transition | |
| setTimeout(() => { | |
| registerForm.style.opacity = '1'; | |
| }, 50); | |
| }, 300); | |
| } else { | |
| registerForm.style.opacity = '0'; | |
| setTimeout(() => { | |
| registerForm.classList.add('hidden'); | |
| loginForm.classList.remove('hidden'); | |
| setTimeout(() => { | |
| loginForm.style.opacity = '1'; | |
| }, 50); | |
| }, 300); | |
| } | |
| // Clear messages | |
| document.querySelectorAll('.message-box').forEach(box => { | |
| if(!box.classList.contains('register-message')) { // keep the welcome message | |
| box.style.display = 'none'; | |
| } | |
| }); | |
| } | |
| // Show Feedback Message | |
| function showMessage(elementId, text, type) { | |
| const el = document.getElementById(elementId); | |
| el.textContent = text; | |
| el.className = `message-box ${type}`; | |
| el.style.display = 'block'; | |
| // Auto hide after 5 seconds if success | |
| if (type === 'success') { | |
| setTimeout(() => { | |
| el.style.display = 'none'; | |
| }, 5000); | |
| } | |
| } | |
| // --- Captcha Logic --- | |
| function generateCaptcha(canvasId) { | |
| const canvas = document.getElementById(canvasId); | |
| const ctx = canvas.getContext('2d'); | |
| const width = canvas.width; | |
| const height = canvas.height; | |
| // Clear canvas | |
| ctx.clearRect(0, 0, width, height); | |
| // Background | |
| ctx.fillStyle = '#f0f2f5'; | |
| ctx.fillRect(0, 0, width, height); | |
| // Generate Random Code | |
| const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'; | |
| let code = ''; | |
| for (let i = 0; i < 5; i++) { | |
| code += chars[Math.floor(Math.random() * chars.length)]; | |
| } | |
| // Store code | |
| if(canvasId === 'login-canvas') currentCaptcha.login = code; | |
| else currentCaptcha.register = code; | |
| // Draw Text | |
| ctx.font = 'bold 24px Vazirmatn, sans-serif'; | |
| ctx.textBaseline = 'middle'; | |
| for (let i = 0; i < code.length; i++) { | |
| ctx.save(); | |
| // Random position and rotation | |
| const x = 15 + i * 18; | |
| const y = height / 2 + (Math.random() * 10 - 5); | |
| 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()*100})`; | |
| ctx.fillText(code[i], 0, 0); | |
| ctx.restore(); | |
| } | |
| // Add Noise (Lines) | |
| for (let i = 0; i < 5; i++) { | |
| ctx.strokeStyle = `rgba(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255}, 0.5)`; | |
| ctx.lineWidth = 1; | |
| ctx.beginPath(); | |
| ctx.moveTo(Math.random() * width, Math.random() * height); | |
| ctx.lineTo(Math.random() * width, Math.random() * height); | |
| ctx.stroke(); | |
| } | |
| } | |
| // --- Form Handling --- | |
| function handleFormSubmit(e, formType) { | |
| e.preventDefault(); | |
| const btn = e.target.querySelector('button[type="submit"]'); | |
| const spinner = btn.querySelector('.spinner'); | |
| const originalText = btn.childNodes[0].nodeValue; // Keep the text node | |
| // Basic Validation | |
| let isValid = true; | |
| const captchaInput = document.getElementById(`${formType}-captcha-input`); | |
| const correctCode = currentCaptcha[formType]; | |
| if (captchaInput.value.toUpperCase() !== correctCode) { | |
| showMessage(`${formType}-message`, 'کد امنیتی اشتباه است.', 'error'); | |
| generateCaptcha(`${formType}-canvas`); | |
| captchaInput.value = ''; | |
| return; | |
| } | |
| // Simulate Loading | |
| btn.disabled = true; | |
| spinner.style.display = 'inline-block'; | |
| btn.childNodes[0].nodeValue = ' در حال پردازش...'; | |
| // Simulate API Call | |
| setTimeout(() => { | |
| btn.disabled = false; | |
| spinner.style.display = 'none'; | |
| btn.childNodes[0].nodeValue = originalText; | |
| // Success Simulation | |
| if (formType === 'login') { | |
| showMessage('login-message', 'ورود با موفقیت انجام شد. در حال انتقال...', 'success'); | |
| // Here you would normally redirect | |
| } else { | |
| showMessage('register-message', 'ثبت نام با موفقیت انجام شد. خوش آمدید!', 'success'); | |
| } | |
| }, 1500); | |
| } | |
| document.getElementById('login-form').addEventListener('submit', (e) => handleFormSubmit(e, 'login')); | |
| document.getElementById('register-form').addEventListener('submit', (e) => handleFormSubmit(e, 'register')); | |
| </script> | |
| </body> | |
| </html> |