Halcyon Admin

Overview

Halcyon is a premium admin dashboard template in plain HTML, CSS and JavaScript. It gives you 13 ready pages — dashboard, customers table, forms, profile, settings, task board, calendar, invoices, invoice detail, sign-in, sign-up, forgot password and 404 — with dark and light themes, a collapsible sidebar and a full right-to-left (RTL) layout.

There is no build step, no framework and no dependency. Open template/index.html in a browser and it works. Every chart is a small, self-written SVG component, so the whole template stays light.

Quick start

1. Unzip the package.
2. Open template/index.html in your browser — that is the dashboard. All other pages are linked from the sidebar.
3. To put it online, upload the template/ folder to any static web host (shared hosting, Netlify, GitHub Pages, S3, Nginx…). No server code is needed.
4. Start editing: the brand colours are two lines at the top of assets/css/app.css, the sidebar menu is the NAV list in assets/js/app.js, and all sample data is in assets/js/data.js.

Tip: some browsers limit localStorage for pages opened straight from disk. Everything still works, but theme / board changes may not be remembered until you serve the folder from a local web server (for example npx serve template or your editor's “live server”).

Features

• 13 pages: dashboard, data table, forms, profile, settings (5 tabs), kanban task board, month calendar, invoices list, printable invoice, sign-in, sign-up, forgot password, 404.
• Dark and light themes with one toggle; the choice is remembered. Default is dark; “System” in Settings follows the device.
• Full RTL mode: every margin and padding uses CSS logical properties, so the whole interface mirrors with dir="rtl".
• Collapsible sidebar (icons only) on desktop and a slide-in drawer on phones and tablets.
• Six accent colours in Settings → Appearance, applied live.
• Dependency-free SVG charts: area/line chart with hover tooltip, grouped bars, donut and sparklines. They redraw on resize and theme change.
• Data table: live search, status and role filters, sort on every column, pagination with page size, select all, bulk delete and CSV export.
• Forms with live validation: required, e-mail, pattern, min/max length, number ranges, password strength and “repeat password” matching, plus accessible error messages.
• Kanban board with drag and drop and keyboard moves (← / →), add and delete tasks, saved in localStorage.
• Calendar with month navigation, today marker, add events (saved) and an “upcoming” agenda.
• Invoice detail page with clean print styles — print or save as PDF straight from the browser.
• Toasts, modals, dropdowns, tabs, badges, avatars, progress bars, switches, radio cards and a file drop zone.
• Accessible basics: skip link, landmarks, labels on every control, aria-sort, aria-current, keyboard-friendly tabs and visible focus rings.
• Responsive from 390 px phones to wide desktops. Self-hosted fonts and zero external requests.

Pages

File structure

template/
  index.html … 404.html      13 pages (plain HTML)
  assets/
    css/app.css              all styles, organised in 13 numbered sections
    js/boot.js               applies saved theme / direction / sidebar before paint
    js/data.js               ALL sample data (users, orders, invoices, tasks, events, chart series)
    js/app.js                shared: icons, sidebar menu (NAV), topbar, preferences, toasts, modals, validation, charts
    js/pages.js              page logic, one function per page (picked by <body data-page="…">)
    fonts/                   Instrument Sans + JetBrains Mono (woff2) and their OFL licences
    img/favicon.svg
documentation/index.html     this file
README.md · CHANGELOG.md · LICENSE.txt · THIRD-PARTY.txt

Every app page has the same skeleton: an empty <aside id="sidebar">, <header id="topbar"> and <footer id="foot"> that app.js fills in, and a <main> with the page content. So one edit in app.js changes the menu on every page.

Customise & rebrand

Colours

Open assets/css/app.css. At the top, --brand and --brand-2 are the two brand colours (the gradient in the logo, buttons, active menu item, charts). The light theme overrides them in the [data-theme="light"] block. All other colours (surfaces, text, success / warning / danger) are variables in the same two blocks.

Name and logo

• The product name in the sidebar comes from brand.name in assets/js/data.js; the company in the footer from brand.company.
• The logo mark is the logo icon in assets/js/app.js (a 24×24 SVG path). Replace it with your own path, or change buildSidebar() to use an <img>.
• Replace assets/img/favicon.svg and the <title> of each page.

Fonts

Fonts are declared with @font-face at the top of app.css. Drop your own .woff2 files in assets/fonts/ and change --f-body / --f-mono.

Menu

Edit the NAV array in assets/js/app.js. { label: 'Apps' } is a section heading; a link is { href: 'page.html', text: 'Name', icon: 'home', page: 'id', tag: '3' }. The item whose page equals <body data-page="…"> is highlighted.

Adding a page

1. Copy settings.html (or any page) to reports.html.
2. Change <body data-page="reports">, the title and the content inside <main>.
3. Add it to NAV. If it needs JavaScript, add a reports: function () { … } entry to the pages object in pages.js.

Icons

Write <i data-icon="bell"></i> anywhere — it becomes an inline SVG. Available names are the keys of ICONS in app.js; add your own 24×24 stroke paths there.

Theme, RTL & sidebar

Preferences are saved in localStorage under halcyon:prefs and applied by boot.js before the page paints, so there is no flash.

For demos you can also force a state with URL parameters: index.html?theme=light&dir=rtl.

To ship an RTL-only product, set <html dir="rtl" lang="ar"> in the pages and change the default in boot.js.

Charts

Charts live in section 6 of app.js and draw SVG — no library. Use them on any page:

Halcyon.onRender(function () {           // re-runs on resize and theme change
  Halcyon.lineChart(document.getElementById('myChart'), {
    labels: ['Jan', 'Feb', 'Mar'],
    series: [{ name: 'Sales', data: [12, 18, 15], color: '#7c6cff', area: true }],
    height: 260,
    format: function (v) { return '$' + v; }
  });
});
Halcyon.barChart(el, { labels: [...], series: [{ name, data, color }] });
Halcyon.donut(el, [['Direct', 40, '#7c6cff'], ['Social', 60, '#38d6e8']], ['12k', 'visits']);
Halcyon.sparkline(el, [3, 5, 4, 8], '#3ddc97');

The container needs an id (used for the gradient) and the class chart for the tooltip styles.

Connecting real data

All sample content comes from window.HALCYON in assets/js/data.js. To connect your backend, replace the arrays with your own data — for example load it before pages.js runs:

// in pages.js, users page
fetch('/api/customers').then(function (r) { return r.json(); }).then(function (list) {
  rows = list;   // same fields as data.js: id, name, email, role, country, status, orders, spent, joined, color
  render();
});

Forms call Halcyon.bindValidation(form, onValid); put your fetch() POST inside onValid. The template itself never sends data anywhere: the demo actions (save, delete, sign in) only show a toast or change data in the browser.

Sign-in, sign-up and password reset are front-end screens only. Connect them to your own authentication (your framework's auth, an identity provider, or a PHP / Node backend).

Configuration reference

Browser support

Latest Chrome, Edge, Firefox and Safari (desktop and mobile). The template uses modern CSS — custom properties, logical properties, color-mix() and :has() — supported by all current browsers. Internet Explorer is not supported.

FAQ

Do I need Node, npm or a build tool?

No. It is plain HTML, CSS and JavaScript. Edit the files and refresh.

Can I use it with React, Vue, Laravel or another framework?

Yes. The CSS works anywhere; copy the markup of a page into your templates and port the small page functions from pages.js, or keep them as they are.

Does it work offline / without internet?

Yes. Fonts are bundled and the template makes no external requests.

Which licence do I need?

The Licence covers one end product — your own or one client's. Full source covers one production domain for you and your clients, including white-label and SaaS use. Neither lets you resell or share the template itself. See LICENSE.txt.

Can I remove the “Made by Vortaxis Studio” line?

Yes, from the footer in your end product (buildFooter() in app.js). Please keep LICENSE.txt and THIRD-PARTY.txt with your copy of the source.

Support

Questions about the template are answered for 6 months after purchase (12 months with Full source); bug fixes and updates for your version are free. Write to hello@vortaxis.com with your order number. Custom work is quoted separately.

Made by Vortaxis Studio · https://vortaxis.com/store