<?php
session_start();
 require_once('database.php');
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="HTML5 Template" />
<meta name="description" content="Shezan Restaurant, Food & Cafe" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Shezan</title>
<link href="//db.onlinewebfonts.com/c/2e27d72b2e0dca4d9a59992fb6fdcc11?family=OronteusFinaeusW01-SmCaps" rel="stylesheet" type="text/css"/>
<!-- Favicon -->
<link rel="shortcut icon" href="https://cdn1.centralapp.com/api/v1/media/logo-medium/place-4486-ac829f63-6c73-4c87-aa47-9405fc05eafb.jpeg" />
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<!-- google font -->
<link href="https://fonts.googleapis.com/css2?family=Baloo+Paaji+2&family=Gotu&family=Source+Code+Pro&display=swap" rel="stylesheet">
<!-- flaticon -->
<link rel="stylesheet" type="text/css" href="css/flaticon.css" />
<!-- font awesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<!-- mega menu -->
<link rel="stylesheet" type="text/css" href="css/mega-menu/mega_menu.css" />
<!-- carousel -->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css" />
<!-- datepicker -->
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link rel="stylesheet" type="text/css" href="css/style-customizer.css" />
<style>
/*@-webkit-keyframes rotating /* Safari and Chrome */ {*/
/*  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}*/
/*@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}*/
/*.rotating {
  -webkit-animation: rotating 20s linear infinite;
  -moz-animation: rotating 20s linear infinite;
  -ms-animation: rotating   20s linear infinite;
  -o-animation: rotating 20s linear infinite;
  animation: rotating 20s linear infinite;
*/


/*#preloader {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/
/*#loader {*/
/*    display: block;*/
/*    position: relative;*/
/*    left: 50%;*/
/*    top: 50%;*/
/*    width: 150px;*/
/*    height: 150px;*/
/*    margin: -75px 0 0 -75px;*/
/*    border-radius: 50%;*/
/*    border: 3px solid transparent;*/
/*    border-top-color: #9370DB;*/
/*    -webkit-animation: spin 2s linear infinite;*/
/*    animation: spin 2s linear infinite;*/
/*}*/
/*#loader:before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 5px;*/
/*    left: 5px;*/
/*    right: 5px;*/
/*    bottom: 5px;*/
/*    border-radius: 50%;*/
/*    border: 3px solid transparent;*/
/*    border-top-color: #BA55D3;*/
/*    -webkit-animation: spin 3s linear infinite;*/
/*    animation: spin 3s linear infinite;*/
/*}*/
/*#loader:after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 15px;*/
/*    left: 15px;*/
/*    right: 15px;*/
/*    bottom: 15px;*/
/*    border-radius: 50%;*/
/*    border: 3px solid transparent;*/
/*    border-top-color: #FF00FF;*/
/*    -webkit-animation: spin 1.5s linear infinite;*/
/*    animation: spin 1.5s linear infinite;*/
/*}*/
/*@-webkit-keyframes spin {*/
/*    0%   {*/
/*        -webkit-transform: rotate(0deg);*/
/*        -ms-transform: rotate(0deg);*/
/*        transform: rotate(0deg);*/
/*    }*/
/*    100% {*/
/*        -webkit-transform: rotate(360deg);*/
/*        -ms-transform: rotate(360deg);*/
/*        transform: rotate(360deg);*/
/*    }*/
/*}*/
/*@keyframes spin {*/
/*    0%   {*/
/*        -webkit-transform: rotate(0deg);*/
/*        -ms-transform: rotate(0deg);*/
/*        transform: rotate(0deg);*/
/*    }*/
/*    100% {*/
/*        -webkit-transform: rotate(360deg);*/
/*        -ms-transform: rotate(360deg);*/
/*        transform: rotate(360deg);*/
/*    }*/
/*}*/


.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}
.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}
.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}
.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}
@keyframes loading-text {
  0% {
    content: "Loading";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
}

</style>
</head>
<body>
<!--=================================
loading -->
<div id="loading">
  <div id="loading-center">
      

<div class='container'>
  <div class='loader'>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--dot'></div>
    <div class='loader--text'></div>
  </div>
</div>

  </div>
</div>
<!--=================================<img class="image" src="images/shezan.png" alt="" width="120" height="120">
 
 loading -->
<!--=================================
header -->
<header id="header" class="header-3">
   <!-- mega menu -->
  <div class="menu">
    <!-- menu start -->
      <nav id="menu-1" class="mega-menu">
        <!-- menu list items container -->
        <section class="menu-list-items">
          <div class="container">
              <div class="row">
                <div class="col-lg-12 col-md-12 center-menu">
                  <!-- menu logo -->
                  <ul class="menu-logo">
                    <li class="head-info">
                      <a href="index.php"><img  src="images/shezan.png" alt="logo"> </a>
                    </li>
                  </ul>
                  <!-- menu links -->
                  <ul class="menu-links">
                    <!-- active class -->
                    <li>
                    <a class="active" href="index.php"> Home</a>
                    </li>
                      <li>
                    <a href="reservation.php">Reservation</a>
                  </li>
                 <li>
                    <a href="contact_us.php">Contact us</a>
                  </li>
                  <li>
                 <a href="product_order.php"><span>Menu</span></a>
                    </li>
                      <li>
                 <a href="product_order.php"><span>Order now</span></a>
                    </li>
                       
                     <?php
                    if(isset($_SESSION['user_email']))
                       {  
                       $email=$_SESSION['user_email'];
                       $query= "SELECT name FROM customers WHERE email='$email'";
                       $name=db::getCell($query);
                       ?>
                       
                    <li>
                  <a href="javascript:void(0)"> <?php echo $name;?> <i class="fa fa-angle-down fa-indicator"></i> </a>
                  <!-- drop down multilevel  -->
                  <ul class="drop-down-multilevel">
                    <li><a href="user_panel/index.php" >My Orders</a></li>
                    <li><a href="user_panel/logout.php"> Logout </a></li>
                  </ul>
                </li>
                     <?php
                                    }
                                    
                                         ?>
                                  
                
         </ul>
      </div>
      </div>
    </div>
   </section>
  </nav>
  <!-- menu end -->
 </div>
</header>
<!--=================================
header -->