index.html

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SparkScript</title><style>
*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui;background:radial-gradient(circle at 75% 0%,rgba(255,212,0,.15),transparent 30%),linear-gradient(145deg,#050505,#0b0b0b 60%,#020202);color:#fff}
.wrap{max-width:940px;margin:auto;padding:55px 20px}.hero{text-align:center;padding:35px}h1{font-size:52px;margin:0;letter-spacing:-2px}.y{color:#ffd400;text-shadow:0 0 25px rgba(255,212,0,.32)}.tag{color:#aaa;letter-spacing:2px;text-transform:uppercase;font-size:12px}
.card{background:linear-gradient(145deg,#171717,#090909);border:1px solid #252525;border-radius:22px;padding:23px;margin-top:18px;box-shadow:inset 0 1px rgba(255,255,255,.06),0 20px 50px #000}
textarea{width:100%;min-height:210px;background:#080808;color:#fff;border:1px solid #292929;border-radius:14px;padding:15px;font-size:15px}button,select{padding:12px 16px;border-radius:11px;font-size:15px}button{border:0;background:linear-gradient(135deg,#ffe033,#ffbd00);font-weight:850;color:#080808;cursor:pointer;box-shadow:0 0 22px rgba(255,212,0,.18)}select{background:#101010;color:#eee;border:1px solid #292929}.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}#result{line-height:1.6;color:#f3f3f3;min-height:70px}.small{color:#777;font-size:12px}
</style></head><body><div class="wrap"><div class="hero"><h1>✦ Spark<span class="y">Script</span></h1><div class="tag">Say something worth replying to</div></div>
<div class="card"><h2>Drop in the profile</h2><textarea id="profile" placeholder="Paste profile text here..."></textarea><div class="row"><select id="style"><option>Natural & Catchy</option><option>Playful</option><option>Faith & Values</option></select><button onclick="make()">⚡ WRITE MY OPENER</button></div></div>
<div class="card"><div class="small y">YOUR OPENER</div><div id="result"><br>Your message will appear here.</div><div class="row"><button onclick="copy()">COPY MESSAGE</button><span id="count" class="small"></span></div></div></div>
<script>function make(){let t=document.getElementById('profile').value.trim();if(!t)return alert('Paste profile text first.');let n=(t.match(/^([A-ZÀ-ÖØ-Þ][A-Za-zÀ-ÿ'’.-]{1,25})(?:\s*,?\s*\d{2})?$/m)||[])[1]||'there';let topics=[['faith','faith'],['church','church'],['concert','music/concerts'],['travel','travel'],['children','working with children'],['coffee','coffee'],['family','family']];let a=(topics.find(x=>t.toLowerCase().includes(x[0]))||['','what you wrote in your profile'])[1];let m=`Hey ${n}! Your profile actually gave me something better to say than the usual “hey, how are you?” 😄 The part about ${a} caught my attention, so I figured I’d say hi instead of just leaving a like. What’s something you’ve been really enjoying lately that you could happily talk about for way too long?`;if(m.length>399)m=m.slice(0,396)+'...';document.getElementById('result').textContent=m;document.getElementById('count').textContent=m.length+' / 399'}async function copy(){await navigator.clipboard.writeText(document.getElementById('result').textContent)}</script></body></html>