git / moonbite-network / templates/hello.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 — take a bite of the moon</title><meta name="description" content="The moon belongs to no one. There will only ever be ~33 million pieces, and every one has to be earned. Take yours — free, in your browser, right now."><link rel="icon" type="image/svg+xml" href="/static/moonbite-logo.svg"><link rel="stylesheet" href="/static/fonts/moonbite-fonts.css"><link rel="preload" as="image" href="/static/img/hero-moon-sm.webp"><style nonce="{{ csp_nonce }}">/* MoonBite — "Take a bite of the moon." The signature homepage: a real moon you bite pieces out of, each piece a coin you earned. Brand Reserve, warmed for people new to crypto. Honest throughout. Nothing loads from a third party. */:root{ --void:#0B0D12; --slate:#161A22; --gold:#D9A441; --gold-2:#EBCB86; --gold-deep:#B8863B; --bone:#F5F2EA; --ash:#8A8580; --ok:#2E9E6B; --display:'Archivo Black','Arial Black',sans-serif; --ui:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --ease:cubic-bezier(0.22,1,0.36,1);}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--void);color:var(--bone);font-family:var(--ui);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden}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:4px}.skip{position:absolute;left:-9999px;z-index:80;background:var(--gold);color:var(--void);padding:12px 18px;font-weight:700}.skip:focus{left:0;top:0}.wrap{width:100%;max-width:900px;margin:0 auto;padding:0 clamp(20px,5vw,28px)}/* masthead */.top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:12px; padding:18px clamp(20px,5vw,40px)}.brand{display:flex;align-items:center;gap:10px;min-height:44px;font-family:var(--display); font-size:1rem;text-transform:uppercase;letter-spacing:-.02em}.brand svg{width:24px;height:24px;flex:none}.top nav{margin-left:auto;display:flex;gap:clamp(10px,3vw,24px);font-size:.92rem}.top nav a{color:var(--ash);min-height:44px;display:flex;align-items:center}.top nav a:hover{color:var(--gold)}.counter{margin-left:auto;display:flex;align-items:center;gap:9px;font-family:var(--mono); font-size:.74rem;letter-spacing:.06em;color:var(--ash);min-height:44px}.counter b{color:var(--gold);font-weight:400}.top nav.hasbites{margin-left:24px}/* hero */.hero{position:relative;min-height:100svh;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;padding:92px 0 48px;overflow:hidden}.glow{position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(52% 42% at 50% 42%,rgba(217,164,65,.18),rgba(217,164,65,0) 68%)}.hero .wrap{position:relative;z-index:1}.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase; color:var(--gold);margin-bottom:18px}h1{font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:1; font-size:clamp(2.7rem,10vw,5.4rem)}.lede{margin:20px auto 0;max-width:40ch;font-size:clamp(1.02rem,2.2vw,1.28rem);color:rgba(245,242,234,.82)}/* the moon */.moonstage{margin:26px auto 0;position:relative;width:clamp(230px,64vw,360px);height:clamp(230px,64vw,360px)}#moonsvg{width:100%;height:100%;display:block;cursor:pointer; filter:drop-shadow(0 12px 60px rgba(217,164,65,.22)); transition:transform .12s var(--ease)}#moonsvg:active{transform:scale(.985)}.moonstage .ring{position:absolute;inset:-6%;border-radius:50%;pointer-events:none; border:1px dashed rgba(217,164,65,.22);animation:rot 40s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}.bitehint{margin-top:14px;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:rgba(245,242,234,.55)}.bitehint b{color:var(--gold)}/* flying coin */.fly{position:fixed;z-index:60;width:34px;height:34px;pointer-events:none;will-change:transform,opacity}.fly svg{width:100%;height:100%;filter:drop-shadow(0 4px 14px rgba(217,164,65,.5))}/* the reveal after first bite */.got{margin:20px auto 0;max-width:40ch;opacity:0;transform:translateY(10px); transition:opacity .5s var(--ease),transform .5s var(--ease)}.got.show{opacity:1;transform:none}.got .big{font-family:var(--display);font-weight:400;font-size:clamp(1.15rem,3.4vw,1.6rem);letter-spacing:-.02em}.got p{margin-top:10px;color:rgba(245,242,234,.78);font-size:.97rem;line-height:1.6}.got .badge{margin-top:14px;display:inline-block;font-family:var(--mono);font-size:.66rem; letter-spacing:.14em;text-transform:uppercase;color:var(--ash); border:1px solid rgba(245,242,234,.16);border-radius:100px;padding:7px 14px}.cue{margin-top:34px;font-family:var(--mono);font-size:.64rem;letter-spacing:.24em; text-transform:uppercase;color:rgba(245,242,234,.4)}/* content */section.block{padding:clamp(60px,10vh,110px) 0;border-top:1px solid rgba(245,242,234,.07)}.tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}h2{font-family:var(--display);font-weight:400;letter-spacing:-.03em;line-height:1.04;font-size:clamp(1.8rem,5vw,3rem);max-width:18ch}.big-p{margin-top:20px;max-width:52ch;font-size:clamp(1.05rem,2vw,1.22rem);color:rgba(245,242,234,.82);line-height:1.7}.big-p b{color:var(--bone)}.trust{margin-top:30px;display:grid;gap:14px;max-width:60ch}.trust li{list-style:none;display:flex;gap:14px;padding:16px 18px;border-radius:12px;background:rgba(245,242,234,.03);border:1px solid rgba(245,242,234,.08)}.trust .mk{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(46,158,107,.16);color:var(--ok);font-weight:800;font-size:.9rem}.trust b{color:var(--bone)}.trust span{color:rgba(245,242,234,.76);font-size:.98rem;line-height:1.55}.doable{margin-top:28px;display:grid;gap:1px;background:rgba(245,242,234,.09);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border:1px solid rgba(245,242,234,.09);border-radius:12px;overflow:hidden}.doable div{background:var(--void);padding:22px 20px}.doable h3{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:-.01em}.doable p{margin-top:8px;color:rgba(245,242,234,.72);font-size:.94rem;line-height:1.6}.doors{margin-top:30px;display:grid;gap:16px;grid-template-columns:1fr 1fr}@media(max-width:640px){.doors{grid-template-columns:1fr}}.door{display:block;padding:26px 24px;border-radius:16px;border:1px solid rgba(245,242,234,.12);background:linear-gradient(180deg,rgba(22,26,34,.6),rgba(11,13,18,.6));transition:border-color .2s,transform .14s var(--ease)}.door:hover{border-color:var(--gold);transform:translateY(-2px)}.door .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}.door h3{font-family:var(--display);font-weight:400;font-size:1.35rem;margin-top:10px;letter-spacing:-.02em}.door p{margin-top:8px;color:rgba(245,242,234,.72);font-size:.95rem}.door .go{margin-top:14px;color:var(--gold);font-weight:700;font-size:.95rem}footer{border-top:1px solid rgba(245,242,234,.1);padding:48px 0 60px;color:var(--ash);font-size:.86rem}footer .fine{max-width:62ch;line-height:1.7}footer .fine b{color:var(--bone)}footer a{color:var(--ash);text-decoration:underline;text-underline-offset:3px}footer .row{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:.8rem}footer .row a{text-decoration:none}footer .row a:hover{color:var(--gold)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ring{animation:none}.got{transition:none}}</style></head><body><a class="skip" href="#learn">Skip to what this is</a><header class="top"> <a class="brand" href="/hello"> <svg viewBox="-150 -150 300 300" aria-hidden="true"> <mask id="bm"><rect x="-150" y="-150" width="300" height="300" fill="#fff"/> <circle cx="67.18" cy="-67.18" r="62" fill="#000"/></mask> <circle r="100" fill="#F5F2EA" mask="url(#bm)"/> </svg><span>MoonBite</span> </a> <p class="counter" id="counter" hidden>Your bites: <b id="cnum">0</b></p> <nav id="nav"><a href="#learn">What is this?</a><a href="/get-wallet">Get a wallet</a></nav></header><!-- HERO --><main class="hero"> <div class="glow" aria-hidden="true"></div> <div class="wrap"> <p class="kicker">The moon belongs to no one</p> <h1>Take a bite.</h1> <p class="lede">Every piece of MoonBite has to be earned — no bank, no owner, no permission. Bite the moon and a piece becomes yours. Free, right now.</p> <div class="moonstage"> <span class="ring" aria-hidden="true"></span> <svg id="moonsvg" viewBox="0 0 400 400" role="img" aria-label="A moon. Tap it to bite off a piece and mine a coin."> <defs> <mask id="bites"> <rect width="400" height="400" fill="black"/> <circle cx="200" cy="200" r="188" fill="white"/> <g id="bitesG"></g> </mask> </defs> <g mask="url(#bites)"> <image href="/static/img/hero-moon-sm.webp" x="6" y="6" width="388" height="388" preserveAspectRatio="xMidYMid slice"/> </g> <circle cx="200" cy="200" r="188" fill="none" stroke="rgba(217,164,65,.35)" stroke-width="1.5"/> </svg> </div> <p class="bitehint" id="hint">Tap the moon to <b>take your bite</b></p> <div class="got" id="got" aria-live="polite"> <div class="big" id="gotbig"></div> <p id="gottext"></p> <span class="badge">Practice bite · free · worth nothing yet</span> </div> <p class="cue" id="cue" hidden>↓ so what did I just do?</p> </div></main><!-- WHAT JUST HAPPENED --><section class="block" id="learn"> <div class="wrap"> <p class="tag">In plain words</p> <h2>No bank did that. Nobody did. You earned it.</h2> <p class="big-p">Picture a giant notebook the whole world shares, that nobody can secretly change. To add a line — "this piece belongs to you" — a computer has to solve a hard little puzzle first. When you bit the moon, yours did. The network handed it a coin for the work, exactly like it does for everyone. <b>That's all money has ever been: a record people agree on.</b> MoonBite just doesn't need anyone in charge of the notebook.</p> </div></section><!-- THE FEAR --><section class="block"> <div class="wrap"> <p class="tag">Let's be honest</p> <h2>"Isn't crypto a scam?"</h2> <p class="big-p">A lot of it has burned a lot of people. Fair. So here's exactly how MoonBite is built to be different — and how to check we're telling the truth.</p> <ul class="trust"> <li><span class="mk"></span><span><b>Nobody is selling you anything.</b> No "buy now", no price to pump, no one who profits when you show up.</span></li> <li><span class="mk"></span><span><b>Nobody got a secret head start.</b> Every piece was bitten off in the open, one at a time — including ours. No hidden stash.</span></li> <li><span class="mk"></span><span><b>You can't lose money you never put in.</b> Biting costs a little electricity and nothing else. There's nothing to deposit.</span></li> <li><span class="mk"></span><span><b>Don't take our word for it.</b> Every coin and rule is public. <a href="/explorer" style="color:var(--gold)">Watch real pieces being bitten off right now</a>, or <a href="/balance" style="color:var(--gold)">check any wallet yourself</a>.</span></li> </ul> </div></section><!-- HONEST --><section class="block"> <div class="wrap"> <p class="tag">The honest part</p> <h2>It's early. Here's what's real today.</h2> <p class="big-p">We won't oversell it: you can't buy groceries with MoonBite yet, it's on no exchange, and it may never be worth a cent. What you <b>can</b> do, right now, for free:</p> <div class="doable"> <div><h3>Hold it</h3><p>In a wallet that's yours alone. No company can freeze it, lose it, or ask your permission.</p></div> <div><h3>Send it</h3><p>To anyone, anywhere, in seconds — for free. No bank hours, no borders, no forms.</p></div> <div><h3>Bite more</h3><p>Any time, with a computer you already own. Nobody can stop you, and nobody has to let you.</p></div> </div> </div></section><!-- START --><section class="block" id="start"> <div class="wrap"> <p class="tag">Start small</p> <h2>Two ways in. Both free.</h2> <div class="doors"> <a class="door" href="/get-wallet"> <span class="k">Just curious</span> <h3>Get a wallet</h3> <p>About 30 seconds. No money, no email, nothing to install — a place to keep pieces only you control.</p> <span class="go">Make my wallet →</span> </a> <a class="door" href="/mine"> <span class="k">Ready for a real bite</span> <h3>Bite for real</h3> <p>Turn your laptop into a tiny mint. One command gets it going, and real pieces land in your wallet as it works.</p> <span class="go">Show me how →</span> </a> </div> </div></section><footer> <div class="wrap"> <p class="fine"><b>The fine print, honestly.</b> MoonBite (MBITE) is an open, fair-launch <b>coin</b> — its own network, not a token on someone else's. There will only ever be about 33 million pieces. It's on no exchange and has no price; nobody can sell you one, and anyone who offers to is lying. Biting for real costs electricity and it may never be worth anything. The moon above bites a free practice coin worth nothing — it's there to show you how it feels, using a simplified version of the real puzzle. This isn't investment advice. Photograph: NASA / Apollo 17; NASA doesn't endorse MoonBite.</p> <div class="row"> <a href="/explorer">See the live chain</a> <a href="/get-wallet">Get a wallet</a> <a href="/mine">Bite for real</a> <a href="/whitepaper">The whole story</a> <a href="/">The technical version</a> </div> </div></footer><script nonce="{{ csp_nonce }}">(function(){"use strict";var $=function(id){return document.getElementById(id)};var moon=$('moonsvg'), bitesG=$('bitesG'), hint=$('hint'), got=$('got'), counter=$('counter'), cnum=$('cnum'), nav=$('nav'), cue=$('cue');var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;var SVGNS='http://www.w3.org/2000/svg';var bites=0, busy=false;var WORDS=['delightful','free','yours','out of thin air','earned, not given'];/* a real little proof-of-work loop: hash an incrementing number and look for a winner under a target. Your CPU really runs it — an easier puzzle than the network's, so a bite lands in a moment. The copy says exactly this. */function hash(n){var h=0x811c9dc5,s=''+n+'moonbite'; for(var i=0;i<s.length;i++){h^=s.charCodeAt(i);h=(h*0x01000193)>>>0;}return h>>>0;}function work(){var nonce=(Math.random()*1e6)|0,tries=0,t=0x00300000; while(hash(++nonce)>=t && tries<80000){tries++;} return tries+1;}function bite(evt){ if(busy) return; busy=true; var tries=work(); // real work bites++; /* punch a bite out of the moon's edge at a random angle */ var ang=Math.random()*Math.PI*2, R=188, br=40+Math.random()*26; var bx=200+Math.cos(ang)*R, by=200+Math.sin(ang)*R; var c=document.createElementNS(SVGNS,'circle'); c.setAttribute('cx',bx.toFixed(1)); c.setAttribute('cy',by.toFixed(1)); c.setAttribute('fill','black'); c.setAttribute('r', reduce? br.toFixed(1):'0'); bitesG.appendChild(c); if(!reduce){ requestAnimationFrame(function(){ c.style.transition='r .28s cubic-bezier(.22,1,.36,1)'; c.setAttribute('r',br.toFixed(1)); }); } /* a coin flies from the bite to the counter */ flyCoin(bx,by); /* counter */ counter.hidden=false; nav.classList.add('hasbites'); cnum.textContent=bites; /* first-bite reveal */ if(bites===1){ hint.innerHTML='Tap again — bite as many as you like'; $('gotbig').textContent='That piece is yours.'; $('gottext').innerHTML='Your computer made <b>'+tries.toLocaleString('en-US')+ '</b> guesses to earn it. Nobody printed this coin. Nobody gave it to you. '+ '<b>You bit the moon.</b>'; got.classList.add('show'); cue.hidden=false; } else if($('gotbig')){ var w=WORDS[(Math.random()*WORDS.length)|0]; $('gotbig').textContent='Piece #'+bites+' — '+w+'.'; } setTimeout(function(){busy=false}, reduce?60:260);}function flyCoin(bx,by){ var stage=moon.getBoundingClientRect(); var sx=stage.left+(bx/400)*stage.width, sy=stage.top+(by/400)*stage.height; var tgt=counter.getBoundingClientRect(); var tx=tgt.left+tgt.width*0.5, ty=tgt.top+tgt.height*0.5; var el=document.createElement('div'); el.className='fly'; el.innerHTML='<svg viewBox="0 0 40 40"><circle cx="20" cy="20" r="18" fill="#161A22" stroke="#D9A441" stroke-width="2"/><circle cx="20" cy="20" r="11" fill="#D9A441" mask="url(#fbm)"/><mask id="fbm"><rect width="40" height="40" fill="#fff"/><circle cx="28" cy="12" r="7" fill="#000"/></mask></svg>'; el.style.left=(sx-17)+'px'; el.style.top=(sy-17)+'px'; document.body.appendChild(el); if(reduce){ setTimeout(function(){el.remove()},1); return; } el.animate([ {transform:'translate(0,0) scale(1.1)',opacity:1}, {transform:'translate('+(tx-sx)+'px,'+(ty-sy)+'px) scale(.5)',opacity:0} ],{duration:700,easing:'cubic-bezier(.4,0,.2,1)'}).onfinish=function(){el.remove()};}moon.addEventListener('click', bite);moon.addEventListener('keydown', function(e){ if(e.key===' '||e.key==='Enter'){e.preventDefault();bite();} });moon.setAttribute('tabindex','0');})();</script></body></html>