git / moonbite-network / templates/home_standard.html · raw
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><title>MoonBite — a coin is mined, never minted</title><meta name="description" content="MoonBite (MBITE) is a proof-of-work coin. Every coin is mined, one block at a time, about every {{ consensus.block_time_min }} minutes. Watch the chain, run a node, mine."><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 — built to docs/moonbite-guidelines.html. d03 Void/Bone carry the brand; gold on ~5% of the screen, one primary action. d04 display type twice: the wordmark and the single largest statement. d06 one easing, three durations; the bite deepens as a block is found. d11 block heights are never thousands-separated; amounts are tabular mono. d15 max-width 1140, caveats in the primary nav, no modal / countdown. */:root{ --void:#0B0D12; --slate:#161A22; --bone:#F5F2EA; --gold:#D9A441; --ash:#8A8580; --gain:#2E9E6B; --loss:#C8402F; --display:'Archivo Black','Helvetica Neue','Arial Black',sans-serif; --body:Inter,-apple-system,'Segoe UI',Roboto,sans-serif; --data:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --ease:cubic-bezier(0.22,1,0.36,1); --t1:120ms; --t2:240ms; --t3:600ms; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--void);color:var(--bone);font-family:var(--body);font-size:16px; line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}::selection{background:var(--gold);color:var(--void)}:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}.skip{position:absolute;left:-9999px;z-index:50;background:var(--gold);color:var(--void);padding:var(--s3) var(--s4);font-weight:700}.skip:focus{left:0;top:0}.wrap{max-width:1140px;margin:0 auto;padding:0 var(--s5)}.eyebrow{font-family:var(--data);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}.data{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:15px}h1{font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,56px);line-height:1.02;letter-spacing:-.02em}h2{font-family:var(--body);font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.01em}h3{font-family:var(--body);font-weight:700;font-size:17px}p{max-width:60ch}.muted{color:var(--ash)}/* nav — d15 caveats in the primary nav */.nav{display:flex;align-items:center;gap:var(--s5);padding:var(--s4) 0;border-bottom:1px solid rgba(245,242,234,.08)}.wordmark{display:flex;align-items:center;gap:var(--s3);font-family:var(--display);font-weight:400; font-size:18px;letter-spacing:-.02em;text-transform:uppercase;min-height:44px}.wordmark svg{width:22px;height:22px}.nav ul{margin-left:auto;display:flex;gap:var(--s5);list-style:none}.nav a{color:var(--ash);font-size:15px;min-height:44px;display:inline-flex;align-items:center; transition:color var(--t1) var(--ease)}.nav a:hover{color:var(--bone)}/* d15: Caveats stays in the primary nav at every width; only Press yields on phones */@media(max-width:768px){.nav ul{gap:var(--s4);flex-wrap:wrap;justify-content:flex-end}.nav li:nth-child(5){display:none}}/* hero — the mark is the hero */.hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:center;padding:var(--s9) 0 var(--s8)}@media(max-width:1024px){.hero{grid-template-columns:1fr;gap:var(--s7);padding-top:var(--s7)}}.mark{width:min(100%,420px);aspect-ratio:1;margin:0 auto}.mark svg{width:100%;height:100%;display:block;overflow:visible}.mark path{fill:var(--bone);transition:d var(--t3) var(--ease)}.hero .lede{margin-top:var(--s5);font-size:18px;color:rgba(245,242,234,.86)}.live{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline}.live .h{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:15px}.live .h b{font-weight:400;color:var(--bone)}.live .age{font-family:var(--data);font-size:13px;color:var(--ash)}.actions{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s3)}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--s5); border-radius:6px;font-weight:700;font-size:15px;border:1px solid transparent; transition:background var(--t2) var(--ease),border-color var(--t2) var(--ease),transform var(--t1) var(--ease)}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--gold);color:var(--void)} /* the one gold action */.btn-primary:hover{background:#e0af57}.btn-ghost{color:var(--bone);border-color:rgba(245,242,234,.24)}.btn-ghost:hover{border-color:rgba(245,242,234,.6)}.tone{margin-top:var(--s4);display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--ash);cursor:pointer;min-height:44px}.tone input{accent-color:var(--gold)}/* chain strip — d19: the explorer is the product */.section{padding:var(--s8) 0;border-top:1px solid rgba(245,242,234,.08)}.section .eyebrow{margin-bottom:var(--s3)}.blocks{margin-top:var(--s5);border:1px solid rgba(245,242,234,.10);border-radius:10px;overflow:hidden}.row{display:grid;grid-template-columns:110px 1fr 120px 150px;gap:var(--s4);align-items:center; padding:var(--s4) var(--s5);border-top:1px solid rgba(245,242,234,.08);font-family:var(--data); font-variant-numeric:tabular-nums;font-size:15px}.row:first-child{border-top:0}.row.head{background:var(--slate);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-family:var(--data)}.row .hash{display:flex;align-items:center;gap:var(--s2);min-width:0}.row .hash span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ash)}.copy{flex:none;background:none;border:1px solid rgba(245,242,234,.18);color:var(--ash);border-radius:6px; font-family:var(--data);font-size:12px;padding:4px 8px;cursor:pointer;min-height:28px; transition:border-color var(--t1) var(--ease),color var(--t1) var(--ease)}.copy:hover{color:var(--bone);border-color:rgba(245,242,234,.5)}.row .age{color:var(--ash);font-size:13px}.row .new{animation:rowIn var(--t2) var(--ease)}@keyframes rowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.empty{padding:var(--s5);font-family:var(--data);font-size:14px;color:var(--ash)}@media(max-width:768px){.row{grid-template-columns:90px 1fr 110px}.row .rw{display:none}}/* mechanism cards — d14 radius 10, Slate */.cards{margin-top:var(--s5);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}@media(max-width:768px){.cards{grid-template-columns:1fr}}.card{background:var(--slate);border-radius:10px;padding:var(--s5)}.card h3{margin-bottom:var(--s2)}.card p{color:rgba(245,242,234,.8);font-size:15px}.card .fig{margin-top:var(--s3);font-family:var(--data);font-variant-numeric:tabular-nums;font-size:15px}/* supply — d16 always the full ceiling, axis labelled from 0 */.supply{margin-top:var(--s5);background:var(--slate);border-radius:10px;padding:var(--s5)}.bar{margin-top:var(--s3);height:10px;border-radius:6px;background:rgba(245,242,234,.10);overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--bone);transition:width var(--t3) var(--ease)}.axis{display:flex;justify-content:space-between;margin-top:var(--s2);font-family:var(--data);font-size:12px;color:var(--ash);font-variant-numeric:tabular-nums}/* glyph composer — d02 */.glyph{margin-top:var(--s5);display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}@media(max-width:768px){.glyph{grid-template-columns:1fr}}.glyph label{display:block;font-family:var(--data);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);margin-bottom:var(--s2)}.glyph input{width:100%;background:var(--slate);border:1px solid rgba(245,242,234,.14);color:var(--bone); border-radius:6px;padding:var(--s3) var(--s4);font-family:var(--data);font-size:16px;min-height:48px}.glyph input:focus{border-color:var(--bone);outline:none}.glyph output{display:block;background:var(--slate);border-radius:10px;padding:var(--s5); font-family:var(--data);font-variant-numeric:tabular-nums;font-size:clamp(22px,4vw,34px);word-break:break-all}.glyph .note{margin-top:var(--s3);font-size:13px;color:var(--ash)}.glyph .copyrow{margin-top:var(--s3);display:flex;gap:var(--s2);align-items:center}/* caveats — d09 say what is not true yet */.caveats{margin-top:var(--s5);display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}@media(max-width:768px){.caveats{grid-template-columns:1fr}}.caveats div{padding:var(--s4) var(--s5);border:1px solid rgba(245,242,234,.10);border-radius:10px;font-size:15px}.caveats b{display:block;margin-bottom:4px}.caveats span{color:rgba(245,242,234,.78)}footer{border-top:1px solid rgba(245,242,234,.08);padding:var(--s7) 0 var(--s8);color:var(--ash);font-size:14px}footer .disc{max-width:70ch;line-height:1.7}footer .links{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}footer .links a{color:var(--ash)}footer .links a:hover{color:var(--bone)}footer .utc{margin-top:var(--s4);font-family:var(--data);font-size:12px}@media(prefers-reduced-motion:reduce){ .mark path,.bar i,.btn{transition:none} .row .new{animation:none}}</style></head><body><a class="skip" href="#chain">Skip to the live chain</a><div class="wrap"> <nav class="nav" aria-label="Primary"> <a class="wordmark" href="/"> <svg viewBox="-150 -150 300 300" aria-hidden="true"> <path d="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" fill="#F5F2EA"/> <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>MoonBite </a> <ul> <li><a href="/how-it-works">How mining works</a></li> <li><a href="/mine">Get started</a></li> <li><a href="/explorer">Explorer</a></li> <li><a href="/you-need-to-know">Caveats</a></li> <li><a href="/press">Press</a></li> </ul> </nav> <!-- HERO: the mark, alive with the chain --> <header class="hero"> <div class="mark" aria-hidden="true"> <svg viewBox="-150 -150 300 300"> <path id="markPath" d="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"/> <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> <p class="eyebrow">Proof of work · live</p> <h1>A coin is mined, never minted.</h1> <p class="lede">MoonBite is a proof-of-work network. Every MBITE in existence was found by a computer solving a block, about every {{ consensus.block_time_min }} minutes. No coin was issued, allocated or sold. The mark above deepens by one increment each time a block is found.</p> <div class="live" aria-live="polite"> <span class="h">Block <b id="height">—</b></span> <span class="age" id="age">reading the chain</span> <span class="h">Reward <b>Ȼ{{ '%.8f' % consensus.initial_subsidy_coins }}</b></span> </div> <div class="actions"> <a class="btn btn-primary" href="/mine">Start mining</a> <a class="btn btn-ghost" href="/explorer">Open the explorer</a> </div> <label class="tone"><input type="checkbox" id="tone"> Play the block-found tone</label> </div> </header></div><!-- THE CHAIN --><section class="section" id="chain"> <div class="wrap"> <p class="eyebrow">Latest blocks · times in UTC</p> <h2>The chain, as it is.</h2> <div class="blocks" id="blocks"> <div class="row head"><span>Height</span><span>Hash</span><span class="rw">Reward</span><span>Found</span></div> <div class="empty" id="blocksEmpty">Reading the chain.</div> </div> </div></section><!-- MECHANISM --><section class="section"> <div class="wrap"> <p class="eyebrow">How it works</p> <h2>Three rules. No committee.</h2> <div class="cards"> <div class="card"><h3>Mined, not minted</h3> <p>A computer guesses until it finds a valid block. The network pays it the block reward. That is the only way a coin comes to exist.</p> <div class="fig">Ȼ{{ '%.8f' % consensus.initial_subsidy_coins }} per block</div></div> <div class="card"><h3>Blocks every {{ consensus.block_time_min }} minutes</h3> <p>Difficulty adjusts every 60 blocks so the spacing holds whether ten machines are mining or ten thousand.</p> <div class="fig">{{ consensus.blocks_per_day }} blocks per day</div></div> <div class="card"><h3>A fixed ceiling</h3> <p>The reward halves every {{ '{:,}'.format(consensus.halving_interval) }} blocks. The schedule was fixed before the first block and cannot be raised.</p> <div class="fig">{{ '{:,.8f}'.format(consensus.max_supply_coins) }} MBITE, ever</div></div> </div> <div class="supply" aria-label="Supply against the fixed ceiling"> <div class="eyebrow">Mined so far, against the ceiling</div> <div class="bar"><i id="supplyBar"></i></div> <div class="axis"><span>0</span><span id="supplyNow">—</span><span>{{ '{:,.8f}'.format(consensus.max_supply_coins) }}</span></div> </div> </div></section><!-- GLYPH --><section class="section"> <div class="wrap"> <p class="eyebrow">The glyph</p> <h2>Write an amount.</h2> <div class="glyph"> <div> <label for="amt">Amount in MBITE</label> <input id="amt" inputmode="decimal" value="50" autocomplete="off" spellcheck="false"> <p class="note">Amounts are written glyph-first with no space, to eight places. Until the font ships, Ȼ (U+023B) is the approved stand-in — use it in a handle, a bio, a post.</p> </div> <div> <output id="glyphOut" for="amt">Ȼ50.00000000</output> <div class="copyrow"><button class="copy" id="copyGlyph" type="button">Copy</button> <span class="note" id="copied"></span></div> </div> </div> </div></section><!-- CAVEATS --><section class="section" id="caveats"> <div class="wrap"> <p class="eyebrow">What is not true yet</p> <h2>Read this before you mine.</h2> <div class="caveats"> <div><b>There is no price.</b><span>MBITE is not listed anywhere. Nobody can sell you one, and anyone offering to is lying.</span></div> <div><b>It may never be worth anything.</b><span>Mining consumes electricity that may never be recovered.</span></div> <div><b>There is no team allocation.</b><span>No presale, no airdrop, no early access. Every coin is mined.</span></div> <div><b>Nobody can help you recover a wallet.</b><span>Your keys are yours alone. Lose them and the coins are gone, by design.</span></div> </div> </div></section><footer> <div class="wrap"> <p class="disc">MBITE is a proof-of-work cryptocurrency. It is not an investment, a security, or a promise of future value. It has no guaranteed price, no listing, and no team allocation. Mining consumes electricity that may never be recovered.</p> <div class="links"> <a href="/how-it-works">How mining works</a><a href="/mine">Get started</a> <a href="/explorer">Explorer</a><a href="/you-need-to-know">Caveats</a> <a href="/press">Press</a><a href="/brand">Brand and licence</a><a href="/moonbite-core">Source</a> </div> <p class="utc">Chain tip <span id="tip">—</span></p> </div></footer><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 construction: R=100, bite centre at 0.95R on the 45° upper-right axis. d06 signature: the bite deepens by one increment as a block is found. The path is rebuilt from the geometry so it stays a single closed path. */var R=100, D=95, r=62, RMAX=66;function markPath(rb){ var a=(R*R-rb*rb+D*D)/(2*D), h=Math.sqrt(Math.max(0,R*R-a*a)); var ux=Math.SQRT1_2, uy=-Math.SQRT1_2; // toward upper-right (SVG y-down) var px=-uy, py=ux; // perpendicular var cx=a*ux, cy=a*uy; 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(rb)+' '+f(rb)+' 0 0 1 '+f(p1x)+' '+f(p1y)+' Z';}function deepen(){ if(r<RMAX){ r+=1; $('markPath').setAttribute('d',markPath(r)); } }/* d08: four short notes, opt-in, under 600 ms total */function tone(){ if(!$('tone').checked) return; try{ var ac=new (window.AudioContext||window.webkitAudioContext)(); [523.25,659.25,783.99,1046.5].forEach(function(fq,i){ var o=ac.createOscillator(), g=ac.createGain(); o.type='sine'; o.frequency.value=fq; g.gain.value=0; o.connect(g); g.connect(ac.destination); var t=ac.currentTime+i*0.12; g.gain.setValueAtTime(0,t); g.gain.linearRampToValueAtTime(0.08,t+0.02); g.gain.exponentialRampToValueAtTime(0.0001,t+0.13); o.start(t); o.stop(t+0.14); }); }catch(e){}}/* d11: block heights never separated; times in UTC, labelled */function ago(ts){ if(!ts) return ''; 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){ var d=new Date(ts*1000); return d.toISOString().slice(11,16)+' UTC'; }function chunk(h){ return (h||'').replace(/(.{8})/g,'$1 ').trim(); } // d17 grouped for screen readersvar height=0, hasTip=false, seen={};function pollTip(){ fetch('/api/blockchain/info').then(function(x){return x.json()}).then(function(j){ if(j.status!=='success') return; var h=j.height||0; if(hasTip && h>height){ // one increment per block found (d06) for(var i=0,n=Math.min(h-height,RMAX-r);i<n;i++) deepen(); tone(); pollBlocks(); } height=h; hasTip=true; $('height').textContent=String(h); // no thousands separator if(j.tip_hash){ var t=$('tip'); t.textContent=j.tip_hash; t.setAttribute('aria-label',chunk(j.tip_hash)); } if(j.total_money_coins!=null){ var pct=Math.min(100,(j.total_money_coins/MAX_SUPPLY)*100); $('supplyBar').style.width=pct.toFixed(3)+'%'; $('supplyNow').textContent=j.total_money_coins.toLocaleString('en-US',{minimumFractionDigits:8,maximumFractionDigits:8})+' mined'; } }).catch(function(){});}function pollBlocks(){ fetch('/api/explorer/blocks?limit=4').then(function(x){return x.json()}).then(function(j){ var bl=(j&&j.blocks)||[]; var box=$('blocks'); if(!bl.length){ $('blocksEmpty').textContent='The chain is not answering right now.'; return; } var head=box.querySelector('.row.head'); box.innerHTML=''; box.appendChild(head); bl.forEach(function(b){ var units=b.units_per_coin||0; var rw=(b.subsidy!=null&&units)?('Ȼ'+(b.subsidy/units).toFixed(8)):'—'; var row=document.createElement('div'); row.className='row'+(seen[b.height]?'':' new'); row.innerHTML='<span>'+b.height+'</span>'+ '<span class="hash"><span aria-label="'+chunk(b.hash)+'">'+b.hash+'</span>'+ '<button class="copy" type="button" data-h="'+b.hash+'" aria-label="Copy hash">Copy</button></span>'+ '<span class="rw">'+rw+'</span>'+ '<span class="age" title="'+utc(b.timestamp)+'">'+ago(b.timestamp)+' · '+utc(b.timestamp)+'</span>'; box.appendChild(row); seen[b.height]=1; }); if(bl[0]&&bl[0].timestamp) $('age').textContent='found '+ago(bl[0].timestamp)+' · '+utc(bl[0].timestamp); }).catch(function(){ $('blocksEmpty').textContent='The chain is not answering right now.'; });}document.addEventListener('click',function(e){ var b=e.target.closest('.copy[data-h]'); if(!b) return; navigator.clipboard&&navigator.clipboard.writeText(b.getAttribute('data-h')); b.textContent='Copied'; setTimeout(function(){b.textContent='Copy'},1200);});/* d02 glyph composer: glyph-first, no space, eight places, tabular */var amt=$('amt'), out=$('glyphOut');function fmtAmt(v){ var n=parseFloat(String(v).replace(/[^0-9.]/g,'')); if(!isFinite(n)) n=0; var s=n.toFixed(8); var parts=s.split('.'); parts[0]=parts[0].replace(/\B(?=(\d{3})+(?!\d))/g,','); return 'Ȼ'+parts.join('.'); }amt.addEventListener('input',function(){ out.textContent=fmtAmt(amt.value); });$('copyGlyph').addEventListener('click',function(){ navigator.clipboard&&navigator.clipboard.writeText(out.textContent); $('copied').textContent='Copied'; setTimeout(function(){$('copied').textContent=''},1200);});pollTip(); pollBlocks();setInterval(function(){ if(!document.hidden) pollTip(); },20000);})();</script></body></html>