index.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351
  1. <!-- -->
  2. <!-- Webpage by a of trwnh.com and is CC0 -->
  3. <!-- https://owly.fans/license/cc_0 -->
  4. <!-- -->
  5. <!-- Text on this page was written by Cass Python -->
  6. <!-- It is FOPL-MDP. -->
  7. <!-- https://owly.fans/license/fopl-mdp -->
  8. <!-- -->
  9. <!DOCTYPE html>
  10. <html lang="en">
  11. <head>
  12. <meta charset="UTF-8">
  13. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14. <title>«The Start» by Cass Python</title>
  15. <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
  16. <a class="account-link" rel="me" href="https://digipres.club/@Owly"></a><link rel="me" href="https://github.com/DynTylluan"><link rel="me" href="https://github.com/NeoZones"><link rel="me" href="mailto:owlgal69@protonmail.com"><link rel="me" href="https://owly.fans"><link rel="me" href="https://owlyfans.neocities.org"><meta content="#9B4F96" data-react-helmet="true" name="theme-color" />
  17. <style>
  18. @font-face {
  19. font-family: 'Monocraft';
  20. src: url('../fonts/minecraft.ttf');
  21. }
  22. html {
  23. font-family: 'Monocraft', monospace;
  24. line-height: 1.6;
  25. }
  26. .speaker-one,
  27. .speaker-two,
  28. .cass {
  29. margin-bottom: 3em;
  30. }
  31. .speaker-one {
  32. color: #00AAAA;
  33. }
  34. .speaker-two {
  35. color: #00AA00;
  36. }
  37. .cass {
  38. color: #A3A29A;
  39. }
  40. .jumble {
  41. color: white;
  42. }
  43. body {
  44. background:
  45. radial-gradient(rgba(0, 0, 0, 0.65),
  46. rgba(0, 0, 0, 0.9)), url('../end/bg.png');
  47. background-blend-mode: multiply;
  48. margin: 0;
  49. }
  50. .scrollable {
  51. width: 100vw;
  52. height: 100vh;
  53. overflow-y: scroll;
  54. }
  55. .container {
  56. box-sizing: border-box;
  57. padding: 2em;
  58. margin: 0 auto;
  59. max-width: 60ch;
  60. }
  61. .title {
  62. color: white;
  63. text-align: center;
  64. margin-bottom: 3em;
  65. }
  66. blockquote {
  67. color: white;
  68. }
  69. cite {
  70. color: #AAAAAA;
  71. }
  72. </style>
  73. </head>
  74. <body>
  75. <div class="scrollable">
  76. <div class="container">
  77. <h1 class="title">«The Start»<br>Cass Python</h1>
  78. <p class="speaker-one">Did you see that? Look, it's them. Look down and see.</p>
  79. <p class="speaker-two">What are you looking at? <span class="your-name">The Reader</span>?</p>
  80. <p class="speaker-one">Yes, look what they did...</p>
  81. <p class="speaker-two">They seem so small compared to us... so powerless... so insignificant...</p>
  82. <p class="speaker-one">But yet,</p>
  83. <p class="speaker-two">But yet they did it... they killed the Pendragon. An ant... an ant killed her. A small insignificant ant killed her.</p>
  84. <p class="speaker-one">They may be small, but powerless? Insignificant? They shaped the world with their hands, they made tools, and killed the Pandragon. <span class="your-name">The Reader</span> is anything but worthless.</p>
  85. <p class="speaker-two">But they are an ant compared to us; we could crush them with just one hoof. They don't even know that we have been watching, they know nothing of us.</p>
  86. <p class="speaker-one">I care not; They have shown me that they are like us in many ways; they have built homes, they made alliances. Friendships were made. And friendships were lost... over time.</p>
  87. <p class="speaker-two">They... They can be like us, yes. But we created their land, we shaped it in seconds, they can only change it over hours... days, months, years even.</p>
  88. <p class="speaker-one">I know, but I only care about what they have done - their own power and mite, however.</p>
  89. <p class="speaker-two">Look, <span class="jumble" data-length="8">********</span>, it looks so cold where they are...</p>
  90. <p class="speaker-one">They are. The cold air feels like razors over their skin, but they should care not after their victory.</p>
  91. <p class="speaker-two">But what's the point?</p>
  92. <p class="speaker-one">The point?</p>
  93. <p class="speaker-one">Inside the powercage of their mind, they know only a small slither of what we know, but they are unstoppable, but outside, they are weak and powerless. This did not stop <span class="your-name">The Reader</span>. They live to prove.</p>
  94. <p class="speaker-two">What do you mean?</p>
  95. <p class="speaker-one">They live to prove something; that they can show the world that they are strong, in their mind. <span class="your-name">The Reader</span> made the world their own, they proved their mite, <span class="your-name">The Reader</span> lives to make the world a better place.</p>
  96. <p class="speaker-two">But why?</p>
  97. <p class="speaker-one">Why? <span class="your-name">The Reader</span> is love</p>
  98. <p class="speaker-two"><span class="your-name">The Reader</span> is love?</p>
  99. <p class="speaker-one">Aye, they are, but they need to be loved by others to be happy, and intern, they need to show that same love to others.</p>
  100. <p class="speaker-two">Are you sure they are love?</p>
  101. <p class="speaker-one">I think so, but <span class="your-name">The Reader</span> is also anger and rage and fear. But that's okay.</p>
  102. <p class="speaker-one">It is okay... but why? Because it proves to me that they are something that we can never be</p>
  103. <p class="speaker-two">...human?</p>
  104. <p class="speaker-one">Human. Correct. Despite being <span class="jumble" data-length="8">********</span>, we will never know what it is like to be them.</p>
  105. <p class="speaker-two">Perhaps that is why I have my doubts about them... they are human... they have flaws</p>
  106. <p class="speaker-two">And I guess in some way... I wish I was like that, having flaws, that is to say</p>
  107. <p class="cass">They both stopped talking. Hundreds of thoughts began to fill their mind of what it would be like to suddenly become a human. It was strange and almost upset the two, but they could not control what they were thinking of.</p>
  108. <p class="speaker-two">If I could, I wish I could fall in love for the first time</p>
  109. <p class="speaker-one">What do you think falling in love is like?</p>
  110. <p class="speaker-two">I don't know. I wish I knew, oh good <span class="jumble" data-length="5">*****</span>, I wish I could tell you what it must be like to be young and just... see someone, see someone that you know that you cannot live without... that you want to...</p>
  111. <p class="speaker-two">to just kiss?</p>
  112. <p class="speaker-one">Yes. I wish I knew what it was like to know pure anger, too... I wish I could hate my brothers, sisters, and siblings...</p>
  113. <p class="speaker-two">Anger must feel good</p>
  114. <p class="speaker-one">Anger must.</p>
  115. <p class="speaker-two">I want to know what it's like to scream, I want to know the feeling <span class="your-name">The Reader</span> would feel when someone hurts them and makes them sad</p>
  116. <p class="speaker-two">Good <span class="jumble" data-length="5">*****</span>, I want to know</p>
  117. <p class="speaker-two">I want to just, hate. See someone that you know you could hurt, just thinking about them makes you mad</p>
  118. <p class="speaker-one">I would do anything</p>
  119. <p class="speaker-two">Sadness is another one</p>
  120. <p class="speaker-one">I don't understand sadness</p>
  121. <p class="speaker-two">It confuses me, I see players below getting... upset when someone dies</p>
  122. <p class="speaker-one">People die all of the time</p>
  123. <p class="speaker-two">People do</p>
  124. <p class="speaker-one">That confuses me, why don't they get upset then?</p>
  125. <p class="speaker-two">I wish I could say.</p>
  126. <p class="speaker-one">But look at them, look at <span class="your-name">The Reader</span> now.</p>
  127. <p class="speaker-two">I think <span class="your-name">The Reader</span> is smarter than we let on</p>
  128. <p class="speaker-one">Do you think?</p>
  129. <p class="speaker-two">I was a fool saying that, they are smart</p>
  130. <p class="speaker-one">Yes?</p>
  131. <p class="speaker-two">Can they read us...</p>
  132. <p class="speaker-two">Can they can read our thoughts..?</p>
  133. <p class="speaker-one">Perhaps so</p>
  134. <p class="speaker-two">Did you already know?</p>
  135. <p class="speaker-one">I had my suspicions</p>
  136. <p class="speaker-one">But I had no concerns, they only did this in their sleep, thinking it was only dreams, but when they awoke, they soon forgot and moved on.</p>
  137. <p class="speaker-two">But this is not a dream for them</p>
  138. <p class="speaker-one">This is not, they used to dream in black and white, but now they can dream in all of the hues of the rainbow.</p>
  139. <p class="cass">The two gods looked down at <span class="your-name">The Reader</span>. They were looking at stars while in a field of wheat. The world that they were in was still strange to see, it was full of monsters, but you are the Pendragon now. The Pendragon of A Thousand Enemies - when your foes see you, they will try and catch you, and whenever they catch you, they will kill you.</p>
  140. <p class="cass">But first, they must catch you, Pendragon.</p>
  141. <p class="cass">But you are fast, you are smart, cunning and full of tricks - because of this, your people... your allies... will never be destroyed.</p>
  142. <p class="cass">The gods looking down knew this.</p>
  143. <p class="speaker-two">But what's next for <span class="your-name">The Reader</span>?</p>
  144. <p class="speaker-one">I don't know</p>
  145. <p class="speaker-two">It's their move next, we should not interfere with the lives of mortals</p>
  146. <p class="speaker-two">They can build more, explore</p>
  147. <p class="speaker-two">Kill, seek and destroy</p>
  148. <p class="speaker-one">Murder.</p>
  149. <p class="speaker-one">Make friends, get rich in that friendship</p>
  150. <p class="speaker-two">But one thing that I hope they don't do is stop making allies</p>
  151. <p class="speaker-one">No, that would be the worst action</p>
  152. <p class="speaker-two">Everyone needs friends, <span class="jumble" data-length="11">***********</span> - we are not as powerful without them by our side. <span class="your-name">The Reader</span> should go outside and seek the aid of others when they are sad, and reach out when they are ill. Only a true friend can help others when they are at their lowest point.</p>
  153. <p class="speaker-one">Friendship is something that all intelligent life will always need, no matter where you are from, no matter what language you speak. Getting up and seeing many new worlds, some generated by code, others not.</p>
  154. <p class="speaker-two">Inside the powercage of their mind, so much must be going through it right now, but one thing that I hope they will never forget is that even in their darkest hour, people will always love them - they need to remember that until the day they die.</p>
  155. <p class="speaker-one">Because they are love and that is beautiful.</p>
  156. <p class="speaker-two">In the end, they may only see a small part of the world and meet a fraction of players, but <span class="your-name">The Reader</span> should be proud of what they have done, even if it was on their own, I am content in saying that <span class="your-name">The Reader</span> has done amazing work with the cards that they were dealt.</p>
  157. <p class="cass">Watching <span class="your-name">The Reader</span>, the two looked on, unblinking. It was hard to describe exactly what either of them looked like, even counting the number of eyes they had was hard. They had hooves, that was for sure, but they also had quite human hands and perhaps even the head of a goat with long horns, or not, but looking at either was not easy... looking was like trying to see the rainbow when you were blind.</p>
  158. <p class="cass"><span class="jumble" data-length="8">********</span> and <span class="jumble" data-length="9">*********</span> had been watching for hours, talking about things that were almost impossible to imagine... they talked about things the <span class="your-name">The Reader</span> would not be able to even picture, but there was a trade-off - they were both unable to do anything that <span class="your-name">The Reader</span> could do, they could, in fact, not achieve anything on the bear scale of what was done by <span class="your-name">The Reader</span>.</p>
  159. <p class="cass">They were both able to decide on the way that the world looked like, but once <span class="your-name">The Reader</span> looked at what was made, <span class="jumble" data-length="8">********</span> powers became null.</p>
  160. <p class="cass">Both of them looked at the other.</p>
  161. <p class="speaker-one">I hope this isn't the end for <span class="your-name">The Reader</span>.</p>
  162. <p class="speaker-two">The sun will rise tomorrow and this is only the start.</p>
  163. <blockquote>
  164. <p>«i don't think you're a bad person, for the record. i just think you've been handed some bad circumstances that you have to live [with]» <cite>— Redacted</cite></p>
  165. </blockquote>
  166. </div>
  167. </div>
  168. </body>
  169. <script>
  170. const FPS = 30
  171. // TODO: Pick a suitable range of Unicode, or otherwise define a const array
  172. /*
  173. function charRange(start, end) {
  174. return String.fromCharCode(
  175. )
  176. }
  177. const CHARSET = [
  178. ]
  179. */
  180. const START_UNICODE = 0x0061
  181. const END_UNICODE = 0x007e
  182. // TODO: Find a way to exclude certain characters that break monospace widths
  183. // e.g. 007F, 0081, 008D, 008F, and so on ("control" characters, usually)
  184. function makeJumble(element) {
  185. var jumble = ''
  186. var length = element.dataset.length
  187. while (jumble.length < length) {
  188. codepoint = START_UNICODE + Math.random() * (END_UNICODE - START_UNICODE + 1)
  189. jumble += String.fromCharCode(codepoint)
  190. }
  191. element.innerText = jumble
  192. }
  193. function jumbleAll() {
  194. jumbles = Array.from(document.getElementsByClassName("jumble"))
  195. for (element of jumbles) {
  196. makeJumble(element)
  197. }
  198. setTimeout(
  199. () => {
  200. requestAnimationFrame(jumbleAll)
  201. },
  202. 1000 / FPS
  203. )
  204. }
  205. requestAnimationFrame(jumbleAll)
  206. // autoscroll effect
  207. window.onload = function() {
  208. var slider = document.querySelector(".scrollable")
  209. slider.scrollTop = 0
  210. document.querySelector(".container").style.marginTop = "calc(100vh - 2em)"
  211. document.querySelector("blockquote").style.marginTop = "50vh"
  212. function scrollDown() {
  213. slider.scrollTop += 1
  214. setTimeout(
  215. () => {
  216. requestAnimationFrame(scrollDown)
  217. },
  218. 1000 / FPS
  219. )
  220. }
  221. requestAnimationFrame(scrollDown)
  222. }
  223. </script>
  224. </html>