GLM 5.3 FlashZ.ai

Here's a print-ready chore chart designed to look like a real sheet pinned to the fridge — I went for a warm "paper worksheet" feel with a hand-drawn character, since that reads better on a fridge door than a sterile digital table.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Chore Chart — Ava &amp; Leo</title>
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Patrick+Hand&display=swap" rel="stylesheet">
<style>
  :root{
    --paper:#FFFCF2;
    --ink:#42382B;
    --ink-soft:#8A7A5F;
    --line:#D9CDB2;
    --frame:#4A3F2E;
    --ava:#E4573D;
    --leo:#1B7C68;
    --mustard:#F0B23E;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{
    background:#A7ADB1;
    font-family:'Patrick Hand',cursive;
    color:var(--ink);
    padding:56px 24px 120px;
    overflow-x:auto;
  }
  /* brushed-steel fridge surface */
  body::before{
    content:"";
    position:fixed;inset:0;pointer-events:none;
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3px),
      radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.16), transparent 55%),
      linear-gradient(0deg, rgba(0,0,0,.18), transparent 30%);
  }

  .board{
    width:980px;margin:0 auto;position:relative;
    transform:rotate(-.4deg);
  }
  .magnet{
    position:absolute;width:42px;height:42px;border-radius:50%;z-index:5;
    box-shadow:0 4px 8px rgba(0,0,0,.30), inset 0 -4px 6px rgba(0,0,0,.25), inset 0 4px 6px rgba(255,255,255,.5);
  }
  .m1{background:var(--ava);top:-17px;left:28px;transform:rotate(8deg)}
  .m2{background:var(--leo);top:-14px;right:34px;transform:rotate(-6deg)}
  .m3{background:var(--mustard);bottom:-15px;left:50%;margin-left:-21px}

  .sheet{
    background:var(--paper);
    border-radius:8px;
    padding:22px 24px 20px;
    box-shadow:0 20px 44px rgba(0,0,0,.32), 0 4px 10px rgba(0,0,0,.18);
    position:relative;
  }
  @media screen{
    .sheet::after{ /* faint paper grain */
      content:"";position:absolute;inset:0;border-radius:8px;pointer-events:none;opacity:.05;
      background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="140" height="140" filter="url(%23n)"/></svg>');
    }
  }

  /* ---------- header ---------- */
  header{
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:0 6px 16px;
  }
  .doodle{justify-self:start;transform:rotate(-8deg)}
  .title{text-align:center}
  h1{
    font-family:'Baloo 2',cursive;font-weight:800;
    font-size:42px;letter-spacing:.5px;color:var(--ink);line-height:1;
  }
  .squiggle{display:block;margin:4px auto 6px}
  .title p{font-size:17px;color:#7A6A4A}
  .weekof{justify-self:end;text-align:right;font-size:16px;color:#5C4E36}
  .weekof .blank{
    display:inline-block;min-width:150px;margin-left:6px;
    border-bottom:2px solid var(--ink-soft);
    outline:none;
  }

  /* ---------- table ---------- */
  .frame{border:3px solid var(--frame);border-radius:10px;overflow:hidden}
  table{width:100%;border-collapse:collapse;table-layout:fixed}
  th,td{border:1px solid var(--line)}
  .edge{border-right:2.5px solid var(--frame) !important}

  th.corner{
    width:112px;background:#F6EFDC;
    font-size:15px;color:#6A593C;text-align:center;padding:8px 6px;
  }
  th.corner .blank{
    display:block;width:86px;margin:2px auto 0;
    border-bottom:2px solid var(--ink-soft);outline:none;
  }
  th.kid{
    background:var(--kc);color:var(--paper);
    padding:9px 10px;border-bottom:2.5px solid var(--frame);
  }
  th.k-ava{--kc:var(--ava)}
  th.k-leo{--kc:var(--leo)}
  th.kid .inner{display:flex;align-items:center;justify-content:center;gap:10px}
  .kname{font-family:'Baloo 2',cursive;font-weight:800;font-size:23px;letter-spacing:.5px}
  .age{
    font-size:13px;border:1.5px solid rgba(255,252,242,.55);
    border-radius:999px;padding:1px 10px 0;
  }

  td.day{
    width:112px;background:#F6EFDC;text-align:center;vertical-align:middle;
    font-family:'Baloo 2',cursive;font-weight:700;font-size:15px;
    letter-spacing:.5px;text-transform:uppercase;color:#6A593C;
  }
  td.chore{padding:9px 13px}
  td.c-ava{background:#FBEDE7}
  td.c-leo{background:#E7F2EE}
  .cell{display:flex;align-items:center;gap:10px;min-height:56px}
  .txt{flex:1;font-size:18px;line-height:1.25;color:#4A3F33;outline:none}
  [contenteditable="true"]:hover{text-decoration:underline dotted rgba(74,63,51,.45)}
  [contenteditable="true"]:focus{text-decoration:underline dotted rgba(74,63,51,.7)}

  .tick{
    width:26px;height:26px;flex:none;border-radius:50%;
    border:2.5px solid var(--kc,var(--ink));background:transparent;
    display:grid;place-items:center;cursor:pointer;padding:0;
    transition:transform .15s ease, background .15s ease;
  }
  .tick:hover{transform:scale(1.14)}
  .tick svg{width:16px;height:16px;display:block}
  .tick path{
    fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
    stroke-dasharray:22;stroke-dashoffset:22;
    transition:stroke-dashoffset .28s ease;
  }
  .tick.on{background:var(--kc,var(--ink))}
  .tick.on path{stroke-dashoffset:0}
  .tick:focus-visible,.star:focus-visible{outline:2px dashed var(--ink-soft);outline-offset:2px}

  tfoot td{border-top:2.5px solid var(--frame);vertical-align:middle}
  td.stars-label{
    background:#F6EFDC;padding:8px 12px;text-align:center;width:112px;
  }
  td.stars-label strong{
    display:block;font-family:'Baloo 2',cursive;font-weight:700;font-size:16px;color:#6A593C;
  }
  td.stars-label span{display:block;font-size:12.5px;line-height:1.2;color:var(--ink-soft)}
  td.stars{padding:8px 13px}
  .star-row{display:flex;align-items:center;gap:7px}
  .star{
    width:28px;height:28px;background:none;border:none;cursor:pointer;padding:0;
    transition:transform .15s ease;
  }
  .star:hover{transform:scale(1.18) rotate(8deg)}
  .star svg{width:28px;height:28px;display:block}
  .star path{
    fill:transparent;stroke:var(--sc);stroke-width:1.8;stroke-linejoin:round;
    transition:fill .15s ease;
  }
  .star.on path{fill:var(--sc)}

  /* ---------- reward footer ---------- */
  .reward{margin-top:14px;text-align:center}
  .reward .line1{font-size:19px;color:#5C4E36}
  .reward .blank{
    display:inline-block;min-width:250px;margin:0 4px;
    border-bottom:2px dashed var(--ink-soft);outline:none;
  }
  .reward .line2{margin-top:5px;font-size:15px;color:var(--ink-soft)}

  /* ---------- toolbar (screen only) ---------- */
  .toolbar{
    position:fixed;left:50%;bottom:22px;transform:translateX(-50%);
    background:#2E2820;color:#F3EBD8;
    padding:9px 16px 9px 10px;border-radius:999px;
    display:flex;align-items:center;gap:14px;
    box-shadow:0 10px 26px rgba(0,0,0,.38);z-index:50;white-space:nowrap;
  }
  .toolbar p{font-size:15px}
  #printBtn{
    font-family:'Baloo 2',cursive;font-weight:700;font-size:15px;
    background:var(--mustard);color:#2E2820;border:none;border-radius:999px;
    padding:8px 18px;display:flex;align-items:center;gap:8px;cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  #printBtn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.3)}
  #printBtn svg{width:16px;height:16px}

  /* ---------- print ---------- */
  @media print{
    @page{size:letter landscape;margin:8mm}
    *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
    body{background:#fff;padding:0;overflow:visible}
    body::before,.no-print,.magnet{display:none !important}
    .board{margin:0 auto;transform:none;width:auto}
    .sheet{box-shadow:none;border-radius:0;width:980px;margin:0 auto;padding:8px 6px}
    .sheet::after{display:none}
    .tick,.star{cursor:default}
  }
</style>
</head>
<body>

<div class="board">
  <span class="magnet m1 no-print"></span>
  <span class="magnet m2 no-print"></span>
  <span class="magnet m3 no-print"></span>

  <div class="sheet">
    <header>
      <div class="doodle">
        <svg width="72" height="62" viewBox="0 0 72 62" aria-hidden="true">
          <path d="M18 12v14M11 19h14" fill="none" stroke="#F0B23E" stroke-width="3" stroke-linecap="round"/>
          <path d="M52 24l3.4 7.2 8 1.1-5.8 5.6 1.5 7.9-7.1-3.9-7.1 3.9 1.5-7.9-5.8-5.6 8-1.1z" fill="#F0B23E"/>
          <path d="M33 2l1.6 3.5 3.8.5-2.8 2.6.7 3.8-3.3-1.8-3.3 1.8.7-3.8-2.8-2.6 3.8-.5z" fill="none" stroke="#F0B23E" stroke-width="2" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="title">
        <h1>Chore Chart</h1>
        <svg class="squiggle" width="210" height="14" viewBox="0 0 210 14" aria-hidden="true">
          <path d="M4 8 C 30 2, 55 12, 85 6 S 150 2, 206 7" fill="none" stroke="#F0B23E" stroke-width="3.5" stroke-linecap="round"/>
        </svg>
        <p>Ava &amp; Leo · two chores a day · Monday to Friday</p>
      </div>
      <div class="weekof">week of<span class="blank" contenteditable="true">&nbsp;</span></div>
    </header>

    <div class="frame">
      <table id="grid"></table>
    </div>

    <div class="reward">
      <div class="line1">All 10 stars collected =<span class="blank" contenteditable="true">&nbsp;</span>— write your reward here!</div>
      <div class="line2">Weekends off — you've earned them. High five!</div>
    </div>
  </div>
</div>

<div class="toolbar no-print">
  <button id="printBtn">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9V3h12v6"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="7"/></svg>
    Print
  </button>
  <p>Tick circles &amp; stars to preview — or just print, it's ready for pen. Chore names are editable.</p>
</div>

<script>
  const kids = [
    { key:'ava', name:'Ava', age:7, cls:'k-ava', tint:'c-ava',
      chores:[
        ['Make your bed','Set the table'],
        ['Water the plants','Put clothes in the hamper'],
        ['Tidy your toys','Wipe the table after dinner'],
        ['Make your bed','Help fold the towels'],
        ['Set the table','Put shoes away by the door']
      ]},
    { key:'leo', name:'Leo', age:10, cls:'k-leo', tint:'c-leo',
      chores:[
        ['Take out the trash','Load the dishwasher'],
        ['Unload the dishwasher','Tidy your room'],
        ['Take out the recycling','Vacuum the living room'],
        ['Take out the trash','Clean the bathroom sink'],
        ['Load the dishwasher','Sweep the kitchen floor']
      ]}
  ];
  const days = ['Monday','Tuesday','Wednesday','Thursday','Friday'];

  const faceSVG = `
    <svg class="face" width="30" height="30" viewBox="0 0 32 32" aria-hidden="true">
      <circle cx="16" cy="16" r="13.5" fill="none" stroke="rgba(255,252,242,.85)" stroke-width="2"/>
      <circle cx="8.5" cy="17.5" r="2" fill="rgba(255,255,255,.3)"/>
      <circle cx="23.5" cy="17.5" r="2" fill="rgba(255,255,255,.3)"/>
      <circle cx="11.5" cy="13" r="1.8" fill="#FFFCF2"/>
      <circle cx="20.5" cy="13" r="1.8" fill="#FFFCF2"/>
      <path d="M10.5 19.5c1.8 2.6 9.2 2.6 11 0" fill="none" stroke="#FFFCF2" stroke-width="2" stroke-linecap="round"/>
    </svg>`;

  const table = document.getElementById('grid');

  // header row: week-of + one colored band per kid
  const thead = document.createElement('thead');
  const hr = document.createElement('tr');
  hr.innerHTML =
    `<th class="corner edge">week of<span class="blank" contenteditable="true">&nbsp;</span></th>` +
    kids.map(k =>
      `<th class="kid ${k.cls}${k === kids[0] ? ' edge' : ''}" colspan="2">
         <div class="inner">${faceSVG}<span class="kname">${k.name}</span><span class="age">age ${k.age}</span></div>
       </th>`
    ).join('');
  thead.appendChild(hr);

  // one row per day, two chore cells per kid
  const tbody = document.createElement('tbody');
  days.forEach((day, i) => {
    const tr = document.createElement('tr');
    let html = `<td class="day edge">${day}</td>`;
    kids.forEach((k, ki) => {
      k.chores[i].forEach((chore, j) => {
        html += `
          <td class="chore ${k.tint}${ki === 0 && j === 1 ? ' edge' : ''}">
            <div class="cell">
              <span class="txt" contenteditable="true" spellcheck="false" title="Click to edit">${chore}</span>
              <button class="tick" style="--kc:var(--${k.key})" aria-label="Mark ${k.name}'s chore done">
                <svg viewBox="0 0 24 24"><path d="M5.5 12.5l4 4 9-9.5"/></svg>
              </button>
            </div>
          </td>`;
      });
    });
    tr.innerHTML = html;
    tbody.appendChild(tr);
  });

  // stars row: one per day per kid, to color in when everything's done
  const tfoot = document.createElement('tfoot');
  const fr = document.createElement('tr');
  fr.innerHTML =
    `<td class="stars-label edge"><strong>Stars</strong><span>both chores done?<br>color one in!</span></td>` +
    kids.map(k =>
      `<td class="stars ${k.tint}${k === kids[0] ? ' edge' : ''}" colspan="2">
         <div class="star-row">${
           Array.from({length:5}, () =>
             `<button class="star" style="--sc:var(--${k.key})" aria-label="Color a star for ${k.name}">
                <svg viewBox="0 0 24 24"><path d="M12 2.8l2.7 5.6 6.2.9-4.5 4.3 1.1 6.1-5.5-3-5.5 3 1.1-6.1L3.1 9.3l6.2-.9z"/></svg>
              </button>`).join('')
         }</div>
       </td>`
    ).join('');
  tfoot.appendChild(fr);

  table.append(thead, tbody, tfoot);

  // interactions
  document.addEventListener('click', e => {
    const tick = e.target.closest('.tick');
    if (tick) { tick.classList.toggle('on'); return; }
    const star = e.target.closest('.star');
    if (star) star.classList.toggle('on');
  });

  // single-line editing: Enter commits instead of adding a newline
  document.addEventListener('keydown', e => {
    if (e.key === 'Enter' && e.target.matches('[contenteditable="true"]')) {
      e.preventDefault();
      e.target.blur();
    }
  });

  document.getElementById('printBtn').addEventListener('click', () => window.print());
</script>

</body>
</html>

How it works:

• The chart itself — one row per day (Mon–Fri), with each kid getting two columns in their own color (coral for Ava, teal-green for Leo). Every cell holds an age-appropriate chore and an empty circle to tick with a pen. I varied the chores across the week so nobody gets stuck with the same task every day, and kept them realistic for 7 and 10 years old.
• Built to print — the page is sized to fit a single landscape Letter sheet (and works on A4 landscape too). Hitting Print strips away the fridge backdrop and magnets and outputs just the clean worksheet, with exact colors preserved. Print a fresh one each Sunday, stick it up with real magnets.
• A star system for motivation — at the bottom, each kid has 5 outlined stars: color one in when both chores for that day are done. There's also a fill-in-the-blank reward line ("All 10 stars = ___") so you can set a weekly treat together.
• Little screen conveniences — before printing, you can click any chore name to edit it, fill in the "week of" date, and preview ticks/stars on screen. On screen the sheet sits on a brushed-steel fridge door held by three round magnets, so you can see exactly how it'll look at home.

Just open the file in a browser, click Print, and it's fridge-ready.