<html>
<div style="margin-bottom: 15px;">
<label>Loan Amount ($):</label><br>
<input type="number" id="loanAmount" value="10000" style="width: 100%; padding: 5px;">
</div>
<div style="margin-bottom: 15px;">
<label>Annual Interest Rate (%):</label><br>
<input type="number" id="loanRate" value="5" step="0.1" style="width: 100%; padding: 5px;">
</div>
<div style="margin-bottom: 15px;">
<label>Duration (Years):</label><br>
<input type="number" id="loanYears" value="5" style="width: 100%; padding: 5px;">
</div>
<button type="button" id="calcBtn" style="padding: 10px 20px; cursor: pointer; background: #2b73b7; color: white; border: none; border-radius: 4px;">Calculate</button>
<div id="loanResult" style="margin-top: 20px; display: none; padding: 15px; background: #eef; border-left: 5px solid #2b73b7;">
<h4 style="margin: 0 0 10px 0;">Results</h4>
<strong>Monthly Payment:</strong> <span id="outMonthly"></span><br>
<strong>Total Interest:</strong> <span id="outInterest"></span><br>
<strong>Total Cost:</strong> <span id="outTotal"></span>
</div>
</html>