122 lines
4.0 KiB
HTML
122 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bank API</title>
|
|
<style>
|
|
body {
|
|
font-family: monospace;
|
|
max-width: 600px;
|
|
margin: 40px auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 18px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 14px;
|
|
margin-top: 24px;
|
|
border-bottom: 1px solid #ccc;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
input,
|
|
button {
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
padding: 4px 8px;
|
|
margin: 2px 0;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.result {
|
|
background: #f0f0f0;
|
|
padding: 8px;
|
|
margin-top: 8px;
|
|
white-space: pre-wrap;
|
|
font-size: 13px;
|
|
min-height: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Bank API</h1>
|
|
|
|
<h2>Register</h2>
|
|
<input id="reg-user" placeholder="username">
|
|
<input id="reg-pass" placeholder="password" type="password">
|
|
<button
|
|
onclick="api('/api/register', {username: v('reg-user'), password: v('reg-pass')}, 'reg-res')">Register</button>
|
|
<div class="result" id="reg-res"></div>
|
|
|
|
<h2>Add Money</h2>
|
|
<input id="add-user" placeholder="username">
|
|
<input id="add-pass" placeholder="password" type="password">
|
|
<input id="add-amount" placeholder="amount" type="number">
|
|
<button
|
|
onclick="api('/api/add', {username: v('add-user'), password: v('add-pass'), amount: n('add-amount')}, 'add-res')">Add</button>
|
|
<div class="result" id="add-res"></div>
|
|
|
|
<h2>Transfer</h2>
|
|
<input id="tr-user" placeholder="username">
|
|
<input id="tr-pass" placeholder="password" type="password">
|
|
<input id="tr-to" placeholder="to">
|
|
<input id="tr-amount" placeholder="amount" type="number">
|
|
<button
|
|
onclick="api('/api/transfer', {username: v('tr-user'), password: v('tr-pass'), to: v('tr-to'), amount: n('tr-amount')}, 'tr-res')">Transfer</button>
|
|
<div class="result" id="tr-res"></div>
|
|
|
|
<h2>Balance</h2>
|
|
<input id="bal-user" placeholder="username">
|
|
<input id="bal-pass" placeholder="password" type="password">
|
|
<button onclick="api('/api/balance', {username: v('bal-user'), password: v('bal-pass')}, 'bal-res')">Check</button>
|
|
<div class="result" id="bal-res"></div>
|
|
|
|
<h2>Take Loan</h2>
|
|
<input id="loan-user" placeholder="username">
|
|
<input id="loan-pass" placeholder="password" type="password">
|
|
<input id="loan-amount" placeholder="amount" type="number">
|
|
<button
|
|
onclick="api('/api/take_loan', {username: v('loan-user'), password: v('loan-pass'), amount: n('loan-amount')}, 'loan-res')">Take
|
|
Loan</button>
|
|
<div class="result" id="loan-res"></div>
|
|
|
|
<h2>Pay Loan</h2>
|
|
<input id="pay-user" placeholder="username">
|
|
<input id="pay-pass" placeholder="password" type="password">
|
|
<input id="pay-amount" placeholder="amount" type="number">
|
|
<button
|
|
onclick="api('/api/pay_loan', {username: v('pay-user'), password: v('pay-pass'), amount: n('pay-amount')}, 'pay-res')">Pay
|
|
Loan</button>
|
|
<div class="result" id="pay-res"></div>
|
|
|
|
<script>
|
|
function v(id) { return document.getElementById(id).value; }
|
|
function n(id) { return Number(document.getElementById(id).value); }
|
|
async function api(url, body, resId) {
|
|
const el = document.getElementById(resId);
|
|
el.textContent = 'Loading...';
|
|
try {
|
|
const res = await fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(body)
|
|
});
|
|
const data = await res.json();
|
|
el.textContent = JSON.stringify(data, null, 2);
|
|
} catch (e) {
|
|
el.textContent = 'Error: ' + e.message;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |