Update

1 files changed, 176 insertions, 0 deletions

diff --git a/includes/rail.inc b/includes/rail.inc
new file mode 100644
index 0000000..b2ed467
--- /dev/null
+++ b/includes/rail.inc
@@ -0,0 +1,176 @@
+<?php global $pages; ?>
+<div id="rail" style="position: fixed;top: 60px;left: 0;bottom: 0;background: rgba(255, 255, 255, .1);width: 32px; display: grid; grid-template-rows: max-content 1fr;">
+    <div>
+        <a id="rl-1" class="rail-link" href="/-/dashboard"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/home.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-2" class="rail-link" href="/-/fronting"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/fronting.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-3" class="rail-link" href="/-/actions"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/actions.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-4" class="rail-link" href="/-/rules"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/rules.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-5" class="rail-link" href="/-/docs"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/docs.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-6" class="rail-link" href="/-/nicknames"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/nicknames.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-7" class="rail-link" href="/-/together"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/together.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-8" class="rail-link" href="/-/splitting"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/splitting.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-9" class="rail-link" href="/-/byfront"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/byfront.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-10" class="rail-link" href="/-/bitset"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/bitset.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-11" class="rail-link" href="/-/travelling"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/travelling.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-12" class="rail-link" href="/-/toys"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/toys.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-16" class="rail-link" href="/-/stats"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/stats.svg" style="filter: invert(1) brightness(2000%); height: 24px; display:block;">
+        </a>
+        <a id="rl-87" class="rail-link" href="/-/emergency"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/emergency.svg" style="height: 24px; display:block;">
+        </a>
+        <a id="rl-88" class="rail-link" href="/-/wakeup"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/wakeup.svg" style="height: 24px; display:block;">
+        </a>
+        <a id="rl-89" class="rail-link" href="/-/pleasure"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/pleasure.svg" style="height: 24px; display:block;">
+        </a>
+    </div>
+    <div style="margin-top: auto; height: max-content;">
+        <a id="rl-98" class="rail-link" href="/-/debug"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/debug.svg" style="filter: invert(1); height: 24px; display:block;">
+        </a>
+        <a id="rl-99" class="rail-link" href="/-/about"  style="padding: 4px; display: block;">
+            <img alt="" src="/assets/icons/about.svg" style="filter: invert(1) brightness(2000%); height: 24px; display:block;">
+        </a>
+    </div>
+</div>
+<div id="rail-text" style="position: fixed;top: 60px;left: 32px;bottom: 0; z-index: 9999999; opacity: 0; pointer-events: none; display: grid; grid-template-rows: max-content 1fr;">
+    <div>
+        <div id="rlt-1" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["dashboard"]["name"] ?>
+        </div>
+        <div id="rlt-2" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["fronting"]["name"] ?>
+        </div>
+        <div id="rlt-3" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["actions"]["name"] ?>
+        </div>
+        <div id="rlt-4" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["rules"]["name"] ?>
+        </div>
+        <div id="rlt-5" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["docs"]["name"] ?>
+        </div>
+        <div id="rlt-6" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["nicknames"]["name"] ?>
+        </div>
+        <div id="rlt-7" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["together"]["name"] ?>
+        </div>
+        <div id="rlt-8" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["splitting"]["name"] ?>
+        </div>
+        <div id="rlt-9" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["byfront"]["name"] ?>
+        </div>
+        <div id="rlt-10" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["bitset"]["name"] ?>
+        </div>
+        <div id="rlt-11" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["travelling"]["name"] ?>
+        </div>
+        <div id="rlt-12" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["toys"]["name"] ?>
+        </div>
+        <div id="rlt-16" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["stats"]["name"] ?>
+        </div>
+        <div id="rlt-87" class="rail-text-item text-danger fw-bold" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["emergency"]["name"] ?>
+        </div>
+        <div id="rlt-88" class="rail-text-item text-info fw-bold" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["wakeup"]["name"] ?>
+        </div>
+        <div id="rlt-89" class="rail-text-item text-success fw-bold" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["pleasure"]["name"] ?>
+        </div>
+    </div>
+    <div style="margin-top: auto; height: max-content;">
+        <div id="rlt-98" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["debug"]["name"] ?>
+        </div>
+        <div id="rlt-99" class="rail-text-item" style="height: 32px; display: flex; align-items: center; padding-left: 10px; opacity: 0;">
+            <?= $pages["about"]["name"] ?>
+        </div>
+    </div>
+</div>
+
+<style>
+    .rail-link:hover {
+        background: rgba(255, 255, 255, .1);
+        border-top: 1px solid #555;
+        border-bottom: 1px solid #555;
+        padding: 3px 4px !important;
+    }
+
+    .rail-text-item {
+        border: 1px solid #555;
+        border-left: none;
+        padding-right: 10px;
+        border-top-right-radius: 999px;
+        border-bottom-right-radius: 999px;
+        width: 0;
+    }
+
+    .rail-text-item.hovered {
+        background: #313131;
+        opacity: 1 !important;
+        width: max-content !important;
+    }
+</style>
+
+<script>
+    Array.from(document.getElementsByClassName("rail-link")).forEach((i) => {
+        let rt = document.getElementById("rlt-" + i.id.split("-")[1]);
+
+        i.onmouseenter = () => {
+            rt.classList.add("hovered");
+        }
+
+        i.onmouseleave = () => {
+            rt.classList.remove("hovered");
+        }
+    })
+
+    document.getElementById("rail").onmouseenter = () => {
+        document.getElementById("rail-text").style.opacity = "1";
+    }
+
+    document.getElementById("rail").onmouseleave = () => {
+        document.getElementById("rail-text").style.opacity = "0";
+    }
+
+    window.onscroll = () => {
+        let scroll = document.getElementsByTagName("html")[0].scrollTop;
+        let pos = 60 - scroll;
+
+        if (pos <= 0) pos = 0;
+        document.getElementById("rail").style.top = pos + "px";
+        document.getElementById("rail-text").style.top = pos + "px";
+    }
+</script>
\ No newline at end of file