🔧 مشخصات کلی پروژه:
نوع: یک صفحه‌ی واحد (Single Page) برای ورود و ثبت‌نام

زبان: فارسی (RTL)

طراحی: مدرن، با افکت‌های بصری و گرادیان‌های رنگی

ریسپانسیو: واکنش‌گرا برای تمام دستگاه‌ها (موبایل، تبلت، دسکتاپ)

کدنویسی: فقط Front-end (هیچ Back-end یا دیتابیسی ندارد)
🏗️ ساختار و اجزای اصلی:
۱. قالب بصری (Visual Design)
پس‌زمینه: گرادیان تیره با افکت‌های نوری متحرک (light effects)

کارت مرکزی: شیشه‌ای (Glassmorphism) با blur و سایه‌های زیبا

رنگ‌بندی: ترکیب قرمز، نارنجی، بنفش و آبی (گرادیان‌های جذاب)

انیمیشن‌ها: ترنزیشن‌های نرم، افکت hover، پالس‌های نور

۲. بخش‌های عملکردی (Functional Parts)
فرم ورود (Login Form): شامل فیلدهای ایمیل و رمز عبور

فرم ثبت‌نام (Signup Form): شامل فیلدهای نام کامل، ایمیل و رمز عبور

دکمه‌های شبکه‌های اجتماعی: برای ورود با فیسبوک، گوگل، توییتر (فعلاً دمو هستند)

سیستم Overlay: کارتی که با کلیک روی "ثبت‌نام" یا "ورود" به زیبایی می‌چرخد و فرم‌ها جایگزین می‌شوند

نشانگر پیشرفت (Progress Indicator): نقطه‌های کوچک برای نمایش وضعیت فعلی

۳. ویژگی‌های تعاملی (Interactive Features)
اعتبارسنجی (Validation): بررسی پر بودن فیلدها و مطابقت رمز عبور

اعلان‌ها (Notifications): پیام‌های موقتی برای موفقیت یا خطا

انیمیشن‌های تعاملی: hover effects روی دکمه‌ها، inputs و آیکون‌ها

قابلیت فراموشی رمز عبور (با prompt ساده)
۴. کدهای اصلی
HTML: ساختار صفحات و فرم‌ها

CSS: تمام استایل‌ها درون تگ <style> (از جمله ریسپانسیو)

JavaScript: درون تگ <script> برای مدیریت رویدادها، اعتبارسنجی و انیمیشن‌ها

⚙️ چگونه کار می‌کند؟
صفحه اولیه: فرم ورود نمایش داده می‌شود.

سوییچ بین فرم‌ها: با کلیک روی دکمه‌های "ثبت‌نام" یا "ورود" در overlay، کارت می‌چرخد و فرم دیگر نمایش داده می‌شود.

ارسال فرم: بعد از پر کردن فیلدها و کلیک روی دکمه، یک شبیه‌سازی ارسال انجام می‌شود (در واقع داده‌ای به سرور ارسال نمی‌شود).

اعلان‌ها: پیام موفقیت یا خطا به کاربر نمایش داده می‌شود.

شبکه‌های اجتماعی: دکمه‌ها فقط نمایشی هستند و در حال حاضر عملکرد واقعی ندارند.

📱 سازگاری
مرورگرها: سازگار با مرورگرهای مدرن

دستگاه‌ها: از موبایل (صفحه‌های کوچک) تا دسکتاپ

رزولوشن: تنظیم خودکار بر اساس عرض صفحه

✨ نکات جالب طراحی
استفاده از فونت وزیر برای پشتیبانی کامل از فارسی

افکت Glassmorphism (پس‌زمینه شیشه‌ای)

گرادیان‌های متحرک در پس‌زمینه

انیمیشن‌های micro-interactions روی عناصر تعاملی

scrollbar استایل‌دار

🚀 قابلیت‌های توسعه
این پروژه به صورت Front-end خالص است و برای استفاده واقعی نیاز به این موارد دارد:

Back-end (مثلاً با PHP، Node.js و ...)

اتصال به دیتابیس برای ذخیره کاربران

احراز هویت واقعی (مثل JWT, Sessions)

اتصال واقعی به شبکه‌های اجتماعی (OAuth)

ارسال ایمیل برای بازیابی رمز عبور