-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
244 lines (244 loc) · 12.1 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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Tempest</title>
<link rel="stylesheet" href="index.css">
<link rel="icon" href="/images/graphics/favicon.png">
<script defer src="index.js" type="module"></script>
</head>
<body>
<img id="background" src="/images/graphics/island.jpeg">
<!-- Scroll Containment (Scroll without moving the body/background)-->
<div id="scroll-wrapper">
<!-- Navbar -->
<div id="navbar" deactivated>
<!-- Links Left -->
<div id="navbar-links-left">
<a class="navbar-link" href="#overview">Overview</a>
<a class="navbar-link" href="#meaning">Underlying Meaning</a>
</div>
<a class="navbar-link" href="#landing"><h1 id="navbar-title">The Tempest</h1></a>
<!-- Links Right -->
<div id="navbar-links-right">
<a class="navbar-link" href="#links">Related Links</a>
<a class="navbar-link" href="#credits">Credits</a>
</div>
</div>
<div id="audio">
<div id="track-details">
<img id="track-picture" src="/images/graphics/juliusH-favicon.png" alt="Track Picture">
<div id="track-text-info">
<span id="track-name">Sandy Beach</span>
<span id="track-artist">JuliusH</span>
</div>
</div>
<div id="audio-controls">
<img id="audio-state" src="/images/icons/play.svg" alt="Track Play/Pause">
</div>
</div>
<!-- Landing Page -->
<div id="landing">
<div id="landing-title">
<span id="title-first">The</span> <span id="title-second">Tempest</span>
</div>
</div>
<!-- Overview Page -->
<div class="section" id="overview">
<h1 class="title hidden">OVERVIEW</h1>
<div id="overview-wrapper">
<img class="paragraph-image hidden" src="/images/graphics/tempest-boat.jpg">
<p class="desc hidden" id="overview-desc">"The Tempest" is a play written by the author William Shakespeare, known as a tragicomedy telling the story of Prospero, a former Duke of Milan. Prospero is on an island with his daughter Miranda, and with the help of magic powers from his book and staff, he forms a violent storm known as a tempest to bring his enemies close to him on the island. From this, he can have an opportunity for revenge on his enemies. As the play progresses, events lead the characters closer and closer to Prospero's cell, and eventually, all the characters reach a reconciliation. The reason for this was Prospero's discovery of forgiveness for his past actions as the events unfolded.</p>
</div>
</div>
<!-- (Underlying) Meaning Page -->
<div class="section" id="meaning">
<div class="title-wrapper">
<h1 class="title hidden" id="has-subtitle">UNDERLYING MEANING</h1>
<h3 class="subtitle hidden">DESIRE</h3>
</div>
<div id="meaning-wrapper">
<p class="desc hidden" id="meaning-desc">This play, (The Tempest) is a multi-layered play by Shakespeare. Being one of the last plays he ever wrote, there are vast amounts of hidden meanings, themes, symbols, and more. Desire is a significant example of an underlying meaning in this play and is a motive for moving the plot. Prospero is a paragon of desire; to keep his daughter safe, to be the rightful Duke of Milan, and to seek revenge on Antonio. Other characters include Antonio, Caliban, Miranda, Ferdinand, Stephano, and Trinculo. To explain, Miranda and Ferdinand desire marriage and love, Caliban, Ferdinand, and Trinculo want Prospero dead, and Antonio plans to maintain his power over Milan. Shakespeare skillfully included this underlying meaning of desire throughout the play, assembling the plot and characters intriguing as they grapple with their motivations and longings.</p>
<img class="paragraph-image hidden" src="/images/graphics/prospero-miranda.png">
</div>
</div>
<!-- (Related) Links Page -->
<div class="section" id="links">
<div class="title-wrapper">
<h1 class="title hidden" id="links-title">RELATED LINKS</h1>
</div>
<p class="hidden" id="link-disclaimer"><span id="red">DISCLAIMER: </span>All links have been verified and analyzed. A gold check marks a .edu site, and a sliver one marks a non .edu site.</p>
<div id="links-wrapper">
<!-- Shakespeare Link -->
<div class="link hidden" id="shakespeare-div">
<div class="link-detail">
<p class="link-name">Learn About the Man Himself</p>
<p class="link-source"><img class="link-verification" src="/images/icons/regular-verification.svg">Britannica</p>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="shakespeare-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
<button class="link-buttons" id="button-link-shakespeare"><img class="link-images" src="/images/icons/information.svg" alt="Link Information Image"></button>
</div>
</div>
<!-- Full Play Link -->
<div class="link hidden" id="play-div">
<div class="link-detail">
<p class="link-name">"The Tempest" Full Online Play</p>
<p class="link-source"><img class="link-verification" src="/images/icons/edu-verification.svg">Massachusetts Institute of Technology</p>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="play-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
<button class="link-buttons" id="button-link-play"><img class="link-images" src="/images/icons/information.svg" alt="Link Information Image"></button>
</div>
</div>
<!-- Everything for Tempest Link -->
<div class="link hidden" id="everything-div">
<div class="link-detail">
<p class="link-name">Everything Tempest</p>
<p class="link-source"><img class="link-verification" src="/images/icons/regular-verification.svg">Bell Shakespeare</p>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="everything-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
<button class="link-buttons" id="button-link-everything"><img class="link-images" src="/images/icons/information.svg" alt="Link Information Image"></button>
</div>
</div>
<!-- A Library for "The Tempest" Link -->
<div class="link hidden" id="library-div">
<div class="link-detail">
<p class="link-name">A Library for "The Tempest"</p>
<p class="link-source"><img class="link-verification" src="/images/icons/edu-verification.svg">Folger Shakespeare Library</p>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="library-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
<button class="link-buttons" id="button-link-library"><img class="link-images" src="/images/icons/information.svg" alt="Link Information Image"></button>
</div>
</div>
<!-- Link 'Modal' -->
<div id="link-modal">
<div id="modal-header">
<span id="modal-title">PLACEHOLDER</span>
<div id="modal-exit"><img id="modal-exit-image" src="/images/icons/close.svg"></div>
</div>
<div id="modal-content">
<div class="modal-attr" id="modal-source">
<span class="source-title">Source</span>
<span class="source-detail" id="source-detail">PLACEHOLDER</span>
</div>
<div class="modal-attr" id="modal-use">
<span class="source-title">Suggested Uses</span>
<span class="source-detail" id="source-uses">
<li>PLACEHOLDER</li>
</span>
</div>
<div class="modal-attr" id="modal-desc">
<span class="source-title">Description</span>
<span class="source-detail" id="source-desc">PLACEHOLDER</span>
</div>
</div>
</div>
</div>
</div>
<!-- Credits Page -->
<div class="section" id="credits">
<div class="title-wrapper">
<h1 class="title hidden">CREDITS</h1>
</div>
<div id="credits-wrapper">
<!-- Creator's Link -->
<div class="credit-link hidden">
<div class="credits-link-wrapper">
<img class="credit-favicon" src="/images/graphics/ncp-icon.png" alt="Nathan Parker Logo">
<div class="link-detail">
<p class="link-name">Nathan Parker</p>
<p class="link-used">Creator / Lead Developer</p>
</div>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="ncp-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
</div>
</div>
<!-- Valerie's Link -->
<div class="credit-link hidden">
<div class="credits-link-wrapper">
<img class="credit-favicon" src="/images/graphics/valeriesparks-favicon.jpg" alt="Valeries Sparks Site Favicon">
<div class="link-detail">
<p class="link-name">Valerie Sparks</p>
<p class="link-used">Background Image, Overview Image, and Favicon</p>
</div>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="valerie-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
</div>
</div>
<!-- Julius's Link -->
<div class="credit-link hidden">
<div class="credits-link-wrapper">
<img class="credit-favicon" src="/images/graphics/juliusH-favicon.png" alt="Julius H. Favicon">
<div class="link-detail">
<p class="link-name">Julius H.</p>
<p class="link-used">Background Music (Pixabay)</p>
</div>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="juliush-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
</div>
</div>
<!-- Britannica's Link -->
<div class="credit-link hidden">
<div class="credits-link-wrapper">
<img class="credit-favicon" src="/images/graphics/britannica-favicon.png" alt="Britannica Site Favicon">
<div class="link-detail">
<p class="link-name">Britannica</p>
<p class="link-used">"The Tempest" Resources Link and Favicon</p>
</div>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="britannica-mit-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
</div>
</div>
<!-- MIT's Link -->
<div class="credit-link hidden">
<div class="credits-link-wrapper">
<img class="credit-favicon" src="/images/graphics/shakespeare-mit-favicon.png" alt="MIT Shakespeare Site Favicon">
<div class="link-detail">
<p class="link-name">Massachusetts Institute of Technology</p>
<p class="link-used">"The Tempest" Full Online Play Link and Favicon</p>
</div>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="shakespeare-mit-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
</div>
</div>
<!-- Bell Shakespeare's Link -->
<div class="credit-link hidden">
<div class="credits-link-wrapper">
<img class="credit-favicon" src="/images/graphics/bellshakespeare-favicon.png" alt="Bell Shakespeare Site Favicon">
<div class="link-detail">
<p class="link-name">Bell Shakespeare</p>
<p class="link-used">"The Tempest" Resources Link, Underlying Meaning Picture, and Favicon</p>
</div>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="bell-shakespeare-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
</div>
</div>
<!-- Folgers's Link -->
<div class="credit-link hidden">
<div class="credits-link-wrapper">
<img class="credit-favicon" src="/images/graphics/folger-favicon.png" alt="Folger Shakespeare Library Site Favicon">
<div class="link-detail">
<p class="link-name">Folger Shakespeare Library</p>
<p class="link-used">"The Tempest" Resources Link and Favicon</p>
</div>
</div>
<div class="link-images-wrapper">
<button class="link-buttons" id="folger-link"><img class="link-images" src="/images/icons/link.svg" alt="Link Redirect Image"></button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>