# SRTdash Admin Dashboard

SRTdash is a modern, fully responsive admin dashboard template built with Bootstrap 5.3.8 and vanilla JavaScript. It ships with 56 HTML pages covering dashboards, UI components, charts, forms, tables, authentication, and more.

No build step required SRTdash is a static HTML template. Open any page directly in your browser or use a simple local server. No Node.js, no bundler, no compilation needed.

## What's Included

3 Dashboard Variants ICO, Ecommerce, and SEO dashboards with unique layouts and chart configurations
56 HTML Pages Every common admin panel screen — from login to invoices to data tables
Bootstrap 5.3.8 Latest stable Bootstrap with all components, utilities, and responsive grid
100% Vanilla JS Zero jQuery dependency. Clean, modular JavaScript with guard clauses
Chart.js 4 Charts Beautiful gradient area charts, doughnut charts, bar charts, and sparklines
AVIF Image Support All images use <picture> elements with AVIF sources and JPG/PNG fallback
Font Awesome 7 Latest Free icons plus Themify Icons for maximum icon variety
Accessible & SEO-ready Skip links, ARIA labels, semantic HTML, unique meta tags per page, GA4 ready

## Version History

Version | Date | Changes
--- | --- | ---
v2.0 | 2026 | Complete rewrite: Bootstrap 5.3.8, vanilla JS, AVIF images, Font Awesome 7, accessibility, SEO, Chart.js 4 consolidation
v1.0 | 2018 | Original release with Bootstrap 4 and jQuery

# Getting Started

SRTdash requires no build tools, package managers, or server-side setup. Simply open the files.

## Quick Start

1. Unzip the template archive
2. Navigate to the `srtdash/` folder
3. Open `index.html` in your browser

## Local Development Server

For the best experience (especially for AVIF image loading), use a local HTTP server:

### Using Python

    cd srtdash
    python3 -m http.server 8000
    # Visit http://localhost:8000

### Using Node.js

    npx http-server srtdash
    # Visit http://localhost:8080

### Using VS Code

Install the Live Server extension, then right-click any HTML file and select "Open with Live Server."

Why a local server? Some browsers restrict `<picture>` element AVIF source switching when opening files via `file://` protocol. A local HTTP server ensures all features work correctly.

## Browser Support

SRTdash supports all modern evergreen browsers:

Browser | Version
--- | ---
Chrome / Edge | 90+
Firefox | 90+
Safari | 15+
Opera | 76+

# File Structure

The template is organized in a single `srtdash/` directory with all assets nested under `assets/`.

srtdash/ ├── assets/ │ ├── css/ │ │ ├── bootstrap.min.css ← Bootstrap 5.3.8 │ │ ├── fontawesome.min.css ← Font Awesome 7.1.0 Free │ │ ├── metismenujs.min.css ← Sidebar menu plugin │ │ ├── swiper-bundle.min.css ← Carousel plugin │ │ ├── themify-icons.css ← Themify icon font │ │ ├── typography.css ← Font imports & base typography │ │ ├── default-css.css ← Reset & CSS variables │ │ ├── styles.css ← Main template styles │ │ └── responsive.css ← Media query breakpoints │ ├── js/ │ │ ├── bootstrap.bundle.min.js ← Bootstrap 5 + Popper │ │ ├── metismenujs.min.js ← Collapsible sidebar menu │ │ ├── swiper-bundle.min.js ← Touch slider/carousel │ │ ├── scripts.js ← Main app logic (vanilla JS) │ │ ├── bar-chart.js ← Bar chart configurations │ │ ├── line-chart.js ← Line chart configurations │ │ ├── pie-chart.js ← Pie/doughnut chart configurations │ │ └── maps.js ← Google Maps integration │ ├── fonts/ ← Themify icon font files │ ├── webfonts/ ← Font Awesome WOFF2 files │ └── images/ │ ├── author/ ← Avatar & author photos │ ├── bg/ ← Background images │ ├── blog/ ← Blog post thumbnails │ ├── card/ ← Card images │ ├── icon/ ← Logos & icon assets │ ├── media/ ← Media object images │ └── team/ ← Team member photos ├── index.html ← ICO Dashboard ├── index2.html ← Ecommerce Dashboard ├── index3.html ← SEO Dashboard ├── index3-horizontalmenu.html ← Horizontal nav variant ├── starter.html ← Blank starter template └── ... (51 more HTML pages)

## Key Files

File | Purpose
--- | ---
`starter.html` | Blank page skeleton — copy this when creating new pages
`assets/css/styles.css` | Main customization file — all component-level styles
`assets/css/responsive.css` | All media query breakpoints
`assets/css/default-css.css` | CSS custom properties (variables), resets, utility classes
`assets/js/scripts.js` | Core app logic — sidebar, sticky header, preloader, etc.

# Page Layout

Every page follows a consistent layout skeleton. Understanding this structure is key to customizing the template.

## Visual Layout

HEADER .header-area — search, notifications, profile
CONTENT
.main-content-inner#main-content
Your page content goes here

## HTML Skeleton

    <!-- Skip link (accessibility) -->
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <!-- Preloader -->
    <div id="preloader"><div class="loader"></div></div>

    <!-- Page container -->
    <div class="page-container">

        <!-- Sidebar -->
        <div class="sidebar-menu">
            <div class="sidebar-header">...logo...</div>
            <div class="main-menu">
                <nav>
                    <ul class="metismenu" id="menu">
                        <!-- Navigation items -->
                    </ul>
                </nav>
            </div>
        </div>

        <!-- Main content -->
        <div class="main-content">
            <div class="header-area">...header...</div>
            <div class="page-title-area">...breadcrumbs...</div>

            <div class="main-content-inner" id="main-content">
                <!-- YOUR CONTENT HERE -->
            </div>
        </div>

        <footer>...</footer>
    </div>

    <!-- Right-side settings panel -->
    <div class="offset-area">...</div>

## Sidebar Navigation

The sidebar uses MetisMenuJS for collapsible submenus. The active page is highlighted with the `class="active"` on both the parent `<li>` and the submenu `<li>`.

    <li class="active">
        <a href="javascript:void(0)" aria-expanded="true">
            <i class="ti-dashboard"></i><span>dashboard</span>
        </a>
        <ul class="collapse">
            <li class="active"><a href="index.html">ICO dashboard</a></li>
            <li><a href="index2.html">Ecommerce dashboard</a></li>
            <li><a href="index3.html">SEO dashboard</a></li>
        </ul>
    </li>

## Header Area

The header contains: navigation toggle button, search box, notification dropdowns (bell + envelope), fullscreen toggle, and settings panel trigger. It becomes sticky on scroll via `#sticky-header`.

## Data Attributes

All interactive components use Bootstrap 5 data attributes:

Attribute | Used For
--- | ---
`data-bs-toggle="dropdown"` | Header notification & profile dropdowns
`data-bs-toggle="tab"` | Tab navigation, trading history, settings panel
`data-bs-toggle="modal"` | Modal dialogs
`data-bs-toggle="popover"` | Popover tooltips
`data-bs-dismiss="modal"` | Close buttons inside modals
`data-bs-dismiss="alert"` | Dismissible alert close buttons

# CSS Architecture

SRTdash uses a layered CSS approach with no preprocessor. All styles are plain CSS files loaded in a specific order.

## Load Order

CSS files are loaded in the `<head>` in this exact order:

# | File | Purpose
--- | --- | ---
1 | `Google Fonts` | Lato and Poppins font families via Google Fonts API
2 | `bootstrap.min.css` | Bootstrap 5.3.8 framework
3 | `fontawesome.min.css` | Font Awesome 7.1.0 Free (with v4 shim compatibility)
4 | `themify-icons.css` | Themify icon font
5 | `metismenujs.min.css` | MetisMenu sidebar plugin styles
6 | `swiper-bundle.min.css` | Swiper carousel styles
7 | `typography.css` | Font imports and base typography rules
8 | `default-css.css` | CSS custom properties, resets, utility classes
9 | `styles.css` | All component-level template styles
10 | `responsive.css` | Responsive breakpoints and overrides

## CSS Custom Properties

The template uses CSS variables defined in `default-css.css` for consistent theming:

    :root {
        --primary-color: #4336FB;
        --text-dark: #333;
        --text-medium: #616161;
        --text-light: #999;
    }

To change the primary brand color across the entire template, update `--primary-color` in `default-css.css`.

## Typography

Two font families are used throughout:

- Poppins — headings, dashboard labels, chart text
- Lato — body text, table content, sidebar

## Icon Systems

SRTdash includes two icon libraries:

Library | Usage | Syntax
--- | --- | ---
Font Awesome 7 Free | Primary — sidebar icons, dashboard icons, action buttons | `<i class="fa-solid fa-house">`
Themify Icons | Secondary — sidebar items, settings panel | `<i class="ti-dashboard">`

Browse available icons on the `fontawesome.html` and `themify.html` showcase pages.

## Responsive Breakpoints

Defined in `responsive.css`, the template adapts at these widths:

Breakpoint | Behavior
--- | ---
`≤1364px` | Sidebar auto-collapses
`≤1199px` | XL grid adjustments
`≤991px` | Tablet layout, stacked columns
`≤767px` | Mobile layout, full-width columns
`≤575px` | Extra-small adjustments

# JavaScript

All JavaScript is vanilla (no jQuery). The main application logic lives in `scripts.js`, wrapped in an IIFE for scope isolation.

## Script Load Order

Scripts are loaded before the closing `</body>` tag in this order:

# | Script | Source
--- | --- | ---
1 | `bootstrap.bundle.min.js` | Vendor (includes Popper.js)
2 | `metismenujs.min.js` | Vendor
3 | `swiper-bundle.min.js` | Vendor
4 | Chart libraries (page-specific) | CDN
5 | Chart initialization files | Local
6 | `scripts.js` | Local — core app logic
7 | Google Analytics 4 | CDN

## Core Features (scripts.js)

The main script file is organized as individual initialization functions:

Function | What It Does
--- | ---
`initPreloader()` | Fades out the loading screen 300ms after `window.load`
`initSidebar()` | Toggles `.sbar_collapsed` on sidebar via nav button click or at ≤1364px viewport
`initSidebarMenu()` | Initializes `new MetisMenu('#menu')` for collapsible nav
`initStickyHeader()` | Adds `.sticky-menu` class to `#sticky-header` when scrolled past 1px
`initTestimonialCarousel()` | Swiper carousel with responsive breakpoints, auto-wraps slides in `.swiper-wrapper`
`initSettingsPanel()` | Toggles `.show_hide` on `.offset-area` when clicking `.settings-btn`
`initFullscreen()` | Toggles browser fullscreen via `#full-view` / `#full-view-exit` buttons
`initFormValidation()` | Bootstrap 5 native form validation on `.needs-validation` forms
`initFormFocus()` | Floating label focus effect on `.form-gp` inputs

## Chart Files

Each chart file initializes hardcoded demo data and uses guard clauses (`if (!document.getElementById(...))`) to safely skip initialization when the canvas element isn't on the current page.

### line-chart.js

Powers charts on the ICO dashboard (`index.html`), line chart showcase, and other pages:

- Sales mini-charts — Smooth gradient area charts (blue, amber, emerald)
- Overview chart — Dual-dataset line chart with gradient fills (Revenue vs Expenses)
- Market sparklines — Tiny inline charts in the market value table (4 colors)
- Visitor graph — Highcharts areaspline (on other dashboard pages)

### pie-chart.js

- Coin Distribution — Chart.js doughnut with center text plugin (index.html)
- ZingChart / Highcharts / AmCharts — Additional charts on piechart.html showcase

### bar-chart.js

- Chart.js bar charts — Stacked, grouped bar configurations
- AmCharts / Highcharts bars — Additional charts on barchart.html showcase

Safe CDN loading Chart files use `typeof library !== 'undefined'` guard clauses. If a CDN script isn't loaded on a page, the chart simply won't initialize — no errors.

## Color Palette (Charts)

The ICO dashboard charts use a unified, harmonious color palette:

Color | Hex | Usage
--- | --- | ---
Blue | `#3b82f6` | Bitcoin, primary series, Ethereum icon
Indigo | `#6366f1` | Secondary series, Dashcoin, coin distribution
Amber | `#f59e0b` | Bitcoin Dash, expenses, accent
Emerald | `#10b981` | Ethereum chart, success indicators

# Pages & Components

SRTdash includes 56 ready-to-use HTML pages organized into these categories:

## Dashboards

index.html ICO Dashboard — crypto sales, market trends, charts
index2.html Ecommerce Dashboard — sales, orders, revenue
index3.html SEO Dashboard — traffic, keywords, analytics
index3-horizontalmenu.html Horizontal navigation variant

## Charts

barchart.html Bar chart showcase (Chart.js, AmCharts, Highcharts)
linechart.html Line chart showcase (Chart.js, Highcharts, ZingChart)
piechart.html Pie/doughnut chart showcase (Chart.js, ZingChart, Highcharts)

## UI Components

accordion.html Collapsible accordion panels
alert.html Bootstrap alert variants
badge.html Badge styles and sizes
button.html Button styles and variants
button-group.html Button groups and toolbars
cards.html Card layouts and styles
dropdown.html Dropdown menus
list-group.html List group variants
media-object.html Media objects with alignment options
modal.html Modal dialogs
pagination.html Pagination styles
popovers.html Popovers and tooltips
progressbar.html Progress bar variants
tab.html Tab navigation panels
typography.html Heading, text, and list styles
grid.html Bootstrap grid system demo

## Forms & Tables

form.html Form elements and validation
table-basic.html Basic table styles
table-layout.html Table layout variants
datatable.html Interactive data table with sorting, search, pagination

## Icons

fontawesome.html Font Awesome 7 icon showcase
themify.html Themify icon showcase

## Apps

profile.html User profile page
notifications.html Notification center
settings.html Account settings
invoice.html Invoice summary
pricing.html Pricing table
maps.html Google Maps integration

## Authentication

login.html / login2.html / login3.html Three login page variants
register.html — register4.html Four registration page variants
reset-pass.html / forgot-password.html Password recovery flows
screenlock.html / screenlock2.html Lock screen variants

## Error Pages

401.html Unauthorized
403.html Forbidden
404.html Not Found
500.html Internal Server Error

# Tech Stack

Every library and tool used in the template, with version numbers and sources.

## Core Libraries

Library | Version | Source | Purpose
--- | --- | --- | ---
Bootstrap | 5.3.8 | Vendor | CSS framework, grid, components, utilities
MetisMenuJS | 1.4.0 | Vendor | Collapsible sidebar navigation
Swiper | 12.1.0 | Vendor | Touch slider / carousel

## Chart Libraries

Library | Version | Source | Used On
--- | --- | --- | ---
Chart.js | 4.5.1 | CDN | All dashboards, chart showcase pages
Highcharts | 12.5.0 | CDN | Chart showcase pages (linechart, barchart, piechart)
ZingChart | 2.9.16 | CDN | Chart showcase pages

## Icon Libraries

Library | Version | Source
--- | --- | ---
Font Awesome | 7.1.0 Free | Vendor (with v4 shim compatibility)
Themify Icons | — | Vendor

## Other

Library | Version | Source | Used On
--- | --- | --- | ---
Simple-DataTables | 10.x | CDN | datatable.html
Google Fonts | — | CDN | Lato + Poppins (all pages)
Google Analytics 4 | — | CDN | All pages (replace `G-XXXXXXXXXX` with your ID)

# Customization

## Creating a New Page

The fastest way to add a new page:

1. Copy `starter.html` — it contains the full layout skeleton with empty content area
2. Update the `<title>` and `<meta name="description">` tags
3. Add your content inside `.main-content-inner#main-content`
4. Update the sidebar navigation to include a link to your new page
5. Set `class="active"` on the relevant sidebar `<li>` elements

Remember sidebar links Every page has its own copy of the sidebar HTML. When adding a new page to the navigation, update the sidebar markup in every HTML file where it should appear.

## Changing the Brand Color

The template's primary color is controlled by a single CSS variable in `default-css.css`:

    /* In assets/css/default-css.css */
    :root {
        --primary-color: #4336FB;  /* Change this to your brand color */
    }

This variable is used for active states, sidebar accents, buttons, and decorative elements throughout the template.

## Changing Fonts

Fonts are loaded via Google Fonts in the `<head>` of every page:

    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

To change fonts, update the Google Fonts URL and the corresponding `font-family` declarations in `typography.css`.

## Adding Chart Libraries

Chart CDN scripts are loaded only on pages that need them. To add charts to a new page:

    <!-- Add before scripts.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
    <script src="assets/js/line-chart.js"></script>
    <script src="assets/js/pie-chart.js"></script>

Guard clauses in each chart file prevent errors when canvas elements don't exist on the page.

## Google Analytics

Every page includes a GA4 tracking snippet at the bottom. Replace the placeholder ID with your actual tracking ID:

    <script async src="https://www.googletagmanager.com/gtag/js?id=G-YOUR-ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag("js", new Date());
        gtag("config", "G-YOUR-ID");
    </script>

## Sidebar Configuration

The sidebar supports multi-level collapsible menus via MetisMenuJS. To add a new menu group:

    <li>
        <a href="javascript:void(0)" aria-expanded="true">
            <i class="ti-widget"></i><span>My Section</span>
        </a>
        <ul class="collapse">
            <li><a href="page1.html">Page One</a></li>
            <li><a href="page2.html">Page Two</a></li>
        </ul>
    </li>

# Accessibility

SRTdash includes several accessibility features built into every page.

## Skip Link

Every page includes a visually hidden skip link as the first focusable element:

    <a href="#main-content" class="skip-link">Skip to main content</a>

This link becomes visible on keyboard focus, allowing keyboard users to bypass the sidebar and header navigation.

## Semantic HTML

- Proper heading hierarchy (`h1` → `h2` → `h3`)
- `<nav>` element wrapping sidebar navigation
- `<main>`-equivalent content area with `id="main-content"`
- `<footer>` element for page footer
- `lang="en"` attribute on all `<html>` tags

## ARIA Attributes

- `aria-expanded` on collapsible sidebar menu items
- `role="tab"` and `role="tabpanel"` on tab interfaces
- `aria-label` on icon-only buttons

## Keyboard Navigation

- All interactive elements are focusable
- Bootstrap dropdowns, modals, and tabs work with keyboard
- Focus visible indicators on all interactive elements

## Images

All `<img>` elements include descriptive `alt` attributes. Decorative images use `alt=""`.

# Image Optimization

SRTdash uses modern image formats with progressive enhancement for maximum performance.

## AVIF with Fallback

Every image uses the `<picture>` element with an AVIF source and JPG/PNG fallback:

    <picture>
        <source srcset="assets/images/path/file.avif" type="image/avif">
        <img src="assets/images/path/file.jpg" alt="Description">
    </picture>

Browsers that support AVIF (Chrome, Firefox, Safari 16+) load the smaller AVIF file. Older browsers gracefully fall back to JPG/PNG.

AVIF savings AVIF files are typically 40-60% smaller than equivalent JPEGs at the same visual quality, resulting in significantly faster page loads.

## Image Directories

Directory | Contents
--- | ---
`images/author/` | User avatars and author photos (5 authors + 1 avatar)
`images/bg/` | Full-screen background images (login/register pages)
`images/blog/` | Blog post thumbnail images
`images/card/` | Card component images (9 variants)
`images/icon/` | Logo and miscellaneous icon assets
`images/media/` | Media object example images
`images/team/` | Team member profile photos (5 members)

## Adding New Images

When adding images, always provide both formats:

1. Place the original JPG/PNG in the appropriate directory
2. Create an AVIF version (using tools like Squoosh, libavif, or your image editor)
3. Use the `<picture>` element pattern shown above

# Sources & Credits

## Frameworks

- Bootstrap 5.3.8 — CSS framework
- Google Fonts — Lato and Poppins typefaces

## JavaScript Libraries

- Chart.js 4 — Beautiful, flexible charting
- Highcharts 12 — Advanced interactive charts
- ZingChart — Enterprise-grade charts
- Swiper 12 — Modern touch slider
- MetisMenuJS — Collapsible menu plugin
- Simple-DataTables — Lightweight data tables

## Icons

- Font Awesome 7 Free — Icon library
- Themify Icons — Icon font

## Images

- Sample photos from Unsplash and Pexels

# Support

Thank you for using SRTdash! If you have questions, encounter issues, or need customization help, please don't hesitate to reach out.

## Contact

Get in touch via the Colorlib Templates page.

## Template by

Designed and developed by Colorlib — a leading HTML template provider trusted by millions of developers worldwide.

Found a bug? Please include the browser name and version, the page URL, and a description of the issue. Screenshots are always appreciated!