Documentation

2. Installation guide

Follow these steps to view the template on your computer.

1. Download the zip file from the place where you bought or downloaded Ladoni (for example, your marketplace account or email link).
2. Extract (unzip) the files to a folder you can find easily, such as Desktop/Ladoni-template.
3. Open the home page in your browser. Go to the html folder and double-click index.html. It should open in Chrome, Edge, Firefox, or Safari.
4. No server is required for basic viewing. You can browse pages by clicking links as long as you keep the folder structure the same.

3. Folder structure

Each main folder has a simple job. Keep names and locations the same unless you know how to update paths inside HTML files.

html/

Main website pages: home, AI tools hub and individual tool screens, about, pricing, contact, login, register, dashboard, and more. Start editing here when you change wording or page sections.

assets/css/

Styles. tailwind.css holds layout utilities. style.css adds the theme (background, glass effects, buttons). Change colors and theme tokens mainly in style.css or Tailwind classes in HTML.

assets/js/

Scripts. main.js handles theme, mobile menu, and small UI helpers. plugins.js renders dashboard charts when Chart.js is loaded (see the dashboard page). Edit only if you need different behavior.

assets/images/

Images and graphics: logos, demo art, and icons saved as files. Replace files here when you swap branding, or change the src paths in HTML to point to your own images.

assets/vendors/

Optional folder for third-party libraries (for example, a slider or chart library) if you add them. The default Ladoni package may ship without this folder; you can create it and link scripts from your HTML when you need extra plugins.

demo/

Separate mini layouts (such as chat UI, AI writer, CRM-style dashboard). Use them as examples or starting points for new pages.

documentation/

This help site. You can edit documentation/index.html to match your own product name and support details.

4. How to customize

• Change text. Open any file in html/ with a text editor (VS Code, Notepad++, or similar). Edit headings, paragraphs, and button labels directly in the HTML. Save the file and refresh the browser.
• Change colors. For global colors and glass effects, edit assets/css/style.css (look for :root variables). For one-off boxes and spacing, change Tailwind classes in the HTML (for example bg-indigo-600). If you change many Tailwind classes, rebuild tailwind.css using the command in README.txt.
• Replace images. Put your logo or photos in assets/images/ and update the src="..." attribute in HTML to match your file name.
• Edit JavaScript if needed. Use assets/js/main.js for theme and navigation behavior. Use assets/js/plugins.js for dashboard chart widgets. Back up a copy before you change code.

5. Using assets and libraries

The dashboard page (html/dashboard.html) loads Chart.js from a CDN and renders bar, line, and doughnut charts via assets/js/plugins.js. Other pages stay lightweight and do not load Chart.js unless you add it yourself.

If you want libraries such as Chart.js (rich charts) or Swiper (touch sliders), you can add their files under assets/vendors/ and include <script> / <link> tags in your HTML. Follow each library’s official install guide.

Fonts: Inter is loaded from Google Fonts inside style.css. Icons on pages are mostly inline SVG (simple vector icons drawn in the HTML). No separate icon font pack is required for the default template.

6. Credits

• Fonts: Inter (Google Fonts).
• Icons: Inline SVG icons included in the HTML (stroke icons suitable for UI).
• CSS: Tailwind CSS (compiled to tailwind.css) plus custom theme in style.css.
• JavaScript: Plain scripts in assets/js/ — no jQuery required for the default kit.
• Images: Logo and demo SVGs under assets/images/ are for demonstration. Replace them with your brand assets for production. Some pages may reference remote demo photos (for example avatar URLs); swap those for your own hosted images if you prefer.

7. Support

For support and inquiries, contact us directly on WhatsApp. We usually respond within a few hours.

WhatsApp number: +923276874145