MichaelaCastle.github.io/SamOld.html at main · MichaelaCastle/MichaelaCastle.github.io · GitHub

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
<!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>Samuel Broteez</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/Sam512.png" sizes="512x512">
    <link rel="icon" type="image/png" href="images/Favicons/Sam256.png" sizes="256x256">
    <link rel="icon" type="image/png" href="images/Favicons/Sam180.png" sizes="180x180">
    <link rel="icon" type="image/png" href="images/Favicons/Sam128.png" sizes="128x128">
    <link rel="icon" type="image/png" href="images/Favicons/Sam96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="images/Favicons/Sam32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="images/Favicons/Sam16.png" sizes="16x16">
    <style>
        :root {
            --hue: 120;
            --hue2: 200;
            --angle: 160deg;

            --middleHR: "✿";
            --middleImageHR: " ⋆⋅☆⋅⋆ ";
            --middleLength: 7;
            --middleAddition: "──";

            --answerDecor: "✿ ";
        }
    </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/HrStyles.css">
    <link rel="stylesheet" href="CSS/Nav.css">
    <script src="nav.js"></script>
    <script src="Sam.js"></script>
    <script>
        let current = 0;
        let names = ["  Cave In   -   Owl City  ", "  East To West   -   Casting Crowns  ", "  Hey, Doctor Doctor  -  MITM  ", "  Waiting On A Miracle  -  Encanto  "];
        let songs = ["Audio/Cave In.ogg", "Audio/East To West.ogg", "Audio/Hey, Doctor Doctor.mp3", "Audio/Waiting on a Miracle.mp3"];
    </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>Samuel Broteez</h1></div>
        <div class="sectionHeader"><h1>Character Sheet</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="tw">
            <div class="audio-player">
                <div><h2>
                    <button id="PrevSong" onclick="playPrev()" class="audioButtons"></button>
                    <span id="SongName">  Cave In   -   Owl City  </span>
                    <button id="NextSong" onclick="playNext()" class="audioButtons"></button>
                </h2></div>
                <audio preload="auto" onended="playNext()" id="player" src="Audio/Cave In.ogg" type="audio/mpeg" controls controlsList="nodownload noplaybackrate"></audio>
            </div>
            <div class="playlist">
                <p><a target="_blank" href="https://open.spotify.com/playlist/2a5O2watIHm6RJ9uXgJ9EC?si=0OxoMroLQvSEF2s4TrPBjA&pi=FLJlP19BSfWbp">Spotify Playlist</a></p>
                <!-- <p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuA_rzEJg2yLK5Dw1qwL6O0z&si=iN0tsjdCu_xyzSde">Main Youtube Playlist</a></p>
                <p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuBQY8G4rIN0BXgmUxmLcQq8&si=vRej4aPODgU4zpG0">Sam x Jay</a></p>
                <p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuD2dMtESA0je0hQPMiDqm0X&si=QC63SH1AbGBOmsB2">Sam x Jacob</a></p>
                <p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuDU0uwUTUygw-ozSmTgz__R&si=wrhGbSgGSGxi4eRZ">Sam x Elliot</a></p>
                <p><a target="_blank" href="https://youtube.com/playlist?list=PLAngkiNHrzuAKfbFCKFIH8w4QnUiOtsgI&si=VmaZRyQFHb9IiFxe">Sam x Jay x Jacob</a></p> -->
            </div>
            <!-- <p>┏━━━━━━━━━━━━━━━━┓</p> -->
            <p>╭━━━━━━━━━━━━━━━━╮</p>
            <p>Trigger Warnings</p>
            <p>Depression, suicide, drug addiction</p>
            <!-- <p>┗━━━━━━━━━━━━━━━━┛</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/Sam/SailSadDaysAway.jpg">
        <p class="quoteCaption">“Your world's not falling apart, it's falling into place.”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Teaser</b></p>
            <hr>
        </div>
        <p id="TeaserText">Slowly, the boy flutters his eyes open. Where is he? What happened?<span class="br"></span>
        He looks around to get a sense of his surroundings. The boy seems to be in a fairly old house. The plumbing drums and creaks, the soft green paint on the walls has started to chip away over time, and the cushions of the dark couch he's on are rough and worn down. Despite that, the place as a whole has a warm and inviting atmosphere, and he can't quite place why. Whatever this place is, the room he's in looks to be a living room. There are two couches that face each other with a coffee table in between them.<span class="br"></span>
        A searing hot wave of pain jolts up his arm when the boy tries to sit up. He inhales sharply and falls back onto the couch, now remembering what happened before he somehow got here. There was a wolf attack. He's lucky he was able to fend them off for the most part, even if he didn't make it out unharmed. But how did he get here?<span class="br"></span>
        He looks down at his arm, finally noticing the bandage wrapped around the wound, which fresh blood starts to stain. He must've opened the wound again when he tried to sit up. Who bandaged his arm though?<span class="brLarge"></span>
        The boy doesn't have to wonder for long, as a green eyed blonde takes a seat on the couch across from him.<span class="br"></span>
        "Don't strain yourself, you're safe here. You were attacked, so I brought you here to heal you," the blonde says, his voice... Oh, his voice is so soft and gentle. That alone is almost enough to soothe the boy.<span class="br"></span>
        "W-who are you?"<span class="br"></span>
        The blonde smiles politely, a shy kind of smile. "I'm Sam. Who I am doesn't matter though, you should focus on resting so your arm can heal."</p>
        <hr class="ImageTop">
        <img src="images/Sam/Reality.jpg">
        <p class="quoteCaption">“Don't worry about me, I just want you to be happy.”</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/Sam/MountainsUnmovable.png">
        <p class="quoteCaption">“Just give me a week, that's all I need. We can fix this,<br>you just have to trust me.”</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/Sam/Lovesick Sam.jpg">
        <p class="quoteCaption">“I know it may feel like you're stranded in an endless ocean<br>with nobody to throw you a life jacket, but it doesn't have to be that way.”</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/Sam/WakingUpInTears.jpg">
        <p class="quoteCaption">“I'm not cute, that's childish, and I'm certainly not a child.”</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/Sam/SamPortrait.png">
        <p class="quoteCaption">“There's someone out there that's right for everyone. Wait, don't try to turn that around on me, that's ridiculous. Blasphemy. Nobody cares about me.”</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/Sam/AngelSam.png">
        <p class="quoteCaption">“Stop lying to yourself, you are good enough. You deserve a good life, everyone does.”</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/Sam/PastICantErase.jpg">
        <p class="quoteCaption">“Everyone deserves to be given the chance to change.”</p>
        <hr class="ImageBottom">
        <div class="sectionLabel">
            <hr>
            <p><b>Roleplay Info</b></p>
            <hr>
        </div>
        <div class="info" id="RpInfo"></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>