Cloud Admin UI

Material You admin dashboard boilerplate — HTML5 + Tailwind CSS CLI + Vanilla JS. Zero runtime dependencies, open-source.

---

Screenshot

---

Pages

File	Description
src/index.html	Main dashboard with metrics, charts, and audit log table
src/tables.html	Data tables — basic + advanced (search, sort, pagination, bulk actions, expandable rows)
src/components.html	UI component library — buttons, badges, alerts, cards, forms, modals, tooltips, tabs, toasts, avatars, skeletons, empty states
src/charts.html	SVG charts — line, bar (vertical + horizontal), donut, area, sparklines
src/profile.html	User profile — general info, security, notifications, appearance, activity log
src/settings.html	System settings — general, security policy, integrations, SMTP, audit, billing
src/auth/login.html	Login page with OAuth buttons (Google, Microsoft)
src/auth/register.html	Registration page with password strength bar and real-time validation
src/auth/forgot-password.html	Password recovery with 60-second resend countdown
src/auth/reset-password.html	Password reset with strength bar and requirements checklist
src/auth/change-password.html	Change password (authenticated)
src/errors/404.html	404 — Page not found
src/errors/401.html	401 — Unauthorized
src/errors/403.html	403 — Forbidden
src/errors/500.html	500 — Internal server error

---

Tech Stack

Layer	Technology
Markup	HTML5
Styles	Tailwind CSS CLI (v3)
Scripts	Vanilla JS (ES5-compatible, no bundler)
Icons	Material Symbols via Google Fonts CDN
Fonts	Inter + JetBrains Mono via Google Fonts CDN

---

Getting Started

git clone https://github.com/ferronicardoso/cloud-admin-ui.git
cd cloud-admin-ui/src
npm install
npm run dev        # watch mode — rebuilds CSS on file changes

No build needed to browse. The compiled src/assets/css/styles.css is committed to the repo, so you can open src/index.html directly in a browser without running npm install.

---

Design Tokens

All colors follow the Material You palette system, defined in src/tailwind.config.js and exposed as CSS custom properties in src/input.css:

:root {
  --color-primary: #005faa;
  --color-secondary: #476083;
  --color-tertiary: #006775;
  /* ... */
}
.dark {
  --color-primary: #a3c9ff;
  /* dark mode overrides */
}

src/assets/js/charts.js reads these at runtime via getComputedStyle, so charts always match the active theme — no hardcoded hex values in JS.

---

Customization

1. Edit color tokens in src/tailwind.config.js
2. Run npm run build (from src/) to regenerate src/assets/css/styles.css
3. Commit the compiled CSS so the project stays browsable without a build step

cd src
npm run build

---

Contributing

1. Fork the repo and create a feature branch
2. Run npm run dev for live CSS rebuilding
3. Open a pull request with a clear description

Please keep PRs focused — one feature or fix per PR.

---

Credits

• Design system: Material Design 3 / Material You
• Icons: Google Material Symbols
• Typography: Inter + JetBrains Mono