Muzammal Mart (MM)

Modern, responsive e-commerce website built with HTML + CSS + Vanilla JavaScript.

It includes:

• Customer shopping experience (products, cart, offers)
• User accounts (login/signup, password reset, profile)
• Admin accounts + inventory management
• Interactive maps for delivery location selection + nearby places

Run locally

This project is static, but some features work best when served over HTTP (not file://) because the site uses fetch() and external map/image resources.

Option A (recommended): VS Code extension “Live Server”

• Open the folder and click Go Live

Option B: Python simple server

• From the project folder run: python -m http.server 5500
• Open: http://localhost:5500/index.html

Features

Store (customer side)

• Product catalog with category sections and search
• Cart with quantity controls, totals, delivery fee logic, and promo codes
• WhatsApp checkout flow

User authentication

• Signup + login (phone/email)
• Password reset using DOB + security question/answer
• User profile page with saved delivery location (lat/lng + address)

Location & maps

• Interactive map selection on signup and checkout (click to place marker, drag to adjust)
• “Locate me” GPS button (high accuracy when available)
• Reverse geocoding to fill the address (OpenStreetMap Nominatim)
• Nearby places/landmarks around the selected point (Overpass API)

Note: The user profile location map uses Leaflet and reverse geocoding via an external reverse-geocode API.

Admin panel

• Admin signup/login + session
• Inventory management (add/edit products, categories, prices, stock)
• Product image support
  • Local image compression for saving to localStorage
  • Optional upload to Supabase Storage when enabled in the browser (uses the Supabase JS client)
• Super admin page/guarding (role-based)

UI/Theme

• Modern blue/teal theme
• Category and offer images managed via js/images.js
• Responsive layout + mobile navigation

Pages

Customer pages:

• index.html (home)
• products.html (catalog)
• cart.html (cart + checkout modal)
• offers.html
• about.html
• contact.html
• terms.html

User account pages:

• login.html (user login/signup + reset)
• user-profile.html

Admin pages:

• admin.html (admin panel entry)
• admin-login.html, admin-signup.html
• admin-profile.html
• admin-inventory.html
• super-admin.html

Promo codes (testing)

• SAVE10 – 10% off
• SAVE50 – Rs. 50 off
• SAVE100 – Rs. 100 off
• FRESH20 – 20% off

Tech stack

• HTML5, CSS3, Vanilla JS (ES6+)
• Browser localStorage for persistence
• Leaflet maps + tile layers
• OpenStreetMap Nominatim (reverse geocoding)
• Overpass API (nearby places)
• Optional: Supabase Storage for product images

Data storage (localStorage keys)

If you want a “fresh start”, clear site data or remove these keys:

• mmUsers / mmUserSession (customer accounts + session)
• mmAdmins / mmAdminSession (admin accounts + session)
• mmInventory / mmInventorySeeded (inventory catalog)
• cart (cart items)

Customization

Update WhatsApp number

Search the project for 923001234567 and replace it with your WhatsApp number.

Update theme colors

Edit CSS variables in css/style.css (look for the :root theme variables).

Images (categories/offers)

Update image URLs in js/images.js.

Supabase (optional)

If you want admin image upload to Supabase Storage:

• Ensure the Supabase JS client is loaded on the admin pages
• Update the Supabase constants in js/admin.js / js/auth.js (URL, anon key, bucket)

Project structure

.
├── *.html
├── css/
│   └── style.css
├── js/
│   ├── script.js      (navbar + shared UI)
│   ├── products.js    (catalog interactions)
│   ├── cart.js        (cart + checkout)
│   ├── auth.js        (user auth + signup/checkout maps)
│   ├── admin.js       (admin auth + inventory)
│   ├── images.js      (category/offer image loading)
│   └── location.js    (profile map)
├── images/
├── Assets/
└── assesticon/

Notes

• For maps/geolocation to work smoothly, allow browser location permissions.
• External APIs (geocoding/nearby places) require an internet connection and may have rate limits.