01 Introduction & Product Overview

Nuvora Admin is an enterprise-grade HTML5 e-commerce administrative dashboard and UI toolkit template engineered for SaaS platforms, retail command centers, multi-warehouse inventory systems, and full-stack developers.

What is Included in the Package?

02 Package Structure

The Nuvora Admin distribution archive is self-contained with all HTML modules, stylesheets, scripts, and media organized cleanly at the root.

03 Getting Started & Local Setup

Nuvora Admin is 100% static client-side HTML, CSS, and JavaScript. Getting started takes less than one minute.

1. Extract the Package

   Unzip the downloaded admin-portal-dashboard.zip archive to your preferred local development directory.

2. Open the Dashboard

   Double-click index.html directly to launch the executive dashboard in any modern browser.

3. Recommended Local Server (Optional)

   Terminal / Command Prompt Copy

   # Option A: Using Python 3 built-in server
   python -m http.server 8080
   
   # Option B: Using Node.js npx serve
   npx serve .

   Then open your browser to http://localhost:8080/index.html.

04 Admin Modules Reference (15 Pages)

The Nuvora Admin Command Center provides 15 enterprise modules powered by js/admin.js and styled via css/admin.css.

05 UI Elements Kitchen Sink (ui-elements.html)

Open ui-elements.html to inspect, test, and copy production-ready HTML snippets for every component in the Nuvora Admin design system:

• Buttons & Action Controls: Primary, secondary, outline, danger, icon buttons, and size modifiers.
• Status Pills & Badges: Semantic badges with pulsing status dots (Success, Warning, Danger, Info, Neutral).
• Form Inputs & Switches: Text inputs, select dropdowns, checkboxes, radio buttons, toggle switches, and input groups.
• Cards, Alerts & Modals: KPI stat cards, callout banners, progress bars, tabs, and modal dialogs.

06 Customization Guide

1. Customizing Admin Sidebar Brand

<a href="index.html" class="sidebar-brand">
  <div class="sidebar-brand-icon">
    <svg viewBox="0 0 24 24"><path d="M6 18V6l12 12V6"/></svg>
  </div>
  <div class="sidebar-brand-text">
    <span class="brand-name">YourBrand</span>
    <span class="brand-sub">Admin OS</span>
  </div>
</a>

2. Built-In Theme Customizer Drawer

Click the floating gear button on any admin screen or invoke AdminTheme methods programmatically:

// Switch between 'light' and 'dark'
AdminTheme.setTheme('dark');

// Switch color scheme: 'emerald' | 'mint' | 'teal' | 'forest' | 'amber' | 'cyan'
AdminTheme.setColor('emerald');

// Switch layout direction: 'ltr' | 'rtl'
AdminTheme.setDirection('ltr');

07 CSS Architecture & Tokens (css/admin.css)

In css/admin.css, light and dark modes as well as the 6 accent color schemes are controlled via data attributes on the root <html> element:

/* Light Mode */
[data-theme="light"] {
  --admin-bg: #F4F6FB;
  --admin-card: #FFFFFF;
  --admin-border: #E2E8F0;
  --text-primary: #0F172A;
}

/* Dark Mode */
[data-theme="dark"] {
  --admin-bg: #0B0F17;
  --admin-card: #111827;
  --admin-border: #1F2937;
  --text-primary: #F9FAFB;
}

08 JavaScript & Admin Engine (js/admin.js)

The Admin Controller provides modular management objects with zero external library dependencies:

• AdminDB: Full CRUD storage layer for Products (getProducts, saveProducts), Orders (getOrders, saveOrders), Customers (getCustomers, saveCustomers), Coupons (getCoupons, saveCoupons), and Store Settings (getSettings, saveSettings) in localStorage.
• AdminTheme: Manages Light/Dark modes, 6 dynamic color schemes (Emerald, Mint, Teal, Forest, Amber, Cyan), and RTL/LTR switching.
• AdminCharts: Native HTML5 Canvas 2D graphics engine that renders high-DPI retina charts and sparklines.
• AdminSidebar: Manages desktop collapsible mini-sidebar mode (with hover tooltips) and mobile off-canvas drawer navigation.
• AdminToast: Status message toast system (AdminToast.show(title, message, type)).
• AdminConfirm: Non-blocking modal dialog for confirming destructive operations.

09 Responsive Design & Breakpoints

10 Browser Compatibility

11 Dependencies & Credits

• Google Fonts: Inter, Plus Jakarta Sans, JetBrains Mono.
• Icons: Handcrafted inline SVG icons. Zero external icon font files required.
• Charts: Native HTML5 Canvas 2D API.

12 Image & Asset Replacement Guide

13 Backend Integration Examples

To connect AdminDB to a live REST or GraphQL API, replace the localStorage methods in js/admin.js with fetch() calls to your backend endpoints (Node.js, Laravel, Django, ASP.NET Core, or Supabase).

14 Troubleshooting & FAQ

15 Changelog & Release History