-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
152 lines (149 loc) · 8.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Subliminal</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Probably the weirdest poetry anthology to ever exist. This site is a spin-off of traditional poetic anthologies, intended to bring maximum humour.">
<meta name="keywords" content="Poetry, Anthology, Subliminal, Methallyne blue, Poem">
<link rel="icon" href="Resources/AbbstraktDog.ico">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="index.css">
<script src="./Other/component-registrar.js"></script>
<script src="./Other/account-options-template.js"></script>
<script src="./Other/header-template.js"></script>
<script src="./Other/login-template.js"></script>
<script src="./server.js"></script>
<script src="./account.js"></script>
</head>
<body class="headered-body">
<div id="topBackground"><img src="Resources/TopBackground.webp" loading="eager" alt="Subliminal scenery background" class="index-image"></div>
<subliminal-header></subliminal-header>
<div class="div-centre">
<p class="profile-title">Subliminal</p>
<p>“The methallyne blue analogy of stuff.</p>
<p>Probably the weirdest poetry anthology to ever exist.”</p>
<img class="index-image main-logo" alt="Enlarged subliminal dog logo" src="Resources/AbbstraktDog.png" width="70%" height="70%" alt="Dog">
<p>Beware: <sup>C</sup> <sub>o</sub> <sup>o</sup> <sub>l</sub> <sup>s</sup> <sub>t</sub> <sup>u</sup>
<sub>f</sub> <sup>f</sup> <sub>a</sub> <sup>h</sup> <sub>e</sub> <sup>a</sup> <sub>d</sub> <sup>.</sup></p>
</div>
<div style="display: flex;flex-direction: column;row-gap: 16px;margin-top: 64px;">
<p style="padding-left: 5%;" class="profile-title">About Subliminal</p>
<section id="aboutSection" class="section">
<div style="flex-grow: 1;">
<p>Subliminal is an open source project to create the largest repository of poems in one place, where anyone can contribute their own work, no matter how chaotic, critical, or hilarious it may be!</p>
<p>Here we value fairness and freedom of expression, because everyone should have the right to be creative.</p>
<p>As long as it's a poem, it's good enough for subliminal.</p>
</div>
<figure class="presenter-container">
<div class="presenter">
<img src="Resources/AlMogus.webp">
<p>
Earth and Bones, old sticks and stones, <br>
Just one long road to Al'mogus. <br>
Sandles, seared by the sun-struck path, <br>
oh how I wish I had taken the car. <br>
All for a land, oh so, so far. <br>
Struggling to Al'mogus.<br>
<br>
A vulture, flew overhead,<br>
then dropped down dead! Beating<br>
my back like a brick of lead. Yet I<br>
Shouted 'horay', meat for days!<br>
On my way to Al'mogus.<br>
...
</p>
</div>
<figcaption class="presenter-caption">A long road to Al'mogus, a poem about human desire, by Zekiah.</figcaption>
</figure>
</section>
<section id="aboutInfo" class="section-info">
<div style="padding-left: 12px;padding-right: 12px;padding-top: 4px;padding-bottom: 4px;background-color: var(--button-transparent);border-radius: 32px; width: fit-content;">Did you know?</div>
<ul class="info-list">
<li>-> We have over 100 hand crafted curated originals to read and take inspiration from!</li>
<li>-> There is a full rich-text poem editor, to make your works come to light both literally and visually.</li>
<li>-> Free cloud saving, and accounts allow you to acess, read and write poems anywhere, across your devices!</li>
</ul>
<br>
<p style="margin-left: 12px;">If you aren't on subliminal, what are you even doing with your life?</p>
</section>
<p style="padding-left: 5%;" class="profile-title">Get started</p>
<section id="getStartedSection" class="section">
<figure class="presenter-container">
<div class="presenter">
<img src="Resources/AccountProfile.svg" style="filter: saturate(0.5);">
</div>
<figcaption class="presenter-caption">Creating a profile for yourself is as cool as it can get!</figcaption>
</figure>
<div style="flex-grow: 1;">
<p>Getting started on subliminal is easy!</p>
<p>Simply navigate to the "poems" page to see all of the contents of the anthology. Here you can also set up an account, or start writing your own poem with the "+add a poem" button whenever you like!</p>
<p>If you ever have any questions, check the dictionary and disclaimer pages for more info on what you may find here...</p>
</div>
</section>
<section id="getStartedInfo" class="section-info">
<div style="padding-left: 12px;padding-right: 12px;padding-top: 4px;padding-bottom: 4px;background-color: var(--button-transparent);border-radius: 32px; width: fit-content;">Relatable?</div>
<p style="margin-left: 12px;">For most of us, process of writing a poem often looks like this:</p>
<ol id="poemProcessSubInfo" onwheel="
scroll({ left: event.deltaY + this.scrollLeft, top: 0, behavior: 'smooth' })
event.preventDefault()
" style="margin: 0px; padding: 0px;">
<li><p>💡 Burst of inspiration at the most unexpected moment.</p></li>
<li><p>✍️Spontaneous writing, tiring yourself out as you refine your work.</p></li>
<li><p>😨 Writer's block.</p></li>
<li><p>✨ A second hope, reading back on some previous works, you are motivated to finish what you started.</p></li>
<li><p>🎉 Finally completed poem! Sigh a breath of relief.</p></li>
<li><p>🗣️ Tell everyone! Have your teacher, friends, family, read and review your poem!</p></li>
</ol>
<ul class="info-list">
<li>-> From writers block, to that banger rhyme you were thinking of just slipping out of your mind, writing a creative piece can be brutal.</li>
<li>-> That's why subliminal provides a community where people can share and grow, so we can all can write the poems that future generations will be tortured with in class one day.</li>
</ul>
<br>
<p style="margin-left: 12px;">Poetry may not solve your crippling internet addiction, but it's a step in the right direction!</p>
</section>
<p style="padding-left: 5%;" class="profile-title">Other stuff</p>
<section id="otherSection" class="section section-double">
<figure id="rplaceAdSection" class="section" style="margin:0px;">
<a href="https://rplace.live">
<img src="Resources/Advert2.png" alt="A fun game to play in your free time">
</a>
<figcaption style="flex-grow: 1">
<p style="font-weight: bold;">Rplace.live: a spinoff of the reddit place event!</p>
<p>A game by Zekiah-A and BlobKat, featuring a massive multiplayer canvas, place pixels, collaborate or start pixel wars, to create the most epic canvas arts possible.</p>
</figcaption>
</figure>
<figure id="supportAdSection" class="section" style="margin:0px;">
<video alt="The best waste of money since buying an NFT" autoplay="true" loop="true" muted="true">
<source src="Resources/Advert3.webm" type="video/webm">
</video>
<figcaption style="flex-grow: 1">
<p style="font-weight: bold;">The best waste of money since buying an NFT!</p>
<p>Help fund development of subliminal, and support me with my other projects by donating, and getting an absolute monstrosity of literature in return, it's almost a good deal!</p>
</figcaption>
</figure>
</section>
</div>
<footer>
<hr>
<p style="padding-left: 8px; padding-right: 8px;">Yeah that's about it. Subliminal, © Zekiah-A 2019-2024</p>
</footer>
</body>
<script>
"use strict";
function handleIntersect(entries, observer) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("scroll-in")
}
})
}
//A threshold of 0.1 means that when 10% of section is in view, it will be animated.
let observer = new IntersectionObserver(handleIntersect, {root: null, rootMargin: '0px', threshold: 0.1 })
let obseravbles = [aboutSection, aboutInfo, getStartedSection, getStartedInfo, rplaceAdSection, supportAdSection, poemProcessSubInfo]
obseravbles.forEach((element) => {
observer.observe(element)
element.classList.add("scroll-unseen")
})
</script>
</html>