git / moonbite-network / templates/ogilvy.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 — We have nothing to sell you.</title><meta name="description" content="MoonBite can't be bought, at any price, from anyone. You make it yourself with the computer you already have. No company, no presale, no premine."><link rel="icon" type="image/svg+xml" href="/static/moonbite-logo.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,400&family=Inter:wght@400;500;600;700&display=swap"><style nonce="{{ csp_nonce }}">:root{ --ink:#0A0B0E; --gold:#D9A441; --gold-2:#EBCB86; --bone:#F4F1E9; --mist:#CFCABF; --ash:#8E8981; --faint:#5E5A53; --rule:rgba(244,241,233,.14); --rule-2:rgba(244,241,233,.07); --serif:'Newsreader',Georgia,serif; --display:'Instrument Serif',Georgia,serif; --ui:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --mono:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; --page:1080px;}*{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{background:var(--ink);color:var(--bone);font-family:var(--serif); font-size:clamp(1.06rem,1.9vw,1.19rem);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}::selection{background:var(--gold);color:var(--ink)}a{color:inherit}img,svg{display:block;max-width:100%}.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}.page{max-width:var(--page);margin:0 auto;padding:0 30px}@media(max-width:600px){.page{padding:0 22px}}.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}main{position:relative;z-index:2}/* masthead */header.mast{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40; background:rgba(10,11,14,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.mast-in{max-width:var(--page);margin:0 auto;padding:14px 30px;display:flex;align-items:center;gap:16px}@media(max-width:600px){.mast-in{padding:12px 22px}}.mark{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.28rem;letter-spacing:.02em;text-decoration:none}.mark img{width:24px;height:24px}.mlinks{display:flex;gap:24px;margin-left:26px;font-family:var(--ui);font-size:.86rem}.mlinks a{color:var(--mist);text-decoration:none;transition:color .2s}.mlinks a:hover{color:var(--bone)}@media(max-width:760px){.mlinks{display:none}}.dateline{margin-left:auto;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em; text-transform:uppercase;color:var(--ash);display:flex;align-items:center;gap:9px}.dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2.4s infinite;flex:none}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(217,164,65,.5)}70%{box-shadow:0 0 0 7px rgba(217,164,65,0)}100%{box-shadow:0 0 0 0 rgba(217,164,65,0)}}@media(max-width:560px){.dateline .hide{display:none}}/* ---------- HERO: the whole 20 seconds ---------- */.hero{min-height:calc(100svh - 58px);display:flex;flex-direction:column;justify-content:center; padding-block:clamp(40px,7vh,80px) clamp(32px,5vh,56px)}.kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}h1{font-family:var(--display);font-weight:400;font-size:clamp(3.1rem,11vw,7.6rem); line-height:.94;letter-spacing:-.02em;margin:22px 0 0;max-width:14ch}h1 em{font-style:italic;color:var(--gold)}.deck{font-family:var(--serif);font-weight:300;font-size:clamp(1.26rem,3.2vw,1.78rem); line-height:1.46;color:var(--mist);margin-top:26px;max-width:34ch}.deck b{color:var(--bone);font-weight:500}.btns{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}.btn{font-family:var(--ui);font-size:.97rem;font-weight:600;padding:15px 30px;border-radius:4px; text-decoration:none;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}.btn-gold{color:var(--ink);background:linear-gradient(180deg,var(--gold-2),var(--gold)); box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 28px rgba(217,164,65,.2)}.btn-gold:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 16px 38px rgba(217,164,65,.32)}.btn-line{color:var(--bone);border-color:var(--rule)}.btn-line:hover{border-color:rgba(217,164,65,.6);background:rgba(217,164,65,.06)}.proof{margin-top:26px;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em; text-transform:uppercase;color:var(--faint);display:flex;gap:8px;flex-wrap:wrap;align-items:center}.proof b{color:var(--mist);font-weight:400}.proof i{font-style:normal;color:var(--rule)}/* ---------- three facts, scannable ---------- */.facts{display:grid;gap:1px;background:var(--rule-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}@media(min-width:860px){.facts{grid-template-columns:repeat(3,1fr)}}.f{background:var(--ink);padding:clamp(30px,4.5vw,44px) clamp(24px,3vw,34px)}.f .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;color:var(--gold)}.f h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4vw,2.1rem); line-height:1.1;letter-spacing:-.01em;margin:15px 0 11px}.f p{color:var(--mist);font-size:1.02rem;line-height:1.58}.f p b{color:var(--bone);font-weight:500}/* ---------- pull quote ---------- */.pull{padding-block:clamp(64px,10vh,110px);text-align:center}.pull p{font-family:var(--display);font-weight:400;font-style:italic; font-size:clamp(1.8rem,5.4vw,3.3rem);line-height:1.14;letter-spacing:-.015em; max-width:17ch;margin:0 auto}.pull .attr{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; color:var(--ash);margin-top:24px}/* ---------- three steps ---------- */.how{border-top:1px solid var(--rule);padding-block:clamp(52px,8vh,84px)}.slug{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash)}.how h2{font-family:var(--display);font-weight:400;font-size:clamp(2rem,5.4vw,3rem); line-height:1.06;letter-spacing:-.015em;margin-top:16px;max-width:20ch}.steps{display:grid;gap:26px;margin-top:38px}@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:34px}}.st{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline}.st .sn{font-family:var(--mono);font-size:.72rem;color:var(--gold)}.st h3{font-family:var(--display);font-weight:400;font-size:1.44rem;line-height:1.15}.st p{color:var(--mist);font-size:.98rem;line-height:1.55;margin-top:7px}/* ---------- close ---------- */.close{border-top:1px solid var(--rule);padding-block:clamp(60px,9vh,100px) clamp(50px,7vh,80px)}.close h2{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,6vw,3.4rem); line-height:1.06;letter-spacing:-.015em;max-width:17ch}.close .fine{font-family:var(--ui);font-size:.86rem;color:var(--faint);margin-top:24px;max-width:56ch;line-height:1.6}.more{display:inline-flex;align-items:center;gap:9px;margin-top:30px;font-family:var(--ui); font-size:.95rem;font-weight:600;color:var(--gold);text-decoration:none; border-bottom:1px solid rgba(217,164,65,.4);padding-bottom:4px;transition:border-color .2s}.more:hover{border-color:var(--gold)}/* footer */footer{border-top:1px solid var(--rule);padding:48px 0 40px}.fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}.fgrid p{font-family:var(--ui);font-size:.87rem;color:var(--ash);max-width:32ch;margin-top:13px;line-height:1.58}.fcol h5{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-bottom:13px}.fcol a{display:block;font-family:var(--ui);font-size:.9rem;color:var(--mist);padding:6px 0;text-decoration:none}.fcol a:hover{color:var(--gold)}.fbase{margin-top:40px;padding-top:22px;border-top:1px solid var(--rule-2);display:flex; justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;color:var(--faint)}.rise{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}.rise.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}.dot{animation:none}}</style></head><body><div class="grain"></div><header class="mast"> <div class="mast-in"> <a class="mark" href="/"><img src="/static/moonbite-logo.svg" alt=""><span>MoonBite</span></a> <nav class="mlinks"> <a href="/the-case">The case</a><a href="/how-it-works">How it works</a> <a href="/explorer">Explorer</a><a href="/get-wallet">Wallet</a> </nav> <div class="dateline"><span class="dot"></span><span class="hide">Block</span> <span class="mono" id="dBlock">—</span><span class="hide">· mining now</span></div> </div></header><main> <!-- ============ THE 20 SECONDS ============ --> <section class="hero page"> <div class="kicker">A new kind of money · Est. {{ consensus.launch_year }}</div> <h1>We have <em>nothing</em> to sell you.</h1> <p class="deck">MoonBite can't be bought — at any price, from anyone. <b>You make it yourself</b>, with the computer you already have.</p> <div class="btns"> <a class="btn btn-gold" href="/start">Mine your first block</a> <a class="btn btn-line" href="/the-case">Why it works</a> </div> <div class="proof"> <span>No company</span><i>·</i><span>No presale</span><i>·</i><span>No premine</span><i>·</i> <span><b class="mono" id="pBlocks">—</b> blocks mined so far</span> </div> </section> <!-- ============ THREE FACTS ============ --> <section class="facts"> <div class="f rise"><div class="n">01</div> <h2>Nobody owns it.</h2> <p>No company, no investors, no founder's stack. If we vanished tonight it would keep running.</p></div> <div class="f rise"><div class="n">02</div> <h2>{{ consensus.initial_subsidy_coins }} coins, every {{ consensus.block_time_min }} minutes.</h2> <p>Paid to whoever's computer did the work. <b>We take nothing</b> — not a fee, not a cut.</p></div> <div class="f rise"><div class="n">03</div> <h2>It has no price.</h2> <p>Not listed anywhere, and it may never be worth a penny. <b>Anyone selling you MBITE is lying.</b></p></div> </section> <!-- ============ THE LINE ============ --> <section class="pull page rise"> <p>The loudest thing about this new money is the fan on your laptop.</p> <div class="attr">So far, the only cost of entry</div> </section> <!-- ============ HOW ============ --> <section class="how page"> <div class="rise"> <div class="slug">How to begin</div> <h2>Four minutes, and it costs nothing.</h2> </div> <div class="steps"> <div class="st rise"><div class="sn">01</div><div> <h3>Make a wallet</h3><p>Write your twelve words on paper. Don't rush this part.</p></div></div> <div class="st rise"><div class="sn">02</div><div> <h3>Point the miner at it</h3><p>Paste your address, press start. Your computer joins the network.</p></div></div> <div class="st rise"><div class="sn">03</div><div> <h3>Leave it running</h3><p>Win a block and {{ consensus.initial_subsidy_coins }} MBITE are yours. Nobody can take them.</p></div></div> </div> </section> <!-- ============ CLOSE ============ --> <section class="close page rise"> <h2>Half of every MoonBite that will ever exist is being mined right now.</h2> <div class="btns"> <a class="btn btn-gold" href="/start">Mine your first block</a> </div> <p class="fine">A word of caution, since nobody else in this industry offers one: mining uses electricity, which is a real cost, and MoonBite may never be worth anything. Treat it as an experiment you find interesting, not as a plan for your money.</p> <a class="more" href="/the-case">Read the full case, in eleven facts →</a> </section></main><footer> <div class="page"> <div class="fgrid"> <div> <a class="mark" href="/"><img src="/static/moonbite-logo.svg" alt=""><span>MoonBite</span></a> <p>Made, not sold. {{ consensus.initial_subsidy_coins }} MBITE every {{ consensus.block_time_min }} minutes, to whoever does the work.</p> </div> <div class="fcol"><h5>Begin</h5> <a href="/start">Mine</a><a href="/get-wallet">Wallet</a><a href="/how-it-works">How it works</a></div> <div class="fcol"><h5>Verify</h5> <a href="/explorer">Explorer</a><a href="/whitepaper">Whitepaper</a><a href="/full-node">Run a node</a></div> <div class="fcol"><h5>Understand</h5> <a href="/the-case">The case</a><a href="/scams">Avoid scams</a><a href="/support">Support</a></div> </div> <div class="fbase"> <span>© {{ consensus.launch_year }} MoonBite · no company, no owner</span> <span>You mine it, or it isn't yours.</span> </div> </div></footer><script nonce="{{ csp_nonce }}">(function(){ var $=function(i){return document.getElementById(i)}; var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches; if('IntersectionObserver' in window && !reduce){ var io=new IntersectionObserver(function(es){es.forEach(function(e){ if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target);}});},{threshold:.12}); document.querySelectorAll('.rise').forEach(function(el){io.observe(el)}); } else { document.querySelectorAll('.rise').forEach(function(el){el.classList.add('in')}); } function fmt(n){return (n||0).toLocaleString('en-US')} function poll(){ fetch('/api/blockchain/info').then(function(r){return r.json()}).then(function(j){ var h=j.height||j.blocks||0; $('dBlock').textContent=fmt(h); $('pBlocks').textContent=fmt(h); }).catch(function(){}); } poll(); setInterval(poll,15000);})();</script></body></html>