Documentation | NOVAFLUX

Quick start

Unzip the package and open index.html in any modern browser. No build step, package manager or server is required. To publish, upload the whole folder to any static host.

Demo-only features: login, signup, contact form, AI Studio, integrations, analytics data and project storage run entirely in the browser (localStorage). They need a backend before production use.

File structure

index.html ... documentation.html   16 pages
assets/css/   variables, base, layout, components, marketing, dashboard, pages, responsive
assets/js/    main, navigation, components, forms, dashboard, projects,
              ai-studio, analytics, settings, integrations, bg3d
assets/icons/ favicon.svg
documentation/customization-guide.md

Customize colors

Open assets/css/variables.css. Change --c-violet, --c-indigo and --c-lime for the brand palette, and --c-bg for the page background. The light theme overrides live under [data-theme="light"]. The 3D background colours are set inside assets/js/bg3d.js.

:root { --c-lime: #c6ff3d; --c-violet: #7c5cff; }

Customize fonts

The template uses a system font stack so it works offline with no external requests. To add a web font, place the files in assets/fonts/, declare it with @font-face in base.css and update --f-sans in variables.css.

Replace images

All visuals are CSS or inline SVG. To add photography, put files in assets/images/ and reference them with relative paths. Replace assets/icons/favicon.svg with your own icon and update the logo SVG at the top of each page.

Edit page content

Every page is plain HTML. Search for headings and replace the text. Shared header and footer markup repeats in each file, so update links in all pages when you add a page. Replace the demo brand name and the novaflux.example email address with your own.

Edit pricing

Prices live in pricing.html and the homepage as data-m (monthly) and data-y (yearly) attributes on each .amt element. The comparison table is a normal HTML table.

Dashboard data

Sample projects and activity are defined in assets/js/dashboard.js inside NF.data. Edit the arrays or replace them with a fetch call to your API. Analytics numbers are generated in analytics.js.

Connect a real AI API

AI Studio calls make() in assets/js/ai-studio.js. Replace it with a request to your own server, which holds the provider key. Never put secret API keys in browser code.

const res = await fetch("/api/generate", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ type, tone, length, prompt })
});
const { text } = await res.json();

Connect a real backend

Replace NF.S (localStorage helpers in main.js) with API calls for projects, settings and integrations. Handle authentication, validation and password hashing on the server; the forms in forms.js only validate input for convenience.

3D background

bg3d.js draws a WebGL scene of glowing nodes and links behind every page. Tweak CONFIG at the top of the file (node count, bokeh, travel distance). Remove the script tag to disable it; a plain gradient background remains. It pauses in the light theme and respects reduced-motion settings.

Browsers and credits

Tested in current Chrome, Edge, Firefox and Safari. WebGL falls back to a CSS background when unavailable.

All code, icons and illustrations were created for this template. No third-party libraries, stock photos or web fonts are included.

Template documentation