"aylik v2"
Bootstrap 4.0.0 Snippet by muhittinbudak

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Cookie --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <!-- AutoNumeric --> <script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/1.8.3/autoNumeric.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet' type='text/css'/> <div class="container mt-4" style="font-family: 'Strait', sans-serif;"> <div class="row"> <!-- ana container --> <div class="text-center"> <center><img style="margin-top:60px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RHrsrLNLR2627h7Q1dGjNAmj7rFTwSxor2XYC7lSxreDt9a8mSk7HbJSzbPNPbFRspC9kNeLbmdtj4oNkoUl5Pdu5BP5n8myCJ3CnU2XCVdG04KcmmDUYt5s2Xo2fANZ83zz2i1sfrZquK4HQNZ3YdyUu6i9TyVF8pdHD9ELuAW1H2SzxmJudM54tgqA/s1080/aylikyok.png" width="100" height="100" /></center> <center> <h3 style="color:#4F2808;">Aylık Maaş Hesaplama Robotu</h3> <h4><span class="badge badge-warning">TEFERRUAT</span></h4> </center> <hr align="center" class="text-success" width="40%"> <!-- Rezerv --> <div class="form-group text-left"> <label><strong>Rezerviniz (TL)</strong></label> <input id="RezervAlan" class="form-control form-control-lg font-weight-bold" value="2.699.000,00" type="text" > </div> <!-- Nema --> <div class="form-group text-left"> <label><strong>Nema oranını giriniz (%)</strong></label> <input type="text" id="NemaOran" class="form-control form-control-lg font-weight-bold" value="25,00"> </div> <!-- Year Table --> <div class="table-responsive"> <table class="table text-center"> <thead class="bg-light"> <tr> <th></th> <th>Nema Oranı</th> <th>Maaş Oran Tercihi</th> </tr> </thead> <tbody> <tr class="year-row-2023"> <td class="align-middle"><strong>2023</strong></td> <td><input type="text" class="form-control font-weight-bold" value="77,10"></td> <td><input type="text" class="form-control font-weight-bold" value="18"></td> </tr> <tr class="year-row-2024"> <td class="align-middle"><strong>2024</strong></td> <td><input type="text" class="form-control font-weight-bold" value="55,20"></td> <td><input type="text" class="form-control font-weight-bold" value="15"></td> </tr> </tbody> </table> </div> <h5 class="mt-3 font-weight-bold" style="color:#6F0D89"> Size ait maaş hanelerini giriniz </h5> <h6 class="font-weight-bold mb-4"> Maaş almadıysanız 0 (Sıfır) giriniz. </h6> <hr align="center" width="50%"> <!-- Salary Inputs --> <div class="row mt-3"> <div class="col-6"> <label><strong style="color:#003131">2024 Genel Kurul Sonrası Aylık Maaşınız</strong></label> <input id="alan1" type="text" style="border:1px solid #2E7415" class="form-control font-weight-bold form-control-lg" value="15.000,00"> </div> <div class="col-6"> <label><strong style="color:#6F0D89">2025 Genel Kurul Sonrası Aylık Maaşınız</strong></label> <input id="alan2" type="text" style="border:1px solid #A208C9;" class="form-control form-control-lg font-weight-bold" value="10.000,00"> </div> </div> <!-- Results --> <div class="row mt-4"> <div class="col-6 col-sm-6 col-md-6 col-lg-6"> <div class="alert alert-warning text-left" role="alert" style="margin-right:0; padding:0; border: 1px solid #4F2808; background-color:#FAF5E5;"> <h6 class="mb-1 mt-2 mb-2 ml-3" style="color:#4F2808;font-size:12px">Yeni Aylık Maaşınız</h6> <h5 id="ucAylik" class="font-weight-bold mb-2 ml-3" style="color:#4F2808;font-size:18px">₺ 99.888.230,00</h5> </div> </div> <div class="col-6 col-sm-6 col-md-6 col-lg-6"> <div class="alert alert-danger text-left" role="alert" style="margin-right:0; padding:0; border: 1px solid #4F2808; background-color:#4F2808;font-size:15px;"> <h6 class="mb-1 mt-2 mb-2 ml-3" style="color:#FFF8E0;font-size:12px">Yeni Rezerviniz</h6> <h5 id="rezerv" class="font-weight-bold mb-2 ml-3" style="color:#FFF8E0;font-size:18px">₺ 99.888.230,00</h5> </div> </div> </div> <div class="progress mt-2 mb-5"> <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> <span class="sr-only">70% Complete</span> </div> </div> <!-- Slider Section --> <div class="slider-value mb-4">%18</div> <label class="font-weight-bold float-left"> Maaş Oran Tercihi % 18 (Düğmeyi kaydırın) </label> <input type="range" min="1" max="18" value="18" class="custom-range w-100"> <div class="d-flex justify-content-between font-weight-bold"> <span>% 1</span> <span>% 50</span> </div> <!-- Button --> <button class="btn btn-calc btn-block mt-4"> Hesapla </button> </div> </div><!-- row --> </div>
.progress { background-color: #5A2A00;height: 23px; /* açık gri yerine farklı bir renk */ } .progress-bar { background-color: #FAF5E5; /* açık gri yerine farklı bir renk */ } .top-bar{ background:#b51616; color:#fff; font-weight:bold; padding:10px 15px; font-size:18px; } .card-custom{ border-radius:10px; box-shadow:0 4px 10px rgba(0,0,0,0.08); } .progress { border: 1px solid #4F2808; /* Turuncu kenarlık */ border-radius: 4px; /* Köşeleri yuvarlatmak için */ } .teferruat-tabela { background:#ffd800; color:#000; font-size:13px; padding:3px 10px; font-weight:bold; } .year-row-2023{ background:#d8e5d2; } .year-row-2024{ background:#cfe0e8; } .result-box{ border-radius:8px; padding:15px; font-weight:600; } .result-left{ background:#f4efe6; border:1px solid #d8cfc0; } .result-right{ background:#5a2a00; color:#fff; } .slider-value{ font-size:48px; font-weight:bold; } .btn-calc{ background:#5a2a00; color:#fff; font-weight:bold; padding:12px; font-size:18px; } .btn-calc:hover{ background:#3f1d00; color:#fff; } .divider{ border-left:2px solid #ccc; } @media (max-width:768px){ .divider{ border-left:none; border-top:2px solid #ccc; margin-top:15px; padding-top:15px; } }

Questions / Comments: