blob: e78815e079370d17c7ba7fc358a28ede3dafc386 (
plain)
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
|
<?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";
}
</script>
|
