diggr. ← Back to docs index

diggr. Landing Page — Section-by-Section Rebuild Spec

Source files: /tmp/landing_body.html (~125 KB body), /tmp/landing.css (~80 KB). Goal: Reproduce 1:1 in React + TypeScript + Tailwind.

0. Global Design Tokens

Colors (from CSS)

Token Value Usage
bg-base #05060e Page background
bg-card rgba(8,9,18,.92) / #0c0e1a Cards / modals
bg-card-deep rgba(2,3,8,.55-.85) Inputs, terminal bg
text-100 #f1f5f9 Headings
text-200 #e2e8f0 Body strong
text-300 #cbd5e1 Body
text-muted #94a3b8 / #64748b Captions
text-dim #475569 Labels
text-faint #334155 / #1e293b Hints
accent-blue #60a5fa / #3b82f6 Primary brand
accent-blue-light #7dd3fc / #93c5fd / #bfdbfe Hover/glow
accent-cyan #22d3ee Terminal / scan
accent-gold #fbbf24 / #fde68a / #fef3c7 $DIGGR token
accent-amber #f59e0b / #d97706 / #fde047 Airdrop / referral
accent-purple #c084fc / #a855f7 Solana chain badge
success #22c55e / #4ade80 PnL+ / done
danger #ef4444 / #f87171 / #fca5a5 PnL- / errors
term-mac-r #ff5f57 Terminal red dot
term-mac-y #ffbd2e Terminal yellow dot
term-mac-g #28c840 Terminal green dot

Fonts

Common patterns

Global structure

<body>
  <div id="wc-modal">...</div>          <!-- Wallet Connect modal -->
  <div id="refer-modal">...</div>       <!-- Refer a Friend modal -->
  <div id="loader"><canvas id="lc"/></div>  <!-- Boot animation -->
  <canvas id="bgc"></canvas>          <!-- Animated background sphere -->
  <div id="site">
    <header id="hdr">...</header>
    <main>
      <section id="hero">...</section>
      <section id="sph"></section>    <!-- 22vh spacer for bg sphere -->
      <section id="stats">...</section>
      <section id="tool">...</section>           <!-- Wallet Finder -->
      <section id="tracker">...</section>        <!-- Wallet Tracker -->
      <section id="terminal">...</section>       <!-- Live Buy Alerts -->
      <section id="token">...</section>          <!-- DIGGR Token / Insider -->
      <section id="pkg">...</section>            <!-- Pricing -->
      <section id="whitepaper">...</section>
      <section id="contact">...</section>
    </main>
    <footer>(c) 2025 diggr. -- On-chain intelligence. All rights reserved.</footer>
  </div>
  <script>...</script>  <!-- ~6 inline script blocks, see section 17 -->
</body>

#site starts with opacity:0 and gets .show added once the loader finishes; transitions to opacity:1.

1. Loader -- Full-screen sphere assembly

ID/class: #loader > #lc (canvas). Position: fixed inset-0 z-[9999], bg #05060e. Behavior:

Rebuild: pure canvas component, no DOM children other than the canvas.

2. Animated Background -- Continuous sphere

ID: #bgc (canvas), position:fixed;inset:0;z-index:0;pointer-events:none. Behavior:

Rebuild: ClientOnly canvas, with mousemove + scroll listeners.

3. Header / Navigation

ID: #hdr (element <header>). Class behaviour: gains .sc class when window.scrollY > 40 (adds blur background + bottom border).

Layout: fixed top, padding:1.2rem 3rem, flex justify-between. Background: linear-gradient(to bottom,rgba(5,6,14,.97),transparent) (transitions to rgba(5,6,14,.96) + backdrop-filter:blur(20px) when .sc).

<header id="hdr">
  <a href="#" class="logo">diggr<span>.</span></a>
  <nav>
    <a href="#pkg">Packages</a>
    <a href="#whitepaper">Whitepaper</a>
    <a href="#contact">Contact</a>
    <button class="refer-btn airdrop-btn" onclick="...refer-modal open...">
      <svg>...airdrop icon...</svg>
      $DIGGR AIRDROP
    </button>
    <button class="wc-btn" id="wc-trigger" onclick="openWcModal()">
      <svg>...wallet rect icon...</svg>
      Connect Wallet
    </button>
  </nav>
</header>

Texts (exhaustive, exact wording):

Interactivity:

4. Wallet Connect Modal

ID: #wc-modal (root <div> covering viewport, display:none until .open). Backdrop: rgba(2,3,10,.82) + backdrop-filter:blur(10px), click-outside to close.

<div id="wc-modal">
  <div class="wc-modal-box">       <!-- 340px wide, bg #0c0e1a, radius 14px -->
    <button class="wc-close">x</button>
    <div class="wc-modal-title">Connect Wallet</div>
    <div class="wc-modal-sub" id="wc-status">Choose your wallet to continue.</div>

    <div class="wc-option" id="opt-metamask" onclick="connectMetaMask()">
      <div class="wc-wallet-icon" style="background:linear-gradient(135deg,#f6851b,#e2761b)">[fox]</div>
      <div>
        <span class="wc-wallet-name">MetaMask</span>
        <span class="wc-wallet-desc">EVM chains - Browser Extension</span>
      </div>
      <span class="wc-arrow" id="arr-metamask">></span>
    </div>

    <div class="wc-option" id="opt-phantom" onclick="connectPhantom()">
      <div class="wc-wallet-icon" style="background:linear-gradient(135deg,#ab9ff2,#5c4cc4)">[ghost]</div>
      <div>
        <span class="wc-wallet-name">Phantom</span>
        <span class="wc-wallet-desc">Solana - Browser Extension</span>
      </div>
      <span class="wc-arrow" id="arr-phantom">></span>
    </div>

    <div class="wc-option" onclick="connectMetaMask()">
      <div class="wc-wallet-icon" style="background:linear-gradient(135deg,#3375bb,#1a4f8a)">[shield]</div>
      <div>
        <span class="wc-wallet-name">Trust Wallet</span>
        <span class="wc-wallet-desc">Multi-chain - Mobile & Extension</span>
      </div>
      <span class="wc-arrow">></span>
    </div>
  </div>
</div>

(Note: original uses Unicode emojis 🦊 👻 🛡️ inside the wallet-icon divs and a "›" arrow.)

Status messages (#wc-status, color #475569 normal / #ef4444 error):

Loading state: > arrow -> ... while connecting.

EVM chain names (from connectMetaMask):

Known referenced (but absent in initial HTML): #wc-connected-panel, #wc-full-addr, #wc-network-badge -- referenced in onConnected(). Add a connected state panel inside the modal box.

5. Refer a Friend Modal

ID: #refer-modal (380px box, same style as wc-modal).

<div id="refer-modal">
  <div class="refer-box">
    <button class="wc-close">x</button>
    <div class="refer-title">Refer a Friend</div>
    <div class="refer-sub">Share your link. Earn rewards for every friend who subscribes.</div>
    <div class="refer-link-wrap">
      <input class="refer-link-inp" id="refer-inp" readonly value="https://diggr.io/ref/YOUR_CODE">
      <button class="refer-copy" onclick="copyRefer()">Copy</button>
    </div>
    <div class="refer-stats">
      <div class="refer-stat">
        <span class="refer-stat-val">0</span>
        <span class="refer-stat-lbl">Referrals</span>
      </div>
      <div class="refer-stat">
        <span class="refer-stat-val">$0</span>
        <span class="refer-stat-lbl">Earned</span>
      </div>
    </div>
  </div>
</div>

Interactivity: Copy button -> Copied! (green) for 1.8 s, then back to Copy.

6. Hero Section (#hero)

Layout: flex centered, padding:7rem 2rem 3rem, text-align:center, position:relative.

<section id="hero" style="position:relative">
  <div>
    <div class="ht">diggr<span>.</span></div>
    <p class="hsl" id="hsl"
       data-final="The Ultimate Wallet Finder. Track and Follow the smart money."></p>
    <p class="hd">DIGGR is a tool and a Telegram bot that <strong>identifies wallets</strong>
       by cross-referencing multiple contracts they've traded. It scans the blockchain to
       <strong>find and track specific wallets</strong>. Find any wallet using the right data.</p>
    <div class="hsty">
      <p>-- Cross-chain analysis <span>-</span> Real-time wallet tracking</p>
      <p>-- Cross-reference contracts to identify wallets</p>
      <p>-- Find, save & organise precise wallets</p>
      <p>-- Analyse their performance in real time</p>
      <p>-- Set alerts by tracking them</p>
      <p>-- Copy-trade your favourite wallets</p>
    </div>
    <div class="ctas">
      <div class="ctas-row ctas-row-2">
        <a href="#tool" class="bu"><svg>...search ico...</svg><span>Try diggr.</span></a>
        <a href="#pkg"  class="bu"><svg>...packages ico...</svg><span>View Packages</span></a>
      </div>
      <a href="#whitepaper" class="bu bu-wide">
        <svg>...doc ico...</svg>
        <span>Whitepaper v1.0 - Architecture & Roadmap</span>
      </a>
      <a href="#token" class="bu bu-wide bu-token">
        <span class="bu-token-pulse"></span>
        <svg>...coin ico...</svg>
        <span>$DIGGR -- Airdrop and Token Sale</span>
        <span class="bu-token-badge">Soon</span>
      </a>
    </div>
  </div>
</section>

(In the original, the dash separators are actual em-dashes "—" and the bullet is "·"; preserve these exact characters when rebuilding.)

Typography:

Subtitle reveal animation: The id="hsl" paragraph uses data-final text. JS scrambles random glyphs (!<>-_\/[]{}=+*^?#@$%&0-9A-F) and reveals each character over 14ms staggered + 180-320ms duration. Once done, the substring smart money gets wrapped in a <span class="glitch" data-text="smart money"> with TV-bug glitch animation (RGB split via ::before red #ff2d55 and ::after cyan #00e0ff, scanline .scan overlay, every 2.4s).

Buttons (.bu):

Texts (verbatim, with the original em-dashes):

7. Sphere Spacer (#sph)

Empty section, height:22vh; min-height:170px. Only there to give the background canvas sphere visual room. No DOM children.

8. Stats Counter (#stats)

Layout: max-width:1100px, grid of 4 cards (repeat(4,1fr), gap 1rem) on desktop, 2 cols <=900px, 1 col <=480px.

<section id="stats">
  <div class="stats-grid fu">
    <div class="stat-card">
      <div class="stat-label">Users</div>
      <div class="stat-value" data-count="98">0</div>
      <div class="stat-caption">Diggr Users</div>
      <div class="stat-trend"><svg>...trend ico...</svg>Live</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Contracts</div>
      <div class="stat-value" data-count="12847">0</div>
      <div class="stat-caption">Contracts Scanned</div>
      <div class="stat-trend"><svg/>+12.4% / 7d</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Intelligence</div>
      <div class="stat-value" data-count="12630023">0</div>
      <div class="stat-caption">Wallets Analyzed</div>
      <div class="stat-trend"><svg/>+8.1% / 7d</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">Saved</div>
      <div class="stat-value" data-count="341">0</div>
      <div class="stat-caption">Wallets Saved</div>
      <div class="stat-trend neu"><svg>...dot ico...</svg>Tracked</div>
    </div>
  </div>
</section>

Card style: linear-gradient(180deg,rgba(10,12,22,.86),rgba(8,9,18,.86)), blue accent gradient on top, hover translateY(-4px) + radial glow. Label: tiny mono uppercase .58rem + 4px #60a5fa dot with glow. Value: Space Mono clamp(1.4rem, 2.6vw, 2rem), gradient text linear-gradient(180deg,#f1f5f9,#93c5fd) clipped. Trend: .stat-trend green #22c55e (default) or .neu blue #60a5fa.

Animation (runCounter): When the card enters viewport (threshold 0.3), the .stat-value rolls up from 0 to data-count over 2000ms (or 2400ms if >1M), eased cubic-out, formatted toLocaleString('en-US').

Texts: Users / Diggr Users / Live // Contracts / Contracts Scanned / +12.4% / 7d // Intelligence / Wallets Analyzed / +8.1% / 7d // Saved / Wallets Saved / Tracked.

9. Multi-Chain Wallet Finder (#tool)

Layout: max-width:1180px, header on top, then a 2-column grid tool-grid (left = inputs panel, right = scan terminal).

9.1 Section header

<div class="fu tool-head">
  <div class="slbl">Wallet Finder</div>
  <h2 class="stit">Multi-Chain Contract Wallet Finder</h2>
  <p class="ssub">Collect between 3 and 16 contract addresses. Diggr will analyze the data
     of holders and traders who have interacted with these contracts and identify overlaps.<br><br>
     You have two options: <strong>EVM</strong> or <strong>Solana</strong>. Do not mix Solana
     contracts with EVM. However, you can combine contracts from Ethereum, BSC, and Base if you
     believe the target wallet has a multichain portfolio.</p>
</div>

(.tool-head .stit and .ssub are left-aligned, max-width 760px on the description.)

9.2 Telegram CTA (above grid)

<a href="https://t.me/DIGGRBOT" target="_blank" class="tgbtn tgbtn-finder fu">
  <svg class="tgbtn-ico">...tg planet...</svg>
  <span class="tgbtn-pulse"></span>
  <span>Open @DIGGRBOT on Telegram</span>
  <svg class="tgbtn-arrow">-></svg>
</a>

.tgbtn style: full-width, linear-gradient(135deg,rgba(8,18,40,.9),rgba(34,158,217,.55)), border rgba(34,158,217,.35), color #e0f2fe. Pulse dot is green #22c55e with shadow ring animation tgPulse 1.8s.

9.3 Left panel -- Contract inputs (.tcard)

<div class="tcard fu">
  <div class="thead" style="justify-content:space-between">
    <div style="display:flex;align-items:center;gap:.65rem">
      <svg>...search ico...</svg>
      <span>Contract Addresses</span>
    </div>
    <div class="chain-toggle" id="chain-toggle">
      <button class="ctbtn active" data-chain="EVM" onclick="setChain('EVM',this)">EVM</button>
      <button class="ctbtn"        data-chain="SOL" onclick="setChain('SOL',this)">SOL</button>
    </div>
  </div>

  <div class="clist" id="clist"><!-- rows added by JS --></div>

  <div class="addrow" id="addrow">
    <button class="addbtn" id="addbtn">+</button>
    <span class="addlbl">Add contract address</span>
    <span class="addlim" id="addlim">5 / 16</span>
  </div>

  <button class="lbtn" id="lbtn">
    <span class="bi"><svg>...search ico...</svg>Launch diggr.</span>
  </button>

  <!-- Rotating tips with progress bar -->
  <div id="diggr-tips" style="margin-top:1.1rem;background:rgba(96,165,250,.045);
       border:1px solid rgba(96,165,250,.14);border-radius:8px;padding:.9rem 1rem .75rem;position:relative">
    <div style="height:2px;background:rgba(96,165,250,.12);border-radius:2px;overflow:hidden;margin-bottom:.75rem">
      <div id="tip-bar" style="height:100%;width:0%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:2px"></div>
    </div>
    <div style="display:flex;align-items:flex-start;gap:.7rem">
      <span id="tip-icon" style="font-size:.9rem">[bulb]</span>
      <p id="tip-text" style="font-family:'Space Mono',monospace;font-size:.67rem;color:#64748b;line-height:1.65"></p>
    </div>
    <div id="tip-dots" style="display:flex;gap:.35rem;margin-top:.65rem;justify-content:center"></div>
  </div>
</div>

Behavior:

Tips list (TIPS array, rotated every 6500ms) -- exact strings (emojis preserved in original):

  1. (bulb) Contracts with a low holder count give better and faster results.
  2. (calendar) Use recent data. Contracts traded less than 1-2 months ago work best.
  3. (mag) Start with 3-4 contracts first, then add more one by one to improve results.
  4. (timer) Processing time varies depending on the holder count of each contract.
  5. (robot) 95%+ of bots are automatically filtered out by DIGGR.
  6. (link) Always verify on a Blockchain Explorer to confirm you found the right wallets.
  7. (lightning) More contracts != better results. Quality data beats quantity every time.

(In the source the bolded fragments are in <b style="color:#93c5fd;font-weight:700">...</b>. Original uses real emojis: 💡 📅 🔍 ⏱ 🤖 🔗 ⚡.)

The progress bar fills 0->100% over 6.5 s, then advances to next tip. Dots act as nav dots (active = #60a5fa, inactive = rgba(96,165,250,.2)).

9.4 Right panel -- Traders Overlap Summary (terminal)

<div class="tcard tos-card fu">
  <div class="thead tos-head">
    <div class="tos-head-left">
      <div class="tos-dots">
        <span class="tos-dot tos-r"></span>   <!-- #ef4444 -->
        <span class="tos-dot tos-y"></span>   <!-- #eab308 -->
        <span class="tos-dot tos-g"></span>   <!-- #22c55e -->
      </div>
      <span class="tos-title">Traders Overlap Summary</span>
    </div>
    <span class="tos-status" id="tos-status">
      <span class="tos-status-dot"></span>
      <span id="tos-status-text">Idle</span>
    </span>
  </div>

  <div class="tos-body" id="tos-body">
    <div class="tos-empty" id="tos-empty">
      <svg class="tos-empty-ico">...search ico...</svg>
      <div class="tos-empty-title">Awaiting Scan</div>
      <div class="tos-empty-sub">Add 3 to 16 contract addresses<br>and launch a dig to see overlap results here.</div>
    </div>
  </div>

  <div class="tos-foot">
    <span class="tos-foot-label">$ diggr</span>
    <span class="tos-foot-cmd" id="tos-foot-cmd">awaiting input...</span>
    <span class="tos-cursor"></span>
  </div>
</div>

Style:

Scan output lines (rendered by runTosScan(addresses)):

(Original uses real Unicode arrows, em-dashes and middle-dots; the rebuild should preserve them exactly: › → · ─ ✓.)

10. Wallet Tracker (#tracker) -- Coming Soon

Layout: max-width:1100px. Grid tracker-grid 2-col (1fr / 360px) -> stacks <=900px.

10.1 Header

<div class="fu">
  <div class="slbl">Wallet Intelligence
    <span class="cs-badge">Coming Soon</span>
  </div>
  <h2 class="stit">Wallet Tracker</h2>
  <p class="ssub">Track wallets in real time with live PnL, win rate, and instant alerts.<br>
     Save and organize your favorite wallets, analyze their performance, and identify top traders.<br>
     Use the live buy alerts terminal to get real-time market signals and set custom parameters
     to automatically buy or sell any token.</p>
</div>

.cs-badge = "Coming Soon" amber pill (#f59e0b, bg rgba(245,158,11,.06), border .22).

10.2 Left column -- Track / Save inputs + scanned wallets

<div class="tracker-left">
  <div class="winp-wrap">
    <input class="winp" id="winp-track" placeholder="Paste a wallet address  0x..." maxlength=64 />
    <button class="wtrk-btn" id="wtrk-btn-track" onclick="handleTrackWallet()">+ Track</button>
  </div>
  <div class="winp-wrap">
    <input class="winp" id="winp-save" placeholder="Save a wallet address  0x..." maxlength=64 />
    <button class="wtrk-btn wtrk-btn-save" id="wtrk-btn-save" onclick="handleSaveWallet()">+ Save</button>
  </div>

  <div style="font-family:'Space Mono',monospace;font-size:.58rem;letter-spacing:.16em;
       text-transform:uppercase;color:#334155;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem">
    <span style="width:10px;height:1px;background:#334155;display:inline-block"></span>
    Last Wallets Scanned
  </div>

  <!-- Wallet entry 1 (full opacity) -->
  <div class="wentry">
    <div class="wentry-head">
      <span class="waddr">0x4f3a...c8d1</span>
      <span class="wtracking"><span class="wtracking-dot"></span>Tracking</span>
    </div>
    <div class="wpnl">
      <div class="wpnl-item"><span class="wpnl-period">1D</span><span class="wpnl-val pos">+$342</span></div>
      <div class="wpnl-item"><span class="wpnl-period active">7D</span><span class="wpnl-val pos">+$1,780</span></div>
      <div class="wpnl-item"><span class="wpnl-period">30D</span><span class="wpnl-val pos">+$8,420</span></div>
      <div class="wpnl-item"><span class="wpnl-period">1M</span><span class="wpnl-val pos">+$8,420</span></div>
    </div>
    <div class="wstats">
      <span class="wwr">81% WIN RATE</span>
      <span class="wcnt"><span>142</span> people tracking</span>
    </div>
  </div>

  <!-- Wallet entry 2 (opacity .45, mixed PnL) -->
  <div class="wentry" style="opacity:.45">
    <div class="wentry-head">
      <span class="waddr">0x7b2e...f190</span>
      <span class="wtracking"><span class="wtracking-dot"></span>Tracking</span>
    </div>
    <div class="wpnl">
      <div class="wpnl-item"><span class="wpnl-period">1D</span><span class="wpnl-val neg">-$88</span></div>
      <div class="wpnl-item"><span class="wpnl-period active">7D</span><span class="wpnl-val pos">+$560</span></div>
      <div class="wpnl-item"><span class="wpnl-period">30D</span><span class="wpnl-val pos">+$3,210</span></div>
      <div class="wpnl-item"><span class="wpnl-period">1M</span><span class="wpnl-val pos">+$3,210</span></div>
    </div>
    <div class="wstats">
      <span class="wwr" style="color:#f59e0b">67% WIN RATE</span>
      <span class="wcnt"><span>58</span> people tracking</span>
    </div>
  </div>
</div>

(Original uses Unicode "..." in addresses ("0x4f3a…c8d1") and "−$88" minus sign.)

Track button (.wtrk-btn): blue bg:rgba(59,130,246,.12);border:rgba(59,130,246,.25);color:#60a5fa. Hover deeper. Save button (.wtrk-btn-save): amber bg:rgba(245,158,11,.10);border:rgba(245,158,11,.28);color:#fbbf24.

Validation (handleTrackWallet/handleSaveWallet):

Status colors per entry:

10.3 Right column -- Saved wallets card

<div class="tracker-right">
  <div class="wsaved-card">
    <div class="wsaved-title">Wallets Saved</div>

    <div class="wentry" style="margin-bottom:.5rem">
      <div class="wentry-head" style="margin-bottom:.35rem">
        <span style="display:flex;align-items:center;gap:.4rem">
          <span class="waddr">0x4f3a...c8d1</span>
          <svg width="11" height="11" fill="#f59e0b" stroke="#f59e0b">...star polygon...</svg>
        </span>
        <span class="wtracking"><span class="wtracking-dot"></span>Live</span>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center">
        <span class="wpnl-val pos" style="font-family:'Space Mono';font-size:.8rem">+$1,780</span>
        <span style="font-family:'Space Mono';font-size:.58rem;color:#22c55e">7D</span>
      </div>
      <div class="wstats" style="margin-top:.35rem">
        <span class="wwr">81% WIN RATE</span>
        <span class="wcnt"><span>142</span> tracking</span>
      </div>
    </div>

    <div class="wentry" style="margin-bottom:.5rem;opacity:.5">
      <!-- same shape, addr 0x7b2e...f190, +$560, 67% WIN RATE amber, 58 tracking -->
    </div>

    <div class="wsaved-footer">
      <button class="wsaved-btn">View All Saved Wallets -></button>
    </div>
  </div>
</div>

(Original uses → arrow.)

.wsaved-card: standard card (bg rgba(8,9,18,.92), blue accent gradient on top, padding 1.3rem).

11. Live Buy Alerts Terminal (#terminal)

Layout: max-width:1100px. The card is split into a 2-col layout term-layout (1fr terminal stream / 220px quick buy panel). Stacks <=900px.

<section id="terminal">
  <div class="term-card fu">
    <div class="term-header">
      <div class="term-dots">
        <div class="term-dot r"></div>   <!-- #ff5f57 -->
        <div class="term-dot y"></div>   <!-- #ffbd2e -->
        <div class="term-dot g"></div>   <!-- #28c840 -->
      </div>
      <span class="term-title">Live Buy Alerts -- Tracked Wallets</span>
      <span class="term-live">Live</span>   <!-- green dot blinking -->
    </div>
    <div class="term-layout">
      <div class="term-body-wrap">
        <div class="term-body" id="term-body"><!-- streamed lines --></div>
      </div>
      <!-- Quick Buy Panel -->
      <div class="qbuy-panel">
        <div class="qbuy-title">[lightning] Quick Buy Settings</div>

        <div>
          <div class="qbuy-label" style="margin-bottom:.35rem">Chain</div>
          <div class="qbuy-chain-row" id="qbuy-chains">
            <button class="qbuy-chain active" onclick="selectQChain('ETH',this)">ETH</button>
            <button class="qbuy-chain"        onclick="selectQChain('BSC',this)">BNB</button>
            <button class="qbuy-chain"        onclick="selectQChain('BASE',this)">BASE</button>
            <button class="qbuy-chain"        onclick="selectQChain('SOL',this)">SOL</button>
          </div>
        </div>

        <div class="qbuy-amount-wrap">
          <div class="qbuy-label">Amount</div>
          <div class="qbuy-presets" id="qbuy-presets">
            <button class="qbuy-preset" onclick="setPreset(this,'0.05')">0.05</button>
            <button class="qbuy-preset" onclick="setPreset(this,'0.1')">0.1</button>
            <button class="qbuy-preset" onclick="setPreset(this,'0.5')">0.5</button>
            <button class="qbuy-preset" onclick="setPreset(this,'1')">1</button>
          </div>
          <div class="qbuy-custom-wrap">
            <input class="qbuy-custom" id="qbuy-inp" type="number" placeholder="Custom"
                   step="0.01" min="0" value="0.1">
            <span class="qbuy-unit" id="qbuy-unit">ETH</span>
          </div>
        </div>

        <button class="qbuy-btn" onclick="execQuickBuy()">> Buy Now</button>
        <div class="qbuy-disclaimer">Connect wallet to enable live trades. Demo mode active.</div>
      </div>
    </div>
  </div>
</section>

(Original strings: title ⚡ Quick Buy Settings, button label ▶ Buy Now, header title Live Buy Alerts — Tracked Wallets.)

Quick Buy data:

Terminal log row template (per entry, rendered into #term-body):

<div class="tlog buy">   <!-- or .sell -->
  <span class="tlog-time">[13:42:11]</span>
  <span class="tlog-wallet">0x4f3a...c8d1</span>
  <span class="tlog-action">
    <span style="font-size:.54rem;padding:.1rem .35rem;border-radius:2px;
                 background:rgba(148,163,184,.1);color:#64748b">ETH</span>
    BUY <strong style="color:#e2e8f0">4.2M PEPE</strong>
  </span>
  <span class="tlog-amount">+$1,420</span>
  <button class="tlog-buybtn" onclick="quickBuyFromLog(this,'PEPE','ETH')">Buy</button>
</div>

Seed entries (8) -- exact:

time wallet type token chain amount usd
13:42:11 0x4f3a...c8d1 buy PEPE ETH 4.2M $1,420
13:43:08 DRpb...K7mQ buy WIF SOL 8.8K $642
13:44:55 0x7b2e...f190 sell SHIB BSC 58M -$310
13:45:22 7xFJ...nT2r buy BONK SOL 9.2M $188
13:46:01 0x9c1d...a402 buy BRETT BASE 124K $820
13:46:48 0x4f3a...c8d1 buy MOG ETH 520K $295
13:47:15 Gh4M...WqLv buy POPCAT SOL 3.3K $1,180
13:47:52 0xf8c0...4512 sell FLOKI BSC 2.8M -$440

Live alerts loop -- pushes a new row every 1200-5000ms.

Per-row "Buy" button: small green pill .tlog-buybtn (color #22c55e, bg rgba(34,197,94,.08)). On click -> ... 900ms -> [check] and .done (turns blue).

12. $DIGGR Token / Insider Section (#token)

This is the longest section. It contains:

#token styling: padding:3.5rem 2rem, max-width:1100px. Top border accent (gold gradient line).

12.1 Token section header

<div class="fu">
  <div class="slbl tk-slbl">
    Upcoming Token Sale
    <span class="cs-badge tk-badge">Soon</span>     <!-- gold variant -->
  </div>
  <h2 class="stit tk-title">DIGGR -- Become an Insider</h2>
  <p class="ssub">A new fundraise round is coming, alongside the public sale of the
     <strong>DIGGR</strong> token.<br>Holders unlock everything diggr. is building -- first.</p>

  <div class="tk-pill-row">
    <a href="https://t.me/InsiderGroup" target="_blank" class="tk-pill">
      <svg>...tg...</svg> Join @InsiderGroup
    </a>
    <a href="#whitepaper" class="tk-pill tk-pill-alt">
      <svg>...doc...</svg> Read Whitepaper
    </a>
  </div>

  <a href="https://t.me/DIGGRBOT?start=referral" target="_blank" class="tgbtn tgbtn-gold">
    <svg class="tgbtn-ico">...tg...</svg>
    <span class="tgbtn-pulse"></span>
    <span>Open @DIGGRBOT -- Referral</span>
    <svg class="tgbtn-arrow">-></svg>
  </a>

  <!-- Referral notice -->
  <div class="ref-notice fu">
    <div class="ref-notice-head">
      <svg>...info circle...</svg>
      <span>How the referral system works</span>
    </div>
    <p class="ref-notice-line">
      The referral program runs <strong>exclusively on Telegram</strong>, through
      <strong>@DIGGRBOT</strong>. Every referral action is tied to your Telegram username
      and to the <strong>wallet you register inside the bot</strong>.
    </p>
    <p class="ref-notice-line ref-notice-warn">
      <span class="ref-notice-tag">Note</span>
      You can use @DIGGRBOT without linking a wallet -- but in that case,
      <strong>you are no longer eligible for the airdrop</strong>. Linking your wallet
      is what makes your referrals and daily tasks count toward your DIGGR allocation.
    </p>
  </div>
</div>

(Title in source: DIGGR — Become an Insider. Em-dashes preserved.)

Style notes:

12.2 DIGGR contract address row (.tk-contract)

<div class="tk-contract fu">
  <div class="tk-contract-label">
    <span class="tk-contract-tag">DIGGR</span>             <!-- gold gradient pill -->
    <span class="tk-contract-text">Contract Address</span> <!-- mono caps -->
    <span class="tk-contract-chain">Solana</span>          <!-- purple pill -->
  </div>
  <div class="tk-contract-row">
    <input class="tk-contract-inp" id="tk-contract-inp" readonly
           value="7xKXtg2C9WxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxDIGR">
    <button class="tk-contract-copy" id="tk-contract-copy" onclick="copyContract()">
      <svg>...copy ico...</svg><span>Copy</span>
    </button>
  </div>
  <div class="tk-contract-hint">The contract will be available soon. Airdrops will start day
    by day -- earn allocation by completing daily tasks or referring friends. Always verify
    the address from official channels.</div>
</div>

Copy button on success -> green text "Copied!" for 1.5 s.

12.3 3-card token benefits grid (.tk-grid)

<div class="tk-grid fu">
  <div class="tk-card">
    <div class="tk-icon"><svg>...stack/diamond ico...</svg></div>
    <div class="tk-card-title">Early Access</div>
    <p class="tk-card-desc">Hold DIGGR to get <strong>preview access</strong> to every upcoming
       feature before public release -- copy-trading, auto-buy, advanced wallet graph & more.</p>
  </div>
  <div class="tk-card">
    <div class="tk-icon"><svg>...check-circle ico...</svg></div>
    <div class="tk-card-title">Feature Unlocks</div>
    <p class="tk-card-desc">Use the new tools <strong>without limits</strong> -- token-gated
       capacity for premium scans, alert slots, tracker seats & the live terminal.</p>
  </div>
  <div class="tk-card">
    <div class="tk-icon"><svg>...users ico...</svg></div>
    <div class="tk-card-title">Become an Insider</div>
    <p class="tk-card-desc">Become part of the project. Holders join our private circles --
       <strong>@InsiderGroup</strong> & the <strong>insider tracking group</strong> --
       where alpha and tracked wallets are shared first.</p>
  </div>
</div>

Card style: gold-tinted linear-gradient(180deg,rgba(251,191,36,.04),rgba(8,9,18,.7)), gold border, hover lift, gold accent on top.

12.4 Phases + Info block (.tk-info)

<div class="tk-info fu">
  <div class="tk-phases">
    <div class="tk-phase tk-phase-now">
      <span class="tk-phase-tag">Phase 1</span>
      <span class="tk-phase-val">Private Round - Public Sale TBA</span>
    </div>
    <div class="tk-phase tk-phase-soon">
      <span class="tk-phase-tag">Phase 2</span>
      <span class="tk-phase-val">Airdrop Campaign</span>
    </div>
    <div class="tk-phase tk-phase-later">
      <span class="tk-phase-tag">Phase 3</span>
      <span class="tk-phase-val">Token Listing & Utility Unlocks</span>
    </div>
  </div>

  <div class="tk-info-line">
    <span class="tk-info-label">Insider Circles</span>
    <span class="tk-info-val">
      <a href="https://t.me/InsiderGroup" target="_blank" class="tk-link">@InsiderGroup</a>
      <span class="tk-sep">-</span>
      <a href="#" class="tk-link" onclick="...alert('Insider tracking group -- access opens with DIGGR holdings.')...">Insider Tracking Group</a>
    </span>
  </div>
  <div class="tk-info-line">
    <span class="tk-info-label">More Info</span>
    <span class="tk-info-val">Full tokenomics, vesting & roadmap ->
      <a href="#whitepaper" class="tk-link">Whitepaper v1.0</a></span>
  </div>
</div>

(Original separators: · middle-dot in .tk-sep and → arrow in More Info.)

Phases: 3 mini cards with tag (Phase 1 blue, Phase 2 gold-bright, Phase 3 muted).

12.5 Daily Tasks & Referral sub-section (.tk-tasks)

<div class="tk-tasks fu">
  <div class="tk-sub-head">
    <div class="tk-sub-slbl">
      <svg>...check ico...</svg>
      Engagement
    </div>
    <h3 class="tk-sub-title">Daily Tasks & Referral</h3>
    <p class="tk-sub-desc">Complete missions, invite friends, and earn DIGGR allocation points
       before the sale. The more you contribute, the bigger your slice.</p>
  </div>

  <a href="https://t.me/DIGGRBOT?start=tasks" target="_blank" class="tgbtn tgbtn-gold">
    <svg class="tgbtn-ico">...tg...</svg>
    <span class="tgbtn-pulse"></span>
    <span>Open @DIGGRBOT -- Daily Tasks & Referral</span>
    <svg class="tgbtn-arrow">-></svg>
  </a>

  <div class="tk-tasks-grid">     <!-- 1fr 1fr -> 1col mobile -->

    <!-- TASKS panel -->
    <div class="tk-panel">
      <div class="tk-panel-head">
        <span class="tk-panel-icon"><svg>...clock ico...</svg></span>
        <span class="tk-panel-title">Daily Tasks</span>
        <span class="tk-panel-meta" id="tk-task-progress">0 / 5 done</span>
      </div>
      <ul class="tk-task-list" id="tk-task-list">
        <li class="tk-task-loading">
          <span class="tk-task-loading-spin"></span>
          <span>Loading tasks...</span>
        </li>
      </ul>
      <div class="tk-points-bar"><div class="tk-points-fill" id="tk-points-fill"></div></div>
      <div class="tk-points-row">
        <span>Today's points</span>
        <span class="tk-points-val"><span id="tk-points-val">0</span> / <span id="tk-points-max">0</span></span>
      </div>
    </div>

    <!-- REFERRAL panel -->
    <div class="tk-panel tk-panel-ref">
      <div class="tk-panel-head">
        <span class="tk-panel-icon"><svg>...users ico...</svg></span>
        <span class="tk-panel-title">Refer Friends</span>
        <span class="tk-panel-meta">+50 pts / signup</span>
      </div>
      <p class="tk-ref-desc">Share your personal link. Earn allocation points and bonus
         rewards for every friend who signs up and runs their first dig.</p>
      <div class="tk-ref-link-wrap">
        <input class="tk-ref-inp" id="tk-ref-inp" readonly value="https://diggr.io/ref/YOUR_CODE">
        <button class="tk-ref-copy" id="tk-ref-copy" onclick="copyRefLink()">
          <svg>...copy ico...</svg><span>Copy</span>
        </button>
      </div>
      <div class="tk-ref-stats">
        <div class="tk-ref-stat">
          <span class="tk-ref-stat-val" id="tk-ref-count">0</span>
          <span class="tk-ref-stat-lbl">Referrals</span>
        </div>
        <div class="tk-ref-stat">
          <span class="tk-ref-stat-val" id="tk-ref-active">0</span>
          <span class="tk-ref-stat-lbl">Active</span>
        </div>
        <div class="tk-ref-stat">
          <span class="tk-ref-stat-val" id="tk-ref-points">0</span>
          <span class="tk-ref-stat-lbl">Points</span>
        </div>
      </div>
      <div class="tk-ref-share">
        <a href="#" class="tk-share-btn" onclick="shareRef('x');return false;" aria-label="Share on X">
          <svg>...X logo...</svg>
        </a>
        <a href="#" class="tk-share-btn" onclick="shareRef('tg');return false;" aria-label="Share on Telegram">
          <svg>...tg...</svg>
        </a>
      </div>
    </div>

  </div>
</div>

Tasks data (DEMO list -- also defines the API contract GET /api/tasks):

id title subtitle points url
follow_x Follow @diggrbot on X Stay updated · public announcements 10 https://x.com/diggrbot
join_tg Join the Telegram @InsiderGroup · community access 10 https://t.me/InsiderGroup
first_dig Run your first dig 3+ contracts in Wallet Finder 15 #tool
track_wallet Track a wallet Save or track any wallet address 20 #tracker
repost Repost the launch tweet Boost reach · resets daily 25 https://x.com/diggrbot

Total = 80 pts max.

Rendered task <li>:

<li class="tk-task" data-task-id="follow_x" data-pts="10">
  <button class="tk-task-check" aria-label="Mark task complete">
    <svg>...check ico...</svg>
  </button>
  <div class="tk-task-body">
    <div class="tk-task-title">Follow @diggrbot on X</div>
    <div class="tk-task-sub">Stay updated - public announcements</div>
  </div>
  <span class="tk-task-pts">+10</span>
</li>

(Subtitle separator in original is ·.)

Click on body opens URL (or smooth-scrolls to anchor); click on check toggles .done class (line-through title, green pill, fills points-bar). Rolls back on backend error. tk-points-fill is a horizontal gradient bar linear-gradient(90deg,#d97706,#fbbf24).

Empty / Error states (also strings to keep):

12.6 Tasks Hint (Connect-wallet callout)

<div class="tasks-hint fu">
  <svg class="tasks-hint-ico">...refresh ico...</svg>
  <p class="tasks-hint-text">
    <strong>Connect your wallet and refresh the page</strong> to see your live airdrop
    progress and the detailed status of every completed task.
    <span class="tasks-hint-alt">Or run <code>/refstats</code> on
      <a href="https://t.me/DIGGRBOT" target="_blank" class="tk-link">@DIGGRBOT</a>.</span>
  </p>
</div>

Style: cyan/sky callout (bg rgba(34,158,217,.05), left border rgba(34,158,217,.55)), text #cbd5e1, code pill in #7dd3fc.

12.7 Insider Score (.tk-insider)

<div class="tk-insider fu">
  <div class="tk-sub-head" style="border-top:1px solid rgba(251,191,36,.10);padding-top:1.4rem">
    <div class="tk-sub-slbl">
      <svg>...star ico...</svg>
      Premium & Ultimate
    </div>
    <h3 class="tk-sub-title">Insider Score</h3>
    <p class="tk-sub-desc">Your tier multiplies every airdrop point you earn from
       Daily Tasks & Referrals. Upgrade to <strong>Premium</strong> or
       <strong>Ultimate</strong> to compound your allocation faster.</p>
  </div>

  <div class="ins-card">
    <!-- Top labels -->
    <div class="ins-top">
      <div class="ins-top-l">
        <div class="ins-top-label">Current Tier</div>
        <div class="ins-tier-name" id="ins-tier-name">Free</div>
      </div>
      <div class="ins-top-r">
        <div class="ins-top-label">Airdrop Multiplier</div>
        <div class="ins-mult" id="ins-mult">x1.00</div>
      </div>
    </div>

    <!-- Gauge -->
    <div class="ins-gauge-wrap">
      <div class="ins-gauge-track">
        <div class="ins-gauge-fill" id="ins-gauge-fill"></div>   <!-- width: 0/50/100% -->
        <div class="ins-marker ins-marker-free"     style="left:0%"><span class="ins-marker-dot"></span></div>
        <div class="ins-marker ins-marker-premium"  style="left:50%"><span class="ins-marker-dot"></span></div>
        <div class="ins-marker ins-marker-ultimate" style="left:100%"><span class="ins-marker-dot"></span></div>
      </div>
      <div class="ins-gauge-labels">
        <div class="ins-tier-lbl">
          <span class="ins-tier-name-sm">Free</span>
          <span class="ins-tier-mult-sm">x1.00</span>
        </div>
        <div class="ins-tier-lbl ins-tier-mid">
          <span class="ins-tier-name-sm">Premium</span>
          <span class="ins-tier-mult-sm">x1.25</span>
        </div>
        <div class="ins-tier-lbl ins-tier-end">
          <span class="ins-tier-name-sm">Ultimate</span>
          <span class="ins-tier-mult-sm">x1.50</span>
        </div>
      </div>
    </div>

    <!-- Stats grid -->
    <div class="ins-stats">
      <div class="ins-stat">
        <span class="ins-stat-lbl">Base points</span>
        <span class="ins-stat-val" id="ins-base">0</span>
      </div>
      <div class="ins-stat">
        <span class="ins-stat-lbl">x&nbsp;Multiplier</span>
        <span class="ins-stat-val ins-stat-mult" id="ins-x">x1.00</span>
      </div>
      <div class="ins-stat">
        <span class="ins-stat-lbl">Final airdrop pts</span>
        <span class="ins-stat-val ins-stat-final" id="ins-final">0</span>
      </div>
    </div>

    <!-- Tier toggle (preview/demo) -->
    <div class="ins-toggle-row">
      <span class="ins-toggle-lbl">Preview tier:</span>
      <div class="ins-toggle">
        <button class="ins-tbtn active" data-tier="free"     onclick="setInsiderTier('free',this)">Free</button>
        <button class="ins-tbtn"        data-tier="premium"  onclick="setInsiderTier('premium',this)">Premium</button>
        <button class="ins-tbtn"        data-tier="ultimate" onclick="setInsiderTier('ultimate',this)">Ultimate</button>
      </div>
    </div>
  </div>
</div>

(Original uses × (multiplication sign) instead of x everywhere -- preserve as the actual U+00D7 character.)

Tier table:

Tier Multiplier Gauge fill Class on .ins-card
free x1.00 0% .tier-free
premium x1.25 50% .tier-premium
ultimate x1.50 100% .tier-ultimate

Gauge fill gradient: linear-gradient(90deg,#475569 0%,#3b82f6 30%,#fbbf24 70%,#fde68a 100%), transition .8s cubic-bezier(.65,.05,.36,1), glow 0 0 18px rgba(251,191,36,.4). Markers light up sequentially as tier increases (free dot blue, premium dot gold, ultimate dot bright gold filled).

Behavior:

13. Pricing -- Choose Your Edge (#pkg)

Layout: max-width:960px. Two-card grid (pgrid 1fr 1fr) + a separate row below for buttons (pkg-btn-row 1fr 1fr) so prices and CTAs share a visually aligned baseline.

<section id="pkg">
  <div class="fu" style="margin-bottom:2rem">
    <div class="slbl">Pricing</div>
    <h2 class="stit">Choose Your Edge</h2>
    <p class="ssub">Two plans. One mission -- find the alpha before anyone else.</p>
  </div>

  <div class="pgrid fu" id="pkg-cards" style="max-width:960px;margin:0 auto;padding:0 2rem">

    <!-- PREMIUM CARD (gold border) -->
    <div class="pcard pcard-gold">
      <div class="pcard-title-row">
        <div class="pname">Premium</div>
      </div>
      <div class="pprice">$399</div>
      <div class="pper">One-time - Lifetime access</div>
      <ul class="pft">
        <li>Unlock Multi-Chain Wallet Finder</li>
        <li>Works on all EVM chains & Solana</li>
        <li>Up to 20 searches per day</li>
        <li>Real-time Telegram alerts</li>
        <li>Basic PnL tracking</li>
        <li>Free access to <span style="color:#60a5fa">@InsiderGroup</span></li>
      </ul>
    </div>

    <!-- ULTIMATE CARD (animated diamond canvas border) -->
    <div class="pcard feat pcard-plat">
      <canvas class="diamond-canvas" id="diamond-canvas"></canvas>
      <div class="pcard-title-row">
        <div class="pname">Ultimate</div>
        <span class="pbdg">Most Powerful</span>
      </div>
      <div class="pprice">$899</div>
      <div class="pper">One-time - Lifetime access</div>
      <ul class="pft">
        <li>Everything in Premium</li>
        <li>Unlimited searches</li>
        <li>Early access -- Wallet Tracker</li>
        <li>Early access -- Copy Trading <span style="color:#22c55e;font-size:.8rem">(0% fees)</span></li>
        <li>Whale Tracking Group <span style="color:#475569;font-size:.8rem">(50+ KOL wallets)</span></li>
        <li>Whale wallet monitoring</li>
        <li>Priority support</li>
      </ul>
    </div>
  </div>

  <!-- Shared button row outside the cards -->
  <div id="pkg-btn-wrap" class="fu" style="transition-delay:.15s">
    <div class="pkg-btn-row">
      <button class="pbtn f" id="btn-premium">
        <span class="btn-glitch" data-text="Get Premium -- $399">
          Get Premium -- $399
          <span class="scan"></span>
          <span class="flash"></span>
        </span>
      </button>
      <button class="pbtn f" id="btn-ultimate">
        <span class="btn-glitch" data-text="Get Ultimate -- $899" style="animation-delay:-.7s">
          Get Ultimate -- $899
          <span class="scan" style="animation-delay:-.7s"></span>
          <span class="flash" style="animation-delay:-.7s"></span>
        </span>
      </button>
    </div>
  </div>
</section>

(Original uses em-dashes "—" in the button labels and the pper line uses ·. Preserve verbatim: One-time · Lifetime access, Get Premium — $399, Get Ultimate — $899, Early access — Wallet Tracker, etc.)

Card colors:

Card borders (signature visuals):

Buttons (.pbtn.f): blue gradient linear-gradient(135deg,#1e3a5f,#3b82f6), white text. Each contains a <span class="btn-glitch" data-text="..."> that triggers a periodic glitch animation (bgMain 2s cycle, with red ::before and cyan ::after clipped offsets, plus .scan repeating-linear-gradient overlay and .flash white overlay). Ultimate button's animations are offset by -0.7s so the two glitches don't fire in sync.

14. Whitepaper v1.0 (#whitepaper)

Layout: max-width:1100px, padding:3.5rem 2rem. 2-col grid (wp-grid 1fr 1fr).

<section id="whitepaper">
  <div class="fu">
    <div class="slbl">Documentation</div>
    <h2 class="stit">Whitepaper v1.0</h2>
    <p class="ssub">Architecture & Roadmap -- the technical foundation of diggr.<br>
       How we cross-reference contracts, identify wallets, and scale on-chain intelligence.</p>
  </div>

  <div class="wp-grid fu">
    <div class="wp-card">
      <div class="wp-icon"><svg>...doc ico...</svg></div>
      <div class="wp-title">Architecture</div>
      <p class="wp-desc">Multi-chain indexing layer, wallet-graph engine, and the
         cross-reference algorithm powering every dig.</p>
      <ul class="wp-list">
        <li>Indexer & data pipeline</li>
        <li>Wallet-graph & overlap scoring</li>
        <li>Real-time PnL & alert engine</li>
      </ul>
    </div>

    <div class="wp-card">
      <div class="wp-icon"><svg>...activity zigzag...</svg></div>
      <div class="wp-title">Roadmap</div>
      <p class="wp-desc">From cross-chain wallet discovery to autonomous copy-trading and a
         public on-chain intelligence layer.</p>
      <ul class="wp-list">
        <li><span class="wp-tag done">Q4 2025</span> Public beta - EVM + Solana</li>
        <li><span class="wp-tag now">Q1 2026</span>  Wallet Tracker - Live alerts</li>
        <li><span class="wp-tag soon">Q2 2026</span> Copy-trade & auto-buy</li>
        <li><span class="wp-tag soon">Q3 2026</span> Public API & intelligence layer</li>
      </ul>
    </div>
  </div>

  <div class="fu" style="text-align:center;margin-top:1.6rem">
    <a href="#" class="bu" onclick="event.preventDefault();alert('Whitepaper PDF -- coming soon.');return false;">
      <svg class="bu-ico">...doc ico...</svg>
      <span>Download Whitepaper PDF</span>
    </a>
  </div>
</section>

(Original separators: · between roadmap items.)

.wp-tag colors:

.wp-list li::before is a > (Unicode "›") in #3b82f6. List items are mono .68rem, color #94a3b8.

15. Find Us -- Contact (#contact)

Layout: max-width:780px, padding:2.5rem 2rem.

<section id="contact">
  <div class="fu">
    <div class="slbl">Connect</div>
    <h2 class="stit">Find Us</h2>
    <p class="ctag">Questions, partnerships, or just want to say gm?<br>
       We're on-chain and online.</p>
    <div class="slinks">
      <a href="https://t.me/DIGGRBOT" target="_blank" class="sl">
        <svg>...tg ico...</svg>Telegram
      </a>
      <a href="https://x.com/diggrbot" target="_blank" class="sl">
        <svg>...X ico...</svg>Twitter / X
      </a>
    </div>
  </div>
</section>

.sl style: outlined card border rgba(148,163,184,.07), hover #93c5fd + translateY(-2px). Stacks vertically on mobile.

16. Footer

<footer>(c) 2025 diggr. -- On-chain intelligence. All rights reserved.</footer>

(Original character: © 2025 diggr. — On-chain intelligence. All rights reserved.)

Style: padding 1.6rem, text-align:center, top border rgba(148,163,184,.05), Space Mono .6rem #1e293b, letter-spacing 0.12em.

17. Inline scripts (high level summary, for re-implementation in React)

The HTML ships 6 inline <script> blocks (~1900 lines total). They map cleanly to React hooks/components:

  1. Loader (lines 816-1017) -> LoaderCanvas.tsx (mounts -> animates 320 fibonacci particles -> fades + adds show class on <body>/state).
  2. Background sphere + scroll/mouse (lines 1024-1304) -> BackgroundCanvas.tsx (380 particles, scroll-driven rotation, mouse ripple).
  3. Header scroll class + Contract rows + TOS scan + Live terminal + Hero scramble + Wallet connect + Quick buy (lines 1306-1919) -> split into:
    • useHeaderScroll() (toggle .sc class).
    • WalletFinderInputs.tsx (clist, chain toggle, launch).
    • TradersOverlapTerminal.tsx (runTosScan).
    • LiveAlertsTerminal.tsx (TOKENS array, EVM/SOL wallets, schedule loop).
    • HeroSubtitleScramble.tsx.
    • WalletConnectModal.tsx (uses ethers.BrowserProvider for EVM, window.phantom?.solana for SOL).
    • QuickBuyPanel.tsx.
  4. Tips rotator (lines 1922-2005) -> TipsCarousel.tsx (7 tips x 6500ms, progress bar, dots).
  5. Diamond canvas border (lines 2008-2171) -> DiamondBorderCanvas.tsx (paints 120-segment animated border on Ultimate card).
  6. Track/Save wallet handlers (lines 2173-2244) -> useWalletInputValidator().
  7. DiggrAPI / Daily Tasks / Referral / Insider Score (lines 2246-2715) -> lib/diggr-api.ts (demo + live mode), DailyTasksPanel.tsx, ReferralPanel.tsx, InsiderScoreCard.tsx.

DiggrAPI contract (for the backend)

GET  /api/me
  -> { telegram_username, wallet | null, referral_code, tier: 'free'|'premium'|'ultimate' }

GET  /api/tasks
  -> Array<{ id: string, title: string, subtitle: string, points: number, done: boolean, url?: string }>

POST /api/tasks/{id}/complete
  -> { ok: true, task: {...}, points_total: number }

GET  /api/referral
  -> { link: string, count: number, active: number, points: number }

Auth header: Authorization: Bearer <token from localStorage 'diggr_auth_token'>
Errors: { error: 'human readable' } with 4xx/5xx.

TIER_MULT  = { free: 1.00, premium: 1.25, ultimate: 1.50 }
TIER_GAUGE = { free: 0,   premium: 50,   ultimate: 100 }

Demo data persistence

Tasks/me/referral state are stored in localStorage key diggr_demo_state_v1. Toggling tasks from UI is optimistic with rollback on backend failure.

18. Section inventory checklist

# Section ID / class Word count (approx.) Components
1 Loader #loader > #lc 0 (canvas only) 1
2 Background canvas #bgc 0 1
3 Header / Nav #hdr 9 5 (logo, 3 nav links, 2 buttons)
4 Wallet Connect modal #wc-modal 30 1 modal + 3 wallet options
5 Refer a Friend modal #refer-modal 17 1 modal + copy + 2 stats
6 Hero #hero ~145 title, scrambled subtitle, descr, 6 bullets, 4 CTAs
7 Sphere spacer #sph 0 -
8 Stats counter #stats ~25 4 cards
9 Wallet Finder #tool ~150 + dynamic header, TG CTA, input panel (chain toggle, 5 inputs, add row, launch, tips), terminal panel (header, body, foot)
10 Wallet Tracker #tracker ~75 + 2 entries x 4 PnL each header, 2 inputs+buttons, 2 wallet cards, saved card with 2 entries
11 Live Buy Alerts #terminal ~30 + 8 seed + streamed terminal header, log feed, quick-buy panel (4 chains, 4 presets, custom input, buy button)
12 $DIGGR / Insider #token ~480 header pills, TG CTA, ref-notice (2 paragraphs), contract row, 3 token cards, phases (3), info lines (2), Daily Tasks (5 tasks list), Referral (3 stats + share), tasks-hint, Insider Score card (gauge, 3 stats, 3 tier toggles)
13 Pricing #pkg ~70 section head, 2 plan cards (6 + 7 features), 2 glitch buttons
14 Whitepaper #whitepaper ~70 2 cards (Architecture w/ 3 items, Roadmap w/ 4 tagged items), Download CTA
15 Contact #contact ~14 header, 2 social links
16 Footer <footer> 9 1 line
17 Tips bar #diggr-tips 7 tips, ~150 words inside Wallet Finder card

Total interactive elements identified:

19. Implementation tips for React/Tailwind