Spaces:

samirerty
/

anycoder-24ae4316

Running

App Files Files Community

samirerty commited on Feb 5

Commit

bebbf67

verified ·

1 Parent(s): c89a70a

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +570 -804

index.html CHANGED Viewed

@@ -1,856 +1,622 @@
 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-  <title>ورود و ثبت نام | تم دارک حرفه‌ای</title>
-  <!-- اتصال فونت وزیرمتن -->
-  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet"
-    type="text/css" />
-  <style>
-    /* تنظیمات کلی و متغیرهای رنگی */
-    :root {
-      --bg-body: #0f172a;
-      --bg-card: #1e293b;
-      --bg-input: #334155;
-      --border-color: #475569;
-      --primary-color: #f8fafc;
-      --accent-color: #3b82f6;
-      --accent-hover: #2563eb;
-      --text-main: #f1f5f9;
-      --text-muted: #94a3b8;
-      --error-color: #ef4444;
-      --success-color: #10b981;
-      --radius: 16px;
-      --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      --glass-bg: rgba(30, 41, 59, 0.7);
-      --glass-border: rgba(255, 255, 255, 0.1);
-    }
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      font-family: 'Vazirmatn', sans-serif;
-      outline: none;
-      -webkit-tap-highlight-color: transparent;
-    }
-    body {
-      background-color: var(--bg-body);
-      color: var(--text-main);
-      min-height: 100vh;
-      min-height: 100dvh;
-      overflow-x: hidden;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 16px;
-    }
-    /* لینک هدر */
-    .header-link {
-      position: fixed;
-      top: 24px;
-      left: 24px;
-      color: var(--text-muted);
-      text-decoration: none;
-      font-size: 0.85rem;
-      transition: var(--transition);
-      z-index: 1000;
-      padding: 8px 16px;
-      border-radius: 50px;
-      background: rgba(15, 23, 42, 0.6);
-      backdrop-filter: blur(12px);
-      border: 1px solid var(--glass-border);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-    .header-link:hover {
-      color: var(--text-main);
-      background: rgba(255, 255, 255, 0.1);
-      transform: translateY(-2px);
-      border-color: var(--accent-color);
-    }
-    /* --- Layout principale (Desktop Split) --- */
-    .app-wrapper {
-      width: 100%;
-      height: 100%;
-      min-height: 100dvh;
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      overflow: hidden;
-    }
-    /* سمت چپ: بخش بصری (فقط دسکتاپ) */
-    .visual-side {
-      display: none;
-      flex: 1;
-      position: relative;
-      background: radial-gradient(circle at 10% 20%, #1e1b4b 0%, #0f172a 90%);
-      overflow: hidden;
-      align-items: center;
-      justify-content: center;
-      padding: 60px;
-    }
-    /* اشکال متحرک پس زمینه */
-    .orb {
-      position: absolute;
-      border-radius: 50%;
-      filter: blur(80px);
-      opacity: 0.6;
-      animation: float 10s infinite ease-in-out;
-    }
-    .orb-1 {
-      width: 400px;
-      height: 400px;
-      background: #4f46e5;
-      top: -100px;
-      left: -100px;
-      animation-delay: 0s;
-    }
-    .orb-2 {
-      width: 300px;
-      height: 300px;
-      background: #0ea5e9;
-      bottom: -50px;
-      right: -50px;
-      animation-delay: -5s;
-    }
-    @keyframes float {
-      0%, 100% { transform: translate(0, 0); }
-      50% { transform: translate(30px, -30px); }
-    }
-    .visual-content {
-      position: relative;
-      z-index: 10;
-      text-align: center;
-      max-width: 500px;
-    }
-    .visual-content h1 {
-      font-size: 3rem;
-      font-weight: 800;
-      margin-bottom: 20px;
-      background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      line-height: 1.2;
-    }
-    .visual-content p {
-      font-size: 1.1rem;
-      color: var(--text-muted);
-      line-height: 1.8;
-    }
-    /* سمت راست: بخش فرم */
-    .form-side {
-      flex: 1;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background-color: var(--bg-body);
-      padding: 20px;
-      position: relative;
-      z-index: 20;
-    }
-    /* کانتینر کارت فرم */
-    .form-card {
-      background-color: var(--bg-card);
-      border: 1px solid var(--glass-border);
-      border-radius: 24px;
-      position: relative;
-      overflow: hidden;
-      width: 100%;
-      max-width: 460px;
-      /* حذف ارتفاع ثابت برای اجازه اسکرول در محتواهای طولانی */
-      min-height: 600px;
-      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
-      display: flex;
-      flex-direction: column;
-      transition: var(--transition);
-    }
-    /* جعبه فرم‌ها */
-    .forms-wrapper {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      flex-grow: 1;
-      padding: 48px;
-      display: flex;
-      flex-direction: column;
-    }
-    .form-content {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center; /* عمودی وسط چین در دسکتاپ */
-      opacity: 0;
-      visibility: hidden;
-      position: absolute;
-      top: 0;
-      left: 0;
-      padding: 0 24px;
-      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-      transform: translateX(20px);
-      height: 100%; /* پر کردن ارتفاع والد */
-    }
-    .form-content.active {
-      opacity: 1;
-      visibility: visible;
-      transform: translateX(0);
-      z-index: 10;
-    }
-    h2 {
-      font-size: 2rem;
-      margin-bottom: 12px;
-      text-align: center;
-      color: var(--text-main);
-      font-weight: 800;
-    }
-    p.subtitle {
-      text-align: center;
-      color: var(--text-muted);
-      margin-bottom: 40px;
-      font-size: 1rem;
-      line-height: 1.6;
-    }
-    /* استایل ورودی‌ها */
-    .input-group {
-      margin-bottom: 20px;
-    }
-    .input-group label {
-      display: block;
-      margin-bottom: 8px;
-      color: var(--text-muted);
-      font-size: 0.9rem;
-      font-weight: 500;
-    }
-    input {
-      width: 100%;
-      padding: 16px;
-      background-color: var(--bg-input);
-      border: 1px solid var(--border-color);
-      border-radius: 12px;
-      color: var(--text-main);
-      font-size: 1rem;
-      transition: var(--transition);
-    }
-    input::placeholder {
-      color: #64748b;
-    }
-    input:focus {
-      border-color: var(--accent-color);
-      background-color: #1e293b;
-      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
-    }
-    /* بخش کپچا */
-    .captcha-container {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      background-color: var(--bg-input);
-      padding: 6px;
-      border-radius: 12px;
-      border: 1px solid var(--border-color);
-    }
-    .captcha-wrapper {
-      cursor: pointer;
-      border-radius: 8px;
-      overflow: hidden;
-      flex-shrink: 0;
-      background: #fff;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      transition: var(--transition);
-    }
-    .captcha-wrapper:hover {
-      transform: scale(1.02);
-    }
-    canvas {
-      display: block;
-    }
-    .refresh-btn {
-      background: transparent;
-      border: 1px solid var(--border-color);
-      color: var(--text-muted);
-      cursor: pointer;
-      width: 46px;
-      height: 46px;
-      border-radius: 10px;
-      font-size: 1.2rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: var(--transition);
-      flex-shrink: 0;
-    }
-    .refresh-btn:hover {
-      color: var(--text-main);
-      border-color: var(--text-main);
-      transform: rotate(90deg);
-      background: rgba(255, 255, 255, 0.05);
-    }
-    input#captchaInput,
-    input#regCaptchaInput {
-      flex-grow: 1;
-      background: transparent;
-      border: none;
-      text-align: center;
-      letter-spacing: 4px;
-      font-weight: bold;
-    }
-    input#captchaInput:focus,
-    input#regCaptchaInput:focus {
-      background: transparent;
-      border: none;
-      box-shadow: none;
-    }
-    /* دکمه‌ها */
-    .btn {
-      width: 100%;
-      padding: 18px; /* افزایش ارتفاع دکمه برای لمس راحت‌تر */
-      background: linear-gradient(135deg, var(--accent-color), var(--accent-hover));
-      color: #fff;
-      border: none;
-      border-radius: 12px;
-      font-size: 1.05rem;
-      font-weight: 700;
-      cursor: pointer;
-      transition: var(--transition);
-      margin-top: 24px; /* فاصله بیشتر از بالا */
-      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
-      position: relative;
-      overflow: hidden;
-    }
-    .btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
-    }
-    .btn:active {
-      transform: scale(0.98);
-    }
-    /* لینک تغییر حالت */
-    .toggle-text {
-      text-align: center;
-      margin-top: 30px;
-      color: var(--text-muted);
-      font-size: 0.95rem;
-      padding-bottom: 10px;
-    }
-    .toggle-text a {
-      color: var(--accent-color);
-      text-decoration: none;
-      font-weight: 700;
-      transition: var(--transition);
-      cursor: pointer;
-      position: relative;
-    }
-    .toggle-text a::after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 2px;
-      bottom: -2px;
-      right: 0;
-      background-color: var(--accent-color);
-      transition: width 0.3s;
-    }
-    .toggle-text a:hover::after {
-      width: 100%;
-    }
-    /* سیستم اعلان (Toast) */
-    .toast-container {
-      position: fixed;
-      top: 24px;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 90%;
-      max-width: 400px;
-      z-index: 2000;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-      pointer-events: none;
-    }
-    .toast {
-      background-color: rgba(30, 41, 59, 0.95);
-      color: var(--text-main);
-      padding: 16px 24px;
-      border-radius: 12px;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      border-right: 4px solid transparent;
-      backdrop-filter: blur(10px);
-      animation: slideDown 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
-      opacity: 0;
-      transform: translateY(-20px);
-      pointer-events: auto;
-    }
-    .toast.success { border-right-color: var(--success-color); }
-    .toast.error { border-right-color: var(--error-color); }
-    @keyframes slideDown {
-      to { opacity: 1; transform: translateY(0); }
-    }
-    @keyframes fadeOutUp {
-      to { opacity: 0; transform: translateY(-20px); }
-    }
-    /* --- ریسپانسیو (موبایل) --- */
-    @media (max-width: 1023px) {
-      body {
-        align-items: flex-start;
-        background-color: var(--bg-body);
-      }
-      .app-wrapper {
-        flex-direction: column;
-      }
-      .visual-side {
-        display: none;
-      }
-      .form-side {
-        padding: 0;
-        width: 100%;
-        height: 100dvh;
-      }
-      .form-card {
-        max-width: 100%;
-        height: 100%;
-        border-radius: 0;
-        border: none;
-        box-shadow: none;
-        background: transparent;
-      }
-      .forms-wrapper {
-        padding: 0;
-        justify-content: flex-start;
-        overflow-y: auto; /* اجازه اسکرول عمودی */
-        padding-bottom: 40px;
-      }
-      /* تغییر استراتژی نمایش فرم در موبایل برای جلوگیری از مشکل دکمه‌ها */
-      .form-content {
-        position: relative; /* تغییر از absolute به relative */
-        opacity: 1;
-        visibility: visible;
-        transform: none;
-        display: none; /* مخفی کردن با display */
-        padding: 40px 24px 80px 24px; /* پدینگ پایین زیاد برای دکمه */
-        height: auto;
-        min-height: 100vh;
-        justify-content: flex-start;
-      }
-      .form-content.active {
-        display: flex; /* نمایش با flex */
-        z-index: 10;
-      }
-      h2 {
-        font-size: 1.8rem;
-        margin-top: 20px;
-      }
-      .header-link {
-        top: 15px;
-        left: 15px;
-        font-size: 0.75rem;
-        padding: 6px 12px;
-        background: rgba(0, 0, 0, 0.3);
-        border-color: rgba(255, 255, 255, 0.1);
-        color: rgba(255, 255, 255, 0.6);
-      }
-    }
-    /* --- دسکتاپ (Desktop Only) --- */
-    @media (min-width: 1024px) {
-      .app-wrapper {
-        flex-direction: row-reverse;
-        min-height: 100vh;
-        background: var(--bg-body);
-      }
-      .visual-side {
-        display: flex;
-      }
-      .form-card {
-        background: rgba(30, 41, 59, 0.6);
-        backdrop-filter: blur(20px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
-        margin: 40px;
-      }
-    }
-  </style>
-</head>
-<body>
-  <!-- لینک هدر درخواست شده -->
-  <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link">
-    <span>✨</span> Built with anycoder
-  </a>
-  <!-- کانتینر اصلی -->
-  <div class="app-wrapper" id="appWrapper">
-    <!-- سمت راست: فرم‌ها (در دسکتاپ) -->
-    <div class="form-side">
-      <div class="form-card">
-        <div class="forms-wrapper">
-          <!-- فرم ورود -->
-          <div class="form-content active" id="loginForm">
-            <h2>خوش آمدید</h2>
-            <p class="subtitle">برای دسترسی به پنل کاربری وارد شوید</p>
-            <form onsubmit="handleLogin(event)">
-              <div class="input-group">
                 <label>شماره موبایل</label>
                 <div class="input-wrapper">
-                  <input type="tel" id="loginPhone" placeholder="مثال: 09123456789" maxlength="11" inputmode="numeric">
                 </div>
-              </div>
-              <div class="input-group">
                 <label>رمز عبور</label>
                 <div class="input-wrapper">
-                  <input type="password" id="loginPass" placeholder="رمز عبور خود را وارد کنید">
                 </div>
-              </div>
-              <div class="input-group">
                 <label>کد امنیتی</label>
                 <div class="captcha-container">
-                  <div class="captcha-wrapper" onclick="generateCaptcha('loginCanvas')" title="برای تعویض کد کلیک کنید">
-                    <canvas id="loginCanvas" width="100" height="45"></canvas>
-                  </div>
-                  <button type="button" class="refresh-btn" onclick="generateCaptcha('loginCanvas')">↻</button>
-                  <input type="text" id="loginCaptchaInput" placeholder="کد" maxlength="5" inputmode="numeric">
                 </div>
-              </div>
-              <button type="submit" class="btn">ورود به حساب</button>
-            </form>
-            <div class="toggle-text">
-              حساب کاربری ندارید؟ <a onclick="toggleForm('register')">ثبت نام کنید</a>
             </div>
-          </div>
-          <!-- فرم ثبت نام -->
-          <div class="form-content" id="registerForm">
-            <h2>ثبت نام</h2>
-            <p class="subtitle">همین حالا عضو شوید و دنیای جدیدی را تجربه کنید</p>
-            <form onsubmit="handleRegister(event)">
-              <div class="input-group">
                 <label>شماره موبایل</label>
                 <div class="input-wrapper">
-                  <input type="tel" id="regPhone" placeholder="مثال: 09123456789" maxlength="11" inputmode="numeric">
                 </div>
-              </div>
-              <div class="input-group">
                 <label>رمز عبور</label>
                 <div class="input-wrapper">
-                  <input type="password" id="regPass" placeholder="حداقل ۶ کاراکتر">
                 </div>
-              </div>
-              <div class="input-group">
                 <label>تکرار رمز عبور</label>
                 <div class="input-wrapper">
-                  <input type="password" id="regPassConfirm" placeholder="تکرار رمز عبور">
                 </div>
-              </div>
-              <div class="input-group">
                 <label>کد امنیتی</label>
                 <div class="captcha-container">
-                  <div class="captcha-wrapper" onclick="generateCaptcha('regCanvas')" title="برای تعویض کد کلیک کنید">
-                    <canvas id="regCanvas" width="100" height="45"></canvas>
-                  </div>
-                  <button type="button" class="refresh-btn" onclick="generateCaptcha('regCanvas')">↻</button>
-                  <input type="text" id="regCaptchaInput" placeholder="کد" maxlength="5" inputmode="numeric">
                 </div>
-              </div>
-              <button type="submit" class="btn">ساخت حساب کاربری</button>
-            </form>
-            <div class="toggle-text">
-              قبلاً ثبت نام کرده‌اید؟ <a onclick="toggleForm('login')">وارد شوید</a>
             </div>
-          </div>
         </div>
-      </div>
-    </div>
-    <!-- سمت چپ: بخش بصری (فقط دسکتاپ) -->
-    <div class="visual-side">
-      <div class="orb orb-1"></div>
-      <div class="orb orb-2"></div>
-      <div class="visual-content">
-        <h1>آینده‌ای روشن<br>در انتظار شماست</h1>
-        <p>ما با ��ستفاده از جدیدترین تکنولوژی‌ها، تجربه‌ای بی‌نظیر و امن را برای کاربران خود رقم می‌زنیم. همین حالا شروع
-          کنید.</p>
-      </div>
-    </div>
-  </div>
-  <!-- کانتینر برای نمایش پیام‌ها -->
-  <div class="toast-container" id="toastContainer"></div>
-  <script>
-    // متغیرهای سراسری برای ذخیره کد کپچا
-    let captchaCodes = {
-        login: '',
-        register: ''
-    };
-    // اجرای اولیه هنگام لود شدن صفحه
-    window.onload = function() {
-        generateCaptcha('loginCanvas');
-        generateCaptcha('regCanvas');
-        initParallax();
-    };
-    // تابع تولید کد کپچا و رسم روی Canvas
-    function generateCaptcha(canvasId) {
-        const canvas = document.getElementById(canvasId);
-        const ctx = canvas.getContext('2d');
-        const width = canvas.width;
-        const height = canvas.height;
-        // پاک کردن بوم
-        ctx.clearRect(0, 0, width, height);
-        // پس‌زمینه با گرادینت ملایم
-        const gradient = ctx.createLinearGradient(0, 0, width, height);
-        gradient.addColorStop(0, '#f1f5f9');
-        gradient.addColorStop(1, '#e2e8f0');
-        ctx.fillStyle = gradient;
-        ctx.fillRect(0, 0, width, height);
-        // خطوط مزاحم
-        for (let i = 0; i < 7; i++) {
-            ctx.strokeStyle = `rgba(59, 130, 246, ${Math.random() * 0.15})`;
-            ctx.lineWidth = 1.5;
-            ctx.beginPath();
-            ctx.moveTo(Math.random() * width, Math.random() * height);
-            ctx.lineTo(Math.random() * width, Math.random() * height);
-            ctx.stroke();
-        }
-        // تولید کد رندوم ۵ رقمی
-        let code = '';
-        const chars = '23456789ABCDEFGHJKLMNPQRSTUVWXYZ'; // حذف کاراکترهای مبهم
-        for (let i = 0; i < 5; i++) {
-            code += chars[Math.floor(Math.random() * chars.length)];
-        }
-        // ذخیره کد
-        if(canvasId === 'loginCanvas') captchaCodes.login = code;
-        else captchaCodes.register = code;
-        // رسم متن
-        ctx.font = 'bold 26px Courier New';
-        ctx.textBaseline = 'middle';
-        for (let i = 0; i < code.length; i++) {
-            ctx.save();
-            const x = 12 + i * 17;
-            const y = height / 2 + (Math.random() * 6 - 3);
-            const angle = (Math.random() * 0.5) - 0.25;
-            ctx.translate(x, y);
-            ctx.rotate(angle);
-            ctx.fillStyle = '#1e293b'; // رنگ متن تیره
-            ctx.fillText(code[i], 0, 0);
-            ctx.restore();
-        }
-        // افزودن نویز (نقطه ریز)
-        for(let i=0; i<30; i++) {
-            ctx.fillStyle = `rgba(0,0,0,0.1)`;
-            ctx.beginPath();
-            ctx.arc(Math.random()*width, Math.random()*height, 1, 0, 2*Math.PI);
-            ctx.fill();
-        }
-    }
-    // تابع سوئیچ بین فرم ورود و ثبت نام
-    function toggleForm(target) {
-        const loginForm = document.getElementById('loginForm');
-        const regForm = document.getElementById('registerForm');
-        // اسکرول به بالای صفحه در موبایل برای تجربه بهتر
-        if(window.innerWidth < 1024) {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-        if (target === 'register') {
-            loginForm.classList.remove('active');
-            setTimeout(() => {
-                regForm.classList.add('active');
-                generateCaptcha('regCanvas');
-            }, 50);
-        } else {
-            regForm.classList.remove('active');
             setTimeout(() => {
-                loginForm.classList.add('active');
-                generateCaptcha('loginCanvas');
-            }, 50);
-        }
-    }
-    // هندل کردن فرم ورود
-    function handleLogin(e) {
-        e.preventDefault();
-        const phone = document.getElementById('loginPhone').value;
-        const pass = document.getElementById('loginPass').value;
-        const userCaptcha = document.getElementById('loginCaptchaInput').value;
-        // اعتبارسنجی
-        if (!validatePhone(phone)) return showToast('شماره موبایل نامعتبر است', 'error');
-        if (pass.length < 4) return showToast('رمز عبور کوتاه است', 'error');
-        if (userCaptcha.toUpperCase() !== captchaCodes.login) {
-            generateCaptcha('loginCanvas');
-            document.getElementById('loginCaptchaInput').value = '';
-            return showToast('کد امنیتی اشتباه است', 'error');
-        }
-        // شبیه‌سازی ورود موفق
-        showToast('در حال ورود...', 'success');
-        setTimeout(() => {
-            showToast('خوش آمدید! ورود موفقیت آمیز بود.', 'success');
-        }, 1500);
-    }
-    // هندل کردن فرم ثبت نام
-    function handleRegister(e) {
-        e.preventDefault();
-        const phone = document.getElementById('regPhone').value;
-        const pass = document.getElementById('regPass').value;
-        const confirmPass = document.getElementById('regPassConfirm').value;
-        const userCaptcha = document.getElementById('regCaptchaInput').value;
-        // اعتبارسنجی
-        if (!validatePhone(phone)) return showToast('شماره موبایل نامعتبر است', 'error');
-        if (pass.length < 6) return showToast('رمز عبور باید حداقل ۶ کاراکتر باشد', 'error');
-        if (pass !== confirmPass) return showToast('تکرار رمز عبور مطابقت ندارد', 'error');
-        if (userCaptcha.toUpperCase() !== captchaCodes.register) {
-            generateCaptcha('regCanvas');
-            document.getElementById('regCaptchaInput').value = '';
-            return showToast('کد امنیتی اشتباه است', 'error');
-        }
-        // شبیه‌سازی ثبت نام موفق
-        showToast('در حال ثبت نام...', 'success');
-        setTimeout(() => {
-            showToast('حساب کاربری با موفقیت ساخته شد!', 'success');
-            toggleForm('login');
-        }, 1500);
-    }
-    // تابع کمکی اعتبارسنجی شماره موبایل ایران
-    function validatePhone(phone) {
-        const regex = /^09\d{9}$/;
-        return regex.test(phone);
-    }
-    // تابع نمایش پیام (Toast)
-    function showToast(message, type = 'success') {
-        const container = document.getElementById('toastContainer');
-        const toast = document.createElement('div');
-        toast.className = `toast ${type}`;
-        const icon = type === 'success' ? '✔' : '✖';
-        toast.innerHTML = `<span>${icon}</span> <span>${message}</span>`;
-        container.appendChild(toast);
-        // حذف خودکار بعد از ۳ ثانیه
-        setTimeout(() => {
-            toast.style.animation = 'fadeOutUp 0.4s forwards';
-            toast.addEventListener('animationend', () => {
-                toast.remove();
-            });
-        }, 3000);
-    }
-    // افکت پارالاکس برای دسکتاپ
-    function initParallax() {
-        const wrapper = document.getElementById('appWrapper');
-        const orbs = document.querySelectorAll('.orb');
-        if (window.innerWidth < 1024) return;
-        wrapper.addEventListener('mousemove', (e) => {
-            const x = (window.innerWidth - e.pageX) / 50;
-            const y = (window.innerHeight - e.pageY) / 50;
-            orbs.forEach((orb, index) => {
-                const speed = (index + 1) * 2;
-                orb.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
             });
         });
-    }
-  </script>
-</body>
 </html>

 <!DOCTYPE html>
 <html lang="fa" dir="rtl">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ورود و ثبت نام | سیستم امن</title>
+    <!-- ایمپورت فونت وزیرمتن برای ظاهر زیبای فارسی -->
+    <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
+    <!-- ایمپورت آیکون‌ها -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --bg-color: #0f172a;
+            --card-bg: rgba(30, 41, 59, 0.7);
+            --primary: #6366f1;
+            --primary-hover: #4f46e5;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --input-bg: rgba(15, 23, 42, 0.6);
+            --border-color: rgba(148, 163, 184, 0.2);
+            --error: #ef4444;
+            --success: #10b981;
+            --glass-border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Vazirmatn', sans-serif;
+        }
+        body {
+            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%);
+            color: var(--text-main);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            overflow-x: hidden;
+        }
+        /* هدر */
+        header {
+            position: absolute;
+            top: 20px;
+            width: 100%;
+            text-align: center;
+            z-index: 10;
+        }
+        .brand-link {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: color 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: rgba(255,255,255,0.05);
+            border-radius: 20px;
+            backdrop-filter: blur(5px);
+        }
+        .brand-link:hover {
+            color: var(--primary);
+            background: rgba(255,255,255,0.1);
+        }
+        /* کارت اصلی */
+        .auth-container {
+            width: 90%;
+            max-width: 420px;
+            background: var(--card-bg);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: var(--glass-border);
+            border-radius: 24px;
+            padding: 40px 30px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            position: relative;
+            overflow: hidden;
+            transition: all 0.4s ease;
+        }
+        /* تب‌های تغییر وضعیت */
+        .tabs {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 30px;
+            background: var(--input-bg);
+            padding: 5px;
+            border-radius: 12px;
+            position: relative;
+        }
+        .tab-btn {
+            flex: 1;
+            padding: 12px;
+            border: none;
+            background: transparent;
+            color: var(--text-muted);
+            cursor: pointer;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            z-index: 2;
+        }
+        .tab-btn.active {
+            color: #fff;
+            background: var(--primary);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
+        }
+        /* فرم‌ها */
+        .form-wrapper {
+            position: relative;
+        }
+        .auth-form {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+        .hidden {
+            display: none;
+            opacity: 0;
+            transform: translateX(20px);
+        }
+        .visible {
+            display: flex;
+            opacity: 1;
+            transform: translateX(0);
+            animation: fadeIn 0.4s ease-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        /* گروه ورودی */
+        .input-group {
+            position: relative;
+        }
+        .input-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+        }
+        .input-wrapper {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        .input-wrapper i {
+            position: absolute;
+            right: 15px;
+            color: var(--text-muted);
+            transition: color 0.3s;
+        }
+        .form-input {
+            width: 100%;
+            padding: 14px 45px 14px 15px;
+            background: var(--input-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            color: #fff;
+            font-size: 1rem;
+            outline: none;
+            transition: all 0.3s;
+        }
+        .form-input:focus {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
+        }
+        .form-input:focus + i {
+            color: var(--primary);
+        }
+        /* کپچا */
+        .captcha-container {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+        .captcha-canvas {
+            background: #fff;
+            border-radius: 8px;
+            cursor: pointer;
+            flex-shrink: 0;
+        }
+        .captcha-input {
+            flex-grow: 1;
+        }
+        /* دکمه اصلی */
+        .submit-btn {
+            background: linear-gradient(135deg, var(--primary), #818cf8);
+            color: white;
+            border: none;
+            padding: 14px;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+            margin-top: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 10px;
+        }
+        .submit-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px -10px rgba(99, 102, 241, 0.6);
+        }
+        .submit-btn:active {
+            transform: translateY(0);
+        }
+        .submit-btn.loading {
+            opacity: 0.8;
+            pointer-events: none;
+        }
+        .submit-btn.loading i {
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            100% { transform: rotate(360deg); }
+        }
+        /* لینک فراموشی رمز */
+        .forgot-pass {
+            text-align: left;
+            margin-top: -10px;
+        }
+        .forgot-pass a {
+            color: var(--text-muted);
+            font-size: 0.85rem;
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+        .forgot-pass a:hover {
+            color: var(--primary);
+        }
+        /* سیستم نوتیفیکیشن (Toast) */
+        .toast-container {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 100;
+        }
+        .toast {
+            background: rgba(30, 41, 59, 0.95);
+            color: #fff;
+            padding: 12px 24px;
+            border-radius: 50px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 0.9rem;
+            animation: slideUp 0.3s ease-out;
+            border: 1px solid var(--border-color);
+            min-width: 280px;
+            justify-content: center;
+        }
+        .toast.success { border-color: var(--success); color: var(--success); }
+        .toast.error { border-color: var(--error); color: var(--error); }
+        @keyframes slideUp {
+            from { transform: translateY(20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+        /* رسپانسیو */
+        @media (max-width: 480px) {
+            .auth-container {
+                width: 95%;
+                padding: 30px 20px;
+            }
+            .submit-btn {
+                padding: 12px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- هدر و لینک اجباری -->
+    <header>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link">
+            <i class="fas fa-code"></i>
+            Built with anycoder
+        </a>
+    </header>
+    <main class="auth-container">
+        <!-- تب‌های بالا -->
+        <div class="tabs">
+            <button class="tab-btn active" onclick="switchTab('login')">ورود</button>
+            <button class="tab-btn" onclick="switchTab('register')">ثبت‌نام</button>
+        </div>
+        <!-- فرم ورود -->
+        <div id="login-form" class="auth-form visible">
+            <div class="input-group">
                 <label>شماره موبایل</label>
                 <div class="input-wrapper">
+                    <input type="tel" id="login-phone" class="form-input" placeholder="مثلا: 09123456789" maxlength="11">
+                    <i class="fas fa-mobile-alt"></i>
                 </div>
+            </div>
+            <div class="input-group">
                 <label>رمز عبور</label>
                 <div class="input-wrapper">
+                    <input type="password" id="login-pass" class="form-input" placeholder="رمز عبور خود را وارد کنید">
+                    <i class="fas fa-lock"></i>
                 </div>
+            </div>
+            <div class="input-group">
                 <label>کد امنیتی</label>
                 <div class="captcha-container">
+                    <canvas id="login-canvas" width="100" height="44" class="captcha-canvas" title="برای تغییر کلیک کنید"></canvas>
+                    <input type="text" id="login-captcha-input" class="form-input captcha-input" placeholder="کد تصویر" maxlength="4">
                 </div>
+            </div>
+            <div class="forgot-pass">
+                <a href="#">رمز عبور را فراموش کرده‌اید؟</a>
             </div>
+            <button class="submit-btn" onclick="handleLogin()">
+                <span>ورود به حساب</span>
+                <i class="fas fa-arrow-left"></i>
+            </button>
+        </div>
+        <!-- فرم ثبت نام -->
+        <div id="register-form" class="auth-form hidden">
+            <div class="input-group">
                 <label>شماره موبایل</label>
                 <div class="input-wrapper">
+                    <input type="tel" id="reg-phone" class="form-input" placeholder="مثلا: 09123456789" maxlength="11">
+                    <i class="fas fa-mobile-alt"></i>
                 </div>
+            </div>
+            <div class="input-group">
                 <label>رمز عبور</label>
                 <div class="input-wrapper">
+                    <input type="password" id="reg-pass" class="form-input" placeholder="حداقل ۸ کاراکتر">
+                    <i class="fas fa-lock"></i>
                 </div>
+            </div>
+            <div class="input-group">
                 <label>تکرار رمز عبور</label>
                 <div class="input-wrapper">
+                    <input type="password" id="reg-pass-conf" class="form-input" placeholder="تکرار رمز عبور">
+                    <i class="fas fa-check-double"></i>
                 </div>
+            </div>
+            <div class="input-group">
                 <label>کد امنیتی</label>
                 <div class="captcha-container">
+                    <canvas id="reg-canvas" width="100" height="44" class="captcha-captcha" title="برای تغییر کلیک کنید"></canvas>
+                    <input type="text" id="reg-captcha-input" class="form-input captcha-input" placeholder="کد تصویر" maxlength="4">
                 </div>
             </div>
+            <button class="submit-btn" onclick="handleRegister()">
+                <span>ثبت‌نام کنید</span>
+                <i class="fas fa-user-plus"></i>
+            </button>
         </div>
+    </main>
+    <!-- کانتینر پیام‌ها -->
+    <div class="toast-container" id="toast-container"></div>
+    <script>
+        // متغیرهای سراسری برای کد کپچا
+        let loginCaptchaCode = '';
+        let regCaptchaCode = '';
+        // --- توابع کمکی ---
+        // تابع نمایش پیام (Toast)
+        function showToast(message, type = 'success') {
+            const container = document.getElementById('toast-container');
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            const icon = type === 'success' ? '<i class="fas fa-check-circle"></i>' : '<i class="fas fa-exclamation-circle"></i>';
+            toast.innerHTML = `${icon} <span>${message}</span>`;
+            container.appendChild(toast);
+            // حذف پیام بعد از ۳ ثانیه
             setTimeout(() => {
+                toast.style.opacity = '0';
+                toast.style.transform = 'translateY(20px)';
+                setTimeout(() => toast.remove(), 300);
+            }, 3000);
+        }
+        // تابع اعتبارسنجی شماره موبایل ایران
+        function isValidPhone(phone) {
+            const regex = /^09[0-9]{9}$/;
+            return regex.test(phone);
+        }
+        // تولید کپچا تصادفی
+        function generateCaptcha(canvasId, codeVariable) {
+            const canvas = document.getElementById(canvasId);
+            const ctx = canvas.getContext('2d');
+            const chars = '0123456789';
+            let code = '';
+            // پاک کردن بوم
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // پس‌زمینه نویز
+            ctx.fillStyle = '#f0f0f0';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // رسم خطوط تصادفی
+            for (let i = 0; i < 7; i++) {
+                ctx.strokeStyle = `rgba(${Math.random()*255},${Math.random()*255},${Math.random()*255},0.5)`;
+                ctx.beginPath();
+                ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
+                ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
+                ctx.stroke();
+            }
+            // رسم متن
+            ctx.font = 'bold 24px Vazirmatn, Arial';
+            ctx.textBaseline = 'middle';
+            for (let i = 0; i < 4; i++) {
+                const char = chars[Math.floor(Math.random() * chars.length)];
+                code += char;
+                ctx.save();
+                // جابجایی و چرخش تصادفی
+                const x = 20 * i + 15;
+                const y = canvas.height / 2;
+                ctx.translate(x, y);
+                ctx.rotate((Math.random() - 0.5) * 0.4);
+                ctx.fillStyle = `rgb(${Math.random()*100},${Math.random()*100},${Math.random()*100})`;
+                ctx.fillText(char, 0, 0);
+                ctx.restore();
+            }
+            // ذخیره کد در متغیر مناسب
+            if (canvasId === 'login-canvas') loginCaptchaCode = code;
+            if (canvasId === 'reg-canvas') regCaptchaCode = code;
+        }
+        // --- مدیریت تب‌ها ---
+        function switchTab(tab) {
+            const loginForm = document.getElementById('login-form');
+            const registerForm = document.getElementById('register-form');
+            const btns = document.querySelectorAll('.tab-btn');
+            if (tab === 'login') {
+                loginForm.classList.remove('hidden');
+                loginForm.classList.add('visible');
+                registerForm.classList.remove('visible');
+                registerForm.classList.add('hidden');
+                btns[0].classList.add('active');
+                btns[1].classList.remove('active');
+                generateCaptcha('login-canvas'); // رفرش کپچا هنگام باز شدن
+            } else {
+                registerForm.classList.remove('hidden');
+                registerForm.classList.add('visible');
+                loginForm.classList.remove('visible');
+                loginForm.classList.add('hidden');
+                btns[0].classList.remove('active');
+                btns[1].classList.add('active');
+                generateCaptcha('reg-canvas'); // رفرش کپچا هنگام باز شدن
+            }
+        }
+        // --- مدیریت لاگین ---
+        function handleLogin() {
+            const phone = document.getElementById('login-phone').value;
+            const pass = document.getElementById('login-pass').value;
+            const captcha = document.getElementById('login-captcha-input').value;
+            const btn = document.querySelector('#login-form .submit-btn');
+            // اعتبارسنجی
+            if (!isValidPhone(phone)) {
+                showToast('لطفاً شماره موبایل معتبر وارد کنید', 'error');
+                return;
+            }
+            if (pass.length < 4) {
+                showToast('رمز عبور اشتباه است', 'error');
+                return;
+            }
+            if (captcha.toLowerCase() !== loginCaptchaCode) {
+                showToast('کد امنیتی اشتباه است', 'error');
+                generateCaptcha('login-canvas');
+                document.getElementById('login-captcha-input').value = '';
+                return;
+            }
+            // شبیه‌سازی ارسال به سرور
+            btn.classList.add('loading');
+            btn.innerHTML = '<i class="fas fa-spinner"></i> در حال پردازش...';
+            setTimeout(() => {
+                btn.classList.remove('loading');
+                btn.innerHTML = '<span>ورود به حساب</span><i class="fas fa-arrow-left"></i>';
+                showToast('خوش آمدید! ورود موفقیت آمیز بود.', 'success');
+                // اینجا می‌توانید کاربر را ریدایرکت کنید
+            }, 2000);
+        }
+        // --- مدیریت ثبت نام ---
+        function handleRegister() {
+            const phone = document.getElementById('reg-phone').value;
+            const pass = document.getElementById('reg-pass').value;
+            const passConf = document.getElementById('reg-pass-conf').value;
+            const captcha = document.getElementById('reg-captcha-input').value;
+            const btn = document.querySelector('#register-form .submit-btn');
+            // اعتبارسنجی
+            if (!isValidPhone(phone)) {
+                showToast('شماره موبایل نامعتبر است', 'error');
+                return;
+            }
+            if (pass.length < 8) {
+                showToast('رمز عبور باید حداقل ۸ کاراکتر باشد', 'error');
+                return;
+            }
+            if (pass !== passConf) {
+                showToast('تکرار رمز عبور مطابقت ندارد', 'error');
+                return;
+            }
+            if (captcha.toLowerCase() !== regCaptchaCode) {
+                showToast('کد امنیتی اشتباه است', 'error');
+                generateCaptcha('reg-canvas');
+                document.getElementById('reg-captcha-input').value = '';
+                return;
+            }
+            // ش��یه‌سازی ارسال به سرور
+            btn.classList.add('loading');
+            btn.innerHTML = '<i class="fas fa-spinner"></i> در حال ثبت...';
+            setTimeout(() => {
+                btn.classList.remove('loading');
+                btn.innerHTML = '<span>ثبت‌نام کنید</span><i class="fas fa-user-plus"></i>';
+                showToast('حساب کاربری با موفقیت ساخته شد.', 'success');
+                // سوئیچ به تب لاگین بعد از ثبت نام موفق
+                setTimeout(() => switchTab('login'), 1500);
+            }, 2000);
+        }
+        // --- رویدادها ---
+        document.addEventListener('DOMContentLoaded', () => {
+            // تولید کپچای اولیه
+            generateCaptcha('login-canvas');
+            // قابلیت کلیک روی کپچا برای تغییر
+            document.getElementById('login-canvas').addEventListener('click', () => generateCaptcha('login-canvas'));
+            document.getElementById('reg-canvas').addEventListener('click', () => generateCaptcha('reg-canvas'));
+            // جلوگیری از ورود اعداد انگلیسی/فارسی نامنظم در شماره موبایل (اختیاری)
+            const phoneInputs = document.querySelectorAll('input[type="tel"]');
+            phoneInputs.forEach(input => {
+                input.addEventListener('input', function(e) {
+                    this.value = this.value.replace(/[^0-9]/g, '');
+                });
             });
         });
+    </script>
+</body>
 </html>