sports-arena-website / volleyball_court_booking_al.php
volleyball_court_booking_al.php
Raw
<!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 don't have session user..then
if(! isset($_SESSION['memname']))
{
session_write_close();
die("<script>window.location.href='volleyball_court_booking.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>Volleyball Court Booking</title>

<style>
.curved{
  background:linear-gradient( rgba(0, 0, 250, 0.25), rgba(125, 250, 250, 0.45)),url(images/volleyball1.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:1620px;
}
.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/volleyball_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:1520px;
    }
    .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:1480px;
    }
    .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:1630px;
    }
    .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:1570px;
    }
    .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:1490px;
    }
    .formcontainer .container form{
        padding-bottom:140px;
    }
}
@media only screen and (min-width: 880px) and (max-width: 991px) {
    .page-scroll{
        height:1430px;
    }
    .formcontainer .container form{
        padding-bottom:100px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 879px) {
    .page-scroll{
        height:1370px;
    }

    .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 volleyball_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 dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false">
                        Extras
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="member_profile.php">Profile</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="booking_history.php">Booking</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="my_purchases.php">My Purchase</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="logout.php">Logout</a>
                        <div class="dropdown-divider"></div>
                    </div>
            </li>
        </ul>
    </div>
</nav>

<div class="curved">
    <h1>VOLLEYBALL 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/volleyball_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="volleyball_booking_insert.php" method="POST">
                <label style="font-size: 30px; margin-top:20px;">Volleyball Court Booking</label>
                <div class="row" style="margin-top: 10px;">
                    <div class="col">
                        <input type="text" class="form-control" value="<?php echo $_SESSION['memid'];?>" name="memid" readonly>
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" value="<?php echo $_SESSION['memname']?>" name="memname" readonly>
                    </div>
                </div>
                <div class="row" style="margin-top: 30px;">
                    <div class="col">
                        <input type="text" class="form-control" value="<?php echo $_SESSION['phone']?>" name="phone" readonly>
                    </div>
                    <div class="col">
                        <input type="text" class="form-control" value="<?php echo $_SESSION['email']?>" name="email" readonly>
                    </div>
                </div>
                <div class="row" style="margin-top: 30px;">
                    <div class="col ">
                        <select class="form-control" name="cid" required="required">
                            <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>
                        </select>
                    </div>
                    <div class="col">
                        <select class="form-control" name="duration" required="required">
                            <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" required="required">
                    </div>
                    <div class="col">
                        <input class="form-control" id="datetimepicker2" type="text" name="endtime" placeholder="End Time" required="required">
                    </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> &nbsp; 012-3456789 (John Siena)</p>
                    <p><i class="fas fa-envelope"></i> &nbsp; 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 &copy;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>