athena-ui — HTML 后台模板

SHA-256: f8595b3b863e3ff62b1ea981609739594ba74b58346a221fe0e45ee6fe26e52c

2026-10-01T01:39:34.756Z

# Athena UI

![GitHub Licence](https://img.shields.io/github/license/0xe25f/athena-ui) ![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/0xe25f/athena-ui/total) ![GitHub Repo stars](https://img.shields.io/github/stars/0xe25f/athena-ui)


Athena UI is a polished, static Bootstrap 5.3.8 admin template for designers and developers who want production-minded dashboard screens without adopting a build pipeline. It ships as plain HTML, CSS, and JavaScript, with local assets only: no Sass step, no Node requirement, no bundler, and no lock-in.

<p>
  <img src="screenshot.png" alt="Athena UI dashboard screenshot" width="640">
</p>

If Athena UI saves you time, **please star the project on GitHub.** Stars help designers and developers discover the template.

## Why Use Athena

- Designer-friendly pages with consistent spacing, cards, responsive rows, dashboards, app screens, auth flows, docs, and component examples.
- Developer-friendly static files that can be opened directly, served from any static host, or copied into a backend/framework project.
- Mobile-responsive layouts across the full page set, with dashboard grids, tables, collapsible sidebar groups, chat, kanban, catalogue, and documentation views adapting at common breakpoints.
- Local Bootstrap Icons, Chart.js, DataTables, jQuery, JSZip, pdfmake, and Inter font assets.
- Light, dark, and high-contrast themes with persisted user preference.
- Component pages include closed-by-default example code accordions with clipboard copy controls.
- Utility coverage includes `.fs-7` and `.fs-8` for smaller interface text, plus outline badge variants such as `.badge-outline-primary`.
- Accessibility and security documentation that explains the static frontend guardrails and the backend responsibilities Athena deliberately leaves to your application.

## What's Included

- 85 HTML files across the root welcome page, dashboards, applications, account screens, authentication, components, and documentation.
- 49 product and admin pages, including finance, operations, e-commerce, SaaS, support, security, project, analytics, content, users, billing, chat, kanban, invoices, settings screens, and the page directory.
- 20 component pages covering Bootstrap foundations, forms, tables, charts, modals, dropdowns, toasts, typography, navigation, alerts, badges, cards, filters, and layout patterns.
- 15 documentation pages covering setup, file structure, layouts, theming, authentication, accessibility, security, tables, charts, integrations, changelog, licence, and credits.

## Quick Start

Open `index.html` directly in a browser, or serve the folder from any static web server:

```bash
python -m http.server 8000
```

Then visit `http://127.0.0.1:8000/`.

## Entrypoints

- CSS: `assets/css/athena.css`, `assets/css/athena-layout.css`, `assets/css/athena-utilities.css`, `assets/css/athena-docs.css`
- JavaScript: `assets/js/athena-theme-init.js`, `assets/js/athena.js`, `assets/js/athena-charts.js`, `assets/js/athena-tables.js`, `assets/js/athena-docs.js`
- Public API: `window.Athena.init()`, `Athena.theme.set(mode)`, `Athena.theme.get()`, `Athena.sidebar.set(state)`, `Athena.sidebar.get()`, `Athena.tables.init(selector, options)`, `Athena.charts.create(canvas, config)`
- Local storage keys: `athena-theme` for `light`, `dark`, or `contrast`; `athena-sidebar` for `open`, `closed`, or `mini`
- Sidebar section headings use `data-athena-nav-section-toggle`; component snippet copy buttons use `data-athena-copy`.

## Responsive Foundation

Athena uses a shared row and column system, Bootstrap responsive utilities, table wrappers, and page-specific grid breakpoints. The templates are designed for common mobile, tablet, and desktop widths; teams should still run browser-based visual QA after integrating real content and application data.

Wide data surfaces remain usable through intentional inner scrolling where it is the better pattern, such as rich tables and the 24-hour activity heatmap.

## Security And Accessibility

Athena avoids inline event handlers, keeps its own variable text insertion text-safe, uses local runtime assets, and documents authentication, authorisation, CSRF, CSP, rate limiting, audit logging, and session management as backend-owned responsibilities. It is not, by itself, a WCAG 2.2 conformance claim or an OWASP assurance report.

Templates include semantic landmarks, skip links, visible focus states, labels, autocomplete attributes, reduced-motion support, responsive layouts, table captions, scoped table headers, chart labels, and dark/high-contrast themes. See `docs/accessibility.html` and `docs/security.html` for the exact frontend evidence, limits, and required manual/backend testing.

## Licence

Athena UI is distributed under the MIT Licence. Third-party libraries, fonts, and icon assets retain their own notices in `THIRD-PARTY-NOTICES.md` and `docs/credits.html`.