input code files
This commit is contained in:
Arjun Patel
+37
@@ -0,0 +1,37 @@
|
|||||||
|
<!Doctype html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<link rel="shortcut icon" href="pics/Airplane.ico" />
|
||||||
|
<title>Seat-X</title>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="main.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="input">
|
||||||
|
<p class="title">Seat-Xchange
|
||||||
|
<font color="yellow" class="title">Connecting passengers on the fly </font>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="inputs">Welcome to Air Seat Assistance!
|
||||||
|
<br>
|
||||||
|
<a href="planePage.html"><button id="begin">Begin Process</button></a>
|
||||||
|
<br>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="text/javascript" src="indexJs.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
+23
@@ -0,0 +1,23 @@
|
|||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
$('body').css('display','none');
|
||||||
|
$(document).ready(function() {
|
||||||
|
$('body').fadeIn(1000);
|
||||||
|
$('a').on('click',function(event){
|
||||||
|
var thetarget = this.getAttribute('target')
|
||||||
|
if (thetarget != "_blank"){
|
||||||
|
var thehref = this.getAttribute('href')
|
||||||
|
event.preventDefault();
|
||||||
|
$('body').fadeOut(function(){
|
||||||
|
//alert(thehref)
|
||||||
|
window.location = thehref
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
setTimeout(function(){
|
||||||
|
$('body').fadeIn();
|
||||||
|
},1000)
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
Vendored
+4
File diff suppressed because one or more lines are too long
@@ -0,0 +1,102 @@
|
|||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
title {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(pics/indexbg.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.input {
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100px;
|
||||||
|
width: 70%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 12%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
font-size: 150px;
|
||||||
|
color: silver;
|
||||||
|
}
|
||||||
|
font.title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100px;
|
||||||
|
width: 70%;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 212%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-family: 'Courier New';
|
||||||
|
font-size: 22px;
|
||||||
|
color: gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
p.inputs {
|
||||||
|
color: dimgray;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: papayawhip;
|
||||||
|
height: 110px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
position: fixed;
|
||||||
|
|
||||||
|
top: 70%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
box-shadow: 3px 3px 2px #888888;
|
||||||
|
vertical-align: middle;
|
||||||
|
line-height: 50px;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
margin: 0;
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
background-color: darkblue;
|
||||||
|
color: white;
|
||||||
|
height: 35px;
|
||||||
|
width: 150px;
|
||||||
|
padding: 0 5px 0 5px;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 3px 3px 2px #888888;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
font-size: 19px;
|
||||||
|
-moz-box-shadow: inset 0 0 10px #000000;
|
||||||
|
-webkit-box-shadow: inset 0 0 10px #000000;
|
||||||
|
box-shadow: inset 0 0 10px #000000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 634 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 348 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 774 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
@@ -0,0 +1,467 @@
|
|||||||
|
html {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
background-image: url(pics/wallpaper3.jpg);
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
.bordertop {
|
||||||
|
position: fixed;
|
||||||
|
margin: 0;
|
||||||
|
height: 12px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
z-index: 4;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: yellow;
|
||||||
|
border-bottom-left-radius: 6px;
|
||||||
|
border-bottom-right-radius: 6px;
|
||||||
|
}
|
||||||
|
img.sevenfiveseven {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
top: 0;
|
||||||
|
z-index: 4;
|
||||||
|
border-bottom: 2px solid gold;
|
||||||
|
}
|
||||||
|
img.seveneightseven {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
top: 0;
|
||||||
|
z-index: 4;
|
||||||
|
border-bottom: 2px solid gold;
|
||||||
|
}
|
||||||
|
img.threeeighty{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
display: none;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
top: 0;
|
||||||
|
z-index: 4;
|
||||||
|
border-bottom: 2px solid gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
p.instructions {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
color: white;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
height: 270px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
color: grey;
|
||||||
|
}
|
||||||
|
|
||||||
|
button.request {
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
height: 45px;
|
||||||
|
width: 150px;
|
||||||
|
padding: 0 5px 0 5px;
|
||||||
|
border: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
box-shadow: 3px 3px 2px #888888;
|
||||||
|
|
||||||
|
}
|
||||||
|
button.request:hover {
|
||||||
|
-moz-box-shadow: inset 0 0 10px #000000;
|
||||||
|
-webkit-box-shadow: inset 0 0 10px #000000;
|
||||||
|
box-shadow: inset 0 0 10px #000000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
img.help {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
position: absolute;
|
||||||
|
top: 52%;
|
||||||
|
left: 58%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
img.help:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.form {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
|
height: 420px;
|
||||||
|
width: 500px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 10;
|
||||||
|
background-color: gainsboro;
|
||||||
|
border: 3px solid gold;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
border: 6px solid gold;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
div.loading {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
|
height: 200px;
|
||||||
|
width: 400px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 10;
|
||||||
|
background-color: gainsboro;
|
||||||
|
border: 3px solid gold;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
border: 6px solid gold;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
img.loading {
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
h2.loading {
|
||||||
|
font-size: 15px;
|
||||||
|
font-style: italic;
|
||||||
|
position: absolute;
|
||||||
|
top: 55%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
div.aord {
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px;
|
||||||
|
height: 200px;
|
||||||
|
width: 400px;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
z-index: 10;
|
||||||
|
background-color: gainsboro;
|
||||||
|
border: 3px solid gold;
|
||||||
|
text-align: center;
|
||||||
|
color: black;
|
||||||
|
font-family: 'Courier New';
|
||||||
|
border: 6px solid gold;
|
||||||
|
border-radius: 15px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
h2.acceptordeny {
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: darkgoldenrod;
|
||||||
|
padding: 35px;
|
||||||
|
}
|
||||||
|
input.name {
|
||||||
|
padding: 5px;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
color: black;
|
||||||
|
height: 20px;
|
||||||
|
width: 175px;
|
||||||
|
-moz-box-shadow: inset 0 0 4px #000000;
|
||||||
|
-webkit-box-shadow: inset 0 0 4px #000000;
|
||||||
|
box-shadow: inset 0 0 4px #000000;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
input.number {
|
||||||
|
padding: 5px;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
color: black;
|
||||||
|
height: 30px;
|
||||||
|
width: 75px;
|
||||||
|
-moz-box-shadow: inset 0 0 4px #000000;
|
||||||
|
-webkit-box-shadow: inset 0 0 4px #000000;
|
||||||
|
box-shadow: inset 0 0 4px #000000;
|
||||||
|
border: none;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
input.letter {
|
||||||
|
padding: 5px;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
color: black;
|
||||||
|
height: 30px;
|
||||||
|
width: 75px;
|
||||||
|
-moz-box-shadow: inset 0 0 4px #000000;
|
||||||
|
-webkit-box-shadow: inset 0 0 4px #000000;
|
||||||
|
box-shadow: inset 0 0 4px #000000;
|
||||||
|
border: none;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
textarea.msg {
|
||||||
|
padding: 5px;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
color: black;
|
||||||
|
height: 100px;
|
||||||
|
width: 400px;
|
||||||
|
-moz-box-shadow: inset 0 0 4px #000000;
|
||||||
|
-webkit-box-shadow: inset 0 0 4px #000000;
|
||||||
|
box-shadow: inset 0 0 4px #000000;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
button.submit {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
background-color: #4CAF50;
|
||||||
|
color: white;
|
||||||
|
height: 30px;
|
||||||
|
width: 150px;
|
||||||
|
border: none;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
box-shadow: 3px 3px 2px #888888;
|
||||||
|
}
|
||||||
|
button.submit:hover {
|
||||||
|
-moz-box-shadow: inset 0 0 10px #000000;
|
||||||
|
-webkit-box-shadow: inset 0 0 10px #000000;
|
||||||
|
box-shadow: inset 0 0 10px #000000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
div.greyOut {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: fixed;
|
||||||
|
top:0;
|
||||||
|
right:0;
|
||||||
|
left:0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 9;
|
||||||
|
background-color: black;
|
||||||
|
opacity: .8;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
img.cancel2 {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
img.cancel2:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
div.threePlanes {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 90%;
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
.plane1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 33%;
|
||||||
|
left: 0;
|
||||||
|
border-right: 1px solid grey;
|
||||||
|
}
|
||||||
|
img.introPics {
|
||||||
|
height: 200px;
|
||||||
|
width: 300px;
|
||||||
|
position: absolute;
|
||||||
|
top: 60%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
img.introPics:hover {
|
||||||
|
height: 205px;
|
||||||
|
width: 305px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plane2 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 33%;
|
||||||
|
left: 33%;
|
||||||
|
border-right: 1px solid grey;
|
||||||
|
}
|
||||||
|
.plane3 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 33%;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 40px;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
h1:hover {
|
||||||
|
border-top: .1px solid aqua;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
margin: 0;
|
||||||
|
padding: 25px;
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 18px;
|
||||||
|
color: lightgray;
|
||||||
|
position: absolute;
|
||||||
|
top: 34%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.togglePlane {
|
||||||
|
font-family: 'Open Sans Condensed', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
background-color: white;
|
||||||
|
color: black;
|
||||||
|
height: 45px;
|
||||||
|
width: 150px;
|
||||||
|
padding: 0 5px 0 5px;
|
||||||
|
border: .5px solid black;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
button.togglePlane:hover {
|
||||||
|
background-color: gainsboro;
|
||||||
|
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
position: absolute;
|
||||||
|
width: 80%;
|
||||||
|
top: 25%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
img.cancel {
|
||||||
|
margin:0;
|
||||||
|
padding: 0;
|
||||||
|
height: 50px;
|
||||||
|
width: 50px;
|
||||||
|
position: absolute;
|
||||||
|
display: none;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
img.cancel:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.hide {
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#backHome {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 50px;
|
||||||
|
width: 100px;
|
||||||
|
position: absolute;
|
||||||
|
top: 8%;
|
||||||
|
left: 22%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
+128
@@ -0,0 +1,128 @@
|
|||||||
|
$(document).ready(function(){
|
||||||
|
|
||||||
|
$('a').on('click',function(event){
|
||||||
|
var thetarget = this.getAttribute('target')
|
||||||
|
if (thetarget != "_blank"){
|
||||||
|
var thehref = this.getAttribute('href')
|
||||||
|
event.preventDefault();
|
||||||
|
$('body').fadeOut(function(){
|
||||||
|
//alert(thehref)
|
||||||
|
window.location = thehref
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$("#sevenfiveseven").click(function() {
|
||||||
|
$(".sevenfiveseven").fadeIn(500);
|
||||||
|
$(".cancel").fadeIn(500);
|
||||||
|
$(".one").fadeIn(500);
|
||||||
|
|
||||||
|
$(".threePlanes").hide(500);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".cancel").click(function() {
|
||||||
|
$(".sevenfiveseven").fadeOut(400);
|
||||||
|
$(this).fadeOut(300);
|
||||||
|
$(".one").fadeOut(400);
|
||||||
|
$(".threePlanes").show(400);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$("#seveneightseven").click(function() {
|
||||||
|
$(".seveneightseven").fadeIn(500);
|
||||||
|
$(".cancel").fadeIn(500);
|
||||||
|
$(".two").fadeIn(500);
|
||||||
|
|
||||||
|
$(".threePlanes").hide(500);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".cancel").click(function() {
|
||||||
|
$(".seveneightseven").fadeOut(400);
|
||||||
|
$(this).fadeOut(300);
|
||||||
|
$(".two").fadeOut(400);
|
||||||
|
$(".threePlanes").show(400);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$("#threeeighty").click(function() {
|
||||||
|
$(".threeeighty").fadeIn(500);
|
||||||
|
$(".cancel").fadeIn(500);
|
||||||
|
$(".three").fadeIn(500);
|
||||||
|
|
||||||
|
$(".threePlanes").hide(500);
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".cancel").click(function() {
|
||||||
|
$(".threeeighty").fadeOut(400);
|
||||||
|
$(this).fadeOut(300);
|
||||||
|
$(".three").fadeOut(400);
|
||||||
|
$(".threePlanes").show(400);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$(".request").click(function(){
|
||||||
|
$(".greyOut").fadeIn(400);
|
||||||
|
$(".form").fadeIn(500);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".cancel2").click(function(){
|
||||||
|
$(".greyOut").fadeOut(400);
|
||||||
|
$(".form").fadeOut(500);
|
||||||
|
$(".loading").fadeOut(500);
|
||||||
|
$(".aord").fadeOut(500);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(".submit").click(function() {
|
||||||
|
$(".form").fadeOut(400);
|
||||||
|
$(".loading").fadeIn(400);
|
||||||
|
var nameInput = $(".name").val();
|
||||||
|
var seatInput = $(".number").val() + $(".letter").val();
|
||||||
|
var msg = $(".msg").val();
|
||||||
|
|
||||||
|
setTimeout (function() {
|
||||||
|
|
||||||
|
$(".loading").fadeOut(400);
|
||||||
|
var randomYesorNo = randomNum();
|
||||||
|
if ( randomYesorNo < 1 )
|
||||||
|
{
|
||||||
|
$(".acceptordeny").html( "Request ACCEPTED, " + (nameInput) + "! " + "\r\n" + "Please Proceed to Seat " + (seatInput) + "!").css("color", "green");
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$(".acceptordeny").html( "Request DENIED!" + "\r\n" + "Please try another seat." ).css("color", "darkred");
|
||||||
|
}
|
||||||
|
$(".aord").fadeIn(700);
|
||||||
|
}, 4000);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function randomNum() {
|
||||||
|
return Math.random()*2;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
+136
@@ -0,0 +1,136 @@
|
|||||||
|
<!Doctype html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="shortcut icon" href="pics/Airplane.ico" />
|
||||||
|
<title>Seat Mapping</title>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
|
||||||
|
|
||||||
|
<link href="plane.css" type="text/css" rel="stylesheet">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="bordertop"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="threePlanes">
|
||||||
|
|
||||||
|
<!-- These three divs are the three divided sections on the main plane page with the title of plane and button to view maps-->
|
||||||
|
|
||||||
|
<div class="plane1">
|
||||||
|
<a href="index.html"><img src="pics/backHome.png" id="backHome"></a>
|
||||||
|
<a href="http://www.boeing.com/history/products/757.page">
|
||||||
|
<h1><font size="5px">BOEING</font> <font color="#ffff00">757</font></h1>
|
||||||
|
</a>
|
||||||
|
<hr><br>
|
||||||
|
<h3>A popular model in recent years used as a mid-sized commercial vehicle.</h3>
|
||||||
|
<img src="pics/757intro.jpg" class="introPics">
|
||||||
|
<button class="togglePlane" id="sevenfiveseven">View Seat Map</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="plane2">
|
||||||
|
<a href="http://www.boeing.com/commercial/787/?">
|
||||||
|
<h1>
|
||||||
|
<font size="5px">BOEING</font> <font color="#ffff00">787</font>
|
||||||
|
</h1>
|
||||||
|
</a><br>
|
||||||
|
<hr>
|
||||||
|
<h3>This long-hauler aircraft is known for its fuel-efficiency and components made of composite material. Also called the "<font color="yellow">Dreamliner.</font>"</h3>
|
||||||
|
<img src="pics/787intro.jpg" class="introPics">
|
||||||
|
<button class="togglePlane" id="seveneightseven">View Seat Map</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="plane3">
|
||||||
|
<a href="http://www.airbus.com/aircraftfamilies/passengeraircraft/a380family/">
|
||||||
|
<h1><font size="5px">AIRBUS</font> <font color="#ffff00">A-380</font></h1>
|
||||||
|
</a>
|
||||||
|
<hr><br>
|
||||||
|
<h3>As a double-decker, four-engined, and wide-bodied aircraft is the world's largest passenger airline.</h3>
|
||||||
|
<img src="pics/a380intro.jpg" class="introPics">
|
||||||
|
<button class="togglePlane" id="threeeighty">View Seat Map</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The cancel button is for returning to the main plane page. There are three seat map images that hide or show up -->
|
||||||
|
|
||||||
|
<img src="pics/cancel.jpg" class="cancel">
|
||||||
|
|
||||||
|
|
||||||
|
<img class="sevenfiveseven" src="pics/Boeing757.jpg">
|
||||||
|
<img class="seveneightseven" src="pics/787.png">
|
||||||
|
<img class="threeeighty" src="pics/a380.jpg">
|
||||||
|
|
||||||
|
<!-- These are the bottom sections when the seat map pops up. It asks for request form button. -->
|
||||||
|
<p class="instructions one">
|
||||||
|
<br>
|
||||||
|
<strong><font size="40px">Boeing 757</font></strong>
|
||||||
|
<br>
|
||||||
|
Please Begin the Request Form by Clicking Below.<br>
|
||||||
|
<button class="request">Request</button>
|
||||||
|
<img class="help" src="pics/help.png">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="instructions two">
|
||||||
|
<br>
|
||||||
|
<strong><font size="40px">Boeing 787</font></strong>
|
||||||
|
<br>
|
||||||
|
Please Begin the Request Form by Clicking Below.<br>
|
||||||
|
<button class="request">Request</button>
|
||||||
|
<img class="help" src="pics/help.png">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="instructions three">
|
||||||
|
<br>
|
||||||
|
<strong><font size="40px">Airbus A380</font></strong>
|
||||||
|
<br>
|
||||||
|
Please Begin the Request Form by Clicking Below.<br>
|
||||||
|
<button class="request">Request</button>
|
||||||
|
<img class="help" src="pics/help.png">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- This is the popup screen/form to fill to request a seat change -->
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<img src="pics/cancel.jpg" class="cancel2">
|
||||||
|
<h2 style="border-bottom: 1px solid grey;">Name (<font size="4px" color="yellow">Optional</font>):</h2>
|
||||||
|
<input class="name" placeholder="Enter Name">
|
||||||
|
<br><br>
|
||||||
|
<h2>Seat Number <input class="number" placeholder="#"> <font color="gainsboro">bsbsbsbsbs</font><input class="letter" placeholder="Abcde..."> Row Letter</h2>
|
||||||
|
<h2>Message</h2>
|
||||||
|
|
||||||
|
<textarea class="msg" placeholder="Enter a brief message with a reason for exchanging seats."></textarea><br>
|
||||||
|
|
||||||
|
<button class="submit">Submit!</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- This is the waiting page after submitting -->
|
||||||
|
<div class="loading">
|
||||||
|
<img src="pics/cancel.jpg" class="cancel2">
|
||||||
|
<img src="pics/loading.gif" class="loading">
|
||||||
|
<h2 class="loading">Waiting for response</h2>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="greyOut">d</div>
|
||||||
|
<!-- Accepted Page -->
|
||||||
|
<div class="aord">
|
||||||
|
<img src="pics/cancel.jpg" class="cancel2">
|
||||||
|
<h2 class="acceptordeny"></h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script src="planeJs.js" type="text/javascript"></script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user