Giriş
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script type="text/javascript">
function selectAccount(controlName, data) {
let [hsp, bky, dty] = data.split(",");
let button = document.getElementById(controlName);
button.innerHTML = "";
let div = document.createElement("div");
let div2 = document.createElement("div");
div.setAttribute("style", "font-weight: 500;");
div.innerHTML = `${dty}-${hsp}`;
div2.setAttribute("style", "font-weight: 300;");
div2.innerHTML = "Kullanılabilir Bakiye:" + bky;
div.append(div2);
button.append(div);
}
</script>
</head>
<body>
<div class="container">
<form>
<div class="row">
<h3>Para Transferi</h3>
<h4>Hesap No'ya Para Transferi</h4>
<div class="mb-4">
{Banka Bilgisi} aracılığı ile yapmak istediğiniz para transferi
işleminiz için ödeme yapacağınız hesabı seçiniz.
</div>
<div class="mb-3">
<label for="sender_account_button" class="form-label">Gönderen Hesap</label>
<div class="dropdown">
<button class="btn dropdown-toggle dropdown-button" id="sender_account_button" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
Hesap Seçiniz
</button>
<ul class="dropdown-menu" aria-labelledby="sender_account_button">
<li
onclick="selectAccount('sender_account_button', 'Çayyolu Şubesi,5.000.000₺,3.000.000₺')">
<a class="dropdown-item">
<div style="width:400px;" class="card-container">
<div style="display: flex; justify-content: space-between;">
<div style="display: flex; align-items: center;">
<label style="padding-left: 3px; padding-bottom: 3px;">Çayyolu
Şubesi</label>
</div>
<label>3485737465</label>
<!--input var burada-->
</div>
<div style="display: flex; justify-content: space-between;">
<label class="grey-text">Bakiye</label>
<label class="card-item-text">5.000.000₺</label>
</div>
<div style="display: flex; justify-content: space-between;">
<label class="grey-text">Kullanılabilir Bakiye</label>
<label class="card-item-text">3.000.000₺</label>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<div class="mb-3">
<label class="form-label">Alıcı IBAN No</label>
<div class="fw-bold">
TR4382 0004 0000 3030 0408 98
</div>
<!-- <input type="text" id="receiverIBAN" disabled value="TR4382 0004 0000 3030 0408 98" /> -->
</div>
<div class="mb-3">
<label class="form-label">Tutar</label>
<div class="fw-bold">
1.000.000₺
</div>
<!-- <input type="text" id="amount" disabled value="1.000.000₺"/> -->
</div>
<div class="col-half">
<button type="button" class="btn btn-outline-warning w-100">Devam</button>
</div>
<div class="col-half pe-3">
<button type="button" class="btn btn-outline-danger w-100">Vazgeç</button>
</div>
</div>
</form>
</div>
</body>
</html>
Readonly
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<form>
<div class="row">
<h3>Para Transferi</h3>
<h4>Hesap No'ya Para Transferi</h4>
<div class="mb-4">
{Banka Bilgisi} aracılığı ile yapmak istediğiniz para transferi
işleminiz için ödeme yapacağınız hesabı seçiniz.
</div>
<div class="mb-3">
<label class="form-label">Gönderen Hesap</label>
<div class="fw-bold">
Çayyolu Şubesi
</div>
<div class="fw-bold">
TR4873 8473 0000 0008 7747 98
</div>
</div>
<div class="mb-3">
<label class="form-label">Alıcı IBAN No</label>
<div class="fw-bold">
TR4382 0004 0000 3030 0408 98
</div>
</div>
<div class="mb-3">
<label class="form-label">Tutar</label>
<div class="fw-bold">
1.000.000₺
</div>
</div>
<div class="mb-3">
<label class="form-label">İşlemin Gerçekleşeceği Tarih</label>
<div class="fw-bold">
20.08.2023
</div>
</div>
<div class="mb-3">
<label class="form-label">İşlem Ücreti</label>
<div class="fw-bold">
5₺
</div>
</div>
<div class="mb-3">
<label class="form-label">Açıklama</label>
<div class="fw-bold">
Açıklamaaa
</div>
</div>
<div class="mb-5">
<label class="form-label">Referans Bilgisi</label>
<div class="fw-bold">
Ref
</div>
</div>
<div class="col-half">
<button type="button" class="btn btn-outline-warning w-100">Onay</button>
</div>
<div class="col-half pe-3">
<button type="button" class="btn btn-outline-danger w-100">Vazgeç</button>
</div>
</div>
</form>
</div>
</body>
</html>
CSS
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 1em;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px;
color: #b9b9b9;
background-color: #e3e3e3;
}
h3 {
color: #f0a500;
}
input {
width: 100%;
padding: 1em;
line-height: 1.4;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
border-radius: 3px;
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}
input:focus {
outline: 0;
border-color: #bd8200;
}
input:focus+.input-icon i {
color: #f0a500;
}
input:focus+.input-icon:after {
border-right-color: #f0a500;
}
.input-group {
margin-bottom: 1em;
zoom: 1;
}
.input-group:before,
.input-group:after {
content: "";
display: table;
}
.input-group:after {
clear: both;
}
.container {
max-width: 38em !important;
padding: 1em 3em 2em 3em;
margin: 0em auto;
background-color: #fff;
border-radius: 4.2px;
box-shadow: 0px 3px 10px -2px rgba(0, 0, 0, 0.2);
}
.col-half {
padding-right: 10px;
float: left;
width: 50% !important;
}
.col-half:last-of-type {
padding-right: 0;
}
.col-third {
padding-right: 10px;
float: left;
width: 33.33333333%;
}
.col-third:last-of-type {
padding-right: 0;
}
@media only screen and (max-width: 540px) {
.col-half {
width: 100%;
padding-right: 0;
}
}
.dropdown-button {
width: 100%;
color: #b9b9b9;
padding: 1em !important;
line-height: 1.4 !important;
background-color: #f9f9f9 !important;
border: 1px solid #e5e5e5 !important;
border-radius: 3px;
-webkit-transition: 0.35s ease-in-out;
-moz-transition: 0.35s ease-in-out;
-o-transition: 0.35s ease-in-out;
transition: 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
}