martbost
3f9dc3cc94
The dashboard card was too easy to scroll past, so this is a real overlay: once per browser session, on every page that loads common.js, dismissed with the X, Escape or the backdrop. It leads with the mechanic rather than the promotion, because the ask was to remind people what the site is about: the ad spend in your line pays you, in the same transaction. Five Dollar Friday rides underneath as the reason to act, and the copy is driven by the live /api/friday, so it reads "tomorrow", "today" or nothing at all without anyone editing text on a Friday morning. Not shown on /join or /admin: an overlay in the middle of signing up costs sign-ups, and staff do not need reminding what the product is. QA: the overlay appears after an async fetch, so hiding it at load time missed it and every click in the harness timed out. The harness now pre-sets the same sessionStorage flag a real dismissal uses, before page scripts run. Green again, 0 bugs. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
164 lines
11 KiB
HTML
164 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)}
|
|
.jn-spon.cobrand{border:1px solid rgba(67,232,195,.4);border-radius:14px;padding:10px 14px;margin-bottom:12px}.jn-spon.cobrand img{width:56px;height:56px;border-radius:50%}.jn-bio{display:block;margin-top:4px;color:var(--ink);font-size:14px;max-width:60ch}
|
|
</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><br><span id="jnSponBio" class="jn-bio" hidden></span></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">Activate with the $20 starter package and switch on payouts, and 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=20260923b"></script><script src="/assets/welcome.js?v=20260923b"></script>
|
|
<script src="/assets/join.js?v=20260914a"></script>
|
|
</body>
|
|
</html>
|