Untitled
unknown
plain_text
2 months ago
15 kB
4
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Native Ad Copy Checklist</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background: #f5f5f0; color: #1a1a1a; min-height: 100vh; padding: 2rem 1rem; }
.container { max-width: 740px; margin: 0 auto; }
h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.subtitle { font-size: 14px; color: #666; margin-bottom: 1.5rem; }
.progress-label { font-size: 13px; color: #666; margin-bottom: 6px; }
.progress-wrap { height: 5px; background: #ddd; border-radius: 3px; margin-bottom: 2rem; }
.progress-bar { height: 5px; background: #2e7d32; border-radius: 3px; transition: width 0.3s; }
.section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin: 1.5rem 0 0.6rem; padding-left: 2px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 8px; border: 1px solid #e0e0e0; background: #fff; margin-bottom: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s; user-select: none; }
.check-item:hover { background: #f9f9f6; }
.check-item.done { border-color: #a5d6a7; background: #f1f8f1; }
.check-box { width: 20px; height: 20px; min-width: 20px; border-radius: 5px; border: 2px solid #bbb; display: flex; align-items: center; justify-content: center; margin-top: 1px; transition: background 0.15s, border-color 0.15s; }
.check-item.done .check-box { background: #2e7d32; border-color: #2e7d32; }
.check-mark { display: none; }
.check-item.done .check-mark { display: block; }
.check-text { font-size: 14px; font-weight: 500; color: #1a1a1a; line-height: 1.5; }
.check-item.done .check-text { color: #2e7d32; }
.check-sub { font-size: 12.5px; color: #666; margin-top: 3px; line-height: 1.5; font-weight: 400; }
.check-item.done .check-sub { color: #4a8f4e; }
.actions { display: flex; gap: 12px; margin-top: 1.5rem; flex-wrap: wrap; }
.btn-reset { padding: 8px 20px; border-radius: 6px; border: 1px solid #ccc; background: #fff; font-size: 13px; color: #555; cursor: pointer; font-family: inherit; }
.btn-reset:hover { background: #f0f0f0; }
.btn-copy { padding: 8px 20px; border-radius: 6px; border: 1px solid #ccc; background: #fff; font-size: 13px; color: #555; cursor: pointer; font-family: inherit; }
.btn-copy:hover { background: #f0f0f0; }
.complete-msg { display: none; margin-top: 1rem; padding: 12px 16px; background: #e8f5e9; border: 1px solid #a5d6a7; border-radius: 8px; font-size: 14px; color: #2e7d32; font-weight: 500; }
footer { margin-top: 2.5rem; font-size: 12px; color: #aaa; text-align: center; }
</style>
</head>
<body>
<div class="container">
<h1>Native Ad Copy Checklist</h1>
<p class="subtitle">TheraPulse / Ribliss — check every point before launching a new creative</p>
<div class="progress-label" id="prog-label">0 / 15 completed</div>
<div class="progress-wrap"><div class="progress-bar" id="prog-bar" style="width:0%"></div></div>
<div class="section-label">Avatar, desire & audience</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box">
<svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none">
<path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div>
<div class="check-text">One avatar, one mass desire — throughout the entire copy</div>
<div class="check-sub">No mixing grandchildren + dog + grocery store + independence. Pick one identity moment and never leave it. Every agitation scene, transformation moment, and closing line must serve the same single desire.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The avatar's pain is urgent and active — not resigned or managed</div>
<div class="check-sub">Resignation kills purchase intent. The avatar must be in crisis or approaching a breaking point, not "coping." "Managing something that wasn't going to get better" reads as accepted limitation, not urgency to solve.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">Mass desire reaches the deep "why" — not just the surface want</div>
<div class="check-sub">Ask why 3-4 times: "Walk without pain" → "Get back on the floor with my grandchildren" → "Not lose the years I can't get back while they grow up." The real emotional fuel lives at the bottom, not the surface.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">Audience is large enough for the CBO algorithm to find buyers at scale</div>
<div class="check-sub">Avoid hyper-specific intersections (e.g. bone-on-bone + heart failure contraindication + British male). Narrow avatars starve the algorithm — it can't find enough purchase signals to justify scaling budget.</div>
</div>
</div>
<div class="section-label">Hook, lead & congruence</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">Hook, lead, and body all speak to the same avatar and the same desire</div>
<div class="check-sub">If the hook is pre-surgical ("advice for anyone considering surgery"), the body cannot be post-surgical. If the hook is a grandmother, the transformation scene can't pivot to gardening. The promise of the hook must be honoured from line one.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The lead delivers on the hook's promise quickly — no slow backstory setup</div>
<div class="check-sub">If the hook creates a curiosity gap ("my surgeon stopped my surgery"), arrive at that revelation fast. A problem-aware avatar who clicks doesn't need 400 words of treatment history before the story moves forward.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The copy passes the avatar mirror test — real VOC, not constructed language</div>
<div class="check-sub">A farmer doesn't say "fifteen years of X, fifteen years of Y." A retired consultant doesn't use generic knee pain language. Language must come from real forums, comments, and reviews — not from a copywriter's imagination.</div>
</div>
</div>
<div class="section-label">Trigger moments & gradualization</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The surgery/action trigger is identity-destroying, not passive or mild</div>
<div class="check-sub">Falling alone in the back pasture. Daughter flying in for recovery. Staying in the car at the baseball game. Not: "my wife offered to help" or "I had to use a cart." The trigger must represent a genuine loss of identity, not a minor inconvenience.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The UMP is gradualized — arrived at through logic, not asserted from nowhere</div>
<div class="check-sub">An X-ray cannot reveal a neurological cause. The surgeon, PT, or peer must reach the UMP through clinical reasoning: pain duration, failed treatments, symptom pattern. Stating "it's the nerves" without building to it destroys believability.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The first result moment connects to the mass desire — not a solo kitchen moment</div>
<div class="check-sub">The emotional payoff must happen in front of the person who represents the mass desire. Grandma kneels with grandson, not alone on carpet. Farmer climbs tractor while son watches. Elderly woman's daughter notices she's walking without holding furniture.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The urgency claim is grounded — not a naked sales device</div>
<div class="check-sub">"The longer nerves stay stuck, the harder they are to reset" needs one supporting sentence from the PT, doctor, or peer. Unsupported urgency reads as manufactured at the exact moment the reader is closest to converting — and breaks trust.</div>
</div>
</div>
<div class="section-label">Product introduction & credibility</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The product is introduced in the authority figure's voice — zero ad copy language</div>
<div class="check-sub">The surgeon recommends it as a clinical protocol. The retired nurse pulls it from her bag. It must feel like a recommendation from a trusted source, not a product introduction. Any sentence that reads like an ad breaks the native frame entirely.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The result section shows realistic progression — not instant relief</div>
<div class="check-sub">For a skeptical avatar who spent $37K on failed treatments: "something quieted — not gone, but turned way down" then gradual improvement over days. Instant miracles in 60 seconds break credibility and cost conversions.</div>
</div>
</div>
<div class="section-label">Closing</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The guarantee is written in the avatar's voice — no marketing structure visible</div>
<div class="check-sub">Not "60-day money-back guarantee." Instead: "She made sure it had a return policy before we ordered." Or: "For a man who'd wasted fifteen years on things that didn't work, sixty days was enough reason to try." The guarantee must sound like the avatar, not like a sales page.</div>
</div>
</div>
<div class="check-item" onclick="toggle(this)">
<div class="check-box"><svg class="check-mark" width="11" height="8" viewBox="0 0 11 8" fill="none"><path d="M1 4L4 7L10 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<div>
<div class="check-text">The closing re-activates the mass desire before resolving it — no AI rhythm triplets</div>
<div class="check-sub">No "fifteen years of X, fifteen years of Y, fifteen years of Z." One visceral reminder of what the avatar was living before, then the freedom that replaced it. Close on identity, not on product. "My land. My ladder. My legs." — not a list of outcomes.</div>
</div>
</div>
<div class="complete-msg" id="complete-msg">All 15 points checked. Ready to launch.</div>
<div class="actions">
<button class="btn-reset" onclick="resetAll()">Reset for next creative</button>
</div>
<footer>Native Ads Checklist — TheraPulse / Ribliss · Update by pasting new HTML version</footer>
</div>
<script>
const items = document.querySelectorAll('.check-item');
const total = items.length;
function updateProgress() {
const done = document.querySelectorAll('.check-item.done').length;
document.getElementById('prog-label').textContent = done + ' / ' + total + ' completed';
document.getElementById('prog-bar').style.width = Math.round((done / total) * 100) + '%';
document.getElementById('complete-msg').style.display = done === total ? 'block' : 'none';
}
function toggle(el) {
el.classList.toggle('done');
updateProgress();
}
function resetAll() {
items.forEach(el => el.classList.remove('done'));
updateProgress();
}
</script>
</body>
</html>Editor is loading...
Leave a Comment