<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <?php session_start(); // if have session user..then if( isset($_SESSION['memname'])) { session_write_close(); die("<script>window.location.href='squash_court_booking_al.php';</script>"); } ?> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" /> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css"/> <link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Teko:700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Courgette&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/0c641bf868.js" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <title>Squash Court Booking</title> <style> .curved{ background:linear-gradient( rgba(0, 0, 250, 0.25), rgba(125, 250, 250, 0.45)),url(images/squash1.jpg); background-size: cover; background-attachment: fixed; color:white !important; text-align: center; } .curved h1{ padding-top: 70px; font-family: 'Teko', sans-serif; font-size: 85px; } .curved svg{ display: block; margin-top: -170px; } .page-scroll{ height:1820px; } .page-scroll .container .plabel{ margin-left: -20px; font-family: 'Acme', sans-serif; text-align: justify; font-size: 24px; } .formcontainer{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: #031321; min-height: 85vh; } .btn{ display: block; width: 100%; height: 50px; border-radius: 25px; margin: 1rem 0; font-size: 1.2rem; outline: none; border: none; background-image: linear-gradient(to right, #32be8f, #38d39f, #32be8f); cursor: pointer; color: #fff; text-transform: uppercase; font-family: 'Poppins', sans-serif; background-size: 200%; transition: .5s; margin-top: 30px; margin-bottom: 60px; } .btn:hover{ background-position: right; } .formcontainer .container form label{ font-family: 'Acme', sans-serif; text-align: justify; color: #fff;; } .tnclabel{ color: red; font-family: 'Acme', sans-serif; margin-top: 20px; } .list1 ul{ list-style-image: url('images/squash_icon.png'); margin-left:15px; } .list1 ul li{ padding-top: 15px; margin-right: 35px; } .formcontainer .container label{ padding-top:40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .curved h1{ font-size: 70px; } .curved svg{ display: block; margin-top: -110px; } .page-scroll .container .plabel{ font-size: 20px; } .formcontainer form input[type="text"]{ font-size: 15px; } .formcontainer select{ font-size: 15px; } .plabel2, ul li{ font-size: 15px; } } @media only screen and (max-width:341px){ .curved h1 { font-size: 60px; } .curved svg{ display: block; margin-top: -40px; } .page-scroll .container .plabel{ margin-left:30px; font-size: 16px; } .formcontainer form input[type="text"]{ font-size: 14px; } .formcontainer select{ font-size:14px; } .plabel2, ul li{ font-size: 14px; } .page-scroll{ height:1750px; } .formcontainer .container form{ padding-bottom:50px; } } @media only screen and (min-width: 342px) and (max-width: 433px){ .curved h1 { font-size: 60px; } .curved svg{ display: block; margin-top: -40px; } .page-scroll .container .plabel{ margin-left:30px; font-size: 16px; } .formcontainer form input[type="text"]{ font-size: 14px; } .formcontainer select{ font-size:14px; } .plabel2, ul li{ font-size: 14px; } .page-scroll{ height:1620px; } .formcontainer .container form{ padding-bottom:70px; } ul li{ padding-top: 25px; } }@media only screen and (min-width: 434px) and (max-width: 767px) { .curved h1 { font-size: 60px; } .curved svg{ display: block; margin-top: -40px; } .page-scroll .container .plabel{ margin-left:30px; font-size: 16px; } .formcontainer form input[type="text"]{ font-size: 14px; } .formcontainer select{ font-size:14px; } .plabel2, ul li{ font-size: 14px; } .page-scroll{ height:1550px; } .formcontainer .container form{ padding-bottom:120px; } ul li{ padding-top: 20px; } } @media only screen and (min-width: 1350px) and (max-width: 1500px) { .page-scroll .container .plabel{ margin-left: 30px; } .page-scroll{ height:1830px; } .formcontainer .container form{ padding-bottom:150px; } } @media only screen and (min-width: 1180px) and (max-width: 1349px) { .page-scroll .container .plabel{ margin-left: 30px; } .page-scroll{ height:1770px; } .formcontainer .container form{ padding-bottom:140px; } } @media only screen and (min-width: 992px) and (max-width: 1179px) { .page-scroll .container .plabel{ margin-left: 30px; font-size: 19px; } .page-scroll{ height:1690px; } .formcontainer .container form{ padding-bottom:140px; } } @media only screen and (min-width: 880px) and (max-width: 991px) { .page-scroll{ height:1630px; } .formcontainer .container form{ padding-bottom:100px; } } @media only screen and (min-width: 768px) and (max-width: 879px) { .page-scroll{ height:1570px; } .formcontainer .container form{ padding-bottom:70px; } } </style> <script type="text/javascript"> $(document).ready(function() { $('#datetimepicker1').datetimepicker({ format:'Y-m-d H:i', theme: 'dark', minDate: 0, allowTimes:[ '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00' ] }); $('#datetimepicker2').datetimepicker({ format:'Y-m-d H:i', theme: 'dark', minDate: 0, allowTimes:[ '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00' ] }); }); </script> </head> <body> <?php include("conn.php");//add connection to the php page $sql = "SELECT * FROM squash_court WHERE Court_ID = '1'"; $result = mysqli_query($conn, $sql); if(mysqli_num_rows($result)<=0)//if no result, { die("<script>alert('Error in retrieving data!');</script>"); } while($rows = mysqli_fetch_array($result)){ ?> <!--Navigation Bar--> <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top"> <a class="navbar-brand" href="home.php"><img alt="Brand" src="images/logo.png" style="width: 80px; height: 80px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto" style="padding-right: 50px;"> <li class="nav-item"> <a class="nav-link" href="home.php">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item dropdown active"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Arena </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="arena_facilities.php">Arena Facilities</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="badminton_court_booking.php">Badminton Court Booking</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="volleyball_court_booking.php">Volleyball Court Booking</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="squash_court_booking.php">Squash Court Booking</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="futsal_court_booking.php">Futsal Court Booking</a> <div class="dropdown-divider"></div> </div> </li> </li> <li class="nav-item"> <a class="nav-link" href="shop.php">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="about_us.php">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="faq.php">FAQ</a> </li> <li class="nav-item"> <a class="nav-link" href="login.html">Login</a> </li> </ul> </div> </nav> <div class="curved"> <h1>SQUASH COURT</h1> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 319"> <path fill="#fff" fill-opacity="1" d="M0,128L80,154.7C160,181,320,235,480,266.7C640,299,800,309,960,298.7C1120,288,1280,256,1360,240L1440,224L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"> </path> </svg> </div> <div class="page-scroll"> <img src="images/squash_structure.png" class="img-fluid" style="display: block;margin: 0 auto;" alt=""> <div class="container"> <div class="row"> <div class="col"> <p class="plabel" style="color:black;">Rental Rate : RM <?php echo $rows['Court_Rental_Rate'] ?> per hour</p> </div> </div> </div> <div style="background-color:#F5F5F5;"> <div class="container" style="padding-top:15px;padding-bottom:30px;"> <div class="row"> <div class="col"> <h2 class="tnclabel">Terms & Conditions</h2> </div> </div> <div class="row list1"> <div class="col" style="text-align:justify;"> <p class="plabel2">Individuals that are booking the sports courts are acknowledged that you had read and agreed with the terms of conditions of the Sports Arena. Please make sure that you follow the terms and conditions properly so that the courts booking process can be done successfully without any troublesome.</p> <ul> <li>The payment for the particular court booking will be done before using the court on the day of court booking</li> <li>If individuals failed to present themselves on the selected booking time without any acknowledgement, the booking will be cancelled automatically</li> <li>Only propper sports wears are allowed for individuals in order to carry out sports sessions in the arena</li> <li>Individuals must prepared their own sports accessories for particular sport else they may buy the items from our shop if required</li> <li>Please keep the cleanliness of the court surrounding during sports session in the arena</li> </ul> </div> </div> </div> </div> <div class="formcontainer"> <div class="container"> <form action="squash_booking_insert.php" method="POST"> <label style="font-size: 30px; margin-top:20px;">Squash Court Booking</label> <div class="row" style="margin-top: 10px;"> <div class="col"> <input type="text" class="form-control" placeholder="Member ID" name="memid" readonly> </div> <div class="col"> <input type="text" class="form-control" placeholder="Member Name" name="memname" readonly> </div> </div> <div class="row" style="margin-top: 30px;"> <div class="col"> <input type="text" class="form-control" placeholder="Phone Number" name="phone" readonly> </div> <div class="col"> <input type="text" class="form-control" placeholder="Email" name="email" readonly> </div> </div> <div class="row" style="margin-top: 30px;"> <div class="col"> <select class="form-control" name="cid"> <option value="">Select a court</option> <option value="1">Court 1</option> <option value="2">Court 2</option> <option value="3">Court 3</option> <option value="4">Court 4</option> <option value="5">Court 5</option> <option value="6">Court 6</option> </select> </div> <div class="col"> <select class="form-control" name="duration"> <option value="">Duration (Hour)</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div> </div> <div class="row" style="margin-top: 30px;"> <div class="col"> <input class="form-control" id="datetimepicker1" type="text" name="starttime" placeholder="Start Time"> </div> <div class="col"> <input class="form-control" id="datetimepicker2" type="text" name="endtime" placeholder="End Time"> </div> </div> <p style="margin: 10px;color: red;font-family: 'Acme', sans-serif;padding-top:10px;">*** Please read the T&C before booking.</p> <p style="margin: 10px;color: red;font-family: 'Acme', sans-serif;margin-top:-10px;">*** Please make sure that you login into the system before booking courts.</p> <input type="submit" class="btn" value="Book Now"> </form> </div> </div> </div> <?php } ?> <!--Footer--> <footer> <div class="footer-top"> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12 segment-one md-mb-30 sm-mb-30"> <h3><font style="color: red;">Supreme</font> Sports Arena</h3> <p>Supreme Sports Arena is a newly built sports arena which include badminton, squash, volleyball and futsal. The Arena is provided with high quality facilities for the sports enthusiasts.</p> </div> <div class="col-md-4 col-sm-6 col-xs-12 segment-two md-mb-30 sm-mb-30"> <h2>Quick Links</h2> <ul> <li><a href="home.php">Home</a></li> <li><a href="arena_facilities.php">Arena Facilities</a></li> <li><a href="shop.php">Shop</a></li> <li><a href="about_us.php">About Us</a></li> <li><a href="faq.php">FAQ</a></li> </ul> </div> <div class="col-md-4 col-sm-6 col-xs-12 segment-three md-mb-30 sm-mb-30"> <h2>Contact Us</h2> <p><i class="fa fa-phone"></i> 012-3456789 (John Siena)</p> <p><i class="fas fa-envelope"></i> supremesportsarena@gmail.com</p> <a href="https://www.facebook.com/Supreme-Sports-Arena-113298846750542/?modal=admin_todo_tour" target="_blank"><i class="fab fa-facebook-square"></i></a> <a href="https://www.instagram.com/supreme_sports_arena/" target="_blank"><i class="fab fa-instagram"></i></a> <a href="https://twitter.com/ArenaSupreme" target="_blank"><i class="fab fa-twitter"></i></a> </div> </div> </div> </div> <p class="footer-bottom-text">All Right reserved by ©Supreme Sports Arena 2020</p> </footer> <!--Bootstrap js--> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.js"></script> <!--To make dropdown menu become hover accross--> <script> const $dropdown = $(".dropdown"); const $dropdownToggle = $(".dropdown-toggle"); const $dropdownMenu = $(".dropdown-menu"); const showClass = "show"; $(window).on("load resize", function () { if (this.matchMedia("(min-width: 768px)").matches) { $dropdown.hover( function () { const $this = $(this); $this.addClass(showClass); $this.find($dropdownToggle).attr("aria-expanded", "true"); $this.find($dropdownMenu).addClass(showClass); }, function () { const $this = $(this); $this.removeClass(showClass); $this.find($dropdownToggle).attr("aria-expanded", "false"); $this.find($dropdownMenu).removeClass(showClass); } ); } else { $dropdown.off("mouseenter mouseleave"); } }); //let the nvbar stick on top // When the user scrolls the page, execute myFunction window.onscroll = function () { myFunction() }; // Get the navbar var navbar = document.getElementById("navbar"); // Get the offset position of the navbar var sticky = navbar.offsetTop; // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } } </script> </body> </html>