What a wonderful page

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;
}

Leave a comment

Your email address will not be published.

%d bloggers like this: