Spaces:

samirerty
/

anycoder-e53a6ece

Running

App Files Files Community

samirerty commited on Feb 5

Commit

fe0be03

verified ·

1 Parent(s): 83f10b4

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +633 -19

index.html CHANGED Viewed

@@ -1,19 +1,633 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</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" />
+    <!-- ایمپورت کتابخانه آیکون‌ها -->
+    <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;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            outline: none;
+        }
+        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: 20px;
+            overflow-x: hidden;
+        }
+        /* انیمیشن پس زمینه */
+        @keyframes gradientBG {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+        /* لینک هدر الزامی */
+        .header-link {
+            position: absolute;
+            top: 20px;
+            left: 20px; /* چون RTL هستیم، سمت چپ می‌شود */
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.9rem;
+            transition: var(--transition);
+            z-index: 10;
+        }
+        .header-link:hover {
+            color: var(--primary-color);
+        }
+        /* کانتینر اصلی کارت */
+        .container {
+            width: 100%;
+            max-width: 420px;
+            background: var(--card-bg);
+            backdrop-filter: blur(12px); /* افکت شیشه‌ای */
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            padding: 40px;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+            position: relative;
+            overflow: hidden;
+        }
+        /* هدر فرم */
+        .form-header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .form-header h2 {
+            font-size: 1.8rem;
+            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: 0.95rem;
+        }
+        /* استایل‌های ورودی‌ها */
+        .input-group {
+            margin-bottom: 20px;
+            position: relative;
+        }
+        .input-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            transition: var(--transition);
+        }
+        .input-wrapper {
+            position: relative;
+            display: flex;
+            align-items: center;
+        }
+        .input-wrapper i {
+            position: absolute;
+            right: 12px;
+            color: var(--text-muted);
+            font-size: 1.2rem;
+            pointer-events: none;
+        }
+        .input-wrapper input {
+            width: 100%;
+            padding: 12px 45px 12px 15px; /* فضای خالی سمت راست برای آیکون */
+            background: var(--input-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            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: 12px;
+            cursor: pointer;
+            color: var(--text-muted);
+            transition: var(--transition);
+        }
+        .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.05);
+            padding: 10px;
+            border-radius: 12px;
+        }
+        canvas#captchaCanvas {
+            background-color: #fff;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .refresh-btn {
+            background: none;
+            border: none;
+            color: var(--primary-color);
+            cursor: pointer;
+            font-size: 1.2rem;
+            transition: var(--transition);
+        }
+        .refresh-btn:hover {
+            transform: rotate(180deg);
+        }
+        /* دکمه ارسال */
+        .submit-btn {
+            width: 100%;
+            padding: 14px;
+            background: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            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;
+        }
+        .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);
+        }
+        .switch-mode button {
+            background: none;
+            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 Notifications) */
+        .toast-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px; /* در حالت RTL سمت راست پایین */
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .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;
+            min-width: 250px;
+            animation: slideIn 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+        .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: 480px) {
+            .container {
+                padding: 30px 20px;
+            }
+            .form-header h2 {
+                font-size: 1.5rem;
+            }
+        }
+    </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"></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"></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="کد تصویر" style="width: 100px; padding: 8px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--input-bg); color: white;">
+                </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>
+        <!-- فرم ثبت نام -->
+        <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"></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"></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"></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="کد تصویر" style="width: 100px; padding: 8px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--input-bg); color: white;">
+                </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); // رسم کپچای فرم ثبت نام
+            // افزودن رویداد کلیک روی بوم نقاشی (Canvas) برای تغییر کپچا
+            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);
+        }
+        // سیستم نمایش پیام (Toast)
+        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>