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