New Design
Uploaded by
Clear AccountNew Design
Uploaded by
Clear AccountHeader:
<?php
session_start(); // Ensure session is started
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Eloquente Catering Services</title>
<link rel="stylesheet" href="path-to-your-style.css">
<style>
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
}
header {
background-color: #333; /* Dark background */
color: white;
padding: 15px 30px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /*
Optional: Adding shadow for header */
}
/* Logo Section with actual logo image and text */
.logo {
display: flex;
align-items: center;
font-size: 24px;
font-weight: bold;
letter-spacing: 1px;
}
.logo a {
display: flex;
align-items: center;
text-decoration: none;
}
.logo img {
width: 120px; /* Set the size of your logo */
margin-right: 10px; /* Space between the logo and
text */
}
.logo span {
color: white;
font-size: 1.5rem; /* Adjust the font size of the
text */
text-transform: uppercase;
letter-spacing: 1px;
}
/* Navigation Menu */
nav {
display: flex;
align-items: center;
flex-grow: 1;
justify-content: center;
position: relative;
}
/* Remove bullets and align dropdown menus */
nav li {
list-style-type: none; /* Remove default list styling
(circle) */
position: relative;
}
nav a {
color: white;
text-decoration: none;
margin: 0 20px;
padding: 10px 15px;
display: flex;
align-items: center;
transition: background-color 0.3s ease, color 0.3s
ease;
border-radius: 5px;
}
nav a:hover {
color: #FF4500; /* Hover color */
background-color: rgba(255, 69, 0, 0.1);
}
/* Dropdown menu styling */
.header__menu__dropdown {
display: none;
position: absolute;
background-color: #333;
border-radius: 5px;
top: 100%;
left: 0;
width: 200px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 9999; /* Ensure it appears above other
elements */
}
/* Display the dropdown when hovering over a <li> */
nav li:hover .header__menu__dropdown {
display: block;
}
.header__menu__dropdown a {
color: white;
padding: 10px;
text-decoration: none;
text-transform: none;
transition: background-color 0.3s ease;
}
.header__menu__dropdown a:hover {
background-color: rgba(255, 69, 0, 0.2);
}
/* Hamburger menu for mobile */
.menu-toggle {
display: none;
cursor: pointer;
}
.menu-toggle i {
font-size: 24px;
}
/* Responsive design for mobile */
@media (max-width: 768px) {
nav {
flex-direction: column;
align-items: flex-start;
display: none; /* Hide menu by default on mobile
*/
}
nav a {
margin: 10px 0;
width: 100%;
padding: 15px 20px;
text-align: left;
}
.menu-toggle {
display: block;
margin-right: 20px;
cursor: pointer;
color: white;
}
nav.active {
display: flex; /* Show menu when active */
}
.cta {
margin: 10px 0;
}
}
/* Header cart section adjustments */
.header__cart__price {
display: flex;
align-items: center;
font-size: 1.1rem;
margin-left: 20px;
color: white;
}
/* Cart icon before the total price */
.header__cart__price i {
margin-right: 10px; /* Space between icon and price
*/
cursor: pointer;
}
</style>
</head>
<body>
<header>
<!-- Logo Section with actual logo image and text next to
it -->
<div class="logo">
<a href="index.php">
<img src="img/lolol.png" alt="Eloquente Catering
Services"> <!-- Replace with your logo image -->
<span>Eloquente Catering Services</span> <!--
Text next to the logo -->
</a>
</div>
<!-- Hamburger Icon for Mobile -->
<div class="menu-toggle">
<i class="fa fa-bars" aria-hidden="true"></i> <!--
Icon for toggling menu on mobile -->
</div>
<!-- Navigation Menu -->
<nav>
<a href="index.php">Home</a>
<a href="products.php">Order Now</a>
<!-- Reservation Services dropdown -->
<li>
<a href="#">Make A Reservation</a>
<ul class="header__menu__dropdown">
<li><a href="catering.php">Catering
Services</a></li>
<li><a href="event.php">Event
Styling</a></li>
<li><a href="venue.php">Venues</a></li>
</ul>
</li>
<!-- About Us dropdown -->
<li>
<a href="#">About Us</a>
<ul class="header__menu__dropdown">
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</li>
<!-- Conditional display of login, my account, and
cart sections -->
<?php if (isset($_SESSION['ocmsuid']) &&
strlen($_SESSION['ocmsuid']) != 0) { ?>
<!-- Display My Account section when logged in --
>
<li>
<a href="#">My Account</a>
<ul class="header__menu__dropdown">
<li><a
href="profile.php">Profile</a></li>
<li><a href="change-
password.php">Settings</a></li>
<li><a href="my-order.php">My
Orders</a></li>
<li><a href="cart.php">My Cart</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</li>
<!-- Cart Total Display with clickable icon -->
<div class="header__cart__price">
<a href="cart.php"><i class="fa fa-shopping-
bag"></i></a> <!-- Clickable cart icon -->
<span>₱ <?php echo
number_format($_SESSION['tprice'], 2); ?></span> <!-- Cart total
price -->
</div>
<?php } else { ?>
<!-- Display Login section when not logged in -->
<a href="login.php">Login</a>
<?php } ?>
</nav>
<!-- Search Bar Section -->
<div class="search-bar">
<input type="text" placeholder="Search...">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</header>
<script>
// Toggle navigation on mobile
document.querySelector('.menu-
toggle').addEventListener('click', function() {
document.querySelector('nav').classList.toggle('active');
});
</script>
</body>
</html>
Footer
<footer style="background-color: #222; color: #bbb; padding: 40px
20px; font-family: Arial, sans-serif;">
<div style="display: flex; flex-wrap: wrap; justify-content:
space-between; align-items: flex-start; gap: 20px;">
<!-- Contact Information -->
<div style="flex: 1; min-width: 250px; margin-bottom:
20px;">
<h4 style="color: #fff;">Contact Us</h4>
<ul style="list-style-type: none; padding-left: 0;">
<?php
$sql = "SELECT * FROM tblpage WHERE
PageType='contactus'";
$query = $dbh->prepare($sql);
$query->execute();
$results = $query->fetchAll(PDO::FETCH_OBJ);
if ($query->rowCount() > 0) {
foreach ($results as $row) {
?>
<li><strong>Address:</strong> <?php echo
htmlentities($row->PageDescription); ?></li>
<li><strong>Phone:</strong> +<?php echo
htmlentities($row->MobileNumber); ?></li>
<li><strong>Email:</strong> <?php echo
htmlentities($row->Email); ?></li>
<?php } } ?>
</ul>
</div>
<!-- Newsletter Signup -->
<div style="flex: 1; min-width: 250px; margin-bottom:
20px;">
<h4 style="color: #fff;">Join Our Newsletter</h4>
<p>Get the latest updates and offers.</p>
<form name="subscribe" method="post">
<input type="email" name="email"
placeholder="Your Email Address" required="" style="padding:
10px; margin-bottom: 10px; width: 100%; border-radius: 5px;
border: none; color: #333;">
<button type="submit" name="subscribe"
style="padding: 10px; width: 100%; background-color: #8B0000;
color: #fff; border: none; border-radius: 5px; cursor:
pointer;">Subscribe</button>
</form>
</div>
<!-- Social Media Links -->
<div style="flex: 1; min-width: 250px; margin-bottom:
20px;">
<h4 style="color: #fff;">Follow Us</h4>
<p>
<!-- Facebook Link -->
<a
href="https://www.facebook.com/eloquentecateringservices"
style="margin-right: 15px; color: #bbb; font-size: 24px; text-
decoration: none;">
<i class="fab fa-facebook"></i> <!-- Facebook
Icon -->
</a>
<!-- Instagram Link -->
<a
href="https://www.instagram.com/eloquentefoodservices/"
style="color: #bbb; font-size: 24px; text-decoration: none;">
<i class="fab fa-instagram"></i> <!--
Instagram Icon -->
</a>
</p>
</div>
<!-- Quick Navigation Links -->
<div style="flex: 1; min-width: 250px; margin-bottom:
20px;">
<h4 style="color: #fff;">Quick Links</h4>
<ul style="list-style: none; padding: 0;">
<li><a href="about.php" style="color: #bbb; text-
decoration: none;">About Us</a></li>
<li><a href="contact.php" style="color: #bbb;
text-decoration: none;">Contact Us</a></li>
<li><a href="index.php" style="color: #bbb; text-
decoration: none;">Home</a></li>
<?php if (!isset($_SESSION['ocmsuid']) ||
strlen($_SESSION['ocmsuid']) == 0) { ?>
<li><a href="login.php" style="color: #bbb;
text-decoration: none;">Login</a></li>
<?php } ?>
<li><a href="products.php" style="color: #bbb;
text-decoration: none;">Food Packages</a></li>
</ul>
</div>
</div>
<!-- Legal Information -->
<div style="text-align: center; padding: 10px 0; border-top:
1px solid #444;">
<p>© 2024 Eloquente Catering Services | <a
href="privacy-policy.php" style="color: #bbb; text-decoration:
none;">Privacy Policy</a> | <a href="terms.php" style="color:
#bbb; text-decoration: none;">Terms of Service</a></p>
</div>
</footer>
Index
<?php
session_start(); // Ensure session is started
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Eloquente Catering Services</title>
<link rel="stylesheet" href="path-to-your-style.css">
<style>
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
}
header {
background-color: #333; /* Dark background */
color: white;
padding: 15px 30px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /*
Optional: Adding shadow for header */
}
/* Logo Section with actual logo image and text */
.logo {
display: flex;
align-items: center;
font-size: 24px;
font-weight: bold;
letter-spacing: 1px;
}
.logo a {
display: flex;
align-items: center;
text-decoration: none;
}
.logo img {
width: 120px; /* Set the size of your logo */
margin-right: 10px; /* Space between the logo and
text */
}
.logo span {
color: white;
font-size: 1.5rem; /* Adjust the font size of the
text */
text-transform: uppercase;
letter-spacing: 1px;
}
/* Navigation Menu */
nav {
display: flex;
align-items: center;
flex-grow: 1;
justify-content: center;
position: relative;
}
/* Remove bullets and align dropdown menus */
nav li {
list-style-type: none; /* Remove default list styling
(circle) */
position: relative;
}
nav a {
color: white;
text-decoration: none;
margin: 0 20px;
padding: 10px 15px;
display: flex;
align-items: center;
transition: background-color 0.3s ease, color 0.3s
ease;
border-radius: 5px;
}
nav a:hover {
color: #FF4500; /* Hover color */
background-color: rgba(255, 69, 0, 0.1);
}
/* Dropdown menu styling */
.header__menu__dropdown {
display: none;
position: absolute;
background-color: #333;
border-radius: 5px;
top: 100%;
left: 0;
width: 200px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
z-index: 9999; /* Ensure it appears above other
elements */
}
/* Display the dropdown when hovering over a <li> */
nav li:hover .header__menu__dropdown {
display: block;
}
.header__menu__dropdown a {
color: white;
padding: 10px;
text-decoration: none;
text-transform: none;
transition: background-color 0.3s ease;
}
.header__menu__dropdown a:hover {
background-color: rgba(255, 69, 0, 0.2);
}
/* Hamburger menu for mobile */
.menu-toggle {
display: none;
cursor: pointer;
}
.menu-toggle i {
font-size: 24px;
}
/* Responsive design for mobile */
@media (max-width: 768px) {
nav {
flex-direction: column;
align-items: flex-start;
display: none; /* Hide menu by default on mobile
*/
}
nav a {
margin: 10px 0;
width: 100%;
padding: 15px 20px;
text-align: left;
}
.menu-toggle {
display: block;
margin-right: 20px;
cursor: pointer;
color: white;
}
nav.active {
display: flex; /* Show menu when active */
}
.cta {
margin: 10px 0;
}
}
/* Header cart section adjustments */
.header__cart__price {
display: flex;
align-items: center;
font-size: 1.1rem;
margin-left: 20px;
color: white;
}
/* Cart icon before the total price */
.header__cart__price i {
margin-right: 10px; /* Space between icon and price
*/
cursor: pointer;
}
</style>
</head>
<body>
<header>
<!-- Logo Section with actual logo image and text next to
it -->
<div class="logo">
<a href="index.php">
<img src="img/lolol.png" alt="Eloquente Catering
Services"> <!-- Replace with your logo image -->
<span>Eloquente Catering Services</span> <!--
Text next to the logo -->
</a>
</div>
<!-- Hamburger Icon for Mobile -->
<div class="menu-toggle">
<i class="fa fa-bars" aria-hidden="true"></i> <!--
Icon for toggling menu on mobile -->
</div>
<!-- Navigation Menu -->
<nav>
<a href="index.php">Home</a>
<a href="products.php">Order Now</a>
<!-- Reservation Services dropdown -->
<li>
<a href="#">Make A Reservation</a>
<ul class="header__menu__dropdown">
<li><a href="catering.php">Catering
Services</a></li>
<li><a href="event.php">Event
Styling</a></li>
<li><a href="venue.php">Venues</a></li>
</ul>
</li>
<!-- About Us dropdown -->
<li>
<a href="#">About Us</a>
<ul class="header__menu__dropdown">
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</li>
<!-- Conditional display of login, my account, and
cart sections -->
<?php if (isset($_SESSION['ocmsuid']) &&
strlen($_SESSION['ocmsuid']) != 0) { ?>
<!-- Display My Account section when logged in --
>
<li>
<a href="#">My Account</a>
<ul class="header__menu__dropdown">
<li><a
href="profile.php">Profile</a></li>
<li><a href="change-
password.php">Settings</a></li>
<li><a href="my-order.php">My
Orders</a></li>
<li><a href="cart.php">My Cart</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</li>
<!-- Cart Total Display with clickable icon -->
<div class="header__cart__price">
<a href="cart.php"><i class="fa fa-shopping-
bag"></i></a> <!-- Clickable cart icon -->
<span>₱ <?php echo
number_format($_SESSION['tprice'], 2); ?></span> <!-- Cart total
price -->
</div>
<?php } else { ?>
<!-- Display Login section when not logged in -->
<a href="login.php">Login</a>
<?php } ?>
</nav>
<!-- Search Bar Section -->
<div class="search-bar">
<input type="text" placeholder="Search...">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</header>
<script>
// Toggle navigation on mobile
document.querySelector('.menu-
toggle').addEventListener('click', function() {
document.querySelector('nav').classList.toggle('active');
});
</script>
</body>
</html>
Sign up
<?php
session_start();
error_reporting(0);
include('includes/dbconnection.php');
if(isset($_POST['submit']))
{
$fname = $_POST['fname'];
$mobno = $_POST['mobno'];
$email = $_POST['email'];
$password = md5($_POST['password']);
// New address fields for Philippines
$barangay = $_POST['barangay'];
$cityMunicipality = $_POST['cityMunicipality'];
$province = $_POST['province'];
$zipcode = $_POST['zipcode'];
// Check if email already exists
$ret = "SELECT Email FROM tbluser WHERE Email=:email";
$query = $dbh->prepare($ret);
$query->bindParam(':email', $email, PDO::PARAM_STR);
$query->execute();
$results = $query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() == 0)
{
// Insert the user into the database with address details
$sql = "INSERT INTO tbluser(FullName, MobileNumber,
Email, Password, Barangay, CityMunicipality, Province, ZipCode)
VALUES(:fname, :mobno, :email, :password, :barangay, :cityMunicip
ality, :province, :zipcode)";
$query = $dbh->prepare($sql);
$query->bindParam(':fname', $fname, PDO::PARAM_STR);
$query->bindParam(':email', $email, PDO::PARAM_STR);
$query->bindParam(':mobno', $mobno, PDO::PARAM_INT);
$query->bindParam(':password', $password,
PDO::PARAM_STR);
$query->bindParam(':barangay', $barangay,
PDO::PARAM_STR);
$query->bindParam(':cityMunicipality', $cityMunicipality,
PDO::PARAM_STR);
$query->bindParam(':province', $province,
PDO::PARAM_STR);
$query->bindParam(':zipcode', $zipcode, PDO::PARAM_STR);
$query->execute();
$lastInsertId = $dbh->lastInsertId();
if($lastInsertId)
{
echo "<script>alert('You have signed up
successfully');</script>";
echo "<script>window.location.href
='login.php'</script>";
}
else
{
echo "<script>alert('Something went wrong. Please try
again');</script>";
echo "<script>window.location.href
='signup.php'</script>";
}
}
else
{
echo "<script>alert('Email-id already exists. Please try
again');</script>";
echo "<script>window.location.href
='signup.php'</script>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Online Catering Management System | Sign Up</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?
family=Cairo:wght@200;300;400;600;900&display=swap"
rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css"
type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css"
type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css"
type="text/css">
<link rel="stylesheet" href="css/nice-select.css"
type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css"
type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css"
type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css"
type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script type="text/javascript">
function checkpass() {
if (document.signup.password.value !=
document.signup.repeatpassword.value) {
alert('Password and Repeat Password field do not
match');
document.signup.repeatpassword.focus();
return false;
}
return true;
}
</script>
<style>
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
justify-content: space-between;
}
header,
footer {
width: 100%;
background-color: #fff;
padding: 10px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}
.signup-container {
background-color: #fff;
padding: 40px 20px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
text-align: center;
z-index: 2;
}
.signup-container h2 {
margin-bottom: 20px;
color: #333;
}
.signup-container input[type="text"],
.signup-container input[type="email"],
.signup-container input[type="password"] {
width: 100%;
padding: 15px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
font-size: 16px;
}
.signup-container button {
width: 100%;
padding: 15px;
margin-top: 10px;
border: none;
border-radius: 5px;
background-color: #8B0000;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.signup-container button:hover {
background-color: #600000;
}
.signup-container p {
margin-top: 20px;
color: #666;
}
.signup-container a {
color: #8B0000;
text-decoration: none;
}
.signup-container a:hover {
text-decoration: underline;
}
footer {
position: relative;
margin-top: auto;
padding: 20px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
footer p {
margin: 0;
color: #666;
}
</style>
</head>
<body>
<!-- Header Begin -->
<?php include_once('includes/header.php');?>
<!-- Content Section Begin -->
<div class="content">
<div class="signup-container">
<h2>Sign Up</h2>
<form name="signup" action="" method="post"
onsubmit="return checkpass();">
<input type="text" name="fname" placeholder="Full
Name" required="true">
<input type="email" name="email"
placeholder="Your Email" required="true">
<input type="text" name="mobno"
placeholder="Mobile Number" required="true" maxlength="10">
<input type="password" name="password"
placeholder="Password" required="true">
<input type="password" name="repeatpassword"
placeholder="Repeat Password" required="true">
<!-- Address Details (Philippine-specific) -->
<h3>Address Details</h3>
<input type="text" name="barangay"
placeholder="Barangay" required="true">
<input type="text" name="cityMunicipality"
placeholder="City/Municipality" required="true">
<input type="text" name="province"
placeholder="Province" required="true">
<input type="text" name="zipcode"
placeholder="ZIP Code" required="true">
<button type="submit" name="submit">Sign
Up</button>
</form>
<p>Already have an account? <a href="login.php">Login
Now!</a></p>
</div>
</div>
<!-- Content Section End -->
<!-- Footer Begin -->
<?php include_once('includes/footer.php');?>
<!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Login
<?php
session_start();
error_reporting(0);
include('includes/dbconnection.php');
if(isset($_POST['login']))
{
$email = $_POST['email'];
$password = md5($_POST['password']);
$sql = "SELECT ID FROM tbluser WHERE Email=:email and
Password=:password";
$query = $dbh->prepare($sql);
$query->bindParam(':email', $email, PDO::PARAM_STR);
$query->bindParam(':password', $password, PDO::PARAM_STR);
$query->execute();
$results = $query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0)
{
foreach ($results as $result) {
$_SESSION['ocmsuid'] = $result->ID;
}
$_SESSION['login'] = $_POST['email'];
echo "<script type='text/javascript'> document.location
='index.php'; </script>";
} else {
echo "<script>alert('Invalid Details');</script>";
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Online Catering Management System | Login</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?
family=Cairo:wght@200;300;400;600;900&display=swap"
rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css"
type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css"
type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css"
type="text/css">
<link rel="stylesheet" href="css/nice-select.css"
type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css"
type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css"
type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css"
type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<style>
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
height: 100vh; /* Make the body take full height */
margin: 0;
justify-content: space-between; /* Space out the
header, content, and footer */
}
/* Make sure the header and footer take full width */
header, footer {
width: 100%;
background-color: #fff;
padding: 10px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Center the content inside the page */
.content {
flex: 1; /* This will make the content section take
available space */
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px; /* Add space between the header and
login form */
margin-bottom: 50px; /* Add space between the login
form and footer */
}
.login-container {
background-color: #fff;
padding: 40px 20px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
text-align: center;
z-index: 2;
}
.login-container h2 {
margin-bottom: 20px;
color: #333;
}
.login-container input[type="text"],
.login-container input[type="password"] {
width: 100%;
padding: 15px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
font-size: 16px;
}
.login-container button {
width: 100%;
padding: 15px;
margin-top: 10px;
border: none;
border-radius: 5px;
background-color: #8B0000;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.login-container button:hover {
background-color: #600000;
}
.login-container p {
margin-top: 20px;
color: #666;
}
.login-container a {
color: #8B0000;
text-decoration: none;
}
.login-container a:hover {
text-decoration: underline;
}
/* Footer Stretching */
footer {
position: relative;
margin-top: auto; /* Ensures footer is pushed to the
bottom */
padding: 20px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
footer p {
margin: 0;
color: #666;
}
</style>
</head>
<body>
<!-- Header Begin -->
<?php include_once('includes/header.php');?>
<!-- Content Section Begin -->
<div class="content">
<div class="login-container">
<h2>Login</h2>
<form action="" method="post">
<input type="text" name="email"
placeholder="Enter Email" required="true">
<input type="password" name="password"
placeholder="Password" required="true">
<button type="submit" name="login">Login</button>
</form>
<p>Don't have an account? <a href="signup.php">Sign
Up Now!!</a></p>
<p><a href="forgot-password.php">Forgot password?
</a></p>
</div>
</div>
<!-- Content Section End -->
<!-- Footer Begin -->
<?php include_once('includes/footer.php');?>
<!-- Footer End -->
<!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Products
<?php
session_start();
error_reporting(0);
include('includes/dbconnection.php');
// Ensure cart is initialized if not already set
if (!isset($_SESSION["cart_item"])) {
$_SESSION["cart_item"] = array(); // Initialize cart if it
doesn't exist
}
// Cart functionality
if(!empty($_GET["action"])) {
switch($_GET["action"]) {
case "add":
if(!empty($_POST["quantity"])) {
$pid = $_GET["pid"];
$sql = $dbh->prepare("SELECT * FROM tblfood WHERE
ID=:pid");
$sql->execute(array(':pid' => $pid));
while($productByCode = $sql-
>fetch(PDO::FETCH_ASSOC)) {
$itemArray = array($productByCode["ID"] =>
array(
'name' => $productByCode["PackageName"],
'code' => $productByCode["ID"],
'quantity' => $_POST["quantity"],
'price' => $productByCode["Price"],
'image' => $productByCode["ItemImage"]
));
// Add to cart or update quantity if item
already exists
if(!empty($_SESSION["cart_item"])) {
if(in_array($productByCode["ID"],
array_keys($_SESSION["cart_item"]))) {
foreach($_SESSION["cart_item"] as $k
=> $v) {
if($productByCode["ID"] == $k) {
$_SESSION["cart_item"][$k]
["quantity"] += $_POST["quantity"];
}
}
} else {
$_SESSION["cart_item"] =
array_merge($_SESSION["cart_item"], $itemArray);
}
} else {
$_SESSION["cart_item"] = $itemArray;
}
}
}
header('location:cart.php');
break;
case "remove":
if(!empty($_SESSION["cart_item"])) {
foreach($_SESSION["cart_item"] as $k => $v) {
if($_GET["code"] == $k)
unset($_SESSION["cart_item"][$k]);
if(empty($_SESSION["cart_item"]))
unset($_SESSION["cart_item"]);
}
}
header('location:cart.php');
break;
case "empty":
unset($_SESSION["cart_item"]);
header('location:cart.php');
break;
}
}
?>
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Eloquente Catering Services</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?
family=Cairo:wght@200;300;400;600;900&display=swap"
rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css"
type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css"
type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css"
type="text/css">
<link rel="stylesheet" href="css/nice-select.css"
type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css"
type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css"
type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css"
type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<style>
/* Increased space between breadcrumb and product image
slider */
.product__discount__slider {
margin-top: 40px; /* Adjust as needed for more space
*/
}
/* Styling for the image slider */
.product__discount__slider .product__discount__item {
position: relative;
}
.product__discount__item img {
max-width: 90%; /* Adjust size */
height: auto;
margin: 0 auto;
display: block;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
/* No clickable functionality in the image slider */
.product__discount__item a {
pointer-events: none; /* Disable links for image
slider */
}
/* For View More text when hovering over the product */
.product__item__pic-wrapper {
position: relative;
}
.view-more {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px 20px;
font-size: 14px;
display: none;
text-align: center;
}
.product__item__pic-wrapper:hover .view-more {
display: block;
}
/* Background image in breadcrumb section */
.breadcrumb-section {
background-image: url('img/toyo.jpg');
background-size: cover;
background-position: center;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
padding-top: 50px; /* Added padding to create a gap
*/
padding-bottom: 30px; /* Optional: Add space below */
}
.breadcrumb__text h2 {
color: white;
font-size: 36px;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
margin: 0; /* Ensure there is no margin */
}
/* Image Link for Products */
.product__item__pic a {
display: block;
}
/* Category Header in the center, span full width */
.category-header {
background-color: darkred;
padding: 20px; /* Increased padding for more height */
text-align: center;
word-spacing 10px; /*wordspacing
margin-bottom: 30px; /* Increased bottom margin */
font-size: 18px; /* Adjust font size */
font-weight: bold;
width: 100%; /* Ensures it takes the full width */
box-sizing: border-box; /* Ensures padding doesn't affect
width */
}
.category-header a {
color: white;
font-size: 18px;
margin: 0 30px; /* Added space between links */
text-decoration: none;
text-transform: uppercase;
}
.category-header a:hover {
text-decoration: underline;
.category-header a {
color: white;
font-size: 18px;
margin: 0 30px; /* Added space between links */
text-decoration: none;
text-transform: uppercase;
}
.category-header a:hover {
text-decoration: underline;
}
/* Add padding to product section */
.product__discount__title {
text-align: center;
margin-bottom: 30px;
}
/* Increased space between product slider and breadcrumb
*/
.product__discount__slider {
margin-bottom: 40px; /* Adjust as needed for more
space */
}
/* Smaller Product Images */
.product__item__pic img {
width: 50%; /* Adjust the size for product images */
height: auto;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Humberger Begin -->
<?php include_once('includes/header.php'); ?>
<!-- Header Section End -->
<!-- Breadcrumb Section Begin -->
<section class="breadcrumb-section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="breadcrumb__text">
<h2>Online Food Shop</h2>
</div>
</div>
</div>
</div>
</section>
<!-- Breadcrumb Section End -->
<!-- Product Section Begin -->
<div class="row">
<div class="product__discount__slider owl-carousel">
<?php
// Display a random selection of 6 products
$sql = "SELECT * from tblfood order by rand()
limit 6";
$query = $dbh->prepare($sql);
$query->execute();
$results = $query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0) {
foreach($results as $row) {
?>
<div class="col-lg-4">
<div class="product__discount__item">
<div class="product__item__pic">
<img src="admin/itemimages/<?php echo
$row->ItemImage; ?>" alt="<?php echo $row->PackageName; ?>">
</div>
<div
class="product__discount__item__text">
<span><?php echo $row->PackageName; ?
></span>
<h5><a href="food-details.php?pid=<?
php echo $row->ID; ?>"><?php echo $row->Category; ?></a></h5>
<div class="product__item__price">₱<?
php echo $row->Price; ?></div>
</div>
</div>
</div>
<?php
}
}
?>
</div>
</div>
<!-- Pack Meal and Party Trays -->
<div class="filter__item">
<div class="row">
<div class="category-header">
<a href="categorywise-food.php?catid=Party
Selection">Party Trays Selection</a>
<a href="categorywise-food.php?catid=Packed
Meal">Packed Meal</a>
<a href="categorywise-food.php?
catid=Dessert">Dessert</a>
<a href="categorywise-food.php?
catid=Drinks">Drinks</a>
</div>
</div>
</div>
<div class="row">
<?php
$pageno = isset($_GET['pageno']) ? $_GET['pageno'] :
1;
$no_of_records_per_page = 6;
$offset = ($pageno - 1) * $no_of_records_per_page;
$ret = "SELECT ID FROM tblfood";
$query1 = $dbh->prepare($ret);
$query1->execute();
$results1 = $query1->fetchAll(PDO::FETCH_OBJ);
$total_rows = $query1->rowCount();
$total_pages = ceil($total_rows /
$no_of_records_per_page);
$sql = "SELECT * from tblfood LIMIT $offset,
$no_of_records_per_page";
$query = $dbh->prepare($sql);
$query->execute();
$results = $query->fetchAll(PDO::FETCH_OBJ);
if($query->rowCount() > 0) {
foreach($results as $row) {
?>
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="product__item">
<form method="post" action="products.php?
action=add&pid=<?php echo $row->ID; ?>">
<div class="product__item__pic-wrapper">
<a href="food-details.php?pid=<?php
echo $row->ID; ?>" class="product__item__pic">
<img style="border-radius: 15px"
src="admin/itemimages/<?php echo $row->ItemImage; ?>" alt="<?php
echo $row->PackageName; ?>">
</a>
<div class="view-more">
<a href="food-details.php?pid=<?
php echo $row->ID; ?>">View More</a>
</div>
</div>
<div class="product__item__text">
<h6><a href="food-details.php?pid=<?
php echo $row->ID; ?>"><?php echo $row->PackageName; ?></a></h6>
<h5>₱<?php echo $row->Price; ?></h5>
</div>
</form>
</div>
</div>
<?php
}
}
?>
</div>
<!-- Footer Section Begin -->
<?php include_once('includes/footer.php'); ?>
<!-- Footer Section End -->
<!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
About
<?php
include('includes/dbconnection.php');
session_start();
error_reporting(0);
?>
<!DOCTYPE html>
<html lang="zxx">
<head>
<title>Eloquente Catering Services - About Us</title>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?
family=Cairo:wght@200;300;400;600;900&display=swap"
rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css"
type="text/css">
<link rel="stylesheet" href="css/font-awesome.min.css"
type="text/css">
<link rel="stylesheet" href="css/elegant-icons.css"
type="text/css">
<link rel="stylesheet" href="css/nice-select.css"
type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css"
type="text/css">
<link rel="stylesheet" href="css/owl.carousel.min.css"
type="text/css">
<link rel="stylesheet" href="css/slicknav.min.css"
type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<!-- Custom Styles for About Us Page -->
<style>
/* Hero Section */
.breadcrumb-section {
background: url('img/toyo.jpg') no-repeat center
center;
background-size: cover;
padding: 100px 0;
}
.breadcrumb__text h2 {
font-family: 'Cairo', sans-serif;
font-size: 50px;
color: #fff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
}
/* About Us Section */
.about-us-section {
padding: 80px 0;
background-color: #f8f8f8;
}
.about-us-section .section-title {
text-align: center;
margin-bottom: 30px;
}
.about-us-section .section-title h2 {
font-family: 'Cairo', sans-serif;
font-size: 36px;
color: #333;
font-weight: 600;
}
.about-us-section p {
font-family: 'Cairo', sans-serif;
font-size: 18px;
color: #555;
line-height: 1.8;
max-width: 800px;
margin: 0 auto 30px;
}
/* Two-column layout for About Us Content */
.about-content {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
}
.about-content .text {
flex: 1;
padding-right: 30px;
}
.about-content .text h3 {
font-family: 'Cairo', sans-serif;
font-size: 28px;
color: #333;
font-weight: 700;
margin-bottom: 20px;
}
.about-content .image {
flex: 1;
text-align: center;
}
.about-content .image img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.about-content .image img:hover {
transform: scale(1.05);
}
/* Mission and Values Section */
.mission-section {
background-color: #ffffff;
padding: 50px 0;
}
.mission-section h3 {
font-family: 'Cairo', sans-serif;
font-size: 28px;
color: #333;
font-weight: 600;
text-align: center;
margin-bottom: 30px;
}
.mission-section ul {
list-style: none;
padding: 0;
text-align: center;
}
.mission-section ul li {
font-family: 'Cairo', sans-serif;
font-size: 18px;
color: #555;
margin: 10px 0;
}
/* Header Dropdown Styles */
.nav-item.dropdown .dropdown-menu {
min-width: 200px;
}
</style>
</head>
<body>
<!-- Include the Header -->
<?php include('includes/header.php'); ?>
<!-- Page Preloder -->
<div id="preloder">
<div class="loader"></div>
</div>
<!-- Breadcrumb Section Begin -->
<section class="breadcrumb-section">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div class="breadcrumb__text">
<h2>About Us</h2>
</div>
</div>
</div>
</div>
</section>
<!-- Breadcrumb Section End -->
<!-- About Us Section Begin -->
<div class="about-us-section">
<div class="container">
<?php
$sql = "SELECT * from tblpage where
PageType='aboutus'";
$query = $dbh->prepare($sql);
$query->execute();
$results = $query->fetchAll(PDO::FETCH_OBJ);
$cnt = 1;
if ($query->rowCount() > 0) {
foreach ($results as $row) { ?>
<div class="section-title">
<h2><?php echo $row->PageTitle; ?></h2>
</div>
<p><?php echo $row->PageDescription; ?></p>
</div>
<?php
$cnt++;
}} ?>
</div>
<!-- About Us Content -->
<div class="container mt-5">
<div class="about-content">
<div class="text">
<h3>Our Story</h3>
<p>At Eloquente Catering Services, we believe
in making your events special with delicious food, exceptional
service, and a memorable experience. Our chefs and team are
dedicated to crafting unique menus tailored to your event, making
every occasion one to remember.</p>
</div>
<div class="image">
<img src="img/toyo.jpg" alt="Catering Image">
</div>
</div>
</div>
</div>
<!-- About Us Section End -->
<!-- Mission Statement Section Begin -->
<div class="mission-section">
<div class="container">
<h3>Our Mission</h3>
<ul>
<li>Provide high-quality catering services for
all types of events.</li>
<li>Offer personalized menus that suit every
client’s unique taste.</li>
<li>Deliver exceptional service that ensures an
unforgettable experience.</li>
</ul>
</div>
</div>
<!-- Mission Section End -->
<!-- Include the Footer -->
<?php include('includes/footer.php'); ?>
<!-- Js Plugins -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slicknav.js"></script>
<script src="js/mixitup.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You might also like
- Annastasya (210607110034) - Tugas 9 Praktikum Perpustakaan DigitalNo ratings yetAnnastasya (210607110034) - Tugas 9 Praktikum Perpustakaan Digital13 pages
- WD Step1 Solution-Document Docx Lyst9135No ratings yetWD Step1 Solution-Document Docx Lyst913518 pages
- Basic HTML Layout With Navigation and LogoNo ratings yetBasic HTML Layout With Navigation and Logo3 pages
- Database Security and Privacy UNIT - IV - PPTNo ratings yetDatabase Security and Privacy UNIT - IV - PPT84 pages
- Responsive Navigation Menu Using Only CSSNo ratings yetResponsive Navigation Menu Using Only CSS12 pages
- Oracle Practical Program - 240625 - 100611-1No ratings yetOracle Practical Program - 240625 - 100611-111 pages
- Transfer Data From Tm1 To Cognos Controller With Tm1 ProcessNo ratings yetTransfer Data From Tm1 To Cognos Controller With Tm1 Process12 pages
- Physical Database Design: University of California, Berkeley School of InformationNo ratings yetPhysical Database Design: University of California, Berkeley School of Information71 pages
- Spring Hibernate Integration Using HibernateDaoSupportNo ratings yetSpring Hibernate Integration Using HibernateDaoSupport11 pages
- 2oracle Database SQL (1Z0-071) - Mini - DBExamNo ratings yet2oracle Database SQL (1Z0-071) - Mini - DBExam21 pages
- 13 SQL Statements For 90% of Your Data Science Tasks - by Youssef Hosni - Level Up CodingNo ratings yet13 SQL Statements For 90% of Your Data Science Tasks - by Youssef Hosni - Level Up Coding26 pages
- Hotel-Management-Report WORD - Aviral-1No ratings yetHotel-Management-Report WORD - Aviral-129 pages
- React Portfolio App Development: Increase your online presence and create your personal brandFrom EverandReact Portfolio App Development: Increase your online presence and create your personal brandNo ratings yet
- Angular Shopping Store: From Scratch to Successful PaymentFrom EverandAngular Shopping Store: From Scratch to Successful PaymentNo ratings yet
