Data Dashboard

A modern, responsive data dashboard with sidebar navigation built with HTML, CSS, and JavaScript.

🌟 Features

• Responsive Design: Works perfectly on desktop, tablet, and mobile devices
• Interactive Sidebar: Organized navigation with multiple data sections
• Modern UI: Clean design with smooth animations and hover effects
• Real-time Stats: Dashboard with key performance indicators
• Data Sections:
  • Analytics (Dashboard, Reports, Metrics)
  • Data Sources (Sales, Users, Traffic, Financial)
  • Tools (Export, Import, Settings)
  • External Links (Google Analytics, Stripe, Mixpanel)

🚀 Quick Start

Option 1: Direct Browser (No Installation)

1. Download or clone the repository
2. Open index.html in your web browser
3. Start exploring the dashboard!

Option 2: Local Development Server

Using Python (built-in on macOS/Linux):

python3 -m http.server 3000

Then open http://localhost:3000

Option 3: Node.js Development Environment

npm install
npm run dev

📁 Project Structure

├── index.html          # Main HTML file
├── styles.css          # CSS styles and responsive design
├── script.js           # JavaScript functionality
├── package.json        # npm configuration (optional)
├── .gitignore          # Git ignore patterns
└── README.md           # Project documentation

🎨 Customization

Changing Colors

Edit the CSS variables in styles.css:

• Sidebar background: .sidebar { background: #000000; }
• Accent colors: Change the #ffd700 values for highlights
• Button colors: Modify .btn-primary and .btn-secondary classes

Adding Data Links

1. Open index.html
2. Find the sidebar menu sections
3. Add new <li> items with appropriate icons and links
4. Update script.js if adding new content sections

Modifying Dashboard Stats

Edit the stats in the #dashboard-content section of index.html

🔧 Development Scripts

• npm run dev - Start development server with live reload
• npm run build - Build minified version for production
• npm run serve - Serve built files
• npm run lint - Lint JavaScript code
• npm run format - Format code with Prettier

🌐 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers

📱 Mobile Features

• Collapsible sidebar
• Touch-friendly navigation
• Responsive grid layouts
• Optimized for small screens

⌨️ Keyboard Shortcuts

• Ctrl/Cmd + B - Toggle sidebar
• Arrow Keys - Navigate sidebar links (when focused)

🤝 Contributing

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

📄 License

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

🙏 Acknowledgments

• Font Awesome for icons
• Modern CSS Grid and Flexbox for layouts
• Responsive design principles