Version
1.0.0
HTML Screens
46 files in
src/pages/JavaScript Modules
43 files in
src/js/Branding
Finza green
#66FE4C + dark base #0716051) What this project actually is
- Finza is a modern finance app HTML template with PWA capabilities.
- Mobile-first, multi-page UI built with Vanilla JS and Tailwind CSS.
- Offline-capable via
manifest.jsonandservice-worker.js. - All fonts and assets are bundled locally for self-contained deployment.
2) Tech stack (from codebase)
| Area | Implementation |
|---|---|
| Frontend | HTML pages + Vanilla JavaScript |
| CSS | tailwindcss@^4.2.2 with compiled src/css/output.css |
| Build tools | cross-env, cpx2, html-minifier-terser |
| PWA | Manifest + service worker + offline fallback. |
| Branding | Finza green #66FE4C, dark background #071605. |
3) Project structure
| Path | Purpose |
|---|---|
app.html |
PWA launcher page with splash UI and SW registration. |
index.html |
Main landing/demo page for the Finza template. |
documentation.html |
Root documentation entry point. |
Documentation/Documentation.html |
Detailed Finza project guide and file inventory. |
manifest.json |
PWA metadata, icons, display, and theme settings. |
service-worker.js |
Offline caching and navigation fallback logic. |
src/pages/ |
46 finance app screens. |
src/js/ |
43 page-specific and system behavior scripts. |
assets/ |
Icons, images, and Inter font files. |
scripts/build-root-files.js |
Copies root files and prepares production output. |
4) Build & run
| NPM Script | What it does |
|---|---|
npm run dev |
Starts Tailwind watch build for development. |
npm run build:css:prod |
Compiles minified CSS into dist/css/output.css. |
npm run copy:assets |
Copies src/assets and src/js into dist/. |
npm run copy:root |
Builds root files for deployment. |
npm run minify:html |
Minifies pages into dist/pages. |
npm run build |
Runs the full production pipeline. |
5) Runtime flow
index.htmlis the Finza demo landing page.app.htmlregisters the service worker and launches the splash flow.src/js/splashScreen.jsroutes users into onboarding.src/js/onbording.jsmanages onboarding to sign-in behavior.
6) JavaScript module map (actual files)
All files in src/js/ (43)
- account-create-legal-links.js
- account-create.js
- add-new-card.js
- add-new-contact.js
- apply-for-card.js
- beneficiary-list.js
- card-dettles.js
- change-password.js
- change-pin.js
- citizenship.js
- confirmation.js
- contact-list.js
- create-new-password.js
- exchange-success.js
- exchange.js
- face-id.js
- forgot-password.js
- home.js
- identity.js
- invoice.js
- limits.js
- make-payment.js
- my-cards.js
- navbar.js
- onboarding.js
- payment.js
- personal-data.js
- profile.js
- proof-of-identity.js
- scan-to-pay.js
- select-way.js
- send-money-tabs.js
- send-money.js
- sent-to.js
- signin.js
- splash.js
- statistic.js
- success-touch-id.js
- touch-id.js
- transfer-success.js
- verification-code.js
- verify-code.js
7) HTML page inventory (actual files)
All files in src/pages/ (46)
- account-create.html
- add-new-card.html
- add-new-contact.html
- apply-for-card.html
- beneficiary-list.html
- card-dettles.html
- change-password.html
- change-pin.html
- citizenship.html
- confirmation.html
- create-new-password.html
- exchange-success.html
- exchange.html
- face-id.html
- forgot-password.html
- help-center.html
- home.html
- identity.html
- invoice.html
- language.html
- limits.html
- make-payment.html
- my-cards.html
- notifications.html
- offline.html
- onboarding.html
- payment.html
- personal-data.html
- privacy-policy.html
- profile.html
- proof-of-identity.html
- scan-pay-success.html
- scan-to-pay.html
- security.html
- select-way.html
- send-money.html
- send-to.html
- signin.html
- splash.html
- statistic.html
- success-touch-id.html
- touch-id.html
- transfer-success.html
- verification-code.html
- verify-code.html
8) PWA behavior
- Offline support with cached app shell and fallback page.
- Manifest theme color is
#66FE4C, background is#050505. - Service worker falls back to
src/pages/offline.htmlwhen offline. - Local assets and fonts keep the app self-contained.
9) Real storage keys used
| Key | Used in | Meaning |
|---|---|---|
paymentStatus |
payment.js, verification-code.js |
Tracks whether the payment flow is complete. |
selectedCardName |
payment.js |
Chosen payment card name for checkout. |
selectedCardIcon |
payment.js |
Icon for the selected card. |
10) Quality notes (to improve project further)
Note: Finza is ready, but standardizing naming and validating service worker cache entries will improve release quality.
- File naming should be consistent across
src/jsandsrc/pagesto avoid confusion. - Verify service worker precache paths match actual source file names.
- Confirm the documentation page path is copied correctly during production build.
- Local font files are in
assets/fonts; ensure build output preserves them.
11) Last updated
Updated from repository state on 2026-06-03.