🌌 Nebula Works – A Futuristic Admin Dashboard Built with Pure HTML/CSS/JS

This content originally appeared on DEV Community and was authored by Vida Khoshpey

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

Nebula Works is a futuristic, animated admin dashboard built completely with pure HTML, CSS, and JavaScript, designed as a submission for the Axero Frontend Challenge.

The project features:

• Dynamic greeting section with mock weather API
• A responsive dashboard with multiple pages (Projects, Calendar, Messages, Team, etc.)
• Signup & Admin Login system
• Light/Dark theming and animations
• Embedded .glb 3D planetary models (Earth, Mars, Jupiter)
• Custom admin panel for settings, security, and network

Although many elements look real (like notifications or calendar), some are only visual for the purpose of this challenge — but they are built in a way that could easily become functional in the future.

Demo

Live GitHub Page: Click here

Source Code: GitHub Repository

YouTube Demo:

Gallery Preview

Home Page	Dashboard
Calendar	Team

Journey

This project was a creative and technical journey that tested and showcased my skills. Here’s what made it special:

• I challenged myself to avoid using frameworks or libraries, making everything from scratch.
• Used .glb files to integrate 3D space objects and give it a galactic theme.
• Designed for responsiveness, ensuring the layout looks great on mobile, tablet, and desktop.
• Learned how to mimic real systems visually even when backend is not involved.
• Took care of UI/UX details, including theming, transitions, and animations.
• Created a modular structure for future expansion and real-world use.

I’m proud of how realistic and smooth everything looks while keeping performance and compatibility in mind.

Team Submissions

This was a team project with contributions split as follows:

Each team member submitted from their own GitHub account, as per rules.

Folder Structure

nebula-works/
│
├── index.html                → Home page with greeting + mock weather API
├── signup.html               → User signup form
├── style.css                 → All custom styling
├── script.js                 → Interactivity
├── LICENCE                   → MIT License
├── README.md                 → You're reading it!
│
├── /admin                    → Admin-only pages (login, settings, system)
│   ├── index.html
│   ├── user.html
│   ├── system.html
│   ├── security.html
│   ├── network.html
│   ├── event.html
│   ├── settings-admin.html
│
├── /dashboard                → Dashboard core
│   ├── index.html
│   ├── project.html
│   ├── team.html
│   ├── calendar.html
│   ├── messages.html
│   ├── resources.html
│   ├── settings.html
│
└── /assets
    ├── logo.png
    ├── Nebula.gif
    └── /3d/
        ├── earth.glb
        ├── mars.glb
        └── jupiter.glb

License

Licensed under the MIT License.

Acknowledgments

• Huge thanks to Axero and Dev.to for the opportunity.
• 3D models inspired by NASA Open Assets.
• UI/UX entirely handcrafted with

API

• Due to regional restrictions and limited access to external APIs in Iran, this project uses mock data and simulated APIs for features like the weather service and notifications.
• This approach ensures that the UI/UX remains realistic and interactive while focusing fully on frontend development without dependence on unavailable backend services.
• Please note that some features such as notifications and the weather toggle key or news are currently purely for simulation purposes and do not connect to real backend services.

Made with by Vida Khoshpey

and styled with by Yalda Khoshpey

This content originally appeared on DEV Community and was authored by Vida Khoshpey