git / moonbite-network / templates/home_tap.html · raw

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>MoonBite — Ten coins drop every two minutes. Nobody owns the tap.</title><meta name="description" content="MoonBite (MBITE) is a proof-of-work coin you can mine on an ordinary CPU. A block about every {{ consensus.block_time_min }} minutes, about 33 million MBITE ever, no presale and no founder allocation."><link rel="icon" type="image/svg+xml" href="/static/moonbite-logo.svg"><link rel="stylesheet" href="/static/fonts/moonbite-fonts.css"><style nonce="{{ csp_nonce }}">/* MoonBite home ("the tap") — built to docs/moonbite-guidelines.html.   d03 Void/Bone carry it, Moongold on ~5% of a screen, red/green only as data.   d04 display face twice (wordmark + h1); every number in mono, tabular.   d06 one easing, three durations; the bite deepens as a real block is found.   d14 radius 6 controls / 10 cards / 20 tiles; spacing 4..96; one gold action per view.   d15 content max-width 1140; no modal, no newsletter, no countdown. */:root{  --void:#0B0D12; --slate:#161A22; --bone:#F5F2EA; --gold:#D9A441; --ash:#8A8580;  --gain:#2E9E6B; --loss:#C8402F;  --raise:#1D222C; --line:rgba(245,242,234,.08); --line-2:rgba(245,242,234,.16); --on-bone-2:#4A4741;  --display:'Archivo Black','Helvetica Neue','Arial Black',sans-serif;  --sans:Inter,-apple-system,'Segoe UI',system-ui,sans-serif;  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;  --ease:cubic-bezier(.22,1,.36,1); --t1:120ms; --t2:240ms; --t3:600ms;}*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}html,body{margin:0}body{background:var(--void);color:var(--bone);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.wrap{max-width:1140px;margin:0 auto;padding:0 24px}.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash)}.h2{font-family:var(--sans);font-weight:800;font-size:clamp(32px,4.2vw,48px);line-height:1.08;letter-spacing:-.02em;margin:16px 0 0}.h2 .dim{color:var(--ash)}.sub{color:var(--ash);font-size:18px;max-width:600px;margin:16px 0 0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}/* ---------- controls (d14: 6px, one gold per view) ---------- */.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:6px;font-weight:700;font-size:15px;  border:1px solid var(--line-2);color:var(--bone);background:transparent;transition:background var(--t1) var(--ease),border-color var(--t1) var(--ease)}.btn:hover{border-color:rgba(245,242,234,.36);background:rgba(245,242,234,.04)}.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--void)}.btn.gold:hover{background:#E3B259;border-color:#E3B259}.btn.sm{min-height:44px;padding:8px 16px;font-size:14px}.btn svg{flex:none}/* ---------- hero ---------- */.hero{padding:64px 0 96px;position:relative}.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}.chip{display:inline-flex;align-items:center;gap:12px;padding:6px 16px 6px 8px;border:1px solid var(--line-2);border-radius:999px;background:var(--slate);font-family:var(--mono);font-size:13px;color:var(--ash)}.chip .tag{display:inline-flex;align-items:center;gap:8px;padding:2px 12px;border-radius:999px;background:var(--raise);color:var(--bone);font-weight:700}.dot{width:8px;height:8px;border-radius:50%;background:var(--ash);flex:none}.dot.on{background:var(--gain)}.chip b{color:var(--bone);font-weight:400}h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,4.6vw,64px);line-height:1.02;letter-spacing:-.025em;margin:32px 0 0}h1 .g{color:var(--gold)}.lede{font-size:19px;color:var(--ash);max-width:540px;margin:24px 0 0}.lede b{color:var(--bone);font-weight:400}.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}.checks{display:flex;flex-wrap:wrap;gap:12px 24px;margin:48px 0 0;padding:0;list-style:none;font-size:14px;color:var(--ash)}.checks li{display:flex;align-items:center;gap:8px}/* hero visual: a framed product panel (after Coinbase Wallet's), hairline grid */.stage{position:relative;height:620px;border-radius:20px;background:var(--slate);border:1px solid var(--line);overflow:hidden}.stage::before{content:"";position:absolute;inset:0;pointer-events:none;  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:48px 48px;  -webkit-mask-image:radial-gradient(ellipse at 30% 30%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 30% 30%,#000 0%,transparent 70%)}.livemark{position:absolute;left:8px;top:32px;width:156px;height:156px}.livemark svg{width:100%;height:100%;display:block}.livemark path{transition:d var(--t3) var(--ease)}.markcap{position:absolute;left:28px;top:192px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);max-width:150px;line-height:1.5}.phone{position:absolute;top:40px;right:24px;width:252px;height:540px;border-radius:44px;padding:8px;background:#232833;box-shadow:0 48px 96px -32px rgba(0,0,0,.9),0 0 0 1px var(--line-2)}.screen{width:100%;height:100%;border-radius:36px;background:var(--void);overflow:hidden;padding:16px 16px 0;display:flex;flex-direction:column}.notch{width:88px;height:24px;border-radius:999px;background:#000;margin:0 auto}.ph-top{display:flex;align-items:center;justify-content:space-between;margin-top:16px}.ph-id{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}.ph-id span{width:32px;height:32px;border-radius:50%;background:var(--slate);display:flex;align-items:center;justify-content:center}.ph-tag{font-family:var(--mono);font-size:10px;color:var(--ash);border:1px solid var(--line-2);border-radius:999px;padding:2px 8px}.ph-k{font-size:11px;color:var(--ash);margin-top:24px}.ph-bal{font-family:var(--mono);font-size:22px;letter-spacing:-.02em;margin-top:4px}.ph-bal small{font-size:12px;color:var(--ash)}.ph-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:24px}.ph-acts div{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;color:var(--ash)}.ph-acts i{width:44px;height:44px;border-radius:50%;background:var(--slate);display:flex;align-items:center;justify-content:center}.ph-acts i.p{background:var(--gold)}.ph-h{font-size:12px;font-weight:700;margin-top:24px}.ph-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--slate)}.ph-row:last-child{border-bottom:0}.ph-row i{width:28px;height:28px;border-radius:50%;background:var(--slate);display:flex;align-items:center;justify-content:center;flex:none}.ph-row div{flex:1;min-width:0;font-size:12px}.ph-row div small{display:block;font-size:10px;color:var(--ash)}.ph-row .amt{font-family:var(--mono);font-size:11px}.ph-row .amt.up{color:var(--gain)}.netcard{position:absolute;left:16px;bottom:32px;width:196px;z-index:2;padding:16px;border-radius:10px;background:rgba(11,13,18,.9);border:1px solid var(--line-2);box-shadow:0 24px 48px -16px rgba(0,0,0,.8);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.netcard .row{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;color:var(--ash)}.netcard .live{display:flex;align-items:center;gap:8px}.netcard .big{font-family:var(--mono);font-size:22px;letter-spacing:-.02em;margin-top:8px}.netcard .meta{font-family:var(--mono);font-size:11px;color:var(--ash);margin-top:4px}.toast{position:absolute;left:16px;top:296px;z-index:3;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--bone);color:var(--void);font-size:13px;font-weight:700;  box-shadow:0 24px 48px -12px rgba(0,0,0,.8);opacity:0;transform:translateY(8px);transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease)}.toast.on{opacity:1;transform:none}.toast i{width:28px;height:28px;border-radius:50%;background:var(--void);display:flex;align-items:center;justify-content:center}/* ---------- rules strip (Linear-style numbered mono columns) ---------- */.rules{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.rules .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.rule{padding:32px 24px 48px;border-right:1px solid var(--line)}.rule:first-child{padding-left:0}.rule:last-child{border-right:0}.rule .n{font-family:var(--mono);font-size:12px;color:var(--ash)}.rule .v{font-family:var(--mono);font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin-top:24px;white-space:nowrap}.rule p{font-size:14px;color:var(--ash);margin:8px 0 0}/* ---------- sections ---------- */section.pad{padding:96px 0}.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}.tile{min-height:380px;border-radius:20px;background:var(--slate);border:1px solid var(--line);padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}.tile h3{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0}.tile p{color:var(--ash);margin:8px 0 0}.tile.lead{grid-column:span 2;background:var(--bone);color:var(--void);border-color:var(--bone);flex-direction:row;flex-wrap:wrap;align-items:flex-end}.tile.lead .big{font-family:var(--sans);font-weight:800;font-size:clamp(40px,4.6vw,64px);line-height:.98;letter-spacing:-.03em}.tile.lead p{color:var(--on-bone-2);font-size:18px;max-width:440px;margin-top:16px}.tile.lead .copy{flex:1 1 320px;min-width:0}.tile svg.art{display:block;width:100%}.drip{transform-box:fill-box}.drip.go{animation:drip var(--t3) var(--ease) 1 both}@keyframes drip{0%{transform:translateY(-12px);opacity:0}100%{transform:none;opacity:1}}.term{background:var(--void);border:1px solid var(--line);border-radius:10px;overflow:hidden}.term .bar{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--line)}.term .bar span{width:8px;height:8px;border-radius:50%;background:var(--raise)}.term pre{margin:0;padding:16px;font-family:var(--mono);font-size:12px;line-height:1.9;color:var(--ash);white-space:pre-wrap}.term pre b{color:var(--bone);font-weight:400}/* ---------- live board (after Railway's split-flap stats) ---------- */.board{margin-top:48px;border-radius:20px;border:1px solid var(--line);overflow:hidden;  background:repeating-linear-gradient(90deg,transparent 0 47px,rgba(245,242,234,.035) 47px 48px),var(--slate)}.brow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:24px;padding:24px 32px;border-bottom:1px solid var(--line)}.brow:last-child{border-bottom:0}.brow .k{font-family:var(--mono);font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}.brow .val{font-family:var(--mono);font-size:clamp(20px,3vw,34px);letter-spacing:.02em;text-align:right;transition:color var(--t3) var(--ease)}.brow .val small{display:block;font-size:12px;letter-spacing:0;color:var(--ash);margin-top:4px}.brow .val.flash{color:var(--gold)}.boardnote{font-size:14px;color:var(--ash);margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}.boardnote a{color:var(--bone);border-bottom:1px solid var(--line-2)}/* ---------- steps ---------- */.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}.textlink{color:var(--bone);font-size:15px;border-bottom:1px solid var(--line-2);padding-bottom:2px}.textlink:hover{border-color:var(--bone)}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}.step{border-radius:20px;background:var(--slate);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:24px}.step .pic{height:216px;border-radius:10px;background:var(--void);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:16px}.step .n{font-family:var(--mono);font-size:13px;color:var(--ash)}.step h3{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:8px 0 0}.step p{color:var(--ash);margin:8px 0 0}.step .txt{padding:0 8px 8px}.wcard{width:184px;background:var(--slate);border:1px solid var(--line-2);border-radius:10px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:12px}.wcard .ic{width:56px;height:56px;border-radius:10px;background:var(--void);border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center}.wcard .bt{width:100%;text-align:center;font-size:12px;font-weight:700;color:var(--void);background:var(--bone);border-radius:6px;padding:8px 0}.words{width:100%;max-width:264px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.words span{display:flex;gap:8px;background:var(--slate);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-family:var(--mono);font-size:11px;color:var(--ash)}.words span b{color:var(--bone);font-weight:400}.qr{background:var(--bone);border-radius:10px;padding:8px}.qr svg{display:block;width:128px;height:128px}.paid{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--slate);border:1px solid var(--line-2);font-family:var(--mono);font-size:12px}.paid i{width:24px;height:24px;border-radius:50%;background:var(--raise);display:flex;align-items:center;justify-content:center}/* ---------- explore ---------- */.explore{background:var(--slate);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:48px}.card{display:flex;flex-direction:column;border-radius:10px;background:var(--void);border:1px solid var(--line);overflow:hidden;transition:border-color var(--t2) var(--ease),transform var(--t2) var(--ease)}.card:hover{border-color:var(--line-2);transform:translateY(-4px)}.card .art{height:168px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}.card .body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}.card .t{font-size:20px;font-weight:700}.card .d{font-size:14px;color:var(--ash)}.card .go{margin-top:auto;padding-top:16px;font-size:14px;color:var(--bone)}/* ---------- faq ---------- */.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:64px}.qa{border-top:1px solid var(--line)}.qa details{border-bottom:1px solid var(--line);padding:16px 0}.qa summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;font-size:19px;font-weight:700;cursor:pointer;list-style:none}.qa summary::-webkit-details-marker{display:none}.qa summary svg{flex:none;transition:transform var(--t2) var(--ease)}.qa details[open] summary svg{transform:rotate(45deg)}.qa p{color:var(--ash);margin:8px 0 16px;max-width:620px}.qa p a{color:var(--bone);border-bottom:1px solid var(--line-2)}/* ---------- closing band ---------- */.band{border-radius:20px;border:1px solid var(--line);background:var(--slate);padding:96px 32px;text-align:center;position:relative;overflow:hidden}.band::before{content:"";position:absolute;left:50%;top:50%;width:720px;height:720px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--line);pointer-events:none}.band::after{content:"";position:absolute;left:50%;top:50%;width:480px;height:480px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--line);pointer-events:none}.band > *{position:relative;z-index:1}.band svg.mk{width:96px;height:96px}.band h2{font-weight:800;font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.03em;margin:24px 0 0}.band p{color:var(--ash);font-size:18px;max-width:520px;margin:16px auto 0}.band .ctas{justify-content:center}.band .fine{font-size:13px;margin-top:24px}/* ---------- breakpoints (d15: 480 / 768 / 1024 / 1440) ---------- */@media (min-width:1024px) and (max-width:1199px){  .livemark{width:128px;height:128px}  .markcap{display:none}  .toast{top:200px}}@media (max-width:1023px){  .hero .wrap{grid-template-columns:1fr}  .stage{max-width:560px;width:100%;margin:0 auto}  .rules .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}  .rule:nth-child(2){border-right:0}  .rule:nth-child(3){padding-left:0}  .rule:nth-child(-n+2){border-bottom:1px solid var(--line)}  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}  .steps{grid-template-columns:1fr}  .faq{grid-template-columns:1fr;gap:32px}}@media (max-width:767px){  .hero{padding:48px 0 64px}  .stage{height:auto;display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 16px}  .livemark,.markcap,.netcard,.toast,.phone{position:static}  .livemark{width:144px;height:144px}  .markcap{text-align:center;max-width:none}  .phone{order:3}  .netcard{width:100%;max-width:300px;order:2}  .toast{order:4}  .toast:not(.on){display:none}  .rules .wrap{grid-template-columns:1fr}  .rule{padding:24px 0;border-right:0;border-bottom:1px solid var(--line)}  .rule:last-child{border-bottom:0}  .bento{grid-template-columns:1fr}  .tile.lead{grid-column:auto}  .tile{min-height:0}  .cards{grid-template-columns:1fr}  .brow{grid-template-columns:1fr;gap:8px;padding:20px 24px}  .brow .val{text-align:left}  section.pad{padding:64px 0}  .band{padding:64px 24px}}@media (prefers-reduced-motion:reduce){  *,*::before,*::after{transition:none !important;animation:none !important}  html{scroll-behavior:auto}}</style></head><body>{# d01 mark: one closed path, R=100, bite 0.62R centred 0.95R on the 45deg axis.   d02 glyph: two bars 2.55R x 0.13R, centred -0.34R and +0.18R, protruding both sides.   Below 32 px the barless mark is used (nav). #}{% 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" %}{% include "partials/site_header.html" %}<main id="main"><!-- ================= HERO ================= --><section class="hero">  <div class="wrap">    <div>      <p class="chip" aria-live="polite">        <span class="tag"><span class="dot" id="live-dot"></span>Last drop</span>        <span id="last-drop">checking the network</span>      </p>      <h1>Ten coins drop every two minutes.<br><span class="g">Nobody owns the tap.</span></h1>      <p class="lede">MoonBite is a proof-of-work coin you can mine on an ordinary CPU. About 33 million MBITE will ever exist. <b>No presale, no insiders, no founder allocation</b>: every coin is mined in the open.</p>      <div class="ctas">        <a class="btn gold" href="/mine" id="mine-btn">Start mining          <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>        </a>        <a class="btn" href="/get-wallet">Get the wallet</a>      </div>      <ul class="checks">        <li><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7" fill="none" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>No presale</li>        <li><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7" fill="none" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>No founder allocation</li>        <li><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5l3 3 7-7" fill="none" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Mines on a normal CPU</li>      </ul>    </div>    <div class="stage">      <div class="livemark" role="img" aria-label="The MoonBite mark. Its bite deepens each time the network finds a block.">        <svg viewBox="-150 -150 300 300" aria-hidden="true">          <path id="mark-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>      </div>      <p class="markcap" aria-hidden="true">The bite deepens with every real block</p>      <div class="toast" id="toast" role="status" aria-live="polite">        <i aria-hidden="true"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M3 8.5l3 3 7-7" fill="none" stroke="#F5F2EA" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></i>        <span id="toast-text">Block found</span>      </div>      <div class="netcard">        <div class="row"><span>MOONBITE NETWORK</span><span class="live"><span class="dot" id="net-dot"></span><span id="net-state">connecting</span></span></div>        <div class="big" id="net-height">#—</div>        <div class="meta" id="net-meta">block height</div>      </div>      <div class="phone" aria-hidden="true">        <div class="screen">          <div class="notch"></div>          <div class="ph-top">            <div class="ph-id"><span><svg width="18" height="18" viewBox="-150 -150 300 300"><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></span>MoonBite Wallet</div>            <span class="ph-tag">EXAMPLE</span>          </div>          <div class="ph-k">Balance</div>          <div class="ph-bal">21.45000000 <small>MBITE</small></div>          <div class="ph-acts">            <div><i class="p"><svg width="18" height="18" viewBox="0 0 16 16"><path d="M8 13V3M4 7l4-4 4 4" fill="none" stroke="#0B0D12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></i>Send</div>            <div><i><svg width="18" height="18" viewBox="0 0 16 16"><path d="M8 3v10M4 9l4 4 4-4" fill="none" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></i>Receive</div>            <div><i><svg width="18" height="18" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2" fill="none" stroke="#F5F2EA" stroke-width="2"/><path d="M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round"/></svg></i>Mine</div>          </div>          <div class="ph-h">Activity</div>          <div>            <div class="ph-row"><i><svg width="12" height="12" viewBox="0 0 24 24"><rect x="6" y="6" width="12" height="12" rx="2" fill="none" stroke="#F5F2EA" stroke-width="2.5"/></svg></i><div>Block reward<small>2 min ago</small></div><span class="amt up">+10.00000000</span></div>            <div class="ph-row"><i><svg width="12" height="12" viewBox="0 0 16 16"><path d="M8 13V3M4 7l4-4 4 4" fill="none" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></i><div>Sent<small>1 h ago</small></div><span class="amt">−0.25000000</span></div>            <div class="ph-row"><i><svg width="12" height="12" viewBox="0 0 16 16"><path d="M8 3v10M4 9l4 4 4-4" fill="none" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></i><div>Received<small>Yesterday</small></div><span class="amt up">+1.20000000</span></div>          </div>        </div>      </div>    </div>  </div></section><!-- ================= RULES ================= --><section class="rules" aria-label="The rules at a glance">  <div class="wrap">    <div class="rule"><div class="n">01 / Supply</div><div class="v">{{ '{:,.2f}'.format(consensus.max_supply_coins) }}</div><p>MBITE, ever. Every one is mined. None were set aside.</p></div>    <div class="rule"><div class="n">02 / Block time</div><div class="v">{{ consensus.block_time_min }} min</div><p>Average target, about {{ '{:,}'.format(consensus.blocks_per_day) }} drops a day.</p></div>    <div class="rule"><div class="n">03 / Reward</div><div class="v">{{ '{:g}'.format(consensus.current_reward_coins) }} MBITE</div><p>Per block today, halving every {{ '{:,}'.format(consensus.halving_interval) }} blocks.</p></div>    <div class="rule"><div class="n">04 / Proof of work</div><div class="v">RandomX</div><p>Tuned for ordinary CPUs, not special hardware.</p></div>  </div></section><!-- ================= WHY ================= --><section class="pad" id="why">  <div class="wrap">    <p class="eyebrow">Why MoonBite</p>    <h2 class="h2">A fair launch,<br><span class="dim">then a fixed schedule.</span></h2>    <div class="bento">      <div class="tile lead">        <div class="copy">          <div class="big">No presale.<br>No insiders.</div>          <p>No founder allocation and no premine. The tap opened at block zero for everyone at once, and nobody can turn it up.</p>        </div>        <svg class="art" viewBox="0 0 240 250" style="width:240px;flex:0 0 auto;max-width:100%" aria-hidden="true">          <rect x="0" y="54" width="22" height="70" rx="6" fill="#0B0D12"/>          <rect x="20" y="70" width="150" height="40" rx="10" fill="#F5F2EA" stroke="#0B0D12" stroke-width="5"/>          <rect x="140" y="96" width="44" height="58" rx="10" fill="#F5F2EA" stroke="#0B0D12" stroke-width="5"/>          <rect x="136" y="72.5" width="45" height="35" fill="#F5F2EA"/>          <path d="M136 72.5 H171.5 A10 10 0 0 1 181.5 82.5 V100" fill="none" stroke="#0B0D12" stroke-width="5"/>          <rect x="86" y="40" width="18" height="32" fill="#F5F2EA" stroke="#0B0D12" stroke-width="5"/>          <rect x="58" y="24" width="74" height="20" rx="10" fill="#F5F2EA" stroke="#0B0D12" stroke-width="5"/>          <g class="drip" id="drip">            <circle cx="162" cy="182" r="15" fill="#F5F2EA" stroke="#0B0D12" stroke-width="5"/>            <g transform="translate(162 182) scale(.075)"><path fill="#0B0D12" d="{{ MARK }}"/></g>          </g>          <ellipse cx="150" cy="232" rx="17" ry="7" fill="#F5F2EA" stroke="#0B0D12" stroke-width="4"/>          <ellipse cx="176" cy="228" rx="17" ry="7" fill="#F5F2EA" stroke="#0B0D12" stroke-width="4"/>          <ellipse cx="163" cy="222" rx="17" ry="7" fill="#F5F2EA" stroke="#0B0D12" stroke-width="4"/>        </svg>      </div>      <div class="tile">        <svg class="art" viewBox="0 0 240 170" height="170" aria-hidden="true">          <g stroke="#8A8580" stroke-width="3" stroke-linecap="round">            <path d="M96 30v16M112 30v16M128 30v16M144 30v16M96 124v16M112 124v16M128 124v16M144 124v16M65 61h16M65 77h16M65 93h16M65 109h16M159 61h16M159 77h16M159 93h16M159 109h16"/>          </g>          <rect x="80" y="45" width="80" height="80" rx="10" fill="#1D222C" stroke="#8A8580" stroke-width="2"/>          <rect x="96" y="61" width="48" height="48" rx="6" fill="#0B0D12" stroke="#F5F2EA" stroke-width="2"/>          <text x="120" y="90" text-anchor="middle" fill="#F5F2EA" font-family="ui-monospace,Menlo,monospace" font-size="13">CPU</text>        </svg>        <div><h3>Mine on the computer you already own</h3><p>RandomX is tuned for ordinary CPUs, so no special hardware is needed to take part.</p></div>      </div>      <div class="tile">        {# d16: axis starts at a labelled 0, the full ceiling is shown and labelled #}        <svg class="art" viewBox="0 0 252 176" height="176" role="img" aria-label="Supply curve: half of all MBITE is mined by block 1,650,000, three quarters by 3,300,000, approaching the 32,999,999.96 ceiling.">          <line x1="12" y1="22" x2="252" y2="22" stroke="#8A8580" stroke-dasharray="3 4"/>          <text x="252" y="14" text-anchor="end" fill="#8A8580" font-family="ui-monospace,Menlo,monospace" font-size="10">{{ '{:,.2f}'.format(consensus.max_supply_coins) }}</text>          <text x="0" y="146" fill="#8A8580" font-family="ui-monospace,Menlo,monospace" font-size="10">0</text>          <line x1="12" y1="142" x2="252" y2="142" stroke="rgba(245,242,234,.16)"/>          <g stroke="rgba(245,242,234,.08)"><path d="M60 22V142M108 22V142M156 22V142M204 22V142"/></g>          <path d="M12 142 L60 82 L108 52 L156 37 L204 29.5 L252 25.75" fill="none" stroke="#D9A441" stroke-width="2.4" stroke-linejoin="round"/>          <g fill="#161A22" stroke="#D9A441" stroke-width="2"><circle cx="60" cy="82" r="4"/><circle cx="108" cy="52" r="4"/><circle cx="156" cy="37" r="4"/><circle cx="204" cy="29.5" r="4"/></g>          <g fill="#8A8580" font-family="ui-monospace,Menlo,monospace" font-size="10" text-anchor="middle">            <text x="60" y="162">1.65M</text><text x="108" y="162">3.3M</text><text x="156" y="162">4.95M</text><text x="204" y="162">6.6M</text>          </g>        </svg>        <div><h3>The drop halves about every {{ consensus.halving_years|round|int }} years</h3><p>{{ '{:g}'.format(consensus.initial_subsidy_coins) }}, then {{ '{:g}'.format(consensus.initial_subsidy_coins / 2) }}, {{ '{:g}'.format(consensus.initial_subsidy_coins / 4) }}, {{ '{:g}'.format(consensus.initial_subsidy_coins / 8) }}: one halving every {{ '{:,}'.format(consensus.halving_interval) }} blocks, on a public schedule nobody can change on a whim.</p></div>      </div>      <div class="tile">        <svg class="art" viewBox="0 0 240 150" height="150" aria-hidden="true">          <g stroke="rgba(245,242,234,.16)" stroke-width="1.4">            <path d="M120 75L40 30M120 75L200 28M120 75L30 112M120 75L210 118M120 75L120 140M40 30L110 10L200 28L210 118L120 140L30 112Z" fill="none"/>          </g>          <g fill="#161A22" stroke="#8A8580" stroke-width="2"><circle cx="40" cy="30" r="7"/><circle cx="110" cy="10" r="6"/><circle cx="30" cy="112" r="7"/><circle cx="120" cy="140" r="6"/><circle cx="200" cy="28" r="7"/><circle cx="210" cy="118" r="7"/></g>          <circle cx="120" cy="75" r="10" fill="#F5F2EA"/>        </svg>        <div><h3>Run by its miners</h3><p>Independent nodes keep the ledger. There is no company server to switch off.</p></div>      </div>      <div class="tile">        <div class="term" aria-hidden="true">          <div class="bar"><span></span><span></span><span></span></div><pre><b>block reward</b> ....... {{ '{:.8f}'.format(consensus.current_reward_coins) }}<b>block fees</b> ......... + fees<b>after the cap</b> ...... fees only</pre>        </div>        <div><h3>Secure after the last coin</h3><p>Once supply is reached, miners are paid by transaction fees alone. The plan is written down in <a class="textlink" href="/governance">ADR-011</a>.</p></div>      </div>    </div>  </div></section><!-- ================= LIVE BOARD ================= --><section class="pad" style="padding-top:0" aria-labelledby="board-h">  <div class="wrap">    <div class="head">      <div>        <p class="eyebrow">Live from the chain</p>        <h2 class="h2" id="board-h">The chain, right now.</h2>      </div>      <a class="textlink" href="/explorer">Open the explorer →</a>    </div>    <div class="board" aria-live="polite">      <div class="brow"><span class="k">Height</span><span class="val" id="b-height">—</span></div>      <div class="brow"><span class="k">Mined so far</span><span class="val" id="b-supply">—<small>of {{ '{:,.8f}'.format(consensus.max_supply_coins) }} MBITE</small></span></div>      <div class="brow"><span class="k">Last block</span><span class="val" id="b-last">—</span></div>      <div class="brow"><span class="k">Network hashrate</span><span class="val" id="b-rate">—</span></div>      <div class="brow"><span class="k">Next halving</span><span class="val">#{{ consensus.next_halving_height }}<small>reward drops to {{ '{:g}'.format(consensus.current_reward_coins / 2) }} MBITE</small></span></div>    </div>    <div class="boardnote"><span id="board-note">Read from a MoonBite node every 15 seconds. Nothing here is a mock-up.</span><span>Times in UTC.</span></div>  </div></section><!-- ================= HOW ================= --><section class="pad" style="padding-top:0" aria-labelledby="how-h">  <div class="wrap">    <div class="head">      <div>        <p class="eyebrow">Getting started</p>        <h2 class="h2" id="how-h">Three steps. No sign-up.</h2>      </div>      <a class="textlink" href="/start">Read the guide →</a>    </div>    <div class="steps">      <div class="step">        <div class="pic" aria-hidden="true">          <div class="wcard">            <div class="ic"><svg width="36" height="36" viewBox="-150 -150 300 300"><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></div>            <div style="font-size:13px;font-weight:700">MoonBite Wallet</div>            <div class="bt">Create new wallet</div>          </div>        </div>        <div class="txt"><div class="n">01</div><h3>Get the wallet</h3><p>The MoonBite wallet is free and open source. It creates your keys on your own device.</p></div>      </div>      <div class="step">        <div class="pic" aria-hidden="true">          <div class="words">{% for i in range(1, 13) %}<span><b>{{ i }}</b>{{ '•' * (4 + (i * 7) % 3) }}</span>{% endfor %}</div>        </div>        <div class="txt"><div class="n">02</div><h3>Back up your recovery phrase</h3><p>Write your words down and keep them offline. They are the only way to restore your coins.</p></div>      </div>      <div class="step">        <div class="pic" aria-hidden="true">          <div class="qr">            <svg viewBox="0 0 21 21" shape-rendering="crispEdges">              {%- for y in range(21) %}{% for x in range(21) %}                {%- set infinder = (x < 8 and y < 8) or (x > 12 and y < 8) or (x < 8 and y > 12) %}                {%- if not infinder and ((x * 37 + y * 91 + x * y * 13 + 7) % 11) < 5 %}<rect x="{{ x }}" y="{{ y }}" width="1" height="1" fill="#0B0D12"/>{% endif %}              {%- endfor %}{% endfor %}              {%- for ox, oy in [(0, 0), (14, 0), (0, 14)] %}              <rect x="{{ ox + 0.5 }}" y="{{ oy + 0.5 }}" width="6" height="6" fill="none" stroke="#0B0D12"/>              <rect x="{{ ox + 2 }}" y="{{ oy + 2 }}" width="3" height="3" fill="#0B0D12"/>              {%- endfor %}            </svg>          </div>          <div class="paid"><i><svg width="12" height="12" viewBox="0 0 16 16"><path d="M3 8.5l3 3 7-7" fill="none" stroke="#2E9E6B" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></i>+10.00000000</div>        </div>        <div class="txt"><div class="n">03</div><h3>Mine or receive MBITE</h3><p>Point your CPU at the network, or share your address to be paid. It settles peer to peer.</p></div>      </div>    </div>  </div></section><!-- ================= EXPLORE ================= --><section class="pad explore" aria-labelledby="explore-h">  <div class="wrap">    <p class="eyebrow">Jump in</p>    <h2 class="h2" id="explore-h">Everything runs in the open.</h2>    <p class="sub">Mine, hold, watch the chain or read how it works. All of it free, all of it open source.</p>    <div class="cards">      <a class="card" href="/mine">        <div class="art" aria-hidden="true"><svg viewBox="0 0 180 130" width="180" height="130"><rect x="10" y="10" width="160" height="96" rx="8" fill="#161A22" stroke="#8A8580" stroke-width="2"/><rect x="18" y="18" width="144" height="80" rx="4" fill="#0B0D12"/><text x="28" y="36" fill="#8A8580" font-family="ui-monospace,Menlo,monospace" font-size="8">hashing</text><rect x="28" y="44" width="110" height="6" rx="3" fill="#1D222C"/><rect x="28" y="44" width="78" height="6" rx="3" fill="#F5F2EA"/><rect x="28" y="58" width="110" height="6" rx="3" fill="#1D222C"/><rect x="28" y="58" width="52" height="6" rx="3" fill="#8A8580"/><path d="M70 106 L64 122 H116 L110 106" fill="#161A22" stroke="#8A8580" stroke-width="2"/></svg></div>        <div class="body"><div class="t">Mine</div><div class="d">Try the in-browser demo (it earns nothing), then run the real miner.</div><div class="go">Start mining →</div></div>      </a>      <a class="card" href="/get-wallet">        <div class="art" aria-hidden="true" style="align-items:flex-end;overflow:hidden"><svg viewBox="0 0 120 150" width="120" height="150"><rect x="20" y="10" width="80" height="160" rx="16" fill="#161A22" stroke="#8A8580" stroke-width="2"/><rect x="28" y="22" width="64" height="150" rx="9" fill="#0B0D12"/><rect x="36" y="46" width="30" height="5" rx="2.5" fill="#8A8580"/><rect x="36" y="58" width="44" height="9" rx="3" fill="#F5F2EA"/><path d="M36 92 L46 86 L56 89 L66 78 L76 82 L84 72" fill="none" stroke="#8A8580" stroke-width="2"/><circle cx="44" cy="116" r="8" fill="#F5F2EA"/><circle cx="64" cy="116" r="8" fill="#1D222C"/><circle cx="84" cy="116" r="8" fill="#1D222C"/></svg></div>        <div class="body"><div class="t">Wallet</div><div class="d">Free, open source and non-custodial. Your keys never leave you.</div><div class="go">Get the wallet →</div></div>      </a>      <a class="card" href="/explorer">        <div class="art" aria-hidden="true"><svg viewBox="0 0 180 120" width="180" height="120"><rect x="10" y="12" width="160" height="100" rx="8" fill="#161A22" stroke="#8A8580" stroke-width="2"/><rect x="10" y="34" width="160" height="78" fill="#0B0D12"/><rect x="20" y="44" width="10" height="10" rx="2" fill="#F5F2EA"/><rect x="36" y="46" width="70" height="6" rx="3" fill="#8A8580"/><rect x="140" y="46" width="20" height="6" rx="3" fill="#F5F2EA"/><rect x="20" y="64" width="10" height="10" rx="2" fill="#1D222C"/><rect x="36" y="66" width="70" height="6" rx="3" fill="#1D222C"/><rect x="140" y="66" width="20" height="6" rx="3" fill="#1D222C"/><rect x="20" y="84" width="10" height="10" rx="2" fill="#1D222C"/><rect x="36" y="86" width="70" height="6" rx="3" fill="#1D222C"/><rect x="140" y="86" width="20" height="6" rx="3" fill="#1D222C"/></svg></div>        <div class="body"><div class="t">Explorer</div><div class="d">Every block and every drop as it lands, with nothing hidden.</div><div class="go">Open the explorer →</div></div>      </a>      <a class="card" href="/learn">        <div class="art" aria-hidden="true"><svg viewBox="0 0 180 120" width="180" height="120"><path d="M90 28 Q60 16 26 22 V98 Q60 92 90 104 Z" fill="#161A22" stroke="#8A8580" stroke-width="2"/><path d="M90 28 Q120 16 154 22 V98 Q120 92 90 104 Z" fill="#161A22" stroke="#8A8580" stroke-width="2"/><g fill="#8A8580"><rect x="38" y="38" width="40" height="4" rx="2"/><rect x="38" y="48" width="34" height="4" rx="2"/><rect x="38" y="58" width="40" height="4" rx="2"/><rect x="102" y="38" width="40" height="4" rx="2"/><rect x="102" y="48" width="30" height="4" rx="2"/></g><path d="M102 82 L112 70 L122 76 L140 58" fill="none" stroke="#F5F2EA" stroke-width="2"/></svg></div>        <div class="body"><div class="t">Learn</div><div class="d">How MoonBite, RandomX and the halving schedule fit together.</div><div class="go">Start reading →</div></div>      </a>    </div>  </div></section><!-- ================= FAQ ================= --><section class="pad" aria-labelledby="faq-h">  <div class="wrap faq">    <div>      <p class="eyebrow">FAQ</p>      <h2 class="h2" id="faq-h">Straight<br><span class="dim">answers.</span></h2>      <p class="sub" style="font-size:16px">More in <a class="textlink" href="/learn">Learn</a> and the <a class="textlink" href="/developers">developer docs</a>.</p>    </div>    <div class="qa">      <details open>        <summary>Was there a presale or founder allocation?<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4v12M4 10h12" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round"/></svg></summary>        <p>No. There was no presale, no insider round and no founder allocation. Every MBITE that exists was mined from block zero onward, and you can check that in the <a href="/explorer">explorer</a>.</p>      </details>      <details>        <summary>How are new coins created?<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4v12M4 10h12" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round"/></svg></summary>        <p>Each block, about every {{ consensus.block_time_min }} minutes, pays {{ '{:g}'.format(consensus.current_reward_coins) }} MBITE to the miner who found it. The reward halves every {{ '{:,}'.format(consensus.halving_interval) }} blocks until supply reaches {{ '{:,.2f}'.format(consensus.max_supply_coins) }} MBITE.</p>      </details>      <details>        <summary>Can I really mine on my laptop?<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4v12M4 10h12" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round"/></svg></summary>        <p>Yes. MoonBite uses RandomX, which is designed for ordinary CPUs. Mining uses electricity that may never be recovered. The in-browser demo uses SHA-256 as a simplified stand-in and earns nothing; it is there to show how mining works.</p>      </details>      <details>        <summary>Can I buy MBITE?<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4v12M4 10h12" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round"/></svg></summary>        <p>MBITE has no market price and is not listed. There is no MBITE token on any other chain, and no airdrop or giveaway. Anyone offering to sell you MBITE is not us. See <a href="/scams">scam warnings</a>.</p>      </details>      <details>        <summary>What happens after the last coin is mined?<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4v12M4 10h12" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round"/></svg></summary>        <p>Miners keep securing the network and are paid by transaction fees alone. The reasoning is documented in <a href="/governance">ADR-011</a>.</p>      </details>      <details>        <summary>What if I lose my recovery phrase?<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 4v12M4 10h12" stroke="#F5F2EA" stroke-width="2" stroke-linecap="round"/></svg></summary>        <p>Nobody can reset it for you. Without your phrase or keys the coins cannot be recovered, which is also why nobody can take them. MoonBite will never ask you for it.</p>      </details>    </div>  </div></section><!-- ================= CLOSING ================= --><section aria-labelledby="close-h">  <div class="wrap">    <div class="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 id="close-h">The next drop is<br>open to everyone.</h2>      <p>Ten coins, about two minutes from now. Any computer on the network can compete for them.</p>      <div class="ctas">        <a class="btn gold" href="/mine" id="mine-btn-2">Start mining</a>        <a class="btn" href="/get-wallet">Get the wallet</a>      </div>      <p class="fine">Mining costs electricity that may never be recovered.</p>    </div>  </div></section></main>{% include "partials/site_footer.html" %}<script nonce="{{ csp_nonce }}">(function(){"use strict";var $ = function(i){ return document.getElementById(i); };var reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;var MAX_SUPPLY = {{ consensus.max_supply_coins }};/* d01 + d06: rebuild the mark as one closed path; each real block widens the   bite by one unit (62 -> 66 cap keeps the waist above 0.36R). */var R = 100, D = 95, rb = 62, RB_MAX = 66;function markPath(r){  var a = (R*R - r*r + D*D) / (2*D), h = Math.sqrt(Math.max(0, R*R - a*a));  var ux = Math.SQRT1_2, uy = -Math.SQRT1_2, px = -uy, py = ux, cx = a*ux, cy = a*uy;  // p1 is the upper-left intersection, matching the canonical path's start  // point; swapping them flips which arc the large-arc flag selects.  var p1x = cx - h*px, p1y = cy - h*py, p2x = cx + h*px, p2y = cy + h*py;  var f = function(n){ return n.toFixed(2); };  return "M " + f(p1x) + " " + f(p1y) + " A " + R + " " + R + " 0 1 0 " + f(p2x) + " " + f(p2y) +         " A " + f(r) + " " + f(r) + " 0 0 1 " + f(p1x) + " " + f(p1y) + " Z";}function deepen(){ if (rb < RB_MAX){ rb += 1; $("mark-path").setAttribute("d", markPath(rb)); } }/* d11: heights never separated, amounts tabular, times in UTC and labelled */function ago(ts){ var s = Math.max(0, Date.now()/1000 - ts);  if (s < 90) return "just now"; if (s < 5400) return Math.round(s/60) + " min ago";  if (s < 172800) return Math.round(s/3600) + " h ago"; return Math.round(s/86400) + " d ago"; }function utc(ts){ return new Date(ts*1000).toISOString().slice(11,16) + " UTC"; }function rate(r){ var u = "H/s", v = r;  if (r >= 1e9){ v = r/1e9; u = "GH/s"; } else if (r >= 1e6){ v = r/1e6; u = "MH/s"; } else if (r >= 1e3){ v = r/1e3; u = "kH/s"; }  return v.toLocaleString("en-US", {maximumFractionDigits: v < 10 ? 2 : 1}) + " " + u; }function coins(n){ return Number(n).toLocaleString("en-US", {minimumFractionDigits: 8, maximumFractionDigits: 8}); }function setVal(id, main, small){ var el = $(id); el.textContent = main;  if (small){ var s = document.createElement("small"); s.textContent = small; el.appendChild(s); } }function flash(id){ if (reduce) return; var el = $(id); el.classList.add("flash"); setTimeout(function(){ el.classList.remove("flash"); }, 1200); }var lastHeight = null, lastTime = null, toastTimer = null;function announce(h, reward){  $("toast-text").textContent = "Block #" + h + " found · " + reward + " MBITE to its miner";  $("toast").classList.add("on");  clearTimeout(toastTimer); toastTimer = setTimeout(function(){ $("toast").classList.remove("on"); }, 6000);  var d = $("drip"); d.classList.remove("go"); void d.getBoundingClientRect(); d.classList.add("go");}function paintAgo(){  if (lastTime === null) return;  $("last-drop").innerHTML = ""; var b = document.createElement("b"); b.textContent = "block #" + lastHeight;  $("last-drop").append(b, " · " + ago(lastTime));  setVal("b-last", ago(lastTime), utc(lastTime));}function apply(d){  var h = Number(d.height), isNew = lastHeight !== null && h > lastHeight;  if (isNew){    for (var i = 0, n = Math.min(h - lastHeight, RB_MAX - rb); i < n; i++) deepen();    var reward = d.blocks && d.blocks[0] ? Number(d.blocks[0].subsidy_coins) : null;    announce(h, reward === null ? "" : reward.toLocaleString("en-US"));    flash("b-height"); flash("b-supply");  }  lastHeight = h; lastTime = d.last_block_time ? Number(d.last_block_time) : null;  $("live-dot").classList.add("on"); $("net-dot").classList.add("on"); $("net-state").textContent = "live";  $("net-height").textContent = "#" + h;  $("net-meta").textContent = d.hashps != null ? rate(Number(d.hashps)) + " network hashrate" : "block height";  setVal("b-height", "#" + h);  if (d.supply_coins != null){    var pct = (Number(d.supply_coins) / MAX_SUPPLY * 100);    setVal("b-supply", coins(d.supply_coins), pct.toLocaleString("en-US", {maximumFractionDigits: 3}) + "% of {{ '{:,.8f}'.format(consensus.max_supply_coins) }} MBITE");  }  setVal("b-rate", d.hashps != null ? rate(Number(d.hashps)) : "not reported", "estimated over the last 120 blocks");  paintAgo();  $("board-note").textContent = "Read from a MoonBite node every 15 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(){    $("net-state").textContent = "no answer";    if (lastHeight === null){      $("last-drop").textContent = "the network didn't answer just now";      $("board-note").textContent = "The network didn't answer this page just now. Nothing here is invented to fill the gap.";    }  });}poll(); setInterval(poll, 15000); setInterval(paintAgo, 30000);/* one primary action, labelled for the visitor's machine */var os = "", p = (navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || "", ua = navigator.userAgent || "";if (/Win/i.test(p) || /Windows/i.test(ua)) os = "Windows";else if (/Mac/i.test(p) && !/iP(hone|ad|od)/i.test(ua)) os = "macOS";else if (/Linux/i.test(p) && !/Android/i.test(ua)) os = "Linux";if (os){ var b2 = $("mine-btn-2"); if (b2) b2.textContent = "Mine on " + os; }})();</script></body></html>