<div id="main-content"> <div id="middle-box"> <p style="text-align: center;margin-bottom: 5px;font-size: 20px;">[ iwakura.rip ]</p> <img id="main-img" style="display:block;margin-left:auto;margin-right:auto;" src="https://media1.tenor.com/m/OlHMWq46CtAAAAAC/serial-experiments-lain-lain.gif" width="332" height="235"> <div class="link-container" id="service-container"> <a id="anim-1" href="https://mail.iwakura.rip"> [ mail ] </a> <a id="anim-2" href="https://git.iwakura.rip"> [ git ] </a> <a id="anim-3" href="https://media.iwakura.rip"> [ media ] </a> <a id="anim-4" href="https://blog.iwakura.rip"> [ blog ] </a> </div> <div class="link-container" id="main-container"> <a onclick="showContainer(aboutContainer)"> [ about ] </a> <a onclick="showContainer(serviceContainer)"> [ services ] </a> <a href="/guestbook"> [ guestbook ] </a> <a href="/pgp"> [ pgp ] </a> </div> <div class="link-container" id="about-container"> <a onclick="showSect(aboutSect)"> [ i ] </a> <a onclick="showSect(explaSect)"> [ ? ] </a> <a onclick="showSect(disclSect)"> [ ! ] </a> </div> </div> <br> <div id="about-box" class="fadeIn"> <div id="about-sect"> <bu>About</bu> <p>iwakura.rip is a collection of servers hosting mostly-private services for hexlocation & friends.</p> <p>The iwakura.rip website is also connected to dn42 (<a href="https://iwakura.dn42">iwakura.dn42</a>). We are planning to connect our services to dn42 too.</p> </div> <div id="expla-sect"> <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> </div> <div id="discl-sect"> <bu>Disclaimer</bu> <p>Serial Experiments Lain is the property of Triangle Studios. iwakura.rip is not affiliated with Triangle Studios.</p> </div> </div> </div> <style> @keyframes fadeIn { to { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } bu { font-weight: bold; text-decoration: underline; } #expla-sect, #discl-sect, #about-sect { opacity:0; display:none; } .fadeIn { animation: fadeIn 0.5s forwards; } .fadeOut { animation: fadeOut 0.5s forwards; } :root { --term-color: #4AF626; } @font-face { font-family: "Hack Nerd Font"; src: url(/assets/ttf/HNF-Reg.ttf); } a:hover { color: black !important; background-color: var(--term-color); } body { background-color: black; } #main-container { animation-delay: 0.2s; } a { text-decoration: none; transition: 0.3s; cursor: default; } .link-container { display: flex; margin-top: 5px; align-items: center; justify-content: center; transition: 0.5s; opacity:0; } #service-container { display: none; } #main-content, a { font-family: "Hack Nerd Font"; color: var(--term-color); } #main-content { /*font-family: "Hack Nerd Font"; color: var(--term-color);*/ position:absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); } </style> <script> let getId = (i) => document.getElementById(i); let serviceContainer = getId('service-container'); let mainContainer = getId('main-container'); 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"); let containers = [serviceContainer, mainContainer, aboutContainer]; function showContainer(container){ for (let _container of containers) { //_container.style.display = "none"; if (_container == container) continue _container.classList.remove("fadeIn"); _container.style.display = "none" } container.classList.add("fadeIn"); 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"; document.getElementById("main-img").onclick = () => { showContainer(mainContainer) for (let _s of sections) { _s.style.display="none"; _s.classList.remove("fadeIn"); } } </script>