Spaces:

samirerty
/

anycoder-e53a6ece

Running

App Files Files Community

samirerty commited on Feb 5

Commit

c1fee8b

verified ·

1 Parent(s): b16b508

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +202 -318

index.html CHANGED Viewed

@@ -4,138 +4,99 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <title>ورود و ثبت نام | سیستم امن</title>
-  <!-- ایمپورت فونت وزیرمتن -->
-  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet"
-    type="text/css" />
-  <!-- ایمپورت کتابخانه آیکون‌ها -->
-  <script src="https://unpkg.com/@phosphor-icons/web"></script>
   <style>
-    /* تنظیمات متغیرهای رنگی و کلی */
     :root {
-      --bg-color: #0f172a;
-      --card-bg: rgba(30, 41, 59, 0.7);
-      --input-bg: rgba(15, 23, 42, 0.6);
       --primary-color: #6366f1;
       --primary-hover: #4f46e5;
-      --text-color: #f8fafc;
       --text-muted: #94a3b8;
-      --border-color: #334155;
       --error-color: #ef4444;
       --success-color: #22c55e;
-      --font-family: 'Vazirmatn', sans-serif;
-      --transition: all 0.3s ease;
-      --radius: 16px;
     }
     * {
       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-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: 150% 150%;
-      animation: gradientBG 15s ease infinite;
       color: var(--text-color);
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
-      /* پدینگ امن برای موبایل */
-      padding: clamp(15px, 4vw, 40px);
-      overflow-x: hidden;
-    }
-    @keyframes gradientBG {
-      0% { background-position: 0% 50%; }
-      50% { background-position: 100% 50%; }
-      100% { background-position: 0% 50%; }
     }
     /* لینک هدر */
     .header-link {
       position: fixed;
-      top: 20px;
-      left: 20px;
       color: var(--text-muted);
       text-decoration: none;
-      font-size: 0.85rem;
-      transition: var(--transition);
       z-index: 100;
-      background: rgba(15, 23, 42, 0.5);
-      padding: 5px 10px;
-      border-radius: 20px;
-      backdrop-filter: blur(4px);
     }
     .header-link:hover {
       color: var(--primary-color);
-      background: rgba(15, 23, 42, 0.8);
     }
-    /* کانتینر اصلی کارت */
     .container {
       width: 100%;
-      max-width: 440px;
       background: var(--card-bg);
-      backdrop-filter: blur(16px);
-      -webkit-backdrop-filter: blur(16px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 24px;
-      /* پدینگ سیال برای رسپانسیو بودن */
-      padding: clamp(25px, 6vw, 40px);
-      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-      position: relative;
-      overflow: hidden;
-      margin: auto;
     }
     /* هدر فرم */
     .form-header {
       text-align: center;
-      margin-bottom: clamp(20px, 5vw, 30px);
     }
     .form-header h2 {
-      /* اندازه فونت سیال: بین 1.5rem در موبایل تا 2rem در دسکتاپ */
-      font-size: clamp(1.5rem, 4vw, 2rem);
-      font-weight: 700;
-      margin-bottom: 8px;
-      background: linear-gradient(to right, #818cf8, #c084fc);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
     }
     .form-header p {
       color: var(--text-muted);
-      font-size: clamp(0.85rem, 2vw, 0.95rem);
     }
     /* ورودی‌ها */
     .input-group {
-      margin-bottom: clamp(15px, 4vw, 20px);
-      position: relative;
     }
     .input-group label {
       display: block;
-      margin-bottom: 8px;
       color: var(--text-muted);
-      font-size: 0.9rem;
-      transition: var(--transition);
     }
     .input-wrapper {
@@ -144,63 +105,65 @@
       align-items: center;
     }
-    .input-wrapper i.icon-left {
       position: absolute;
-      right: 14px;
       color: var(--text-muted);
-      font-size: 1.2rem;
       pointer-events: none;
     }
     .input-wrapper input {
       width: 100%;
-      /* ارتفاع مناسب برای لمس در موبایل */
-      padding: 14px 45px 14px 15px;
       background: var(--input-bg);
       border: 1px solid var(--border-color);
       border-radius: var(--radius);
       color: var(--text-color);
-      font-family: var(--font-family);
-      font-size: 1rem;
-      transition: var(--transition);
     }
     .input-wrapper input:focus {
       border-color: var(--primary-color);
-      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
     }
     .toggle-password {
       position: absolute;
-      left: 14px;
       cursor: pointer;
       color: var(--text-muted);
-      transition: var(--transition);
-      padding: 5px; /* افزایش ناحیه کلیک */
     }
     .toggle-password:hover {
       color: var(--text-color);
     }
-    /* بخش کپچا - کاملاً رسپانسیو */
     .captcha-container {
       display: flex;
       align-items: center;
-      gap: 10px;
-      margin-bottom: 25px;
-      background: rgba(255, 255, 255, 0.03);
-      padding: 10px;
-      border-radius: var(--radius);
-      flex-wrap: wrap; /* اجازه به خط رفتن در صفحات کوچک */
-      justify-content: center;
     }
-    canvas#captchaCanvas, canvas#captchaCanvasReg {
-      background-color: #fff;
-      border-radius: 8px;
       cursor: pointer;
-      flex-shrink: 0; /* جلوگیری از کوچک شدن بیش از حد */
     }
     .refresh-btn {
@@ -208,65 +171,54 @@
       border: none;
       color: var(--primary-color);
       cursor: pointer;
-      font-size: 1.2rem;
-      transition: var(--transition);
       padding: 5px;
       display: flex;
       align-items: center;
-      justify-content: center;
-    }
-    .refresh-btn:hover {
-      transform: rotate(180deg);
     }
     .captcha-container input {
-      /* ورودی کپچا باید منعطف باشد */
       flex-grow: 1;
-      min-width: 100px; /* حداقل عرض */
       padding: 10px;
-      border-radius: 8px;
       border: 1px solid var(--border-color);
       background: var(--input-bg);
       color: white;
       text-align: center;
     }
     /* دکمه ارسال */
     .submit-btn {
       width: 100%;
-      padding: 14px;
       background: var(--primary-color);
       color: white;
       border: none;
       border-radius: var(--radius);
-      font-family: var(--font-family);
       font-size: 1rem;
-      font-weight: 600;
       cursor: pointer;
-      transition: var(--transition);
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 8px;
-      /* بهبود عملکرد کلیک در موبایل */
-      touch-action: manipulation;
     }
     .submit-btn:hover {
       background: var(--primary-hover);
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
     }
-    .submit-btn:active {
-      transform: translateY(0);
     }
-    /* لینک تغییر حالت */
     .switch-mode {
       text-align: center;
-      margin-top: 20px;
       font-size: 0.9rem;
       color: var(--text-muted);
     }
@@ -276,61 +228,42 @@
       border: none;
       color: var(--primary-color);
       cursor: pointer;
-      font-family: var(--font-family);
-      font-weight: 600;
       padding: 0 5px;
-      transition: var(--transition);
-    }
-    .switch-mode button:hover {
-      text-decoration: underline;
     }
     /* کلاس‌های کمکی */
     .hidden {
-      display: none;
-    }
-    .fade-in {
-      animation: fadeIn 0.4s ease-in-out;
     }
-    @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: translateY(0); }
-    }
-    /* اعلان‌ها (Toast) - رسپانسیو */
     .toast-container {
       position: fixed;
       bottom: 20px;
       right: 20px;
-      left: 20px; /* جلوگیری از خروج از کادر در موبایل */
       z-index: 1000;
       display: flex;
       flex-direction: column;
       gap: 10px;
-      align-items: flex-end; /* راست‌چین */
-      pointer-events: none; /* کلیک روی فضای خالی مسدود نشود */
     }
     .toast {
       background: var(--card-bg);
       border-right: 4px solid var(--primary-color);
-      padding: 15px 20px;
-      border-radius: 8px;
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
       color: var(--text-color);
       font-size: 0.9rem;
       display: flex;
       align-items: center;
       gap: 10px;
-      width: 100%;
-      max-width: 350px; /* محدودیت عرض */
       animation: slideIn 0.3s ease;
-      backdrop-filter: blur(10px);
-      pointer-events: auto;
-      margin-bottom: 10px;
     }
     .toast.success { border-color: var(--success-color); }
@@ -341,65 +274,70 @@
       to { transform: translateX(0); opacity: 1; }
     }
-    /* تنظیمات خاص برای موبایل‌های خیلی کوچک */
     @media (max-width: 360px) {
-      .form-header h2 { font-size: 1.4rem; }
-      .captcha-container { justify-content: space-between; }
-      .captcha-container input { width: 100%; min-width: unset; }
-      .toast { font-size: 0.8rem; padding: 12px; }
     }
   </style>
 </head>
 <body>
-  <!-- لینک هدر الزامی -->
   <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link">
     Built with anycoder
   </a>
   <div class="container">
     <!-- فرم ورود -->
-    <div id="login-form" class="fade-in">
       <div class="form-header">
         <h2>خوش آمدید</h2>
-        <p>لطفاً برای ادامه وارد حساب کاربری خود شوید</p>
       </div>
       <form onsubmit="handleLogin(event)">
         <div class="input-group">
-          <label for="login-username">نام کاربری</label>
           <div class="input-wrapper">
-            <i class="ph ph-user icon-left"></i>
-            <input type="text" id="login-username" placeholder="نام کاربری خود را وارد کنید" autocomplete="off">
           </div>
         </div>
         <div class="input-group">
-          <label for="login-password">رمز عبور</label>
           <div class="input-wrapper">
-            <i class="ph ph-lock-key icon-left"></i>
-            <input type="password" id="login-password" placeholder="رمز عبور خود را وارد کنید">
-            <i class="ph ph-eye-slash toggle-password" onclick="togglePassword('login-password', this)"></i>
           </div>
         </div>
         <div class="captcha-container">
-          <canvas id="captchaCanvas" width="120" height="44" title="برای تغ��یر کد کلیک کنید"></canvas>
           <button type="button" class="refresh-btn" onclick="drawCaptcha()">
-            <i class="ph ph-arrows-clockwise"></i>
           </button>
-          <input type="text" id="login-captcha" placeholder="کد تصویر">
         </div>
         <button type="submit" class="submit-btn">
-          <span>ورود به حساب</span>
-          <i class="ph ph-sign-in"></i>
         </button>
         <div class="switch-mode">
-          حساب کاربری ندارید؟
-          <button type="button" onclick="switchForm('register')">ثبت نام کنید</button>
         </div>
       </form>
     </div>
@@ -407,247 +345,193 @@
     <!-- فرم ثبت نام -->
     <div id="register-form" class="hidden">
       <div class="form-header">
-        <h2>ایجاد حساب</h2>
-        <p>اطلاعات خود را برای ثبت نام وارد کنید</p>
       </div>
       <form onsubmit="handleRegister(event)">
         <div class="input-group">
-          <label for="reg-username">نام کاربری</label>
           <div class="input-wrapper">
-            <i class="ph ph-user icon-left"></i>
-            <input type="text" id="reg-username" placeholder="انتخاب نام کاربری" autocomplete="off">
           </div>
         </div>
         <div class="input-group">
-          <label for="reg-password">رمز عبور</label>
           <div class="input-wrapper">
-            <i class="ph ph-lock-key icon-left"></i>
-            <input type="password" id="reg-password" placeholder="رمز عبور قوی انتخاب کنید">
-            <i class="ph ph-eye-slash toggle-password" onclick="togglePassword('reg-password', this)"></i>
           </div>
         </div>
         <div class="input-group">
-          <label for="reg-confirm-password">تکرار رمز عبور</label>
           <div class="input-wrapper">
-            <i class="ph ph-check-circle icon-left"></i>
             <input type="password" id="reg-confirm-password" placeholder="تکرار رمز عبور">
           </div>
         </div>
         <div class="captcha-container">
-          <canvas id="captchaCanvasReg" width="120" height="44" title="برای تغییر کد کلیک کنید"></canvas>
           <button type="button" class="refresh-btn" onclick="drawCaptcha(true)">
-            <i class="ph ph-arrows-clockwise"></i>
           </button>
-          <input type="text" id="reg-captcha" placeholder="کد تصویر">
         </div>
         <button type="submit" class="submit-btn">
           <span>ثبت نام</span>
-          <i class="ph ph-user-plus"></i>
         </button>
         <div class="switch-mode">
-          قبلاً ثبت نام کرده‌اید؟
-          <button type="button" onclick="switchForm('login')">وارد شوید</button>
         </div>
       </form>
     </div>
   </div>
-  <!-- کانتینر پیام‌ها -->
   <div class="toast-container" id="toastContainer"></div>
   <script>
-    // متغیرهای سراسری
     let currentCaptcha = '';
     let currentCaptchaReg = '';
     window.onload = function() {
       drawCaptcha();
       drawCaptcha(true);
       document.getElementById('captchaCanvas').addEventListener('click', () => drawCaptcha());
       document.getElementById('captchaCanvasReg').addEventListener('click', () => drawCaptcha(true));
     };
-    function switchForm(formType) {
-      const loginForm = document.getElementById('login-form');
-      const registerForm = document.getElementById('register-form');
-      document.querySelectorAll('input').forEach(input => input.value = '');
-      if (formType === 'register') {
-        loginForm.classList.add('hidden');
-        registerForm.classList.remove('hidden');
-        registerForm.classList.add('fade-in');
-        drawCaptcha(true);
       } else {
-        registerForm.classList.add('hidden');
-        loginForm.classList.remove('hidden');
-        loginForm.classList.add('fade-in');
-        drawCaptcha();
       }
     }
-    function togglePassword(inputId, icon) {
-      const input = document.getElementById(inputId);
       if (input.type === 'password') {
         input.type = 'text';
-        icon.classList.remove('ph-eye-slash');
-        icon.classList.add('ph-eye');
       } else {
         input.type = 'password';
-        icon.classList.remove('ph-eye');
-        icon.classList.add('ph-eye-slash');
       }
     }
-    function drawCaptcha(isRegister = false) {
-      const canvasId = isRegister ? 'captchaCanvasReg' : 'captchaCanvas';
-      const canvas = document.getElementById(canvasId);
-      const ctx = canvas.getContext('2d');
-      const width = canvas.width;
-      const height = canvas.height;
-      ctx.clearRect(0, 0, width, height);
-      ctx.fillStyle = '#e2e8f0';
-      ctx.fillRect(0, 0, width, height);
-      const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
-      let captchaText = '';
-      for (let i = 0; i < 5; i++) {
-        captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
-      }
-      if (isRegister) currentCaptchaReg = captchaText;
-      else currentCaptcha = captchaText;
-      // نویز
-      for (let i = 0; i < 7; i++) {
-        ctx.strokeStyle = `rgba(${Math.random()*255},${Math.random()*255},${Math.random()*255},0.5)`;
-        ctx.lineWidth = Math.random() * 2;
-        ctx.beginPath();
-        ctx.moveTo(Math.random() * width, Math.random() * height);
-        ctx.lineTo(Math.random() * width, Math.random() * height);
-        ctx.stroke();
-      }
-      // متن
-      ctx.font = 'bold 24px Vazirmatn';
       ctx.textBaseline = 'middle';
-      for (let i = 0; i < captchaText.length; i++) {
         ctx.save();
-        const x = 20 + i * 20;
-        const y = height / 2 + (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(captchaText[i], 0, 0);
         ctx.restore();
       }
     }
     function handleLogin(e) {
       e.preventDefault();
-      const username = document.getElementById('login-username').value.trim();
-      const password = document.getElementById('login-password').value;
-      const captchaInput = document.getElementById('login-captcha').value.trim();
-      if (!username || !password) {
-        showToast('لطفاً تمام فیلدها را پر کنید.', 'error');
-        return;
-      }
-      if (captchaInput !== currentCaptcha) {
-        showToast('کد امنیتی اشتباه است.', 'error');
-        drawCaptcha();
-        document.getElementById('login-captcha').value = '';
-        return;
-      }
       const btn = e.target.querySelector('.submit-btn');
-      const originalText = btn.innerHTML;
-      btn.innerHTML = '<i class="ph ph-spinner ph-spin"></i> در حال پردازش...';
       btn.disabled = true;
       setTimeout(() => {
-        btn.innerHTML = originalText;
         btn.disabled = false;
-        showToast('ورود با موفقیت انجام شد!', 'success');
-      }, 1500);
     }
     function handleRegister(e) {
       e.preventDefault();
-      const username = document.getElementById('reg-username').value.trim();
-      const password = document.getElementById('reg-password').value;
-      const confirmPassword = document.getElementById('reg-confirm-password').value;
-      const captchaInput = document.getElementById('reg-captcha').value.trim();
-      if (!username || !password || !confirmPassword) {
-        showToast('لطفاً تمام فیلدها را پر کنید.', 'error');
-        return;
-      }
-      if (password.length < 6) {
-        showToast('رمز عبور باید حداقل ۶ کاراکتر باشد.', 'error');
-        return;
-      }
-      if (password !== confirmPassword) {
-        showToast('رمز عبور و تکرار آن مطابقت ندارند.', 'error');
-        return;
-      }
-      if (captchaInput !== currentCaptchaReg) {
-        showToast('کد امنیتی اشتباه اس��.', 'error');
-        drawCaptcha(true);
-        document.getElementById('reg-captcha').value = '';
-        return;
-      }
       const btn = e.target.querySelector('.submit-btn');
-      const originalText = btn.innerHTML;
-      btn.innerHTML = '<i class="ph ph-spinner ph-spin"></i> در حال ثبت...';
       btn.disabled = true;
       setTimeout(() => {
-        btn.innerHTML = originalText;
         btn.disabled = false;
-        showToast('حساب کاربری با موفقیت ایجاد شد!', 'success');
         switchForm('login');
-      }, 1500);
     }
-    function showToast(message, type = 'success') {
-      const container = document.getElementById('toastContainer');
-      const toast = document.createElement('div');
-      toast.className = `toast ${type}`;
-      const iconClass = type === 'success' ? 'ph-check-circle' : 'ph-warning-circle';
-      toast.innerHTML = `
-        <i class="ph ${iconClass}" style="font-size: 1.2rem;"></i>
-        <span>${message}</span>
-      `;
-      container.appendChild(toast);
       setTimeout(() => {
-        toast.style.animation = 'slideIn 0.3s ease reverse forwards';
-        setTimeout(() => {
-          toast.remove();
-        }, 300);
       }, 3000);
     }
   </script>
 </body>
 </html>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>ورود و ثبت نام | نسخه سبک</title>
   <style>
+    /* تنظیمات پایه و متغیرها */
     :root {
+      --bg-color: #1e293b;
+      --card-bg: #334155;
+      --input-bg: #0f172a;
       --primary-color: #6366f1;
       --primary-hover: #4f46e5;
+      --text-color: #f1f5f9;
       --text-muted: #94a3b8;
+      --border-color: #475569;
       --error-color: #ef4444;
       --success-color: #22c55e;
+      --font-main: 'Tahoma', 'Segoe UI', sans-serif; /* فونت سیستم برای سرعت بالا */
+      --radius: 12px;
     }
     * {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
+      -webkit-tap-highlight-color: transparent;
     }
     body {
+      font-family: var(--font-main);
       background-color: var(--bg-color);
       color: var(--text-color);
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
+      padding: 20px;
     }
     /* لینک هدر */
     .header-link {
       position: fixed;
+      top: 15px;
+      left: 15px;
       color: var(--text-muted);
       text-decoration: none;
+      font-size: 0.8rem;
+      background: rgba(0, 0, 0, 0.2);
+      padding: 4px 8px;
+      border-radius: 4px;
       z-index: 100;
     }
     .header-link:hover {
       color: var(--primary-color);
     }
+    /* کانتینر اصلی */
     .container {
       width: 100%;
+      max-width: 400px;
       background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: var(--radius);
+      padding: 30px 20px;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
     }
     /* هدر فرم */
     .form-header {
       text-align: center;
+      margin-bottom: 25px;
     }
     .form-header h2 {
+      font-size: 1.5rem;
+      color: var(--text-color);
+      margin-bottom: 5px;
     }
     .form-header p {
       color: var(--text-muted);
+      font-size: 0.9rem;
     }
     /* ورودی‌ها */
     .input-group {
+      margin-bottom: 15px;
     }
     .input-group label {
       display: block;
+      margin-bottom: 6px;
       color: var(--text-muted);
+      font-size: 0.85rem;
     }
     .input-wrapper {
       align-items: center;
     }
+    /* آیکون‌های SVG داخلی */
+    .icon {
+      width: 20px;
+      height: 20px;
+      fill: currentColor;
+    }
+    .icon-left {
       position: absolute;
+      right: 12px;
       color: var(--text-muted);
       pointer-events: none;
     }
     .input-wrapper input {
       width: 100%;
+      padding: 12px 40px 12px 12px;
       background: var(--input-bg);
       border: 1px solid var(--border-color);
       border-radius: var(--radius);
       color: var(--text-color);
+      font-family: var(--font-main);
+      font-size: 0.95rem;
     }
     .input-wrapper input:focus {
       border-color: var(--primary-color);
+      outline: none;
     }
     .toggle-password {
       position: absolute;
+      left: 12px;
       cursor: pointer;
       color: var(--text-muted);
+      background: none;
+      border: none;
+      padding: 0;
+      display: flex;
+      align-items: center;
     }
     .toggle-password:hover {
       color: var(--text-color);
     }
+    /* کپچا */
     .captcha-container {
       display: flex;
       align-items: center;
+      gap: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
     }
+    canvas {
+      background: #fff;
+      border-radius: 6px;
       cursor: pointer;
     }
     .refresh-btn {
       border: none;
       color: var(--primary-color);
       cursor: pointer;
       padding: 5px;
       display: flex;
       align-items: center;
     }
     .captcha-container input {
       flex-grow: 1;
       padding: 10px;
+      border-radius: 6px;
       border: 1px solid var(--border-color);
       background: var(--input-bg);
       color: white;
       text-align: center;
+      min-width: 80px;
     }
     /* دکمه ارسال */
     .submit-btn {
       width: 100%;
+      padding: 12px;
       background: var(--primary-color);
       color: white;
       border: none;
       border-radius: var(--radius);
+      font-family: var(--font-main);
       font-size: 1rem;
+      font-weight: bold;
       cursor: pointer;
+      transition: background 0.2s;
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 8px;
     }
     .submit-btn:hover {
       background: var(--primary-hover);
     }
+    .submit-btn:disabled {
+      opacity: 0.7;
+      cursor: not-allowed;
     }
+    /* تغییر حالت */
     .switch-mode {
       text-align: center;
+      margin-top: 15px;
       font-size: 0.9rem;
       color: var(--text-muted);
     }
       border: none;
       color: var(--primary-color);
       cursor: pointer;
+      font-family: var(--font-main);
+      font-weight: bold;
       padding: 0 5px;
     }
     /* کلاس‌های کمکی */
     .hidden {
+      display: none !important;
     }
+    /* Toast (پیام‌ها) */
     .toast-container {
       position: fixed;
       bottom: 20px;
+      left: 20px;
       right: 20px;
       z-index: 1000;
       display: flex;
       flex-direction: column;
+      align-items: flex-end;
       gap: 10px;
     }
     .toast {
       background: var(--card-bg);
       border-right: 4px solid var(--primary-color);
+      padding: 12px 15px;
+      border-radius: 4px;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.3);
       color: var(--text-color);
       font-size: 0.9rem;
       display: flex;
       align-items: center;
       gap: 10px;
+      max-width: 300px;
       animation: slideIn 0.3s ease;
     }
     .toast.success { border-color: var(--success-color); }
       to { transform: translateX(0); opacity: 1; }
     }
     @media (max-width: 360px) {
+      .captcha-container input {
+        width: 100%;
+        flex-basis: 100%;
+      }
     }
   </style>
 </head>
 <body>
   <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link">
     Built with anycoder
   </a>
   <div class="container">
     <!-- فرم ورود -->
+    <div id="login-form">
       <div class="form-header">
         <h2>خوش آمدید</h2>
+        <p>وارد حساب کاربری شوید</p>
       </div>
       <form onsubmit="handleLogin(event)">
         <div class="input-group">
+          <label>نام کاربری</label>
           <div class="input-wrapper">
+            <!-- SVG Icon: User -->
+            <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+            <input type="text" id="login-username" placeholder="نام کاربری" autocomplete="off">
           </div>
         </div>
         <div class="input-group">
+          <label>رمز عبور</label>
           <div class="input-wrapper">
+            <!-- SVG Icon: Lock -->
+            <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
+            <input type="password" id="login-password" placeholder="رمز عبور">
+            <button type="button" class="toggle-password" onclick="togglePassword('login-password', this)">
+              <!-- SVG Icon: Eye Slash -->
+              <svg class="icon" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
+            </button>
           </div>
         </div>
         <div class="captcha-container">
+          <canvas id="captchaCanvas" width="100" height="40" title="تغییر کد"></canvas>
           <button type="button" class="refresh-btn" onclick="drawCaptcha()">
+             <!-- SVG Icon: Refresh -->
+             <svg class="icon" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
           </button>
+          <input type="text" id="login-captcha" placeholder="کد">
         </div>
         <button type="submit" class="submit-btn">
+          <span>ورود</span>
+          <!-- SVG Icon: Sign In -->
+          <svg class="icon" viewBox="0 0 24 24"><path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/></svg>
         </button>
         <div class="switch-mode">
+          حساب ندارید؟
+          <button type="button" onclick="switchForm('register')">ثبت نام</button>
         </div>
       </form>
     </div>
     <!-- فرم ثبت نام -->
     <div id="register-form" class="hidden">
       <div class="form-header">
+        <h2>ثبت نام</h2>
+        <p>ایجاد حساب جدید</p>
       </div>
       <form onsubmit="handleRegister(event)">
         <div class="input-group">
+          <label>نام کاربری</label>
           <div class="input-wrapper">
+            <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+            <input type="text" id="reg-username" placeholder="نام کاربری" autocomplete="off">
           </div>
         </div>
         <div class="input-group">
+          <label>رمز عبور</label>
           <div class="input-wrapper">
+            <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
+            <input type="password" id="reg-password" placeholder="رمز عبور">
+            <button type="button" class="toggle-password" onclick="togglePassword('reg-password', this)">
+              <svg class="icon" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>
+            </button>
           </div>
         </div>
         <div class="input-group">
+          <label>تکرار رمز</label>
           <div class="input-wrapper">
+            <svg class="icon icon-left" viewBox="0 0 24 24"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
             <input type="password" id="reg-confirm-password" placeholder="تکرار رمز عبور">
           </div>
         </div>
         <div class="captcha-container">
+          <canvas id="captchaCanvasReg" width="100" height="40" title="تغییر کد"></canvas>
           <button type="button" class="refresh-btn" onclick="drawCaptcha(true)">
+             <svg class="icon" viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
           </button>
+          <input type="text" id="reg-captcha" placeholder="کد">
         </div>
         <button type="submit" class="submit-btn">
           <span>ثبت نام</span>
+          <svg class="icon" viewBox="0 0 24 24"><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
         </button>
         <div class="switch-mode">
+          حساب دارید؟
+          <button type="button" onclick="switchForm('login')">ورود</button>
         </div>
       </form>
     </div>
   </div>
   <div class="toast-container" id="toastContainer"></div>
   <script>
     let currentCaptcha = '';
     let currentCaptchaReg = '';
     window.onload = function() {
       drawCaptcha();
       drawCaptcha(true);
       document.getElementById('captchaCanvas').addEventListener('click', () => drawCaptcha());
       document.getElementById('captchaCanvasReg').addEventListener('click', () => drawCaptcha(true));
     };
+    function switchForm(type) {
+      const login = document.getElementById('login-form');
+      const reg = document.getElementById('register-form');
+      document.querySelectorAll('input').forEach(i => i.value = '');
+      if (type === 'register') {
+        login.classList.add('hidden');
+        reg.classList.remove('hidden');
       } else {
+        reg.classList.add('hidden');
+        login.classList.remove('hidden');
       }
     }
+    function togglePassword(id, btn) {
+      const input = document.getElementById(id);
+      const isEyeSlash = btn.innerHTML.includes('M12 7c2.76'); // Check path content roughly
       if (input.type === 'password') {
         input.type = 'text';
+        // Change to Eye Open icon (simple path)
+        btn.innerHTML = '<svg class="icon" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>';
       } else {
         input.type = 'password';
+        // Change back to Eye Slash
+        btn.innerHTML = '<svg class="icon" viewBox="0 0 24 24"><path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/></svg>';
       }
     }
+    function drawCaptcha(isReg = false) {
+      const cvs = document.getElementById(isReg ? 'captchaCanvasReg' : 'captchaCanvas');
+      const ctx = cvs.getContext('2d');
+      ctx.clearRect(0, 0, cvs.width, cvs.height);
+      ctx.fillStyle = '#cbd5e1';
+      ctx.fillRect(0, 0, cvs.width, cvs.height);
+      const chars = '0123456789ABCDEFGHJKLMNPQRSTUVWXYZ';
+      let txt = '';
+      for(let i=0; i<5; i++) txt += chars[Math.floor(Math.random()*chars.length)];
+      if(isReg) currentCaptchaReg = txt; else currentCaptcha = txt;
+      ctx.font = 'bold 24px monospace';
       ctx.textBaseline = 'middle';
+      for(let i=0; i<5; i++) {
         ctx.save();
+        ctx.translate(15 + i*16, 20);
+        ctx.rotate((Math.random()-0.5)*0.4);
+        ctx.fillStyle = '#1e293b';
+        ctx.fillText(txt[i], 0, 0);
         ctx.restore();
       }
+      // Noise
+      for(let i=0; i<5; i++) {
+        ctx.strokeStyle = '#94a3b8';
+        ctx.beginPath();
+        ctx.moveTo(Math.random()*100, Math.random()*40);
+        ctx.lineTo(Math.random()*100, Math.random()*40);
+        ctx.stroke();
+      }
     }
     function handleLogin(e) {
       e.preventDefault();
+      const u = document.getElementById('login-username').value;
+      const p = document.getElementById('login-password').value;
+      const c = document.getElementById('login-captcha').value;
+      if(!u || !p) return showToast('فیلدها الزامی است', 'error');
+      if(c !== currentCaptcha) return showToast('کد اشتباه است', 'error');
       const btn = e.target.querySelector('.submit-btn');
       btn.disabled = true;
+      btn.innerHTML = 'در حال پردازش...';
       setTimeout(() => {
         btn.disabled = false;
+        btn.innerHTML = '<span>ورود</span><svg class="icon" viewBox="0 0 24 24"><path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z"/></svg>';
+        showToast('خوش آمدید!', 'success');
+      }, 1000);
     }
     function handleRegister(e) {
       e.preventDefault();
+      const u = document.getElementById('reg-username').value;
+      const p = document.getElementById('reg-password').value;
+      const cp = document.getElementById('reg-confirm-password').value;
+      const c = document.getElementById('reg-captcha').value;
+      if(!u || !p || !cp) return showToast('فیلدها الزامی است', 'error');
+      if(p.length < 6) return showToast('رمز کوتاه است', 'error');
+      if(p !== cp) return showToast('تکرار مغایرت دارد', 'error');
+      if(c !== currentCaptchaReg) return showToast('کد اشتباه است', 'error');
       const btn = e.target.querySelector('.submit-btn');
       btn.disabled = true;
+      btn.innerHTML = 'در حال ثبت...';
       setTimeout(() => {
         btn.disabled = false;
+        btn.innerHTML = '<span>ثبت نام</span><svg class="icon" viewBox="0 0 24 24"><path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>';
+        showToast('ثبت نام موفق!', 'success');
         switchForm('login');
+      }, 1000);
     }
+    function showToast(msg, type) {
+      const con = document.getElementById('toastContainer');
+      const t = document.createElement('div');
+      t.className = `toast ${type}`;
+      const icon = type === 'success'
+        ? '<svg class="icon" style="fill:#22c55e" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>'
+        : '<svg class="icon" style="fill:#ef4444" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>';
+      t.innerHTML = `${icon}<span>${msg}</span>`;
+      con.appendChild(t);
       setTimeout(() => {
+        t.style.opacity = '0';
+        setTimeout(() => t.remove(), 300);
       }, 3000);
     }
   </script>
 </body>
 </html>