Spaces:

samirerty
/

anycoder-e53a6ece

Running

App Files Files Community

samirerty commited on Feb 5

Commit

5915b23

verified ·

1 Parent(s): c1fee8b

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +302 -164

index.html CHANGED Viewed

@@ -4,23 +4,29 @@
 <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;
     }
     * {
@@ -32,71 +38,108 @@
     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 {
@@ -105,39 +148,47 @@
       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;
@@ -145,80 +196,101 @@
       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 {
-      background: none;
       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);
     }
@@ -226,59 +298,92 @@
     .switch-mode button {
       background: none;
       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); }
-    .toast.error { border-color: var(--error-color); }
-    @keyframes slideIn {
-      from { transform: translateX(100%); opacity: 0; }
-      to { transform: translateX(0); opacity: 1; }
     }
     @media (max-width: 360px) {
-      .captcha-container input {
-        width: 100%;
-        flex-basis: 100%;
-      }
     }
   </style>
 </head>
@@ -291,17 +396,16 @@
   <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>
@@ -310,43 +414,39 @@
         <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)">
@@ -370,7 +470,7 @@
         </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="تکرار رمز عبور">
@@ -378,21 +478,21 @@
         </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>
@@ -414,28 +514,52 @@
     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>';
       }
     }
@@ -444,31 +568,50 @@
       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();
       }
     }
@@ -477,20 +620,23 @@
       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) {
@@ -498,40 +644,32 @@
       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>

 <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-gradient-1: #0f172a;
+      --bg-gradient-2: #1e1b4b;
+      --bg-gradient-3: #312e81;
+      --card-bg: rgba(30, 41, 59, 0.75);
+      --card-border: rgba(255, 255, 255, 0.1);
+      --input-bg: rgba(15, 23, 42, 0.6);
+      --input-border: rgba(148, 163, 184, 0.2);
+      --input-focus: #6366f1;
+      --primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+      --text-color: #f8fafc;
       --text-muted: #94a3b8;
+      --font-main: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      --radius: 16px;
+      --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
     * {
     body {
       font-family: var(--font-main);
+      background: linear-gradient(-45deg, var(--bg-gradient-1), var(--bg-gradient-2), var(--bg-gradient-3), #0f172a);
+      background-size: 400% 400%;
+      animation: gradientBG 15s ease infinite;
       color: var(--text-color);
       min-height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 20px;
+      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: rgba(255, 255, 255, 0.6);
       text-decoration: none;
+      font-size: 0.85rem;
+      background: rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(4px);
+      padding: 8px 12px;
+      border-radius: 20px;
       z-index: 100;
+      border: 1px solid rgba(255,255,255,0.05);
+      transition: var(--transition);
     }
     .header-link:hover {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.1);
+      transform: translateY(-2px);
     }
+    /* کانتینر اصلی - افکت شیشه‌ای */
     .container {
       width: 100%;
+      max-width: 420px;
       background: var(--card-bg);
+      border: 1px solid var(--card-border);
       border-radius: var(--radius);
+      padding: 40px 30px;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      position: relative;
+      overflow: hidden;
+    }
+    /* دکوراسیون نورانی پشت کارت */
+    .container::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
+      pointer-events: none;
+      z-index: -1;
     }
     /* هدر فرم */
     .form-header {
       text-align: center;
+      margin-bottom: 30px;
     }
     .form-header h2 {
+      font-size: 1.8rem;
+      margin-bottom: 8px;
+      background: linear-gradient(to right, #fff, #cbd5e1);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-weight: 800;
     }
     .form-header p {
       color: var(--text-muted);
+      font-size: 0.95rem;
     }
     /* ورودی‌ها */
     .input-group {
+      margin-bottom: 20px;
+      position: relative;
     }
     .input-group label {
       display: block;
+      margin-bottom: 8px;
       color: var(--text-muted);
       font-size: 0.85rem;
+      font-weight: 500;
     }
     .input-wrapper {
       align-items: center;
     }
     .icon {
       width: 20px;
       height: 20px;
       fill: currentColor;
+      transition: var(--transition);
     }
     .icon-left {
       position: absolute;
+      right: 14px;
       color: var(--text-muted);
       pointer-events: none;
     }
     .input-wrapper input {
       width: 100%;
+      padding: 14px 45px 14px 14px;
       background: var(--input-bg);
+      border: 1px solid var(--input-border);
       border-radius: var(--radius);
       color: var(--text-color);
       font-family: var(--font-main);
+      font-size: 1rem;
+      transition: var(--transition);
     }
     .input-wrapper input:focus {
+      border-color: var(--input-focus);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
       outline: none;
+      background: rgba(15, 23, 42, 0.8);
+    }
+    .input-wrapper:focus-within .icon-left {
+      color: var(--input-focus);
+      transform: scale(1.1);
     }
     .toggle-password {
       position: absolute;
+      left: 14px;
       cursor: pointer;
       color: var(--text-muted);
       background: none;
       padding: 0;
       display: flex;
       align-items: center;
+      transition: var(--transition);
     }
     .toggle-password:hover {
+      color: #fff;
     }
     /* کپچا */
     .captcha-container {
       display: flex;
       align-items: center;
+      gap: 10px;
+      margin-bottom: 25px;
       flex-wrap: wrap;
     }
     canvas {
+      background: rgba(255, 255, 255, 0.9);
+      border-radius: 8px;
       cursor: pointer;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      transition: transform 0.2s;
+    }
+    canvas:active {
+      transform: scale(0.98);
     }
     .refresh-btn {
+      background: rgba(255, 255, 255, 0.1);
       border: none;
+      color: var(--text-color);
       cursor: pointer;
+      padding: 8px;
+      border-radius: 8px;
       display: flex;
       align-items: center;
+      justify-content: center;
+      transition: var(--transition);
+    }
+    .refresh-btn:hover {
+      background: rgba(255, 255, 255, 0.2);
+      transform: rotate(180deg);
     }
     .captcha-container input {
       flex-grow: 1;
+      padding: 12px;
+      border-radius: var(--radius);
+      border: 1px solid var(--input-border);
       background: var(--input-bg);
       color: white;
       text-align: center;
+      font-family: monospace;
+      font-size: 1.1rem;
+      letter-spacing: 2px;
       min-width: 80px;
     }
     /* دکمه ارسال */
     .submit-btn {
       width: 100%;
+      padding: 14px;
+      background: var(--primary-gradient);
       color: white;
       border: none;
       border-radius: var(--radius);
       font-family: var(--font-main);
       font-size: 1rem;
+      font-weight: 700;
       cursor: pointer;
+      transition: var(--transition);
       display: flex;
       justify-content: center;
       align-items: center;
+      gap: 10px;
+      box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
+      position: relative;
+      overflow: hidden;
     }
     .submit-btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
     }
+    .submit-btn:active {
+      transform: translateY(0);
     }
     /* تغییر حالت */
     .switch-mode {
       text-align: center;
+      margin-top: 25px;
       font-size: 0.9rem;
       color: var(--text-muted);
     }
     .switch-mode button {
       background: none;
       border: none;
+      color: #818cf8;
       cursor: pointer;
       font-family: var(--font-main);
+      font-weight: 700;
       padding: 0 5px;
+      position: relative;
+      transition: var(--transition);
+    }
+    .switch-mode button::after {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 2px;
+      bottom: -2px;
+      right: 0;
+      background-color: #818cf8;
+      transition: width 0.3s;
+    }
+    .switch-mode button:hover::after {
+      width: 100%;
+    }
+    /* مدیریت نمایش فرم‌ها (انیمیشن) */
+    .form-wrapper {
+      transition: opacity 0.4s ease, transform 0.4s ease;
     }
     .hidden {
+      display: none;
+      opacity: 0;
+      transform: translateY(10px);
     }
+    .fade-in {
+      animation: fadeIn 0.5s forwards;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    /* Toast بهبود یافته */
     .toast-container {
       position: fixed;
+      bottom: 30px;
+      left: 50%;
+      transform: translateX(-50%);
       z-index: 1000;
       display: flex;
       flex-direction: column;
+      align-items: center;
       gap: 10px;
+      width: 90%;
+      max-width: 350px;
     }
     .toast {
+      background: rgba(30, 41, 59, 0.95);
+      border: 1px solid rgba(255,255,255,0.1);
+      backdrop-filter: blur(10px);
+      padding: 14px 20px;
+      border-radius: 12px;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
       color: var(--text-color);
       font-size: 0.9rem;
       display: flex;
       align-items: center;
+      gap: 12px;
+      width: 100%;
+      animation: toastUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }
+    .toast.success { border-right: 4px solid #22c55e; }
+    .toast.error { border-right: 4px solid #ef4444; }
+    @keyframes toastUp {
+      from { transform: translateY(50px); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
     }
     @media (max-width: 360px) {
+      .container { padding: 30px 15px; }
+      .captcha-container input { width: 100%; flex-basis: 100%; }
     }
   </style>
 </head>
   <div class="container">
     <!-- فرم ورود -->
+    <div id="login-form" class="form-wrapper fade-in">
       <div class="form-header">
         <h2>خوش آمدید</h2>
+        <p>برای ادامه وارد حساب خود شوید</p>
       </div>
       <form onsubmit="handleLogin(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="login-username" placeholder="نام کاربری" autocomplete="off">
           </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="login-password" placeholder="رمز عبور">
             <button type="button" class="toggle-password" onclick="togglePassword('login-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="captcha-container">
+          <canvas id="captchaCanvas" width="100" height="42" title="کلیک برای تغییر"></canvas>
           <button type="button" class="refresh-btn" onclick="drawCaptcha()">
              <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="کد امنیتی" maxlength="5">
         </div>
         <button type="submit" class="submit-btn">
+          <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>
         </button>
         <div class="switch-mode">
+          حساب کاربری ندارید؟
+          <button type="button" onclick="switchForm('register')">ثبت نام کنید</button>
         </div>
       </form>
     </div>
     <!-- فرم ثبت نام -->
+    <div id="register-form" class="form-wrapper hidden">
       <div class="form-header">
+        <h2>ایجاد حساب</h2>
+        <p>به جمع ما بپیوندید</p>
       </div>
       <form onsubmit="handleRegister(event)">
         </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 class="captcha-container">
+          <canvas id="captchaCanvasReg" width="100" height="42" 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="کد امنیتی" maxlength="5">
         </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>
     function switchForm(type) {
       const login = document.getElementById('login-form');
       const reg = document.getElementById('register-form');
+      const activeForm = type === 'register' ? reg : login;
+      const inactiveForm = type === 'register' ? login : reg;
+      // انیمیشن خروجی
+      inactiveForm.style.opacity = '0';
+      inactiveForm.style.transform = 'translateY(-10px)';
+      setTimeout(() => {
+        inactiveForm.classList.add('hidden');
+        document.querySelectorAll('input').forEach(i => i.value = '');
+        // انیمیشن ورودی
+        inactiveForm.classList.remove('fade-in'); // ریست کردن کلاس انیمیشن
+        activeForm.classList.remove('hidden');
+        activeForm.style.opacity = '0';
+        activeForm.style.transform = 'translateY(10px)';
+        // Force reflow
+        void activeForm.offsetWidth;
+        activeForm.classList.add('fade-in');
+        activeForm.style.opacity = '1';
+        activeForm.style.transform = 'translateY(0)';
+        // مجددا کپچا رسم شود (اختیاری، برای امنیت بیشتر)
+        if(type === 'login') drawCaptcha();
+        else drawCaptcha(true);
+      }, 300); // صبر تا انیمیشن خروج تمام شود
     }
     function togglePassword(id, btn) {
       const input = document.getElementById(id);
+      const isPassword = input.type === 'password';
+      input.type = isPassword ? 'text' : 'password';
+      // تغییر آیکون با چرخش
+      btn.style.transform = isPassword ? 'rotate(0deg)' : 'rotate(360deg)';
+      btn.style.transition = 'transform 0.5s ease';
+      if (isPassword) {
+        // چشم باز
         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 {
+        // چشم بسته
         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>';
       }
     }
       const cvs = document.getElementById(isReg ? 'captchaCanvasReg' : 'captchaCanvas');
       const ctx = cvs.getContext('2d');
       ctx.clearRect(0, 0, cvs.width, cvs.height);
+      // پس زمینه روشن‌تر با گرادیانت ملایم
+      const grd = ctx.createLinearGradient(0, 0, cvs.width, cvs.height);
+      grd.addColorStop(0, "#f1f5f9");
+      grd.addColorStop(1, "#e2e8f0");
+      ctx.fillStyle = grd;
       ctx.fillRect(0, 0, cvs.width, cvs.height);
+      const chars = '23456789ABCDEFGHJKLMNPQRSTUVWXYZ';
       let txt = '';
+      const colors = ['#ef4444', '#3b82f6', '#10b981', '#f59e0b', '#8b5cf6'];
+      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 26px Courier New';
       ctx.textBaseline = 'middle';
       for(let i=0; i<5; i++) {
         ctx.save();
+        ctx.translate(15 + i*17, 22);
+        ctx.rotate((Math.random()-0.5)*0.5);
+        ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
         ctx.fillText(txt[i], 0, 0);
+        // سایه برای حروف
+        ctx.shadowColor = "rgba(0,0,0,0.1)";
+        ctx.shadowBlur = 2;
+        ctx.shadowOffsetX = 1;
+        ctx.shadowOffsetY = 1;
         ctx.restore();
       }
+      // خطوط نویز
+      for(let i=0; i<7; i++) {
+        ctx.strokeStyle = 'rgba(0,0,0,0.05)';
+        ctx.lineWidth = 2;
         ctx.beginPath();
+        ctx.moveTo(Math.random()*100, Math.random()*42);
+        ctx.lineTo(Math.random()*100, Math.random()*42);
         ctx.stroke();
       }
     }
       e.preventDefault();
       const u = document.getElementById('login-username').value;
       const p = document.getElementById('login-password').value;
+      const c = document.getElementById('login-captcha').value.toUpperCase();
+      if(!u || !p) return showToast('لطفاً همه فیلدها را پر کنید', 'error');
+      if(c !== currentCaptcha) return showToast('کد امنیتی اشتباه است', 'error');
       const btn = e.target.querySelector('.submit-btn');
+      const originalContent = btn.innerHTML;
       btn.disabled = true;
+      btn.innerHTML = '<span>در حال بررسی...</span>';
+      btn.style.opacity = '0.8';
       setTimeout(() => {
         btn.disabled = false;
+        btn.innerHTML = originalContent;
+        btn.style.opacity = '1';
+        showToast('ورود با موفقیت انجام شد!', 'success');
+      }, 1500);
     }
     function handleRegister(e) {
       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.toUpperCase();
+      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');
+      const originalContent = btn.innerHTML;
       btn.disabled = true;
+      btn.innerHTML = '<span>در حال ثبت...</span>';
+      btn.style.opacity = '0.8';
       setTimeout(() => {
         btn.disabled = false;
+        btn.innerHTML = originalContent;
+        btn.style.opacity = '1';
+        showToast('حساب کاربری ایجاد شد! خوش آمدید.', 'success');
         switchForm('login');
+      }, 1500);
     }
     function showToast(msg, type) {
       const con = document.getElementById('toastContainer');
       const t = document.createElement('div');
       t.className = `toast ${type}`;
+      // آیکون‌های جدیدتر
+      const