PVR
GitHub
Docs
Taxi CRM 2026
Getting started

Getting Started

What you receive, how to preview the template, and how to create a new page.

3 min read
Updated June 20, 2026

Live demo: explore every page at pvrtechstudio.com/taxi-crm/html.

What you receive

A compiled Bootstrap 5 admin UI kit: ready-to-use HTML pages plus all their CSS, JS, fonts, images and translations. There is no build step — open or serve the files as-is.

app/
├── index.html, roleMaster.html, formElements.html, …   ~180 ready-made pages
└── assets/
    ├── css/
    │   ├── style.css         ← the single stylesheet every page links
    │   └── style.min.css     ← minified version (use this in production)
    ├── js/
    │   ├── core/app.js       ← shared helpers, loaded on every page
    │   └── pages/<feature>/<page>.js   ← one script per page
    ├── plugins/              ← bundled libraries (Bootstrap, jQuery, DataTables, …)
    ├── locales/              ← translation JSON (en, fr, de, es, pt, zh, ja, nl)
    └── img/                  ← logos, favicons, avatars, icons, flags

You only ever edit files inside this folder. There are no source files to rebuild.

Serving the files

Paths inside the pages are relative, so the kit works from any location as long as the assets/ folder stays next to the .html pages.

  1. Copy the whole folder into your project / web root.
  2. Open index.html directly, or serve the folder with any static server:
    • VS Code Live Server
    • python -m http.server
    • nginx / Apache / IIS pointing at the folder
    • The included serve.bat
  3. A couple of features (web fonts, the FontAwesome kit, translations loaded by fetch) work best when served over http:// rather than opened as a file:// path.

Tip: Some browsers block fetch() on file:// URLs, which the i18n engine uses to load translations. If text shows the raw key instead of the translation, serve the folder over HTTP instead of double-clicking the file.

Anatomy of a page (quick view)

Every page shares the same structure. Top to bottom:

  1. <head> — plugin CSS, then assets/css/style.css last; core libraries and app.js.
  2. Loading screen — <div class="loading-screen visible">.
  3. Header / top navbar — <header class="d-flex app-page flex-column">.
  4. Sidebar — <aside class="app-sidebar …">.
  5. Main area — <main class="… has-sticky-header"> with .page-header and .pageWrapper (your content goes in .pageWrapper).
  6. Footer — <footer class="app-footer">.
  7. Page script — <script src="assets/js/pages/<feature>/<page>.js"> at the very end.

The full markup is documented in 02 — Layout.

Making a new page

The fastest, most reliable approach is to copy an existing page that's closest to what you need, then change its content:

  1. Copy a similar page (e.g. roleMaster.html) to your new file name.
  2. Edit the content inside <div class="… pageWrapper"> only — leave the header, sidebar and footer intact.
  3. Update the page header: the <h5> title and the .breadcrumb items in .page-header.
  4. Set the active sidebar item: add the active class to the matching menu entry (the sidebar markup is identical on every page — copy it from a page in the same section).
  5. Swap the page script tag at the bottom to your own file under assets/js/pages/<feature>/, or remove it if the page needs no custom JS.
  6. Add translations if you use data-i18n keys — see 09 — i18n.

Next steps

Was this page helpful?