diff options
Diffstat (limited to 'includes/components/pane.inc')
| -rw-r--r-- | includes/components/pane.inc | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/includes/components/pane.inc b/includes/components/pane.inc new file mode 100644 index 0000000..28ccd71 --- /dev/null +++ b/includes/components/pane.inc @@ -0,0 +1,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): if (!($category["minimal"] && $isLowerLoggedIn)): ?> + <div class="pane-group-category <?= $category["minimal"] ? "pane-group-category-minimal" : "" ?>" <?= $category["minimal"] ? 'style="display: grid; grid-template-columns: repeat(' . count($category["items"]) . ', 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 endif; 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>
\ No newline at end of file |