NEXUS FITNESS Template
v1.0 — Complete Documentation
Installation
NEXUS FITNESS is a static HTML template that requires no server-side setup. Simply extract the ZIP and open index.html in your browser.
1. Extract nexus-fitness-template.zip
2. Open /bodybuilding-template/index.html
3. Done! No npm install or build steps required.
For production deployment, upload all files to your web server maintaining the same folder structure. All CDN assets load automatically.
Folder Structure
/bodybuilding-template
/assets
/css
style.css — Main design system & CSS variables
animations.css — All @keyframes and animation classes
responsive.css — All media queries
shop.css — Shop, cart, checkout, product styles
auth.css — Login, register, profile styles
/js
main.js — Navbar, theme, loader, AOS, Swiper init
counter.js — Animated number counters
cart.js — Cart logic, localStorage, drawer
shop.js — Products data, filters, search, render
bmi.js — BMI calculator logic
auth.js — Authentication system (localStorage)
profile.js — Profile page, orders display
/images — Place custom images here
index.html — Home page
about.html — About page
services.html — Services & Programs
shop.html — Product shop
product.html — Product detail
cart.html — Shopping cart
checkout.html — Checkout (protected)
contact.html — Contact page
login.html — Login page
register.html — Register page
profile.html — User profile (protected)
404.html — Error page
documentation.html — This file
Pages
Color Themes
The template includes 3 color themes controlled by a data-theme attribute on the <html> element.
data-theme="fire"
#FF3D00 + #FFD700
data-theme="ice"
#00D4FF + #FFFFFF
data-theme="beast"
#39FF14 + #000000
<!-- Set default theme -->
<html lang="en" data-theme="fire">
<!-- Switch via JS -->
document.documentElement.setAttribute('data-theme', 'ice');
<!-- Theme persists via localStorage -->
localStorage.setItem('nexus_theme', 'beast');
Auth System (auth.js)
localStorage-based auth. No backend required. User data stored under nexus_users key.
// Key functions:
registerUser(userData) — Create account, auto-login
loginUser(email, password) — Authenticate user
logoutUser() — Clear session, redirect
isLoggedIn() — Returns boolean
getCurrentUser() — Returns user object or null
updateUserProfile(data) — Update user data
updateUserAddress(addr) — Update saved address
changePassword(old, new) — Change password
saveOrderToUser(order) — Append order to user history
requireAuth(returnUrl) — Redirect if not logged in
⚠️ Demo mode: passwords stored in plain text in localStorage. Replace with a real backend for production use.
Cart System (cart.js)
Cart data stored under localStorage key bb_cart.
addToCart(product) — Add item to cart
removeFromCart(id, var) — Remove specific item
updateQuantity(id, delta) — Change quantity ±1
getCartItems() — Returns cart array
getCartCount() — Returns total item count
getCartTotal() — Returns total price
applyDiscount(code) — Apply coupon code
clearCart() — Empty the cart
renderCartDrawer() — Update sidebar drawer
renderCartPage() — Render cart.html table
// Coupon codes:
BEAST10 — 10% off
FIT20 — 20% off
GAINS — Free shipping
Shop System (shop.js)
Products defined in the PRODUCTS array at the top of shop.js. To add/edit products:
// Product object structure:
{
id: 'prod_013', // Unique ID
name: 'Product Name',
category: 'Protein', // Must match filter category
price: 49.99,
originalPrice: 59.99, // null if no discount
rating: 4.7,
reviews: 150,
image: 'https://...',
badge: 'New', // 'New','Sale','Hot',null
description: '...',
flavors: ['Choc','Van'], // [] if N/A
sizes: ['1lb','2lb'],
inStock: true
}
BMI Calculator (bmi.js)
Supports metric (kg/cm) and imperial (lbs/ft/in) units. Auto-detects and recommends a training program based on BMI result. Categories: Underweight (<18.5), Normal (18.5–24.9), Overweight (25–29.9), Obese (≥30).
Bootstrap 5.3 Usage
Bootstrap 5.3.2 loaded via CDN. Components used:
Grid system · Navbar + Offcanvas (mobile) · Accordion (FAQ) · Modal (success, quick-view, order detail) · Tabs (product detail) · Table (orders, membership) · Form controls · Badge · Pagination · Dropdown (user menu, sort) · Collapse
Swiper Sliders
Swiper 11 via CDN. Four instances initialized in main.js → initSwipers():
AOS Animations
AOS initialized in main.js with duration 800ms. Use data-aos attributes on any element:
<div data-aos="fade-up">...</div>
<div data-aos="fade-left" data-aos-delay="200">...</div>
<div data-aos="zoom-in" data-aos-delay="300">...</div>
<div data-aos="flip-left">...</div>
Customization
Changing Colors: Edit CSS variables in style.css under :root.
Changing Fonts: Update the Google Fonts import URL and the --font-heading / --font-body variables.
Adding Products: Add objects to the PRODUCTS array in shop.js.
Replacing Images: Place images in /assets/images/ and update src attributes. Recommended sizes: Product images 400×400px, Hero 1920×1080px, Trainer cards 400×533px.
Adding Pages: Copy an existing page, update the navbar active link, and include all required CSS/JS files.
Credits
NEXUS FITNESS Template v1.0
TemplateMonster quality HTML template. All CSS and JS files are hand-crafted with zero dependencies beyond the listed CDN libraries. Licensed for single-site use.