bottom cards added

2026-04-24 17:49:19 +05:00
parent 5e039867a8
commit dc73306e61
2 changed files with 390 additions and 107 deletions
@@ -174,3 +174,4 @@ After completing changes, report to the user:
 - **2026-04-24 slide 6 jargon-cloud tier reshuffle**: `vibe coding` demoted from hero-blue to small-orange (top: 91% / left: 22%); `harness` and `compaction` promoted from purple to hero-blue (kept positions, upgraded padding/font/shadow); `context window` added as new hero-blue pill (top: 32% / left: 5%); `context engineering` deleted (pill + legend row both removed). Legend rebalanced: left column = 8 blue + 2 purple (10 rows), right column = 4 green + 5 orange (9 rows) — slight asymmetry because green dropped from 5 to 4 after context-engineering removal; acceptable. Key verification method: Python script extracting all `background: #HEX` pill texts and all `color: #HEX; font-weight: 700` legend texts per color — confirmed exact match for all 4 tiers. Total slides and data-level dividers unchanged (51 / 21,27,33,38,44,47).
 - **2026-04-24 restore-original + keep-new insert at slot 9 (50 → 51 slides)**: the "Can answer / Can't answer" grid (commit `61a847c`) was restored at slot 9 and the Stochastic Parrots slide (authored in `fa1b499`) was shifted to slot 10. Recovery method: `git show 61a847c:...index.html | sed -n 'LINE,LINEp'` to extract the exact pre-edit markup, then Edit tool to insert it before the current slot-9 comment block, then a Python sentinel-replacement script to renumber old slides 10-50 → 11-51. The sentinel approach is mandatory here because Python `str.replace` applies all substitutions, so descending-order alone is insufficient for a multi-value renumber (unlike sed's single-expression-per-call mode). No `goToSlide` hardcoded calls exist in this deck — only the function definition — so no TOC update was needed. `totalSlides` is DOM-computed, no hardcoded bump. New section-divider positions: **Agents=21, Skills=27, Context=33, CLAUDE.md=38, Commands=44, Workflow=47**. Total slides: **51**. git ref for the original slide 9 content: `61a847c`.
 - **2026-04-24 three concept-intro slides inserted at 27-29 (51 → 54 slides)**: new slides 27 (CLAUDE.md), 28 (Skills), 29 (Context) inserted immediately before the old Skills section opener (now at 30). All three use `class="slide section-slide"` with NO `data-level` — they are concept intros, not arc-level openers, so the journey bar should not advance on them. Pill choices: CLAUDE.md uses `CLAUDE.md` as the filename (monospace yellow pill — no slash command exists); Skills uses `.claude/skills/` as the filesystem path (no `/skills` slash command exists — verified against CLAUDE.md which shows skills are file-based, not command-invoked); Context uses `/context` — this IS a real Claude Code command (shows current token usage breakdown). Slide 29 (Context) intentionally has NO file-tree because context is a runtime concept, not a filesystem artifact. Renumber method: sentinel technique with 3-phase Python script — (1) replace all `data-slide="27"` through `"51"` with `##SEN27##` through `##SEN51##`, (2) restore the FIRST occurrence of sentinels 27/28/29 (the new slides) back to their correct values using `str.replace(..., 1)`, (3) resolve remaining sentinels N→N+3. Section-divider positions after insert: **Agents=23, Skills=30, Context=36, CLAUDE.md=41, Commands=47, Workflow=50**. Total slides: **54**.
+- **2026-04-24 pillar-footer strip added to slides 23-29**: compact 5-card reference bar added below the viewport fold on slides 23-29. Implementation uses Option A: each slide's existing content is wrapped in a `.slide-viewport-content` div (`min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%`) and a `.pillar-footer` sibling div (flex row, `gap: 10px; justify-content: center; max-width: 1000px; margin: 60px auto 40px auto`) is appended after the wrapper. Each footer contains 5 `.pillar-mini-card` divs (flex row, `padding: 10px 14px`, `border-radius: 8px`, `box-shadow: 0 2px 6px rgba(0,0,0,0.08)`) with emoji + title only — no body text. Active-pillar highlighting is implemented: the current topic's card has `border-left: 5px solid <color>` and no `.inactive` class; the other four have `border-left: 3px solid <color>` and class `pillar-mini-card inactive` (`opacity: 0.45`). Active assignments: slides 23-26 → Agents, slide 27 → CLAUDE.md, slide 28 → Skills, slide 29 → Context. Section-dividers (slides 23, 27, 28, 29) kept `justify-content: center` for `.slide-viewport-content`; content slides (24, 25, 26) use `justify-content: flex-start; padding-top: 60px` on `.slide-viewport-content` to keep the h1 near top. Scroll reset (`window.scrollTo(0, 0)` in `showSlide()`) was already present from a prior session — no JS change needed. The 5 pillar colors exactly match slide 14's card borders: Agents `#009688`, Skills `#4caf50`, Workflows `#ef6c00`, CLAUDE.md `#9c27b0`, Context `#3f51b5`. Total slide count (54) and all data-level positions unchanged. **At 1024px width**: each mini-card is `~18%` of 1000px = ~180px. With `flex: 1` and `min-width: 0`, cards compress gracefully — the 12-char "CLAUDE.md" title at `font-size: 0.82rem` is ~96px, well within 180px. No wrapping expected at standard presentation viewports.