This repository has been archived by the owner on Jan 18, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (187 loc) · 9.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>
<title>IV/DV Amusement Park</title>
<meta name="description" content="The official website for the IV/DV Amusement Park">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#673AB7">
<link rel="stylesheet" href="css/material.css">
<link rel="stylesheet" href="css/button.css">
<link rel="stylesheet" href="css/textbox.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/card.css">
<link rel="stylesheet" href="css/misc.css">
<audio id="rickroll" src="audio/rickroll.mp3" preload="auto"></audio>
</head>
<body>
<div class="header">
<div class="headerBrand">
<div class="headerItemRoot" onclick="showDrawer()">
<img src="images/icons/menu.svg" class="headerItem">
</div>
<title id="title">Home</title>
</div>
<div class="headerItemsContainer">
<div class="headerItemRoot" onclick="parent.location='https://www.youtube.com/watch?v=YEkc8C315Aw'">
<img src="images/icons/video.svg" class="headerItem">
</div>
<div class="headerItemRoot" style="margin-right:8px;" onclick="parent.location='https://goo.gl/maps/9PBWvAJVuhB2'">
<img src="images/icons/map.svg" class="headerItem">
</div>
</div>
</div>
<script>
/*Drawer code*/
function showDrawer(){
document.getElementById("mDrawer").style.left="0";
document.getElementById("mDrawerScrim").style.background="rgba(0, 0, 0, 0.3)"
document.getElementById("mDrawerScrim").style.pointerEvents="all";
}
function hideDrawer(){
document.getElementById("mDrawer").style.left="-300px";
document.getElementById("mDrawerScrim").style.background="transparent";
document.getElementById("mDrawerScrim").style.pointerEvents="none";
}
</script>
<scrim id="mDrawerScrim" onclick="hideDrawer()"></scrim>
<drawer id="mDrawer">
<img class="drawerheader" id="header" src="images/header.png">
<script>
$(document).ready(new function(){
switch (window.location.hash.substring(1)) {
case "tickets":
switchPage(1, "Tickets");
break;
}
});
function switchPage(num, text) {
//Deselects
var y = document.getElementsByClassName("itemselected");
for (i=0; i < y.length; i++){
y[i].className = "item";
}
//Selects
var x = document.getElementsByClassName("item");
x[num].className = "itemselected";
//Select Page
switch(num){
case 0:
document.getElementById("tickets").style.visibility = "hidden";
document.getElementById("home").style.visibility = "visible";
window.location.hash = "";
break;
case 1:
document.getElementById("home").style.visibility = "hidden";
document.getElementById("tickets").style.visibility = "visible";
window.location.hash = "tickets"
break;
}
document.getElementById("title").innerHTML = text;
//Close the drawer
hideDrawer();
}
</script>
<div class="item" onclick="switchPage(0, 'Home')">
<img src="images/icons/home.svg">
<text>Home</text>
</div>
<div class="item" onclick="switchPage(1, 'Tickets')">
<img src="images/icons/card.svg">
<text>Tickets</text>
</div>
<div class="divider"></div>
<div class="item" onclick="parent.location='mailto:[email protected]?Subject=IV%20DV%20Amusement%20Park'">
<img src="images/icons/help.svg">
<text>Contact Us</text>
</div>
</drawer>
<div class="content">
<!--Content for the home tab-->
<a id="home">
<div class="card" style="width:75%;">
<mdheader>Welcome!</mdheader>
<text> IV/DV Amusement Park is a glorious establishment with fun rides. You will enjoy your stay here. Feel free to expore the site! Note: This site is a school project and will <b>not</b> use any of the information provided. The credit card info page is there just for decoration and does not require you enter anything </text>
<mdheader> Gravitational Madness</mdheader>
<p>This ride is simple. It carries you up to an altitude of 460ft and drops you down. Dropping down is as fast as ever, because the mass in each car increases. How? Well, the scientists working here at the IV/DV Amusement Park have created a gas that, whem has an electric current flowing through it, has a mass of 10lbs per cubic inch. We store little packets of this gass all over the car. Once it reaches the peak (which is also extremley tall to give you more speed), we tip the car over the edge and turn on the current to the gas. This causes the ride to go faster. In fact, the ride goes at 150mph!
</p>
<mdheader> Elastic Flight</mdheader>
<p>This ride uses extremly durable steel cables to launch you up into the air. This ride is designed to then catch you, causing the steel cable to stretch back into its starting position. We chose steel cable because it is the most durable material that will launch you high enough.
</p>
<mdheader> Magnetic At<b>track</b>tion</mdheader>
<p>This ride works in a very smart way. The track is built using magnets, and the car is too. What happens, is that if he ride speeds up, the magnets will have opposite poles touching, meaning that the ride will accellerate very quickly. To slow down, we do the reverse: we make the poles opposite to make them attracted to each other. This happens so much, it seems that the ride is travelling at a constant speed.
</p>
<mdheader> Electric Amusement</mdheader>
<p>This coaster is a little less exciting. It was designed for people who do not want to take one something like Gravatational Madness and just want to have some fun with a few loops. This coaster uses technology simalar to Magnetic Attracktion, except instead of magnets we use electricity. We charge the track with a certain charge, positive or negative. The car is always a negative charge, so if the track is negative, you speed up. If the track is positive, you slow down.
</p>
</div>
</a>
<!--Content for the tickets tab-->
<a id="tickets" style="visibility:hidden;">
<div class="card" style="width:75%;">
<mdheader>Tickets</mdheader>
<text> Only $19.99 per person! Who can pass up such a steal?!? These tickets have a 100% chance of bringing a smile to your kids' faces! All we need is your credit card info! </text>
<button class="raised_button" style="float:right;margin_top:5px" onclick="showDialog()">Buy Now</button>
</div>
<!--Credit card entry-->
<scrim id="mDialogScrim" onclick="hideDialog();"></scrim>
<script>
/*Dialog code*/
function showDialog(){
document.getElementById("mDialog").style.transform="scale(1)";
document.getElementById("mDialogScrim").style.background="rgba(0, 0, 0, 0.3)"
document.getElementById("mDialogScrim").style.pointerEvents="all";
}
function hideDialog(){
document.getElementById("mDialog").style.transform="scale(0)";
document.getElementById("mDialogScrim").style.background="transparent";
document.getElementById("mDialogScrim").style.pointerEvents="none";
}
</script>
<div class="card" id="mDialog" style="width:50%;padding-top:36px;position:fixed;left:25%;top:25%;z-index:50;transform:scale(0);">
<div style="margin:auto;width:99%;">
<div class="textbox" style="display:inline-block;width:49%;">
<input type="text" required>
<span class="bar"></span>
<label>First Name</label>
</div>
<div class="textbox" style="display:inline-block;width:49%;">
<input type="text" required>
<span class="bar"></span>
<label>Last Name</label>
</div>
</div>
<div style="margin-bottom:-30px;">
<div class="textbox" style="display:inline-block;width:89%;">
<input type="text" required>
<span class="bar"></span>
<label>Credit Card Number</label>
</div>
<div class="textbox" style="display:inline-block;width:9%;">
<input type="number" min="0" max="999" required>
<span class="bar"></span>
<label>CVC</label>
</div>
</div>
<script>
function rickroll() {
document.getElementById('rickroll').play();
document.getElementById('rickroll').addEventListener("ended", function(){
alert("Ok. I'm done now.")
document.getElementById('header').src = "images/header.png"
})
document.getElementById('header').src = "images/rickroll.gif"
hideDialog();
}
</script>
<button class="flat_button" style="float:right;margin-right:5px;" onclick="rickroll()">Accept</button>
<button class="flat_button" style="float:right;margin-right:5px;" onclick="hideDialog()">Cancel</button>
</div>
</a>
</div>
</body>
</html>