# EhliSünnet App Architecture & Modification

App formerly known as MuslimOS. Zero-dependency Node.js SPA for ibadet tracking.

## Architecture
```
/DATA/AppData/muslimos/
├── app/
│   ├── server.js          # Node HTTP server, zero deps, serves static + API
│   └── public/
│       ├── index.html     # SPA shell
│       ├── app.js         # All frontend logic (tabs: today, tahajjud, sunnah, evrad, hifz, prayers)
│       ├── styles.css     # Design system (CSS variables, dark/light theme)
│       ├── quran-data.js  # Surah metadata
│       ├── icon.svg       # App icon (moon crescent)
│       └── manifest.webmanifest
└── data/
    └── db.json            # All user data (tahajjud, sunnah, evrad, hifz, prayers, config)
```

## Container
- Name: `ehlisunnet`
- Image: `node:22-alpine`
- Port: 8099:3000
- Compose: `/var/lib/casaos/apps/muslimos/docker-compose.yml`
- AppData: `/DATA/AppData/muslimos/`

## Adding a New Feature (e.g. static text page)

1. **Add static HTML** to `public/` — server.js `serveStatic()` auto-serves any file in `public/`
2. **Add button + handler** in `app.js`:
   - Button in the relevant `render*()` function with `data-action="<name>-open"`
   - Handler function that navigates directly: `location.href = '<page>.html'` (NOT modal/iframe — user prefers full-page with back-arrow)
   - Event handler in the click dispatcher: `if(a==="<name>-open"){ open<Name>(); return; }`
3. **Standalone page** must include a small back-arrow button top-left: `<button class="back-arrow" onclick="location.href='/'">←</button>` (round, 36×36, border-radius: 50%)
4. **Restart**: `docker restart ehlisunnet`
5. **Verify**: `curl -s -o /dev/null -w "%{http_code}" http://127.0.0.1:8099/<new-page>.html` → 200

## User Delivery Preferences (from iterative refinement)

- **Turkish transliteration only** — replace ALL Arabic-script text with Latin transliteration from the PDF. Only decorative title elements may retain Arabic.
- **No intro/notes blocks** — start without them; user will ask to remove if present.
- **Direct page navigation, not modal** — full-page view with back-arrow (←) top-left. Use `location.href`, never iframe modal.
- **Iterative refinement** — expect multiple rounds of "das muss raus" / "bitte diese Farben haben". Execute each without pushback.
- **Color extraction from images** — use `vision_analyze` to extract hex colors when user provides a reference image.

## Design Tokens (from styles.css)
- Green: `#006039` (John Deere green, used for Vird button)
- Gold: `#FECA54` / `#b07d24` (light) / `#d7ab5b` (dark)
- Emerald: `#9b4f96` (section titles, accents)
- Arabic font stack: `"SF Arabic", "Geeza Pro", "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif`
- RTL Arabic: `<span class="ar" dir="rtl">...</span>`

## Pitfalls
- `styles.css` has separate `:root` blocks for light/dark via `@media (prefers-color-scheme: dark)`. Standalone HTML pages must duplicate these or link `styles.css`.
- The app uses optimistic UI updates via `mutate()` — local state changes immediately, server syncs in background, rolls back on error.
- PIN protection: all mutating API calls require `x-pin` header if PIN is set.