-
Notifications
You must be signed in to change notification settings - Fork 3
/
drama.html
132 lines (117 loc) · 7.92 KB
/
drama.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
<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 > Drama</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="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: #efc4e5;
--border: #ffe7f9;
--foreground: #000;
--foreground-color: rgba(74, 5, 58, 0.8);
--star-color: rgba(74, 5, 58, 0.5);
}
.film:hover img
{
box-shadow: -1px 3px 20px 0px rgba(109, 10, 86, 0.1), -1px 3px 9px 0px rgba(109, 10, 86, 0.6), -1px 2px 20px 5px rgba(214, 89, 0, 0.3);
}
.film img
{
box-shadow: rgba(109, 10, 86, 0.1) -1px 3px 8px 0px, 1px 3px 9px 0px rgba(109, 10, 86, 0.5), rgba(214, 89, 0, 0.2) -1px 2px 20px 2px;
}
</style>
<div class="target top" id="top-drama" onclick="gotoPage('/settings.html?=drama','top')">
<div id="border-top" class="border top">
<div>Settings</div>
</div>
</div>
<script>addElement("top-drama")</script>
<div class="target bottom" id="bottom-drama" onclick="gotoPage('/apps.html','bottom')">
<div id="border-bottom" class="border bottom">
<div>Search Apps</div>
</div>
</div>
<script>addElement("bottom-drama")</script>
<div class="target right" id="right-drama" onclick="gotoPage('/horror.html','right')">
<div id="border-right" class="border right">
<div>Horror</div>
</div>
</div>
<script>addElement("right-drama")</script>
<div class="target left" id="left-drama" onclick="gotoPage('/scifi.html','left')">
<div id="border-left" class="border left">
<div>Sci-fi</div>
</div>
</div>
<script>addElement("left-drama")</script>
<div class="film" id="apocolypse" style="top:400px;left:850px;" onclick="playMovie('/video.html?=drama','apocolypse')">
<img id="apocolypse-img" src="film/3.jpg">
<div class="text">
<h2 class="sub-text">Apocolypse Now</h2>
<p><span class="sub-text a">The cult-classic docuseries that</span><span class="sub-text b">dives deep into the heart of</span><span class="sub-text c">Vietnamese cuisine.</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 </i><i class="material-icons material-icons--round"> star_border </i></p>
</div>
</div>
<script>addElement("apocolypse")</script>
<div class="film" id="angry" style="top:40px;left:40px;" onclick="playMovie('/video.html?=drama','angry')">
<img id="angry-img" src="film/7.jpeg">
<div class="text">
<h2 class="sub-text">12 Angry Men</h2>
<p><span class="sub-text a">A bunch of dudes in a room yelling</span><span class="sub-text b">all at once because they're mad</span><span class="sub-text c">they have to do jury duty.</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 </i></p>
</div>
</div>
<script>addElement("angry")</script>
<div class="film" id="vertigo" style="top:130px;left:540px;" onclick="playMovie('/video.html?=drama','vertigo')">
<img id="vertigo-img" src="film/8.jpg">
<div class="text">
<h2 class="sub-text">Vertigo</h2>
<p><span class="sub-text a">Faced with crippling dizziness, one</span><span class="sub-text b">man has the courage to sit down</span><span class="sub-text c">and take a minute.</span></p>
<p class="sub-text stars" style="margin: 0;">1958 • <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("vertigo")</script>
<div class="film" id="django" style="top:70px;left:950px;" onclick="playMovie('/video.html?=drama','django')">
<img id="django-img" src="film/6.png">
<div class="text">
<h2 class="sub-text">Django: Unchained</h2>
<p><span class="sub-text a">Did you know that Django was white</span><span class="sub-text b">in the 1966 version? He totally was,</span><span class="sub-text c">look it up.</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 </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("django")</script>
<div class="film" id="leon" style="top:450px;left:70px;" onclick="playMovie('/video.html?=drama','leon')">
<img id="leon-img" src="film/5.jpg">
<div class="text">
<h2 class="sub-text">Léon</h2>
<p><span class="sub-text a">The chilling tale of a notorius child</span><span class="sub-text b">predetor, Léon, and how he was</span><span class="sub-text c">brought to justice.</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_border </i></p>
</div>
</div>
</div> <!-- end of content -->
<script>addElement("leon")</script>
<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>