Hugging Face's logo

Spaces:
getreadystack
/
ai-time-saved-calculator
Running

App Files Community
ai-time-saved-calculator / index.html
getreadystack's picture
getreadystack
Upload index.html with huggingface_hub
2876410 verified
Raw History Blame Contribute Delete
18.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AI Time-Saved Calculator — How Many Hours Can You Reclaim? | ReadyStack</title>
<meta name="description" content="Enter the hours you spend on repetitive work and see how many you could reclaim with AI &amp; automation. Free, no signup. Honest estimates — no inflated numbers.">
<link rel="canonical" href="https://getreadystack.com/tools/ai-time-saved-calculator">
<meta property="og:title" content="How many hours could AI give you back?">
<meta property="og:description" content="Answer 5 quick fields, see the hours (and money) you could reclaim every week. Free.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://getreadystack.com/tools/ai-time-saved-calculator.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:22px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#222540;border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin-bottom:10px}
.row label{font-size:.97rem;flex:1}
.row .cut{color:var(--mut);font-size:.74rem;display:block;margin-top:2px}
.row input{width:74px;background:#161a35;border:1px solid var(--line);border-radius:9px;color:var(--ink);font-size:1rem;font-family:inherit;padding:9px 10px;text-align:center}
.row input:focus{outline:none;border-color:var(--acc)}
.rate{margin:14px 0 4px;color:var(--mut);font-size:.9rem}
.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;margin-top:14px}
.btn:active{transform:scale(.98)}
.btn.alt{background:transparent;border:1px solid var(--line);color:var(--ink);margin-top:10px}
.qn{color:var(--mut);font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.score{font-size:3.6rem;font-weight:800;line-height:1.05;background:linear-gradient(135deg,var(--acc2),#6cf2cf);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.score small{font-size:1.1rem;color:var(--mut);-webkit-text-fill-color:var(--mut);font-weight:600}
.grade{font-size:1.3rem;font-weight:700;margin:8px 0 2px}
.blocks{font-size:1.5rem;letter-spacing:3px;margin:14px 0;word-break:break-all}
.lines{display:grid;gap:7px;margin:16px 0}
.ln{display:flex;justify-content:space-between;background:#202444;border-radius:9px;padding:9px 13px;font-size:.9rem;color:#cdd2f0}
.ln b{color:var(--acc2)}
.money{background:#202444;border-left:3px solid var(--acc2);border-radius:8px;padding:14px 16px;color:#cdd2f0;margin:14px 0;font-size:1rem}
.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">
<section id="intro">
<h1>How many hours can AI give you back?</h1>
<p class="sub">Enter the hours you spend each week on these. We use realistic AI &amp; automation reduction rates — no inflated numbers.</p>
<div class="row"><label>Emails &amp; messages<span class="cut">AI typically cuts ~50%</span></label><input type="number" min="0" max="80" id="t0" placeholder="0"></div>
<div class="row"><label>Docs, content &amp; social posts<span class="cut">~55%</span></label><input type="number" min="0" max="80" id="t1" placeholder="0"></div>
<div class="row"><label>Research &amp; summarizing<span class="cut">~60%</span></label><input type="number" min="0" max="80" id="t2" placeholder="0"></div>
<div class="row"><label>Data, reports &amp; spreadsheets<span class="cut">~45%</span></label><input type="number" min="0" max="80" id="t3" placeholder="0"></div>
<div class="row"><label>Scheduling, admin &amp; repetitive tasks<span class="cut">~65% with automation</span></label><input type="number" min="0" max="80" id="t4" placeholder="0"></div>
<div class="rate">Optional — your hourly value ($) to see money saved:</div>
<div class="row"><label>My time is worth (per hour)</label><input type="number" min="0" max="1000" id="rate" placeholder="$"></div>
<button class="btn" id="calc">Calculate my time saved →</button>
</section>
<section id="result" class="hide">
<div class="qn">You could reclaim about</div>
<div class="score" id="hrsWk">0 <small>hrs / week</small></div>
<div class="grade" id="gradeLbl"></div>
<div class="blocks" id="blocks"></div>
<div class="money hide" id="money"></div>
<div class="lines" id="lines"></div>
<button class="btn" id="share">📋 Copy my result</button>
<button class="btn alt" id="shareX">Share on X</button>
<button class="btn alt" id="shareImg">🖼️ Share my result 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: Notion Productivity Starter</b>
<p>Turn reclaimed hours into a system — we'll email you the free Notion starter (PDF). Optional: your result above is complete 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">Recalculate</button>
</section>
</div>
<p class="foot">Honest by design: estimates use typical AI/automation time-reduction ranges — real results vary, and nothing is stored. · <a href="https://getreadystack.com">ReadyStack</a></p>
</div>
<script src="/js/hub-api.js"></script>
<script>
(function(){
var el=function(id){return document.getElementById(id)};
function show(s){['intro','result'].forEach(function(x){el(x).classList.add('hide')});el(s).classList.remove('hide')}
var CATS=[
{id:'t0', name:'Emails & messages', f:0.50},
{id:'t1', name:'Docs, content & social', f:0.55},
{id:'t2', name:'Research & summarizing', f:0.60},
{id:'t3', name:'Data, reports & sheets', f:0.45},
{id:'t4', name:'Admin & repetitive', f:0.65}
];
function num(id){var v=parseFloat(el(id).value);return (isNaN(v)||v<0)?0:Math.min(v,80)}
function grade(h){
if(h>=15)return{g:'That’s a big leak',c:'Plug it — automations that run without you',cc:'Get the Automation Kit'};
if(h>=7)return{g:'Real time on the table',c:'Turn these into set-and-forget workflows',cc:'Get the Workflow Kit'};
if(h>=2)return{g:'Worth reclaiming',c:'Start with ready-made templates that skip setup',cc:'Get the Templates'};
return{g:'You’re already lean',c:'Push further with proven prompts & systems',cc:'Get the Prompt Pack'};
}
function run(){
var weekly=0, lines=[];
CATS.forEach(function(c){
var h=num(c.id);
if(h>0){ var s=h*c.f; weekly+=s; lines.push({n:c.name, s:s}); }
});
weekly=Math.round(weekly*10)/10;
var monthly=Math.round(weekly*4.33);
var g=grade(weekly);
var filled=Math.min(10, Math.round(weekly/2));
var blocks=Array(10).fill('').map(function(_,k){return k<filled?'🟩':'⬜'}).join('');
el('hrsWk').innerHTML=weekly+' <small>hrs / week</small>';
el('gradeLbl').textContent=g.g+' — ≈ '+monthly+' hrs/month';
el('blocks').textContent=blocks;
var rate=num('rate');
var moneyTxt='';
if(rate>0){
var mMonth=Math.round(weekly*4.33*rate);
var mYear=Math.round(weekly*52*rate);
moneyTxt='≈ $'+mMonth.toLocaleString()+'/month — about $'+mYear.toLocaleString()+' of your time back per year.';
el('money').textContent=moneyTxt;
el('money').classList.remove('hide');
} else { el('money').classList.add('hide'); }
el('lines').innerHTML=lines.map(function(l){
return '<div class="ln"><span>'+l.n+'</span><b>'+(Math.round(l.s*10)/10)+' hrs/wk</b></div>';
}).join('') || '<div class="ln"><span>Enter your hours above to see the breakdown.</span></div>';
el('ctaTitle').textContent=g.c;
el('ctaBtn').textContent=g.cc+' →';
show('result');
window.__card='With AI I could reclaim ~'+weekly+' hrs/week '+blocks+' (≈ '+monthly+' hrs/month)'+(rate>0?' · '+moneyTxt:'')+'\nCalculate yours 👉 https://getreadystack.com/tools/ai-time-saved-calculator.html';
window.__toolResult={tool:'ai_time_saved',score:weekly,grade:g.g}; // ★ A4: 결과 스냅샷(구독 시 동봉)
}
el('calc').addEventListener('click',run);
el('retake').addEventListener('click',function(){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 result'},1800)})}
});
el('shareX').addEventListener('click',function(){
window.open('https://twitter.com/intent/tweet?text='+encodeURIComponent(window.__card||''),'_blank','noopener')
});
// --- optional email opt-in (result above is never gated; only network call on this page: POST /api/subscribe via HubAPI) ---
var MAGNET='notion_template', NICHE='automation'; // ★ 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 TIME RECLAIMED',80,132);
var tr=window.__toolResult||{},hrs=(tr.score!=null?String(tr.score):'0');
x.fillStyle='#00d2a8';x.font='800 140px '+FF;x.fillText(hrs,80,286);
var nw=x.measureText(hrs).width;
x.fillStyle='#9aa0bf';x.font='700 40px '+FF;x.fillText('hrs / week',80+nw+22,286);
x.fillStyle='#f4f5fb';x.font='700 34px '+FF;x.fillText((el('gradeLbl').textContent||'').slice(0,48),80,352);
var by=420,mo=el('money');
if(mo&&!mo.classList.contains('hide')&&mo.textContent){x.fillStyle='#cdd2f0';x.font='500 27px '+FF;x.fillText(mo.textContent.slice(0,52),80,398);by=442;}
var filled=_greenCount(),bx=80,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('Calculate yours free',80,H-54);
return c;
}
function _shareCard(){
var canvas;try{canvas=buildCard();}catch(e){return;}
if(!canvas)return;
var fname='readystack-ai-time-saved.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 Time Saved'}).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-time-saved-calculator&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>