Clothora Admin Dashboard

A professional, responsive admin dashboard template built with HTML5, Vanilla JavaScript, and Tailwind CSS. Designed for e-commerce applications, it features a clean interface, dark mode support, and interactive components.

🚀 Features

• Responsive Design: Fully responsive layout that adapts to mobile, tablet, and desktop screens.
• Dark Mode: Built-in dark mode support for a comfortable viewing experience in low-light environments.
• Interactive Components:
  • Dynamic Sidebar: Collapsible navigation sidebar.
  • Charts: Integrated Chart.js for visualizing sales and customer data.
  • Notifications: Interactive notification dropdown.
  • Modals: Confirmation modals for actions like logout (customizable).
• Page Templates:
  • Dashboard: Overview with key statistics and charts.
  • Products: Product management list with filtering.
  • Add Product: Form for adding new inventory items.
  • Orders: Order management and tracking.
  • Customers: User base management.
  • Analytics: Detailed reports and graphs.
  • Settings: Application configuration.
  • Authentication: Login, Forgot Password pages.

🛠️ Tech Stack

• HTML5: Semantic markup for structure.
• CSS3: Custom styles + Tailwind CSS (via CDN for rapid development).
• JavaScript: Vanilla ES6+ for logic and interactions.
• Chart.js: For beautiful data visualization.
• Phosphor Icons: For modern, consistent iconography.
• Google Fonts: Typography using Inter and Dancing Script.

Screenshots

📂 Project Structure

/
├── assets/
│   ├── css/          # Custom styles
│   ├── js/           # Application logic
│   └── images/       # Static assets
├── index.html        # Main dashboard
├── products.html     # Product list
├── add-product.html  # Product creation
├── ...               # Other HTML pages
└── README.md

📦 Getting Started

1. Clone the repository:

   git clone https://github.com/BenkacemIbrahim/clothora-dashboard.git
   

2. Open the project: Simply open the index.html file in your browser. No build step is required as it uses CDN links for Tailwind and libraries.

   Tip: For the best experience, use a local development server like Live Server in VS Code.

🎨 Customization

Theming

The project uses Tailwind CSS. You can customize the tailwind.config in assets/js/tailwind-config.js to change the color palette or extend the theme.

Scripts

• main.js: Contains shared logic like sidebar toggling, dark mode, and logout handlers.
• Page-specific scripts (e.g., index.js, products.js) handle logic unique to each page.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.