Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CostScope - Smart Cost Calculator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| overflow-x: hidden; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #1e293b; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #475569; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #64748b; | |
| } | |
| /* Animations */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes pulse-glow { | |
| 0%, 100% { box-shadow: 0 0 15px rgba(56, 189, 248, 0.1); } | |
| 50% { box-shadow: 0 0 25px rgba(56, 189, 248, 0.3); } | |
| } | |
| .glow-effect { | |
| animation: pulse-glow 3s infinite; | |
| } | |
| .glass-panel { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| /* Toggle Switch */ | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #38bdf8; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #38bdf8; | |
| } | |
| /* Range Slider Styling */ | |
| input[type=range] { | |
| -webkit-appearance: none; | |
| background: transparent; | |
| } | |
| input[type=range]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| height: 20px; | |
| width: 20px; | |
| border-radius: 50%; | |
| background: #38bdf8; | |
| cursor: pointer; | |
| margin-top: -8px; | |
| box-shadow: 0 0 10px rgba(56,189,248,0.5); | |
| } | |
| input[type=range]::-webkit-slider-runnable-track { | |
| width: 100%; | |
| height: 4px; | |
| cursor: pointer; | |
| background: #334155; | |
| border-radius: 2px; | |
| } | |
| /* Chart Bars */ | |
| .bar-fill { | |
| transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col relative"> | |
| <!-- Background Canvas for Particles --> | |
| <canvas id="bgCanvas" class="fixed top-0 left-0 w-full h-full -z-10"></canvas> | |
| <!-- Header --> | |
| <header class="w-full p-6 flex justify-between items-center glass-panel sticky top-0 z-50 border-b border-slate-700/50"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-cyan-500 to-blue-600 flex items-center justify-center shadow-lg shadow-cyan-500/20"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold tracking-tight text-white">CostScope</h1> | |
| <p class="text-xs text-slate-400">Financial Transparency Tool</p> | |
| </div> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs font-medium text-cyan-400 hover:text-cyan-300 transition-colors bg-cyan-950/30 px-3 py-1.5 rounded-full border border-cyan-900/50"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-12 flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Column: The Question & Input --> | |
| <div class="w-full lg:w-1/2 flex flex-col gap-6"> | |
| <!-- Hero Text --> | |
| <div class="space-y-2 animate-float"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400"> | |
| Do I have to pay for this service? | |
| </h2> | |
| <p class="text-lg text-slate-400 max-w-lg"> | |
| Stop guessing. Input your scenario below to analyze the true cost structure and find out if it's really "free". | |
| </p> | |
| </div> | |
| <!-- Interactive Form --> | |
| <div class="glass-panel p-8 rounded-2xl shadow-2xl border border-slate-700/50 mt-4"> | |
| <form id="costForm" class="space-y-6" onsubmit="event.preventDefault(); analyzeCost();"> | |
| <!-- Service Name --> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-semibold text-slate-300 uppercase tracking-wider">Service Name</label> | |
| <input type="text" id="serviceName" placeholder="e.g., Netflix, Gym Membership, Adobe CC" | |
| class="w-full bg-slate-800/50 border border-slate-600 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-all"> | |
| </div> | |
| <!-- Cost Type Selection --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <label class="cursor-pointer relative"> | |
| <input type="radio" name="costType" value="free" class="peer sr-only" onchange="updateFormUI()"> | |
| <div class="p-4 rounded-xl bg-slate-800/50 border border-slate-600 hover:bg-slate-700/50 peer-checked:border-emerald-500 peer-checked:bg-emerald-900/20 transition-all text-center"> | |
| <div class="text-2xl mb-1">🎁</div> | |
| <div class="font-bold text-slate-200">Free</div> | |
| <div class="text-xs text-slate-400">$0 Upfront</div> | |
| </div> | |
| <div class="absolute top-2 right-2 w-3 h-3 rounded-full bg-emerald-500 opacity-0 peer-checked:opacity-100 shadow-[0_0_10px_rgba(16,185,129,0.8)]"></div> | |
| </label> | |
| <label class="cursor-pointer relative"> | |
| <input type="radio" name="costType" value="subscription" class="peer sr-only" checked onchange="updateFormUI()"> | |
| <div class="p-4 rounded-xl bg-slate-800/50 border border-slate-600 hover:bg-slate-700/50 peer-checked:border-cyan-500 peer-checked:bg-cyan-900/20 transition-all text-center"> | |
| <div class="text-2xl mb-1">🔄</div> | |
| <div class="font-bold text-slate-200">Sub</div> | |
| <div class="text-xs text-slate-400">Recurring Fee</div> | |
| </div> | |
| <div class="absolute top-2 right-2 w-3 h-3 rounded-full bg-cyan-500 opacity-0 peer-checked:opacity-100 shadow-[0_0_10px_rgba(6,182,212,0.8)]"></div> | |
| </label> | |
| <label class="cursor-pointer relative"> | |
| <input type="radio" name="costType" value="one-time" class="peer sr-only" onchange="updateFormUI()"> | |
| <div class="p-4 rounded-xl bg-slate-800/50 border border-slate-600 hover:bg-slate-700/50 peer-checked:border-purple-500 peer-checked:bg-purple-900/20 transition-all text-center"> | |
| <div class="text-2xl mb-1">💎</div> | |
| <div class="font-bold text-slate-200">One-off</div> | |
| <div class="text-xs text-slate-400">Single Purchase</div> | |
| </div> | |
| <div class="absolute top-2 right-2 w-3 h-3 rounded-full bg-purple-500 opacity-0 peer-checked:opacity-100 shadow-[0_0_10px_rgba(168,85,247,0.8)]"></div> | |
| </label> | |
| </div> | |
| <!-- Dynamic Inputs --> | |
| <div id="priceInputGroup" class="space-y-4 transition-all duration-300"> | |
| <div class="flex justify-between items-end"> | |
| <label class="text-sm font-semibold text-slate-300 uppercase tracking-wider">Price</label> | |
| <span class="text-xs text-slate-500" id="priceLabel">per month</span> | |
| </div> | |
| <div class="relative"> | |
| <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">$</span> | |
| <input type="number" id="priceAmount" value="15.99" min="0" step="0.01" | |
| class="w-full bg-slate-800/50 border border-slate-600 rounded-lg pl-10 pr-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 transition-all text-lg font-mono"> | |
| </div> | |
| <!-- Frequency Selector (Hidden for One-time) --> | |
| <div id="frequencyGroup" class="space-y-2"> | |
| <label class="text-sm font-semibold text-slate-300 uppercase tracking-wider">Billing Cycle</label> | |
| <div class="flex bg-slate-900/50 p-1 rounded-lg border border-slate-700"> | |
| <button type="button" class="flex-1 py-2 rounded-md text-sm font-medium transition-all bg-slate-700 text-white shadow-sm" onclick="setFrequency('monthly', this)">Monthly</button> | |
| <button type="button" class="flex-1 py-2 rounded-md text-sm font-medium text-slate-400 hover:text-white transition-all" onclick="setFrequency('yearly', this)">Yearly</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hidden Cost Toggle --> | |
| <div class="pt-4 border-t border-slate-700/50"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <span class="text-sm font-semibold text-slate-300">Add Hidden Costs?</span> | |
| <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in"> | |
| <input type="checkbox" name="toggle" id="hiddenCostToggle" class="toggle-checkbox absolute block w-5 h-5 rounded-full bg-white border-4 appearance-none cursor-pointer transition-all duration-300 left-0 top-0"/> | |
| <label for="hiddenCostToggle" class="toggle-label block overflow-hidden h-5 rounded-full bg-slate-700 cursor-pointer"></label> | |
| </div> | |
| </div> | |
| <div id="hiddenCostInputs" class="hidden space-y-3 opacity-0 transition-opacity duration-300"> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div> | |
| <label class="text-xs text-slate-400 block mb-1">Setup Fee</label> | |
| <input type="number" id="setupFee" value="0" class="w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-white"> | |
| </div> | |
| <div> | |
| <label class="text-xs text-slate-400 block mb-1">Maintenance/yr</label> | |
| <input type="number" id="maintenanceFee" value="0" class="w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-white"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-xs text-slate-400 block mb-1">Time Investment (hrs/week)</label> | |
| <input type="range" id="timeInvestment" min="0" max="40" value="0" class="w-full" oninput="document.getElementById('timeVal').innerText = this.value + ' hrs'"> | |
| <div class="flex justify-between text-xs text-slate-500 mt-1"> | |
| <span>0 hrs</span> | |
| <span id="timeVal" class="text-cyan-400 font-bold">0 hrs</span> | |
| <span>40 hrs</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="text-xs text-slate-400 block mb-1">Your Hourly Rate ($)</label> | |
| <input type="number" id="hourlyRate" value="50" class="w-full bg-slate-800 border border-slate-600 rounded px-3 py-2 text-sm text-white"> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full group relative overflow-hidden rounded-xl bg-gradient-to-r from-cyan-500 to-blue-600 p-4 font-bold text-white shadow-lg shadow-cyan-500/25 transition-all hover:scale-[1.02] hover:shadow-cyan-500/40 active:scale-[0.98]"> | |
| <span class="relative z-10 flex items-center justify-center gap-2"> | |
| Calculate True Cost | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" /> | |
| </svg> | |
| </span> | |
| <div class="absolute inset-0 -z-10 bg-gradient-to-r from-blue-600 to-cyan-500 opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Right Column: Visualization & Results --> | |
| <div class="w-full lg:w-1/2 flex flex-col gap-6 relative"> | |
| <!-- Initial State Placeholder --> | |
| <div id="initialState" class="h-full flex flex-col items-center justify-center text-center p-12 glass-panel rounded-2xl border-dashed border-2 border-slate-700"> | |
| <div class="w-24 h-24 bg-slate-800 rounded-full flex items-center justify-center mb-6 animate-pulse"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold text-slate-300">Awaiting Input</h3> | |
| <p class="text-slate-500 mt-2 max-w-xs">Enter your service details on the left to generate a financial breakdown.</p> | |
| </div> | |
| <!-- Results Container (Hidden initially) --> | |
| <div id="resultsContainer" class="hidden space-y-6"> | |
| <!-- Verdict Card --> | |
| <div id="verdictCard" class="glass-panel p-8 rounded-2xl border-l-4 transition-all duration-500 transform translate-y-4 opacity-0"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400 mb-1">The Verdict</h3> | |
| <h2 id="verdictTitle" class="text-3xl font-bold text-white mb-2">It's Free, But...</h2> | |
| <p id="verdictDesc" class="text-slate-300 leading-relaxed">You pay with your data and attention.</p> | |
| </div> | |
| <div id="verdictIcon" class="text-5xl">🎁</div> | |
| </div> | |
| </div> | |
| <!-- Stats Grid --> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="glass-panel p-5 rounded-xl border border-slate-700/50"> | |
| <div class="text-slate-400 text-xs uppercase font-bold mb-1">1 Year Cost</div> | |
| <div id="cost1Year" class="text-2xl font-mono font-bold text-white">$0.00</div> | |
| </div> | |
| <div class="glass-panel p-5 rounded-xl border border-slate-700/50"> | |
| <div class="text-slate-400 text-xs uppercase font-bold mb-1">5 Year Cost</div> | |
| <div id="cost5Year" class="text-2xl font-mono font-bold text-white">$0.00</div> | |
| </div> | |
| <div class="glass-panel p-5 rounded-xl border border-slate-700/50"> | |
| <div class="text-slate-400 text-xs uppercase font-bold mb-1">Time Cost (Year)</div> | |
| <div id="timeCostYear" class="text-2xl font-mono font-bold text-cyan-400">$0.00</div> | |
| </div> | |
| <div class="glass-panel p-5 rounded-xl border border-slate-700/50"> | |
| <div class="text-slate-400 text-xs uppercase font-bold mb-1">Total Impact</div> | |
| <div id="totalImpact" class="text-2xl font-mono font-bold text-emerald-400">$0.00</div> | |
| </div> | |
| </div> | |
| <!-- Visual Breakdown --> | |
| <div class="glass-panel p-6 rounded-2xl border border-slate-700/50"> | |
| <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400 mb-6">Cost Composition</h3> | |
| <!-- Bar Chart --> | |
| <div class="space-y-4"> | |
| <!-- Base Cost Bar --> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-slate-300">Base Subscription</span> | |
| <span id="baseCostPct" class="text-slate-400">0%</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden"> | |
| <div id="barBase" class="bar-fill bg-cyan-500 h-full rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Hidden Fees Bar --> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-slate-300">Hidden Fees (Setup/Maintenance)</span> | |
| <span id="hiddenCostPct" class="text-slate-400">0%</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden"> | |
| <div id="barHidden" class="bar-fill bg-purple-500 h-full rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Time Cost Bar --> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-slate-300">Time Investment Value</span> | |
| <span id="timeCostPct" class="text-slate-400">0%</span> | |
| </div> | |
| <div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden"> | |
| <div id="barTime" class="bar-fill bg-amber-500 h-full rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-slate-700/50 flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center text-lg">💡</div> | |
| <p id="insightText" class="text-sm text-slate-400 italic">"Over 5 years, you could buy a used car with this amount."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // --- Audio Setup (Tone.js) --- | |
| let synth; | |
| let isAudioInit = false; | |
| async function initAudio() { | |
| if (isAudioInit) return; | |
| await Tone.start(); | |
| synth = new Tone.PolySynth(Tone.Synth).toDestination(); | |
| synth.volume.value = -10; | |
| isAudioInit = true; | |
| } | |
| function playSound(type) { | |
| if (!isAudioInit) initAudio(); | |
| if (!synth) return; | |
| const now = Tone.now(); | |
| if (type === 'click') { | |
| synth.triggerAttackRelease("C5", "32n", now); | |
| } else if (type === 'success') { | |
| synth.triggerAttackRelease(["C4", "E4", "G4", "C5"], "8n", now); | |
| } else if (type === 'hover') { | |
| // Very subtle click | |
| // synth.triggerAttackRelease("G2", "64n", now, 0.1); | |
| } | |
| } | |
| // --- UI Logic --- | |
| let currentFrequency = 'monthly'; | |
| function setFrequency(freq, btn) { | |
| currentFrequency = freq; | |
| // Update UI buttons | |
| const buttons = btn.parentElement.querySelectorAll('button'); | |
| buttons.forEach(b => { | |
| b.classList.remove('bg-slate-700', 'text-white', 'shadow-sm'); | |
| b.classList.add('text-slate-400'); | |
| }); | |
| btn.classList.remove('text-slate-400'); | |
| btn.classList.add('bg-slate-700', 'text-white', 'shadow-sm'); | |
| document.getElementById('priceLabel').innerText = freq === 'monthly' ? 'per month' : 'per year'; | |
| playSound('click'); | |
| } | |
| function updateFormUI() { | |
| const type = document.querySelector('input[name="costType"]:checked').value; | |
| const priceGroup = document.getElementById('priceInputGroup'); | |
| const freqGroup = document.getElementById('frequencyGroup'); | |
| const priceInput = document.getElementById('priceAmount'); | |
| if (type === 'free') { | |
| priceGroup.classList.add('opacity-50', 'pointer-events-none'); | |
| priceInput.value = 0; | |
| } else { | |
| priceGroup.classList.remove('opacity-50', 'pointer-events-none'); | |
| if(priceInput.value == 0) priceInput.value = 15.99; | |
| } | |
| if (type === 'one-time') { | |
| freqGroup.classList.add('hidden'); | |
| document.getElementById('priceLabel').innerText = 'one time'; | |
| } else { | |
| freqGroup.classList.remove('hidden'); | |
| document.getElementById('priceLabel').innerText = currentFrequency === 'monthly' ? 'per month' : 'per year'; | |
| } | |
| playSound('click'); | |
| } | |
| // Toggle Hidden Costs | |
| document.getElementById('hiddenCostToggle').addEventListener('change', function() { | |
| const div = document.getElementById('hiddenCostInputs'); | |
| if (this.checked) { | |
| div.classList.remove('hidden'); | |
| // small delay to allow display:block to apply before opacity transition | |
| setTimeout(() => div.classList.remove('opacity-0'), 10); | |
| } else { | |
| div.classList.add('opacity-0'); | |
| setTimeout(() => div.classList.add('hidden'), 300); | |
| } | |
| playSound('click'); | |
| }); | |
| // --- Calculation Logic --- | |
| function analyzeCost() { | |
| initAudio(); | |
| playSound('success'); | |
| const name = document.getElementById('serviceName').value || "This Service"; | |
| const type = document.querySelector('input[name="costType"]:checked').value; | |
| const price = parseFloat(document.getElementById('priceAmount').value) || 0; | |
| // Hidden Costs | |
| const setupFee = parseFloat(document.getElementById('setupFee').value) || 0; | |
| const maintenanceFee = parseFloat(document.getElementById('maintenanceFee').value) || 0; | |
| const timeHours = parseFloat(document.getElementById('timeInvestment').value) || 0; | |
| const hourlyRate = parseFloat(document.getElementById('hourlyRate').value) || 0; | |
| // Calculations | |
| let monthlyCost = 0; | |
| let yearlyCost = 0; | |
| if (type === 'free') { | |
| monthlyCost = 0; | |
| yearlyCost = 0; | |
| } else if (type === 'subscription') { | |
| if (currentFrequency === 'monthly') { | |
| monthlyCost = price; | |
| yearlyCost = price * 12; | |
| } else { | |
| monthlyCost = price / 12; | |
| yearlyCost = price; | |
| } | |
| } else if (type === 'one-time') { | |
| monthlyCost = price / 12; // Amortized for chart comparison, though strictly one-time | |
| yearlyCost = price; // Assuming lifespan of 1 year for comparison context, or just the price | |
| // For 5 year calc, we assume bought once. | |
| } | |
| // Time Cost Calculation (Weekly hours * 52 weeks * rate) | |
| const yearlyTimeCost = timeHours * 52 * hourlyRate; | |
| const totalYearly = yearlyCost + setupFee + maintenanceFee + yearlyTimeCost; | |
| // 5 Year Projection | |
| let fiveYearCost = 0; | |
| if (type === 'subscription') { | |
| fiveYearCost = (yearlyCost * 5) + setupFee + (maintenanceFee * 5) + (yearlyTimeCost * 5); | |
| } else if (type === 'one-time') { | |
| fiveYearCost = price + setupFee + (maintenanceFee * 5) + (yearlyTimeCost * 5); | |
| } else { | |
| fiveYearCost = (yearlyTimeCost * 5); // Free service but time is money | |
| } | |
| // Update UI | |
| document.getElementById('initialState').classList.add('hidden'); | |
| const results = document.getElementById('resultsContainer'); | |
| results.classList.remove('hidden'); | |
| // Animate Verdict Card | |
| const verdictCard = document.getElementById('verdictCard'); | |
| verdictCard.classList.remove('translate-y-4', 'opacity-0'); | |
| // Determine Verdict | |
| const verdictTitle = document.getElementById('verdictTitle'); | |
| const verdictDesc = document.getElementById('verdictDesc'); | |
| const verdictIcon = document.getElementById('verdictIcon'); | |
| if (type === 'free') { | |
| verdictTitle.innerText = "Technically Free"; | |
| verdictTitle.className = "text-3xl font-bold text-emerald-400 mb-2"; | |
| verdictDesc.innerText = `You don't pay cash, but "${name}" costs you ${timeHours} hours of your life every week. Time is money.`; | |
| verdictIcon.innerText = "🎁"; | |
| verdictCard.className = "glass-panel p-8 rounded-2xl border-l-4 border-emerald-500 transition-all duration-500 transform translate-y-0 opacity-100 glow-effect"; | |
| } else if (totalYearly > 1000) { | |
| verdictTitle.innerText = "Expensive Habit"; | |
| verdictTitle.className = "text-3xl font-bold text-rose-400 mb-2"; | |
| verdictDesc.innerText = `This is a significant financial commitment. Are you getting $${Math.round(totalYearly)} worth of value?`; | |
| verdictIcon.innerText = "💸"; | |
| verdictCard.className = "glass-panel p-8 rounded-2xl border-l-4 border-rose-500 transition-all duration-500 transform translate-y-0 opacity-100"; | |
| } else { | |
| verdictTitle.innerText = "Reasonable Cost"; | |
| verdictTitle.className = "text-3xl font-bold text-cyan-400 mb-2"; | |
| verdictDesc.innerText = `The cost is manageable, but watch out for price hikes.`; | |
| verdictIcon.innerText = "👍"; | |
| verdictCard.className = "glass-panel p-8 rounded-2xl border-l-4 border-cyan-500 transition-all duration-500 transform translate-y-0 opacity-100"; | |
| } | |
| // Update Numbers | |
| animateValue("cost1Year", 0, yearlyCost + setupFee + maintenanceFee, 1000); | |
| animateValue("cost5Year", 0, fiveYearCost, 1500); | |
| animateValue("timeCostYear", 0, yearlyTimeCost, 1000); | |
| animateValue("totalImpact", 0, totalYearly, 1000); | |
| // Update Chart | |
| // Normalize for chart (1 Year view) | |
| const base = yearlyCost; | |
| const hidden = setupFee + maintenanceFee; | |
| const time = yearlyTimeCost; | |
| const total = base + hidden + time || 1; // avoid div by zero | |
| const pctBase = (base / total) * 100; | |
| const pctHidden = (hidden / total) * 100; | |
| const pctTime = (time / total) * 100; | |
| document.getElementById('barBase').style.width = `${pctBase}%`; | |
| document.getElementById('barHidden').style.width = `${pctHidden}%`; | |
| document.getElementById('barTime').style.width = `${pctTime}%`; | |
| document.getElementById('baseCostPct').innerText = Math.round(pctBase) + '%'; | |
| document.getElementById('hiddenCostPct').innerText = Math.round(pctHidden) + '%'; | |
| document.getElementById('timeCostPct').innerText = Math.round(pctTime) + '%'; | |
| // Insight Text | |
| const insight = document.getElementById('insightText'); | |
| if (type === 'free' && timeHours > 0) { | |
| insight.innerText = `If you value your time at $${hourlyRate}/hr, this "free" service actually costs you $${yearlyTimeCost.toLocaleString()} per year.`; | |
| } else if (fiveYearCost > 10000) { | |
| insight.innerText = `In 5 years, this could be a down payment on a car or a lavish vacation.`; | |
| } else if (fiveYearCost > 1000) { | |
| insight.innerText = `Over 5 years, that's a high-end laptop.`; | |
| } else { | |
| insight.innerText = `The cost is low, but every dollar counts towards your financial freedom.`; | |
| } | |
| } | |
| function animateValue(id, start, end, duration) { | |
| const obj = document.getElementById(id); | |
| let startTimestamp = null; | |
| const step = (timestamp) => { | |
| if (!startTimestamp) startTimestamp = timestamp; | |
| const progress = Math.min((timestamp - startTimestamp) / duration, 1); | |
| const value = Math.floor(progress * (end - start) + start); | |
| obj.innerHTML = "$" + value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}); | |
| if (progress < 1) { | |
| window.requestAnimationFrame(step); | |
| } | |
| }; | |
| window.requestAnimationFrame(step); | |
| } | |
| // --- Background Animation (Canvas) --- | |
| const canvas = document.getElementById('bgCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let particles = []; | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| window.addEventListener('resize', resizeCanvas); | |
| resizeCanvas(); | |
| class Particle { | |
| constructor() { | |
| this.x = Math.random() * canvas.width; | |
| this.y = Math.random() * canvas.height; | |
| this.vx = (Math.random() - 0.5) * 0.5; | |
| this.vy = (Math.random() - 0.5) * 0.5; | |
| this.size = Math.random() * 2; | |
| this.color = `rgba(56, 189, 248, ${Math.random() * 0.5})`; // Cyan | |
| } | |
| update() { | |
| this.x += this.vx; | |
| this.y += this.vy; | |
| if (this.x < 0 || this.x > canvas.width) this.vx *= -1; | |
| if (this.y < 0 || this.y > canvas.height) this.vy *= -1; | |
| } | |
| draw() { | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); | |
| ctx.fillStyle = this.color; | |
| ctx.fill(); | |
| } | |
| } | |
| function initParticles() { | |
| particles = []; | |
| for (let i = 0; i < 50; i++) { | |
| particles.push(new Particle()); | |
| } | |
| } | |
| function animateParticles() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // Draw connections | |
| for (let i = 0; i < particles.length; i++) { | |
| for (let j = i; j < particles.length; j++) { | |
| const dx = particles[i].x - particles[j].x; | |
| const dy = particles[i].y - particles[j].y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 150) { | |
| ctx.beginPath(); | |
| ctx.strokeStyle = `rgba(148, 163, 184, ${0.1 - distance/1500})`; | |
| ctx.lineWidth = 1; | |
| ctx.moveTo(particles[i].x, particles[i].y); | |
| ctx.lineTo(particles[j].x, particles[j].y); | |
| ctx.stroke(); | |
| } | |
| } | |
| particles[i].update(); | |
| particles[i].draw(); | |
| } | |
| requestAnimationFrame(animateParticles); | |
| } | |
| initParticles(); | |
| animateParticles(); | |
| </script> | |
| </body> | |
| </html> |