<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 ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container-fluid p-0" style="font-family: 'Strait', sans-serif;"> <!-- Top Bar --> <div class="top-bar"> OYAK </div> <div class="container my-4"> <!-- Main Card --> <div class="card card-custom p-4 text-center"> <h4 class="section-title"> Aylık Maaş Hesaplama Robotu </h4> <mark class="teferruat-tabela">TEFERRUAT</mark> <hr> <!-- 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 table-bordered 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><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><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> <p class="mt-3 text-primary font-weight-bold"> Size ait maaş hanelerini giriniz </p> <p> Maaş almadıysanız 0 (Sıfır) giriniz. </p> <!-- Salary Inputs --> <div class="row mt-3"> <div class="col-md-6"> <label><strong>2024 Genel Kurul Sonrası Aylık Maaşınız</strong></label> <input id="alan1" type="text" class="form-control border-info font-weight-bold form-control-lg" value="15.000,00"> </div> <div class="col-md-6 divider"> <label class="text-purple"><strong>2025 Genel Kurul Sonrası Aylık Maaşınız</strong></label> <input id="alan2" type="text" class="form-control border-danger form-control-lg font-weight-bold" value="10.000,00"> </div> </div> <!-- Results --> <div class="row mt-4"> <div class="col-md-6"> <div class="result-box result-left"> Yeni Aylık Maaşınız <br> ₺18.921,86 </div> </div> <div class="col-md-6 mt-3 mt-md-0"> <div class="result-box result-right"> Yeni Rezerviniz <br> ₺3.107.002,50 </div> </div> </div> <hr class="mb-5"> <!-- Slider Section --> <div class="slider-value mt-3">%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"> <div class="d-flex justify-content-between"> <span>% 1</span> <span>% 18</span> </div> <!-- Button --> <button class="btn btn-calc btn-block mt-4"> Hesapla </button> </div> </div> </div>

body{ background:#f2f2f2; } .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); } .section-title{ font-size:28px; font-weight:600; margin-top:15px; } .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; } }