🌌 Nebula Works – 一款完全使用 HTML/CSS/JS 构建的未来主义管理后台
这是由 Axero 和 Holistic Webdev 联合举办的前端挑战赛：办公空间版的参赛作品。
🌟 我打造的
Nebula Works是一个未来主义的动画管理仪表盘，完全使用纯 HTML、CSS 和 JavaScript构建，是为 Axero 前端挑战赛而设计的参赛作品。
该项目包含以下特点：
- 🌌 带有模拟天气 API 的动态问候部分
- 👩🚀 一个具有多个页面的响应式仪表盘（项目、日历、消息、团队等）
- 🔐 注册和管理员登录系统
- 🎨 浅色/深色主题和动画
- 🌍 内置
.glb3D行星模型（地球、火星、木星） - ⚙️ 自定义管理面板，用于设置、安全和网络
虽然很多元素看起来很真实（比如通知或日历），但有些元素只是为了应对这个挑战而做的视觉呈现——不过它们的设计方式使得它们将来很容易实现功能。
🚀 演示
⚙️ GitHub 在线页面： 点击此处
📁源代码： GitHub 仓库
🎥 YouTube演示：
🖼 图库预览
 🌌 首页 |
 🛸 仪表盘 |
 📅 日历 |
 👨👩👧👦 团队 |
🧠 旅程
这个项目是一次充满创意和技术挑战的旅程，它考验并展现了我的技能。以下是它的特别之处：
- 我给自己设定了一个挑战：不使用任何框架或库，所有东西都从零开始编写。
- 使用
.glb文件将 3D 太空物体整合在一起，赋予其银河系主题。 - 采用响应式设计，确保在手机、平板电脑和台式机上都能呈现完美布局。
- 即使不涉及后端，也学会了如何在视觉上模拟真实系统。
- 负责用户界面/用户体验细节，包括主题、过渡效果和动画。
- 创建了一个模块化结构，便于未来扩展和实际应用。
我为画面如此逼真流畅，同时又兼顾性能和兼容性而感到自豪。
👩💻 团队提交
这是一个团队项目，成员贡献分配如下：
| 姓名 | 角色 | GitHub |
|---|---|---|
| 维达·霍什佩 | 完整项目开发人员（任务 1） | @VIDAKHOSHPEY22 |
| 亚尔达·霍什佩 | CSS 设计与样式（任务 2） | @YALDAKHOSHPEY |
按照规则，每个团队成员都使用自己的 GitHub 帐户提交文件。
📂 文件夹结构
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
📜 许可证
本作品采用MIT 许可证。
✨ 致谢
- 非常感谢Axero和Dev.to提供这次机会。
- 受NASA开放资源启发的3D模型。
- UI/UX设计完全由手工精心打造❤️
🤖 API
- 由于伊朗的地区限制和对外部 API 的访问有限，本项目使用模拟数据和模拟 API 来实现天气服务和通知等功能。
- 这种方法确保了用户界面/用户体验保持真实性和交互性，同时完全专注于前端开发，而无需依赖不可用的后端服务。
- 请注意，某些功能（例如通知、天气切换键或新闻）目前纯粹用于模拟目的，并不连接到真正的后端服务。
由Vida Khoshpey倾情打造，并由Yalda Khoshpey
精心搭配。
