Nebula-Works

---

🌌 Nebula Works - Galactic Admin Dashboard

A futuristic, responsive, and beautifully animated admin dashboard created with pure HTML, CSS, and JavaScript.

🌠 Submission for the Frontend Challenge by Dev.to x Axero

---

🚀 Live Demo📌👇 (If the link for Demo doesn’t open, try using a VPN) ⚠️

🌐 Live GitHub Page

---

🎬 Video Demo

📺 Click the image above to watch the full demo on YouTube!

---

🌠 Animated Demo Preview(Please wait a bit to Load👇)

---

📦 Project Features

Category	Description
✨ Landing Page	Dynamic greeting with (mock) weather API and user-based welcome message
🔐 Authentication	signup.html + custom admin login
📊 Dashboard	Multiple linked pages: messages, projects, calendar, team, settings, etc.
👩‍🚀 Admin Section	Independent area for admin configuration and network/security settings
🌍 3D Models	Earth, Mars, and Jupiter models in .glb for space-themed visual effects
🎨 Theming	Light/Dark theme toggle for user experience
📱 Responsive	Optimized for mobile, tablet, and desktop
🔔 Notifications	Currently visual only (not connected to backend logic yet)
📂 Modular Design	Well-structured files and pages with future extensibility in mind

⚠️ Note: Some features like notification systems, user persistence, and weather data are currently designed as visual simulations or mockups, and not yet wired to real APIs or backends. However, the logic and structure have been built in a way to allow seamless integration later.

---

🎯 Project Goal

Nebula Works was created as an entry for a frontend development challenge with a focus on originality, responsiveness, and aesthetic experience. The dashboard reimagines admin panels through a space-themed UI/UX, where even typical panels like calendar or projects feel futuristic.

While remaining in pure vanilla technologies (no libraries/frameworks), I strived to make:

• Each page functional and meaningful,
• Each effect smooth and realistic,
• Each user action feel responsive and immersive.

---

🧠 Technologies Used

• ✅ HTML5
• ✅ CSS3 (custom styling, transitions, animations)
• ✅ JavaScript (for DOM interactivity, logic)
• ✅ .glb 3D assets (compatible with Three.js)
• ❌ No frameworks or UI libraries used
• ⚙️ Future ready: Easy to extend with APIs, Firebase, or backend frameworks

---

🧑‍💻 Team & Contributions

Name	Role	GitHub
Vida Khoshpey	Full Project Developer (Task 1)	@VIDAKHOSHPEY22
Yalda Khoshpey	CSS Design & Styling (Task 2)	@YALDAKHOSHPEY

Task Breakdown:

• Vida: Complete project logic, structure, design system, dashboard functionalities
• Yalda: Styling, layout enhancement, theming animation and design polishing

Each submitted under separate GitHub accounts for transparency.

---

📂 Folder Structure

nebula-works/
│
├── index.html                → Home page with greeting + mock weather API
├── signup.html               → User signup form
├── style.css                 → All custom styling (including animations and theming)
├── script.js                 → Core interactivity (weather, toggle, greeting logic)
├── LICENCE                   → MIT License
├── README.md                 → You're reading it!
│
├── /admin                    → Admin-only section
│   ├── index.html            → Admin dashboard main
│   ├── user.html             → User management
│   ├── system.html           → System overview
│   ├── security.html         → Security settings
│   ├── network.html          → Network configurations
│   ├── event.html            → Admin events log
│   ├── settings-admin.html   → Admin-specific settings
│
├── /dashboard                → User dashboard pages
│   ├── index.html            → Dashboard overview
│   ├── project.html          → Projects area
│   ├── team.html             → Team management
│   ├── calendar.html         → Calendar & scheduling
│   ├── messages.html         → Messaging area
│   ├── resources.html        → Learning/resources panel
│   ├── settings.html         → User settings
│
└── /assets
    ├── logo.png              → Project logo
    ├── home-preview.png      → Image preview for home
    ├── dashboard-preview.png → Image preview for dashboard
    ├── calendar-preview.png  → Preview for calendar
    ├── team-preview.png      → Preview for team
    └── /3d                   → 3D space models
        ├── earth.glb
        ├── mars.glb
        └── jupiter.glb

---

🖼 Preview Gallery

---

💡 What’s Next?

• Replace mock APIs (weather & messages) with real-time API integration
• Add database and user session (auth, data persistence)
• Convert to full-stack (Node.js/Firebase backend)
• Refactor for component-based frameworks (React or Vue)
• Optimize 3D model performance with lazy loading

---

📜 License

This project is licensed under the MIT License.

---

✨ Acknowledgments

• 💫 Inspired by space and technology, driven by design
• 🎨 3D models based on NASA Open Assets
• 🛠 Built for the Dev.to x Axero Frontend Challenge
• ❤️ Handcrafted with passion and creativity

---

Made with 💫 by Vida Khoshpey
and styled with ⭐ by Yalda Khoshpey