← back to Abrams
public/wall.html
73 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Abrams — Wall</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/css/panel.css" />
<style>
.container { max-width: 760px; margin: 0 auto; padding: 100px 24px 60px; }
.composer { background: var(--bg-2); border: 1px solid var(--hairline); padding: 20px; margin-bottom: 24px; }
.composer input, .composer textarea { width: 100%; background: var(--bg-3); border: 1px solid var(--hairline); color: var(--fg); padding: 10px 12px; font-family: var(--sans); font-size: 14px; margin-bottom: 8px; }
.composer textarea { min-height: 80px; resize: vertical; }
.composer button { background: var(--accent); color: #111; border: none; padding: 10px 28px; font-family: var(--mono); font-size: 11px; letter-spacing: .25em; font-weight: 600; cursor: pointer; }
.post { background: var(--bg-2); border: 1px solid var(--hairline); padding: 18px 22px; margin-bottom: 12px; }
.post .meta { font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin-bottom: 8px; letter-spacing: .15em; text-transform: uppercase; }
.post .author { color: var(--accent); }
.post .body { color: var(--fg); font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
</style>
</head>
<body>
<div class="chrome">
<a class="logo" href="/">ABRAMS<span class="dot">.</span></a>
<div class="nav-burger" role="button" aria-label="open menu">
<span class="bars"><span></span><span></span><span></span></span>
<span class="label">MENU</span>
</div>
</div>
<div class="container">
<h1 style="font-family:var(--serif);font-size:42px;font-weight:400;margin:0 0 6px;">The Wall</h1>
<p style="color:var(--fg-2);margin:0 0 28px;">Build-in-public timeline. Drop a thought, watch the empire build.</p>
<div class="composer">
<input id="author" placeholder="Your name (or stay Anonymous)" />
<textarea id="body" placeholder="What's happening in the empire today?"></textarea>
<button onclick="post()">POST</button>
</div>
<div id="posts"></div>
</div>
<footer>© 2026 Steven Abrams</footer>
<script src="/static/js/corner-nav.js"></script>
<script src="/static/js/gamify.js"></script>
<script>
function esc(s){ return String(s||'').replace(/[&<>"']/g, m=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[m])); }
async function load() {
const r = await fetch('/api/wall').then(x=>x.json());
document.getElementById('posts').innerHTML = (r.posts||[]).reverse().map(p => `
<div class="post">
<div class="meta"><span class="author">${esc(p.author||'Anonymous')}</span> · ${new Date(p.ts).toLocaleString('en-US')}</div>
<div class="body">${esc(p.body)}</div>
</div>
`).join('') || '<div style="color:var(--fg-3);font-family:var(--mono);font-size:12px;padding:24px;text-align:center;">first wall post pending</div>';
}
async function post() {
const author = document.getElementById('author').value;
const body = document.getElementById('body').value;
if (!body.trim()) return;
await fetch('/api/wall',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({author,body})});
document.getElementById('body').value = '';
load();
}
load();
setInterval(load, 15000);
</script>
</body>
</html>