# GreenAdmin V2 - Free Bootstrap 5 Admin Dashboard Template

A modern, clean, and responsive admin dashboard template built with **Bootstrap 5.3** and custom CSS. Inspired by TailAdmin's UI/UX design patterns. **47 pages included, 100% offline — no CDN required.**

## Features

- **Pure Bootstrap 5.3** - No extra CSS frameworks needed
- **Compact Density** - Tuned ~18% tighter than a stock Bootstrap admin so more fits on screen, using real spacing/type values (no CSS `zoom` or `transform: scale`)
- **Fully Offline** - All vendor assets (Bootstrap, Chart.js, DataTables, jQuery, Inter font) are bundled in `plugin/`
- **5 Theme Modes** - Light, Dark, Mix (dark sidebar + light content), Midnight (OLED), System (follows OS preference)
- **18 Color Palettes** - Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Purple, Fuchsia, Pink, Rose, Red, Orange, Amber, Yellow, Slate, Stone (Tailwind-inspired)
- **Theme Customizer Panel** - Header settings button opens a drawer panel to switch mode, color, density & corner radius
- **Theme Persistence** - Saved to localStorage and applied before first paint, so there is no flash of the default theme
- **3-Level Sidebar Navigation** - Supports nested submenus up to 3 levels deep
- **Desktop Sidebar Collapse** - Click hamburger to collapse sidebar to icon-only mode
- **Live Menu Search** - Header search filters every sidebar entry with keyboard navigation
- **Active Parent Highlighting** - Parent menu auto-expands and highlights when child is active
- **Responsive Design** - Mobile slide-over sidebar with overlay
- **GA Icons** - 435-icon CSS icon library (`css/ga-icons.css`), used via `<i class="ga ga-home"></i>` — pure CSS `mask-image`, no font file
- **DataTables** - jQuery DataTables 2.2 with export buttons (Copy, CSV, Excel, PDF, Print, ColVis) and responsive mode
- **Chart.js Integration** - 8 chart types (Line, Bar, Horizontal Bar, Doughnut, Polar, Radar, Area, Scatter)
- **23 UI Element Pages** - Alerts, Badges, Breadcrumb, Buttons, Buttons Group, Cards, Carousel, Dropdowns, Icons, Images, Links, List, Modals, Notifications, Pagination, Popovers, Progress Bars, Ribbons, Spinners, Tabs, Tooltips, Typography, Videos
- **Custom Components** - Ribbons, Toast notifications, Custom tabs, Custom alerts
- **Custom Form Elements** - Toggle switches, range sliders, file uploads, OTP inputs, wizard forms
- **Calendar Page** - Monthly calendar grid with events
- **Messages / Inbox** - Email-style message list
- **Pricing Page** - 3-tier pricing cards with featured badge
- **FAQ Accordion** - Collapsible FAQ section
- **Profile Page** - Cover photo, stats, activity feed
- **Settings Page** - Personal info, password, notifications
- **Authentication Pages** - Sign In, Sign Up, Reset Password, Two-Step Verification
- **6 Error / Special Pages** - 403, 404, 500, Coming Soon, Maintenance, Under Construction
- **No Build Tools Required** - Just open `index.html` in your browser

## Pages Included (47)

### Dashboard
| Page | Description |
|------|-------------|
| `index.html` | Dashboard with stats, charts, tables, activity feed |

### Menu Pages
| Page | Description |
|------|-------------|
| `pages/calendar.html` | Monthly calendar with events |
| `pages/profile.html` | User profile with cover, stats, activity |
| `pages/messages.html` | Inbox / message list |

### Forms & Tables
| Page | Description |
|------|-------------|
| `pages/forms.html` | Form elements: inputs, selects, toggles, checkboxes, radios |
| `pages/form-layout.html` | Contact form, horizontal form, inline form |
| `pages/advanced-forms.html` | Input groups, validation states, wizard form |
| `pages/tables.html` | Basic data tables with avatars and badges |
| `pages/datatables.html` | DataTables with search, sort, export, responsive |
| `pages/charts.html` | 8 chart types using Chart.js |

### UI Elements (23 pages)
| Page | Description |
|------|-------------|
| `pages/alerts.html` | Custom alerts and Bootstrap alerts |
| `pages/badges.html` | Custom and Bootstrap badges |
| `pages/breadcrumb.html` | Default, custom dividers, with icons |
| `pages/buttons.html` | Custom and Bootstrap button styles |
| `pages/buttons-group.html` | Button groups, toolbar, checkbox/radio groups |
| `pages/cards.html` | Basic cards, stat cards, accent cards |
| `pages/carousel.html` | Slides with captions, indicators, crossfade |
| `pages/dropdowns.html` | Basic, split, directions, dark, with icons |
| `pages/icons.html` | Searchable gallery of all 435 GA Icons |
| `pages/images.html` | Responsive, shapes, overlays, figures |
| `pages/links.html` | Colors, utilities, stretched, with icons |
| `pages/list.html` | List groups: basic, badges, colored, custom |
| `pages/modals.html` | Sizes, centered, scrollable, static backdrop |
| `pages/notifications.html` | Toast notifications, Bootstrap toasts, alerts |
| `pages/pagination.html` | Sizes, icons, centered, rounded |
| `pages/popovers.html` | Directions, dismissible, HTML content |
| `pages/progress-bar.html` | Striped, animated, stacked, custom heights |
| `pages/ribbons.html` | Left, right, corner, colored ribbons |
| `pages/spinners.html` | Border, grow, sizes, button spinners |
| `pages/tabs.html` | Nav tabs, pills, vertical, custom tabs |
| `pages/tooltips.html` | Directions, on elements, on icons |
| `pages/typography.html` | Headings, text utilities, blockquotes, code |
| `pages/videos.html` | YouTube, Vimeo, HTML5, aspect ratios |

### Authentication
| Page | Description |
|------|-------------|
| `pages/login.html` | Sign in with social login |
| `pages/signup.html` | Sign up with social login |
| `pages/reset-password.html` | Password reset |
| `pages/two-step-verification.html` | 6-digit OTP with resend countdown |

### Error & Special Pages
| Page | Description |
|------|-------------|
| `pages/404.html` | Not found |
| `pages/403.html` | Access denied |
| `pages/500.html` | Server error |
| `pages/coming-soon.html` | Launch countdown |
| `pages/maintenance.html` | Scheduled maintenance |
| `pages/under-construction.html` | Work in progress |

### Other Pages
| Page | Description |
|------|-------------|
| `pages/pricing.html` | 3-tier pricing cards |
| `pages/faq.html` | FAQ accordion |
| `pages/settings.html` | Account settings, notifications, password |
| `pages/templates.html` | Gallery of ready-to-use website templates |

## Folder Structure

```
greenAdminV2/
├── index.html              # Dashboard
├── README.md               # This file
├── css/
│   ├── admin.css           # Core styles & layout
│   ├── ga-icons.css        # GA Icons library (435 icons)
│   └── theme.css           # Theme system: 5 modes + 18 color palettes + density/radius
├── js/
│   └── admin.js            # Sidebar, theme, menu search, tabs, toasts, DataTable engine
├── plugin/                 # Bundled vendor assets (no CDN needed)
│   ├── bootstrap/          # Bootstrap 5.3.3 CSS + JS bundle
│   ├── chartjs/            # Chart.js 4.4.7
│   ├── datatables/         # DataTables 2.2.2 + Buttons 3.2.1 + Responsive 3.0.4 + jszip + pdfmake
│   ├── fonts/              # Inter webfont + inter.css
│   └── jquery/             # jQuery 3.7.1 (required by DataTables)
└── pages/                  # 46 inner pages (see tables above)
```

## Bundled Dependencies

All vendor assets live in `plugin/` — the template works with no internet connection.

| Library | Version |
|---------|---------|
| [Bootstrap](https://getbootstrap.com/) | 5.3.3 |
| [Chart.js](https://www.chartjs.org/) | 4.4.7 |
| [jQuery](https://jquery.com/) | 3.7.1 |
| [DataTables](https://datatables.net/) | 2.2.2 |
| DataTables Buttons | 3.2.1 |
| DataTables Responsive | 3.0.4 |
| [Inter font](https://fonts.google.com/specimen/Inter) | self-hosted |

## Quick Start

1. Download the ZIP from [GreenGetWare](https://greengetware.com/greensoft/)
2. Extract and open `index.html` in your browser
3. Click the settings button in the header (top-right) to open the Theme Customizer
4. Choose your mode (Light / Dark / Mix / Midnight / System), color palette, density and corner radius
5. Or customize via CSS variables in `css/theme.css`

## Theme System

### Appearance Modes
| Mode | Sidebar | Content Area |
|------|---------|-------------|
| **Light** | White/light sidebar | Light background |
| **Dark** | Dark sidebar | Dark background |
| **Mix** | Dark sidebar | Light background (classic admin look) |
| **Midnight** | Near-black sidebar | Near-black background (OLED / low-light) |
| **System** | follows OS | Resolves to Light or Dark via `prefers-color-scheme` |

`System` is stored as a preference (`data-theme-pref`) and resolved to a concrete mode on `data-theme`, so it keeps tracking the OS setting while the page is open.

### Color Palettes (18)
Lime, Green, Emerald, Teal, Cyan, Sky, Blue, Indigo, Purple, Fuchsia, Pink, Rose, Red, Orange, Amber, Yellow, Slate, Stone

Ordered around the colour wheel so the customizer grid reads as a spectrum. All colors are Tailwind CSS-inspired and defined as CSS custom properties in `css/theme.css`. To add a custom palette, add a new `[data-color="mycolor"]` block and register it in the `ThemeManager.colors` array in `js/admin.js`.

### Density & Corner Radius
The customizer also exposes two independent axes, both persisted to localStorage:

| Axis | Options | Attribute |
|------|---------|-----------|
| Density | Compact (default), Comfortable | `data-density` |
| Corner Radius | Sharp, Normal (default), Round | `data-radius` |

## Density System

The UI ships on a compact scale — roughly 18% tighter than stock Bootstrap — so tables, forms and dashboards fit more on screen. This is done with real spacing and type values, never `zoom` or `transform: scale()`, so text stays crisp and layouts stay responsive.

Everything is driven by variables at the top of `css/admin.css`:

| Variable | Default | Controls |
|----------|---------|----------|
| `--ga-font-size-base` | `0.82rem` | Base text size (also feeds `--bs-body-font-size`) |
| `--ga-line-height` | `1.45` | Base line height |
| `--ga-content-pad` | `20px` | Padding around the page content area |
| `--ga-space-1` … `--ga-space-5` | `0.2` → `2.4rem` | Compact replacement for Bootstrap's `m-*` / `p-*` / `g-*` / `gap-*` scale |
| `--sidebar-width` | `236px` | Expanded sidebar |
| `--sidebar-collapsed` | `66px` | Icon-only sidebar |
| `--header-height` | `52px` | Top bar |

To loosen the whole interface back toward Bootstrap defaults, raise those values — for example `--ga-font-size-base: 1rem`, `--ga-space-3: 1rem`, `--sidebar-width: 288px`.

The *Compact Density Layer* at the bottom of `css/admin.css` maps Bootstrap's components (cards, tables, buttons, forms, modals, dropdowns, alerts, badges, accordion, pagination, toasts) and DataTables onto the same scale. No vendor file in `plugin/` is modified.

### Avoiding the theme flash
Every page carries a small inline script in `<head>` that reads the saved mode/color from `localStorage` and applies it to `<html>` before the first paint. If you create a new page, copy that snippet from any existing page — otherwise the page will briefly render with the default theme.

## License

Free to use for personal and commercial projects. No attribution required.

Made with care by [GreenGetWare](https://greengetware.com)
