California State University, Northridge

CALIFORNIA STATE UNIVERSITY, NORTHRIDGE
Pet Care Web Application
A graduate project submitted in partial fulfillment of the requirements
for the degree of Master of Science in Computer Engineering
By
Suraj Ramesh Mahamuni
August 2021
The graduate project of Suraj Ramesh Mahamuni is approved:
Dr. Richard Covington Date
Professor Bradley Jackson Date
Dr. Xiaojun Geng, Chair Date
California State University, Northridge
ii
Table of Contents
Signature Page................................................................................................................................. ii
List of Figures ................................................................................................................................ v
Abstract .......................................................................................................................................... vi
Chapter 1: Introduction ................................................................................................................... 1
Chapter 2: Tools Description .......................................................................................................... 4
2.1 HTML5 ............................................................................................................. ………..4
2.2 CSS3 ............................................................................................................................... 6
2.3 JavaScript ........................................................................................................................ 9
2.4 AngularJS ...................................................................................................................... 10
2.5 MySQL ......................................................................................................................... 12
2.6 Atom IDE ...................................................................................................................... 14
Chapter 3: Implementation............................................................................................................ 16
3.1. Planning ........................................................................................................................ 16
3.2 Requirement Analysis ................................................................................................... 16
3.3 Software Designing and Prototyping ............................................................................ 17
3.4 Programming…………………………………………………………………………..20
3.5 Testing…………………………………………………………………………………21
Chapter 4: Problems and Solutions ............................................................................................... 23
4.1 Web Design ................................................................................................................... 23
4.2 CSS Float Property ....................................................................................................... 23
iii
4.3 Flex Property…………………………………………………………………………..23
4.4 Learning JavaScript……………………………………………………………………24
4.5 Choosing Right JavaScript Framework………………………………………………..25
4.6 Choosing Right Database……………………………………………………………...26
Chapter 5: Future Scope………………………………………………………………………….29
Chapter 6: Conclusion................................................................................................................... 31
References .................................................................................................................................... 32
Appendix A……………………………………………………………………………………………………………………………….34
Appendix B……………………………………………………………………………………………………………………………….39
Appendix C……………………………………………………………………………………………………………………………….65
Appendix D………………………………………………………………………………………………………………………………73
iv
List of Figures
Figure 2.1 HTML Example 5

Figure 2.2 HTML Inspection 6
Figure 2.3 HTML and CSS Together 8
Figure 2.4 Working of AngularJs Framework 12
Figure 2.5 Initial Layout of Data Tables 14
Figure 3.1 Home Page 18
Figure 3.2 Profile Page 19
Figure 3.3 Sign-Up Page 20
Figure 3.4 Map Demo Page 26
Figure 3.5 Map Page 22
Figure 3.6 Sign-Up Page 22
Figure 4.1 Flex-Box 24
Figure 4.2 Relation between Data Tables 27
v
Abstract
Pet Care Web Application
By
Suraj Ramesh Mahamuni
Master of Science in Computer Engineering
Pet care application deals with problems faced in pet services. This application will bring together pet
owners and people willing to provide services together. This gives pet owners the ability to choose the
types of services they need and who they would like to hire for the job. They can take things like price,
proximity, and experience into consideration.
Front-end of the application is designed using HTML and CSS language, back-end using JavaScript
language, database using MySQL, and server-side communication using PHP language. After the
language selection phase was complete, then the second phase started. The second phase consisted of
creating the layout of front-end pages keeping in mind the relationship between them, the functionality
of those pages, the designing data tables, and the deciding relationship between the data tables and how
the searching mechanism will work. Considering all the criteria of the project was split into 5 parts:
coding front-end pages, coding back-end according to front-end, designing and writing database, writing
server-side code for communication between back-end and database and last were testing. Writing the
vi
code for the front-end pages was easy compared to other tasks in the project. The more difficult tasks
were writing the back-end code that provides functionality to the web application, then keeping page
layouts consistent throughout all the pages, re-using the code and functionality, writing SQL queries to
show what people are searching for, and making changes to optimize search results.
vii
Chapter 1: Introduction
Google is the most searched website in the world. It receives approximately 5.6 billion searches a day.
Around 30% of people visit Google to make appointments at various places like hospitals, shops, etc.
In fact, according to PYMNTS.com, 88% of consumers will research product information before they
make a purchase online or in the store [1]. This buying behavior emphasizes the importance of a
website in the success of a business today. Consumers like to be informed of the products and services
that are available. Websites make this information more readily available to them.
For a business to have a successful website, it needs to be well thought out and professional. It must
encompass more than just an aesthetic appeal; it also must serve as a functional tool to relay
information. A website is the backbone of the business. One of the main reasons to have a website is
to increase the credibility of the business [2]. As the backbone of the business, online presence will
have the ability to drive consumers back if the website is user-friendly and practical. As such, the
website needs to give consumers a clear idea of what type of services are being offered. If this is all
accomplished, then the website can consequently serve as a marketing tool.
All the positive attributes associated with a well-thought-out website are an incentive for a business
owner to use this as a fundamental tool to start or grow a business. A business needs an online
presence to thrive in today's digital world, where most people have access to smartphones and ultra-
fast internet. A website is a perfect place to house all the great content or services a business creates to
inform and engage a target audience or consumer [9].
According to a study done by the American Pet Product Association (APPA), 68% of people have one
or more pets. 90 million of those are dogs and 94 million of those are cats [3]. The emotional
attachment and connection that pet owners have with animals are immense. Pets are often thought of
1
as family members. A great example of this is the new trend that has arisen in the last few years,
celebrating pet birthdays. Since pets have an important role in the owner’s lives, owners want to make
sure their furry friends are well taken care of in their absence. Pet owners often search for reputable
trainers, groomers, walkers, and part-time sitters. It can be difficult to find all these services in one
place.
This project tries to solve the problems faced by pet owners. It helps pet owners find trainers,
groomers, walkers, and part-time sitters in their area. Pet owners can search for all the services
mentioned above on the day and date they want, check profile, reviews, availability dates, and how
much they charge for the service for the people who appeared in the search. As per the pet owner’s
requirements, he or she can book a service provider and wait for the service provider to confirm the
availability. Once the service provider confirms his availability, a pet owner will receive a
confirmation email.
This project is an exposition on web application development lifecycle, problems faced, and goals
achieved. Chapter two of this report describes all the tools. This includes software and programming
languages, their necessity, alternatives, implementation, and reasons to use each tool and
programming language. It also covers the basic introduction, advantages, and disadvantages.
Chapter three focuses on the implementation part of the project. The stages involved in this chapter
are planning, requirement analysis, software design and prototyping, programming, and testing. All
these stages explain how the software development lifecycle looks like when put into practice. Each
point describes in detail how software is created.
Chapter four is about the problems faced while building this application. It discusses all viable
solutions, the advantages of these solutions, and drawbacks. In addition, the chapter talks about the
2
problems faced when using one type over another and trade-offs using one over another.
The focus of chapter five is on the future scope of the pet care web application. It includes new
features to make this application more user-friendly and to expand the business scope. These features
ranged more services, text alerts, including more pet types, and written reviews from users.
The last chapter describes the idea behind it. The main focus was to solve the problem that pet owners
face in their everyday life and opportunities for the people who have experience working with pets.
This chapter gives an overview of the necessity of this application in today’s world.
3
Chapter 2: Tools Description
Several tools are necessary to be able to complete this project successfully. The tools used in this project
are HTML5, CSS3, JavaScript, AngularJS, MySQL, and Atom (IDE).
2.1 HTML
Hypertext Markup Language (HTML), is the standard markup language for documents designed to be
displayed in the web browser [4]. Every page on the internet consists of HTML, CSS, and JavaScript.
HTML is considered the foundation language of the internet. It defines contents like images and links
and all the text present on the web page.
HTML tags are small strings of text, which are made up of a pair of angle brackets surrounding its name
such as <img>. It can specify further related information using attributes such as <img
src=”bunny.jpeg”>. In this example, <img> is a tag and ‘src’ is an attribute. By surrounding some text
with an open tag, and a closing tag, we can create what we call an HTML element such as
<body></body> [4]. All the code that is present inside the open and close body tag is part of that tag.
Once HTML elements are created, we must nest them to create an HTML document. Complete following
code is one HTML document (Appendix D). Whatever code goes inside the <body> tag is what you see in
your browser window. Here is the basic structure of the HTML document.
<html>
<head>
<title> Page Title </title>
</head>
<body>
4
<h1>This tag is used for heading</h1>
<p> This tag is used for paragraph.</p>
</body>
</html> [10]
Above code is the simple example of HTML document. <html> and </html> is used to show starting
and ending of HTML document.
Figure 2.1 HTML Example
If we type the code provided on page 4 in any IDE or Notepad and save it as .html, it will be saved as a
web page. That means that code from now on will take the form of a web page and will look like figure
2.2. It is just plain text format in a browser window and looks like old web pages. All the textual data
present on the internet is saved in this format. Each HTML code is always enclosed in <html></html>
to indicate the start and end of the code, apart from that it provides no other function. It defines the
5
HTML document. <head> contains the metadata or information for the document. <title> defines the
title of the document. <body> defines the body of the document. <h1>,<h2> defines the HTML
headings. <p> defines the paragraph. <br> is used to insert a single line break (Appendix D).
Figure 2.2 HTML Inspection
Figure 2.2 shows how the home page of the pet care application when no CSS code is added with
HTML. The left side of the image shows a web page representation of the code and the right side of the
page shows the HTML code needed to create the page.
2.2 CSS
Like HTML, Cascading Style Sheets (CSS) is a descriptive language. It is an integral part of the modern
web development process. The advantages of CSS over plain HTML are it provides added design
flexibility and interactivity which is hard to get only by using plain HTML. CSS developers can have
great control over the layout to make precise section-wise changes. However, instead of defining a
6
semantic for some text that we can do using plain HTML code, it defines the look and feel of each
HTML element. CSS makes updating easier and smoother for the developer by using the same code for
different elements within the same website.
CSS language uses selectors like HTML uses tags. A selector is used to indicate which HTML element
we want to style. For example, if we are targeting to style <body> tag of the HTML code, we use ‘body’
as a selector in CSS code. Once this has been decided, then we open a rule block using curly brackets as
shown in the following code. Finally, we write down individual declarations. Each is made of a
property name, a colon, a property value, and a semicolon to give the desired appeal to the text written
in HTML (Appendix B). From that point on, it is all about targeting HTML elements with proper
selectors and writing down a list of declarations to achieve the expected results.
Here is an example code for body, h1 (header), p (paragraph).
body{
background-color: linen;
h1{
color: black;
text-align: center;
p{
font-family: calibri;
font-size: 10px;
} [11]
7
Figure 2.3 : HTML and CSS Together
If we use the code written on page 7 with HTML code from the HTML section and save it again, it gives
us a colorful page shown in figure 2.3. HTML was created to describe the content of the page and CSS
was to format the HTML page and make it look more appealing. body, p and h1 are the selectors in CSS
and it points to the HTML element you want to style. background-color, color, text-align, font-family,
and font are the property names, and linen, black, center, calibri, and 10px are the property values. By
using different properties, we can format our HTML page as we want.
8
2.3 JavaScript
JavaScript is a lightweight, interpreted programming language with first-class functions [5]. Like CSS,
JavaScript is embedded in HTML, using a specific HTML element “<script>”. We can write JavaScript
code directly inside the .html file using the “<script></script>” element, which indicates the start and
end of the JavaScript code, or it can be written in a separate file that can be linked to the respective
HTML document. It is a typical programming language like Java and Python. JavaScript works behind
the scenes and provides the functionality to the web pages. Compared to other programming languages
such as TypeScript or Python, its execution time is fast, that’s why it is most popular among the web
developing community. Without JavaScript, it would not be possible to build widely known web
applications like Facebook, YouTube, Amazon, etc. Here is the sample code to show the background
functionality of any button that is usually seen on web pages.
<script>
Document.getElementById(“myButton”).addEventListener(“submit”, submitApplication);
</script> (Appendix C)
The above code snippet shows what happens when we click submit button on the web page. The submit
button or any other buttons that we see on the internet has JavaScript code written in the background that
decides its functionality. <script> indicates the starting of JavaScript code and </script> indicates ending
of JavaScript code. ‘Document.getElementId’ is the command to get the element id of the button that we
provided when we created the button using HTML code. ‘addEventListener’ command executes the
function of the button after we click it (Appendix C).
HTML code acts as a body and JavaScript code acts as the brain of any website. We can create a website
9
without using JavaScript, but that website will be called a static website. The static website only shows
the information on the web page and doesn’t provide any functionality. A popular example of a static
website is any the news website. People visit this website just to read news. To add any functionality
such as getting feedback from the user we need to use JavaScript.
In the pet care application, JavaScript plays an important role when users are trying to find a service
provider. To do that, users need to select the type of pet they have, the pet’s weight, the type, number of
pets, the type of service they want and enter their zip code. HTML language can create a form to provide
all these options. After the user clicks the search button, all the information provided by the user is
gathered by JavaScript and appropriate results are shown.
Apart from this JavaScript is used in pet care application to show the proper location of the user on the
Google map, user sign-in to validate the email address and password provided by the user, sign up
process to make sure the user met all the conditions before he or she a submit the application, to update
their profile, availability time, and to confirm availability.
2.4 AngularJS
AngularJS is a leading framework used to build JavaScript-heavy single page-based web applications
[7]. Single-page apps load the entire content of a site within a single page. This single page is usually
an home.html file. This means once the main page is loaded, the entire page will not be loaded every
time user clicks the ‘Search’ button in the Pet-Care application, it will simply update sections within the
page itself to show Vets who meet our filtering criteria. It allows us to deliver rich dynamic and fast-
loading content that mimics a desktop application.
The home page of the Pet-Care Application has three different sections. The first section allows pet
owners to choose from different options like the type of service, availability date, zip code, type of
10
pet, the weight of pet to search people accordingly. This section remains static unless the user decides
to click refresh button.
The second section of the page shows only those profiles which meet the criteria. Every profile
present in the second section shows the name of the person, photo, availability time for the date
selected by the pet owner and, personal information about the person. This section is dynamic and
keeps changing every time pet owner changes filtering criteria such as date or zip code. Here
AngularJS framework plays an important role. It updates only second section without reloading the
entire homepage.
The third section of the home page shows the exact location of all the people who appeared in the
second section. AngularJS offers the same functionality here. It only updates the map without
reloading the entire home page of the application. In this section, the map radius is set to 10 miles
from the zip code entered by the pet owner to show all the people available in the 10 miles radius.
Google Maps API are used to meet this task.
Whenever a pet owner chooses a different option like changing the date or zip code of the area, the
entire home page will not reload again. The Angular framework plays an essential part here and it
only updates the second and third sections. This provides the rich user interface and less data usage.
Google designed the AngularJs and its rewrite is Angular. It does not have a concept of scope or
controllers, instead, it uses the hierarchy of components as its primary architectural characteristic [12].
It offers benefits like dynamic loading and asynchronous template compilations.
11
Figure 2.4: Working of AngularJS Framework [6]
Figure 2.4 gives the architecture overview of Angular. The basic building block of an Angular
application is NgModules, which provides a compilation context for components. Every Angular app
contains at least one module that is the root module, also called as AppModule. The module is a block of
code with a related set of capabilities that have a specific application domain or workflow. Components
control one or more sections of the screen called view. The function of a template is to tell Angular how
to render all the components. Metadata is a set of instructions to help Angular process the class. When
Angular renders templates, it follows the instructions given by the Directives to transforms DOM.
Dependency injection is a way to supply a new instance of a class with fully formed dependencies it
requires.[18]
2.5 MySQL
MySQL is an open-source relational database management system (RDBMS). MySQL uses a client-
server model, which means that the database typically runs on the server. MySQL uses Structured Query
Language (SQL) to create, manipulate and query the database. SQL is used on all major database
management systems on many platforms and in many applications [8].
12
It is still the most popular choice in small to medium-scale single-server deployments. It can be used as
a component in a WAMP-based web application or as a standalone database server. MySQL is simple
and easy to use which is enabled by an ecosystem of open-source tools such as phpMyAdmin [8]. The
following image shows the table that can be created in MySQL.
SELECT * FROM Vet; (Appendix A)
The above command is used to select all the information from a table named Vet. ‘*’ is used to show all
in SQL. The Vet table consists of multiple columns such as Id, FirstName, LastName, Address, City,
and ZipCode. The above query lets us select information from all the columns. A row is called as an
entry or record. For example, if there 20 records in the table that means there are 20 Vets are present in
the database.
SELECT FirstName, LastName
FROM Vet
WHERE (ZipCode = 1234) AND (City = Northridge); (Appendix A)
The above query is used to show the first and last names of people from the database table who match
the specified condition of zip code equal to 1234 and city equal to Northridge.
13
Figure 2.5 Initial Layout of Data Tables
Figure 2.5 is used to show how data looks in table format. While signing up on the website, information
entered by the user gets saved in corresponding data tables. Figure 2.4 shows the first and last name of
the user and the last update of the user. Each user is assigned a unique id and this id stays unique in all
the data tables. This helps to retrieve all the information related to the respective users from the database
using their unique id.
2.6 Atom IDE
Atom is a free code editor. It supports hundreds of popular plugins like Beautify and Emmet that make
development very easy. Atom content is created and updated by developers at GitHub. As a result, it has
all the controls embedded in it. It supports a variety of programming languages such as HTML, CSS,
JavaScript, SQL, etc. We can type in all our code here and Atom runs it using an inbuilt browser
simulator. Atom makes this easy by offering an instant simulator to reflect every change we make in
code. Typing a code in Notepad and running in on Chrome or Mozilla browser takes a lot of time and it
14
is hard to check continuous changes made in code because every time we make small changes, we have
to save the file and reload the browser page.
Atom is a desktop application developed using web technologies. It is like most of the text editors out
there in the market, which allows users to install third-party packages and themes to customize the
features.
15
Chapter 3: Implementation
3.1 Planning
During the initial stage of the project, Dr. Covington and I had a zoom meeting. We went through three
topics: Polling application, Pet Care Application, and Inventory Management System. After discussing
each topic in detail, we agreed on a Pet Care Application. We took into consideration various factors
before deciding on these project topics such as uniqueness, available resources, and time and time
scheduling.
This step was essential and if we had executed it poorly, then we may have faced a massive negative
impact on the entire development process. The strategic output of the planning is project plans,
procurement requirements, time estimations, and schedules.
3.2 Requirement Analysis
After deciding project topic requirements of the project, next phase was requirement analysis. This
phase allows us to rank all the requirement based on priority of the project. Priority factor is used to
rank all the use cases based on their importance in the project and helps to allow figure out time
needed to complete each use case including modification and testing. This phase is the most important
because it is when use cases come into the frame. It is hard and time consuming to make any changes in
use cases in the middle or towards the end of the project.
Approximately two weeks were spent deciding what the use cases would be and how long it would take
to code by Dr. Covington and me. We also had to take into consideration other possible user cases that
16
we could potentially add or some that we should consider removing due to time constraints. We came up
with use cases like search conditions, types of services, dog walking areas, availability date, time, pet
types and price per hour, availability of veterinarians, and their locations on the google map. Later, we
added the number of pets, and the weight of the pets to search conditions.
3.3 Software design and prototyping
Once all the project requirements are gathered, planned, and well thought out, then the next phase
begins. It is time to design application architecture. For example, during the design application
architecture, we decided on using AngularJs as the framework. This enabled us to build an application
from existing components, fostering standardization, and the reuse of code. Prototyping includes
comparing different solutions and finding the best match and design documents.
Figure 3.1: Home page
17
Figure 3.1 shows the home page of the application when pet owners search according to their
requirements. On the top, you can see the option such as Home, About us, Contact, and Profile. The
Home option takes you back to the original home page when no filter conditions are applied. About us
and Contact option gives information about the company. The Profile option is to view your profile and
make updates. The leftmost column of the page is the filter section. The user can select the type of
services, enter the zip code, availability date weight of the pet, number of pets, and place. Based on the
options selected in the filter section, the middle column shows all the available people close to the zip
code area. And the last column shows their location on the map. Software design helps us to reuse the
code written to show one profile in the middle column and use it as many times as it needs to show all
the profiles that meet the filter condition.
Figure 3.2: Profile page
18
Figure 3.2 shows the profile page of the service provider. The top left corner shows the name and
address, which they entered while signing up. The top right corner shows the options such as update
profile, update services, update availability, and booking details. Update profile option allows them to
update their profile, update services option lets them update the services they want to offer, update
availability option allows them to add new availability time or delete their previously added time,
booking details shows them previous and upcoming booking times, customers name and contact details.
The bottom part of the page shows services they decided to offer and the rate, their upcoming
availability times, and information about them. All the information provided by the user while signing
up is used to create their profile page. Software design allows us to reuse a profile pages code to
generate profile page for every user and eliminates the need to write and design a similar profile pages
for every user.
3.4 Programming
In this phase, the actual coding of the application starts. It is important to carry out coding time-boxed
sprints and manage time while following the backlog.
19
Figure 3.3: Signup page
Figure 3.3 shows the sign-up page of the application programming using HTML and CSS using the
Codepen website.
Figure 3.4: Map demo page
Figure 3.4 shows the integration of Google Maps to show the precise location of the user programm
using HTML and JavaScript in Atom IDE.
3.5 Testing
Testing is a crucial part of the software development process. It helps us identify flaws in the code and
reduce bugs and deliver quality software. During the testing phase, several tests can be run. For
example, unit testing, integration testing, performance testing, and security testing.
In order to test JavaScript code, multiple test cases were written to check how the web page responds
back to multiple conditions such as when the pet owner doesn’t select any or few filter conditions, no
20
availability of Vets, past date selection, booking of the same Vet by multiple users.
Figure 3.5: Map page:
Figure 3.5 shows testing of each element and style in code to integrate Google map in the application
and testing is using Chrome browsers Developer’s option.
Figure 3.6: Signup page
21
Figure 3.6 shows testing of each element and style in the sign-up page code done using Chrome
browsers Developer’s option.
22
Chapter 4: Problems and Solutions
4.1 Web Design
Web design is something that is overlooked sometimes. Many people ignore this part thinking they
can get away with it by not putting in as much time into it. Many people often neglect or overlook
web design aspects that can make their website successful. Focusing on customer experience is a
winning strategy in recession [17].
4.2 CSS Float Property
This CSS property introduced significant problems. Floated elements don't stay in a normal position
while rendering on the web page. The default flow of HTML is linear and all the elements are placed
from the left side of the page to the right. The elements that float escape this flow. The index page or
home page of the web application has three floating elements: filter, show available veterinarians, and
show their location. Before making this web application, the floating property was used by me, but
only to show floating images. That was a lot simpler than what was needed to do in this project.
4.3 Flexbox Property
Flexbox property is used to arrange elements in different ways. It offers more positioning capabilities
and ways to define relationships between elements. The problem is not its capabilities, instead, the
problem is the browser support. Old browsers simply cannot handle it. Taking this into consideration, it
was hard to choose between old browsers and new browsers.
23
Figure 4.1: Flexbox [14]
Figure 4.1 shows the working of Flexbox and how each item present on the web page is placed at a
particular position and how it maintains its position every time we load and refresh the page and the
content of the page are changed. To use Flexbox, we need to define Flexbox container. Flexbox offers
different properties to do that such as flex-direction, flex-wrap, flex-flow, justify-content, align-items
and align-content. These properties allow us to decide the direction, wrap or not for the flex items in the
container. Flex-flow property is a shorthand property for setting both flex-direction, and flex-wrap
properties. Justify-content, align-items and align-content properties are used to align flex items.
4.4 Learning JavaScript
JavaScript is easy to learn, but to do more complex things like performing HTTP requests through a
RESTful JSON API, needs knowledge of advanced features of JavaScript. Knowing other languages
like Python, Java, or C++ does not help while learning JavaScript. This is because it violates many of
the rules learned while learning other languages. While syntax looks like other programming languages,
the way you think and code in JavaScript differs a lot.
24
4.5 Choosing the Right JavaScript Framework
It is very important to think about the big picture before choosing a framework. There are several
things that you need to consider before choosing it. Some important questions to ask are, why should I
stick to a particular framework over other frameworks. The short answer to this question is
frameworks offer more responsive user interfaces, like when you filter Veterinarians instead of
loading the entire web page only the search and location section of the pages needs to be updated.
It is not easy to choose among all the frameworks that are available like Backbone.js, AngularJS,
Ember, and React. Every framework has its pros and cons. The Backbone framework is lightweight and
offers a compact file size, but it is more suited for advanced JavaScript developers, and it can be
challenging for new users.
Surprisingly, AngularJS is an older framework than Backbone. AngularJs offers a two-way data
binding feature (meaning data is bound to the HTML element in the View and that element can do
both updates and display that data). This allows a reduced number of lines of code to create dynamic
views. Another popular feature AngularJS offer is directives, which allow developers to extend
HTML by attaching it to parts of the DOM. For example, ng-repeat is the directive that allows
developers to repeat the element [13]. In addition to this, AngularJS allows you to create your own
directives. Dependency Injection allows you to easily include services in the modules.
Angular also has its pros and cons. Two-way binding makes it easier to build with Angular, but it can
be slow when we consider larger and more complex applications. In addition, it complicates
debugging and hurts the performance of applications.
Ember offers plenty of benefits like templating libraries, routing, and tons of other things that give
you freedom from routine and mundane tasks. Ember provides a command-line tool that handles a lot
25
of things for which we commonly use Grunt or Gulp to compile Sass and minify CSS and JS. The
problem with Ember is that we need to do all the things in the Ember way, meaning it provides a
complete solution.
ReactJS is suited for larger applications. It is faster than Backbone, Angular, and Ember because it
implements virtual DOM and synthetic events. A plus is that React is easy to learn. React uses a
component-based approach. Each React component represents a part of UI, page title, etc. These
components can be mixed and matched depending on their use. This provides maximum code
reusability. The most common drawback of React is the absence of templates and the use of
components to generate the UI. It means your HTML code is written inside JavaScript.
4.6 Choosing the Right Database
A simple definition of a database is data is organized in a way that it can be easily accessed and
managed and modified. There are different ways to organize data such as rows, columns, and an index
is used to make it easy to find, retrieve and modify relevant information. Many dynamic websites such
as Expedia, TripAdvisor are completely dependent on the database. These websites are famous due to
their response times and a huge amount of data. [15]. There are many databases available like Postgre,
MySQL, Oracle, MongoDB, and SQL server. Modern databases are managed by the database
management system (DBMS). SQL language is used to operate on the database stored in the database.
There are two main types of databases used to store data such as non-relational databases and
Relational databases.
Structured Query Language (SQL) is the standard language to create any database. It allows you to
create, read, update, and delete data in a database. We need to execute queries to insert, update, create
and retrieve data from a database. The most famous database programs are MySQL, Postgre, and
26
Microsoft SQL Server that uses SQL language.
As an example, we have a student and activities table here. The tables consist of rows and columns. In
the table, you must have an id that is unique to each row. There are two tables in the picture and they
both represent a relationship with each other through unique id numbers. SQL databases allow us to
build relationships so we can say id number 084 corresponds to John Smith and he was involved in
tennis and swimming which costs $36 and $17. This allows us to perform flexible queries.
Figure 4.2: Relation between Data Tables [16]
Figure 2.4 explains the working of a single data table and how it is created. We need to create different
data tables for different purposes and link those tables using a unique id. Splitting information in
different data tables helps to filter out possible matches fast based on our requirements. Unique id
assigned to everyone stays the same throughout all the data tables and helps to link information related
to an individual even its presence in different data tables. Figure 4.2 shows how different data tables
27
are linked to each other and the use of unique id.
In terms of access, it is typically a raw sequel. Writing the raw create, read, update, and delete syntax
for query, we typically require a direct database connection to the endpoint of the database.
There are many different implementations of NoSQL databases. The main idea behind creating a NoSQL
database is to provide fast performance. NoSQL database can be build using different ways such as table
structure and graphs. Facebook’s database is a key example of graph database. The general theme along
all of these is they all rely on key-value stores. Generally, in NoSQL databases, we need to know the
key when performing the query.
There are two ways we can access this database: REST API and CRUD
We use REST API to hit the specific endpoints that have certain functionalities associated with them.
We can create, read, update, and delete operations in vendor-specific languages. If we use DynamoDB,
that will be a very different way to perform a query as something like MongoDB which is another
NoSQL option.
Access patterns are not defined when we don't know if our business cases are going to evolve, and when
we are not sure of future requirements or business development then SQL is the preferred option to store our
data and query it. Secondly, if we want to perform flexible queries so we can adapt to changing use cases.
Third, when we want to perform relational queries using SQL is the best option. fourth, if we want to
enforce field constraints and keep tables consistent so that malformed data cannot make its way into our
tables. Lastly, for SQL when we want to use a well-documented access language, SQL is generally
universal across all the relational database engines that are underlined so we can find tons of support and
there are tons of different communities that we can learn from.
28
Chapter 5: Future Scope
There are many different use cases, adaptations, and tests that have been left. Future work requires a
deeper analysis of the use cases, more market data, and a detail study. There are some requirements I
would have like to add to provide more features in the project. This project has been mainly focused
on providing pet care services with the help of veterinarians. The following idea could be tested:
1. It would have been interesting to consider implementing text notifications instead of email
notifications when a customer books services for a specific time and the person accepts or
denies the offer directly through the text message. It would provide instantaneous feedback,
instead of waiting for the person to go through all of the emails he or she gets every day and
then replying to the email.
2. The current web application only provides limited types of services and there are a lot of
services that are also in demand like delivering pet supplies at home and providing additional
services like bathing, grooming, and first-aid certified veterinarians. Unfortunately, because of
the time constraints and resources, this cannot be done now.
3. Expanding the types of pets that services can be provided for. For example, including turtles,
birds, or other types of animals that are kept as pets. This would require further research on the
types of animals and their breeds. Something else to consider would be risks and extensive
experience or certifications that may be required for someone to have the knowledge and ability
to care for animals that are a little less common. There would also need to be a way to attract
people that are suitable to provide these services.
4. A potential development could be adding a profile page for pet owners to write their
experience with their pets so that other service providers can see. This way, if an animal is
29
aggressive or has other tendencies, a service provider can be aware before choosing to take a
job.
30
Chapter 6: Conclusion
The main motive behind this project is to address issues faced by pet owners and provide job
opportunities for vets and people with experience in taking care of pets. This application addresses the
most common issues faced by pet owners such as finding reliable and trustworthy Vets and pet sitters
and tries to solve the problem by allowing pet owners to find local people for the services such as pet
sitting, walking, boarding, and day-care.
This application provides a platform for people to provide services at a cost they prefer, choose their
own timings and types of services they are willing to offer. People can create their accounts by signing
up. They can provide their contact information, photos and share their previous experience to help pet
owners. After signing in, they can update this information, update availability times, types of services
they want to offer, service fees, types of pets they prefer to work with.
A pet owner can choose a veterinarian based on his or her reviews, availability, location, and service
fees. The application will send an email notification to the potential person for hire. This person can
choose to accept or deny services based on his or her preference. Based on what the person decides
the pet owner will get an email notification with the response.
This project includes all the services mentioned above which are currently in demand. Application is
easy to understand user friendly for all age groups.
31
References
[1] Consumers Are Increasingly Researching Purchases Online. PYMNTS.com. (2018, January 9).
https://www.pymnts.com/news/retail/2018/omichannel-ecommerce-consumer-habits/.
[2] Kaplan, K. (2020, February 3). Council Post: Why Every Business Needs A Website. Forbes.
https://www.forbes.com/sites/theyec/2020/02/03/why-every-business-needs-a-
website/?sh=218aefad6e75.
[3] Karin Brulliard, S. C. (2019, January 31). How many Americans have pets? An investigation of
fuzzy statistics. The Washington Post. https://www.washingtonpost.com/science/2019/01/31/how-
many-americans-have-pets-an-investigation-into-fuzzy-statistics/.
[4] HTML Tutorial. (n.d.). https://www.w3schools.com/html/.
[5] JavaScript. MDN. (n.d.). https://developer.mozilla.org/en-US/docs/Web/JavaScript.
[6] Angular (Web Framework). (n.d.). Wikipedia.

https://en.wikipedia.org/wiki/Angular_(web_framework).
[7] AngularJS. (n.d.). https://docs.angularjs.org/guide/introduction.
[8] Introduction to MySQL. MySQL Introduction. (n.d.).

https://www.w3schools.com/MySQL/mysql_intro.asp.
[9] The Importance of a Website for Your Business Success. Digital Marketing Blog. (2020, June 29).
https://www.lyfemarketing.com/blog/importance-of-a-website/.
[10] HTML Tag. HTML head tag. (n.d.). https://www.w3schools.com/tags/tag_head.asp.
[11] 15 Alignment, font styles, and horizontal rules. Alignment, font styles, and horizontal rules in
HTML documents. (n.d.). https://www.w3.org/TR/REC-html40-971218/present/graphics.html.
[12] Wikimedia Foundation. (2020, July 10). Angular (web framework). Wikipedia.
https://en.wikipedia.org/wiki/Angular_(web_framework)#:~:text=Angular%20does%20not%20ha
ve%20a,as%20its%20primary%20architectural%20characteristic.
[13] John Hannah April 9, Hannah, J., & John Hannah John Hannah is a Senior JavaScript Developer.
(n.d.). Choosing the Right JavaScript Framework for the Job. Lullabot.
https://www.lullabot.com/articles/choosing-the-right-javascript-framework-for-the-job.
[14] Flexbox. (n.d.). https://css-tricks.com/snippets/css/a-guide-to-flexbox/.
32
[15] Programing in Java . Week4.pptx - Programing in Java Week 4 Database Management System
What is Database \u2022 The database is a collection of inter-related data which is used | Course
Hero. (n.d.). https://www.coursehero.com/file/66023043/Week4pptx/.
[16] Database Relationship. (n.d.). https://github.com/susanBuck/dwa15-

fall2018/blob/master/laravel/db-one-to-many.md.
[17] Diebner, R., Silliman, E., Ungerman, K., & Vancauwenberghe, M. (2020, December 12). Adapting
customer experience in the time of coronavirus. McKinsey & Company.
https://www.mckinsey.com/business-functions/marketing-and-sales/our-insights/adapting-
customer-experience-in-the-time-of-coronavirus.
[18] says:, S. K., says:, S., says:, E. S., says:, P., says:, R., says:, S., says:, P. S., says:, A. S., says:, K.
S. A. Y. E. D., says:, B. C., Says:, L. B., says:, S. L., says:, P. J., & says:, N. C. (2020, November
25). Angular Tutorial for Beginners: Getting Started with Angular 8. Edureka.
https://www.edureka.co/blog/angular-tutorial/.
33
Appendix A
SQL Code:
-- phpMyAdmin SQL Dump

-- version 2.11.6
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Apr 22, 2021 at 05:42 PM
-- Server version: 5.0.51
-- PHP Version: 5.2.6
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;
--
-- Database: `rover`
--
-- --------------------------------------------------------
--
-- Table structure for table àdd_sitter`
--
CREATE TABLE àdd_sitter` (

`sitter_id` int(11) NOT NULL auto_increment,
`name` varchar(200) NOT NULL,
àddress` varchar(200) NOT NULL,
`mobile` bigint(20) NOT NULL,
èmail` varchar(100) NOT NULL,
àbout` text NOT NULL,
`pet_dog` varchar(100) NOT NULL,
`pet_cat` varchar(100) NOT NULL,
`dog_size0_15` varchar(100) NOT NULL,
`dog_size101` varchar(100) NOT NULL,
`total_pet` varchar(100) NOT NULL,
`has_house` varchar(100) NOT NULL,
`has_fanced_yard` varchar(100) NOT NULL,
`dogs_allowed_on_furniture` varchar(100) NOT NULL,
`dogs_allowed_on_bed` varchar(100) NOT NULL,
`non_smoking_home` varchar(100) NOT NULL,
`not_own_dog` varchar(100) NOT NULL,
`not_own_cat` varchar(100) NOT NULL,
àccept_client` varchar(100) NOT NULL,
`not_caused_pet` varchar(100) NOT NULL,
`has_no_child` varchar(100) NOT NULL,
`no_child_0_5` varchar(100) NOT NULL,
`no_child_6_12` varchar(100) NOT NULL,
`date` date NOT NULL,
ùser_id` int(8) NOT NULL,
`reg_id` int(8) NOT NULL,
ìmg` varchar(200) NOT NULL,
`price` double(20,2) NOT NULL,
`zipcode` varchar(8) NOT NULL,
`city` varchar(50) NOT NULL,
`watch_dog_size0_15` varchar(50) NOT NULL,
`watch_dog_size101` varchar(50) NOT NULL,
34
PRIMARY KEY (`sitter_id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=13 ;
--
-- Dumping data for table àdd_sitter`
--
INSERT INTO àdd_sitter` (`sitter_id`, `name`, àddress`, `mobile`, èmail`, àbout`, `pet_dog`, `pet_cat`, `dog_size0_15`, `dog_size16_40`,
`dog_size41_100`, `dog_size101`, `total_pet`, `has_house`, `has_fanced_yard`, `dogs_allowed_on_furniture`, `dogs_allowed_on_bed`,
`non_smoking_home`, `not_own_dog`, `not_own_cat`, àccept_client`, `not_caused_pet`, `has_no_child`, `no_child_0_5`, `no_child_6_12`, `date`,
ùser_id`, `reg_id`, ìmg`, `price`, `zipcode`, `city`, `watch_dog_size0_15`, `watch_dog_size16_40`, `watch_dog_size41_100`, `watch_dog_size101`)
VALUES
(9, 'garry ', 'Park West, San Diego', 9017291918, 'b@gmail.com', 'I grew up with 2 wonderful dogs cockapoo, small and labradoodle, large) through their
puppy-adult phases; crate training, teaching them tricks, and giving them medication in their later years Beyond taking care of my own dogs, I pet sat and
walked neighborhood/nearby dogs through college and am experienced with all sizes and temperaments. I believe in catering to the pets unique personality
to give them the best care!', '', '', 'yes', '', 'yes', '', '2', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', '2021-02-25', 1, 11,
'robinbrassfieldcooper (1).png', 10.00, '125055', 'sirsa', 'yes', 'yes', '', 'yes'),
(10, 'Ravi S', '', 9017291918, 'admin@gmail.com', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '2021-02-25', 0, 0, '', 0.00, '', '', '', '', '', ''),
(11, 'Ravi S ', 'Sirsa', 919017291918, 'admin@gmail.com', '', '', '', 'yes', 'yes', 'yes', 'yes', '', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes', 'yes',
'2021-02-25', 0, 12, '', 0.00, '', '', '', '', '', ''),
(12, 'Ravi S', 'Sirsa', 9017291918, 'admin@gmail.com', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '2021-03-04', 0, 13, '', 0.00, '', '', '', '', '', '');
-- --------------------------------------------------------
--
-- Table structure for table `booked`
--
CREATE TABLE `booked` (

`booked_id` int(11) NOT NULL auto_increment,
`booked_by` int(8) NOT NULL,
`booked_to` int(8) NOT NULL,
`booked_date` date NOT NULL,
`booked_time` time NOT NULL,
`booking_status` int(8) NOT NULL,
PRIMARY KEY (`booked_id`)
--
-- Dumping data for table `booked`
--
INSERT INTO `booked` (`booked_id`, `booked_by`, `booked_to`, `booked_date`, `booked_time`, `booking_status`, `date`) VALUES
(1, 0, 10, '2021-02-23', '10:00:00', 0, '0000-00-00'),
(2, 0, 9, '2021-02-23', '12:00:00', 0, '0000-00-00'),
(3, 6, 10, '2021-02-23', '11:00:00', 1, '0000-00-00');
-- --------------------------------------------------------
--
-- Table structure for table `calander`
--
CREATE TABLE `calander` (

`calander_id` int(11) NOT NULL auto_increment,
`time` time NOT NULL,
`sitter_id` int(7) NOT NULL,
`booked_by` int(7) NOT NULL,
`status` int(3) NOT NULL,
PRIMARY KEY (`calander_id`)
--
-- Dumping data for table `calander`
--
INSERT INTO `calander` (`calander_id`, `date`, `time`, `sitter_id`, `booked_by`, `status`) VALUES
(1, '2021-03-03', '09:16:00', 11, 0, 1),
35
(2, '2021-03-03', '10:16:00', 11, 0, 1),
(3, '2021-03-28', '11:16:00', 11, 0, 0);
-- --------------------------------------------------------
--
-- Table structure for table `locations`
--
CREATE TABLE `locations` (

ìd` int(11) NOT NULL auto_increment,
`latitude` varchar(20) character set utf8 collate utf8_unicode_ci NOT NULL,
`longitude` varchar(20) character set utf8 collate utf8_unicode_ci NOT NULL,
`name` varchar(100) character set utf8 collate utf8_unicode_ci NOT NULL,
ìnfo` varchar(255) character set utf8 collate utf8_unicode_ci NOT NULL,
ìcon` varchar(255) character set utf8 collate utf8_unicode_ci NOT NULL COMMENT 'Marker icon',
PRIMARY KEY (ìd`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=12 ;
--
-- Dumping data for table `locations`
--
INSERT INTO `locations` (ìd`, `latitude`, `longitude`, `name`, ìnfo`, ìcon`) VALUES
(1, '24.794500', '73.055000', 'Pindwara', 'Pindwara, Rajasthan, India', 'g.jpg'),
(2, '21.250000', '81.629997', 'Raipur', 'Chhattisgarh, India', 'g.jpg'),
(3, '16.166700', '74.833298', 'Gokak', 'Gokak, Karnataka, India', 'g.jpg'),
(4, '26.850000', '80.949997', 'Lucknow', 'Lucknow, Uttar Pradesh, India', 'g.jpg'),
(5, '28.610001', '77.230003', 'Delhi', 'Delhi, the National Capital Territory of Delhi, India', 'g.jpg'),
(6, '19.076090', '72.877426', 'Mumbai', 'Mumbai, Maharashtra, The film city of India', 'g.jpg'),
(7, '14.167040', '75.040298', 'Sagar', 'Sagar, Karnataka, India', 'g.jpg'),
(8, '26.540457', '88.719391', 'Jalpaiguri', 'Jalpaiguri, West Bengal, India', 'g.jpg'),
(9, '24.633568', '87.849251', 'Pakur', 'Pakur, Jharkhand, India', 'g.jpg'),
(10, '22.728392', '71.637077', 'Surendranagar', 'Surendranagar, Gujarat, India', 'g.jpg'),
(11, '9.383452', '76.574059', 'Thiruvalla', 'Thiruvalla, Kerala, India', 'g.jpg');
-- --------------------------------------------------------
--
-- Table structure for table `modules`
--
CREATE TABLE `modules` (

`module_id` int(10) NOT NULL auto_increment,
`module_name` varchar(200) NOT NULL,
`status` int(1) NOT NULL default '0',
PRIMARY KEY (`module_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
--
-- Dumping data for table `modules`
--
INSERT INTO `modules` (`module_id`, `module_name`, `status`) VALUES

(1, 'Manage User', 1);
-- --------------------------------------------------------
--
-- Table structure for table `registration`
--
CREATE TABLE `registration` (

àdmin_id` int(11) NOT NULL auto_increment,
ùser_name` varchar(100) NOT NULL,
`password` varchar(20) NOT NULL,
`type` varchar(30) NOT NULL,
`name` varchar(50) NOT NULL,
`contact` bigint(20) NOT NULL,
`status` int(11) NOT NULL,
36
ìmage` varchar(150) NOT NULL,
`modules` varchar(59) NOT NULL,
àddress` text NOT NULL,
èmail` varchar(50) NOT NULL,
`session_id` int(6) NOT NULL,
`pincode` int(7) NOT NULL,
`state_id` varchar(100) NOT NULL,
`dist_id` varchar(100) NOT NULL,
`city_id` varchar(100) NOT NULL,
èntry_date` date NOT NULL,
`store_name` varchar(120) NOT NULL,
`pancard` varchar(20) NOT NULL,
`gstin` varchar(20) NOT NULL,
`pancardphoto` varchar(100) NOT NULL,
`gstinphoto` varchar(100) NOT NULL,
PRIMARY KEY (àdmin_id`)
--
-- Dumping data for table `registration`
--
INSERT INTO `registration` (àdmin_id`, ùser_name`, `password`, `type`, `name`, `contact`, `status`, ìmage`, `modules`, àddress`, èmail`, ùser_id`,
`session_id`, `pincode`, `state_id`, `dist_id`, `city_id`, èntry_date`, `store_name`, `pancard`, `gstin`, `pancardphoto`, `gstinphoto`) VALUES
(1, 'admin', 'admin', '', 'SuperAdmin', 9017291918, 1, '', '1,2,3,4,5,6,7', 'a', 'bminfo.ravinder@gmail.com', 0, 0, 0, '0', '0', '0', '0000-00-00', '', '', '', '', ''),
(6, '', '123', 'user', 'Ravinder', 9017291918, 1, '', '2', 'Sirsa', 'admin@gmail.com', 1, 0, 125055, 'Haryana', '0', 'sirsa', '2021-01-04', '', '', '', '', ''),
(7, 'rahul', 'rahul', 'admin', 'Rahul Sharma', 9017291955, 1, '', '2', '', 'ravi@gmail.com', 1, 0, 0, '0', '0', '0', '2021-01-04', '', '', '', '', ''),
(8, 'c', '123', 'user', 'Ravi S', 9017291915, 1, '', '1,2,3,4', '', 'ravindergigsoftpro9@gmail.com', 1, 0, 0, '0', '0', '0', '2021-02-11', '', '', '', '', ''),
(9, 'd', '123', 'user', 'Ravi S', 9017291913, 1, '', '2', '', 'bminfo.ravinder@gmail.com', 1, 0, 0, '0', '0', '0', '2021-02-11', '', '', '', '', ''),
(10, 'gg', '123', 'sitter', 'ggg', 980983098324, 1, '', '1,2', '', 'ravindergigsoftpro9@gmail.com', 1, 0, 0, '0', '0', '0', '2021-02-11', '', '', '', '', ''),
(11, 'ravindergigsoftpro9@gmail.com', '123456', 'sitter', 'Ravi S', 9017291918, 0, '', '', 'Sirsa', 'ravindergigsoftpro9@gmail.com', 1, 0, 0, '0', '0', '0', '2021-02-
25', '', '', '', '', '');
-- --------------------------------------------------------
--
-- Table structure for table `services`
--
CREATE TABLE `services` (

`service_id` int(11) NOT NULL auto_increment,
`service_name` varchar(50) NOT NULL,
PRIMARY KEY (`service_id`)
--
-- Dumping data for table `services`
--
INSERT INTO `services` (`service_id`, `service_name`) VALUES

(1, 'Boarding'),
(2, 'House Sitting'),
(3, 'Drop In Visits'),
(4, 'Dog Walking');
-- --------------------------------------------------------
--
-- Table structure for table `sitter_booking`
--
CREATE TABLE `sitter_booking` (

`sbookingid` int(11) NOT NULL auto_increment,
`calid` int(8) NOT NULL,
ùserid` int(8) NOT NULL,
`booking_date` date NOT NULL,
`booking_status` varchar(50) NOT NULL default 'Pending',
PRIMARY KEY (`sbookingid`)
37
--
-- Dumping data for table `sitter_booking`
--
-- --------------------------------------------------------
--
-- Table structure for table ùser_service`
--
CREATE TABLE ùser_service` (

ùser_ser_id` int(11) NOT NULL auto_increment,
`service_id` int(8) NOT NULL,
`price` double(20,2) NOT NULL,
PRIMARY KEY (ùser_ser_id`)
--
-- Dumping data for table ùser_service`
--
INSERT INTO ùser_service` (ùser_ser_id`, ùser_id`, `service_id`, `price`) VALUES

(4, 10, 1, 0.00),
(5, 10, 2, 0.00),
(6, 9, 1, 0.00),
(7, 13, 2, 0.00),
(8, 8, 1, 0.00),
(9, 12, 2, 0.00),
(10, 11, 1, 30.00),
(11, 11, 2, 40.00),
(12, 11, 3, 50.00),
(13, 11, 4, 60.00);
38
Appendix B
CSS Code
Home Page
.slider-icon-align {
position: absolute;
top: 50%;
z-index: 5;
right: 50%;
.testimonial-bg {
background-color: rgba(0, 0, 0, 0.5);
}
.testimonial-wrap {
padding: 60px 117px;
background: #f8f9fa;
.people-heading {
font-size: 32px;
font-weight: 700;
text-transform: uppercase;
color: #d6351e;
margin-bottom: 24px;
}
.people-name {
margin: 0;
font-size: 15px;
color: #d6351e;
}
.people-address {
font-size: 14px;
color: #4d4d4d;
}
.people-messages {
position: relative;
font-family: 'Muli', sans-serif;
font-size: 24px;
font-style: normal;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 32px;
margin: 0 0 24px 0;
padding-top: 24px;
color: #333333;
}
.people-messages i {
color: #808080;
font-style: normal;
opacity: 0.4;
}
.testimonial-carousel-indicators li {
/*display: inline-block;*/
/*width: 18px;*/
39
/*height: 18px;*/
text-indent: 0;
cursor: pointer;
border: 1px solid #cccccc;
border-radius: 0;
.testimonial-carousel-indicators .active {
border: 1px solid #cccccc;
padding: 5px;
width: 12px;
height: 12px;
background: #d6351e;
border-radius: 0;
}
.testimonial-carousel-indicators {
bottom: 10px !important;
}
.testi-wrap-margin {
margin-top: 90px;
}
/*our sponsor*/
/* override position and transform in 3.3.x */
.carousel-Sponsors .carousel-inner .item.left.active {
transform: translateX(-66%);
}
.carousel-Sponsors .carousel-inner .item.right.active {

transform: translateX(66%);
}
.carousel-Sponsors .carousel-inner .item.next {

transform: translateX(66%)
}
.carousel-Sponsors .carousel-inner .item.prev {

transform: translateX(-66%)
}
.carousel-Sponsors .carousel-inner .item.right,

.carousel-Sponsors .carousel-inner .item.left {
transform: translateX(0);
}
.carousel-Sponsors .carousel-control.left, .carousel-control.right {

background-image: none;
}
#carousel-Sponsors .carousel-inner .item a img {

height: auto;
width: 100%;
max-width: 140px;
max-height: 100px;
}
/*header*/
/*#custome-navigatin .nav > li > a {*/
/*padding-left: 0px!IMPORTANT;*/
/*padding-right: 30px!IMPORTANT;*/
/*}*/
.header-active {
background-image: url("../images/bg-small-dot-white.png");
/*background-color: white;*/
40
color: #333333 !important;
box-shadow: 0 0px 10px #777
/*soical icon footer*/

.social-icon-wrap {
.icon-child ul li {
background-color: #d6351e;
/*padding: 3px;*/
/*height: 35px;*/
/*width: 35px;*/
text-align: center;
vertical-align: middle;
.icon-child ul li a i:hover {
background-color: #FFFFFF;
color: #d6351e;
.header-line {
background-image: url("../images/new-lines.png");
background-position: 219px 0px;
background-repeat: no-repeat;
.heder-bottom-red {
border-bottom: 3px solid #109714;
}
.form-control {
padding: 8px;
-webkit-box-shadow: none;
box-shadow: none;
width: 95% !important;
border: 1px solid #1a8557 !important;
}
input[type=checkbox], input[type=radio] {
width: 43px !important;

height: 20px !important;
}
form.appoinment-form .col-md-12 {
padding: 20px 10px;

border-bottom: 1px solid #1a8557;
}
form.appoinment-form textarea#content,input[type="email"],input[type="text"] {
width: 100%;
}
.appoinment-form .form-group {
margin-bottom: 0;
padding: 0;
}
form.appoinment-form {
width: 100%;
border: 1px solid #ccc;
float: left;
padding: 0px !important;
}
41
.panel {
border: 0 !important;
}
/*news and events*/
.date-bg {
padding: 6px;
}
.news-date-time {
font-size: 13px;
}
.news-read-more {
padding: 5px;
font-size: 14px;
}
#home-news .event-details p {
margin: 0 !important;
}
.hover-animation:hover {
/*--------------*/
.ticker {
overflow: auto;
}
.ticker dt {
padding: 5px 10px;
border-bottom: none;
border-right: none;
position: relative;
}
.ticker dd {
margin-left: 0;
padding: 0 10px 10px 10px;
border-bottom: 1px solid #cccccc;
position: relative;
}
.ticker dd.last {
border-bottom: 1px solid #cccccc;
}
.ticker div {
margin-top: 0;
}
.ticker .heading a {
font-weight: bold;
}
.padding-between {
padding: 10px;
}
/*testimonial*/
.testimonials {
font-style: italic;
font-size: 18px;
/*gallery*/
.gallery-size {
42
width: 100%;
height: auto;
max-width: 310px;
max-height: 216px;
}
.border-on-div {
border: 1px solid #a6a8be;
border-radius: 7px;
}
.shadow-on-div {
box-shadow: 0 0px 8px rgba(0, 0, 0, 0.2);
transform: translate(0, -4px);
}
.bg-dil {
background-attachment: fixed!important;
/*background-size: cover;*/
background-position: center center!important;
background-repeat: no-repeat;
/*background: url(../images/bg-dil.jpg);*/
}
.text-italic{
font-style: italic;
}
.desktop-center{
text-align: left;
}
@media only screen and (max-width: 768px)
{
.mobile-center{
text-align: center;
}
.desktop-center{
text-align: no;
}
}
/*custom bt */
.row-fluid-two {
float: left;
width: 100%;
}
.row-fluid-twoo {
float: left;
width: 100%;
}
.main-top-hdr {
background-color: #fff;
border-bottom: 1px solid #ccc;
float: left;
position: fixed;
top: 0;
width: 100%;
z-index:99;
}
.main-top-hdro {
display:none;
background-color: #fcfcfd;
float: left;
top: 0;
43
width: 100%;
}
.main-logo-varification {
width: 17%;
margin: 107px auto 0;
}
.inner-button {
}
.header-top-two {
float: left;
height: auto;
padding: 10px 0 0;
width: 100%;
z-index: 9999999;
}
.main-logo-details {
float: left;
width: 14%;
}
img.top {
width: 100%;
}
.main-search-container-two {
float: left;
margin: 0;
width: 100%;
}
.main-search-container-two {
float: left;
margin: 10px 0 0;
width: 65%;
}
.contacts-section-two {
float: left;
width: 100%;
}
.search-main-section-two {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border-radius: 80px;
float: left;
height: auto;
width: 80%;
margin: 0 85px 0;
}
.inner-container-all-section-two {
margin: 0 auto;
width: 95%;
}
.left-people-one-two {
border: 1px solid #fff;
border-radius: 4px;
float: left;
height: 35px;
width: 44%;
padding-top: 2px;
}
.people-text-one-two {
width: 100%;
}
.main-people-left-two {
border: 1px solid #888;
float: left;
44
height: auto;
padding: 2px;
width: 100%;
}
.main-people-left span {
cursor: pointer;
}
#man-icon-two {
float: left;
height: auto;
margin: 8px 0;
width: 4%;
}
.right-people-two-22 {
border: 1px solid #fff;
border-radius: 4px;
float: left;
height: 35px;
width: 44%;
padding-top: 0;
}
.people-text-two-22 {
width: 100%;
}
.main-people-right-two {
border: 1px solid #888;
float: left;
height: auto;
padding: 0 5px;
width: 100%;
}
.main-people-right-two span {
color: #000;
font-family: roboto;
font-size: 20px;
}
#man-icon-two img {
width: 100%;
margin-top: -3px;
}
.search-button-two {
cursor: pointer;
float: left;
margin: 0;
padding-left: 10px;
width: 8%;
}
.search-button-two input {
background-color: #eb1e27;
border: medium none;
border-radius: 4px;
color: #fff;
margin: 1px 0 0;
padding: 7px 24px;
width: 140px;
}
.loin-login-two {
float: right;
margin: 16px 0 0;
}
.loin-login-two ul {
list-style: outside none none;
padding: 0;
}
.loin-login-two li {
45
display: inline;
}
.loin-login-two a {
background:#eb1e27 none repeat scroll 0 0;
color: #fff;
font-size: 15px;
padding: 3px 14px;
}
.loin-login-two a:first-child {
border: 1px solid #FFFFFF;

text-decoration: none;
font-family: arial;
}
.loin-login-two span {
color: #000;
margin: 0 4px;
}
input.firest-name-two {
color: #000;
float: right;
font-size: 15px;
padding: 3px 0;
width: 88%;
outline: none;
}
input.city-state-name-two {
color: #000;
float: right;
font-size: 15px;
padding: 6px 0;
width: 88%;
outline: none;
}
.main-aftr-top {
margin: 0 0 60px;
padding-top: 8em;
width:100%;
float:left;
}
.people-dtl-left-one {
float: left;
margin: 0 20px 50px 0;
width: 20%;
}
.left-list-one ul {
/* border-bottom: 1px solid #ccc;
*/ list-style: outside none none;
min-height: 120px;
padding: 0;
}
.left-list-one a {
color: #888;
line-height: 25px;
font-size: 15px;
}
.inner-taxt {
float: left;
margin-left: 390px;
46
margin-top: 115px;
text-align: center !important;
width: 100%;
}
.center.span5 a {
padding-left: 0;
text-decoration: underline;
}
fieldset {
border: 0 none;
float: left;
margin: 0;
min-width: 0;
padding: 0;
width: 100%;
}
.people-dtl-left-one h2{
background: none repeat scroll 0 0 #3B5C65;
border-bottom: 1px solid #CCCCCC;
color: #FFFFFF;
font-size: 22px;
margin: 0;
padding: 10px;
}
.left-list-one li {
border-bottom: 1px solid #CCCCCC;
padding: 5px;
}
.left-list-one {
/* background: #f5f5f5 none repeat scroll 0 0; */
/* box-shadow: 0 0 6px #ccc; */
background: #fff none repeat scroll 0 0;
margin: 0 0 20px;
padding: 10px;
}
.mid-afte-top-one {
float: left;
margin: 0 0 50px;
width: 62%;
background: #fff;
padding: 10px;
}
.mid-afte-top-two {
float: left;
margin: 0 0 50px;
min-height: 465px;
width: 55%;
padding: 0;
}
.mid-afte-top-one input {
background-color: #06bbf4;
color: #fff;
margin: 1px 0 0;
padding: 9px 10px;
}
.mid-afte-top-one > div {
}
47
.mid-afte-top-two input {
color: #fff;
margin: 1px 0 0;
padding: 9px 10px;
}
/******end********/
@media screen and (-webkit-min-device-pixel-ratio:0){
.input-large.span10 {
margin: 0 0 12px;
padding: 13px;
width: 100%;
outline: none;
}
}
.mid-afte-top-one input {
border-radius: 4px;
color: #fff;
margin: 1px 0 0 4px;
padding: 6px 10px;
}
.mid-afte-top-one a {
}
.inner-well-two-businesss{
margin: 3em auto 0;
width: 100%;
}
.inner-well {
margin: 3em auto 0;
width: 65%;
}
.form-group input {
margin-top: 16px;
}
/*.form-group label {
margin-top: 16px;
color:#03baf9;
}*/
.inner-submit .btn {
background-color:#03baf9;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
margin-bottom: 0;
padding: 9px 21px;
text-align: center;
color:#fff;
font-weight: bold;
}
.inner-submit {
margin-left: 75px;
margin-top: 2em;
}
textarea#inputPassword3 {
height: 85px;
48
margin-top: 16px;
width: 100%;
}
select#inputEmail31 {
height: 30px;
margin-top: 16px;
width: 100%;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
.span1 {
background-color:#06bbf4;
margin-left:5px;
font-size:20px;
color:#fff;
padding:15px;
}
}
.profile-main-page {
margin: 12em 0 8em!important;
}
.profile-main-page {
float: left;
margin: 160px 0 80px;
width: 100%;
}
.profile-inner-container{
background: #e5e2e2 none repeat scroll 0 0;
box-shadow: 2px 0 16px 7px #888;
margin: 0 auto;
padding: 20px;
width: 55%;
}
.profile-form-one {
width: 100%;
}
.profile-inpt-container-one {
margin: 28px 0;
width: 100%;
}
.profile-inpt-container-one label {
margin: 0 20px 0 0;
width: 6%;
}
.profile-inp-one {
margin: 0 14px;
padding: 10px;
width: 85%;
}
.profile-file-container-one {
margin: 12px 0;
49
width: 100%;
}
.profile-file-container-one label {
float: left;
margin: 0 30px 0 0;
}
.Send-btn {
margin: 0 auto;
width: 75%;
}
.Send-btn input {
background: #03baf9 none repeat scroll 0 0;
color: #fff;
padding: 10px;
width: 30%;
}
/*******end***********/
.acc_heading {
float: left;
text-align: center;
width: 100%;
}
.acc_heading > h2 {
color: #06bbf4;
margin: 25px 0;
}
.header-top.sticky {
background-color:#000 ;
float: left;
height: auto;
min-height: 100px;
padding: 10px 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.search-main-section.sticky {
background: #000 ;
font-size: 18px;
height: 100px;
left: 50px;
line-height: 24px;
margin: -478px auto 0;
position: fixed;
right: 0;
text-align: left;
width: 50%;
z-index: 99999;
}
.man-icon.sticky {
float: left !important;
height: auto !important;
margin: 59px 0 0 !important;
}
#srch-icon.sticky img {
padding-top: 11px !important;
width:8% !important;
}
#where-icon.sticky img {
width: 8%;
padding-top: 11px;
50
}
.search-button input.sticky{
padding:11px 22px;
}
.main-pdashboard-container {
float: left;
padding: 0;
width: 100%;
margin: 107px 0;
}
.dashboard-container{
width:1000px;
margin:0 auto;'
.dash-board-main-heading {
background: #04BAFC none repeat scroll 0 0;
float: left;
text-align: center;
width: 100%;
}
.dash-board-main-heading h4 {
color: #fff;
font-size: 35px;
}
.left-dashboard-list-section {
float: left;
height: auto;
margin-top: 2em;
width: 22%;
box-shadow: 0px 1px 2px #333;
}
.profl-name {
width: 100%;
float: left;
}
.profl-name img {
float: left;
width: 100%;
margin: 0 20px 0px 0;
border-radius: 0;
}
.profl-name h2 {
color: #fff;
font-size: 14px;
}
.container-left-one {
width: 100%;
}
.btn-primary1 {
background-color: #f2efef !important;
51
border-color:#ccc!important;
color: #888 !important;
text-align: left !important;
width: 100%;
}
button img {
margin: 0 10px 0 0;
}
.btn-primary1:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
border-color: #ccc!important;
color: #ffffff!important;
}
.dropdown-menu {
background-clip: padding-box;
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
display: none;
float: left;
font-size: 15px;
left: 0;
margin: 2px 0 0;
padding: 5px 0;
position: absolute;
text-align: left;
top: 100%;
width: 100%;
z-index: 1000;
}
.dropdown-menu li a:hover, .dropdown-menu li a:focus {

background-color: #f56e36!important;
color: #ffffff;
}
.dashboard-right-container{
float: left;
margin-left: 20px;
margin-top: 20px;
padding: 10px;
width: 76%;
.inner-right-cont{
width:100%;
}
.main-heading-top {
border-bottom: 5px solid #3396D1;
float: left;
padding: 15px;
width: 100%;
}
.main-heading-top h4 {
color: #3396D1;
font-size: 26px;
margin: 0;
text-align: left;
}
.head-sub-two{
width:100%;
float:left;
}
52
.inner-main-container-three-inone {
background: #eeeeee none repeat scroll 0 0;
float: left;
padding: 11px;
width: 100%;
}
.min-container-one{
width:33%;
float:left;
}
.title-heading-one {
color: #000;
font-size: 14px;
font-weight: bold;
}
.card-info-form {
box-shadow: 0 0 12px #ccc;
float: left;
padding: 10px;
width: 100%;
margin: 25px 0 30px;
}
.inpt-info-one{
float: left;
margin: 10px 0;
width: 100%;
}
.inpt-info-one span {
color: #3396D1;
float: left;
font-size: 15px;
width: 24%;
padding-left: 35px;
}
.inpt-info-one input {
float: right;
margin: 0 0 0 15px;
padding: 10px;
width: 65%;
}
.inpt-info-one textarea {
float: right;
margin: 0 0 0 15px;
padding: 10px;
width: 75%;
}
input.date-inp-txt {
width: 10%;
text-align: center;
}
.Secure-logo-two {
float: left;
margin: 46px 0;
53
text-align: right;
width: 45%;
}
.paypal-banner-img {
float: right;
margin: 45px 0;
width: 16%;
}
.paypal-banner-img img {
width: 100%;
}
.send-btn {
float: left;
width: 21%;
margin: 35px 0 ;
}
.bnt-end-section {
float: left;
width: 68%;
}
.bnt-end-section1 {
width: 40%;
margin-left:42%
}
.paypal-banner-two-img {
float: left;
text-align: right;
width: 45%;
}
.send-btn input {
background: #f17541 none repeat scroll 0 0;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 15px 30px;
margin: 201px 60px 119px 0;
}
.send-btn-account input {
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 15px 30px;
margin-left: 42%;
}
.security-icon {
float: right;
width: 72%;
margin: 52px 0;
}
.security-icon img {
float: left;
}
.security-icon p {
color: #888;
float: left;
54
font-size: 15px;
margin: 0 10px;
}
.select_field{
float: right;
margin: 0 0 0 15px;
padding: 10px;
width: 65%;
/*detal page
*/
.main-right-container-box-section{
float: left;
padding: 10px;
width: 45%;
}
.inner-portion-cintainer{
float: left;
width: 100%;
.main-inner-name-heading {
float: left;
font-family: arial;
font-size: 18px;
margin: 0;
width: 100%;
}
.inner-main-infomation-container {
float: left;
width: 56%;
}
span.destils {
color: #888;
float: left;
width: 18%;
}
.inner-portion-cintainer h4 {
color: #000;
font-family: arial;
font-size: 12px;
}
.inner-portion-cintainer h4 {
color: #000;
font-family: arial;
font-size: 12px;
line-height: 22px;
margin: 0;
width: 100%;
}
.right-star-section-one {
float: right;
width: 35%;
}
.star-img-section-container {
float: left;
margin: 0 0 4px;
width: 60%;
}
.star-img-section-container img {
55
width: 18px;
}
.link-section-btn {
float: left;
width: 100%;
margin-top: 20px;
}
.link-section-btn a {
color: red;
float: left;
font-family: arial;
margin: 0 12px 0 0;
}
ul.setPaginate {
background: #eb1e27 none repeat scroll 0 0;
color: #fff;
float: left;
font-weight: bold;
margin-top: 20px;
padding: 16px 0;
width: 100%;
}
.setPaginate li {
display: inline;
font-size: 13px;
padding: 6px;
}
ul.setPaginate a {
font-size: 16px;
padding: 8px;
color: #fff;
}
.box-details-one {
float: left;
width: 14%;
.box-detail-heading{
background: #d4d9cc none repeat scroll 0 0;
padding: 2px;
width:100%;
float:left;
text-align-last:center;
border-right:1px solid #fff;
}
.box-detail-heading h4 {
font-family: arial;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.inner-right-cont {
float: left;
margin: 0 0 5px;
width: 100%;
}
.box-detail-heading-two{
padding: 2px;
width:100%;
56
float:left;
text-align-last:center;
border:1px solid #ccc;
}
.box-detail-heading-two h4 {
font-family: arial;
font-size: 14px;
text-align: center;
}
.inner-right-cont-one {
float: left;
margin: 0 0 5px;
width: 100%;
}
.box-details-one-two {
float: left;
width: 14%;
}
/*end
*/
.main-right-container-box-section:hover {
background: #f6f5f4 none repeat scroll 0 0;
cursor: pointer;
}
.main-register-container{
margin: 0 auto;
width: 32%;
}
.user-form-section {
box-shadow: 0 0 2px 2px lightgray;
float: left;
padding: 0;
width: 100%;
}
.inner-fm-box-one {
float: left;
padding: 8px 12px;
width: 100%;
}
.fogt-pssd {
float: left;
padding: 15px;
width: 100%;
}
.inner-fm-box-one:first-child {
margin: 8px 0 0;
}
span.rd-heading-txt {
background: #3B5C65 none repeat scroll 0 0;
color: #fff;
float: left;
font-family: raleway;
font-size: 22px;
font-weight: bold;
padding: 12px;
width: 100%;
}
input.usr-one-inpt {
float: left;
padding: 8px;
57
width: 88%;
}
.u-icon {
float: left;
padding: 5px;
text-align: center;
width: 12%;
}
.sec-fm-section {
float: left;
margin: 12px 0;
width: 100%;
}
.sec-fm-two-box {
border-top: 1px solid #ccc;
float: left;
width: 100%;
}
.two-fm-inpt {
float: left;
margin: 18px;
padding: 8px;
width: 32%;
}
.form-group {
padding: 15px;
width: 100%;
}
.form-group select#sel1 {
color: #888;
padding: 8px;
width: 100%;
}
.i-agree-txt {
float: left;
text-align: center;
width: 100%;
}
label.chk-bx-one {
color: #888888;
float: left;
font-family: arial;
padding: 10px;
width: 92%;
}
.submit-btn {
float: left;
width: 100%;
}
.submit-btn input {
border: 0 none;
color: #fff;
font-size: 18px;
padding: 10px;
width: 100%;
cursor: pointer;
}
.submit-btn input:hover {
background: #cccace none repeat scroll 0 0;
border: 0 none;
color: #777;
58
.reg_tital {
text-align: center;
width: 100%;
}
.reg_header {
background-color: #03baf9;
float: left;
height: 60px;
position: absolute;
top: 1px;
width: 100%;
}
.ew-top-logo-icon {
float: left;
position: absolute;
top: -15px;
width: 8%;
}
.ew-top-logo-icon img {
width: 100%;
}
.rg-main-section-container {
float: left;
height: 480px;
margin-top: 8em;
width: 100%;
}
.dropdown-menu {
background-color: #FFFFFF;
border-radius: 4px;
display: none;
float: right;
font-size: 14px;
left: 56px;
list-style: none outside none;
margin: 2px 0 0;
min-width: 135px !important;
padding: 5px 0;
position: absolute;
text-align: left;
top: 56px;
z-index: 1000;
}
.loin-login {
float: right;
margin: 12px 0 0;
width: 50%;
}
.dropdown {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
outline: medium none;
}
.btn-primary.active, .btn-primary.focus, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .dropdown-toggle.btn-primary {

border-color: #204d74;
color: #fff;
}
.user-img-id {
float: left;
height: auto;
59
margin: 2px 8px !important;
width: 22%;
}
.user-img-id img {
height: 40;
width: 40px;
}
span.prof-name-one {
float: left;
margin: 13px 10px !important;
}
span.caret {
margin-top: 22px !important;
}
button.btn {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0 !important;
margin: -18px 0px;
}
button.btn:hover {
}
background-color: none !important;
border-color: #ccc !important;
color: #ffffff !important;
}.dropdown-menu li a:hover, .dropdown-menu li a:focus {
background-color:#0DABE1!important;
color:#fff!important;
}
background-color: none !important;
border-color: #ccc !important;
color: #ffffff !important;
}
.dropdown-menu {
border-radius: 4px;
display: none;
float: left;
font-size: 14px;
left: 74px!important;
margin: 2px 0 0;
min-width: 160px;
padding: 5px 0;
position: absolute;
text-align: left;
top: 3em!important;
z-index: 1000;
}
.main-right-container-box-section {
float: left;
width: 100%;
}
.ew-img-icon {
float: left;
width: 20%;
}
.ew-img-icon img {
width: 100%;
}
span.prof-name-txt-one-box {
60
color: #3B5C65;
font-family: arial;
font-size: 20px;
font-weight: bold;
margin: 0 14px 0px;
float:left;
}
.five-star-rating-img {
float: right;
margin: 0 15px 0 0px;
}
.avg {
float: right;
border-left: 1px solid #ccc;
margin: 0px 0 0 7px;

}
.address-box-one {
color: #000000;
float: left;
line-height: 24px;
margin: 12px 15px 0;
width: 75%;
font-family: arial;
font-size: 15px;
border-top: 1px solid #ccc;
padding: 10px 0 0;
}
.two-in-one-box-btn-container {
float: left;
width: 100%;
}
.view-details-one-btn-box {
background: none repeat scroll 0 0 #DEDDDD;
float: left;
width: 50%;
}
.view-details-one-btn-box input {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #3B5C65;
font-family: arial;
font-size: 16px;
text-align: center;
width: 100%;
border-radius:none!important;
text-decoration:none;
}
.view-details-one-btn-box input:hover {
background: none repeat scroll 0 0 #3B5C65;
border-radius: 0;
color: #FFFFFF;
text-decoration:none;
}
.mid-afte-top-two a {
}
.right-banner-container-one{
float: right;
width: 20%;
}
.banner-one-img {
float: left;
width: 100%;
}
.banner-one-img img {
width: 100%;
61
}
General Styling
.text-16 {
font-size: 16px;
}
.text-heading {
font-size: 25px;
}
.text-heading-footer {
font-size: 19px;
}
.text-title {
font-size: 18px;
font-family: 'Muli', sans-serif;
font-style: normal;
}
.text-body {
font-size: 15px;
color: #4b4949;
}
.text-body-15 {
font-size: 15px;
}
.text-body-footer {
font-size: 15px;
color: #ffffff;
}
.clr-white {
color: white;
}
.clr-black {
color: #000000;
}
.clr-gray-light-text {
color: #fff;
}
.clr-red {
/*color: #ff3450;*/
color: #d6351e;
}
.clr-lighten-red:hover{
color: #fe0917
}
.clr-facebook {
color: #3b5998;
}
.clr-twitter {
color: #55acee;
}
.clr-google-plus {
color: #dd4b39;
}
.clr-pintrest {
62
color: #cb2027;
}
.bg-gray-light {
background-color: #f8f9fa;
}
.bg-red {
background-color: #d6351e;
}
.bg-red:hover {
background-color: #fe0917;
}
.bg-gray {
background-color: #7f7f7f;
}
.bg-blck-light {
background-color: #333333;
}
.mt-5 {
margin-top: 5px;
}
.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.mt-70 {
margin-top: 70px;
}
.mb-5 {
margin-bottom: 5px;
}
.mb-10 {
}
.mb-20 {
}
.mb-30 {
}
.mb-70 {
}
.padding-left-5 {
padding-left: 5px;
}
.padding-left-10 {
padding-left: 10px;
}
63
.padding-left-20 {
padding-left: 20px;
}
.padding-left-30 {
padding-left: 30px;
}
.padding-30 {
padding: 30px;
}
64
Appendix C
JavaScript Code
(function($) {
$.fn.backTop = function(options) {
var backBtn = this;
var settings = $.extend({

'position' : 400,
'speed' : 500,
'color' : 'white',
'theme' : '' // red, green, white, custom
}, options);
//Settings
var position = settings['position'];

var speed = settings['speed'];
var color = settings['color'];
var theme = settings['theme'];
if(theme == 'white'){
backBtn.addClass('white');
} else if(theme == 'red'){
backBtn.addClass('red');
}else if(theme == 'green'){
backBtn.addClass('green');
}else if(theme == 'custom'){
backBtn.addClass('custom');
} else{
backBtn.addClass('black');
}
backBtn.css({
'right' : 24,
'bottom' : 24,
'position' : 'fixed'
});
$(document).scroll(function(){
var pos = $(window).scrollTop();
// console.log(pos);
if(pos >= position){

backBtn.fadeIn(speed);
} else{
backBtn.fadeOut(speed);
}
});
backBtn.click(function(){
$("html, body").animate({
scrollTop:0
},
{
duration: 1200
});
});
}(jQuery));
65
(function (e) {
"use strict";
e.fn.counterUp = function (t) {
var n = e.extend({time: 400, delay: 10}, t);
return this.each(function () {
var t = e(this), r = n, i = function () {
var e = [], n = r.time / r.delay, i = t.text(), s = /[0-9]+,[0-9]+/.test(i);
i = i.replace(/,/g, "");
var o = /^[0-9]+$/.test(i), u = /^[0-9]+\.[0-9]+$/.test(i), a = u ? (i.split(".")[1] || []).length : 0;
for (var f = n; f >= 1; f--) {
var l = parseInt(i / n * f);
u && (l = parseFloat(i / n * f).toFixed(a));
if (s)while (/(\d+)(\d{3})/.test(l.toString()))l = l.toString().replace(/(\d+)(\d{3})/, "$1,$2");
e.unshift(l)
}
t.data("counterup-nums", e);
t.text("0");
var c = function () {
t.text(t.data("counterup-nums").shift());
if (t.data("counterup-nums").length)setTimeout(t.data("counterup-func"), r.delay); else {
delete t.data("counterup-nums");
t.data("counterup-nums", null);
t.data("counterup-func", null)
}
};
t.data("counterup-func", c);
setTimeout(t.data("counterup-func"), r.delay)
};
t.waypoint(i, {offset: "100%", triggerOnce: !0})
})
}
})(jQuery);
jQuery(function ($) {
"use strict";
// DETECT TOUCH DEVICE
function is_touch_device() {
return !!('ontouchstart' in window) || (!!('onmsgesturechange' in window) && !!window.navigator.maxTouchPoints);
}
// ANIMATIONS //
function animations() {
animations = new WOW({
boxClass: 'wow',
animateClass: 'animated',
offset: 120,
mobile: false,
live: true
});
animations.init();
}
// ONE PAGE SMOOTH SCROLLING
function smooth_scrolling() {
$(".nav_menu").on("click", function () {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
var offset = $('.header-wrapper').outerHeight();
if ($('.stuck').length === 1) {
offset = $('.stuck').outerHeight();
} else {
offset = parseInt(offset, 0) + 24;
}
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - parseInt(offset, 0)
}, 1300);
66
return false;
}
}
});
}
// PARALLAX
if (typeof $.fn.stellar !== 'undefined') {
if (!is_touch_device()) {
$(window).stellar({
horizontalScrolling: false,
verticalScrolling: true,
responsive: true,
verticalOffset: 50
});
}
}
// SLIDER 1
if ($("#slider_1").length ) {
$("#slider_1").owlCarousel({
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
responsive: {
0: {
items: 1,
nav: false,
loop: true
},
600: {
items: 1,
nav: false,
loop: true
},
1000: {
items: 1,
nav: true,
loop: true
}
},
nav: false,
navText: ["<i class='fa fa-long-arrow-left'></i>", "<i class='fa fa-long-arrow-right'></i>"]
});
}
// STICKY HEADER & MENU
if ( $(".main-header").attr('data-sticky_header')) {
$('.main-header .header-wrapper').waypoint('sticky', {
wrapper: '<div class="sticky-wrapper" />',
stuckClass: 'stuck'
});
}
// GALLERY.
if ( $('.gallery-light-box').length ) {
$('.gallery-light-box').venobox();
}
// GALLERY CAROUSEL
if ($(".gallery-carousel").length ) {
$(".gallery-carousel").owlCarousel({
items: 6,
loop: true,
autoplay: true,
responsive: {
0: {
items: 1,
nav: false
},
600: {
67
items: 3,
nav: true
},
1000: {
items: 4,
nav: true,
loop: true
}
},
nav: true,
navText: ['<i class="fa fa-long-arrow-left"></i>', '<i class="fa fa-long-arrow-right"></i>']
});
}
// COUNTER
if ($(".counter").length ) {
$('.counter').counterUp({
delay: 10,
time: 2000
});
}
//DONORS/CLIENTS LOGOS
$('#carousel-Sponsors').carousel({
interval: 10000
})
$('.testimonial-carousel .carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
//Our Services
if ($(".our-services").length ) {
$(".our-services").owlCarousel({
items: 6,
loop: true,
autoplay: true,
responsive: {
0: {
items: 1,
nav: true
},
600: {
items: 3,
nav: false
},
1000: {
items: 3,
nav: true,
loop: true
}
},
nav: true,
navText: ["<i class='logo-nav-icon'></i>", "<i class='logo-nav-icon'></i>"]
});
}
// TESTIMONIAL CAROUSEL.
if ($(".testimonial-container ").length ) {
$(".testimonial-container").owlCarousel({
items: 1,
loop: true,
68
autoplay: false,
responsive: {
0: {
items: 1,
nav: false
},
600: {
items: 1,
nav: false
},
1000: {
items: 1,
nav: false,
loop: true,
pagination : true,
paginationNumbers: false
}
},
nav: false,
navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"]
});
}
// GOOGLE MAP FOR CONTACT & EVENT PAGE.
if ($('#map_canvas').length) {
var map;
$('#map_canvas').css({
'height': '400px'
});
map = new GMaps({
div: '#map_canvas',
lat: -12.043333,
lng: -77.028333
});
}
// CONTACT FORM
function email_checkRegexp( o, regexp ) {
if (!(regexp.test(o.val()))) {
return false;
} else {
return true;
}
}
if($('#contact-form').length) {
var $contact_form = $("#contact-form");
var $contact_submit_btn = $contact_form.find("button.btn-custom");
var $user_name = $contact_form.find("#user_name");
var $user_email = $contact_form.find("#user_email");
var $email_subject = $contact_form.find("#email_subject");
var $email_message = $contact_form.find("#email_message");
var emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-
zA-Z0-9])?)*$/;
var $all_fields = $([]).add($user_name).add($user_email).add($email_subject).add($email_message)
$all_fields.val("")
var $error_border = "border-bottom: 1px solid red;";
var contact_form_bValid, user_name_bValid,user_email_bValid,user_email_subject_bValid, user_email_message_bValid;
$contact_form.find("button[type=submit]").on("click", function() {
contact_form_bValid = true;
if( $user_name.val() === "" ) {
user_name_bValid = false;
$user_name.next("span").remove();
$user_name.attr("style", $error_border).after("<span class='error'>" + $user_name.attr("data-msg") + "</span>");
} else {
user_name_bValid = true;
$user_name.removeAttr("style").next("span").remove();
}
contact_form_bValid = contact_form_bValid && user_name_bValid;
if( $user_email.val() === "" || email_checkRegexp( $user_email , emailRegex) == false ) {
user_email_bValid = false;
69
$user_email.next("span").remove();
$user_email.attr("style", $error_border).after("<span class='error'>" + $user_email.attr("data-msg") + "</span>");
} else {
user_email_bValid = true;
$user_email.removeAttr("style").next("span").remove();
}
contact_form_bValid = contact_form_bValid && user_email_bValid;
if( $email_subject.val() === "" ) {
user_email_subject_bValid = false;
$email_subject.next("span").remove();
$email_subject.attr("style", $error_border).after("<span class='error'>" + $email_subject.attr("data-msg") + "</span>");
} else {
user_email_subject_bValid = true;
$email_subject.removeAttr("style").next("span").remove();
}
contact_form_bValid = contact_form_bValid && user_email_subject_bValid;
if( $email_message.val() === "" ) {
user_email_message_bValid = false;
$email_message.next("span").remove();
$email_message.attr("style", $error_border).after("<span class='error'>" + $email_message.attr("data-msg") + "</span>");
} else {
user_email_message_bValid = true;
$email_message.removeAttr("style").next("span").remove();
}
contact_form_bValid = contact_form_bValid && user_email_message_bValid;
if ( contact_form_bValid === true ) {
$all_fields.attr("disabled", "disabled");
$contact_submit_btn.after("<span class='form_msg'>Please wait ....</span>").attr("disabled","disabled");
$.ajax({
url: "contact_email.php",
type: 'POST',
dataType: 'JSON',
data: {
safety_key: 'dynatf',
user_name: $user_name.val(),
user_email: $user_email.val(),
email_subject: $email_subject.val(),
email_message: $email_message.val()
},
success: function (data) {
if ( data.status === 1) {
$contact_submit_btn.next("span").remove();
$contact_submit_btn.after("<span class='form_msg'>" + data.msg + "</span>");
setTimeout(function(){
$all_fields.removeAttr("disabled").val("");
$contact_submit_btn.next("span").slideUp('slow',function(){
$(this).remove();
$contact_submit_btn.removeAttr("disabled");
});
},3000)
} else {
$all_fields.removeAttr("disabled");
}
},
error: function (xhr, textStatus, e) {
alert("Email can not be sent. Please try again.");
return;
}
});
}
return false;
})
}
//WoW Animation.
animations();
//One Page Scrolling.
smooth_scrolling();
// BACK TO TOP BUTTON.
if ($('#backTop').length === 1) {
$('#backTop').backTop({
70
'theme': 'custom'
});
}
// PRELOADER
$(window).on("load", function () {
$("#preloader").fadeOut(500);
});
});
!function (t) {
function a() {
t.ajax({url: g, cache: !1}).done(function (t) {
u.html('<div class="vbox-inline">' + t + "</div>"), l(!0)
}).fail(function () {
u.html('<div class="vbox-inline"><p>Error retrieving contents, please retry</div>'), l(!0)
})
}
function e() {
u.html('<iframe class="venoframe" src="' + g + '"></iframe>'), l()
}
function o(t) {
var a = g.split("/"), e = a[a.length - 1], o = t ? "?autoplay=1" : "";
u.html('<iframe class="venoframe" webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder="0" src="//player.vimeo.com/video/' + e +
o + '"></iframe>'), l()
}
function i(t) {
var a = g.split("/"), e = a[a.length - 1], o = t ? "?autoplay=1" : "";
u.html('<iframe class="venoframe" webkitallowfullscreen mozallowfullscreen allowfullscreen src="//www.youtube.com/embed/' + e + o +
'"></iframe>'), l()
}
function n() {
u.html('<div class="vbox-inline">' + t(g).html() + "</div>"), l()
}
function r() {
Q = t(".vbox-content").find("img"), Q.one("load", function () {
l()
}).each(function () {
this.complete && t(this).load()
})
}
function l() {
f.html(X), u.find(">:first-child").addClass("figlio"), t(".figlio").css("width", C).css("height", j).css("padding", m).css("background", s), I =
u.outerHeight(), G = t(window).height(), G > I + 80 ? (D = (G - I) / 2, u.css("margin-top", D), u.css("margin-bottom", D)) : (u.css("margin-top", "40px"),
u.css("margin-bottom", "40px")), u.animate({opacity: "1"}, "slow")
}
function d() {
t(".vbox-content").length && (I = u.height(), G = t(window).height(), G > I + 80 ? (D = (G - I) / 2, u.css("margin-top", D), u.css("margin-bottom", D)) :
(u.css("margin-top", "40px"), u.css("margin-bottom", "40px")))
}
var c, s, v, f, m, b, h, u, g, p, x, y, w, k, C, j, q, z, H, D, E, L, P, Q, X, A, B, F, G, I, J, K;
t.fn.extend({venobox: function (l) {
var d = {framewidth: "", frameheight: "", border: "0", bgcolor: "#fff", titleattr: "title", numeratio: !1, infinigall: !1, overlayclose: !0}, D = t.extend(d, l);
return this.each(function () {
var l = t(this);
return l.data("venobox") ? !0 : (l.addClass("vbox-item"), l.data("framewidth", D.framewidth), l.data("frameheight", D.frameheight), l.data("border",
D.border), l.data("bgcolor", D.bgcolor), l.data("numeratio", D.numeratio), l.data("infinigall", D.infinigall), l.data("overlayclose", D.overlayclose),
l.data("venobox", !0), void l.click(function (d) {
function Q() {
A = l.data("gall"), E = l.data("numeratio"), q = l.data("infinigall"), z = t('.vbox-item[data-gall="' + A + '"]'), z.length > 1 && E === !0 ?
(v.html(z.index(l) + 1 + " / " + z.length), v.show()) : v.hide(), B = z.eq(z.index(l) + 1), F = z.eq(z.index(l) - 1), l.attr(D.titleattr) ? (X = l.attr(D.titleattr),
f.show()) : (X = "", f.hide()), z.length > 1 && q === !0 ? (J = !0, K = !0, B.length < 1 && (B = z.eq(0)), z.index(l) < 1 && (F = z.eq(z.index(z.length)))) :
(B.length > 0 ? (t(".vbox-next").css("display", "block"), J = !0) : (t(".vbox-next").css("display", "none"), J = !1), z.index(l) > 0 ? (t(".vbox-
prev").css("display", "block"), K = !0) : (t(".vbox-prev").css("display", "none"), K = !1))
}
function G(t) {
27 === t.keyCode && I()
}
function I() {
71
t("body").removeClass("vbox-open"), t("body").unbind("keydown", G), P.animate({opacity: 0}, 500, function () {
P.remove(), H = !1, l.focus()
})
}
d.stopPropagation(), d.preventDefault(), l = t(this), L = l.data("overlay"), C = l.data("framewidth"), j = l.data("frameheight"), c = l.data("autoplay")
|| !1, m = l.data("border"), s = l.data("bgcolor"), J = !1, K = !1, H = !1, g = l.data("href") || l.attr("href"), w = l.data("css") || "", t("body").addClass("vbox-
open"), b = '<div class="vbox-overlay ' + w + '" style="background:' + L + '"><div class="vbox-preloader">Loading...</div><div class="vbox-
container"><div class="vbox-content"></div></div><div class="vbox-title"></div><div class="vbox-num">0/0</div><div class="vbox-
close">X</div><div class="vbox-next">next</div><div class="vbox-prev">prev</div></div>', t("body").append(b), P = t(".vbox-overlay"), h = t(".vbox-
container"), u = t(".vbox-content"), v = t(".vbox-num"), f = t(".vbox-title"), u.html(""), u.css("opacity", "0"), Q(), P.css("min-height",
t(window).outerHeight()), P.animate({opacity: 1}, 250, function () {
"iframe" == l.data("type") ? e() : "inline" == l.data("type") ? n() : "ajax" == l.data("type") ? a() : "vimeo" == l.data("type") ? o(c) : "youtube" ==
l.data("type") ? i(c) : (u.html('<img src="' + g + '">'), r())
});
var M = {prev: function () {
H || (H = !0, L = F.data("overlay"), C = F.data("framewidth"), j = F.data("frameheight"), m = F.data("border"), s = F.data("bgcolor"), g =
F.data("href") || F.attr("href"), c = F.data("autoplay"), X = F.attr(D.titleattr) ? F.attr(D.titleattr) : "", void 0 === L && (L = ""), u.animate({opacity: 0}, 500,
function () {
P.css("background", L), "iframe" == F.data("type") ? e() : "inline" == F.data("type") ? n() : "ajax" == F.data("type") ? a() : "youtube" ==
F.data("type") ? i(c) : "vimeo" == F.data("type") ? o(c) : (u.html('<img src="' + g + '">'), r()), l = F, Q(), H = !1
}))
}, next: function () {
H || (H = !0, L = B.data("overlay"), C = B.data("framewidth"), j = B.data("frameheight"), m = B.data("border"), s = B.data("bgcolor"), g =
B.data("href") || B.attr("href"), c = B.data("autoplay"), X = B.attr(D.titleattr) ? B.attr(D.titleattr) : "", void 0 === L && (L = ""), u.animate({opacity: 0}, 500,
function () {
P.css("background", L), "iframe" == B.data("type") ? e() : "inline" == B.data("type") ? n() : "ajax" == B.data("type") ? a() : "youtube" ==
B.data("type") ? i(c) : "vimeo" == B.data("type") ? o(c) : (u.html('<img src="' + g + '">'), r()), l = B, Q(), H = !1
}))
}};
t("body").keydown(function (t) {
37 == t.keyCode && 1 == K && M.prev(), 39 == t.keyCode && 1 == J && M.next()
}), t(".vbox-prev").click(function () {
M.prev()
}), t(".vbox-next").click(function () {
M.next()
});
var N = ".vbox-close, .vbox-overlay";
return l.data("overlayclose") || (N = ".vbox-close"), t(N).click(function (a) {
p = ".figlio", y = ".vbox-prev", x = ".vbox-next", k = ".figlio *", t(a.target).is(p) || t(a.target).is(x) || t(a.target).is(y) || t(a.target).is(k) || I()
}), t("body").keydown(G), !1
}))
})
}}), t(window).resize(function () {
d()
})
}(jQuery);
72
Appendix D
HTML and PHP Code
<?php include "header.php"; ?>

<style>
.top-head{
background-image:url(images/back.jpg);
margin-top: -51px;
position: relative;
height: 450px;
padding-top: 200px;
background-size: cover;
background-position-x: 50%;
background-color: #333;
}
.about-content {
padding-top: 60px;
}
.about-container {
width: 55%;
margin: 0 auto;
}
.about-content ul li {
list-style-type: square;
}
.about-content li {
list-style-type: square;
font-size: 20px;
margin-left: 40px;
}
h2.about-title {
z-index: 999999;
color: #fff;
text-align: center;
font-size: 42px;
}
::marker {
color: #1a8557;
font-size: 24px;
}
</style>
<div class="about section">
<div class="col-md-12 col-sm-12" style="padding:0px">
<div class="top-head">
<h2 class="about-title">ABOUT PETCARE</h2>
</div>
</div>
<div class="about-container">
<div class="row">

<div class="col-md-12 col-sm-12">
<div class="about-content">
<p>Whether you need in-home dog boarding, pet sitting, dog walking, or day care, Petcare connects pet parents with pet care providers who’ll treat their
pets like family.
<br>
Petcare sitters are your rainy-day-dog-walkers. Your every-day-belly-rubbers. Your tug-of-war players. Your middle-of-the-night-pee-breakers. Because we
get it—your pet is family. And when you can’t be there, you can trust us to keep your pet happy, healthy, and sweet as ever.
<br>
But it’s not just about love of pets. Petcare is also an award-winning technology business committed to making pet care safe, easy, and affordable so that
everyone can experience the unconditional love of a pet<p>
<h3 style="text-align:center"><span style="font-size:24px"><strong>5-Star Sitters in Your Neighborhood</strong></span></h3>
<p style="text-align:center">Discover local pet sitters and dog walkers, read reviews, and find the right fit for you. Petcare offers:</p>
73
<div class="col-md-6">
<ul>
<li>Background or identity checks</li>
<li>The Petcare Guarantee</li>
<li>Reservation protection</li>
<li>24/7 support</li>
<li>Secure online payments</li>
</ul>
</div>
<ul>
<li>Ongoing sitter education</li>
<li>Photo updates</li>
<li>Verified reviews</li>
<li>Trust and safety experts</li>
</ul>
</div>
</div>
</div>

</div>
</div>
<?php include "footer.php"; ?>
<?php
include "header.php";
?>
<main role="main" id="base-content" class="rover-main-content-wrap js-rover-main-content-wrap content " data-qa-id="base-content">
<div class="container">
</div>
<div id="react-survey-modal-app"></div>
<div class="container-fluid bg-dark padding-top-x4">
<div class="container margin-bottom-x4">
<div class="row">
<div class="rover-alert-warn alert">
Please <a href="profile.php">complete your sitter profile</a>.

</div>
</div>
</div>
<div class="row">
<div class="rover-widget-block" data-qa-id="account-widgets-account-info">
<div class="rover-widget-block-inner-wide">
<h5 class="rover-widget-title bordered-bottom" data-qa-id="account-widgets-account-info-title">
<i class="rover-icon rover-icon-account-info"></i>
Account Info
</h5>
<div class="rover-widget-body">
<div class="col-xs-6 margin-bottom-x2">
<img
src="admin/userimg/<?php echo $user_result['img']; ?>"
class="img-responsive img-rounded"
alt="<?php echo $user_result['name']; ?>."
>
</div>
<div class="col-xs-6">
<ul class="list-unstyled section-links">
<li>
<strong class="text-small"><?php echo $user_result['name']; ?></strong>
74
</li>
<li>
<a href="update-user.php" data-qa-id="account-widgets-account-info-update">Update</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="rover-widget-block">
<div class="rover-widget-block-inner-wide">
<h5 class="rover-widget-title bordered-bottom">
<i class="rover-icon rover-icon-sitter-traveling"></i>
Booking
</h5>
<div class="rover-widget-body">
<div class="col-xs-12">
<ul class="list-unstyled section-links">
<li>
<a href="user-booking.php">Booking Detail</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
</div>
</div>
</div>
<div id="react-app"></div>
</main>


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

<script src="js/wow.js"></script>
<script src="js/backtotop.js"></script>

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

<script src="js/waypoints-sticky.js"></script>


<script src="js/counter-strip.js"></script>
<script src="js/gallery.js"></script>
<script src="js/custom-scripts.js"></script>
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=333504350007141';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
<?php
session_start();
$userid = $_SESSION['user_id'];
75
if (isset($_POST['sub3'])) {
$date = $_POST['date'];
$time = $_POST['time'];
$s1="insert into `calander`(`date`,`time`,`sitter_id`,`booked_by`,`status`)VALUES('$date','$time','$userid','','')";
$q1=mysqli_query($con,$s1);
$regid=mysqli_insert_id($con);
echo "<script>alert('Calander Update Successfuly')</script>";
echo "<script> location.href='calander.php' </script>";
/*echo "<script> location.href=''</script>";*/
}
//on submit insert data
?>
<body>
<div id="preloader" style="display: none;"> <span class="margin-bottom"><img
src="images/loader.gif" alt=""></span> </div>



<section class="section-appointment">
<div class="container wow fadeInUp" style="visibility: hidden; animation-name: none;">
<div class="row">

<div class="col-md-10 col-md-offset-1 mt-30">
<div class=" clearfix mb-30 ">

<div class="join-heading text-heading mb-20 ">Booking Calander Detail</div>
<div class="tab" role="tabpanel">
<div class="panel panel-default">
<div class="panel-body">

<div class="tab-content tabs">

<div role="tabpanel" class="tab-pane fade in active" id="Section1">

<div class="table">
<div class="col-md-2 booking-hd">Date </div>
<div class="col-md-2 booking-hd">Time </div>
<div class="col-md-2 booking-hd">Sitter Name </div>
<div class="col-md-2 booking-hd">Mobile </div>
<div class="col-md-3 booking-hd">Status </div>
<?php
$query=mysqli_query($con,"select * from sitter_booking as t1 left join registration as t2 on t1.userid=t2.admin_id left join calander as t3 on
t3.calander_id=t1.calid where t1.userid='$user_id'");
while($row=mysqli_fetch_array($query)){
$sitterid=sittername($row['sitter_id'],$con);
?>
<div class="col-md-2 booking-detail"><?php echo $row['date']; ?> </div>
<div class="col-md-2 booking-detail"><?php echo $row['time']; ?> </div>
<div class="col-md-2 booking-detail"><?php if($sitterid==""){ echo '--'; }else{ echo $sitterid; }?> </div>
<div class="col-md-2 booking-detail"><?php if($row['contact']==""){ echo '--'; }else{ echo $row['contact']; }?> </div>
<div class="col-md-3 booking-detail"><?php
if($row['booking_status']==""){ echo '--';
}else{
if($row['booking_status']=='confirm'){
echo 'Confirmed by Sitter'; }else if($row['booking_status']=='Denied'){ echo 'Denied by
Sitter'; }else{ echo $row['booking_status']; }
}
?>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
76

</section>




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

<script src="js/wow.js"></script>
<script src="js/backtotop.js"></script>

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

<script src="js/waypoints-sticky.js"></script>


<script src="js/counter-strip.js"></script>
<script src="js/gallery.js"></script>
<script src="js/custom-scripts.js"></script>
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10&appId=333504350007141';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
<?php
error_reporting(0);
$userdetail=mysqli_fetch_array(mysqli_query($con,"select * from `registration` where àdmin_id`='$user_id'"));
$userdetail['name'];
include "connection.php";
$id=$_GET['id'];
if (isset($_POST['book'])) {
$sid = $_POST['sid'];
if($user_id==""){
$_SESSION['page']='sitter-profile.php?id='.$sid;
echo "<script> location.href='login.php' </script>";
}
$calid = $_POST['calid'];
$count=count($calid);
for($i=0;$i<$count;$i++){
$s1="insert into `sitter_booking`(`calid`,ùserid`,`booking_date`)VALUES('$calid[$i]','$user_id',now())";
$q1=mysqli_query($con,$s1);
$regid=mysqli_insert_id($con);
$caldel=mysqli_fetch_array(mysqli_query($con,"select * from `calander` where `calander_id`='$calid[$i]'"));
$sitter=mysqli_fetch_array(mysqli_query($con,"select * from `registration` where admin_id=$sid"));
$to = $sitter['email'];
$msgg="Dear Sitter ,
".$userdetail['name']."
have booked your Availability for
Date : ". date('M d , Y',strtotime($caldel['date']))."
Time: ". date('h:i a',strtotime($caldel['time'])).
" Please Login in the panel and Confirm or Reject it.
Thanks
----------
Petcare
*this email is only for Confidential Password delivery. Please do not revert back.";
$subject = "New Booking";
77
$txt = $msgg;
$headers = "From:Pet care<info@gsoftware.website>";
mail($to,$subject,$txt,$headers);
}
echo "<script>alert('Calander Update Successfuly')</script>";
echo "<script> location.href='sitter-profile.php?id=$sid' </script>";
/*echo "<script> location.href=''</script>";*/
}
$sql=mysqli_query($con,"select * from add_sitter as t1 left join user_service as t2 on t1.reg_id=t2.user_id where reg_id=$id");
$num1=mysqli_fetch_array($sql);
?>
<div class="container-1">
<div class="bg-white">
<div class="container hero-container">
<div class="member-profile-hero-wrap js-member-profile-hero-wrap">
<div class="member-profile-hero-row row">
<div class="col-md-4 text-center js-shared-gallery-trigger js-provider-picture-wrap" data-gallery-index="0" data-qa-id="member-profile-main-image">
<img class="img-circle provider-thumb" alt="<?php echo $num1['name']; ?>" src="admin/userimg/<?php echo $num1['img']; ?>">
</div>
<div class="col-md-6 member-summary-col">
<div class="provider-details-wrap">
<h3 class="provider-name media-heading nomargin">
<strong><span data-qa-id="member-profile-text-sitter-name" ><?php echo $num1['name']; ?></span></strong>
</h3>
<div class="provider-neighborhood">
<div class="h5">
<a href="#"><?php echo $num1['address']; ?></a>
</div>
</div>
</div>
<div class="contact-wrap">
<div class="inline-block margin-right-x3">
<i class="rover-icon rover-icon-lets-chat"></i>
<span class="text-muted">Response Rate:</span>
<span class="lowercase">
<strong>100%</strong>
</span>
</div>
<div class="inline-block">
<i class="rover-icon rover-icon-break-time"></i>
<span class="text-muted">Response Time:</span>
<span class="lowercase">
<strong>A few minutes</strong>
</span>
</div>
</div>
</div>
<?php if($id==$user_id & $user_type=='sitter'){ ?>
<style>
.col-md-2.profile-link {
padding: 0 21px;
border-left: 1px solid#1a8557 !important;
}
.update-links {
padding: 22px 0;
font-size: 18px;
}
</style>
<div class="col-md-2 profile-link">
<div class="update-links">
<ul>
<li><a href="update-sitter.php">Update Profile</a></li>
<li><a href="services.php">Update services</a></li>
<li><a href="calander.php">Update Availability</a></li>
<li><a href="booking_detail.php">Booking Detail</a></li>
</ul>
</div>
</div>
<?php } ?>
78
</div>
</div>
</div>
</div>
<div class="bg-white">
<div class="provider-services container padding-top-x8">
<div class="row">

<div class="col-md-4 leftside">
<div class="services-card">
<div class="rates-summary-wrapper">
<div class="fluid-row v-bottom">
<div class="fluid-col col-xs-6 padding-h-x0">
<h2 class="services-title margin-bottom-x0">Services</h2>
</div>
</div>
<div>
<?php
$sql3=mysqli_query($con,"select * from user_service as t1 left join services as t2 on t1.service_id=t2.service_id where ùser_id`=$id");
while($num3=mysqli_fetch_array($sql3)){
?>
<div class="service-rate-summary margin-bottom-x2">
<div class="title-row fluid-row v-center">
<div class="fluid-col">
<h3 class="h5 margin-v-x0">
<?php echo $num3['service_name']; ?>
</h3>
</div>
<div class="fluid-col text-right">
<div class="h2 margin-v-x0">
<strong>
<span data-qa-id="member-pages-rates-overnight-boarding" itemprop="priceRange">
$<?php echo $num3['price']; ?>
</span>
</strong>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<section class="dog-preferences profile-section">
<a class="profile-section-anchor" id=""></a>
<h2 class="profile-section-title h4 text-center-xs text-primary margin-top-x0 margin-bottom-x4 ">
<?php echo $num1['name']; ?> can host
<div class="section-toggle"
data-event-profile-section="sitting-preferences">
<i class="rover-icon rover-icon-stepper-plus"></i>
<i class="rover-icon rover-icon-stepper-minus"></i>
</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-12 margin-bottom-x3">
<div class="flex flex-just-start flex-wrap">
<?php if($num1['dog_size0_15']=='yes'){ ?>
<div class="flex-align-self-end col-xs-4 text-center"
title="Accepts dogs 0-15 lbs">
<div>
<img src="images/dog1.png" width="30px" />
</div>
<div class="large-text">0-15</div>
<div class="text-muted small-text" >lbs</div>
</div>
<?php } if($num1['dog_size16_40']=='yes'){?>
<div>
79
</div>
</div>
<?php } if($num1['dog_size41_100']=='yes'){?>
<div>
</div>
</div>
<?php } ?>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-12 additional-preferences">
<ul class="list-unstyled">
<li>
</li>
</ul>
</div>
</div>
</section>
<section class="dog-preferences profile-section">
<?php echo $num1['name']; ?> can watch in your home
data-event-profile-section="sitting-preferences">
</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-12 margin-bottom-x3">
<div class="flex flex-just-start flex-wrap">
<?php if($num1['watch_dog_size0_15']=='yes'){?>
<div>
</div>
</div>
<?php } if($num1['watch_dog_size16_40']=='yes'){?>
<div>
</div>
</div>
<?php } if($num1['watch_dog_size41_100']=='yes'){?>
<div>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
<form method="post" target="">
<div class="section-row title-row">
80
<div class="section-col-main">
<div class="margin-top-x0 margin-bottom-x6 text-center-xs">
<div class="title">
<?php if($id!=$user_id){ ?>
<h4> Select Availble Time </h4>
<?php }else{ ?>
<h4> Your Availability </h4>

<?php } ?>
</div>
<style>
.col-md-4.text-center.js-shared-gallery-trigger.js-provider-picture-wrap img {
width: 50%;
height: 165px;
}
.col-md-8.services-details {
padding-left: 40px;
text-align: justify;
}
.fluid-row.v-bottom, .fluid-row.v-center {
height: 100%;
}
.col-md-4.leftside {
box-shadow: 0 0 8px -5px #000;
}
.profile-section-title p {
font-size: 14px;
}
.title {
font-size: 18px;
}
.services-title.margin-bottom-x0 {
font-size: 24px;
width: 70%;
border-bottom: 4px solid #1a8557;
color: #1a8557;
/* text-align: center; */
}
input.chk-btn {
display: none;
}
input.chk-btn + label {
border: 1px solid #f3efef;
background: ghoswhite;
padding: 1px 8px;
cursor: pointer;
border-radius: 0px;
font-size: 14px;
}
input.chk-btn:not(:checked) + label:hover {
box-shadow: 0px 1px 3px;
}
input.chk-btn + label:active,
input.chk-btn:checked + label {
box-shadow: 0px 0px 3px inset;
background: #eee;
}
input[type="submit"] {
background: #000;
border: none;
width: 140px;
height: 30px;
}
.col-md-2.date {
font-size: 18px;
padding: 0px 0;
font-weight:700;
81
color: #1a8557;
}
.col-md-3.time {
padding: 0px !important;
margin: 0px !important;
}
form {
width: 100%;
height: auto;
float: left;
background: #1a8557;
padding: 10px;
color: #fff;
text-align: center;
}
.h2.margin-v-x0 {
font-size: 16px;
}
h3.h5.margin-v-x0 {
font-size: 15px;
}
h2.profile-section-title.h4.text-center-xs.text-primary.margin-top-x0.margin-bottom-x4 {
font-size: 16px;
}
</style>
<?php
$todaydate=date('Y-m-d');
$sqld=mysqli_query($con,"select * from calander where `sitter_id`='$id' and `status`='0' and date>='$todaydate' group by date");
while($numd=mysqli_fetch_array($sqld)){
$datee=$numd['date'];?>
<div class="col-md-4 date">
<?php echo date('M d,Y',strtotime($datee)) ?> : </div>
<?php $sqlt=mysqli_query($con,"select * from calander where `sitter_id`='$id' and `date`='$datee' and `status`='0'");
$countcal=0;
while($numt=mysqli_fetch_array($sqlt)){
$timeid=$numt['calander_id'];
$countcal++;
?>
<div class="col-md-3 time">
<input type="hidden" name="sid" value="<?php echo $id; ?>" />
<input type="checkbox" id='<?php echo $timeid ?>' name="calid[]" value="<?php echo $timeid ?>" class='chk-btn' />
<label for='<?php echo $timeid; ?>'><?php echo date('h:i a',strtotime( $numt['time'])); ?></label>
</div>
<?php }?>
<div class="col-md-12"> <br /> </div>
<?php } ?>
</div>
<?php if($id!=$user_id and $countcal>0 ){ ?>
<input type="submit" name="book" value="Book Now" />
<?php } ?>
</div>
</div>
</div>
</form>
</section>
</div>

<div class="col-md-8 services-details ">
<div class="col-md-12"> <br /> </div>
<h3 class="margin-top-x0 margin-bottom-x6 text-center-xs profile-section-title">
<div class="title">
About <?php echo $num1['name']; ?>
</div>
</h3>
</div>
</div>
82
<div class="section-row content-row margin-bottom-x4">
<div class="profile-section-title"><p><?php echo $num1['about']; ?></p></div>
</div>
</div>
<section class=" profile-section">
<div class="section-row">
About <?php echo $num1['name']; ?>'s Home
data-event-profile-section="">
</div>
</h2>
</div>
</div>
<div class="section-col-meta text-center-xs">
</div>
<div class="row margin-bottom-x4">
<div class="col-sm-6">
<?php if($num1['has_house']=='yes'){?>
<div class="provider-attribute media">
<div class="pull-left icon">
<i class="rover-icon rover-icon-thin-check"></i>
</div>
<div class="media-body">
<?php if($num1['has_house']=='yes'){ echo "Lives in an House"; } ?>
</div>
</div>
<?php } ?>
<?php if($num1['has_fanced_yard']=='yes'){ ?>
</div>
<?php if($num1['has_fanced_yard']=='yes'){ echo "Have a Yard"; }else{ echo "Does Not Have a Yard"; } ?>
</div>
</div>
<?php } ?>
<?php if($num1['has_no_child']=='yes'){ ?>
</div>
<?php if($num1['has_no_child']=='yes'){ echo "No Children Present"; }else{ echo "Have Children"; } ?>
</div>
</div>
<?php } ?>
<?php if($num1['total_pet']=='0'){ ?>
</div>
<?php if($num1['total_pet']=='0'){ echo "No Own Pets"; }else{ echo "Has ".$num1['total_pet']." Dogs"; } ?>
</div>
</div>
<?php } ?>
<?php if($num1['non_smoking_home']=='yes'){ ?>
</div>
83
<?php if($num1['non_smoking_home']=='yes'){ echo "Non-Smoking Household"; }else{ echo "Smoking Household"; } ?>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</section>
<h3 class="margin-top-x0 margin-bottom-x6 text-center-xs profile-section-title">
<div class="title">
When <?php echo $num1['name']; ?> watches your pet
</div>
<div class="section-toggle" data-event-profile-section="members-sitting-type">
</div>
</h3>
</div>
</div>

<section class=" profile-section">
In <?php echo $num1['name']; ?>'s Home
data-event-profile-section="">
</div>
</h2>
</div>
</div>
<div class="section-col-meta text-center-xs">
</div>
<div class="row margin-bottom-x4">
<div class="col-sm-6">
<?php if($num1['dogs_allowed_on_furniture']=='yes'){?>
</div>
<?php if($num1['dogs_allowed_on_furniture']=='yes'){ echo "Dogs Allowed On Furniture"; }else{ echo "Dogs Does not Allowed On Furniture"; } ?>
</div>
</div>
<?php } ?>
<?php if($num1['dogs_allowed_on_bed']=='yes'){?>
</div>
<?php if($num1['dogs_allowed_on_bed']=='yes'){ echo "Dogs Allowed On Bed"; }else{ echo "Dogs Does not Allowed On Bed"; } ?
</div>
</div>
<?php } ?>
84
</div>
Potty Breaks Every 2-4 Hours
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>

</div>
</div>
</div>
</div>
85

California State University, Northridge

Uploaded by

Copyright:

Available Formats

You might also like

California State University, Northridge

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

California State University, Northridge

Uploaded by

Copyright:

Available Formats

CALIFORNIA STATE UNIVERSITY, NORTHRIDGE

Pet Care Web Application

A graduate project submitted in partial fulfillment of the requirements

for the degree of Master of Science in Computer Engineering

Suraj Ramesh Mahamuni

Dr. Richard Covington Date

Professor Bradley Jackson Date

Dr. Xiaojun Geng, Chair Date

California State University, Northridge

List of Figures ................................................................................................................................ v

Chapter 1: Introduction ................................................................................................................... 1

Chapter 2: Tools Description .......................................................................................................... 4

2.1 HTML5 ............................................................................................................. ………..4

2.2 CSS3 ............................................................................................................................... 6

2.3 JavaScript ........................................................................................................................ 9

2.4 AngularJS ...................................................................................................................... 10

2.5 MySQL ......................................................................................................................... 12

2.6 Atom IDE ...................................................................................................................... 14

3.1. Planning ........................................................................................................................ 16

3.2 Requirement Analysis ................................................................................................... 16

3.3 Software Designing and Prototyping ............................................................................ 17

Chapter 4: Problems and Solutions ............................................................................................... 23

4.1 Web Design ................................................................................................................... 23

4.2 CSS Float Property ....................................................................................................... 23

4.4 Learning JavaScript……………………………………………………………………24

4.5 Choosing Right JavaScript Framework………………………………………………..25

4.6 Choosing Right Database……………………………………………………………...26

Chapter 5: Future Scope………………………………………………………………………….29

Figure 2.1 HTML Example 5

Pet Care Web Application

Master of Science in Computer Engineering

proximity, and experience into consideration.

accomplished, then the website can consequently serve as a marketing tool.

inform and engage a target audience or consumer [9].

point describes in detail how software is created.

are HTML5, CSS3, JavaScript, AngularJS, MySQL, and Atom (IDE).

and all the text present on the web page.

<title> Page Title </title>

<p> This tag is used for paragraph.</p>

and ending of HTML document.

Figure 2.1 HTML Example

Figure 2.2 HTML Inspection

page shows the HTML code needed to create the page.

different elements within the same website.

Here is an example code for body, h1 (header), p (paragraph).

using different properties, we can format our HTML page as we want.

functionality of any button that is usually seen on web pages.

function of the button after we click it (Appendix C).

such as getting feedback from the user we need to use JavaScript.

gathered by JavaScript and appropriate results are shown.

their profile, availability time, and to confirm availability.

loading content that mimics a desktop application.

to click refresh button.

Google Maps API are used to meet this task.

It offers benefits like dynamic loading and asynchronous template compilations.

management systems on many platforms and in many applications [8].

a component in a WAMP-based web application or as a standalone database server. MySQL is simple

/!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT /;

/soical icon footer/