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
📺 Click the image above to watch the full demo on YouTube!
| 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.
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.
- ✅ HTML5
- ✅ CSS3 (custom styling, transitions, animations)
- ✅ JavaScript (for DOM interactivity, logic)
- ✅
.glb3D assets (compatible with Three.js) - ❌ No frameworks or UI libraries used
- ⚙️ Future ready: Easy to extend with APIs, Firebase, or backend frameworks
| 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.
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
 🌌 Home Page |
 🛸 Dashboard |
 📅 Calendar |
 👨👩👧👦 Team |
- 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
This project is licensed under the MIT License.
- 💫 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