Skip to content

C
cs251_group27
Commit 03a9a9aa authored by GOKA HARSHITH's avatar GOKA HARSHITH
Browse files
Options

Lab02 commit

parent fa3460be
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 18760 additions and 0 deletions
lab02_group27_inlab/README.txt 0 → 100644
View file @ 03a9a9aa
Sourabh Singh 150050009
Harshith Goka 150050069
Uddeshya 15D110007
All the team members have contributed equally. Sourabh(100%) Harshith(100%) Uddeshya(100%).
Citations:
We used wallpapers available for public as background from:
https://images2.alphacoders.com/526/526200.jpg
Other reference materials used:
http://www.w3schools.com/css/tryit.asp?filename=trycss_image_text_center
http://www.w3schools.com/html/html_tables.asp
http://www.w3schools.com/html/html_youtube.asp
I, Sourabh, pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
I, Uddeshya, pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
I, Harshith, pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
lab02_group27_inlab/aboutme.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title>Sourabh</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a href="home.html">Home</a></li>
<li class="nav-elements"><a class = "active" href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a href="interests.html">Interests</a></li>
<li class="nav-elements"><a href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a href="contact.html">Contact</a></li>
</ul>
</div>
<p>Hi! I am Sourabh Singh, Undergraduate student at IIT Bombay.
This is my team's first attempt to create interlinked webpages.
Hope you enjoy! Stay tune in for more interesting stuff.
</p>
</body>
</html>
\ No newline at end of file
lab02_group27_inlab/contact.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title>Sourabh's Contacts</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a href="home.html">Home</a></li>
<li class="nav-elements"><a href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a href="interests.html">Interests</a></li>
<li class="nav-elements"><a href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a class = "active" href="contact.html">Contact</a></li>
</ul>
</div>
<p>Email ID : sourabhrishi25@gmail.com </p>
<p>Phone Number : 9869815517</p>
</body>
</html>
\ No newline at end of file
lab02_group27_inlab/home.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title font="arial">Audacity</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="styles/home.css">
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a class = "active" href="home.html">Home</a></li>
<li class="nav-elements"><a href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a href="interests.html">Interests</a></li>
<li class="nav-elements"><a href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="container">
<img src="images/bg.jpg" style="width: 100% ; height:auto; ">
<div class="center" style="font-size:40px">Audacity</div>
</div>
<ol id="content" style="list-style-type : none;">
<li style="color: white"><a href="https://www.cse.iitb.ac.in/~sourabh/home.html">Sourabh's Page</a></li>
<li style="color: white"><a href="https://www.cse.iitb.ac.in/~harshithg/home.html">Harshith's Page</a></li>
<li style="color: white"><a href="https://www.cse.iitb.ac.in/~uddeshya/home.html">Uddeshya's Page</a></li>
</ol>
</body>
</html>
\ No newline at end of file
lab02_group27_inlab/interests.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title>Interests</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a href="home.html">Home</a></li>
<li class="nav-elements"><a href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a class = "active" href="interests.html">Interests</a></li>
<li class="nav-elements"><a href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a href="contact.html">Contact</a></li>
</ul>
</div>
<p>I like Swimming alot. I also play water polo. Watching movies is my best pastime.</p>
<p>
The Gamma Function
$$ \Gamma \left( x \right) = \int\limits_0^\infty {s^{x - 1} e^{ - s} ds} $$
</p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Era0VAIUATw" frameborder="0" allowfullscreen></iframe>
</iframe>
</body>
</html>
\ No newline at end of file
lab02_group27_inlab/styles/home.css 0 → 100644
View file @ 03a9a9aa
.container {
position: relative;
height: 590px;
width: 100%;
}
.center {
position: absolute;
top : 50%;
width: 100%;
left :0;
text-align: center;
}
\ No newline at end of file
lab02_group27_inlab/styles/nav-bar.css 0 → 100644
View file @ 03a9a9aa
body {
margin: 0;
background-color: black;
color: white;
}
p {
color: white;
text-align: center;
}
#holder {
height: 45px;
}
#navbar {
position: fixed;
height: 45px;
top : 0;
width : 100% ;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul li{
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a :hover:not(.active) {
background-color: #111;
}
.active {
background-color: lightblue;
border-right:2px solid #bbb;
border-left:2px solid #bbb;
}
lab02_group27_inlab/timetable.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<style type="text/css">
table, th, td {
border : 1px solid white;
}
</style>
</head>
<body>
<div id="holder">
<ul id="navbar">
<li class="nav-elements"><a href="home.html">Home</a></li>
<li class="nav-elements"><a href="aboutme.html">About Me</a></li>
<li class="nav-elements"><a href="interests.html">Interests</a></li>
<li class="nav-elements"><a class = "active" href="timetable.html">Timetable</a></li>
<li class="nav-elements"><a href="contact.html">Contact</a></li>
</ul>
</div>
<table style="width:100%;border : 1px solid white;">
  <tr >
<th>Timing</th>
    <th>Monday</th>
    <th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
  </tr>
<tr>
<td>8:30-9:30</td>
<td></td>
<td>EE101</td>
<td></td>
<td>CS207</td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:30-10:30</td>
<td></td>
<td></td>
<td>Minor</td>
<td>EE101</td>
<td>Minor</td>
<td></td>
</tr>
<tr>
<td>10:30-11:30</td>
<td>CS207</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11:30-12:30</td>
<td>EE101</td>
<td>CS207</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:30-2:30</td>
<td></td>
<td></td>
<td>LUNCH</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:00-4:30</td>
<td>CS213</td>
<td></td>
<td></td>
<td>CS213</td>
<td>CS215</td>
<td></td>
</tr>
<tr>
<td>5:00-8:00</td>
<td></td>
<td>CS251</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
\ No newline at end of file
lab02_group27_outlab/CSE_5thFloor.svg 0 → 100644
View file @ 03a9a9aa
This diff is collapsed.
lab02_group27_outlab/README.txt 0 → 100644
View file @ 03a9a9aa
TEAM AUDACITY(GROUP 27)
I, Sourabh, pledge on geeta that I have not given or received any unauthorized assistance on this assignment or any previous task.
I,Harshith, pledge on my honour that I have not given or received any unauthorized assistance on this assignment or any previous task.
I,Uddeshya, pledge on geeta that I have not given or received any unauthorized assistance on this assignment or any previous task.
We have made equal contribution in this assignment.
Sourabh(150050009) 100%
Harshith(150050069) 100%
Uddeshya(15D110007) 100%
REFLECTION ESSAY:
We got to learn how to link different files of same and different extention(.js,.css,.html). While development of this project we also learnt to code in java script and how to implement stylesheets(CSS). During the inlab we had coded a simple CSS file in order to beautify it.
For outlab assignments we have used Materialize CSS files hence we also learnt to exploit various features of it and combined with JS function ,we got a flavour of how professional looking dynamic websites are coded.
Before the assignments we had basic knowledge of HTML and to be able to start from there and make a cool web pages is overwhelming.
***An important feature we tried to implent was to make our website responsive for different resolutions(i.e mobile screens, tablets etc)
Using Materialize.
***We have ATTEMPTED BOTH THE BONUS TASK.
CITITATIONS:
http://www.w3schools.com
http://materializecss.com
**The carousel on our homepage has been implemented using the materialize feature found on: http://materializecss.com/carousel.html
lab02_group27_outlab/aboutme.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title>Sourabh</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body {
background-color: #37474f;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li class="active"><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li class="active"><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m2">
<div class="card-panel blue-grey darken-1">
<span class="flow-text white-text"><p>Hi! I am Sourabh Singh, Undergraduate student at IIT Bombay.
This is my team's first attempt to create interlinked webpages.
Hope you enjoy! Stay tune in for more interesting stuff.
</p>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
\ No newline at end of file
lab02_group27_outlab/accordion.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title>Pokemon GO!</title>
<link rel="stylesheet" type="text/css" href="styles/accordionStyle.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
</head>
<body background="images/Pokeball2.png">
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="active"><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="active"><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<h1>
<img src="images/pokemon.png" width="20%" style="margin-left: 80px">
</h1>
<div class="content left">
<ul class="z-depth-4">
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(1)"><b>Pikachu</b></a>
</li>
<li class="hidden">
<div class="card grey lighten-2">
<div class="card-image">
<img src="images/Pikachu.png">
<span class="card-title black-text"><b>Pikachu</b>.</span>
</div>
<div class="card-content black-text">
<p><b>Species: </b>Mouse</p>
<p><b>Type: </b>ELectric</p>
<p><b>Weakness: </b>Ground</p>
<p><b>Evolves from: </b>Pichu</p>
<p><b>Evolves to: </b>Raichu</p>
</div>
</div>
</li>
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(2)"><b>Charizard</b></a>
</li>
<li class="hidden">
<div class="card blue-grey darken-1">
<div class="card-image">
<img src="images/Charizard.png">
<span class="card-title white-text"><b>Charizard</b></span>
</div>
<div class="card-content white-text">
<p><b>Species: </b>Flame</p>
<p><b>Type: </b>Flying,Fire</p>
<p><b>Weakness: </b>Electric,Rock,Water</p>
<p><b>Evolves from: </b>Charmelon</p>
<p><b>Evolves to: </b>Mega Charizard X and Y </p>
</div>
</div>
</li>
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(3)"><b>Arcanine</b></a>
</li>
<li class="hidden">
<div class="card brown darken-1">
<div class="card-image">
<img src="images/Arcanine.png">
<span class="card-title"><b>Arcanine</b>.</span>
</div>
<div class="card-content white-text">
<p><b>Species: </b>Legendary</p>
<p><b>Type: </b>Flash, Fire, Intimidate</p>
<p><b>Weakness: </b>Ground, Rock, Water</p>
<p><b>Evolves from: </b>Growlithe</p>
</div>
</div>
</li>
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(4)"><b>Mewtwo</b></a>
</li>
<li class="hidden">
<div class="card grey darken-1">
<div class="card-image">
<img src="images/Mewtwo.png">
<span class="card-title"><b>Mewtwo</b></span>
</div>
<div class="card-content white-text">
<p><b>Species: </b>Genetic</p>
<p><b>Type: </b>Psychic</p>
<p><b>Weakness: </b>Ghost, Dark, Bug</p>
<p><b>Evolves from: </b>No evolutionary line</p>
<p><b>Evolves to: </b>Mega mewtwo </p>
</div>
</div>
</li>
<li>
<a href="javascript:void(0);" class="btn grey darken-3" onclick="ex_ct(5)"><b>Gengar</b></a>
</li>
<li class="hidden">
<div class="card brown darken-1">
<div class="card-image">
<img src="images/Gengar.png">
<span class="card-title"><b>Gengar</b>.</span>
</div>
<div class="card-content white-text">
<p><b>Species: </b>Shadow</p>
<p><b>Type: </b>Ghost, poison</p>
<p><b>Weakness: </b>Ghhost, Dark, Psychic</p>
<p><b>Evolves from: </b>Haunter</p>
</div>
</div>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/accordion.js"></script>
</html>
\ No newline at end of file
lab02_group27_outlab/contact.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title>Sourabh's Contacts</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body {
background-color: #37474f;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html"></a>Floor Plan</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<!-- <div class="card grey center-align flow-text"><p>Email ID : sourabhrishi25@gmail.com </p>
<p>Phone Number : 9869815517</p></div> -->
<div >
<div class = "container">
<div class="card-panel brown lighten-2 row hoverable z-depth-5 valign-wrapper">
<div class = "col s7">
<img class="responsive-img circle z-depth-5" src = "images/sourabh.jpg" width = "400">
</div>
<div class = "col s5 valign" style="word-wrap: break-word;">
<span class="white-text flow-text" style="font-size:200%">
Hostel 3
<br/>
<a href="mailto:sourabh@cse.iitb.ac.in" class="white-text"><i class="material-icons">email</i> sourabh@cse.iitb.ac.in</a>
</span>
<div class="flow-text">
<a target="_blank" href="http://www.cse.iitb.ac.in/~sourabh/" class="white-text"><i class="material-icons">assignment</i> CSE Website </a>
</div>
<div>
<a target="_blank" href="https://www.facebook.com/Sourabh.aman"><img src="images/fb.png" width="60px"></a>
<a target="_blank" href="https://www.instagram.com/samstark25"><img src="images/insta.png" width="60px"></a>
</div>
</div>
</div>
<div class="card-panel grey darken-3 row hoverable z-depth-5 valign-wrapper">
<div class = "col s7">
<img class="responsive-img circle z-depth-5" src = "images/harshith.jpg" width="400">
</div>
<div class = "col s5 valign" style="word-wrap: break-word;">
<span class="white-text flow-text" style="font-size:200%">
Hostel 4
<br>
<a href="mailto:harshithg@cse.iitb.ac.in" class="white-text"><i class="material-icons">email</i> harshithg@cse.iitb.ac.in</a>
</span>
<div class="flow-text">
<a target="_blank" href="http://www.cse.iitb.ac.in/~harshithg/" class="white-text"><i class="material-icons">assignment</i> CSE Website </a>
</div>
<div>
<a target="_blank" href="https://www.facebook.com/harshithgoka"><img src="images/fb.png" width="60px"></a>
<a target="_blank" href="https://www.instagram.com/ignifies"><img src="images/insta.png" width="60px"></a>
</div>
</div>
</div>
<div class="card-panel grey darken-3 row hoverable z-depth-5 valign-wrapper">
<div class = "col s7">
<img class="responsive-img circle z-depth-5" src = "images/ud.jpg" width = "400">
</div>
<div class = "col s5 valign" style="word-wrap: break-word;">
<span class="white-text flow-text" style="font-size:200%">
Hostel 3
<br>
<a href="mailto:uddeshya@cse.iitb.ac.in" class="white-text"><i class="material-icons">email</i> uddeshya@cse.iitb.ac.in</a>
</span>
<div class="flow-text">
<a href="http://www.cse.iitb.ac.in/~uddeshya/" class="white-text"><i class="material-icons">assignment</i> CSE Website </a>
</div>
<div>
<a target="_blank" href="https://www.facebook.com/profile.php?id=100001550046961"><img src="images/fb.png" width="60px"></a>
<a target="_blank" href="#"><img src="images/insta.png" width="60px"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
\ No newline at end of file
lab02_group27_outlab/floorplan.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title font="arial">5th Floor Plan</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="styles/home.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
body {
background-color: white;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li class="active"><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li class="active"><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<embed type="image/svg+xml" src="CSE_5thFloor.svg"></embed>
</div>
</body>
</html>
\ No newline at end of file
lab02_group27_outlab/form.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title>XSS Resistant Forms</title>
<link rel="stylesheet" type="text/css" href="styles/form.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
</head>
<body style="background-color: #37474f;">
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li class="active"><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li class="active"><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container ">
<form name="myForm" onsubmit="return checkAllEncode()" action="https://www.cse.iitb.ac.in/~sharat/php/example/form.php" method="post">
<div>
<label for="name">Name </label> <br/>
<input id="name" type="text" name="text" onfocus="clearError(0)" maxlength="50" />
</div>
<div class="error" id="0"></div>
<div>
<label for="mail">E-mail </label> <br/>
<input id="mail" type="email" name="email" onfocus="clearError(1)" />
</div>
<div class="error" id="1"></div>
<div>
<label for="pwd">Password </label> <br/>
<input id="pwd" type="password" name="pass" onfocus="clearError(2);" maxlength="20" />
</div>
<div class="error" id="2"></div>
<div class="button">
<button type="submit" class="btn">Submit</button>
</div>
</form>
</div>
<script type="text/javascript" src="js/formscript.js"></script>
</body>
</html>
\ No newline at end of file
lab02_group27_outlab/home.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title font="arial">Audacity</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="styles/home.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
</style>
<style type="text/css">
body {
background-color: #37474f;
}
</style>
</head>
<body>
<header>
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li class="active"><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<main>
<div class="container">
<!-- <div style="height:500px;"></div> -->
<!-- <div class="carousel carousel-slider">
<a class="carousel-item" href="#one!"><img src="http://lorempixel.com/800/400/food/1"></a>
<a class="carousel-item" href="#two!"><img src="http://lorempixel.com/800/400/food/2"></a>
<a class="carousel-item" href="#three!"><img src="http://lorempixel.com/800/400/food/3"></a>
<a class="carousel-item" href="#four!"><img src="http://lorempixel.com/800/400/food/4"></a>
</div> -->
<div class="carousel" >
<a class="carousel-item" href="#one!"><img src="images/Images/image1.jpg"></a>
<a class="carousel-item" href="#two!"><img src="images/Images/image2.jpg"></a>
<a class="carousel-item" href="#three!"><img src="images/Images/image3.jpg"></a>
<a class="carousel-item" href="#four!"><img src="images/Images/image4.jpg"></a>
<a class="carousel-item" href="#five!"><img src="images/Images/image6.jpg"></a>
</div>
<!-- <ol id="content" style="list-style-type : none;">
<li><a class="btn" href="https://www.cse.iitb.ac.in/~sourabh/home.html">Sourabh's Page</a></li>
<li><a class="btn" href="https://www.cse.iitb.ac.in/~harshithg/home.html">Harshith's Page</a></li>
<li><a class="btn" href="https://www.cse.iitb.ac.in/~uddeshya/home.html">Uddeshya's Page</a></li>
</ol> -->
</div>
</main>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About site</h5>
<p class="grey-text text-lighten-4">This site is responsive and works on most of the devices</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="https://www.cse.iitb.ac.in/~sourabh/home.html">Sourabh's Webpage</a></li>
<li><a class="grey-text text-lighten-3" href="https://www.cse.iitb.ac.in/~harshithg/home.html">Harshith's Webpage</a></li>
<li><a class="grey-text text-lighten-3" href="https://www.cse.iitb.ac.in/~uddeshya/home.html">Uddeshya's Webpage</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Audacity
<a class="grey-text text-lighten-4 right" href="contact.html">More Links</a>
</div>
</div>
</footer>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
// $('.carousel.carousel-slider').carousel({full_width: true});
</script>
</body>
</html>
\ No newline at end of file
lab02_group27_outlab/interests.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title>Interests</title>
<link rel="stylesheet" type="text/css" href="styles/nav-bar.css">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body {
background-color: #37474f;
}
</style>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li class="active"><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li class="active"><a href="interests.html">Interests</a></li>
<li><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="flow-text card teal darken-4 white-text center-align">
<p>I like Swimming alot. I also play water polo. Watching movies is my best pastime.</p>
<p>The Gamma Function
$$ \Gamma \left( x \right) = \int\limits_0^\infty {s^{x - 1} e^{ - s} ds} $$
</p>
</div>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Era0VAIUATw" frameborder="0" allowfullscreen></iframe>
</iframe>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
\ No newline at end of file
lab02_group27_outlab/js/accordion.js 0 → 100644
View file @ 03a9a9aa
var curr_open = 0;
var x = document.getElementsByClassName("hidden");
var y = document.getElementsByClassName("btn");
console.log(y);
function increaseHeight(element) {
var height = 0;
function frame() {
height = height + 10 ;
element.style.height = height + "px";
if(height >= element.childNodes[1].clientHeight){
clearInterval(id);
}
}
var id = setInterval(frame, 5);
}
function decreaseHeight(element) {
var height = element.clientHeight;
function frame() {
if(height <= 1){
clearInterval(id);
}
element.style.height = height + "px";
height = height - 10 ;
}
var id = setInterval(frame, 5);
}
function ex_ct(which) {
if(curr_open){
decreaseHeight(x[curr_open - 1]);
y[curr_open - 1].className = y[curr_open - 1].className.replace( /(?:^|\s)red(?!\S)/g , '');
y[curr_open - 1].className+= " grey darken-3";
if(which == curr_open){
// do nothing
curr_open = 0;
return;
}
else {
increaseHeight(x[which - 1]);
y[which - 1].className = y[which - 1].className.replace( /(?:^|\s)grey darken-3(?!\S)/g , '');
y[which - 1].className += " red";
}
}
else {
// x[which - 1].style.height = "0";
increaseHeight(x[which - 1]);
y[which - 1].className = y[which - 1].className.replace( /(?:^|\s)grey darken-3(?!\S)/g , '');
y[which - 1].className += " red";
}
curr_open = which;
}
\ No newline at end of file
lab02_group27_outlab/js/formscript.js 0 → 100644
View file @ 03a9a9aa
var text = document.getElementById("name");
var email = document.getElementById("mail");
var pwd = document.getElementById("pwd");
var errorText = document.getElementById("0");
var errorEmail = document.getElementById("1");
var errorPwd = document.getElementById("2");
function encode(str){
var str_splitted = str.split('<');
var ret = str_splitted[0];
for(k=1;k<str_splitted.length;k++){
ret+='&lt'+str_splitted[k];
}
str_splitted = ret.split('>');
ret = str_splitted[0];
for(k=1;k<str_splitted.length;k++){
ret += '&gt'+str_splitted[k];
}
return ret;
}
var checkText = function checkName() {
var x = document.forms["myForm"]["text"].value;
//console.log(x);
if(x.length == 0){
errorText.innerHTML = "This field can't be empty";
}
else if (x.length<6){
errorText.innerHTML = "This field must have a length between 6 and 50 characters";
return false;
}
}
var checkPwd = function checkPass() {
var x = document.forms["myForm"]["pass"].value;
if (x.length == 0) {
errorPwd.innerHTML = "This field can't be empty";
return false;
}
else if(x.length<8){
errorPwd.innerHTML = "This field must have a length between 8 and 20 characters";
return false;
}
else{
var a =false;
for(i=0;i<x.length;i++){
if((x.charAt(i)=='@'||x.charAt(i)=='_'||x.charAt(i)=='!'||x.charAt(i)=='$')){
a=true;
}
}
if(!a){
errorPwd.innerHTML = "This field should have at least one of the {@,!,$,_} special characters";
return false;
}
}
}
var checkMail = function checkEmail() {
var x = document.forms["myForm"]["email"].value;
var arr = x.split('@');
if(arr.length == 2){
var local = arr[0];
var domain = arr[1];
//checking for the local part
if(local.length <= 2){
errorEmail.innerHTML = "Local part should have at least 3 characters";
return false;
}
else{
for(j=0;j<local.length;j++){
var x = local;
var y = (x.charCodeAt(j)>=48 && x.charCodeAt(j)<=57)
||(x.charCodeAt(j)>=65 &&x.charCodeAt(j)<=90)
||(x.charCodeAt(j)>=97 &&x.charCodeAt(j)<=122)
||(x.charCodeAt(j) == 46 || x.charCodeAt(j)==95);
if(!y){
errorEmail.innerHTML = "Local part has invalid character";
return false;
}
}
}
//checking for the domain part
var domainarr = domain.split('.');
console.log(domainarr[0]);
if(domainarr.length < 2){
errorEmail.innerHTML = "Invalid domain name";
}
else if(domainarr[0].length>=3){
for(k=0;k<domainarr.length;k++){
for(j=0;j<domainarr[k].length;j++){
var x = domainarr[k];
var y = (x.charCodeAt(j)>=65 &&x.charCodeAt(j)<=90)||(x.charCodeAt(j)>=97 &&x.charCodeAt(j)<=122);
console.log(y);
if(!y){
errorEmail.innerHTML = "Domain part is invalid";
return false;
}
if(domainarr[k].length<2){
errorEmail.innerHTML = "Domain part doesn't satisfy the length constraints between two consecutive periods(.)";
return false;
}
}
}
}
else{
errorEmail.innerHTML = "Domain part is too short";
}
}
else {
if(x.length == 0){
errorEmail.innerHTML = "This field can't be empty";
}
else {
errorEmail.innerHTML = "Please enter a valid e-mail address";
}
}
}
function clearError(n) {
switch (n) {
case 0 :
errorText.innerHTML = "";
break;
case 1 :
errorEmail.innerHTML = "";
break;
case 2 :
errorPwd.innerHTML = "";
break;
default :
break;
}
}
function checkAllEncode() {
var b = checkMail() || checkText() || checkPwd();
text.value = encode(text.value);
email.value = encode(email.value);
return b;
}
text.onblur = checkText;
email.onblur = checkMail;
pwd.onblur = checkPwd;
lab02_group27_outlab/js/script.js 0 → 100644
View file @ 03a9a9aa
$( document ).ready(function(){
$(".button-collapse").sideNav();
$('.carousel').carousel();
// $('.carousel.carousel-slider').carousel({full_width: true});
});
lab02_group27_outlab/materialize/css/materialize.css 0 → 100644
View file @ 03a9a9aa
This diff is collapsed.
lab02_group27_outlab/materialize/js/materialize.js 0 → 100644
View file @ 03a9a9aa
This diff is collapsed.
lab02_group27_outlab/styles/accordionStyle.css 0 → 100644
View file @ 03a9a9aa
.content {
width: 30%;
margin: 0 auto;
}
a.btn {
width: 100%;
text-align: left;
height: 50px;
padding: 5px;
text-align: center;
}
.hidden {
/*display: none;*/
overflow: hidden;
height: 0;
}
div.card {
margin-top: 0px;
}
body{
background-repeat: no-repeat;
background-size: cover;
}
lab02_group27_outlab/styles/form.css 0 → 100644
View file @ 03a9a9aa
form {
margin : 0 auto;
width: 400px;
background-color: white;
padding: 1em;
border : 1px solid #CCC;
border-radius: 1em;
margin-top: 4em;
}
form div + div {
margin-top: 0em;
}
label {
font-weight: 10;
}
input {
font: 1em sans-serif;
width: 300px;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid #999;
}
input:focus {
border-color: #000;
}
#header {
height: 10%;
}
.error {
color: #cc0000;
font-size: 8pt;
margin-bottom: 3em;
}
\ No newline at end of file
lab02_group27_outlab/timetable.html 0 → 100644
View file @ 03a9a9aa
<!DOCTYPE html>
<html>
<head>
<title>Timetable</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="materialize/css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body {
background-color: #37474f;
}
</style>
</head>
<body>
<div class="navbar-fixed">
<nav class="grey darken-3">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">Audacity</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li class="active"><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="home.html">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="interests.html">Interests</a></li>
<li class="active"><a href="timetable.html">Timetable</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="accordion.html">Pokemon</a></li>
<li><a href="form.html">Form</a></li>
<li><a href="floorplan.html">Floor Plan</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<!-- <i class="material-icons">menu</i> -->
<table class="responsive-table flow-text white-text">
 <thead>
<tr>
<th>Timing</th>
    <th>Monday</th>
    <th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
  </tr>
</thead>
<tbody>
<tr>
<td>8:30-9:30</td>
<td> </td>
<td>EE101</td>
<td> </td>
<td>CS207</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>9:30-10:30</td>
<td> </td>
<td> </td>
<td>Minor</td>
<td>EE101</td>
<td>Minor</td>
<td> </td>
</tr>
<tr>
<td>10:30-11:30</td>
<td>CS207</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>11:30-12:30</td>
<td>EE101</td>
<td>CS207</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>12:30-2:30</td>
<td> </td>
<td> </td>
<td>LUNCH</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3:00-4:30</td>
<td>CS213</td>
<td> </td>
<td> </td>
<td>CS213</td>
<td>CS215</td>
<td> </td>
</tr>
<tr>
<td>5:00-8:00</td>
<td> </td>
<td>CS251</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="materialize/js/materialize.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var a = document.getElementsByClassName("container");
a[1].removeChild(a[1].childNodes[2]);
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment