A share card and a touch icon drawn from the board

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
2026-09-23 15:48:07 -04:00
parent 4f8bbbc3cb
commit 093d742593
4 changed files with 34 additions and 0 deletions
@@ -0,0 +1 @@
 <!doctype html><html><body style="margin:0;background:#8a5a2b"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="180" height="180" style="display:block"><rect width="32" height="32" fill="#8a5a2b"/><circle cx="16" cy="17" r="9" fill="#f0d58a" stroke="#a67c1a" stroke-width="1.5"/><path d="M9 20v-8l3.5 4 3.5-6 3.5 6 3.5-4v8z" fill="#6b4a0f"/></svg></body></html>
@@ -0,0 +1,33 @@
 <!doctype html>
 <html><head><meta charset="utf-8"><style>
  html,body{margin:0;background:#14181a}
  .card{width:1200px;height:630px;display:flex;align-items:center;gap:64px;padding:0 80px;box-sizing:border-box;background:#14181a;color:#e6dfcf;font-family:'Iowan Old Style',Georgia,serif}
  .board{flex:0 0 470px;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
  h1{font-weight:300;font-size:92px;letter-spacing:-.01em;margin:0 0 14px}
  p{font-size:31px;line-height:1.35;color:#9ea59e;margin:0}
  p b{color:#e6dfcf;font-weight:500}
  .foot{margin-top:28px;font-size:24px;color:#626b66}
 </style></head><body><div class="card">
 <svg class="board" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
  <rect width="110" height="110" rx="4" fill="#8a5a2b"/>
  <g id="grid"></g>
 </svg>
 <div>
  <h1>Hnefatafl</h1>
  <p><b>The Viking board game.</b> One king, one throne, four corners, and a ring of attackers closing in. Play the bot or a friend, by Copenhagen rules or Linnaeus's Tablut.</p>
  <p class="foot">tafl.kestrelsnest.social · free, no accounts</p>
 </div></div>
 <script>
  const g = document.getElementById('grid'); const ns = 'http://www.w3.org/2000/svg';
  const el = (t, a) => { const e = document.createElementNS(ns, t); for (const k in a) e.setAttribute(k, a[k]); g.appendChild(e); };
  for (let r = 0; r < 11; r++) for (let c = 0; c < 11; c++) {
    const corner = (r === 0 || r === 10) && (c === 0 || c === 10), throne = r === 5 && c === 5;
    el('rect', { x: c * 10, y: r * 10, width: 10, height: 10, fill: corner ? 'rgba(224,101,92,0.4)' : throne ? 'rgba(240,165,58,0.4)' : 'rgba(255,240,210,0.08)', stroke: 'rgba(30,16,6,0.5)', 'stroke-width': 0.4 });
  }
  const a = [[3,0],[4,0],[5,0],[6,0],[7,0],[5,1],[0,3],[10,3],[0,4],[10,4],[0,5],[1,5],[9,5],[10,5],[0,6],[10,6],[0,7],[10,7],[5,9],[3,10],[4,10],[5,10],[6,10],[7,10]];
  const d = [[5,3],[4,4],[5,4],[6,4],[3,5],[4,5],[6,5],[7,5],[4,6],[5,6],[6,6],[5,7]];
  for (const [x, y] of a) el('circle', { cx: x * 10 + 5, cy: y * 10 + 5, r: 3.4, fill: '#2a2320', stroke: '#0d0a08', 'stroke-width': 0.6 });
  for (const [x, y] of d) el('circle', { cx: x * 10 + 5, cy: y * 10 + 5, r: 3.4, fill: '#ece4d0', stroke: '#b9ab8b', 'stroke-width': 0.6 });
  el('circle', { cx: 55, cy: 55, r: 3.6, fill: '#f0d58a', stroke: '#a67c1a', 'stroke-width': 0.6 });
  el('path', { d: 'M52.6 56.4 l0 -2.6 l1.3 1.4 l1.1 -2.3 l1.1 2.3 l1.3 -1.4 l0 2.6 z', fill: '#6b4a0f' });
 </script></body></html>
		`@@ -0,0 +1 @@`
							`<!doctype html><html><body style="margin:0;background:#8a5a2b"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="180" height="180" style="display:block"><rect width="32" height="32" fill="#8a5a2b"/><circle cx="16" cy="17" r="9" fill="#f0d58a" stroke="#a67c1a" stroke-width="1.5"/><path d="M9 20v-8l3.5 4 3.5-6 3.5 6 3.5-4v8z" fill="#6b4a0f"/></svg></body></html>`