🚀 Deployment Guide (v7)

What you need

• A free GitHub account: github.com/signup
• Any of: Cloudflare Pages · Vercel · Netlify · GitHub Pages (all free)
• A modern browser

Step A — Get the files

1. Download the lab v7 folder (or the zipped file).
2. Unzip if needed — you should see index.html at the top level, plus folders assets, subjects, tools, teacher, student, parent, admin, community, gamification, docs.

Step B — Push to GitHub

Via website (no CLI needed):

1. Sign in at github.com → click + (top-right) → New repository.
2. Name it e.g. virtuallab. Set Public. Click Create repository.
3. On the empty page click uploading an existing file.
4. Drag the contents of lab v7 (open the folder first and select everything inside) into the upload box.
5. Scroll down. Commit message: Initial v7 upload. Click Commit changes.

Via Git CLI:

cd "lab v7"
git init
git add .
git commit -m "Initial v7 upload"
git branch -M main
git remote add origin https://github.com/<USERNAME>/virtuallab.git
git push -u origin main

Step C1 — Cloudflare Pages (recommended, ~60 s)

1. Go to pages.cloudflare.com → Create a project → Connect to Git.
2. Choose GitHub, authorise Cloudflare, pick your virtuallab repository.
3. Build settings:
   • Framework preset: None
   • Build command: (leave empty)
   • Build output directory: /
4. Click Save and Deploy. Wait ~30 seconds.
5. Site live at https://<project-name>.pages.dev.

Step C2 — Vercel

1. Go to vercel.com → New Project → import your GitHub repo.
2. Framework Preset: Other. Leave build empty.
3. Click Deploy. Live at https://<project>.vercel.app.

Step C3 — Netlify

1. Go to app.netlify.com → choose Import from Git → pick the repo.
2. Build command: leave blank. Publish directory: . (just a dot).
3. Deploy site.

Step C4 — GitHub Pages

1. In your repo: Settings → Pages (left sidebar).
2. Source: Deploy from a branch. Branch: main, folder: / (root). Save.
3. Refresh after ~1 minute. Site is at https://<USERNAME>.github.io/virtuallab/.

Step D — Verify it works

Open these URLs (replace the domain with yours):

• / — homepage with hero apparatus preview
• /tools/equipment.html — 36-piece Equipment Gallery
• /subjects/physics/index.html — Physics hub (25 sims)
• /subjects/physics/pendulum.html — pendulum runs
• /subjects/biology/heart-circulation.html — animated heart
• /tools/periodic-table.html — 118 elements
• /teacher/dashboard.html — teacher dashboard
• /admin/index.html — school admin dashboard

Step E — Custom domain (optional)

In Cloudflare Pages (or Vercel / Netlify): Custom domain → enter your domain (e.g. lab.hmgacademy.com) and follow the DNS instructions. Free SSL.

Step F — Run locally (no internet)

cd "lab v7"
python3 -m http.server 8000
# Visit http://localhost:8000

Step G — Install as a phone app (PWA)

Open the deployed site in Chrome on Android (or Safari iOS) → menu → Install app / Add to Home Screen. The lab runs offline afterwards.

Troubleshooting

• Blank page after deploy — files uploaded inside an extra folder. Re-upload from inside lab v7.
• Equipment gallery shows nothing — check the browser console (F12) for failed loads of assets/js/lab-equipment.js.
• Quiz says "Quiz coming" — quizzes are added to the SW cache after first reload; refresh once.
• Service Worker errors on subdirectory deploys — GitHub Pages serves under /repo-name/; that's normal. Hard-refresh (Ctrl+F5) once.
• Lost local data — LocalStorage is per browser/device. Always back up via the Admin/Teacher dashboard.