ai-productivity-score / index.html
getreadystack's picture
Upload index.html with huggingface_hub
e786548 verified
Raw History Blame Contribute Delete
17.1 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Productivity Score — Test Yours Free | ReadyStack</title>
<meta name="description" content="How AI-productive are you really? Answer 10 quick questions and get your AI Productivity Score (0-100) with a personalized next step. Free, no signup.">
<link rel="canonical" href="https://getreadystack.com/tools/ai-productivity-score">
<meta property="og:title" content="What's your AI Productivity Score?">
<meta property="og:description" content="10 quick questions. Get your score 0-100 and see how you compare. Free.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getreadystack.com/tools/ai-productivity-score.html">
<meta name="twitter:card" content="summary_large_image">
<style>
:root{--bg:#0f1020;--card:#1a1c2e;--ink:#f4f5fb;--mut:#9aa0bf;--acc:#6c5ce7;--acc2:#00d2a8;--line:#2a2d44}
*{box-sizing:border-box;margin:0;padding:0}
body{background:linear-gradient(160deg,#0f1020,#161a35);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:24px}
.wrap{width:100%;max-width:600px;margin:auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
h1{font-size:1.9rem;line-height:1.2;margin-bottom:10px}
.sub{color:var(--mut);margin-bottom:24px}
.btn{display:inline-block;background:linear-gradient(135deg,var(--acc),#8a7bff);color:#fff;border:none;border-radius:12px;padding:15px 26px;font-size:1.05rem;font-weight:700;cursor:pointer;width:100%;transition:transform .08s}
.btn:active{transform:scale(.98)}
.btn.alt{background:transparent;border:1px solid var(--line);color:var(--ink);margin-top:10px}
.prog{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:22px}
.prog>i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2));width:0;transition:width .3s}
.q{font-size:1.3rem;font-weight:700;margin-bottom:6px}
.qn{color:var(--mut);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.opts{display:grid;gap:10px;margin-top:18px}
.opt{background:#222540;border:1px solid var(--line);border-radius:12px;padding:15px 18px;font-size:1rem;cursor:pointer;text-align:left;color:var(--ink);transition:.12s}
.opt:hover{border-color:var(--acc);background:#272a4a}
.score{font-size:4rem;font-weight:800;line-height:1;background:linear-gradient(135deg,var(--acc2),#6cf2cf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.grade{font-size:1.4rem;font-weight:700;margin:6px 0 2px}
.blocks{font-size:1.5rem;letter-spacing:3px;margin:16px 0;word-break:break-all}
.tip{background:#202444;border-left:3px solid var(--acc2);border-radius:8px;padding:14px 16px;color:#cdd2f0;margin:18px 0;font-size:.97rem}
.cta{background:linear-gradient(135deg,#1d2142,#262a52);border:1px solid var(--line);border-radius:14px;padding:20px;margin-top:18px;text-align:center}
.cta b{display:block;font-size:1.1rem;margin-bottom:8px}
.foot{color:var(--mut);font-size:.8rem;text-align:center;margin-top:22px}
.foot a{color:var(--acc2);text-decoration:none}
.optin{position:relative;background:#202444;border:1px dashed var(--acc2);border-radius:14px;padding:18px 16px 16px;margin-top:18px;text-align:center}
.optin b{display:block;font-size:1.05rem;margin-bottom:6px}
.optin p{color:var(--mut);font-size:.88rem;margin-bottom:10px}
.optin input{width:100%;background:#161a35;border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:1rem;font-family:inherit;padding:12px 14px}
.optin input:focus{outline:none;border-color:var(--acc)}
.optx{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--mut);font-size:1rem;cursor:pointer;padding:4px;line-height:1}
.optmsg{color:#cdd2f0;font-size:.9rem;margin-top:10px}
.optmsg a{color:var(--acc2)}
.hide{display:none}
</style>
<script data-grow-initializer="">!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement("script");(e.type="text/javascript"),(e.src="https://faves.grow.me/main.js"),(e.defer=!0),e.setAttribute("data-grow-faves-site-id","U2l0ZTphZjljMzgyMC0yMmU5LTRhYjgtYTIxNS03OTRhMGY1N2ExYzM=");var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t);})();</script>
</head>
<body>
<div class="wrap">
<div class="card">
<!-- INTRO -->
<section id="intro">
<h1>What's your AI Productivity Score?</h1>
<p class="sub">10 quick questions. Get your score (0-100) and one concrete next step. Free, no signup, ~40 seconds.</p>
<button class="btn" id="start">Start the test →</button>
</section>
<!-- QUIZ -->
<section id="quiz" class="hide">
<div class="prog"><i id="bar"></i></div>
<div class="qn" id="qn">Question 1 of 10</div>
<div class="q" id="qtext"></div>
<div class="opts">
<button class="opt" data-v="1" id="optYes">Yes, regularly</button>
<button class="opt" data-v="0.5" id="optSome">Sometimes</button>
<button class="opt" data-v="0" id="optNo">Not really</button>
</div>
</section>
<!-- RESULT -->
<section id="result" class="hide">
<div class="qn">Your AI Productivity Score</div>
<div class="score" id="scoreNum">0</div>
<div class="grade" id="gradeLbl"></div>
<div class="blocks" id="blocks"></div>
<div class="tip" id="tip"></div>
<button class="btn" id="share">📋 Copy my score card</button>
<button class="btn alt" id="shareX">Share on X</button>
<button class="btn alt" id="shareImg">🖼️ Share my score image</button>
<!-- OPT-IN (optional -- the result above is never gated; skip/close always visible) -->
<div class="optin" id="optin">
<button class="optx" id="optClose" aria-label="Close" title="Close">✕</button>
<b>Free next step: 50 ChatGPT Prompts for Productivity</b>
<p>Want to raise your score? We'll email you the free PDF — proven, copy-ready prompts. Optional: your score above is yours either way.</p>
<input type="email" id="optEmail" placeholder="you@email.com" autocomplete="email">
<button class="btn" id="optSend">📩 Email me the free PDF</button>
<button class="btn alt" id="optSkip">No thanks — skip</button>
<p class="optmsg hide" id="optMsg"></p>
</div>
<div class="cta">
<b id="ctaTitle"></b>
<a class="btn" id="ctaBtn" href="https://getreadystack.com" target="_blank" rel="noopener" style="text-decoration:none">See it →</a>
</div>
<button class="btn alt" id="retake">Retake</button>
</section>
</div>
<p class="foot">Honest by design: your score is based only on your own answers — no fake stats. · <a href="https://getreadystack.com">ReadyStack</a></p>
</div>
<script src="/js/hub-api.js"></script>
<script>
(function(){
var Q=[
"Do you use AI tools (ChatGPT, Claude, etc.) for work tasks every week?",
"Do you save and reuse your best prompts instead of rewriting them?",
"Do you use any automation (Zapier, Make, n8n) to remove repetitive work?",
"Do you use AI to draft emails, posts, or documents?",
"Do you use AI to summarize or research faster?",
"Have you built a custom GPT, template, or workflow you reuse?",
"Do you use ready-made templates to skip setup time?",
"Do you batch similar tasks instead of switching constantly?",
"Do you know where most of your work hours actually go?",
"Do you use AI to analyze data or spot patterns?"
];
var TOTAL=Q.length, i=0, sum=0;
var el=function(id){return document.getElementById(id)};
function show(s){['intro','quiz','result'].forEach(function(x){el(x).classList.add('hide')});el(s).classList.remove('hide')}
function render(){
el('qn').textContent='Question '+(i+1)+' of '+TOTAL;
el('qtext').textContent=Q[i];
el('bar').style.width=(i/TOTAL*100)+'%';
}
function pick(v){ sum+=v; i++; if(i<TOTAL){render()} else {finish()} }
function grade(s){
if(s>=85)return{g:'AI Master',t:"You're in rare territory. The next gain is leverage: turn your systems into assets. Our Pro Bundle packages advanced workflows you can deploy today.",c:'Get the Pro Bundle'};
if(s>=65)return{g:'AI Pro',t:"Strong. Your biggest unlock now is automation depth — chaining tools so work runs without you. Our Workflow Kit shows the exact setups.",c:'Get the Workflow Kit'};
if(s>=40)return{g:'Rising',t:"You've got momentum. The fastest jump from here: stop rebuilding from scratch. Our Productivity Templates cut your setup time in half.",c:'Get the Templates'};
return{g:'Beginner',t:"Great starting point — small habits compound fast. Begin with reusable prompts: our AI Prompt Pack gives you proven ones to copy today.",c:'Get the Prompt Pack'};
}
function finish(){
el('bar').style.width='100%';
var score=Math.round(sum/TOTAL*100);
var g=grade(score);
var filled=Math.round(score/10);
var blocks=Array(10).fill('').map(function(_,k){return k<filled?'🟩':'⬜'}).join('');
el('scoreNum').textContent=score;
el('gradeLbl').textContent=g.g;
el('blocks').textContent=blocks;
el('tip').textContent=g.t;
el('ctaTitle').textContent=g.c;
show('result');
window.__card='My AI Productivity Score: '+score+'/100 '+blocks+' ('+g.g+')\nTest yours 👉 https://getreadystack.com/tools/ai-productivity-score.html';
window.__toolResult={tool:'ai_productivity_score',score:score,grade:g.g}; // ★ A4: 결과 스냅샷(구독 시 동봉)
}
el('start').addEventListener('click',function(){i=0;sum=0;render();show('quiz')});
el('optYes').addEventListener('click',function(){pick(1)});
el('optSome').addEventListener('click',function(){pick(0.5)});
el('optNo').addEventListener('click',function(){pick(0)});
el('retake').addEventListener('click',function(){i=0;sum=0;show('intro')});
el('share').addEventListener('click',function(){
var t=window.__card||'';
if(navigator.share){navigator.share({text:t}).catch(function(){})}
else{navigator.clipboard.writeText(t).then(function(){el('share').textContent='✅ Copied!';setTimeout(function(){el('share').textContent='📋 Copy my score card'},1800)})}
});
el('shareX').addEventListener('click',function(){
var t=encodeURIComponent(window.__card||'');
window.open('https://twitter.com/intent/tweet?text='+t,'_blank','noopener')
});
// --- optional email opt-in (result above is never gated; only network call on this page: POST /api/subscribe via HubAPI) ---
var MAGNET='ai_prompts_50', NICHE='ai_productivity'; // ★ A4: 니치 태그(도구→유료상품 니치)
var EMAIL_OK=/^[^\s@]+@[^\s@]+\.[^\s@]+$/;
function optMsg(t){var m=el('optMsg');m.textContent=t;m.classList.remove('hide');return m}
function optClose(){el('optin').classList.add('hide')}
function optReset(b){b.disabled=false;b.textContent='📩 Email me the free PDF'}
el('optClose').addEventListener('click',optClose);
el('optSkip').addEventListener('click',optClose);
el('optSend').addEventListener('click',function(){
var email=(el('optEmail').value||'').trim(), btn=el('optSend');
if(!EMAIL_OK.test(email)||email.length>255){el('optEmail').style.borderColor='#ffb454';el('optEmail').focus();return}
if(!(window.HubAPI&&HubAPI.subscribe)){optMsg("Sign-up isn't available right now — no worries, your result above is complete.");return}
btn.disabled=true;btn.textContent='Sending…';
try{
HubAPI.subscribe(email,MAGNET,(HubAPI.detectLang?HubAPI.detectLang():'en'),{niche:NICHE,result:(window.__toolResult||null)}).then(function(r){ // ★ A4: 니치+결과 동봉
if(r&&r.status===200&&r.data&&r.data.download_url){
el('optEmail').classList.add('hide');el('optSkip').classList.add('hide');btn.classList.add('hide');
var m=optMsg('Sent! Check your inbox — or grab it now: ');
var a=document.createElement('a');a.href=r.data.download_url;a.target='_blank';a.rel='noopener';a.textContent='download the PDF';m.appendChild(a);
}else if(r&&r.status===503){
optMsg('This freebie unlocks at launch — check back soon. Your result above is complete either way.');optReset(btn);
}else{
optMsg("Couldn't send right now — try again in a bit. Your result above is complete.");optReset(btn);
}
}).catch(function(){optMsg("Couldn't reach the server — try again later. Your result above is complete.");optReset(btn)});
}catch(e){optMsg("Couldn't send right now — your result above is complete.");optReset(btn)}
});
// ── ★ 2026-07-09 C1: 결과 카드 이미지(확산 장치) — 실제 점수만 canvas로 그림. 네트워크/LLM 0, 가짜 통계 0. 기존 텍스트 카드는 폴백 유지. ──
function _greenCount(){var s=el('blocks').textContent||'',n=0,a=Array.from(s);for(var k=0;k<a.length;k++){if(a[k]==='🟩')n++;}return n;}
function _rr(x,px,py,w,h,r){x.beginPath();x.moveTo(px+r,py);x.arcTo(px+w,py,px+w,py+h,r);x.arcTo(px+w,py+h,px,py+h,r);x.arcTo(px,py+h,px,py,r);x.arcTo(px,py,px+w,py,r);x.closePath();}
function buildCard(){
var W=1200,H=630,c=document.createElement('canvas');c.width=W;c.height=H;var x=c.getContext('2d');
if(!x)return null;
var FF='-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif';
var g=x.createLinearGradient(0,0,W,H);g.addColorStop(0,'#0f1020');g.addColorStop(1,'#161a35');x.fillStyle=g;x.fillRect(0,0,W,H);
x.fillStyle='#1a1c2e';_rr(x,40,40,W-80,H-80,28);x.fill();x.lineWidth=2;x.strokeStyle='rgba(255,255,255,0.08)';_rr(x,40,40,W-80,H-80,28);x.stroke();
x.textAlign='left';
x.fillStyle='#9aa0bf';x.font='600 30px '+FF;x.fillText('AI PRODUCTIVITY SCORE',80,132);
var sc=el('scoreNum').textContent||'0';
x.fillStyle='#00d2a8';x.font='800 148px '+FF;x.fillText(sc,80,292);
var nw=x.measureText(sc).width;
x.fillStyle='#9aa0bf';x.font='700 46px '+FF;x.fillText('/ 100',80+nw+22,292);
x.fillStyle='#f4f5fb';x.font='700 50px '+FF;x.fillText((el('gradeLbl').textContent||'').slice(0,42),80,372);
var filled=_greenCount(),bx=80,by=418,seg=98,gap=12,sh=34;
for(var i=0;i<10;i++){_rr(x,bx+i*(seg+gap),by,seg,sh,9);x.fillStyle=(i<filled)?'#00d2a8':'#2a2d44';x.fill();}
x.fillStyle='#6c5ce7';x.font='700 30px '+FF;x.fillText('getreadystack.com',80,H-92);
x.fillStyle='#9aa0bf';x.font='500 27px '+FF;x.fillText('Test yours free',80,H-54);
return c;
}
function _shareCard(){
var canvas;try{canvas=buildCard();}catch(e){return;}
if(!canvas)return;
var fname='readystack-ai-productivity-score.png',txt=window.__card||'',btn=el('shareImg'),orig=btn?btn.textContent:'';
function done(m){if(btn){btn.textContent=m;setTimeout(function(){btn.textContent=orig},1900);}}
function dl(url){var a=document.createElement('a');a.href=url;a.download=fname;document.body.appendChild(a);a.click();document.body.removeChild(a);}
function fb(blob){var u=URL.createObjectURL(blob);dl(u);setTimeout(function(){URL.revokeObjectURL(u)},5000);done('✅ Saved!');}
if(canvas.toBlob){
canvas.toBlob(function(blob){
if(!blob)return;
try{
var file=new File([blob],fname,{type:'image/png'});
if(navigator.canShare&&navigator.canShare({files:[file]})){
navigator.share({files:[file],text:txt,title:'My AI Productivity Score'}).then(function(){done('✅ Shared!');}).catch(function(){fb(blob);});
return;
}
}catch(e){}
fb(blob);
},'image/png');
}else{try{dl(canvas.toDataURL('image/png'));done('✅ Saved!');}catch(e){}}
}
if(el('shareImg'))el('shareImg').addEventListener('click',_shareCard);
})();
</script>
<section data-yj-cta="paid" style="margin:3rem auto;max-width:46rem;padding:1.5rem 1.25rem;border:1px solid #d8dee9;border-radius:12px;background:#fbfcfe;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif"><h2 style="margin:0 0 .5rem;font-size:1.25rem">Get the complete version</h2><p style="margin:.25rem 0 1rem;color:#41505f">This page is the working piece. The full pack has everything below.</p><a href="https://getreadystack.com/free?p=ai-productivity-score&amp;lang=en" rel="nofollow" style="display:inline-block;padding:.7rem 1.3rem;border-radius:8px;background:#1b64f2;color:#fff;text-decoration:none;font-weight:600">Send it to me</a></section>
<script data-yj="yj-view-beacon">(function(){try{var p=location.pathname;var k='yjv:'+p;if(sessionStorage.getItem(k))return;sessionStorage.setItem(k,'1');fetch('/api/ev',{method:'POST',keepalive:true,headers:{'Content-Type':'application/json'},body:JSON.stringify({path:p,lang:"en"})}).catch(function(){});}catch(e){}})();</script>
</body>
</html>