EDAIC Part I Flashcards — Site

A static, no-build flashcard site. Open index.html directly in a browser to preview, or deploy the folder as-is to any static host (GitHub Pages, Netlify, Vercel, etc.).

Structure

index.html            — page shell, deck switcher, card UI, lists which deck files to load
style.css              — all styling (shared across every deck)
app.js                 — all interactivity (deck switching, filtering, flip, shuffle, keyboard nav)
decks/
  deck1-cvs-core.js         — CVS Core (murmurs, cycle, CO, drugs, shock, valve goals)
  deck2-cvs-mechanisms.js   — CVS Mechanisms (PV loop, action potentials, conduction, coronary anatomy, traps)
  deck3-respiratory.js      — Respiratory (volumes, gas exchange, diffusion, ventilators, traps)

How each deck file works

Every deck file just pushes one object onto window.DECKS:

window.DECKS = window.DECKS || [];
window.DECKS.push({
  id: "unique-id",
  title: "Short Tab Title",
  emoji: "🫀",                 // optional, shown in the tab
  subtitle: "One-line description shown under the tabs",
  colors: {                    // optional — omit to use default purple/pink theme
    front1: "#hex", front2: "#hex",   // question-side gradient
    back1: "#hex",  back2: "#hex",    // answer-side gradient
    backText: "#hex",                 // text color on the answer side
    chips: ["#hex", "#hex", ...]      // palette cycled through for category filter chips
  },
  cards: [
    { cat: "Category Name", q: "Question text", a: "Answer text" },
    ...
  ]
});

app.js and style.css never need to change when you add a deck — they read whatever is in window.DECKS.

Adding a new deck (for Claude Code, or by hand)

1. Create decks/deckN-topic.js following the exact pattern above.
2. Add one line to index.html, alongside the existing deck <script> tags:

   <script src="decks/deckN-topic.js"></script>
   

3. That's it — no other file needs editing. Refresh the page (or redeploy) and the new deck appears as a tab automatically.

Deploying live

This is a static site with zero dependencies, so any of these work:

• GitHub Pages: push this folder to a repo, enable Pages on the main branch (root).
• Netlify / Vercel: drag-and-drop the folder in their dashboard, or connect the repo — no build command needed.
• Claude Code: point it at this folder and ask it to init a git repo, push to GitHub, and connect Netlify/Vercel/GitHub Pages for continuous deployment. From then on, new decks (see steps above) can be committed and pushed to go live.

Handover note for Claude Code

This site was generated by Claude (chat) as flat static files with no build step. The task going forward is:

1. Deploy this folder as a live static site (pick a host, connect it, confirm the URL works).
2. When given new flashcard content, create a new decks/deckN-*.js file in the exact schema documented above, add its <script> tag to index.html, commit, and push/deploy so it goes live automatically. Keep visual style consistent — reuse style.css and app.js unchanged unless the user asks for a design change.