Hugging Face's logo

Spaces:
peterciank
/
anycoder-5b9d3eb5
Running

App Files Community
peterciank commited on
Commit
8a74004
·
verified ·
1 Parent(s): 9d0b41b

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +647 -19
index.html CHANGED
@@ -1,19 +1,647 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CostScope - Smart Cost Calculator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ body {
12
+ font-family: 'Inter', sans-serif;
13
+ background-color: #0f172a;
14
+ color: #e2e8f0;
15
+ overflow-x: hidden;
16
+ }
17
+
18
+ /* Custom Scrollbar */
19
+ ::-webkit-scrollbar {
20
+ width: 8px;
21
+ }
22
+ ::-webkit-scrollbar-track {
23
+ background: #1e293b;
24
+ }
25
+ ::-webkit-scrollbar-thumb {
26
+ background: #475569;
27
+ border-radius: 4px;
28
+ }
29
+ ::-webkit-scrollbar-thumb:hover {
30
+ background: #64748b;
31
+ }
32
+
33
+ /* Animations */
34
+ @keyframes float {
35
+ 0% { transform: translateY(0px); }
36
+ 50% { transform: translateY(-10px); }
37
+ 100% { transform: translateY(0px); }
38
+ }
39
+ .animate-float {
40
+ animation: float 6s ease-in-out infinite;
41
+ }
42
+
43
+ @keyframes pulse-glow {
44
+ 0%, 100% { box-shadow: 0 0 15px rgba(56, 189, 248, 0.1); }
45
+ 50% { box-shadow: 0 0 25px rgba(56, 189, 248, 0.3); }
46
+ }
47
+ .glow-effect {
48
+ animation: pulse-glow 3s infinite;
49
+ }
50
+
51
+ .glass-panel {
52
+ background: rgba(30, 41, 59, 0.7);
53
+ backdrop-filter: blur(12px);
54
+ -webkit-backdrop-filter: blur(12px);
55
+ border: 1px solid rgba(255, 255, 255, 0.05);
56
+ }
57
+
58
+ /* Toggle Switch */
59
+ .toggle-checkbox:checked {
60
+ right: 0;
61
+ border-color: #38bdf8;
62
+ }
63
+ .toggle-checkbox:checked + .toggle-label {
64
+ background-color: #38bdf8;
65
+ }
66
+
67
+ /* Range Slider Styling */
68
+ input[type=range] {
69
+ -webkit-appearance: none;
70
+ background: transparent;
71
+ }
72
+ input[type=range]::-webkit-slider-thumb {
73
+ -webkit-appearance: none;
74
+ height: 20px;
75
+ width: 20px;
76
+ border-radius: 50%;
77
+ background: #38bdf8;
78
+ cursor: pointer;
79
+ margin-top: -8px;
80
+ box-shadow: 0 0 10px rgba(56,189,248,0.5);
81
+ }
82
+ input[type=range]::-webkit-slider-runnable-track {
83
+ width: 100%;
84
+ height: 4px;
85
+ cursor: pointer;
86
+ background: #334155;
87
+ border-radius: 2px;
88
+ }
89
+
90
+ /* Chart Bars */
91
+ .bar-fill {
92
+ transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
93
+ }
94
+ </style>
95
+ </head>
96
+ <body class="min-h-screen flex flex-col relative">
97
+
98
+ <!-- Background Canvas for Particles -->
99
+ <canvas id="bgCanvas" class="fixed top-0 left-0 w-full h-full -z-10"></canvas>
100
+
101
+ <!-- Header -->
102
+ <header class="w-full p-6 flex justify-between items-center glass-panel sticky top-0 z-50 border-b border-slate-700/50">
103
+ <div class="flex items-center gap-3">
104
+ <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">
105
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
106
+ <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" />
107
+ </svg>
108
+ </div>
109
+ <div>
110
+ <h1 class="text-xl font-bold tracking-tight text-white">CostScope</h1>
111
+ <p class="text-xs text-slate-400">Financial Transparency Tool</p>
112
+ </div>
113
+ </div>
114
+ <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">
115
+ Built with anycoder
116
+ </a>
117
+ </header>
118
+
119
+ <!-- Main Content -->
120
+ <main class="flex-grow container mx-auto px-4 py-12 flex flex-col lg:flex-row gap-8">
121
+
122
+ <!-- Left Column: The Question & Input -->
123
+ <div class="w-full lg:w-1/2 flex flex-col gap-6">
124
+
125
+ <!-- Hero Text -->
126
+ <div class="space-y-2 animate-float">
127
+ <h2 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-400">
128
+ Do I have to pay for this service?
129
+ </h2>
130
+ <p class="text-lg text-slate-400 max-w-lg">
131
+ Stop guessing. Input your scenario below to analyze the true cost structure and find out if it's really "free".
132
+ </p>
133
+ </div>
134
+
135
+ <!-- Interactive Form -->
136
+ <div class="glass-panel p-8 rounded-2xl shadow-2xl border border-slate-700/50 mt-4">
137
+ <form id="costForm" class="space-y-6" onsubmit="event.preventDefault(); analyzeCost();">
138
+
139
+ <!-- Service Name -->
140
+ <div class="space-y-2">
141
+ <label class="text-sm font-semibold text-slate-300 uppercase tracking-wider">Service Name</label>
142
+ <input type="text" id="serviceName" placeholder="e.g., Netflix, Gym Membership, Adobe CC"
143
+ 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">
144
+ </div>
145
+
146
+ <!-- Cost Type Selection -->
147
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
148
+ <label class="cursor-pointer relative">
149
+ <input type="radio" name="costType" value="free" class="peer sr-only" onchange="updateFormUI()">
150
+ <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">
151
+ <div class="text-2xl mb-1">🎁</div>
152
+ <div class="font-bold text-slate-200">Free</div>
153
+ <div class="text-xs text-slate-400">$0 Upfront</div>
154
+ </div>
155
+ <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>
156
+ </label>
157
+
158
+ <label class="cursor-pointer relative">
159
+ <input type="radio" name="costType" value="subscription" class="peer sr-only" checked onchange="updateFormUI()">
160
+ <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">
161
+ <div class="text-2xl mb-1">🔄</div>
162
+ <div class="font-bold text-slate-200">Sub</div>
163
+ <div class="text-xs text-slate-400">Recurring Fee</div>
164
+ </div>
165
+ <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>
166
+ </label>
167
+
168
+ <label class="cursor-pointer relative">
169
+ <input type="radio" name="costType" value="one-time" class="peer sr-only" onchange="updateFormUI()">
170
+ <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">
171
+ <div class="text-2xl mb-1">💎</div>
172
+ <div class="font-bold text-slate-200">One-off</div>
173
+ <div class="text-xs text-slate-400">Single Purchase</div>
174
+ </div>
175
+ <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>
176
+ </label>
177
+ </div>
178
+
179
+ <!-- Dynamic Inputs -->
180
+ <div id="priceInputGroup" class="space-y-4 transition-all duration-300">
181
+ <div class="flex justify-between items-end">
182
+ <label class="text-sm font-semibold text-slate-300 uppercase tracking-wider">Price</label>
183
+ <span class="text-xs text-slate-500" id="priceLabel">per month</span>
184
+ </div>
185
+ <div class="relative">
186
+ <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">$</span>
187
+ <input type="number" id="priceAmount" value="15.99" min="0" step="0.01"
188
+ 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">
189
+ </div>
190
+
191
+ <!-- Frequency Selector (Hidden for One-time) -->
192
+ <div id="frequencyGroup" class="space-y-2">
193
+ <label class="text-sm font-semibold text-slate-300 uppercase tracking-wider">Billing Cycle</label>
194
+ <div class="flex bg-slate-900/50 p-1 rounded-lg border border-slate-700">
195
+ <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>
196
+ <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>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <!-- Hidden Cost Toggle -->
202
+ <div class="pt-4 border-t border-slate-700/50">
203
+ <div class="flex items-center justify-between mb-4">
204
+ <span class="text-sm font-semibold text-slate-300">Add Hidden Costs?</span>
205
+ <div class="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
206
+ <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"/>
207
+ <label for="hiddenCostToggle" class="toggle-label block overflow-hidden h-5 rounded-full bg-slate-700 cursor-pointer"></label>
208
+ </div>
209
+ </div>
210
+
211
+ <div id="hiddenCostInputs" class="hidden space-y-3 opacity-0 transition-opacity duration-300">
212
+ <div class="grid grid-cols-2 gap-3">
213
+ <div>
214
+ <label class="text-xs text-slate-400 block mb-1">Setup Fee</label>
215
+ <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">
216
+ </div>
217
+ <div>
218
+ <label class="text-xs text-slate-400 block mb-1">Maintenance/yr</label>
219
+ <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">
220
+ </div>
221
+ </div>
222
+ <div>
223
+ <label class="text-xs text-slate-400 block mb-1">Time Investment (hrs/week)</label>
224
+ <input type="range" id="timeInvestment" min="0" max="40" value="0" class="w-full" oninput="document.getElementById('timeVal').innerText = this.value + ' hrs'">
225
+ <div class="flex justify-between text-xs text-slate-500 mt-1">
226
+ <span>0 hrs</span>
227
+ <span id="timeVal" class="text-cyan-400 font-bold">0 hrs</span>
228
+ <span>40 hrs</span>
229
+ </div>
230
+ </div>
231
+ <div>
232
+ <label class="text-xs text-slate-400 block mb-1">Your Hourly Rate ($)</label>
233
+ <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">
234
+ </div>
235
+ </div>
236
+ </div>
237
+
238
+ <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]">
239
+ <span class="relative z-10 flex items-center justify-center gap-2">
240
+ Calculate True Cost
241
+ <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">
242
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
243
+ </svg>
244
+ </span>
245
+ <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>
246
+ </button>
247
+
248
+ </form>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Right Column: Visualization & Results -->
253
+ <div class="w-full lg:w-1/2 flex flex-col gap-6 relative">
254
+
255
+ <!-- Initial State Placeholder -->
256
+ <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">
257
+ <div class="w-24 h-24 bg-slate-800 rounded-full flex items-center justify-center mb-6 animate-pulse">
258
+ <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">
259
+ <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" />
260
+ </svg>
261
+ </div>
262
+ <h3 class="text-xl font-semibold text-slate-300">Awaiting Input</h3>
263
+ <p class="text-slate-500 mt-2 max-w-xs">Enter your service details on the left to generate a financial breakdown.</p>
264
+ </div>
265
+
266
+ <!-- Results Container (Hidden initially) -->
267
+ <div id="resultsContainer" class="hidden space-y-6">
268
+
269
+ <!-- Verdict Card -->
270
+ <div id="verdictCard" class="glass-panel p-8 rounded-2xl border-l-4 transition-all duration-500 transform translate-y-4 opacity-0">
271
+ <div class="flex justify-between items-start">
272
+ <div>
273
+ <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400 mb-1">The Verdict</h3>
274
+ <h2 id="verdictTitle" class="text-3xl font-bold text-white mb-2">It's Free, But...</h2>
275
+ <p id="verdictDesc" class="text-slate-300 leading-relaxed">You pay with your data and attention.</p>
276
+ </div>
277
+ <div id="verdictIcon" class="text-5xl">🎁</div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Stats Grid -->
282
+ <div class="grid grid-cols-2 gap-4">
283
+ <div class="glass-panel p-5 rounded-xl border border-slate-700/50">
284
+ <div class="text-slate-400 text-xs uppercase font-bold mb-1">1 Year Cost</div>
285
+ <div id="cost1Year" class="text-2xl font-mono font-bold text-white">$0.00</div>
286
+ </div>
287
+ <div class="glass-panel p-5 rounded-xl border border-slate-700/50">
288
+ <div class="text-slate-400 text-xs uppercase font-bold mb-1">5 Year Cost</div>
289
+ <div id="cost5Year" class="text-2xl font-mono font-bold text-white">$0.00</div>
290
+ </div>
291
+ <div class="glass-panel p-5 rounded-xl border border-slate-700/50">
292
+ <div class="text-slate-400 text-xs uppercase font-bold mb-1">Time Cost (Year)</div>
293
+ <div id="timeCostYear" class="text-2xl font-mono font-bold text-cyan-400">$0.00</div>
294
+ </div>
295
+ <div class="glass-panel p-5 rounded-xl border border-slate-700/50">
296
+ <div class="text-slate-400 text-xs uppercase font-bold mb-1">Total Impact</div>
297
+ <div id="totalImpact" class="text-2xl font-mono font-bold text-emerald-400">$0.00</div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Visual Breakdown -->
302
+ <div class="glass-panel p-6 rounded-2xl border border-slate-700/50">
303
+ <h3 class="text-sm font-bold uppercase tracking-widest text-slate-400 mb-6">Cost Composition</h3>
304
+
305
+ <!-- Bar Chart -->
306
+ <div class="space-y-4">
307
+ <!-- Base Cost Bar -->
308
+ <div>
309
+ <div class="flex justify-between text-xs mb-1">
310
+ <span class="text-slate-300">Base Subscription</span>
311
+ <span id="baseCostPct" class="text-slate-400">0%</span>
312
+ </div>
313
+ <div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden">
314
+ <div id="barBase" class="bar-fill bg-cyan-500 h-full rounded-full" style="width: 0%"></div>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Hidden Fees Bar -->
319
+ <div>
320
+ <div class="flex justify-between text-xs mb-1">
321
+ <span class="text-slate-300">Hidden Fees (Setup/Maintenance)</span>
322
+ <span id="hiddenCostPct" class="text-slate-400">0%</span>
323
+ </div>
324
+ <div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden">
325
+ <div id="barHidden" class="bar-fill bg-purple-500 h-full rounded-full" style="width: 0%"></div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Time Cost Bar -->
330
+ <div>
331
+ <div class="flex justify-between text-xs mb-1">
332
+ <span class="text-slate-300">Time Investment Value</span>
333
+ <span id="timeCostPct" class="text-slate-400">0%</span>
334
+ </div>
335
+ <div class="w-full bg-slate-800 rounded-full h-3 overflow-hidden">
336
+ <div id="barTime" class="bar-fill bg-amber-500 h-full rounded-full" style="width: 0%"></div>
337
+ </div>
338
+ </div>
339
+ </div>
340
+
341
+ <div class="mt-6 pt-4 border-t border-slate-700/50 flex items-center gap-3">
342
+ <div class="w-8 h-8 rounded-full bg-slate-800 flex items-center justify-center text-lg">💡</div>
343
+ <p id="insightText" class="text-sm text-slate-400 italic">"Over 5 years, you could buy a used car with this amount."</p>
344
+ </div>
345
+ </div>
346
+
347
+ </div>
348
+ </div>
349
+ </main>
350
+
351
+ <script>
352
+ // --- Audio Setup (Tone.js) ---
353
+ let synth;
354
+ let isAudioInit = false;
355
+
356
+ async function initAudio() {
357
+ if (isAudioInit) return;
358
+ await Tone.start();
359
+ synth = new Tone.PolySynth(Tone.Synth).toDestination();
360
+ synth.volume.value = -10;
361
+ isAudioInit = true;
362
+ }
363
+
364
+ function playSound(type) {
365
+ if (!isAudioInit) initAudio();
366
+ if (!synth) return;
367
+
368
+ const now = Tone.now();
369
+ if (type === 'click') {
370
+ synth.triggerAttackRelease("C5", "32n", now);
371
+ } else if (type === 'success') {
372
+ synth.triggerAttackRelease(["C4", "E4", "G4", "C5"], "8n", now);
373
+ } else if (type === 'hover') {
374
+ // Very subtle click
375
+ // synth.triggerAttackRelease("G2", "64n", now, 0.1);
376
+ }
377
+ }
378
+
379
+ // --- UI Logic ---
380
+ let currentFrequency = 'monthly';
381
+
382
+ function setFrequency(freq, btn) {
383
+ currentFrequency = freq;
384
+ // Update UI buttons
385
+ const buttons = btn.parentElement.querySelectorAll('button');
386
+ buttons.forEach(b => {
387
+ b.classList.remove('bg-slate-700', 'text-white', 'shadow-sm');
388
+ b.classList.add('text-slate-400');
389
+ });
390
+ btn.classList.remove('text-slate-400');
391
+ btn.classList.add('bg-slate-700', 'text-white', 'shadow-sm');
392
+
393
+ document.getElementById('priceLabel').innerText = freq === 'monthly' ? 'per month' : 'per year';
394
+ playSound('click');
395
+ }
396
+
397
+ function updateFormUI() {
398
+ const type = document.querySelector('input[name="costType"]:checked').value;
399
+ const priceGroup = document.getElementById('priceInputGroup');
400
+ const freqGroup = document.getElementById('frequencyGroup');
401
+ const priceInput = document.getElementById('priceAmount');
402
+
403
+ if (type === 'free') {
404
+ priceGroup.classList.add('opacity-50', 'pointer-events-none');
405
+ priceInput.value = 0;
406
+ } else {
407
+ priceGroup.classList.remove('opacity-50', 'pointer-events-none');
408
+ if(priceInput.value == 0) priceInput.value = 15.99;
409
+ }
410
+
411
+ if (type === 'one-time') {
412
+ freqGroup.classList.add('hidden');
413
+ document.getElementById('priceLabel').innerText = 'one time';
414
+ } else {
415
+ freqGroup.classList.remove('hidden');
416
+ document.getElementById('priceLabel').innerText = currentFrequency === 'monthly' ? 'per month' : 'per year';
417
+ }
418
+ playSound('click');
419
+ }
420
+
421
+ // Toggle Hidden Costs
422
+ document.getElementById('hiddenCostToggle').addEventListener('change', function() {
423
+ const div = document.getElementById('hiddenCostInputs');
424
+ if (this.checked) {
425
+ div.classList.remove('hidden');
426
+ // small delay to allow display:block to apply before opacity transition
427
+ setTimeout(() => div.classList.remove('opacity-0'), 10);
428
+ } else {
429
+ div.classList.add('opacity-0');
430
+ setTimeout(() => div.classList.add('hidden'), 300);
431
+ }
432
+ playSound('click');
433
+ });
434
+
435
+ // --- Calculation Logic ---
436
+ function analyzeCost() {
437
+ initAudio();
438
+ playSound('success');
439
+
440
+ const name = document.getElementById('serviceName').value || "This Service";
441
+ const type = document.querySelector('input[name="costType"]:checked').value;
442
+ const price = parseFloat(document.getElementById('priceAmount').value) || 0;
443
+
444
+ // Hidden Costs
445
+ const setupFee = parseFloat(document.getElementById('setupFee').value) || 0;
446
+ const maintenanceFee = parseFloat(document.getElementById('maintenanceFee').value) || 0;
447
+ const timeHours = parseFloat(document.getElementById('timeInvestment').value) || 0;
448
+ const hourlyRate = parseFloat(document.getElementById('hourlyRate').value) || 0;
449
+
450
+ // Calculations
451
+ let monthlyCost = 0;
452
+ let yearlyCost = 0;
453
+
454
+ if (type === 'free') {
455
+ monthlyCost = 0;
456
+ yearlyCost = 0;
457
+ } else if (type === 'subscription') {
458
+ if (currentFrequency === 'monthly') {
459
+ monthlyCost = price;
460
+ yearlyCost = price * 12;
461
+ } else {
462
+ monthlyCost = price / 12;
463
+ yearlyCost = price;
464
+ }
465
+ } else if (type === 'one-time') {
466
+ monthlyCost = price / 12; // Amortized for chart comparison, though strictly one-time
467
+ yearlyCost = price; // Assuming lifespan of 1 year for comparison context, or just the price
468
+ // For 5 year calc, we assume bought once.
469
+ }
470
+
471
+ // Time Cost Calculation (Weekly hours * 52 weeks * rate)
472
+ const yearlyTimeCost = timeHours * 52 * hourlyRate;
473
+ const totalYearly = yearlyCost + setupFee + maintenanceFee + yearlyTimeCost;
474
+
475
+ // 5 Year Projection
476
+ let fiveYearCost = 0;
477
+ if (type === 'subscription') {
478
+ fiveYearCost = (yearlyCost * 5) + setupFee + (maintenanceFee * 5) + (yearlyTimeCost * 5);
479
+ } else if (type === 'one-time') {
480
+ fiveYearCost = price + setupFee + (maintenanceFee * 5) + (yearlyTimeCost * 5);
481
+ } else {
482
+ fiveYearCost = (yearlyTimeCost * 5); // Free service but time is money
483
+ }
484
+
485
+ // Update UI
486
+ document.getElementById('initialState').classList.add('hidden');
487
+ const results = document.getElementById('resultsContainer');
488
+ results.classList.remove('hidden');
489
+
490
+ // Animate Verdict Card
491
+ const verdictCard = document.getElementById('verdictCard');
492
+ verdictCard.classList.remove('translate-y-4', 'opacity-0');
493
+
494
+ // Determine Verdict
495
+ const verdictTitle = document.getElementById('verdictTitle');
496
+ const verdictDesc = document.getElementById('verdictDesc');
497
+ const verdictIcon = document.getElementById('verdictIcon');
498
+
499
+ if (type === 'free') {
500
+ verdictTitle.innerText = "Technically Free";
501
+ verdictTitle.className = "text-3xl font-bold text-emerald-400 mb-2";
502
+ verdictDesc.innerText = `You don't pay cash, but "${name}" costs you ${timeHours} hours of your life every week. Time is money.`;
503
+ verdictIcon.innerText = "🎁";
504
+ 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";
505
+ } else if (totalYearly > 1000) {
506
+ verdictTitle.innerText = "Expensive Habit";
507
+ verdictTitle.className = "text-3xl font-bold text-rose-400 mb-2";
508
+ verdictDesc.innerText = `This is a significant financial commitment. Are you getting $${Math.round(totalYearly)} worth of value?`;
509
+ verdictIcon.innerText = "💸";
510
+ verdictCard.className = "glass-panel p-8 rounded-2xl border-l-4 border-rose-500 transition-all duration-500 transform translate-y-0 opacity-100";
511
+ } else {
512
+ verdictTitle.innerText = "Reasonable Cost";
513
+ verdictTitle.className = "text-3xl font-bold text-cyan-400 mb-2";
514
+ verdictDesc.innerText = `The cost is manageable, but watch out for price hikes.`;
515
+ verdictIcon.innerText = "👍";
516
+ verdictCard.className = "glass-panel p-8 rounded-2xl border-l-4 border-cyan-500 transition-all duration-500 transform translate-y-0 opacity-100";
517
+ }
518
+
519
+ // Update Numbers
520
+ animateValue("cost1Year", 0, yearlyCost + setupFee + maintenanceFee, 1000);
521
+ animateValue("cost5Year", 0, fiveYearCost, 1500);
522
+ animateValue("timeCostYear", 0, yearlyTimeCost, 1000);
523
+ animateValue("totalImpact", 0, totalYearly, 1000);
524
+
525
+ // Update Chart
526
+ // Normalize for chart (1 Year view)
527
+ const base = yearlyCost;
528
+ const hidden = setupFee + maintenanceFee;
529
+ const time = yearlyTimeCost;
530
+ const total = base + hidden + time || 1; // avoid div by zero
531
+
532
+ const pctBase = (base / total) * 100;
533
+ const pctHidden = (hidden / total) * 100;
534
+ const pctTime = (time / total) * 100;
535
+
536
+ document.getElementById('barBase').style.width = `${pctBase}%`;
537
+ document.getElementById('barHidden').style.width = `${pctHidden}%`;
538
+ document.getElementById('barTime').style.width = `${pctTime}%`;
539
+
540
+ document.getElementById('baseCostPct').innerText = Math.round(pctBase) + '%';
541
+ document.getElementById('hiddenCostPct').innerText = Math.round(pctHidden) + '%';
542
+ document.getElementById('timeCostPct').innerText = Math.round(pctTime) + '%';
543
+
544
+ // Insight Text
545
+ const insight = document.getElementById('insightText');
546
+ if (type === 'free' && timeHours > 0) {
547
+ insight.innerText = `If you value your time at $${hourlyRate}/hr, this "free" service actually costs you $${yearlyTimeCost.toLocaleString()} per year.`;
548
+ } else if (fiveYearCost > 10000) {
549
+ insight.innerText = `In 5 years, this could be a down payment on a car or a lavish vacation.`;
550
+ } else if (fiveYearCost > 1000) {
551
+ insight.innerText = `Over 5 years, that's a high-end laptop.`;
552
+ } else {
553
+ insight.innerText = `The cost is low, but every dollar counts towards your financial freedom.`;
554
+ }
555
+ }
556
+
557
+ function animateValue(id, start, end, duration) {
558
+ const obj = document.getElementById(id);
559
+ let startTimestamp = null;
560
+ const step = (timestamp) => {
561
+ if (!startTimestamp) startTimestamp = timestamp;
562
+ const progress = Math.min((timestamp - startTimestamp) / duration, 1);
563
+ const value = Math.floor(progress * (end - start) + start);
564
+ obj.innerHTML = "$" + value.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
565
+ if (progress < 1) {
566
+ window.requestAnimationFrame(step);
567
+ }
568
+ };
569
+ window.requestAnimationFrame(step);
570
+ }
571
+
572
+ // --- Background Animation (Canvas) ---
573
+ const canvas = document.getElementById('bgCanvas');
574
+ const ctx = canvas.getContext('2d');
575
+ let particles = [];
576
+
577
+ function resizeCanvas() {
578
+ canvas.width = window.innerWidth;
579
+ canvas.height = window.innerHeight;
580
+ }
581
+ window.addEventListener('resize', resizeCanvas);
582
+ resizeCanvas();
583
+
584
+ class Particle {
585
+ constructor() {
586
+ this.x = Math.random() * canvas.width;
587
+ this.y = Math.random() * canvas.height;
588
+ this.vx = (Math.random() - 0.5) * 0.5;
589
+ this.vy = (Math.random() - 0.5) * 0.5;
590
+ this.size = Math.random() * 2;
591
+ this.color = `rgba(56, 189, 248, ${Math.random() * 0.5})`; // Cyan
592
+ }
593
+
594
+ update() {
595
+ this.x += this.vx;
596
+ this.y += this.vy;
597
+
598
+ if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
599
+ if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
600
+ }
601
+
602
+ draw() {
603
+ ctx.beginPath();
604
+ ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
605
+ ctx.fillStyle = this.color;
606
+ ctx.fill();
607
+ }
608
+ }
609
+
610
+ function initParticles() {
611
+ particles = [];
612
+ for (let i = 0; i < 50; i++) {
613
+ particles.push(new Particle());
614
+ }
615
+ }
616
+
617
+ function animateParticles() {
618
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
619
+
620
+ // Draw connections
621
+ for (let i = 0; i < particles.length; i++) {
622
+ for (let j = i; j < particles.length; j++) {
623
+ const dx = particles[i].x - particles[j].x;
624
+ const dy = particles[i].y - particles[j].y;
625
+ const distance = Math.sqrt(dx * dx + dy * dy);
626
+
627
+ if (distance < 150) {
628
+ ctx.beginPath();
629
+ ctx.strokeStyle = `rgba(148, 163, 184, ${0.1 - distance/1500})`;
630
+ ctx.lineWidth = 1;
631
+ ctx.moveTo(particles[i].x, particles[i].y);
632
+ ctx.lineTo(particles[j].x, particles[j].y);
633
+ ctx.stroke();
634
+ }
635
+ }
636
+ particles[i].update();
637
+ particles[i].draw();
638
+ }
639
+ requestAnimationFrame(animateParticles);
640
+ }
641
+
642
+ initParticles();
643
+ animateParticles();
644
+
645
+ </script>
646
+ </body>
647
+ </html>