Food Order Report
Food Order Report
A
Project Report on
Food Order System
CERTIFICATE
This is to certify that the project titled Food Order System was successfully
University for the academic year 2021-2022 under our guidance and supervision.
Examiners:
1. ___________________
2. ___________________
DECLARATION
Thanking you,
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.
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
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.
INTRODUCTION
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.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.
• 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.
• 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.
Bachelor Of Computer Application
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.
SYSTEM ANALYSIS
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.
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.
Bachelor Of Computer Application
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.
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.
5. Changes to order
Input: “go to cart” option selected.
Output: customer can delete or add food item in order.
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.
Employees:
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
Input: “Logout” option selected.
Output: you are successfully logout.
State: System display login page.
Administrators:
➢ Administrators must be able to use Employees all features.
1. Login (admin login page)
Input: “Login” option selected.
Output: admin prompted to enter the username and password.
2. Logout
Input: “Logout” option selected.
Output: you are successfully logout.
State: System display login page
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.
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
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 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.
Bachelor Of Computer Application
21
Food Order System
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.
❖ 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.
SYSTEM DESIGN
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.
• 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.
• 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.
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.
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:
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.
3.7.1 TABLES
Django migrations
SQLite Sequence
Shop Products
Django Migrations
SQLite Sequence
Auth Permission
Auth Group
Auth User
Django Session
Shop Product
Login Form
Sign Up Form
Contact Us Form
CODING
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()
Restaurant_Management_System
Templates
Index.html
<!doctype html>
<html lang="en">
<head>
<!-- <script> window.location="/shop";</script>-->
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<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%}
{%endblock %}
Settings.py
"""
Django settings for Restaurant_management_system project.
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',
],
},
},
Bachelor Of Computer Application
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'
USE_I18N = True
USE_L10N = True
USE_TZ = True
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
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
Bachelor Of Computer Application
49
Food Order System
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 {
Bachelor Of Computer Application
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;
}
Bachelor Of Computer Application
51
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/
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
font-family: "Open Sans", sans-serif;
color: #334240;
}
a{
color: #1bbca3;
}
a:hover {
color: #2ae0c4;
text-decoration: none;
}
/*--------------------------------------------------------------
# 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;
Bachelor Of Computer Application
52
Food Order System
.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;
transition: all 0.5s;
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;
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu, .nav-menu * {
margin: 0;
padding: 0;
list-style: none;
}
.nav-menu a {
display: block;
position: relative;
color: #425451;
padding: 14px 15px;
transition: 0.3s;
font-size: 13px;
font-weight: 500;
font-family: "Roboto", sans-serif;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.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;
box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
transition: ease all 0.3s;
}
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;
}
/* 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;
}
padding-left: 10px;
position: absolute;
right: 15px;
}
.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;
transition: all 0.4s;
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;
Bachelor Of Computer Application
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;
Bachelor Of Computer Application
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-indicators li {
cursor: pointer;
opacity: 1;
}
#hero .btn-get-started {
font-family: "Roboto", sans-serif;
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 {
background: #1bbca3;
color: #fff;
text-decoration: none;
}
/*--------------------------------------------------------------
# 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;
text-transform: uppercase;
margin-bottom: 20px;
padding-bottom: 0;
color: #4b605c;
}
.section-title p {
margin-bottom: 0;
color: #5f7c78;
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
padding: 15px 0;
background-color: #f2f5f4;
min-height: 40px;
}
.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 {
display: inline-block;
padding-right: 10px;
color: #6c757d;
content: "/";
}
/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about .content h3 {
font-weight: 500;
font-size: 24px;
color: #58716d;
font-family: "Poppins", sans-serif;
}
.about .content ul {
list-style: none;
padding: 0;
Bachelor Of Computer Application
62
Food Order System
.about .content ul li {
padding-bottom: 10px;
}
.about .content ul i {
font-size: 20px;
padding-right: 4px;
color: #1bbca3;
}
.about .progress {
height: 50px;
display: block;
background: none;
}
.about .progress-bar-wrap {
background: #e6eceb;
}
.about .progress-bar {
width: 1px;
height: 10px;
transition: .9s;
background-color: #1bbca3;
}
/*--------------------------------------------------------------
# Counts
Bachelor Of Computer Application
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 p {
padding: 30px 0 0 0;
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 14px;
}
.counts .count-box a {
font-weight: 600;
display: block;
margin-top: 20px;
color: #7c9995;
font-size: 15px;
font-family: "Poppins", sans-serif;
transition: ease-in-out 0.3s;
}
/*--------------------------------------------------------------
# Our Services
--------------------------------------------------------------*/
.services .icon-box {
padding: 30px;
Bachelor Of Computer Application
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;
border-radius: 50px;
transition: all 0.3s;
z-index: -1;
}
.services .icon-box:hover::before {
background: #1bbca3;
right: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 0px;
}
.services .icon {
margin: 0 auto 20px auto;
padding-top: 10px;
display: inline-block;
text-align: center;
border-radius: 50%;
width: 60px;
height: 60px;
background: #1bbca3;
transition: all 0.3s ease-in-out;
}
.services .icon i {
font-size: 36px;
line-height: 1;
color: #fff;
}
.services .title {
Bachelor Of Computer Application
65
Food Order System
font-weight: 700;
margin-bottom: 15px;
font-size: 18px;
}
.services .title a {
color: #425451;
}
.services .description {
font-size: 15px;
line-height: 28px;
margin-bottom: 0;
}
/*--------------------------------------------------------------
# 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;
background-size: cover;
padding: 60px 0;
}
.cta h3 {
color: #fff;
font-size: 28px;
font-weight: 700;
}
.cta p {
color: #fff;
}
.cta .cta-btn {
font-family: "Poppins", sans-serif;
font-weight: 500;
Bachelor Of Computer Application
66
Food Order System
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 28px;
border-radius: 25px;
transition: 0.5s;
margin-top: 10px;
border: 2px solid #1bbca3;
color: #fff;
}
.cta .cta-btn:hover {
background: #1bbca3;
border: 2px solid #1bbca3;
}
/*--------------------------------------------------------------
# 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;
transition: ease-in-out 0.3s;
}
.more-services .btn {
border-radius: 50px;
padding: 4px 30px 6px 30px;
border: 2px solid #1bbca3;
}
.more-services .btn:hover {
color: #fff;
background: #1bbca3;
}
/*--------------------------------------------------------------
# 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-size: cover;
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;
Bachelor Of Computer Application
68
Food Order System
background: #f2f5f4;
border-radius: 5px;
}
.info-box .accordion-list a {
display: block;
position: relative;
font-family: "Poppins", sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 500;
padding-right: 30px;
outline: none;
transition: ease-in-out 0.3s;
}
.info-box .accordion-list i {
font-size: 24px;
position: absolute;
right: 0;
top: 0;
}
.info-box .accordion-list p {
margin-bottom: 0;
padding: 10px 0 0 0;
}
/*--------------------------------------------------------------
# Our Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
margin-bottom: 30px;
}
.portfolio #portfolio-flters {
padding: 0;
margin: 0 auto 35px auto;
list-style: none;
text-align: center;
background: #fff;
border-radius: 50px;
padding: 2px 15px;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
Bachelor Of Computer Application
70
Food Order System
.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;
}
font-size: 20px;
color: #fff;
font-weight: 600;
}
.portfolio .portfolio-wrap:hover::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 1;
}
/*--------------------------------------------------------------
# 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-info {
padding: 30px;
position: absolute;
right: 0;
bottom: -70px;
background: #fff;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
Bachelor Of Computer Application
73
Food Order System
margin-bottom: 20px;
padding-bottom: 20px;
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;
margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
padding: 0 0 0 0;
}
/*--------------------------------------------------------------
# Our Team
--------------------------------------------------------------*/
.team {
background: #fff;
padding: 60px 0;
}
.team .member {
text-align: center;
Bachelor Of Computer Application
74
Food Order System
margin-bottom: 20px;
background: #343a40;
position: relative;
overflow: hidden;
}
color: #fff;
margin: 0 10px;
display: inline-block;
}
/*--------------------------------------------------------------
# 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;
Bachelor Of Computer Application
76
Food Order System
margin-bottom: 15px;
}
.contact .info h4 {
padding: 0;
margin: 0 0 10px 0;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
font-family: "Poppins", sans-serif;
}
.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%;
}
margin-top: 25px;
}
@-webkit-keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
Bachelor Of Computer Application
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 h4 {
font-size: 16px;
font-weight: 600;
color: #fff;
position: relative;
padding-bottom: 12px;
}
#footer .copyright {
text-align: center;
padding-top: 30px;
}
#footer .credits {
padding-top: 10px;
text-align: center;
font-size: 13px;
color: #fff;
}
MAIN.JS
/**
* 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";
// 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();
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;
}
}
});
// 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;
$('html, body').animate({
scrollTop: scrollto
}, 1500, 'easeInOutExpo');
}
}
});
// 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).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-toggle i').toggleClass('icofont-navigation-menu icofont-close');
$('.mobile-nav-overly').fadeOut();
}
}
});
} else if ($(".mobile-nav, .mobile-nav-toggle").length) {
$(".mobile-nav, .mobile-nav-toggle").hide();
}
$(window).on('scroll', function() {
var cur_pos = $(this).scrollTop() + 200;
nav_sections.each(function() {
var top = $(this).offset().top,
bottom = top + $(this).outerHeight();
// 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>");
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').click(function() {
$('html, body').animate({
scrollTop: 0
}, 1500, 'easeInOutExpo');
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
});
portfolioIsotope.isotope({
filter: $(this).data('filter')
});
});
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-
Bachelor Of Computer Application
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-
timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-
bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0)
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-
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-
timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-
bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0)
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: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)}}.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.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-
transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-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-
Bachelor Of Computer Application
88
Food Order System
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.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-
transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-
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: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)}}.shakeX{-webkit-
animation-name:shakeX;animation-name:shakeX}@-webkit-keyframes
shakeY{0%,to{-webkit-
transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-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:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-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-
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)}}.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-
Bachelor Of Computer Application
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-
transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-
10deg);transform:rotate(-10deg)}60%{-webkit-
transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-
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(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0)
rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0)
rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-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(-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(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0)
rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0)
rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-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)
Bachelor Of Computer Application
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)}42%{-webkit-
transform:scale(1.3);transform:scale(1.3)}70%{-webkit-
transform:scale(1);transform:scale(1)}}@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)}42%{-webkit-
transform:scale(1.3);transform:scale(1.3)}70%{-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-
transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-
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{-
webkit-transform:scale(1);transform:scale(1);opacity:1}}@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{-
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)
Bachelor Of Computer Application
91
Food Order System
scale(.7);transform:translateX(2000px) scale(.7);opacity:.7}80%{-webkit-
transform:translateX(0) scale(.7);transform:translateX(0) scale(.7);opacity:.7}to{-
webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes
backInRight{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{-
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-
transform:translateY(0) scale(.7);transform:translateY(0) scale(.7);opacity:.7}to{-
webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes
backInUp{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}}.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%{-
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}}.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%{-
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}}.backOutLeft{-webkit-
animation-name:backOutLeft;animation-name:backOutLeft}@-webkit-keyframes
backOutRight{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
backOutRight{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}}.backOutRight{-webkit-
animation-name:backOutRight;animation-name:backOutRight}@-webkit-keyframes
backOutUp{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
backOutUp{0%{-webkit-transform:scale(1);transform:scale(1);opacity:1}20%{-
webkit-transform:translateY(0) scale(.7);transform:translateY(0)
Bachelor Of Computer Application
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(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-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);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(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-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);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-
transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0)
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);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-
transform:translate3d(0,5px,0) scaleY(.985);transform:translate3d(0,5px,0)
scaleY(.985)}to{-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);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)
Bachelor Of Computer Application
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-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
bounceInLeft{0%,60%,75%,90%,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: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)
scaleX(.995)}to{-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);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)
scaleX(.995)}to{-webkit-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
bounceInRight{0%,60%,75%,90%,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: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)
scaleX(.995)}to{-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);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-
transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0)
scaleY(.985)}to{-webkit-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
bounceInUp{0%,60%,75%,90%,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:translate3d(0,3000px,0)
Bachelor Of Computer Application
94
Food Order System
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-
transform:translate3d(0,-5px,0) scaleY(.985);transform:translate3d(0,-5px,0)
scaleY(.985)}to{-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-
transform:translate3d(-2000px,0,0) scaleX(2);transform:translate3d(-2000px,0,0)
scaleX(2)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-
transform:translate3d(20px,0,0) scaleX(.9);transform:translate3d(20px,0,0)
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-
transform:translate3d(2000px,0,0) scaleX(2);transform:translate3d(2000px,0,0)
scaleX(2)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-
transform:translate3d(-20px,0,0) scaleX(.9);transform:translate3d(-20px,0,0)
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)
Bachelor Of Computer Application
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-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
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-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
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-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
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-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
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;-
webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes
fadeInRightBig{0%{opacity:0;-webkit-
transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-
Bachelor Of Computer Application
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;-
webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes
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;-
webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes
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-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
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-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
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-
transform:translateZ(0);transform:translateZ(0)}}@keyframes
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-
Bachelor Of Computer Application
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:translateZ(0);transform:translateZ(0)}to{opacity:0;-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-
Bachelor Of Computer Application
98
Food Order System
transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-
transform:translate3d(100%,-100%,0);transform:translate3d(100%,-
100%,0)}}.fadeOutTopRight{-webkit-animation-name:fadeOutTopRight;animation-
name:fadeOutTopRight}@-webkit-keyframes fadeOutBottomRight{0%{opacity:1;-
webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-
transform:translate3d(100%,100%,0);transform:translate3d(100%,100%,0)}}@keyfra
mes fadeOutBottomRight{0%{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-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;-
webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-
transform:translate3d(-100%,100%,0);transform:translate3d(-
100%,100%,0)}}@keyframes fadeOutBottomLeft{0%{opacity:1;-webkit-
transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-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)
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}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-
Bachelor Of Computer Application
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-
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)}}@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)
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)}}@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-
transform:perspective(400px) rotateX(-20deg);transform:perspective(400px)
rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px)
rotateX(90deg);transform:perspective(400px)
rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-
transform:perspective(400px);transform:perspective(400px)}30%{-webkit-
Bachelor Of Computer Application
100
Food Order System
transform:perspective(400px) rotateX(-20deg);transform:perspective(400px)
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:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-
duration)*0.75);-webkit-animation-name:flipOutX;animation-name:flipOutX;-
webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-
webkit-keyframes flipOutY{0%{-webkit-
transform:perspective(400px);transform:perspective(400px)}30%{-webkit-
transform:perspective(400px) rotateY(-15deg);transform:perspective(400px)
rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px)
rotateY(90deg);transform:perspective(400px)
rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-
transform:perspective(400px);transform:perspective(400px)}30%{-webkit-
transform:perspective(400px) rotateY(-15deg);transform:perspective(400px)
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:calc(var(--animate-duration)*0.75);animation-duration:calc(var(--animate-
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-
transform:translateZ(0);transform:translateZ(0)}}@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-
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-
transform:translateZ(0);transform:translateZ(0)}}@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-
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)
Bachelor Of Computer Application
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(-
200deg);opacity:0}to{-webkit-
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-
transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes
rotateInDownLeft{0%{-webkit-transform:rotate(-45deg);transform:rotate(-
45deg);opacity:0}to{-webkit-
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-
transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes
rotateInDownRight{0%{-webkit-
transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-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-
transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-
transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes
rotateInUpLeft{0%{-webkit-
transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-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(-
90deg);opacity:0}to{-webkit-
transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes
rotateInUpRight{0%{-webkit-transform:rotate(-90deg);transform:rotate(-
90deg);opacity:0}to{-webkit-
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
Bachelor Of Computer Application
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-
transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes
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-
transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes
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-
transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-
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-
transform:rotate(80deg);transform:rotate(80deg);-webkit-animation-timing-
function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-
transform:rotate(60deg);transform:rotate(60deg);-webkit-animation-timing-
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
Bachelor Of Computer Application
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-
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,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,-
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,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)}}.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-
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 zoomInLeft{0%{opacity:0;-
webkit-transform:scale3d(.1,.1,.1) translate3d(-
Bachelor Of Computer Application
104
Food Order System
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)}}.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-
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)}}.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,-
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 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,-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)}}.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-
Bachelor Of Computer Application
105
Food Order System
bezier(.175,.885,.32,1);animation-timing-function:cubic-
bezier(.175,.885,.32,1)}}@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-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)
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-
bezier(.175,.885,.32,1);animation-timing-function:cubic-
bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{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-
bezier(.175,.885,.32,1);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%{-
Bachelor Of Computer Application
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:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-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:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-
transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes
slideOutLeft{0%{-webkit-
transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-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:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes
slideOutRight{0%{-webkit-
transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-
transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-
webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-
keyframes slideOutUp{0%{-webkit-
Bachelor Of Computer Application
107
Food Order System
transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-
transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes
slideOutUp{0%{-webkit-
transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-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 body %}
{% load static %}
<!-- Google Fonts -->
<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">
</div>
</a>
</div>
</div>
</section><!-- End Hero -->
<main id="main">
<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>
<div class="progress">
<span class="skill">4 star <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-
valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">3 star <i class="val">30%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-
valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">2 star <i class="val">5%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="5" aria-
valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">1 star <i class="val">0%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-
valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End About Us Section -->
</div>
</div>
</div>
</section><!-- End Counts Section -->
<div class="section-title">
<h2>Our Team</h2>
</div>
{% 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);
$('#popcart').popover();
}
</script>
{% load static %}
<!-- Vendor JS Files -->
<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>
{% endblock %}
Bachelor Of Computer Application
113
Food Order System
Basic.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/tracker">Tracker</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/orderView/">Your Orders</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop/about">About Us</a>
</li>
<li class="nav-item">
<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 trigger Login modal -->
<button type="button" class="btn btn-success mx-2" data-toggle="modal" data-
target="#loginModal">Login</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>
</div>
Bachelor Of Computer Application
116
Food Order System
</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://unpkg.com/[email protected]/dist/bootstrap-
show-password.min.js"></script>
{% block js %} {% endblock %}
<!-- <script>-->
<!-- /* restrict user browser click go back button */-->
<!-- function preback() { window.history.forward(); }-->
<!-- setTimeout("preback()", 0);-->
<!-- window.onunload = function() { null };-->
Checkout.html
{% extends 'shop/basic.html' %}
{% 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
}}">
<div class="form-row">
<div class="form-group col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name"
placeholder="Name" required>
</div>
<div class="form-group col-md-6">
<label for="Email">Email</label>
<input type="email" class="form-control" id="email" name="email"
placeholder="[email protected]" required>
</div>
</div>
<div class="form-group">
Bachelor Of Computer Application
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>
<div class="form-group">
<label for="Address2">Address Line 2</label>
<input type="text" class="form-control" id="address2" name="address2"
placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="City">City</label>
<input type="text" class="form-control" id="city" name="city"
placeholder="Bengaulru" required>
</div>
<div class="form-group col-md-4">
<label for="State">State</label>
<input type="text" class="form-control" id="state" name="state"
placeholder="Karnataka" required>
</div>
<div class="form-group col-md-2">
<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>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" class="form-control" id="phone" name="phone"
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>
Bachelor Of Computer Application
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>`;
$('#items').append(mystr);
}
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>`;
$('#items').append(mystr);
}
document.getElementById('cart').innerHTML = sum;
document.getElementById('totalPrice').innerHTML = totalPrice;
$('#itemsJson').val(JSON.stringify(cart));
$('#amount').val($('#totalPrice').html());
Bachelor Of Computer Application
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%}
Contact.html
{% extends 'shop/basic.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;
}
.contact2 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.contact2 .bg-image {
background-size: cover;
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);
box-shadow: 0px 0px 30px rgba(61, 109, 214, 0.774);
}
.contact2 .round-social a {
background: transparent;
margin: 0 7px;
padding: 11px 12px;
}
.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;
Bachelor Of Computer Application
124
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>
$('#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);
$('#popcart').popover();
}
{% if thank %}
alert('Thanks for Contact with us. We will get back to you soon!');
document.location = "/shop";
Bachelor Of Computer Application
126
Food Order System
{% endif %}
</script>
{% endblock %}
Admin.py
class OrderUpdateAdmin(admin.ModelAdmin):
list_display = ('order_id', 'update_desc', 'timestamp')
list_filter = ['timestamp']
class OrdersAdmin(admin.ModelAdmin):
list_display = ('order_id', 'userId', 'name', 'email', 'timestamp')
list_filter = ['timestamp']
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')
list_filter = ['timestamp']
return False
admin.site.register(Product, ProductAdmin)
admin.site.register(Contact, ContactAdmin)
admin.site.register(Orders, OrdersAdmin)
admin.site.register(OrderUpdate, OrderUpdateAdmin)
urls.py
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"),
Bachelor Of Computer Application
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
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)
Bachelor Of Computer Application
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="")
timestamp = models.DateTimeField(default=timezone.now)
class OrderUpdate(models.Model):
update_id = models.AutoField(primary_key=True)
order_id = models.IntegerField(default="")
update_desc = models.CharField(max_length=5000)
timestamp = models.DateTimeField(default=timezone.now)
def __str__(self):
return self.update_desc
views.py
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>")
Bachelor Of Computer Application
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):
if request.method == "POST":
orderId = request.POST.get('orderId', '')
email = request.POST.get('email', '')
name = request.POST.get('name', '')
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
Bachelor Of Computer Application
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 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):
if request.method == "POST":
items_json = request.POST.get('itemsJson', '')
user_id = request.POST.get('user_id', '')
name = request.POST.get('name', '')
amount = request.POST.get('amount', '')
email = request.POST.get('email', '')
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', '')
}
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 handeLogin(request):
if request.method == "POST":
# Get the post parameters
loginusername = request.POST['loginusername']
loginpassword = request.POST['loginpassword']
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
def handleSignUp(request):
if request.method == "POST":
# 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']
try:
user = User.objects.get(username=username)
messages.warning(request, " Username Already taken. Try with different
Username.")
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
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")
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
else:
return HttpResponse("404 - Not found")
def handleLogout(request):
logout(request)
messages.success(request, "Successfully logged out")
return HttpResponseRedirect(request.META.get('HTTP_REFERER'))
@csrf_exempt
def handlerequest(request):
# paytm will send you post request here
form = request.POST
Bachelor Of Computer Application
134
Food Order System
response_dict = {}
for i in form.keys():
response_dict[i] = form[i]
if i == 'CHECKSUMHASH':
checksum = form[i]
Login
TESTING
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
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.
Bachelor Of Computer Application
137
Food Order System
• Tests can be redundant if the software designer/developer has already run a test
case.
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
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.
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
User Login:
OUTPUT SCREENS
Output Screens
FUTURE ENHANCEMENTS
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.
CONCULSION
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.
BIBLIOGRAPHY
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/