# Teachfluence — Web Console Designs (v1, faithful capture)

High-fidelity **desktop web** design canvases that faithfully capture the **existing** Teachfluence web app — the org-admin console first, plus the student learn app, public storefront, and the teachfluence.com marketing site. Turkish, full-bleed desktop (1440px), Light (the production admin theme). Built on a shared design kit whose tokens are copied **verbatim** from the app's own `globals.css`.

> **Purpose (Phase 1):** get the *current* design into editable design files as a foundation. This is a **capture, not a redesign** — every screen reproduces what ships today. Phase 2 (improvements + new features) builds on this foundation. Mirrors the deliverable format of `../teachfluence-admin-v2/` (the mobile console designs).

## How to open

The canvases render with the Claude-Design runtime (`support.js`) + a vendored React (`react.js`), fully offline. A `file://` open is blocked by some browsers, so serve the folder:

```bash
cd designs/teachfluence-web-v1
python3 -m http.server 8091
# then open http://127.0.0.1:8091/   →  index.html (the navigation hub)
```

**Navigation:** `index.html` is the landing hub — a card grid linking to all **18 canvases** (grouped Admin `00–08` / Public+Student `09–11` / New areas `12–17`), with band counts, Mevcut/Planlanan badges, and doc links. Every canvas also carries a **sticky top nav bar** (◾ Teachfluence Web home link + numbered chips `00`–`17` — current highlighted, planned ones amber — + the canvas title), so you can jump between any two canvases without going back to the hub. Regenerate the canvases (and their nav) with `node _assemble.mjs`.

**Current vs. planned:** every canvas and every band is tagged **Mevcut** (green — captured 1:1 from what ships today) or **Planlanan** (amber "PLANLANAN" ribbon — backend-ready features the team will build a UI for). See `DECISIONS.md` for the full breakdown; canvases `12–15` + `17` are new-feature designs, `16` (SCORM/xAPI) is a *capture gap* (it already ships), and several Mevcut canvases carry individual planned bands.

Each `*.dc.html` is also a native Claude-Design canvas (`<x-dc>` + `_kit.css`), so it can be imported into Claude Design for editing.

## Files

| File | Contents |
|---|---|
| `00-foundations.dc.html` | Tokens (from real `globals.css`) · component kit · app shell (topbar + sidebar) · auth |
| `01-overview-orders.dc.html` | Kontrol Paneli (Gelir Analizi) · Siparişler listesi + detay |
| `02-catalog.dc.html` | Ürün merkezi: Dersler · 1:1 Görüşmeler · Dijital Ürünler · Canlı Etkinlikler · Paketler · Abonelikler |
| `03-course-editor.dc.html` | Kurs & dönem editörü · bölümler + içerik öğeleri · öğe tipleri |
| `04-marketing.dc.html` | Toplu E-posta · İndirim Kodları · Otomasyonlar · Etiketler · listeler |
| `05-forms.dc.html` | Form listesi · oluşturucu · yanıtlar + yanıt detayı |
| `06-students.dc.html` | Öğrenci roster · Kişi-360 CRM profili |
| `07-coaching-settings.dc.html` | Koçluk seansları · organizasyon ayarları · üyeler & roller |
| `08-web-cms.dc.html` | Web Sayfalarım · Bloglar (içerik) · editörler · Profil Kartım |
| `09-student-app.dc.html` | Öğrenci uygulaması (org temalı) · kurs oynatıcı · birebir · sertifikalar |
| `10-storefront.dc.html` | Vitrin (org sitesi, page-builder blokları) + standart ticaret akışları (sepet · ödeme · sipariş) |
| `11-marketing-site.dc.html` | Teachfluence.com pazarlama sitesi |
| `12-support-inbox.dc.html` | **Planlanan** · Destek & canlı sohbet — omnichannel gelen kutusu · görüşme + yanıt · SLA/CSAT · web widget |
| `13-community.dc.html` | **Planlanan** · Topluluk & alanlar — akış · moderasyon · sohbet · etkinlikler (liste+takvim, RSVP) · rozet/liderlik |
| `14-notifications.dc.html` | **Planlanan** · Bildirim merkezi — çan & akış · kategori×kanal tercih matrisi · org anlık bildirim ayarları |
| `15-crm.dc.html` | **Planlanan** · CRM — Kişi 360 · 15-şeritli zaman tüneli · notlar/aramalar/görevler · outreach+kota · diziler · segmentler |
| `16-scorm-lms.dc.html` | **Mevcut** (yakalama boşluğu) · SCORM · xAPI · cmi5 — içerik/öğe editörü · raporlar · LRS ifade tarayıcı |
| `17-analytics.dc.html` | **Planlanan** · Analitik & yönetim paneli — ziyaretçi/trafik · dönüşüm hunisi · öğrenci analitiği · notlandırma kuyruğu |
| `_kit.css` | Design tokens (real `globals.css` HSL set, light+dark) + `.tf-*` component vocabulary — the single styling source |
| `_sprite.html` | Icon set (lucide-style) referenced via `<use href="#ic-…">` |
| `_assemble.mjs` | Stitches `bands/*.html` fragments into the canvases (`node _assemble.mjs`) |
| `bands/` | Per-band source fragments (one `dc-band` each) |
| `_ref/` | Live-capture notes + `surfaces.json` (the 298-surface inventory) — provenance, not shipped canvases |
| `ANALYSIS.md` | Reference teardown: what the app is, design language extracted, capture methodology |

## Method (why this is faithful)

1. **Tokens are the app's own.** `_kit.css` §1 is the shadcn HSL token set copied verbatim from `pi-education-web/app/globals.css` — so colors, radius (8px), and the semantic palette are exact, not eyeballed.
2. **Structure & labels are code-derived.** A 298-surface inventory (`_ref/surfaces.json`) was extracted from the real components + next-intl message files — exact Turkish titles, table columns, tabs, filters, states, and GraphQL data sources.
3. **Visuals are live-verified.** Key screens were captured read-only from the live `flu` org and the recreations checked against them.
4. **Real UI, real data shapes, fictional PII.** Sample values mirror production shapes; any personal data (names, emails, phones, IDs) is fictional — never real customer PII.

## Information architecture (admin)

Left rail (56px collapsed → 256px expanded) + 64px topbar. Rail: **Kontrol Paneli** · group **Sayfalarım** (Profil Kartım · Web Sayfalarım · Ürün Sayfaları · Bloglar) · group **Ürünler** (Dersler · 1:1 Görüşmeler · Dijital Ürünler · Canlı Etkinlikler · Abonelikler · Paketler) · group **Pazarlama** (Toplu E-posta · İndirim Kodları · Otomasyonlar · Etiketler) · **Formlar** · **Öğrenciler** · **Ayarlar**. Group/link visibility is RBAC-gated (`ORG_*_VIEW`, `COURSE_VIEW`, `COACHING_VIEW`). Topbar carries the org identity, a notifications bell, and the account avatar. `/admin` redirects to `/admin/courses`; the analytics "overview" lives inside the Orders page.

## Non-admin surfaces (09–11)

The **student app** and **public storefront** render in the **org's own brand theme** (configurable; Flu Akademi = dark) with their own chrome — a different design system from the light admin. The storefront is **page-builder output**; canvas 10 captures the reusable block library (hero · product card · event card · testimonial · coach card · FAQ) and the standard app-controlled commerce flows (product landing · sepet · ödeme · sipariş). The **marketing site** (11) is the teachfluence.com SaaS brand.

## Screen index

See **[`SCREEN-INDEX.md`](./SCREEN-INDEX.md)** for the full per-canvas list of bands and device frames (regenerate with `node _screen-index.mjs`). The full per-surface inventory (298 surfaces, code-derived) is in `_ref/surfaces.json`. The assembled band list per canvas is also printed by `node _assemble.mjs`.