Make HaneenWeb your own.

Getting started

Open index.html to use the dashboard. All fonts and assets are local; installation and an internet connection are not required. For hosting, upload the interface files to a static web server.

To customize the source, open the source directory and run the commands below with Node.js 20 or later. No npm packages are required.

npm run build
npm run check
npm run preview

Folder structure

The package includes a ready-to-use interface at the root, editable code in source, and publishing material in docs/marketplace. This edition is independent and does not require the Arabic files.

src/
  locales/          # Edition text
  templates/        # Shared shell and page renderers
  scripts/          # Core and page interactions
  styles/           # Tokens, shell, components, pages
  assets/           # Original identity and local fonts
scripts/
  build.mjs         # Generate the static edition
  check.mjs         # Verify links, locales, and pure helpers
  serve.mjs         # Local preview server
dist/               # Generated, runnable interface

Customization

Change colors, spacing, and typography in src/styles/tokens.css. Shell styles live in layout.css, shared UI in components.css, and page layouts in pages.css. Dark mode and alternative accents use the same token contract.

Text lives in src/locales/en.mjs. Navigation is shared in src/templates/layout.mjs. To add a page, register its name in pageNames in ui.mjs and its renderer in scripts/build.mjs. Add its localized title and a navigation link when needed.

Logical CSS properties keep layouts direction-aware. Chart chronology remains stable; navigation and interface alignment follow the document direction.

Component APIs

The shared API is available as window.HaneenWeb after core.js loads. It provides toast(message) for text notifications, dialog(title, trustedHtml, setup) for dialogs, validate(form) for validation, and downloadCSV(name, headers, rows) for export.

data(type) reads demo records. saveData(type, rows) saves them and returns whether persistent storage succeeded. Use notifySave(result) to report the correct outcome. Marketplace previews may deny storage; the page then uses memory instead.

Escape untrusted values with HaneenWeb.escape(value) before placing them inside HTML templates, or use textContent. Module comments explain responsibilities and non-obvious decisions.

HaneenWeb.toast(HaneenWeb.s.saved);

// A plain-text value is escaped before it enters HTML.
HaneenWeb.dialog(HaneenWeb.s.details,
  '<p>' + HaneenWeb.escape(userText) + '</p>');

UI LIBRARY

This edition includes 72 pages. The catalogue lives in templates/pages/library.mjs, its styles in styles/library.css, and interactions in scripts/library.js. Additional text lives in locales/library-en.mjs. Expand “View HTML example” to inspect the exact markup used by a component.

Combine buttons, cards, icons, form controls, a validated wizard, tables, charts, and layouts for your own use case. The editor supports a small safe Markdown subset, not full rich-text HTML editing. File selection only displays local names and sizes. Native date, time, and number controls follow browser settings.

The pricing page demonstrates a layout; it is not pricing for the HaneenWeb template. Buttons do not create subscriptions or accounts. See docs/marketplace/REFERENCE-REVIEW.txt for the reference comparison.

Premium component contracts

premium.mjs and premium.css contain business screens and commerce, content, people and metric cards. Behavior is split across premium.js, premium-apps.js, premium-commerce.js and premium-components.js. Additional text lives in premium-en.mjs.

HaneenWebPremiumAPI.initGrid(element) is idempotent. Supply the example markup and a schema name through data-premium-grid. Instances provide render(), edit(id), export(selectedOnly) and destroy(); destruction removes their listeners and permits reinitialization.

HaneenWebPremiumUtils.invoiceTotals(lines, discount, tax) returns subtotal, discount, tax and total in integer cents. validateFiles(files, options) checks metadata only. Read docs/START-HERE.txt for events, integration and scope.

The toolbar customizer persists appearance, density, navigation and content width. Example roles do not enforce server authorization. Checkout, invoices, campaigns and workflows do not connect to live payment or email services.

Accessibility

The interface includes a skip link, labeled controls, visible focus, and native dialogs with Escape support. Tabs support arrow keys, Home, and End. Task status selects provide an alternative to dragging. A data table accompanies the chart.

Motion respects the system preference. Check contrast after changing colors, and test with mobile devices, a keyboard, and a screen reader. These features are not a claim of accessibility certification.

What the demo does

Create and edit projects, customers and tasks; move tasks; filter, sort and export tables; create and print sample invoices; add local events and messages; and save preferences. Reset the sample data from Settings.

No server, database, authentication, or payments backend is included. Account pages demonstrate validation only. Passwords are never stored, and reset emails are never sent. Notifications, reports, and metrics are illustrative. Add your own backend, server-side validation, and authorization before handling real data.

Overview metrics illustrate a reporting period; order and customer pages use a smaller, separate sample dataset. Sample dates are October–November 2026. The calendar supports navigation to any month.

Licensing & credits

The original code and design are by Haneen Web. Ownership and distribution notes are in docs/LICENSE.txt. Manrope and IBM Plex Sans Arabic use the SIL Open Font License; their notices are included in docs/licenses.

Icons, the HaneenWeb mark, and charts are original template assets. No AdminLTE, Bootstrap, or jQuery files are included. Font sources are documented in docs/THIRD-PARTY-NOTICES.txt.