Hugging Face's logo

Spaces:
Jausing
/
misc-stuff
Running

App Files Community
Jausing commited on
Commit
7033b1b
·
verified ·
1 Parent(s): 78cbe1c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +534 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Misc Stuff
3
- emoji: 👁
4
- colorFrom: yellow
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: misc-stuff
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,534 @@
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="sv">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Pensionsoptimering - Löneväxlingsverktyg</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .slider-thumb::-webkit-slider-thumb {
12
+ -webkit-appearance: none;
13
+ appearance: none;
14
+ width: 24px;
15
+ height: 24px;
16
+ border-radius: 50%;
17
+ background: #3b82f6;
18
+ cursor: pointer;
19
+ }
20
+
21
+ .slider-thumb::-moz-range-thumb {
22
+ width: 24px;
23
+ height: 24px;
24
+ border-radius: 50%;
25
+ background: #3b82f6;
26
+ cursor: pointer;
27
+ }
28
+
29
+ .tooltip {
30
+ position: relative;
31
+ display: inline-block;
32
+ }
33
+
34
+ .tooltip .tooltiptext {
35
+ visibility: hidden;
36
+ width: 200px;
37
+ background-color: #333;
38
+ color: #fff;
39
+ text-align: center;
40
+ border-radius: 6px;
41
+ padding: 8px;
42
+ position: absolute;
43
+ z-index: 1;
44
+ bottom: 125%;
45
+ left: 50%;
46
+ margin-left: -100px;
47
+ opacity: 0;
48
+ transition: opacity 0.3s;
49
+ font-size: 14px;
50
+ }
51
+
52
+ .tooltip:hover .tooltiptext {
53
+ visibility: visible;
54
+ opacity: 1;
55
+ }
56
+
57
+ .animate-grow {
58
+ animation: grow 1.5s ease-out forwards;
59
+ }
60
+
61
+ @keyframes grow {
62
+ from { transform: scaleY(0); }
63
+ to { transform: scaleY(1); }
64
+ }
65
+
66
+ .fade-in {
67
+ animation: fadeIn 1s ease-in forwards;
68
+ }
69
+
70
+ @keyframes fadeIn {
71
+ from { opacity: 0; }
72
+ to { opacity: 1; }
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="bg-gray-50 min-h-screen">
77
+ <div class="container mx-auto px-4 py-8">
78
+ <header class="text-center mb-12">
79
+ <h1 class="text-4xl font-bold text-blue-800 mb-4"> Pensionsoptimering, Löneväxling o annat tråk</h1>
80
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">
81
+ Är du som Thomander och inte kan greppa siffror i luften? Laborera fram hur löneväxling kan påverka din pensionssparande och totala inkomst. Justera parametrarna nedan för att se effekten i realtid. Gå sedan till Rui och var riktigt mallig. 💗
82
+ </p>
83
+ </header>
84
+
85
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
86
+ <!-- Input Controls -->
87
+ <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-1">
88
+ <h2 class="text-2xl font-semibold text-blue-700 mb-6">Inställningar</h2>
89
+
90
+ <div class="space-y-6">
91
+ <div>
92
+ <label for="salary" class="block text-sm font-medium text-gray-700 mb-2">
93
+ Månadslön (före skatt)
94
+ <span class="tooltip ml-1">
95
+ <i class="fas fa-info-circle text-blue-500"></i>
96
+ <span class="tooltiptext">Din bruttolön innan skatt och andra avdrag</span>
97
+ </span>
98
+ </label>
99
+ <div class="flex items-center">
100
+ <span class="mr-2 text-gray-500">kr</span>
101
+ <input type="range" id="salary" min="20000" max="100000" step="1000" value="45000" class="w-full h-2 bg-gray-200 rounded-lg slider-thumb">
102
+ <span id="salaryValue" class="ml-4 font-medium">45 000</span>
103
+ </div>
104
+ </div>
105
+
106
+ <div>
107
+ <label for="age" class="block text-sm font-medium text-gray-700 mb-2">
108
+ Ålder
109
+ <span class="tooltip ml-1">
110
+ <i class="fas fa-info-circle text-blue-500"></i>
111
+ <span class="tooltiptext">Din nuvarande ålder för att beräkna tills pension</span>
112
+ </span>
113
+ </label>
114
+ <div class="flex items-center">
115
+ <input type="range" id="age" min="20" max="65" step="1" value="35" class="w-full h-2 bg-gray-200 rounded-lg slider-thumb">
116
+ <span id="ageValue" class="ml-4 font-medium">35</span>
117
+ </div>
118
+ </div>
119
+
120
+ <div>
121
+ <label for="retirementAge" class="block text-sm font-medium text-gray-700 mb-2">
122
+ Planerad pensionsålder
123
+ <span class="tooltip ml-1">
124
+ <i class="fas fa-info-circle text-blue-500"></i>
125
+ <span class="tooltiptext">Ålder då du planerar att gå i pension</span>
126
+ </span>
127
+ </label>
128
+ <div class="flex items-center">
129
+ <input type="range" id="retirementAge" min="55" max="75" step="1" value="65" class="w-full h-2 bg-gray-200 rounded-lg slider-thumb">
130
+ <span id="retirementAgeValue" class="ml-4 font-medium">65</span>
131
+ </div>
132
+ </div>
133
+
134
+ <div>
135
+ <label for="pensionContribution" class="block text-sm font-medium text-gray-700 mb-2">
136
+ Pensionsavsättning (% av lön)
137
+ <span class="tooltip ml-1">
138
+ <i class="fas fa-info-circle text-blue-500"></i>
139
+ <span class="tooltiptext">Den procent av din lön som går till pensionssparande</span>
140
+ </span>
141
+ </label>
142
+ <div class="flex items-center">
143
+ <input type="range" id="pensionContribution" min="2" max="20" step="0.5" value="4.5" class="w-full h-2 bg-gray-200 rounded-lg slider-thumb">
144
+ <span id="pensionContributionValue" class="ml-4 font-medium">4.5%</span>
145
+ </div>
146
+ </div>
147
+
148
+ <div>
149
+ <label for="salaryExchange" class="block text-sm font-medium text-gray-700 mb-2">
150
+ Löneväxlingsandel (%)
151
+ <span class="tooltip ml-1">
152
+ <i class="fas fa-info-circle text-blue-500"></i>
153
+ <span class="tooltiptext">Andel av din pensionsavsättning som löneväxlas</span>
154
+ </span>
155
+ </label>
156
+ <div class="flex items-center">
157
+ <input type="range" id="salaryExchange" min="0" max="100" step="5" value="0" class="w-full h-2 bg-gray-200 rounded-lg slider-thumb">
158
+ <span id="salaryExchangeValue" class="ml-4 font-medium">0%</span>
159
+ </div>
160
+ </div>
161
+
162
+ <div>
163
+ <label for="expectedReturn" class="block text-sm font-medium text-gray-700 mb-2">
164
+ Förväntad årlig avkastning (%)
165
+ <span class="tooltip ml-1">
166
+ <i class="fas fa-info-circle text-blue-500"></i>
167
+ <span class="tooltiptext">Genomsnittlig årlig avkastning på ditt pensionssparande</span>
168
+ </span>
169
+ </label>
170
+ <div class="flex items-center">
171
+ <input type="range" id="expectedReturn" min="1" max="10" step="0.5" value="5" class="w-full h-2 bg-gray-200 rounded-lg slider-thumb">
172
+ <span id="expectedReturnValue" class="ml-4 font-medium">5%</span>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="pt-4">
177
+ <button id="calculateBtn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center">
178
+ <i class="fas fa-calculator mr-2"></i> Beräkna pensionsoptimering
179
+ </button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+
184
+ <!-- Results Visualization -->
185
+ <div class="bg-white rounded-xl shadow-lg p-6 lg:col-span-2">
186
+ <h2 class="text-2xl font-semibold text-blue-700 mb-6">Resultat</h2>
187
+
188
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
189
+ <div class="bg-blue-50 rounded-lg p-4 border border-blue-100">
190
+ <h3 class="text-lg font-medium text-blue-800 mb-2">Månadslön efter löneväxling</h3>
191
+ <p class="text-3xl font-bold text-blue-600" id="netSalary">0 kr</p>
192
+ <p class="text-sm text-gray-600 mt-1" id="salaryChange">Ingen förändring</p>
193
+ </div>
194
+
195
+ <div class="bg-green-50 rounded-lg p-4 border border-green-100">
196
+ <h3 class="text-lg font-medium text-green-800 mb-2">Total pensionspot</h3>
197
+ <p class="text-3xl font-bold text-green-600" id="totalPension">0 kr</p>
198
+ <p class="text-sm text-gray-600 mt-1" id="pensionChange">Ingen förändring</p>
199
+ </div>
200
+ </div>
201
+
202
+ <div class="mb-8">
203
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Fördelning löneväxling</h3>
204
+ <div class="h-64">
205
+ <canvas id="contributionChart"></canvas>
206
+ </div>
207
+ </div>
208
+
209
+ <div class="mb-8">
210
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Pensionsutveckling över tid</h3>
211
+ <div class="h-64">
212
+ <canvas id="growthChart"></canvas>
213
+ </div>
214
+ </div>
215
+
216
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
217
+ <div class="flex">
218
+ <div class="flex-shrink-0">
219
+ <i class="fas fa-lightbulb text-yellow-500 text-xl"></i>
220
+ </div>
221
+ <div class="ml-3">
222
+ <h3 class="text-sm font-medium text-yellow-800">Tips för optimering</h3>
223
+ <div class="mt-2 text-sm text-yellow-700" id="optimizationTips">
224
+ <p>Justera löneväxlingsandelen för att se hur det påverkar din nettolön och pensionssparande.</p>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
231
+ <h3 class="text-lg font-medium text-gray-800 mb-3">Sammanfattning</h3>
232
+ <div class="space-y-3 text-sm text-gray-700" id="summaryText">
233
+ <p>Löneväxling innebär att du som anställd går med på att sänka din bruttolön mot att arbetsgivaren istället betalar in en motsvarande summa till din pension. Detta kan vara skattemässigt fördelaktigt eftersom pensionsavsättningar inte omfattas av arbetsgivaravgifter och vanlig inkomstskatt.</p>
234
+ <p>Använd verktyget ovan för att se hur olika nivåer av löneväxling påverkar din nuvarande lön och framtida pension.</p>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <script>
242
+ // Format numbers with spaces as thousand separators
243
+ function formatNumber(num) {
244
+ return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
245
+ }
246
+
247
+ // Calculate tax based on salary (simplified Swedish tax model)
248
+ function calculateTax(salary) {
249
+ if (salary <= 20000) return salary * 0.30;
250
+ if (salary <= 40000) return salary * 0.35;
251
+ return salary * 0.45;
252
+ }
253
+
254
+ // Calculate employer contributions (simplified)
255
+ function calculateEmployerContributions(salary) {
256
+ return salary * 0.3142; // Approximate employer contributions in Sweden
257
+ }
258
+
259
+ // Calculate compound interest
260
+ function calculateCompoundInterest(principal, annualRate, years, monthlyContribution) {
261
+ let amount = principal;
262
+ const monthlyRate = annualRate / 12 / 100;
263
+ const months = years * 12;
264
+
265
+ for (let i = 0; i < months; i++) {
266
+ amount = amount * (1 + monthlyRate) + monthlyContribution;
267
+ }
268
+
269
+ return amount;
270
+ }
271
+
272
+ // Update all displayed values when inputs change
273
+ function updateDisplayValues() {
274
+ document.getElementById('salaryValue').textContent = formatNumber(document.getElementById('salary').value);
275
+ document.getElementById('ageValue').textContent = document.getElementById('age').value;
276
+ document.getElementById('retirementAgeValue').textContent = document.getElementById('retirementAge').value;
277
+ document.getElementById('pensionContributionValue').textContent = document.getElementById('pensionContribution').value + '%';
278
+ document.getElementById('salaryExchangeValue').textContent = document.getElementById('salaryExchange').value + '%';
279
+ document.getElementById('expectedReturnValue').textContent = document.getElementById('expectedReturn').value + '%';
280
+ }
281
+
282
+ // Initialize charts
283
+ let contributionChart;
284
+ let growthChart;
285
+
286
+ function initCharts() {
287
+ const contributionCtx = document.getElementById('contributionChart').getContext('2d');
288
+ contributionChart = new Chart(contributionCtx, {
289
+ type: 'doughnut',
290
+ data: {
291
+ labels: ['Arbetsgivaravgifter sparade', 'Skatt sparad', 'Din nettolön'],
292
+ datasets: [{
293
+ data: [0, 0, 0],
294
+ backgroundColor: [
295
+ '#3b82f6',
296
+ '#10b981',
297
+ '#f59e0b'
298
+ ],
299
+ borderWidth: 1
300
+ }]
301
+ },
302
+ options: {
303
+ responsive: true,
304
+ maintainAspectRatio: false,
305
+ plugins: {
306
+ legend: {
307
+ position: 'right',
308
+ },
309
+ tooltip: {
310
+ callbacks: {
311
+ label: function(context) {
312
+ let label = context.label || '';
313
+ if (label) {
314
+ label += ': ';
315
+ }
316
+ label += formatNumber(context.raw) + ' kr';
317
+ return label;
318
+ }
319
+ }
320
+ }
321
+ }
322
+ }
323
+ });
324
+
325
+ const growthCtx = document.getElementById('growthChart').getContext('2d');
326
+ growthChart = new Chart(growthCtx, {
327
+ type: 'line',
328
+ data: {
329
+ labels: [],
330
+ datasets: [
331
+ {
332
+ label: 'Med löneväxling',
333
+ data: [],
334
+ borderColor: '#3b82f6',
335
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
336
+ borderWidth: 2,
337
+ fill: true,
338
+ tension: 0.4
339
+ },
340
+ {
341
+ label: 'Utan löneväxling',
342
+ data: [],
343
+ borderColor: '#64748b',
344
+ backgroundColor: 'rgba(100, 116, 139, 0.1)',
345
+ borderWidth: 2,
346
+ borderDash: [5, 5],
347
+ fill: true,
348
+ tension: 0.4
349
+ }
350
+ ]
351
+ },
352
+ options: {
353
+ responsive: true,
354
+ maintainAspectRatio: false,
355
+ plugins: {
356
+ tooltip: {
357
+ callbacks: {
358
+ label: function(context) {
359
+ let label = context.dataset.label || '';
360
+ if (label) {
361
+ label += ': ';
362
+ }
363
+ label += formatNumber(context.raw) + ' kr';
364
+ return label;
365
+ }
366
+ }
367
+ }
368
+ },
369
+ scales: {
370
+ y: {
371
+ beginAtZero: true,
372
+ ticks: {
373
+ callback: function(value) {
374
+ return formatNumber(value) + ' kr';
375
+ }
376
+ }
377
+ }
378
+ }
379
+ }
380
+ });
381
+ }
382
+
383
+ // Main calculation function
384
+ function calculateResults() {
385
+ // Get input values
386
+ const salary = parseInt(document.getElementById('salary').value);
387
+ const age = parseInt(document.getElementById('age').value);
388
+ const retirementAge = parseInt(document.getElementById('retirementAge').value);
389
+ const pensionContribution = parseFloat(document.getElementById('pensionContribution').value);
390
+ const salaryExchange = parseInt(document.getElementById('salaryExchange').value);
391
+ const expectedReturn = parseFloat(document.getElementById('expectedReturn').value);
392
+
393
+ // Calculate years to retirement
394
+ const yearsToRetirement = retirementAge - age;
395
+
396
+ // Calculate pension contributions
397
+ const totalPensionContribution = salary * (pensionContribution / 100);
398
+ const exchangedAmount = totalPensionContribution * (salaryExchange / 100);
399
+ const regularPensionContribution = totalPensionContribution - exchangedAmount;
400
+
401
+ // Calculate tax savings from salary exchange
402
+ const taxRate = calculateTax(salary) / salary;
403
+ const employerContributionRate = 0.3142; // Approximate employer contributions in Sweden
404
+
405
+ const taxSaved = exchangedAmount * taxRate;
406
+ const employerContributionsSaved = exchangedAmount * employerContributionRate;
407
+ const totalSavings = taxSaved + employerContributionsSaved;
408
+
409
+ // Calculate net salary
410
+ const taxWithoutExchange = calculateTax(salary);
411
+ const taxWithExchange = calculateTax(salary - exchangedAmount);
412
+ const netSalaryWithoutExchange = salary - taxWithoutExchange;
413
+ const netSalaryWithExchange = (salary - exchangedAmount) - taxWithExchange;
414
+
415
+ // Calculate pension growth
416
+ const monthlyContributionWithExchange = (regularPensionContribution + exchangedAmount + totalSavings) / 12;
417
+ const monthlyContributionWithoutExchange = (regularPensionContribution + (exchangedAmount * (1 - taxRate))) / 12;
418
+
419
+ const pensionWithExchange = calculateCompoundInterest(0, expectedReturn, yearsToRetirement, monthlyContributionWithExchange);
420
+ const pensionWithoutExchange = calculateCompoundInterest(0, expectedReturn, yearsToRetirement, monthlyContributionWithoutExchange);
421
+
422
+ // Update result displays
423
+ document.getElementById('netSalary').textContent = formatNumber(Math.round(netSalaryWithExchange)) + ' kr';
424
+
425
+ const salaryDifference = netSalaryWithExchange - netSalaryWithoutExchange;
426
+ if (salaryDifference > 0) {
427
+ document.getElementById('salaryChange').textContent = `+${formatNumber(Math.round(salaryDifference))} kr jämfört med utan löneväxling`;
428
+ document.getElementById('salaryChange').className = 'text-sm text-green-600 mt-1';
429
+ } else if (salaryDifference < 0) {
430
+ document.getElementById('salaryChange').textContent = `${formatNumber(Math.round(salaryDifference))} kr jämfört med utan löneväxling`;
431
+ document.getElementById('salaryChange').className = 'text-sm text-red-600 mt-1';
432
+ } else {
433
+ document.getElementById('salaryChange').textContent = 'Ingen förändring';
434
+ document.getElementById('salaryChange').className = 'text-sm text-gray-600 mt-1';
435
+ }
436
+
437
+ document.getElementById('totalPension').textContent = formatNumber(Math.round(pensionWithExchange)) + ' kr';
438
+
439
+ const pensionDifference = pensionWithExchange - pensionWithoutExchange;
440
+ if (pensionDifference > 0) {
441
+ document.getElementById('pensionChange').textContent = `+${formatNumber(Math.round(pensionDifference))} kr jämfört med utan löneväxling`;
442
+ document.getElementById('pensionChange').className = 'text-sm text-green-600 mt-1';
443
+ } else if (pensionDifference < 0) {
444
+ document.getElementById('pensionChange').textContent = `${formatNumber(Math.round(pensionDifference))} kr jämfört med utan löneväxling`;
445
+ document.getElementById('pensionChange').className = 'text-sm text-red-600 mt-1';
446
+ } else {
447
+ document.getElementById('pensionChange').textContent = 'Ingen förändring';
448
+ document.getElementById('pensionChange').className = 'text-sm text-gray-600 mt-1';
449
+ }
450
+
451
+ // Update contribution chart
452
+ contributionChart.data.datasets[0].data = [
453
+ Math.round(employerContributionsSaved),
454
+ Math.round(taxSaved),
455
+ Math.round(netSalaryWithExchange)
456
+ ];
457
+ contributionChart.update();
458
+
459
+ // Update growth chart
460
+ const labels = [];
461
+ const withExchangeData = [];
462
+ const withoutExchangeData = [];
463
+
464
+ for (let year = 0; year <= yearsToRetirement; year++) {
465
+ labels.push(`År ${year}`);
466
+
467
+ const withExchange = calculateCompoundInterest(0, expectedReturn, year, monthlyContributionWithExchange);
468
+ const withoutExchange = calculateCompoundInterest(0, expectedReturn, year, monthlyContributionWithoutExchange);
469
+
470
+ withExchangeData.push(Math.round(withExchange));
471
+ withoutExchangeData.push(Math.round(withoutExchange));
472
+ }
473
+
474
+ growthChart.data.labels = labels;
475
+ growthChart.data.datasets[0].data = withExchangeData;
476
+ growthChart.data.datasets[1].data = withoutExchangeData;
477
+ growthChart.update();
478
+
479
+ // Update optimization tips
480
+ let tips = '';
481
+ if (salaryExchange === 0) {
482
+ tips = 'Du använder inte löneväxling alls. Öka löneväxlingsandelen för att se potentiella skattebesparingar och högre pensionsavsättningar.';
483
+ } else if (salaryExchange < 50) {
484
+ tips = 'Du löneväxlar en del av din pensionsavsättning. Öka andelen för större skattebesparingar och högre pensionsavsättningar.';
485
+ } else if (salaryExchange < 100) {
486
+ tips = 'Du löneväxlar en stor del av din pensionsavsättning. Öka till 100% för maximala skattebesparingar.';
487
+ } else {
488
+ tips = 'Du löneväxlar hela din pensionsavsättning. Detta ger maximala skattebesparingar och pensionsavsättningar.';
489
+ }
490
+
491
+ if (yearsToRetirement < 10) {
492
+ tips += ' Eftersom du har mindre än 10 år kvar till pension kan löneväxling vara särskilt fördelaktigt.';
493
+ } else if (yearsToRetirement > 30) {
494
+ tips += ' Med många år kvar till pension har ditt sparande lång tid att växa - löneväxling kan ge betydande fördelar över tid.';
495
+ }
496
+
497
+ document.getElementById('optimizationTips').innerHTML = `<p>${tips}</p>`;
498
+
499
+ // Add animation classes
500
+ document.getElementById('netSalary').classList.add('animate-grow');
501
+ document.getElementById('totalPension').classList.add('animate-grow');
502
+ document.querySelectorAll('.tooltip').forEach(el => el.classList.add('fade-in'));
503
+
504
+ // Remove animation classes after animation completes
505
+ setTimeout(() => {
506
+ document.getElementById('netSalary').classList.remove('animate-grow');
507
+ document.getElementById('totalPension').classList.remove('animate-grow');
508
+ }, 1500);
509
+ }
510
+
511
+ // Initialize the page
512
+ document.addEventListener('DOMContentLoaded', function() {
513
+ // Set up event listeners for all input changes
514
+ document.querySelectorAll('input[type="range"]').forEach(input => {
515
+ input.addEventListener('input', function() {
516
+ updateDisplayValues();
517
+ });
518
+ });
519
+
520
+ // Set up calculate button
521
+ document.getElementById('calculateBtn').addEventListener('click', function() {
522
+ calculateResults();
523
+ });
524
+
525
+ // Initialize display values and charts
526
+ updateDisplayValues();
527
+ initCharts();
528
+
529
+ // Calculate initial results
530
+ calculateResults();
531
+ });
532
+ </script>
533
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jausing/misc-stuff" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
534
+ </html>
prompts.txt ADDED
File without changes