/* ===== TIME LEAK AUDIT — Scoped Styles ===== */
.tla__ * { box-sizing: border-box; }
.tla__ {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
color: #1a1a2e;
max-width: 860px;
margin: 0 auto;
padding: 0;
line-height: 1.6;
}/* ---------- Typography ---------- */
.tla__title {
font-size: 2rem;
font-weight: 800;
text-align: center;
margin: 0 0 6px;
color: #0A0F1E;
}
.tla__subtitle {
text-align: center;
color: #555;
font-size: 1.05rem;
margin: 0 0 32px;
}
.tla__section-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 4px;
color: #0A0F1E;
}
.tla__section-desc {
color: #666;
font-size: 0.92rem;
margin: 0 0 20px;
}/* ---------- Step indicator ---------- */
.tla__steps {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 36px;
}
.tla__step-dot {
width: 40px;
height: 5px;
border-radius: 3px;
background: #e0e0e0;
transition: background 0.4s ease, width 0.4s ease;
}
.tla__step-dot.active {
background: #F5C842;
width: 56px;
}
.tla__step-dot.done {
background: #5EEAD4;
}/* ---------- Panels ---------- */
.tla__panel {
display: none;
animation: tla_fadeIn 0.45s ease;
}
.tla__panel.active { display: block; }
@keyframes tla_fadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}/* ---------- Step 1 — Hourly rate ---------- */
.tla__rate-display {
text-align: center;
margin: 24px 0 12px;
}
.tla__rate-value {
font-size: 3.2rem;
font-weight: 800;
color: #0A0F1E;
line-height: 1;
}
.tla__rate-value span { color: #F5C842; }
.tla__rate-label {
font-size: 0.88rem;
color: #888;
margin-top: 2px;
}
.tla__slider-wrap {
position: relative;
padding: 0 4px;
margin: 20px 0 8px;
}
.tla__slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 8px;
border-radius: 4px;
background: linear-gradient(90deg, #5EEAD4 0%, #F5C842 50%, #ff6b6b 100%);
outline: none;
cursor: pointer;
}
.tla__slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A0F1E;
border: 3px solid #F5C842;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
transition: transform 0.15s ease;
}
.tla__slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.tla__slider::-moz-range-thumb {
width: 28px;
height: 28px;
border-radius: 50%;
background: #0A0F1E;
border: 3px solid #F5C842;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.tla__slider-labels {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: #aaa;
margin-top: 4px;
}/* Quick-pick presets */
.tla__presets {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin: 20px 0 0;
}
.tla__preset {
padding: 6px 16px;
border-radius: 20px;
border: 1.5px solid #ddd;
background: #fafafa;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
color: #444;
font-weight: 500;
}
.tla__preset:hover { border-color: #F5C842; background: #fffdf0; }
.tla__preset.selected { border-color: #F5C842; background: #F5C842; color: #0A0F1E; font-weight: 700; }/* ---------- Step 2 — Tasks ---------- */
.tla__task-list { display: flex; flex-direction: column; gap: 10px; }
.tla__task {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 12px;
border: 1.5px solid #eee;
background: #fafafa;
transition: all 0.25s ease;
flex-wrap: wrap;
}
.tla__task.active-task {
border-color: #5EEAD4;
background: #f0fdfb;
box-shadow: 0 2px 12px rgba(94,234,212,0.15);
}
.tla__task-icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.15rem;
flex-shrink: 0;
background: #f0f0f0;
transition: background 0.25s;
}
.tla__task.active-task .tla__task-icon { background: #5EEAD4; }
.tla__task-info { flex: 1; min-width: 140px; }
.tla__task-name {
font-weight: 600;
font-size: 0.92rem;
color: #1a1a2e;
margin: 0;
}
.tla__task-sub {
font-size: 0.78rem;
color: #999;
margin: 0;
}
.tla__task-slider-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.tla__task-slider {
-webkit-appearance: none;
appearance: none;
width: 120px;
height: 6px;
border-radius: 3px;
background: #e0e0e0;
outline: none;
cursor: pointer;
transition: background 0.2s;
}
.tla__task.active-task .tla__task-slider { background: #c8f5ee; }
.tla__task-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #0A0F1E;
border: 2px solid #5EEAD4;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.tla__task-slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #0A0F1E;
border: 2px solid #5EEAD4;
cursor: pointer;
}
.tla__task-hours {
font-weight: 700;
font-size: 0.92rem;
min-width: 38px;
text-align: right;
color: #0A0F1E;
}
.tla__task-hours span { color: #999; font-weight: 400; font-size: 0.78rem; }/* Running total */
.tla__running-total {
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #0A0F1E, #162040);
border-radius: 12px;
padding: 16px 20px;
margin-top: 20px;
color: #fff;
}
.tla__running-total-label { font-size: 0.88rem; opacity: 0.8; }
.tla__running-total-value { font-size: 1.8rem; font-weight: 800; color: #F5C842; }
.tla__running-total-value span { font-size: 0.85rem; font-weight: 400; opacity: 0.7; color: #ccc; }/* ---------- Step 3 — Results ---------- */
.tla__results-hero {
text-align: center;
background: linear-gradient(135deg, #0A0F1E, #1a2540);
border-radius: 16px;
padding: 32px 20px;
margin-bottom: 24px;
color: #fff;
position: relative;
overflow: hidden;
}
.tla__results-hero::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(245,200,66,0.12) 0%, transparent 70%);
border-radius: 50%;
}
.tla__results-hero-label {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.6;
margin: 0 0 8px;
}
.tla__results-hero-hours {
font-size: 4rem;
font-weight: 900;
color: #F5C842;
line-height: 1;
margin: 0;
}
.tla__results-hero-hours small { font-size: 1.2rem; font-weight: 400; color: #ccc; }
.tla__results-hero-cost {
font-size: 1.4rem;
font-weight: 700;
color: #5EEAD4;
margin: 8px 0 0;
}
.tla__results-hero-cost small { font-size: 0.85rem; font-weight: 400; color: #aaa; }/* Stats grid */
.tla__stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 28px;
}
.tla__stat-card {
padding: 18px 16px;
border-radius: 12px;
border: 1.5px solid #eee;
text-align: center;
}
.tla__stat-number {
font-size: 1.8rem;
font-weight: 800;
color: #0A0F1E;
line-height: 1.1;
margin: 0;
}
.tla__stat-label {
font-size: 0.78rem;
color: #888;
margin: 4px 0 0;
}
.tla__stat-card.highlight {
background: linear-gradient(135deg, #fffde6, #fff8cc);
border-color: #F5C842;
}
.tla__stat-card.highlight .tla__stat-number { color: #b8860b; }
.tla__stat-card.teal { border-color: #5EEAD4; background: #f0fdfb; }
.tla__stat-card.teal .tla__stat-number { color: #0d9488; }/* Bar chart */
.tla__chart-section {
margin-bottom: 28px;
}
.tla__chart-title {
font-size: 1rem;
font-weight: 700;
margin: 0 0 14px;
color: #0A0F1E;
}
.tla__bar-chart { display: flex; flex-direction: column; gap: 8px; }
.tla__bar-row {
display: flex;
align-items: center;
gap: 10px;
}
.tla__bar-label {
width: 130px;
font-size: 0.8rem;
color: #555;
text-align: right;
flex-shrink: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tla__bar-track {
flex: 1;
height: 24px;
background: #f0f0f0;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.tla__bar-fill {
height: 100%;
border-radius: 6px;
transition: width 1s ease;
width: 0;
position: relative;
}
.tla__bar-fill.delegatable { background: linear-gradient(90deg, #5EEAD4, #3dd4b6); }
.tla__bar-fill.non-delegatable { background: linear-gradient(90deg, #F5C842, #e5b832); }
.tla__bar-value {
font-size: 0.75rem;
font-weight: 700;
min-width: 32px;
color: #333;
}/* Delegation breakdown */
.tla__delegation {
display: flex;
gap: 16px;
margin-bottom: 28px;
}
.tla__delegation-card {
flex: 1;
padding: 18px 16px;
border-radius: 12px;
text-align: center;
}
.tla__delegation-card.delegate {
background: #f0fdfb;
border: 1.5px solid #5EEAD4;
}
.tla__delegation-card.keep {
background: #fff9e6;
border: 1.5px solid #F5C842;
}
.tla__delegation-icon { font-size: 1.8rem; margin-bottom: 6px; }
.tla__delegation-hours {
font-size: 2rem;
font-weight: 800;
line-height: 1;
margin: 0;
}
.tla__delegation-card.delegate .tla__delegation-hours { color: #0d9488; }
.tla__delegation-card.keep .tla__delegation-hours { color: #b8860b; }
.tla__delegation-label {
font-size: 0.82rem;
color: #666;
margin: 4px 0 0;
}/* Cost comparison */
.tla__comparison {
background: #fafafa;
border-radius: 14px;
padding: 24px 20px;
margin-bottom: 28px;
border: 1.5px solid #eee;
}
.tla__comparison-title {
font-size: 1rem;
font-weight: 700;
margin: 0 0 16px;
text-align: center;
color: #0A0F1E;
}
.tla__comparison-row {
display: flex;
gap: 16px;
margin-bottom: 14px;
}
.tla__comparison-item {
flex: 1;
text-align: center;
padding: 16px 12px;
border-radius: 12px;
}
.tla__comparison-item.you {
background: #fff0f0;
border: 1.5px solid #ffb3b3;
}
.tla__comparison-item.va {
background: #f0fdfb;
border: 1.5px solid #5EEAD4;
}
.tla__comparison-item-label {
font-size: 0.78rem;
color: #666;
margin: 0 0 6px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tla__comparison-item-value {
font-size: 1.6rem;
font-weight: 800;
margin: 0;
}
.tla__comparison-item.you .tla__comparison-item-value { color: #d44; }
.tla__comparison-item.va .tla__comparison-item-value { color: #0d9488; }
.tla__comparison-item-sub {
font-size: 0.75rem;
color: #999;
margin: 2px 0 0;
}
.tla__comparison-savings {
text-align: center;
padding: 14px;
border-radius: 10px;
background: linear-gradient(135deg, #0A0F1E, #1a2540);
color: #fff;
}
.tla__comparison-savings-label { font-size: 0.82rem; opacity: 0.7; margin: 0; }
.tla__comparison-savings-value { font-size: 1.8rem; font-weight: 800; color: #F5C842; margin: 2px 0; }
.tla__comparison-savings-sub { font-size: 0.78rem; color: #5EEAD4; margin: 0; }/* ROI badge */
.tla__roi-badge {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 24px;
border-radius: 14px;
background: linear-gradient(135deg, #f0fdfb, #e6faf5);
border: 2px solid #5EEAD4;
margin-bottom: 28px;
text-align: center;
flex-wrap: wrap;
}
.tla__roi-multiplier {
font-size: 2.6rem;
font-weight: 900;
color: #0d9488;
line-height: 1;
}
.tla__roi-text {
font-size: 0.95rem;
color: #333;
text-align: left;
}
.tla__roi-text strong { color: #0A0F1E; }/* Top 3 tasks */
.tla__top-tasks {
margin-bottom: 28px;
}
.tla__top-tasks-title {
font-size: 1rem;
font-weight: 700;
margin: 0 0 14px;
color: #0A0F1E;
}
.tla__top-task {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 10px;
margin-bottom: 8px;
background: #fafafa;
border: 1.5px solid #eee;
}
.tla__top-task-rank {
width: 30px;
height: 30px;
border-radius: 50%;
background: #F5C842;
color: #0A0F1E;
font-weight: 800;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.tla__top-task-info { flex: 1; }
.tla__top-task-name { font-weight: 600; font-size: 0.9rem; margin: 0; color: #1a1a2e; }
.tla__top-task-meta { font-size: 0.78rem; color: #888; margin: 2px 0 0; }
.tla__top-task-tag {
font-size: 0.7rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 12px;
background: #e6faf5;
color: #0d9488;
text-transform: uppercase;
letter-spacing: 0.5px;
flex-shrink: 0;
}/* ---------- Lead Capture ---------- */
.tla__lead-section {
background: linear-gradient(135deg, #0A0F1E, #162040);
border-radius: 14px;
padding: 28px 24px;
margin-bottom: 20px;
text-align: center;
color: #fff;
}
.tla__lead-title {
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 6px;
color: #fff;
}
.tla__lead-desc {
font-size: 0.88rem;
opacity: 0.7;
margin: 0 0 18px;
}
.tla__lead-form {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
max-width: 500px;
margin: 0 auto;
}
.tla__lead-input {
flex: 1;
min-width: 160px;
padding: 12px 16px;
border-radius: 10px;
border: 1.5px solid rgba(255,255,255,0.2);
background: rgba(255,255,255,0.08);
color: #fff;
font-size: 0.9rem;
outline: none;
transition: border-color 0.2s;
}
.tla__lead-input::placeholder { color: rgba(255,255,255,0.4); }
.tla__lead-input:focus { border-color: #F5C842; }
.tla__lead-submit {
padding: 12px 28px;
border-radius: 10px;
border: none;
background: #F5C842;
color: #0A0F1E;
font-weight: 700;
font-size: 0.92rem;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.tla__lead-submit:hover { background: #e5b832; transform: translateY(-1px); }
.tla__lead-success {
display: none;
color: #5EEAD4;
font-weight: 600;
font-size: 0.92rem;
margin-top: 12px;
}
.tla__lead-success.show { display: block; }/* ---------- CTA ---------- */
.tla__cta {
text-align: center;
padding: 8px 0 4px;
}
.tla__cta-btn {
display: inline-block;
padding: 16px 40px;
border-radius: 12px;
background: #F5C842;
color: #0A0F1E;
font-weight: 800;
font-size: 1.05rem;
text-decoration: none;
transition: all 0.25s;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(245,200,66,0.35);
}
.tla__cta-btn:hover {
background: #e5b832;
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(245,200,66,0.45);
}
.tla__cta-sub {
font-size: 0.82rem;
color: #999;
margin: 10px 0 0;
}/* ---------- Navigation buttons ---------- */
.tla__nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 28px;
gap: 12px;
}
.tla__btn {
padding: 12px 28px;
border-radius: 10px;
border: none;
font-weight: 700;
font-size: 0.92rem;
cursor: pointer;
transition: all 0.2s;
}
.tla__btn-back {
background: #f0f0f0;
color: #555;
}
.tla__btn-back:hover { background: #e0e0e0; }
.tla__btn-next {
background: #F5C842;
color: #0A0F1E;
margin-left: auto;
box-shadow: 0 2px 10px rgba(245,200,66,0.3);
}
.tla__btn-next:hover { background: #e5b832; transform: translateY(-1px); }
.tla__btn-next:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
}/* ---------- Pie chart (CSS only) ---------- */
.tla__pie-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-bottom: 28px;
flex-wrap: wrap;
}
.tla__pie {
width: 180px;
height: 180px;
border-radius: 50%;
position: relative;
flex-shrink: 0;
transition: transform 0.3s;
}
.tla__pie:hover { transform: scale(1.04); }
.tla__pie-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 4px rgba(255,255,255,0.5);
z-index: 2;
}
.tla__pie-center-num { font-size: 1.3rem; font-weight: 800; color: #0A0F1E; line-height: 1; }
.tla__pie-center-label { font-size: 0.6rem; color: #888; }
.tla__pie-legend { display: flex; flex-direction: column; gap: 6px; }
.tla__pie-legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.82rem;
color: #444;
}
.tla__pie-legend-dot {
width: 12px;
height: 12px;
border-radius: 3px;
flex-shrink: 0;
}/* ---------- Animated counter ---------- */
.tla__counter { display: inline-block; }/* ---------- Responsive ---------- */
@media (max-width: 640px) {
.tla__title { font-size: 1.5rem; }
.tla__rate-value { font-size: 2.4rem; }
.tla__results-hero-hours { font-size: 3rem; }
.tla__results-hero-cost { font-size: 1.1rem; }
.tla__stats-grid { grid-template-columns: 1fr; }
.tla__delegation { flex-direction: column; }
.tla__comparison-row { flex-direction: column; }
.tla__task { padding: 12px; }
.tla__task-slider { width: 90px; }
.tla__bar-label { width: 90px; font-size: 0.72rem; }
.tla__roi-badge { flex-direction: column; }
.tla__roi-text { text-align: center; }
.tla__pie-wrap { flex-direction: column; }
.tla__lead-form { flex-direction: column; }
.tla__lead-input { min-width: auto; }
}
Time Leak Audit
Find out exactly where your time is going — and how much it's costing you.
Step 1: What's your time worth?
Set your effective hourly rate (what you earn or bill per hour). This helps us calculate the true cost of time you spend on low-value tasks.
Step 2: Where does your time go?
Drag the sliders to estimate how many hours per week you spend on each task. Be honest — most people underestimate by 30%.
Step 3: Your Time Leak Report
Here's what your time leaks are really costing you — and exactly how much you'd save with a skilled Filipino VA.
Time Leaked Every Week
0 hrs/week
$0/year lost to low-value tasks
$0
Monthly cost of time leaks
0
Full work-weeks lost per year
Time Distribution Breakdown
★
0
Hours only you should do
Cost Comparison: You vs. Filipino VA
Filipino VA
$0
per year ($7/hr avg)
Your Annual Savings
$0
0% reduction in costs
0x
For every $1 spent on a Filipino VA,
you reclaim $0 in productive time.
Top 3 Tasks to Delegate First
Get Your Full Time Leak Report
We'll email you a detailed breakdown with personalized delegation recommendations.
Check your inbox! Your personalized Time Leak Report is on its way.
(function() {
'use strict';/* ---- TASK DATA ---- */
var TASKS = [
{ id:'email', name:'Email Management', sub:'Reading, sorting, responding', icon:'u2709', max:15, delegatable:0.85, complexity:1 },
{ id:'social', name:'Social Media', sub:'Posting, engagement, monitoring', icon:'uD83DuDCF1', max:15, delegatable:0.9, complexity:1 },
{ id:'calendar', name:'Calendar & Scheduling', sub:'Booking, reminders, coordination', icon:'uD83DuDCC5', max:10, delegatable:0.95, complexity:1 },
{ id:'data', name:'Data Entry & Spreadsheets', sub:'Input, formatting, cleanup', icon:'uD83DuDCCA', max:15, delegatable:0.95, complexity:1 },
{ id:'support', name:'Customer Support', sub:'Inquiries, tickets, follow-ups', icon:'uD83DuDCAC', max:20, delegatable:0.8, complexity:2 },
{ id:'books', name:'Bookkeeping & Invoicing', sub:'Billing, reconciliation, expenses', icon:'uD83DuDCB0', max:10, delegatable:0.85, complexity:2 },
{ id:'research', name:'Research & Reporting', sub:'Market research, data analysis, reports', icon:'uD83DuDD0D', max:10, delegatable:0.8, complexity:2 },
{ id:'content', name:'Content Creation', sub:'Blog posts, newsletters, copy', icon:'u270DuFE0F', max:15, delegatable:0.7, complexity:3 },
{ id:'website', name:'Website Updates', sub:'Edits, uploads, maintenance', icon:'uD83CuDF10', max:8, delegatable:0.9, complexity:2 },
{ id:'recruit', name:'Recruitment & HR Admin', sub:'Job posts, screening, onboarding', icon:'uD83DuDC65', max:10, delegatable:0.75, complexity:3 },
{ id:'files', name:'File Organization', sub:'Documentation, cloud storage, sorting', icon:'uD83DuDCC1', max:8, delegatable:0.95, complexity:1 },
{ id:'meetings', name:'Meeting Prep & Follow-ups', sub:'Agendas, notes, action items', icon:'uD83DuDCDD', max:10, delegatable:0.85, complexity:2 }
];var PIE_COLORS = [
'#5EEAD4','#F5C842','#ff6b6b','#818cf8','#fb923c','#34d399',
'#f472b6','#60a5fa','#a78bfa','#facc15','#38bdf8','#e879f9'
];var VA_RATE = 7; // $/hr average Filipino VA
var hourlyRate = 75;
var taskHours = {};/* ---- DOM refs ---- */
var root = document.querySelector('.tla__');
var panels = root.querySelectorAll('.tla__panel');
var dots = root.querySelectorAll('.tla__step-dot');
var rateSlider = root.querySelector('#tlaRateSlider');
var rateNum = root.querySelector('#tlaRateNum');
var presets = root.querySelectorAll('.tla__preset');
var runHours = root.querySelector('#tlaRunHours');/* ---- NAVIGATION ---- */
function goTo(step) {
panels.forEach(function(p) { p.classList.remove('active'); });
root.querySelector('[data-panel="' + step + '"]').classList.add('active');
dots.forEach(function(d) {
var s = parseInt(d.dataset.step);
d.classList.remove('active','done');
if (s === step) d.classList.add('active');
else if (s < step) d.classList.add('done');
});
root.scrollIntoView({ behavior: 'smooth', block: 'start' });
if (step === 3) buildResults();
}root.querySelector('#tlaNext1').addEventListener('click', function() { goTo(2); });
root.querySelector('#tlaBack2').addEventListener('click', function() { goTo(1); });
root.querySelector('#tlaNext2').addEventListener('click', function() { goTo(3); });
root.querySelector('#tlaBack3').addEventListener('click', function() { goTo(2); });/* ---- STEP 1: RATE ---- */
function setRate(v) {
hourlyRate = parseInt(v);
rateNum.textContent = hourlyRate;
rateSlider.value = hourlyRate;
presets.forEach(function(p) {
p.classList.toggle('selected', parseInt(p.dataset.rate) === hourlyRate);
});
}rateSlider.addEventListener('input', function() { setRate(this.value); });
presets.forEach(function(p) {
p.addEventListener('click', function() { setRate(this.dataset.rate); });
});/* ---- STEP 2: TASKS ---- */
var taskList = root.querySelector('#tlaTaskList');
var nextBtn2 = root.querySelector('#tlaNext2');TASKS.forEach(function(t) {
taskHours[t.id] = 0;
var div = document.createElement('div');
div.className = 'tla__task';
div.dataset.id = t.id;
div.innerHTML =
'
' + t.icon + '
' +
'
' +
'
' + t.name + '
' +
'
' + t.sub + '
' +
'
' +
'
';
taskList.appendChild(div);var slider = div.querySelector('.tla__task-slider');
var num = div.querySelector('.tla__task-hours-num');
slider.addEventListener('input', function() {
var v = parseFloat(this.value);
taskHours[t.id] = v;
num.textContent = v % 1 === 0 ? v : v.toFixed(1);
div.classList.toggle('active-task', v > 0);
updateRunning();
});
});function updateRunning() {
var total = 0;
for (var k in taskHours) total += taskHours[k];
runHours.textContent = total % 1 === 0 ? total : total.toFixed(1);
nextBtn2.disabled = total === 0;
}/* ---- STEP 3: RESULTS ---- */
function animateNumber(el, target, prefix, suffix, duration) {
prefix = prefix || '';
suffix = suffix || '';
duration = duration || 1200;
var start = 0;
var startTime = null;
function step(ts) {
if (!startTime) startTime = ts;
var progress = Math.min((ts - startTime) / duration, 1);
var ease = 1 - Math.pow(1 - progress, 3);
var current = Math.round(start + (target - start) * ease);
el.textContent = prefix + current.toLocaleString() + suffix;
if (progress 0) {
activeTasks.push({ id: t.id, name: t.name, icon: t.icon, hours: h, delegatable: t.delegatable, complexity: t.complexity });
totalHrs += h;
}
});var annualCost = totalHrs * hourlyRate * 52;
var monthlyCost = annualCost / 12;
var dailyHrs = totalHrs / 5;
var weeksLost = (totalHrs * 52) / 40;
var percentWasted = (totalHrs / 40) * 100;/* Delegation */
var delHrs = 0;
activeTasks.forEach(function(t) { delHrs += t.hours * t.delegatable; });
var keepHrs = totalHrs - delHrs;/* Cost comparison */
var costYou = delHrs * hourlyRate * 52;
var costVA = delHrs * VA_RATE * 52;
var savings = costYou - costVA;
var savingsPct = costYou > 0 ? Math.round((savings / costYou) * 100) : 0;
var roi = costVA > 0 ? (costYou / costVA) : 0;/* Animate hero */
animateNumber(root.querySelector('#tlaResHours'), Math.round(totalHrs * 10) / 10, '', '');
animateNumber(root.querySelector('#tlaResCost'), Math.round(annualCost), '', '');
animateNumber(root.querySelector('#tlaResMonthly'), Math.round(monthlyCost), '$', '');
root.querySelector('#tlaResDaily').textContent = dailyHrs.toFixed(1) + 'h';
animateNumber(root.querySelector('#tlaResWeeks'), Math.round(weeksLost * 10) / 10, '', '');
root.querySelector('#tlaResPercent').textContent = Math.round(percentWasted) + '%';/* Delegation */
animateNumber(root.querySelector('#tlaDelHours'), Math.round(delHrs * 10) / 10, '', '');
animateNumber(root.querySelector('#tlaKeepHours'), Math.round(keepHrs * 10) / 10, '', '');/* Comparison */
animateNumber(root.querySelector('#tlaCostYou'), Math.round(costYou), '$', '');
animateNumber(root.querySelector('#tlaCostVA'), Math.round(costVA), '$', '');
animateNumber(root.querySelector('#tlaSavings'), Math.round(savings), '$', '');
root.querySelector('#tlaSavingsPct').textContent = savingsPct + '% reduction in costs';/* ROI */
var roiRound = Math.round(roi * 10) / 10;
root.querySelector('#tlaROI').textContent = roiRound + 'x';
root.querySelector('#tlaROIText').textContent = '$' + roiRound.toFixed(2) + ' in productive time';/* Sort tasks by hours desc */
activeTasks.sort(function(a, b) { return b.hours - a.hours; });/* Pie chart */
buildPie(activeTasks, totalHrs);/* Bar chart */
buildBars(activeTasks, totalHrs);/* Top 3 */
buildTop3(activeTasks);
}function buildPie(tasks, total) {
if (total === 0) return;
var pie = root.querySelector('#tlaPie');
var legend = root.querySelector('#tlaPieLegend');
root.querySelector('#tlaPieNum').textContent = total % 1 === 0 ? total : total.toFixed(1);/* Build conic-gradient */
var gradParts = [];
var angle = 0;
tasks.forEach(function(t, i) {
var pct = (t.hours / total) * 100;
var color = PIE_COLORS[i % PIE_COLORS.length];
gradParts.push(color + ' ' + angle.toFixed(2) + '% ' + (angle + pct).toFixed(2) + '%');
angle += pct;
});
pie.style.background = 'conic-gradient(' + gradParts.join(', ') + ')';/* Legend */
legend.innerHTML = '';
tasks.forEach(function(t, i) {
var pct = Math.round((t.hours / total) * 100);
var color = PIE_COLORS[i % PIE_COLORS.length];
var item = document.createElement('div');
item.className = 'tla__pie-legend-item';
item.innerHTML = '
' +
'
' + t.name + ' (' + pct + '%)';
legend.appendChild(item);
});
}function buildBars(tasks, total) {
var container = root.querySelector('#tlaBarChart');
container.innerHTML = '';
var maxHrs = 0;
tasks.forEach(function(t) { if (t.hours > maxHrs) maxHrs = t.hours; });
if (maxHrs === 0) maxHrs = 1;tasks.forEach(function(t) {
var pct = (t.hours / maxHrs) * 100;
var delPct = t.delegatable * 100;
var row = document.createElement('div');
row.className = 'tla__bar-row';
row.innerHTML =
'
' + t.name + '
' +
'
' +
'
= 0.7 ? 'delegatable' : 'non-delegatable') + '" style="width:0%">
' +
'
' +
'
' + (t.hours % 1 === 0 ? t.hours : t.hours.toFixed(1)) + 'h
';
container.appendChild(row);/* Animate bars after a tick */
setTimeout(function() {
row.querySelector('.tla__bar-fill').style.width = pct + '%';
}, 100);
});
}function buildTop3(tasks) {
/* Priority score = hours * delegatable / complexity */
var scored = tasks.map(function(t) {
return { name: t.name, icon: t.icon, hours: t.hours, score: (t.hours * t.delegatable) / t.complexity, delegatable: t.delegatable, complexity: t.complexity };
});
scored.sort(function(a, b) { return b.score - a.score; });
var top = scored.slice(0, 3);var container = root.querySelector('#tlaTopTasks');
container.innerHTML = '';
var labels = ['Delegate immediately', 'High priority', 'Quick win'];
top.forEach(function(t, i) {
var div = document.createElement('div');
div.className = 'tla__top-task';
div.innerHTML =
'
' + (i + 1) + '
' +
'
' +
'
' + t.icon + ' ' + t.name + '
' +
'
' + (t.hours % 1 === 0 ? t.hours : t.hours.toFixed(1)) + ' hrs/wk · ' + Math.round(t.delegatable * 100) + '% delegatable
' +
'
' +
'
' + labels[i] + '
';
container.appendChild(div);
});
}/* ---- LEAD CAPTURE ---- */
root.querySelector('#tlaLeadBtn').addEventListener('click', function(e) {
e.preventDefault();
var name = root.querySelector('#tlaLeadName').value.trim();
var email = root.querySelector('#tlaLeadEmail').value.trim();
if (!name || !email || !email.includes('@')) {
root.querySelector('#tlaLeadEmail').style.borderColor = '#ff6b6b';
return;
}
root.querySelector('#tlaLeadEmail').style.borderColor = '';/* Gather report data */
var totalHrs = 0;
var activeTasks = [];
TASKS.forEach(function(t) {
var h = taskHours[t.id];
if (h > 0) { activeTasks.push({ name: t.name, hours: h }); totalHrs += h; }
});/* You could POST this to your backend — placeholder for now */
var payload = {
name: name,
email: email,
hourly_rate: hourlyRate,
total_hours: totalHrs,
annual_cost: totalHrs * hourlyRate * 52,
tasks: activeTasks
};
console.log('Time Leak Audit lead:', payload);/* Show success */
root.querySelector('#tlaLeadForm').style.display = 'none';
root.querySelector('#tlaLeadSuccess').classList.add('show');
});})();