# NEXUS - Startup Dashboard Template

A modern, elegant SaaS dashboard template designed for tech startups. Built with Responsive Slot Layout (RSL) framework.

## Preview

Open `index.html` in your browser to see the template in action.

## Features

- **Modern Design** - Clean, professional interface with Electric Indigo accent color
- **Dark Mode Support** - Seamless light/dark theme switching with localStorage persistence
- **Responsive Layout** - Works perfectly on desktop, tablet, and mobile devices
- **Collapsible Sidebar** - Space-saving navigation that collapses to icons
- **KPI Dashboard** - Key metrics display with sparkline charts and trend indicators
- **Interactive Charts** - Revenue, user growth, and analytics visualizations
- **Data Tables** - Activity logs with sorting and styling
- **Progress Indicators** - System status and resource usage displays
- **Tabbed Interface** - Analytics page with Overview, Revenue, Users, and Funnel tabs
- **Conversion Funnel** - Visual funnel visualization with insights
- **Keyboard Shortcuts** - Cmd/Ctrl+K for quick search access
- **WCAG 2.1 AA Accessible** - Skip navigation, ARIA labels, keyboard support

## Pages Included

- `index.html` - Main dashboard with KPIs, charts, activity table, and system status
- `analytics.html` - Deep analytics with tabs, detailed charts, user table, and funnel

## RSL Components Used

- **Grid System** - Responsive slot-layout grids
- **KPI Cards** - Key performance indicators with sparklines
- **Charts** - Area, bar, line, doughnut, and horizontal bar charts
- **Smart Table** - Sortable, styled data tables
- **Progress Bar** - Resource usage indicators
- **Badge** - Status indicators (Success, Warning, Danger, etc.)
- **Tabs** - Tabbed content sections
- **Accessibility Widget** - Built-in a11y controls
- **Theme Toggle** - Light/dark mode switching

## Customization

### Colors

The template uses custom CSS variables for easy theming. Edit `startup-dashboard-style.css`:

```css
:root {
    /* Primary Colors - Electric Indigo */
    --color-primary: #6366f1;
    --color-primary-light: #818cf8;
    --color-primary-dark: #4f46e5;

    /* Secondary - Cyan */
    --color-secondary: #06b6d4;

    /* Semantic Colors */
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #f43f5e;
    --color-info: #06b6d4;
}
```

### Typography

The template uses Inter font for UI text and JetBrains Mono for code. Fonts are loaded from Google Fonts.

### Adding Pages

1. Copy `analytics.html` as a starting point
2. Update the sidebar navigation (mark active page)
3. Update breadcrumbs
4. Add your content sections

### Changing Data

KPI cards, charts, and tables use data attributes. Example:

```html
<div class="rsl-kpi-card"
     data-icon="fas fa-dollar-sign"
     data-label="Monthly Revenue"
     data-value="$84,520"
     data-trend="up"
     data-trend-value="+12.5%"
     data-sparkline="[45, 52, 49, 63, 58, 72, 85]"
     data-color="primary">
</div>
```

## Browser Support

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## Installation

1. Extract the template folder
2. Open `index.html` in your browser
3. All dependencies are included locally

## File Structure

```
startup-dashboard-template/
├── index.html                    # Main dashboard page
├── analytics.html                # Analytics page with tabs
├── startup-dashboard-style.css   # Custom CSS
├── startup-dashboard-script.js   # Custom JavaScript
├── README.md                     # This file
├── LICENSE                       # MIT License
├── styles/                       # RSL CSS files
├── javascript/                   # RSL JS files
└── images/                       # Icons and assets
```

## Credits

Built with [Responsive Slot Layout (RSL)](https://rslayout.com)

## License

MIT License - Free to use for personal and commercial projects
