Secim Ekrani | Citroen

by salt

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://hgworldonline.com/teb/appendix.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<div class="panel panel-table panel-credits-open">
    <div class="panel-heading">
        <div class="header">
            <h3>Açık Krediler</h3>
            <div class="description">
                Açık statülü kredileriniz aşağıda gösterilmektedir. Ödeme yapabileceğiniz taksit bilgileriniz için başvuru detay numarasının yanında bulunan (+) işaretine basabilirsiniz. Lütfen ödemeleriniz için <a href="#">Taksit Ödeme ekranını</a> kullanınız. Kredilerinizin ödeme planı detaylarına Ödeme Planı ekranından ulaşabilirsiniz. 
            </div>
        </div>
        <div class="action">
           <a href="#" class="btn btn-info btn-lg">TAKSİT ÖDEME</a>
        </div>
    </div>
    <div class="panel-body">
        <div class="table-responsive">
            <table class="table table-striped table-bordered table-collapse">
                <thead>
                    <tr>
                        <th>+</th>
                        <th>Başvuru Detay No</th>
                        <th>Marka - Model - Alt Model</th>
                        <th>Yetkili Satıcı</th>
                        <th>Kredi Tutarı</th>
                        <th>Erken Kapama Tutarı</th>
                    </tr>
                </thead>
                <tbody>
                    
                    <!-- start : credit item -->
                    <tr class="row-table">
                        <td>
                            <div class="input-custom">
                                <input type="radio" name="basvuru" id="RadioButton1">
                                <label for="RadioButton1"></label>
                            </div>
     ...

CSS

/* citroen */

/* giris ekrani */
body.login-screen {background:url(../img/login-bg.jpg) repeat-x top left;}
.login-logo {background:url(../img/logo.png) no-repeat; height:46px;}
.login-type {background:#b64c4c;}
.login-type > .active-type {background:#8c0505;}
.login-box {height:auto; background:#ededed; border:#dddddd 1px solid;}

/* icerik ekrani */
.logo {background:url(../img/logo_sub.png) no-repeat;}

.navbar-orange {background:#8c0505 !important;}

.navbar-nav li a {color:#fff;}
.navbar-nav li a.active, .navbar-nav li a:hover {background:#fff; color:#8c0505}

.left-bar {background:#8c0505;}    
.left-menu li {border-bottom:1px rgba(0, 0, 0, 0.3) solid;}
.left-menu li a {color:#fff;}
.left-menu li a.active, .left-menu li a:hover {background:#fff; color:#8c0505;}

.navbar-nav li a.user span {color:#fff;}

h1 {color:#8c0505;}
h2 {color:#8c0505;}


/* btn */
.btn-success { 
    background-color:#9e0a0a !important;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#8c0505), to(#9e0a0a));
    background-image: -webkit-linear-gradient(top, #8c0505, 0%, #9e0a0a, 100%);
    background-image: -moz-linear-gradient(top, #8c0505 0%, #9e0a0a 100%);
    background-image: linear-gradient(to bottom, #8c0505 0%, #9e0a0a 100%);
    background-repeat: repeat-x;
    border-color: #9e0a0a;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff8c0505', endColorstr='#ff9e0a0a', GradientType=0) !important;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
    background-color: #8c0505;
    border-color: #002c72;
    color: #FFFFFF;
}
.btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled:active, .btn-success[disabled]:active,...

JavaScript

$(document).ready(function () {


    $('[data-toggle="popover"]').popover();


    $(".table .row-table input").on("change",function(e){
       if($(this).attr("type")=="radio"){
          $(this).closest(".table").find(".row-table.active").removeClass("active");
       }
       if($(this).is(":checked")){
          $(this).closest(".row-table")
          .removeClass("must-pay")
          .addClass("active");
       }else{
          $(this).closest(".row-table").removeClass("active");
       }
    }).trigger("change");
    
    
    $(".btn-info").on("click",function(){
                        bootbox.confirm({
                title:"Uyarı",
                message: "Ödeme dekontunuz @yeniemail adresine gönderilmiştir. Bu e posta adresini iletişim adresiniz olarak güncellemek ister misiniz?",
                buttons: {
                    confirm: {
                        label: 'EVET',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: 'HAYIR',
                        className: 'btn-danger'
                    }
                },
                callback: function (result) {
                    if(result){
                        alert("E-mail adresini güncelle");
                    }
                }
            });
    });


});