Food Order Report

ADMINISTRATIVE MANAGEMENT COLLEGE
18th KM, Bannerghatta Road, Bangalore – 560076
DEPARTMENT OF COMPUTER APPLICATIONS
A
Project Report on
Food Order System
Submitted in partial fulfilment of the requirement

For the award of the degree
Bachelor of Computer Applications
Under the Guidance of SUBMITTED BY

Mrs Sowmya J Mohammed Afnan [19SBSB7027]
ADMINISTRATIVE MANAGEMENT COLLEGE
18th KM, Bannerghatta Road, Bangalore – 560076
DEPARTMENT OF COMPUTER APPLICATIONS
Bachelor of Computer Applications
CERTIFICATE
This is to certify that the project titled Food Order System was successfully
completed by Mohammed Afnan bearing register number 19SBSB7027 of 6th
semester Bachelor of Computer Applications as prescribed by Bangalore
University for the academic year 2021-2022 under our guidance and supervision.
Signature of the lecturer-in-charge Head of the Department

(Signature with seal)
Date of examination:
Examiners:
1. ___________________
2. ___________________
DECLARATION
I hereby declare that project being submitted entitled “FOOD ORDER

SYSTEM” for the partial fulfilment for the award of the “BACHELOR OF
COMPUTER APPLICATIONS” degree is an authenticated record of work
carried by me in the final year of BCA session (2022) submitted to
ADMINISTRATIVE MANAGEMENT COLLEGE, BANGALORE under
the guidance and supervision of Mrs. Sowmya J.
Thanking you,
Mohammed Afnan [19SBSB7027]

ACKNOWLEDGEMENT
I would like to say very big thank you to my guidance Mrs. Sowmya J. Department of
Computer Applications, for all the support and encouragement that ma’am provided me for
working on this project. Without her guidance and constant feedback, this project would not
have been completed.
Besides my guidance, I would also like to thank Dr. Gomathy Prathima E., Head of Computer
Applications, for her insightful comments and encouragement which inspired me to widen my
research from various perspectives.
I sincerely thank Dr. Sudharshan G M, Principal, Administrative Management College, for

granting permission to carry out on my project.
My sincere thanks to all the teaching and non-teaching staff of Department of Computer
Applications and to all my friends for their support and providing the required skills and
information on the project.
INDEX
SL. No CONTENTS Page no.
ABSTRACT 6-7
1 INTRODUCTION 8
1.1 EXISTING SYSTEM 9
1.2 SCOPE 9
1.3 ISSUES WITH EXISTING SYSTEM 10
1.4 HOW THE ISSUES IN EXISTING SYSTEM IS
ADDRESSED USING PROPOSED SYSTEM 11
2 SYSTEM ANALYSIS 12
2.1 REQUIREMENT ANALYSIS 13-15
2.2 ARCHITECTURE DIAGRAM 15
2.3 Functional Decomposition 16-22
3 SYSTEM DESIGN 23-29
ER diagram / DFD 30-32
Data Dictionary 33
Table Design 34-39
Input forms design 40-41
4 CODING 42
SAMPLE CODE 42-134
DATA VALIDATIONS 134
5 TESING 135-138
TEST CASES 139-140
6 OUTPUT SCREENS 141-144
7 FUTURE ENHANCEMENTS 145-146
8 CONCLUSION 147-148
9 BIBLIOGRAPHY 149-150
6
Food Order System
ABSTRACT
Bachelor Of Computer Application

7
Food Order System
Project Abstract
The purpose of Online Food Ordering System is to automate the existing manual system by the
help of computerized equipment’s and full-fledged computer software, fulfilling their
requirements, so that their valuable data/information can be stored for a longer period with easy
accessing and manipulation of the same. The required software and hardware are easily
available and easy to work with.
Online Food Ordering System, as described above, can lead to error free, secure, reliable and
fast management system. It can assist the user to concentrate on their other activities rather to
concentrate on the record keeping. Thus, it will help organization in better utilization of
resources. The organization can maintain computerized records without redundant entries. That
means that one need not be distracted by information that is not relevant, while being able to
reach the information. The aim is to automate its existing manual system by the help of
computerized equipment’s and full-fledged computer software, fulfilling their requirements, so
that their valuable data/information can be stored for a longer period with easy accessing and
manipulation of the same. Basically, the project describes how to manage for good performance
and better services for the clients.

8
Food Order System
INTRODUCTION

9
Food Order System
1.0 INTRODUCTION
The aim of developing Online Food Ordering system project is to replace the traditional way
of taking orders with computerized system. Another important reason for developing this
project is to prepare order summary reports quickly and in correct format at any point of time
when required.
Online Food Ordering System has a very lot of scope. This project can be used by any
restaurants or fast foods for customers for keeping their order records. This project is easy, fast
and accurate. The application is reduced as much as possible to avoid errors while entering the
data. It also provides error message while entering invalid data. No formal knowledge is needed
for the user to use this system. Thus, by this all it proves it is user-friendly. Online Food
Ordering System, as described above, can lead to error free, secure, reliable and fast
management system. It can assist the user to concentrate on their other activities rather to
concentrate on the record keeping. Thus, it will help organization in better utilization of
resources.
1.1 EXISTING SYSTEM

In the existing system the exams are done only manually but in proposed system we have
to computerize the exams using this application.
• Lack of security of data.
• More man power.
• Time consuming.
• Consumes large volume of pare work.
• Needs manual calculations.
• No direct role for the higher officials.
1.2 SCOPE
This system is a bunch of benefits from various points of view. This online application enables
the end-users to register to the system online, select the food items of their choice from the
menu list, and order food online. Also, the payment can be made through online mode or at the
time of home delivery depending upon the customer’s choice and convenience. The selection
made by the customers will be available to the hotel reception or to the person handling the
work assignment. Now this same person will assign the orders to the specialist chef to be
completed within a fixed duration of time. As soon as the chef prepares the food, the later
person forwards the parcels to the delivery persons assigned with the location and customer
identity of the customer along with the bill status.

10
Food Order System
1.3 ISSUES WITH EXISTING SYSTEM
• Not User Friendly: The existing system is not user friendly because the retrieval of data is
very slow and data is not maintained efficiently.
• Difficulty in report generating: We require more calculations to generate the report so it is
generated at the end of the session.
• Manual control: All calculations to generate report is done manually so there is greater chance
of errors.
• Lots of paperwork: Existing system requires lot of paper work. • Loss of even a single
register/record led to difficult situation because all the papers are needed to generate the reports.
• Time consuming: Every work is done manually so we cannot generate report in the middle
of the session or as per the requirement because it is very time consuming.
1.4 HOW THE ISSUES IN EXISTING SYSTEM IS ADDRESSED USING

PROPOSED SYSTEM
• User friendly: The proposed system is user friendly because the retrieval and storing of data
is fast and data is maintained efficiently. Moreover, the graphical user interfaces provided in
the proposed system, which provides user to deal with the system very easily.
• No paperwork: The proposed system does not require any paper work. All the data is feed
into the computer immediately and reports can be generated through computers. Moreover, all
the books are soft copies and hence does not require any physical paper
• You will find affordable and excellent prices available online since you get food products
directly from the seller without involving any other second party
• Most of the online shops have discounts and rebates too. Also, online shops are only supposed
to take a sales tax when they have found your physical location, even when you purchase from
a restaurant across the world.
• Online choices are fascinating. You can find different products and brands from various
sellers all of them in the same place. You can view all the latest trends even without having to
spend your money on fare. You have great chance to shop from all retailers from different
countries without any limit. There is also a much choice of sizes and colours, and stock is
plenty.
• When it comes to online food ordering convenience is the best part. There is no any other
place you can order comfortably even late at night. You don’t have to queue waiting for a
restaurant assistant to assist you with the purchases. With online food ordering, you can order
anytime you want to give you great ordering experience.
11
Food Order System
• Most people don’t like crowded places when buying food mostly during special events they
happen to be hectic. Crowded area happens to be chaotic which makes people feel hurried. The
restaurant tends to be stuffy with annoying lousy smell due to the crowd when shopping. More
so, the parking also becomes a big problem. You can avoid all of these becomes a big problem.
You can avoid all of these issues by doing online food ordering.
• Its much easier to compare and research foods and their prices in online food ordering. You
can also share your reviews and information with other people who are shopping that has
experience with a particular piece or even the seller.
• Most of the times, when you decide to visit the store in person; you might end up spending a
lot of money than you had planned. It also comes with other expenses on items such as
transportation, eating out and also there will be more impulse buying. But if you want to prevent
all these from happening you can try online food ordering; it will save you all these expenses.

12
Food Order System
SYSTEM ANALYSIS

13
Food Order System
SYSTEM ANALYSIS
The system is very simple and has easy to use interface and secured transaction. The system is
there to provide convenience to customers. Customers are attracted to online shopping not only
because of high levels of convenience, but also because of broader selections, competitive
pricing, and greater access to information. The system is designed to help the Customer find
the order the products from the Internet. The major components of the system are registration,
login, browsing through the products and either placing an order or adding the product in the
cart. From the cart they can order multiple products. The Customers have to register themselves
then the registered Customer has to enter the Customer ID and Password to login to the website
to purchase the products.
Advantages:
• Security of data.
• Ensure data accuracy.
• Proper control of the higher officials.
• Minimize manual data entry.
• Minimum time needed for the various processing.
• Greater efficiency.
• Better service.
• User friendliness and interactive.
2.1 REQURIMENT ANALYSIS
Design Objectives:
• Practicality: The system is quite stable and can be operated by the people with average
intelligence.
• Efficiency: The system has enhanced accuracy, timeliness and comprehensiveness of the
system output.
• Cost: The system aims for minimum cost subject on the condition that it must satisfy the
entire requirement.
• Flexibility: The system can be modified depending on the changing needs of the customer.
Such modifications can entail extensive reconstructing or recreation of the software. It is also
portable to different computer systems.
• Security: The system covers the areas of hardware reliability, fallback procedures and
physical security of data.
14
Food Order System
FEASIBILITY STUDY
After doing the project Online Food Ordering System, study and analysing all the existing or
required functionalities of the system, the next task is to do the feasibility study for the
project. All projects are feasible - given unlimited resources and infinite time. Feasibility
study includes consideration of all the possible ways to provide a solution to the given
problem. The proposed solution should satisfy all the user requirements and should be
flexible enough so that future changes can be easily done based on the future upcoming
requirements.
The various feasibility studies are
1. Operational Feasibility
2. Technical Feasibility
3. Economic Feasibility
Operational Feasibility:
No doubt the proposed system is fully GUI based that is very user friendly and all inputs to
be taken all self-explanatory even to a layman. Besides, a proper training has been conducted
to let know the essence of the system to the users so that they feel comfortable with new
system. As far our study is concerned the clients are comfortable and happy as the system has
cut down their loads and doing.
Technical Feasibility:
This included the study of function, performance and constraints that may affect the ability to
achieve an acceptable system. For this feasibility study, we studied complete functionality to
be provided in the system, as described in the System Requirement Specification (SRS), and
checked if everything was possible using different type of frontend and backend platform.
Economic Feasibility:
This is a very important aspect to be considered while developing a project. We decided the
technology based on minimum possible cost factor.
• All hardware and software cost has to be borne by the organization.
• Overall, we have estimated that the benefits the organization is going to receive from the
proposed system will surely overcome the initial costs and the later on.

15
Food Order System
2.2 ARCHITECTURE DIAGRAM

16
Food Order System
2.3 FUNCTIONAL REQUIREMENTS
Functional Requirements: This section provides requirement overview of the

system. Various functional modules that can be implemented by the system will be –
Customers:
1. Sign Up (only for new customer)
Input: “Signups” option selected.
Output: customer prompted to enter the details.
2. Login
Input: “Login” option selected.
Output: customer prompted to enter the username and password.
3. Forgot password
Input: “forgot password” option selected.
Output: customer prompted to enter the email and new password.
4. Select food items

State: The customer has logged in and the main menu has been displayed.
Input: Items are selected customer feel free to order.
Output: System will display selected items.
5. Changes to order
Input: “go to cart” option selected.
Output: customer can delete or add food item in order.
6. Review the order before submitting

Input: “Order Place” option selected.
State: Customer name, phone number, location (address) display or enter the all
of information.
Output: customer prompted to pay the bill.
7. Payment
State: The different types of payment method are display.
Input: choose any payment method.
Output: customer prompted to enter the verification code if choose online
payment.
State: Display order no., payment details and confirmation of delivery.
8. Logout
Input: “Logout” option selected.
Output: you are successfully logout.
State: System display login page.

17
Food Order System
Employees:
1. Login (Employee login page)

Output: Employee prompted to enter the username and password.
2. Modify Menu
State: In the system all the items are displayed with their rates.
Input: “Change” option selected.
Output: Employee can make changings in menu like adding or removing food
items which are not available and changings rate of items.
3. Order list
Input: “Order list” option selected.
State: System display all order details.
Output: Employee can make changings like confirm order, prepared order,
delivered order, not confirm order.
4. Logout
State: System display login page.
Administrators:
➢ Administrators must be able to use Employees all features.
1. Login (admin login page)
Output: admin prompted to enter the username and password.
2. Logout
State: System display login page

18
Food Order System
2.3.1 NON-FUNCTIONAL REQUIREMENT
1. Portability
System running on one platform can easily be converted to run on another
platform.
2. Reliability
The ability of the system to behave consistently in a user-acceptable manner when operating
within the environment for which the system was intended.
3. Availability
The system should be available at all times, meaning the user can access it using a web
browser, only restricted by the down time of the server on which the system runs.
4. Maintainability
A commercial database is used for maintaining the database and the application
server takes care of the site.
5. Security
Secure access of confidential data (customer information).
6. User friendly
System should be easily used by the customer.
7. Performance
Performance should be fast.
8. Efficient
System should be efficient that it won’t get hang if heavy traffic of order is placed.
9. Safety
Data in the database of system should not loss or damage.
10. Privacy
Personal data of the system should not disclose to anyone.

19
Food Order System
SOFTWARE- REQUIREMENTS
• Front-end: HTML, JavaScript, CSS, Python
• Back-end: SQLite
• IDE: Vs Code/PyCharm
• Operating System: Windows 7 and above.
HARDWARE REQUIREMENTS
• Processor: Intel i3.
• RAM: 4 GB or More.
• Hard Disk: 64 GB or More.
• Devices: Monitor, Keyboard, Mouse, Printer.
FRONT-END
Python (Django):
Django was design and developed by Lawrence journal world in 2003 and publicly released
under BSD license in July 2005. Currently, DSF (Django Software Foundation) maintains its
development and release cycle.
Django was released on 21, July 2005. Its current stable version is 2.2.5 which was released
April 1, 2019.
The latest official version is 2.2.5 (LTS). Read the 2.2.5 release notes, then install it with pip
pip install Django==2.2.5
As part of the Django 3.0 development process, Django 3.0a1 is available. This release is
only for users who want to try the new version and help identify remaining bugs before the
3.0 release.
Install the alpha with pip:
pip install --pre-Django
Complete History of Django:

Version Date Description
0.90 16 Nov 2005
0.91 11 Jan 2006 magic removal.
0.96 23 Mar 2007 newforms, testing tools.
1.0 3 Sep 2008 API stability, decoupled admin, Unicode.
1.1 29 Jul 2009 Aggregates, transaction-based tests.
1.2 17 May 2010 Multiple db. connections, CSRF, model validation
1.3 23 Mar 2011 Time zones, in browser testing, app templates.
1.4 26 Feb 2013 Python 3 Support, configurable user model.
1.5 6 Nov 2013 Dedicated to Malcolm Trainsick, db. transaction
management, connection pooling.
20
Food Order System
1.6 2 Sep 2014 Migrations, application loading and configuration.

1.7 2 Sep 2014 Migrations, application loading and configuration.
1.8 1 Apr 2015 Native support for multiple template engines. Supported
until at least April 2018
1.9 1 Dec 2015 Automatic password validation. New styling for admin
interface.
1.10 1 Aug 2016 Full text search for PostgreSQL. New-style middleware.
1.11 - Last version to support Python 2.7. Supported until at
least April 2020
2.0 Dec 2017 First Python 3-only release, Simplified URL routing
syntax, Mobile friendly admin.
BACK-END:
SQLite was designed originally on August 2000. It is named SQLite because it is very light
weight (less than 500Kb size) unlike other database management systems like SQL Server or
Oracle.
Year Happenings
2000 SQLite was designed by D. Richard Hipp for the purpose of
no administration required for operating a program.
2000 In August SQLite 1.0 released with GNU database manager.
2011 Hipp announced to add UNQl interface to SQLite db and to
develop UNQLite (Document oriented database).
SQLite Features/ Why to use SQLite
SQLite is totally free: SQLite is open-source. So, no license is required to work with it.
SQLite is serverless: SQLite doesn't require a different server process or system to operate.
SQLite is very flexible: It facilitates you to work on multiple databases on the same session
on the same time.
Configuration Not Required: SQLite doesn't require configuration. No setup or
administration required.
SQLite is a cross-platform DBMS: You don't need a large range of different platforms like
Windows, Mac OS, Linux, and Unix. It can also be used on a lot of embedded operating
systems like Symbian, and Windows CE.
Storing data is easy: SQLite provides an efficient way to store data.
Variable length of columns: The length of the columns is variable and is not fixed. It
facilitates you to allocate only the space a field needs. For example, if you have a varchar
(200) column, and you put a 10 characters' length value on it, then SQLite will allocate only
20 characters' space for that value not the whole 200 space.
Provide large number of API's: SQLite provides API for a large range of programming
languages. For example: .Net languages (Visual Basic, C#), PHP, Java, Objective C, Python
and a lot of other programming language.
21
Food Order System
SQLite is written in ANSI-C and provides simple and easy-to-use API.

SQLite is available on UNIX (Linux, Mac OS-X, Android, iOS) and Windows (Win32,
WinCE, WinRT).
LITERATURE SURVEY
Various studies have identified the problems they faced when setting up a restaurant. During
the assessment of the current system, the following concerns were discovered:
A. Putting orders for customers who come to the restaurant, reviewing the menu items
available, picking the appropriate things, placing the order, and paying. This method requires
manual labour and time for the customer.
B. When a customer wants to order by phone, the customer is unable to see a visual copy of
the menu available at the restaurant, this also has no guarantee that the order has been placed
on the appropriate menu items. Every restaurant needs someone or someone to take the order
in person or by phone, to give the customer a rich feel and even consider payment.
C. The main difference between the online ordering of food and dining at the environmental
restaurant around us. If one person eats at home or does not feel the change in nature and
relaxes. But comfort is the highest level of online food that is removed. When eating out — a
luxury restaurant with good design and bright music that place offers better relaxation than
anything else.
MODULES
❖ The system consists of 4 basic modules namely
1. User Module
2. Product Module
3. Order Module
4. Order Status Update Module
➢ Implementation is done using Django.
❖ User Module
The main aim of the User Module is providing all the functionality related users. It tracks all
the information of the customers. We have developed all type of operations of the customers.
This is role-based Module Where Admin can perform each and every operation on data but
customer only view his/her data, so access level restrictions have also been implemented on
the project.

22
Food Order System
❖ Product Module
The main purpose for developing the Product Module is to manage Products category wise.
All product will be managed by admin and Customer will be able to see product and buy them.
Admin can see the list, change product details and also add or delete products.
❖ Order Module
The main aim of the Order Module is receiving all order details and display them. It is designed
to be used only by restaurant employees (and admin), and provides the following functions:
Retrieve new orders from the database and display the orders in an easily readable, graphical
way. Under “View Order” a customer will be able to see only his/her order.
❖ Order Status Update Module

The main aim of this Module is updating all information related to order. Admin or employee
can change or add order status. Customer only see his/her order status details. Under “Tracker”
a customer will be able to see his/her order all status details.

23
Food Order System
SYSTEM DESIGN

24
Food Order System
INTRODUCTION
Systems design is the process of defining elements of a system like modules, architecture,
components and their interfaces and data for a system based on the specified requirements. It
is the process of defining, developing and designing systems which satisfies the specific
needs and requirements of a business or organization.
3.1 UML DIAGRAMS
UML (Unified Modelling Language) is a standard language for specifying, visualizing,

constructing, and documenting the artefacts of software systems.
• UML stands for Unified Modelling Language.
• UML is different from the other common programming languages such as C++, Java,
COBOL, etc.
• UML is a pictorial language used to make software blueprints.
• UML can be described as a general-purpose visual modelling language to visualize, specify,
construct, and document software system.
• Although UML is generally used to model software systems, it is not limited within this
boundary. It is also used to model non-software systems as well. For example, the process flow
in a manufacturing unit, etc.
3.1.1 GOALS OF UML
• A picture is worth a thousand words; this idiom absolutely fits describing UML. Object-
oriented concepts were introduced much earlier than UML. At that point of time, there were
no standard methodologies to organize and consolidate the objectoriented development. It was
then that UML came into picture.
• There are a number of goals for developing UML but the most important is to define some
general-purpose modelling language, which all modelers can use and it also needs to be made
simple to understand and use.
• UML diagrams are not only made for developers but also for business users, common people,
and anybody interested to understand the system. The system can be a software or non-software
system. Thus, it must be clear that UML is not a development method rather it accompanies
with processes to make it a successful system.

25
Food Order System
• In conclusion, the goal of UML can be defined as a simple modelling mechanism to model
all possible practical systems in today’s complex environment.
3.1.2 USECASE DIAGRAM
As the most known diagram type of the behavioural UML diagrams. use case diagram give a
graphic overview of the actors involved in a system; different functions needed by those actors
and how these different functions are interacted. It’s a great starting point for any project
discussion, because you can easily identify the main actors involved and the main processes of
the system.

26
Food Order System
3.2 SEQUENCE DIAGRAM
Sequence diagrams in UML show how objects interact with each other and the order those
interactions occur. It’s important to note that they show the interactions for a particular
scenario. The processes are represented vertically and interaction are shown as arrows. The
sequence diagram of online shopping for a customer is as shown below:

27
Food Order System
3.3 ACTIVITY DIAGRAM: ADMIN

Activity diagram represent workflows in a graphical way. They can be used to describe
business workflow or the operational workflow of any component in a system. Sometimes
activity diagrams are used as an alternative to state machine diagrams. The activity diagram of
online shopping for Admin module is as shown below.

28
Food Order System
3.2.1 ACTIVITY DIAGRAM: LOGIN

29
Food Order System
3.4 STRUCTURE CHART

30
Food Order System
3.5 DFD DIAGRAM

31
Food Order System

32
Food Order System
3.6 ER Diagram (Entity Relationship Diagram)
An entity-relationship model (ER model) describes inter-related things of interest in a

specific domain of knowledge. An ER model is composed of entity types (which
classify the things of interest) and specifies relationships that can exist between
instances of those entity types. Entity-relationship modelling was developed for
database design by Peter Chen and published in a 1976 paper. However, variants of the
idea existed previously. Some ER modelers show super and subtype entities connected
by generalization-specialization relationships, and an ER model can be used also in the
specification of domain-specific ontology. It is usually drawn in a graphical form as
boxes (entities) that are connected by lines (relationships) which express the
associations and dependencies between entities.
An ER model is typically implemented as a database. In a simple relational database

implementation, each row of a table represents one instance of an entity type, and each
field in a table represents an attribute type. In a relational database a relationship
between entities is implemented by storing the primary key of one entity as a pointer or
“foreign key” in the table of another entity. The graphical representation of organization
system elements and association among elements are called as an ER diagram.
• Elements that make up a system are called entities.

• Relationship is the association that describes interaction between entities.
• ER diagram also indicates cardinality ratio.
• DB designer creates the ER diagram to show the entities for which information
needs to be stored and relationship between those entities.

33
Food Order System
3.7 DATA DICTIONARY
A data dictionary contains metadata i.e data about the database. The data dictionary is
very important as it contains information such as what is in the database, who is allowed
to access it, where is the database physically stored etc. The users of the database
normally don't interact with the data dictionary, it is only handled by the database
administrators.
The data dictionary in general contains information about the following −
• Names of all the database tables and their schemas.

• Details about all the tables in the database, such as their owners, their security
constraints, when they were created etc.
• Physical information about the tables such as where they are stored and how.
Table constraints such as primary key attributes, foreign key information etc.
• Information about the database views that are visible.
3.7.1 TABLES
Django migrations
Column Data Type Size

Name
id Int
App Varchar (255)
Name Varchar (255)
Applied Date-Time
SQLite Sequence
Column Name Data Type Size

Name - -
Seq - -

34
Food Order System
Auth Groups Permission

Id Int -
Group id Int -
Permission id Int -
Auth User Groups

Id Int -
User Id Int -
Group Id Int -
Shop Products

id Int -
product name Varchar 50
desc Varchar 200
pub_date Date -
category Varchar 50
image Varchar 100
price Int -
subcategory Varchar 50

35
Food Order System
3.7.2 Tables Screenshot
Django Migrations
SQLite Sequence

36
Food Order System
Auth Group Permission
Auth User Group
Auth User User Permission

37
Food Order System
Django Admin Log
Django Content Type
Auth Permission

38
Food Order System
Auth Group
Auth User
Django Session

39
Food Order System
Shop Product
Shop Order Update

40
Food Order System
3.8 Input forms design
Login Form
Sign Up Form

41
Food Order System
Contact Us Form
Forget Password Form

42
Food Order System
CODING

43
Food Order System
4.1 SAMPLE CODE
Manage.py
#!/usr/bin/env python
"""Django's command-line utility for administrative tasks."""
import os
import sys
def main():
"""Run administrative tasks."""
os.environ.setdefault('DJANGO_SETTINGS_MODULE',
'Restaurant_management_system.settings')
try:
from django.core.management import execute_from_command_line
except ImportError as exc:
raise ImportError(
"Couldn't import Django. Are you sure it's installed and "
"available on your PYTHONPATH environment variable? Did you "
"forget to activate a virtual environment?"
) from exc
execute_from_command_line(sys.argv)
if __name__ == '__main__':
main()

44
Food Order System
Restaurant_Management_System
Templates
Index.html
<!doctype html>
<html lang="en">
<head>


<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ
0Z" crossorigin="anonymous">
<title>Welcome To Food Mania</title>

</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Welcome To Food Mania</h1>
<p class="lead">This is a simple project for online food order system.</p>
<a class="btn btn-primary btn-lg" href="/shop" role="button">User</a>
<a class="btn btn-primary btn-lg" href="/admin" role="button">Admin</a>
<a class="btn btn-primary btn-lg" href="/admin" role="button">Employee</a>
<hr class="my-4">
<footer>
<p>© Company 2022-2023</p>
</footer>
</div>


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkf
j" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7l
N" crossorigin="anonymous"></script>
45
Food Order System
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-
B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>
Admin
Base_site.html
{% extends 'admin/base.html' %}
{%load static%}
{% block branding %}
<h1 id="head">
<a href="http://127.0.0.1:8000/admin"><img
src="http://127.0.0.1:8000/media/shop/images/logo.png" width="35" height="35"
/></a>
The Food Mania
</h1>
{% endblock %}
{% block extrastyle%}
<link rel="stylesheet" href="{% static 'shop/assets/css/adminstyle.css'%}" />
{%endblock %}
Settings.py
"""
Django settings for Restaurant_management_system project.
Generated by 'django-admin startproject' using Django 3.1.3.
For more information on this file, see

https://docs.djangoproject.com/en/3.1/topics/settings/
For the full list of settings and their values, see

https://docs.djangoproject.com/en/3.1/ref/settings/
"""
from pathlib import Path

import os
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
# Quick-start development settings - unsuitable for production

# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/
46
Food Order System
# SECURITY WARNING: keep the secret key used in production secret!

SECRET_KEY = 'hz8(ou+a7kq72y2@$*w1uhmo)dy_g++9lul1p*+mw%=jgw5(5f'
# SECURITY WARNING: don't run with debug turned on in production!

DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'rangefilter',
'shop.apps.ShopConfig',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'Restaurant_management_system.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': ['Restaurant_management_system/templates'],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
47
Food Order System
WSGI_APPLICATION = 'Restaurant_management_system.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
# 'ENGINE': 'django.db.backends.mysql',
# 'NAME': 'foodMania', # name of the database
# 'USER': 'root',
# 'PASSWORD': '',
# 'HOST': 'localhost',
# 'PORT': '3306',
}
}
# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME':
'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'Asia/Kolkata'

48
Food Order System
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)

# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
# Managing media
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
# SMTP Configuration
EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = 587
EMAIL_USE_TLS = True
EMAIL_HOST_USER = '[email protected]' # enter you email address
EMAIL_HOST_PASSWORD = 'frzhvvhspctpwwjm' # enter your password
Urls.py
"""Restaurant_management_system URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/3.1/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
from . import views
49
Food Order System
from django.contrib.auth import views as auth_views
urlpatterns = [
path('', views.index, name='index'),
path('admin/', admin.site.urls),
path('shop/', include('shop.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Shop
Static
Asset
Css
Adminstyle.css
.dashboard #content-main {
float: left;
width: 182%;
}
.dashboard #content-related {
float: right;
width: 317px;
position: relative;
margin-right: -328px;
}
.login {
background: #a25757d9 !important;
}
.login #header {
background: #aa1713;
}
#header h1 {
font-size: 19px !important;
color: #ffff00;
font-weight: bold;
}
img {
margin-right: 8px;
}
input[type="submit"] {
background: #0455ff;
}
form#login-form {
50
Food Order System
font-weight: bold;
}
.module caption {
background: #354750;
padding: 11px;
font-weight: bold;
}
#content-related .module h2 {
font-weight: bold;
background: darkgrey;
color: #000;
}
.content h1 {
font-weight: bold;
}
#user-tools {
font-weight: bold;
font-size: 13px;
}
body.dashboard {
background: #d3d3d3;
}
th {
padding: 10px;
}
div.breadcrumbs {
background: #b80f0f;
font-weight: bold;
}
nav#nav-sidebar {
margin-top: 10px;
}
button#toggle-nav-sidebar {
background: cadetblue;
color: #000000;
font-size: 24px;
}
#changelist table thead th {
background: burlywood;
font-family: cursive;
padding: 4px !important;
font-size: 12px !important;
}
table thead th .text a, table thead th .text span {
color:black;
}
.app-auth .content tr:nth-child(odd), .app-shop .content tr:nth-child(odd) {
background: #ffe5e5;
}
51
Food Order System
.app-auth .content tr:nth-child(even), .app-shop .content tr:nth-child(even) {

background: #ececec;
}
.object-tools a.addlink {
background-color: blue;
}
Style,css
/**
* Template Name: Shuffle - v2.3.1
* Template URL: https://bootstrapmade.com/bootstrap-3-one-page-template-free-
shuffle/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
color: #334240;
}
a{
color: #1bbca3;
}
a:hover {
color: #2ae0c4;
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {

font-family: "Roboto", sans-serif;
}
/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
position: fixed;
display: none;
width: 40px;
height: 40px;
border-radius: 3px;
right: 15px;
bottom: 15px;
background: #1bbca3;
color: #fff;
52
Food Order System
transition: display 0.5s ease-in-out;

z-index: 99999;
}
.back-to-top i {
font-size: 24px;
position: absolute;
top: 8px;
left: 8px;
}
.back-to-top:hover {
color: #fff;
background: #21dfc2;
transition: background 0.2s ease-in-out;
}
/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
height: 70px;
transition: all 0.5s;
z-index: 997;
padding: 10px 0;
background: #fff;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}
#header .logo h1 {
font-size: 28px;
margin: 0;
padding: 10px 0;
line-height: 1;
font-weight: 400;
}
#header .logo h1 a, #header .logo h1 a:hover {

color: #425451;
font-family: "Poppins", sans-serif;
font-weight: 600;
}
#header .logo img {

padding: 0;
margin: 0;
max-height: 40px;
}
53
Food Order System
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu > ul > li {

position: relative;
white-space: nowrap;
float: left;
}
.nav-menu a {
display: block;
position: relative;
color: #425451;
padding: 14px 15px;
transition: 0.3s;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {

color: #1bbca3;
}
.nav-menu .drop-down ul {
display: block;
position: absolute;
left: 0;
top: calc(100% + 30px);
z-index: 99;
opacity: 0;
visibility: hidden;
padding: 10px 0;
background: #fff;
transition: ease all 0.3s;
}
.nav-menu .drop-down:hover > ul {

54
Food Order System
opacity: 1;
top: 100%;
visibility: visible;
}
.nav-menu .drop-down li {
min-width: 180px;
position: relative;
}
.nav-menu .drop-down ul a {
padding: 10px 20px;
font-size: 13px;
font-weight: 500;
text-transform: none;
color: #08362f;
}
.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu

.drop-down ul li:hover > a {
color: #1bbca3;
}
.nav-menu .drop-down > a:after {

content: "\ea99";
font-family: IcoFont;
padding-left: 5px;
}
.nav-menu .drop-down .drop-down ul {

top: 0;
left: calc(100% - 30px);
}
.nav-menu .drop-down .drop-down:hover > ul {

opacity: 1;
top: 0;
left: 100%;
}
.nav-menu .drop-down .drop-down > a {

padding-right: 35px;
}
.nav-menu .drop-down .drop-down > a:after {

content: "\eaa0";
position: absolute;
right: 15px;
}
55
Food Order System
@media (max-width: 1366px) {

.nav-menu .drop-down .drop-down ul {
left: -90%;
}
.nav-menu .drop-down .drop-down:hover > ul {
left: -100%;
}
.nav-menu .drop-down .drop-down > a:after {
content: "\ea9d";
}
}
/* Mobile Navigation */
.mobile-nav {
position: fixed;
top: 0;
bottom: 0;
z-index: 9999;
overflow-y: auto;
left: -260px;
width: 260px;
padding-top: 18px;
background: rgba(43, 56, 54, 0.7);
transition: 0.4s;
}
.mobile-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-nav a {
display: block;
position: relative;
color: #fff;
padding: 10px 20px;
font-weight: 500;
transition: ease-in-out 0.3s;
}
.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {

color: #56e7d0;
}
.mobile-nav .drop-down > a:after {

content: "\ea99";
56
Food Order System
padding-left: 10px;
position: absolute;
right: 15px;
}
.mobile-nav .active.drop-down > a:after {

content: "\eaa0";
}
.mobile-nav .drop-down > a {

}
.mobile-nav .drop-down ul {
display: none;
overflow: hidden;
}
.mobile-nav .drop-down li {
padding-left: 20px;
}
.mobile-nav-toggle {
position: fixed;
top: 20px;
right: 15px;
z-index: 9998;
border: 0;
background: none;
font-size: 24px;
outline: none !important;
line-height: 1;
cursor: pointer;
text-align: right;
}
.mobile-nav-toggle i {
color: #1bbca3;
}
.mobile-nav-overly {
width: 100%;
height: 100%;
z-index: 9997;
top: 0;
left: 0;
position: fixed;
background: rgba(21, 27, 26, 0.8);
overflow: hidden;
57
Food Order System
display: none;
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav {
left: 0;
}
.mobile-nav-active .mobile-nav-toggle i {
color: #fff;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
width: 100%;
height: 92vh;
background-color: rgba(21, 27, 26, 0.7);
overflow: hidden;
padding: 0;
}
#hero .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#hero .carousel-item::before {
content: '';
background-color: rgba(21, 27, 26, 0.7);
position: absolute;
height: 100vh;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
#hero .carousel-container {
display: flex;
justify-content: center;
align-items: center;
58
Food Order System
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#hero .carousel-content {
text-align: center;
}
#hero h2 {
color: #fff;
margin-bottom: 30px;
font-size: 48px;
font-weight: 700;
}
#hero p {
width: 80%;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
margin: 0 auto 30px auto;
color: #fff;
}
#hero .carousel-inner .carousel-item {

transition-property: opacity;
background-position: center top;
}
#hero .carousel-inner .carousel-item,

#hero .carousel-inner .active.carousel-item-left,
#hero .carousel-inner .active.carousel-item-right {
opacity: 0;
}
#hero .carousel-inner .active,

#hero .carousel-inner .carousel-item-next.carousel-item-left,
#hero .carousel-inner .carousel-item-prev.carousel-item-right {
opacity: 1;
transition: 0.5s;
}
#hero .carousel-inner .carousel-item-next,

#hero .carousel-inner .carousel-item-prev,
#hero .carousel-inner .active.carousel-item-left,
#hero .carousel-inner .active.carousel-item-right {
left: 0;
transform: translate3d(0, 0, 0);
59
Food Order System
#hero .carousel-control-prev, #hero .carousel-control-next {

width: 10%;
}
#hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {

background: none;
font-size: 48px;
line-height: 1;
width: auto;
height: auto;
}
#hero .carousel-indicators li {
cursor: pointer;
opacity: 1;
}
#hero .carousel-indicators .active {

background-color: #1bbca3;
}
#hero .btn-get-started {
font-weight: 500;
font-size: 14px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 32px;
border-radius: 50px;
transition: 0.5s;
line-height: 1;
margin: 10px;
color: #fff;
-webkit-animation-delay: 0.8s;
animation-delay: 0.8s;
border: 2px solid #1bbca3;
}
#hero .btn-get-started:hover {
color: #fff;
}

#hero h2 {
font-size: 28px;
}
60
Food Order System
@media (min-width: 1024px) {

#hero p {
width: 60%;
}
#hero .carousel-control-prev, #hero .carousel-control-next {
width: 5%;
}
}
/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
padding: 60px 0;
}
.section-bg {
background-color: #f2f5f4;
}
.section-title {
text-align: center;
padding-bottom: 30px;
}
.section-title h2 {
font-size: 32px;
font-weight: 700;
padding-bottom: 0;
color: #4b605c;
}
.section-title p {
margin-bottom: 0;
color: #5f7c78;
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 15px 0;
background-color: #f2f5f4;
min-height: 40px;
}

61
Food Order System
.breadcrumbs h2 {
font-size: 24px;
font-weight: 300;
}
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
}
.breadcrumbs ol li + li {
padding-left: 10px;
}
.breadcrumbs ol li + li::before {
color: #6c757d;
content: "/";
}

.breadcrumbs .d-flex {
display: block !important;
}
.breadcrumbs ol {
display: block;
}
.breadcrumbs ol li {
}
}
/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about .content h3 {
font-weight: 500;
font-size: 24px;
color: #58716d;
}
.about .content ul {
list-style: none;
padding: 0;
62
Food Order System
.about .content ul li {
}
.about .content ul i {
font-size: 20px;
padding-right: 4px;
color: #1bbca3;
}
.about .content p:last-child {

margin-bottom: 0;
}
.about .progress {
height: 50px;
display: block;
background: none;
}
.about .progress .skill {

padding: 10px 0;
margin: 0 0 6px 0;
display: block;
font-weight: 600;
color: #58716d;
}
.about .progress .skill .val {

float: right;
font-style: normal;
}
.about .progress-bar-wrap {
background: #e6eceb;
}
.about .progress-bar {
width: 1px;
height: 10px;
transition: .9s;
}
/*--------------------------------------------------------------
# Counts
63
Food Order System
--------------------------------------------------------------*/
.counts .count-box {
box-shadow: -10px -5px 40px 0 rgba(0, 0, 0, 0.1);
padding: 30px;
width: 100%;
background: #fff;
}
.counts .count-box i {
display: block;
font-size: 30px;
color: #1bbca3;
float: left;
}
.counts .count-box span {

font-size: 42px;
line-height: 24px;
display: block;
font-weight: 700;
color: #58716d;
margin-left: 50px;
}
.counts .count-box p {
padding: 30px 0 0 0;
margin: 0;
font-size: 14px;
}
.counts .count-box a {
font-weight: 600;
display: block;
margin-top: 20px;
color: #7c9995;
font-size: 15px;
}
.counts .count-box a:hover {

color: #a7bbb8;
}
/*--------------------------------------------------------------
# Our Services
--------------------------------------------------------------*/
.services .icon-box {
padding: 30px;
64
Food Order System
position: relative;
overflow: hidden;
background: #fff;
box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
transition: all 0.3s ease-in-out;
border-radius: 8px;
z-index: 1;
}
.services .icon-box::before {
content: '';
position: absolute;
background: #aff4e9;
right: -60px;
top: -40px;
width: 100px;
height: 100px;
z-index: -1;
}
.services .icon-box:hover::before {
right: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 0px;
}
.services .icon {
padding-top: 10px;
text-align: center;
border-radius: 50%;
width: 60px;
height: 60px;
}
.services .icon i {
font-size: 36px;
line-height: 1;
color: #fff;
}
.services .title {
65
Food Order System
font-weight: 700;
font-size: 18px;
}
.services .title a {
color: #425451;
}
.services .description {
font-size: 15px;
line-height: 28px;
margin-bottom: 0;
}
.services .icon-box:hover .title a, .services .icon-box:hover .description {

color: #fff;
}
.services .icon-box:hover .icon {

background: #fff;
}
.services .icon-box:hover .icon i {

color: #1bbca3;
}
/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
background: linear-gradient(rgba(66, 84, 81, 0.5), rgba(43, 56, 54, 0.5)),
url("../img/cta-bg.jpg") fixed center center;
padding: 60px 0;
}
.cta h3 {
color: #fff;
font-size: 28px;
font-weight: 700;
}
.cta p {
color: #fff;
}
.cta .cta-btn {
font-weight: 500;
66
Food Order System
font-size: 16px;
letter-spacing: 1px;
padding: 8px 28px;
transition: 0.5s;
margin-top: 10px;
color: #fff;
}
.cta .cta-btn:hover {
}
/*--------------------------------------------------------------
# More Services
--------------------------------------------------------------*/
.more-services img {
border-radius: 0;
}
.more-services .card {
border: 0;
text-align: ceneter;
}
.more-services .card-body {
-moz-text-align-last: center;
text-align-last: center;
}
.more-services .card-title a {
font-weight: 600;
font-size: 18px;
color: #334240;
}
.more-services .card-title a:hover {

color: #1bbca3;
}
.more-services .btn {
padding: 4px 30px 6px 30px;
}

67
Food Order System
.more-services .btn:hover {
color: #fff;
}
/*--------------------------------------------------------------
# Info Box
--------------------------------------------------------------*/
.info-box .content {
padding: 60px 100px 0 100px;
}
.info-box .content h3 {
font-weight: 400;
font-size: 34px;
}
.info-box .content h4 {
font-size: 20px;
font-weight: 700;
margin-top: 5px;
}
.info-box .content p {
font-size: 15px;
color: #6b8a86;
}
.info-box .img {
background-repeat: no-repeat;
background-position: center center;
min-height: 400px;
}
.info-box .accordion-list {
padding: 0 100px 60px 100px;
}
.info-box .accordion-list ul {
padding: 0;
list-style: none;
}
.info-box .accordion-list li + li {
margin-top: 15px;
}
.info-box .accordion-list li {
padding: 20px;
68
Food Order System
background: #f2f5f4;
border-radius: 5px;
}
.info-box .accordion-list a {
display: block;
position: relative;
font-size: 16px;
line-height: 24px;
font-weight: 500;
outline: none;
}
.info-box .accordion-list a:hover {

color: #1bbca3;
}
.info-box .accordion-list span {

color: #e83e8c;
font-weight: 600;
font-size: 18px;
}
.info-box .accordion-list i {
font-size: 24px;
position: absolute;
right: 0;
top: 0;
}
.info-box .accordion-list p {
margin-bottom: 0;
}
.info-box .accordion-list .icon-show {

display: none;
}
.info-box .accordion-list a.collapsed {

color: #343a40;
}
.info-box .accordion-list a.collapsed:hover {

color: #1bbca3;
}
69
Food Order System
.info-box .accordion-list a.collapsed .icon-show {

}
.info-box .accordion-list a.collapsed .icon-close {

display: none;
}

.info-box .content, .info-box .accordion-list {
padding-left: 0;
padding-right: 0;
}
}

.info-box {
/* img {
padding-top: 30px;
} */
}
.info-box .content {
padding-top: 30px;
}
.info-box .accordion-list {
}
}
/*--------------------------------------------------------------
# Our Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
}
.portfolio #portfolio-flters {
padding: 0;
list-style: none;
text-align: center;
background: #fff;
padding: 2px 15px;
}
.portfolio #portfolio-flters li {
cursor: pointer;
70
Food Order System
padding: 10px 15px 8px 15px;

font-size: 14px;
font-weight: 600;
line-height: 1;
color: #334240;
margin-bottom: 5px;
}
.portfolio #portfolio-flters li:hover, .portfolio #portfolio-flters li.filter-active {

color: #1bbca3;
}
.portfolio #portfolio-flters li:last-child {

margin-right: 0;
}
.portfolio .portfolio-wrap {
transition: 0.3s;
position: relative;
overflow: hidden;
z-index: 1;
}
.portfolio .portfolio-wrap::before {
content: "";
background: rgba(88, 113, 109, 0.6);
position: absolute;
left: 30px;
right: 30px;
top: 30px;
bottom: 30px;
transition: all ease-in-out 0.3s;
z-index: 2;
opacity: 0;
}
.portfolio .portfolio-wrap .portfolio-info {

opacity: 0;
position: absolute;
top: 10%;
left: 0;
right: 0;
text-align: center;
z-index: 3;
}
.portfolio .portfolio-wrap .portfolio-info h4 {

71
Food Order System
font-size: 20px;
color: #fff;
font-weight: 600;
}
.portfolio .portfolio-wrap .portfolio-info p {

color: #ffffff;
font-size: 14px;
}
.portfolio .portfolio-wrap .portfolio-links {

opacity: 0;
left: 0;
right: 0;
bottom: 10%;
text-align: center;
z-index: 3;
position: absolute;
}
.portfolio .portfolio-wrap .portfolio-links a {

color: #fff;
margin: 0 2px;
font-size: 28px;
transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {

color: #56e7d0;
}
.portfolio .portfolio-wrap:hover::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info {

opacity: 1;
top: calc(50% - 48px);
}
.portfolio .portfolio-wrap:hover .portfolio-links {

opacity: 1;
bottom: calc(50% - 50px);
72
Food Order System
/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
padding-top: 30px;
}
.portfolio-details .portfolio-details-container {
position: relative;
}
.portfolio-details .portfolio-details-carousel {
position: relative;
z-index: 1;
}
.portfolio-details .portfolio-details-carousel .owl-nav, .portfolio-details .portfolio-

details-carousel .owl-dots {
margin-top: 5px;
text-align: left;
}
.portfolio-details .portfolio-details-carousel .owl-dot {

margin: 0 10px 0 0;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ddd !important;
}
.portfolio-details .portfolio-details-carousel .owl-dot.active {

background-color: #1bbca3 !important;
}
.portfolio-details .portfolio-info {
padding: 30px;
position: absolute;
right: 0;
bottom: -70px;
background: #fff;
z-index: 2;
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
73
Food Order System
border-bottom: 1px solid #eee;
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li + li {
margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 50px;
}
.portfolio-details .portfolio-description h2 {
width: 50%;
font-size: 26px;
font-weight: 700;
}
.portfolio-details .portfolio-description p {
padding: 0 0 0 0;
}

.portfolio-details .portfolio-description h2 {
width: 100%;
}
.portfolio-details .portfolio-info {
position: static;
margin-top: 30px;
}
}
/*--------------------------------------------------------------
# Our Team
--------------------------------------------------------------*/
.team {
background: #fff;
padding: 60px 0;
}
.team .member {
text-align: center;
74
Food Order System
background: #343a40;
position: relative;
overflow: hidden;
}
.team .member .member-info {

opacity: 0;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
transition: 0.2s;
}
.team .member .member-info-content {

position: absolute;
left: 0;
right: 0;
bottom: 10px;
transition: bottom 0.4s;
}
.team .member .member-info-content h4 {

font-weight: 700;
margin-bottom: 2px;
font-size: 18px;
color: #fff;
}
.team .member .member-info-content span {

font-style: italic;
display: block;
font-size: 13px;
color: #fff;
}
.team .member .social {

position: absolute;
left: 0;
bottom: -38px;
right: 0;
height: 48px;
transition: bottom ease-in-out 0.4s;
text-align: center;
}
.team .member .social a {

transition: color 0.3s;
75
Food Order System
color: #fff;
margin: 0 10px;
}
.team .member .social a:hover {

color: #1bbca3;
}
.team .member .social i {

font-size: 18px;
margin: 0 2px;
}
.team .member:hover .member-info {

background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 20%,
rgba(0, 212, 255, 0) 100%);
opacity: 1;
transition: 0.4s;
}
.team .member:hover .member-info-content {

bottom: 60px;
transition: bottom 0.4s;
}
.team .member:hover .social {

bottom: 0;
transition: bottom ease-in-out 0.4s;
}
/*--------------------------------------------------------------
# Contact Us
--------------------------------------------------------------*/
.contact .infos {
position: relative;
z-index: 2;
}
.contact .info {
padding: 60px;
background: #fff;
color: #334240;
text-align: center;
box-shadow: -5px -5px 40px 0 rgba(0, 0, 0, 0.1);
}
.contact .info i {
font-size: 48px;
color: #56e7d0;
76
Food Order System
}
.contact .info h4 {
padding: 0;
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 600;
}
.contact .info p {
font-size: 15px;
}
.contact .info-bg {
background: white;
}
.contact .contact-form-wrap {
box-shadow: 10px -5px 40px 0 rgba(0, 0, 0, 0.1);
background: #fff;
position: relative;
z-index: 1;
padding: 30px;
}
.contact .php-email-form {
width: 100%;
}
.contact .php-email-form .validate {

display: none;
color: red;
margin: 0;
font-weight: 400;
font-size: 13px;
}
.contact .php-email-form .error-message {

display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .error-message br + br {

77
Food Order System
margin-top: 25px;
}
.contact .php-email-form .sent-message {

display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
font-weight: 600;
}
.contact .php-email-form .loading {

display: none;
background: #fff;
text-align: center;
padding: 15px;
}
.contact .php-email-form .loading:before {

content: "";
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
-webkit-animation: animate-loading 1s linear infinite;
animation: animate-loading 1s linear infinite;
}
.contact .php-email-form label {

margin-bottom: 5px;
color: #5f7c78;
}
.contact .php-email-form input, .contact .php-email-form textarea {

border-radius: 0;
box-shadow: none;
font-size: 14px;
}
.contact .php-email-form input::focus, .contact .php-email-form textarea::focus {

}
.contact .php-email-form input {

padding: 20px 15px;
78
Food Order System
.contact .php-email-form textarea {

padding: 12px 15px;
}
.contact .php-email-form button[type="submit"] {

background: #fff;
padding: 10px 24px;
color: #1bbca3;
transition: 0.4s;
}
.contact .php-email-form button[type="submit"]:hover {

color: #fff;
}

.contact .info {
padding: 30px;
}
}

.contact .php-email-form {
}
}
@-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
}
}
@keyframes animate-loading {
0% {
}
100% {
}
}
/*--------------------------------------------------------------
79
Food Order System
# Footer
--------------------------------------------------------------*/
#footer {
background: #344341;
padding: 0 0 30px 0;
color: #fff;
font-size: 14px;
}
#footer .footer-top {
background: #3d4f4c;
border-bottom: 1px solid #4d635f;
padding: 60px 0 30px 0;
}
#footer .footer-top .footer-info {

}
#footer .footer-top .footer-info h3 {

font-size: 24px;
margin: 0 0 20px 0;
padding: 2px 0 2px 0;
line-height: 1;
font-weight: 700;
}
#footer .footer-top .footer-info p {

font-size: 14px;
line-height: 24px;
margin-bottom: 0;
color: #fff;
}
#footer .footer-top .social-links a {

font-size: 18px;
background: #58716d;
color: #fff;
line-height: 1;
padding: 8px 0;
margin-right: 4px;
border-radius: 50%;
text-align: center;
width: 36px;
height: 36px;
transition: 0.3s;
}

80
Food Order System
#footer .footer-top .social-links a:hover {

color: #fff;
}
#footer .footer-top h4 {
font-size: 16px;
font-weight: 600;
color: #fff;
position: relative;
}
#footer .footer-top .footer-links {

}
#footer .footer-top .footer-links ul {

list-style: none;
padding: 0;
margin: 0;
}
#footer .footer-top .footer-links ul i {

padding-right: 2px;
color: #56e7d0;
font-size: 18px;
line-height: 1;
}
#footer .footer-top .footer-links ul li {

padding: 10px 0;
display: flex;
align-items: center;
}
#footer .footer-top .footer-links ul li:first-child {

padding-top: 0;
}
#footer .footer-top .footer-links ul a {

color: #fff;
transition: 0.3s;
line-height: 1;
}
#footer .footer-top .footer-links ul a:hover {

color: #40e4ca;
81
Food Order System
#footer .footer-top .footer-newsletter form {

margin-top: 30px;
background: #fff;
padding: 6px 10px;
position: relative;
border-radius: 4;
}
#footer .footer-top .footer-newsletter form input[type="email"] {

border: 0;
padding: 4px;
width: calc(100% - 110px);
}
#footer .footer-top .footer-newsletter form input[type="submit"] {

position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
background: none;
font-size: 16px;
padding: 0 20px;
color: #fff;
transition: 0.3s;
border-radius: 4;
}
#footer .footer-top .footer-newsletter form input[type="submit"]:hover {

background: #158f7c;
}
#footer .copyright {
text-align: center;
padding-top: 30px;
}
#footer .credits {
padding-top: 10px;
text-align: center;
font-size: 13px;
color: #fff;
}
MAIN.JS

82
Food Order System
/**
* Template Name: Shuffle - v2.3.1
* Template URL: https://bootstrapmade.com/bootstrap-3-one-page-template-free-
shuffle/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
!(function($) {
"use strict";
// Stick the header at top on scroll

$("#header").sticky({
topSpacing: 0,
zIndex: '50'
});
// Smooth scroll for the navigation menu and links with .scrollto classes
var scrolltoOffset = $('#header').outerHeight() - 1;
$(document).on('click', '.nav-menu a, .mobile-nav a, .scrollto', function(e) {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') &&
location.hostname == this.hostname) {
var target = $(this.hash);
if (target.length) {
e.preventDefault();
var scrollto = target.offset().top - scrolltoOffset;
if ($(this).attr("href") == '#header') {
scrollto = 0;
}
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
if ($(this).parents('.nav-menu, .mobile-nav').length) {
$('.nav-menu .active, .mobile-nav .active').removeClass('active');
$(this).closest('li').addClass('active');
}
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
return false;
}
}
});

83
Food Order System
// Activate smooth scroll on page load with hash links in the url
$(document).ready(function() {
if (window.location.hash) {
var initial_nav = window.location.hash;
if ($(initial_nav).length) {
var scrollto = $(initial_nav).offset().top - scrolltoOffset;
scrollTop: scrollto
}
}
});
// Mobile Navigation
if ($('.nav-menu').length) {
var $mobile_nav = $('.nav-menu').clone().prop({
class: 'mobile-nav d-lg-none'
});
$('body').append($mobile_nav);
$('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i
class="icofont-navigation-menu"></i></button>');
$('body').append('<div class="mobile-nav-overly"></div>');
$(document).on('click', '.mobile-nav-toggle', function(e) {

$('body').toggleClass('mobile-nav-active');
$('.mobile-nav-overly').toggle();
});
$(document).on('click', '.mobile-nav .drop-down > a', function(e) {

e.preventDefault();
$(this).next().slideToggle(300);
$(this).parent().toggleClass('active');
});
$(document).click(function(e) {
var container = $(".mobile-nav, .mobile-nav-toggle");
if (!container.is(e.target) && container.has(e.target).length === 0) {
if ($('body').hasClass('mobile-nav-active')) {
$('body').removeClass('mobile-nav-active');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
// Navigation active state on scroll

84
Food Order System
var nav_sections = $('section');

var main_nav = $('.nav-menu, .mobile-nav');
$(window).on('scroll', function() {
var cur_pos = $(this).scrollTop() + 200;
nav_sections.each(function() {
var top = $(this).offset().top,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {

if (cur_pos <= bottom) {
main_nav.find('li').removeClass('active');
}
main_nav.find('a[href="#' + $(this).attr('id') + '"]').parent('li').addClass('active');
}
if (cur_pos < 300) {
$(".nav-menu ul:first li:first").addClass('active');
}
});
});
// Intro carousel
var heroCarousel = $("#heroCarousel");
var heroCarouselIndicators = $("#hero-carousel-indicators");
heroCarousel.find(".carousel-inner").children(".carousel-item").each(function(index)
{
(index === 0) ?
heroCarouselIndicators.append("<li data-target='#heroCarousel' data-slide-to='" +
index + "' class='active'></li>"):
heroCarouselIndicators.append("<li data-target='#heroCarousel' data-slide-to='" +
index + "'></li>");
$(this).css("background-image", "url('" + $(this).children('.carousel-

background').children('img').attr('src') + "')");
$(this).children('.carousel-background').remove();
});
heroCarousel.on('slid.bs.carousel', function(e) {
$(this).find('h2').addClass('animate__animated animate__fadeInDown');
$(this).find('p, .btn-get-started').addClass('animate__animated
animate__fadeInUp');
});
// Back to top button

$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.back-to-top').fadeIn('slow');
} else {
$('.back-to-top').fadeOut('slow');
85
Food Order System
}
});
$('.back-to-top').click(function() {
scrollTop: 0
return false;
});
// Skills section
$('.skills-content').waypoint(function() {
$('.progress .progress-bar').each(function() {
$(this).css("width", $(this).attr("aria-valuenow") + '%');
});
}, {
offset: '80%'
});
// jQuery counterUp
$('[data-toggle="counter-up"]').counterUp({
delay: 10,
time: 1000
});
// Porfolio isotope and filter

$(window).on('load', function() {
var portfolioIsotope = $('.portfolio-container').isotope({
itemSelector: '.portfolio-item',
layoutMode: 'fitRows'
});
$('#portfolio-flters li').on('click', function() {

$("#portfolio-flters li").removeClass('filter-active');
$(this).addClass('filter-active');
portfolioIsotope.isotope({
filter: $(this).data('filter')
});
});
// Initiate venobox (lightbox feature used in portofilo)

$(document).ready(function() {
$('.venobox').venobox();
});
});
// Portfolio details carousel

$(".portfolio-details-carousel").owlCarousel({
autoplay: true,
86
Food Order System
dots: true,
loop: true,
items: 1
});
})(jQuery);
Vendor
Animate,Css
@charset "UTF-8";/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css
*/:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animated{-
webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-duration:var(-
-animate-duration);animation-duration:var(--animate-duration);-webkit-animation-
fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-
iteration-count:infinite;animation-iteration-count:infinite}.animated.repeat-1{-webkit-
animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-iteration-
count:var(--animate-repeat);animation-iteration-count:var(--animate-
repeat)}.animated.repeat-2{-webkit-animation-iteration-count:2;animation-iteration-
count:2;-webkit-animation-iteration-count:calc(var(--animate-repeat)*2);animation-
iteration-count:calc(var(--animate-repeat)*2)}.animated.repeat-3{-webkit-animation-
iteration-count:3;animation-iteration-count:3;-webkit-animation-iteration-
count:calc(var(--animate-repeat)*3);animation-iteration-count:calc(var(--animate-
repeat)*3)}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s;-
webkit-animation-delay:var(--animate-delay);animation-delay:var(--animate-
delay)}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s;-webkit-
animation-delay:calc(var(--animate-delay)*2);animation-delay:calc(var(--animate-
delay)*2)}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s;-
webkit-animation-delay:calc(var(--animate-delay)*3);animation-delay:calc(var(--
animate-delay)*3)}.animated.delay-4s{-webkit-animation-delay:4s;animation-
delay:4s;-webkit-animation-delay:calc(var(--animate-delay)*4);animation-
delay:calc(var(--animate-delay)*4)}.animated.delay-5s{-webkit-animation-
delay:5s;animation-delay:5s;-webkit-animation-delay:calc(var(--animate-
delay)*5);animation-delay:calc(var(--animate-delay)*5)}.animated.faster{-webkit-
animation-duration:.5s;animation-duration:.5s;-webkit-animation-duration:calc(var(--
animate-duration)/2);animation-duration:calc(var(--animate-
duration)/2)}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s;-
webkit-animation-duration:calc(var(--animate-duration)*0.8);animation-
duration:calc(var(--animate-duration)*0.8)}.animated.slow{-webkit-animation-
duration:2s;animation-duration:2s;-webkit-animation-duration:calc(var(--animate-
duration)*2);animation-duration:calc(var(--animate-duration)*2)}.animated.slower{-
webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-
duration:calc(var(--animate-duration)*3);animation-duration:calc(var(--animate-
duration)*3)}@media (prefers-reduced-motion:reduce),print{.animated{-webkit-
animation-duration:1ms!important;animation-duration:1ms!important;-webkit-
87
Food Order System
transition-duration:1ms!important;transition-duration:1ms!important;-webkit-
animation-iteration-count:1!important;animation-iteration-
count:1!important}.animated[class*=Out]{opacity:0}}@-webkit-keyframes
bounce{0%,20%,53%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-
webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-
timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-
bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0)
scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-
scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-
timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-
bezier(.215,.61,.355,1);-webkit-transform:translateZ(0)
scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-
transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0)
scaleY(1.02)}}@keyframes bounce{0%,20%,53%,to{-webkit-animation-timing-
function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-
bezier(.215,.61,.355,1);-webkit-
transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-
function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-
scaleY(1.1);transform:translate3d(0,-30px,0) scaleY(1.1)}70%{-webkit-animation-
scaleY(1.05);transform:translate3d(0,-15px,0) scaleY(1.05)}80%{-webkit-transition-
timing-function:cubic-bezier(.215,.61,.355,1);transition-timing-function:cubic-
bezier(.215,.61,.355,1);-webkit-transform:translateZ(0)
scaleY(.95);transform:translateZ(0) scaleY(.95)}90%{-webkit-
transform:translate3d(0,-4px,0) scaleY(1.02);transform:translate3d(0,-4px,0)
scaleY(1.02)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-
webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-
keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes
flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-
name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-
transform:scaleX(1);transform:scaleX(1)}50%{-webkit-
transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-
transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-
transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-
transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-
name:pulse;animation-name:pulse;-webkit-animation-timing-function:ease-in-
out;animation-timing-function:ease-in-out}@-webkit-keyframes rubberBand{0%{-
webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-
transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-
transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-
transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-
transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-
88
Food Order System
transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-
transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-
name:rubberBand;animation-name:rubberBand}@-webkit-keyframes
shakeX{0%,to{-webkit-
transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-
transform:translate3d(-10px,0,0);transform:translate3d(-
10px,0,0)}20%,40%,60%,80%{-webkit-
transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes
shakeX{0%,to{-webkit-
transform:translate3d(-10px,0,0);transform:translate3d(-
10px,0,0)}20%,40%,60%,80%{-webkit-
transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shakeX{-webkit-
animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes
shakeY{0%,to{-webkit-
transform:translate3d(0,-10px,0);transform:translate3d(0,-
10px,0)}20%,40%,60%,80%{-webkit-
transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}@keyframes
shakeY{0%,to{-webkit-
transform:translate3d(0,-10px,0);transform:translate3d(0,-
10px,0)}20%,40%,60%,80%{-webkit-
transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}}.shakeY{-webkit-
animation-name:shakeY;animation-name:shakeY}@-webkit-keyframes
headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-
webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px)
rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px)
rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-
transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-
5deg)}43.5%{-webkit-transform:translateX(2px)
rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-
transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-
webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-
rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-
rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-
transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-
timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-
name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-
webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-
transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-
89
Food Order System
transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-
5deg);transform:rotate(-5deg)}to{-webkit-
transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-
10deg);transform:rotate(-10deg)}60%{-webkit-
5deg);transform:rotate(-5deg)}to{-webkit-
transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top
center;transform-origin:top center;-webkit-animation-name:swing;animation-
name:swing}@-webkit-keyframes tada{0%{-webkit-
transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-
transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-
3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1)
rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-
transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-
3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-
webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-
transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-
3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1)
rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-
transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-
3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-
animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-
webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-
transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0)
rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0)
rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-
transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-
1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes
wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-
transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-
1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-
animation-name:wobble;animation-name:wobble}@-webkit-keyframes
jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-
webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg)
skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg)
skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-
transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg)
skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg)
skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-
transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg)
90
Food Order System
skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg)
skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-
webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-
.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-
transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-
12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-
webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg)
skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-
3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-
transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg)
skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-
.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-
transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg)
skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-
.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-
webkit-animation-name:jello;animation-name:jello;-webkit-transform-
origin:center;transform-origin:center}@-webkit-keyframes heartBeat{0%{-webkit-
transform:scale(1);transform:scale(1)}14%{-webkit-
transform:scale(1.3);transform:scale(1.3)}28%{-webkit-
transform:scale(1);transform:scale(1)}}@keyframes heartBeat{0%{-webkit-
transform:scale(1);transform:scale(1)}}.heartBeat{-webkit-animation-
name:heartBeat;animation-name:heartBeat;-webkit-animation-
duration:1.3s;animation-duration:1.3s;-webkit-animation-duration:calc(var(--animate-
duration)*1.3);animation-duration:calc(var(--animate-duration)*1.3);-webkit-
animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-
webkit-keyframes backInDown{0%{-webkit-transform:translateY(-1200px)
scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-
transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-
webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes
backInDown{0%{-webkit-transform:translateY(-1200px)
scale(.7);transform:translateY(-1200px) scale(.7);opacity:.7}80%{-webkit-
webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInDown{-webkit-
animation-name:backInDown;animation-name:backInDown}@-webkit-keyframes
backInLeft{0%{-webkit-transform:translateX(-2000px)
scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-
transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-
backInLeft{0%{-webkit-transform:translateX(-2000px)
scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}80%{-webkit-
webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInLeft{-webkit-
animation-name:backInLeft;animation-name:backInLeft}@-webkit-keyframes
backInRight{0%{-webkit-transform:translateX(2000px)
91
Food Order System
scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-
backInRight{0%{-webkit-transform:translateX(2000px)
scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-
webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInRight{-webkit-
animation-name:backInRight;animation-name:backInRight}@-webkit-keyframes
backInUp{0%{-webkit-transform:translateY(1200px)
scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-
backInUp{0%{-webkit-transform:translateY(1200px)
scale(.7);transform:translateY(1200px) scale(.7);opacity:.7}80%{-webkit-
webkit-transform:scale(1);transform:scale(1);opacity:1}}.backInUp{-webkit-
animation-name:backInUp;animation-name:backInUp}@-webkit-keyframes
backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-
webkit-transform:translateY(0) scale(.7);transform:translateY(0)
scale(.7);opacity:.7}to{-webkit-transform:translateY(700px)
scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}@keyframes
backOutDown{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-
scale(.7);opacity:.7}to{-webkit-transform:translateY(700px)
scale(.7);transform:translateY(700px) scale(.7);opacity:.7}}.backOutDown{-webkit-
animation-name:backOutDown;animation-name:backOutDown}@-webkit-keyframes
backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-
webkit-transform:translateX(0) scale(.7);transform:translateX(0)
scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px)
scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}@keyframes
backOutLeft{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-
scale(.7);opacity:.7}to{-webkit-transform:translateX(-2000px)
scale(.7);transform:translateX(-2000px) scale(.7);opacity:.7}}.backOutLeft{-webkit-
animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes
backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-
scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px)
scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}@keyframes
backOutRight{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-
scale(.7);opacity:.7}to{-webkit-transform:translateX(2000px)
scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}}.backOutRight{-webkit-
animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes
backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-
scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px)
scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}@keyframes
backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-
92
Food Order System
scale(.7);opacity:.7}to{-webkit-transform:translateY(-700px)
scale(.7);transform:translateY(-700px) scale(.7);opacity:.7}}.backOutUp{-webkit-
animation-name:backOutUp;animation-name:backOutUp}@-webkit-keyframes
bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1);animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-
transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-
transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-
transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-
transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-
transform:scaleX(1);transform:scaleX(1)}}@keyframes
bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-
transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-
transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-
transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-
transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-
duration:.75s;animation-duration:.75s;-webkit-animation-duration:calc(var(--animate-
duration)*0.75);animation-duration:calc(var(--animate-duration)*0.75);-webkit-
animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes
bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0)
scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-
transform:translate3d(0,25px,0) scaleY(.9);transform:translate3d(0,25px,0)
scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0)
scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-
scaleY(.985)}to{-webkit-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0)
scaleY(3);transform:translate3d(0,-3000px,0) scaleY(3)}60%{opacity:1;-webkit-
scaleY(.9)}75%{-webkit-transform:translate3d(0,-10px,0)
scaleY(.95);transform:translate3d(0,-10px,0) scaleY(.95)}90%{-webkit-
transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-
name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes
bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0)
scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-
transform:translate3d(25px,0,0) scaleX(1);transform:translate3d(25px,0,0)
93
Food Order System
scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0)
scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-
transform:translate3d(5px,0,0) scaleX(.995);transform:translate3d(5px,0,0)
scaleX(.995)}to{-webkit-
bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0)
scaleX(3);transform:translate3d(-3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-
scaleX(1)}75%{-webkit-transform:translate3d(-10px,0,0)
scaleX(.98);transform:translate3d(-10px,0,0) scaleX(.98)}90%{-webkit-
transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-
name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes
bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0)
scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-
transform:translate3d(-25px,0,0) scaleX(1);transform:translate3d(-25px,0,0)
scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0)
scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-
transform:translate3d(-5px,0,0) scaleX(.995);transform:translate3d(-5px,0,0)
bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0)
scaleX(3);transform:translate3d(3000px,0,0) scaleX(3)}60%{opacity:1;-webkit-
scaleX(1)}75%{-webkit-transform:translate3d(10px,0,0)
scaleX(.98);transform:translate3d(10px,0,0) scaleX(.98)}90%{-webkit-
transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-
name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes
bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0)
scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-
transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0)
scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0)
scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-
bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-
bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0)
94
Food Order System
scaleY(5);transform:translate3d(0,3000px,0) scaleY(5)}60%{opacity:1;-webkit-
scaleY(.9)}75%{-webkit-transform:translate3d(0,10px,0)
scaleY(.95);transform:translate3d(0,10px,0) scaleY(.95)}90%{-webkit-
transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-
name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes
bounceOut{20%{-webkit-
transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-
transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-
transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes
bounceOut{20%{-webkit-
transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-
transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-
transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-
animation-duration:.75s;animation-duration:.75s;-webkit-animation-
duration:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-
duration)*0.75);-webkit-animation-name:bounceOut;animation-name:bounceOut}@-
webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0)
scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-
webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0)
scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0)
scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}@keyframes
bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0)
scaleY(.985);transform:translate3d(0,10px,0) scaleY(.985)}40%,45%{opacity:1;-
webkit-transform:translate3d(0,-20px,0) scaleY(.9);transform:translate3d(0,-20px,0)
scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0)
scaleY(3);transform:translate3d(0,2000px,0) scaleY(3)}}.bounceOutDown{-webkit-
animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-
keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0)
scaleX(.9);transform:translate3d(20px,0,0) scaleX(.9)}to{opacity:0;-webkit-
scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-
scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0)
scaleX(2);transform:translate3d(-2000px,0,0) scaleX(2)}}.bounceOutLeft{-webkit-
animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-
keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0)
scaleX(.9);transform:translate3d(-20px,0,0) scaleX(.9)}to{opacity:0;-webkit-
scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-
scaleX(.9)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0)
scaleX(2);transform:translate3d(2000px,0,0) scaleX(2)}}.bounceOutRight{-webkit-
animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-
keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0)
scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-
webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0)
scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0)
95
Food Order System
scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}@keyframes
bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0)
scaleY(.985);transform:translate3d(0,-10px,0) scaleY(.985)}40%,45%{opacity:1;-
webkit-transform:translate3d(0,20px,0) scaleY(.9);transform:translate3d(0,20px,0)
scaleY(.9)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0)
scaleY(3);transform:translate3d(0,-2000px,0) scaleY(3)}}.bounceOutUp{-webkit-
animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes
fadeIn{0%{opacity:0}to{opacity:1}}@keyframes
fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-
name:fadeIn;animation-name:fadeIn}@-webkit-keyframes
fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-
100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-
fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-
100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}}.fadeInDown{-webkit-animation-
name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes
fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-
2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-
fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-
2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}}.fadeInDownBig{-webkit-
animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-
keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-
100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-
fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-
100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-
name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes
fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-
2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-
fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-
2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-
name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes
fadeInRight{0%{opacity:0;-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-
webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes
fadeInRight{0%{opacity:0;-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-
webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-
animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes
fadeInRightBig{0%{opacity:0;-webkit-
transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-
fadeInRightBig{0%{opacity:0;-webkit-
transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-
96
Food Order System
webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRightBig{-webkit-
animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-
keyframes fadeInUp{0%{opacity:0;-webkit-
transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-
fadeInUp{0%{opacity:0;-webkit-
transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-
webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-
animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes
fadeInUpBig{0%{opacity:0;-webkit-
transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-
fadeInUpBig{0%{opacity:0;-webkit-
transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-
webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUpBig{-webkit-
animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes
fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-
100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-
fadeInTopLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,-
100%,0);transform:translate3d(-100%,-100%,0)}to{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}}.fadeInTopLeft{-webkit-animation-
name:fadeInTopLeft;animation-name:fadeInTopLeft}@-webkit-keyframes
fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-
100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-
fadeInTopRight{0%{opacity:0;-webkit-transform:translate3d(100%,-
100%,0);transform:translate3d(100%,-100%,0)}to{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}}.fadeInTopRight{-webkit-
animation-name:fadeInTopRight;animation-name:fadeInTopRight}@-webkit-
keyframes fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-
100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-
fadeInBottomLeft{0%{opacity:0;-webkit-transform:translate3d(-
100%,100%,0);transform:translate3d(-100%,100%,0)}to{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}}.fadeInBottomLeft{-webkit-
animation-name:fadeInBottomLeft;animation-name:fadeInBottomLeft}@-webkit-
keyframes fadeInBottomRight{0%{opacity:0;-webkit-
transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacit
y:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes
fadeInBottomRight{0%{opacity:0;-webkit-
transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}to{opacit
y:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInBottomRight{-
webkit-animation-name:fadeInBottomRight;animation-name:fadeInBottomRight}@-
webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes
fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-
name:fadeOut;animation-name:fadeOut}@-webkit-keyframes
fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-
transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes
fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-
97
Food Order System
transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-
webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-
keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-
transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes
fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-
transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDown
Big{-webkit-animation-name:fadeOutDownBig;animation-
name:fadeOutDownBig}@-webkit-keyframes
fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-
100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes
fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-
100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-
name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes
fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-
2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes
fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-
2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-
animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-
keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes
fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-
webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-
keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-
transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes
fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-
transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRight
Big{-webkit-animation-name:fadeOutRightBig;animation-
name:fadeOutRightBig}@-webkit-keyframes
fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-
100%,0);transform:translate3d(0,-100%,0)}}@keyframes
fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-
100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-
name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes
fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-
2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes
fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-
2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-
name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes
fadeOutTopLeft{0%{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-
transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-
100%,0)}}@keyframes fadeOutTopLeft{0%{opacity:1;-webkit-
transform:translate3d(-100%,-100%,0);transform:translate3d(-100%,-
100%,0)}}.fadeOutTopLeft{-webkit-animation-name:fadeOutTopLeft;animation-
name:fadeOutTopLeft}@-webkit-keyframes fadeOutTopRight{0%{opacity:1;-
webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-
transform:translate3d(100%,-100%,0);transform:translate3d(100%,-
100%,0)}}@keyframes fadeOutTopRight{0%{opacity:1;-webkit-
98
Food Order System
transform:translate3d(100%,-100%,0);transform:translate3d(100%,-
100%,0)}}.fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-
name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-
transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyfra
mes fadeOutBottomRight{0%{opacity:1;-webkit-
transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}.fadeOut
BottomRight{-webkit-animation-name:fadeOutBottomRight;animation-
name:fadeOutBottomRight}@-webkit-keyframes fadeOutBottomLeft{0%{opacity:1;-
transform:translate3d(-100%,100%,0);transform:translate3d(-
100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-
transform:translate3d(-100%,100%,0);transform:translate3d(-
100%,100%,0)}}.fadeOutBottomLeft{-webkit-animation-
name:fadeOutBottomLeft;animation-name:fadeOutBottomLeft}@-webkit-keyframes
flip{0%{-webkit-transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-
1turn);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-
animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-
webkit-transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-
190deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-
190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-
out}50%{-webkit-transform:perspective(400px) scaleX(1) translateZ(150px)
rotateY(-170deg);transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-
170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-
in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0)
rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0)
rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-
function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0)
rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-
webkit-animation-timing-function:ease-in;animation-timing-function:ease-
in}}@keyframes flip{0%{-webkit-transform:perspective(400px) scaleX(1)
translateZ(0) rotateY(-1turn);transform:perspective(400px) scaleX(1) translateZ(0)
rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-
function:ease-out}40%{-webkit-transform:perspective(400px) scaleX(1)
translateZ(150px) rotateY(-190deg);transform:perspective(400px) scaleX(1)
translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-
out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px)
scaleX(1) translateZ(150px) rotateY(-170deg);transform:perspective(400px)
scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-
function:ease-in;animation-timing-function:ease-in}80%{-webkit-
transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0)
rotateY(0deg);transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0)
function:ease-in}to{-webkit-transform:perspective(400px) scaleX(1) translateZ(0)
rotateY(0deg);transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-
webkit-animation-timing-function:ease-in;animation-timing-function:ease-
in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-
99
Food Order System
webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-
webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px)
rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-
function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-
20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-
transform:perspective(400px) rotateX(10deg);transform:perspective(400px)
rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-
5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-
transform:perspective(400px);transform:perspective(400px)}}@keyframes
flipInX{0%{-webkit-transform:perspective(400px)
rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-
timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-
transform:perspective(400px) rotateX(-20deg);transform:perspective(400px)
rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-
function:ease-in}60%{-webkit-transform:perspective(400px)
rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-
webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px)
rotateX(-5deg)}to{-webkit-
transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-
backface-visibility:visible!important;backface-visibility:visible!important;-webkit-
animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-
webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px)
function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-
20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-
transform:perspective(400px) rotateY(10deg);transform:perspective(400px)
rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-
5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-
transform:perspective(400px);transform:perspective(400px)}}@keyframes
flipInY{0%{-webkit-transform:perspective(400px)
rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-
timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-
transform:perspective(400px) rotateY(-20deg);transform:perspective(400px)
rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-
function:ease-in}60%{-webkit-transform:perspective(400px)
rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-
webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px)
rotateY(-5deg)}to{-webkit-
transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-
backface-visibility:visible!important;backface-visibility:visible!important;-webkit-
animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes
flipOutX{0%{-webkit-
transform:perspective(400px);transform:perspective(400px)}30%{-webkit-
rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px)
rotateX(90deg);transform:perspective(400px)
rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-
100
Food Order System
rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px)
rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-
webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-
duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-
webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-
webkit-keyframes flipOutY{0%{-webkit-
rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px)
rotateY(90deg);transform:perspective(400px)
rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-
rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px)
rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-
webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-
duration)*0.75);-webkit-backface-visibility:visible!important;backface-
visibility:visible!important;-webkit-animation-name:flipOutY;animation-
name:flipOutY}@-webkit-keyframes lightSpeedInRight{0%{-webkit-
transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0)
skewX(-30deg);opacity:0}60%{-webkit-
transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-
transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-
lightSpeedInRight{0%{-webkit-transform:translate3d(100%,0,0) skewX(-
30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-
transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-
transform:skewX(-5deg);transform:skewX(-5deg)}to{-webkit-
transform:translateZ(0);transform:translateZ(0)}}.lightSpeedInRight{-webkit-
animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-
animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-
keyframes lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0)
skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-
webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-
transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-
lightSpeedInLeft{0%{-webkit-transform:translate3d(-100%,0,0)
skewX(30deg);transform:translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{-
webkit-transform:skewX(-20deg);transform:skewX(-20deg);opacity:1}80%{-webkit-
transform:skewX(5deg);transform:skewX(5deg)}to{-webkit-
transform:translateZ(0);transform:translateZ(0)}}.lightSpeedInLeft{-webkit-
animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-
animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-
keyframes lightSpeedOutRight{0%{opacity:1}to{-webkit-
transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0)
skewX(30deg);opacity:0}}@keyframes lightSpeedOutRight{0%{opacity:1}to{-
webkit-transform:translate3d(100%,0,0)
101
Food Order System
skewX(30deg);transform:translate3d(100%,0,0)
skewX(30deg);opacity:0}}.lightSpeedOutRight{-webkit-animation-
name:lightSpeedOutRight;animation-name:lightSpeedOutRight;-webkit-animation-
timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes
lightSpeedOutLeft{0%{opacity:1}to{-webkit-transform:translate3d(-100%,0,0)
skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-
30deg);opacity:0}}@keyframes lightSpeedOutLeft{0%{opacity:1}to{-webkit-
transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0)
skewX(-30deg);opacity:0}}.lightSpeedOutLeft{-webkit-animation-
name:lightSpeedOutLeft;animation-name:lightSpeedOutLeft;-webkit-animation-
timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes
rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-
200deg);opacity:0}to{-webkit-
transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes
rotateIn{0%{-webkit-transform:rotate(-200deg);transform:rotate(-
transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateIn{-webkit-
animation-name:rotateIn;animation-name:rotateIn;-webkit-transform-
origin:center;transform-origin:center}@-webkit-keyframes rotateInDownLeft{0%{-
webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-
rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-
transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownLeft{-
webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft;-
webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-
keyframes rotateInDownRight{0%{-webkit-
transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-
rotateInDownRight{0%{-webkit-
transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownRight{-
webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight;-
webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-
keyframes rotateInUpLeft{0%{-webkit-
rotateInUpLeft{0%{-webkit-
transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-
animation-name:rotateInUpLeft;animation-name:rotateInUpLeft;-webkit-transform-
origin:left bottom;transform-origin:left bottom}@-webkit-keyframes
rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-
rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-
transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-
animation-name:rotateInUpRight;animation-name:rotateInUpRight;-webkit-
transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes
102
Food Order System
rotateOut{0%{opacity:1}to{-webkit-
transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes
rotateOut{0%{opacity:1}to{-webkit-
transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-
animation-name:rotateOut;animation-name:rotateOut;-webkit-transform-
origin:center;transform-origin:center}@-webkit-keyframes
rotateOutDownLeft{0%{opacity:1}to{-webkit-
rotateOutDownLeft{0%{opacity:1}to{-webkit-
transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-
webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft;-
webkit-transform-origin:left bottom;transform-origin:left bottom}@-webkit-
keyframes rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-
45deg);transform:rotate(-45deg);opacity:0}}@keyframes
rotateOutDownRight{0%{opacity:1}to{-webkit-transform:rotate(-
45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-
animation-name:rotateOutDownRight;animation-name:rotateOutDownRight;-webkit-
transform-origin:right bottom;transform-origin:right bottom}@-webkit-keyframes
rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-
45deg);transform:rotate(-45deg);opacity:0}}@keyframes
rotateOutUpLeft{0%{opacity:1}to{-webkit-transform:rotate(-
45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-
name:rotateOutUpLeft;animation-name:rotateOutUpLeft;-webkit-transform-
origin:left bottom;transform-origin:left bottom}@-webkit-keyframes
rotateOutUpRight{0%{opacity:1}to{-webkit-
rotateOutUpRight{0%{opacity:1}to{-webkit-
transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-
webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight;-
webkit-transform-origin:right bottom;transform-origin:right bottom}@-webkit-
keyframes hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-
timing-function:ease-in-out}20%,60%{-webkit-
transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-
function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-
function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-
transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyf
rames hinge{0%{-webkit-animation-timing-function:ease-in-out;animation-timing-
function:ease-in-out}20%,60%{-webkit-
function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-
function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-
transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge
{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-
duration:calc(var(--animate-duration)*2);animation-duration:calc(var(--animate-
duration)*2);-webkit-animation-name:hinge;animation-name:hinge;-webkit-
transform-origin:top left;transform-origin:top left}@-webkit-keyframes
jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1)
rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center
103
Food Order System
bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-
10deg);transform:rotate(-10deg)}70%{-webkit-
transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-
transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-
webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-
transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-
transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-
transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-
transform:scale(1);transform:scale(1)}}.jackInTheBox{-webkit-animation-
name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes
rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-
120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-
webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-
100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}}.rollIn{-webkit-animation-
name:rollIn;animation-name:rollIn}@-webkit-keyframes
rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0)
rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes
rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0)
rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-
animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes
zoomIn{0%{opacity:0;-webkit-
transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes
zoomIn{0%{opacity:0;-webkit-
transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-
webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes
zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-
1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-
bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475)
translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-
webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-
function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-
webkit-transform:scale3d(.1,.1,.1) translate3d(0,-
function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-
name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes
zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-
1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-
translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-
function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-
webkit-transform:scale3d(.1,.1,.1) translate3d(-
104
Food Order System
1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-
translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-
function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-
name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes
zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1)
translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-
animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-
function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-
transform:scale3d(.475,.475,.475) translate3d(-
10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-
animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-
function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-
webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1)
translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-
bezier(.55,.055,.675,.19);animation-timing-function:cubic-
translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-
function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-
name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes
zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1)
translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-
animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-
function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-
transform:scale3d(.475,.475,.475) translate3d(0,-
timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-
bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-
transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1)
translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-
bezier(.55,.055,.675,.19);animation-timing-function:cubic-
translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-
function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-
name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes
zoomOut{0%{opacity:1}50%{opacity:0;-webkit-
transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes
zoomOut{0%{opacity:1}50%{opacity:0;-webkit-
transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-
webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes
zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475)
translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-
webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-
function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-
transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1)
translate3d(0,2000px,0);-webkit-animation-timing-function:cubic-
105
Food Order System
bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-
transform:scale3d(.475,.475,.475) translate3d(0,-
bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1)
translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-
animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-
function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-
name:zoomOutDown;animation-name:zoomOutDown;-webkit-transform-
origin:center bottom;transform-origin:center bottom}@-webkit-keyframes
zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475)
translate3d(42px,0,0);transform:scale3d(.475,.475,.475)
translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-
2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}@keyframes
zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475)
translate3d(42px,0,0);transform:scale3d(.475,.475,.475)
translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-
2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0)}}.zoomOutLeft{-webkit-
animation-name:zoomOutLeft;animation-name:zoomOutLeft;-webkit-transform-
origin:left center;transform-origin:left center}@-webkit-keyframes
zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475)
translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-
42px,0,0)}to{opacity:0;-webkit-transform:scale(.1)
translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0)}}@keyframes
zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475)
translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-
42px,0,0)}to{opacity:0;-webkit-transform:scale(.1)
translate3d(2000px,0,0);transform:scale(.1)
translate3d(2000px,0,0)}}.zoomOutRight{-webkit-animation-
name:zoomOutRight;animation-name:zoomOutRight;-webkit-transform-origin:right
center;transform-origin:right center}@-webkit-keyframes
zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475)
transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1)
translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-
bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-
transform:scale3d(.475,.475,.475)
transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1)
translate3d(0,-2000px,0);-webkit-animation-timing-function:cubic-
bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-
name:zoomOutUp;animation-name:zoomOutUp;-webkit-transform-origin:center
bottom;transform-origin:center bottom}@-webkit-keyframes slideInDown{0%{-
106
Food Order System
webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-
100%,0);visibility:visible}to{-webkit-
transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-
webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-
100%,0);visibility:visible}to{-webkit-
transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-
name:slideInDown;animation-name:slideInDown}@-webkit-keyframes
slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-
100%,0,0);visibility:visible}to{-webkit-
transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-
webkit-transform:translate3d(-100%,0,0);transform:translate3d(-
100%,0,0);visibility:visible}to{-webkit-
transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-
name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes
slideInRight{0%{-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to
{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes
slideInRight{0%{-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to
{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-
animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes
slideInUp{0%{-webkit-
transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to
{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes
slideInUp{0%{-webkit-
transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to
{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-
animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes
slideOutDown{0%{-webkit-
transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-
transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes
slideOutDown{0%{-webkit-
transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-
webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-
keyframes slideOutLeft{0%{-webkit-
transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes
slideOutLeft{0%{-webkit-
transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-
webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-
keyframes slideOutRight{0%{-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes
slideOutRight{0%{-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-
webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-
keyframes slideOutUp{0%{-webkit-
107
Food Order System
transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes
slideOutUp{0%{-webkit-
transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-
webkit-animation-name:slideOutUp;animation-name:slideOutUp}
Shop
Template/Shop
About.html
{% extends 'shop/basic.html' %}
{% block title%} About Us - Food Mania{% endblock %}
{% block body %}
{% load static %}

<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,60
0i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i|Poppins:300,300i,400,400i,5
00,500i,600,600i,700,700i" rel="stylesheet">


<link href="{% static 'shop/assets/vendor/bootstrap/css/bootstrap.min.css' %}"
rel="stylesheet">
<link href="{% static 'shop/assets/vendor/icofont/icofont.min.css' %}"
rel="stylesheet">
<link href="{% static 'shop/assets/vendor/animate.css/animate.min.css' %}"
rel="stylesheet">


<link href="{% static 'shop/assets/css/style.css' %}" rel="stylesheet">


<section id="hero">
<div class="hero-container">
<div id="heroCarousel" class="carousel slide carousel-fade" data-
ride="carousel">
<ol class="carousel-indicators" id="hero-carousel-indicators"></ol>
<div class="carousel-inner" role="listbox">


<div class="carousel-item active">

108
Food Order System
<div class="carousel-background"><img src="{% static

'shop/assets/img/slide/slide-1.jpg' %}" alt=""></div>
<div class="carousel-container">
<div class="carousel-content">
<h2 class="animate__animated animate__fadeInDown">Welcome to
<span>The Food Mania</span></h2>
<a href="/shop/" class="btn-get-started animate__animated
animate__fadeInUp scrollto">Get Started</a>
</div>
</div>
</div>


<div class="carousel-item">
<h2 class="animate__animated animate__fadeInDown mb-0">Our
Mission</h2>
<p class="animate__animated animate__fadeInUp">To be number one</p>
</div>
</div>
</div>


<div class="carousel-item">
<h2 class="animate__animated animate__fadeInDown mb-0">
<h2 class="animate__animated animate__fadeInDown mb-0">

</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#heroCarousel" role="button" data-

slide="prev">
<span class="carousel-control-prev-icon icofont-thin-double-left" aria-
hidden="true"></span>
<span class="sr-only">Previous</span>
109
Food Order System
</a>
<a class="carousel-control-next" href="#heroCarousel" role="button" data-

slide="next">
<span class="carousel-control-next-icon icofont-thin-double-right" aria-
hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
<main id="main">


<section id="about" class="about">
<div class="container">
<div class="section-title">
<h2>About Us</h2>
</div>
<div class="row">
<div class="col-lg-6">
<h3>Welcome to <strong>The Food Mania</strong></h3>
<p class="font-italic">
Our new menus, conceived by Chef David Hawksworth and his culinary
team, showcase ingredient led, contemporary cuisine that is firmly rooted in the
classics; bold, bright flavours are presented in skillfully executed dishes that echo
nostalgia with a modern and local twist.
Our award-winning wine list is deep and global, carefully selected to deliver
value and quality – let us guide you to your favourites or help you discover new
varietals.
Open for lunch and dinner, with cocktail bar and happy hour in between and
our own private dining room overlooking the art gallery, Hawksworth delivers an
array of experiences to suit your individual mood and preferences.
</p>
</div>
<div class="col-lg-6 pt-4 pt-lg-0 content">
<div class="skills-content">
<p><b>Rating: </b></p>
<div class="progress">
<span class="skill">5 star <i class="val">93%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="93" aria-
valuemin="0" aria-valuemax="100"></div>
</div>
</div>

110
Food Order System
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>


<section class="counts section-bg">
<div class="row no-gutters">
<div class="col-lg-3 col-md-6 d-md-flex align-items-md-stretch">

<div class="count-box">
<i class="icofont-simple-smile"></i>
<span data-toggle="counter-up">232</span>
<p><strong>Happy Customers</strong></p>
</div>
111
Food Order System
</div>

<i class="icofont-document-folder"></i>
<p><strong>Items</strong></p>
</div>
</div>

<i class="icofont-live-support"></i>
<span data-toggle="counter-up">1,463</span>
<p><strong>Hours Of Support</strong></p>
</div>
</div>

<i class="icofont-users-alt-5"></i>
<p><strong>Hard Workers</strong></p>
</div>
</div>
</div>
</div>
</section>


<section id="team" class="team">
<div class="section-title">
<h2>Our Team</h2>
</div>
<div class="row" style="padding-left: 379px;">
<div class="col-xl-3 col-lg-4 col-md-6" data-wow-delay="0.1s">

<div class="member">
<img src="{% static 'shop/assets/img/team/team-1.jpg' %}" class="img-
fluid" alt="">
<div class="member-info">
<div class="member-info-content">
<h4>Mohammed Afnan</h4>
</div>
<div class="social">
112
Food Order System
<a href="https://twitter.com/Mohamme73037623" target="_blank"><i

class="icofont-twitter"></i></a>
<a href="https://github.com/Mohammedafnan42" target="_blank"><i
class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/mohammed-afnan-9668b61ba/"
target="_blank"><i class="icofont-linkedin" target="_blank"></i></a>
</div>
</div>
</div>
</div>
</section>

</main>
{% endblock %}
{% block js %}
<script>
$('#popcart').popover();
updatePopover(cart);
function updatePopover(cart) {
var popStr = "";
popStr = popStr + "<h5> Click <a href='/shop/checkout'><button class='btn btn-
primary'>Here</button></a> to order </h5><div class='mx-2 my-2'>";
document.getElementById("popcart").setAttribute('data-content', popStr);
}
</script>
{% load static %}

<script src="{% static 'shop/assets/vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'shop/assets/vendor/bootstrap/js/bootstrap.bundle.min.js'
%}"></script>
<script src="{% static 'shop/assets/vendor/jquery-sticky/jquery.sticky.js'
%}"></script>
<script src="{% static 'shop/assets/vendor/waypoints/jquery.waypoints.min.js'
%}"></script>
<script src="{% static 'shop/assets/vendor/counterup/counterup.min.js'
%}"></script>


<script src="{% static 'shop/assets/js/main.js' %}"></script>
{% endblock %}
113
Food Order System
Basic.html
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">


integrity="sha384-
GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI70
6tWS" crossorigin="anonymous">
integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw
1T" crossorigin="anonymous">
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-
oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7
Ay" crossorigin="anonymous">
<title>{% block title%} {% endblock %}</title>

<link rel = "icon" href ="http://127.0.0.1:8000/media/shop/images/logo.png" type =
"image/x-icon">
<style>
.popover-header {
background-color: #dfd7d7
}
{% block css %} {% endblock %}

</style>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/shop">The Food Mania</a>

114
Food Order System
<button class="navbar-toggler" type="button" data-toggle="collapse" data-

target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/shop">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item dropdown" id="categoryList">
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/tracker">Tracker</a>
</li>
<a class="nav-link" href="/shop/orderView/">Your Orders</a>
</li>
<a class="nav-link" href="/shop/about">About Us</a>
</li>
<a class="nav-link" href="/shop/contact">Contact Us</a>
</li>
</ul>
<form method="get" action="/shop/search" class="form-inline my-2 my-lg-0
mx-3">
<input class="form-control mr-sm-2" type="search" name="search"
id="search" placeholder="Search" aria-label="Search" required>
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
{% if user.is_authenticated %}
<ul class="navbar-nav mr-2">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href='#' id="navbarDropdown"
role="button" data-toggle="dropdown"> Welcome {{request.user}}</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/shop/logout/">Logout</a>
</div>
</li>
</ul>
{% else %}

<button type="button" class="btn btn-success mx-2" data-toggle="modal" data-
target="#loginModal">Login</button>

115
Food Order System


<button type="button" class="btn btn-success mx-2" data-toggle="modal" data-
target="#signupModal">SignUp</button>
{% endif %}
<button type="button" class="btn btn-secondary mx-2" id="popcart" data-
container="body" data-html="true" data-toggle="popover" title="MyCart" data-
placement="bottom" data-content="Bottom popover">
Cart(<span id="cart">0</span>)
</button>
</div>
</nav>


<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-
labelledby="loginModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: rgb(111 202 203);">
<h5 class="modal-title" id="loginModal">Login Here</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/shop/login/" method="post">{% csrf_token %}
<div class="text-left my-2">
<b><label for="username">Username</label></b>
<input class="form-control" id="loginusername" name="loginusername"
placeholder="Enter Your Username" type="text" required pattern="^[a-z]{3,15}$">
</div>
<b><label for="password">Password</label></b>
<input class="form-control" id="loginpassword" name="loginpassword"
placeholder="Enter Your Password" type="password" required data-
toggle="password">
</div>
<button type="submit" class="btn btn-success">Submit</button>
<a href="/shop/reset_password/" style="padding-left: 250px;">Forgot
password?</a>
</form>
<p class="mb-0 mt-1">Don't have an account? <a href="#" data-
dismiss="modal" data-toggle="modal" data-target="#signupModal">Sign up
now</a>.</p>
</div>
</div>
116
Food Order System
</div>
</div>


<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-
labelledby="signupModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color: rgb(111 202 203);">
<h5 class="modal-title" id="signupModal">SignUp Here</h5>
<button type="button" class="close" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/shop/signup/" method="post">{% csrf_token %}
<div class="form-group">
<b><label for="username">Username</label></b>
<input class="form-control" id="username" name="username"
placeholder="Choose a unique Username" type="text" required pattern="^[a-
z]{3,15}$">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<b><label for="f_name">First Name:</label></b>
<input type="text" class="form-control" id="f_name" name="f_name"
placeholder="First Name" required>
</div>
<b><label for="l_name">Last name:</label></b>
<input type="text" class="form-control" id="l_name" name="l_name"
placeholder="Last name" required>
</div>
</div>
<b><label for="email1">Email:</label></b>
<input type="email" class="form-control" id="email1" name="email1"
placeholder="Enter Your Email" required>
</div>
<b><label for="phone">Phone No:</label></b>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon">+91</span>
</div>
<input type="tel" class="form-control" id="phone" name="phone"
placeholder="Enter Your Phone Number" required pattern="[0-9]{10}">
</div>
</div>
117
Food Order System

<b><label for="password">Password:</label></b>
<input class="form-control" id="password" name="password"
placeholder="Enter Password" type="password" required data-toggle="password">
</div>
<b><label for="password1">Renter Password:</label></b>
<input class="form-control" id="password1" name="password1"
placeholder="Renter Password" type="password" required data-toggle="password">
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
<p class="mb-0 mt-1">Already have an account? <a href="#" data-
dismiss="modal" data-toggle="modal" data-target="#loginModal">Login
here</a>.</p>
</div>
</div>
</div>
</div>
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible mb-0" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-
hidden="true">×</span></button>
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block body %} {% endblock %}
<div class="footer container-fluid bg-dark text-light">
<p class="text-center py-2 mb-0">Copyright © 2022 </p>
</div>



<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-
QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
integrity="sha384-
wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblg
ut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
integrity="sha384-
B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
118
Food Order System
<script src="https://unpkg.com/[email protected]/dist/bootstrap-
show-password.min.js"></script>
{% block js %} {% endblock %}


































</body>
</html>

119
Food Order System
Checkout.html
{% block title%} Checkout - Food Mania{% endblock %}

{% block css %}
#cont {
min-height : 609px;
}
#cont2 {
min-height : 626px;
}
{% endblock %}
{% block body %}
{% if user.is_authenticated %}
<div class="container" id="cont">
<div class="col my-3">
<span id="title"><h2> My Awesome Cart Express Checkout - Review Your Cart
items </h2></span>
<div class="my-2">
<ul class="list-group" id='items'>
</ul>
</div>
</div>
<div class="col my-4">
<span id="info">
<h2>{{ request.user.first_name }} Enter Address & Other Details</h2>
<form method="post" action="/shop/checkout/">{% csrf_token %}
<input type="hidden" name="itemsJson" id="itemsJson">
<input type="hidden" name="amount" id="amount">
<input type="hidden" name="user_id" id="user_id" value="{{ request.user.id
}}">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name"
placeholder="Name" required>
</div>
<label for="Email">Email</label>
<input type="email" class="form-control" id="email" name="email"
placeholder="[email protected]" required>
</div>
</div>
120
Food Order System
<label for="Address1">Address</label>
<input type="text" class="form-control" id="address1" name="address1"
placeholder="1234 Main St" required>
</div>
<label for="Address2">Address Line 2</label>
<input type="text" class="form-control" id="address2" name="address2"
placeholder="Apartment, studio, or floor">
</div>
<label for="City">City</label>
<input type="text" class="form-control" id="city" name="city"
placeholder="Bengaulru" required>
</div>
<label for="State">State</label>
<input type="text" class="form-control" id="state" name="state"
placeholder="Karnataka" required>
</div>
<label for="zip_code">Zip</label>
<input type="text" class="form-control" id="zip_code" name="zip_code"
placeholder="xxxxxx" required pattern="[0-9]{6}">
</div>
</div>
<label for="phone">Phone Number</label>
placeholder="xxxxxxxxxxx" required pattern="[0-9]{10}">
</div>
<div class="alert alert-info">
<strong>Info!</strong> online payment are currently disabled so please
choose cash on delivery.
</div>
<button type="submit" class="btn btn-primary" name="onlinePay"
disabled>Online Pay</button>
<button type="submit" class="btn btn-primary"
name="cashOnDelivery">Cash On Delivery</button>
</form>
</span>
</div>
</div>
{% else %}
<div id="cont2">
<div class="alert alert-info">
<font style="font-size:22px"><center>Before checkout you need to
<strong><a class="alert-link" data-toggle="modal" data-
target="#loginModal">Login</a></strong></center></font>
</div>
121
Food Order System
</div>
{% endif %}
{% endblock %}
{% block js %}
<script>
if (localStorage.getItem('cart') == null) {
var cart = {};
} else {
cart = JSON.parse(localStorage.getItem('cart'));
}
// console.log(cart);
var sum = 0;
var sumPrice = 0;
var totalPrice = 0;
if ($.isEmptyObject(cart)) {
// If object is empty
mystr = "<div class='alert alert-info'><font style='font-size:22px'>"
mystr = mystr + "<center>Your cart is <strong>Empty</strong>, please
<strong>Add</strong> some items before checking out ! </center>"
mystr = mystr + "<center>Click <a href='/shop/' class='alert-link'>Here</a> to Add
items.</center></font></div>";
$('#items').append(mystr);
document.getElementById('info').innerHTML = "";
document.getElementById('title').innerHTML = "";
} else {
var i = 0;
for (item in cart) {
let name = cart[item][1];
let qty = cart[item][0];
let itemPrice = cart[item][2];
sum = sum + qty;
sumPrice = qty * itemPrice;
totalPrice = totalPrice + sumPrice;
mystr = `<li class="list-group-item d-flex justify-content-between align-items-
center">${++i} : ${name}<span class="badge badge-primary badge-pill">${qty} x
Rs. ${itemPrice} = Rs. ${sumPrice}</span></li>`;
}
mystr = `<li class="list-group-item d-flex justify-content-between align-items-
center" style="background: bisque;">Total Price:</span><span class="badge badge-
danger badge-pill" id="totalPrice">Rs. ${totalPrice} /-</span></li>`;
}
document.getElementById('cart').innerHTML = sum;
document.getElementById('totalPrice').innerHTML = totalPrice;
$('#itemsJson').val(JSON.stringify(cart));
$('#amount').val($('#totalPrice').html());
122
Food Order System
{% if thank %}
alert('Thanks for ordering with us. Your order id is {{id}}. Use it to track your order
using our order tracker');
localStorage.clear();
document.location="/shop";
{%endif%}
// /* restrict user browser click go back button */

// function preback() { window.history.forward(); }
// setTimeout("preback()", 0);
// window.onunload = function() { null };
</script>
{% endblock %}
Contact.html
{% block title%} Contact Us - Food Mania{% endblock %}
{% block css %}
.footer.container-fluid.bg-dark.text-light {
position:fixed;
bottom:0;
}
.contact2 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
/* padding: 60px 0; */
/* margin-bottom: 170px; */
background-position: center top;
}
.contact2 h1,
.contact2 h2,
.contact2 h3,
.contact2 h4,
.contact2 h5,
.contact2 h6 {
color: #3e4555;
}
.contact2 .font-weight-medium {
font-weight: 500;
}

123
Food Order System
.contact2 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.contact2 .bg-image {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.contact2 .card.card-shadow {
-webkit-box-shadow: 0px 0px 30px rgba(115, 128, 157, 0.1);
}
.contact2 .detail-box .round-social {

margin-top: 100px;
}
.contact2 .round-social a {
background: transparent;
margin: 0 7px;
padding: 11px 12px;
}
.contact2 .contact-container .links a {

color: #8d97ad;
}
.contact2 .contact-container {
position: relative;
top: 107px;
}
.contact2 .btn-danger-gradiant {
background: #ff4d7e;
background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b
100%);
background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
}
.contact2 .btn-danger-gradiant:hover {
background: #ff6a5b;
124
Food Order System
background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e

100%);
background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
}
{% endblock %}
{% block body %}
<div class="contact2" style="background-
image:url(http://127.0.0.1:8000/media/shop/images/map.jpg);height: 400px;"
id="contact">
<div class="row contact-container">
<div class="card card-shadow border-0">
<div class="row">
<div class="contact-box p-4">
<div class="row">
<h4 class="title">Contact Us</h4>
</div>
</div>
<form action="/shop/contact/" method="POST">{% csrf_token %}
<div class="form-group mt-3">
<b><label for="name">Name:</label></b>
<input type="text" class="form-control" id="name" name="name"
placeholder="Enter Your Name" required>
</div>
<b><label for="email">Email:</label></b>
<input type="email" class="form-control" id="email" name="email"
placeholder="Enter Your Email" required>
</div>
<b><label for="phone">Phone No:</label></b>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon">+91</span>
</div>
aria-describedby="basic-addon" placeholder="Enter Your Phone Number" required
pattern="[0-9]{10}">
</div>
</div>
<b><label for="desc">Message:</label></b>
<textarea class="form-control" id="desc" name="desc" rows="2"
required minlength="6" placeholder="How May We Help You ?"></textarea>
125
Food Order System
</div>
<button type="submit" class="btn btn-danger-gradiant text-white border-
0 py-2 px-3"><span> SUBMIT NOW <i class="ti-arrow-
right"></i></span></button>
</form>
</div>
</div>
<div class="col-lg-4 bg-image" style="background-
image:url(http://127.0.0.1:8000/media/shop/images/contact.jpg)">
<div class="detail-box p-4">
<h5 class="text-white font-weight-light mb-3">ADDRESS</h5>
<p class="text-white op-7">601 Sherwood Ave. <br> San Bernandino
</p>
<h5 class="text-white font-weight-light mb-3 mt-4">CALL US</h5>
<p class="text-white op-7">2515469442 <br> 6304468851</p>
<div class="round-social light">
<a
href="https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=mdafnan0111@@gm
ail.com" class="ml-0 text-decoration-none text-white border border-white rounded-
circle" target="_blank"><i class="far fa-envelope"></i></a>
<a href="https://github.com/Mohammedafnan42" class="text-
decoration-none text-white border border-white rounded-circle" target="_blank"><i
class="fab fa-github"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block js %}
<script>
updatePopover(cart);
function updatePopover(cart) {
var popStr = "";
popStr = popStr + "<h5> Click <a href='/shop/checkout'><button class='btn btn-
primary'>Here</button></a> to order </h5><div class='mx-2 my-2'>";
document.getElementById("popcart").setAttribute('data-content', popStr);
}
{% if thank %}
alert('Thanks for Contact with us. We will get back to you soon!');
document.location = "/shop";
126
Food Order System
{% endif %}
</script>
{% endblock %}
Admin.py
from django.contrib import admin
# Register your models here.

from .models import Product, Contact, Orders, OrderUpdate
# from django.contrib.auth.models import
from django.contrib.auth.admin import UserAdmin
class OrderUpdateAdmin(admin.ModelAdmin):
list_display = ('order_id', 'update_desc', 'timestamp')
list_filter = ['timestamp']
def has_delete_permission(self, request, obj=None):

return False
class OrdersAdmin(admin.ModelAdmin):
list_display = ('order_id', 'userId', 'name', 'email', 'timestamp')
def has_add_permission(self, request):

return False
def has_change_permission(self, request, obj=None):

return False
class ProductAdmin(admin.ModelAdmin):
list_display = ('product_name', 'category', 'price')
list_filter = ['category']
search_fields = ['product_name']
class ContactAdmin(admin.ModelAdmin):
list_display = ('name', 'desc', 'email', 'timestamp')
def has_delete_permission(self, request, obj=None):

return False
def has_add_permission(self, request):

return False
def has_change_permission(self, request, obj=None):

127
Food Order System
return False
admin.site.register(Product, ProductAdmin)
admin.site.register(Contact, ContactAdmin)
admin.site.register(Orders, OrdersAdmin)
admin.site.register(OrderUpdate, OrderUpdateAdmin)
admin.site.site_header = "The Food Mania"

admin.site.index_title = "The Food Mania Administration"
admin.site.site_title = "The Food Mania Admin"
urls.py
from django.urls import path

from django.contrib.auth import views as auth_views
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('signup/', views.handleSignUp, name='handleSignUp'),
path('login/', views.handeLogin, name="handleLogin"),
path('logout/', views.handleLogout, name="handleLogout"),
path('about/', views.about, name="AboutUs"),
path('contact/', views.contact, name="ContactUs"),
path('tracker/', views.tracker, name="TrackingStatus"),
path('search/', views.search, name="Search"),
path('checkout/', views.checkout, name="Checkout"),
path('productView/<int:myid>', views.productView, name="productView"),
path('orderView/', views.orderView, name="orderView"),
path("handlerequest/", views.handlerequest, name="HandleRequest"),
path('reset_password/',
auth_views.PasswordResetView.as_view(template_name="shop/password_reset.html
"),
name="reset_password"),
path('reset_password_sent/',
auth_views.PasswordResetDoneView.as_view(template_name="shop/password_reset
_sent.html"),
name="password_reset_done"),
path('reset/<uidb64>/<token>/',
auth_views.PasswordResetConfirmView.as_view(template_name="shop/password_re
set_form.html"),
name="password_reset_confirm"),
128
Food Order System
path('reset_password_complete/',
auth_views.PasswordResetCompleteView.as_view(template_name="shop/password_
reset_done.html"),
name="password_reset_complete"),
Models.py
from django.db import models
# Create your models here.

from django.utils import timezone
class Product(models.Model):
product_id = models.AutoField
product_name = models.CharField(max_length=50)
category = models.CharField(max_length=50, default="")
subcategory = models.CharField(max_length=50, default="")
price = models.IntegerField(default=0)
desc = models.CharField(max_length=200)
pub_date = models.DateField()
image = models.ImageField(upload_to="shop/images", default="")
def __str__(self):
return self.product_name
class Contact(models.Model):
msg_id = models.AutoField(primary_key=True)
name = models.CharField(max_length=50)
email = models.CharField(max_length=70, default="")
phone = models.CharField(max_length=70, default="")
desc = models.CharField(max_length=500, default="")
timestamp = models.DateTimeField(default=timezone.now)
def __str__(self):
return self.name
class Orders(models.Model):
order_id = models.AutoField(primary_key=True)
items_json = models.CharField(max_length=5000)
userId = models.IntegerField(default=0)
amount = models.IntegerField(default=0)
name = models.CharField(max_length=90)
129
Food Order System
email = models.CharField(max_length=111)
address = models.CharField(max_length=111)
city = models.CharField(max_length=111)
state = models.CharField(max_length=111)
zip_code = models.CharField(max_length=111)
phone = models.CharField(max_length=111, default="")
class OrderUpdate(models.Model):
update_id = models.AutoField(primary_key=True)
order_id = models.IntegerField(default="")
update_desc = models.CharField(max_length=5000)
def __str__(self):
return self.update_desc
views.py
from django.shortcuts import render, HttpResponse, redirect

from django.http import HttpResponseRedirect
# I have created this file - Darshan

# from django.http import HttpResponse
from .models import Product, Contact, Orders, OrderUpdate
from django.contrib.auth.models import User
from django.contrib import messages
from math import ceil
from django.contrib.auth import authenticate, login, logout
import json
from django.views.decorators.csrf import csrf_exempt
from PayTm import Checksum
MERCHANT_KEY = 'kbzk1DSbJiV_O3p5'; # Your-Merchant-Key-Here
def index(request):
allProds = []
catprods = Product.objects.values('category', 'id')
cats = {item['category'] for item in catprods}
for cat in cats:
prod = Product.objects.filter(category=cat)
n = len(prod)
nSlides = n // 4 + ceil((n / 4) - (n // 4))
allProds.append([prod, range(1, nSlides), nSlides])
darshan = {'allProds': allProds}
return render(request, 'shop/index.html', darshan)
# return HttpResponse("<h1 align='center'> <font color='#FF0000' size='9' >
Welcome Our Restaurant </font> </h1>")
130
Food Order System
def about(request):
return render(request, 'shop/about.html')
def contact(request):
thank = False
if request.method == "POST":
name = request.POST.get('name', '')
email = request.POST.get('email', '')
phone = request.POST.get('phone', '')
desc = request.POST.get('desc', '')
contact = Contact(name=name, email=email, phone=phone, desc=desc)
contact.save()
thank = True
return render(request, 'shop/contact.html', {'thank': thank})
return render(request, 'shop/contact.html', {'thank': thank})
def tracker(request):
orderId = request.POST.get('orderId', '')
password = request.POST.get('password')
user = authenticate(username=name, password=password)
if user is not None:
try:
order = Orders.objects.filter(order_id=orderId, email=email)
if len(order) > 0:
update = OrderUpdate.objects.filter(order_id=orderId)
updates = []
for item in update:
updates.append({'text': item.update_desc, 'time': item.timestamp})
response = json.dumps({"status": "success", "updates": updates,
"itemsJson": order[0].items_json}, default=str)
return HttpResponse(response)
else:
return HttpResponse('{"status":"noitem"}')
except Exception as e:
return HttpResponse('{"status":"error"}')
else:
return HttpResponse('{"status":"Invalid"}')
return render(request, 'shop/tracker.html')
def orderView(request):
if request.user.is_authenticated:
current_user = request.user
131
Food Order System
orderHistory = Orders.objects.filter(userId=current_user.id)
if len(orderHistory) == 0:
messages.info(request, "You have not ordered.")
return render(request, 'shop/orderView.html')
return render(request, 'shop/orderView.html', {'orderHistory': orderHistory})
return render(request, 'shop/orderView.html')
def searchMatch(query, item):

if query in item.desc.lower() or query in item.product_name.lower() or query in
item.category.lower() or query in item.desc or query in item.product_name or query
in item.category or query in item.desc.upper() or query in item.product_name.upper()
or query in item.category.upper():
return True
else:
return False
def search(request):
query = request.GET.get('search')
allProds = []
catprods = Product.objects.values('category', 'id')
cats = {item['category'] for item in catprods}
for cat in cats:
prodtemp = Product.objects.filter(category=cat)
prod = [item for item in prodtemp if searchMatch(query, item)]
n = len(prod)
nSlides = n // 4 + ceil((n / 4) - (n // 4))
if len(prod) != 0:
allProds.append([prod, range(1, nSlides), nSlides])
darshan = {'allProds': allProds, "msg": ""}
if len(allProds) == 0 or len(query) < 3:
darshan = {'msg': "No item available. Please make sure to enter relevant search
query"}
return render(request, 'shop/search.html', darshan)
def checkout(request):
items_json = request.POST.get('itemsJson', '')
user_id = request.POST.get('user_id', '')
amount = request.POST.get('amount', '')
address = request.POST.get('address1', '') + " " + request.POST.get('address2', '')
city = request.POST.get('city', '')
state = request.POST.get('state', '')
zip_code = request.POST.get('zip_code', '')
phone = request.POST.get('phone', '')

132
Food Order System
order = Orders(items_json=items_json, userId=user_id, name=name,

email=email, address=address, city=city, state=state, zip_code=zip_code,
phone=phone, amount=amount)
order.save()
update = OrderUpdate(order_id=order.order_id, update_desc="The Order has
been Placed")
update.save()
thank = True
id = order.order_id
if 'onlinePay' in request.POST:
# Request paytm to transfer the amount to your account after payment by user
darshan_dict = {
'MID': 'WorldP64425807474247', # Your-Merchant-Id-Here

'ORDER_ID': str(order.order_id),
'TXN_AMOUNT': str(amount),
'CUST_ID': email,
'INDUSTRY_TYPE_ID': 'Retail',
'WEBSITE': 'WEBSTAGING',
'CHANNEL_ID': 'WEB',
'CALLBACK_URL': 'http://127.0.0.1:8000/shop/handlerequest/',
}
darshan_dict['CHECKSUMHASH'] =
Checksum.generate_checksum(darshan_dict, MERCHANT_KEY)
return render(request, 'shop/paytm.html', {'darshan_dict': darshan_dict})
elif 'cashOnDelivery' in request.POST:
return render(request, 'shop/checkout.html', {'thank': thank, 'id': id})
return render(request, 'shop/checkout.html')
def productView(request, myid):

product = Product.objects.filter(id=myid)
# print(product)
return render(request, 'shop/prodView.html', {'product': product[0]})
def handeLogin(request):
# Get the post parameters
loginusername = request.POST['loginusername']
loginpassword = request.POST['loginpassword']
user = authenticate(username=loginusername, password=loginpassword)

if user is not None:
login(request, user)
messages.success(request, "Successfully Logged In")
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
else:
messages.warning(request, "Invalid credentials! Please try again")
133
Food Order System
return HttpResponse("404- Not found")
def handleSignUp(request):
# Get the post parameters
username = request.POST['username']
f_name = request.POST['f_name']
l_name = request.POST['l_name']
email = request.POST['email1']
phone = request.POST['phone']
password = request.POST['password']
password1 = request.POST['password1']
# check for errorneous input

if (password1 != password):
messages.warning(request, " Passwords do not match")
try:
user = User.objects.get(username=username)
messages.warning(request, " Username Already taken. Try with different
Username.")
except User.DoesNotExist:
# Create the user
myuser = User.objects.create_user(username=username, email=email,
password=password)
myuser.first_name = f_name
myuser.last_name = l_name
myuser.phone = phone
myuser.save()
messages.success(request, " Your Account has been successfully created")
else:
return HttpResponse("404 - Not found")
def handleLogout(request):
logout(request)
messages.success(request, "Successfully logged out")
@csrf_exempt
def handlerequest(request):
# paytm will send you post request here
form = request.POST
134
Food Order System
response_dict = {}
for i in form.keys():
response_dict[i] = form[i]
if i == 'CHECKSUMHASH':
checksum = form[i]
verify = Checksum.verify_checksum(response_dict, MERCHANT_KEY,

checksum)
if verify:
if response_dict['RESPCODE'] == '01':
print('order successful')
else:
print('order was not successful because' + response_dict['RESPMSG'])
return render(request, 'shop/paymentstatus.html', {'response': response_dict})
4.2 Data Validation
Login

135
Food Order System
TESTING

136
Food Order System
5.1 INTRODUCTION
The system testing deals with the process of testing the system as a whole. This is
done after the integration process. Moving through each module from top to bottom
tests the entire system. The verification and validation process are then carried out.
The errors that occur at the testing phase are eliminated and a well-functioning system
is developed. Test case design focuses on a set of techniques, which meets all testing
objectives, which are mentioned below
1. Testing is a process of executing a program with the intent of finding an error.

2. A successful test is one that uncovers an as yet undiscovered error.
Testing demonstrates that software functions work according to specifications. In

addition, data collected from testing provides a good indication of software reliability
and some indication of software quality as a whole. Testing results in the deduction in
the number of errors. Critical modules are tested as early as possible. The following
tests have been carried out after developing the system.
Black Box Testing
Black box testing is also known as Behavioural Testing, Black box testing methods
focus on the functional requirements of the software. That is, black box testing enables
us to derive sets of input conditions that will fully exercise all functional requirements
of the program.
Black box testing attempts to find errors in following categories:
• Incorrect or missing functions.
• Interface errors.
• Errors in data structures or external database Access.
• Behaviour or Performance errors.
• Initialization and termination errors.
Advantages:
• Tests are done from user’s point of view and will help in exposing discrepancies
in the specifications.
• Tester need not know programming languages or how the software has been
implemented.
• Tests can be conducted by a body independent from the developers, allowing for
an objective perspective and the avoidance of developer-bias.
• Test cases can be designed as soon as the specifications are complete
Disadvantages:
• Only a small number of possible inputs can be tested and many program paths will
be left untested.
• Without a clear specification which is the situation in many projects, test cases will
be difficult to design.
137
Food Order System
• Tests can be redundant if the software designer/developer has already run a test
case.
White Box Testing
White Box Testing is also known as clear box testing, open box testing is a software
testing. White box testing is a test case design method that uses the control structure of
the procedural design to derive test cases. Using white box testing methods, we can
derive test cases that
• Guarantee that all independent paths within a module have been exercised at least
once.
• Exercise all logical decisions on their true and false sides.
• Execute all loops at their boundaries and within their Operational bounds.
Advantages:
• Testing can be commenced at an earlier stage. One need not wait for the GUI to be
available. Testing is more thorough, with the possibility of covering most paths.
Disadvantages:
• Test script maintenance can be a burden if the implementation changes too
frequently.
• Since this method of testing it closely tied with the application being testing, tools
to cater to every kind of implementation/platform may not be readily available.
Testing Strategy
A strategy for software system integrates software test design method into a well-
planned series of steps that results in successful construction of software. The strategy
provides road map that describe the steps to be conducted. Conducted as part of testing.
When these steps are planned and undertaken and time, resources will be required.
Therefore, any testing strategy must incorporate any test planning. Test case design,
test execute, and resultant data collection and evaluation. A software testing strategy
should be flexible enough to promote a customized testing approach at the same time it
must be rigid enough to promote a reasonable planning and management tracking as
the project progresses.
Unit Testing
In this testing the small part of a project is tested first that is modules and the sub
functions present in the project. If every entry in module and if all the sub function work
properly then this shows the unit testing is successful. Unit testing is a code-based
testing which is performed by the developers this testing is mainly done to test each and
individual units separately. This unit testing can be done for small units of code are
generally no larger than a class.
Unit testing which is attesting of individual hardware or software units or groups of
related units. A unit is a software component that cannot be subdivided into other
components. Software engineers write white box test cases to examine whether the unit
is coded correctly. Unit test is important for ensuring the code is solid before it is
integrated with other code. Once the code is integrated into the code base, the cause of

138
Food Order System
an observed failure is more difficult to find approximately 65% of all bugs can be
caught in unit testing.
• Module interface are tested for proper information flow.
• Local data are examined to ensure that integrity is maintained.
• Boundary conditions are tested.
• Basic paths are tested.
• All error handling path should be tested.
• Drivers and/or stubs need to be developed to test incomplete software.
Integration Testing
The integration is the next important concept that highlights in the testing scenario.
Integration testing can be performed in different strategies. One of them is the big bang
testing in which one could first test all of a system’s Modules separately and then whole
systems at once. But here we proceed abruptly from the module testing and the
integration testing disappears. Another alternative is the incremental Testing. With the
incremental testing there are many advantages. We can start the integration as soon as
reasonable subsets of modules have been developed. It is easier to localize errors
incrementally. The partial aggressions of modules often constitute important
subsystems that can have autonomy with these testing. The need for subs and drivers
can be reduced. There are two approaches to the incremental Testing. They include
bottom-up and Top-down aggregations. The former means starting aggregation and
testing from leaves of the module charts. The latter means starting from the top-level
modules and substitute for higher-level modules. In our project we have used the top-
down approach of incremental testing.
Top-down integration is an incremental approach to the construction of program

structure. Modules are integrated by moving downward through the control hierarchy,
beginning with the main control module that is the basic connectivity module in our
project. Test is done on each module. The top-down integration strategy verifies major
control or decision points. In the beginning of the integration phase dummy frames
were selected as stubs to ensure that the data flow occurred through the correct
hierarchical structure. Later the actual module replaces these stubs.
Validation Testing
Validation testing can be defined in many ways but a simple definition is that validation
succeeds when the software functions in a manner that can be reasonably expected by
the users. After validation test has been conducted one of the two possible conditions
exists
1. The function or the performance characteristics confirms to specification and are

accepted.
2. A deviation from specification is uncovered and a deficiency list is created.
3. Validation case are based on used case scenarios the behaviour model and the event
flow diagrams created in the analysis model must ensure that each function are
performance characteristics confirm to its specification.

139
Food Order System
5.1 TEST CASES

The test procedure used in testing process is Black box testing or functional coding.
Test cases are analysed accordingly. The involves the manual evaluation of the flow
from one module to the other and check accordingly for the process flow.
User Login:
TEST CHECK STEP DATA RES

CASE ITEM TO EXPEC ULT
NUM TEST EXEC TED
BER CASE U RESUL
OBJEC TE T
TIVE ACTUA
L
1 Login Fields Click Yes
Page are Login
empty Prompt
error
message
2 Login Fields Click Yes
pageLog are Login
in empty raz@12
id/passw 3/
ord clicltoea
t
Prompt
error
message
3 Login Navig Login Yes
pageLog ate raz@12
in id to 3/
& Home clicltoea
passwor page t
d with Prompt
succes login
sful successful
login
Click

140
Food Order System
New User Register:

141
Food Order System
OUTPUT SCREENS

142
Food Order System
Output Screens

143
Food Order System

144
Food Order System

145
Food Order System
FUTURE ENHANCEMENTS

146
Food Order System
Future Enhancements
The following section describes the work that will be implemented with future
releases of the
software.
➢ Customize orders: Allow customers to customize food orders
➢ Enhance User Interface by adding more user interactive features. Provide Deals
and
promotional Offer details to home page. Provide Recipes of the Week/Day to Home
Page.
➢ Payment Options: Add payment gateway options such as PayPal, Cash, Gift Cards
etc.
Allow to save payment details for future use.
➢ Allow to process an order as a Guest
➢ Order Process Estimate: Provide customer a visual graphical order status
➢ Restaurant Locator: Allow to find and choose a nearby restaurant.

147
Food Order System
CONCULSION

148
Food Order System
Conclusion:
After reviewing our work, the conclusion is that after many adjustments the system
works. As good as it is now, there can still be made many adjustments/improvements.
However, in the time was given that one person can work on this project, the overall
results are satisfactory in our opinion. The report covers the entire course of the project
and results are there were needed. The first weeks the work progressed slower than
expected, then the pace was increased to finish on time.
For customers, web-based ordering system can make it easier to order food without
having to visit the restaurants so that customers can save time and costs. For admin,
they can serve customers optimally in ordering their food and making the order report
easier. Payment methods can also be done by customers through a system that is
available on the web to facilitate customers in paying for their orders.

149
Food Order System
BIBLIOGRAPHY

150
Food Order System
Bibliography
Following links and websites were referred during the development of this project:
• https://getbootstrap.com/
• https://www.djangoproject.com/
• https://github.com/
• http://stackoverflow.com/
• https://codewithharry.com/

Food Order Report

Uploaded by

Copyright:

Available Formats

Food Order Report

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Food Order Report

Uploaded by

Copyright:

Available Formats

ADMINISTRATIVE MANAGEMENT COLLEGE

18th KM, Bannerghatta Road, Bangalore – 560076

DEPARTMENT OF COMPUTER APPLICATIONS

Submitted in partial fulfilment of the requirement

Under the Guidance of SUBMITTED BY

DEPARTMENT OF COMPUTER APPLICATIONS

Bachelor of Computer Applications

completed by Mohammed Afnan bearing register number 19SBSB7027 of 6th

semester Bachelor of Computer Applications as prescribed by Bangalore

Signature of the lecturer-in-charge Head of the Department

I hereby declare that project being submitted entitled “FOOD ORDER

Mohammed Afnan [19SBSB7027]

I sincerely thank Dr. Sudharshan G M, Principal, Administrative Management College, for

Bachelor Of Computer Application

Bachelor Of Computer Application

Bachelor Of Computer Application

1.1 EXISTING SYSTEM

Bachelor Of Computer Application

1.3 ISSUES WITH EXISTING SYSTEM

1.4 HOW THE ISSUES IN EXISTING SYSTEM IS ADDRESSED USING

Bachelor Of Computer Application

Bachelor Of Computer Application

2.1 REQURIMENT ANALYSIS

Bachelor Of Computer Application

2.2 ARCHITECTURE DIAGRAM

Bachelor Of Computer Application

2.3 FUNCTIONAL REQUIREMENTS

Functional Requirements: This section provides requirement overview of the

4. Select food items

6. Review the order before submitting

Bachelor Of Computer Application

1. Login (Employee login page)

Bachelor Of Computer Application

2.3.1 NON-FUNCTIONAL REQUIREMENT

Bachelor Of Computer Application

Complete History of Django:

1.6 2 Sep 2014 Migrations, application loading and configuration.

SQLite Features/ Why to use SQLite

SQLite is written in ANSI-C and provides simple and easy-to-use API.

Bachelor Of Computer Application

❖ Order Status Update Module

Bachelor Of Computer Application

Bachelor Of Computer Application

3.1 UML DIAGRAMS

UML (Unified Modelling Language) is a standard language for specifying, visualizing,

3.1.1 GOALS OF UML

Bachelor Of Computer Application

3.1.2 USECASE DIAGRAM

Bachelor Of Computer Application

3.2 SEQUENCE DIAGRAM

Bachelor Of Computer Application

3.3 ACTIVITY DIAGRAM: ADMIN

Bachelor Of Computer Application

3.2.1 ACTIVITY DIAGRAM: LOGIN

Bachelor Of Computer Application

3.4 STRUCTURE CHART

Bachelor Of Computer Application

3.5 DFD DIAGRAM

Bachelor Of Computer Application