-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathauto.html
561 lines (509 loc) · 37.6 KB
/
auto.html
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Advanced Auto Loan Calculator to calculate monthly payments, interest, trade-in equity, and total loan costs for auto purchases. Simple, accurate, and responsive.">
<meta name="keywords" content="Auto Loan Calculator, Car Loan Calculator, Trade-in Value, Auto Financing, Monthly Car Payments, Loan Interest">
<meta name="author" content="Michel Velis">
<title>Auto Loan Calculator | Michel Velis</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media.css" media="print">
</head>
<body class="text-dark">
<!-- Hero Section -->
<section class="hero">
<div class="container">
<!-- Image and text -->
<nav class="navbar navbar-expand-lg navbar-dark" id="navbartop">
<a class="navbar-brand text-light" href="https://michelve.github.io/calculator-tools/">
<i data-feather="book-open"></i> Mortgage Loan Calculator
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="auto.html">Auto Loan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mortgage.html">Mortage Loan</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="">
<h1 class="fw-bold mt-5" style="max-width: 560px;">Get the Right Payment, Every Time</h1>
<p class="fs-5 text-light mt-3 mb-5 fw-200" style="max-width: 560px;">
With our powerful loan calculator, discover your perfect car financing plan in just a few clicks. Get insights on monthly payments, trade-in benefits, and more.
</p>
<ul class="list-unstyled">
<li class="mb-3">
<i class="bi bi-calculator-fill text-primary me-2"></i>
Accurate estimates tailored to your budget.
</li>
<li class="mb-3">
<i class="bi bi-cash-coin text-primary me-2"></i>
Evaluate loan terms, APRs, and down payments easily.
</li>
<li class="mb-3">
<i class="bi bi-graph-up-arrow text-primary me-2"></i>
Analyze your approval rating risk and affordability.
</li>
<li class="mb-3">
<i class="bi bi-shield-check text-primary me-2"></i>
Find out if you need GAP Insurance based on trade-in equity.
</li>
</ul>
<p class="mt-5" style="font-size: 13px;max-width: 560px;">
<small><strong>Disclaimer:</strong> Some prices, such as GAP insurance, extended warranty, or interest rates, are based on industry averages and may not reflect exact values. However, the calculator provides highly accurate payment estimates to guide your financial decisions.</small>
</p>
</div>
</div>
<div class="col-md-7">
<div class="card shadow card-blur">
<div class="card-body" id="calculatorForm">
<!-- Form -->
<form id="loanForm" class="needs-validation" novalidate>
<div class="row g-3">
<!-- Car Price -->
<div class="col-md-12">
<label for="carPrice" class="form-label required" data-bs-toggle="tooltip" title="Total price of the car before taxes and fees.">Car Price:</label>
<input type="number" class="form-control" id="carPrice" required>
<div class="invalid-feedback">Please provide a valid car price.</div>
</div>
<!-- State Tax -->
<div class="col-md-4">
<label for="stateTax" class="form-label required" data-bs-toggle="tooltip" title="Sales tax rate based on your state.">Your State:</label>
<select class="form-select" id="stateTax">
<option value="0" selected>Select State</option>
<option value="0.00">Alaska (0%)</option>
<option value="4.00">Alabama (4%)</option>
<option value="6.60">Arizona (6.6%)</option>
<option value="6.50">Arkansas (6.5%)</option>
<option value="7.25">California (7.25%)</option>
<option value="2.90">Colorado (2.9%)</option>
<option value="6.35">Connecticut (6.35%)</option>
<option value="4.25">Delaware (No Sales Tax on Cars)</option>
<option value="6.00">Florida (6%)</option>
<option value="4.00">Georgia (4%)</option>
<option value="4.00">Hawaii (4%)</option>
<option value="6.00">Idaho (6%)</option>
<option value="6.25">Illinois (6.25%)</option>
<option value="7.00">Indiana (7%)</option>
<option value="6.00">Iowa (6%)</option>
<option value="6.50">Kansas (6.5%)</option>
<option value="6.00">Kentucky (6%)</option>
<option value="4.45">Louisiana (4.45%)</option>
<option value="5.50">Maine (5.5%)</option>
<option value="6.00">Maryland (6%)</option>
<option value="6.25">Massachusetts (6.25%)</option>
<option value="6.00">Michigan (6%)</option>
<option value="6.88">Minnesota (6.88%)</option>
<option value="7.00">Mississippi (7%)</option>
<option value="4.23">Missouri (4.23%)</option>
<option value="0.00">Montana (0%)</option>
<option value="5.50">Nebraska (5.5%)</option>
<option value="4.60">Nevada (4.6%)</option>
<option value="0.00">New Hampshire (0%)</option>
<option value="6.63">New Jersey (6.63%)</option>
<option value="4.00">New Mexico (4%)</option>
<option value="4.00">New York (4%)</option>
<option value="4.75">North Carolina (4.75%)</option>
<option value="5.00">North Dakota (5%)</option>
<option value="5.75">Ohio (5.75%)</option>
<option value="4.50">Oklahoma (4.5%)</option>
<option value="0.00">Oregon (0%)</option>
<option value="6.00">Pennsylvania (6%)</option>
<option value="7.00">Rhode Island (7%)</option>
<option value="5.00">South Carolina (5%)</option>
<option value="4.00">South Dakota (4%)</option>
<option value="7.00">Tennessee (7%)</option>
<option value="6.25">Texas (6.25%)</option>
<option value="4.85">Utah (4.85%)</option>
<option value="6.00">Vermont (6%)</option>
<option value="4.15">Virginia (4.15%)</option>
<option value="6.50">Washington (6.5%)</option>
<option value="5.00">West Virginia (5%)</option>
<option value="5.00">Wisconsin (5%)</option>
<option value="4.00">Wyoming (4%)</option>
</select>
</div>
<!-- Vehicle Tax -->
<div class="col-md-4">
<label class="form-label">Vehicle Tax:</label>
<input type="text" class="form-control" id="vehicleTax" value="0.00" readonly disabled>
</div>
<!-- Dealer Fees -->
<div class="col-md-4">
<label for="dealerFees" class="form-label" data-bs-toggle="tooltip" title="Additional fees charged by the dealer, such as documentation fees.">Dealer Fees:</label>
<input type="number" class="form-control" id="dealerFees" value="0">
</div>
<!-- Down Payment -->
<div class="col-md-4">
<label for="downPayment" class="form-label" data-bs-toggle="tooltip" title="Down Payment.">Down Payment:</label>
<input type="number" class="form-control" id="downPayment" value="0">
</div>
<!-- Vehicle Registration Fees -->
<div class="col-md-4">
<label for="registrationDropdown" class="form-label required" data-bs-toggle="tooltip" title="Select your state to auto-fill the registration fee.">Registration Fee:</label>
<select class="form-select" id="registrationDropdown" required>
<option value="" selected disabled>Select State</option>
</select>
</div>
<!-- APR -->
<div class="col-md-4">
<label for="aprDropdown" class="form-label required" data-bs-toggle="tooltip" title="Select or enter the Annual Percentage Rate for the loan.">APR:</label>
<select class="form-select mb-2" id="aprDropdown" required>
<option value="" selected disabled>Select APR</option>
</select>
<input type="number" class="form-control d-none" id="customApr" placeholder="Enter custom APR (%)" step="0.01" />
<div class="invalid-feedback">Please select a valid APR.</div>
</div>
<div class="row g-3 mt-1">
<label class="form-label">Options and Add-ons</label>
<div class="col-md-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="addWarranty">
<label class="form-check-label" for="addWarranty">Include Warranty ($1,500)</label>
</div>
</div>
<div class="col-md-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="addGapInsurance">
<label class="form-check-label" for="addGapInsurance">Include GAP Insurance ($1,000)</label>
</div>
</div>
<div class="col-md-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="addServicePackage">
<label class="form-check-label" for="addServicePackage">Service Package ($2,000)</label>
</div>
</div>
</div>
<!-- Trade-In Section -->
<hr class="my-4">
<div class="col-md-12 npm">
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="toggleTradeIn">
<label class="form-label form-check-label" for="toggleTradeIn">Include Trade-In?</label>
</div>
</div>
<div id="tradeInSection" style="display: none;" class="row g-3">
<div class="col-md-6">
<label for="tradeIn" class="form-label" data-bs-toggle="tooltip" title="Value of your current car for trade-in.">Trade-In Value:</label>
<input type="number" class="form-control" id="tradeIn" value="0">
</div>
<div class="col-md-6">
<label for="amountOwed" class="form-label" data-bs-toggle="tooltip" title="Remaining loan balance on your trade-in vehicle.">Amount Owed on Trade-In:</label>
<input type="number" class="form-control" id="amountOwed" value="0">
</div>
<div class="col-md-12">
<label class="form-label">Trade-In Tax Savings:</label>
<input type="text" class="form-control" id="tradeTaxSavings" value="0.00" readonly disabled>
</div>
</div>
<!-- Loan Term -->
<div class="col-md-12">
<label class="form-label">Loan Term (Months):</label>
<div class="btn-group d-flex" role="group" aria-label="Loan Term">
<input type="radio" class="btn-check" name="loanTerm" id="term36" value="36" autocomplete="off">
<label class="btn btn-outline-secondary flex-fill" for="term36">36</label>
<input type="radio" class="btn-check" name="loanTerm" id="term48" value="48" autocomplete="off">
<label class="btn btn-outline-secondary flex-fill" for="term48">48</label>
<input type="radio" class="btn-check" name="loanTerm" id="term60" value="60" autocomplete="off">
<label class="btn btn-outline-secondary flex-fill" for="term60">60</label>
<input type="radio" class="btn-check" name="loanTerm" id="term72" value="72" autocomplete="off" checked>
<label class="btn btn-outline-secondary flex-fill" for="term72">72</label>
<input type="radio" class="btn-check" name="loanTerm" id="term84" value="84" autocomplete="off">
<label class="btn btn-outline-secondary flex-fill" for="term84">84</label>
</div>
</div>
<div class="col-md-12">
<label for="monthlyIncome" class="form-label required" data-bs-toggle="tooltip" title="Enter your gross monthly income to help calculate risk and determine your approval likelihood.">Your Monthly Income:</label>
<input type="number" class="form-control" id="monthlyIncome" required>
</div>
</div>
<!-- Submit Button -->
<div class="col-md-12">
<div class="mt-4">
<button type="button" class="btn btn-primary btn-lg w-100" id="calculateBtn">Calculate My Payment</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="container py-5" id="emptyStateSection">
<div class="col-md-12 d-flex justify-content-center border-0 rounded-4">
<!-- Empty State Section -->
<div class="text-center py-5 px-4 bg-light rad-def">
<div class="icon-wrapper mb-4">
<i class="text-secondary size-32" data-feather="clock"></i>
</div>
<h5 class="text-secondary">Your Results Will Display Here</h5>
<p class="text-muted" style="max-width: 1024px;">
Enter your data above to calculate your car payment, assess risks, and view an amortization schedule.
You'll also receive personalized insights like GAP insurance recommendations and risk analysis.
</p>
</div>
</div>
</div>
<div class="container mt-5">
<div id="calculationResults" class="container">
<div class="row">
<!-- Table of Contents -->
<div class="col-md-3 table-content">
<div class="card border-0 position-sticky" style="top: 100px;">
<div class="card-body">
<h5 class="fw-bold">Table of Contents</h5>
<ul class="list-group">
<li class="list-group-item list-group-item-action">
<a href="#loanSummarySection" class="text-decoration-none">Loan Summary</a>
</li>
<li class="list-group-item list-group-item-action">
<a href="#riskAnalysisSection" class="text-decoration-none">Risk Analysis</a>
</li>
<li class="list-group-item list-group-item-action">
<a href="#gapRecommendationSection" class="text-decoration-none">GAP Recommendation</a>
</li>
<li class="list-group-item list-group-item-action">
<a href="#amortizationSchedule" class="text-decoration-none">Amortization Schedule</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Main Content -->
<div id="results" class="col-md-9 card-reults">
<!-- Loan Summary Section -->
<div id="loanSummarySection" class="sumamry-wrapper card-items">
<h3 class="text-center mb-4 pt-5">Loan Summary</h3>
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card rounded-4 border-0 bg-light text-dark">
<div class="card-body">
<!-- Header Row -->
<div class="row text-center fw-bold">
<div class="col-md-6 border-end">
<h4>Your Selection</h4>
</div>
<div class="col-md-6">
<h4>Alternative Options</h4>
</div>
</div>
<hr class="text-muted">
<!-- Content Row -->
<div class="row">
<!-- User Selection -->
<div class="col-md-6 border-end">
<div class="mb-3 text-center">
<h6 class="fw-bold">Monthly Payment</h6>
<p class="fs-4 text-success animate-number" id="monthlyPayment" data-value="0">$0.00</p>
</div>
<div class="row">
<div class="col-12 text-center">
<h6 class="fw-bold">Loan Amount</h6>
<p class="fs-5 text-primary animate-number" id="loanAmount" data-value="0">$0.00</p>
</div>
<div class="col-12 text-center mt-2">
<h6 class="fw-bold">Total Interest Paid</h6>
<p class="fs-5 text-danger animate-number" id="totalInterest" data-value="0">$0.00</p>
</div>
<div class="col-12 text-center mt-2">
<h6 class="fw-bold">Loan Term</h6>
<p class="fs-5 text-secondary animate-number" id="loanTermDisplay" data-value="0">72 Months</p>
</div>
<div class="col-12 text-center mt-2">
<h6 class="fw-bold">Trade-In Tax Savings</h6>
<p class="fs-5 text-info animate-number" id="taxSavings" data-value="0">$0.00</p>
</div>
</div>
</div>
<!-- Alternative Financing Options -->
<div class="col-md-6">
<div class="row text-center">
<!-- Option 1 -->
<div class="col-12">
<span class="badge badge-pill badge-secondary option-badge">Option 1</span>
<p class="text-muted">0% Down | 84 Months</p>
<p class="fs-6 fw-bold text-primary">Monthly Payment: <span id="altOption1" class="text-success" data-value="0">$0.00</span></p>
</div>
<hr class="text-muted">
<!-- Option 2 -->
<div class="col-12">
<span class="badge badge-pill badge-secondary option-badge">Option 2</span>
<p class="text-muted">$3,000 Down | 72 Months</p>
<p class="fs-6 fw-bold text-primary">Monthly Payment: <span id="altOption2" class="text-success" data-value="0">$0.00</span></p>
</div>
<hr class="text-muted">
<!-- Option 3 -->
<div class="col-12">
<span class="badge badge-pill badge-secondary option-badge">Option 3</span>
<p class="text-muted">$5,000 Down | 72 Months</p>
<p class="fs-6 fw-bold text-primary">Monthly Payment: <span id="altOption3" class="text-success" data-value="0">$0.00</span></p>
</div>
<hr class="text-muted">
<!-- Option 4 -->
<div class="col-12">
<span class="badge badge-pill badge-secondary option-badge">Option 4</span>
<p class="text-muted">$7,000 Down | 84 Months</p>
<p class="fs-6 fw-bold text-primary">Monthly Payment: <span id="altOption4" class="text-success" data-value="0">$0.00</span></p>
</div>
</div>
</div>
</div>
<!-- Footer Note -->
<hr class="text-muted">
<p class="text-center text-muted small">*Alternative options are based on varying down payments and loan terms at the same APR.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Risk Analysis Section -->
<div id="riskAnalysisSection" class="mt-5 card-items">
<div class="row justify-content-center">
<!-- Risk Card 1 -->
<div class="col-md-6 mb-4">
<div class="card rounded-4 border-0 bg-blue-1">
<div class="card-body text-center">
<i class="text-primary size-32" data-feather="book-open"></i>
<h6 class="">Default Risk Probability</h6>
<p class="fs-4 text-danger" id="defaultRisk">0%</p>
<p class="text-muted small">Likelihood of default based on your inputs.</p>
</div>
</div>
</div>
<!-- Risk Card 2 -->
<div class="col-md-6 mb-4">
<div class="card border-0 rounded-4 bg-red">
<div class="card-body text-center">
<i class="text-danger size-32" data-feather="pie-chart"></i>
<h6 class="">Debt-to-Income Ratio</h6>
<p class="fs-4 text-primary" id="debtIncomeRatio">0%</p>
<p class="text-muted small">Comparison of monthly debt payments to income.</p>
</div>
</div>
</div>
</div>
<div class="text-center mt-4">
<p class="text-muted small">*Risk estimates are calculated based on your input data and national averages. Adjustments may be needed based on your specific financial situation.</p>
</div>
</div>
<!-- GAP Recommendation Section -->
<div id="gapRecommendationSection" class="mt-5 card-items">
<div class="col-md-12">
<div class="card border-0 bg-light rounded-4">
<div class="card-body">
<div class="text-center">
<h3 class="fw-bold mb-4 mt-5">GAP Insurance Recommendation</h3>
</div>
<p class="text-muted text-center fs-5" style="max-width: 728px;margin: 0 auto;">
Understand whether GAP Insurance is suitable for your loan based on the trade-in equity and debt-to-income ratio.
</p>
<div class="row align-items-center justify-content-center py-4">
<!-- Icon Section -->
<div class="col-md-6 text-center">
<p class="fs-4 text-primary mt-2" id="gapRecommendation">No recommendation yet</p>
</div>
</div>
<!-- Divider -->
<div class="text-center my-4">
<hr class="w-75 mx-auto text-muted">
</div>
<!-- Reason Section -->
<p id="gapReason" class="text-muted text-center small px-3">
*Recommendations are based on your input and industry averages. For a detailed assessment, consult with a financial expert.
</p>
</div>
</div>
</div>
</div>
<!-- Amortization Schedule Section -->
<div id="amortizationSchedule-all" class="mt-5 card-items">
<div class="col-md-12">
<div class="card border-0 bg-light rounded-4">
<div class="card-body">
<div class="text-center">
<h3 class="text-center mb-4 mt-5">Amortization Schedule</h3>
</div>
<div class="row align-items-center justify-content-center py-4">
<!-- Icon Section -->
<div class="col-md-12">
<div class="" id="amortizationSchedule">No recommendation yet</div>
</div>
</div>
</div>
</div>
</div>
<!-- Amortization Schedule Content Here -->
</div>
</div>
</div>
</div>
</div>
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer">
<!-- Car Price Toast -->
<div id="carPriceToast" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Please enter a valid Car Price.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- -->
<div id="loanToast" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Loan amount must be greater than zero. Please check your inputs.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- APR Toast -->
<div id="aprToast" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
Please select a valid APR.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<button id="scrollToTopBtn" class="btn btn-primary rounded-circle">
<a href="#navbartop"><i style="color: #fff;" class="bi bi-arrow-up"></i></a>
</button>
<!-- Footer Section -->
<footer class="py-3 mt-5">
<div class="container text-center">
<p class="mb-0 small">© 2025 Advanced Auto Loan Calculator. All Rights Reserved.</p>
<p class="mb-0 small">Designed and coded by <i class="bi bi-heart-fill text-danger"></i> Michel Velis.</p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/scripts.js"></script>
<script>
feather.replace();
</script>
</body>
</html>