<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loan Schedule Generator</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h2 {
text-align: center;
color: white;
background-color: #007bff;
padding: 15px;
border-radius: 8px;
}
.container {
max-width: 800px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.input-group {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.input-group input {
flex: 1;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
.button {
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
.button:hover {
background-color: #218838;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: center;
}
th {
background-color: #dc3545;
color: white;
}
.summary-boxes {
display: flex;
justify-content: space-between;
margin-top: 20px;
gap: 10px;
flex-wrap: wrap;
}
.box {
flex: 1 1 45%;
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
text-align: center;
font-weight: bold;
box-shadow: 0 0 5px rgba(0,0,0,0.05);
}
.ad-section {
margin: 20px 0;
padding: 15px;
background: #e2e3e5;
text-align: center;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="container">
<h2>Loan Payment Schedule Generator</h2>
<div class="input-group">
<input type="number" id="loanAmount" placeholder="Enter Loan Amount (PKR)">
<input type="number" id="loanYears" placeholder="Enter Loan Period (Years)">
<button class="button" onclick="generateSchedule()">Calculate</button>
</div>
<div class="ad-section">AdSense Ad Placeholder</div>
<div class="summary-boxes" id="summary"></div>
<table id="scheduleTable"></table>
<div class="ad-section">AdMob Ad Placeholder</div>
</div>
<script>
function generateSchedule() {
const amount = parseFloat(document.getElementById('loanAmount').value);
const years = parseInt(document.getElementById('loanYears').value);
if (isNaN(amount) || isNaN(years) || amount <= 0 || years <= 0) {
alert("Please enter valid amount and years.");
return;
}
const paymentsPerYear = 12;
const totalPayments = years * paymentsPerYear;
const monthlyPayment = (amount / totalPayments).toFixed(2);
let balance = amount;
let scheduleHTML = '<tr><th>No</th><th>Date</th><th>Beginning Balance</th><th>Payment</th><th>Principal</th><th>Markup</th><th>Ending Balance</th></tr>';
let startDate = new Date();
startDate.setDate(16);
startDate.setMonth(startDate.getMonth());
for (let i = 1; i <= totalPayments; i++) {
let paymentDate = new Date(startDate);
paymentDate.setMonth(startDate.getMonth() + i - 1);
let principal = parseFloat(monthlyPayment);
let endBalance = (balance - principal).toFixed(2);
scheduleHTML += `<tr>
<td>${i}</td>
<td>${paymentDate.toLocaleDateString()}</td>
<td>${balance.toFixed(2)}</td>
<td>${monthlyPayment}</td>
<td>${monthlyPayment}</td>
<td>0</td>
<td>${endBalance}</td>
</tr>`;
balance -= principal;
}
document.getElementById('scheduleTable').innerHTML = scheduleHTML;
document.getElementById('summary').innerHTML = `
<div class="box">Monthly Payment: PKR ${monthlyPayment}</div>
<div class="box">Total Payments: ${totalPayments}</div>
<div class="box">Total Amount Paid: PKR ${(monthlyPayment * totalPayments).toFixed(2)}</div>
<div class="box">Markup: 0%</div>
`;
}
</script>
</body>
</html>
