<?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 href="/-/logout" id="login-link" class="login-link-clickable"> <img alt="" src="/assets/icons/logout.svg" style="filter:invert(1);width:24px;vertical-align: middle;"> <span style="vertical-align: middle;"><?= $pages["logout"]["name"]["en"] ?></span> </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); height: 47px; } .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>