all the js shit. yea all of it. gonna do some changes so commiting before i break shit

assets/animations.css

@@ -0,0 +1,119 @@
+/* loading animation */
+
+@keyframes appear {
+    0% {
+        visibility: visible;
+        display: block
+    }
+    99% {
+        visibility: hidden;
+        display: none
+    }
+}
+
+.nojs {
+    animation: 4.5s 1 reverse appear;
+    animation-delay: 4.5s;
+    animation-fill-mode: forwards;
+    visibility: hidden;
+    position: fixed
+}
+
+.credit {
+    animation: 4.5s 1 reverse appear;
+    animation-delay: 4.5s;
+    animation-fill-mode: forwards;
+    visibility: hidden;
+    position: fixed
+}
+
+.skip-animation {
+    animation: 4.5s 1 linear appear;
+    visibility: hidden;
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+}
+
+.loading > p:first-child {
+    animation: 0.9s 1 linear appear;
+    animation-fill-mode: forwards;
+    animation-delay: 0.3s;
+    visibility: hidden;
+    position: fixed
+}
+
+.loading > p:not(:first-child):not(:last-child) {
+    animation: 0.9s 1 linear appear;
+    animation-delay: 1.2s;
+    animation-fill-mode: forwards;
+    visibility: hidden;
+    position: fixed
+}
+
+.loading > p:last-child {
+    animation: 0.9s 1 linear appear;
+    animation-delay: 2.1s;
+    animation-fill-mode: forwards;
+    visibility: hidden;
+    position: fixed
+}
+
+@keyframes splash {
+    0%, 100% {
+        visibility: visible;
+        color: var(--c-bg);
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.splash {
+    animation-duration: 1.5s, 1.5s;
+    animation-iteration-count: 1, 1;
+    animation-timing-function: linear, linear;
+    animation-name: appear, splash;
+    animation-delay: 3s, 3s;
+    visibility: hidden;
+    position: fixed
+}
+
+@keyframes splash-bg {
+    0%, 100% {
+        background-color: var(--c-splash);
+    }
+}
+
+html {
+    animation: 1.5s 1 linear splash-bg;
+    animation-delay: 3s
+}
+
+@keyframes splash-fg {
+    0%, 100% {
+        color: var(--c-bg);
+    }
+}
+
+.skip-notice {
+    animation-duration: 4.5s, 1.5s;
+    animation-iteration-count: 1, 1;
+    animation-timing-function: linear, linear;
+    animation-name: appear, splash-fg;
+    animation-delay: 0s, 3s;
+    visibility: hidden;
+}
+
+@keyframes js {
+    0%, 100% {
+        visibility: hidden;
+    }
+}
+
+.js {
+    animation: 4.5s 1 linear js;
+    position: fixed;
+}

assets/base.css

@@ -2,7 +2,8 @@
 
 html {
     background-color: var(--c-bg);
-    scrollbar-color: var(--c-border) transparent
+    scrollbar-color: var(--c-border) transparent;
+    scrollbar-width: thin;
 }
 
 /* text, links and lists :3 */
@@ -14,7 +15,7 @@ t {
 }
 
 
-p {
+p, d {
     font-family: "mono";
     color: var(--c-fg);
     margin-top: 0;
@@ -27,11 +28,15 @@ a {
     text-decoration: none;
 }
 
-a:hover {
+a:focus {
     color: var(--c-bg);
     background-color: var(--c-highlight);
 }
 
+:is(a, d) + p {
+    display: none
+}
+
 ul {
     margin: 0 0 0 -16px;
 }
@@ -42,7 +47,7 @@ li {
 
 /* lil text on the borders :3 */
 
-.title, .credit, .skip-notice {
+.title, .title2, .credit, .skip-notice {
     height: 24px;
     background-color: var(--c-bg);
     color: var(--c-title);
@@ -68,12 +73,13 @@ li {
     right: 8px;
     color: var(--c-fg);
     background-color: transparent;
-    font-weight: normal
+    font-weight: normal;
+    opacity: 0
 }
 
 /* here are some @media rules to choose when to display ascii art */
 
-.ascii, .splash {
+.ascii > div, .splash {
     font-family: "mono";
     color: var(--c-fg);
     white-space: pre;
@@ -89,13 +95,13 @@ li {
 
 @media screen and (min-width: 420px) and (max-width: 649px) {
     .ascii-2 {
-        display: block
+        display: block !important
     }
 }
 
 @media screen and (min-width: 650px) {
     .ascii-1 {
-        display: block;
+        display: block !important
     }
 }
 
@@ -109,8 +115,7 @@ body > .nojs {
     overflow: hidden
 }
 
-
+main, .js > div > div {
-main {
     overflow: hidden auto;
     width: 100%;
     height: 100%;
@@ -118,111 +123,80 @@ main {
     box-sizing: border-box;
 }
 
-/* loading animation */
+/* styling for the js mode! */
-
+.js {
-@keyframes appear {
-    0% {
-        visibility: visible;
-        display: block
-    }
-    99% {
-        visibility: hidden;
-        display: none
-    }
-}
-
-.nojs {
-    animation: 4.5s 1 reverse appear;
-    animation-delay: 4.5s;
-    animation-fill-mode: forwards;
-    visibility: hidden;
-    position: fixed
-}
-
-.credit {
-    animation: 4.5s 1 reverse appear;
-    animation-delay: 4.5s;
-    animation-fill-mode: forwards;
-    visibility: hidden;
-    position: fixed
-}
-
-.skip-animation {
-    animation: 4.5s 1 linear appear;
     visibility: hidden;
+    border: 2px solid var(--c-border);
+    box-sizing: border-box;
     position: fixed;
-    width: 100vw;
+    width: calc(100vw - 16px);
-    height: 100vh;
+    height: calc(100vh - 16px);
+    top: 8px;
+    left: 8px
+}
+
+.js > div {
+    box-sizing: border-box;
+    border: 2px solid var(--c-border);
+    overflow: hidden;
+    position: fixed;
+}
+
+@media screen and (min-aspect-ratio: 1/1) {
+    .js > div:first-child {
+        width: calc(50vw - 4px - 11px);
+        height: calc(100vh - 16px - 10px);
+        top: 13px;
+        left: 13px
+    }
+    .js > div:last-child {
+        width: calc(50vw - 4px - 11px);
+        height: calc(100vh - 16px - 10px);
+        top: 13px;
+        right: 13px
+    }
+    .title2 {
         top: 0;
-    left: 0;
+        left: calc(50vw + 32px);
-}
-
-.loading > p:first-child {
-    animation: 0.9s 1 linear appear;
-    animation-fill-mode: forwards;
-    animation-delay: 0.3s;
-    visibility: hidden;
-    position: fixed
-}
-
-.loading > p:not(:first-child):not(:last-child) {
-    animation: 0.9s 1 linear appear;
-    animation-delay: 1.2s;
-    animation-fill-mode: forwards;
-    visibility: hidden;
-    position: fixed
-}
-
-.loading > p:last-child {
-    animation: 0.9s 1 linear appear;
-    animation-delay: 2.1s;
-    animation-fill-mode: forwards;
-    visibility: hidden;
-    position: fixed
-}
-
-@keyframes splash {
-    0%, 100% {
-        visibility: visible;
-        color: var(--c-bg);
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
     }
 }
 
-.splash {
+@media screen and (max-aspect-ratio: 1000/1001) {
-    animation-duration: 1.5s, 1.5s;
+    .js > div:first-child {
-    animation-iteration-count: 1, 1;
+        width: calc(100vw - 16px - 10px);
-    animation-timing-function: linear, linear;
+        height: calc(50vh - 4px - 11px);
-    animation-name: appear, splash;
+        top: 13px;
-    animation-delay: 3s, 3s;
+        left: 13px
-    visibility: hidden;
+    }
-    position: fixed
+    .js > div:last-child {
-}
+        width: calc(100vw - 16px - 10px);
-
+        height: calc(50vh - 4px - 11px);
-@keyframes splash-bg {
+        bottom: 13px;
-    0%, 100% {
+        left: 13px
-        background-color: var(--c-splash);
+    }
+    .title2 {
+        top: calc(50vh - 12px);
+        left: 32px;
     }
 }
 
-html {
+.js > div:only-child {
-    animation: 1.5s 1 linear splash-bg;
+    width: calc(100vw - 16px - 10px);
-    animation-delay: 3s
+    height: calc(100vh - 16px - 10px);
+    top: 13px;
+    left: 13px
 }
 
-@keyframes splash-fg {
+.buttons {
-    0%, 100% {
+    white-space: pre;
-        color: var(--c-bg);
+    margin-left: 24px
-    }
 }
 
-.skip-notice {
+.back {
-    animation-duration: 4.5s, 1.5s;
+    margin-bottom: 8px;
-    animation-iteration-count: 1, 1;
+    display: inline-block
-    animation-timing-function: linear, linear;
+}
-    animation-name: appear, splash-fg;
+
-    animation-delay: 0s, 3s;
+:focus {
-    visibility: hidden;
+    outline: none
 }

assets/main.js

@@ -1,16 +1,43 @@
 let stylesheet
+var audio = new(window.AudioContext)
+let jsDiv
+let mode
+let side
+let focusMain
+let focusSecond
+const focusSelector = "a, d"
+const back = document.createElement("a")
+back.setAttribute("onclick", "tui.home()")
+back.setAttribute("tabindex", "0")
+back.className = "back"
+back.innerHTML = `⬑Back`
 
 window.addEventListener("load", () => {
     stylesheet = document.styleSheets[0];
 
+    // randomize loading text
+    fetch("/assets/loading.txt")
+    .then(r => r.text())
+    .then(t => Load(t))
+
+    // allow the user to skip on click
     let skipNode = document.createElement("div");
     skipNode.setAttribute("class", "skip-animation");
     skipNode.setAttribute("onclick", "skipAnimation()");
     document.body.appendChild(skipNode);
 
-    fetch("/assets/loading.txt")
+    // get rid of shit since we have javascript babyyyyyyy
-    .then(r => r.text())
+    if (matchMedia("(min-width: 430px) and (min-height: 430px").matches) {
-    .then(t => Load(t))
+        for (let node of document.getElementsByClassName("nojs")) {
+            node.style.display = "none"
+        }
+        stylesheet.insertRule(".js { visibility: visible }", stylesheet.cssRules.length)
+        stylesheet.insertRule(".skip-notice { opacity: 1 }", stylesheet.cssRules.length)
+        stylesheet.insertRule("d:focus { color: var(--c-bg); background-color: var(--c-fg) }", stylesheet.cssRules.length)
+        document.querySelectorAll("head style").forEach(style => style.remove());
+        jsDiv = document.getElementsByClassName("js")[0]
+        tui.home()
+    }
 });
 
 // skip animations and shit
@@ -42,3 +69,180 @@ function Load (text) {
     loading.children[1].innerHTML = loadText + ".."
     loading.children[2].innerHTML = loadText + "..."
 }
+
+// beep!
+function beep() {
+    var oscillator = audio.createOscillator()
+
+    oscillator.type = "square"
+    oscillator.frequency.value = "1200"
+    oscillator.connect(audio.destination)
+    oscillator.start()
+
+    setTimeout(() => {
+        oscillator.stop()
+    }, 200)
+}
+
+// here are the functions that create every different section
+const tui = {
+    home: function() {
+        mode = "home"
+
+        const div = document.createElement("div")
+        div.appendChild(document.getElementsByClassName("ascii")[0].cloneNode(true));
+
+        let buttons = document.createElement("div")
+        buttons.className = "buttons"
+        buttons.innerHTML = `<a onclick="tui.about()" tabindex="0">About</a>
+<a onclick="tui.users()" tabindex="0">Users</a>
+<a onclick="tui.services()" tabindex="0">Services</a>
+<a href="https://linuxposting.xyz/">Linuxposting</a>
+<a onclick="beep()" tabindex="0">Beep</a>`
+        div.appendChild(buttons)
+
+        const title = document.createElement("span")
+        title.className = "title"
+        title.innerHTML = "Linuxposting Tilde~"
+        div.appendChild(title)
+        
+        jsDiv.children[0].replaceChildren(div)
+        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
+
+        indexFocus()
+    },
+
+    about: function() {
+        mode = "about"
+
+        const div = document.createElement("div")
+
+        div.appendChild(back)
+
+        div.appendChild(document.getElementsByClassName("ascii")[0].cloneNode(true));
+        div.appendChild(document.getElementById("about").cloneNode(true));
+
+        const title = document.createElement("span")
+        title.className = "title"
+        title.innerHTML = "About"
+        div.appendChild(title)
+    
+        jsDiv.children[0].replaceChildren(div)
+        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
+
+        indexFocus()
+    },
+
+    users: function() {
+        mode = "users"
+
+        const div = document.createElement("div")
+
+        div.appendChild(back)
+
+        div.appendChild(document.getElementById("users").cloneNode(true));
+
+        const title = document.createElement("span")
+        title.className = "title"
+        title.innerHTML = "Users"
+        div.appendChild(title)
+
+        const div2 = document.createElement("div")
+
+        const title2 = document.createElement("span")
+        title2.className = "title2"
+        title2.innerHTML = "Description"
+        div2.appendChild(document.createElement("div"))
+        div2.appendChild(title2)
+    
+        jsDiv.children[0].replaceChildren(div)
+        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
+        jsDiv.appendChild(div2)
+
+        indexFocus()
+    },
+
+    services: function() {
+        mode = "services"
+
+        const div = document.createElement("div")
+
+        div.appendChild(back)
+
+        div.appendChild(document.getElementById("services").cloneNode(true));
+
+        const title = document.createElement("span")
+        title.className = "title"
+        title.innerHTML = "Services"
+        div.appendChild(title)
+
+        const div2 = document.createElement("div")
+
+        const title2 = document.createElement("span")
+        title2.className = "title2"
+        title2.innerHTML = "Description"
+        div2.appendChild(document.createElement("div"))
+        div2.appendChild(title2)
+    
+        jsDiv.children[0].replaceChildren(div)
+        if (jsDiv.children[1]) {jsDiv.children[1].remove()}
+        jsDiv.appendChild(div2)
+
+        indexFocus()
+    },
+
+    updateFocus: function() {
+        const focused = document.activeElement
+        const sibling = focused.nextElementSibling
+        switch(mode) {
+            case "users":
+            case "services":
+                if (sibling && sibling.tagName === "P") {
+                    jsDiv.children[1].children[0].replaceChildren(sibling.cloneNode(true))
+                } else {
+                    jsDiv.children[1].children[0].innerHTML = ""
+                }
+                break
+        }
+    }
+}
+
+function indexFocus() {
+    focusList = Array.from(document.querySelectorAll(focusSelector)).filter(el => el.offsetParent !== null)
+    if (jsDiv.children[1]) {
+        focusList = focusList.filter(el => !jsDiv.children[1].contains(el))
+    }
+}
+
+document.addEventListener("mouseover", (e) => {
+  if (e.target.tagName.toLowerCase() === "a" || e.target.tagName.toLowerCase() === "d") {
+    e.target.focus()
+    tui.updateFocus()
+  }
+})
+
+document.addEventListener("keydown", (e) => {
+    if (!jsDiv) { return }
+    const currentFocus = focusList.indexOf(document.activeElement)
+    const focused = document.activeElement
+    switch(e.key) {
+        case "Escape":
+            tui.home()
+            break
+        case "ArrowDown":
+        case "ArrowRight":
+            e.preventDefault()
+            focusList[Math.min(currentFocus+1, focusList.length-1)].focus()
+            tui.updateFocus()
+            break
+        case "ArrowUp":
+        case "ArrowLeft":
+            e.preventDefault()
+            focusList[Math.max(0, currentFocus-1)].focus()
+            tui.updateFocus()
+            break
+        case "Enter":
+        case " ":
+            focused.click()
+    }
+})

index.html

@@ -5,7 +5,9 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Linuxposting Tilde</title>
         <link rel="stylesheet" href="/assets/base.css">
+        <link rel="stylesheet" href="/assets/animations.css">
         <link rel="stylesheet" href="/assets/colors.css">
+        <style>a:hover { color: var(--c-bg); background-color: var(--c-highlight) }</style>
         <link rel="icon" href="/assets/molly.svg">
     </head>
     <body>
@@ -21,20 +23,21 @@
                      ┘     ┘          </div>
         <div class="nojs skip"><main>
             <span class="title nojs skip">Linuxposting Tilde</span>
-<div class="ascii ascii-1">\  *                    __   *                 __        _
+<div class="ascii">
+<div class="ascii-1">\  *                    __   *                 __        _
  \  \ \_ \ \  \| ,_  ,_ \_ \- \ \_ ,-\   \|\ \  _\      / \_/
   \_ \ \\ \_\ |\ \_\ \_\ _\ \_ \ \\ \_\ *|\ \_\ \__
-                  \                  ._\    __/
+                  \                  ._\    __/</div>
-</div>
+<div class="ascii-2">│.               .                    
-<div class="ascii ascii-2">│.               .                    
 │ ├┐  ─┐/┌┐┌┐┌ ├  ├┐┌┐ ─┐/  ─┐   ┌─┐ ╷
 ││││││ │ ││││└┐│ │││││  │ ││┌┘   ╵ └─┘
 └   └┘/└─├┘└┘─┘└─   └┤./└─└┤└─        
                      ┘     ┘          </div>
+</div>
 
-            <p>Welcome to our tilde! We are a small community of linux-loving nerds, you can find some of our websites here!
+            <div id="about"><p>Welcome to our tilde! We are a small community of linux-loving nerds, you can find some of our websites here!
                 We also offer a lot of cool self-hosted stuff.
-                Interested in joining? <a href="https://linuxposting.xyz/register">Register here!</a> :3</p>
+                Interested in joining? <a href="https://linuxposting.xyz/register">Register here!</a> :3</p></div>
 
             <br>
             <t>Users:</t>
@@ -43,7 +46,7 @@
                 <li><a href="~ceres/">~ceres</a></li>
                 <li><a href="~jhalfsharp/">~jhalfsharp</a></li>
                 <li><a href="~kit/">~kit</a></li>
-                <li><a href="~magdalena/">~magdalena</a></li>
+                <li><a href="~magdalena/">~magdalena</a><p>computer nerd, silly catgirl, and linuxposting admin :3<br><br>check out my site!<br><br><br><br>disclaimer: cannot guarantee the presence of any girlkissing-related content</p></li>
                 <li><a href="~mara/">~mara</a></li>
                 <li><a href="~q4os/">~q4os</a></li>
                 <li><a href="~steamos/">~steamos</a></li>
@@ -53,8 +56,8 @@
             <br>
             <t>Services:</t>
             <ul id="services">
-                <li><p>Site hosting</p></li>
+                <li><d tabindex="0">Site hosting</d></li>
-                <li><p>Matrix</p></li>
+                <li><d tabindex="0">Matrix</d></li>
                 <li><a href="https://mail.linuxposting.xyz">Email</a></li>
                 <li><a href="https://w.linuxposting.xyz">Wafrn</a></li>
                 <li><a href="https://git.linuxposting.xyz">Git</a></li>
@@ -63,6 +66,7 @@
                 <li><a href="https://element.linuxposting.xyz">Element</a></li>
             </ul>
         </main></div>
+        <div class="js skip"><div></div></div>
         <span class="credit skip"><a href="https://girlkissing.tips">site by Magdalunaa :3</a></span>
         <span class="skip-notice skip">Click to skip</span>
     </body>