Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Loan Wizard Calculator</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <custom-navbar></custom-navbar> | |
| <div class="container mx-auto px-4 py-2 text-right"> | |
| <a href="spreadsheet.html" class="text-blue-600 hover:text-blue-800 font-medium">Go to Spreadsheet Tool →</a> | |
| </div> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800">Loan Wizard Calculator 💰</h1> | |
| <p class="text-gray-600 mt-2">Calculate your loan payments and optimize your repayment strategy</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-blue-50 p-6 rounded-lg"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Loan Parameters</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Loan Amount ($)</label> | |
| <input type="number" id="loanAmount" value="1000" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Annual Interest Rate (%)</label> | |
| <input type="number" id="interestRate" value="20" step="0.1" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Loan Term (years)</label> | |
| <input type="number" id="loanTerm" value="5" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 p-6 rounded-lg"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Repayment Schedule</h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Year 1 Payment ($)</label> | |
| <input type="number" id="year1Payment" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Year 2 Payment ($)</label> | |
| <input type="number" id="year2Payment" value="200" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Year 3-5 Payment ($)</label> | |
| <input type="number" id="year3to5Payment" value="400" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button id="calculateBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg shadow-md transition duration-200"> | |
| Calculate Optimal Payment | |
| </button> | |
| </div> | |
| <div id="resultContainer" class="mt-8 hidden"> | |
| <div class="bg-yellow-50 p-6 rounded-lg"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Calculation Result</h2> | |
| <p class="text-gray-700">To fully repay the loan in <span id="resultYears" class="font-bold">5</span> years, you need to pay:</p> | |
| <p class="text-2xl font-bold text-blue-600 mt-2">$<span id="resultAmount">0.00</span> at the end of Year 1</p> | |
| </div> | |
| <div class="mt-6 overflow-x-auto"> | |
| <table class="min-w-full bg-white border rounded-lg overflow-hidden | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |