داشبورد مدیریتی آیندهنگر، واکنشگرا و با انیمیشنهای زیبا که تنها با HTML، CSS و JavaScript طراحی شده است.
🌠 شرکتکننده در چالش فرانتاند Dev.to x Axero
📺 برای تماشای کامل ویدیو روی تصویر کلیک کنید!
| دستهبندی | توضیحات |
|---|---|
| ✨ صفحه ورود | پیام خوشآمدگویی داینامیک با 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
- ❤️ ساختهشده با عشق و خلاقیت
ساختهشده با 💫 توسط ویدا خوشپی
و طراحیشده با ⭐ توسط یلدا خوشپی