0% found this document useful (0 votes)
31 views108 pages

MCA VI Project Report 2023

Uploaded by

Sneha Likhar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
31 views108 pages

MCA VI Project Report 2023

Uploaded by

Sneha Likhar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 108

International Institute of Professional Studies

Devi Ahilya Vishwavidyalaya


Takshila Campus, Indore (MP) 2023-24

Project Report on Essence

Submitted in VI semester of MCA

Guided by: Submitted by:

Mr. Rajesh Verma Sir Kratik Mandloi

(IC-2K21-39)

Lavanya Hardas

(IC-2K21-43)
Page | 1
ESSENCE

Dissertation Submitted in Partial fulfillment of the


Requirement for the Award of the Degree of

Bachelor of Computer Applications


Semester VI

Session Jan-May, 2024

Under the guidance of Submitted By


Mr. Rajesh Verma Kratik Mandloi IC-2K21-39
Lavanya Hardas IC-2K21-43

International Institute of Professional Studies


Devi Ahilya Vishwavidyalaya, Indore, M.P.
2023

Page | 2
DECLARATION

I hereby declare that the project entitled Restaurant Web Design which is submitted by
me for the partial fulfillment of requirement for the award of Masters of Computer
Application (5 years) semester VI to International Institute of Professional Studies,
Devi Ahilya Vishwavidyalaya, Indore, is authentic record of my own work carried out
under the supervision of Mr.Rajesh Verma, Project mentor, IIPS-DAVV, Indore.
The matter embodied in this dissertation work is authenticated and is genuinely done by
me and has not been submitted to this university or any other university or Institute. Thus
I solely own the responsibility for the originality of the entire content.
I also declared that the content of project report does not violate the copyright,
Trademarks, infringes on the patent, statutory right or propriety right of others.

Signature of Student:

Date:

Place:

Page | 3
CERTIFICATE FROM GUIDE

It is to certify that dissertation ―Essence‖, submitted by Mr. Kratik Mandloi and Mr.
Lavanya Hardas to the International Institute of Professional Studies, DAVV, Indore has
been completed under my supervision and the work is carried out and presented in a
manner required for its acceptance in partial fulfillment for the award of the degree of
―Masters of Computer Applications (5 Years) Semester VI ‖.

Project Guide
Signature:

Name:
Date:

Page | 4
CERTIFICATE

It is to certify that we have examined the dissertation on ―Essence‖, submitted by Mr.


Kratik Mandloi and Mr. Lavanya Hardas to the International Institute of Professional
Studies, DAVV, Indore and hereby accord our approval of it as a study carried out and
presented in a manner required for its acceptance in partial fulfillment for the award of
the degree of ―Masters of Computer Application (5 Years) Semester VI‖.

Internal Examiner External Examiner


Signature: Signature:
Name : Name :
Date : Date :

Page | 5
Format of Report

Title Page
Declaration
Certificate from Guide
Certificate from Company
Approval Certificate for Examiner
Acknowledgement
Table of Contents (with Page numbers)
Abstract <Highlights of complete Project>
Executive Summary
Foreword or Preface

1. Introduction
2. Analysis
3. Project Planning
4. System Design
5. Software Development Methodology
6. System Implementation
7. System Testing
8. Output Forms & Reports
9. Limitations
10. Conclusion

Bibliography
Appendices

Page | 6
Acknowledgment

The completion of this project, marks a significant milestone in our academic journey at
DAVV University. As we present this endeavor, we wish to express our heartfelt
gratitude to all those who have contributed to its success.

First and foremost, we extend our deepest appreciation to Mr.Rajesh Verma, our
esteemed project mentor. Mr. Rajesh Verma‘s guidance, expertise, and unwavering
support have been instrumental throughout the entire duration of this project. His
valuable insights and direction have not only enriched our understanding but also inspired
us to strive for excellence. He guided and helped throughout the entire course of time.
And whenever there was any ambiguity of idea or thought, she patiently dealt in depth
and provided clarification and direction to proceed. I am truly grateful for his wisdom,
and we thank his with all respect. Mr Rajesh Verma Sir‘s wisdom and insight were
instrumental in navigating challenges and uncertainties, for which we are truly grateful.

We are also indebted to Prof. B.K. Tripathi, Director of IIPS, DAVV, Dr. Jugendra
Dongre , program in charge and Dr. Yasmin Shaikh Batch mentor who generously
extended their assistance whenever solicited, demonstrating genuine interest and
cooperation. They graciously extended their assistance whenever called upon, displaying
genuine interest and cooperation.

Furthermore, WE are grateful to our colleagues and classmates for their consistent
feedback, commendations, and constructive critiques, all of which enriched the project
significantly. Lastly, We express heartfelt thanks to our parents and friends whose
unwavering support has been a pillar of strength during challenging times.

Page | 7
We acknowledge the collective efforts of all individuals involved, and any oversights in
acknowledgment are sincerely regretted.

With deepest appreciation,

Kratik Mandloi (IC-2k21-39)

Lavanya Hardas (IC-2k21-43)

Page | 8
TABLE OF CONTENTS

Contents Page

Abstract 8

Executive Summary 9

Foreword or Preface 10

1. Introduction 11

2. Analysis 14

3. Project Planning 17

4. System Design 20

5. Software Development Methodology 31

6. System Implementation 33

7. System Testing 34

Future Prospective 35

Limitations 36

Conclusions 37

Bibliography 38

Page | 9
Abstract

Welcome to Essence: Your Premier Destination for Exceptional Dining Experiences

At Essence, we take pride in offering more than just a meal – we provide a seamless
blend of exceptional cuisine, top-notch service, and inviting ambiance to ensure that
every visit exceeds your expectations. Our website is designed with your convenience in
mind, offering user-friendly features to enhance your dining experience from start to
finish. Booking a table at Essence is quick and effortless with our easy-to-use online
reservation system. Simply select your desired date, time, and party size, and let us take
care of the rest. Whether you're planning a romantic dinner for two or a gathering with
friends and family, securing your spot at our restaurant has never been easier.

Once you've booked your table, our website also allows you to pre-order your meal,
ensuring that your dining experience is perfectly tailored to your preferences. Whether
you have dietary restrictions or simply want to skip the wait, our pre-ordering service
allows you to select your dishes in advance, so they're ready and waiting for you upon
arrival. But it's not just our online services that set us apart – it's also the inviting
ambiance of our restaurant. From the moment you step through our doors, you'll be
greeted by a warm and welcoming atmosphere, where every detail is thoughtfully curated
to enhance your dining pleasure. Whether you're dining in our cozy interior or enjoying
the fresh air on our outdoor patio, you'll find yourself surrounded by elegance and charm
at every turn.

Join us at Essence and experience the perfect fusion of convenience, quality, and
ambiance. With easy online booking, seamless pre-ordering options, and a welcoming
atmosphere, we're committed to making every visit to our restaurant an unforgettable
one.
Page | 10
Executive Summary

Essence: Redefining Fine Dining

Prepare to embark on a culinary journey like no other as you step into the world of
Essence. We pride ourselves on redefining the standards of fine dining, where every
element, from the cuisine to the ambiance, is meticulously crafted to offer an
unforgettable experience.

Our website serves as your portal to this world of culinary excellence, offering seamless
features designed to enhance your convenience and satisfaction. Booking a table at
Essence is a breeze with our intuitive online reservation system. Whether you're planning
a romantic evening for two or a gathering of friends and family, securing your spot at our
restaurant is just a few clicks away. Additionally, our pre-ordering service allows you to
tailor your dining experience to your preferences, ensuring that every dish is precisely to
your liking.

As you step through the doors of Essence, you'll be enveloped in an ambiance of warmth,
elegance, and sophistication. Our interior exudes timeless charm, with plush furnishings,
soft lighting, and tasteful decor creating the perfect setting for a memorable dining
experience. If you prefer al fresco dining, our inviting outdoor patio provides a tranquil
escape where you can enjoy your meal amidst the beauty of nature.But it's not just the
ambiance that sets Essence apart—it's also our unwavering commitment to culinary
excellence. Our team of talented chefs combines the freshest ingredients with innovative
techniques to create dishes that are as visually stunning as they are delicious. Each plate
that leaves our kitchen is a work of art, meticulously plated to delight your senses and
ignite your palate.

Page | 11
Page | 12
Foreword and Preface

Foreword:

Welcome to Essence, where culinary artistry and hospitality converge to create


unforgettable dining experiences. As the proud stewards of this establishment, we are
honored to invite you on a journey of taste and refinement, where every dish tells a story
and every visit is an opportunity to indulge in the finer pleasures of life. At Essence, we
believe that dining is more than just nourishment—it is an expression of creativity, a
celebration of culture, and a testament to the joy of sharing good food with good
company. We are delighted to open our doors to you and to share our passion for culinary
excellence. Join us as we embark on this gastronomic adventure together.

Preface:

In the pages of this website, you will discover the essence of our restaurant—an oasis of
elegance and sophistication where every detail is thoughtfully curated to ensure a truly
exceptional dining experience. From our carefully crafted menu to our warm and inviting
ambiance, we have spared no effort in creating a space that reflects our commitment to
excellence. As you navigate through our website, we hope you will find everything you
need to plan your visit, from easy table bookings to a sneak peek at our tantalizing
offerings. Whether you're a seasoned food enthusiast or simply looking for a memorable
meal, we invite you to join us at Essence and experience the perfect fusion of
convenience, quality, and ambiance. Welcome to a world of culinary brilliance.

Page | 13
Chapter 1
Introduction

1.1 About the project:

The primary challenge facing Essence restaurant lies in its limited online presence and
inefficient operational processes. With minimal visibility in the digital realm, the restaurant
struggles to attract and engage potential customers effectively, leading to missed
opportunities for growth and revenue generation. Moreover, the reliance on manual
reservation methods and inefficient order management processes results in operational
inefficiencies, contributing to delays, errors, and diminished customer satisfaction. Without
personalized insights into customer preferences and behaviors, Essence is unable to tailor its
offerings and services to meet individual needs effectively. Additionally, the restaurant's
physical location may not be easily visible or accessible to potential customers, further
exacerbating the issue of low foot traffic and awareness. To address these challenges,
Essence must prioritize enhancing its online presence, implementing streamlined reservation
and order management systems, leveraging customer data for personalization, and improving
visibility to attract and retain customers effectively in a competitive market landscape.

1.2 Problem definition:

The primary challenge facing Essence restaurant lies in its limited online presence and
inefficient operational processes. With minimal visibility in the digital realm, the restaurant
struggles to attract and engage potential customers effectively, leading to missed
opportunities for growth and revenue generation. Moreover, the reliance on manual
reservation methods and inefficient order management processes results in operational
inefficiencies, contributing to delays, errors, and diminished customer satisfaction. Without
personalized insights into customer preferences and behaviors, Essence is unable to tailor its
offerings and services to meet individual needs effectively.. To address these challenges,
Essence must prioritize enhancing its online presence, implementing streamlined reservation
and order management systems, leveraging customer data for personalization, and improving
visibility to attract and retain customers effectively in a competitive market landscape.

Page | 14
1.3 Aim:

The aim of the project is to revamp and optimize the digital presence and operational

processes of Essence restaurant, ultimately enhancing its ability to attract and retain

customers, maximize operational efficiency, and drive profitability. By developing a

comprehensive website with user-friendly features such as online reservation and pre-

ordering services, the project seeks to improve the overall customer experience and

streamline restaurant operations. Additionally, the project aims to leverage digital marketing

strategies to increase the restaurant's online visibility and reach new audiences. Through these

initiatives, the project aims to position Essence as a premier dining destination known for its

exceptional cuisine, inviting ambiance, and seamless customer service. Ultimately, the

project aims to drive growth and sustainability for Essence restaurant in a competitive market

landscape.

1.4 Objectives:

The objectives of our project include:

 Implement online reservation functionality to streamline the booking process.


 Integrate pre-ordering services to allow customers to customize their dining
experience.
 Optimize operational processes to improve efficiency and customer satisfaction.
 Enhance digital marketing efforts to increase online visibility and attract new
customers.
 Leverage customer data for personalization and targeted marketing strategies.
 Improve the overall customer experience to drive repeat business and loyalty.

1.5 Benefits:

The benefits of our dining platform include:

Page | 15
 Enhanced Customer Experience: The user-friendly website, streamlined reservation

process, and personalized services contribute to an overall improved dining

experience for customers, fostering satisfaction and loyalty.

 Increased Efficiency: Optimized operational processes reduce administrative

workload, minimize errors, and expedite service, allowing staff to focus more on

delivering exceptional service and less on manual tasks.

 Improved Revenue Generation: By attracting new customers through enhanced

online visibility and offering convenient pre-ordering options, the restaurant can

increase its customer base and revenue potential.

 Higher Customer Retention: Personalized marketing strategies and exceptional

dining experiences encourage repeat business and foster long-term relationships with

customers, increasing customer retention rates.

 Competitive Advantage: Essence restaurant can differentiate itself from competitors

by offering innovative digital services, personalized experiences, and exceptional

customer service, positioning itself as a top choice in the market.

 Cost Savings: Streamlined processes and reduced errors result in cost savings for the
restaurant, while targeted marketing efforts ensure optimal allocation of resources for
maximum return on investment.

 Brand Reputation Enhancement: Consistently delivering high-quality dining


experiences and leveraging digital platforms to engage with customers positively
impacts the restaurant's brand reputation, attracting more patrons and solidifying its
position as a premier dining destination.

Page | 16
Page | 17
Chapter 2
Analysis

2.1 Feasibility Analysis

Feasibility analysis is a crucial step in determining the viability of any project. The feasibility
study for this dining platform project is conducted based on the following criteria:

2.1.1 Economic Feasibility:

The economic feasibility of the project is determined by assessing the costs and
benefits associated with the project. The cost of developing the platform includes the
cost of hardware, software, personnel . On the other hand, the benefits of the project
include increased efficiency, improved communication, one-window solution. The
cost-benefit analysis indicates that the project is economically feasible.

Since there is no overhead cost involved for any external hardware device, this system
is economic.

2.1.2 Technical Feasibility:

Technical feasibility assesses whether the current technical resources are sufficient for
the new system. If they are not available, can they be upgraded to provide the level of
technology necessary for the new system? It checks whether the proposed system can
be implemented in the present system without supporting the existing hardware.

Page | 18
The technical feasibility of the project is determined by assessing the technological
requirements and limitations of the platform. The platform requires a reliable and
secure hosting environment and a scalable and modular architecture. The technical
analysis indicates that the project is technically feasible.

2.1.3 Operational Feasibility:

Operational feasibility determines if the human resources are available to operate the
system once it has been installed. The project will require a Mobile or a desktop to
operate. Since it is a website there is no need to install the product. It will require only
an active internet connection. The management will also be convinced that the project
is optimally feasible.

2.2 System Analysis:

The system analysis phase involves analyzing the current system, identifying the user
requirements, and developing a functional specification for the new system. The analysis
includes a detailed review of the existing processes and workflows, the identification of the
requirements of the different user groups, and the development of a functional specification
document.

2.2.1 Questionnaire:

The questionnaire is a tool used to gather information from the stakeholders regarding
their requirements, preferences, and feedback. The questionnaire is distributed to the
different user groups, and the responses are analyzed to identify the common themes
and issues.

2.2.2 Statistical Analysis:

The statistical analysis involves analyzing the data collected from various sources to
determine the patterns and trends. The statistical analysis helps in identifying the user
preferences and behavior, which in turn helps in developing a more effective
platform.

2.2.3 Interview:

Page | 19
The interview is a tool used to gather detailed information from the users regarding
their requirements, preferences, and feedback. The interview is conducted with the
key users .The interviews provide valuable insights into the requirements and
preferences of the different user groups, which in turn helps in developing a more
effective platform.

Page | 20
Chapter 3
Project Planning

Introduction

The most critical phase of managing system projects is planning. Information systems have become
increasingly important during the past decade. First, information is now recognized as a vital resource.
Second, more and more financial resources are committed to information systems. Third, there is
growing need for formal long-range planning with Information systems.

3.1 Project Scope

 The Essence restaurant website aims to enhance restaurant‘s digital presence and operational
efficiency to drive through the customer satisfaction.

 The scope of the project encompasses various features and functionalities tailored to meet the
expectations of food enthusiasts and our customer satisfaction

 Integrate pre-ordering services to enable customers to customize their dining experience by


selecting dishes in advance. Ensure compatibility with the reservation system and smooth order
management processes.

 The dining reservations will be accessible from any device with an internet connection, making it
convenient for people to use.

 Showcase the restaurant's menu with high-quality images, detailed descriptions, and pricing
information. Ensure easy navigation and categorization of menu items for user convenience.

Page | 21
 Integrate pre-ordering services to enable customers to customize their dining experience by
selecting dishes in advance. Ensure compatibility with the reservation system and smooth order
management processes.

3.2 Development Plan

The design and implementation of this project has been carried out in a completely step-by-step manner.

 Questionnaire

 Design Document

 Software Requirement Specification

 Coding

 Testing

 Project Report

3.3 Gantt Chart

Gantt chart is a time-phased bar chart display that lists tasks or activities along the left side
and a corresponding bar for each task. The length of the bar represents the duration of the
activity. This scheduling tool used to display the status of a project‘s tasks. The Gantt chart
shows each task‘s duration as a horizontal line. The ends of the lines correspond to the task‘s
start and end dates.

Page | 22
Fig. 1 Gantt Chart for Essence

3.4 Software Requirements

Operating System: Windows 10, macOS, or Linux

Web Browser: Google Chrome, Mozilla Firefox, Safari, or Microsoft Edge

Server-side Scripting Language: HTML , CSS, JavasScript

Client-side Scripting Language: JavaScript

Web Server: Firebase

Integrated Development Environment (IDE): Visual Studio Code

3.5 Hardware Requirements

Processor: Intel Core i3 or higher

RAM: 4 GB or higher

Storage: At least 500 MB of free space

Page | 23
Internet Connection: Required for accessing external services and for remote access to the
application.

Page | 24
Chapter 4
System design

Logical Design

4.1.1 Data Flow Diagram (DFD)

Data flow diagram (DFD) was first developed by Larry Constantine as a way of
representing system requirements in a graphical form; this led to modular design. A
DFD describes what data flow (logical)rather than how they are processed, so it does
not depend on hardware software, and data structure or file organization. It is also
known as ‗bubblechart‘. A data Flow Diagram is a structured analysis and design tool
that can be used for flowcharting in place of, or in association with information -
oriented and process-oriented system flowcharts. A DFD is a network that describes
the flow of data and the processes that change, or transform, data throughout a
system. This network is constructed by using a set of symbols that do not imply a
physical implementation. It has the purpose of clarifying system requirements and
identifying major transformations that will become programs in system design. So it
is the starting point of the design phase that functionally decomposes the requirement
specifications down to the lowest level of detail. A DFD can be considered as an
abstract of the logic of an information-oriented or a process-oriented system flow-
chart. For these reasons DFDs are often referred to as logical flow diagrams. The four
basic symbols used to construct data flow diagrams are shown below:

Symbol Representation

A rectangle represents a data source or


destination.

Page | 25
A directed line represents the flows of data,
which is data stream.

An enclosed figure, usually a circle or an


oval bubble, represents a process that
transforms data streams.

An open-ended rectangle represents data


storage. These are symbols that represent
data flows, data sources, data
transformations and data storage. The points
at which data are transformed are
represented by enclosed figures, usually
circles, which are called nodes.

Table 1: Common Symbols Used in DFD

The principal processes that take place at nodes are

1. Combining data streams


2. Splitting data streams
3. Modifying data streams

4.2 Physical Design

4.2.1 User Interface

On visiting the website, the user lands on –


Page | 26
Fig. 1.1 Home Page (1)

On scrolling down further, we see the brief description of the Restaurant -

On scrolling down further, we can see the Reviews of our customers about the Restaurant and
it‘s food –

Fig. 1.2 Home Page (2)

Page | 27
Fig. 1.3 Home Page (3)

On clicking the Menu button on the Navigation bar at the top, it lands to Menu page, where it
has various Food Items that the user can select based on their personal choices –

Fig. 2.1 Menu Page

On clicking on the About Us page , we see the detail description of the Restaurant -

Page | 28
Fig. 2.2 About Us
On clicking Hours & Location button, we are redirected to the location description of the
Restaurant and the working hours of staff -

Fig. 3.1 Hours & Location Page


On clicking on the Reservation button the customer can easily book a table for a better
dinning experience -
Page | 29
Fig. 3.2 Reservation Page

After the submitting the details for reservation a pop up message appears for the confirmation
booking of the customer –

Page | 30
Fig. 4.1 Reservation page Confirmation

Page | 31
On clicking the Cart icon we see the list of the Food Items ordered by the customer of their
choice-

Fig. 5.1 Cart Page


After that a pop up message appears which notifies the order is successfully placed-

Fig. 5.1 (1) Cart Page

Page | 32
Chapter 5
Software Development Methodology

5.1 Some popular software development methodologies -

1. Waterfall Model: This methodology follows a linear and sequential approach where the
next phase begins only after the previous phase is completed. It is suitable for projects where
requirements are clear, and changes are not expected.

2. Agile Methodology: Agile is an iterative and incremental approach that emphasizes


collaboration, flexibility, and customer satisfaction. It is suitable for projects where
requirements are not well-defined, and changes are expected.

3. Scrum: Scrum is an agile framework that emphasizes teamwork, communication, and


continuous improvement. It involves short iterations called sprints, where the team delivers a
potentially shippable product increment.

4. Lean Development: Lean development is a methodology that focuses on reducing waste


and maximizing value. It involves identifying and eliminating non-value-added activities to
increase efficiency.

5. Rapid Application Development (RAD): RAD is a methodology that emphasizes rapid


prototyping and iterative development. It involves using pre-built components and rapid
prototyping to deliver a working system quickly.

6. DevOps: DevOps is a methodology that emphasizes collaboration between developers and


operations teams. It involves continuous integration and delivery, automated testing, and
deployment.

For this project, an agile methodology or Scrum can be the most suitable approach as it
allows for flexibility and continuous improvement, which is essential for event management
software.

Methodology:

Page | 33
1. Requirement Gathering: The first step is to gather all the requirements for the project,
which includes the features and functionalities that the Event Management Platform should
have.

2. Design: Once the requirements are gathered, the next step is to create a design for the
platform. This includes designing the user interface, creating wireframes, and defining the
data models.

3. Development: The actual development of the platform starts in this phase. The
development team will write the code for the platform and integrate all the necessary
features.

4. Testing: The testing phase is crucial to ensure that the platform works as expected. The
testing team will test the platform thoroughly to find any bugs or issues.

5. Deployment: Once the testing is complete, the platform is ready to be deployed. This
involves setting up the platform on a server and making it accessible to users.

6. Maintenance: The final step is to maintain the platform and fix any issues that arise. This
includes regular updates and bug fixes.

Page | 34
Chapter 6
System Implementation

System implementation is the conversion of new system into an operating one which involves
creating compatible files, training staff and installing hardware. A critical factoring in
conversion is not disrupting the functioning of organization. User training is crucial for
minimizing resistance to change and giving chance to prove its worth.

Training aids user friendly manuals and healthy screens provide the user with a good start.
Software maintenance follows conversion to the extent that changes are necessary to maintain
satisfactory operations relative to changes in the user‘s environment. Maintenance often
includes minor enhancements or corrections to the problem that surface late in the systems
operations.

In the implementation phase, the team builds the components either from scratch or by
composition. Given the architecture document from the design phase and the requirement
document from the analysis phase, the team should build exactly what has been requested,
though there is still room for innovation and flexibility. For example, a component may be
narrowly designed for this system, or the component may be made more general to satisfy a
reusability guideline. The architecture document should give guidance. Sometimes, this
guidance is found in the requirement document.

The implementation phase deals with issues of quality, performance, baselines, libraries, and
debugging. The end deliverable is the product itself. During the implementation phase, the
system is built according to the specifications from the previous phases. This includes writing
code, performing code reviews, performing tests, selecting components for integration,
configuration, and integration. The implementation includes the following things.

System implementation is the conversion of new system into an operating one which involves
creating compatible files, training staff and installing hardware. A critical factoring in
conversion is not disrupting the functioning of organization. User training is crucial for
minimizing resistance to change and giving chance to prove its worth.

1. Coding: Developers write code based on the design specifications outlined in the
system design phase. They follow coding standards, best practices, and use appropriate
programming languages and frameworks.
Page | 35
2. Testing: Testing is conducted at multiple levels to ensure the correctness and
reliability of the software. This includes unit testing, where individual components are tested
in isolation, and integration testing, where multiple components are tested together to verify
their interactions.

3. Integration: Once individual components are tested, they are integrated to form the
complete system. Integration testing ensures that all components work together as expected
and meet the system requirements.

4. Deployment: The software is deployed to the production environment, making it


accessible to users. Deployment processes may vary depending on the technology stack used
and the deployment environment.

5. Monitoring and Maintenance: After deployment, the system is monitored for


performance, security, and reliability. Any issues or bugs identified are addressed promptly
through maintenance and support activities.

6. Documentation: Comprehensive documentation is prepared during the


implementation phase to guide developers, administrators, and users. This includes technical
documentation, user manuals, and system architecture diagrams.

7. Quality Assurance: Quality assurance processes are implemented throughout the


implementation phase to ensure that the software meets quality standards and complies with
requirement processes.

Page | 36
Chapter-7

Code Snippet

Project Structure

Page | 37
Fig. 6.1 Project Structure

Page | 38
Fig. 6.2 Project Structure

Fig. 6.3 Project Structure

Index.html :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta ="viewport" content="width=device-width, initial-scale=1.0">
<title>Essence</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">

</head>
<body>
<div class="container2">
<div class="background-image2"><img src="background.jpeg" width="100%"
height="1080px">
<div class="text-over-image2"><h1>Meet,<span> Eat & </span><br>Enjoy
The true</br>taste </h1>
<a href="menu.html" class="btn">Explore Menu</a>
</div>
<div class="contain">
<div class="container-box">
<img src="c1.png">
<h3>11:00 AM to 10:00 PM</h3>
<a href="#">WORKING HOURS</a>

Page | 39
</div>

<div class="container-box">
<img src="c2.png">
<h3>555,Brooklyn Heights</h3>
<a href="location.html">GET DIRECTION</a>
</div>
<div class="container-box">
<img src="c3.png">
<h3> 7587534404
</h3>
<a href="#">CALL US</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="background-image">

<div class="Left_image">
<img src="mae-mu-74HGrqRby2Q-unsplash.jpg" width="100%"
height="30%">
</div>
<div class="Right_text"><h1>WONDERFUL DINING EXPERIENCE AND
FOOD</h1><br>

<h3>Step into our charming eatery where the warm glow of


rustic decor meets the tantalizing aromas of globally-
inspired cuisine,
crafted with passion and precision. Each dish is a
masterpiece,
meticulously curated to delight the senses and ignite
the palate,
inviting you on a culinary journey like no
other</h3></br>
</div>

</div>
</div>

<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html"
class="active">HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>

Page | 40
<li class="nav-list"><a href="location.html">HOURS &
LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>

<section class="review" id="review">

<div class="OurCustomer">
<p class="ourcus">Our Customer</p>
<p class="ourcussub">Clients Review About Our Restaurant </p>
</div>

<div class="review-content">
<div class="box">
<p>I recently dined at this charming restaurant, and I must
say, the experience was delightful. From the moment I stepped in, the cozy
ambiance made me feel right at home.
The menu offered a variety of mouthwatering dishes, and the
flavors were exceptional.
</p>
<div class="in-box">
<div class="box-img">
<img src="r1.jpg">
</div>
<div class="box-text">
<h3>Raymond Holt</h3>
<h4>Food Vlogger</h4>
<div class="ratings">
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
</div>
</div>
</div>
</div>

Page | 41
<div class="box">
<p>🌟 Exquisite dishes, top-notch service, and Instagram-
worthy vibes. This
restaurant is THE spot for foodies and vloggers!
</p>
<div class="in-box">
<div class="box-img">
<img src="r2.jpg">
</div>
<div class="box-text">
<h3>Christina Santiago</h3>
<h4>Food Vlogger</h4>
<div class="ratings">
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
</div>
</div>
</div>
</div>

<div class="box">
<p>Exceptional culinary creations, impeccable service,
and captivating ambiance make this restaurant a top
choice for discerning food enthusiasts
</p>
<div class="in-box">
<div class="box-img">
<img src="r3.jpg">
</div>
<div class="box-text">
<h3>Charles Jeffords</h3>
<h4>Food Vlogger</h4>
<div class="ratings">
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>

Page | 42
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
<span><i class='bx bxs-star bx-flip-horizontal'
></i></span>
</div>
</div>
</div>
</div>
</div>
</section>

<footer class="contact-footer">

<div class="Footer">

<div class="LeftFooter">
<h3 class="text-center mt-2 pt-1">Essence <span><p>© 2024 All
rights reserved.</p></span></h3>

</div>

<div class="RightFooter">

<div class="RightLinks">
<div class="LinksDiv">
<a href="/about.html" class="linkcolor">
About
</a>
<span class="Danda">|</span>
<a href="#" class="linkcolor">
Contact
</a>
<span class="Danda">|</span>
<a href="#" class="linkcolor">
Terms
</a>
<span class="Danda">|</span>
<a href="#" class="linkcolor">
Privacy
</a>
</div>

Page | 43
</div>

</div>
</div>

</footer>

<script src="js/script.js"></script>
</body>

</html>

Style.css:

*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
list-style: none;
text-decoration: none;
scroll-behavior: smooth;
scroll-padding-top: 3rem;
}
:root{
--main-color: #e7a809;
--text-color: #fff;
--other-color: #212121;
--second-color: #9e9e9e;
--bg-color: #111111;

--big-font: 4.5rem;
--h2-font: 2.6rem;
--p-font: 1.1rem;
}
.nav-list{
white-space: nowrap;
}

body{
background: var(--bg-color);
color: var(--text-color);

Page | 44
}

header{
position: fixed;
width: 100vw;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
color: var(--text-color);
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;

}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;

}
.navlist a:hover{
color: var(--main-color)
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;

Page | 45
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);

}
.nav-list .active{
color: #e7a809;
}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;

}
span{
color: var(--main-color);
}

.btn{
display: inline-block;

Page | 46
padding: 15px 15px;
border-radius: 17px;
background: var(--other-color);
color: var(--main-color);
font-size: 25px;
font-weight: 500;
transition: all .50s ease;
}
.btn:hover{
background: var(--main-color);
color: var(--bg-color);
box-shadow: #9e9e9e 0px 1px 25px;
}
.text-over-image2 {
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
font-size: 34px;
}
header.sticky{
padding: 12px 14%;
background: var(--other-color);
}
.contain{
display: flex;
position: absolute;
top: 100%;
left:10%;
z-index: 4;
padding: 30px 14% 70px;
gap: 2rem;
text-align: center;
}

.container-box{
padding: 43px 43px 43px 43px;
background: var(--other-color);
width: 275px;
height: 240px;
border-radius: 3rem;
}
.container-box img{
width: 100%;
max-width: 50px;
height: auto;
}
.container-box h3{

Page | 47
font-size: 21px;
font-weight: bold;
margin: 16px 0;
}
.container-box a{
color: var(--second-color);
font-size: var(--p-font);
letter-spacing: 1px;
transition: all .50s ease;
}
.container-box a:hover{
color: var(--main-color);
}

.Text_on_image{
font-size: larger;
font-weight: 600;
}
.background-image {
background-image: url('wallpaperflare.com_wallpaper\ \(49\).jpg');
background-size: cover;
background-position: center;
height: 700px;
width:100%;

display: flex;
align-items: center;
justify-content:space-around;

}
.Left_image {
width: 25%;
border-radius: 50%;
}
.Left_image img{
border-radius: 20%;
}
.Right_text{
width: 30%;
color: whitesmoke;
font-weight: 300;
font-family: Georgia, 'Times New Roman', Times, serif;
}

.contact-footer{
background-color: var(--other-color);

Page | 48
}

.Footer{
padding:2rem;
width: 100%;
display:flex;
justify-content: space-around;
}
.LeftFooter{

display: flex;
align-items:center ;
flex-direction: column;
justify-content: center;
}
.RightLinks{

display:flex;
flex-direction: column;
}
.RightLinks:hover{
color: var(--main-color);
}

.linkcolor{
color: whitesmoke;
}
.iconz a{
color: #e7a809;
}
.review{
padding: 60px 40px;
margin-bottom: 20px;
}
.review-content{
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit,minmax(300px,auto));
align-items: center;
margin-top: 4rem;
}

.box{
position: relative;
padding: 30px;
background: whitesmoke;
border-radius: 3rem;
color: #212121;

Page | 49
width: 90%;
height: 300px;

}
.in-box{
position: absolute;
display: flex;
align-items: center;
gap: 30px;
bottom: 0;
}
.box-img img{
width: 100%;
height: auto;
border-radius: 3rem;
}
.box-text h3{
margin: 5px 0;
font-size: 18px;
}
.box-text h4{
color: var(--second-color);
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 10px;
}
.ratings{
font-size: 18px;
margin-right: 5px;
}
.ourcus{
text-align: center;
font-size: 48px;
font-weight: bold;
}
.ourcussub{
text-align: center;
font-size: 24px;
}
.LeftFooter h3{
display: flex;
gap:10px;
}
.linkcolor:hover{
color: #e7a809;
}

Page | 50
Script.js:

const addToCartButtons = document.querySelectorAll('.add-to-cart');

addToCartButtons.forEach(function(button) {
button.addEventListener('click', function() {
const name = button.dataset.name;
const price = parseFloat(button.dataset.price);
const imgUrl = button.dataset.imgurl;

// Retrieve existing cart items from localStorage or initialize an empty


array
let cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];

// Check if the item already exists in the cart


const existingItemIndex = cartItems.findIndex(item => item.name === name);

if (existingItemIndex !== -1) {


// If the item already exists, update its quantity
cartItems[existingItemIndex].quantity =
(cartItems[existingItemIndex].quantity || 1) + 1;
} else {
// If the item doesn't exist, add it to the cart with quantity 1
cartItems.push({ name: name, price: price, quantity: 1, imgUrl: imgUrl
});
}

// Store the updated cart items back into localStorage


localStorage.setItem('cartItems', JSON.stringify(cartItems));

// Optional: Display a confirmation message or update the UI to indicate


the item was added to the cart
console.log("Added", name, "to cart");
});
});

Menu.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> Essence</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css"
Page | 51
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link

href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap"
rel="stylesheet"
/>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Restaurant Menu</title>
<link
rel="shortcut icon"
href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon"
/>
<link rel="stylesheet" href="menu.css" />
</head>

<body background="try-1.jpg">
<img
style="position: fixed; z-index: 0"
src="wallpaperflare.com_wallpaper (49).jpg"
alt=""
/>
<header>
<a href="#" class="logo"><i class="bx bxs-home"></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html">HOME</a></li>
<li class="nav-list"><a href="menu.html" class="active">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>
<li class="nav-list"><a href="location.html">HOURS & LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>

<div id="toastbox"></div>

<section class="menu">
<div class="container">
<p class="menu-title">Menu</p>
<div class="menu-items">

Page | 52
<div class="item">
<img src="pexels-suzy-hazelwood-1209029.jpg" alt="Dish 1" />
<h3>sandwich</h3>
<p>A symphony of savory layers nestled between toasted artisanal
bread, adorned with vibrant hues of fresh greens and bursting with tantalizing
flavors.</p>
<p>Rs 59</p>
<button
class="add-to-cart"
data-name="sandwich"
data-price="59"
data-imgurl="pexels-suzy-hazelwood-1209029.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-valeria-boltneva-1639557.jpg" alt="Dish 2" />
<h3>burger</h3>
<p>A tantalizing tower of indulgence, where perfectly grilled
patties meet a harmonious blend of fresh ingredients, all embraced by a
golden-brown bun.</p>
<p>Rs 49</p>
<button
class="add-to-cart"
data-name="burger"
data-price="49"
data-imgurl="pexels-valeria-boltneva-1639557.jpg"

onclick="toast()"
>
Add to Cart
</button>
</div>

<!-- example -->


<div class="item">
<img src="french-fries.jpg" alt="Dish 2" />
<h3>french fries</h3>
<p>Crisp golden rods of indulgence, seasoned with a sprinkle of
salt, whispering promises of savory delight with every bite.</p>
<p>Rs 99</p>
<button
class="add-to-cart"
data-name="french fries"
data-price="99"
data-imgurl="french-fries.jpg"

Page | 53
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-engin-akyurt-1437267.jpg" alt="Dish 2" />
<h3>Marinara Pasta</h3>
<p> Fiery tendrils of pasta entwined in a passionate embrace of
vibrant tomato sauce, sprinkled with basil fragrant whispers. </p>
<p>Rs 149</p>
<button
class="add-to-cart"
data-name="Marinara Pasta"
data-price="149"
data-imgurl="pexels-engin-akyurt-1437267.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-jane-trang-doan-769969.jpg" alt="Dish 2" />
<h3>spaghetti</h3>
<p>Sun-kissed strands of spaghetti delicately woven in a tapestry
of tangy tomato sauce, sprinkled with aromatic herbs and crowned with a
blanket of grated Parmesan</p>
<p>Rs 199</p>
<button
class="add-to-cart"
data-name="spaghetti"
data-price="199"
data-imgurl="pexels-jane-trang-doan-769969.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-amar-preciado-17653573.jpg" alt="Dish 2" />
<h3>choclate pastry</h3>
<p>Immerse yourself in the irresistible allure of our chocolate
pastry, a delectable symphony of rich cocoa, buttery crust, and blissful
decadence</p>
<p>Rs 99</p>
<button
class="add-to-cart"
data-name="choclate pastry"

Page | 54
data-price="99"
data-imgurl="pexels-amar-preciado-17653573.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-eneida-nieves-905847.jpg" alt="Dish 2" />
<h3>pizza</h3>
<p>A delectable mosaic of flavors, where molten cheese melds with
a medley of vibrant toppings atop a golden crust, each bite a harmonious
melody of taste and texture.</p>
<p>Rs 129</p>
<button
class="add-to-cart"
data-name="pizza"
data-price="129"
data-imgurl="pexels-eneida-nieves-905847.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-marvin-ozz-2474661.jpg" alt="Dish 2" />
<h3>dal makhni with nan</h3>
<p>Indulge in the luscious embrace of creamy dal makhani,
accompanied by the golden, charred perfection of freshly baked naan, a
harmonious dance of decadence and delight.</p>
<p>Rs 299</p>
<button
class="add-to-cart"
data-name="dal makhni with nan"
data-price="299"
data-imgurl="pexels-marvin-ozz-2474661.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="salad.jpg" alt="Dish 2" />
<h3>salad</h3>
<p>Crisp greens tangled with vibrant bursts of color, kissed by
the sun's warmth and drizzled with the whisper of citrus essence </p>
<p>Rs 49</p>
<button

Page | 55
class="add-to-cart"
data-name="salad"
data-price="49"
data-imgurl="salad.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="pexels-archie-binamira-1193335.jpg" alt="Dish 2" />
<h3>cold coffee</h3>
<p>Chilled espresso dances with creamy swirls, kissed by frosty
whispers of vanilla</p>
<p>Rs 99</p>
<button
class="add-to-cart"
data-name="cold coffee"
data-price="99"
data-imgurl="pexels-archie-binamira-1193335.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="momoes.jpg" alt="Dish 2" />
<h3>momos</h3>
<p>
Succulent dumplings, nestled in delicate folds, exuding a
tantalizing aroma of spices and herbs.

</p>
<p>Rs 129</p>
<button
class="add-to-cart"
data-name="momos"
data-price="129"
data-imgurl="momoes.jpg"
onclick="toast()"
>
Add to Cart
</button>
</div>
<div class="item">
<img src="alloi-ollio-ppasta.jpg" alt="Dish 2" />
<h3>alloi-ollio-pasta</h3>

Page | 56
<p>Twirling ribbons of al dente fettuccine adorned with a velvety,
garlic-infused Alfredo sauce, delicately dusted with freshly grated Parmesan
and kissed by a whisper of cracked black pepper
</p>
<p>Rs 229</p>
<button
class="add-to-cart"
data-name="alloi-ollio-pasta"
data-price="229"
data-imgurl="alloi-ollio-ppasta.jpg"
onclick=" toast()"
>
Add to Cart
</button>
</div>
</div>
</div>

<div id="snackbar">item added to cart</div>


</section>

<script>
function toast() {
// Get the snackbar DIV
var x = document.getElementById("snackbar");

// Add the "show" class to DIV


x.className = "show";

// After 3 seconds, remove the show class from DIV


setTimeout(function () {
x.className = x.className.replace("show", "");
}, 3000);
}
</script>

<script src="script.js"></script>
</body>
</html>

Menu.css:

:root {

/**

Page | 57
* COLORS
*/

--gold-crayola: hsl(38, 61%, 73%);


--quick-silver: hsla(0, 0%, 65%, 1);
--davys-grey: hsla(30, 3%, 34%, 1);
--smoky-black-1: hsla(40, 12%, 5%, 1);
--smoky-black-2: hsla(30, 8%, 5%, 1);
--smoky-black-3: hsla(0, 3%, 7%, 1);
--eerie-black-1: hsla(210, 4%, 9%, 1);
--eerie-black-2: hsla(210, 4%, 11%, 1);
--eerie-black-3: hsla(180, 2%, 8%, 1);
--eerie-black-4: hsla(0, 0%, 13%, 1);
--white: hsla(0, 0%, 100%, 1);
--white-alpha-20: hsla(0, 0%, 100%, 0.2);
--white-alpha-10: hsla(0, 0%, 100%, 0.1);
--black: hsla(0, 0%, 0%, 1);
--black-alpha-80: hsla(0, 0%, 0%, 0.8);
--black-alpha-15: hsla(0, 0%, 0%, 0.15);
}
.menu{
position: relative;
z-index: 3;
}

body{
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
:root {

Page | 58
/**
* COLORS
*/

--gold-crayola: hsl(38, 61%, 73%);


--quick-silver: hsla(0, 0%, 65%, 1);
--davys-grey: hsla(30, 3%, 34%, 1);
--smoky-black-1: hsla(40, 12%, 5%, 1);
--smoky-black-2: hsla(30, 8%, 5%, 1);
--smoky-black-3: hsla(0, 3%, 7%, 1);
--eerie-black-1: hsla(210, 4%, 9%, 1);
--eerie-black-2: hsla(210, 4%, 11%, 1);
--eerie-black-3: hsla(180, 2%, 8%, 1);
--eerie-black-4: hsla(0, 0%, 13%, 1);
--white: hsla(0, 0%, 100%, 1);
--white-alpha-20: hsla(0, 0%, 100%, 0.2);
--white-alpha-10: hsla(0, 0%, 100%, 0.1);
--black: hsla(0, 0%, 0%, 1);
--black-alpha-80: hsla(0, 0%, 0%, 0.8);
--black-alpha-15: hsla(0, 0%, 0%, 0.15);
}
.menu{
position: relative;
z-index: 3;
}

body{
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
color: var(--text-color);

Page | 59
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;

}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;

}
.navlist a:hover{
color: var(--main-color)
}
.menu-title{
font-size: 48px;
text-align: center;
color: white;
font-weight: bold;
margin-bottom: 40px;
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;

Page | 60
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);

}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;

.container {
width: 100%;
;
}
.menu {
padding: 150px 0;
/* background-color: rgb(252, 255, 90); */
color: #000000;
}
.menu h2 {
text-align: center;
margin-bottom: 20px;
font-size: x-large;
text-decoration: underline;
color: #fff;
}

.menu-items {
display: grid;
grid-template-columns: auto auto auto ;

Page | 61
justify-content: space-evenly;
column-gap: 50px;
row-gap: 50px;
text-transform: capitalize;

}
.marq {
padding-top: 10px;
padding-bottom: 10px;

.geek1 {
font-size: 64px;
font-family: "Arial", sans-serif;
font-weight: bold;
color: white;
padding-bottom: 10px;
}

.item {
width: 300px;
position: relative;
padding: 20px;
color:white;
background-color: #99969657;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.795);
height: 520px;
transition: .4s ease-in;
}

.item img {
width: 100%;
border-radius: 10px;
}

.item h3 {
margin-top: 10px;
}

.item p {
margin-top: 10px;
}

.item span {

Page | 62
display: list-item;
font-weight: bold;
margin-top: 10px;
}
.item:hover{
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
transform: translateY(-0.85em);
transition-duration: 0.2s;
box-shadow: 0 0 20px rgb(0, 0, 0);
background-color: #ffffffbb;
color: #000000;

.add-to-cart {
display: block;
margin-top: 10px;
padding: 10px 20px;
position: absolute;
border: none;
background-color: #e7a809;
color: #fff;
cursor: pointer;
border-radius: 5px;
left: 20px;
bottom: 10px;
transition: .2s ease-in;

.add-to-cart:hover {
background-color: #e78709;
border-radius: 10px ;
scroll-margin-inline-end: 10px;
}
footer {
background-color: #67defc;
color: #fff;
text-align: center;
margin-top: 10px;
padding: 10px 0;
}

#toastbox {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;

Page | 63
align-items: flex-end;
flex-direction: column;
overflow: hidden;
padding: 20px;

}
.toast {
width: 400px;
height: 80px;
background: #fff;
font-weight: 500;
margin: 15px 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
position: relative;
transform: translateX(100%);
animation: moveleft 0.5s linear forwards;
}
@keyframes moveleft{
100%{
transform: translateX(0);
}
}
.toast::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
background: green;
animation: anim 5s linear forwards;

}
@keyframes anim {
100%{
width: 0;
}
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);

}
.navlist{
display: flex ;

Page | 64
}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;

}
.navlist a:hover{
color: var(--main-color)
}
.navlist a:active{
color: var(--main-color)
}

.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}

#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript)
*/
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

Page | 65
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
color: var(--text-color);
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;

}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;

}
.navlist a:hover{
color: var(--main-color)
}
.menu-title{
font-size: 48px;
text-align: center;

Page | 66
color: white;
font-weight: bold;
margin-bottom: 40px;
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);

}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;

Page | 67
}

.container {
width: 100%;
;
}
.menu {
padding: 150px 0;
/* background-color: rgb(252, 255, 90); */
color: #000000;
}
.menu h2 {
text-align: center;
margin-bottom: 20px;
font-size: x-large;
text-decoration: underline;
color: #fff;
}

.menu-items {
display: grid;
grid-template-columns: auto auto auto ;
justify-content: space-evenly;
column-gap: 50px;
row-gap: 50px;
text-transform: capitalize;

}
.marq {
padding-top: 10px;
padding-bottom: 10px;

.geek1 {
font-size: 64px;
font-family: "Arial", sans-serif;
font-weight: bold;
color: white;
padding-bottom: 10px;
}

.item {
width: 300px;
position: relative;
padding: 20px;
color:white;

Page | 68
background-color: #99969657;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.795);
height: 520px;
transition: .4s ease-in;
}

.item img {
width: 100%;
border-radius: 10px;
}

.item h3 {
margin-top: 10px;
}

.item p {
margin-top: 10px;
}

.item span {
display: list-item;
font-weight: bold;
margin-top: 10px;
}
.item:hover{
box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
transform: translateY(-0.85em);
transition-duration: 0.2s;
box-shadow: 0 0 20px rgb(0, 0, 0);
background-color: #ffffffbb;
color: #000000;

.add-to-cart {
display: block;
margin-top: 10px;
padding: 10px 20px;
position: absolute;
border: none;
background-color: #e7a809;
color: #fff;
cursor: pointer;
border-radius: 5px;
left: 20px;

Page | 69
bottom: 10px;
transition: .2s ease-in;

.add-to-cart:hover {
background-color: #e78709;
border-radius: 10px ;
scroll-margin-inline-end: 10px;
}
footer {
background-color: #67defc;
color: #fff;
text-align: center;
margin-top: 10px;
padding: 10px 0;
}

#toastbox {
position: absolute;
bottom: 30px;
right: 30px;
display: flex;
align-items: flex-end;
flex-direction: column;
overflow: hidden;
padding: 20px;

}
.toast {
width: 400px;
height: 80px;
background: #fff;
font-weight: 500;
margin: 15px 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
position: relative;
transform: translateX(100%);
animation: moveleft 0.5s linear forwards;
}
@keyframes moveleft{
100%{
transform: translateX(0);
}
}
.toast::after{

Page | 70
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
background: green;
animation: anim 5s linear forwards;

}
@keyframes anim {
100%{
width: 0;
}
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);

}
.navlist{
display: flex ;

}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;

}
.navlist a:hover{
color: var(--main-color)
}
.navlist a:active{
color: var(--main-color)
}

.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}

Page | 71
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
}

/* Show the snackbar when clicking on a button (class added with JavaScript)
*/
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */


@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}

About .html:

Page | 72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<link rel="shortcut icon" href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon">
<link rel="stylesheet" href="about.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" />

<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">

</head>
<body>
<img style="position: fixed; z-index: 0;" src="wallpaperflare.com_wallpaper
(49).jpg" alt=""/>
<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html" >HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html" class="active">ABOUT
US</a></li>
<li class="nav-list"><a href="location.html">HOURS & LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>

<section class="about">

Page | 73
<div class="container">
<div class="about-content">

<div class="about-image">

<div class="image-overlay">
<h3>About Us</h3>
<p>Located on a then-lonesome little corner under the Williamsburg
Bridge in Brooklyn, Diner opened its doors on New Year’s Eve twenty-two years
ago. Owners Andrew Tarlow and Mark Firth hosted and bartended and ended most
nights with a hand of cards and a pitcher of margaritas. Chef Caroline Fidanza
wrote a daily menu committed to local, seasonal, sustainable foods, and built
relationships with the farmers in upstate New York and surrounding regions.
Kate Huling was server and salad maker, scrawling the menu across table after
table, then jumping back behind the line to overdress a salad when duty
called.</p>
<p> Diner’s expansive bar, a place to sit and read and eat and watch
the world go by is the centerpiece of the room, a 90-year-old Pullman dining
car. Warm wood and aged enamel, like being in the belly of a whale or the
protected hold of a ship. </p>

<h3>Our Team</h3>
<p>We are dedicated professionals<br> passionate about great food
and service.</p>
</div>

</div>

</div>

</div>

</section>

</div>

</body>
</html>

About.css:

.about {
padding: 40px 0;

}
.bgimg{
background: url(wallpaperflare.com_wallpaper\ \(49\).jpg);

Page | 74
}

.about h2 {
text-align: center;
margin-bottom: 20px;
}

.about p {
margin-bottom: 20px;
}
body{
background-color: #000000;

}
.container {
width: 80%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}

.about-image img {
width: 800px;
height: 400px;
border-radius: 20px;
margin-left: 300px;
}
.image-overlay {
margin-top: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: left;
padding: 20px;
background-color: rgba(255, 255, 255, 0.058);
color: #fffbfb;
border-radius: 5px;
}

.image-overlay h3 {
margin-bottom: 10px;
}
:root{
--main-color: #e7a809;
--text-color: #fff;
--other-color: #212121;

Page | 75
--second-color: #9e9e9e;
--bg-color: #111111;

--big-font: 4.5rem;
--h2-font: 2.6rem;
--p-font: 1.1rem;
}

header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
color: var(--text-color);
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;

}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;

}
.navlist a:hover{
color: var(--main-color)
}

Page | 76
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);

}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;

Page | 77
Location.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hours and Location</title>
<link rel="shortcut icon" href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon">
<link rel="stylesheet" href="location.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" />

<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">

</head>
<body>
<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html">HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>
<li class="nav-list"><a href="location.html" class="active">HOURS &
LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>

<section class="hours-location">
<div class="container">
<div class="hours">
Page | 78
<h2>Opening Hours</h2>
<ul class="timings">
<li>Monday: 11:00 AM - 10:00 PM</li>
<li>Tuesday: 11:00 AM - 10:00 PM</li>
<li>Wednesday: 11:00 AM - 10:00 PM</li>
<li>Thursday: 11:00 AM - 10:00 PM</li>
<li>Friday: 11:00 AM - 11:00 PM</li>
<li>Saturday: 11:00 AM - 11:00 PM</li>
<li>Sunday: 11:00 AM - 11:00 PM</li>
</ul>
</div>
<div class="location">
<h2>Location</h2>
<iframe

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3152.1743070611215!
2d-
122.41904818471433!3d37.77492997975287!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1
!3m3!1m2!1s0x808580e8c5a07a21%3A0x88236505266aa48e!2sGolden%20Gate%20Bridge!5e
0!3m2!1sen!2sus!4v1633078232636!5m2!1sen!2sus"
width="1600"
height="650"
style="border: 1"
allowfullscreen=""
loading="lazy"
></iframe>
</div>
</div>
</section>

</body>
</html>

Location.css:
.hours-location {
padding: 150px 0;
background: url(wallpaperflare.com_wallpaper\ \(49\).jpg)
}

.hours-location h2 {
text-align: left;
margin-bottom: 20px;
}

.hours-location .container {

Page | 79
display: flex;
justify-content: space-around;
align-items: flex-start;
}

.timings{
align-items: center;
margin-top: 40px ;

}
.timings li{
font-size: 22px;
margin-top: 12px;

.hours-location .location {

width: 45%;
}

.hours-location .location iframe {


width: 600px;
height: 350px;
}

.container {
width: 80%;
margin: 0 auto;
}

header {
background-color: #0ec5bc;
color: #fff;
padding: 20px 0;
}

header .container {
display: flex;
justify-content: space-between;
align-items: center;
}

nav ul {
list-style: none;
display: flex;
}

Page | 80
nav ul li {
margin-left: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

footer {
background-color: #67defc;
color: #fff;
text-align: center;
margin-top: 30px;
padding: 10px 0;
}

Booking.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Booking</title>
<link rel="shortcut icon" href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon">
<link rel="stylesheet" href="booking.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" />

<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">

Page | 81
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
firestore.js"></script>
</head>
<body background="background.jpeg">
<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html" >HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>
<li class="nav-list"><a href="location.html">HOURS &
LOCATION</a></li>
<li class="nav-list"><a href="booking.html"
class="active">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>

<section class="booking">
<div class="container">

<h2>Make a Booking</h2>
<form action="" id="bookingform">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required
placeholder="Enter your name"/>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required
placeholder="Enter your email id"/>
</div>
<div class="form-group">
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile" required
placeholder="Enter your mobile number"/>

Page | 82
</div>
<div class="form-group">
<label for="people">Number of People:</label>
<input type="number" id="people" name="people" min="1" required
placeholder="Enter no. of people" />
</div>
<button onclick="sendData(event)">Submit</button>

</form>
</div>
</section>

<script>

const firebaseConfig = {
// Your Firebase configuration
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const sendData = async (e) => {


e.preventDefault();

const name = document.getElementById('name').value;


const email = document.getElementById('email').value;
const mobile = document.getElementById('mobile').value;
const people = document.getElementById('people').value;

const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name,
email,
mobile,
people
})
};

try {
const res = await fetch('https://newbookingpage-default-
rtdb.firebaseio.com/UserData.json', options);
console.log(res);

Page | 83
if (res.ok) {
alert("Booking submitted successfully!");
} else {
alert("An error occurred. Please try again.");
}
} catch (error) {
console.error('Error:', error);
alert("An error occurred. Please try again.");
}
};
</script>

</script>
</body>
</html>

Booking.css:

.booking {
padding: 8% 0 0;
margin: auto;
background: url(wallpaperflare.com_wallpaper\ \(49\).jpg);
height: 100vh;

.booking h2 {
text-align: center;
margin-bottom: 20px;
}

.container {
width: 80%;
margin: 0 auto;
color: #ffffff;
}

header {
background-color: #0ec5bc;
color: #fff;
padding: 20px 0;
}

header .container {
display: flex;
justify-content: space-between;

Page | 84
align-items: center;
}

nav ul {
list-style: none;
display: flex;
}

nav ul li {
margin-left: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

form {
max-width: 400px;
margin: 0 auto;
}

.form-group {
margin-bottom: 20px;
color: #ffffff; ;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}

button {
display: block;
width: 100%;
padding: 10px;
background-color:#e7a809;

Page | 85
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
}

button:hover {
background-color: #e78709;
border-radius: 15px;
}

footer {
background-color: #67defc;
color: #fff;
text-align: center;
margin-top: 30px;
padding: 10px 0;
}

Booking.js:
const firebaseConfig = {
apiKey: "AIzaSyBjoBUP3jBm7xqDyhrlzktHe5Ap4q9xdck",
authDomain: "bookingpage-e8d0f.firebaseapp.com",
databaseURL:
"https://bookingpage-e8d0f-default-rtdb.asia-
southeast1.firebasedatabase.app",
projectId: "bookingpage-e8d0f",
storageBucket: "bookingpage-e8d0f.appspot.com",
messagingSenderId: "282936482055",
appId: "1:282936482055:web:9bd51da6a4866cb2598da2",
measurementId: "G-SEN533S304",
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

// Get the form element


const form = document.getElementById("bookingform");

// Handle form submission


form.addEventListener("submit", (e) => {
e.preventDefault(); // Prevent default form submission

// Get form values


const name = form.name.value;
const email = form.email.value;

Page | 86
const mobile = form.mobile.value;
const people = parseInt(form.people.value);

// Add data to Firestore


db.collection("bookings")
.add({
name: name,
email: email,
mobile: mobile,
people: people,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
})
.then(() => {
alert("Booking submitted successfully!");
form.reset(); // Reset the form after submission
})
.catch((error) => {
console.error("Error adding booking: ", error);
alert("An error occurred. Please try again.");
});
});

Cart.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<link rel="shortcut icon" href="819458e3-cd22-4574-bdda-36430a89c2b7.jpg"
type="image/x-icon">
<link rel="stylesheet" href="cart.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css" />

<link rel="stylesheet"
href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Page | 87
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;70
0;800;900&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.0.4/firebase-
firestore.js"></script>

</head>
<body background="pexels-kyla-rose-rockola-954677.jpg">
<header>
<a href="#" class="logo"><i class='bx bxs-home'></i>Essence</a>
<ul class="navlist">
<li class="nav-list"><a href="index.html" >HOME</a></li>
<li class="nav-list"><a href="menu.html">MENU</a></li>
<li class="nav-list"><a href="about.html">ABOUT US</a></li>
<li class="nav-list"><a href="location.html">HOURS & LOCATION</a></li>
<li class="nav-list"><a href="booking.html">RESERVATION</a></li>
</ul>
<div class="nav-icons">
<a href="cart.html"><i class='bx bxs-cart bx-tada' ></i></a>
</div>
<div class="bx bx-menu" id="menu-icon"></div>
</header>

<section class="cart">
<div class="container">
<h2>Your Cart</h2>
<div class="cart-items" id="cart-items">
</div>

<div class="cart-total">
<h3>Total:</h3>
<span id="cart-total">rs0</span>
</div>
</div>

<div class="cartt">
<!-- cart items display -->
<button id="order-now-btn">Order Now</button>

</div>

Page | 88
</section>

<script src="cart.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-
app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.5.0/firebase-
firestore.js"></script>
<script src="your-firebase-config.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const orderNowButton = document.getElementById('order-now-btn');
const loader = document.getElementById('loader'); // Get loader element

orderNowButton.addEventListener('click', async function() {


const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];

if (cartItems.length === 0) {
alert("Your cart is empty. Please add items before placing an order.");
return;
}

// Show loader while processing order

const firebaseConfig = {
apiKey: "AIzaSyDChHFeuLE82RhAavT9p47YP6nB1U9BO20",
authDomain: "newbookingpage.firebaseapp.com",
databaseURL: "https://newbookingpage-default-rtdb.firebaseio.com",
projectId: "newbookingpage",
storageBucket: "newbookingpage.appspot.com",
messagingSenderId: "967182319638",
appId: "1:967182319638:web:3efb98c1f3b850de2eb537"
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

try {
let totalOrderPrice = cartItems.reduce((total, item) => total +
item.price, 0);

const docRef = await db.collection("orders").add({


items: cartItems,
totalOrderPrice: totalOrderPrice,
timestamp: firebase.firestore.FieldValue.serverTimestamp()
});

Page | 89
console.log("Order placed with ID: ", docRef.id);
localStorage.removeItem('cartItems');
alert("Order placed successfully! ");
window.location.href = "menu.html";

} catch (error) {
console.error("Error placing order: ", error);
alert("An error occurred while placing the order. Please try again.");
} finally {
// Hide loader after order is placed (success or error)
loader.style.display = 'none';
}
});
});
</script>

</body>
</html>

Cart.css:

.cart {
padding: 150px 0;
min-height: 100vh;
height: auto;
background: url(wallpaperflare.com_wallpaper\ \(49\).jpg);
overflow: hidden;
}

.cart h2 {
text-align: center;
margin-bottom: 20px;
}

.empty-cart-message{
font-family: 'Arial', sans-serif;
font-size: 18px;
font-weight: bold;
color: #b70000; /* Choose a color that complements your design */
text-align: center;
margin-top: 20px; /* Adjust spacing as needed */
}

Page | 90
.cart-item:last-child {
border-bottom: none;
}

.cart-item p {
margin: 0;
}

.cart-total {
margin-top: 30px;
text-align: right;
margin-right: 10%;
margin-bottom: 30px;
}

.container {
width: 80%;
margin: 0 auto;
color: #ffffff;
}

header {
background-color: #0ec5bc;
color: #fff;
padding: 10px 0;
}

header .container {
display: flex;
justify-content: space-between;
align-items: center;
}

nav ul {
list-style: none;
display: flex;
}

nav ul li {
margin-left: 20px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

Page | 91
header{
position: fixed;
width: 100%;
top: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
padding: 30px 14%;
transition:all .50s ease
}
.logo{
display:flex;
align-items: center;
color: var(--text-color);
font-size: 33px ;
}
.logo i{
vertical-align: middle;
margin-right: 8px;
color: var(--main-color);
}
.navlist{
display: flex ;

}
.navlist a{
color: var(--text-color);
font-size: var(--p-font);
font-weight: 600;
margin: 0 25px;
transition: all .50s ease;

}
.navlist a:hover{
color: var(--main-color)
}
.navlist a:active{
color: var(--main-color)
}
.nav-icons{
display: flex;
align-items: center;

Page | 92
padding: 8px 15px;
background: var(--main-color);
border-radius: 3rem;
box-shadow: #e7a809 0px 1px 25px;
}
.nav-icons i{
vertical-align: middle;
font-size: 25px;
color: var(--bg-color);
margin-left: 5px;
margin-right: 8px;
transition: all .50s ease;
}
#menu-icon{
font-size: 32px;
color: var(--text-color);
z-index: 10001;
cursor: pointer;
display: none;
}
.nav-icons i:hover{
transform:scale(1.1) ;
color: var(--text-color);

}
.home{
position: relative;
height: 100vh;
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
gap: 2rem;
}
.home-img img{
width: 1700px;
height: 1080px;

}
.cartt{
display: grid;
width: 100%;
padding: 10px;

color: #fff;
border: thick;
border-radius: 10px;
cursor: pointer;

Page | 93
}

#order-now-btn{
font-size: 16px;
padding: 8px 12px;
background-color: #e7a809 ;
color: white;
border: none;
margin: 0 auto;
width: 65%;
border-radius: 5px;
cursor: pointer;
}

.cart-item {
ALIGN-ITEMS: center;
display: flex;
width: 80%;
margin: 0 auto;
padding: 20px;
position: relative;
justify-content: start;
gap: 68px;
margin-bottom: 10px;
background-color: #ababab1a;
border-radius: 5px;
}

.remove-from-cart {
position: absolute;
transform: translateY(33%);
right: 40px;
height: 100%;
font-size: 28px;
/* top: 50%; */
cursor: pointer;
color: #e7a809;;
}
.cart-layout{
width:"100%";
display:"flex";

}
.quantity-button{
color: #e7a809;
background: transparent;

Page | 94
}
.quantity{
display: flex;
gap:10px;
background-color: #2b2b2ba7;
width: max-content;
padding: 2px 5px;
}
.quantity p,span{
font-size: 18px;
cursor: pointer;
}
.empty-cart-message {
font-family: 'Arial', sans-serif;
font-size: 18px;
font-weight: bold;
color: #888;
text-align: center;
margin-top: 20px;
display: none; /* Initially hide the empty cart message */
}
.toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
padding: 10px 20px;
border-radius: 4px;
z-index: 999;
}
.cart-name{
text-transform: capitalize;
}

Cart.js:
document.addEventListener("DOMContentLoaded", function() {
const cartItems = JSON.parse(localStorage.getItem('cartItems')) || [];
const cartItemsContainer = document.getElementById('cart-items');
const cartTotalElement = document.getElementById('cart-total');
let total = 0;

function renderCart() {
cartItemsContainer.innerHTML = ''; // Clear previous cart items
total = 0;

Page | 95
if (cartItems.length === 0) {
// Display message when cart is empty
const emptyCartMessage = document.createElement('p');
emptyCartMessage.textContent = 'Your Cart is Hungry! Add Delicious Items
Now!';
emptyCartMessage.style.fontSize = '28px';
emptyCartMessage.style.fontWeight = 'bold';
emptyCartMessage.style.marginTop="100px";
emptyCartMessage.style.textAlign = 'center';
cartItemsContainer.appendChild(emptyCartMessage);

cartTotalElement.textContent = `Total: Rs${total.toFixed(2)}`;


} else {
// Render cart items if cart is not empty
cartItems.forEach(function(item, index) {
const itemElement = document.createElement('div');
itemElement.classList.add('cart-item');

itemElement.innerHTML = `
<img src="${item.imgUrl}" width="100px" height="100px" class="img-
cart" alt="${item.name}">
<div class="item-cart">
<p class="cart-name"><strong>${item.name}</strong></p>
<p class="cart-price">Price: Rs${item.price.toFixed(2)}</p>
<div class="cart-quantity">
Quantity: &nbsp;
<div class="quantity">
<p class="quantity-button" data-index="${index}" data-
action="decrease">-</p>
<span>${item.quantity}</span>
<p class="quantity-button" data-index="${index}" data-
action="increase">+</p>
</div>
</div>
</div>
<p class="remove-from-cart" data-index="${index}">X</p>
`;

cartItemsContainer.appendChild(itemElement);

total += item.price * item.quantity;


});

cartTotalElement.textContent = `Total: Rs${total.toFixed(2)}`;


}
}

renderCart(); // Render cart items initially

Page | 96
cartItemsContainer.addEventListener('click', function(event) {
if (event.target.classList.contains('quantity-button')) {
const index = parseInt(event.target.dataset.index);
const action = event.target.dataset.action;

if (action === 'decrease') {


if (cartItems[index].quantity > 1) {
cartItems[index].quantity -= 1;
} else {
cartItems.splice(index, 1); // Remove item if quantity is 1 and '-'
button is clicked
}
} else if (action === 'increase') {
cartItems[index].quantity += 1;
}

localStorage.setItem('cartItems', JSON.stringify(cartItems)); // Update


localStorage
renderCart(); // Re-render cart after quantity change or item removal
}
});

cartItemsContainer.addEventListener('click', function(event) {
if (event.target.classList.contains('remove-from-cart')) {
const index = parseInt(event.target.dataset.index);
cartItems.splice(index, 1); // Remove item from cartItems array
localStorage.setItem('cartItems', JSON.stringify(cartItems)); // Update
localStorage
renderCart(); // Re-render cart after item removal
}
});
});

Home.js:
const header = document.querySelector("header");

window.addEventListener ("scroll", function() {


header.classList.toggle ("sticky", window.scrollY > 0);
});

Firebase.js:
const firebaseConfig = {
Page | 97
apiKey: "AIzaSyC5ws8vODpWsEjh_9lFjLbNilKdJ5miiiA",
authDomain: "booking-3c528.firebaseapp.com",
databaseURL: "https://booking-3c528-default-rtdb.firebaseio.com",
projectId: "booking-3c528",
storageBucket: "booking-3c528.appspot.com",
messagingSenderId: "378143886888",
appId: "1:378143886888:web:b53b6424a4bdac98102f1d"
};

firebase.initializeApp(firebaseConfig);

var restaurantPageRef = firebase.database().ref("booking");

document.getElementById("bookingForm").addEventListener("submit", submitForm);

function submitForm(e) {
e.preventDefault();

var name = getElementVal("name");


var email = getElementVal("email");
var mobile = getElementVal("mobile");
var people = getElementVal("people");
console.log(name, email, mobile, people);
}

const getElementVal = (id) => {


return document.getElementById(id).value;
};

Mail.js:
const firebaseConfig = {
apiKey: "AIzaSyDmPEtEsNtxnGt-i4rYdTztfGSoAy2gkfE",
authDomain: "contactform-4e4bb.firebaseapp.com",
databaseURL: "https://contactform-4e4bb-default-rtdb.firebaseio.com",
projectId: "contactform-4e4bb",
storageBucket: "contactform-4e4bb.appspot.com",
messagingSenderId: "720010558004",
appId: "1:720010558004:web:eeece68921e98001146861"
};

firebase.initializeApp(firebaseConfig);

var contactformDB = firebase.database().ref('contactform')

document.getElementById('contactform').addEventListener('submit',
submitForm);

Page | 98
function submitForm(e){
e.preventDefault();

var name = getElementByVal("name");


var email = getElementByVal("email");
var mobile = getElementByVal("mobile");
var people = getElementByVal("people");

console.log(name, email, mobile, people);


}

const getElementByVal = (id) =>{


return document.getElementById(id).value;
};

Page | 99
Chapter 8
System Testing
Introduction

Testing should be done throughout the implementation process. Even before an application is
implemented, it makes sense to verify that the basic platform can achieve its design capabilities. System
testing is a critical process. Testing is a process of executing a program with the explicit intention of
finding errors that is, making the program fail. This help in finding the bottlenecks in the system.
Executing a program in a simulated environment performs testing. The feedback from testing phase
generally produces changes in the software to deal with errors and failures that are uncovered.

8. 1 Black box testing:

In Black Box testing or functional testing test cases are decided. Test cases are decided based on the
requirements or the specifications of the program or module.

Black Box testing is done in the project to remove the errors:

 Incorrect or missing function.


 Interface errors.
 Errors in data structures or external database access.
 Behavioral or performance error.
 Errors in initiation & termination.

8.2 White Box testing:

The White Box testing or Structural testing performs close operation of procedural details. They test the
software logical path by having test cases exercising specific sets of conditions and loops.

White Box testing is done in the project to remove the errors.

 All modules path has been exercised at least once.


 Exercised on logical decisions.
 Executed all loops at their boundaries and within their operational bounds.
 Exercised internal data structure to ensure their validity.

Page | 100
8.3 Unit Testing:

Unit testing focuses on verification efforts of the smallest grid of software designing i.e. a software
component or module is tested. This testing is done at the coding phase. This testing uses procedural
design as guide to test major controls path and uncovers errors within the module boundary.

Following tests were performed during unit test:

1. Module Interface Testing:

Module interface was tested to ensure information flow in and out of the program unit.

2. Local Data Structure Testing:

Local Data Structure were tested to ensure that data store temporally maintain their integrity during all
steps in algorithm execution.

3. Boundary Condition Test:

Boundary Conditions were tested to make sure that the modules operate properly at boundaries.

4. Independent Path Test:

All independent pathsthrough control structure were checked to make sure that all statements in a
module have been executed.

5. Error Handling Path Test:

Error handling path test was performed to handle exceptions.

8.4 Integration Testing:

Integration testing is done to tackle the problem of interface i.e., putting all the interfaces together. When
the separate modules are put together and work in an integrated manner, this testing is performed. This
testing is a Systematic technique. This testing is performed to check that data should not be lost across
an interface. The objective is to take unit tested modules and build a program structure that has been
dictated by design.

Page | 101
8.5 System Testing:

System testing is done when the entire system has been fully integrated. The purpose of the system
testing is to test how the different modules interact with each other and whether the system provides the
functionality that was expected.

Page | 102
FUTURE PROSPECTIVE

1. Enhanced Features: Continuously adding new features and functionalities to improve user
experience and meet evolving user needs. This may include integrating advanced workout
tracking capabilities, personalized diet plans, and interactive fitness challenges.

2. Mobile Application Development: Developing a dedicated mobile application for the


Fitness Tracker Website to provide users with convenient access to fitness tracking tools and
resources on their smartphones and tablets.

3. Integration with Wearable Devices: Integrating with popular wearable fitness devices
such as smartwatches and fitness trackers to enable seamless synchronization of workout data
and health metrics for more comprehensive tracking and analysis.

4. Community Building: Building a vibrant online community within the Fitness Tracker
Website where users can connect with like-minded individuals, share their fitness journey,
and provide mutual support and motivation.

5. Machine Learning and AI: Leveraging machine learning and artificial intelligence
algorithms to provide personalized fitness recommendations, predictive analytics, and real-
time feedback based on user data and behavior patterns.

6. Expansion of Content: Expanding the content library with informative articles, videos, and
expert advice on various fitness topics, nutrition, and wellness to educate and empower users
in their health and fitness journey.

7. Integration with Health Services: Partnering with healthcare providers, nutritionists, and
wellness professionals to offer integrated health services such as telemedicine consultations,
nutrition counseling, and online coaching programs.

Page | 103
8. Gamification: Implementing gamification elements such as challenges, achievements,
and rewards to make fitness tracking more engaging and motivating for users, encouraging
them to stay committed to their goals.

9. Localized Versions: Creating localized versions of the Fitness Tracker Website to cater to
different regions and languages, ensuring accessibility and usability for a diverse global
audience.

10. Continuous Improvement: Continuously gathering feedback from users and stakeholders
to identify areas for improvement and refinement, and iteratively enhancing the platform
based on user insights and market trends.

Page | 104
LIMITATIONS

 Technical Constraints: Depending on the available technology and resources, there


may be limitations in implementing certain features or functionalities desired for the
Essence restaurant website.

 User Adoption: There may be limitations in user adoption and acceptance of new
digital features or processes, particularly among restaurant staff who may require
training or support to adapt to changes.

 Data Privacy and Security: Ensuring compliance with data privacy regulations and
implementing robust security measures to protect customer data and sensitive
information presents ongoing challenges and risks.

 Maintenance and Support: Ongoing maintenance and support requirements for the
website, including updates, bug fixes, and user support, may pose limitations in terms
of resources and capacity over time.

 Organizational Culture: The existing organizational culture and mindset within


Essence restaurant may present limitations in terms of embracing digital innovation
and adapting to new processes and technologies.

Page | 105
CONCLUSION

In conclusion, while the Essence restaurant website project promises to deliver substantial
benefits in terms of enhancing the restaurant's digital presence and operational efficiency, it's
imperative to acknowledge and meticulously address the array of limitations and challenges
that may emerge during its execution. By proactively considering and strategically mitigating
these constraints, spanning technical hurdles, budgetary constraints, and potential user
adoption hurdles, the project can be steered towards successful fruition. Through a blend of
foresighted planning, transparent communication, and a steadfast commitment to adaptability,
the Essence restaurant website endeavor has the potential not only to fulfill its stated
objectives but also to serve as a transformative force, propelling the restaurant towards
heightened growth, augmented customer satisfaction, and fortified positioning as a
preeminent dining destination amidst the dynamic and fiercely competitive restaurant
industry landscape.

Page | 106
Bibliography

 Microsoft Corporation. (2023). Microsoft Visual Studio. Retrieved from


https://visualstudio.microsoft.com/
 W3Schools. (2023). HTML Tutorial. Retrieved from
https://www.w3schools.com/html/
 Chat Gpt and Google gemini like AI‘s.
 JavaScript Documentation :
https://devdocs.io/javascript/

 Google Firebase Documentation

 Laura Lemay, Rafe Colburn , Jennifer Kymin : Mastering HTML , CSS AND
JAVASCRIPT WEB publishing

Page | 107

You might also like