Hugging Face's logo

Spaces:
Ahmadraza76
/
compoundingtracker
Running

App Files Community
Ahmadraza76 commited on
Commit
198a027
·
verified ·
1 Parent(s): c75149d

compounding tracker, user ka profile stop loss daily target compounding ke hisab Se sab kuchh bnao ek best app - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +508 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Compoundingtracker
3
- emoji: 📉
4
- colorFrom: gray
5
- colorTo: purple
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: compoundingtracker
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
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,508 @@
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>Wealth Compounder - Smart Investment Tracker</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4f46e5',
15
+ secondary: '#10b981',
16
+ danger: '#ef4444',
17
+ warning: '#f59e0b',
18
+ dark: '#1e293b',
19
+ light: '#f8fafc'
20
+ }
21
+ }
22
+ }
23
+ }
24
+ </script>
25
+ <style>
26
+ .gradient-bg {
27
+ background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
28
+ }
29
+ .chart-container {
30
+ height: 300px;
31
+ position: relative;
32
+ }
33
+ .progress-ring__circle {
34
+ transition: stroke-dashoffset 0.5s;
35
+ transform: rotate(-90deg);
36
+ transform-origin: 50% 50%;
37
+ }
38
+ .flip-in {
39
+ animation: flipIn 0.5s ease-out;
40
+ }
41
+ @keyframes flipIn {
42
+ from { transform: rotateX(90deg); opacity: 0; }
43
+ to { transform: rotateX(0); opacity: 1; }
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50 font-sans">
48
+ <div class="min-h-screen flex flex-col">
49
+ <!-- Header -->
50
+ <header class="gradient-bg text-white shadow-lg">
51
+ <div class="container mx-auto px-4 py-6">
52
+ <div class="flex justify-between items-center">
53
+ <div class="flex items-center space-x-2">
54
+ <i class="fas fa-chart-line text-2xl"></i>
55
+ <h1 class="text-2xl font-bold">Wealth Compounder</h1>
56
+ </div>
57
+ <div class="flex items-center space-x-4">
58
+ <button id="notifications" class="relative p-2 rounded-full hover:bg-black/10">
59
+ <i class="fas fa-bell"></i>
60
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
61
+ </button>
62
+ <div id="user-menu" class="relative">
63
+ <button class="flex items-center space-x-2 focus:outline-none">
64
+ <div class="h-8 w-8 rounded-full bg-white text-primary flex items-center justify-center font-bold">U</div>
65
+ <span class="hidden md:inline">User</span>
66
+ <i class="fas fa-chevron-down text-xs"></i>
67
+ </button>
68
+ <div id="dropdown-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
69
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
70
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
71
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Logout</a>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </header>
78
+
79
+ <!-- Main Content -->
80
+ <main class="flex-grow container mx-auto px-4 py-8">
81
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
82
+ <!-- Left Column - User Profile and Stats -->
83
+ <div class="space-y-6">
84
+ <!-- User Profile Card -->
85
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
86
+ <div class="flex items-center space-x-4">
87
+ <div class="h-16 w-16 rounded-full gradient-bg flex items-center justify-center text-white text-2xl font-bold">U</div>
88
+ <div>
89
+ <h2 class="text-xl font-bold text-gray-800">User Profile</h2>
90
+ <p class="text-gray-600">Premium Member</p>
91
+ </div>
92
+ </div>
93
+ <div class="mt-6 grid grid-cols-2 gap-4">
94
+ <div class="bg-gray-50 p-3 rounded-lg">
95
+ <p class="text-sm text-gray-500">Total Value</p>
96
+ <p class="text-lg font-bold">₹1,25,000</p>
97
+ </div>
98
+ <div class="bg-gray-50 p-3 rounded-lg">
99
+ <p class="text-sm text-gray-500">Today's Gain</p>
100
+ <p class="text-lg font-bold text-secondary">+₹2,450</p>
101
+ </div>
102
+ </div>
103
+ </div>
104
+
105
+ <!-- Daily Target Progress -->
106
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
107
+ <div class="flex justify-between items-center mb-4">
108
+ <h3 class="font-bold text-gray-800">Daily Target</h3>
109
+ <span class="text-sm bg-primary/10 text-primary px-2 py-1 rounded">80%</span>
110
+ </div>
111
+ <div class="relative pt-1">
112
+ <div class="flex items-center justify-between">
113
+ <div>
114
+ <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-primary bg-primary/10">
115
+ Target: ₹5,000
116
+ </span>
117
+ </div>
118
+ <div class="text-right">
119
+ <span class="text-xs font-semibold inline-block text-secondary">
120
+ Achieved: ₹4,000
121
+ </span>
122
+ </div>
123
+ </div>
124
+ <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-gray-200 mt-2">
125
+ <div style="width:80%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-gradient-to-r from-primary to-secondary"></div>
126
+ </div>
127
+ </div>
128
+ <div class="mt-4">
129
+ <label class="block text-sm font-medium text-gray-700 mb-1">Set New Daily Target</label>
130
+ <div class="flex">
131
+ <input type="number" class="flex-grow rounded-l-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" placeholder="Enter amount">
132
+ <button class="bg-primary text-white px-4 rounded-r-md hover:bg-primary/90">Set</button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Stop Loss Settings -->
138
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
139
+ <h3 class="font-bold text-gray-800 mb-4">Stop Loss Settings</h3>
140
+ <div class="space-y-4">
141
+ <div>
142
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Daily Loss</label>
143
+ <div class="flex">
144
+ <input type="number" class="flex-grow rounded-l-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" value="2000">
145
+ <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500">₹</span>
146
+ </div>
147
+ </div>
148
+ <div>
149
+ <label class="block text-sm font-medium text-gray-700 mb-1">Max Portfolio Loss</label>
150
+ <div class="flex">
151
+ <input type="number" class="flex-grow rounded-l-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" value="10000">
152
+ <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500">₹</span>
153
+ </div>
154
+ </div>
155
+ <div class="flex items-center">
156
+ <input type="checkbox" id="auto-stop" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
157
+ <label for="auto-stop" class="ml-2 block text-sm text-gray-700">Enable Auto Stop Loss</label>
158
+ </div>
159
+ <button class="w-full bg-primary text-white py-2 rounded-md hover:bg-primary/90 mt-2">Save Settings</button>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Middle Column - Compounding Calculator and Chart -->
165
+ <div class="space-y-6">
166
+ <!-- Compounding Calculator -->
167
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
168
+ <h3 class="font-bold text-gray-800 mb-4">Compounding Calculator</h3>
169
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
170
+ <div>
171
+ <label class="block text-sm font-medium text-gray-700 mb-1">Initial Capital (₹)</label>
172
+ <input type="number" id="initial-capital" class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" value="100000">
173
+ </div>
174
+ <div>
175
+ <label class="block text-sm font-medium text-gray-700 mb-1">Monthly Addition (₹)</label>
176
+ <input type="number" id="monthly-add" class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" value="5000">
177
+ </div>
178
+ <div>
179
+ <label class="block text-sm font-medium text-gray-700 mb-1">Expected Return (%)</label>
180
+ <input type="number" id="expected-return" class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" value="12">
181
+ </div>
182
+ <div>
183
+ <label class="block text-sm font-medium text-gray-700 mb-1">Time Period (Years)</label>
184
+ <input type="number" id="time-period" class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary focus:ring-primary" value="10">
185
+ </div>
186
+ </div>
187
+ <button id="calculate-btn" class="w-full bg-primary text-white py-2 rounded-md hover:bg-primary/90 mt-4">Calculate Compounding</button>
188
+
189
+ <div id="result-container" class="mt-6 hidden flip-in">
190
+ <div class="bg-gray-50 p-4 rounded-lg">
191
+ <h4 class="font-bold text-gray-800 mb-2">Projected Results</h4>
192
+ <div class="grid grid-cols-2 gap-4">
193
+ <div>
194
+ <p class="text-sm text-gray-500">Final Amount</p>
195
+ <p id="final-amount" class="text-lg font-bold text-secondary">₹3,23,838</p>
196
+ </div>
197
+ <div>
198
+ <p class="text-sm text-gray-500">Total Invested</p>
199
+ <p id="total-invested" class="text-lg font-bold">₹7,00,000</p>
200
+ </div>
201
+ <div>
202
+ <p class="text-sm text-gray-500">Interest Earned</p>
203
+ <p id="interest-earned" class="text-lg font-bold text-secondary">₹2,53,838</p>
204
+ </div>
205
+ <div>
206
+ <p class="text-sm text-gray-500">CAGR</p>
207
+ <p id="cagr" class="text-lg font-bold">12%</p>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Compounding Chart -->
215
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
216
+ <h3 class="font-bold text-gray-800 mb-4">Compounding Growth</h3>
217
+ <div class="chart-container">
218
+ <canvas id="compounding-chart"></canvas>
219
+ </div>
220
+ <div class="mt-4 flex justify-center space-x-4">
221
+ <button class="px-3 py-1 bg-gray-100 rounded-md text-sm">1M</button>
222
+ <button class="px-3 py-1 bg-primary text-white rounded-md text-sm">1Y</button>
223
+ <button class="px-3 py-1 bg-gray-100 rounded-md text-sm">5Y</button>
224
+ <button class="px-3 py-1 bg-gray-100 rounded-md text-sm">10Y</button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Right Column - Performance and Recent Activity -->
230
+ <div class="space-y-6">
231
+ <!-- Performance Summary -->
232
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
233
+ <h3 class="font-bold text-gray-800 mb-4">Performance Summary</h3>
234
+ <div class="grid grid-cols-3 gap-4 text-center">
235
+ <div>
236
+ <div class="h-24 w-24 mx-auto relative">
237
+ <svg class="w-full h-full" viewBox="0 0 100 100">
238
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
239
+ <circle class="text-primary progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="75.36" />
240
+ <text x="50" y="50" font-family="Arial" font-size="16" text-anchor="middle" dy=".3em" fill="#4f46e5" font-weight="bold">70%</text>
241
+ </svg>
242
+ </div>
243
+ <p class="text-sm mt-2">Target Achievement</p>
244
+ </div>
245
+ <div>
246
+ <div class="h-24 w-24 mx-auto relative">
247
+ <svg class="w-full h-full" viewBox="0 0 100 100">
248
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
249
+ <circle class="text-secondary progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="125.6" />
250
+ <text x="50" y="50" font-family="Arial" font-size="16" text-anchor="middle" dy=".3em" fill="#10b981" font-weight="bold">50%</text>
251
+ </svg>
252
+ </div>
253
+ <p class="text-sm mt-2">Risk Management</p>
254
+ </div>
255
+ <div>
256
+ <div class="h-24 w-24 mx-auto relative">
257
+ <svg class="w-full h-full" viewBox="0 0 100 100">
258
+ <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
259
+ <circle class="text-warning progress-ring__circle" stroke-width="8" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="50.24" />
260
+ <text x="50" y="50" font-family="Arial" font-size="16" text-anchor="middle" dy=".3em" fill="#f59e0b" font-weight="bold">80%</text>
261
+ </svg>
262
+ </div>
263
+ <p class="text-sm mt-2">Consistency</p>
264
+ </div>
265
+ </div>
266
+ <div class="mt-6">
267
+ <div class="flex justify-between mb-1">
268
+ <span class="text-sm font-medium text-gray-700">Compounding Efficiency</span>
269
+ <span class="text-sm font-medium text-gray-700">65%</span>
270
+ </div>
271
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
272
+ <div class="bg-primary h-2.5 rounded-full" style="width: 65%"></div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Recent Activity -->
278
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
279
+ <div class="flex justify-between items-center mb-4">
280
+ <h3 class="font-bold text-gray-800">Recent Activity</h3>
281
+ <button class="text-sm text-primary hover:text-primary/80">View All</button>
282
+ </div>
283
+ <div class="space-y-4">
284
+ <div class="flex items-start">
285
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
286
+ <i class="fas fa-rupee-sign"></i>
287
+ </div>
288
+ <div class="ml-3">
289
+ <p class="text-sm font-medium text-gray-900">Daily Target Achieved</p>
290
+ <p class="text-sm text-gray-500">Today at 3:42 PM</p>
291
+ </div>
292
+ <div class="ml-auto text-sm text-secondary font-medium">
293
+ +₹5,000
294
+ </div>
295
+ </div>
296
+ <div class="flex items-start">
297
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
298
+ <i class="fas fa-stop-circle"></i>
299
+ </div>
300
+ <div class="ml-3">
301
+ <p class="text-sm font-medium text-gray-900">Stop Loss Triggered</p>
302
+ <p class="text-sm text-gray-500">Yesterday at 2:15 PM</p>
303
+ </div>
304
+ <div class="ml-auto text-sm text-danger font-medium">
305
+ -₹2,000
306
+ </div>
307
+ </div>
308
+ <div class="flex items-start">
309
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600">
310
+ <i class="fas fa-chart-line"></i>
311
+ </div>
312
+ <div class="ml-3">
313
+ <p class="text-sm font-medium text-gray-900">Portfolio Rebalanced</p>
314
+ <p class="text-sm text-gray-500">2 days ago</p>
315
+ </div>
316
+ </div>
317
+ <div class="flex items-start">
318
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
319
+ <i class="fas fa-bullseye"></i>
320
+ </div>
321
+ <div class="ml-3">
322
+ <p class="text-sm font-medium text-gray-900">New Target Set</p>
323
+ <p class="text-sm text-gray-500">3 days ago</p>
324
+ </div>
325
+ <div class="ml-auto text-sm font-medium">
326
+ ₹5,000/day
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Quick Actions -->
333
+ <div class="bg-white rounded-xl shadow-md overflow-hidden p-6">
334
+ <h3 class="font-bold text-gray-800 mb-4">Quick Actions</h3>
335
+ <div class="grid grid-cols-2 gap-3">
336
+ <button class="flex items-center justify-center space-x-2 bg-primary/10 text-primary p-3 rounded-md hover:bg-primary/20">
337
+ <i class="fas fa-plus"></i>
338
+ <span>Add Funds</span>
339
+ </button>
340
+ <button class="flex items-center justify-center space-x-2 bg-secondary/10 text-secondary p-3 rounded-md hover:bg-secondary/20">
341
+ <i class="fas fa-chart-pie"></i>
342
+ <span>Analyze</span>
343
+ </button>
344
+ <button class="flex items-center justify-center space-x-2 bg-warning/10 text-warning p-3 rounded-md hover:bg-warning/20">
345
+ <i class="fas fa-history"></i>
346
+ <span>History</span>
347
+ </button>
348
+ <button class="flex items-center justify-center space-x-2 bg-danger/10 text-danger p-3 rounded-md hover:bg-danger/20">
349
+ <i class="fas fa-stopwatch"></i>
350
+ <span>Stop Loss</span>
351
+ </button>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </main>
357
+
358
+ <!-- Footer -->
359
+ <footer class="bg-white border-t border-gray-200 py-6">
360
+ <div class="container mx-auto px-4">
361
+ <div class="flex flex-col md:flex-row justify-between items-center">
362
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
363
+ <i class="fas fa-chart-line text-primary text-xl"></i>
364
+ <span class="font-bold text-gray-800">Wealth Compounder</span>
365
+ </div>
366
+ <div class="flex space-x-6">
367
+ <a href="#" class="text-gray-600 hover:text-primary">Terms</a>
368
+ <a href="#" class="text-gray-600 hover:text-primary">Privacy</a>
369
+ <a href="#" class="text-gray-600 hover:text-primary">Help</a>
370
+ <a href="#" class="text-gray-600 hover:text-primary">Contact</a>
371
+ </div>
372
+ </div>
373
+ <div class="mt-4 text-center md:text-left text-sm text-gray-500">
374
+ © 2023 Wealth Compounder. All rights reserved.
375
+ </div>
376
+ </div>
377
+ </footer>
378
+ </div>
379
+
380
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
381
+ <script>
382
+ // User menu dropdown
383
+ document.getElementById('user-menu').addEventListener('click', function() {
384
+ document.getElementById('dropdown-menu').classList.toggle('hidden');
385
+ });
386
+
387
+ // Close dropdown when clicking outside
388
+ document.addEventListener('click', function(event) {
389
+ if (!event.target.closest('#user-menu')) {
390
+ document.getElementById('dropdown-menu').classList.add('hidden');
391
+ }
392
+ });
393
+
394
+ // Compounding calculator
395
+ document.getElementById('calculate-btn').addEventListener('click', function() {
396
+ // Get input values
397
+ const initialCapital = parseFloat(document.getElementById('initial-capital').value);
398
+ const monthlyAdd = parseFloat(document.getElementById('monthly-add').value);
399
+ const expectedReturn = parseFloat(document.getElementById('expected-return').value) / 100;
400
+ const timePeriod = parseFloat(document.getElementById('time-period').value);
401
+
402
+ // Calculate results
403
+ const months = timePeriod * 12;
404
+ const monthlyRate = Math.pow(1 + expectedReturn, 1/12) - 1;
405
+
406
+ let amount = initialCapital;
407
+ let totalInvested = initialCapital;
408
+
409
+ // Simulate month by month
410
+ for (let i = 1; i <= months; i++) {
411
+ amount = amount * (1 + monthlyRate) + monthlyAdd;
412
+ totalInvested += monthlyAdd;
413
+ }
414
+
415
+ const interestEarned = amount - totalInvested;
416
+ const cagr = (Math.pow(amount / initialCapital, 1/timePeriod) - 1) * 100;
417
+
418
+ // Update results
419
+ document.getElementById('final-amount').textContent = '₹' + amount.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
420
+ document.getElementById('total-invested').textContent = '₹' + totalInvested.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
421
+ document.getElementById('interest-earned').textContent = '₹' + interestEarned.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
422
+ document.getElementById('cagr').textContent = cagr.toFixed(1) + '%';
423
+
424
+ // Show results
425
+ document.getElementById('result-container').classList.remove('hidden');
426
+
427
+ // Update chart
428
+ updateChart(initialCapital, monthlyAdd, expectedReturn, timePeriod);
429
+ });
430
+
431
+ // Initialize chart
432
+ const ctx = document.getElementById('compounding-chart').getContext('2d');
433
+ let chart = new Chart(ctx, {
434
+ type: 'line',
435
+ data: {
436
+ labels: ['Year 0', 'Year 1', 'Year 2', 'Year 3', 'Year 4', 'Year 5', 'Year 6', 'Year 7', 'Year 8', 'Year 9', 'Year 10'],
437
+ datasets: [{
438
+ label: 'Investment Growth',
439
+ data: [100000, 112000, 125440, 140493, 157352, 176234, 197382, 221068, 247596, 277308, 310586],
440
+ backgroundColor: 'rgba(79, 70, 229, 0.1)',
441
+ borderColor: 'rgba(79, 70, 229, 1)',
442
+ borderWidth: 2,
443
+ tension: 0.1,
444
+ fill: true
445
+ }]
446
+ },
447
+ options: {
448
+ responsive: true,
449
+ maintainAspectRatio: false,
450
+ plugins: {
451
+ legend: {
452
+ display: false
453
+ },
454
+ tooltip: {
455
+ callbacks: {
456
+ label: function(context) {
457
+ return '₹' + context.parsed.y.toLocaleString();
458
+ }
459
+ }
460
+ }
461
+ },
462
+ scales: {
463
+ y: {
464
+ beginAtZero: true,
465
+ ticks: {
466
+ callback: function(value) {
467
+ return '₹' + value.toLocaleString();
468
+ }
469
+ }
470
+ }
471
+ }
472
+ }
473
+ });
474
+
475
+ // Update chart with new data
476
+ function updateChart(initialCapital, monthlyAdd, expectedReturn, timePeriod) {
477
+ const years = timePeriod;
478
+ const dataPoints = [];
479
+
480
+ // Calculate value for each year
481
+ let amount = initialCapital;
482
+ dataPoints.push(amount);
483
+
484
+ for (let year = 1; year <= years; year++) {
485
+ // Add monthly contributions and compound annually for simplicity
486
+ amount = amount * (1 + expectedReturn) + (monthlyAdd * 12);
487
+ dataPoints.push(amount);
488
+ }
489
+
490
+ // Update labels
491
+ const labels = ['Year 0'];
492
+ for (let i = 1; i <= years; i++) {
493
+ labels.push(`Year ${i}`);
494
+ }
495
+
496
+ // Update chart data
497
+ chart.data.labels = labels;
498
+ chart.data.datasets[0].data = dataPoints;
499
+ chart.update();
500
+ }
501
+
502
+ // Initialize with default values
503
+ document.addEventListener('DOMContentLoaded', function() {
504
+ document.getElementById('calculate-btn').click();
505
+ });
506
+ </script>
507
+ <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=Ahmadraza76/compoundingtracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
508
+ </html>