41 lines
3.9 KiB
Plaintext
41 lines
3.9 KiB
Plaintext
# Progress Log
|
||
|
||
## Codebase Patterns
|
||
- Single self-contained HTML file. All CSS in a single `<style>` tag. All JS in a single `<script>` tag wrapped in an IIFE with 'use strict'.
|
||
- No frameworks, no build step. Only external dependency: Google Fonts via <link> tags.
|
||
- Boot sequence is shared: pure black #000 bg, Fira Code font, blinking green cursor (#00ff41, step-end animation), boot text typed line by line (~220ms apart), [OK] lines bright green bold, SYSTEM/USER/ROLE/LOCATION labels cyan #00e5ff, values bright green, other lines dim green #3a6b45.
|
||
- CV data source: Use the expanded CV_v4.md content. Key roles: Interim Head (May-Nov 2025), Deputy Head (Jul 2024-Present), High-Cost Drugs Pharmacist (May 2022-Jul 2024), Pharmacy Manager Tesco (Nov 2017-May 2022), Duty Pharmacy Manager Tesco (Aug 2016-Nov 2017).
|
||
- Use IntersectionObserver for scroll animations (not scroll event listeners).
|
||
- For smooth scroll on nav clicks: preventDefault, calculate offset, window.scrollTo with behavior:'smooth'.
|
||
- Output HTML file name convention: 4-vitals-monitor.html.
|
||
- ECG PQRST waveform shape: flat -> small P bump -> flat -> sharp Q dip -> tall R spike -> S dip -> flat -> gentle T wave -> flat.
|
||
- Use SVG paths with stroke-dasharray/stroke-dashoffset for line drawing animations.
|
||
- SVG circle skill gauges: circumference = 2*PI*r. stroke-dashoffset = circumference * (1 - level/100). rotate(-90deg) to start from top.
|
||
- Google Fonts: Plus Jakarta Sans, Inter Tight.
|
||
- Floating pill nav: NOT full width. max-width 600px, margin: 12px auto, border-radius 100px.
|
||
- ECG overlay: #ecg-overlay div at z-index 1001. SVG created dynamically with viewBox matching viewport dimensions.
|
||
- drawHeartbeat(svg, svgNS, vw, vh, cy, rHeight, color, duration, onComplete) — reusable PQRST waveform renderer. rHeight controls R peak amplitude. color and duration are per-beat customisable.
|
||
- finishECGPhase() handles cleanup: fades ECG lines, transitions boot bg to white, removes overlays, reveals CV. Task 3 will replace the call to this with expanded branching logic.
|
||
- requestAnimationFrame needed before setting CSS transitions on dynamically created SVG elements.
|
||
|
||
## Iteration Log
|
||
|
||
### Iteration 1 — Task 1: Build the boot screen foundation
|
||
- Created `4-vitals-monitor.html` with full boot screen implementation
|
||
- Boot sequence follows guardrail format exactly: CLINICAL TERMINAL v3.2.1, profile init, SYSTEM/USER/ROLE/LOCATION, modules, [OK] lines, READY
|
||
- Timing: 14 lines × 220ms = ~2860ms boot + 400ms pause + 800ms fade = ~4.06s total (within guardrail)
|
||
- Boot text fades to opacity:0, then boot screen is removed and CV content revealed
|
||
- Temporary: boot screen hides directly after fade (Task 2 will insert ECG phase between fade and reveal)
|
||
- CSS variables, all 3 Google Font families loaded, IIFE strict mode JS
|
||
- Learnings: setTimeout delay argument is evaluated at call-time, not in the closure callback, so using a cumulative var in forEach works correctly for staggered timing
|
||
|
||
### Iteration 2 — Task 2: Build the ECG flatline and first heartbeat
|
||
- Added ECG overlay phase between boot fade and CV reveal
|
||
- Flatline draws left-to-right (1000ms linear) using SVG stroke-dasharray/dashoffset
|
||
- First PQRST heartbeat (R peak 40px) draws over 600ms at viewport center
|
||
- drawHeartbeat() is a reusable function accepting: svg, svgNS, vw, vh, cy, rHeight, color, duration, onComplete callback — Task 3 calls this with different amplitudes
|
||
- finishECGPhase() is a temporary cleanup function that Task 3 will replace with expanded logic (2nd/3rd beats + branching)
|
||
- Timing: boot ~4s + ECG ~2.4s = ~6.4s total (within 8-9s guardrail)
|
||
- Learnings: SVG paths created via createElementNS need the SVG namespace 'http://www.w3.org/2000/svg'. requestAnimationFrame is needed before setting CSS transitions on dynamically created SVG elements to ensure the initial state is painted first.
|
||
- The ECG overlay z-index is 1001 (above boot screen at 1000) so the lines render on top of the black background
|