`public/advocacy.html`

84 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>advocacy · designerline</title>
<style>
  :root { --ink:#0e0e0c; --ink-mute:#6e6e68; --paper:#faf8f2; --line:#d9d4c5; --accent:#7a1b1b; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family: ui-serif, Georgia, serif; }
  header {
    display:flex; justify-content:space-between; align-items:center;
    padding:20px 28px; border-bottom:1px solid var(--line);
  }
  header .mark { font-family:ui-sans-serif,system-ui,sans-serif; font-size:13px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
  header nav a { color:var(--ink-mute); text-decoration:none; font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; margin-left:24px; }
  header nav a:hover { color:var(--ink); }
  main { max-width:760px; margin:48px auto 96px; padding:0 28px; }
  h1 { font-weight:500; font-size:36px; letter-spacing:-0.01em; margin:0 0 10px; }
  .lede { color:var(--ink-mute); font-size:16px; line-height:1.5; margin-bottom:48px; }
  .pet { border-top:1px solid var(--line); padding:28px 0; }
  .pet h2 { font-weight:500; font-size:22px; margin:0 0 8px; }
  .pet p { color:var(--ink-mute); font-size:14px; line-height:1.55; margin:0 0 16px; }
  .row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .row button {
    background:var(--ink); color:var(--paper); border:0; padding:9px 18px;
    font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer;
  }
  .row button:disabled { opacity:.5; cursor:not-allowed; }
  .row .count { color:var(--ink-mute); font-family:ui-sans-serif,system-ui,sans-serif; font-size:12px; letter-spacing:.08em; }
  footer { padding:32px 28px 48px; color:var(--ink-mute); font-size:11px; font-family:ui-sans-serif,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; text-align:center; border-top:1px solid var(--line); margin-top:48px; }
</style>
</head>
<body>
<header>
  <a href="/" style="text-decoration:none;color:var(--ink);"><span class="mark">designerline</span></a>
  <nav>
    <a href="/commerce.html">commerce</a>
    <a href="/advocacy.html" style="color:var(--ink);">advocacy</a>
    <a href="/community.html">community</a>
  </nav>
</header>

<main>
  <h1>Petitions backed by 60,000 working designers.</h1>
  <p class="lede">Your signature is verified against your trade credentials in dw_unified. No bots. No retail customers. Only working designers carrying real client portfolios.</p>
  <div id="list"></div>
</main>

<footer>advocacy · designerline v0.1 · supports counted server-side (scaffold)</footer>

<script>
async function load() {
  const data = await (await fetch('/api/advocacy/petitions')).json();
  const local = JSON.parse(localStorage.getItem('dl.advocacy.signed') || '{}');
  document.getElementById('list').innerHTML = (data.petitions||[]).map(p => `
    <article class="pet">
      <h2>${escapeHTML(p.title)}</h2>
      <p>${escapeHTML(p.desc)}</p>
      <div class="row">
        <button data-id="${p.id}" ${local[p.id]?'disabled':''}>${local[p.id]?'Signed':'Sign this petition'}</button>
        <span class="count" id="c-${p.id}">${(p.supports||0) + (local[p.id]?1:0)} supporter${(p.supports||0)+(local[p.id]?1:0)===1?'':'s'}</span>
      </div>
    </article>
  `).join('');
  document.querySelectorAll('.pet button').forEach(b => {
    b.addEventListener('click', () => {
      const id = b.dataset.id;
      const signed = JSON.parse(localStorage.getItem('dl.advocacy.signed') || '{}');
      signed[id] = true;
      localStorage.setItem('dl.advocacy.signed', JSON.stringify(signed));
      b.disabled = true; b.textContent = 'Signed';
      const c = document.getElementById('c-'+id);
      const n = parseInt(c.textContent) + 1;
      c.textContent = n + ' supporter' + (n===1?'':'s');
    });
  });
}
function escapeHTML(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
load();
</script>
</body>
</html>