A zero-dependency, self-contained HTML instruction manual for Windows-to-MacBook transitions. Built for beginners — specifically for someone who knows Windows but has never touched macOS.
Open any .html file in a browser. No install. No build step. Works offline.
| Section | Contents |
|---|---|
| Module 1 | Filesystem orientation + full WhatsApp → ATLAS (ChatGPT) → Email/WhatsApp workflow |
| Rosetta Stone | Every Windows term mapped to its Mac equivalent |
| Cheat Sheet | One-page printable shortcut reference |
| Glossary | Plain-English definitions for every Mac word |
| Recovery Card | "Something went wrong" panic page with step-by-step fixes |
Modules 2–7 are planned (documents pipeline, email workflows, phone-to-Mac sync, LLM use, safety net).
- Bengali annotations — critical steps annotated in Bangladeshi Bangla, toggle-able per session
- Font size controls — A− / A+ buttons, persisted in localStorage
- Keyboard navigation — ← / → arrow keys move between slides
- Quiz — retrieval-practice questions at the end of each module
- Print to PDF — one-click, A4 portrait, page-breaks per slide
- Module progress tracking — completion state persisted in localStorage
- No framework, no bundler — three small vanilla JS files (~150 lines total)
dadtraining/
├── index.html # Hub: learning path
├── styles/ # Design system (OKLCH tokens, typography, slides, print)
├── scripts/ # ui.js (Bengali toggle, font, progress) + nav.js (keyboard)
├── reference/ # Rosetta, Cheat Sheet, Glossary, Recovery Card
├── module-1/ # 25 slides + quiz
│ └── assets/ # Screenshots (filled progressively)
└── video-scripts/ # Per-slide narration scripts
Warm editorial style — paper-cream background, saffron accent, Charter serif headings, large body text (19px+). Intentionally avoids default Tailwind/shadcn aesthetics.
Color system uses OKLCH for perceptual uniformity. All tokens in styles/tokens.css.
Clone and open:
git clone https://github.com/gUBII/abbu-mac-guide.git
cd abbu-mac-guide
open index.htmlOr just download the ZIP and open index.html.
- Replace the name Swapon / Abbu with your own family member's name (grep for
Swapon) - Swap out screenshot placeholders in
module-1/assets/with real screenshots - Adjust Bengali pills or swap language in
styles/components.css(.bn-pill) - Extend with new modules following the slide template in
CLAUDE.md
Module 1 has 17 placeholder slots for real screenshots (data-needed attribute). See module-1/assets/README.md for the full list and descriptions.
MIT — see LICENSE.