-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathscifi.html
133 lines (117 loc) · 7.8 KB
/
scifi.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
<html>
<head>
<meta charset="utf-8" />
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no'>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>D-5:30 | Movies > Sci-Fi</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./style.css" />
<meta name="author" content="Maxwell Keleher, Jack Guinane" />
<link id="favicon" rel="shortcut icon" type="image/png" href="./favicon.png">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="content">
<style>
:root
{
--background: #c0e9f7;
--border: #ddf7ff;
--foreground: #000;
--foreground-color: #2c5fab;
--star-color: rgba(44, 95, 171, 0.6);
}
.film:hover img
{
box-shadow: -1px 3px 20px 0px rgba(0, 0, 0, 0.5), -1px 3px 9px 0px rgba(0, 0, 0, 1);
}
.film img
{
box-shadow: rgba(0, 0, 0, 0.5) -1px 3px 8px 0px, 1px 3px 9px 0px rgba(0, 0, 0, 0.8);
}
</style>
<div class="target top" id="top-scifi" onclick="gotoPage('/settings.html?=scifi','top')">
<div id="border-top" class="border top">
<div>Settings</div>
</div>
</div>
<script>addElement("top-scifi")</script>
<div class="target bottom" id="bottom-scifi" onclick="gotoPage('/apps.html','bottom')">
<div id="border-bottom" class="border bottom">
<div>Search Apps</div>
</div>
</div>
<script>addElement("bottom-scifi")</script>
<div class="target right" id="right-scifi" onclick="gotoPage('/drama.html','right')">
<div id="border-right" class="border right">
<div>Drama</div>
</div>
</div>
<script>addElement("right-scifi")</script>
<div class="target left" id="left-scifi" onclick="gotoPage('/horror.html','left')">
<div id="border-left" class="border left">
<div>Horror</div>
</div>
</div>
<script>addElement("left-scifi")</script>
<div class="film" id="wow" style="top:440px;left:500px;" onclick="playMovie('/video.html?=scifi','wow')">
<img id="wow-img" src="film/scifi/WarOfTheWorlds.jpg">
<div class="text">
<h2 class="sub-text">War of The Worlds</h2>
<p><span class="sub-text a">Humanity DESTROYS alien threat</span><span class="sub-text b">with one simple disease. Click</span><span class="sub-text c">to find out how!</span></p>
<p class="sub-text stars" style="margin: 0;">1979 • <i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star_border </i><i class="material-icons material-icons--round"> star_border </i></p>
</div>
</div>
<script>addElement("wow")</script>
<div class="film" id="metro" style="top:402px;left:50px;" onclick="playMovie('/video.html?=scifi','metro')">
<img id="metro-img" src="film/scifi/Metropolis.PNG">
<div class="text">
<h2 class="sub-text">Metropolis</h2>
<p><span class="sub-text a">In a world of puffy pants and scale</span><span class="sub-text b">models, it is up to C-3PO to save</span><span class="sub-text c">the proletariat.</span></p>
<p class="sub-text stars" style="margin: 0;">1957 • <i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star_border </i></p>
</div>
</div>
<script>addElement("metro")</script>
<div class="film" id="matrix" style="top:40px;left:420px;" onclick="playMovie('/video.html?=scifi','matrix')">
<img id="matrix-img" src="film/scifi/TheMatrix.jpg">
<div class="text">
<h2 class="sub-text">The Matrix</h2>
<p><span class="sub-text a">Would you give humanity over to</span><span class="sub-text b">robots for a juicy steak? One man</span><span class="sub-text c">says: yes.</span></p>
<p class="sub-text stars" style="margin: 0;">2001 • <i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star_border </i></p>
</div>
</div>
<script>addElement("matrix")</script>
<div class="film" id="island" style="top:380px;left:999px;" onclick="playMovie('/video.html?=scifi','island')">
<img id="island-img" src="film/scifi/TheIslandOfDrMoreau.jpg">
<div class="text">
<h2 class="sub-text">Island of Dr. Moreau</h2>
<p><span class="sub-text a">White-sand beaches, Marlon</span><span class="sub-text b">Brando, cannibalism — this</span><span class="sub-text c">beautiful, exotic island's got it all!</span></p>
<p class="sub-text stars" style="margin: 0;">2012 • <i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star_border </i><i class="material-icons material-icons--round"> star_border </i><i class="material-icons material-icons--round"> star_border </i><i class="material-icons material-icons--round"> star_border </i></p>
</div>
</div>
<script>addElement("island")</script>
<div class="film" id="rpo" style="top:80px;left:870px;" onclick="playMovie('/video.html?=scifi','rpo')">
<img id="rpo-img" src="film/scifi/ReadyPlayerOne.jpg">
<div class="text">
<h2 class="sub-text">Ready Player One</h2>
<p><span class="sub-text b">Art is dead and capitalism killed it.</span></p>
<p class="sub-text stars" style="margin: 0;">1994 • <i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i><i class="material-icons material-icons--round"> star </i></p>
</div>
</div>
<script>addElement("rpo")</script>
</div> <!-- end of content -->
<div id="brightness"></div>
<div id="calibrator">
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
<div class="cali-bttn"></div>
</div>
</body>
</html>