Premium Category Products

Fitova – Fitness & Workout Tracker — PWA Mobile HTML Template

Name: Fitova - Fitness & Workout Tracker — PWA Mobile HTML Template | GplPixel
Price: 232.00 INR
Availability: InStock

-67%

Add to wishlist

Fitova – Fitness & Workout Tracker — PWA Mobile HTML Template

Best Value

✨ Latest Version

Rs232.00Rs696.00Save 67%

Safety, Guarantees Files
Malware-Free (Clean) Files
License: GPL Preactivated
Unlimited Site & Domain Usage

Add to Cart Buy Now

Categories: Premium, Site Templates Tags: cross-browser fitness template, exercise html template, fitness app, fitness pwa mobile html, Fitova - Fitness & Workout Tracker — PWA Mobile HTML Template, gym pwa html template, health platform, mobile app pwa template, mobile-first pwa html template, pwa template, sport, training, workout tracker

Fitova - Fitness & Workout Tracker — PWA Mobile HTML Template

Table of Contents

Introduction
Key Features
Quick Start
Folder Structure
Included Pages
User Flows
Fonts & Typography
Customization
JavaScript Architecture
PWA Configuration
Credits & Libraries
Support

1. Introduction Thank you for purchasing Fitova — a modern, mobile-first PWA template designed for fitness apps, workout trackers, and health platforms. It bridges the gap between web and native apps, delivering a true app-like experience directly in the browser — no App Store required. Built entirely with Tailwind CSS and Vanilla JavaScript (no frameworks, no dependencies beyond Chart.js), Fitova is a complete, production-ready foundation with a stunning dark-green design, smooth micro-interactions, and a fully dynamic data layer powered by localStorage. 2. Key Features Feature Details PWA Ready Service Worker + Web App Manifest — fully installable, offline-capable. Tailwind CSS Utility-first CSS via compiled output.css. Tailwind config included for rebuilding. W3C Semantic HTML Clean HTML5 with proper ARIA roles, labels, and landmarks throughout. Mobile-First (430px) Designed and optimized exclusively for handheld devices. Fully Dynamic Data Goals, metrics, bookmarks, food logs — all via localStorage, ready to connect to any real API. Food Scanner Native camera access, gallery upload, animated green scan overlay, live nutrition results. Chart.js Integration Interactive line chart for calories, steps, distance, heart rate, and weight tracking. Bottom Navigation Active icon swapping, context-aware active state detection by URL filename. Toast Notifications Global showToast(msg, type) used everywhere — no browser alerts. Safe Area Support iPhone notch & home indicator handled via CSS env() variables. Retina Ready SVG icons and WebP images for crisp display on all screen densities. Cross-Browser Tested on Chrome, Safari (iOS), Firefox, and Edge. 3. Quick Start

Fitova No build step required to view the template. Simply open the files in a local server:
Fitova Option A — Live Server (Recommended): Install the Live Server extension in VS Code. Right-click app.html → Open with Live Server. The splash screen will auto-redirect to onboarding.html after 2.5 seconds.
Option B — Rebuild Tailwind CSS: Only needed if you modify tailwind.config.js or add new Tailwind classes: Fitova npm install npm run build # Compiles src/css/input.css → src/css/output.css Note: The compiled output.css is already included. You do not need to run npm to view or use the template.
Entry Point: app.html → onboarding.html → login.html → home.html. Open app.html in the project root as your starting point. It is the splash screen and the app’s entry point.

6. User Flows

First Launch Flow: app.html → onboarding.html → login-options.html → signup.html → gender.html → birthday.html → weight.html → home.html
Returning User Flow: app.html → login-options.html → login.html → home.html
Password Reset Flow: login.html → forgot-password.html → check-email.html → create-new-password.html → reset-password.html → login.html
Workout Flow: home.html → search.html → search-found.html → details.html → workout-sets.html → play.html
Food Scanner Flow: scan.html → Upload / Camera → Scan Animation → Tap to view → scan-result.html
Profile & Settings Flow: profile.html → settings.html → edit-profile.html / security.html / language.html / help-and-support.html

7. Fonts & Typography

Poppins — Primary Font: Used for all body text, headings, labels, buttons, and UI elements across every page.
Anek Bangla — Brand Only: Used exclusively for the Fitova brand logotype on app.html (splash screen) only.
Font Loading: Both fonts are loaded from Google Fonts in the <head> of the relevant pages.
Tailwind Font Config: fontFamily: { sans: [“Poppins”, “system-ui”, “sans-serif”] }
Font Sizes Used: text-xs (12px), text-sm (14px), text-base (16px), text-lg (18px), text-xl (20px), text-2xl (24px), text-[44px] (44px for Fitova logotype)

8. Customization

Brand Color: The primary brand color is #94F608. Change it in tailwind.config.js and src/css/custom-styles.css.
Background Images: All hero images are CSS utility classes in custom-styles.css. To swap an image, find its class and update the URL.
Changing Fonts: Replace the Google Fonts <link> in all HTML <head> tags with your chosen font. Update tailwind.config.js fontFamily.sans to the new font name. Rebuild CSS: npm run build.
Bottom Navigation Links: Edit src/js/navbar.js to update routes and active-state detection.

9. JavaScript Architecture

All JavaScript follows a strict IIFE pattern — each page has one self-contained file with no global variable leaks between pages.
Script Load Order: Always load scripts in this order before </body>: toast.js, navbar.js, then page-specific JS.
Toast Notifications: Use showToast(“Workout saved! ”, “success”); showToast(“Please fill all fields”, “error”); showToast(“Coming soon!”, “info”);
localStorage Data Keys: userGoal, userProfile, favoriteWorkouts, recentSearches, weeklyActivity, healthMetrics, trainerProfile, scannedImage.

10. PWA Configuration

Fitova is fully PWA-ready. Users can install it on their home screen like a native app.
manifest.json: Contains app name, icons, theme color, and start URL.
Service Worker: Add new pages/assets to the cache list in service-worker.js.
Important: PWA features require HTTPS in production. Use localhost for local development.

11. Credits & Libraries

Tailwind CSS v3 — All styling (utility-first CSS)
Chart.js v4 — Weekly progress line chart on statistic.html
Google Fonts — Poppins (primary typeface), Anek Bangla (logotype)
Custom SVG Icons — All UI icons (included in assets/icons/)
WebP Images — All app images (optimized for web)

12. Support If you have questions beyond the scope of this documentation, please contact me via the ThemeForest item page. I typically respond within 24–48 hours. Before reaching out, please:

Read this documentation fully.
Check that you are opening files through a local server (not by double-clicking the HTML file directly in Finder/Explorer).
Check the browser console (F12) for any error messages.
Tip: Use the VS Code Live Server extension for the smoothest development experience. It handles all path resolution automatically.

(Only For Premium Category Products !)

1. All digital products are the most recent version, with no possibility of free updates. After payment, you can request an update to the most recent version for 5 days if a new version is released. We free support within 5 days.

2. If a license is required (Excludes WHMCS license , we provide only method not license), please contact us via email or ticket for assistance with activation. Our license is only valid for activation and does not include support.

3. We provide Mobile, PHP script installation services for $19.90 / ₹1700. Please create a backup after installation as we do not support re-installation. For mobile app source code, we do not offer installation services.

4. If you have any questions, please contact us by email [email protected] or create a ticket on this page

5. Please note that any digital products presented on the website do not contain malicious code, viruses or advertising. You will receive the original files from the developers. We do not sell any products that have been downloaded from other websites.

6. The response time can last up to 6 hours.

(Only For Membership Category Products !)

Benefits of our Membership Plans

Instant access to all plugins and all themes including all future releases
Unlimited domain usage
Regular Updates as of when available. Usually, updates are released daily.
Before purchasing, please read the Terms and Conditions & Refund Policy.
If you have any questions, please first read the FAQs.
If you haven’t found the answer to your question, please contact us, and we will respond ASAP.
Please note that any digital products on the website do not contain malicious code, viruses, or advertising. We buy the original files from the developers. We do not sell any products downloaded from other sites.
Buy or download for FREE by subscribing to our VIP Membership Plan. Join the club of more than 1100+ happy members. This is the same theme as sold by the developer.

Updates:

We offer frequent updates for one year from the date of purchase. After this period, you have to purchase the item again to receive further updates, we also offer lifetime updates as a second option.
We regularly update products as soon as we are notified about an update, we go and download it from the author and update it on our site, but In case the current version of the product is not the latest, You can request an update for the product by contact form.
We send regular emails advising when products have been updated so please be sure to provide an active email address when you sign up.

Support:

Our support team is available 24/7, if you have any questions or need help in installing or configuring digital products purchased on the website, please don’t hesitate to contact form.
Please note that we are not developers of the provided products, so our technical support capabilities are limited. We do not change product functionality and do not fix developer bugs.

For more information please read FAQs & About Us.

(Only For WHMCS Category Products !)

We Only provide WHMCS Module, how you can nulled any module step only !
Instant access to all plugins and all themes
Unlimited domain usage
Regular Updates as of when available. Usually, updates are released daily.
Before purchasing, please read the Terms and Conditions & Refund Policy.
If you have any questions, please first read the FAQs.
If you haven’t found the answer to your question, please contact us, and we will respond ASAP.
Please note that any digital products on the website do not contain malicious code, viruses, or advertising. We buy the original files from the developers. We do not sell any products downloaded from other sites.