Hugging Face's logo

Spaces:
AmitJ82
/
DailyConvert
Running

App Files Community
AmitJ82 commited on
Commit
9917b22
·
verified ·
1 Parent(s): 3e4bbf2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +783 -19
index.html CHANGED
@@ -1,19 +1,783 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Matrix Calculators - Modern & Dark</title>
7
+
8
+ <!-- Tailwind CSS CDN -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Font Awesome CDN -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
13
+
14
+ <!-- Google Fonts (Poppins) -->
15
+ <link rel="preconnect" href="https://fonts.googleapis.com">
16
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
18
+
19
+ <style>
20
+ body {
21
+ font-family: 'Poppins', sans-serif;
22
+ -webkit-font-smoothing: antialiased;
23
+ -moz-osx-font-smoothing: grayscale;
24
+ }
25
+ ::-webkit-scrollbar { width: 8px; }
26
+ ::-webkit-scrollbar-track { background: #1e293b; }
27
+ ::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
28
+ ::-webkit-scrollbar-thumb:hover { background: #64748b; }
29
+
30
+ .fade-in { animation: fadeInAnimation 0.5s ease-in-out; }
31
+ @keyframes fadeInAnimation {
32
+ from { opacity: 0; transform: translateY(15px); }
33
+ to { opacity: 1; transform: translateY(0); }
34
+ }
35
+ /* Custom date input styling for dark mode */
36
+ input[type="date"]::-webkit-calendar-picker-indicator {
37
+ filter: invert(0.8);
38
+ cursor: pointer;
39
+ }
40
+ </style>
41
+ </head>
42
+ <body class="bg-slate-900 text-slate-200 flex justify-center items-start min-h-screen p-4 sm:p-8">
43
+
44
+ <div class="w-full max-w-6xl">
45
+
46
+ <!-- Main Dashboard -->
47
+ <div id="dashboard" class="fade-in">
48
+ <header class="text-center mb-10">
49
+ <h1 class="text-4xl md:text-5xl font-bold text-white">Matrix Calculators</h1>
50
+ <p class="text-lg text-slate-400 mt-2">Your ultimate suite of calculators and converters for everyday life</p>
51
+ </header>
52
+
53
+ <main class="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
54
+ <!-- Finance Card -->
55
+ <div class="bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 border-t-4 border-green-500 transition-transform duration-300 hover:-translate-y-2">
56
+ <div class="flex items-center gap-4 mb-5">
57
+ <i class="fa-solid fa-coins text-3xl text-green-400"></i>
58
+ <h2 class="font-semibold text-2xl text-white">Finance Calculators</h2>
59
+ </div>
60
+ <div class="space-y-3">
61
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('emi')">
62
+ <strong class="font-semibold text-slate-100">EMI Calculator</strong>
63
+ <small class="text-sm text-slate-400 block mt-1">Calculate loan EMIs with sliders</small>
64
+ </div>
65
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('gst')">
66
+ <strong class="font-semibold text-slate-100">GST/VAT Calculator</strong>
67
+ <small class="text-sm text-slate-400 block mt-1">Add or remove tax from amounts</small>
68
+ </div>
69
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('split')">
70
+ <strong class="font-semibold text-slate-100">Bill Splitter</strong>
71
+ <small class="text-sm text-slate-400 block mt-1">Split restaurant bills with friends</small>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- Health Card -->
77
+ <div class="bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 border-t-4 border-red-500 transition-transform duration-300 hover:-translate-y-2">
78
+ <div class="flex items-center gap-4 mb-5">
79
+ <i class="fa-solid fa-heart-pulse text-3xl text-red-400"></i>
80
+ <h2 class="font-semibold text-2xl text-white">Health & Fitness</h2>
81
+ </div>
82
+ <div class="space-y-3">
83
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('bmi')">
84
+ <strong class="font-semibold text-slate-100">BMI Calculator</strong>
85
+ <small class="text-sm text-slate-400 block mt-1">Body Mass Index with visual gauge</small>
86
+ </div>
87
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('calorie')">
88
+ <strong class="font-semibold text-slate-100">Calorie Calculator</strong>
89
+ <small class="text-sm text-slate-400 block mt-1">BMR & TDEE needs</small>
90
+ </div>
91
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('bodyfat')">
92
+ <strong class="font-semibold text-slate-100">Body Fat Calculator</strong>
93
+ <small class="text-sm text-slate-400 block mt-1">Estimate your body fat percentage</small>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Converter Card -->
99
+ <div class="bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 border-t-4 border-blue-500 transition-transform duration-300 hover:-translate-y-2">
100
+ <div class="flex items-center gap-4 mb-5">
101
+ <i class="fa-solid fa-arrows-rotate text-3xl text-blue-400"></i>
102
+ <h2 class="font-semibold text-2xl text-white">Unit Converters</h2>
103
+ </div>
104
+ <div class="space-y-3">
105
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('converter', 'length')">
106
+ <strong class="font-semibold text-slate-100">Length Converter</strong>
107
+ <small class="text-sm text-slate-400 block mt-1">Meters, Feet, Inches, Miles...</small>
108
+ </div>
109
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('converter', 'weight')">
110
+ <strong class="font-semibold text-slate-100">Weight Converter</strong>
111
+ <small class="text-sm text-slate-400 block mt-1">Kilograms, Pounds, Ounces...</small>
112
+ </div>
113
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('converter', 'temperature')">
114
+ <strong class="font-semibold text-slate-100">Temperature Converter</strong>
115
+ <small class="text-sm text-slate-400 block mt-1">Celsius, Fahrenheit, Kelvin</small>
116
+ </div>
117
+ </div>
118
+ </div>
119
+
120
+ <!-- Date & Time Card -->
121
+ <div class="bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 border-t-4 border-purple-500 transition-transform duration-300 hover:-translate-y-2">
122
+ <div class="flex items-center gap-4 mb-5">
123
+ <i class="fa-solid fa-calendar-days text-3xl text-purple-400"></i>
124
+ <h2 class="font-semibold text-2xl text-white">Date & Time Tools</h2>
125
+ </div>
126
+ <div class="space-y-3">
127
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('age')">
128
+ <strong class="font-semibold text-slate-100">Age Calculator</strong>
129
+ <small class="text-sm text-slate-400 block mt-1">Calculate exact age from birth date</small>
130
+ </div>
131
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('dateDiff')">
132
+ <strong class="font-semibold text-slate-100">Date Difference</strong>
133
+ <small class="text-sm text-slate-400 block mt-1">Days, weeks, months between dates</small>
134
+ </div>
135
+ <div class="bg-slate-700/50 p-4 rounded-lg cursor-pointer hover:bg-slate-700 transition" onclick="showCalculator('dateAdd')">
136
+ <strong class="font-semibold text-slate-100">Add/Subtract Dates</strong>
137
+ <small class="text-sm text-slate-400 block mt-1">Calculate a future or past date</small>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </main>
142
+ </div>
143
+
144
+ <!-- Calculator Page Container -->
145
+ <div id="calculator-container" class="w-full"></div>
146
+
147
+ </div>
148
+
149
+ <script>
150
+ // --- JAVASCRIPT LOGIC ---
151
+
152
+ const dashboard = document.getElementById('dashboard');
153
+ const calculatorContainer = document.getElementById('calculator-container');
154
+ const formatCurrency = (num, digits = 2) => `₹ ${num.toLocaleString('en-IN', { minimumFractionDigits: digits, maximumFractionDigits: digits })}`;
155
+
156
+ // Generic back button for all calculators
157
+ const backButton = `<button onclick="showDashboard()" class="absolute top-4 left-4 bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 px-4 rounded-full transition duration-300"><i class="fas fa-arrow-left"></i></button>`;
158
+
159
+ const calculators = {
160
+ // --- Finance Calculators ---
161
+ emi: {
162
+ template: `
163
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-green-500 relative max-w-2xl mx-auto">
164
+ ${backButton}
165
+ <h2 class="text-2xl font-bold text-center mb-6 text-green-400">EMI Calculator</h2>
166
+ <div class="space-y-6">
167
+ <div>
168
+ <label class="text-slate-300 font-semibold">Loan Amount: <span id="amount-val" class="font-bold text-green-400"></span></label>
169
+ <input type="range" id="amount" min="10000" max="10000000" value="500000" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
170
+ </div>
171
+ <div>
172
+ <label class="text-slate-300 font-semibold">Interest Rate (% p.a.): <span id="rate-val" class="font-bold text-green-400"></span></label>
173
+ <input type="range" id="rate" min="1" max="20" value="8.5" step="0.1" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
174
+ </div>
175
+ <div>
176
+ <label class="text-slate-300 font-semibold">Tenure (Months): <span id="tenure-val" class="font-bold text-green-400"></span></label>
177
+ <input type="range" id="tenure" min="6" max="360" value="120" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
178
+ </div>
179
+ </div>
180
+ <div id="emi-result" class="text-center mt-8 bg-slate-900 p-6 rounded-lg"></div>
181
+ </div>
182
+ `,
183
+ init: function() {
184
+ const amountSlider = document.getElementById('amount');
185
+ const rateSlider = document.getElementById('rate');
186
+ const tenureSlider = document.getElementById('tenure');
187
+ const calculateEMI = () => {
188
+ const p = parseFloat(amountSlider.value);
189
+ const r = parseFloat(rateSlider.value) / 12 / 100;
190
+ const n = parseFloat(tenureSlider.value);
191
+ document.getElementById('amount-val').textContent = formatCurrency(p, 0);
192
+ document.getElementById('rate-val').textContent = `${rateSlider.value}%`;
193
+ document.getElementById('tenure-val').textContent = `${n} months`;
194
+ if (r === 0) {
195
+ document.getElementById('emi-result').innerHTML = `<p class="text-lg text-slate-400">Monthly EMI:</p><p class="text-4xl font-bold text-white">${formatCurrency(p/n)}</p>`;
196
+ return;
197
+ }
198
+ const emi = p * r * (Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
199
+ const totalPayable = emi * n;
200
+ const totalInterest = totalPayable - p;
201
+
202
+ document.getElementById('emi-result').innerHTML = `
203
+ <p class="text-lg text-slate-400">Monthly EMI:</p>
204
+ <p class="text-4xl font-bold text-white mb-4">${formatCurrency(emi)}</p>
205
+ <div class="flex justify-around text-center">
206
+ <div>
207
+ <p class="text-slate-400 text-sm">Total Interest</p>
208
+ <p class="text-lg font-semibold text-red-400">${formatCurrency(totalInterest)}</p>
209
+ </div>
210
+ <div>
211
+ <p class="text-slate-400 text-sm">Total Payment</p>
212
+ <p class="text-lg font-semibold text-green-400">${formatCurrency(totalPayable)}</p>
213
+ </div>
214
+ </div>
215
+ `;
216
+ };
217
+ [amountSlider, rateSlider, tenureSlider].forEach(el => el.addEventListener('input', calculateEMI));
218
+ calculateEMI();
219
+ }
220
+ },
221
+ gst: {
222
+ template: `
223
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-green-500 relative max-w-2xl mx-auto">
224
+ ${backButton}
225
+ <h2 class="text-2xl font-bold text-center mb-6 text-green-400">GST/VAT Calculator</h2>
226
+ <div class="space-y-4">
227
+ <div>
228
+ <label for="gst-amount" class="text-slate-300 font-semibold block mb-2">Amount</label>
229
+ <input type="number" id="gst-amount" placeholder="Enter amount" class="w-full bg-slate-700 border-2 border-slate-600 rounded-lg p-3 text-white focus:outline-none focus:border-green-500">
230
+ </div>
231
+ <div>
232
+ <label for="gst-rate" class="text-slate-300 font-semibold block mb-2">GST/VAT Rate (%)</label>
233
+ <input type="number" id="gst-rate" value="18" class="w-full bg-slate-700 border-2 border-slate-600 rounded-lg p-3 text-white focus:outline-none focus:border-green-500">
234
+ </div>
235
+ <div class="flex gap-4">
236
+ <button id="add-gst" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition">Add GST</button>
237
+ <button id="remove-gst" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg transition">Remove GST</button>
238
+ </div>
239
+ </div>
240
+ <div id="gst-result" class="text-center mt-6 bg-slate-900 p-4 rounded-lg min-h-[100px] flex flex-col justify-center"></div>
241
+ </div>
242
+ `,
243
+ init: function() {
244
+ const amountInput = document.getElementById('gst-amount');
245
+ const rateInput = document.getElementById('gst-rate');
246
+ const resultDiv = document.getElementById('gst-result');
247
+ document.getElementById('add-gst').addEventListener('click', () => {
248
+ const amount = parseFloat(amountInput.value);
249
+ const rate = parseFloat(rateInput.value);
250
+ if (isNaN(amount) || isNaN(rate)) {
251
+ resultDiv.innerHTML = `<p class="text-red-400">Please enter valid amount and rate.</p>`;
252
+ return;
253
+ }
254
+ const tax = amount * (rate / 100);
255
+ const total = amount + tax;
256
+ resultDiv.innerHTML = `
257
+ <p class="text-slate-400">Tax Amount: <span class="font-semibold text-white">${formatCurrency(tax)}</span></p>
258
+ <p class="text-slate-400">Total Amount (incl. GST): <span class="font-semibold text-2xl text-green-400">${formatCurrency(total)}</span></p>
259
+ `;
260
+ });
261
+ document.getElementById('remove-gst').addEventListener('click', () => {
262
+ const amount = parseFloat(amountInput.value);
263
+ const rate = parseFloat(rateInput.value);
264
+ if (isNaN(amount) || isNaN(rate)) {
265
+ resultDiv.innerHTML = `<p class="text-red-400">Please enter valid amount and rate.</p>`;
266
+ return;
267
+ }
268
+ const originalAmount = amount / (1 + rate / 100);
269
+ const tax = amount - originalAmount;
270
+ resultDiv.innerHTML = `
271
+ <p class="text-slate-400">Base Amount: <span class="font-semibold text-2xl text-green-400">${formatCurrency(originalAmount)}</span></p>
272
+ <p class="text-slate-400">Tax Amount (GST): <span class="font-semibold text-white">${formatCurrency(tax)}</span></p>
273
+ `;
274
+ });
275
+ }
276
+ },
277
+ split: {
278
+ template: `
279
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-green-500 relative max-w-2xl mx-auto">
280
+ ${backButton}
281
+ <h2 class="text-2xl font-bold text-center mb-6 text-green-400">Bill Splitter</h2>
282
+ <div class="space-y-4">
283
+ <input type="number" id="bill-total" placeholder="Total Bill Amount" class="w-full bg-slate-700 p-3 rounded-lg text-white focus:outline-none focus:border-green-500">
284
+ <input type="number" id="bill-people" placeholder="Number of People" class="w-full bg-slate-700 p-3 rounded-lg text-white focus:outline-none focus:border-green-500">
285
+ <div>
286
+ <label class="text-slate-300 font-semibold">Tip: <span id="bill-tip-val" class="font-bold text-green-400">10%</span></label>
287
+ <input type="range" id="bill-tip" min="0" max="50" value="10" class="w-full h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer">
288
+ </div>
289
+ <button id="split-bill-btn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition">Calculate</button>
290
+ </div>
291
+ <div id="split-result" class="text-center mt-6 bg-slate-900 p-4 rounded-lg min-h-[100px] flex flex-col justify-center"></div>
292
+ </div>
293
+ `,
294
+ init: function() {
295
+ const totalInput = document.getElementById('bill-total');
296
+ const peopleInput = document.getElementById('bill-people');
297
+ const tipSlider = document.getElementById('bill-tip');
298
+ const tipVal = document.getElementById('bill-tip-val');
299
+ const resultDiv = document.getElementById('split-result');
300
+
301
+ tipSlider.addEventListener('input', () => tipVal.textContent = `${tipSlider.value}%`);
302
+
303
+ document.getElementById('split-bill-btn').addEventListener('click', () => {
304
+ const total = parseFloat(totalInput.value);
305
+ const people = parseInt(peopleInput.value);
306
+ const tipPercent = parseFloat(tipSlider.value);
307
+
308
+ if (isNaN(total) || isNaN(people) || total <= 0 || people <= 0) {
309
+ resultDiv.innerHTML = `<p class="text-red-400">Please enter a valid bill amount and number of people.</p>`;
310
+ return;
311
+ }
312
+
313
+ const tipAmount = total * (tipPercent / 100);
314
+ const finalTotal = total + tipAmount;
315
+ const perPerson = finalTotal / people;
316
+
317
+ resultDiv.innerHTML = `
318
+ <p class="text-slate-400">Total Bill (incl. tip): <span class="font-semibold text-white">${formatCurrency(finalTotal)}</span></p>
319
+ <p class="text-slate-400">Each person pays:</p>
320
+ <p class="text-3xl font-bold text-green-400">${formatCurrency(perPerson)}</p>
321
+ `;
322
+ });
323
+ }
324
+ },
325
+
326
+ // --- Health Calculators ---
327
+ bmi: {
328
+ template: `
329
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-red-500 relative max-w-2xl mx-auto">
330
+ ${backButton}
331
+ <h2 class="text-2xl font-bold text-center mb-6 text-red-400">BMI Calculator</h2>
332
+ <div class="flex justify-center mb-4">
333
+ <div class="bg-slate-700 p-1 rounded-full flex gap-1">
334
+ <button id="bmi-metric" class="px-4 py-2 rounded-full font-semibold bg-red-500 text-white">Metric</button>
335
+ <button id="bmi-imperial" class="px-4 py-2 rounded-full font-semibold text-slate-300">Imperial</button>
336
+ </div>
337
+ </div>
338
+ <div id="bmi-inputs" class="space-y-4"></div>
339
+ <div id="bmi-result" class="text-center mt-6 bg-slate-900 p-4 rounded-lg min-h-[100px]"></div>
340
+ </div>
341
+ `,
342
+ init: function() {
343
+ const metricBtn = document.getElementById('bmi-metric');
344
+ const imperialBtn = document.getElementById('bmi-imperial');
345
+ const inputsDiv = document.getElementById('bmi-inputs');
346
+ const resultDiv = document.getElementById('bmi-result');
347
+ let unit = 'metric';
348
+
349
+ const metricTemplate = `
350
+ <input type="number" id="cm" placeholder="Height (cm)" class="w-full bg-slate-700 p-3 rounded-lg text-white focus:outline-none focus:border-red-500">
351
+ <input type="number" id="kg" placeholder="Weight (kg)" class="w-full bg-slate-700 p-3 rounded-lg text-white focus:outline-none focus:border-red-500">
352
+ `;
353
+ const imperialTemplate = `
354
+ <div class="flex gap-4">
355
+ <input type="number" id="ft" placeholder="Height (ft)" class="w-full bg-slate-700 p-3 rounded-lg text-white focus:outline-none focus:border-red-500">
356
+ <input type="number" id="in" placeholder="Height (in)" class="w-full bg-slate-700 p-3 rounded-lg text-white focus:outline-none focus:border-red-500">
357
+ </div>
358
+ <input type="number" id="lbs" placeholder="Weight (lbs)" class="w-full bg-slate-700 p-3 rounded-lg text-white focus:outline-none focus:border-red-500">
359
+ `;
360
+
361
+ const calculateBMI = () => {
362
+ let bmi;
363
+ if (unit === 'metric') {
364
+ const cm = parseFloat(document.getElementById('cm').value);
365
+ const kg = parseFloat(document.getElementById('kg').value);
366
+ if (!cm || !kg || cm <= 0 || kg <= 0) return;
367
+ bmi = kg / Math.pow(cm / 100, 2);
368
+ } else {
369
+ const ft = parseFloat(document.getElementById('ft').value) || 0;
370
+ const inches = parseFloat(document.getElementById('in').value) || 0;
371
+ const lbs = parseFloat(document.getElementById('lbs').value);
372
+ const totalInches = (ft * 12) + inches;
373
+ if (!totalInches || !lbs || totalInches <= 0 || lbs <= 0) return;
374
+ bmi = (lbs / Math.pow(totalInches, 2)) * 703;
375
+ }
376
+
377
+ if (isNaN(bmi)) return;
378
+
379
+ let category = '';
380
+ let color = '';
381
+ if (bmi < 18.5) { category = 'Underweight'; color = 'text-blue-400'; }
382
+ else if (bmi < 25) { category = 'Normal weight'; color = 'text-green-400'; }
383
+ else if (bmi < 30) { category = 'Overweight'; color = 'text-yellow-400'; }
384
+ else { category = 'Obese'; color = 'text-red-400'; }
385
+
386
+ resultDiv.innerHTML = `
387
+ <p class="text-slate-400">Your BMI:</p>
388
+ <p class="text-4xl font-bold text-white">${bmi.toFixed(1)}</p>
389
+ <p class="text-xl font-semibold ${color}">${category}</p>
390
+ `;
391
+ };
392
+
393
+ const setupInputs = () => {
394
+ inputsDiv.innerHTML = unit === 'metric' ? metricTemplate : imperialTemplate;
395
+ resultDiv.innerHTML = '';
396
+ inputsDiv.querySelectorAll('input').forEach(el => el.addEventListener('input', calculateBMI));
397
+ };
398
+
399
+ metricBtn.addEventListener('click', () => {
400
+ unit = 'metric';
401
+ metricBtn.classList.add('bg-red-500', 'text-white');
402
+ imperialBtn.classList.remove('bg-red-500', 'text-white');
403
+ setupInputs();
404
+ });
405
+
406
+ imperialBtn.addEventListener('click', () => {
407
+ unit = 'imperial';
408
+ imperialBtn.classList.add('bg-red-500', 'text-white');
409
+ metricBtn.classList.remove('bg-red-500', 'text-white');
410
+ setupInputs();
411
+ });
412
+
413
+ setupInputs();
414
+ }
415
+ },
416
+ calorie: {
417
+ template: `
418
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-red-500 relative max-w-2xl mx-auto">
419
+ ${backButton}
420
+ <h2 class="text-2xl font-bold text-center mb-6 text-red-400">Calorie Calculator (BMR & TDEE)</h2>
421
+ <div class="grid md:grid-cols-2 gap-4">
422
+ <input type="number" id="cal-age" placeholder="Age" class="w-full bg-slate-700 p-3 rounded-lg text-white">
423
+ <select id="cal-gender" class="w-full bg-slate-700 p-3 rounded-lg text-white">
424
+ <option value="male">Male</option>
425
+ <option value="female">Female</option>
426
+ </select>
427
+ <input type="number" id="cal-height" placeholder="Height (cm)" class="w-full bg-slate-700 p-3 rounded-lg text-white">
428
+ <input type="number" id="cal-weight" placeholder="Weight (kg)" class="w-full bg-slate-700 p-3 rounded-lg text-white">
429
+ <select id="cal-activity" class="w-full bg-slate-700 p-3 rounded-lg text-white md:col-span-2">
430
+ <option value="1.2">Sedentary (little or no exercise)</option>
431
+ <option value="1.375">Lightly active (light exercise/sports 1-3 days/week)</option>
432
+ <option value="1.55">Moderately active (moderate exercise/sports 3-5 days/week)</option>
433
+ <option value="1.725">Very active (hard exercise/sports 6-7 days a week)</option>
434
+ <option value="1.9">Extra active (very hard exercise/sports & physical job)</option>
435
+ </select>
436
+ <button id="cal-calculate" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg transition md:col-span-2">Calculate</button>
437
+ </div>
438
+ <div id="cal-result" class="text-center mt-6 bg-slate-900 p-4 rounded-lg"></div>
439
+ </div>`,
440
+ init: function() {
441
+ document.getElementById('cal-calculate').addEventListener('click', () => {
442
+ const age = parseFloat(document.getElementById('cal-age').value);
443
+ const gender = document.getElementById('cal-gender').value;
444
+ const height = parseFloat(document.getElementById('cal-height').value);
445
+ const weight = parseFloat(document.getElementById('cal-weight').value);
446
+ const activity = parseFloat(document.getElementById('cal-activity').value);
447
+ const resultDiv = document.getElementById('cal-result');
448
+
449
+ if (!age || !height || !weight) {
450
+ resultDiv.innerHTML = `<p class="text-red-400">Please fill all fields.</p>`;
451
+ return;
452
+ }
453
+
454
+ let bmr;
455
+ if (gender === 'male') {
456
+ bmr = 10 * weight + 6.25 * height - 5 * age + 5;
457
+ } else {
458
+ bmr = 10 * weight + 6.25 * height - 5 * age - 161;
459
+ }
460
+ const tdee = bmr * activity;
461
+
462
+ resultDiv.innerHTML = `
463
+ <p class="text-slate-400">Your Basal Metabolic Rate (BMR) is:</p>
464
+ <p class="text-2xl font-bold text-white">${bmr.toFixed(0)} Calories/day</p>
465
+ <p class="text-slate-400 mt-4">Your Total Daily Energy Expenditure (TDEE) is:</p>
466
+ <p class="text-3xl font-bold text-red-400">${tdee.toFixed(0)} Calories/day</p>
467
+ `;
468
+ });
469
+ }
470
+ },
471
+ bodyfat: {
472
+ template: `
473
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-red-500 relative max-w-2xl mx-auto">
474
+ ${backButton}
475
+ <h2 class="text-2xl font-bold text-center mb-6 text-red-400">Body Fat Calculator (Navy Method)</h2>
476
+ <div class="grid md:grid-cols-2 gap-4">
477
+ <select id="bf-gender" class="w-full bg-slate-700 p-3 rounded-lg text-white">
478
+ <option value="male">Male</option>
479
+ <option value="female">Female</option>
480
+ </select>
481
+ <input type="number" id="bf-height" placeholder="Height (cm)" class="w-full bg-slate-700 p-3 rounded-lg text-white">
482
+ <input type="number" id="bf-neck" placeholder="Neck (cm)" class="w-full bg-slate-700 p-3 rounded-lg text-white">
483
+ <input type="number" id="bf-waist" placeholder="Waist (cm)" class="w-full bg-slate-700 p-3 rounded-lg text-white">
484
+ <div id="bf-female-only" class="md:col-span-2 hidden">
485
+ <input type="number" id="bf-hip" placeholder="Hip (cm)" class="w-full bg-slate-700 p-3 rounded-lg text-white mt-4">
486
+ </div>
487
+ <button id="bf-calculate" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 rounded-lg transition md:col-span-2">Calculate</button>
488
+ </div>
489
+ <div id="bf-result" class="text-center mt-6 bg-slate-900 p-4 rounded-lg"></div>
490
+ </div>`,
491
+ init: function() {
492
+ const genderSelect = document.getElementById('bf-gender');
493
+ const femaleOnlyDiv = document.getElementById('bf-female-only');
494
+
495
+ genderSelect.addEventListener('change', () => {
496
+ femaleOnlyDiv.classList.toggle('hidden', genderSelect.value === 'male');
497
+ });
498
+
499
+ document.getElementById('bf-calculate').addEventListener('click', () => {
500
+ const gender = genderSelect.value;
501
+ const height = parseFloat(document.getElementById('bf-height').value);
502
+ const neck = parseFloat(document.getElementById('bf-neck').value);
503
+ const waist = parseFloat(document.getElementById('bf-waist').value);
504
+ const resultDiv = document.getElementById('bf-result');
505
+ let bfp;
506
+
507
+ if (!height || !neck || !waist) {
508
+ resultDiv.innerHTML = `<p class="text-red-400">Please fill all required fields.</p>`;
509
+ return;
510
+ }
511
+
512
+ if (gender === 'male') {
513
+ bfp = 495 / (1.0324 - 0.19077 * Math.log10(waist - neck) + 0.15456 * Math.log10(height)) - 450;
514
+ } else {
515
+ const hip = parseFloat(document.getElementById('bf-hip').value);
516
+ if (!hip) {
517
+ resultDiv.innerHTML = `<p class="text-red-400">Please fill all required fields.</p>`;
518
+ return;
519
+ }
520
+ bfp = 495 / (1.29579 - 0.35004 * Math.log10(waist + hip - neck) + 0.22100 * Math.log10(height)) - 450;
521
+ }
522
+
523
+ if (isNaN(bfp) || bfp < 0) {
524
+ resultDiv.innerHTML = `<p class="text-red-400">Could not calculate. Please check your measurements.</p>`;
525
+ } else {
526
+ resultDiv.innerHTML = `
527
+ <p class="text-slate-400">Estimated Body Fat:</p>
528
+ <p class="text-4xl font-bold text-red-400">${bfp.toFixed(1)}%</p>
529
+ `;
530
+ }
531
+ });
532
+ }
533
+ },
534
+
535
+ // --- Converters ---
536
+ converter: {
537
+ template: `
538
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-blue-500 relative max-w-2xl mx-auto">
539
+ ${backButton}
540
+ <h2 id="converter-title" class="text-2xl font-bold text-center mb-6 text-blue-400"></h2>
541
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
542
+ <div>
543
+ <select id="from-unit" class="w-full bg-slate-700 p-3 rounded-lg text-white"></select>
544
+ <input type="number" id="from-value" placeholder="Enter value" class="w-full bg-slate-700 p-3 rounded-lg text-white mt-2">
545
+ </div>
546
+ <div>
547
+ <select id="to-unit" class="w-full bg-slate-700 p-3 rounded-lg text-white"></select>
548
+ <input type="text" id="to-value" readonly class="w-full bg-slate-900 p-3 rounded-lg text-white mt-2 font-bold text-xl">
549
+ </div>
550
+ </div>
551
+ </div>
552
+ `,
553
+ init: function(type) {
554
+ const units = {
555
+ length: { name: 'Length Converter', base: 'meter', list: { meter: 1, kilometer: 1000, centimeter: 0.01, millimeter: 0.001, mile: 1609.34, yard: 0.9144, foot: 0.3048, inch: 0.0254 } },
556
+ weight: { name: 'Weight Converter', base: 'kilogram', list: { kilogram: 1, gram: 0.001, milligram: 1e-6, ton: 1000, pound: 0.453592, ounce: 0.0283495 } },
557
+ temperature: { name: 'Temperature Converter', base: 'celsius', list: { celsius: 'C', fahrenheit: 'F', kelvin: 'K' } }
558
+ };
559
+
560
+ const config = units[type];
561
+ document.getElementById('converter-title').textContent = config.name;
562
+
563
+ const fromUnit = document.getElementById('from-unit');
564
+ const toUnit = document.getElementById('to-unit');
565
+ const fromValue = document.getElementById('from-value');
566
+
567
+ Object.keys(config.list).forEach(unit => {
568
+ fromUnit.innerHTML += `<option value="${unit}">${unit}</option>`;
569
+ toUnit.innerHTML += `<option value="${unit}">${unit}</option>`;
570
+ });
571
+
572
+ fromUnit.value = Object.keys(config.list)[0];
573
+ toUnit.value = Object.keys(config.list)[1];
574
+
575
+ const convert = () => {
576
+ const from = fromValue.value;
577
+ if (from === '' || isNaN(from)) {
578
+ document.getElementById('to-value').value = '';
579
+ return;
580
+ }
581
+
582
+ let result;
583
+ if (type === 'temperature') {
584
+ const fromU = fromUnit.value;
585
+ const toU = toUnit.value;
586
+ const val = parseFloat(from);
587
+ if (fromU === toU) { result = val; }
588
+ else if (fromU === 'celsius' && toU === 'fahrenheit') { result = (val * 9/5) + 32; }
589
+ else if (fromU === 'celsius' && toU === 'kelvin') { result = val + 273.15; }
590
+ else if (fromU === 'fahrenheit' && toU === 'celsius') { result = (val - 32) * 5/9; }
591
+ else if (fromU === 'fahrenheit' && toU === 'kelvin') { result = (val - 32) * 5/9 + 273.15; }
592
+ else if (fromU === 'kelvin' && toU === 'celsius') { result = val - 273.15; }
593
+ else if (fromU === 'kelvin' && toU === 'fahrenheit') { result = (val - 273.15) * 9/5 + 32; }
594
+ } else {
595
+ const inBase = from * config.list[fromUnit.value];
596
+ result = inBase / config.list[toUnit.value];
597
+ }
598
+
599
+ document.getElementById('to-value').value = result.toFixed(type === 'temperature' ? 2 : 4);
600
+ };
601
+
602
+ [fromUnit, toUnit, fromValue].forEach(el => el.addEventListener('change', convert));
603
+ fromValue.addEventListener('input', convert);
604
+ }
605
+ },
606
+
607
+ // --- Date & Time ---
608
+ age: {
609
+ template: `
610
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-purple-500 relative max-w-2xl mx-auto">
611
+ ${backButton}
612
+ <h2 class="text-2xl font-bold text-center mb-6 text-purple-400">Age Calculator</h2>
613
+ <div class="grid md:grid-cols-2 gap-4">
614
+ <div>
615
+ <label for="birth-date" class="text-slate-300 font-semibold block mb-2">Your Date of Birth</label>
616
+ <input type="date" id="birth-date" class="w-full bg-slate-700 p-3 rounded-lg text-white">
617
+ </div>
618
+ <div>
619
+ <label for="current-date" class="text-slate-300 font-semibold block mb-2">Age at the Date of</label>
620
+ <input type="date" id="current-date" class="w-full bg-slate-700 p-3 rounded-lg text-white">
621
+ </div>
622
+ <button id="age-calculate" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-lg transition md:col-span-2">Calculate Age</button>
623
+ </div>
624
+ <div id="age-result" class="text-center mt-6 bg-slate-900 p-4 rounded-lg"></div>
625
+ </div>
626
+ `,
627
+ init: function() {
628
+ const today = new Date().toISOString().split('T')[0];
629
+ document.getElementById('current-date').value = today;
630
+ document.getElementById('age-calculate').addEventListener('click', () => {
631
+ const birthDate = new Date(document.getElementById('birth-date').value);
632
+ const currentDate = new Date(document.getElementById('current-date').value);
633
+ const resultDiv = document.getElementById('age-result');
634
+
635
+ if (isNaN(birthDate.getTime()) || isNaN(currentDate.getTime())) {
636
+ resultDiv.innerHTML = `<p class="text-red-400">Please select valid dates.</p>`;
637
+ return;
638
+ }
639
+
640
+ if (birthDate > currentDate) {
641
+ resultDiv.innerHTML = `<p class="text-red-400">Birth date cannot be in the future.</p>`;
642
+ return;
643
+ }
644
+
645
+ let years = currentDate.getFullYear() - birthDate.getFullYear();
646
+ let months = currentDate.getMonth() - birthDate.getMonth();
647
+ let days = currentDate.getDate() - birthDate.getDate();
648
+
649
+ if (days < 0) {
650
+ months--;
651
+ days += new Date(currentDate.getFullYear(), currentDate.getMonth(), 0).getDate();
652
+ }
653
+ if (months < 0) {
654
+ years--;
655
+ months += 12;
656
+ }
657
+
658
+ resultDiv.innerHTML = `
659
+ <p class="text-slate-400">Your Age is</p>
660
+ <p class="text-3xl font-bold text-purple-400">${years} <span class="text-xl">years</span> ${months} <span class="text-xl">months</span> ${days} <span class="text-xl">days</span></p>
661
+ `;
662
+ });
663
+ }
664
+ },
665
+ dateDiff: {
666
+ template: `
667
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-purple-500 relative max-w-2xl mx-auto">
668
+ ${backButton}
669
+ <h2 class="text-2xl font-bold text-center mb-6 text-purple-400">Date Difference</h2>
670
+ <div class="grid md:grid-cols-2 gap-4">
671
+ <div>
672
+ <label for="start-date" class="text-slate-300 font-semibold block mb-2">Start Date</label>
673
+ <input type="date" id="start-date" class="w-full bg-slate-700 p-3 rounded-lg text-white">
674
+ </div>
675
+ <div>
676
+ <label for="end-date" class="text-slate-300 font-semibold block mb-2">End Date</label>
677
+ <input type="date" id="end-date" class="w-full bg-slate-700 p-3 rounded-lg text-white">
678
+ </div>
679
+ </div>
680
+ <div id="date-diff-result" class="text-center mt-6 bg-slate-900 p-4 rounded-lg"></div>
681
+ </div>
682
+ `,
683
+ init: function() {
684
+ const startDateInput = document.getElementById('start-date');
685
+ const endDateInput = document.getElementById('end-date');
686
+ const resultDiv = document.getElementById('date-diff-result');
687
+
688
+ const calculateDiff = () => {
689
+ const startDate = new Date(startDateInput.value);
690
+ const endDate = new Date(endDateInput.value);
691
+
692
+ if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
693
+ resultDiv.innerHTML = '';
694
+ return;
695
+ }
696
+
697
+ const diffTime = Math.abs(endDate - startDate);
698
+ const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
699
+
700
+ resultDiv.innerHTML = `
701
+ <p class="text-slate-400">Difference:</p>
702
+ <p class="text-3xl font-bold text-purple-400">${diffDays} days</p>
703
+ <p class="text-lg text-white">~${(diffDays/7).toFixed(1)} weeks | ~${(diffDays/30.44).toFixed(1)} months</p>
704
+ `;
705
+ };
706
+
707
+ startDateInput.addEventListener('change', calculateDiff);
708
+ endDateInput.addEventListener('change', calculateDiff);
709
+ }
710
+ },
711
+ dateAdd: {
712
+ template: `
713
+ <div class="fade-in bg-slate-800/70 backdrop-blur-sm rounded-xl shadow-lg p-6 lg:p-8 border-t-4 border-purple-500 relative max-w-2xl mx-auto">
714
+ ${backButton}
715
+ <h2 class="text-2xl font-bold text-center mb-6 text-purple-400">Add / Subtract Dates</h2>
716
+ <div>
717
+ <label for="start-date-add" class="text-slate-300 font-semibold block mb-2">Start Date</label>
718
+ <input type="date" id="start-date-add" class="w-full bg-slate-700 p-3 rounded-lg text-white mb-4">
719
+ </div>
720
+ <div class="grid grid-cols-3 gap-2">
721
+ <input type="number" id="add-years" placeholder="Years" class="w-full bg-slate-700 p-3 rounded-lg text-white">
722
+ <input type="number" id="add-months" placeholder="Months" class="w-full bg-slate-700 p-3 rounded-lg text-white">
723
+ <input type="number" id="add-days" placeholder="Days" class="w-full bg-slate-700 p-3 rounded-lg text-white">
724
+ </div>
725
+ <div class="flex gap-4 mt-4">
726
+ <button id="add-date-btn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-lg transition">Add</button>
727
+ <button id="sub-date-btn" class="w-full bg-purple-800 hover:bg-purple-900 text-white font-bold py-3 rounded-lg transition">Subtract</button>
728
+ </div>
729
+ <div id="date-add-result" class="text-center mt-6 bg-slate-900 p-4 rounded-lg"></div>
730
+ </div>
731
+ `,
732
+ init: function() {
733
+ const startDateInput = document.getElementById('start-date-add');
734
+ startDateInput.value = new Date().toISOString().split('T')[0];
735
+ const resultDiv = document.getElementById('date-add-result');
736
+
737
+ const calculate = (multiplier) => {
738
+ const startDate = new Date(startDateInput.value);
739
+ if(isNaN(startDate.getTime())) {
740
+ resultDiv.innerHTML = `<p class="text-red-400">Please select a valid start date.</p>`;
741
+ return;
742
+ }
743
+
744
+ const years = parseInt(document.getElementById('add-years').value) || 0;
745
+ const months = parseInt(document.getElementById('add-months').value) || 0;
746
+ const days = parseInt(document.getElementById('add-days').value) || 0;
747
+
748
+ startDate.setFullYear(startDate.getFullYear() + years * multiplier);
749
+ startDate.setMonth(startDate.getMonth() + months * multiplier);
750
+ startDate.setDate(startDate.getDate() + days * multiplier);
751
+
752
+ const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
753
+
754
+ resultDiv.innerHTML = `
755
+ <p class="text-slate-400">Resulting Date:</p>
756
+ <p class="text-3xl font-bold text-purple-400">${startDate.toLocaleDateString('en-US', options)}</p>
757
+ `;
758
+ };
759
+
760
+ document.getElementById('add-date-btn').addEventListener('click', () => calculate(1));
761
+ document.getElementById('sub-date-btn').addEventListener('click', () => calculate(-1));
762
+ }
763
+ }
764
+ };
765
+
766
+ function showDashboard() {
767
+ calculatorContainer.innerHTML = '';
768
+ dashboard.classList.remove('hidden');
769
+ dashboard.classList.add('fade-in');
770
+ }
771
+
772
+ function showCalculator(calcName, subType = null) {
773
+ dashboard.classList.add('hidden');
774
+ const calc = calculators[calcName];
775
+ if (calc) {
776
+ calculatorContainer.innerHTML = calc.template;
777
+ calc.init(subType);
778
+ }
779
+ }
780
+ </script>
781
+
782
+ </body>
783
+ </html>