Dashboard — HTML 后台模板

SHA-256: 3a3d1d3afe4d1844c014d59f1836443f0b8266b2fbe38ab94a06b1ae31e3370b

2026-10-03T23:14:37.557Z

# 🌐 Dashboard - Multi-Page Application

Welcome to **Dashboard**, a dynamic, multi-page application created with modern web development best practices. This project features a responsive layout, interactive elements, light/dark mode, and smooth animations, offering an immersive user experience.

## 🔥 What’s Special About the Dashboard?

### Key Features:
- ⚡️ **Dynamic Multi-Page Layout**: Seamless navigation across multiple pages, providing a smooth and intuitive user experience.
- 💻 **Fully Responsive Design**: Ensures excellent performance across all devices, from large desktops to small mobile screens.
- 🌗 **Light/Dark Mode Toggle**: Switch easily between light and dark themes, enhancing accessibility and personalization.
- 🎞️ **Smooth Animations**: Powered by **AOS (Animate On Scroll)** for dynamic, visually engaging transitions.
- 🛠️ **FontAwesome Icons**: Sleek, modern icons to enhance UI/UX.
- 🎨 **Custom Styling**: Using **SCSS** for reusable, scalable styles, and **Bootstrap** for responsive layout.

## 📸 Preview

<p align="center">
  <img src="https://img.shields.io/badge/Completion-100%25-brightgreen" alt="Completion Status">
  &nbsp;&nbsp;
  <img src="https://visitor-badge.laobi.icu/badge?page_id=GziXnine/Dashboard" alt="Visitors">
  &nbsp;&nbsp;
  <img src="https://img.shields.io/github/repo-size/GziXnine/Dashboard" alt="Repository Size">
</p>

<img src="https://github.com/AllamF5J/AllamF5J/blob/main/images/neon.gif">

<h3 align="center">Dark Mode</h3>

![Dashboard Dark Mode](https://raw.githubusercontent.com/GziXnine/Dashboard/refs/heads/main/%E2%80%AADashboard%20-%20Dark%20Mode.png)

<h3 align="center">Light Mode</h3>

![Dashboard Light Mode](https://raw.githubusercontent.com/GziXnine/Dashboard/refs/heads/main/%E2%80%AADashboard%20-%20Light%20Mode.png)

## 🛠️ Technologies Used
- **HTML5**: Semantic and structured content.
- **SCSS**: Modular and reusable styles.
- **Bootstrap**: Responsive grid and UI components.
- **JavaScript**: Interactivity and light/dark mode handling.
- **FontAwesome**: Vector icons for enhanced design.
- **AOS**: Smooth scroll-based animations.

## 🚀 How to Get Started

### Prerequisites:
- Basic understanding of HTML, CSS, JavaScript, and SCSS.
- Familiarity with Git for version control.

### Installation:
1. **Clone the repository**:
    ```bash
    git clone https://github.com/GziXnine/Dashboard.git
    ```
2. **Navigate to the project directory**:
    ```bash
    cd Dashboard
    ```
3. **Open `index.html` in your browser** to view the dashboard.

## 🎨 Customization
This dashboard is highly customizable. You can easily modify:
- **SCSS Variables**: Customize the primary and secondary colors, fonts, and more via the `_variables.scss` file.
- **Icons**: Powered by [Font Awesome](https://fontawesome.com/), you can include custom icons throughout the dashboard.

## 📈 Roadmap
- [x] Multi-page layout implementation.
- [x] Responsive design for all screen sizes.
- [x] JavaScript interactivity.
- [x] Light/Dark mode toggle.
- [x] Smooth animations using AOS.
- [x] FontAwesome icons integration.

## 🙌 Contributions
Contributions are welcome! Feel free to check the [issues page](https://github.com/GziXnine/Dashboard/issues) or submit a pull request.

## 📝 License
This project is open-source and available under the [MIT License](LICENSE).

## 🙏 Acknowledgments
- Inspired by tutorials from [Elzero Web School](https://elzero.org/).
- Icons provided by [Font Awesome](https://fontawesome.com/).
- Fonts from [Google Fonts](https://fonts.google.com/).
- BrandColor [Brand Color](https://brandcolors.net/).
  
## 📬 Contact
Feel free to reach out with any questions or feedback:

- **GitHub**: [GziXnine](https://github.com/GziXnine)
- **LinkedIn**: [Ahmed Allam](https://www.linkedin.com/in/1ahmed-allam)
- **Telegram**: [Telegram](http://t.me/GziXnine).
  
---
_A project by Ahmed Allam, showcasing advanced front-end development skills._