Eric WagonerandClaude Fable 5.1
093d742593
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
34 lines
2.4 KiB
HTML
34 lines
2.4 KiB
HTML
<!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>
|