index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Math flash cards</title>
<style>
  :root {
    --ink:#1a1a1a; --mut:#6b6b6b; --line:#dcdad4; --bg:#faf9f7; --card:#fff;
    --acc:#185fa5; --accbg:#e6f1fb; --accline:#85b7eb; --err:#a32d2d;
    --pad: clamp(1rem, 3vw, 1.5rem);
  }
  @media (prefers-color-scheme: dark) {
    :root { --ink:#ececea; --mut:#a3a29e; --line:#3a3a38; --bg:#1a1a19; --card:#252523;
            --acc:#85b7eb; --accbg:#12283d; --accline:#2f5f8f; --err:#f09595; }
  }
  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  body {
    margin:0; padding: var(--pad) max(var(--pad), env(safe-area-inset-left)) 3rem;
    background:var(--bg); color:var(--ink);
    font:16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  .wrap { max-width:1060px; margin:0 auto; }
  header { display:flex; align-items:flex-start; gap:.85rem;
           margin-bottom:1.5rem; padding-bottom:1.25rem;
           border-bottom:1px solid var(--line); }
  .mark { flex:none; width:46px; height:46px; margin-top:1px; }
  h1 { font-size:clamp(22px,4.4vw,30px); font-weight:600; letter-spacing:-.021em;
       line-height:1.15; margin:0 0 .3rem; }
  .sub { color:var(--mut); font-size:14.5px; margin:0; }
  .cols { display:grid; gap:1.25rem; grid-template-columns:1fr; align-items:start; }
  .panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:var(--pad); }
  .panel + .panel { margin-top:1.25rem; }
  fieldset { border:0; padding:0; margin:0 0 1.25rem; min-width:0; }
  fieldset:last-of-type { margin-bottom:1rem; }
  legend { font-size:13px; font-weight:600; padding:0; margin-bottom:.5rem; }
  .fam { display:grid; grid-template-columns:repeat(auto-fit,minmax(40px,1fr)); gap:6px; }
  .fam button { min-height:44px; padding:0; font-size:15px; }
  button, select, input[type=number] {
    font:inherit; font-size:14px; background:var(--card); color:var(--ink);
    border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem;
    min-height:44px; cursor:pointer; max-width:100%;
  }
  select { width:100%; }
  button:hover, select:hover { border-color:var(--mut); }
  button:focus-visible, select:focus-visible, input:focus-visible {
    outline:2px solid var(--acc); outline-offset:2px; }
  button[aria-pressed=true] { background:var(--accbg); color:var(--acc); border-color:var(--accline); font-weight:600; }
  input[type=number] { width:84px; cursor:text; }
  label.row { display:flex; align-items:center; gap:.6rem; font-size:14px;
              padding:.35rem 0; cursor:pointer; }
  label.row input {
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; flex:none; margin:0; position:relative;
    border:1px solid var(--line); border-radius:4px;
    background:var(--card); cursor:pointer;
  }
  label.row input:checked { background:var(--acc); border-color:var(--acc); }
  label.row input:checked::after {
    content:""; position:absolute; left:5px; top:1px;
    width:4px; height:9px; border:solid var(--card);
    border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  .pair { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
          margin-bottom:.5rem; font-size:14px; color:var(--mut); }
  .pair span { flex:1 1 100px; min-width:100px; }
  .duo { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0 1.25rem; }
  input[type=range] {
    -webkit-appearance:none; appearance:none;
    width:100%; height:28px; background:transparent; cursor:pointer;
    accent-color:var(--acc);
  }
  input[type=range]::-webkit-slider-runnable-track {
    height:6px; border-radius:3px;
    background:linear-gradient(var(--acc),var(--acc)) 0/var(--pct,37.5%) 100% no-repeat, var(--line);
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width:18px; height:18px; margin-top:-6px; border-radius:50%;
    background:var(--acc); border:2px solid var(--card);
    box-shadow:0 0 0 1px var(--accline);
  }
  input[type=range]::-moz-range-track { height:6px; border-radius:3px; background:var(--line); }
  input[type=range]::-moz-range-progress { height:6px; border-radius:3px; background:var(--acc); }
  input[type=range]::-moz-range-thumb {
    width:18px; height:18px; border-radius:50%; border:2px solid var(--card);
    background:var(--acc); box-shadow:0 0 0 1px var(--accline);
  }
  .hint { font-size:12.5px; color:var(--mut); margin-top:.35rem; }
  .foot { border-top:1px solid var(--line); padding-top:1rem;
          display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .count { font-size:13px; color:var(--mut); }
  .go { background:var(--accbg); color:var(--acc); border-color:var(--accline); font-weight:600; }
  .err { color:var(--err); font-size:13px; margin-top:.5rem; }
  .err:empty { display:none; }
  .pv { padding:0; overflow:hidden; }
  .pv iframe { display:block; width:100%; aspect-ratio:612/792; max-height:78vh; border:0; background:#fff; }
  .pvbar { display:flex; justify-content:space-between; align-items:center; gap:.75rem;
           flex-wrap:wrap; padding:.6rem var(--pad); border-bottom:1px solid var(--line);
           font-size:13px; color:var(--mut); }
  .pvbar a { color:var(--acc); }
  @media (min-width:900px) {
    .cols { grid-template-columns: minmax(0,380px) minmax(0,1fr); align-items:stretch; }
    .pv { display:flex; flex-direction:column; }
    .pv iframe { flex:1; aspect-ratio:auto; max-height:none; min-height:0; }
  }
  .note { color:var(--mut); font-size:12.5px; white-space:nowrap; }
  .tips { margin-top:1.25rem; }
  .tips h2 { font-size:16px; font-weight:600; margin:0 0 .75rem; }
  .tips h3 { font-size:14px; font-weight:600; margin:1.1rem 0 .3rem; }
  .tips p, .tips li { font-size:14px; color:var(--mut); margin:.3rem 0; }
  .tips ul { margin:.3rem 0; padding-left:1.15rem; }
  .tips strong { color:var(--ink); font-weight:600; }
</style>
</head>
<body>
<div class="wrap">

<header>
  <svg class="mark" viewBox="0 0 46 46" aria-hidden="true">
    <rect x="6.5" y="10" width="26" height="30" rx="4.5" transform="rotate(-8 19.5 25)"
          fill="var(--accbg)" stroke="var(--accline)" stroke-width="1.5"/>
    <rect x="14" y="7" width="26" height="30" rx="4.5"
          fill="var(--card)" stroke="var(--acc)" stroke-width="1.5"/>
    <path d="M27 15v14M20 22h14" stroke="var(--acc)" stroke-width="2.6" stroke-linecap="round"/>
  </svg>
  <div>
    <h1>Math flash cards</h1>
    <p class="sub">Printable, double-sided, one fact family at a time. Everything runs in your browser. Nothing is uploaded.</p>
  </div>
</header>

<div class="cols">
  <div>
    <div class="panel">
      <fieldset>
        <legend>Fact family</legend>
        <div class="fam" id="fam"></div>
      </fieldset>

      <div class="duo">
        <fieldset>
          <legend>Operations</legend>
          <label class="row"><input type="checkbox" id="add" checked> Addition</label>
          <label class="row"><input type="checkbox" id="sub" checked> Subtraction</label>
          <label class="row"><input type="checkbox" id="both" checked> Both orders <span class="note" id="bothNote"></span></label>
        </fieldset>
        <fieldset>
          <legend>Ceilings</legend>
          <div class="pair"><span>Largest term</span><input type="number" id="maxTerm" value="20" min="1" max="999" inputmode="numeric"></div>
          <div class="pair"><span>Largest answer</span><input type="number" id="maxAnswer" value="20" min="1" max="999" inputmode="numeric"></div>
        </fieldset>
      </div>

      <fieldset>
        <legend>Cards per sheet</legend>
        <select id="grid">
          <option value="2x2">4 (2 × 2)</option>
          <option value="2x3">6 (2 × 3)</option>
          <option value="3x3" selected>9 (3 × 3)</option>
          <option value="3x4">12 (3 × 4)</option>
        </select>
      </fieldset>

      <fieldset>
        <legend>Answer-side ink darkness</legend>
        <input type="range" id="ink" min="10" max="100" step="1" value="10"
               aria-describedby="inkHint">
        <div class="hint" id="inkHint">Lower is lighter and shows through thin paper less. <span id="inkOut">10%</span></div>
      </fieldset>

      <div class="foot">
        <div class="count" id="count"></div>
        <button id="dl" class="go">Download PDF</button>
      </div>
      <div class="err" id="err" role="alert"></div>
    </div>
  </div>

  <div class="panel pv">
    <div class="pvbar">
      <span>Preview</span>
      <a id="newtab" href="#" target="_blank" rel="noopener">Open in new tab</a>
    </div>
    <iframe id="preview" title="Flash card PDF preview"></iframe>
  </div>
</div>

<div class="panel tips">
  <h2>Getting good results</h2>

  <h3>Three ways to print it</h3>
  <p>Odd pages are problems, even pages are their answers, already mirrored to land behind the right card.</p>
  <ul>
    <li><strong>Double-sided printer.</strong> Print it all, flipping on the <strong>long edge</strong>.</li>
    <li><strong>One side at a time.</strong> Print the <strong>even</strong> pages, put the stack back in the tray, print the <strong>odd</strong> pages.</li>
    <li><strong>Glue.</strong> Print single-sided, glue page 1 to page 2, and cut through both.</li>
  </ul>

  <h3>Show-through</h3>
  <p>Ink darkness starts at the faintest setting (10%) so answers don't show through the front. If they're hard to read in normal light, nudge it up. Cardstock fixes show-through outright if you have some.</p>

  <h3>Choosing a range</h3>
  <p>The two ceilings do different jobs. <strong>Largest term</strong> caps the numbers your child reads; <strong>largest answer</strong> caps what they have to produce. Setting the answer ceiling to 20 keeps every problem inside the range most first-grade curricula work in.</p>
  <p><strong>Both orders</strong> adds 4 + 9 alongside 9 + 4. It nearly doubles the deck, but seeing the family number in both positions is what teaches that order doesn't matter in addition.</p>

  <h3>Using them</h3>
  <ul>
    <li>Five minutes daily beats half an hour on Sunday.</li>
    <li>Sort into two piles as you go: knows it instantly, and needs to count. Drill the second pile only.</li>
    <li>Let them say the answer before you flip. Flipping first turns it into reading, not recall.</li>
    <li>Retire a card once it's automatic. A shrinking deck is visible progress.</li>
  </ul>
  <p>Struggling on a card isn't a signal to drill harder that day. It usually means the underlying strategy (counting on, making ten) hasn't landed yet, and that's worth going back to.</p>
</div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>
<script>
const GRIDS = { "2x2":[2,2], "2x3":[2,3], "3x3":[3,3], "3x4":[3,4] };
const PAGE_W = 612, PAGE_H = 792;
const CAP = 0.717;
let blobUrl = null, timer = null;

function el(id) { return document.getElementById(id); }
function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, isFinite(v) ? v : lo)); }

function readForm() {
  const [cols, rows] = GRIDS[el("grid").value];
  return {
    step: +document.querySelector("#fam button[aria-pressed=true]").dataset.n,
    maxTerm: clamp(+el("maxTerm").value, 1, 999),
    maxAnswer: clamp(+el("maxAnswer").value, 1, 999),
    addition: el("add").checked,
    subtraction: el("sub").checked,
    bothOrders: el("both").checked,
    cols, rows,
    flip: "long",
    ink: 1 - (+el("ink").value / 100)
  };
}

function buildProblems(c) {
  const cards = [];
  if (c.addition && c.step <= c.maxTerm) {
    for (let n = 0; n <= c.maxAnswer; n++)
      if (n <= c.maxTerm && n + c.step <= c.maxAnswer)
        cards.push([n + " + " + c.step, n + c.step, "+"]);
    if (c.bothOrders)
      for (let n = 0; n <= c.maxAnswer; n++)
        if (n !== c.step && n <= c.maxTerm && c.step + n <= c.maxAnswer)
          cards.push([c.step + " + " + n, c.step + n, "+"]);
  }
  if (c.subtraction)
    for (let n = 0; n <= c.maxTerm; n++)
      if (n - c.step >= 0) cards.push([n + " - " + c.step, n - c.step, "-"]);
  return cards;
}

function fitAll(font, texts, maxW, start) {
  let s = start;
  while (s > 8) {
    let ok = true;
    for (const t of texts) if (font.widthOfTextAtSize(t, s) > maxW) { ok = false; break; }
    if (ok) break;
    s -= 1;
  }
  return s;
}

function centered(page, text, cx, y, font, size, g) {
  const w = font.widthOfTextAtSize(text, size);
  page.drawText(text, { x: cx - w / 2, y, size, font, color: PDFLib.rgb(g, g, g) });
}

function guides(page, cols, rows, cw, ch) {
  const c = PDFLib.rgb(0.78, 0.78, 0.78);
  for (let i = 1; i < cols; i++)
    page.drawLine({ start:{x:i*cw,y:0}, end:{x:i*cw,y:PAGE_H}, thickness:0.5, color:c, dashArray:[3,3] });
  for (let j = 1; j < rows; j++)
    page.drawLine({ start:{x:0,y:j*ch}, end:{x:PAGE_W,y:j*ch}, thickness:0.5, color:c, dashArray:[3,3] });
}

async function makePdf(c) {
  const cards = buildProblems(c);
  if (!cards.length) throw new Error("Those settings produce no cards.");

  const doc = await PDFLib.PDFDocument.create();
  const bold = await doc.embedFont(PDFLib.StandardFonts.HelveticaBold);
  const reg  = await doc.embedFont(PDFLib.StandardFonts.Helvetica);

  const cw = PAGE_W / c.cols, ch = PAGE_H / c.rows;
  const inner = cw * 0.74;

  const bigTexts = cards.map(x => x[0]).concat(cards.map(x => String(x[1])));
  const fSize = fitAll(bold, bigTexts, inner, Math.min(ch * 0.28, 76));
  const lSize = fitAll(reg, cards.map(x => x[0] + "  ="), inner, Math.max(11, fSize * 0.34));

  const per = c.cols * c.rows;
  const origin = i => {
    const row = Math.floor(i / c.cols), col = i % c.cols;
    return [col * cw, PAGE_H - (row + 1) * ch];
  };
  const mirror = i => {
    const row = Math.floor(i / c.cols), col = i % c.cols;
    if (c.flip === "long")  return row * c.cols + (c.cols - 1 - col);
    if (c.flip === "short") return (c.rows - 1 - row) * c.cols + col;
    return i;
  };

  for (let s = 0; s < cards.length; s += per) {
    const batch = cards.slice(s, s + per);

    const front = doc.addPage([PAGE_W, PAGE_H]);
    guides(front, c.cols, c.rows, cw, ch);
    batch.forEach((card, i) => {
      const [x, y] = origin(i), cx = x + cw / 2, cy = y + ch / 2;
      front.drawText(card[2] + c.step, {
        x: x + cw * 0.09, y: y + ch - 24, size: Math.max(10, fSize * 0.28),
        font: bold, color: PDFLib.rgb(0.45, 0.45, 0.45) });
      centered(front, card[0], cx, cy - CAP * fSize / 2, bold, fSize, 0);
    });

    const back = doc.addPage([PAGE_W, PAGE_H]);
    guides(back, c.cols, c.rows, cw, ch);
    batch.forEach((card, i) => {
      const [x, y] = origin(mirror(i)), cx = x + cw / 2, cy = y + ch / 2;
      const ab = cy - CAP * fSize / 2 - lSize * 0.7;
      centered(back, String(card[1]), cx, ab, bold, fSize, c.ink);
      centered(back, card[0] + "  =", cx, ab + CAP * fSize + lSize * 0.9, reg, lSize,
               Math.min(0.75, c.ink + 0.22));
    });
  }

  return { bytes: await doc.save(), cards };
}

function filename(c) {
  return "flashcards-" + (c.addition ? "plus" : "") +
         (c.subtraction ? "minus" : "") + "-" + c.step + ".pdf";
}

async function refresh() {
  el("err").textContent = "";
  const c = readForm();
  try {
    const { bytes, cards } = await makePdf(c);
    const per = c.cols * c.rows;
    const sheets = Math.ceil(cards.length / per);
    const adds = cards.filter(x => x[2] === "+").length;
    el("count").textContent =
      cards.length + " cards (" + adds + " +, " + (cards.length - adds) + " −) · " +
      (sheets * 2) + " pages · " + sheets + " sheet" + (sheets === 1 ? "" : "s");
    if (blobUrl) URL.revokeObjectURL(blobUrl);
    blobUrl = URL.createObjectURL(new Blob([bytes], { type: "application/pdf" }));
    el("preview").src = blobUrl;
    el("newtab").href = blobUrl;
  } catch (e) {
    el("err").textContent = e.message;
    el("count").textContent = "";
  }
  writeHash(c);
}

function writeHash(c) {
  const ops = (c.addition ? "a" : "") + (c.subtraction ? "s" : "") + (c.bothOrders ? "b" : "");
  history.replaceState(null, "", "#f=" + c.step + "&t=" + c.maxTerm + "&a=" + c.maxAnswer +
    "&ops=" + (ops || "-") + "&g=" + c.cols + "x" + c.rows +
    "&ink=" + Math.round((1 - c.ink) * 100));
}

function readHash() {
  const h = new URLSearchParams(location.hash.slice(1));
  if (!h.has("f")) return;
  setFam(clamp(+h.get("f"), 0, 12));
  if (h.has("t")) el("maxTerm").value = clamp(+h.get("t"), 1, 999);
  if (h.has("a")) el("maxAnswer").value = clamp(+h.get("a"), 1, 999);
  if (h.has("ops")) {
    const o = h.get("ops");
    el("add").checked = o.includes("a");
    el("sub").checked = o.includes("s");
    el("both").checked = o.includes("b");
  }
  if (h.has("g") && GRIDS[h.get("g")]) el("grid").value = h.get("g");
  if (h.has("ink")) el("ink").value = clamp(+h.get("ink"), 10, 100);
}

function setFam(n) {
  document.querySelectorAll("#fam button").forEach(b =>
    b.setAttribute("aria-pressed", String(+b.dataset.n === n)));
  syncBoth();
}

function syncBoth() {
  const n = document.querySelector("#fam button[aria-pressed=true]").dataset.n;
  el("bothNote").textContent = "(" + n + " + x and x + " + n + ")";
}

function syncInk() {
  const v = +el("ink").value;
  el("inkOut").textContent = v + "%";
  el("ink").style.setProperty("--pct", (v - 10) / 0.9 + "%");
}
function schedule() { clearTimeout(timer); timer = setTimeout(refresh, 180); }

const fam = el("fam");
for (let n = 0; n <= 12; n++) {
  const b = document.createElement("button");
  b.type = "button"; b.textContent = n; b.dataset.n = n;
  b.setAttribute("aria-pressed", String(n === 4));
  b.addEventListener("click", () => { setFam(n); schedule(); });
  fam.appendChild(b);
}

document.querySelectorAll("input, select").forEach(i =>
  i.addEventListener("input", () => { syncInk(); schedule(); }));

el("dl").addEventListener("click", async () => {
  const c = readForm();
  try {
    const { bytes } = await makePdf(c);
    const a = document.createElement("a");
    a.href = URL.createObjectURL(new Blob([bytes], { type: "application/pdf" }));
    a.download = filename(c);
    a.click();
    setTimeout(() => URL.revokeObjectURL(a.href), 4000);
  } catch (e) { el("err").textContent = e.message; }
});

readHash();
syncInk();
syncBoth();
refresh();
</script>
</body>
</html>