Nexora Template Documentation

Introduction

Thank you for purchasing Nexora — a next-gen AI SaaS & Agent Platform web template. Nexora is built with semantic HTML5, modern CSS3 (custom properties / design tokens), and vanilla ES6+ JavaScript — no build tools or frameworks required.

This documentation covers everything from installation to deep customization. If you get stuck, jump to the Support section at the bottom of this page.

What's Included

• Homepage (index.html) — hero, stats, logo cloud, features, AI showcase tabs, steps, pricing preview, testimonials, FAQ, CTA
• Pricing Page (pricing.html) — monthly/yearly toggle and full feature comparison matrix
• AI Playground Demo (playground.html) — simulated chat / image / audio generator UI
• Blog Listing (blog.html) and Blog / Guide Single (blog-single.html)
• Contact Page (contact.html) — validated contact form (client-side only)
• Documentation (documentation.html) — this file
• Admin Dashboard (admin/dashboard.html) — stat cards, recent activity, plan usage overview
• Admin Settings (admin/settings.html) — pricing plan editor, AI API key fields, default AI model per tier
• Full RTL / Arabic language support with a live EN ⇄ عربي switch on every page
• Modular CSS (css/style.css, css/rtl.css, css/admin.css) and JS (js/main.js, js/playground.js, js/i18n.js, js/admin.js)
• Royalty-free image placeholders and SVG logo/favicon assets

Browser Support

Nexora has been tested and verified on the latest two versions of the following browsers:

The template is built mobile-first and is fully responsive from small mobile devices (320px) up to 4K desktop displays (2560px+).

Installation

Since Nexora is a pure HTML/CSS/JS template with no build step, installation is simple:

1. Unzip the downloaded package. You'll find a documentation/ folder and the main template folder.
2. Upload the entire template folder contents to your web server via FTP, or drag-and-drop it into a static host (Netlify, Vercel, Cloudflare Pages, GitHub Pages).
3. Open index.html in your browser to preview locally — no local server is strictly required, though one is recommended for correct relative path behavior.
4. Replace placeholder content, images, and links with your own branding (see Logo & Branding).

Quick Start (Local Preview)

 Copy# Using Node.js "serve" package
npx serve .

# Or using Python 3
python3 -m http.server 8080

Folder Structure

The template follows a clean, flat structure for easy navigation:

Customizing Colors & Fonts

All colors, spacing, radii, and transitions are defined as CSS custom properties (variables) at the top of css/style.css inside the :root selector. Changing a single variable updates it across the entire site.

 Copy:root {
  --bg-base: #0B0F19;        /* Main dark background */
  --accent-cyan: #22D3EE;    /* Primary accent color */
  --accent-purple: #A855F7;  /* Secondary accent color */
  --gradient-primary: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
  --font-heading: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
}

To change the typography, update the Google Fonts <link> tag in the <head> of each HTML file, then update the --font-heading / --font-body variables to match your new font family names.

Replacing the Logo & Branding

The Nexora logo and favicon are lightweight inline SVG files located in images/logo.svg and images/favicon.svg. To replace them:

1. Export your own logo as an SVG (preferred for crispness) or PNG file.
2. Replace images/logo.svg and images/favicon.svg with your files (keep the same filenames to avoid editing every page, or update every <img src>/<link rel="icon"> reference).
3. Update the alt text on every <img> tag referencing the logo to match your brand name for accessibility and SEO.
4. Update the <title> and meta description tags in each HTML file's <head>.

 Copy<a href="index.html" class="brand" aria-label="Your Brand — Home">
  <img src="images/logo.svg" alt="Your Brand logo" width="150" height="32">
</a>

Editing Sections & Content

Every page is composed of clearly commented HTML sections (e.g. <!-- ===== HERO SECTION ===== -->). To edit content:

• Locate the relevant section comment in the HTML file.
• Edit text directly between tags — headings use semantic <h1>–<h6> tags, keep the hierarchy intact for SEO.
• To duplicate a repeating component (e.g. a pricing card, feature card, FAQ item, testimonial slide), copy the entire block (from the opening to the matching closing tag) and paste it as a sibling, then edit its content.
• Icons use Font Awesome Free classes (e.g. fa-solid fa-robot) — browse the free icon library and swap class names as needed.

RTL & Arabic Language Support (i18n)

Nexora ships with a complete, dependency-free bilingual engine (English / Arabic) and full Right-to-Left (RTL) layout support across every page, including the Admin Dashboard.

• js/i18n.js — the translation dictionary and DOM-sync engine. Elements tagged with data-i18n, data-i18n-html, data-i18n-placeholder, or data-i18n-aria-label are automatically translated when the language changes.
• css/rtl.css — loaded after css/style.css on every page. It contains only the [dir="rtl"] overrides needed for the handful of elements that use physical (left/right) CSS instead of logical/flexbox-driven layout — everything else mirrors automatically.
• A language switch (EN / عربي) is built into the header navigation (desktop and mobile) and the Admin sidebar. The choice is saved to localStorage under the key nexora-lang and can be deep-linked for QA with ?lang=ar or ?lang=en.
• A tiny inline script in every page's <head> sets lang/dir on <html> before first paint to avoid a flash of incorrectly-aligned content (FOUC).

Adding or Editing a Translation

 Copy// 1. Add a unique key to BOTH the "en" and "ar" objects in js/i18n.js:
en: { "hero.ctaPrimary": "Start Free Trial" }
ar: { "hero.ctaPrimary": "ابدأ تجربتك المجانية" }

// 2. Tag the matching HTML element:
<a href="pricing.html" data-i18n="hero.ctaPrimary">Start Free Trial</a>

To add a third language, add a new top-level key (e.g. "fr") to the NEXORA_I18N dictionary in js/i18n.js and extend the .lang-switch markup with an additional .lang-option button using data-lang="fr".

Admin Dashboard & Settings

Nexora includes a visually matching Admin Dashboard Suite at admin/dashboard.html and admin/settings.html, styled with css/admin.css and powered by js/admin.js.

What's Included

• Dashboard — revenue, active users, API call count, and active-agent stat cards; a recent activity feed; a quick-actions panel; and a plan usage overview.
• Settings — a pricing plan & package-limit editor (price, credits, agents, team seats per tier), AI provider API key fields (OpenAI, Replicate, Anthropic, ElevenLabs) with a show/hide toggle, and a default AI model selector per pricing tier.

Connecting a Real Backend

Every form in admin/settings.html is wrapped with data-admin-form and already wired to js/admin.js's save/reset handlers, which currently only show a confirmation toast. Replace the placeholder logic with a real fetch() call:

 Copy// Inside js/admin.js — form submit handler
const formData = new FormData(form);
const payload = Object.fromEntries(formData.entries());

const res = await fetch("/api/admin/settings", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  credentials: "include", // send auth session/cookie
  body: JSON.stringify(payload)
});

JavaScript Hooks & API Integration Guide

Nexora ships with vanilla JavaScript — no frameworks, no bundlers. The two key files are:

• js/main.js — site-wide interactions (navigation, FAQ accordion, pricing toggle, testimonial slider, contact form validation).
• js/playground.js — the AI Playground demo logic (simulated chat responses).

Connecting a Real AI API to the Playground

The Playground's sendMessage() function currently calls a local getMockReply() helper. To connect a real backend or LLM API, replace the mock call with a fetch() request, for example:

 Copy// Inside js/playground.js — replace getMockReply(text) usage with:
async function fetchAIReply(userText) {
  const response = await fetch("https://your-api-endpoint.com/v1/chat", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ message: userText })
  });
  const data = await response.json();
  return data.reply;
}

Connecting the Contact Form

The contact form in contact.html performs client-side validation only (required fields, email format, checkbox consent) inside initContactForm() in js/main.js. To actually send emails, integrate a form backend such as Formspree, Netlify Forms, or your own API endpoint inside the form's submit event handler, replacing the demo success-banner logic with a real fetch() POST request.

Available Custom Data Attributes

Accessibility Notes

• Color contrast ratios meet WCAG 2.1 AA for body text and interactive elements against the dark background.
• All interactive controls (buttons, links, form fields, tabs, accordion) have visible :focus-visible outlines.
• Decorative icons use aria-hidden="true"; meaningful icons/images include descriptive alt or aria-label text.
• The FAQ accordion, tabs, and pricing switch use proper ARIA roles/states (aria-expanded, role="tablist", aria-selected, role="switch", aria-checked).
• A "Skip to main content" link is included at the top of every page for keyboard users.
• Animations respect the prefers-reduced-motion media query.

Performance & SEO

• No JS frameworks or heavy libraries — only vanilla JS, Font Awesome, and Google Fonts are loaded externally.
• Images use loading="lazy" and explicit width/height attributes to prevent layout shift (CLS).
• Animations use transform and opacity (GPU-accelerated) rather than layout-triggering properties.
• Each page has a unique, descriptive <title> and meta description for SEO.
• Proper heading hierarchy (single <h1> per page, logical <h2>–<h6> nesting).
• Semantic HTML5 landmarks (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) used throughout for crawlability.

Credits & Licensing

Nexora uses the following third-party, free-for-commercial-use resources:

License

This template is distributed under the Envato Marketplace Regular / Extended License you purchased it under. Preview images used on the live demo are for demonstration purposes only — please replace them with your own licensed assets or properly licensed stock photography before deploying to production, unless your license/source explicitly permits reuse.

Changelog

Version 1.1.0 — RTL / Arabic + Admin Dashboard Update
- Full RTL (Right-to-Left) and Arabic language support (EN ⇄ عربي switch)
  across every page, including the Admin Dashboard (js/i18n.js, css/rtl.css)
- New Admin Dashboard Suite: admin/dashboard.html (stat cards, activity feed,
  plan usage) and admin/settings.html (pricing plan editor, AI API key
  fields, default AI model per tier) — front-end only, documented hooks
- Tajawal & Cairo Arabic webfonts added alongside Inter & Space Grotesk

Version 1.0.0 — Initial Release
- Homepage, Pricing, Playground, Blog (listing + single), Contact, Documentation pages
- Dark mode glassmorphism design system with cyan/purple gradient accents
- Interactive AI showcase tabs, pricing toggle, testimonial slider, FAQ accordion
- Simulated AI chat/generator playground demo
- Full WCAG 2.1 AA accessibility pass
- Client-side contact form validation

Support

Have a question that isn't covered here? Reach out via our Contact page, and our team will get back to you within 24–48 hours on business days.