martbost
89 lines
7.2 KiB
HTML
89 lines
7.2 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"><meta name="description" content="Split Tester — run two or three versions of an ad against each other and find out which one people actually click."><title>Split Tester | The Circle Suite</title><link rel="icon" type="image/png" href="/favicon.png"><link rel="stylesheet" href="/styles.css">
|
|
<style>
|
|
.sw{max-width:940px;margin:0 auto;padding:24px 20px 70px}
|
|
.sw h1{font-size:clamp(26px,4.5vw,36px);margin:6px 0 8px}
|
|
.sw .lede{color:var(--muted);line-height:1.6;margin-bottom:18px}
|
|
#sGate{display:none;border:2px solid var(--gold);border-radius:12px;padding:16px 20px;margin-bottom:18px;line-height:1.6}
|
|
.s-bal{display:flex;gap:18px;flex-wrap:wrap;align-items:center;border:2px solid var(--teal);border-radius:14px;padding:14px 18px;margin-bottom:18px}
|
|
.s-bal .big{font-size:28px;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
|
|
.s-bal .lab{font-size:11.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-top:4px}
|
|
.s-card{background:var(--card,#0d2236);border:1px solid var(--line,#24425d);border-radius:14px;padding:18px 20px;margin-bottom:16px}
|
|
label.s-lab{display:block;font-weight:700;font-size:14px;margin:14px 0 6px}
|
|
label.s-lab:first-of-type{margin-top:0}
|
|
.s-chips{display:flex;flex-wrap:wrap;gap:8px}
|
|
.s-chip{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:7px 14px;font-size:13.5px;font-weight:700;cursor:pointer}
|
|
.s-chip.on{border-color:var(--teal);background:rgba(78,214,203,.12);color:var(--teal)}
|
|
.s-ads{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;margin-top:12px}
|
|
.s-ad{border:2px solid var(--line);border-radius:10px;padding:12px 13px;cursor:pointer;background:var(--bg,#0b1d2e);position:relative}
|
|
.s-ad.on{border-color:var(--gold);background:rgba(212,175,55,.07)}
|
|
.s-ad .s{font-weight:800;font-size:15px;color:var(--gold);line-height:1.25;margin-bottom:5px;word-break:break-word}
|
|
.s-ad .l{font-size:13px;line-height:1.5;color:var(--text);word-break:break-word}
|
|
.s-ad .tag{position:absolute;top:-9px;right:9px;background:var(--gold);color:#0b1d2e;font-size:10.5px;font-weight:900;padding:2px 7px;border-radius:999px;letter-spacing:.5px}
|
|
#sImp{width:160px;background:var(--bg,#0b1d2e);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:10px 12px;font-size:15px}
|
|
.s-hint{color:var(--muted);font-size:12.5px;margin-top:6px;line-height:1.5}
|
|
.s-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
|
|
#sErr{display:none;color:#f0a05a;margin-top:12px;font-size:14px;line-height:1.55}
|
|
#sOk{display:none;border:2px solid var(--teal);border-radius:12px;padding:14px 18px;margin-top:14px;line-height:1.6}
|
|
.s-test{border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
|
|
.s-test h3{margin:0 0 3px;font-size:15px}
|
|
.s-verdict{border-radius:10px;padding:10px 13px;margin:10px 0;font-size:14px;line-height:1.6}
|
|
.s-verdict.winner{background:rgba(212,175,55,.1);border:1px solid var(--gold)}
|
|
.s-verdict.tie{background:rgba(255,255,255,.04);border:1px solid var(--line)}
|
|
.s-verdict.running{background:rgba(78,214,203,.08);border:1px solid var(--teal)}
|
|
.s-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
|
|
.s-tbl th{text-align:left;padding:6px 8px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line)}
|
|
.s-tbl td{padding:7px 8px;border-bottom:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums}
|
|
.s-tbl td b{color:var(--text)}
|
|
.s-tbl tr.win td{color:var(--text)}
|
|
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--gold);border-radius:50%;animation:sp .8s linear infinite;vertical-align:-2px;margin-right:7px}
|
|
@keyframes sp{to{transform:rotate(360deg)}}
|
|
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
|
|
.s-note{margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:12px}
|
|
</style></head>
|
|
<body>
|
|
<header class="wrap nav"><a class="brand" href="/suite"><img class="brand-mark" src="/logo.jpg" alt="The RM Circle" width="42" height="42"><span><span id="brandName">RM Circle</span><small>Split Tester</small></span></a><div class="nav-actions"><a class="btn btn-secondary hide-mobile" href="/suite">← The Suite</a><a class="btn btn-primary" href="/my">My Dashboard</a></div></header>
|
|
<main class="sw">
|
|
<div class="eyebrow" style="color:var(--gold)">CIRCLE SUITE · APEX (LEVEL 5)</div>
|
|
<h1>Split <span class="gold">Tester.</span></h1>
|
|
<p class="lede">Run two or three versions of an ad at the same time, split evenly, and find out which wording people actually click — instead of guessing. Apex is where your monthly impressions jump to 50,000, which is the first point a comparison like this can tell you anything real.</p>
|
|
|
|
<div id="sGate"></div>
|
|
|
|
<div class="s-bal" id="sBal" style="display:none">
|
|
<div><div class="big" id="sRemain">—</div><div class="lab">impressions left this month</div></div>
|
|
<div><div class="big" id="sLimit" style="color:var(--teal)">—</div><div class="lab">your monthly allowance</div></div>
|
|
</div>
|
|
|
|
<div class="s-card" id="sCard">
|
|
<label class="s-lab">What angle should the versions take?</label>
|
|
<div class="s-chips" id="sAngles"></div>
|
|
<div class="s-row">
|
|
<button id="sWrite" class="btn btn-secondary">✍️ Write me some versions</button>
|
|
<span class="s-hint" id="sWriteMeter" style="margin:0"></span>
|
|
</div>
|
|
<div id="sVariants"></div>
|
|
|
|
<label class="s-lab">Where should they send people?</label>
|
|
<div class="s-chips" id="sTargets"></div>
|
|
|
|
<label class="s-lab" for="sImp">Total impressions for the test</label>
|
|
<input type="number" id="sImp" min="1000" step="500" value="5000">
|
|
<div class="s-hint" id="sSplitHint"></div>
|
|
|
|
<div class="s-row"><button id="sGo" class="btn btn-primary">🔬 Start the test</button></div>
|
|
<div id="sErr"></div>
|
|
<div id="sOk"></div>
|
|
</div>
|
|
|
|
<div id="sTestsWrap" style="display:none">
|
|
<h2 style="font-size:20px;margin:22px 0 10px">Your tests</h2>
|
|
<div id="sTests"></div>
|
|
</div>
|
|
|
|
<p class="s-note"><strong style="color:var(--text)">Why this is deliberately slow to declare a winner:</strong> click rates on display advertising are small, so a two- or three-click gap on a few hundred impressions is noise, not a result. This tool waits until one version is clearly ahead before it calls anything — and when the versions genuinely tie, it says so, because that is useful information too: it means the wording isn't what's holding the ad back. <br><br>Independent team resource · No income is guaranteed · Cryptocurrency involves risk.</p>
|
|
</main>
|
|
<script src="/suite-split.js"></script>
|
|
<script src="/tool-video.js" data-video="/tv/suite-split-tester.mp4" data-secs="· 54 sec" data-title="Watch the Split Tester walkthrough" data-key="split" defer></script>
|
|
<script src="/chat.js?v=20260920" defer></script>
|
|
<script src="/translate.js" defer></script><script src="/tg-app.js" defer></script><script src="/nav-dash.js" defer></script></body></html>
|