git / moonbite-network / templates/take_a_bite.html · raw
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>You can't buy MoonBite (MBITE) — mine it in this tab</title><meta name="description" content="No listing, no presale, no allocation. Every MBITE in existence was mined — so we made it minable right here, in this tab. Open source, not an investment or a security."><link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"><style> :root { --accent: #5FE9D0; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: #04050a; color: #F2F6FF; font-family: 'Space Grotesk', sans-serif; } a { color: var(--accent); text-decoration: none; } a:hover { color: #F2F6FF; } input::placeholder { color: rgba(242,246,255,0.3); } .mono { font-family: 'JetBrains Mono', monospace; } @keyframes mbSpin { to { transform: rotate(360deg); } } @keyframes mbBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } @keyframes mbRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes mbFade { from { opacity: 0; } to { opacity: 1; } } @keyframes mbSweep { 0% { transform: translateY(-100px); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } } @keyframes mbInvertA { 0% { opacity: 0; } 7% { opacity: 1; } 46% { opacity: 1; } 100% { opacity: 0; } } @keyframes mbInvertB { 0% { opacity: 0; } 7% { opacity: 1; } 46% { opacity: 1; } 100% { opacity: 0; } } @keyframes mbChompA { 0% { transform: translateX(300px); } 100% { transform: translateX(0); } } @keyframes mbChompB { 0% { transform: translateX(300px); } 100% { transform: translateX(0); } } @keyframes mbPop { 0% { opacity: 0; transform: translateY(26px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .bg-glow { position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(48% 46% at 72% 26%, #121c40 0%, rgba(4,5,10,0) 72%); } .bg-scan { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.4; background: repeating-linear-gradient(to bottom, rgba(242,246,255,0.05) 0 1px, transparent 1px 6px); } .wrap { position: relative; min-height: 100vh; overflow-x: hidden; } /* ---------- mega-nav (shared partials/mega_nav.html, scoped to cinematic palette) ---------- */ .mb-meganav { position: sticky; top: 0; z-index: 100; background: rgba(4,5,10,0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(242,246,255,0.08); animation: mbFade 0.7s ease-out both; } .mb-nav-inner { max-width: 1320px; margin: 0 auto; padding: 0 44px; height: 64px; display: flex; align-items: center; gap: 18px; } .mb-brand { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; text-decoration: none; color: #F2F6FF; white-space: nowrap; } .mb-brand img { width: 30px; height: 30px; } .mb-brand .mb-brand-name { background: linear-gradient(90deg, var(--accent), #5B7BFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .mb-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 auto 0 18px; padding: 0; } .mb-nav-item { position: relative; } .mb-nav-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(242,246,255,0.62); background: none; border: none; cursor: pointer; white-space: nowrap; transition: color .2s ease, background .2s ease; } .mb-nav-trigger:hover, .mb-nav-item.is-open .mb-nav-trigger { color: #F2F6FF; background: rgba(242,246,255,0.06); } .mb-nav-trigger .mb-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; opacity: 0.7; } .mb-nav-item.is-open .mb-caret { transform: rotate(-135deg) translateY(-1px); } .mb-dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 244px; padding: 8px; background: rgba(6,8,14,0.98); border: 1px solid rgba(95,233,208,0.18); border-radius: 4px; box-shadow: 0 24px 60px rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .mb-nav-item.is-open .mb-dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .mb-dropdown a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 3px; text-decoration: none; color: rgba(242,246,255,0.86); transition: background .15s ease, color .15s ease; } .mb-dropdown a:hover { background: rgba(95,233,208,0.08); } .mb-dropdown a .mb-dd-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.92rem; letter-spacing: 0; } .mb-dropdown a .mb-dd-desc { font-size: 0.76rem; color: rgba(242,246,255,0.5); letter-spacing: 0; } .mb-dropdown a:hover .mb-dd-title { color: var(--accent); } .mb-nav-cta { display: flex; align-items: center; gap: 12px; margin-left: auto; } .mb-nav-cta .mb-theme-btn { display: none; } .mb-meganav .mb-nav-cta-btn { display: inline-flex; align-items: center; padding: 10px 18px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; border-radius: 2px; white-space: nowrap; transition: filter .2s ease, background .2s ease, border-color .2s ease, color .2s ease; } .mb-meganav .mb-nav-cta-btn.btn-secondary { border: 1px solid rgba(242,246,255,0.22); color: #F2F6FF; background: none; } .mb-meganav .mb-nav-cta-btn.btn-secondary:hover { border-color: #F2F6FF; } .mb-meganav .mb-nav-cta-btn.btn-primary { background: var(--accent); color: #04050a; border: 1px solid var(--accent); } .mb-meganav .mb-nav-cta-btn.btn-primary:hover { filter: brightness(1.12); } .mb-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; border: 1px solid rgba(242,246,255,0.22); border-radius: 3px; background: none; cursor: pointer; } .mb-hamburger span { display: block; height: 2px; width: 20px; margin: 0 auto; background: #F2F6FF; transition: transform .2s ease; } /* mobile full-screen sheet */ .mb-mobile-sheet { position: fixed; inset: 0; z-index: 200; background: #04050a; padding: 22px; overflow-y: auto; transform: translateX(100%); transition: transform .3s cubic-bezier(0.4,0,0.2,1); } .mb-mobile-sheet.is-open { transform: translateX(0); } .mb-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; } .mb-mobile-close { background: none; border: none; color: #F2F6FF; font-size: 1.8rem; cursor: pointer; line-height: 1; } .mb-mobile-group { border-bottom: 1px solid rgba(242,246,255,0.1); } .mb-mobile-group > button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; background: none; border: none; color: #F2F6FF; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 600; cursor: pointer; } .mb-mobile-group .mb-mobile-links { display: none; padding: 0 0 12px 4px; } .mb-mobile-group.is-open .mb-mobile-links { display: block; } .mb-mobile-links a { display: block; padding: 9px 0; color: rgba(242,246,255,0.6); text-decoration: none; } .mb-mobile-links a:hover { color: var(--accent); } .mb-mobile-cta { margin-top: 22px; display: grid; gap: 12px; } .mb-mobile-cta .btn { justify-content: center; } @media (max-width: 1120px) { .mb-nav-links { display: none; } .mb-nav-cta .mb-nav-cta-btn { display: none; } .mb-hamburger { display: flex; } } @media (max-width: 640px) { .mb-nav-inner { padding: 0 20px; } } .hero { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 64px; align-items: center; padding: 56px 44px 84px; max-width: 1320px; margin: 0 auto; } .hero-copy { display: flex; flex-direction: column; gap: 28px; animation: mbRise 0.9s cubic-bezier(0.2,0,0.1,1) both; } .hero-side { display: flex; flex-direction: column; gap: 22px; animation: mbRise 1s cubic-bezier(0.2,0,0.1,1) 0.1s both; } .warm-banner { display: flex; flex-direction: column; gap: 18px; border-left: 2px solid var(--accent); padding: 4px 0 4px 20px; } .warm-banner .lbl { font-size: 11px; letter-spacing: 2.6px; color: var(--accent); } .warm-banner .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; font-size: 13px; color: rgba(242,246,255,0.62); } .warm-banner .row .blk { color: #F2F6FF; font-size: 15px; } .warm-banner .row a { font-size: 11px; letter-spacing: 2px; } h1.headline { margin: 0; font-size: clamp(46px, 6.4vw, 92px); font-weight: 700; line-height: 0.92; letter-spacing: -2.8px; text-wrap: balance; } p.subhead { margin: 0; max-width: 27em; font-size: 19px; line-height: 1.55; color: rgba(242,246,255,0.66); text-wrap: pretty; } p.subhead:empty { display: none; } .idle-block { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; } .bite-btn { display: inline-flex; align-items: center; gap: 14px; padding: 22px 42px; background: var(--accent); color: #04050a; border: none; border-radius: 3px; font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 700; letter-spacing: -0.3px; cursor: pointer; } .bite-btn:hover { filter: brightness(1.12); } .bite-btn .arrow { font-family: 'JetBrains Mono', monospace; font-size: 15px; opacity: 0.6; } .idle-note { font-size: 10.5px; letter-spacing: 2.2px; color: rgba(242,246,255,0.42); } .idle-lineage { font-size: 10.5px; letter-spacing: 2px; color: rgba(242,246,255,0.34); } .mining-block { display: flex; flex-direction: column; gap: 20px; max-width: 520px; animation: mbFade 0.4s ease-out both; } .mining-head { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 3px; color: var(--accent); } .dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: mbBlink 1.1s ease-in-out infinite; } .rate-row { display: flex; align-items: flex-end; gap: 14px; } .rate-num { font-size: clamp(48px, 7vw, 84px); font-weight: 700; letter-spacing: -3px; line-height: 0.88; font-variant-numeric: tabular-nums; } .rate-unit { font-size: 12.5px; letter-spacing: 2.4px; color: rgba(242,246,255,0.5); padding-bottom: 10px; } .prog-wrap { display: flex; flex-direction: column; gap: 9px; } .prog-labels { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 2.2px; color: rgba(242,246,255,0.5); } .prog-bar { height: 4px; background: rgba(242,246,255,0.12); border-radius: 2px; overflow: hidden; } .prog-fill { height: 100%; background: var(--accent); width: 0%; } .prog-foot { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: 2.2px; color: rgba(242,246,255,0.35); } .prog-foot a { color: rgba(242,246,255,0.45); } .prog-foot a:hover { color: #F2F6FF; } .found-block { display: flex; flex-direction: column; gap: 22px; max-width: 540px; animation: mbPop 0.7s cubic-bezier(0.2,0,0.1,1) both; } .found-block > p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(242,246,255,0.66); text-wrap: pretty; } .claim { display: flex; flex-direction: column; gap: 12px; } .claim .lbl { font-size: 10.5px; letter-spacing: 2.4px; color: rgba(242,246,255,0.5); } .claim-input { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(242,246,255,0.2); border-radius: 2px; padding: 4px 4px 4px 16px; } .claim-input .at { font-size: 15px; color: var(--accent); } .claim-input input { flex: 1; background: transparent; border: none; outline: none; color: #F2F6FF; font-family: 'JetBrains Mono', monospace; font-size: 15px; padding: 12px 0; } .claim-input button { padding: 14px 22px; background: var(--accent); color: #04050a; border: none; border-radius: 2px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 2.2px; cursor: pointer; white-space: nowrap; } .claim-input button:hover { filter: brightness(1.12); } .claim .verify { font-size: 10.5px; letter-spacing: 1.8px; color: rgba(242,246,255,0.52); } .found-cta { display: flex; flex-wrap: wrap; gap: 12px; } .found-cta .real { display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; border: 1px solid rgba(242,246,255,0.24); color: rgba(242,246,255,0.82); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 2.2px; border-radius: 2px; } .found-cta .real:hover { border-color: #F2F6FF; color: #F2F6FF; } .found-cta .again { display: inline-flex; align-items: center; padding: 16px 20px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 2.2px; color: rgba(242,246,255,0.45); } .found-cta .again:hover { color: #F2F6FF; } .ring-graphic { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; } .ring-spin { position: absolute; inset: 0; animation: mbSpin 48s linear infinite; } .ring-spin svg, .moon-mask svg { position: absolute; inset: 0; } .moon-mask { position: absolute; inset: 12%; overflow: hidden; } .sweep-line { position: absolute; left: -8%; right: -8%; top: 50%; height: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); opacity: 0.28; animation: mbSweep 4.8s linear infinite; } .net-card { border: 1px solid rgba(242,246,255,0.14); border-radius: 3px; overflow: hidden; max-width: 440px; width: 100%; margin: 0 auto; background: rgba(6,7,15,0.6); } .net-card .cap { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid rgba(242,246,255,0.12); font-size: 10px; letter-spacing: 2.4px; color: rgba(242,246,255,0.5); } .net-card .cap .live { display: inline-flex; align-items: center; gap: 8px; } .net-card .cap .live span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: mbBlink 2s ease-in-out infinite; } .net-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid rgba(242,246,255,0.06); font-size: 11.5px; } .net-row .k { color: rgba(242,246,255,0.42); letter-spacing: 2px; } .net-foot { padding: 12px 16px; font-size: 10px; letter-spacing: 2.2px; color: rgba(242,246,255,0.5); } .stats-band { position: relative; z-index: 10; display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px; background: rgba(242,246,255,0.1); border-top: 1px solid rgba(242,246,255,0.1); border-bottom: 1px solid rgba(242,246,255,0.1); } .stat-cell { display: flex; flex-direction: column; gap: 6px; padding: 18px 24px; background: #04050a; } .stat-cell:hover { background: #080a16; } .stat-cell .k { font-size: 9.5px; letter-spacing: 2.6px; color: rgba(242,246,255,0.42); } .stat-cell .v { font-size: 23px; font-weight: 500; letter-spacing: -0.6px; font-variant-numeric: tabular-nums; } .wall { position: relative; z-index: 10; padding: 104px 44px; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 60px; align-items: start; } .wall-copy { display: flex; flex-direction: column; gap: 22px; } .wall-copy .eyebrow { font-size: 10.5px; letter-spacing: 3px; color: var(--accent); } .wall-copy h2 { margin: 0; font-size: clamp(30px, 3.6vw, 54px); font-weight: 700; letter-spacing: -1.5px; line-height: 1; } .wall-copy .lead { margin: 0; max-width: 30em; font-size: 16.5px; line-height: 1.62; color: rgba(242,246,255,0.62); text-wrap: pretty; } .loop-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; border-top: 1px solid rgba(242,246,255,0.14); padding-top: 22px; } .loop-rule { display: flex; flex-direction: column; gap: 8px; } .loop-rule .n { font-size: 10px; letter-spacing: 2.4px; color: var(--accent); } .loop-rule .t { font-size: 18px; font-weight: 500; letter-spacing: -0.3px; } .loop-rule .b { font-size: 14.5px; line-height: 1.55; color: rgba(242,246,255,0.55); text-wrap: pretty; } .no-referral { margin: 4px 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(242,246,255,0.45); text-wrap: pretty; } .wall-list { border: 1px solid rgba(242,246,255,0.12); border-radius: 3px; overflow: hidden; } .wall-list .cap { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(242,246,255,0.12); font-size: 10px; letter-spacing: 2.4px; color: rgba(242,246,255,0.5); } .wall-list .cap .live { display: inline-flex; align-items: center; gap: 8px; } .wall-list .cap .live span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: mbBlink 2s ease-in-out infinite; } .wall-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid rgba(242,246,255,0.06); font-size: 11.5px; } .wall-row .tag { color: #F2F6FF; } .wall-row .via { font-size: 9.5px; letter-spacing: 1.8px; color: rgba(242,246,255,0.38); } .wall-row .blk { color: var(--accent); } .wall-foot { padding: 13px 18px; font-size: 9.5px; letter-spacing: 2.2px; color: rgba(242,246,255,0.34); } .honest { position: relative; z-index: 10; padding: 0 44px 110px; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 24px; } .honest-card { display: flex; flex-direction: column; gap: 18px; padding: 36px; border: 1px solid rgba(242,246,255,0.13); border-radius: 3px; } .honest-card .eyebrow { font-size: 10.5px; letter-spacing: 3px; color: var(--accent); } .honest-card h2 { margin: 0; font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.9px; line-height: 1.1; } .check-row { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(242,246,255,0.12); padding-top: 13px; font-size: 15.5px; color: rgba(242,246,255,0.72); } .check-row:hover { color: #F2F6FF; } .check-row .a { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: var(--accent); white-space: nowrap; } .risk { margin: 0; border-top: 1px solid rgba(242,246,255,0.12); padding-top: 13px; font-size: 15px; line-height: 1.55; color: rgba(242,246,255,0.6); text-wrap: pretty; } .col-gap { display: flex; flex-direction: column; gap: 14px; } .col-gap.tight { gap: 13px; } .site-note { position: relative; z-index: 10; padding: 0 44px 60px; max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; } .site-note .rule { border-top: 1px solid rgba(242,246,255,0.1); } .site-note .cols { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 28px; } .site-note p { margin: 0; max-width: 620px; font-size: 14.5px; line-height: 1.65; color: rgba(242,246,255,0.48); text-wrap: pretty; } .site-note .flinks { display: flex; flex-wrap: wrap; gap: 22px; font-size: 11px; letter-spacing: 2.4px; } .site-note .flinks a { color: rgba(242,246,255,0.55); } .site-note .flinks a:hover { color: #F2F6FF; } .arriving { position: fixed; right: 26px; bottom: 26px; z-index: 55; display: flex; align-items: center; gap: 1px; background: rgba(242,246,255,0.16); border-radius: 2px; overflow: hidden; font-size: 10px; letter-spacing: 2px; } .arriving .lbl { padding: 10px 12px; background: #06070f; color: rgba(242,246,255,0.4); } .arriving button { padding: 10px 14px; border: none; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; } .flash { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: var(--accent); opacity: 0; } @media (max-width: 640px) { .hero { padding: 40px 22px 64px; gap: 44px; } .wall, .honest { padding-left: 22px; padding-right: 22px; } .site-note { padding-left: 22px; padding-right: 22px; } .arriving { right: 12px; bottom: 12px; } } @media (prefers-reduced-motion: reduce) { .ring-spin, .sweep-line, .dot-pulse, .net-card .cap .live span, .wall-list .cap .live span { animation: none !important; } }</style></head><body><div class="bg-glow"></div><div class="bg-scan"></div><div class="wrap"> {% include "partials/mega_nav.html" %} <section class="hero"> <div class="hero-copy"> <div class="warm-banner mono" id="warmBanner" hidden> <span class="lbl"><span id="warmInviter"></span> SENT YOU A BLOCK</span> <div class="row"> <span class="blk" id="warmBlock"></span> <span>+10.00000000 MBITE</span> <a href="/explorer">VERIFY IT →</a> </div> </div> <h1 class="headline" id="headline">You can't buy MoonBite.</h1> <p class="subhead" id="subhead"></p> <div class="idle-block" id="idleBlock"> <button class="bite-btn" id="biteBtn" type="button">Take a bite<span class="arrow mono">↗</span></button> <span class="idle-note mono">FREE · NO WALLET · NO INSTALL · RUNS IN THIS TAB</span> <span class="idle-lineage mono" id="lineageNote">NO ACCOUNT · NOTHING TO SIGN</span> </div> <div class="mining-block" id="miningBlock" hidden> <div class="mining-head mono"> <span class="dot-pulse"></span> <span>HASHING · BROWSER DEMO ON TESTNET</span> </div> <div class="rate-row"> <span class="rate-num" id="rateNum">0</span> <span class="rate-unit mono">KH/S</span> </div> <div class="prog-wrap"> <div class="prog-labels mono"><span>WORK TOWARD YOUR BITE</span><span id="progLabel">0%</span></div> <div class="prog-bar"><div class="prog-fill" id="progFill"></div></div> <div class="prog-foot mono"><span id="hashesLabel">0 HASHES</span><a href="#stop" id="stopLink">STOP</a></div> </div> </div> <div class="found-block" id="foundBlock" hidden> <p>Nobody sold you that. Put your name on it, then send the receipt — whoever opens it lands on a page like this one, with your handle on the block.</p> <div class="claim"> <span class="lbl mono">CLAIM THE HANDLE ON YOUR BLOCK</span> <div class="claim-input"> <span class="at mono">@</span> <input id="handleInput" placeholder="yourhandle" autocomplete="off" spellcheck="false"> <button id="shareBtn" type="button" class="mono">COPY MY LINK</button> </div> <span class="verify mono" id="verifyUrl"></span> </div> <div class="found-cta"> <a href="/mine" class="real mono">NOW GET THE REAL MINER</a> <a href="#reset" id="resetLink" class="again mono">RUN IT AGAIN</a> </div> </div> </div> <div class="hero-side"> <div class="ring-graphic"> <div class="ring-spin" id="ringSpin"> <svg viewBox="-120 -120 240 240"> <circle cx="0" cy="0" r="110" fill="none" stroke="#F2F6FF" stroke-opacity="0.14" stroke-width="0.8" /> <circle cx="0" cy="0" r="116" fill="none" stroke="var(--accent)" stroke-opacity="0.36" stroke-width="1.2" stroke-dasharray="1.6 20" /> <g stroke="var(--accent)" stroke-opacity="0.75" stroke-width="2.6"><path d="M110 0 h9 M-110 0 h-9 M0 110 v9 M0 -110 v-9" /></g> </svg> </div> <div class="moon-mask"> <svg viewBox="-100 -100 200 200"> <mask id="mbHeroMask" maskUnits="userSpaceOnUse" x="-100" y="-100" width="200" height="200"> <rect x="-100" y="-100" width="200" height="200" fill="#fff" /> <circle id="chompCircle" cx="48" cy="-12" r="80" fill="#000" /> </mask> <g mask="url(#mbHeroMask)"> <circle cx="-5" cy="0" r="90" fill="var(--accent)" opacity="0.5" /> <circle cx="5" cy="0" r="90" fill="#5B7BFF" opacity="0.5" /> <circle cx="0" cy="0" r="90" fill="#F2F6FF" /> <circle cx="0" cy="0" r="60" fill="none" stroke="#04050a" stroke-opacity="0.13" stroke-width="1.4" /> <circle cx="-34" cy="-27" r="5" fill="#04050a" opacity="0.12" /> <circle cx="-15" cy="36" r="3.4" fill="#04050a" opacity="0.1" /> </g> </svg> <div class="sweep-line" id="sweepLine"></div> </div> </div> <div class="net-card"> <div class="cap mono"> <span class="live"><span></span><span id="cardTitle">NETWORK</span></span> <span id="cardMeta">TESTNET</span> </div> <div id="cardRows"></div> <div class="net-foot mono" id="cardFoot">SIMULATED FOR THIS DEMO · REAL DATA IN THE EXPLORER</div> </div> </div> </section> <div class="stats-band" id="statsBand"></div> <section class="wall" id="wall"> <div class="wall-copy"> <span class="eyebrow mono">THE WALL</span> <h2><span id="bitesTaken">1,284</span> bites taken. None of them bought.</h2> <p class="lead">Every line below is a block on the chain, so this list can't be padded, botted or paid for — appearing on it costs electricity. <span id="bitesLeft">851,116</span> blocks remain before the reward halves.</p> <div class="loop-rules"> <div class="loop-rule"><span class="n mono">01</span><span class="t">Claim</span><span class="b">Put a handle on the block you mined. It is yours because you did the work.</span></div> <div class="loop-rule"><span class="n mono">02</span><span class="t">Show</span><span class="b">Send the receipt. It links to the chain, so the proof travels with it.</span></div> <div class="loop-rule"><span class="n mono">03</span><span class="t">Bring</span><span class="b">Whoever mines after opening your link is stamped to you, permanently.</span></div> </div> <p class="no-referral">There is no referral payment and there never will be. Paying people to recruit fills a network with people who don't care — and looks exactly like the thing we're not. Lineage is public credit, nothing more.</p> </div> <div class="wall-list"> <div class="cap mono"> <span class="live"><span></span>MOST RECENT FIRST BITES</span> <span>BLOCK</span> </div> <div id="wallRows"></div> <div class="wall-foot mono">HANDLES ARE SELF-CLAIMED · BLOCKS ARE NOT</div> </div> </section> <section class="honest" id="honest"> <div class="honest-card"> <span class="eyebrow mono">BREAK OUR CLAIMS</span> <h2>Everything here is checkable in two clicks.</h2> <div class="col-gap"> <a class="check-row" href="/explorer"><span>Read block one and count the premine</span><span class="a">EXPLORER →</span></a> <a class="check-row" href="/about"><span>Diff the emission schedule against the chain</span><span class="a">SCHEDULE →</span></a> <a class="check-row" href="/developers"><span>Pull these numbers from the read-only API</span><span class="a">API →</span></a> </div> </div> <div class="honest-card"> <span class="eyebrow mono">THE HONEST HALF</span> <h2>What could go wrong, in our own words.</h2> <div class="col-gap tight"> <p class="risk">The network is small, and small networks are easier to attack than large ones.</p> <p class="risk">MBITE has no price because it has no market. It may never have one.</p> <p class="risk">Lose your keys and the coins are gone. We cannot recover them, and neither can anyone else.</p> <p class="risk">The roadmap is a plan, not a promise. Phase 3 has no date attached to it.</p> </div> </div> </section> <section class="site-note" aria-label="About this page"> <div class="rule"></div> <div class="cols"> <p>MoonBite mainnet is live and the project is open source. It is not an investment or a security, carries no promise of future value, and is not trading on any exchange. The in-page miner is a browser demonstration and does not mine real MBITE — for that, see /mine. Nothing here is a price prediction — only what you can verify today. No trackers, no ads.</p> <div class="flinks mono"> <a href="/mine">MINER</a> <a href="/get-wallet">WALLET</a> <a href="/explorer">EXPLORER</a> <a href="/developers">DOCS</a> </div> </div> </section> {% include "partials/site_footer.html" %} <div class="arriving mono"> <span class="lbl">ARRIVING AS</span> <button id="coldBtn" type="button">COLD</button> <button id="warmBtn" type="button">SHARED LINK</button> </div> <div class="flash" id="flash"></div></div><script nonce="{{ csp_nonce }}">(function () { "use strict"; var INVITER = "nocturne"; var DEMO_SPEED = 1; // 0.4–3; higher = faster demo var GENESIS_HEIGHT = 148920; var state = { view: "cold", mode: "idle", rate: 0, hashes: 0, progress: 0, height: GENESIS_HEIGHT, handle: "", copied: false, flash: 0, bite: 0 }; var $ = function (id) { return document.getElementById(id); }; function num(n) { return Math.round(n).toLocaleString("en-US"); } function inviterTag() { return "@" + INVITER; } function hashFor(h) { var x = (h * 2654435761) % 4294967296, out = ""; for (var i = 0; i < 3; i++) { x = (x * 1103515245 + 12345) % 4294967296; out += x.toString(16).padStart(8, "0").slice(0, 8); } return "0000" + out.slice(0, 12) + "…"; } var chompTimer = null, sweepReset = null, copyTimer = null, loop = null, chain = null, t0 = 0; function setChomp() { var c = $("chompCircle"); var name = (state.bite % 2 ? "mbChompA" : "mbChompB"); c.style.animation = "none"; // force reflow so re-adding the animation restarts it void c.getBBox; c.style.animation = name + " 0.5s cubic-bezier(0.3,0,0.2,1) both"; } function fireFlash() { var f = $("flash"); var name = (state.flash % 2 ? "mbInvertA" : "mbInvertB"); f.style.animation = "none"; void f.offsetWidth; f.style.animation = name + " 0.55s ease-out both"; } function render() { var s = state; var warm = s.view === "warm", mining = s.mode === "mining", found = s.mode === "found", idle = s.mode === "idle"; var inviter = inviterTag(); var tag = s.handle ? "@" + s.handle : "@you"; // headline + subhead $("headline").textContent = found ? "You took a bite." : mining ? "Work in progress." : warm ? "Now take yours." : "You can't buy MoonBite."; $("subhead").textContent = found ? "" : mining ? "Your tab is hashing against the network. A browser will not out-mine a real machine — this is the demonstration, not the competition." : warm ? inviter + " mined that block on hardware they own. Nobody sold it to them, and nobody can sell one to you — the only way in is to do the same. Start here, in this tab, for free." : "No listing, no presale, no allocation. Every MBITE in existence was mined — so we made it minable right here, in this tab."; // warm banner var wb = $("warmBanner"); if (warm) { wb.hidden = false; $("warmInviter").textContent = inviter; $("warmBlock").textContent = "#" + num(148912); } else { wb.hidden = true; } // hero state blocks $("idleBlock").hidden = !idle; $("miningBlock").hidden = !mining; $("foundBlock").hidden = !found; $("lineageNote").textContent = warm ? "YOUR BITE WILL BE STAMPED · BROUGHT BY " + inviter.toUpperCase() : "NO ACCOUNT · NOTHING TO SIGN"; // mining readouts $("rateNum").textContent = num(s.rate); $("progFill").style.width = Math.min(100, s.progress) + "%"; $("progLabel").textContent = Math.min(99, Math.floor(s.progress)) + "%"; $("hashesLabel").textContent = num(s.hashes) + " HASHES"; // found readouts var handleForUrl = num(s.height).replace(/,/g, ""); $("verifyUrl").textContent = "MOONBITE.ORG/BITE/" + handleForUrl + " · ANYONE CAN CHECK IT"; $("shareBtn").textContent = s.copied ? "COPIED " : "COPY MY LINK"; if ($("handleInput").value !== s.handle) $("handleInput").value = s.handle; // ring + sweep tempo $("ringSpin").style.animationDuration = mining ? "8s" : "48s"; var sweep = $("sweepLine"); sweep.style.animationDuration = mining ? "0.9s" : "4.8s"; sweep.style.opacity = mining ? "0.95" : "0.28"; // network / receipt card $("cardTitle").textContent = found ? "YOUR RECEIPT" : "NETWORK"; $("cardMeta").textContent = found ? "SHAREABLE" : "TESTNET"; $("cardFoot").textContent = found ? "THIS IS THE PAGE THEY LAND ON WHEN YOU SEND IT" : "SIMULATED FOR THIS DEMO · REAL DATA IN THE EXPLORER"; var rows = found ? [ { k: "BLOCK", v: "#" + num(s.height), color: "#F2F6FF" }, { k: "REWARD", v: "+10.00000000", color: "var(--accent)" }, { k: "HASH", v: hashFor(s.height), color: "rgba(242,246,255,0.72)" }, { k: "MINED BY", v: tag, color: "rgba(242,246,255,0.72)" }, { k: "BROUGHT BY", v: warm ? inviter : "came in cold", color: "rgba(242,246,255,0.72)" } ] : [ { k: "HEIGHT", v: num(s.height), color: "#F2F6FF" }, { k: "PREMINE", v: "0", color: "var(--accent)" }, { k: "NEXT BLOCK IN", v: "~2 min", color: "rgba(242,246,255,0.72)" }, { k: "REWARD", v: "10 MBITE", color: "rgba(242,246,255,0.72)" } ]; var cardHtml = ""; for (var i = 0; i < rows.length; i++) { cardHtml += '<div class="net-row mono"><span class="k">' + rows[i].k + '</span><span style="color:' + rows[i].color + '">' + rows[i].v + "</span></div>"; } $("cardRows").innerHTML = cardHtml; // stats band var stats = [ { label: "BLOCK HEIGHT", value: num(s.height) }, { label: "PREMINE", value: "0" }, { label: "MAX SUPPLY", value: "~33,000,000" }, { label: "BLOCK TIME", value: "2 min" } ]; var sb = ""; for (var j = 0; j < stats.length; j++) { sb += '<a class="stat-cell" href="/explorer"><span class="k mono">' + stats[j].label + '</span><span class="v">' + stats[j].value + "</span></a>"; } $("statsBand").innerHTML = sb; // wall counters $("bitesTaken").textContent = num(1284 + Math.floor((s.height - GENESIS_HEIGHT) / 3) + (found ? 1 : 0)); $("bitesLeft").textContent = num(851116 - (s.height - GENESIS_HEIGHT)); // wall list var wall = (found ? [{ tag: tag, block: num(s.height), via: warm ? "brought by " + inviter : "came in cold", bg: "rgba(95,233,208,0.07)" }] : []).concat([ { tag: "@rk_idlebox", block: num(s.height - 5), via: "brought by @nocturne", bg: "transparent" }, { tag: "@nocturne", block: num(148912), via: "brought by @sedna_ops", bg: "transparent" }, { tag: "@sedna_ops", block: num(148897), via: "came in cold", bg: "transparent" }, { tag: "@atticfarm", block: num(148885), via: "brought by @rk_idlebox", bg: "transparent" } ]); var wh = ""; for (var k = 0; k < wall.length; k++) { wh += '<div class="wall-row" style="background:' + wall[k].bg + '"><span style="display:flex;flex-direction:column;gap:5px">' + '<span class="tag">' + wall[k].tag + '</span><span class="via">' + wall[k].via + "</span></span>" + '<span class="blk">#' + wall[k].block + "</span></div>"; } $("wallRows").innerHTML = wh; // arriving toggle colors var accent = getComputedStyle(document.documentElement).getPropertyValue("--accent").trim() || "#5FE9D0"; $("coldBtn").style.background = warm ? "#06070f" : accent; $("coldBtn").style.color = warm ? "rgba(242,246,255,0.6)" : "#04050a"; $("warmBtn").style.background = warm ? accent : "#06070f"; $("warmBtn").style.color = warm ? "#04050a" : "rgba(242,246,255,0.6)"; } function start() { clearInterval(loop); var target = 8000 / DEMO_SPEED; t0 = Date.now(); state.mode = "mining"; state.rate = 0; state.hashes = 0; state.progress = 0; render(); loop = setInterval(function () { if (state.mode !== "mining") return; var el = Date.now() - t0; var rate = 412 * (1 - Math.exp(-el / 1400)); var progress = (el / target) * 100; var hashes = Math.round((el / 1000) * rate * 1000); if (progress >= 100) { clearInterval(loop); state.mode = "found"; state.progress = 100; state.rate = rate; state.hashes = hashes; state.flash += 1; state.bite += 1; state.height += 1; render(); setChomp(); fireFlash(); return; } state.rate = rate; state.progress = progress; state.hashes = hashes; render(); }, 220); } function stop() { clearInterval(loop); state.mode = "idle"; state.progress = 0; state.rate = 0; render(); } function reset() { clearInterval(loop); state.mode = "idle"; state.progress = 0; state.rate = 0; state.handle = ""; render(); } // wiring $("biteBtn").addEventListener("click", start); $("stopLink").addEventListener("click", function (e) { e.preventDefault(); stop(); }); $("resetLink").addEventListener("click", function (e) { e.preventDefault(); reset(); }); $("handleInput").addEventListener("input", function (e) { state.handle = e.target.value.replace(/[^a-zA-Z0-9_]/g, "").slice(0, 16); render(); }); $("shareBtn").addEventListener("click", function () { var url = "moonbite.org/bite/" + num(state.height).replace(/,/g, ""); if (navigator.clipboard) navigator.clipboard.writeText(url).catch(function () {}); state.copied = true; render(); clearTimeout(copyTimer); copyTimer = setTimeout(function () { state.copied = false; render(); }, 2200); }); $("coldBtn").addEventListener("click", function () { state.view = "cold"; state.mode = "idle"; state.progress = 0; render(); }); $("warmBtn").addEventListener("click", function () { state.view = "warm"; state.mode = "idle"; state.progress = 0; render(); }); // a shared link (?from=handle) arrives "warm" var params = new URLSearchParams(location.search); var from = params.get("from"); if (from) { INVITER = from.replace(/[^a-zA-Z0-9_]/g, "").slice(0, 16) || INVITER; state.view = "warm"; } // the chain advances on its own, like a live tip chain = setInterval(function () { state.height += 1; render(); }, 9000); // ---------- mega-nav dropdowns (same behaviour as site.js on every other page) ---------- var navItems = Array.prototype.slice.call(document.querySelectorAll(".mb-nav-item")); function closeAllDropdowns() { navItems.forEach(function (i) { i.classList.remove("is-open"); }); } navItems.forEach(function (item) { var trigger = item.querySelector(".mb-nav-trigger"); if (!trigger || !item.querySelector(".mb-dropdown")) return; trigger.addEventListener("click", function (e) { e.preventDefault(); var wasOpen = item.classList.contains("is-open"); closeAllDropdowns(); if (!wasOpen) item.classList.add("is-open"); }); }); var hamburger = document.querySelector(".mb-hamburger"); var sheet = document.querySelector(".mb-mobile-sheet"); var sheetClose = document.querySelector(".mb-mobile-close"); function openMobileSheet() { if (sheet) { sheet.classList.add("is-open"); document.body.style.overflow = "hidden"; } } function closeMobileSheet() { if (sheet) { sheet.classList.remove("is-open"); document.body.style.overflow = ""; } } if (hamburger) hamburger.addEventListener("click", openMobileSheet); if (sheetClose) sheetClose.addEventListener("click", closeMobileSheet); document.querySelectorAll(".mb-mobile-group > button").forEach(function (btn) { btn.addEventListener("click", function () { btn.parentElement.classList.toggle("is-open"); }); }); document.querySelectorAll(".mb-mobile-links a").forEach(function (a) { a.addEventListener("click", closeMobileSheet); }); document.addEventListener("click", function (e) { if (!e.target.closest(".mb-nav-item")) closeAllDropdowns(); }); document.addEventListener("keydown", function (e) { if (e.key === "Escape") { closeAllDropdowns(); closeMobileSheet(); } }); render();})();</script></body></html>