# CryoSim Slides — Presentation Design Guide A practical reference for creating new presentations that match the BSM template the viewer is designed for. **Last updated** to reflect the fixed-canvas redesign, BSM-accurate sizing, two-logo header band, and white letterbox. --- ## 1. Canvas & Scaling — The Design Model Every slide is rendered on a **fixed 1920 × 1080 px (16:9) canvas**, then scaled with a single CSS `transform: scale(N)` to fit whatever screen it's projecting on. The scale factor is computed at runtime: ``` scale = min(stage_width / 1920, stage_height / 1080) ``` This means: - A slide looks **identical** on a phone, laptop, projector, or 4K monitor — just at different physical sizes - All measurements below are **canvas pixels** (px) at the 1920 × 1080 design size - **1 pt = 2 px** at this canvas (144 DPI-equivalent) - Letterboxing (white space) fills any leftover area on screens that aren't exactly 16:9 — the canvas itself is white, the surrounding stage is also white, so no black bars ### Slide layout zones ``` ┌──────────────────────────────────────────────────────────────────────────┐ y=0 │ ┌────────┐ ┌────────┐ │ │ │ LOGO │ ## Slide Title (h1) │ LOGO │ │ y=64 ← HEADER BAND │ │ LEFT │ sits between the logos │ RIGHT │ │ (height 96) │ └────────┘ └────────┘ │ y=160 │ │ │ ───────────────────────────────────────────────────────────────── │ │ │ │ Body content area: 1720 px wide × 800 px tall │ ← BODY │ │ │ • Section headings (h2) with cyan accent bar │ │ • Paragraphs │ │ • Icon cards (4 across at 380 px each) │ │ • Callout rules, tables, steps, compare, flow, hero stat, images │ │ │ │ │ └──────────────────────────────────────────────────────────────────────────┘ y=1080 x=0 x=100 x=1820 x=1920 ↑ ↑ slide-padding-left slide-padding-right ``` | Zone | Coordinates | Notes | |---|---|---| | **Header band** | y = 0–200 (title row from y=64) | Logos at top:64 height:96; h1 in same row | | **Body content** | y = 200–1020 (~820 px tall) | Where blocks live — cards, rules, steps, etc. | | **Slide padding (top)** | 160 px | Clears header band | | **Slide padding (sides)** | 100 px | BSM-matched margin | | **Slide padding (bottom)** | 60 px | Slim — body uses full vertical space | --- ## 2. BSM Theme ### Fonts | Use | Font | |---|---| | Everything (heading + body) | **Arial** (system fallback: Helvetica, sans-serif) | The BSM PowerPoint template uses Arial for both `majorFont` and `minorFont`. Don't introduce Playfair, Inter, DM Sans, or other display fonts — they break the BSM look. ### Color palette (CSS variables) | Token | Hex | Use | |---|---|---| | `--bsm-text` | `#00396F` | Primary navy — titles, body text, table headers | | `--bsm-text-soft` | `#1a4a7a` | Body paragraph text (slightly softer) | | `--bsm-accent` | `#0087CC` | Cyan highlight — emphasis (``), links, accents, buttons | | `--bsm-cyan-l` | `#77CBEA` | Light cyan accent | | `--bsm-red` | `#E2231A` | Warning / danger callouts, Compare left column | | `--bsm-yellow` | `#FFCC00` | Caution callouts | | `--bsm-green` | `#2EA836` | Success / solution callouts, Compare right column | | `--bsm-grey` | `#808B94` | Muted labels, footers | | `--bsm-pale` | `#CFDBDC` | Subtle backgrounds, dividers | | `--bsm-wine` | `#880D45` | Reserved BSM accent — use sparingly | ### Type scale (canvas pixels @ 1920×1080) | Element | Px | Pt | Notes | |---|---|---|---| | Title-slide hero (`.title-h1`) | **112** | 56 pt | Only on the cover slide | | Slide title (`h1`) | **64** | 32 pt | One per content slide; sits in logo header band | | Section heading (`h2`) | **44** | 22 pt | Cyan left accent bar (8 px) | | Body text (`p`) | **40** | 20 pt | BSM minimum — never go smaller | | Icon Card icon | **72** | 36 pt | Centered emoji or icon char | | Icon Card heading | **40** | 20 pt | | | Icon Card body | **32** | 16 pt | | | Callout / Warning text | **34** | 17 pt | | | Numbered step text | **36** | 18 pt | With 80 px circle | | Table cells | **34** | 17 pt | | | Compare label | **36** | 18 pt | | | Quiz question | **44** | 22 pt | | | Quiz option | **36** | 18 pt | | | Process Flow title | **38** | 19 pt | | | Process Flow body | **32** | 16 pt | | | Hero Stat number | **180** | 90 pt | The visual hero — use sparingly | | Hero Stat label | **48** | 24 pt | | | Hero Stat subtext | **32** | 16 pt | | | Image caption | **30** | 15 pt | | --- ## 3. Logos (Header Band) Two logo slots per slide — **fully scalable, render inside the canvas**: | Slot | Position in canvas | Size | |---|---|---| | Left logo | `top:64px left:80px` | 96 px tall, max-width 320 px | | Right logo | `top:64px right:80px` | 96 px tall, max-width 320 px | Both slots are **independent** — set one, the other, both, or neither. ### Setting a default logo for every new deck `/projects/slides/` → **🏷 Default Logo** button → upload left + right images. Stored in `defaultLogoLeft` / `defaultLogoRight` in your account settings. Applies automatically to every new deck. ### Overriding for a specific deck In the builder, **Logo** button in the top toolbar → toggle "Use my account default" off → upload deck-specific logos. Stored in `meta.logoLeft` / `meta.logoRight`. ### Resolution chain (per slot) ``` meta.logoLeft → defaultLogoLeft → empty meta.logoRight → defaultLogoRight → defaultLogo (legacy) → empty ``` ### Title placement vs logos The `h1` slide title sits **in the same horizontal row as the logos** — `padding-left:100px` and `padding-right:100px` reserve enough space so the title doesn't overlap the logos. Title text width ≈ 1520 px on a typical slide. --- ## 4. Slide Types ### Title slide ``` ┌─────────────────────────────────────────┐ │ │ │ │ │ Course Title Here │ ← 112 px navy bold, centered │ │ │ Subtitle / tagline │ ← 40 px cyan │ Approval line │ ← 40 px cyan │ │ │ CONTEXT · FOOTER LINE │ ← 30 px grey, uppercase │ │ │ [ Begin → ] │ ← Begin button (only on first slide) │ │ │ │ └─────────────────────────────────────────┘ ``` **Background:** plain white (no gradient). **When to use:** the cover slide, section dividers, "Thank you" closing slide. **Editor fields:** Title, Taglines (multiple), Footer. ### Content slide ``` ┌─────────────────────────────────────────┐ │ [Logo] Slide Title — Subject [Logo] │ ← Header band: y=64–160 ├─────────────────────────────────────────┤ │ │ │ Body content (blocks): │ ← Body: y=200–1020 │ │ │ █ Section heading (h2) │ │ │ │ Body paragraph... │ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐│ │ │ Card │ │ Card │ │ Card │ │ Card ││ ← Cards / rules / etc. │ └──────┘ └──────┘ └──────┘ └──────┘│ │ │ └─────────────────────────────────────────┘ ``` **Editor fields:** Title, Title emphasis (one word/phrase to highlight in cyan via ``), Block list. --- ## 5. Block Types ### Heading (`h2`) Section sub-divider within a slide. Cyan accent bar on the left, navy text, no uppercase styling. ``` █ Why we are all in this room today ``` **Don't** use as a substitute for the slide title (`h1`) — `h1` is set by the slide's "Title" field at the top. ### Text (`p`) Standard body paragraph. **One idea per paragraph.** 2–4 lines max. Supports **inline markdown links** — type `[link text](https://url)` and it renders as a real clickable anchor in cyan. ### Icon Cards (BSM Pattern 01) **Layout:** 4 cards across at 380 px each (grid auto-fit, gap 24 px). Each card has 5 px top border in BSM cyan. ``` ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ 🛡 │ │ ⚙ │ │ ✅ │ │ ⚠ │ ← 72 px icon │ Heading │ │ Heading │ │ Heading │ │ Heading │ ← 40 px (20 pt) │ One line │ │ One line │ │ One line │ │ One line │ ← 32 px (16 pt) └──────────┘ └──────────┘ └──────────┘ └──────────┘ ``` **Best for:** 4 parallel ideas, roles, principles, hazard types, the 4 P's. **Limit:** Max 4 cards per slide (else grid wraps to 2 rows and gets cramped). Card heading 1–3 words, body one short sentence. ### Callout Rules (BSM Pattern 04 — Warning Banner) Single-line emphasis blocks with a left accent bar (8 px wide). Three variants: | Variant | Color | Use | |---|---|---| | **Teal** (default) | Cyan accent | Standard info / note | | **Coral** (red) | Red accent, faint red tint | Warning, danger, prohibition | | **Gold** (yellow) | Yellow accent, faint yellow tint | Caution, attention | Pattern: `

One-line bold heading

` + `

One short paragraph

`. Both at 34 px (17 pt). ### Numbered Steps (BSM Pattern 13) For **sequential, ordered procedures** — pre-flight checklists, escalation steps. ``` ① First step description ② Second step description ③ Third step description ``` Number circles are 80×80 px in BSM cyan, each containing 36 px white number. Step text 36 px (18 pt) with line-height 1.35. **Limit:** 5–7 steps per slide. Each step one short sentence. ### Table Use **only when comparing structured data**. ``` ┌─────────┬─────────┬─────────┐ │ Header │ Header │ Header │ ← Navy background, white 34 px text ├─────────┼─────────┼─────────┤ │ Cell │ Cell │ Cell │ ← 34 px navy-soft text │ Cell │ Cell │ Cell │ └─────────┴─────────┴─────────┘ ``` **Limit:** 4 columns × 6 rows max at 17 pt. Beyond that, split into multiple slides. ### Compare (Left / Right) Side-by-side comparison. Default labels are "Challenge / Solution" — **customize them per slide** from the editor: | Use case | Left | Right | |---|---|---| | Problem / Fix | Challenge | Solution | | Old / New | Before | After | | Risk / Mitigation | Risk | Mitigation | | Wrong / Right | Don't | Do | | Theory / Practice | In theory | In practice | Left column has faint red tint + red 18 pt label. Right column has faint green tint + green 18 pt label. Both bodies at 34 px (17 pt). **Leave a label blank** to hide that column's header entirely. ### Quiz (MCQ) / Poll For **interactive checks** during a live session. Quiz has a designated correct answer; Poll just gathers responses. - Question: 44 px (22 pt), one clear sentence - 2–4 options at 36 px (18 pt), each one short phrase - Optional "note" on MCQ — visible only after presenter clicks Reveal ### Process Flow (BSM Pattern 03) Vertical flow of **causally connected steps** (different from Numbered Steps — flow implies one step **leads to** the next). ``` ① Detection ← 64 px # circle, 38 px title, 32 px body Sensor reads value │ ② Decision System routes alarm │ ③ Action Operator responds ``` **Limit:** 3–5 steps. For longer enumerations, use Numbered Steps. ### Hero Stat (BSM Pattern 11) A **single dramatic number** that anchors the slide. Use sparingly — once per deck or per major section. ``` -162°C ← 180 px (90 pt) cyan Boiling Point of LNG ← 48 px (24 pt) navy At this temperature, ← 32 px (16 pt) navy-soft LNG destroys tissue on contact. ``` Block is centered with a soft gradient background, 24 px border radius. ### Image Standard image block with optional caption and clickable link. | Size | Max width | Use | |---|---|---| | Small | 480 px | Inline icons, supporting visuals | | Medium (default) | 1000 px | Standard diagrams, photos | | Large | 1500 px | Hero images, full diagrams | | Full width | 100% (canvas) | Wide infographics, equipment shots | Always provide **alt text** for accessibility. Add a caption to give the image context (caption at 30 px / 15 pt). Set the optional "Link to URL" to make the image clickable. --- ## 6. Layout Patterns (which blocks combine well) ### Pattern A: Standard teaching slide ``` [h1 Title] [p Body intro paragraph] █ Section heading (h2) [rules — 2-3 callouts] ``` ### Pattern B: Concept introduction with anchor stat ``` [h1 Title] [Hero Stat — the anchor number] [p Body paragraph explaining why this matters] ``` ### Pattern C: Compare-and-contrast ``` [h1 Title] █ Section heading [compare — 1-2 pairs, custom labels] ``` ### Pattern D: Process explanation ``` [h1 Title] [p Body intro paragraph] [flow — 3-5 steps] ``` ### Pattern E: Quick-recall card grid ``` [h1 Title] [p Body context paragraph] [cards — 3-4 cards across] ``` ### Pattern F: Procedure / checklist ``` [h1 Title] [p Brief context] [steps — 5-7 numbered items] ``` --- ## 7. Hyperlinks Inline markdown syntax works inside any **heading** or **text** block: ``` See the [BSM Speak-Up policy](https://bsm.example.com/speakup) for details. ``` Renders as a cyan underlined link that opens in a new tab. URLs must start with `http://`, `https://`, or `/` (root-relative). For **image blocks**, set the optional "Link to URL" field — the whole image becomes clickable. --- ## 8. Authoring Checklist Before publishing a deck: - [ ] Title slide has the course/module name, mandatory training scope, approval line, and footer - [ ] Every content slide has a clear `h1` title - [ ] Body text is **20 pt minimum** (never use 14-16 pt "fine print") - [ ] No slide has more than **5 cards / rules / steps** - [ ] **Compare blocks have custom Left/Right labels** (not the default Challenge/Solution unless that's literally what you mean) - [ ] **Logos are set** (either via account default or per-deck) - [ ] At least one Quiz or MCQ block per major section for engagement - [ ] Hero Stat used at most 1–2 times per deck (its power is being rare) - [ ] Last slide is a closing/Thank-You title slide --- ## 9. What NOT to Do - ❌ Don't shrink body text below 20 pt to fit more content — **split into multiple slides instead** - ❌ Don't mix Playfair, serif, or other display fonts — **Arial only**, matching BSM - ❌ Don't use red/yellow/green outside their semantic meanings (red=danger, yellow=caution, green=success) - ❌ Don't put more than 4 icon cards per row — the grid wraps to 2 rows and becomes cramped - ❌ Don't use more than 5 rules / 5-7 steps per slide — the audience tunes out - ❌ Don't use Hero Stat more than 1–2 times per deck - ❌ Don't leave compare labels at "Challenge / Solution" when the comparison is something else - ❌ Don't paste long URLs as link text — wrap them in `[descriptive text](url)` - ❌ Don't put the Begin button on slides other than slide 1 — it's auto-rendered there --- ## 10. Live Session Features When presenting to an audience: - **Go Live** button (bottom-right of viewer) starts a session — generates a session code + QR - Audience joins at `cryosim.com/projects/slides/audience?code=XXXX` (or scans QR) - **Live stat pills** appear in the bottom-bar middle: responses count + joined count - **Reactions** (👍 💡 🤔 🔥) — audience taps these on their device; they float up on the presenter's screen - **Polls / MCQs** become interactive — audience taps an option; results show in real time. MCQ correct answer is hidden until you click **Reveal** End the session by clicking the same button (now red, labeled "End Live"). --- ## 11. Keyboard & Navigation | Key | Action | |---|---| | `→` / `Space` | Next slide | | `←` | Previous slide | | Fullscreen button (⛶) | Toggle fullscreen (PowerPoint slideshow mode) | | `Esc` | Exit fullscreen | In **fullscreen** mode: - CryoSim nav, progress bar, side panel, and collapse arrow all disappear - Slide scales up to fill the viewport (with white letterbox if aspect-ratio doesn't match exactly) - Bottom bar auto-hides after **10 seconds** of inactivity, reappears on mouse-move - Cursor also fades with the controls --- ## 12. Where Things Live in the Codebase | File | Purpose | |---|---| | [`builder.php`](builder.php) | The slide editor (toolbar, block forms, save) | | [`viewer.php`](viewer.php) | The presentation viewer with fixed 1920×1080 canvas + transform-scale | | [`audience.php`](audience.php) | Mobile audience-companion view (reactions, polls) | | [`slide_preview.php`](slide_preview.php) | Live preview iframe inside the builder | | [`builder_api.php`](builder_api.php) | All server endpoints: save / load / list / delete / uploadImage / uploadLogo / getSettings / saveSettings / importPptx / etc. | | [`pres_helpers.php`](pres_helpers.php) | Storage helpers — user dirs, default logos, image paths | | [`export_pptx.py`](export_pptx.py) / [`import_pptx.py`](import_pptx.py) | PowerPoint export/import via Python `python-pptx` | | [`presentations/users/{uid}/`](presentations/users/) | Per-user storage — presentations, uploaded images, uploaded logos, user settings | ### Presentation JSON schema ```json { "meta": { "id": "kebab-case-id", "title": "Display title", "userId": "owner uid (or '' for demo)", "folder": "optional folder name", "logoLeft": "URL or empty", "logoRight": "URL or empty", "updated": "ISO timestamp", "created": "ISO timestamp" }, "slides": [ { "type": "title", "title": "Hero title", "taglines": ["line 1", "line 2"], "footer": "Context footer" }, { "type": "content", "title": "Slide title", "titleEmphasis": "word to highlight in cyan", "speakerNotes": "private notes", "blocks": [ { "type": "heading", "text": "Section name" }, { "type": "text", "content": "Body paragraph with [link](https://url)" }, { "type": "cards", "items": [ {"icon":"🎯","title":"...","text":"..."} ] }, { "type": "rules", "items": [ {"variant":"teal|coral|gold","heading":"...","text":"..."} ] }, { "type": "steps", "items": ["Step 1", "Step 2", "..."] }, { "type": "table", "headers":["Col1","Col2"], "rows":[["a","b"]] }, { "type": "compare", "leftLabel":"Risk", "rightLabel":"Mitigation", "items":[ {"challenge":"...","solution":"..."} ] }, { "type": "poll", "question": "...", "options": ["A","B","C"] }, { "type": "mcq", "question": "...", "options": ["A","B","C","D"], "answer": 2, "note": "explanation" }, { "type": "flow", "items": [ {"title":"...","desc":"...","color":"#0087CC"} ] }, { "type": "hero_stat", "stat": "-162°C", "label": "Label", "subtext": "Optional supporting text" }, { "type": "image", "url": "/path/to/img.png", "alt": "alt text", "caption": "optional", "link": "optional", "size": "sm|md|lg|full" } ] } ] } ``` --- ## 13. Tweaking the Design Yourself All slide-canvas CSS lives in [`viewer.php`](viewer.php) between the `