Skip to content

Latest commit

 

History

History
204 lines (156 loc) · 9.75 KB

File metadata and controls

204 lines (156 loc) · 9.75 KB

نسخه انگلیسی نسخه فارسی

🌌 نبولا ورکز - پنل مدیریت کهکشانی

داشبورد مدیریتی آینده‌نگر، واکنش‌گرا و با انیمیشن‌های زیبا که تنها با HTML، CSS و JavaScript طراحی شده است.

نمایش پروژه Nebula Works

🌠 شرکت‌کننده در چالش فرانت‌اند Dev.to x Axero


🚀 نسخه نمایشی زنده📌👇 (اگر لینک باز نشد از VPN استفاده کنید) ⚠️

🌐 نمایش آنلاین در GitHub


🎬 نسخه نمایشی ویدیویی

تماشا در یوتیوب

📺 برای تماشای کامل ویدیو روی تصویر کلیک کنید!


🌠 پیش‌نمایش انیمیشنی پروژه (لطفاً کمی صبر کنید👇)

انیمیشن Nebula Works


📦 ویژگی‌های پروژه

دسته‌بندی توضیحات
✨ صفحه ورود پیام خوش‌آمدگویی داینامیک با API آب‌وهوای جعلی
🔐 احراز هویت صفحه ثبت‌نام (signup.html) و ورود مخصوص مدیر
📊 داشبورد صفحات مختلف شامل پیام‌ها، پروژه‌ها، تقویم، تیم، تنظیمات و...
👩‍🚀 بخش ادمین ناحیه مستقل برای پیکربندی و تنظیمات شبکه/امنیتی
🌍 مدل‌های سه‌بعدی مدل‌های زمین، مریخ و مشتری با فرمت .glb برای زیبایی فضایی
🎨 تغییر تم امکان تغییر بین حالت تاریک و روشن
📱 واکنش‌گرا طراحی بهینه برای موبایل، تبلت و دسکتاپ
🔔 اعلان‌ها اعلان‌های بصری (هنوز به بک‌اند متصل نیستند)
📂 طراحی ماژولار ساختار فایل‌ها قابل گسترش برای آینده

⚠️ توجه: برخی ویژگی‌ها مانند اعلان‌ها، ذخیره کاربران و آب‌وهوا صرفاً شبیه‌سازی شده‌اند و به API واقعی متصل نیستند، اما ساختار آن‌ها برای اتصال آسان آینده طراحی شده‌اند.


🎯 هدف پروژه

نبولا ورکز با تمرکز بر طراحی منحصربه‌فرد، واکنش‌گرایی، و تجربه بصری زیبا به عنوان یک پروژه رقابتی توسعه داده شد. این داشبورد تجربه کاربری پنل‌های مدیریتی را با الهام از فضا و تکنولوژی آینده‌نگر بازآفرینی می‌کند.

با وجود استفاده از تکنولوژی‌های خام (vanilla)، اهداف ما:

  • عملکرد و معنا در هر صفحه،
  • افکت‌هایی روان و واقع‌گرایانه،
  • تجربه کاربری جذاب و واکنش‌گرا

بودند.


🧠 تکنولوژی‌های استفاده‌شده

  • ✅ HTML5
  • ✅ CSS3 (استایل‌دهی، انیمیشن، ترنزیشن)
  • ✅ JavaScript (منطق و تعاملات DOM)
  • ✅ مدل‌های .glb (قابل استفاده با Three.js)
  • ❌ بدون استفاده از کتابخانه یا فریم‌ورک
  • ⚙️ آماده گسترش با API، فایربیس یا بک‌اند دلخواه

📂 ساختار پوشه ها

nebula-works/
│
├── index.html                → صفحه اصلی با پیام خوش‌آمدگویی و آب‌وهوای جعلی
├── signup.html               → فرم ثبت‌نام کاربران
├── style.css                 → استایل‌دهی کلی (شامل انیمیشن و تم)
├── script.js                 → منطق تعاملی (آب‌وهوا، تم، پیام‌ها)
├── LICENCE                   → لایسنس MIT
├── README.md                 → فایل معرفی پروژه
│
├── /admin                    → بخش مدیریت (ادمین)
│   ├── index.html            → داشبورد اصلی ادمین
│   ├── user.html             → مدیریت کاربران
│   ├── system.html           → نمای کلی سیستم
│   ├── security.html         → تنظیمات امنیتی
│   ├── network.html          → تنظیمات شبکه
│   ├── event.html            → رویدادهای مدیریتی
│   ├── settings-admin.html   → تنظیمات خاص مدیر
│
├── /dashboard                → صفحات داشبورد کاربران
│   ├── index.html            → نمای کلی داشبورد
│   ├── project.html          → بخش پروژه‌ها
│   ├── team.html             → مدیریت تیم
│   ├── calendar.html         → تقویم و زمان‌بندی
│   ├── messages.html         → پیام‌ها
│   ├── resources.html        → منابع یادگیری
│   ├── settings.html         → تنظیمات کاربر
│
└── /assets
    ├── logo.png              → لوگوی پروژه
    ├── home-preview.png      → پیش‌نمایش خانه
    ├── dashboard-preview.png → پیش‌نمایش داشبورد
    ├── calendar-preview.png  → پیش‌نمایش تقویم
    ├── team-preview.png      → پیش‌نمایش تیم
    └── /3d                   → مدل‌های سه‌بعدی فضایی
        ├── earth.glb
        ├── mars.glb
        └── jupiter.glb

🧑‍💻 تیم و نقش‌ها

نام نقش گیت‌هاب
ویدا خوش‌پی توسعه کامل پروژه (تسک ۱) @VIDAKHOSHPEY22
یلدا خوش‌پی طراحی و استایل‌دهی (تسک ۲) @YALDAKHOSHPEY

تقسیم کار:

  • ویدا: طراحی کلی، منطق و ساختار، عملکرد داشبورد
  • یلدا: طراحی ظاهری، انیمیشن، زیباسازی و بهبود رابط کاربری

هر کدام در ریپوی جداگانه برای شفافیت بیشتر.


🖼 گالری تصاویر پروژه


🌌 صفحه اصلی

🛸 داشبورد

📅 تقویم

👨‍👩‍👧‍👦 تیم

💡 گام‌های بعدی

  • اتصال به API واقعی برای آب‌وهوا و پیام‌ها
  • افزودن پایگاه داده و احراز هویت کاربران
  • توسعه به سمت فول‌استک (با Node.js یا Firebase)
  • بازنویسی به صورت کامپوننتی (React یا Vue)
  • بهینه‌سازی مدل‌های سه‌بعدی با Lazy Loading

📜 مجوز استفاده

این پروژه تحت مجوز MIT منتشر شده است.


✨ قدردانی‌ها

  • 💫 الهام‌گرفته از فضا و تکنولوژی
  • 🎨 مدل‌های سه‌بعدی از منابع آزاد ناسا
  • 🛠 طراحی‌شده برای چالش فرانت‌اند Dev.to x Axero
  • ❤️ ساخته‌شده با عشق و خلاقیت

ساخته‌شده با 💫 توسط ویدا خوش‌پی
و طراحی‌شده با ⭐ توسط یلدا خوش‌پی