-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
176 lines (155 loc) · 12.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./assets/favicons/favicon.ico" type="image/x-icon">
<title>Moon Prism Pixels</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <!-- I don't remember where exactly I used BootStrap stuff but the site looks bad when I remove this -->
<link rel="stylesheet" type="text/css" href="./styles/index.css">
</head>
<body background="./assets/gifs/space.gif">
<audio id="background-music" loop>
<source src="./assets/audios/Ending Theme - Sailor Moon.mp3" type="audio/mpeg">
Your browser does not support the audio element. <!-- fallback text if audio not supported -->
</audio>
<button id="music-button" class="paused cursor-point" onclick="toggleMusic()">
<img width="23" height="23" src="./assets/images/music.png" alt="music"/> <!-- play or pause music -->
</button>
<div style="text-align: center;">
<table background="./assets/images/table-bg.jpg"> <!-- the defining characteristic of a 90s' website: table layouts -->
<tbody>
<tr>
<td><img id="sailors-gif-header" src="./assets/gifs/sailors.gif"></td>
<td>
<img id="site-logo" src="./assets/images/moon-prism-pixels-header.png">
<marquee><p class="blink"><a href="./sites/quiz/" class="blink link-hide">Click to find out which Guardian Sailor you are!</a></p></marquee> <!-- in true 90s' fashion, blink text! -->
</td>
</tr>
<tr>
<td>
<div style="text-align: center;">
<a class="navigation" href="./index.html"><div class="links cursor-point" style="background-color:rgb(255, 105, 180);">Home</div></a> <!-- these buttons are in the Sailor's colors. I wonder if anyone caught that -->
<a class="navigation" href="./sites/quiz/"><div class="links cursor-point" style="background-color:#ffbb00;">Quiz</div></a>
<a class="navigation" href="./sites/sailors/"><div class="links cursor-point" style="background-color:#39cb67;">Sailors</div></a>
<a class="navigation" href="./sites/fun/"><div class="links cursor-point" style="background-color:#35c4f8;">Fun Corner</div></a>
<a class="navigation" href="./sites/guestbook/"><div class="links cursor-point" style="background-color:rgb(242, 75, 75);">Guestbook</div></a>
<img class="divider-small" src="./assets/gifs/divider-small.gif">
<p class="courier" style="font-size: small;">You are visitor number: </p>
<script type="text/javascript" src="https://counter.websiteout.com/js/30/0/0/0"></script>
<br>
<img class="divider-small" src="./assets/gifs/divider-small.gif">
<div class="dev-log-box"> <!-- to keep track of all the changes I've made to the site -->
</div>
<img class="divider-small" src="./assets/gifs/divider-small.gif">
<div class="dev-log-box">
<h5 style="font-family: 'Courier New'; font-weight: 550; font-size: medium;">Notice</h5> <!-- to prevent legal issues -->
<p style="font-size: xx-small; margin-bottom: 0;">The copyright for Sailor Moon is held by Naoko Takeuchi, TOEI, DiC, Kodansha, Bandai, and others.<br>I do not claim ownership of their materials or Sailor Moon's image or likeness. No copyright infringement is intended.</p>
</div>
</div>
</td>
<td style="border: 1px solid #bbb;">
<span>
<table id="inner-table"> <!-- holds the main content of the site -->
<tbody>
<tr>
<td style="border: 0px; padding: 0px;"> </td> <!-- blank data cells for the aesthetics -->
<td style="border: 0px solid #bbb;" id="main-content">
<div style="text-align: center;">
<p>Are you a new Moonie?<br>Learn more about the Sailor Guardians ↓<br> <!-- each gif links to the corresponding Sailor's info site. I plan to make my own sites for each later -->
<div class="sailor-gifs">
<a class="link-hide" href="https://sailormoon.fandom.com/wiki/Minako_Aino_/_Sailor_Venus_(manga)" target="_blank"><img class="cursor-point" id="venus-gif" src="./assets/gifs/venus.gif"></a>
<a class="link-hide" href="https://sailormoon.fandom.com/wiki/Makoto_Kino_/_Sailor_Jupiter_(manga)" target="_blank"><img class="cursor-point" id="jupiter-gif" src="./assets/gifs/jupiter.gif"></a>
<a class="link-hide" href="https://sailormoon.fandom.com/wiki/Usagi_Tsukino_/_Sailor_Moon_(manga)" target="_blank"><img class="cursor-point" id="moon-gif" src="./assets/gifs/moon.gif"></a>
<a class="link-hide" href="././sites/sailors/mercury/"><img class="cursor-point" id="mercury-gif" src="./assets/gifs/mercury.gif"></a>
<a class="link-hide" href="https://sailormoon.fandom.com/wiki/Rei_Hino_/_Sailor_Mars_(manga)" target="_blank"><img class="cursor-point" id="mars-gif" src="./assets/gifs/mars.gif"></a>
</div>
<i id="smaller-font">- Sailor Aurora</i> <!-- Sailor Aurora is me! -->
</p>
<img class="divider" src="./assets/images/divider.png">
<p class="courier">
<b>'Sailors of Justice'</b> <!-- the amount of googling I did for rhymes is embarrasing -->
<br><br>
Under the glow of a crescent moon,<br>
A warrior wakes to her sacred tune.<br>
<br>
Her tiara shines, her courage bright,<br>
A beacon of hope in the endless night.<br>
<br>
By her side, her comrades stand,<br>
A fiery heart, a healer's hand.<br>
<br>
The power of thunder, the whisper of seas,<br>
Together they form the cosmos's keys.<br>
<br>
Their friendship glimmers like stars above,<br>
A force unbroken, bound by love.<br>
<br>
Oh Sailor Moon, forever you shall remain: <br>
A champion of love, through joy and pain.<br>
</p>
<img class="divider" src="./assets/images/divider.png">
<br>
<p style="font-size: small;">
🌙 Welcome to my little corner of the Sailor Moon universe 🌙 <br>
I made it 90s-themed to resemble sites from the days of <a href="https://en.wikipedia.org/wiki/GeoCities" target="_blank">Geocities.</a> <br>
This is for the Inner Senshis 💖 A site for the Outer Senshis is coming too! <br>
</p>
</div>
</td>
<td style="border: 0px; padding: 0px;"> </td>
</tr>
<tr>
<td style="border: 0px solid #bbb;" valign="top"> </td>
<td style="border: 0px solid #bbb;" valign="top">
<div style="text-align: center;">
<br>
<p>
You've been blessed by the power of the moon!
<br>
<img id="thanks-stamp" src="./assets/gifs/sailormoonstamp.gif">
<br>
<p class="blink">💖 Do visit again! 💖</p>
</p>
<br>
<p class="courier" id="bottom-links"><a href="././sites/guestbook/">Links</a> || <a href="././sites/sitemap/">Sitemap</a> || <a href="https://github.com/vams-skn/moon-prism-pixels" target="_blank">GitHub</a></p>
</div>
</td>
</tr>
</tbody>
</table>
</span>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="./scripts/index.js"></script>
<script> // to add updates in the log box
document.addEventListener('DOMContentLoaded', () => {
fetch('./updates.json')
.then(response => response.json())
.then(data => {
const logBox = document.querySelector('.dev-log-box');
logBox.innerHTML = `
<h5 style="font-family: 'Courier New'; font-weight: 550; padding-bottom: 10px;">Updates</h5>
`;
data.forEach(update => {
const dates = document.createElement('p');
dates.innerHTML = `<b><small>[${update.date}]</small></b> <br> ${update.title}`;
const desc = document.createElement('p');
desc.innerHTML = update.description;
const hr = document.createElement('hr');
logBox.appendChild(dates);
logBox.appendChild(desc);
logBox.appendChild(hr);
});
})
.catch(error => {
console.error('Error loading updates:', error);
});
});
</script>
</body>
</html>