-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
199 lines (174 loc) · 9.54 KB
/
index.html
File metadata and controls
199 lines (174 loc) · 9.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Budget Master 2025</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@3.3.0/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.3.1/dist/chartjs-adapter-luxon.min.js"></script>
<script src="app.js" ></script>
</head>
<body class="bg-budget min-h-screen">
<div class="container mx-auto px-4 py-8">
<header class="mb-8">
<h1 class="text-4xl font-bold text-indigo-900 mb-2">Budget Master</h1>
<p class="text-lg text-gray-600">Track your expenses, set goals, and plan your financial future</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<div class="lg:col-span-2">
<div class="card bg-white p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">My Monthly Expenses</h2>
<div id="expenses-container">
<div id="expense-list">
<!-- Expense items will be generated here -->
</div>
<div class="mt-4">
<div class="flex items-center mb-2">
<input type="text" id="new-category" placeholder="Category" class="input-budget rounded-md px-4 py-2 mr-2 w-1/2">
<input type="number" id="new-amount" placeholder="Amount" class="input-budget rounded-md px-4 py-2 mr-2 w-1/4">
<button id="add-expense" class="btn-budget rounded-md px-4 py-2 text-white">
<i class="fas fa-plus mr-1"></i> Add
</button>
</div>
</div>
<div class="my-4 border-t border-gray-200 pt-4">
<div class="flex justify-between items-center">
<span class="font-semibold text-gray-700">Total Monthly Expenses:</span>
<span id="total-expenses" class="font-bold text-xl">$0.00</span>
</div>
</div>
<div class="my-4 border-t border-gray-200 pt-4">
<div class="mb-3">
<label for="monthly-income" class="block text-sm font-medium text-gray-700">Monthly Income (after tax)</label>
<input type="number" id="monthly-income" class="input-budget mt-1 block w-full rounded-md px-4 py-2" placeholder="Enter your monthly income">
</div>
</div>
</div>
</div>
</div>
<div class="lg:col-span-1">
<div class="card bg-white p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Savings Goal</h2>
<div>
<div class="mb-4">
<label for="savings-goal" class="block text-sm font-medium text-gray-700">Target Amount</label>
<input type="number" id="savings-goal" class="input-budget mt-1 block w-full rounded-md px-4 py-2" placeholder="Enter your savings goal">
</div>
<div class="mb-4">
<label for="initial-savings" class="block text-sm font-medium text-gray-700">Current Savings</label>
<input type="number" id="initial-savings" class="input-budget mt-1 block w-full rounded-md px-4 py-2" placeholder="Enter your current savings">
</div>
<button id="calculate-btn" class="btn-budget w-full rounded-md py-2 px-4 text-white font-medium">
<i class="fas fa-calculator mr-1"></i> Calculate Plans
</button>
<div id="savings-summary" class="mt-4 text-sm text-gray-600 hidden">
<div class="flex justify-between items-center">
<span>Monthly income:</span>
<span id="summary-income" class="font-medium">$0.00</span>
</div>
<div class="flex justify-between items-center">
<span>Monthly expenses:</span>
<span id="summary-expenses" class="font-medium">$0.00</span>
</div>
<div class="flex justify-between items-center">
<span>Available for saving:</span>
<span id="summary-available" class="font-medium">$0.00</span>
</div>
</div>
<button id="get-feedback-btn" class="mt-6 bg-indigo-100 hover:bg-indigo-200 text-indigo-700 w-full rounded-md py-2 px-4 font-medium transition-all">
<i class="fas fa-comment-dots mr-1"></i> Get Feedback
</button>
<div id="feedback-container" class="hidden mt-4">
<div class="feedback-bubble">
<p id="feedback-text"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="recommendations-section" class="mb-8 hidden">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Savings Recommendations</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div id="conservative-plan" class="recommendation-card card bg-white p-4 border-green-400">
<h3 class="font-semibold text-lg text-green-600 mb-2">Conservative Plan</h3>
<p class="text-gray-600 mb-2">Save <span class="conservative-percent font-bold">10%</span> of your income</p>
<p class="text-gray-600 mb-2">Monthly saving: <span class="conservative-amount font-bold">$0</span></p>
<p class="text-gray-600">You'll reach your goal in <span class="conservative-time font-bold">0 months</span></p>
</div>
<div id="moderate-plan" class="recommendation-card card bg-white p-4 border-blue-400">
<h3 class="font-semibold text-lg text-blue-600 mb-2">Moderate Plan</h3>
<p class="text-gray-600 mb-2">Save <span class="moderate-percent font-bold">20%</span> of your income</p>
<p class="text-gray-600 mb-2">Monthly saving: <span class="moderate-amount font-bold">$0</span></p>
<p class="text-gray-600">You'll reach your goal in <span class="moderate-time font-bold">0 months</span></p>
</div>
<div id="aggressive-plan" class="recommendation-card card bg-white p-4 border-purple-400">
<h3 class="font-semibold text-lg text-purple-600 mb-2">Aggressive Plan</h3>
<p class="text-gray-600 mb-2">Save <span class="aggressive-percent font-bold">30%</span> of your income</p>
<p class="text-gray-600 mb-2">Monthly saving: <span class="aggressive-amount font-bold">$0</span></p>
<p class="text-gray-600">You'll reach your goal in <span class="aggressive-time font-bold">0 months</span></p>
</div>
</div>
</div>
<div id="chart-section" class="hidden">
<div class="card bg-white p-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Savings Progress Projection</h2>
<div class="border-b border-gray-200 mb-4">
<ul class="flex -mb-px">
<li class="mr-2">
<button id="tab-line" class="tab-button tab-active px-4 py-2 text-sm">Line Chart</button>
</li>
<li class="mr-2">
<button id="tab-bar" class="tab-button px-4 py-2 text-sm">Bar Chart</button>
</li>
<li class="mr-2">
<button id="tab-area" class="tab-button px-4 py-2 text-sm">Area Chart</button>
</li>
<li>
<button id="tab-combo" class="tab-button px-4 py-2 text-sm">Combination</button>
</li>
</ul>
</div>
<div class="chart-container">
<canvas id="savings-chart"></canvas>
</div>
<div class="mt-6 border-t border-gray-200 pt-4">
<h3 class="text-lg font-semibold text-gray-800 mb-3">Customize Your Plan</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div>
<label for="custom-percent" class="block text-sm font-medium text-gray-700 mb-1">Custom Savings Rate (%)</label>
<input type="range" id="custom-percent" min="5" max="50" step="1" value="25" class="w-full">
<div class="flex justify-between text-sm text-gray-500">
<span>5%</span>
<span id="custom-percent-value">25%</span>
<span>50%</span>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Monthly Savings Amount</label>
<p id="custom-amount" class="text-lg font-bold text-indigo-600">$0</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Goal Reached In</label>
<p id="custom-time" class="text-lg font-bold text-indigo-600">0 months</p>
</div>
</div>
<button id="update-custom-plan" class="btn-budget rounded-md py-2 px-4 text-white font-medium">
<i class="fas fa-sync-alt mr-1"></i> Update Projections
</button>
</div>
</div>
</div>
<div class="mt-8 text-center">
<button id="reset-data" class="bg-red-100 hover:bg-red-200 text-red-700 py-2 px-4 rounded-md transition-all">
<i class="fas fa-trash-alt mr-1"></i> Reset All Data
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>