Nebula-Works

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 43 Open GitHub ↗

Responsive admin panel built for the Dev x Axero frontend contest 🛸. 📌 If the link doesn't open , try with VPN⚠️📌

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <a href="README.md">
    <img src="https://img.shields.io/badge/🇬🇧 English-0d6efd?style=for-the-badge&logo=googletranslate&logoColor=white" alt="English Version">
  </a>
  <a href="README.fa.md">
    <img src="https://img.shields.io/badge/🇮🇷 Persian-198754?style=for-the-badge&logo=googletranslate&logoColor=white" alt="Persian Version">
  </a>
</p>

---

<h1 align="center">🌌 Nebula Works - Galactic Admin Dashboard</h1>

<p align="center">
  A futuristic, responsive, and beautifully animated admin dashboard created with pure HTML, CSS, and JavaScript.
</p>

<p align="center">
  🌠 Submission for the <a href="https://dev.to/page/fontend-challenge-axero-contest-rules">Frontend Challenge by Dev.to x Axero</a>
</p>

---

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

> 🌐 [Live GitHub Page](https://vidakhoshpey22.github.io/Nebula-Works)

---
## 🎬 Video Demo

[![Watch on YouTube](https://img.youtube.com/vi/vqaofcqFgxI/0.jpg)](https://youtu.be/vqaofcqFgxI?si=m4uVayaTMVpTCxKr)

> 📺 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](https://github.com/VIDAKHOSHPEY22) |
| **Yalda Khoshpey**| CSS Design & Styling (Task 2)   | [@YALDAKHOSHPEY](https://github.com/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

```text
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

<table>
  <tr>
    <td align="center">
      <img src="https://github.com/VIDAKHOSHPEY22/Nebula-Works/blob/main/assets/home-preview.png" width="360px"><br>
      <b>🌌 Home Page</b>
    </td>
    <td align="center">
      <img src="https://github.com/VIDAKHOSHPEY22/Nebula-Works/blob/main/assets/dashboard-preview.png" width="360px"><br>
      <b>🛸 Dashboard</b>
    </td>
  </tr>
  <tr>
    <td align="center">
      <img src="https://github.com/VIDAKHOSHPEY22/Nebula-Works/blob/main/assets/calendar-preview.png" width="360px"><br>
      <b>📅 Calendar</b>
    </td>
    <td align="center">
      <img src="https://github.com/VIDAKHOSHPEY22/Nebula-Works/blob/main/assets/team-preview.png" width="360px"><br>
      <b>👨‍👩‍👧‍👦 Team</b>
    </td>
  </tr>
</table>

</div>

---

## 💡 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](./LICENCE).

---

## ✨ 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**

Nebula-Works

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README