The guide to your new workspace.

Start here

Lumoryn is a static HTML5, CSS3 and vanilla JavaScript template with no framework dependencies. It includes a public website, a creator workspace and a separate admin demonstration. No frontend compilation or package installation is required.

Preview locally

Unzip the package, open a terminal in the folder containing index.html, and run:

python3 -m http.server 8080

# Windows alternative
py -m http.server 8080

Visit http://localhost:8080. A local server gives local storage a consistent origin. Double-clicking HTML files can show the static pages, but file-protocol storage and browser audio behavior vary.

Package structure

lumoryn-ai/
  index.html               Public landing page
  features.html            Public feature tour
  pricing.html             Sample pricing
  app/                     Creator workspace pages
  admin/                   Separate management portal
  auth/                    Login, registration and reset
  documentation/           This guide
  assets/
    css/lumoryn.css         Shared tokens and responsive styles
    js/data.js             Fictional seed data and page registry
    js/core.js             Shared UI behavior
    js/motion.js           Scroll reveals and landing animations
    js/workspace.js        Creator demo interactions
    js/admin.js            Admin demo interactions
    js/public.js           Public and authentication behavior
    images/brand/          Lumoryn SVG mark
    images/gallery/        Original gallery artwork
  source/build.py          Optional static page generator
  source/serve.mjs         Optional dependency-free Node server
  page-manifest.json       Actual page inventory
  source/artwork/          Gallery artwork generator
  README.txt
  CREDITS.txt

Branding and design

Every screen shares one design language: a white and indigo palette, a fixed top bar, left navigation, hero banners and visual creation cards.

Colors and typography

Edit the variables at the top of assets/css/lumoryn.css. The primary accent is #3f3eed and the heading color is #083a5e. DM Sans is loaded from Google Fonts. No font binaries are included. A system-font fallback keeps the layout usable offline.

:root {
  --primary: #3f3eed;
  --ink: #083a5e;
  --radius: 14px;
  --sidebar: 268px;
  --font: 'DM Sans', system-ui, sans-serif;
}

Brand name and logo

Edit the brand helper and page copy in source/build.py, then run python3 source/build.py. This rebuilds the static HTML and seed-data registry. You may also edit generated HTML directly. A subsequent rebuild will overwrite direct HTML edits.

Adding pages

Add a call to write_page() in the relevant builder function. Add the new navigation item in app_nav() for a workspace page, or in public_shell() for a public navigation link. Rebuild the pages and check all relative paths.

Images and icons

The gallery uses original abstract artwork created for Lumoryn. You can regenerate or restyle it with source/artwork/generate_gallery.py. The small interface icons and Lumoryn mark are inline SVG. Replace an image with your own licensed asset of a similar aspect ratio. Use meaningful alt text for content images and empty alt text for decoration.

Interactive features

Shared behavior includes responsive navigation, sidebar collapse, a theme switch, keyboard page search with Ctrl/Cmd + K, native dialogs, table search, status filters, pagination, CSV export, copy controls and dismissible feedback.

Creator workspace

Create, edit and delete projects; create template-based drafts; save, read and remove documents; use local chat examples; filter prompts and save favorites; explore included image samples; preview browser voices; create fake API keys; simulate team invitations; update a local profile and settings.

Admin portal

Add and edit fictional users; change demo roles, statuses and plans; review content records; maintain local prompt entries; configure fictional model presets; create and reply to support tickets; view a local audit log; update the platform configuration preview.

Deliberate boundaries

The initial dashboard metrics, charts, payment ledger and aggregate reports are fixed illustrative data. Changing a local user does not recalculate platform revenue. Published admin prompts appear in the creator library on the same browser and origin, and their instructions appear in the local draft context. They do not publish to a real service, and integration switches do not connect external accounts. Support replies and invitations do not send emails.

Browser audio

Voice studio uses the available SpeechSynthesis voices when supported. Availability and quality vary. It does not create a downloadable audio file. Only the written script can be downloaded.

Sample data and saved state

assets/js/data.js contains fictional records. Interactive changes use keys beginning with lumoryn: in local storage; the theme uses lumoryn-theme. A guarded memory fallback is used when storage is unavailable.

Never enter real passwords, provider secrets, payment data or confidential information in the demo. Authentication forms never store or transmit passwords. Fake keys use the DEMO_ prefix and have no service access.

Reset

Use Reset demo data on either settings screen, confirm the action and reload. This removes only Lumoryn's namespaced demo storage and restores seed records. It does not clear unrelated browser data.

Exports

CSV exports include the filtered table records, including matching rows on other pagination pages. Cells that could be interpreted as spreadsheet formulas are escaped. Downloads are created in the browser without a server.

Connecting a real backend

Replace local handlers with your application's API calls. Keep provider secrets and payment processing on your server. Apply authentication, permissions and input validation at every protected endpoint; hiding a button in the browser is not an access control.

Suggested integration boundaries

POST   /api/auth/session        Real sign-in
GET    /api/projects            Authorized workspace projects
POST   /api/projects            Create a project
PATCH  /api/projects/:id        Update an authorized project
POST   /api/generations         Validated AI request
GET    /api/documents           Saved user documents
GET    /api/admin/users         Authorized admin operation
POST   /api/support/replies     Persist and deliver a reply

These paths are illustrative contracts only. No endpoint is implemented in this package. Add database persistence, workspace isolation, server-side quotas, provider timeout handling, rate limits, payment webhooks, email delivery and operational logging for a live product.

Replace sample privacy and terms pages with accurate information about your deployed service.

Deployment

Upload the contents of this folder to a static hosting directory. On a standard static web host, index.html is the public entry point. The app and admin folders remain separate paths on the same site.

Plesk or shared hosting

For a standalone static site, place the package contents in the domain's configured document root, commonly httpdocs. Avoid replacing files in an existing application without a backup. No PHP or Node runtime is required to serve these HTML files.

Static hosting platforms

Use the folder as the publish directory. There is no build command required and no single-page-app fallback rewrite is needed. Configure your host to serve the included 404.html as a custom error page where supported.

Subfolder deployment

All internal assets and page links use relative paths, so the template can be hosted inside a subfolder. Keep the folder structure intact. Changing the origin or port creates a different local-storage area.

External font requests

Google Fonts requires network access. Update your site's content security policy accordingly or switch to a system-font stack. The optional inline theme initialization can be moved into an external script when configuring a strict CSP.

Accessibility and responsive behavior

The template uses semantic headings, labeled form controls, real buttons, keyboard focus outlines, a skip link, native dialog focus handling, descriptive icon-button labels, reduced-motion support, responsive table scrolling and mobile navigation controls.

These are implementation features, not a claim of formal accessibility certification. Recheck contrast, keyboard order and screen-reader output after your own content or theme changes.

Browser support

The implementation targets modern browsers with support for CSS Grid, dialog elements, local storage and JavaScript ES2020. Browser voice playback is optional and reports an unavailable state when unsupported.

Page inventory

Credits

DM Sans is referenced through Google Fonts. Interface icons and branding use SVG rather than an icon font.

All gallery images and the Lumoryn mark are original artwork created for this template. See CREDITS.txt for details.

Reference resources: DM Sans on Google Fonts.