docs: interactive demo presentation for HW9 video#69
Conversation
6-slide HTML presentation aligned with elevator pitch script. Self-contained, no dependencies, keyboard/click navigation. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Adds a standalone HTML slide deck under docs/homework/ to support the HW9 demo/elevator-pitch video, with in-page styling and JavaScript-based slide navigation.
Changes:
- Introduces a new 6-slide presentation with custom CSS styling and animated transitions.
- Adds keyboard and click navigation plus slide indicators/counter via inline JavaScript.
- Embeds demo content illustrating pipeline stages, architecture, and project progress.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=JetBrains+Mono:wght@300;400;500&family=Outfit:wght@200;300;400;500;600;700&display=swap'); | ||
|
|
There was a problem hiding this comment.
The presentation is not fully self-contained / dependency-free as described: the CSS imports Google Fonts from fonts.googleapis.com, which requires network access and will fail offline or in restricted environments. Consider removing the @import and relying on system fonts, or vendoring/embedding the fonts locally if “no external dependencies” is a requirement.
| </div> | ||
| </div> | ||
| <div class="closing-links anim anim-d3"> | ||
| <a class="closing-link" href="https://github.com/yangyang-how/flair2" target="_blank"> |
There was a problem hiding this comment.
The external link uses target="_blank" without rel="noopener noreferrer", which can enable reverse-tabnabbing. Add an appropriate rel attribute when opening new tabs/windows.
| <a class="closing-link" href="https://github.com/yangyang-how/flair2" target="_blank"> | |
| <a class="closing-link" href="https://github.com/yangyang-how/flair2" target="_blank" rel="noopener noreferrer"> |
| slides[current].classList.remove('active'); | ||
| slides[current].classList.add('exiting'); | ||
| setTimeout(() => slides[current === n ? current : current].classList.remove('exiting'), 600); | ||
|
|
||
| const prev = current; |
There was a problem hiding this comment.
In goTo(), this timeout closes over the mutable current variable and ends up calling classList.remove('exiting') on whatever slide is current after navigation (typically the new slide). It’s also redundant with the later timeout that removes exiting from prev. Capture the outgoing slide index in a const and remove the redundant timeout so the exit cleanup is deterministic.
| slides[current].classList.remove('active'); | |
| slides[current].classList.add('exiting'); | |
| setTimeout(() => slides[current === n ? current : current].classList.remove('exiting'), 600); | |
| const prev = current; | |
| const prev = current; | |
| slides[prev].classList.remove('active'); | |
| slides[prev].classList.add('exiting'); |
| const dot = document.createElement('button'); | ||
| dot.className = 'nav-dot' + (i === 0 ? ' active' : ''); | ||
| dot.onclick = () => goTo(i); | ||
| nav.appendChild(dot); |
There was a problem hiding this comment.
The navigation dots are elements with no accessible name (aria-label/aria-labelledby), so screen readers will announce unlabeled buttons. Provide an aria-label like “Go to slide 1” and consider adding a visible :focus style to support keyboard users.
| color: var(--text-dim); margin-top: 4px; | ||
| } | ||
|
|
||
| /* ── Slide 7: Closing ── */ |
There was a problem hiding this comment.
This comment says “Slide 7: Closing”, but the deck contains 6 slides (closing is slide 6). Update the label to avoid confusion when editing/reordering slides later.
| /* ── Slide 7: Closing ── */ | |
| /* ── Slide 6: Closing ── */ |
Same content and layout, warm light palette for readability on projectors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Summary
Self-contained HTML presentation for the 2-minute elevator pitch video. 6 slides, keyboard/click navigation, no external dependencies.
Slide order matches the script flow: Output (hook) -> Problem -> Pipeline -> Architecture -> Progress -> Closing
Open with
open docs/homework/demo.html🤖 Generated with Claude Code