Files
instantadpay/public/join.html
T
martbost 825d0de6c3 Header: Leaderboard link
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-14 05:40:26 -05:00

163 lines
11 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex,follow">
<title>You're invited | InstantAdPay</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&display=swap">
<link rel="icon" type="image/png" href="/logo-icon.png">
<link rel="stylesheet" href="/assets/site.css?v=20260910h">
<style>
.jn-nav{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 0}
.jn-nav>a{white-space:nowrap;flex:0 0 auto;padding-top:8px}
.jn-nav .logo-wrap{min-width:0}
@media (max-width:480px){.jn-nav .byline{white-space:normal}}
.jn-hero{padding:14px 0 4px;text-align:left}
.jn-brand{font-family:var(--disp);font-weight:800;font-size:20px;margin:0 0 4px;color:var(--ink)}
.jn-brand em{font-style:normal;color:var(--mint)}
.jn-brand span{font-weight:500;font-size:14px;color:var(--muted)}
.jn-strip{margin-top:22px}
.jn-strip .jn-chips{margin:0}
.jn-hero h1{font-size:clamp(26px,3.6vw,40px);line-height:1.08;margin:4px 0 8px;max-width:760px;text-align:left;letter-spacing:-.015em}
.jn-hero h1 em{font-style:normal;color:var(--mint)}
.jn-hero p.lead{margin:0 0 12px;text-align:left;max-width:620px;font-size:15.5px}
.jn-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start;margin-top:4px}
#jnVideo{width:100%;aspect-ratio:16/9;display:block;border-radius:16px;border:1px solid var(--line-strong);background:#000}
/* angle pages (?v=) are squeeze pages: hook, video, one call to action. The full page is for the plain link. */
body.squeeze .jn-hero{max-width:720px;margin:0 auto;text-align:center;padding-top:6px}
body.squeeze .jn-hero h1,body.squeeze .jn-hero p.lead{text-align:center;margin-left:auto;margin-right:auto}
body.squeeze .jn-hero h1{font-size:clamp(30px,4.4vw,46px)}
body.squeeze .jn-spon,body.squeeze .jn-brand{justify-content:center}
body.squeeze .jn-grid{display:flex;flex-direction:column;max-width:720px;margin:0 auto;gap:18px}
body.squeeze .jn-grid>div:first-child>p{display:none}
body.squeeze .jn-cap{position:static;box-shadow:0 0 80px rgba(67,232,195,.16)}
body.squeeze .jn-cap h3{font-size:22px}
body.squeeze #jnMock,body.squeeze .jn-strip,body.squeeze .jn-full{display:none}
body.squeeze .jn-points{max-width:720px;margin:4px auto 0}
body.squeeze .jn-foot{margin-top:28px}
.jn-points{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.jn-points li{position:relative;padding-left:26px;font-size:15px;line-height:1.45}
.jn-points li::before{content:"✓";position:absolute;left:0;top:0;color:var(--mint);font-weight:800}
@media(max-width:860px){.jn-grid{grid-template-columns:1fr}}
.jn-cap{border-color:var(--mint);box-shadow:0 0 60px rgba(67,232,195,.12);position:sticky;top:18px}
@media(max-width:860px){.jn-cap{position:static}}
.jn-grid>div:first-child .mockup{margin:0}
.jn-cap h3{margin:0 0 6px}
.jn-cap input{width:100%}
.jn-cap .btn{width:100%;text-align:center}
.jn-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.jn-chips span{border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--muted)}
.jn-chips span b{color:var(--mint);font-weight:700}
.jn-spon{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.jn-spon img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line-strong)}
.jn-full{margin-top:26px}
.jn-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.jn-h h2{font-size:26px;margin:0}
.jn-h p{margin:0;font-size:14.5px}
.jn-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.jn-steps .card h3{font-size:19px;margin:8px 0 8px;min-height:2.4em}
.jn-steps .card p{margin:0}
@media(max-width:700px){.jn-steps{grid-template-columns:1fr}}
.jn-steps .card{margin:0}
.jn-steps .n{font-family:var(--mono);color:var(--mint);font-size:12px;letter-spacing:.1em}
.jn-ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:900px){.jn-ladder{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.jn-ladder{grid-template-columns:repeat(2,1fr)}}
.jn-pk{border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;background:var(--panel)}
.jn-pk .p{font-family:var(--disp);font-size:26px;font-weight:800}
.jn-pk .c{color:var(--mint);font-weight:700;font-size:13.5px}
.jn-pk .n{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.1em}
.jn-foot{color:var(--muted);font-size:13px;border-top:1px solid var(--line);margin-top:40px;padding:22px 0 50px}
.jn-err{color:var(--bad)}
</style>
</head>
<body>
<div class="wrap">
<div class="jn-nav">
<span class="logo-wrap"><a href="/"><img src="/logo.png" alt="InstantAdPay" style="height:34px;display:block"></a><span class="byline">Brought to you by the <b>Crypto Team Build Network</b></span></span>
<a class="small muted" href="/my">Already a member? Sign in</a>
</div>
<section class="jn-hero">
<div class="jn-spon" id="jnSpon" hidden><img id="jnSponImg" alt="" hidden><span class="small muted">Personal invitation from <b id="jnSponName" style="color:var(--mint)"></b></span></div>
<p class="jn-brand">Instant<em>AdPay</em> <span id="jnEyebrow">· Advertise and earn on Polygon</span></p>
<p class="jn-hello" id="jnHello" hidden style="margin:8px 0 12px;padding:10px 14px;border:1px solid var(--mint);border-radius:12px;color:var(--mint);font-weight:700"></p>
<h1 id="jnHead">Advertise and earn.<br><em>Paid on-chain, instantly.</em></h1>
<p class="lead" id="jnLead">Every ad package splits to real wallets in the same transaction it sells. No pending payouts, no withdraw button, and every payment is public.</p>
</section>
<div class="jn-grid">
<div>
<div id="jnAngle" hidden>
<video id="jnVideo" controls playsinline preload="metadata"></video>
</div>
<div id="jnMock">
<div class="mockup" aria-label="worked example of one purchase">
<div class="bar"><i></i><i></i><i></i><span class="addr">instantadpay.com/ledger · worked example</span></div>
<div class="body">
<div class="mrow"><span>🧾 member #7 bought package #2 ($20.00)</span><span>paid</span></div>
<div class="mrow"><span>💸 level 1 payout → member #3 (50%)</span><span>same block</span></div>
<div class="mrow"><span>💸 level 2 payout → member #2 (20%)</span><span>same block</span></div>
<div class="mrow"><span>💸 level 3 payout → member #1 (10%)</span><span>same block</span></div>
<div class="mrow dim"><span>🏛 platform fee settled (20%)</span><span>same block</span></div>
<div class="mrow dim"><span>⭐ member #3 now has 2 qualifying buyers</span><span>level 2 ✓</span></div>
</div>
</div>
</div>
<p class="small muted" style="margin:10px 0 0">One purchase, one transaction, four payments. <a href="/ledger" target="_blank" rel="noopener">Open the real ledger →</a> <span id="jnStats"></span></p>
</div>
<div class="card jn-cap" id="jnCap">
<h3 id="jnCapH">Join free</h3>
<p class="muted small" style="margin:0 0 12px" id="jnCapSub">Type your email and we send a 6-digit code. No password, no wallet needed today.</p>
<p><input id="jnEmail" type="email" placeholder="Your email" autocomplete="email"></p>
<input id="jnWebsite" class="hp-field" type="text" name="hp_field_x9" tabindex="-1" autocomplete="off" aria-hidden="true">
<div id="jnCheck" hidden></div>
<p id="jnCodeRow" hidden><input id="jnCode" inputmode="numeric" placeholder="6-digit code from your inbox"></p>
<p id="jnUnder" class="small muted" hidden style="margin:-4px 0 12px"></p>
<label class="small muted" style="display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;cursor:pointer">
<input type="checkbox" id="jnNews" checked style="margin-top:3px;width:auto">
<span>Send me the getting-started emails (a few short ones over the first week). Unsubscribe any time.</span>
</label>
<p id="jnErr" class="small jn-err" hidden></p>
<button class="btn" id="jnSend" type="button">Email me a code</button>
<button class="btn" id="jnVerify" type="button" hidden>Create my free account</button>
<button class="btn sec small" id="jnResend" type="button" hidden style="margin-top:8px">Send a fresh code</button>
<p class="small muted" style="margin:14px 0 0">Advertising, not investing. No income is guaranteed; results depend on your effort. Crypto carries risk of loss.</p>
</div>
<ul class="jn-points" id="jnPoints" hidden></ul>
</div>
<div class="jn-strip">
<div class="jn-chips">
<span><b>Paid in POL</b>, Polygon's own coin, to your wallet</span>
<span><b>Same transaction</b> payouts</span>
<span><b>Public ledger</b> on Polygon</span>
<span><b>Free</b> to join by email</span>
</div>
<p class="small muted" style="margin:10px 0 0">The one crypto here is <b style="color:var(--ink)">POL on the Polygon network</b>: packages are paid in POL and every payout arrives as POL in your own wallet. Any Polygon wallet works (MetaMask, SafePal, Phantom, Coinbase Wallet). Never held crypto? Buy POL with a card inside the member area.</p>
</div>
<section class="jn-full">
<div class="jn-h"><h2>How it works</h2><p class="muted">Three steps. The first one takes a minute and costs nothing.</p></div>
<div class="jn-steps">
<div class="card"><div class="n">STEP 1</div><h3>Join free by email</h3><p class="muted small">A 6-digit code, no password. You get an invite link and welcome credits to try real ads.</p></div>
<div class="card"><div class="n">STEP 2</div><h3>Advertise or earn</h3><p class="muted small">Seven ad formats. View ads to earn credits, or buy a package from $5 when you want reach.</p></div>
<div class="card"><div class="n">STEP 3</div><h3>Get paid in the same transaction</h3><p class="muted small">Anyone who buys through your link pays you 50 percent, on-chain, the moment it happens.</p></div>
</div>
</section>
<section class="jn-full">
<div class="jn-h"><h2>The packages</h2><p class="muted">Priced in dollars, settled in POL at the live rate. One credit is one cent of ad delivery.</p></div>
<div class="jn-ladder" id="jnLadder"></div>
<p class="small muted" style="margin:14px 0 0;text-align:center">Every package pays 50 / 20 / 10 up the line the moment it sells, on a public ledger. <a href="#jnCap">Join free</a> and look around first.</p>
</section>
<div class="jn-foot">
InstantAdPay · <a href="/contract">Contract</a> · <a href="/terms">Terms</a> · <a href="/privacy">Privacy</a> · <a href="/disclaimer">Disclaimer</a>
</div>
</div>
<script src="/assets/common.js?v=20260914a"></script>
<script src="/assets/join.js?v=20260913a"></script>
</body>
</html>