-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
323 lines (323 loc) · 16.5 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="VTresMarias">
<title>「VTresMarias - V三人のマリア - 」</title>
<link rel="icon" href="https://vtresmarias.github.io/media/favicon/favicon_light.png" type="image/x-icon">
<link rel="icon" href="https://vtresmarias.github.io/media/favicon/favicon_dark.png" type="image/x-icon" media="(prefers-color-scheme: dark)">
<link rel="apple-touch-icon" href="https://vtresmarias.github.io/media/favicon/favicon_light.png" type="image/x-icon">
<link rel="manifest" href="pwa/pwa.json"> <!-- PWA -->
<meta name="og:type" content="website">
<meta name="og:title" content="「VTresMarias - V三人のマリア - 」">
<meta name="og:image" content="https://vtresmarias.github.io/media/preview/20240128_remaster.png">
<meta name="og:url" content="https://vtresmarias.github.io">
<meta name="og:description" content="home of the Marias, est. 27 Dec 2022🍃🪷🌸">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@thebelovedmoon">
<meta name="twitter:creator" content="@thebelovedmoon">
<meta name="theme-color" content="#3d374c">
<meta name="msapplication-TileColor" content="#3d374c">
<meta name="msapplication-navbutton-color" content="#3d374c">
<meta name="apple-mobile-web-app-status-bar-style" content="#3d374c">
<!-- custom css -->
<link href="style.css" rel="stylesheet" type="text/css" media="all"> <!-- inbuilt -->
<style type="text/css">
/* attach in-html custom css args here */
.illust {
pointer-events: none;
border-radius: 15px;
margin-bottom: 15px;
}
.elgBorder {
filter: drop-shadow(2px 4px 16px #3d374c80);
}
.mariaSymbol {
width: 100px;
margin: 0 auto;
}
h5 {
letter-spacing: -0.875px;
}
</style>
<!-- custom scripts -->
<script src="scripts.js" type="text/javascript"></script> <!-- inbuilt -->
<script type="text/javascript">
function launch() {
// launch javascript args here
splash();
}
</script>
<script type="text/javascript">
// attach in-html custom javascript args here
</script>
</head>
<body onload="launch()">
<div id="removeLoadBlock" class="loading">
<img id="removeLoad" src="media/images/loading.png" alt="">
</div>
<div id="panelBlock"></div> <!-- panel block -->
<div id="tarotPanel"> <!-- tarot panel -->
<div style="text-align: center; width: 750px; max-width: 100%; margin: 0 auto;">
<div id="tarotInfo"></div>
</div>
</div>
<div id="MITPanel"> <!-- MIT panel -->
<div style="text-align: center; width: 750px; max-width: 100%; margin: 0 auto;">
<div id="MITInfo"></div>
</div>
</div>
<div id="navPanel"> <!-- navbar panel -->
<div style="text-align: center; width: 750px; max-width: 100%; margin: 0 auto;">
<h2>explore the Marias</h2>
<header>
<div style="line-height: 62.5%;">
<p><b>home</b></p>
<p><a rel="noopener noreferrer" href="events">events & projects</a></p>
<p><a rel="noopener noreferrer" href="letter">letters from the First Maria</a></p>
<p><a rel="noopener noreferrer" href="#about" onclick="navBarClose()">about the Collective</a></p>
</div>
</header>
<br>
<div style="line-height: 75%;">
<img class="vtmLogoPanel" src="media/svg/vtm_logoPanel.svg" alt="">
<p style="font-size: smaller;"><i>est. 27 Dec 2022</i></p>
</div>
<br>
<img id="navClosed" src="media/svg/icons/menu_close.svg" onclick="navBarClose()" alt="menu_close">
</div>
</div>
<div id="mainPage">
<div style="box-shadow: 2px 4px 100px 16px #3d374c80;">
<header class="vtmHead">
<div><img class="vtmLogo" src="media/svg/vtm_logo_header.svg" alt=""></div>
<div style="width: 100px; height: 100px;"></div>
<div><img id="navClosed" src="media/svg/icons/menu_open.svg" onclick="navBarOpen()" alt="menu_open"></div>
</header>
<div style="height: 100vh"></div>
<div class="intro">
<div style="width: 625px; max-width: 100%; margin: 0 auto; text-align: center;">
<h1>celebrating the 1st Anniversary of the Marias</h1>
<p>
since 27 Dec 2022, 「VTresMarias - V三人のマリア - 」 takes pride in uplifting
the spirits of our VTubers -- called the Marias -- as they tackle on any
challenge that comes their way together.
</p>
<p>
the Marias were chosen for their personal connections with the First Maria,
alongside their unwavering commitment to serving their community with the
best they can.
</p>
<div style="height: 125px"></div>
<h2>the 1st Anniversary Illust</h2>
<p>
cementing the legacy of the Marias since their first inception, the First
Maria🍃 has released this illust in commemoration of such an event.
</p>
<p>
this has been in the works since 14 Jun 2023, and was finished 28 Jan 2024.
</p>
<br>
<div style="filter: drop-shadow(2px 4px 16px #3d374c80);">
<img class="illust" src="https://pbs.twimg.com/media/GGTtOwKWoAADDbj?format=jpg&name=large" alt="">
<button onclick="window.open('https://mobile.x.com/i/status/1757792441099231239')">Twitter / X</button>
<button onclick="window.open('https://www.pixiv.net/en/artworks/116082444')">pixiv</button>
<button onclick="window.open('https://reddit.com/r/VirtualYoutubers/s/hmNcDCjXBh')">Reddit</button>
<button onclick="window.open('https://vstream.com/c/@thebelovedmoon/p/e73a5236-bdbd-4e13-a5f1-d67dcff85759')">VStream Feed</button>
</div>
</div>
</div>
<div class="intro" style="background-image: url(media/images/vtm_story_blurred.png);">
<div style="width: 625px; max-width: 100%; margin: 0 auto; text-align: center;">
<h1>the story of the Marias</h1>
<p><b><i>
「the story of the First Maria, is also the story of what it has become.」
</i></b></p>
<p>
the First Maria🍃's journey is not that easy. but with the help of those who
have cared for her, she remained committed to achieving her goal of finding
those who will be with her forever.
</p>
<p><i>
this is also the First Maria🍃's vtuber lore.
</i></p>
<div style="filter: drop-shadow(2px 4px 16px #3d374c80);">
<button onclick="window.open('story')">read the story</button>
</div>
</div>
</div>
<div id="about" class="intro" style="background-image: url(media/images/backgrounds/vtm_1.jpg); text-align: center;">
<div style="line-height: 75%;">
<h1>meet the Marias</h1>
<p><i>info as of 7 Apr 2024</i></p>
</div>
<br>
<div class="tableLayout" style="filter: drop-shadow(2px 4px 16px #3d374c80);">
<div class="threeCol mariaPadding">
<div style="width: 375px; max-width: 100%; margin: 0 auto;">
<img src="media/pfp/vtm_aga.png" alt="">
<h3>Mother Agatha, the First Maria🍃</h3>
<h4>我慢 ～Perseverance～</h4>
<h5>debuted 27 Dec 2023</h5>
<img class="elgBorder" src="media/images/elegantborder.png" alt="">
<p>
Mother Agatha was once a beloved Mother before everything fell apart due to
the brink of winter. she was given a mission from the Grand Lady upon her
resurrection to find those who will be a part of her life forever.
</p>
<p>
behind the character is thebelovedmoon -- also known as 💚🍃Aga-chuu💗🌸
-- the founder of this VTuber Collective. he initially used this within the
Horror Shop Games community, but this has evolved over using it as his
VTuber presence in order to represent such community.
</p>
<p>
he specializes in graphics and PR, as well as websites and programming. his
current ventures (alongside this) include #MamaNyoSquad, ReactSquad, and
AgaASMR (aka Aga's ASMR Garden).
</p>
<img class="elgBorder" style="transform: rotate(180deg);" src="media/images/elegantborder.png" alt="">
<br>
<button onclick="tarotPanelOpen(Maria1)">read the tarot</button><br>
<button onclick="window.open('https://thebelovedmoon.github.io')">visit the website</button>
</div>
</div>
<div class="threeCol mariaPadding">
<div style="width: 375px; max-width: 100%; margin: 0 auto;">
<img src="media/pfp/vtm_aura.png" alt="">
<h3>Aura Ostara, the Second Maria🪷</h3>
<h4>復活 ～Rebirth～</h4>
<h5>debuted 30 Jun 2022</h5>
<img class="elgBorder" src="media/images/elegantborder.png" alt="">
<p>
Aura Ostara represents the Celestial Nymph Guardian who aims to protect her
Nimbisouls by all means necessary. she was an everyday girl before that one
moment changes her life forever.
</p>
<p>
behind the character, she is a lively VTuber who dreams to connect with
everyone that she meets throughout the way. she mostly streams Magicka and
Mario Kart, but she also hosts zatsudan whenever she has time.
</p>
<p>
as of 19 Oct 2022, she's currently on indefinite hiatus; and the future
remains uncertain upon her return to her VTubing career.
</p>
<img class="elgBorder" style="transform: rotate(180deg);" src="media/images/elegantborder.png" alt="">
<br>
<button onclick="tarotPanelOpen(Maria2)">read the tarot</button><br>
<button onclick="window.open('https://thebelovedmoon.github.io/auraostara')">visit the website</button>
</div>
</div>
<div class="threeCol">
<div style="width: 375px; max-width: 100%; margin: 0 auto;">
<img src="media/pfp/vtm_hina.png" alt="">
<h3>Hina Oujo, the Third Maria🌸</h3>
<h4>落ち着き ～Stability～</h4>
<h5>debuted 3 Jul 2022</h5>
<img class="elgBorder" src="media/images/elegantborder.png" alt="">
<p>
Hina Oujo is an elegant queen from a faraway land who vows to serve her
Chuu-nins well. she has everything under her disposal, but deep inside, she
needs someone who will make her feel whole after what seems to be her whole
heap of loneliness.
</p>
<p>
behind the character, she's formerly known as Suzu Puyotori and HinaSukii --
where the former has renamed to Emii Shion. she's a talented artist who has
made waves over X before she debuted 3 Jul 2022. she typically enjoys art
and zatsudan, and majorly plays League of Legends and Apex Legends -- among
other things.
</p>
<p>
as of 28 Jan 2024, she has decided to put everything behind as her socials
are closed -- forever. but her soul will always stay with the Collective for
the sake of the future. 💗the Third Maria will always stay with us forever.🌸
</p>
<img class="elgBorder" style="transform: rotate(180deg);" src="media/images/elegantborder.png" alt="">
<br>
<button onclick="tarotPanelOpen(Maria3)">read the tarot</button><br>
<button onclick="window.open('https://thebelovedmoon.github.io/hinaoujo')">visit the website</button>
</div>
</div>
</div>
<div style="height: 250px"></div>
<h1>our Core Values</h1>
<div class="tableLayout" style="filter: drop-shadow(2px 4px 16px #3d374c80);">
<div class="twoCol">
<div style="width: 500px; max-width: 100%; margin: 0 auto;">
<h2>「Universality without Borders」</h2>
<p>
our primary aim is to be open to all walks of life, whether it would be
behind the screen or in front of a real person.
</p>
<p>
we do not permit any forms of negativity within our community and beyond.
we strive to protect and support each other through trying times and not
bring them down.
</p>
</div>
</div>
<div class="twoCol">
<div style="width: 500px; max-width: 100%; margin: 0 auto;">
<h2>「Acceptance without Comprehension」</h2>
<p>
accompanying our aim for universality is our advocacy to accept everyone's
flaws. our community strives on making sure everyone is widely accepted
regardless of their nature.
</p>
<p>
but in order to maintain that acceptance, we have put additional measures
to further strengthen our bond and to stay true to our promise of uniting
the communities together as one.
</p>
</div>
</div>
</div>
</div>
<div id="about" class="intro" style="background-image: url(media/images/backgrounds/vtm_2.jpg);">
<div style="width: 625px; max-width: 100%; margin: 0 auto; text-align: center;">
<h2>get involved</h2>
<p>
do you want to support the Marias in any way possible? you can reach out to the
First Maria through the following channels:
</p>
<div>
<button onclick="window.open('mailto:jelsa14015@gmail.com', '_self')">email</button>
<button onclick="window.open('https://mobile.x.com/thebelovedmoon')">Twitter / X</button>
<button onclick="window.open('https://instagram.com/themoon_follow')">Instagram</button>
<button onclick="window.open('https://twitch.tv/thebelovedmoon')">Twitch</button>
<button onclick="window.open('https://youtube.com/@thebelovedmoon')">YouTube</button>
<button onclick="window.open('https://vstream.com/c/@thebelovedmoon')">VStream</button>
<button onclick="window.open('https://reddit.com/user/thebelovedmoon')">Reddit</button>
<button onclick="window.open('https://web.facebook.com/thebelovedmoon')">Facebook</button>
<button onclick="window.open('https://soundcloud.com/thebelovedmoon')">SoundCloud</button>
<button onclick="window.open('https://github.com/thebelovedmoon')">GitHub</button>
</div>
<div style="height: 125px"></div>
<h2>special thanks</h2>
<p>
Horror Shop Games / azumi212<br>
DreamingWitch (formerly Misao302)<br>
Kitto_jpg<br>
GitHub / GitHub Pages
</p>
<div style="height: 125px"></div>
<h2>website license</h2>
<p>
this website is licensed under MIT. review the following terms below for details:
</p>
<button onclick="MITPanelOpen(MIT)">read the MIT license</button>
</div>
</div>
</div>
<footer>
<div style="line-height: 50%; filter: drop-shadow(2px 4px 16px #3d374c80);">
<img class="vtmLogo" style="width: 375px;" src="media/svg/vtm_typeface_wide.svg" alt="">
<p style="font-size: smaller; color: #fff;"><i>est. 27 Dec 2022</i></p>
</div>
</footer>
</div>
</body>
</html>