{% extends "base.html" %}
{% block body_class %}{% endblock %}
{% block title %}Community — MoonBite{% endblock %}
{% block meta_description %}MoonBite is a small, early proof-of-work network. Watch the live chain, find where people talk, and pick a way to help: mine, run a node, review the code.{% endblock %}
{% block head_extra %}
<style nonce="{{ csp_nonce }}">
  /* Community hub: composes the ds- kit; only the few rules below are page-specific. */
  .cm-stage .ds-eyebrow { display: flex; align-items: center; gap: 8px; }
  .cm-stage .ds-board { margin-top: 24px; }
  .cm-stage .ds-brow { padding: 20px 24px; }
  .cm-stage .ds-brow .val { font-size: clamp(20px, 2.4vw, 28px); }
  .cm-blocks .ds-row { grid-template-columns: 120px minmax(0, 1fr) auto; min-height: 44px; }
  .cm-blocks .ds-row .id { color: var(--ds-bone); }
  .cm-blocks .empty { padding: 24px 0; color: var(--ds-ash); border-bottom: 1px solid var(--ds-line); }
  .cm-talk .ds-row { grid-template-columns: 160px minmax(0, 1fr) auto; }
  .cm-talk .ds-row .meta svg { vertical-align: middle; }
  .cm-talk a.ds-row:hover .t { text-decoration: underline; text-decoration-color: var(--ds-line-2); text-underline-offset: 4px; }
  .cm-callout { margin-top: 32px; }
  .cm-callout a { color: var(--ds-bone); border-bottom: 1px solid var(--ds-line-2); }
  @media (max-width: 767px) {
    .cm-blocks .ds-row, .cm-talk .ds-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
    .cm-blocks .ds-row .id, .cm-talk .ds-row .id { grid-column: 1 / -1; }
  }
</style>
{% endblock %}
{% block content %}
{% set MARK = "M 13.99 -99.02 A 100 100 0 1 0 99.02 -13.99 A 62 62 0 0 1 13.99 -99.02 Z" %}
{% set ARROW %}<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>{% endset %}
{% set OUT %}<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3h7v7M13 3L4 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>{% endset %}
<div class="ds">

  <!-- ================= HEAD ================= -->
  <header class="ds-pagehead split">
    <div class="ds-wrap">
      <div>
        <ol class="ds-crumbs">
          <li><a href="/">MoonBite</a></li>
          <li><span aria-current="page">Community</span></li>
        </ol>
        <p class="ds-eyebrow">Community</p>
        <h1 class="ds-title">A small network.<br><span class="g">Your CPU shows up.</span></h1>
        <p class="ds-lede">MoonBite is early and the network is small. That is the honest state of things, and it is also the opening: <b>one more miner moves the hashrate, one more node makes the chain harder to attack.</b></p>
        <div class="ds-actions">
          <a class="ds-btn gold" href="/mine">Start mining {{ ARROW }}</a>
          <a class="ds-btn" href="#talk">Where people talk</a>
        </div>
        <ul class="ds-checks">
          <li>No sign-up</li>
          <li>No premine</li>
          <li>Same rules for everyone</li>
        </ul>
      </div>
      <div class="ds-stage cm-stage" aria-live="polite">
        <p class="ds-eyebrow"><span class="ds-dot" id="cm-dot"></span> <span id="cm-state">Reading the chain</span></p>
        <div class="ds-board">
          <div class="ds-brow"><span class="k">Height</span><span class="val" id="cm-height">&ndash;</span></div>
          <div class="ds-brow"><span class="k">Last block</span><span class="val" id="cm-last">&ndash;</span></div>
          <div class="ds-brow"><span class="k">Hashrate</span><span class="val" id="cm-rate">&ndash;<small>whole network</small></span></div>
        </div>
      </div>
    </div>
  </header>

  <!-- ================= LIVE BLOCKS ================= -->
  <section class="ds-section" aria-labelledby="live-h">
    <div class="ds-wrap">
      <div class="ds-head">
        <div>
          <p class="ds-eyebrow">Live</p>
          <h2 class="ds-h2" id="live-h">The chain, <span class="dim">right now.</span></h2>
          <p class="ds-sub">The newest blocks, read from a MoonBite node. Open one in the explorer to see which address mined it.</p>
        </div>
        <a class="ds-textlink" href="/explorer">Open the explorer</a>
      </div>
      <div class="ds-rows cm-blocks" id="cm-blocks">
        <p class="empty">Waiting for the node to answer.</p>
      </div>
      <p class="ds-note"><span id="cm-note">Refreshed every 30 seconds. Nothing here is a mock-up.</span></p>
    </div>
  </section>

  <!-- ================= WHERE PEOPLE TALK ================= -->
  <section class="ds-section alt" id="talk" aria-labelledby="talk-h">
    <div class="ds-wrap">
      <p class="ds-eyebrow">Talk</p>
      <h2 class="ds-h2" id="talk-h">Where people talk</h2>
      <p class="ds-sub">These are the only official places. If a link isn't on this page, it isn't ours.</p>
      <div class="ds-rows cm-talk">
        {% if discord_url %}
        <a class="ds-row" href="{{ discord_url }}" target="_blank" rel="noopener">
          <span class="id">Discord</span>
          <span class="t">Chat, mining help, announcements<span class="d">The fastest place to get an answer.</span></span>
          <span class="meta">{{ OUT }}</span>
        </a>
        {% else %}
        <div class="ds-row">
          <span class="id">Discord</span>
          <span class="t">Chat, mining help, announcements<span class="d">Not open yet. When it is, the invite will be here and nowhere else.</span></span>
          <span class="ds-tag">Not open yet</span>
        </div>
        {% endif %}
        {% if bitcointalk_url %}
        <a class="ds-row" href="{{ bitcointalk_url }}" target="_blank" rel="noopener">
          <span class="id">Bitcointalk</span>
          <span class="t">The announcement thread<span class="d">Launch facts, release notes and public questions, on the record.</span></span>
          <span class="meta">{{ OUT }}</span>
        </a>
        {% else %}
        <div class="ds-row">
          <span class="id">Bitcointalk</span>
          <span class="t">The announcement thread<span class="d">Not posted yet. The thread will be linked here once it is up.</span></span>
          <span class="ds-tag">Not posted yet</span>
        </div>
        {% endif %}
        <a class="ds-row" href="/discussions">
          <span class="id">Forum</span>
          <span class="t">The discussion board on this site<span class="d">No account needed: pick a name and post.</span></span>
          <span class="meta">{{ ARROW }}</span>
        </a>
        <a class="ds-row" href="mailto:support@moonbite.org">
          <span class="id">Email</span>
          <span class="t">support@moonbite.org<span class="d">Bug reports, security findings and anything that shouldn't be public.</span></span>
          <span class="meta">{{ ARROW }}</span>
        </a>
      </div>
      <div class="ds-callout warn cm-callout">
        <span class="label">Scam warning</span>
        <p><strong>Nobody from MoonBite will message you first,</strong> ask for your seed phrase, or offer to "double" your coins. Anyone who does is a scammer. <a href="/scams">How to spot them</a></p>
      </div>
    </div>
  </section>

  <!-- ================= WAYS TO HELP ================= -->
  <section class="ds-section" aria-labelledby="help-h">
    <div class="ds-wrap">
      <p class="ds-eyebrow">Help</p>
      <h2 class="ds-h2" id="help-h">Pick a way in</h2>
      <p class="ds-sub">Nobody needs to give you permission. Choose whatever fits the time you have.</p>
      <div class="ds-grid c3">
        <a class="ds-card" href="/mine">
          <div class="body">
            <span class="n">01</span>
            <span class="t">Mine</span>
            <span class="d">Run the miner on any desktop or laptop CPU. Every block you find pays you and adds work to the chain. You don't need a pool.</span>
            <span class="go">Start mining</span>
          </div>
        </a>
        <a class="ds-card" href="/full-node">
          <div class="body">
            <span class="n">02</span>
            <span class="t">Run a node</span>
            <span class="d">Sync MoonBite Core and check every block yourself. Every node you add makes the network harder to take down.</span>
            <span class="go">Node setup guide</span>
          </div>
        </a>
        <a class="ds-card" href="/git/">
          <div class="body">
            <span class="n">03</span>
            <span class="t">Review the code</span>
            <span class="d">The node, wallet, explorer and this site are all public. Read them, build them, and send findings to support@moonbite.org.</span>
            <span class="go">Read the source</span>
          </div>
        </a>
        <a class="ds-card" href="/learn">
          <div class="body">
            <span class="n">04</span>
            <span class="t">Help newcomers</span>
            <span class="d">Answer questions and write up what you've learned. A short guide that clears up one confusing step is real work.</span>
            <span class="go">Learning resources</span>
          </div>
        </a>
        <a class="ds-card" href="/merchants">
          <div class="body">
            <span class="n">05</span>
            <span class="t">Accept MBITE</span>
            <span class="d">Take payments with self-custody, so no processor ever holds your coins.</span>
            <span class="go">Merchant guide</span>
          </div>
        </a>
        <a class="ds-card" href="/governance">
          <div class="body">
            <span class="n">06</span>
            <span class="t">Question the rules</span>
            <span class="d">Every rule change starts as a written record. Read the reasoning and point out where it's wrong.</span>
            <span class="go">Decision records</span>
          </div>
        </a>
      </div>
    </div>
  </section>

  <!-- ================= BUILD LOG ================= -->
  <section class="ds-section alt" aria-labelledby="log-h">
    <div class="ds-wrap">
      <p class="ds-eyebrow">Build log</p>
      <h2 class="ds-h2" id="log-h">What changed lately</h2>
      <p class="ds-sub">Progress is posted in the open, so you can check what was done instead of taking our word for it.</p>
      <div class="ds-rows cm-talk">
        <a class="ds-row" href="/blog">
          <span class="id">17 Oct 2026</span>
          <span class="t">Mainnet relaunched from a clean genesis<span class="d">Earlier chains are retired, their balances are void, and every coin is mined from zero.</span></span>
          <span class="meta">{{ ARROW }}</span>
        </a>
        {% if newest_adr %}
        {% set parts = newest_adr.slug.split('-') %}
        <a class="ds-row" href="/governance/{{ newest_adr.slug }}">
          <span class="id">{{ parts[0] }}-{{ parts[1] }}</span>
          <span class="t">{{ newest_adr.title.split('—', 1)[1].strip() if '—' in newest_adr.title else newest_adr.title }}<span class="d">The newest decision record.</span></span>
          <span class="meta">{{ ARROW }}</span>
        </a>
        {% endif %}
        <a class="ds-row" href="/git/">
          <span class="id">Source</span>
          <span class="t">Every commit<span class="d">The full history of the code, with nothing summarized away.</span></span>
          <span class="meta">{{ ARROW }}</span>
        </a>
      </div>
    </div>
  </section>

  <!-- ================= CLOSING ================= -->
  <section class="ds-section" aria-labelledby="close-h">
    <div class="ds-wrap">
      <div class="ds-band">
        <svg class="mk" viewBox="-150 -150 300 300" aria-hidden="true"><path fill="#F5F2EA" d="{{ MARK }}"/><rect x="-127.5" y="-40.5" width="255" height="13" fill="#D9A441"/><rect x="-127.5" y="11.5" width="255" height="13" fill="#D9A441"/></svg>
        <h2 class="ds-h2" id="close-h">Find a block. Then tell us.</h2>
        <p class="ds-sub">The first blocks on a new chain are a short list, and your address can be on it.</p>
        <div class="ds-actions">
          <a class="ds-btn" href="/mine">Download the miner</a>
          <a class="ds-btn" href="/discussions">Post on the forum</a>
        </div>
      </div>
    </div>
  </section>

</div>
{% endblock %}
{% block scripts_extra %}
<script nonce="{{ csp_nonce }}">
(function () {
  "use strict";
  function $(id) { return document.getElementById(id); }
  var lastTime = null;

  function ago(t) {
    var s = Math.max(0, Math.round(Date.now() / 1000 - t));
    if (s < 60) return s + "s ago";
    if (s < 3600) return Math.floor(s / 60) + " min ago";
    if (s < 86400) return Math.floor(s / 3600) + " h ago";
    return Math.floor(s / 86400) + " d ago";
  }
  function rate(h) {
    if (h >= 1e9) return (h / 1e9).toFixed(2) + " GH/s";
    if (h >= 1e6) return (h / 1e6).toFixed(2) + " MH/s";
    if (h >= 1e3) return (h / 1e3).toFixed(2) + " kH/s";
    return Math.round(h) + " H/s";
  }
  function setVal(id, text, sub) {
    var el = $(id);
    el.textContent = text;
    if (sub) { var s = document.createElement("small"); s.textContent = sub; el.appendChild(s); }
  }
  function el(tag, cls, text) {
    var e = document.createElement(tag);
    if (cls) e.className = cls;
    if (text !== undefined) e.textContent = text;
    return e;
  }

  function apply(d) {
    $("cm-dot").classList.add("on");
    $("cm-state").textContent = "Mainnet, live";
    setVal("cm-height", Number(d.height).toLocaleString("en-US"));
    lastTime = d.last_block_time;
    setVal("cm-last", ago(lastTime));
    setVal("cm-rate", d.hashps != null ? rate(Number(d.hashps)) : "not reported", "whole network");

    var box = $("cm-blocks");
    box.textContent = "";
    (d.blocks || []).forEach(function (b) {
      var row = el("a", "ds-row");
      row.href = "/explorer#block/" + encodeURIComponent(b.height);
      row.appendChild(el("span", "id", "#" + Number(b.height).toLocaleString("en-US")));
      var t = el("span", "t", Number(b.subsidy_coins).toLocaleString("en-US") + " MBITE");
      var tx = Number(b.tx_count) || 0;
      t.appendChild(el("span", "d", tx + (tx === 1 ? " transaction" : " transactions")));
      row.appendChild(t);
      row.appendChild(el("span", "meta", ago(b.time)));
      box.appendChild(row);
    });
    if (!box.firstChild) box.appendChild(el("p", "empty", "The node returned no blocks."));
    $("cm-note").textContent = "Refreshed every 30 seconds. Nothing here is a mock-up.";
  }

  function poll() {
    fetch("/api/tip", { cache: "no-store" }).then(function (r) {
      return r.ok ? r.json() : Promise.reject();
    }).then(function (d) {
      if (d && d.status !== "error" && d.height !== undefined) apply(d); else throw 0;
    }).catch(function () {
      $("cm-dot").classList.remove("on");
      $("cm-state").textContent = "Node didn't answer";
      if (lastTime === null) {
        $("cm-blocks").textContent = "";
        $("cm-blocks").appendChild(el("p", "empty", "The node didn't answer just now. Nothing is shown in its place."));
      }
      $("cm-note").textContent = "The node didn't answer the last refresh. Retrying in 30 seconds.";
    });
  }
  poll();
  setInterval(poll, 30000);
  setInterval(function () { if (lastTime !== null) setVal("cm-last", ago(lastTime)); }, 15000);
})();
</script>
{% endblock %}