Scribd
Upload
85 views23 pages

Digital Assignment - 1 Mobile Application Development (Ite1016) Submitted To-Prof. Bhavani S

The document is a submission for a digital assignment on developing a mobile application. It includes screenshots and code for a website called VITcafe built using PhoneGap for the ITE1016 Mobile Application Development course. The website includes homepage, menu, and about pages. The menu page allows scrolling between different menu categories (food, drinks, dessert) by clicking photos. The code provided is for the homepage and menu pages, including CSS for formatting and jQuery for photo slideshows. It was created by Shikher Srivastava and the GitHub link for the project is also included.

Uploaded by

Shikher Srivastava
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
85 views23 pages

Digital Assignment - 1 Mobile Application Development (Ite1016) Submitted To-Prof. Bhavani S

The document is a submission for a digital assignment on developing a mobile application. It includes screenshots and code for a website called VITcafe built using PhoneGap for the ITE1016 Mobile Application Development course. The website includes homepage, menu, and about pages. The menu page allows scrolling between different menu categories (food, drinks, dessert) by clicking photos. The code provided is for the homepage and menu pages, including CSS for formatting and jQuery for photo slideshows. It was created by Shikher Srivastava and the GitHub link for the project is also included.

Uploaded by

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

DIGITAL ASSIGNMENT – 1

MOBILE APPLICATION DEVELOPMENT (ITE1016)

SUBMITTED TO- PROF. BHAVANI S

SUBMITTED BY

15BCE0882 SHIKHER SRIVASTAVA

TOPIC-

(VITcafe website)

MY GITHUB LINK FOR THE WEBSITE(DA)-

https://github.com/shikher7/DA1_VITcafe_phonegap_webapp

SCREENSHOTS AND CODE ATTACHED BELOW


DESKTOP VIEW OF WEBSITE

HOME PAGE

MENU PAGE

(CLICK ANY OF 3 PHOTOS TO SCROLL TO THAT MENU)


AFTER CLICKING ANY ONE OF THE PHOTOS

ABOUT PAGE
MOBILE (USING PHONEGAP) VIEW OF WEBSITE

HOME PAGE

MENU PAGE

(CLICK ANY OF 3 PHOTOS TO SCROLL TO THAT MENU)


AFTER CLICKING ANY ONE OF THE PHOTOS

ABOUT PAGE
CODE

INDEX.HTML

<html>
<!-- CREATED BY SHIKHER SRIVASTAVA (15BCE0882) FOR DIGITAL ASSIGNMENT 1
(MOBILE APPLICATION DEVELOPMENT)-->
<head>
<meta name="viewport" content="width=device-width">

<title>
SHIKHER
</title>
<style>
a:visited,a:active,a
{
text-decoration: none;
color: white;
}
.select-menu
{
display: none;
padding: 20px;
}
select
{
padding: 10px;
width: 350px;
border-radius: 5px;
}
body
{
width: 100%;
height: 100%;
font-family: arial;
margin: 0;
padding: 0;
background: url(images/background.jpg);
}
.menu
{
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
display: flex;
align-content: center;
justify-content: center;
}
.menu-item
{
display: flex;
justify-content: center;
align-content: center;
padding: 20px;
color: white;
}
.main-content
{
padding-top: 60px;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
width: 100%;
height: calc(100% - 60px);
}
.box
{
display: flex;
background-color: rgba(125,125,125,0.5);
min-width:80%;
height: 500px;
border-radius: 20px;

}
.image1 , .image2
{
width:100%;

height: 100%;

}
.image1
{
background-image: url(images/logo.jpg);
background-size: 100% 100%;
border-radius: 20px 0 0 20px;
}
.image2
{

background-image: url(images/1.jpg);
background-size: 100% 100%;
transition-duration: 1s;
border-radius: 0px 20px 20px 0px;
}
@media screen and (max-width: 992px)
{
.menu-item
{
display: none;
}
.select-menu
{
display: flex;
}

.box
{
flex-direction: column;
}
.image1,.image2
{
border-radius: 0;
}
.image1
{
border-radius: 20px 20px 0 0;
}
.image2
{
border-radius: 0px 0px 20px 20px;
}
}

</style>
</head>
<body>
<div class="menu">
<div class="select-menu">

<!-- JAVASCRIPT FOR MENU BAR -->

<select name="menu"
onChange="window.document.location.href=this.options[this.selectedIndex].value
;">
<option value="index.html">Home</option>
<option value="menu.html">Menu</option>
<option value="about.html">About</option>
</select>
</div>

<div class="menu-item"><a href="index.html">HOME</a></div>


<div class="menu-item"><a href="menu.html">MENU</a></div>
<div class="menu-item"><a href="about.html">ABOUT</a></div>
</div>
<div class="main-content">
<div class="box" >
<div class="image1"></div>
<div class="image2"></div>
</div>
</div>

<!-- JQUERY CODE FOR PHOTO SLIDESHOW -->

<script src="js/jquery.js" type="text/javascript" charset="utf-


8"></script>
<script>
$(document).ready(function(){
var arr=["images/1.jpg","images/2.jpg","images/3.jpg"];
var i=0;
setInterval(function(){
$(".image2").css("background-
image","url("+arr[i]+")");
i=i+1;
i=i%(arr.length);
},3000);
});
$(document).ready(function(){
$('body').slideDown();
});
</script>
</body>
</html>

MENU.HTML

<html>
<!-- CREATED BY SHIKHER SRIVASTAVA (15BCE0882) FOR DIGITAL ASSIGNMENT 1
(MOBILE APPLICATION DEVELOPMENT)-->
<head>
<meta name="viewport" content="width=device-width">

<title>
SHIKHER
</title>
<style>
#fixedbutton {
position: fixed;
bottom: 0px;
right: 0px;
width: 150px;
height: 110px;
}
a:visited,a:active,a
{
text-decoration: none;
color: white;
}
.select-menu_main
{
display: none;
padding: 20px;
}
select
{
padding: 10px;
width: 350px;
border-radius: 5px;
}
body
{
width: 100%;
height: 100%;
font-family: arial;
margin: 0;
padding: 0;
background: url(images/background.jpg);
}
.menu_main
{
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
display: flex;
align-content: center;
justify-content: center;
}
.menu_main-item
{
display: flex;
justify-content: center;
align-content: center;
padding: 20px;
color: white;
}
.main-content
{
padding-top: 60px;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
width: 100%;
min-height: calc(100% - 60px);
}
.box
{
display: flex;
background-color: rgba(125,125,125,0.5);
min-width:80%;
height: 500px;
border-radius: 20px;

}
.image1 , .image2, .image3, .image4
{
width:100%;
opacity: 1;
height: 100%;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;

}
.image1:hover , .image2:hover, .image3:hover, .image4:hover
{
opacity: .5;

}
.image1
{
background-image: url(images/food.jpg);
background-size: 100% 100%;
border-radius: 20px 0 0 20px;
}
.image2
{

background-image: url(images/drinks.jpg);
background-size: 100% 100%;
transition-duration: 1s;
border-radius: 0px 0px 0px 0px;
}
.image3
{
background-image: url(images/desert.jpg);
background-size: 100% 100%;
transition-duration: 1s;
border-radius: 0px 20px 20px 0px;
}
@media screen and (max-width: 992px)
{
.menu_main-item
{
display: none;
}
.select-menu_main
{
display: flex;
}

.box
{
flex-direction: column;
}
.image1,.image2
{
border-radius: 0;
}
.image1
{
border-radius: 20px 20px 0 0;
}
.image2
{
border-radius: 0px 0px 0px 0px;
}
.image3
{
border-radius: 0px 0px 20px 20px;
}
}

</style>
<link rel="stylesheet" href="css/styles.css">
<style>
.menu
{
padding-top: 0 !important;
}
.main .container .container-menu
{
background-color: white;
}

</style>
</head>
<body id="TOP">
<div class="menu_main">
<div class="select-menu_main">

<!-- JAVASCRIPT FOR menu_main BAR -->

<select name="menu_main"
onChange="window.document.location.href=this.options[this.selectedIndex].value
;">
<option value="menu.html">Menu</option>
<option value="index.html">Home</option>
<option value="about.html">About</option>
</select>
</div>

<div class="menu_main-item"><a href="index.html">Home</a></div>


<div class="menu_main-item"><a href="menu.html">Menu</a></div>
<div class="menu_main-item"><a href="about.html">About</a></div>
</div>
<div class="main-content" >
<div class="box" >
<div class="image1" id="FOOD_PHOTO"></div>
<div class="image2" id="COFFEE_PHOTO"></div>
<div class="image3" id="DESSERT_PHOTO"></div>
</div>
</div>
<div id="floating_button">
<img id="fixedbutton" class="image4"src="images/TOP.png">
</div>

<div class="main-content">
<section class="main">
<section class="menu">
<div class="container">
<h3 class="menu_type" id="FOOD">Food Menu</h3>
<div class="container-menu">
<div class="container-menu2">
<article>
<p class="category">South Indian</p>
<div class="element">
<p class="name">Masala Dosa</p>
<p class="price">₹50</p>
</div>
<div class="element">
<p class="name">Idli Sambhar</p>
<p class="price">₹40</p>
</div>
<div class="element">
<p class="name">Sabhar Vada</p>
<p class="price">₹30</p>
</div>
<div class="element">
<p class="name">Uppam</p>
<p class="price">₹50</p>
</div>
</article>
<article>
<p class="category"> &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;International &nbsp;
&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<div class="element">
<p class="name">Begian Waffle</p>
<p class="price">₹100</p>
</div>
<div class="element">
<p class="name">Caramel
Pancakes</p>
<p class="price">₹100</p>
</div>
<div class="element">
<p class="name">Mexican Pasta</p>
<p class="price">₹150</p>
</div>
<div class="element">
<p class="name">Cheese Burger</p>
<p class="price">₹120</p>
</div>
</article>

</div>
</div>
</div>
</section>
</div>
</div>
<div class="main-content">
<section class="main">
<section class="menu">
<div class="container">
<h3 class="menu_type" id="COFFEE">Coffee
Menu</h3>
<div class="container-menu">
<div class="container-menu2">
<article>
<p class="category">Coffee</p>
<div class="element">
<p class="name">Filter
Coffee</p>
<p class="price">₹40</p>
</div>
<div class="element">
<p class="name">Espresso</p>
<p class="price">₹50</p>
</div>
<div class="element">
<p class="name">Cappuccino</p>
<p class="price">₹70</p>
</div>
<div class="element">
<p class="name">Mocaccino</p>
<p class="price">₹80</p>
</div>
</article>
<article>
<p class="category">Tea
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<div class="element">
<p class="name">Chai</p>
<p class="price">₹30</p>
</div>
<div class="element">
<p class="name">Green Tea</p>
<p class="price">₹40</p>
</div>
<div class="element">
<p class="name">Lemon Tea</p>
<p class="price">₹50</p>
</div>
<div class="element">
<p class="name">Black Tea</p>
<p class="price">₹50</p>
</div>
</article>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="main-content">
<section class="main">
<section class="menu">
<div class="container">
<h3 class="menu_type"
id="DESSERT">Dessert</h3>
<div class="container-menu">
<div class="container-menu2">
<article>
<p class="category">Ice-cream</p>
<div class="element">
<p class="name">Vanilla</p>
<p class="price">₹40</p>
</div>
<div class="element">
<p class="name">Chocolate</p>
<p class="price">₹50</p>
</div>
<div class="element">
<p class="name">Strawberry</p>
<p class="price">₹50</p>
</div>
<div class="element">
<p
class="name">Blackcurrent</p>
<p class="price">₹60</p>
</div>
</article>
<article>
<p class="category">Sweets
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<div class="element">
<p class="name">Rasgulla</p>
<p class="price">₹70</p>
</div>
<div class="element">
<p class="name">Gulab
Jamun</p>
<p class="price">₹80</p>
</div>
<div class="element">
<p class="name">Cheesecake</p>
<p class="price">₹150</p>
</div>
<div class="element">
<p class="name">Lava Cake</p>
<p class="price">₹120</p>
</div>
</article>

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

<!-- JQUERY CODE FOR PHOTO SCROLL TO MENU-->

<script src="js/jquery.js" type="text/javascript" charset="utf-


8"></script>
<script>
$("#FOOD_PHOTO").click(function() {
$('html, body').animate({
scrollTop: $("#FOOD").offset().top
}, 1000);
});
$("#COFFEE_PHOTO").click(function() {
$('html, body').animate({
scrollTop: $("#COFFEE").offset().top
}, 1000);
});
$("#DESSERT_PHOTO").click(function() {
$('html, body').animate({
scrollTop: $("#DESSERT").offset().top
}, 1000);
});
$("#fixedbutton").click(function() {
$('html, body').animate({
scrollTop: $("#TOP").offset().top
}, 1000);
});
</script>

</body>
</html>
ABOUT.HTML

<html>
<!-- CREATED BY SHIKHER SRIVASTAVA (15BCE0882) FOR DIGITAL ASSIGNMENT 1
(MOBILE APPLICATION DEVELOPMENT)-->
<head>
<meta name="viewport" content="width=device-width">

<title>
SHIKHER
</title>
<style>
.accordionWrapper
{

float:left;
width:100%;
box-sizing:border-box;
margin: 0px;
padding: 0 20px;
padding-top:100px;
box-shadow: 0 1.5em 85px 0 rgba(0, 0, 0, 0.2);

}
.accordionItem{
float:left;
display:block;
width:100%;
box-sizing: border-box;
font-family:'Open-sans',Arial,sans-serif;
}
.accordionItemHeading{
cursor:pointer;
margin:0px 0px 10px 0px;
padding:25px 10px;
background:#ce6a24;
color:#fff;
width:100%;
border-radius: 3px;
box-sizing: border-box;
}
.close .accordionItemContent{
height:0px;
transition:height 1s ease-out;
-webkit-transform: scaleY(0);
-o-transform: scaleY(0);
-ms-transform: scaleY(0);
transform: scaleY(0);
float:left;
display:block;

}
.open .accordionItemContent{
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
width: 100%;
margin: 0px 0px 10px 0px;
display:block;
transform: scaleY(1);
transform-origin: top;
transition: transform 0.4s ease;
box-sizing: border-box;
}

.open .accordionItemHeading{
margin:0px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background-color: #e48a4c;
color: #fff;
}

a:visited,a:active,a
{
text-decoration: none;
color: white;
}
.select-menu
{
display: none;
padding: 20px;
}
select
{
padding: 10px;
width: 350px;
border-radius: 5px;
}
body
{
width: 100%;
height: 100%;
font-family: arial;
margin: 0;
padding: 0;
background: url(images/background.jpg);
}
.menu
{
position: fixed;
background-color: rgba(0,0,0,0.5);
width: 100%;
display: flex;
align-content: center;
justify-content: center;
}
.menu-item
{
display: flex;
justify-content: center;
align-content: center;
padding: 20px;
color: white;
}
.main-content
{
padding-top: 60px;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
width: 100%;
height: calc(100% - 60px);
}
.box
{
display: flex;
background-color: rgba(125,125,125,0.5);
min-width:80%;
height: 500px;
border-radius: 20px;

}
.image1 , .image2
{
width:100%;

height: 100%;
}
.image1
{
background-image: url(images/logo.jpg);
background-size: 100% 100%;
border-radius: 20px 0 0 20px;
}
.image2
{

background-image: url(images/1.jpg);
background-size: 100% 100%;
transition-duration: 1s;
border-radius: 0px 20px 20px 0px;
}
@media screen and (max-width: 992px)
{
.menu-item
{
display: none;
}
.select-menu
{
display: flex;
}

.box
{
flex-direction: column;
}
.image1,.image2
{
border-radius: 0;
}
.image1
{
border-radius: 20px 20px 0 0;
}
.image2
{
border-radius: 0px 0px 20px 20px;
}
}

</style>
</head>
<body>
<div class="menu">
<div class="select-menu">

<!-- JAVASCRIPT FOR MENU BAR -->

<select name="menu"
onChange="window.document.location.href=this.options[this.selectedIndex].value
;">
<option value="about.html">About</option>
<option value="index.html">Home</option>
<option value="menu.html">Menu</option>

</select>
</div>

<div class="menu-item"><a href="index.html">HOME</a></div>


<div class="menu-item"><a href="menu.html">MENU</a></div>
<div class="menu-item"><a href="about.html">ABOUT</a></div>
</div>
<div class="accordionWrapper">
<div class="accordionItem open">
<div class="accordionItemHeading">Description</div>
<div class="accordionItemContent">
<p>Centrally located in VIT University,Vellore , The
VITcafe offers a comfortable environment for everyone. Come and enjoy our
selection of homemade to internation food, coffee, tea and dessert. </p>
<p> Whether you're looking to relax over a cup of
espresso or grab a quick bite to go, the VITcafe is for you.</p>
</div>
</div>

<div class="accordionItem close">


<div class="accordionItemHeading">Contact us</div>
<div class="accordionItemContent">
<p>VITCafe(near SJT),VIT University,Vellore - 632014 Tamil
Nadu, India</p>
<p>
Telephone:(440)546.0901<br>
Toll Free: (800) 562.8575<br>
(440) 546.0960<br>
Email:[email protected]</p>
</div>
</div>

<div class="accordionItem close">


<div class="accordionItemHeading">Our Mission</div>
<div class="accordionItemContent">
<p>
Our mission is to serve the VIT University by
providing the highest-quality coffees, meals, and desserts in
an atmosphere that meets the needs of students and
staff who are in a hurry as well as those who want a
place to relax and enjoy their beverages and
food.</p>
</div>
</div>
</div>
</div>

<!-- JQUERY CODE FOR PHOTO SLIDESHOW -->

<script src="js/jquery.js" type="text/javascript" charset="utf-


8"></script>
<script>
$(document).ready(function(){
var arr=["images/1.jpg","images/2.jpg","images/3.jpg"];
var i=0;
setInterval(function(){
$(".image2").css("background-
image","url("+arr[i]+")");
i=i+1;
i=i%(arr.length);
},3000);
});
$(document).ready(function(){
$('body').slideDown();
});
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.parentNode.className;
for (i = 0; i < accItem.length; i++) {
accItem[i].className = 'accordionItem close';
}
if (itemClass == 'accordionItem close') {
this.parentNode.className = 'accordionItem open';
}
}
</script>
</body>
</html>

You might also like