member_profile.php · sports-arena-website

<!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['memid']))
{
die("<script>alert('Please login first!');
    window.location.href='login.html';
    </script>");

session_write_close();
}
?>

<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 href="https://fonts.googleapis.com/css?family=Teko:700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Acme&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">
    <link href="https://fonts.googleapis.com/css?family=Exo+2:800&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/0c641bf868.js" crossorigin="anonymous"></script>

    <title>Profile Page</title>
    
    <style>
        *{
            box-sizing: border-box;
        }
        body{
            background-color: #1e1e1e;
        }
        .card{
            width: 500px;
            margin: 50px auto 0;
            min-height: 400px;
            box-shadow: 0 3px 30px #ade6ff;
            color: #444;
            text-align: center;
            font-size: 16px;
            margin-bottom: 40px;
            background-color:#041423;
        }
        .card .card-header .profile-img{
            width: 96px;
            height: 96px;
            left:50%;
        }            
        .card .card-body{
            padding: 10px 40px;
            color:#e3e3e3;
        }
        .card .card-body .full-name{
            font-size: 36px;
            font-weight: 1000;
            text-transform: uppercase;
            margin: 10px 0 0;
            color: #2895d4;
            font-family: 'Acme', sans-serif;
        }
        .card .card-body .label{
            font-weight: 600;
            margin: 15px 0;
            color:#949494;
            font-size: 18px;
            
        }
        .card .card-body .desc{
            font-size: 15px;
            margin-top:-10px;
        }
        .card .card-footer{
            width:100%;
        }
        .card .card-footer a{
            position: relative;
            display: block;
            padding: 15px 30px;
            color: #2196f3;
            text-transform: uppercase;
            letter-spacing: 4px;
            text-decoration: none;
            font-size: 20px;
            overflow: hidden;
            transition: 0.2s;
            text-align: center;
            margin-top: 20px;
            font-weight:bold;
            margin-bottom:30px;
        }
        .card .card-footer a:hover{
            color: #255784;
            background: #2196f3;
            box-shadow: 0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
            transition-delay: 1s;
        }
        .card .card-footer a span{
            position: absolute;
            display: block;
        }
        .card .card-footer a span:nth-child(1){
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent,#2196f3);
        }
        .card .card-footer a:hover span:nth-child(1){
            left: 100%;
            transition: 1s;
        }
        .card .card-footer a span:nth-child(3){
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent,#2196f3);
        }
        .card .card-footer a:hover span:nth-child(3){
            right: 100%;
            transition: 1s;
            transition-delay: 0.5s;
        }
        .card .card-footer a span:nth-child(2){
            top: -100%;
            right: 0%;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent,#2196f3);
        }
        .card .card-footer a:hover span:nth-child(2){
            top: 100%;
            transition: 1s;
            transition-delay: 0.25s;
        }
        .card .card-footer a span:nth-child(4){
            bottom: -100%;
            left: 0%;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent,#2196f3);
        }
        .card .card-footer a:hover span:nth-child(4){
            bottom: 100%;
            transition: 1s;
            transition-delay: 0.75s;
        }
        @media screen and (max-width: 575px){
            .card{
                width: 93%;
            }
            .card .card-body{ 
                padding: 10px 20px;
            }
        }
    </style>

</head>

<body>
    <!--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">
                    <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 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 active">
                    <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>

    <?php
		include("conn.php");//add connection to the php page
		$sql = "Select * from member WHERE Mem_ID = '".$_SESSION['memid']."'";//add a new sql query
        $result = mysqli_query($conn, $sql);//run the sql query and all the data store in the variable result

        if(mysqli_num_rows($result)<=0)//if no result,
		{
            die("<script>alert('No data from database!');</script>");
        }

        while($rows = mysqli_fetch_array($result)){
    ?>

    <div class="card">
        <div class="card-header">
            <img src="images/logo.png" alt="Logo" class="profile-img">
        </div>
        <div class="card-body">
            <p class="full-name"><?php echo $rows['Mem_Name']; ?></p>
            <p class="label">Phone</p>
            <p class="desc"><?php echo $rows['Mem_Phone']; ?></p>
            <p class="label">Email</p>
            <p class="desc"><?php echo $rows['Mem_Email']; ?></p>
            <p class="label">Address</p>
            <p class="desc"><?php echo $rows['Mem_Address']; ?></p>
        </div>
        <div class="card-footer">
            <div class="col">
                <?php echo "<a href='edit_profile.php?id=".$_SESSION['memid']."'> 
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    Update Profile
                </a>"; ?>          
            </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>
    <!--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>