-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathJay3.html
More file actions
348 lines (332 loc) · 18.1 KB
/
Copy pathJay3.html
File metadata and controls
348 lines (332 loc) · 18.1 KB
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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!DOCTYPE html>
<html lang="en" data-selected-theme="normal">
<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>Jay Star</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@400;500;600;700;800&family=Spectral:wght@200;300;400;600;700&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="images/Favicons/Jay512.png" sizes="512x512">
<link rel="icon" type="image/png" href="images/Favicons/Jay256.png" sizes="256x256">
<link rel="icon" type="image/png" href="images/Favicons/Jay180.png" sizes="180x180">
<link rel="icon" type="image/png" href="images/Favicons/Jay128.png" sizes="128x128">
<link rel="icon" type="image/png" href="images/Favicons/Jay96.png" sizes="96x96">
<link rel="icon" type="image/png" href="images/Favicons/Jay32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/Favicons/Jay16.png" sizes="16x16">
<style>
:root {
--hue: 180;
--hue2: 65;
--angle: 160deg;
--middleHR: "☀";
--middleImageHR: " ✦ • • ☀ • • ✦ ";
--middleLength: 15;
--middleAddition: "";
--answerDecor: "✎ ";
}
h2{
margin: 0;
font-size: 19.333333333px;
font-weight: 700;
line-height: 1;
}
.qAndA{
margin-bottom: 5px;
margin-top: 5px;
padding: 5px 20px 5px 20px;
text-align: center;
}
.qAndA{
color: var(--darkText);
mix-blend-mode: luminosity;
}
.tableOfContents{
font-size: 17.5px;
font-weight: 550;
text-align: center;
}
.tableOfContents ul{
list-style: none;
padding-left: 0;
}
#TeaserText p{
text-align: left;
}
.Tab0{
padding-left: 10px;
}
.Tab1{
padding-left: 30px;
}
.Tab2{
padding-left: 50px;
}
.Tab3{
padding-left: 70px;
}
.Tab4{
padding-left: 90px;
}
audio::-webkit-media-controls {
background-color: hsl(calc(var(--hue2) + 90), 75%, 70%) !important;
}
.audio-player div h2{
color: hsl(calc(var(--hue2) + 90), 40%, 25%) !important;
}
.audioButtons:hover, audio::-webkit-media-controls-mute-button:hover, audio::-webkit-media-controls-play-button:hover{
background-color: hsl(calc(var(--hue2) + 270), 50%, 70%) !important;
}
audio::-webkit-media-controls-mute-button, audio::-webkit-media-controls-play-button,
.audioButtons, audio::-webkit-media-controls-timeline, audio::-webkit-media-controls-volume-control-container
{
background-color: hsl(calc(var(--hue2) + 270), 50%, 50%) !important;
}
[data-selected-theme="alt"] audio::-webkit-media-controls{
background-color: hsl(calc(var(--hue2) + 90), 75%, 30%) !important;
}
[data-selected-theme="alt"] .audio-player div h2{
color: hsl(calc(var(--hue2) + 90), 40%, 75%) !important;
}
[data-selected-theme="alt"] audio::-webkit-media-controls-volume-control-container, [data-selected-theme="alt"] audio::-webkit-media-controls-timeline, [data-selected-theme="alt"] .audioButtons, [data-selected-theme="alt"] audio::-webkit-media-controls-mute-button, [data-selected-theme="alt"] audio::-webkit-media-controls-play-button{
background-color: hsl(calc(var(--hue2) + 270), 50%, 50%) !important;
}
[data-selected-theme="alt"] .audioButtons:hover, [data-selected-theme="alt"] audio::-webkit-media-controls-mute-button:hover, [data-selected-theme="alt"] audio::-webkit-media-controls-play-button:hover{
background-color: hsl(calc(var(--hue2) + 270), 50%, 70%) !important;
}
.tableOfContents a {
color: var(--darkText);
padding: 0 .25rem;
margin: 0 -.25rem;
position: relative;
transition: color .55s ease-in-out;
}
.tableOfContents a:hover {
color: var(--lightColor);
}
.tableOfContents a:after {
border-radius: 25px;
transition: box-shadow .5s ease-in-out;
box-shadow: inset 0 0 0 0 var(--darkText);
content: '';
z-index: -1;
position: absolute;
left: -5px;
height: 100%;
width: calc(100% + 10px);
top: 0%;
}
.tableOfContents a:hover:after {
box-shadow: inset 500px 0 0 0 var(--darkText);
}
[data-selected-theme="alt"] .tableOfContents a:hover {
color: var(--lightColor) !important;
text-decoration-color: var(--lightColor) !important;
}
@media (min-width: 530px){
.qAndA, .tableOfContents{
padding-left:15vw;
padding-right:15vw;
}
}
</style>
<link rel="stylesheet" href="CSS/HeadersAndDefaults.css">
<link rel="stylesheet" href="CSS/Character.css?v=1">
<link rel="stylesheet" href="CSS/Audioplayer.css">
<link rel="stylesheet" href="CSS/CollapsibleGroup.css">
<link rel="stylesheet" href="CSS/HrStyles.css">
<link rel="stylesheet" href="CSS/Nav.css">
<script src="nav.js"></script>
<script src="Jay.js"></script>
<script>
let current = 0;
let names = [" Your Stupid Face - Kaden MacKay "," Prisoner Of My Past - Spies Are Forever ", " Scrawny - Wallows ", " I See Stars - Mean Girls ", " What If Tomorrow Comes - Starkid's "/*, " One Jump Ahead - Aladdin "*/];
let songs = ["Audio/Your Stupid Face.mp3", "Audio/Prisoner Of My Past.mp3", "Audio/Wallows - Scrawny.ogg", "Audio/I See Stars.ogg", "Audio/What If Tomorrow Comes.ogg"/*, "Audio/One Jump Ahead.ogg"*/];
</script>
<script src="Audioplayer.js"></script>
</head>
<body>
<header>
<div class="navbar">
<h3 id="SiteName">Prismoria</h3>
<div class="flex-container">
<a href="index.html" id="TheParticle">The Particle</a>
<div class="dropdown">
<button class="dropbtn Selected" id="Characters">Characters
</button>
<div class="dropdown-content">
<a href="Jay.html">Jay Star</a>
<a href="Jacob.html">Jacob Jackson</a>
<a href="Sam.html">Samuel Broteez</a>
<a href="Elliot.html">Elliot Evans</a>
<!-- <a href="YoungElliot.html">(Younger) Elliot Evans</a>
<a href="Adam.html">Adam Zondervan</a>
<a href="Rene.html">Rene Tickle</a> -->
</div>
</div>
<a href="SomeStories.html" id="SomeStories">Some Stories</a>
<a href="Updates.html" id="Updates">Site Updates</a>
</div>
</div>
</header>
<main>
<div class="sectionHeader" id="Name"><h1>Jay Star</h1></div>
<div class="sectionHeader"><h1>Table of Contents</h1></div>
<p>PS: Sorry Apple users, I developed this before I learned that Apple CSS is differnet from literally any other CSS</p>
<div class="tableOfContents">
<ul>
<li><a href="#CharacterSheet">Character Sheet</a></li>
<li><a href="#Pendant">What is the pendant?</a></li>
</ul>
</div>
<div class="sectionHeader" id="CharacterSheet"><h1>Character Sheet</h1></div>
<div class="tw">
<div class="audio-player">
<div><h2>
<button id="PrevSong" onclick="playPrev()" class="audioButtons"></button>
<span id="SongName"> Your Stupid Face - Kaden MacKay </span>
<button id="NextSong" onclick="playNext()" class="audioButtons"></button>
</h2></div>
<audio preload="auto" onended="playNext()" id="player" src="Audio/Your Stupid Face.mp3" type="audio/mpeg" controls controlsList="nodownload noplaybackrate"></audio>
</div>
<div class="playlist">
<p><a target="_blank" href="https://open.spotify.com/playlist/6ApciFSeOOPQwbGqU9i09F?si=IAZiz4v0RHme3Rym8-1uTA&pi=oyJym-XWSI-2M">Spotify Playlist</a></p>
<!-- <p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuCgiZfGPdeMlhH7HS4rDRik&si=dLj1yH7fsCU0bz8N">Main Youtube Playlist</a></p>
<p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuAN28eDlC8Hmb4m9tH-cOri&si=-w4_85zenZaFKtuG">Jay x Jacob</a></p>
<p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuBQY8G4rIN0BXgmUxmLcQq8&si=vRej4aPODgU4zpG0">Jay x Sam</a></p>
<p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuDj3efef2_WN3kk1o0mrDoc&si=KHUFqjzjmODM-MlS">Jay x Elliot</a></p>
<p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuAKfbFCKFIH8w4QnUiOtsgI&si=VmaZRyQFHb9IiFxe">Jay x Jacob x Sam</a></p> -->
</div>
<p>╭━━━━━━━━━━━━━━━━╮</p>
<p>Trigger Warnings</p>
<p>All. If you have any triggers, <br>do not look at this character.</p>
<p>╰━━━━━━━━━━━━━━━━╯</p>
</div>
<div class="sectionLabel">
<hr>
<p><b>Contents</b></p>
<hr>
</div>
<p>I. Teaser</p>
<p>II. Basic info</p>
<p>III. Health and Abilities</p>
<p>IV. Appearance</p>
<p>V. Personality</p>
<p>VI. Self Perception</p>
<p>VII. Relations</p>
<p>VIII. Roleplay Info</p>
<hr class="ImageTop">
<img src="images/Jay/JayPfp.jpg">
<p class="quoteCaption">“I kill everything I touch...”</p>
<hr class="ImageBottom">
<div class="sectionLabel">
<hr>
<p><b>Teaser</b></p>
<hr>
</div>
<details>
<summary><h1>Teaser</h1></summary>
<div class="content" id="TeaserText"></div>
</details>
<hr class="ImageTop">
<img src="images/Jay/Pendant.jpg">
<p class="quoteCaption">“Speak only when spoken to. Do what you're told to do. <br>Feel what you're told to feel. Don't fight back, don't resist. <br>Be the perfect test subject you are.”</p>
<hr class="ImageBottom">
<div class="sectionLabel">
<hr>
<p><b>Basic Info</b></p>
<hr>
</div>
<div class="info" id="BasicInfo"></div>
<hr class="ImageTop">
<img src="images/Jay/Sketchbook.png">
<p class="quoteCaption">“He was my sunshine. There's no sunshine anymore. Only...<br>Darkness. Endless darkness.”</p>
<hr class="ImageBottom">
<div class="sectionLabel">
<hr>
<p><b>Health and Abilities</b></p>
<hr>
</div>
<div class="info" id="Health"></div>
<hr class="ImageTop">
<img src="images/Jay/Magic.jpg">
<p class="quoteCaption">“Dad didn't do anything. Oh, it was his body, but it wasn't him.”</p>
<hr class="ImageBottom">
<div class="sectionLabel">
<hr>
<p><b>Appearance</b></p>
<hr>
</div>
<div class="info" id="Appearance"></div>
<hr class="ImageTop">
<img src="images/Jay/Locks.png">
<p class="quoteCaption">“Trees are better. Beds steal innocence.”</p>
<hr class="ImageBottom">
<div class="sectionLabel">
<hr>
<p><b>Personality</b></p>
<hr>
</div>
<div class="info" id="Personality"></div>
<hr class="ImageTop">
<img src="images/Jay/Mad Jay Transparent.png">
<p class="quoteCaption">“I am not cute, I am as manly as you can get!”</p>
<hr class="ImageBottom">
<div class="sectionLabel">
<hr>
<p><b>Self-Perception</b></p>
<hr>
</div>
<div class="info" id="Perception"></div>
<hr class="ImageTop">
<img src="images/Jay/Forest.jpg">
<p class="quoteCaption">“It's not that I hate myself, I don't. I just know what I am and what I have to do.<br>For everyone else's sake.”</p>
<hr class="ImageBottom">
<div class="sectionLabel">
<hr>
<p><b>Relations</b></p>
<hr>
</div>
<div class="info" id="Relations"></div>
<hr class="ImageTop">
<img src="images/Jay/Cell.jpg">
<p class="quoteCaption">“This room is mocking you.”</p>
<hr class="ImageBottom">
<div class="sectionLabel">
<hr>
<p><b>Roleplay Info</b></p>
<hr>
</div>
<div class="info" id="RpInfo"></div>
<div class="sectionHeader" style="margin-top: 10px;" id="Pendant"><h1>What is the pendant?</h1></div>
<div class='qAndA'><h2>How was it created?</h2>
<p>One day, Jay saw a blue tiger when he was only 3, and he decided to follow it into the woods. He was a toddler and didn’t realize how dangerous that was. The tiger led him to a portal, and Jay tried to go through it. Nothing happened. So he tried again. And again, and again.</p>
<p>Soon enough, it was too much and the portal suddenly flew up into the air, spinning rapidly. It exploded into a bunch of pieces, almost crushing Jay as the piece fell back to the ground but the tiger pushed him out of the way. Not wanting to lose it forever, the tiger pushed the pieces together and pulled off some magic that condensed all the broken pieces into a small crystal on a coppery chain. Then it gave the necklace to Jay for safe-keeping.</p></div>
<div class='qAndA'><h2>Why was it there?</h2>
<p>That tiger from before came from another dimension, a dimension full of prophets and shapeshifters. She was only a kid, and she messed with the timeline. That was a huge crime, and the higher ups sentenced her to be banished to a different dimension. That’s where the portal came from. But it was a one way portal, so she couldn’t go back because she was banned. So going through it did nothing. She thought maybe another creature could go through and convince the higher ups to give her another chance, that’s why she got Jay. She just wanted to go back home and see her family.</p></div>
<div class='qAndA'><h2>What does it do?</h2>
<p>Well, it gave Jay powers. He was able to use the magic that was held within the crystal and harness its energy.</p></div>
<div class='qAndA'><h2>What went wrong?</h2>
<p>One day, the scientists went too far. In trying to find out how to make magic, they pushed Jay and the pendant too far. The pendant turned from it’s red color to a golden-ish glow, which seeped into his heart, infecting it. The heart infected his blood, which then went throughout his entire body. Once it got to his brain, the pendant was able to talk to Jay. It gained a mind of its own. Because of the awful situation Jay was in, the pendant learned to be scared of everyone and to view everyone and everything as a threat. So, it always wants Jay to kill and eliminate all threats. It is still just a rock, it has no empathy or emotions.</p>
<p>Jay however does not want to kill people, he doesn’t like listening to the pendant. So the pendant has to use other methods to make him do what it tells him. It yells at him, burns him, makes him relive memories he wants to forget over and over until he gives in. It uses him like he’s nothing but a vessel.</p></div>
<div class='qAndA'><h2>What do the colors mean?</h2>
<p>Blue - It’s in its normal state and isn’t using magic.</p>
<p>Red - It’s overheated. Either it’s using too much energy or it’s mad at Jay and thus overheats, burning him.</p>
<p>Gold - Jay has pushed it past the danger phase and it is now trying to take total control over him. Jay’s eyes will turn red at this point too, but they go back to normal after he sleeps.</p></div>
<div class='qAndA'><h2>What powers can he use?</h2>
<p>All.</p></div>
<div class='qAndA'><h2>Isn’t that OP?</h2>
<p>No, because he can only use magic for a very short amount of time, and the harder the magic, the more it takes out of him. The pendant overheats very fast, so he doesn’t like using magic. It also gives the pendant more control over him.</p></div>
<div class='qAndA'><h2>How does the particle affect him?</h2>
<p>It doesn't. The pendant is able to maintain his heath and sanity. It doesn't let the particle enter his body because that threatens to take away some of the power it holds over him.</p></div>
<div class='qAndA'><h2>How much of Jay's health does it regulate? And why?</h2>
<p>If Jay dies, it dies, so it will not let Jay die. He doesn't need to eat, he doesn't need to sleep, he can be stabbed, he can be shot, he can jump off a building, he will not die. The pendant heals him just enough to stay alive. Though, it will not let any wound heal, it keeps those from getting better. Then when it needs them, it can open up all those wounds to hurt Jay and make him listen. It has all the power over Jay. If he didn't have the pendant, he would be dead.</p></div>
</main>
<footer>
<button data-theme="normal" aria-pressed="true" id="NormalMode"></button>
<button data-theme="alt" aria-pressed="false" id="AltMode"></button>
<!-- <button data-theme="custom" aria-pressed="false" id="CustMode"></button> -->
</footer>
</body>
</html>