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
|
<?php global $isLoggedIn; global $isLowerLoggedIn; global $pages; global $navigation; $byColor = getMembersByColor(); global $lang; global $pages; ?>
<div id="pane-header-background" style="background-image: linear-gradient(90deg, <?php
$index = 0;
$list = array_map(function ($i) { return $i["color"]; }, $byColor);
$length = count($list);
foreach ($list as $color) {
$perc = ($index / $length) * 100;
echo("#${color}33 $perc%");
$index++;
if ($index < $length) echo(", ");
}
?>)">
<a href="/" id="pane-header" class="login-link-clickable" style="color: white; text-decoration: none; padding: 20px; display: block; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(20px);">
<img src="/assets/logo/newlogo<?= $isLoggedIn || $isLowerLoggedIn ? "3" : "" ?>.png" alt="" style="width:32px;vertical-align: middle;margin-right:5px;">
<span style="vertical-align: middle; font-weight: bold;">Cold Haze</span>
</a>
</div>
<?php if ($isLoggedIn || $isLowerLoggedIn): ?>
<a onclick="toggleGlobalSearch();" id="login-link" class="login-link-clickable">
<?= $lang["navigation"]["search"] ?>
</a>
<?php else: ?>
<a href="/-/login" id="login-link" class="login-link-clickable">
<?php global $_PROFILE; ?>
<img alt="" src="/assets/icons/login.svg" style="filter:invert(1);width:24px;vertical-align: middle;">
<span style="vertical-align: middle;"><?= $lang["navigation"]["login"] ?></span>
</a>
<?php endif; ?>
<?php foreach ($navigation as $id => $item): if (!$item["admin"] || $isLoggedIn || $isLowerLoggedIn): ?>
<div class="pane-group" id="pane-group-<?= $id ?>">
<div class="pane-group-title">
<img src="<?= $item["icon"] ?>" <?php if ($item["invert"]): ?>class="dropdown-icon"<?php endif; ?> alt="" style=" border-radius: 2px;width:24px;vertical-align: middle;">
<span style="vertical-align: middle;"><?= $item["name"] ?></span>
</div>
<?php foreach ($item["items"] as $category): ?>
<div class="pane-group-category <?= $category["minimal"] ? "pane-group-category-minimal" : "" ?>" <?= $category["minimal"] ? 'style="display: grid; grid-template-columns: repeat(' . ($isLowerLoggedIn ? 2 : 3) . ', 1fr); grid-gap: 10px;"' : "" ?>>
<?php if (isset($category["name"])): ?>
<div class="pane-group-category-title"><?= $category["name"] ?></div>
<?php endif; ?>
<?php foreach ($category["items"] as $link): if (isset($link)): if (!($isLowerLoggedIn && $link["private"])): ?>
<a class="pane-group-item" href="<?= $link["link"] ?>">
<img src="<?= $link["icon"] ?>" <?php if ($link["invert"]): ?>class="dropdown-icon"<?php endif; ?> alt="" style="width:24px; border-radius: 5px; vertical-align: middle;">
<?php if (!$category["minimal"]): ?><span style="vertical-align: middle;<?= isset($link["stepped"]) ? "color: $link[stepped];" : "" ?>"><?= isset($link["stepped"]) ? "<b>$link[name]</b>" : $link["name"] ?></span><?php endif; ?>
</a>
<?php endif; endif; endforeach; ?>
</div>
<?php endforeach; ?>
</div>
<?php endif; endforeach; ?>
<style>
.pane-group-category-title {
margin-bottom: 5px;
font-size: .8em;
opacity: .75;
padding: 0 5px;
}
.pane-group-category-minimal .pane-group-item {
text-align: center;
}
.pane-group-item {
display: block;
color: white !important;
text-decoration: none;
}
.pane-group-category {
background: rgba(255, 255, 255, .075);
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 10px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.pane-group-item {
padding: 5px;
border-radius: 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.pane-group-item:hover {
background-color: rgba(255, 255, 255, .1);
}
.pane-group-title {
opacity: .75;
padding: 0 15px;
margin-top: 10px;
}
.pane-group {
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, .25);
}
#login-link {
text-align: center;
padding: 10px;
display: block;
border-bottom: 1px solid rgba(255, 255, 255, .25);
}
.login-link-clickable {
color: white !important;
cursor: pointer !important;
text-decoration: none !important;
}
.login-link-clickable:hover {
background-color: rgba(255, 255, 255, .1);
}
</style>
|
