hex/iwakuweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(index): add appriopriate 'section buttons' for each about-section.

Browse source
This commit is contained in:
hexlocation pc 2024-07-13 10:44:23 +02:00
parent f1d37a7141
commit e9379d1e23
1 changed files with 44 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
templates/index.html.tera
View file

@ -9,19 +9,31 @@
<a id="anim-4" href="https://blog.iwakura.rip">&nbsp;[ blog ]&nbsp;</a> <a id="anim-4" href="https://blog.iwakura.rip">&nbsp;[ blog ]&nbsp;</a>
</div> </div>
<div class="link-container" id="main-container"> <div class="link-container" id="main-container">
<a onclick="showAbout()">&nbsp;[ about ]&nbsp;</a> <a onclick="showContainer(aboutContainer)">&nbsp;[ about ]&nbsp;</a>
<a onclick="showContainer(serviceContainer)">&nbsp;[ services ]&nbsp;</a> <a onclick="showContainer(serviceContainer)">&nbsp;[ services ]&nbsp;</a>
<a href="/guestbook">&nbsp;[ guestbook ]&nbsp;</a>
</div>
<div class="link-container" id="about-container">
<a onclick="showSect(aboutSect)">&nbsp;[ i ]&nbsp;</a>
<a onclick="showSect(explaSect)">&nbsp;[ ? ]&nbsp;</a>
<a onclick="showSect(disclSect)">&nbsp;[ ! ]&nbsp;</a>
</div> </div>
</div> </div>
<br> <br>
<div id="about-box" class="fadeIn"> <div id="about-box" class="fadeIn">
<div id="about-sect">
<bu>About</bu> <bu>About</bu>
<p>iwakura.rip is a collection of servers hosting mostly-private services for hexlocation & friends.</p> <p>iwakura.rip is a collection of servers hosting mostly-private services for hexlocation & friends.</p>
</div>
<div id="expla-sect">
<bu>Explanation</bu> <bu>Explanation</bu>
<p>Most of the gifs/art/names/ui design is inspired by/based on <a href="https://en.wikipedia.org/wiki/Serial_Experiments_Lain"><b>Serial Experiments Lain</b></a>, an anime series about Lain <u>Iwakura</u></p> <p>Most of the gifs/art/names/ui design is inspired by/based on <a href="https://en.wikipedia.org/wiki/Serial_Experiments_Lain"><b>Serial Experiments Lain</b></a>, an anime series about Lain <u>Iwakura</u></p>
</div>
<div id="discl-sect">
<bu>Disclaimer</bu> <bu>Disclaimer</bu>
<p>Serial Experiments Lain is the property of Triangle Studios. iwakura.rip is not affiliated with Triangle Studios.</p> <p>Serial Experiments Lain is the property of Triangle Studios. iwakura.rip is not affiliated with Triangle Studios.</p>
</div> </div>
</div>
</div> </div>
<style> <style>
@keyframes fadeIn { @keyframes fadeIn {
@ -41,7 +53,7 @@ bu {
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
#about-box{ #expla-sect, #discl-sect, #about-sect {
opacity:0; opacity:0;
display:none; display:none;
} }
@ -99,13 +111,20 @@ a {
</style> </style>
<script> <script>
let getId = (i) => document.getElementById(i); let getId = (i) => document.getElementById(i);
let serviceContainer = getId('service-container'); let serviceContainer = getId('service-container');
let mainContainer = getId('main-container'); let mainContainer = getId('main-container');
let aboutContainer = getId('about-box'); let aboutContainer = getId('about-container');
let aboutSect = getId('about-sect');
let disclSect = getId('discl-sect');
let explaSect = getId('expla-sect');
let sections = [aboutSect, disclSect, explaSect];
mainContainer.classList.add("fadeIn"); mainContainer.classList.add("fadeIn");
let containers = [serviceContainer, mainContainer]; let containers = [serviceContainer, mainContainer, aboutContainer];
function showContainer(container){ function showContainer(container){
for (let _container of containers) { for (let _container of containers) {
//_container.style.display = "none"; //_container.style.display = "none";
@ -116,8 +135,23 @@ a {
container.classList.add("fadeIn"); container.classList.add("fadeIn");
container.style.display = "flex"; container.style.display = "flex";
} }
let showSect = (s) => {
for (let _s of sections) {
console.log(_s)
if (_s == s) continue;
_s.style.display = "none";
}
s.style.display = "block";
s.classList.add("fadeIn");
}
let showAbout = () => document.getElementById('about-box').style.display = "block"; let showAbout = () => document.getElementById('about-box').style.display = "block";
document.getElementById("main-img").onclick = () => { document.getElementById("main-img").onclick = () => {
showContainer(mainContainer) showContainer(mainContainer)
for (let _s of sections) {
_s.style.display="none";
_s.classList.remove("fadeIn");
}
} }
</script> </script>