Jay.js

window.onload = () => {
    getVersionNumber();
    let headStyles = `
    <link rel="stylesheet" href="CSS/HeadersAndDefaults.css?v=${versionNumber}">
    <link rel="stylesheet" href="CSS/Character.css?v=${versionNumber}">
    <link rel="stylesheet" href="CSS/Audioplayer.css?v=${versionNumber}">
    <link rel="stylesheet" href="CSS/CollapsibleGroup.css?v=${versionNumber}">
    <link rel="stylesheet" href="CSS/HrStyles.css?v=${versionNumber}">
    <link rel="stylesheet" href="CSS/Nav.css?v=${versionNumber}">
    `;
    document.querySelector('head').innerHTML += headStyles;
    let player = document.querySelector('#player');
    player.pause();
    CreateNavbar();
    document.querySelector('#TeaserText').innerHTML = `
    <p class="Tab0">I am in a room</p>
    <p class="Tab0">There is no light</p>
    <p class="Tab1">Only darkness</p>
    <p class="Tab0">What is in ー the room ー is unknown</p>
    <p class="Tab0">All that is known</p>
    <p class="Tab1">Is that it’s all I remember.</p>
    <p class="Tab0"></p>
    <p class="Tab0">This dark, dark room</p>
    <p class="Tab0">There is some shuffling about every once in a while ー</p>
    <p class="Tab1">From what, I do not know</p>
    <p class="Tab0">Some murmurs, some quarls</p>
    <p class="Tab0">A gust of wind chilling the foul air</p>
    <p class="Tab0"></p>
    <p class="Tab0">A</p>
    <p class="Tab1">Sheet.</p>
    <p class="Tab0">No, that’s not the word.</p>
    <p class="Tab0">A</p>
    <p class="Tab0">Curtain</p>
    <p class="Tab0">Set aglow, something shining behind it.</p>
    <p class="Tab0">A white curtain</p>
    <p class="Tab1">Seemingly glowing.</p>
    <p class="Tab0">Quite peculiar.</p>
    <p class="Tab0"></p>
    <p class="Tab0">The light</p>
    <p class="Tab1">Faded behind the sheet of white</p>
    <p class="Tab0">Spills into the room</p>
    <p class="Tab0">Like water down a mountain.</p>
    <p class="Tab0">Now it is clear</p>
    <p class="Tab1">This was never a room.</p>
    <p class="Tab1">This is a cage.</p>
    <p class="Tab0"></p>
    <p class="Tab0">The curtains ー they hang over steel bars</p>
    <p class="Tab1">A window</p>
    <p class="Tab2">With no pane, no protection</p>
    <p class="Tab3">To keep the cold winter air out.</p>
    <p class="Tab0">The gray floor</p>
    <p class="Tab1">The gray walls</p>
    <p class="Tab2">The concrete box I’m in</p>
    <p class="Tab0">Is covered with blood</p>
    <p class="Tab1">The only splash of color</p>
    <p class="Tab2">In this little box of mine.</p>
    <p class="Tab0">The door</p>
    <p class="Tab1">Much too thick than needed</p>
    <p class="Tab2">With a thousand locks to keep me in</p>
    <p class="Tab3">And no key in sight</p>
    <p class="Tab0"></p>
    <p class="Tab0">The darkness was better than this</p>
    <p class="Tab0">It was better</p>
    <p class="Tab1">When I could not see to see</p>
    <p class="Tab0">It was better</p>
    <p class="Tab1">When there was no unbreakable door</p>
    <p class="Tab0">What is this light?</p>
    <p class="Tab0">Why must it come to me?</p>
    <p class="Tab0">Go bother someone else</p>
    <p class="Tab1">Go be a fairy somewhere else</p>
    <p class="Tab0">I like this little box of mine</p>
    <p class="Tab1">I don’t want things to change.</p>
    <p class="Tab1">This box is all I’ve ever known</p>
    <p class="Tab2">I need more sheets</p>
    <p class="Tab3">To cover up that little light</p>
    <p class="Tab4">Tapping on my broken window.</p>
    <p class="Tab0"></p>
    <p class="Tab0">I spot a corner covered in red</p>
    <p class="Tab1">Calling out to me.</p>
    <p class="Tab0">If I can’t keep my room the same</p>
    <p class="Tab0">This corner will have to do.</p>
    <p class="Tab0">This foul-smelling corner</p>
    <p class="Tab1">Will be the only thing</p>
    <p class="Tab2">I can call mine.</p>
    <p class="Tab0">I can not extinguish the light</p>
    <p class="Tab1">So I’ll just have to block it out</p>
    <p class="Tab0"></p>
    <p class="Tab0">But the light just gets brighter</p>
    <p class="Tab0">My heart beats faster</p>
    <p class="Tab0">Why won’t it go away?</p>
    <p class="Tab0">It’s been so long</p>
    <p class="Tab1">I’ve been sitting here</p>
    <p class="Tab2">Alone</p>
    <p class="Tab1">For three long years</p>
    <p class="Tab1">Trying to block out the light</p>
    <p class="Tab0">What even is a year?</p>
    <p class="Tab0">It’s all just one big muddle of blackness.</p>
    <p class="Tab0"></p>
    <p class="Tab0">Maybe I should give that light a chance.</p>
    <p class="Tab0">It has never done any harm</p>
    <p class="Tab1">It has never left me.</p>
    <p class="Tab0">…</p>
    <p class="Tab0">It has never left me</p>
    <p class="Tab1">Alone</p>
    <p class="Tab0">Maybe I could ask it</p>
    <p class="Tab0">“Hey</p>
    <p class="Tab1">Little light of mine</p>
    <p class="Tab1">Why are you still here?</p>
    <p class="Tab0">Why</p>
    <p class="Tab0">Have you never left me</p>
    <p class="Tab0">Alone?”</p>
    <p class="Tab0">Maybe it knows</p>
    <p class="Tab1">How to break through those locks</p>
    <p class="Tab1">Sealing the door shut.</p>
    <p class="Tab0"></p>
    <p class="Tab0">So I gather my courage ー</p>
    <p class="Tab0">Push myself to my feet.</p>
    <p class="Tab0">With light tapping on the concrete floor</p>
    <p class="Tab0">I walk over to the curtains,</p>
    <p class="Tab1">Taking the sheets in my hands.</p>
    <p class="Tab0">Soft, harmless sheets</p>
    <p class="Tab1">Blocking out the light.</p>
    <p class="Tab0">I fling them open,</p>
    <p class="Tab0">The ray of light rushing in</p>
    <p class="Tab0">Like an old friend</p>
    <p class="Tab1">Wrapping around me in a hug.</p>
    <p class="Tab0">It’s so blindingly bright</p>
    <p class="Tab1">So beautifully white and blue.</p>
    <p class="Tab0">The light is behind the steel bar window,</p>
    <p class="Tab0">Flickering about with such energy.</p>
    <p class="Tab0">My heart yearns to join it ー</p>
    <p class="Tab1">That freely dancing sunshine</p>
    <p class="Tab0">But I am on the other side</p>
    <p class="Tab1">Peering out through cold</p>
    <p class="Tab2">Bloodstained bars.</p>
    <p class="Tab0"></p>
    <p class="Tab0">Once my eyes adjust</p>
    <p class="Tab1">The view behind the light</p>
    <p class="Tab1">Can finally be seen</p>
    <p class="Tab0">A grassy field with towering trees</p>
    <p class="Tab1">Flowers swaying in the wind.</p>
    <p class="Tab0">It felt like winter inside my little box</p>
    <p class="Tab0">But out there it’s summer</p>
    <p class="Tab1">When life flourishes</p>
    <p class="Tab2">When it thrives</p>
    <p class="Tab0">While I’m stuck in here</p>
    <p class="Tab1">Unable to spread my wings and fly</p>
    <p class="Tab0">What have I been doing all these years?</p>
    <p class="Tab0">Why was I so scared?</p>
    <p class="Tab0">This light never threatened me</p>
    <p class="Tab1">It only wanted to lead</p>
    <p class="Tab1">Show me a better life</p>
    <p class="Tab2">So that I may flourish too.</p>
    <p class="Tab0"></p>
    <p class="Tab0">I cling onto the metal bars</p>
    <p class="Tab0">Tugging with all my might</p>
    <p class="Tab0">But no matter how hard I try</p>
    <p class="Tab1">The steel bars remain standing strong</p>
    <p class="Tab0">It’s not until I realize the little light was not a light</p>
    <p class="Tab1">But something so much more</p>
    <p class="Tab0">That blinding brightness</p>
    <p class="Tab1">Can shine in me</p>
    <p class="Tab1">And shine</p>
    <p class="Tab1">I will try.</p>
    <p class="Tab0">This explosion of white light inside</p>
    <p class="Tab0">Puts a hand on my shoulder</p>
    <p class="Tab1">Offering me the strength</p>
    <p class="Tab2">The strength to break through my cage.</p>
    <p class="Tab0">The room around me crumbles</p>
    <p class="Tab1">Nothing more than specks of dust</p>
    <p class="Tab0">The warm summer air engulfs me</p>
    <p class="Tab1">The sweet smell of life surrounding</p>
    <p class="Tab0">I can finally be at rest</p>
    <p class="Tab1">Living with the little light inside me</p>
    <p class="Tab1">Thriving and learning how to fly</p>
    <p class="Tab0">But that paradise swiftly falls away</p>
    <p class="Tab1">As the hands of darkness grasp my legs</p>
    <p class="Tab1">And pull me back away</p>
    <p class="Tab0"></p>
    <p class="Tab0">I dig at the luscious green grass, the dirt</p>
    <p class="Tab1">Struggling to maintain my freedom</p>
    <p class="Tab0">The little light grabs my wrists to help</p>
    <p class="Tab1">To save me</p>
    <p class="Tab0">But two strong forces pulling opposite ways</p>
    <p class="Tab1">End up tearing me apart</p>
    <p class="Tab0">The room full of darkness rebuilding itself</p>
    <p class="Tab1">Blood splattering on the walls and floor as I’m torn</p>
    <p class="Tab1">All the light I feared in the beginning</p>
    <p class="Tab1">Fades away as my eyes grow heavy</p>
    <p class="Tab1">And darkness consumes my being.</p>
    <p class="Tab0">There is nothing now.</p>
    <p class="Tab0">Those curtains left shut once again.</p>
    <p class="Tab0">…</p>
    <p class="Tab0"></p>
    <p class="Tab0">I am in a room</p>
    <p class="Tab0">There is no light</p>
    <p class="Tab1">Only darkness</p>
    <p class="Tab0">What is in ー the room ー is unknown</p>
    <p class="Tab0">All that is known</p>
    <p class="Tab1">Is that it’s all I remember.</p>`;
    document.querySelector('#BasicInfo').innerHTML= `
    <p class="question">Birth Name</p>
    <p class="answer">Alexander Sebastian Green</p>
    <p class="question">Current Name</p>
    <p class="answer">Jay Star</p>
    <div class='brLarge'></div>
    <p class="question">First Name</p>
    <p class="answer">Jay</p>
    <p class="question">Meaning</p>
    <p class="answer">Victory, a bird, healer</p>
    <p class="question">Significance</p>
    <p class="answer">When he met Jacob, Jacob introduced himself then asked for Jays name. Jay wasn't used to talking much at the time, so he started to repeat Jacob's name very slowly, and Jacob cut him off halfway. He's been Jay ever since</p>
    <div class='brLarge'></div>
    <p class="question">Last Name</p>
    <p class="answer">Star</p>
    <p class="question">Significance</p>
    <p class="answer">In trying to come up with a last name, Jay tried to make it something that sounded cool and related to him. He's an outdoors type of guy, so one night, staring up at the stars, he decided he wanted Star to be his last name. Flashy last name, I know. He was a kid-</p>
    <div class='brLarge'></div>
    <p class="question">Nicknames</p>
    <p class="answer">Dolphin</p>
    <p><i>Reason</i></p>
    <p><i>He sounds like a dolphin when he laughs. He has a very high-pitched laugh</i></p>
    <p class="answer">Jay Bird</p>
    <p><i>Reason</i></p>
    <p><i>This is just a nickname his ex used to call him. There was no real reason behind it</i></p>
    <div class='brLarge'></div>
    <p class="question">Biological Gender</p>
    <p class="answer">Male</p>
    <p class="question">Preferred Gender</p>
    <p class="answer">Male</p>
    <p class="question">Pronouns</p>
    <p class="answer">He / him / his</p>
    <div class='brLarge'></div>
    <p class="question">Sexual Orientation</p>
    <p class="answer">Asexual</p>
    <p class="question">Romantic Orientation</p>
    <p class="answer">Pan-romantic</p>
    <div class='brLarge'></div>
    <p class="question">Age</p>
    <p class="answer">20 - 24 depending on the rp</p>
    <p class="question">Birthday</p>
    <p class="answer">Jay does not know. I do, but he doesn't know, so there's no reason to state it</p>
    <p class="question">Zodiac Sign</p>
    <p class="answer">Same answer as before</p>
    <div class='brLarge'></div>
    <p class="question">Occupation</p>
    <p class="answer">Actor or None</p>
    <div class='brLarge'></div>
    <p class="question">Where they live</p>
    <p class="answer">Prismoria</p>
    <div class='brLarge'></div>
    <p class="question">Languages</p>
    <p class="answer">English</p>`;
    document.querySelector('#Health').innerHTML = `
    <p class="question">Physical Illnesses</p>
    <p class="answer">... That is unknown</p>
    <p class="question">Mental Illnesses</p>
    <p class="answer">This is unknown as well</p>
    <div class='brLarge'></div>
    <p class="question">Triggers</p>
    <p class="answer">Basically everything</p>
    <div class='brLarge'></div>
    <p class="question">Mutation / Power</p>
    <p class="answer">He does not have a mutation that gives him a power, his powers come from his necklace. And he can use all types of powers</p>
    <p class="question">How long have they had it</p>
    <p class="answer">Since he was 3</p>
    <p class="question">What are the limitations (If it's a power)</p>
    <p class="answer">He can't use it for too long, otherwise the pendant starts to burn him and make him relive trauma in his head. He hates using magic for this reason</p>`;
    document.querySelector('#Appearance').innerHTML = `
    <p class="question">Height</p>
    <p class="answer">6'8"</p>
    <p class="answer">203.2 cm</p>
    <p class="question">Weight</p>
    <p class="answer">190 lbs.</p>
    <p class="answer">86.2 kg</p>
    <div class='brLarge'></div>
    <p class="question">Skin color</p>
    <p class="answer">Pale ivory</p>
    <div class='brLarge'></div>
    <p class="question">Hair color</p>
    <p class="answer">Yellow blonde</p>
    <p class="question">Hair texture</p>
    <p class="answer">Soft like a kittens fur</p>
    <p class="question">Hair style</p>
    <p class="answer">Curly and unbrushed</p>
    <div class='brLarge'></div>
    <p class="question">Eye color(s)</p>
    <p class="answer">Electric blue</p>
    <div class='brLarge'></div>
    <p class="question">Piercings</p>
    <p class="answer">None</p>
    <p class="question">Scars</p>
    <p class="answer">Many. Most of them are on his back. I can't describe them without revealing some of his backstory though</p>
    <p class="question">Tattoos</p>
    <p class="answer">None</p>
    <p class="question">Birthmark</p>
    <p class="answer">None</p>
    <p class="question">Freckles</p>
    <p class="answer">No</p>
    <div class='brLarge'></div>
    <p class="question">Accent / Voice</p>
    <p class="answer">Very low-pitched and deep, except for when he laughs. When he laughs, his voice goes up like, ten full octaves in pitch</p>
    <div class='brLarge'></div>
    <p class="question">Other</p>
    <p class="answer">He is extremely warm. Like, he's practically a personal heater. So, he gives the best hugs, because he's just so warm.</p>`;
    document.querySelector('#RpInfo').innerHTML = `
    <p class="question">Availability</p>
    <p class="answer">Open</p>
    <div class='brLarge'></div>
    <p class="question">Genres</p>
    <p class="answer">Fantasy</p>
    <p class="answer">Angst</p>
    <p class="answer">Sci-Fi</p>
    <p class="answer">Romance</p>
    <p class="answer">Mystery?</p>
    <p class="answer">Adventure</p>
    <div class='brLarge'></div>
    <p class="question">Other</p>
    <p class="answer">Jay is an rp-killer. He is so closed off and distant at the start that people often get stuck and can't make any progress with him. He acts like a brick wall sometimes, and it makes the rp hit a brick wall. If your character isn't persistent enough, gives up easily, or gets scared off easily, it's not going to work out with Jay. You will hit a brick wall. Jay is my hardest character to start an rp with.</p>
    <p class="answer">If you do manage to get past the beginning stages with him, the rp can be very interesting. Some of my best rps started with him.</p>`;
    document.querySelector('#Relations').innerHTML=`
    <p class="question">Biological Mother</p>
    <p class="answer">Unknown</p>
    <div class='brLarge'></div>
    <p class="question">Biological Father</p>
    <p class="answer">Unknown</p>
    <div class='brLarge'></div>
    <p class="question">Adoptive Father 1</p>
    <p class="answer">Nico</p>
    <p class="question">Status</p>
    <p class="answer">Alive</p>
    <div class='brLarge'></div>
    <p class="question">Adoptive Father 2</p>
    <p class="answer"><a href='Elliot.html'>Elliot Evans</a></p>
    <p class="question">Status</p>
    <p class="answer">Alive</p>
    <div class='brLarge'></div>
    <p class="question">Ex-Lover</p>
    <p class="answer"><a href='Jacob.html'>Jacob Jackson</a></p>
    <p class="question">Status</p>
    <p class="answer">Deceased</p>`;
    document.querySelector('#Perception').innerHTML = `
    <p class="question">How they feel about themselves</p>
    <p class="answer">Indifferent. Jacob showed him that there are some good things about himself, but he knows that there are some really bad things about himself. If he's in a good mood, he's indifferent about himself. If he's in a bad mood, he thinks he's a monster.</p>
    <div class='brLarge'></div>
    <p class="question">How they would describe themselves</p>
    <p class="answer">Murderer</p>
    <div class='brLarge'></div>
    <p class="question">What they think is their best trait</p>
    <p class="answer">His loyalty</p>
    <div class='brLarge'></div>
    <p class="question">What they think is their worst trait</p>
    <p class="answer">His loyalty, it's a double-edged sword</p>
    <div class='brLarge'></div>
    <p class="question">How they think other perceive them</p>
    <p class="answer">Tough guy</p>
    <div class='brLarge'></div>
    <p class="question">What they would like to change about themselves</p>
    <p class="answer">Get rid of the pendant</p>`;
    document.querySelector('#Personality').innerHTML = `
    <p class="question">Closest Stereotype</p>
    <p class="answer">Tsundere</p>
    <p class="question">Overall Description</p>
    <p class="answer">Jay is very closed off and distant at first, but it's just because he's scared. He believes that if he let's people in, they will end up getting hurt because that's what happened to someone who used to be his boyfriend. He doesn't really understand social interactions nor can he read people at all, so he can only pick up on things like "hm, they seem sad" if it's obvious and in his face. Once he opens up to someone, he is like a giant teddy bear. He will protect them at all costs and all he'll want to do is cuddle with them. Even if they're just a friend. He doesn't see cuddles as a romantic thing.</p>
    <div class='brLarge'></div>
    <p class="question">Likes</p>
    <p class="answer">Trees and nature. He lives in a tree. He loves being able to be in the freedom of the outdoors, where he can be sure that he will not be trapped because there will always be somewhere he can run.</p>
    <p class="answer">Physical affection of any kind. I often joke that he is hug-deprived because he is. Jacob showed him what physical affection was when he was about 14. He never knew what it was like before that. And ever since, he became very affectionate towards anyone close to him. It's how he demonstrates his appreciation. It's not a romantic thing (though it can be)</p>
    <p class="answer">Kittens. He just finds them really cute :3</p>
    <div class='brLarge'></div>
    <p class="question">Dislikes</p>
    <p class="answer">Buildings without many windows and doors. This goes back to the outdoors thing, he doesn't like feeling trapped. If there aren't a lot of windows and doors, there aren't a lot of escape routes and he starts to feel trapped and helpless</p>
    <p class="answer">People who interrupt him. Sometimes it takes a little while for him to be able to respond, social interactions are hard for him. It's even harder when he's not given enough time to properly comprehend what was said and respond to the best of his abilities</p>
    <p class="answer">Anything related to magic and anything related to killing. Both of those remind him of the lab and make him paranoid or guilty. It's difficult for him to discuss it.</p>
    <div class='brLarge'></div>
    <p class="question">Traits</p>
    <p class="answer">Affectionate and warm-hearted. He may not be able to use his words to explain himself very well, but he will always be able to use affection to demonstrate how much he cares about someone. And he will do anything to help that person be happy and content.</p>
    <p class="answer">Self-sacrificing. That is a positive thing, but he can be a bit too self-sacrifing to the point where it's self-destructive</p>
    <p class="answer">Strange. He is very strange. Sometimes he will speak in riddles. He doesn't seem to have human needs. He refuses to even touch a bed. The man is very strange and unusual.</p>
    <p class="answer">He is a man of extremes. He sees things as black and white. You're either good or bad, no in between. He either doesn't trust you at all, or trusts you with all his heart. His voice is super deep, his laugh is super high pitched. Everything about him is either 100% or 0%</p>
    <p class="answer">Naïve. He was locked up for three fourths of his life almost, he doesn't understand a lot of things, so a lot of things are new to him.</p>
    <div class='brLarge'></div>
    <p class="question">Hobbies</p>
    <p class="answer">Drawing</p>
    <div class='brLarge'></div>
    <p class="question">Greatest joy in life</p>
    <p class="answer">Cuddles. It always makes him happy</p>
    <div class='brLarge'></div>
    <p class="question">Fears</p>
    <p class="answer">Letting someone in. He's terrified that if he let's someone get close to him again, they'll end up dying like his boyfriend. He doesn't know if he'd even be able to handle that</p>
    <p class="answer">Being happy. If he starts being happy again, it'll be harder to survive in the lab. If he doesn't feel anything, he has nothing to lose. But if he has happiness and hope, he has everything to lose.</p>
    <p class="answer">Losing control to the pendant. His necklace is always trying to force him to do what it wants, and sometimes it's even able to take full control over him for a short period of time. He's scared that one day it will have full control</p>
    <div class='brLarge'></div>
    <p class="question">Love Language(s)</p>
    <p class="answer">Physical Touch: People who communicate their appreciation through this language, when they consent to it, feel appreciated when they are hugged, kissed, or cuddled. They value the feeling of warmth and comfort that comes with physical touch.</p>
    <p class="answer">Acts of Service: This love language is for people who believe that actions speak louder than words. Unlike those who prefer to hear how much they're cared for, people on this list like to be shown how they're appreciated. Doing the smaller and bigger chores to make their lives easier or more comfortable is highly cherished by these people.</p>
    <div class='brLarge'></div>
    <p class="question">Biggest Regret</p>
    <p class="answer">Stabbing his boyfriend</p>
    <div class='brLarge'></div>
    <p class="question">Biggest Accomplishment</p>
    <p class="answer">Learning to love</p>
    <div class='brLarge'></div>
    <p class="question">Darkest Secret</p>
    <p class="answer">His entire backstory</p>`;
};