NimaFakoor/index.html

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="main1.css">
    <script src="checkout2.js"></script>
    <title>Document</title>
</head>
<body onload="buttonDIsabled()">
        <div class="header">
        <h1 style="margin-left: 6px; position: absolute; font-size: 16px;">Welcome User, <?php echo "Madlad"; ?></h1>
            <h1>Mad Travel</h1>
            <h1 style="margin-left: 6px; position: relative; font-size: 16px; float: right;" id="current-jam">Samarinda</h1>
    <hr>
</div>

        <div class="container">
            <a href="#" onclick="">Home</a>
            <a href="#BookHere" onclick="divReplacement()">Book Here</a>
            <a href="#Jadwal_Penerbangan" onclick="divReplacemente()">Jadwal Penerbangan</a>
            <a href="#Daftar_Penerbangan" onclick="divOne()">Daftar Penerbangan</a>
            <a href="#Destinasi_Penerbangan" onclick="divTwo()">Destinasi Penerbangan</a>
            <a href="#Checkout" id="chekuout" onclick="divThree()">Checkout(0)</a>
            <a href="#Riwayat_Pembelian" onclick="divFour()">Riwayat Pembelian</a>
            <a href="#User_Settings" onclick="divFive()">User Settings</a>
            <a href="#Pilot" onclick="divSix()">Pilot/Co-Pilot</a>

            </div>
<!-- Beginning Of Boking Tiket -->
<div class="tabu" id="tab-one" style="display: block;">

            <hr class="wewew">

    <div class="section">

        <table>

        <h1>Booking Tiket Disini</h1>

        <a class="add-btn" href="#">Tambah Data Tiket</a>

                <th>Ticket Serial Code</th>
                <th>Nama Tiket</th>
                <th>Nama Penerbangan</th>
                <th>Harga Per Tiket</th>
                <th>Details</th>
                <tr>
                    <td>N-1010</td>
                    <td>Just A Ticket </td>
                    <td>Gar00da Airway </td>
                    <td>Rp.10000 </td>
                    <td><button class="btn-primary" id="myBtn">Click Here</button></td>
              <div id="myModal" class="modal">

<!-- Modal content -->
  <div class="modal-content" style="display: block;">
    <span class="close">&times;</span>
    <a href="#" onclick="removeUnderlinedText()" id="details" style="font-size: 19px; text-decoration: underline;">Ticket Details<a href="#" onclick="lmaoTwo()" id="detailu" style="display: inline-block; padding-left: 10px; font-size: 19px; font-weight: 100;">Available Chair</a></a><br><br>
    <div id="header-modal">
    <h3 style="font-weight: 300;">&times;Ticket Serial Code</h3>
    <p class="ticket-code">N-1010</p><br>
    <h3 style="font-weight: 300;">&times;Nama Ticket</h3>
    <p class="ticket-name">Just A Ticket</p><br>
    <h3 style="font-weight: 300;">&times;Nama Penerbangan</h3>
    <p class="airways-name">Gar00da Airway</p><br>
    <h3 style="font-weight: 300;">&times;Harga Per ticket</h3>
    <p class="ticket-price">Rp. 1000000</p><br>
    <h3 style="font-weight: 300;">&times;Tanggal Penerbangan</h3>
    <p class="due-date">09 Febuary 2019 , at 09:40 AM - 10:40 AM</p><br>
    <h3 style="font-weight: 300;">&times;Tujuan</h3>
    <p class="destination">Balikpapan - Bogor</p><br>
    <h3 style="font-weight: 300;">&times;Pilot</h3>
    <p class="pilot-name">Udin SE</p><br>


    </div>

    <div id="headeru-modal" style="display: none;">
    <button id="btno" class="buttonji">1</button>

    <p class="paw">Booked :(</p>
    <button id="btno" class="buttonji">2</button>

    <p class="paw">Booked :(</p>
    <button id="btno" class="buttonji">3</button>

    <p class="paw">Booked :(</p>
    <button id="btno" class="buttonji">4</button>

    <p class="paw">Booked :(</p>
    <button id="btno" class="buttonji">5</button>

    <p class="paw">Booked :(</p>
    <button id="btno" class="buttonji">6</button>

    <p class="paw">Booked :(</p>
    <button id="btno" class="buttonji">7</button>

    <p class="paw">Booked :(</p>
    <button id="btno" class="buttonji">8</button>

    <p class="paw">Bookable :)</p>
    <button id="btno" class="buttonji">9</button>
    <p class="paw">Bookable :)</p>
  <p id="triplep" class="selected-value">0 Selected</p><button class="btn-w" id="butt">Klik Disini</button>
    </div>
  </div>

</div>
                </tr>

            </table>
</div>
</div>

<!-- End Of Boking Tiket -->
<!-- Beginning Of Jadwal Penerbangan -->

<div class="tabu" id="tab-two" style="display: none;">

                <hr class="wewew">

        <div class="section">

            <table>

            <h1>Jadwal Penerbangan</h1>

            <a class="add-btn" href="#">+ Jadwal Baru</a>

                    <th>Kode Penerbangan</th>
                    <th>Nama Penerbangan</th>
                    <th>Jam Keberangkatan</th>
                    <th>Tujuan</th>
                    <th>Details</th>
                    <tr>
                        <td>N-1010</td>
                        <td>Gar00da Airway</td>
                        <td>10:00 AM - 11:00 AM</td>
                        <td>Balikpapan - Bogor</td>
                        <td><a class="edit-btn" href="#">Ubah</a></td>

                    </tr>
                </table>
    </div>
</div>
<!-- End Of Jad Pener -->

<div class="tabu" id="tab-three" style="display: none;">

<hr class="wewew">

<div class="section">

<table>

<h1>Daftar Penerbangan</h1>

<a class="add-btn" href="#">+ Jadwal Baru</a>

    <th>Kode Penerbangan</th>
    <th>Nama Penerbangan</th>
    <th>Jam Keberangkatan</th>
    <th>Tujuan</th>
    <th>Details</th>
    <tr>
        <td>N-1010</td>
        <td>Gar00da Airway</td>
        <td>10:00 AM - 11:00 AM</td>
        <td>Balikpapan - Bogor</td>
        <td><?php echo '<a href="" class="edit-btn">Ubah</a>'?></td>

    </tr>
</table>
</div>

</div>

<!-- End Of Daftar Penerbangan -->

<div class="tabu" id="tab-four" style="display: none;">

<hr class="wewew">

<div class="section">

<table>

<h1>Destinasi Penerbangan</h1>

<a class="add-btn" href="#">+ Jadwal Baru</a>

    <th>Kode Penerbangan</th>
    <th>Nama Penerbangan</th>
    <th>Jam Keberangkatan</th>
    <th>Tujuan</th>
    <th>Details</th>
    <tr>
        <td>N-1010</td>
        <td>Gar00da Airway</td>
        <td>10:00 AM - 11:00 AM</td>
        <td>Balikpapan - Bogor</td>
        <td><button class="btn-primary" id="myBtn">Click Here</button></td>

    </tr>
</table>
</div>

</div>

<!-- End of Destinasi -->

<div class="tabu" id="tab-five" style="display: none;">

<hr class="wewew">

 <h2 class="section-header">Checkout</h2>
            <div class="cart-row">

                <span class="cart-price cart-header cart-column">Harga</span>
                <span class="cart-item cart-header cart-column">Nama Ticket</span>
                <span class="cart-plane-name cart-header cart-column">Nama Penerbangan</span>
                <span class="cart-tgl-terbang cart-header cart-column">Jadwal Penerbangan</span>
                <span class="cart-tujuan cart-header cart-column">Jadwal Penerbangan</span>
                <span class="cart-quantity cart-header cart-column">Nama Pilot</span>
                <span class="cart-choir cart-header cart-column">Chair</span>
                <span class="cart-batal cart-header cart-column">Cancel</span>
            </div>
            <div class="checkout-items">

            </div>
            <div class="cart-total">
                <strong class="cart-total-title">Total</strong>
                <span class="cart-total-price">Rp.0</span>
            </div>


<!-- End Of History Checkout -->

<div class="tabu" id="tab-six" style="display: none;">

<hr class="wewew">

<div class="section">

<table>

<h1 style="margin-left: 44.2%;">Riwayat Pembelian</h1>

<a class="add-btn" href="#">+ Jadwal Baru</a>

    <th>Kode Penerbangan</th>
    <th>Nama Penerbangan</th>
    <th>Jam Keberangkatan</th>
    <th>Tujuan</th>
    <th>Details</th>
    <tr>
        <td>N-1010</td>
        <td>Gar00da Airway</td>
        <td>10:00 AM - 11:00 AM</td>
        <td>Balikpapan - Bogor</td>
        <td><button class="btn-primary" id="myBtn">Click Here</button></td>

    </tr>
</table>
</div>

</div>
<!-- End Of User Riwayat Pembelian -->

<div class="tabu" id="tab-seven" style="display: none;">

<hr class="wewew">

<div class="section">

<table>

<h1 style="margin-left: 44.2%;">User Settings</h1>

<a class="add-btn" href="#"></a>

    <th>Nama User</th>
    <th>Alamat/Kota</th>
    <th>Tgl Lahir</th>
    <th>Edit</th>
    <th>Hapus</th>

        <?php

        $query = mysqli_query($con, "SELECT * FROM user ORDER BY username DESC");

        while($result = mysqli_fetch_assoc($query)){

        ?>
         <tr>
        <td><?php echo $result['username'];?></td>
        <td><?php echo $result['kota'];?></td>
        <td><?php echo $result['tgl_lahir'];?></td>
        <td><?php echo '<a href="" class="edit-btn">Edit</a>'?></td>
        <td><?php echo '<a href="" class="edit-btn">Hapus</a>'?></td>

    </tr>
    <?php

}
?>
</table>
</div>

</div>

<!-- End Of User Riwayat Pembelian -->
<div class="tabu" id="tab-e" style="display: none;">

<hr class="wewew">

<div class="section">

<table>

<h1 style="margin-left: 44.2%;">Pilot/Co-Pilot</h1>

<a class="add-btn" href="#">Tambah Data</a>

    <th>Nama</th>
    <th>Tgl Lahir</th>
    <th>Level</th>
    <th>Status</th>
    <th>Ubah Data</th>
    <tr>
        <td>Udin , SE, SK , Ud</td>
        <td>09-09-2019</td>
        <td>Pilot Of Gar00da</td>
        <td>Sibuk</td>
        <td><?php echo '<a href="" class="edit-btn">Ubah</a>'?></td>
    </tr>
</table>
</div>

</div>
<!-- End OF User Settings -->
<div class="length-of-booked-chair">

</div>
</body>
</html>


## script.js

    function displayCurrentTimes(){

        var currentTime = new Date();

        var hours = currentTime.getHours();
        var hoursw = currentTime.getMinutes();
        var hourse = currentTime.getSeconds();

        document.getElementById('current-jam').textContent = hours + ":" + hoursw + ":" + hourse;
    }

var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementsByClassName('btn-primary');

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal
for(var i = 0; i < btn.length; i++){
   var button = btn[i];
   button.addEventListener('click', revealTheModal)
}


function revealTheModal(){
    var wew = document.getElementById('myModal');

    wew.style.display = "block";
}
    function removeUnderlinedText(){

    var targetedOne = document.getElementById('header-modal');
    var targetedTwo = document.getElementById('headeru-modal');
    var a = document.getElementById('details');
    var b = document.getElementById('detailu');
    targetedOne.style.display = "block";
    targetedTwo.style.display = "none";
    a.style.textDecoration = "underline";
    b.style.textDecoration = "none";

    }

    function lmaoTwo(){
        var targetedOne = document.getElementById('header-modal');
        var targetedTwo = document.getElementById('headeru-modal');
        var a = document.getElementById('details');
    var b = document.getElementById('detailu');
        targetedOne.style.display = "none";
        targetedTwo.style.display = "block";
        a.style.textDecoration = "none";
        b.style.textDecoration = "underline";
    }


    function divReplacement(e, tabId){
        var a = document.getElementById('tab-one');
        var b = document.getElementById('tab-two');
        var c = document.getElementById('tab-three');
        var d = document.getElementById('tab-four');
        var e = document.getElementById('tab-five');
        var f = document.getElementById('tab-six');
        var g = document.getElementById('tab-seven');
        var h = document.getElementById('tab-e');
        a.style.display = "block";
        b.style.display = "none";
        c.style.display = "none";
        d.style.display = "none";
        e.style.display = "none";
        f.style.display = "none";
        g.style.display = "none";
        h.style.display = "none";
    }

    function divReplacemente(e, tabId){
        var a = document.getElementById('tab-one');
        var b = document.getElementById('tab-two');
        var c = document.getElementById('tab-three');
        var d = document.getElementById('tab-four');
        var e = document.getElementById('tab-five');
        var f = document.getElementById('tab-six');
        var g = document.getElementById('tab-seven');
        var h = document.getElementById('tab-e');
        a.style.display = "none";
        b.style.display = "block";
        c.style.display = "none";
        d.style.display = "none";
        e.style.display = "none";
        f.style.display = "none";
        g.style.display = "none";
        h.style.display = "none";
    }

    function divOne(e, tabId){
        var a = document.getElementById('tab-one');
        var b = document.getElementById('tab-two');
        var c = document.getElementById('tab-three');
        var d = document.getElementById('tab-four');
        var e = document.getElementById('tab-five');
        var f = document.getElementById('tab-six');
        var g = document.getElementById('tab-seven');

var h = document.getElementById('tab-e');
        a.style.display = "none";
        b.style.display = "none";
        c.style.display = "block";
        d.style.display = "none";
        e.style.display = "none";
        f.style.display = "none";
        g.style.display = "none";
        h.style.display = "none";
    }

    function divTwo(e, tabId){
        var a = document.getElementById('tab-one');
        var b = document.getElementById('tab-two');
        var c = document.getElementById('tab-three');
        var d = document.getElementById('tab-four');
        var e = document.getElementById('tab-five');
        var f = document.getElementById('tab-six');
        var g = document.getElementById('tab-seven');
        var h = document.getElementById('tab-e');
        a.style.display = "none";
        b.style.display = "none";
        c.style.display = "none";
        d.style.display = "block";
        e.style.display = "none";
        f.style.display = "none";
        g.style.display = "none";
        h.style.display = "none";
    }
    function divThree(e, tabId){
        var a = document.getElementById('tab-one');
        var b = document.getElementById('tab-two');
        var c = document.getElementById('tab-three');
        var d = document.getElementById('tab-four');
        var e = document.getElementById('tab-five');
        var f = document.getElementById('tab-six');
        var g = document.getElementById('tab-seven');
        var h = document.getElementById('tab-e');
        a.style.display = "none";
        b.style.display = "none";
        c.style.display = "none";
        d.style.display = "none";
        e.style.display = "block";
        f.style.display = "none";
        g.style.display = "none";
        h.style.display = "none";
    }

    function divFour(e, tabId){

        var a = document.getElementById('tab-one');
        var b = document.getElementById('tab-two');
        var c = document.getElementById('tab-three');
        var d = document.getElementById('tab-four');
        var e = document.getElementById('tab-five');
        var f = document.getElementById('tab-six');
        var g = document.getElementById('tab-seven');
        var h = document.getElementById('tab-e');
        a.style.display = "none";
        b.style.display = "none";
        c.style.display = "none";
        d.style.display = "none";
        e.style.display = "none";
        f.style.display = "block";
        g.style.display = "none";
        h.style.display = "none";
    }
    function divFive(e, tabId){

var a = document.getElementById('tab-one');
var b = document.getElementById('tab-two');
var c = document.getElementById('tab-three');
var d = document.getElementById('tab-four');
var e = document.getElementById('tab-five');
var f = document.getElementById('tab-six');
var g = document.getElementById('tab-seven');
var h = document.getElementById('tab-e');
a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "block";
h.style.display = "none";
}

 function divSix(e, tabId){

var a = document.getElementById('tab-one');
var b = document.getElementById('tab-two');
var c = document.getElementById('tab-three');
var d = document.getElementById('tab-four');
var e = document.getElementById('tab-five');
var f = document.getElementById('tab-six');
var g = document.getElementById('tab-seven');
var h = document.getElementById('tab-e');

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "block";
}


    function buttonDIsabled(){
        var statusOnTable = document.getElementsByClassName('paw')
        var button = document.getElementsByClassName('buttonji');
        var btnw = document.getElementById('butt')
        var parap = document.getElementById('triplep');
        for(var i = 0; i < statusOnTable.length; i++){
            if(statusOnTable[i].innerText == 'Booked :('){
                button[i].disabled = true;
                button[i].style.cursor = "help";
                button[i].style.background = "red";
                button[i].style.color = "white";
            }else{
                button[i].disabled = false;
            }
        }
        if(parap.textContent == "0 Selected"){
            btnw.style.background = "red";
            btnw.style.color = "white";
            btnw.disabled = true;
        }else{
            btnw.disabled = false;
        }
}

## style.css
*{
    margin: 0;
    padding: 0;
}

body, html{
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-family: 'Times New Roman', cursive;

}

a {
    list-style: none;
    text-decoration: none;
    font-size: 20px;
    background: none;
    color: #000;
    padding: 0;
    margin: 0;
}

a:-webkit-any-link{
    text-decoration: none;
}

.header h1{
    margin-top: 4%;
    margin-left: 46%;
    display: block;
    font-size: 26px;
    font-weight: 6;
}

.container a{
    text-decoration: none;
    color: black;
    font-size: 16.2px;
    display: inline-flex;
    text-align: center;
    padding-top: 24px;
    padding-left: 10px;
    padding-bottom: 20px;
    padding-right: 10px;

}
.container{
    position: relative;
}

.wewew{
    margin-top: 11%;
}

.container a:hover{
    color: blue;
}
.container{
    margin: 0;
    display: block;
    position: absolute;
    padding: 0;
    margin-top: 37px;
}
.header hr{
    margin-top: 4%;
    color: #000;
}
.container hr{
    margin-top: 3%;
    color: #000;
}


.section li{
    text-decoration: none;
    list-style: none;
    margin-left: 20%;
    margin-top: 4%;
    font-size: 17px;
    padding: 1px 80px 0 20px;
    position: relative;
}

.section tr td th{
    text-align: center;


}

.section table{
   margin-top: 4%;
   margin-left: 14.1%;
   border: 1px solid black;
   border-radius: 5px;
    padding: 40px;
    width: 70%;
}

.section th{
    text-align: center;
    padding: 40px;
    padding-right: 40px;
    font-size: 16px;
    padding-top: 10%;
}

.section td{
    text-align: center;
    padding-top: 5px;
}

.section button{
    border-color: transparent;
    color: black;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
}

.section button:hover{
    color: slateblue;
}

.section h1{
    position: absolute;
    margin-left: 40.9%;
    padding-top: 2%;
    font-weight: 2;
    text-align: center;
}
/* .section a{
    margin-top: 4%;
    font-weight: 1;
    text-align: center;
    margin-left: 244px;
    color: #000;
    text-decoration: none;
    list-style: none;
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
} */

.section a:hover{
    color: blue;
}

.modal {
    display: none;
    position: absolute;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
  }

  /* Modal Content */
  .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
  }


  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  .btn-btn-btn{
      text-align: center;
      margin-left: 46%;
      height: 40px;
      width: 90px;
      border-radius: 4px;
      background: none;
      border-color: blue;
      cursor: pointer;
  }

  .btn-btn-btn:hover{
      background: #000;
      color: #fefefe;
  }

  .buttonji{
      text-align: center;
      background: none;
      border-radius: 4px;
      height: 40px;
      width: 60px;
      display: inline-block;

      border-color: black;
    margin-left: 40px;
    margin-top: 40px;
    cursor: pointer;
    padding: 4% 4% 4% 6%;
  }

  .paw{
      display: inline-block;
      margin-left: 20px;
  }

  .btn-w{
      display: block;
      margin-left: 40%;
      border: 1px solid black;
      border-radius: 4px;
      background: none;
      height: 40px;
      width: 120px;
      cursor: pointer;
      margin-top: 20px;
      background-color: #63c3f1d4;
      color:black;
  }


.selected-value{
    margin-top: 50px;
    margin-left: 35px;
}

.button-one{
  margin-left: 47%;
  border: 1px solid black;
  height: 30px;
  width: 70px;
}

.sectionq{
    margin-top: 4%;
   margin-left: 12%;
   border: 1px solid black;
   border-radius: 5px;
    padding: 40px;
    width: 70%;
}


.sectionq tr td th{
    text-align: center;


}


.sectionq th{
    text-align: center;
    padding: 40px;
    padding-right: 30px;
    font-size: 16px;
    padding-top: 10%;
}

.sectionq td{
    text-align: center;
    padding-top: 1px;
}

.sectionq button{
    border-color: transparent;
    color: black;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    border: 1px solid black;
  height: 50px;
  width: 90px;
  margin-top: 20px;
  border-radius: 2px;
}

.sectionq button:hover{
    color: slateblue;
}

.sectionq h1{
    position: absolute;
    margin-left: 32%;
    padding-top: 2%;
    font-weight: 2;
    text-align: center;
}
.sectionq a{
    margin-top: 4%;
    position: absolute;
    font-weight: 1;
    text-align: center;
    margin-left: 244px;
    color: #000;
    text-decoration: none;
    list-style: none;
    border: 1px solid black;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
}

.sectionq p{
    padding-top: 35px;
    padding-left: 20px;
}

.sectionq input[type="number"]{
    width: 60px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid black;
}
td .edit-btn{
  margin-left: 2px;
  font-size: 14px;
}

.add-btn{
    position: absolute;
    display: inline-block;
    margin-left: 260px;
    margin-top: 40px;
}

.cart-row span{
    padding-left: 15px;
    margin-left: 60px;
    display: inline-block;
    justify-content: center;
}

.cart-row{
    margin-top: 60px;
}
.section-header{
    margin-left: 46.7%;
    padding-top: 40px;
    font-weight: 100;
}

.cart-rowe span{
    padding-left: 10px;
    display: inline-block;
    position: relative;
}

.cart-pilot-name{
    margin-left: 70px;
    padding-top: 20px;
}

.btn-danger{
    margin-left: 94px;
    padding-top: 20px;
    border: none;
    background: none;
    cursor: pointer;
}

.cart-item-harga{
    margin-left: 44px;
    padding-top: 20px;
}

.cart-item-title{
    margin-left: 44.7px;
    padding-top: 20px;
}

.cart-plane-name{
    margin-left: 72px;
    padding-top: 20px;
}
.cart-tanggal-terbang{
    margin-left: 8px;
    padding-top: 20px;
}
.cart-tujuan-terbang{
    margin-left: -4px;
    padding-top: 20px;
}

.cart-chair{
    margin-left: 88.9px;
}

## yzrkvq.markdown

      
    Raw
  

              yzrkvq.markdown
            
          
    yZRKVq

A Pen by kalleriakronos24 on CodePen.
License.

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="main1.css">
	<script src="checkout2.js"></script>
	<title>Document</title>
	</head>
	<body onload="buttonDIsabled()">
	<div class="header">
	<h1 style="margin-left: 6px; position: absolute; font-size: 16px;">Welcome User, <?php echo "Madlad"; ?></h1>
	<h1>Mad Travel</h1>
	<h1 style="margin-left: 6px; position: relative; font-size: 16px; float: right;" id="current-jam">Samarinda</h1>
	<hr>
	</div>

	<div class="container">
	<a href="#" onclick="">Home</a>
	<a href="#BookHere" onclick="divReplacement()">Book Here</a>
	<a href="#Jadwal_Penerbangan" onclick="divReplacemente()">Jadwal Penerbangan</a>
	<a href="#Daftar_Penerbangan" onclick="divOne()">Daftar Penerbangan</a>
	<a href="#Destinasi_Penerbangan" onclick="divTwo()">Destinasi Penerbangan</a>
	<a href="#Checkout" id="chekuout" onclick="divThree()">Checkout(0)</a>
	<a href="#Riwayat_Pembelian" onclick="divFour()">Riwayat Pembelian</a>
	<a href="#User_Settings" onclick="divFive()">User Settings</a>
	<a href="#Pilot" onclick="divSix()">Pilot/Co-Pilot</a>

	</div>
	<!-- Beginning Of Boking Tiket -->
	<div class="tabu" id="tab-one" style="display: block;">

	<hr class="wewew">

	<div class="section">

	<table>

	<h1>Booking Tiket Disini</h1>

	<a class="add-btn" href="#">Tambah Data Tiket</a>

	<th>Ticket Serial Code</th>
	<th>Nama Tiket</th>
	<th>Nama Penerbangan</th>
	<th>Harga Per Tiket</th>
	<th>Details</th>
	<tr>
	<td>N-1010</td>
	<td>Just A Ticket </td>
	<td>Gar00da Airway </td>
	<td>Rp.10000 </td>
	<td><button class="btn-primary" id="myBtn">Click Here</button></td>
	<div id="myModal" class="modal">

	<!-- Modal content -->
	<div class="modal-content" style="display: block;">
	<span class="close">×</span>
	<a href="#" onclick="removeUnderlinedText()" id="details" style="font-size: 19px; text-decoration: underline;">Ticket Details<a href="#" onclick="lmaoTwo()" id="detailu" style="display: inline-block; padding-left: 10px; font-size: 19px; font-weight: 100;">Available Chair</a></a><br><br>
	<div id="header-modal">
	<h3 style="font-weight: 300;">×Ticket Serial Code</h3>
	<p class="ticket-code">N-1010</p><br>
	<h3 style="font-weight: 300;">×Nama Ticket</h3>
	<p class="ticket-name">Just A Ticket</p><br>
	<h3 style="font-weight: 300;">×Nama Penerbangan</h3>
	<p class="airways-name">Gar00da Airway</p><br>
	<h3 style="font-weight: 300;">×Harga Per ticket</h3>
	<p class="ticket-price">Rp. 1000000</p><br>
	<h3 style="font-weight: 300;">×Tanggal Penerbangan</h3>
	<p class="due-date">09 Febuary 2019 , at 09:40 AM - 10:40 AM</p><br>
	<h3 style="font-weight: 300;">×Tujuan</h3>
	<p class="destination">Balikpapan - Bogor</p><br>
	<h3 style="font-weight: 300;">×Pilot</h3>
	<p class="pilot-name">Udin SE</p><br>


	</div>

	<div id="headeru-modal" style="display: none;">
	<button id="btno" class="buttonji">1</button>

	<p class="paw">Booked :(</p>
	<button id="btno" class="buttonji">2</button>

	<p class="paw">Booked :(</p>
	<button id="btno" class="buttonji">3</button>

	<p class="paw">Booked :(</p>
	<button id="btno" class="buttonji">4</button>

	<p class="paw">Booked :(</p>
	<button id="btno" class="buttonji">5</button>

	<p class="paw">Booked :(</p>
	<button id="btno" class="buttonji">6</button>

	<p class="paw">Booked :(</p>
	<button id="btno" class="buttonji">7</button>

	<p class="paw">Booked :(</p>
	<button id="btno" class="buttonji">8</button>

	<p class="paw">Bookable :)</p>
	<button id="btno" class="buttonji">9</button>
	<p class="paw">Bookable :)</p>
	<p id="triplep" class="selected-value">0 Selected</p><button class="btn-w" id="butt">Klik Disini</button>
	</div>
	</div>

	</div>
	</tr>

	</table>
	</div>
	</div>

	<!-- End Of Boking Tiket -->
	<!-- Beginning Of Jadwal Penerbangan -->

	<div class="tabu" id="tab-two" style="display: none;">

	<hr class="wewew">

	<div class="section">

	<table>

	<h1>Jadwal Penerbangan</h1>

	<a class="add-btn" href="#">+ Jadwal Baru</a>

	<th>Kode Penerbangan</th>
	<th>Nama Penerbangan</th>
	<th>Jam Keberangkatan</th>
	<th>Tujuan</th>
	<th>Details</th>
	<tr>
	<td>N-1010</td>
	<td>Gar00da Airway</td>
	<td>10:00 AM - 11:00 AM</td>
	<td>Balikpapan - Bogor</td>
	<td><a class="edit-btn" href="#">Ubah</a></td>

	</tr>
	</table>
	</div>
	</div>
	<!-- End Of Jad Pener -->

	<div class="tabu" id="tab-three" style="display: none;">

	<hr class="wewew">

	<div class="section">

	<table>

	<h1>Daftar Penerbangan</h1>

	<a class="add-btn" href="#">+ Jadwal Baru</a>

	<th>Kode Penerbangan</th>
	<th>Nama Penerbangan</th>
	<th>Jam Keberangkatan</th>
	<th>Tujuan</th>
	<th>Details</th>
	<tr>
	<td>N-1010</td>
	<td>Gar00da Airway</td>
	<td>10:00 AM - 11:00 AM</td>
	<td>Balikpapan - Bogor</td>
	<td><?php echo '<a href="" class="edit-btn">Ubah</a>'?></td>

	</tr>
	</table>
	</div>

	</div>

	<!-- End Of Daftar Penerbangan -->

	<div class="tabu" id="tab-four" style="display: none;">

	<hr class="wewew">

	<div class="section">

	<table>

	<h1>Destinasi Penerbangan</h1>

	<a class="add-btn" href="#">+ Jadwal Baru</a>

	<th>Kode Penerbangan</th>
	<th>Nama Penerbangan</th>
	<th>Jam Keberangkatan</th>
	<th>Tujuan</th>
	<th>Details</th>
	<tr>
	<td>N-1010</td>
	<td>Gar00da Airway</td>
	<td>10:00 AM - 11:00 AM</td>
	<td>Balikpapan - Bogor</td>
	<td><button class="btn-primary" id="myBtn">Click Here</button></td>

	</tr>
	</table>
	</div>

	</div>

	<!-- End of Destinasi -->

	<div class="tabu" id="tab-five" style="display: none;">

	<hr class="wewew">

	<h2 class="section-header">Checkout</h2>
	<div class="cart-row">

	<span class="cart-price cart-header cart-column">Harga</span>
	<span class="cart-item cart-header cart-column">Nama Ticket</span>
	<span class="cart-plane-name cart-header cart-column">Nama Penerbangan</span>
	<span class="cart-tgl-terbang cart-header cart-column">Jadwal Penerbangan</span>
	<span class="cart-tujuan cart-header cart-column">Jadwal Penerbangan</span>
	<span class="cart-quantity cart-header cart-column">Nama Pilot</span>
	<span class="cart-choir cart-header cart-column">Chair</span>
	<span class="cart-batal cart-header cart-column">Cancel</span>
	</div>
	<div class="checkout-items">

	</div>
	<div class="cart-total">
	<strong class="cart-total-title">Total</strong>
	<span class="cart-total-price">Rp.0</span>
	</div>


	<!-- End Of History Checkout -->

	<div class="tabu" id="tab-six" style="display: none;">

	<hr class="wewew">

	<div class="section">

	<table>

	<h1 style="margin-left: 44.2%;">Riwayat Pembelian</h1>

	<a class="add-btn" href="#">+ Jadwal Baru</a>

	<th>Kode Penerbangan</th>
	<th>Nama Penerbangan</th>
	<th>Jam Keberangkatan</th>
	<th>Tujuan</th>
	<th>Details</th>
	<tr>
	<td>N-1010</td>
	<td>Gar00da Airway</td>
	<td>10:00 AM - 11:00 AM</td>
	<td>Balikpapan - Bogor</td>
	<td><button class="btn-primary" id="myBtn">Click Here</button></td>

	</tr>
	</table>
	</div>

	</div>
	<!-- End Of User Riwayat Pembelian -->

	<div class="tabu" id="tab-seven" style="display: none;">

	<hr class="wewew">

	<div class="section">

	<table>

	<h1 style="margin-left: 44.2%;">User Settings</h1>

	<a class="add-btn" href="#"></a>

	<th>Nama User</th>
	<th>Alamat/Kota</th>
	<th>Tgl Lahir</th>
	<th>Edit</th>
	<th>Hapus</th>

	<?php

	$query = mysqli_query($con, "SELECT * FROM user ORDER BY username DESC");

	while($result = mysqli_fetch_assoc($query)){

	?>
	<tr>
	<td><?php echo $result['username'];?></td>
	<td><?php echo $result['kota'];?></td>
	<td><?php echo $result['tgl_lahir'];?></td>
	<td><?php echo '<a href="" class="edit-btn">Edit</a>'?></td>
	<td><?php echo '<a href="" class="edit-btn">Hapus</a>'?></td>

	</tr>
	<?php

	}
	?>
	</table>
	</div>

	</div>

	<!-- End Of User Riwayat Pembelian -->
	<div class="tabu" id="tab-e" style="display: none;">

	<hr class="wewew">

	<div class="section">

	<table>

	<h1 style="margin-left: 44.2%;">Pilot/Co-Pilot</h1>

	<a class="add-btn" href="#">Tambah Data</a>

	<th>Nama</th>
	<th>Tgl Lahir</th>
	<th>Level</th>
	<th>Status</th>
	<th>Ubah Data</th>
	<tr>
	<td>Udin , SE, SK , Ud</td>
	<td>09-09-2019</td>
	<td>Pilot Of Gar00da</td>
	<td>Sibuk</td>
	<td><?php echo '<a href="" class="edit-btn">Ubah</a>'?></td>
	</tr>
	</table>
	</div>

	</div>
	<!-- End OF User Settings -->
	<div class="length-of-booked-chair">

	</div>
	</body>
	</html>

	function displayCurrentTimes(){

	var currentTime = new Date();

	var hours = currentTime.getHours();
	var hoursw = currentTime.getMinutes();
	var hourse = currentTime.getSeconds();

	document.getElementById('current-jam').textContent = hours + ":" + hoursw + ":" + hourse;
	}

	var modal = document.getElementById('myModal');

	// Get the button that opens the modal
	var btn = document.getElementsByClassName('btn-primary');

	// Get the <span> element that closes the modal
	var span = document.getElementsByClassName("close")[0];

	// When the user clicks the button, open the modal
	for(var i = 0; i < btn.length; i++){
	var button = btn[i];
	button.addEventListener('click', revealTheModal)
	}


	function revealTheModal(){
	var wew = document.getElementById('myModal');

	wew.style.display = "block";
	}
	function removeUnderlinedText(){

	var targetedOne = document.getElementById('header-modal');
	var targetedTwo = document.getElementById('headeru-modal');
	var a = document.getElementById('details');
	var b = document.getElementById('detailu');
	targetedOne.style.display = "block";
	targetedTwo.style.display = "none";
	a.style.textDecoration = "underline";
	b.style.textDecoration = "none";

	}

	function lmaoTwo(){
	var targetedOne = document.getElementById('header-modal');
	var targetedTwo = document.getElementById('headeru-modal');
	var a = document.getElementById('details');
	var b = document.getElementById('detailu');
	targetedOne.style.display = "none";
	targetedTwo.style.display = "block";
	a.style.textDecoration = "none";
	b.style.textDecoration = "underline";
	}


	function divReplacement(e, tabId){
	var a = document.getElementById('tab-one');
	var b = document.getElementById('tab-two');
	var c = document.getElementById('tab-three');
	var d = document.getElementById('tab-four');
	var e = document.getElementById('tab-five');
	var f = document.getElementById('tab-six');
	var g = document.getElementById('tab-seven');
	var h = document.getElementById('tab-e');
	a.style.display = "block";
	b.style.display = "none";
	c.style.display = "none";
	d.style.display = "none";
	e.style.display = "none";
	f.style.display = "none";
	g.style.display = "none";
	h.style.display = "none";
	}

	function divReplacemente(e, tabId){
	var a = document.getElementById('tab-one');
	var b = document.getElementById('tab-two');
	var c = document.getElementById('tab-three');
	var d = document.getElementById('tab-four');
	var e = document.getElementById('tab-five');
	var f = document.getElementById('tab-six');
	var g = document.getElementById('tab-seven');
	var h = document.getElementById('tab-e');
	a.style.display = "none";
	b.style.display = "block";
	c.style.display = "none";
	d.style.display = "none";
	e.style.display = "none";
	f.style.display = "none";
	g.style.display = "none";
	h.style.display = "none";
	}

	function divOne(e, tabId){
	var a = document.getElementById('tab-one');
	var b = document.getElementById('tab-two');
	var c = document.getElementById('tab-three');
	var d = document.getElementById('tab-four');
	var e = document.getElementById('tab-five');
	var f = document.getElementById('tab-six');
	var g = document.getElementById('tab-seven');

	var h = document.getElementById('tab-e');
	a.style.display = "none";
	b.style.display = "none";
	c.style.display = "block";
	d.style.display = "none";
	e.style.display = "none";
	f.style.display = "none";
	g.style.display = "none";
	h.style.display = "none";
	}

	function divTwo(e, tabId){
	var a = document.getElementById('tab-one');
	var b = document.getElementById('tab-two');
	var c = document.getElementById('tab-three');
	var d = document.getElementById('tab-four');
	var e = document.getElementById('tab-five');
	var f = document.getElementById('tab-six');
	var g = document.getElementById('tab-seven');
	var h = document.getElementById('tab-e');
	a.style.display = "none";
	b.style.display = "none";
	c.style.display = "none";
	d.style.display = "block";
	e.style.display = "none";
	f.style.display = "none";
	g.style.display = "none";
	h.style.display = "none";
	}
	function divThree(e, tabId){
	var a = document.getElementById('tab-one');
	var b = document.getElementById('tab-two');
	var c = document.getElementById('tab-three');
	var d = document.getElementById('tab-four');
	var e = document.getElementById('tab-five');
	var f = document.getElementById('tab-six');
	var g = document.getElementById('tab-seven');
	var h = document.getElementById('tab-e');
	a.style.display = "none";
	b.style.display = "none";
	c.style.display = "none";
	d.style.display = "none";
	e.style.display = "block";
	f.style.display = "none";
	g.style.display = "none";
	h.style.display = "none";
	}

	function divFour(e, tabId){

	var a = document.getElementById('tab-one');
	var b = document.getElementById('tab-two');
	var c = document.getElementById('tab-three');
	var d = document.getElementById('tab-four');
	var e = document.getElementById('tab-five');
	var f = document.getElementById('tab-six');
	var g = document.getElementById('tab-seven');
	var h = document.getElementById('tab-e');
	a.style.display = "none";
	b.style.display = "none";
	c.style.display = "none";
	d.style.display = "none";
	e.style.display = "none";
	f.style.display = "block";
	g.style.display = "none";
	h.style.display = "none";
	}
	function divFive(e, tabId){

	var a = document.getElementById('tab-one');
	var b = document.getElementById('tab-two');
	var c = document.getElementById('tab-three');
	var d = document.getElementById('tab-four');
	var e = document.getElementById('tab-five');
	var f = document.getElementById('tab-six');
	var g = document.getElementById('tab-seven');
	var h = document.getElementById('tab-e');
	a.style.display = "none";
	b.style.display = "none";
	c.style.display = "none";
	d.style.display = "none";
	e.style.display = "none";
	f.style.display = "none";
	g.style.display = "block";
	h.style.display = "none";
	}

	function divSix(e, tabId){

	var a = document.getElementById('tab-one');
	var b = document.getElementById('tab-two');
	var c = document.getElementById('tab-three');
	var d = document.getElementById('tab-four');
	var e = document.getElementById('tab-five');
	var f = document.getElementById('tab-six');
	var g = document.getElementById('tab-seven');
	var h = document.getElementById('tab-e');

	a.style.display = "none";
	b.style.display = "none";
	c.style.display = "none";
	d.style.display = "none";
	e.style.display = "none";
	f.style.display = "none";
	g.style.display = "none";
	h.style.display = "block";
	}


	function buttonDIsabled(){
	var statusOnTable = document.getElementsByClassName('paw')
	var button = document.getElementsByClassName('buttonji');
	var btnw = document.getElementById('butt')
	var parap = document.getElementById('triplep');
	for(var i = 0; i < statusOnTable.length; i++){
	if(statusOnTable[i].innerText == 'Booked :('){
	button[i].disabled = true;
	button[i].style.cursor = "help";
	button[i].style.background = "red";
	button[i].style.color = "white";
	}else{
	button[i].disabled = false;
	}
	}
	if(parap.textContent == "0 Selected"){
	btnw.style.background = "red";
	btnw.style.color = "white";
	btnw.disabled = true;
	}else{
	btnw.disabled = false;
	}
	}
	*{
	margin: 0;
	padding: 0;
	}

	body, html{
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-family: 'Times New Roman', cursive;

	}

	a {
	list-style: none;
	text-decoration: none;
	font-size: 20px;
	background: none;
	color: #000;
	padding: 0;
	margin: 0;
	}

	a:-webkit-any-link{
	text-decoration: none;
	}

	.header h1{
	margin-top: 4%;
	margin-left: 46%;
	display: block;
	font-size: 26px;
	font-weight: 6;
	}

	.container a{
	text-decoration: none;
	color: black;
	font-size: 16.2px;
	display: inline-flex;
	text-align: center;
	padding-top: 24px;
	padding-left: 10px;
	padding-bottom: 20px;
	padding-right: 10px;

	}
	.container{
	position: relative;
	}

	.wewew{
	margin-top: 11%;
	}

	.container a:hover{
	color: blue;
	}
	.container{
	margin: 0;
	display: block;
	position: absolute;
	padding: 0;
	margin-top: 37px;
	}
	.header hr{
	margin-top: 4%;
	color: #000;
	}
	.container hr{
	margin-top: 3%;
	color: #000;
	}


	.section li{
	text-decoration: none;
	list-style: none;
	margin-left: 20%;
	margin-top: 4%;
	font-size: 17px;
	padding: 1px 80px 0 20px;
	position: relative;
	}

	.section tr td th{
	text-align: center;


	}

	.section table{
	margin-top: 4%;
	margin-left: 14.1%;
	border: 1px solid black;
	border-radius: 5px;
	padding: 40px;
	width: 70%;
	}

	.section th{
	text-align: center;
	padding: 40px;
	padding-right: 40px;
	font-size: 16px;
	padding-top: 10%;
	}

	.section td{
	text-align: center;
	padding-top: 5px;
	}

	.section button{
	border-color: transparent;
	color: black;
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	font-size: 14px;
	}

	.section button:hover{
	color: slateblue;
	}

	.section h1{
	position: absolute;
	margin-left: 40.9%;
	padding-top: 2%;
	font-weight: 2;
	text-align: center;
	}
	/* .section a{
	margin-top: 4%;
	font-weight: 1;
	text-align: center;
	margin-left: 244px;
	color: #000;
	text-decoration: none;
	list-style: none;
	border: 1px solid black;
	padding: 5px 5px 5px 5px;
	border-radius: 5px;
	} */

	.section a:hover{
	color: blue;
	}

	.modal {
	display: none;
	position: absolute;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.4);
	}

	/* Modal Content */
	.modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 50%;
	}


	.close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	}

	.close:hover,
	.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	}
	.btn-btn-btn{
	text-align: center;
	margin-left: 46%;
	height: 40px;
	width: 90px;
	border-radius: 4px;
	background: none;
	border-color: blue;
	cursor: pointer;
	}

	.btn-btn-btn:hover{
	background: #000;
	color: #fefefe;
	}

	.buttonji{
	text-align: center;
	background: none;
	border-radius: 4px;
	height: 40px;
	width: 60px;
	display: inline-block;

	border-color: black;
	margin-left: 40px;
	margin-top: 40px;
	cursor: pointer;
	padding: 4% 4% 4% 6%;
	}

	.paw{
	display: inline-block;
	margin-left: 20px;
	}

	.btn-w{
	display: block;
	margin-left: 40%;
	border: 1px solid black;
	border-radius: 4px;
	background: none;
	height: 40px;
	width: 120px;
	cursor: pointer;
	margin-top: 20px;
	background-color: #63c3f1d4;
	color:black;
	}


	.selected-value{
	margin-top: 50px;
	margin-left: 35px;
	}

	.button-one{
	margin-left: 47%;
	border: 1px solid black;
	height: 30px;
	width: 70px;
	}

	.sectionq{
	margin-top: 4%;
	margin-left: 12%;
	border: 1px solid black;
	border-radius: 5px;
	padding: 40px;
	width: 70%;
	}


	.sectionq tr td th{
	text-align: center;


	}


	.sectionq th{
	text-align: center;
	padding: 40px;
	padding-right: 30px;
	font-size: 16px;
	padding-top: 10%;
	}

	.sectionq td{
	text-align: center;
	padding-top: 1px;
	}

	.sectionq button{
	border-color: transparent;
	color: black;
	text-decoration: none;
	background: transparent;
	cursor: pointer;
	font-size: 14px;
	border: 1px solid black;
	height: 50px;
	width: 90px;
	margin-top: 20px;
	border-radius: 2px;
	}

	.sectionq button:hover{
	color: slateblue;
	}

	.sectionq h1{
	position: absolute;
	margin-left: 32%;
	padding-top: 2%;
	font-weight: 2;
	text-align: center;
	}
	.sectionq a{
	margin-top: 4%;
	position: absolute;
	font-weight: 1;
	text-align: center;
	margin-left: 244px;
	color: #000;
	text-decoration: none;
	list-style: none;
	border: 1px solid black;
	padding: 5px 5px 5px 5px;
	border-radius: 5px;
	}

	.sectionq p{
	padding-top: 35px;
	padding-left: 20px;
	}

	.sectionq input[type="number"]{
	width: 60px;
	height: 30px;
	border-radius: 4px;
	border: 1px solid black;
	}
	td .edit-btn{
	margin-left: 2px;
	font-size: 14px;
	}

	.add-btn{
	position: absolute;
	display: inline-block;
	margin-left: 260px;
	margin-top: 40px;
	}

	.cart-row span{
	padding-left: 15px;
	margin-left: 60px;
	display: inline-block;
	justify-content: center;
	}

	.cart-row{
	margin-top: 60px;
	}
	.section-header{
	margin-left: 46.7%;
	padding-top: 40px;
	font-weight: 100;
	}

	.cart-rowe span{
	padding-left: 10px;
	display: inline-block;
	position: relative;
	}

	.cart-pilot-name{
	margin-left: 70px;
	padding-top: 20px;
	}

	.btn-danger{
	margin-left: 94px;
	padding-top: 20px;
	border: none;
	background: none;
	cursor: pointer;
	}

	.cart-item-harga{
	margin-left: 44px;
	padding-top: 20px;
	}

	.cart-item-title{
	margin-left: 44.7px;
	padding-top: 20px;
	}

	.cart-plane-name{
	margin-left: 72px;
	padding-top: 20px;
	}
	.cart-tanggal-terbang{
	margin-left: 8px;
	padding-top: 20px;
	}
	.cart-tujuan-terbang{
	margin-left: -4px;
	padding-top: 20px;
	}

	.cart-chair{
	margin-left: 88.9px;
	}