Hugging Face's logo

Spaces:
skailiner
/
SkaiStack
Running

App Files Community
SkaiStack / index.html
citispire
Rename product under Skai portfolio
8183b89
Raw History Blame Contribute Delete
9.75 kB
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SkaiStack — Price creator deals with confidence</title><style>
:root{--ink:#2c173b;--muted:#667085;--line:#eadcf1;--brand:#8b3dad;--soft:#fbf5ff}*{box-sizing:border-box}body{margin:0;background:#faf7fc;color:var(--ink);font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif}.shell{max-width:1160px;margin:auto;padding:24px}.hero{padding:30px;border-radius:24px;background:linear-gradient(135deg,#180f2a,#542b79 58%,#d45ea7);color:white;box-shadow:0 20px 55px #34164a2b}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12px;font-weight:800;color:#f3bfe1}.hero h1{font-size:40px;letter-spacing:-.04em;margin:7px 0 3px}.hero p{margin:0;color:#f6e7ff;font-size:17px}.layout{display:grid;grid-template-columns:5fr 6fr;gap:18px;margin-top:18px}.panel{background:white;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 8px 30px #431f600a}.grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.full{grid-column:1/-1}label{display:block;color:#50325e;font-size:13px;font-weight:700;margin-bottom:5px}input,select,textarea{width:100%;border:1px solid #dbc8e4;border-radius:10px;padding:11px 12px;background:white;color:var(--ink);font:inherit}.checks{display:grid;grid-template-columns:1fr 1fr;gap:7px}.checks label{display:flex;gap:7px;align-items:center;font-weight:500}.checks input{width:auto}button{border:0;border-radius:11px;padding:12px 16px;background:var(--brand);color:white;font-weight:800;cursor:pointer}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.metric{padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--soft)}.metric span{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:19px;margin-top:4px}table{width:100%;border-collapse:collapse;margin-top:16px;font-size:13px}th,td{text-align:left;border-bottom:1px solid var(--line);padding:9px}th{color:#6f4c80}.pitch{white-space:pre-wrap;background:#24132f;color:#f8ebff;border-radius:13px;padding:15px;min-height:300px;margin-top:10px;font:13px/1.55 ui-monospace,Consolas,monospace}.note{font-size:12px;color:var(--muted);margin-top:12px}@media(max-width:850px){.layout{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.shell{padding:14px}.hero h1{font-size:32px}}
</style></head><body><main class="shell"><section class="hero"><div class="eyebrow">Creator partnership desk</div><h1>SkaiStack</h1><p>Turn reach, rights, and production effort into a defensible brand-deal rate.</p></section><div class="layout"><section class="panel"><div class="grid">
<div><label for="creator">Creator / channel</label><input id="creator" value="Alex Creates"></div><div><label for="brand">Brand</label><input id="brand" value="Northstar Labs"></div><div><label for="platform">Platform</label><select id="platform"><option>Instagram</option><option>TikTok</option><option>YouTube</option><option>LinkedIn</option><option>Newsletter</option><option>Podcast</option></select></div><div><label for="niche">Niche</label><select id="niche"><option>Business / entrepreneurship</option><option>Technology</option><option>Finance</option><option>Beauty / fashion</option><option>Health / wellness</option><option>Food / travel</option><option>Gaming</option><option>Lifestyle</option></select></div><div><label for="followers">Followers</label><input id="followers" type="number" value="48000"></div><div><label for="views">Average views</label><input id="views" type="number" value="18500"></div><div><label for="engagement">Engagement %</label><input id="engagement" type="number" value="4.8"></div><div><label for="hours">Production hours</label><input id="hours" type="number" value="10"></div><div class="full"><label>Deliverables</label><div class="checks" id="deliverables"><label><input type="checkbox" value="Short-form video" data-w="1" checked>Short-form video</label><label><input type="checkbox" value="Long-form integration" data-w="1.8">Long-form integration</label><label><input type="checkbox" value="Static post / carousel" data-w=".65">Static post / carousel</label><label><input type="checkbox" value="Story set" data-w=".45" checked>Story set</label><label><input type="checkbox" value="Newsletter feature" data-w="1">Newsletter feature</label><label><input type="checkbox" value="Raw footage" data-w=".55">Raw footage</label></div></div><div><label for="rights">Usage rights</label><select id="rights"><option value=".1">Organic repost only</option><option value=".35" selected>30-day paid usage</option><option value=".65">90-day paid usage</option><option value="1.1">12-month paid usage</option><option value="1.75">Perpetual usage</option></select></div><div><label for="exclusive">Exclusivity</label><select id="exclusive"><option value="0">None</option><option value=".1">7 days</option><option value=".3" selected>30 days</option><option value=".65">90 days</option></select></div><div><label for="hourly">Minimum hourly value</label><input id="hourly" type="number" value="75"></div><div><label for="costs">Hard costs</label><input id="costs" type="number" value="100"></div><div><label for="currency">Currency</label><select id="currency"><option value="$">USD ($)</option><option value="€">EUR (€)</option><option value="£">GBP (£)</option><option value="S$">SGD (S$)</option><option value="A$">AUD (A$)</option></select></div><div class="full"><label for="goal">Campaign goal</label><input id="goal" value="help independent founders discover a simpler workflow"></div></div><button id="price" style="margin-top:15px">Price this partnership</button></section>
<section class="panel"><div class="metrics"><div class="metric"><span>Quote to send</span><strong id="quote">—</strong></div><div class="metric"><span>Negotiation floor</span><strong id="floor">—</strong></div><div class="metric"><span>Premium anchor</span><strong id="premium">—</strong></div><div class="metric"><span>Qualified views</span><strong id="quality">—</strong></div></div><table id="packages"></table><h3>Ready-to-send pitch</h3><div class="pitch" id="pitch"></div><button id="download" style="margin-top:14px">Download rate card</button><div class="note">Planning aid only. Validate against audience quality, past conversions, contract, taxes, and current demand.</div></section></div></main><script>
const $=id=>document.getElementById(id),n=id=>Math.max(Number($(id).value)||0,0),cpms={'Business / entrepreneurship':34,Technology:36,Finance:42,'Beauty / fashion':25,'Health / wellness':29,'Food / travel':23,Gaming:24,Lifestyle:22},pf={Instagram:1,TikTok:.95,YouTube:1.25,LinkedIn:1.2,Newsletter:1.15,Podcast:1.1},money=(v,s)=>s+v.toLocaleString(undefined,{maximumFractionDigits:0});let card='';function calculate(){const s=$('currency').value,selected=[...document.querySelectorAll('#deliverables input:checked')],items=selected.map(x=>x.value),work=selected.reduce((a,x)=>a+Number(x.dataset.w),0)||1,quality=Math.max(n('views'),n('followers')*n('engagement')/100*2.5),media=Math.max(quality/1000*cpms[$('niche').value]*pf[$('platform').value],75)*work,prod=n('hours')*n('hourly')+n('costs'),suggested=Math.max(media*(1+Number($('rights').value)+Number($('exclusive').value)),prod),quote=Math.max(Math.ceil(suggested/25)*25,100),floor=Math.max(Math.ceil(Math.max(prod,quote*.75)/25)*25,75),premium=Math.ceil(quote*1.35/25)*25;$('quote').textContent=money(quote,s);$('floor').textContent=money(floor,s);$('premium').textContent=money(premium,s);$('quality').textContent=Math.round(quality).toLocaleString();const rows=[['Essential',floor,'Core deliverables; organic repost rights; one revision'],['Campaign',quote,'Selected deliverables; agreed usage; two revisions'],['Amplify',premium,'Campaign package plus alternate hook, reporting recap, and priority delivery']];$('packages').innerHTML='<tr><th>Package</th><th>Rate</th><th>Includes</th></tr>'+rows.map(r=>`<tr><td>${r[0]}</td><td>${money(r[1],s)}</td><td>${r[2]}</td></tr>`).join('');const creator=$('creator').value.trim()||'Creator',brand=$('brand').value.trim()||'Brand partner',goal=$('goal').value.trim()||'reach the right audience',list=items.map(x=>'• '+x).join('\n')||'• Short-form video';$('pitch').textContent=`Subject: ${creator} × ${brand} — ${goal.charAt(0).toUpperCase()+goal.slice(1)}\n\nHi ${brand} team,\n\nI'd love to build a ${$('platform').value} campaign designed to ${goal}.\n\nMy recent content averages ${n('views').toLocaleString()} views with ${n('engagement').toFixed(1)}% engagement, and the audience fit is especially strong for ${$('niche').value.toLowerCase()} brands.\n\nFor the requested scope, my campaign rate is ${money(quote,s)}:\n\n${list}\n\nIf that fits your brief, I can send a one-page concept and delivery schedule next.\n\nBest,\n${creator}`;card=`# ${creator} — partnership rate card\n\nPlatform: ${$('platform').value}\nNiche: ${$('niche').value}\nAudience: ${n('followers').toLocaleString()}\nAverage views: ${n('views').toLocaleString()}\nEngagement: ${n('engagement').toFixed(1)}%\n\n## Campaign scope\n\n${list}\n\n## Investment\n\n- Negotiation floor: ${money(floor,s)}\n- Recommended quote: ${money(quote,s)}\n- Premium package: ${money(premium,s)}\n\nRates are planning estimates and exclude applicable tax. Final pricing depends on the confirmed brief, revisions, licensing, exclusivity, and production requirements.`}$('price').onclick=calculate;$('download').onclick=()=>{calculate();const a=document.createElement('a');a.href=URL.createObjectURL(new Blob([card],{type:'text/markdown'}));a.download='skaistack-rate-card.md';a.click();URL.revokeObjectURL(a.href)};calculate();
</script></body></html>