From 46251292b5c8b431de66aeff473594ccec60e04c Mon Sep 17 00:00:00 2001
From: RaindropsSys <contact@minteck.org>
Date: Thu, 20 Jul 2023 18:29:09 +0200
Subject: Updated 19 files and added 26 files (automated)

---
 includes/components/2023ui.inc     | 114 ++++++
 includes/components/explicit.php   |  20 +-
 includes/components/footer.inc     |  10 +
 includes/components/fullbanner.inc |   2 -
 includes/components/header.inc     | 464 ++++++++++++++++++++-
 includes/components/mobilenav.inc  |   5 +-
 includes/components/navigation.inc | 814 +++++++++++++++++++------------------
 includes/components/pane.inc       |   5 +-
 includes/components/sysbanner.inc  |  11 +-
 9 files changed, 1011 insertions(+), 434 deletions(-)
 create mode 100644 includes/components/2023ui.inc

(limited to 'includes/components')

diff --git a/includes/components/2023ui.inc b/includes/components/2023ui.inc
new file mode 100644
index 0000000..556a8b5
--- /dev/null
+++ b/includes/components/2023ui.inc
@@ -0,0 +1,114 @@
+<div id="menu-bar" style="position: fixed; top: 0; left: 101px; right: 20px; height: 52px; display: grid; grid-template-columns: 1fr 1fr 1fr;">
+    <div style="display: grid; grid-template-columns: max-content 1fr;">
+        <div style="height: 52px; display: flex; align-items: center;">
+            <a href="/" style="color: inherit; text-decoration: inherit;">
+                <img src="/assets/logo/newlogo.png" style="width: 32px;">
+                <span style="margin-left: 5px; vertical-align: middle; position: relative; top: -1px; font-weight: bold;">Cold Haze</span>
+                <span data-bs-toggle="tooltip" data-bs-placement="bottom" title="This is the new Cold Haze experience and it is currently experimental" class="badge bg-warning" style="margin-left: 5px; vertical-align: middle; position: relative; top: -1px; font-weight: bold;">Beta</span>
+            </a>
+        </div>
+        <div style="display: flex; align-items: center;">
+            <?php global $isLowerLoggedIn; global $isLoggedIn; global $_PROFILE; if ($isLoggedIn || $isLowerLoggedIn): ?>
+            <div style="margin-left: auto; margin-right: auto;">
+                <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alerts" class="ui2023-side-bar-item" href="/-/alerts" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
+                    <img src="<?= icon("alerts") ?>" style="max-width: 28px; max-height: 28px;">
+                </a><a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Member lists" class="ui2023-side-bar-item" href="/-/lists" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
+                    <img src="<?= icon("lists") ?>" style="max-width: 28px; max-height: 28px;">
+                </a>
+            </div>
+            <?php endif; ?>
+        </div>
+    </div>
+    <div style="height: 52px; display: flex; align-items: center;">
+        <form action="/-/search" style="width: 100%;">
+            <input name="q" class="form-control" type="text" value="" placeholder="Search on Cold Haze..." style="width: 100%; margin-left: auto; margin-right: auto; border-color: var(--palette-4) !important; background-color: var(--palette-4) !important;">
+        </form>
+    </div>
+    <div style="display: grid; grid-template-columns: 1fr max-content;">
+        <div style="display: flex; align-items: center;">
+            <?php global $isLowerLoggedIn; global $isLoggedIn; global $_PROFILE; if ($isLoggedIn || $isLowerLoggedIn): ?>
+                <div style="margin-left: auto; margin-right: auto;">
+                    <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jobs" class="ui2023-side-bar-item" href="/-/jobs" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
+                        <img src="<?= icon("jobs") ?>" style="max-width: 28px; max-height: 28px;">
+                    </a><a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Account" class="ui2023-side-bar-item" href="/-/account" style="padding: 10px; height: 48px; width: 48px; display: inline-block; border-radius: 999px;">
+                        <img src="<?= icon("sessions") ?>" style="max-width: 28px; max-height: 28px;">
+                    </a>
+                </div>
+            <?php endif; ?>
+        </div>
+        <div style="height: 52px; display: flex; align-items: center;">
+            <?php global $isLowerLoggedIn; global $isLoggedIn; global $_PROFILE; if ($isLoggedIn || $isLowerLoggedIn): ?>
+                <a href="https://account.equestria.dev/hub/users/<?= $_PROFILE["id"] ?>" target="_blank" style="color: inherit; text-decoration: inherit;">
+                    <?php $fronters = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/" . ($_PROFILE["login"] === "raindrops" ? "gdapd" : ($_PROFILE["login"] === "cloudburst" ? "ynmuc" : "other")) . "/fronters.json"), true); if (isset($fronters["members"][0])): ?>
+                        <span style="margin-right: 5px; vertical-align: middle; margin-top: -2px;"><?= $fronters["members"][0]["display_name"] ?? $fronters["members"][0]["name"] ?></span>
+                        <img src="<?= getAsset(($_PROFILE["login"] === "raindrops" ? "gdapd" : ($_PROFILE["login"] === "cloudburst" ? "ynmuc" : "other")), $fronters["members"][0]["id"]) ?>" style="width: 32px; height: 32px; border-radius: 999px; background-color: var(--palette-2);">
+                    <?php else: ?>
+                        <span style="margin-right: 5px; vertical-align: middle; margin-top: -2px;"><?= $_PROFILE["name"] ?></span>
+                        <img src="https://account.equestria.dev/hub/api/rest/avatar/<?= $_PROFILE["id"] ?>?dpr=2&size=32" style="width: 32px; height: 32px; border-radius: 999px; background-color: var(--palette-2);">
+                    <?php endif; ?>
+                </a>
+            <?php else: ?>
+                <a href="/login" style="color: inherit; text-decoration: inherit;">
+                    <span style="margin-right: 5px; vertical-align: middle; margin-top: -2px;">Log in</span>
+                    <img src="<?= icon("login", false) ?>" class="light-only" style="width: 24px; height: 24px; margin: 4px;">
+                    <img src="<?= icon("login", true) ?>" class="dark-only" style="width: 24px; height: 24px; margin: 4px;">
+                </a>
+            <?php endif; ?>
+        </div>
+    </div>
+</div>
+
+<style>
+    .ui2023-side-bar-system:hover, .ui2023-side-bar-item:hover {
+        background-color: var(--palette-2);
+    }
+
+    .ui2023-side-bar-system:active {
+        background-color: var(--palette-1);
+    }
+
+    .ui2023-side-bar-system:active {
+        background-color: var(--palette-3);
+    }
+</style>
+
+<div id="side-bar" style="position: fixed; top: 62px; bottom: 20px; left: 0; width: 64px; display: flex; justify-content: center;">
+    <div>
+        <div style="background-color: var(--palette-4); height: max-content; border-radius: 999px;">
+            <a data-bs-toggle="tooltip" data-bs-placement="right" title="Raindrops System" class="ui2023-side-bar-system" href="/raindrops" style="padding: 8px; height: 48px; width: 48px; display: block; border-top-left-radius: 999px; border-top-right-radius: 999px;">
+                <img src="<?= getAsset("gdapd") ?>" style="max-width: 32px; max-height: 32px;">
+            </a>
+            <?php global $app; if ($isLoggedIn || $isLowerLoggedIn): ?>
+                <a data-bs-toggle="tooltip" data-bs-placement="right" title="<?= $app["other"]["name"] ?>" class="ui2023-side-bar-system" href="/<?= $app["other"]["slug"] ?>" style="padding: 8px; height: 48px; width: 48px; display: block;">
+                    <img src="<?= getAsset("other") ?>" style="max-width: 32px; max-height: 32px;">
+                </a>
+            <?php endif; ?>
+            <a data-bs-toggle="tooltip" data-bs-placement="right" title="Cloudburst System" class="ui2023-side-bar-system" href="/cloudburst" style="padding: 8px; height: 48px; width: 48px; display: block; border-bottom-left-radius: 999px; border-bottom-right-radius: 999px;">
+                <img src="<?= getAsset("ynmuc") ?>" style="max-width: 32px; max-height: 32px;">
+            </a>
+        </div>
+
+        <div style="margin-top: 20px;">
+            <a data-bs-toggle="tooltip" data-bs-placement="right" title="Relations" class="ui2023-side-bar-item" href="/-/relations" style="padding: 10px; height: 48px; width: 48px; display: block; border-radius: 999px;">
+                <img src="<?= icon("relations") ?>" style="max-width: 28px; max-height: 28px;">
+            </a>
+
+            <?php if ($isLowerLoggedIn || $isLoggedIn): ?>
+            <div style="margin: 10px 0; width: 48px; height: 2px; background-color: var(--palette-2);"></div>
+
+            <a data-bs-toggle="tooltip" data-bs-placement="right" title="Schedules" class="ui2023-side-bar-item" href="/-/schedules" style="padding: 10px; height: 48px; width: 48px; display: block; border-radius: 999px;">
+                <img src="<?= icon("schedule") ?>" style="max-width: 28px; max-height: 28px;">
+            </a>
+            <a data-bs-toggle="tooltip" data-bs-placement="right" title="Money tracker" class="ui2023-side-bar-item" href="/-/money" style="padding: 10px; height: 48px; width: 48px; display: block; border-radius: 999px;">
+                <img src="<?= icon("money") ?>" style="max-width: 28px; max-height: 28px;">
+            </a>
+            <a data-bs-toggle="tooltip" data-bs-placement="right" title="Documents" class="ui2023-side-bar-item" href="/-/docs" style="padding: 10px; height: 48px; width: 48px; display: block; border-radius: 999px;">
+                <img src="<?= icon("documents") ?>" style="max-width: 28px; max-height: 28px;">
+            </a>
+            <a data-bs-toggle="tooltip" data-bs-placement="right" title="System travelling" class="ui2023-side-bar-item" href="/-/travelling" style="padding: 10px; height: 48px; width: 48px; display: block; border-radius: 999px;">
+                <img src="<?= icon("travelling") ?>" style="max-width: 28px; max-height: 28px;">
+            </a>
+            <?php endif; ?>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/includes/components/explicit.php b/includes/components/explicit.php
index 4c55896..3e7675c 100644
--- a/includes/components/explicit.php
+++ b/includes/components/explicit.php
@@ -21,16 +21,18 @@
     </div>
 </div>
 
-<style>
-    #explicit-modal .modal-header {
-        border-bottom: 1px solid #353738;
-    }
+<?php global $use2023UI; if (!$use2023UI): ?>
+    <style>
+        #explicit-modal .modal-header {
+            border-bottom: 1px solid #353738;
+        }
 
-    #explicit-modal .modal-content {
-        border: 1px solid rgba(255, 255, 255, .2);
-        background-color: #111;
-    }
-</style>
+        #explicit-modal .modal-content {
+            border: 1px solid rgba(255, 255, 255, .2);
+            background-color: #111;
+        }
+    </style>
+<?php endif; ?>
 
 <!--suppress JSVoidFunctionReturnValueUsed -->
 <script>
diff --git a/includes/components/footer.inc b/includes/components/footer.inc
index 7cce7d4..26114a5 100644
--- a/includes/components/footer.inc
+++ b/includes/components/footer.inc
@@ -3,10 +3,12 @@ global $start;
 $GLOBALS["ColdHazePerformance"]["page"] = (microtime(true) - $start) * 1000;
 $start = microtime(true);
 global $pageFile;
+global $use2023UI;
 
 ?>
 
 <script src="/assets/editor/ua-parser.js"></script>
+<?php if (!$use2023UI): ?>
 <div id="footer-pre"></div>
 <div id="footer">
     <hr>
@@ -22,9 +24,15 @@ global $pageFile;
 
         ?>
         © 2022-<?= date("Y") ?> <a href="https://equestria.dev" target="_blank" class="text-muted"><?= $lang["footer"]["copyright"] ?></a> · build <?= $version["build"] ?>.<?= $version["revision"] ?>, took <?= round($time * 1000, 2) ?> ms
+        <?php global $use2023UI; if (($isLoggedIn || $isLowerLoggedIn) && !$use2023UI && isset($_COOKIE["enable2023UIcta"]) && $_COOKIE["enable2023UIcta"] === "yes") { ?>
+            <br>
+            <a class="text-muted" href="#" data-bs-toggle="modal" data-bs-target="#new-ui-cta" onclick="newShape();">Enable Cold Haze's experimental new shape</a>
+        <?php } ?>
         <br><br><br><br><br>
     </div>
 </div>
+<?php else: ?><br><br><?php endif; ?>
+</main>
 
 <script>
     let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
@@ -32,11 +40,13 @@ global $pageFile;
         return new bootstrap.Tooltip(tooltipTriggerEl)
     });
 
+    <?php if (!$use2023UI): ?>
     Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]')).forEach((item) => {
         if (!item.classList.contains("tooltip-nohelp")) {
             item.style.cursor = "help";
         }
     });
+    <?php endif; ?>
 
     //window.fetch("/api/rename?name=" + encodeURIComponent("Cold Haze Web (" + UAParser().browser.name + " on " + UAParser().os.name + ")"));
 
diff --git a/includes/components/fullbanner.inc b/includes/components/fullbanner.inc
index b8f1f27..99cdb53 100644
--- a/includes/components/fullbanner.inc
+++ b/includes/components/fullbanner.inc
@@ -18,11 +18,9 @@
     <div class="alert alert-primary" style="margin-bottom: 0 !important;">
         <?= getMiniName($memberData["display_name"] ?? $memberData["name"]) ?> <?= $lang["fullbanner"]["visit"][0] ?> <?= $systemID === "ynmuc" ? "Raindrops System" : "Cloudburst System" ?><?= str_replace("%1", getMemberPronouns($memberData["pronouns"])["subjective"], str_replace("%2", getMemberPronouns($memberData["pronouns"])["third"] ? "is" : "are", $lang["fullbanner"]["visit"][1])) ?><?= $systemCommonName ?>.
     </div>
-    <br>
 <?php elseif ($travelling[$memberID]['travelling'] && $travelling[$memberID]['equestria']): ?>
     <br>
     <div class="alert alert-primary" style="margin-bottom: 0 !important;">
         <?= getMiniName($memberData["display_name"] ?? $memberData["name"]) ?> is on a trip to <?= $metadata["fictive"] ? "Equestria" : "Celeste" ?>. <?= str_replace("%1", getMemberPronouns($memberData["pronouns"])["subjective"], str_replace("%2", getMemberPronouns($memberData["pronouns"])["third"] ? "is" : "are", "Therefore %1 %2 currently not in the ")) ?><?= $systemCommonName ?>.
     </div>
-    <br>
 <?php endif; ?>
\ No newline at end of file
diff --git a/includes/components/header.inc b/includes/components/header.inc
index 5179d54..0fa60ae 100644
--- a/includes/components/header.inc
+++ b/includes/components/header.inc
@@ -1,6 +1,12 @@
 <?php global $title; global $pages; global $readOnly;
 $start = microtime(true);
 $useNewUI = !isset($_GET['old']);
+$use2023UI = isset($_COOKIE["new2023UI"]) && !isset($_GET["no2023"]);
+global $use2023UI;
+
+if (!isset($_COOKIE["new2023UIctaFirstVisit"])) {
+    setcookie("new2023UIctaFirstVisit", time(), time() + 86400*365, "/", "", true, true);
+}
 
 $isNormallyLoggedIn = false;
 
@@ -53,25 +59,28 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
 <!doctype html>
 <html lang="en">
 <head>
-    <link href="/assets/logo/custom.css" rel="preload" as="style">
-    <link href="/assets/logo/light.css" rel="preload" as="style">
-    <link href="/assets/logo/custom.css" rel="stylesheet">
+    <script>
+        document.cookie = "new2023UIDarkMode=" + (window.matchMedia("(prefers-color-scheme: dark)").matches ? "yes" : "no") + "; max-age=" + (60*60*24*365) + "; path=/; samesite; secure";
+    </script>
+    <link href="/assets/logo/custom<?= $use2023UI ? "-2023" : "" ?>.css" rel="preload" as="style">
+    <link href="/assets/logo/light<?= $use2023UI ? "-2023" : "" ?>.css" rel="preload" as="style">
+    <link href="/assets/logo/custom<?= $use2023UI ? "-2023" : "" ?>.css" rel="stylesheet">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
     <title><?= $title && $title !== "-" ? $title . " · " : "" ?>Cold Haze</title>
     <link rel="shortcut icon" href="/assets/logo/newlogo<?= $isLoggedIn || $isLowerLoggedIn ? "3" : "" ?>.png" type="image/png">
-    <link href="/assets/logo/light.css" rel="stylesheet">
+    <link href="/assets/logo/light<?= $use2023UI ? "-2023" : "" ?>.css" rel="stylesheet">
 </head>
-<body style="background-color: #000;">
+<body<?php if (!$use2023UI): ?> style="background-color: #000;"<?php else: ?> style="background-color: var(--palette-1);"<?php endif; ?>>
     <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/components/navigation.inc"; global $navigation; ?>
 
     <?php if (!$useNewUI): ?>
     <div style="margin-top: 60px;" id="top-of-page"></div>
     <?php endif; ?>
 
-    <?php if ($useNewUI): ?>
+    <?php if ($useNewUI && !$use2023UI): ?>
     <aside id="navigation-pane">
         <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/components/pane.inc"; ?>
     </aside>
@@ -230,6 +239,367 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
     </style>
     <?php endif; ?>
 
+    <?php if ($use2023UI) {
+        $palettes = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/themes.json"), true);
+
+        $selectedPalette = $palettes["default"];
+
+        global $memberID; if (isset($memberID)) {
+            $member = getMemberWithoutSystem($memberID);
+
+            if (isset($_GET["debug"])) {
+                ob_clean();
+                echo("<pre>");
+
+                echo("Color difference debug\n======================\n\n");
+                echo("Member color: #" . $member["color"] . "\n\n");
+            }
+
+            $sr = hexdec(substr($member["color"], 0, 2));
+            $sg = hexdec(substr($member["color"], 2, 2));
+            $sb = hexdec(substr($member["color"], 4, 2));
+
+            $differencesAll = [];
+
+            foreach ($palettes["list"] as $id => $palette) {
+                $colors = [
+                    ...explode(",", $palette["dark"]),
+                    ...explode(",", $palette["light"])
+                ];
+
+                $importantColors = [
+                    $colors[5],
+                    $colors[9],
+                    $colors[15],
+                    $colors[19]
+                ];
+                $differences = [];
+
+                if (isset($_GET["debug"])) echo("Palette " . $id . ": " . implode(", ", array_map(function ($i) { return "#$i"; }, $importantColors)) . "\n");
+
+                foreach ($importantColors as $color) {
+                    $r = hexdec(substr($color, 0, 2));
+                    $g = hexdec(substr($color, 2, 2));
+                    $b = hexdec(substr($color, 4, 2));
+
+                    $dr = abs($r - $sr);
+                    $dg = abs($g - $sg);
+                    $db = abs($b - $sb);
+
+                    $differences[] = $dr + $dg + $db;
+                }
+
+                $total = array_reduce($differences, function ($a, $b) { return $a + $b; }) / count($differences);
+
+                if (isset($_GET["debug"])) {
+                    echo("    " . implode(", ", $differences) . "\n");
+                    echo("    " . $total . "\n\n");
+                }
+
+                $differencesAll[] = [
+                    "id" => $id,
+                    "difference" => $total
+                ];
+            }
+
+            usort($differencesAll, function ($a, $b) {
+                return $a["difference"] - $b["difference"];
+            });
+
+            if (isset($_GET["debug"])) {
+                echo("Smaller: " . $differencesAll[0]["id"] . ", " . $differencesAll[0]["difference"]);
+            }
+
+            $selectedPalette = $differencesAll[0]["id"];
+
+            if (isset($_GET["debug"])) {
+                echo("</pre>");
+                die();
+            }
+        }
+
+        global $userPalette;
+        $userPalette = $palettes["list"][$selectedPalette];
+
+        function rgb($color) {
+            return hexdec(substr($color, 0, 2)) . "," . hexdec(substr($color, 2, 2)) . "," . hexdec(substr($color, 4, 2));
+        }
+
+        function icon($name, $dark = null, $body = false) {
+            global $userPalette;
+
+            if (isset($dark)) {
+                return "/assets/icons/new/" . $name . ".svg?color=" . explode(",", $userPalette[$dark ? "dark" : "light"])[$body ? 6 : 9];
+            } else {
+                return "/assets/icons/new/" . $name . ".svg?color=" . explode(",", $userPalette[isset($_COOKIE["new2023UIDarkMode"]) && $_COOKIE["new2023UIDarkMode"] === "yes" ? "dark" : "light"])[$body ? 6 : 9];
+            }
+        }
+
+        foreach ([ "dark", "light" ] as $theme) { $palette = explode(",", $userPalette[$theme]); ?>
+            <style>
+                @media (prefers-color-scheme: <?= $theme ?>)<?= $theme === "light" ? ", (prefers-color-scheme: no-preference)" : "" ?> {
+                    :root {
+                        --bs-body-color:            #<?= $palette[6] ?>         !important;
+                        --bs-body-color-rgb:        <?= rgb($palette[6]) ?>     !important;
+                        --bs-body-bg:               #<?= $palette[0] ?>         !important;
+                        --bs-body-bg-rgb:           <?= rgb($palette[0]) ?>     !important;
+                        --bs-white:                 #<?= $palette[0] ?>         !important;
+                        --bs-white-rgb:             <?= rgb($palette[0]) ?>     !important;
+
+                        --bs-secondary-color:       #<?= $palette[6] ?>         !important;
+                        --bs-secondary-color-rgb:   <?= rgb($palette[6]) ?>     !important;
+                        --bs-secondary-bg:          #<?= $palette[1] ?>         !important;
+                        --bs-secondary:             #<?= $palette[6] ?>         !important;
+                        --bs-secondary-bg-rgb:      <?= rgb($palette[1]) ?>     !important;
+
+                        --bs-tertiary-color:        #<?= $palette[6] ?>         !important;
+                        --bs-tertiary-color-rgb:    <?= rgb($palette[6]) ?>     !important;
+                        --bs-tertiary-bg:           #<?= $palette[2] ?>         !important;
+                        --bs-tertiary-bg-rgb:       <?= rgb($palette[2]) ?>     !important;
+
+                        --bs-light:                 #<?= $palette[2] ?>         !important;
+                        --bs-light-rgb:             <?= rgb($palette[2]) ?>     !important;
+
+                        --bs-link-color:            #<?= $palette[9] ?>         !important;
+                        --bs-link-hover-color:      #<?= $palette[9] ?>77       !important;
+                        --bs-link-active-color:     #<?= $palette[9] ?>77       !important;
+
+                        --palette-0:                #<?= $palette[0] ?>         !important;
+                        --palette-1:                #<?= $palette[1] ?>         !important;
+                        --palette-2:                #<?= $palette[2] ?>         !important;
+                        --palette-3:                #<?= $palette[3] ?>         !important;
+                        --palette-4:                #<?= $palette[4] ?>         !important;
+                        --palette-5:                #<?= $palette[5] ?>         !important;
+                        --palette-6:                #<?= $palette[6] ?>         !important;
+                        --palette-7:                #<?= $palette[7] ?>         !important;
+                        --palette-8:                #<?= $palette[8] ?>         !important;
+                        --palette-9:                #<?= $palette[9] ?>         !important;
+
+                        --palette-0-rgb:            <?= rgb($palette[0]) ?>     !important;
+                        --palette-1-rgb:            <?= rgb($palette[1]) ?>     !important;
+                        --palette-2-rgb:            <?= rgb($palette[2]) ?>     !important;
+                        --palette-3-rgb:            <?= rgb($palette[3]) ?>     !important;
+                        --palette-4-rgb:            <?= rgb($palette[4]) ?>     !important;
+                        --palette-5-rgb:            <?= rgb($palette[5]) ?>     !important;
+                        --palette-6-rgb:            <?= rgb($palette[6]) ?>     !important;
+                        --palette-7-rgb:            <?= rgb($palette[7]) ?>     !important;
+                        --palette-8-rgb:            <?= rgb($palette[8]) ?>     !important;
+                        --palette-9-rgb:            <?= rgb($palette[9]) ?>     !important;
+                    }
+
+                    .dropdown-menu {
+                        --bs-dropdown-bg: #<?= $palette[1] ?> !important;
+                        --bs-dropdown-link-color: #<?= $palette[6] ?> !important;
+                        --bs-dropdown-link-disabled-color: #<?= $palette[6] ?>77 !important;
+                        --bs-dropdown-link-hover-color: #<?= $palette[6] ?> !important;
+                        --bs-dropdown-link-hover-bg: #<?= $palette[3] ?> !important;
+                        --bs-dropdown-link-active-bg: #<?= $palette[6] ?> !important;
+                        --bs-dropdown-link-active-color: #<?= $palette[6] ?> !important;
+                    }
+
+                    .coins {
+                        color: #<?= $palette[6] ?> !important;
+                        background-color: #<?= $palette[1] ?> !important;
+                    }
+
+                    .list-group-item-primary {
+                        color: var(--bs-body-bg);
+                        background-color: #<?= $palette[6] ?>;
+                    }
+
+                    .list-group-item-action.list-group-item-primary:hover, .list-group-item-action.list-group-item-primary:active, .list-group-item-action.list-group-item-primary:focus {
+                        background-color: #<?= $palette[6] ?>dd;
+                        color: var(--bs-body-bg);
+                    }
+
+                    .profile-border-inner-active {
+                        background-color: var(--bs-tertiary-bg) !important;
+                    }
+
+                    .bg-secondary {
+                        background-color: #<?= $palette[9] ?> !important;
+                        color: #<?= $palette[0] ?> !important;
+                    }
+
+                    .list-group-item-primary small {
+                        color: #<?= $palette[0] ?>77 !important;
+                    }
+
+                    .dropdown-item:active span, .dropdown-item:active img {
+                        filter: invert(1);
+                    }
+
+                    .list-group, .list-group-item, .list-group-item-action {
+                        --bs-list-group-color: var(--bs-body-color) !important;
+                        --bs-list-group-action-color: var(--bs-body-color) !important;
+                        --bs-list-group-action-hover-color: var(--bs-body-color) !important;
+                        --bs-list-group-action-active-color: var(--bs-body-color) !important;
+                        --bs-list-group-border-color: #<?= $palette[5] ?> !important;
+                        --bs-list-group-bg: #<?= $palette[2] ?> !important;
+                        --bs-list-group-action-hover-bg: #<?= $palette[1] ?> !important;
+                        --bs-list-group-action-active-bg: #<?= $palette[1] ?> !important;
+                    }
+
+                    .btn-outline-dark, .btn-outline-secondary {
+                        --bs-btn-color: var(--bs-body-color);
+                        --bs-btn-border-color: var(--bs-body-color);
+                        --bs-btn-hover-color: var(--bs-body-bg);
+                        --bs-btn-hover-bg: var(--bs-body-color);
+                        --bs-btn-hover-border-color: var(--bs-body-color);
+                        --bs-btn-focus-shadow-rgb: <?= rgb($palette[6]) ?>;
+                        --bs-btn-active-color: var(--bs-body-bg);
+                        --bs-btn-active-bg: var(--bs-body-color);
+                        --bs-btn-active-border-color: var(--bs-body-color);
+                        --bs-btn-active-shadow: inset 0 3px 5px rgba(<?= rgb($palette[6]) ?>, 0.125);
+                        --bs-btn-disabled-color: #<?= $palette[6] ?>77;
+                        --bs-btn-disabled-bg: transparent;
+                        --bs-btn-disabled-border-color: #<?= $palette[6] ?>77;
+                        --bs-gradient: none;
+                    }
+
+                    .alert-primary {
+                        --bs-alert-color: var(--bs-body-bg);
+                        --bs-alert-bg: var(--bs-body-color);
+                        --bs-alert-border-color: var(--bs-body-color);
+                    }
+
+                    .alert-danger, .alert-success, .alert-warning, .list-group-item-warning {
+                        --bs-alert-color: var(--bs-body-bg) !important;
+                        --bs-alert-bg: #<?= $palette[9] ?> !important;
+                        --bs-alert-border-color: #<?= $palette[9] ?> !important;
+                        --bs-list-group-border-color: #<?= $palette[8] ?> !important;
+                    }
+
+                    .list-group-item-warning, .list-group-item-success, .list-group-item-danger, .list-group-item-warning:hover, .list-group-item-success:hover, .list-group-item-danger:hover, .list-group-item-warning:active, .list-group-item-success:active, .list-group-item-danger:active {
+                        color: var(--bs-body-color) !important;
+                        background-color: #<?= $palette[8] ?> !important;
+                    }
+
+                    .list-group-item-warning:hover, .list-group-item-success:hover, .list-group-item-danger:hover {
+                        opacity: .75;
+                    }
+
+                    .list-group-item-warning:active, .list-group-item-success:active, .list-group-item-danger:active {
+                        opacity: .5;
+                    }
+
+                    .list-group-item[open] {
+                        opacity: 1 !important;
+                    }
+
+                    .alert-secondary {
+                        --bs-alert-color: var(--bs-secondary-color);
+                        --bs-alert-bg: var(--bs-secondary-bg);
+                        --bs-alert-border-color: var(--bs-secondary-bg);
+                    }
+
+                    .badge.bg-success, .badge.bg-danger, .badge.bg-warning {
+                        background-color: var(--bs-body-color) !important;
+                        color: var(--bs-body-bg) !important;
+                    }
+
+                    .badge.bg-secondary, .badge.bg-black {
+                        background-color: var(--bs-body-bg) !important;
+                        color: var(--bs-body-color) !important;
+                    }
+
+                    .text-muted {
+                        color: #<?= $palette[6] ?>77 !important;
+                    }
+
+                    body.bg-light {
+                        background-color: var(--bs-body-bg) !important;
+                    }
+
+                    .btn-primary {
+                        --bs-btn-color: #<?= $palette[8] ?>;
+                        --bs-btn-bg: #<?= $palette[9] ?>;
+                        --bs-btn-border-color: #<?= $palette[9] ?>;
+                        --bs-btn-hover-color: #<?= $palette[8] ?>;
+                        --bs-btn-hover-bg: #<?= $palette[9] ?>;
+                        --bs-btn-hover-border-color: #<?= $palette[9] ?>;
+                        --bs-btn-focus-shadow-rgb: <?= rgb($palette[9]) ?>;
+                        --bs-btn-active-color: #<?= $palette[8] ?>;
+                        --bs-btn-active-bg: #<?= $palette[9] ?>;
+                        --bs-btn-active-border-color: #<?= $palette[9] ?>;
+                        --bs-btn-active-shadow: inset 0 3px 5px rgba(<?= rgb($palette[9]) ?>, 0.25);
+                        --bs-btn-disabled-color: #<?= $palette[8] ?>;
+                        --bs-btn-disabled-bg: #<?= $palette[9] ?>77;
+                        --bs-btn-disabled-border-color: #<?= $palette[9] ?>77;
+                    }
+
+                    .btn-outline-primary {
+                        --bs-btn-color: #<?= $palette[9] ?>;
+                        --bs-btn-border-color: #<?= $palette[9] ?>;
+                        --bs-btn-hover-color: var(--bs-body-bg);
+                        --bs-btn-hover-bg: #<?= $palette[9] ?>;
+                        --bs-btn-hover-border-color: #<?= $palette[9] ?>;
+                        --bs-btn-focus-shadow-rgb: <?= rgb($palette[6]) ?>;
+                        --bs-btn-active-color: var(--bs-body-bg);
+                        --bs-btn-active-bg: #<?= $palette[9] ?>;
+                        --bs-btn-active-border-color: #<?= $palette[9] ?>;
+                        --bs-btn-active-shadow: inset 0 3px 5px rgba(<?= rgb($palette[6]) ?>, 0.125);
+                        --bs-btn-disabled-color: #<?= $palette[6] ?>77;
+                        --bs-btn-disabled-bg: transparent;
+                        --bs-btn-disabled-border-color: #<?= $palette[6] ?>77;
+                        --bs-gradient: none;
+                    }
+
+                    .form-control, .form-control:focus, .form-select, .form-select:focus {
+                        color: var(--bs-body-color);
+                        background-color: #<?= $palette[2] ?>;
+                        border-color: #<?= $palette[3] ?>;
+                    }
+
+                    .form-control:focus, .form-select:focus {
+                        box-shadow: 0 0 0 0.25rem rgba(<?= rgb($palette[9]) ?>, .25);
+                    }
+
+                    .form-control::placeholder, .form-select::placeholder {
+                        color: #<?= $palette[6] ?>77;
+                    }
+
+                    .modal {
+                        --bs-modal-bg: #<?= $palette[1] ?> !important;
+                        --bs-modal-header-border-color: #<?= $palette[3] ?> !important;
+                    }
+
+                    .card {
+                        --bs-card-bg: #<?= $palette[1] ?> !important;
+                    }
+
+                    .btn-close {
+                        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23<?= $palette[6] ?>'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat
+                    }
+
+                    .ck-editor {
+                        color: var(--bs-black);
+                    }
+
+                    .alert-primary a, .alert-danger a, .alert-success a, .alert-warning a {
+                        color: var(--bs-body-bg);
+                    }
+
+                    #plus-box, #plus-box > div > div > div > span, #plus-box h2 {
+                        color: var(--bs-body-color);
+                    }
+
+                    #plus-box {
+                        background: #<?= $palette[2] ?> !important;
+                    }
+
+                    #plus-box > div {
+                        background-image: none !important;
+                    }
+                }
+            </style>
+        <?php }
+    } ?>
+
+    <?php if ($use2023UI): ?>
+        <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/components/2023ui.inc"; ?>
+    <?php endif; ?>
+
 <?php if (isset($_GET["mini"]) || str_contains($_SERVER["HTTP_USER_AGENT"], "+ColdHazeDesktop")) {
     ?>
     <style>
@@ -258,5 +628,83 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/util/functions.inc";
     }
 </style>
 <?php }
+
+if (
+    (($isLoggedIn || $isLowerLoggedIn) && !$use2023UI && isset($_COOKIE["enable2023UIcta"]) && $_COOKIE["enable2023UIcta"] === "yes") ||
+    (isset($_COOKIE["force2023UIcta"]) && $_COOKIE["force2023UIcta"] === "yes" && !$use2023UI)
+) { ?>
+    <div class="modal fade" id="new-ui-cta">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-body">
+                    <img src="/assets/logo/light.svg" style="width: 100%; margin-bottom: 20px;" class="cta-light">
+                    <img src="/assets/logo/dark.svg" style="width: 100%; margin-bottom: 20px;" class="cta-dark">
+                    <style>
+                        @media (prefers-color-scheme: light) {
+                            .cta-dark {
+                                display: none;
+                            }
+                        }
+
+                        @media (prefers-color-scheme: dark) {
+                            .cta-light {
+                                display: none;
+                            }
+
+                            #new-ui-cta .modal-header {
+                                border-bottom: 1px solid #353738;
+                            }
+
+                            #new-ui-cta .modal-content {
+                                border: 1px solid rgba(255, 255, 255, .2);
+                                background-color: #111;
+                            }
+                        }
+                    </style>
+                    <h3 style="text-align: center;">There is more to it</h3>
+                    <p style="text-align: center;">Cold Haze is getting a new shape. Help us improve it by testing it early before it is made publicly available.</p>
+                    <p style="text-align: center;">The new design is colorful, clean, modern, simple, fast, and gives you access to what you need the most.</p>
+                    <div style="text-align: center;"><a class="btn btn-primary" href="/api/2023ui">Try it now</a> <a data-bs-dismiss="modal" onclick="localStorage.setItem('dismissed2023cta', '')" class="btn btn-outline-secondary">Maybe later</a></div>
+                    <hr>
+                    <div class="small text-muted">Some features are not available in the new design. <a href="https://bugs.equestria.dev/articles/CH-A-1/New-design-FAQ" target="_blank">Learn more.</a></div>
+                    <!-- Equestria.dev makes no guarantee whatsoever that, after turning on this experimental feature, Cold Haze will continue working as intended. Access to emergency features might be unavailable while this option is turned on. Temporarily turning it off is possible using the "no2023" URL parameter. -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        if (localStorage.getItem("dismissed2023cta") === null) {
+            let modal = new bootstrap.Modal(document.getElementById("new-ui-cta"));
+            modal.show();
+        }
+    </script>
+<?php }
+
+if ($use2023UI && isset($_GET["ui2023intro"])) { ?>
+    <div class="modal fade" id="new-ui-success">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-body" style="text-align: center;">
+                    <img src="<?= icon("wave", false) ?>" class="light-only" style="height: 56px; margin: 10px 0;">
+                    <img src="<?= icon("wave", true) ?>" class="dark-only" style="height: 56px; margin: 10px 0;">
+                    <h3 style="text-align: center;">Welcome to a new experience</h3>
+                    <p style="text-align: center;">The new design is now activated and you can use it now.</p>
+                    <p style="text-align: center;">Please remember that it is currently experimental and you should report any issue you encounter.</p>
+                    <div style="text-align: center;"><a data-bs-dismiss="modal" onclick="localStorage.setItem('dismissed2023cta', '')" class="btn btn-outline-primary">Done</a></div>
+                    <hr>
+                    <div class="small text-muted">Some features are not available in the new design. <a href="">Learn more.</a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let modal = new bootstrap.Modal(document.getElementById("new-ui-success"));
+        modal.show();
+    </script>
+<?php }
+
 require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/components/explicit.php";
 $GLOBALS["ColdHazePerformance"]["header"] = (microtime(true) - $start) * 1000; $start = microtime(true); ?>
+<main id="app" style="background-color: var(--palette-0);">
\ No newline at end of file
diff --git a/includes/components/mobilenav.inc b/includes/components/mobilenav.inc
index 7b49434..e42e9ab 100644
--- a/includes/components/mobilenav.inc
+++ b/includes/components/mobilenav.inc
@@ -1,4 +1,4 @@
-<?php global $navigation; global $isLoggedIn; global $isLowerLoggedIn; ?>
+<?php global $use2023UI; global $navigation; global $isLoggedIn; global $isLowerLoggedIn; if (!$use2023UI): ?>
 <div id="mobile-navigation">
     <div id="mobile-navigation-container" class="container" style="display: grid; grid-template-columns: repeat(<?= count(array_values(array_filter($navigation, function ($item) use ($isLoggedIn) {
         return !$item["admin"] || $isLoggedIn;
@@ -85,4 +85,5 @@
             closeMobileNavigation();
         }
     }
-</script>
\ No newline at end of file
+</script>
+<?php endif; ?>
\ No newline at end of file
diff --git a/includes/components/navigation.inc b/includes/components/navigation.inc
index 1761937..1d24dea 100644
--- a/includes/components/navigation.inc
+++ b/includes/components/navigation.inc
@@ -1,444 +1,448 @@
 <?php
 
+global $use2023UI;
 $pages = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/pages.json"), true);
 
 global $navigation;
 global $toplevel;
 global $lang; global $pages; global $app; global $isLowerLoggedIn; global $isLoggedIn;
 
-$cache = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/cache/navigation.json"), true);
+if (!$use2023UI) {
 
-if (!isset($cache["raindrops"])) $cache["raindrops"] = [];
-if (!isset($cache["cloudburst"])) $cache["cloudburst"] = [];
-if (!isset($cache["other"])) $cache["other"] = [];
+    $cache = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/cache/navigation.json"), true);
 
-foreach ([
-    [
-        "name" => "raindrops",
-        "id" => "gdapd"
-    ],
-    [
-        "name" => "cloudburst",
-        "id" => "ynmuc"
-    ],
-    [
-        "name" => "other",
-        "id" => $app["other"]["id"]
-    ]
-] as $cacheSystem) {
-    if (!isset($cache[$cacheSystem["name"]]["public"])) {
-        $isLoggedInOldState = $isLoggedIn;
-        $isLowerLoggedInOldState = $isLowerLoggedIn;
+    if (!isset($cache["raindrops"])) $cache["raindrops"] = [];
+    if (!isset($cache["cloudburst"])) $cache["cloudburst"] = [];
+    if (!isset($cache["other"])) $cache["other"] = [];
 
-        $isLoggedIn = false;
-        $isLowerLoggedIn = false;
-
-        $cache[$cacheSystem["name"]]["public"] = array_map(function ($member) {
-            return [
-                "name" => $member['display_name'] ?? $member['name'],
-                "icon" => getAsset($member["system"], $member["id"], "heads"),
-                "invert" => false,
-                "link" => "/$member[name]",
-                "stepped" => null,
-                "private" => false
-            ];
-        }, array_filter(scoreOrder(withTravelers(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$cacheSystem[id]/members.json"), true), "$cacheSystem[id]"), "$cacheSystem[id]"), function ($member) {
-            return $member['name'] !== "unknown" && $member['name'] !== "fusion" && $member['name'] !== "new";
-        }));
-
-        $isLoggedIn = $isLoggedInOldState;
-        $isLowerLoggedIn = $isLowerLoggedInOldState;
-    }
+    foreach ([
+        [
+            "name" => "raindrops",
+            "id" => "gdapd"
+        ],
+        [
+            "name" => "cloudburst",
+            "id" => "ynmuc"
+        ],
+        [
+            "name" => "other",
+            "id" => $app["other"]["id"]
+        ]
+    ] as $cacheSystem) {
+        if (!isset($cache[$cacheSystem["name"]]["public"])) {
+            $isLoggedInOldState = $isLoggedIn;
+            $isLowerLoggedInOldState = $isLowerLoggedIn;
 
-    if (!isset($cache[$cacheSystem["name"]]["private"])) {
-        $isLoggedInOldState = $isLoggedIn;
-        $isLowerLoggedInOldState = $isLowerLoggedIn;
+            $isLoggedIn = false;
+            $isLowerLoggedIn = false;
 
-        $isLoggedIn = true;
-        $isLowerLoggedIn = false;
+            $cache[$cacheSystem["name"]]["public"] = array_map(function ($member) {
+                return [
+                    "name" => $member['display_name'] ?? $member['name'],
+                    "icon" => getAsset($member["system"], $member["id"], "heads"),
+                    "invert" => false,
+                    "link" => "/$member[name]",
+                    "stepped" => null,
+                    "private" => false
+                ];
+            }, array_filter(scoreOrder(withTravelers(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$cacheSystem[id]/members.json"), true), "$cacheSystem[id]"), "$cacheSystem[id]"), function ($member) {
+                return $member['name'] !== "unknown" && $member['name'] !== "fusion" && $member['name'] !== "new";
+            }));
 
-        $cache[$cacheSystem["name"]]["private"] = array_map(function ($member) {
-            return [
-                "name" => $member['display_name'] ?? $member['name'],
-                "icon" => getAsset($member["system"], $member["id"], "heads"),
-                "invert" => false,
-                "link" => "/$member[name]",
-                "stepped" => null,
-                "private" => false
-            ];
-        }, array_filter(scoreOrder(withTravelers(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$cacheSystem[id]/members.json"), true), "$cacheSystem[id]"), "$cacheSystem[id]"), function ($member) {
-            return $member['name'] !== "unknown" && $member['name'] !== "fusion" && $member['name'] !== "new";
-        }));
+            $isLoggedIn = $isLoggedInOldState;
+            $isLowerLoggedIn = $isLowerLoggedInOldState;
+        }
 
-        $isLoggedIn = $isLoggedInOldState;
-        $isLowerLoggedIn = $isLowerLoggedInOldState;
-    }
-}
+        if (!isset($cache[$cacheSystem["name"]]["private"])) {
+            $isLoggedInOldState = $isLoggedIn;
+            $isLowerLoggedInOldState = $isLowerLoggedIn;
 
-file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/cache/navigation.json", json_encode($cache));
+            $isLoggedIn = true;
+            $isLowerLoggedIn = false;
 
-$navigation_admin = [
-    "admin" => !$isLowerLoggedIn,
-    "name" => "Private utilities",
-    "icon" => "/assets/icons/admin.svg",
-    "invert" => true,
-    "items" => [
-        "alerts" => [
-            "name" => null,
-            "minimal" => true,
-            "items" => [
-                [
-                    "name" => $pages["emergency"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/emergency.svg",
+            $cache[$cacheSystem["name"]]["private"] = array_map(function ($member) {
+                return [
+                    "name" => $member['display_name'] ?? $member['name'],
+                    "icon" => getAsset($member["system"], $member["id"], "heads"),
                     "invert" => false,
-                    "link" => "/-/emergency",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["wakeup"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/wakeup.svg",
-                    "invert" => false,
-                    "link" => "/-/wakeup",
-                    "stepped" => null,
-                    "private" => true
-                ],
-                [
-                    "name" => $pages["pleasure"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/pleasure.svg",
-                    "invert" => false,
-                    "link" => "/-/pleasure",
+                    "link" => "/$member[name]",
                     "stepped" => null,
                     "private" => false
+                ];
+            }, array_filter(scoreOrder(withTravelers(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$cacheSystem[id]/members.json"), true), "$cacheSystem[id]"), "$cacheSystem[id]"), function ($member) {
+                return $member['name'] !== "unknown" && $member['name'] !== "fusion" && $member['name'] !== "new";
+            }));
+
+            $isLoggedIn = $isLoggedInOldState;
+            $isLowerLoggedIn = $isLowerLoggedInOldState;
+        }
+    }
+
+    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/cache/navigation.json", json_encode($cache));
+
+    $navigation_admin = [
+        "admin" => !$isLowerLoggedIn,
+        "name" => "Private utilities",
+        "icon" => "/assets/icons/admin.svg",
+        "invert" => true,
+        "items" => [
+            "alerts" => [
+                "name" => null,
+                "minimal" => true,
+                "items" => [
+                    [
+                        "name" => $pages["emergency"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/emergency.svg",
+                        "invert" => false,
+                        "link" => "/-/emergency",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["wakeup"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/wakeup.svg",
+                        "invert" => false,
+                        "link" => "/-/wakeup",
+                        "stepped" => null,
+                        "private" => true
+                    ],
+                    [
+                        "name" => $pages["pleasure"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/pleasure.svg",
+                        "invert" => false,
+                        "link" => "/-/pleasure",
+                        "stepped" => null,
+                        "private" => false
+                    ]
                 ]
-            ]
-        ],
-        "apps" => [
-            "name" => $lang["navigation"]["apps"],
-            "minimal" => false,
-            "items" => [
-                time() >= 1686787200 ? null : [
-                    "name" => "Front planner<span class='badge bg-warning text-black rounded-pill' style='position:relative;top:-1px; margin-left: 5px;'>EOL</span>",
-                    "icon" => "/assets/icons/fronting.svg",
-                    "invert" => true,
-                    "link" => "/-/fronting",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["evening"]["name"][$lang["_name"]] . (time() >= 1686787200 ? "" : "<span class='badge bg-info text-black rounded-pill' style='position:relative;top:-1px; margin-left: 5px;'>Beta</span>"),
-                    "icon" => "/assets/icons/evening.svg",
-                    "invert" => true,
-                    "link" => "/-/evening",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["profiles"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/profiles.svg",
-                    "invert" => true,
-                    "link" => "/-/profiles",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["money"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/money.svg",
-                    "invert" => true,
-                    "link" => "/-/money",
-                    "stepped" => null,
-                    "private" => true
-                ],
-                [
-                    "name" => $pages["contacts"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/contacts.svg",
-                    "invert" => true,
-                    "link" => "/-/contacts",
-                    "stepped" => null,
-                    "private" => true
-                ],
-                [
-                    "name" => $pages["schedules"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/schedules.svg",
-                    "invert" => true,
-                    "link" => "/-/schedules",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["docs"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/docs.svg",
-                    "invert" => true,
-                    "link" => "/-/docs",
-                    "stepped" => null,
-                    "private" => true
-                ],
-                time() >= 1688169600 ? null : [
-                    "name" => "Devices<span class='badge bg-warning text-black rounded-pill' style='position:relative;top:-1px; margin-left: 5px;'>EOL</span>",
-                    "icon" => "/assets/icons/computers.svg",
-                    "invert" => true,
-                    "link" => "/-/computers",
-                    "stepped" => null,
-                    "private" => true
-                ],
-                [
-                    "name" => $pages["travelling"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/travelling.svg",
-                    "invert" => true,
-                    "link" => "/-/travelling",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["stats"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/stats.svg",
-                    "invert" => true,
-                    "link" => "/-/stats",
-                    "stepped" => null,
-                    "private" => true
-                ],
-                [
-                    "name" => $pages["pair"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/pair.svg",
-                    "invert" => true,
-                    "link" => "/-/pair",
-                    "stepped" => null,
-                    "private" => true
-                ],
-                [
-                    "name" => $pages["sessions"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/sessions.svg",
-                    "invert" => true,
-                    "link" => "/-/sessions",
-                    "stepped" => null,
-                    "private" => true
-                ],
-                [
-                    "name" => $pages["logout"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/logout.svg",
-                    "invert" => true,
-                    "link" => "/-/logout",
-                    "stepped" => null,
-                    "private" => false
+            ],
+            "apps" => [
+                "name" => $lang["navigation"]["apps"],
+                "minimal" => false,
+                "items" => [
+                    time() >= 1686787200 ? null : [
+                        "name" => "Front planner<span class='badge bg-warning text-black rounded-pill' style='position:relative;top:-1px; margin-left: 5px;'>EOL</span>",
+                        "icon" => "/assets/icons/fronting.svg",
+                        "invert" => true,
+                        "link" => "/-/fronting",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["evening"]["name"][$lang["_name"]] . (time() >= 1686787200 ? "" : "<span class='badge bg-info text-black rounded-pill' style='position:relative;top:-1px; margin-left: 5px;'>Beta</span>"),
+                        "icon" => "/assets/icons/evening.svg",
+                        "invert" => true,
+                        "link" => "/-/evening",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["profiles"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/profiles.svg",
+                        "invert" => true,
+                        "link" => "/-/profiles",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["money"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/money.svg",
+                        "invert" => true,
+                        "link" => "/-/money",
+                        "stepped" => null,
+                        "private" => true
+                    ],
+                    [
+                        "name" => $pages["contacts"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/contacts.svg",
+                        "invert" => true,
+                        "link" => "/-/contacts",
+                        "stepped" => null,
+                        "private" => true
+                    ],
+                    [
+                        "name" => $pages["schedules"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/schedules.svg",
+                        "invert" => true,
+                        "link" => "/-/schedules",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["docs"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/docs.svg",
+                        "invert" => true,
+                        "link" => "/-/docs",
+                        "stepped" => null,
+                        "private" => true
+                    ],
+                    time() >= 1688169600 ? null : [
+                        "name" => "Devices<span class='badge bg-warning text-black rounded-pill' style='position:relative;top:-1px; margin-left: 5px;'>EOL</span>",
+                        "icon" => "/assets/icons/computers.svg",
+                        "invert" => true,
+                        "link" => "/-/computers",
+                        "stepped" => null,
+                        "private" => true
+                    ],
+                    [
+                        "name" => $pages["travelling"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/travelling.svg",
+                        "invert" => true,
+                        "link" => "/-/travelling",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["stats"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/stats.svg",
+                        "invert" => true,
+                        "link" => "/-/stats",
+                        "stepped" => null,
+                        "private" => true
+                    ],
+                    [
+                        "name" => $pages["pair"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/pair.svg",
+                        "invert" => true,
+                        "link" => "/-/pair",
+                        "stepped" => null,
+                        "private" => true
+                    ],
+                    [
+                        "name" => $pages["sessions"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/sessions.svg",
+                        "invert" => true,
+                        "link" => "/-/sessions",
+                        "stepped" => null,
+                        "private" => true
+                    ],
+                    [
+                        "name" => $pages["logout"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/logout.svg",
+                        "invert" => true,
+                        "link" => "/-/logout",
+                        "stepped" => null,
+                        "private" => false
+                    ]
+                ]
+            ],
+            "sort" => [
+                "name" => "Sorted members lists",
+                "minimal" => false,
+                "items" => [
+                    [
+                        "name" => $pages["splitting"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/splitting.svg",
+                        "invert" => true,
+                        "link" => "/-/splitting",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["byfront"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/byfront.svg",
+                        "invert" => true,
+                        "link" => "/-/byfront",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["alphabet"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/alphabet.svg",
+                        "invert" => true,
+                        "link" => "/-/alphabet",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["s:species"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/species.svg",
+                        "invert" => true,
+                        "link" => "/-/byspecies",
+                        "stepped" => null,
+                        "private" => false
+                    ],
                 ]
-            ]
-        ],
-        "sort" => [
-            "name" => "Sorted members lists",
-            "minimal" => false,
-            "items" => [
-                [
-                    "name" => $pages["splitting"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/splitting.svg",
-                    "invert" => true,
-                    "link" => "/-/splitting",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["byfront"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/byfront.svg",
-                    "invert" => true,
-                    "link" => "/-/byfront",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["alphabet"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/alphabet.svg",
-                    "invert" => true,
-                    "link" => "/-/alphabet",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["s:species"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/species.svg",
-                    "invert" => true,
-                    "link" => "/-/byspecies",
-                    "stepped" => null,
-                    "private" => false
-                ],
             ]
         ]
-    ]
-];
-$navigation_global = [
-    "admin" => false,
-    "name" => $lang["navigation"]["general"],
-    "icon" => "/assets/icons/global.svg",
-    "invert" => true,
-    "items" => [
-        "main" => [
-            "name" => null,
-            "minimal" => false,
-            "items" => [
-                [
-                    "name" => $pages["home"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/home.svg",
-                    "invert" => true,
-                    "link" => "/",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["relations"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/relations.svg",
-                    "invert" => true,
-                    "link" => "/-/relations",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["terminology"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/terminology.svg",
-                    "invert" => true,
-                    "link" => "/-/terminology",
-                    "stepped" => null,
-                    "private" => false
+    ];
+    $navigation_global = [
+        "admin" => false,
+        "name" => $lang["navigation"]["general"],
+        "icon" => "/assets/icons/global.svg",
+        "invert" => true,
+        "items" => [
+            "main" => [
+                "name" => null,
+                "minimal" => false,
+                "items" => [
+                    [
+                        "name" => $pages["home"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/home.svg",
+                        "invert" => true,
+                        "link" => "/",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["relations"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/relations.svg",
+                        "invert" => true,
+                        "link" => "/-/relations",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["terminology"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/terminology.svg",
+                        "invert" => true,
+                        "link" => "/-/terminology",
+                        "stepped" => null,
+                        "private" => false
+                    ]
                 ]
             ]
         ]
-    ]
-];
-$navigation_cloudburst = [
-    "admin" => false,
-    "name" => "Cloudburst System",
-    "icon" => getAsset("ynmuc"),
-    "invert" => false,
-    "items" => [
-        "header" => [
-            "name" => null,
-            "minimal" => false,
-            "items" => [
-                [
-                    "name" => $lang["navigation"]["about"],
-                    "icon" => "/assets/icons/about.svg",
-                    "invert" => true,
-                    "link" => "/cloudburst",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["s:history"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/history.svg",
-                    "invert" => true,
-                    "link" => "/cloudburst/-/history",
-                    "stepped" => null,
-                    "private" => false
+    ];
+    $navigation_cloudburst = [
+        "admin" => false,
+        "name" => "Cloudburst System",
+        "icon" => getAsset("ynmuc"),
+        "invert" => false,
+        "items" => [
+            "header" => [
+                "name" => null,
+                "minimal" => false,
+                "items" => [
+                    [
+                        "name" => $lang["navigation"]["about"],
+                        "icon" => "/assets/icons/about.svg",
+                        "invert" => true,
+                        "link" => "/cloudburst",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["s:history"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/history.svg",
+                        "invert" => true,
+                        "link" => "/cloudburst/-/history",
+                        "stepped" => null,
+                        "private" => false
+                    ]
                 ]
+            ],
+            "members" => [
+                "name" => $lang["navigation"]["members"],
+                "minimal" => false,
+                "items" => $cache["cloudburst"][$isLoggedIn || $isLowerLoggedIn ? "private" : "public"]
             ]
-        ],
-        "members" => [
-            "name" => $lang["navigation"]["members"],
-            "minimal" => false,
-            "items" => $cache["cloudburst"][$isLoggedIn || $isLowerLoggedIn ? "private" : "public"]
         ]
-    ]
-];
-$navigation_other = [
-    "admin" => !$isLowerLoggedIn,
-    "name" => $app["other"]["name"],
-    "icon" => getAsset($app["other"]["id"]),
-    "invert" => false,
-    "items" => [
-        "header" => [
-            "name" => null,
-            "minimal" => false,
-            "items" => [
-                [
-                    "name" => $lang["navigation"]["about"],
-                    "icon" => "/assets/icons/about.svg",
-                    "invert" => true,
-                    "link" => "/" . $app["other"]["slug"],
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["s:history"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/history.svg",
-                    "invert" => true,
-                    "link" => "/" . $app["other"]["slug"] . "/-/history",
-                    "stepped" => null,
-                    "private" => false
+    ];
+    $navigation_other = [
+        "admin" => !$isLowerLoggedIn,
+        "name" => $app["other"]["name"],
+        "icon" => getAsset($app["other"]["id"]),
+        "invert" => false,
+        "items" => [
+            "header" => [
+                "name" => null,
+                "minimal" => false,
+                "items" => [
+                    [
+                        "name" => $lang["navigation"]["about"],
+                        "icon" => "/assets/icons/about.svg",
+                        "invert" => true,
+                        "link" => "/" . $app["other"]["slug"],
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["s:history"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/history.svg",
+                        "invert" => true,
+                        "link" => "/" . $app["other"]["slug"] . "/-/history",
+                        "stepped" => null,
+                        "private" => false
+                    ]
                 ]
+            ],
+            "members" => [
+                "name" => $lang["navigation"]["members"],
+                "minimal" => false,
+                "items" => $cache["other"][$isLoggedIn || $isLowerLoggedIn ? "private" : "public"]
             ]
-        ],
-        "members" => [
-            "name" => $lang["navigation"]["members"],
-            "minimal" => false,
-            "items" => $cache["other"][$isLoggedIn || $isLowerLoggedIn ? "private" : "public"]
         ]
-    ]
-];
-$navigation_raindrops = [
-    "admin" => false,
-    "name" => "Raindrops System",
-    "icon" => getAsset("gdapd"),
-    "invert" => false,
-    "items" => [
-        "header" => [
-            "name" => null,
-            "minimal" => false,
-            "items" => [
-                [
-                    "name" => $lang["navigation"]["about"],
-                    "icon" => "/assets/icons/about.svg",
-                    "invert" => true,
-                    "link" => "/raindrops",
-                    "stepped" => null,
-                    "private" => false
-                ],
-                [
-                    "name" => $pages["s:history"]["name"][$lang["_name"]],
-                    "icon" => "/assets/icons/history.svg",
-                    "invert" => true,
-                    "link" => "/raindrops/-/history",
-                    "stepped" => null,
-                    "private" => false
+    ];
+    $navigation_raindrops = [
+        "admin" => false,
+        "name" => "Raindrops System",
+        "icon" => getAsset("gdapd"),
+        "invert" => false,
+        "items" => [
+            "header" => [
+                "name" => null,
+                "minimal" => false,
+                "items" => [
+                    [
+                        "name" => $lang["navigation"]["about"],
+                        "icon" => "/assets/icons/about.svg",
+                        "invert" => true,
+                        "link" => "/raindrops",
+                        "stepped" => null,
+                        "private" => false
+                    ],
+                    [
+                        "name" => $pages["s:history"]["name"][$lang["_name"]],
+                        "icon" => "/assets/icons/history.svg",
+                        "invert" => true,
+                        "link" => "/raindrops/-/history",
+                        "stepped" => null,
+                        "private" => false
+                    ]
                 ]
+            ],
+            "members" => [
+                "name" => $lang["navigation"]["members"],
+                "minimal" => false,
+                "items" => $cache["raindrops"][$isLoggedIn || $isLowerLoggedIn ? "private" : "public"]
             ]
-        ],
-        "members" => [
-            "name" => $lang["navigation"]["members"],
-            "minimal" => false,
-            "items" => $cache["raindrops"][$isLoggedIn || $isLowerLoggedIn ? "private" : "public"]
         ]
-    ]
-];
+    ];
 
-global $parts;
+    global $parts;
 
-if (isset($parts) && isset($parts[0]) && $parts[0] === $app["other"]["slug"]) {
-    $navigation = [
-        "other" => $navigation_other,
-        "cloudburst" => $navigation_cloudburst,
-        "raindrops" => $navigation_raindrops,
-        "admin" => $navigation_admin,
-        "global" => $navigation_global
-    ];
-} elseif (isset($parts) && isset($parts[0]) && $parts[0] === "cloudburst") {
-    $navigation = [
-        "cloudburst" => $navigation_cloudburst,
-        "raindrops" => $navigation_raindrops,
-        "other" => $navigation_other,
-        "admin" => $navigation_admin,
-        "global" => $navigation_global
-    ];
-} elseif (isset($parts) && isset($parts[0]) && $parts[0] === "raindrops") {
-    $navigation = [
-        "raindrops" => $navigation_raindrops,
-        "cloudburst" => $navigation_cloudburst,
-        "other" => $navigation_other,
-        "admin" => $navigation_admin,
-        "global" => $navigation_global
-    ];
-} else {
-    $navigation = [
-        "admin" => $navigation_admin,
-        "global" => $navigation_global,
-        "cloudburst" => $navigation_cloudburst,
-        "raindrops" => $navigation_raindrops,
-        "other" => $navigation_other,
-    ];
+    if (isset($parts) && isset($parts[0]) && $parts[0] === $app["other"]["slug"]) {
+        $navigation = [
+            "other" => $navigation_other,
+            "cloudburst" => $navigation_cloudburst,
+            "raindrops" => $navigation_raindrops,
+            "admin" => $navigation_admin,
+            "global" => $navigation_global
+        ];
+    } elseif (isset($parts) && isset($parts[0]) && $parts[0] === "cloudburst") {
+        $navigation = [
+            "cloudburst" => $navigation_cloudburst,
+            "raindrops" => $navigation_raindrops,
+            "other" => $navigation_other,
+            "admin" => $navigation_admin,
+            "global" => $navigation_global
+        ];
+    } elseif (isset($parts) && isset($parts[0]) && $parts[0] === "raindrops") {
+        $navigation = [
+            "raindrops" => $navigation_raindrops,
+            "cloudburst" => $navigation_cloudburst,
+            "other" => $navigation_other,
+            "admin" => $navigation_admin,
+            "global" => $navigation_global
+        ];
+    } else {
+        $navigation = [
+            "admin" => $navigation_admin,
+            "global" => $navigation_global,
+            "cloudburst" => $navigation_cloudburst,
+            "raindrops" => $navigation_raindrops,
+            "other" => $navigation_other,
+        ];
+    }
 }
\ No newline at end of file
diff --git a/includes/components/pane.inc b/includes/components/pane.inc
index 1ecbcdf..a4b2d43 100644
--- a/includes/components/pane.inc
+++ b/includes/components/pane.inc
@@ -1,4 +1,4 @@
-<?php global $isLoggedIn; global $isLowerLoggedIn; global $pages; global $navigation; $byColor = getMembersByColor(); global $lang; global $pages; ?>
+<?php global $use2023UI; global $isLoggedIn; global $isLowerLoggedIn; global $pages; global $navigation; $byColor = getMembersByColor(); global $lang; global $pages; if (!$use2023UI): ?>
 
 <div id="pane-header-background" style="background-image: linear-gradient(90deg, <?php
 
@@ -128,4 +128,5 @@ foreach ($list as $color) {
         background-color: rgba(255, 255, 255, .1);
     }
 
-</style>
\ No newline at end of file
+</style>
+<?php endif; ?>
\ No newline at end of file
diff --git a/includes/components/sysbanner.inc b/includes/components/sysbanner.inc
index 30babf0..2dd1dd4 100644
--- a/includes/components/sysbanner.inc
+++ b/includes/components/sysbanner.inc
@@ -34,14 +34,13 @@ $pages = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/pa
                         <?= count(scoreOrder(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/$systemID/members.json"), true), $systemID)) ?> members<?php
 
                     if (count($travellers) > 0) {
-                        echo(" (+ " . count($travellers) . " " . (count($travellers) > 1 ? $lang["system"]["traveller"] : $lang["system"]["travellers"]) . ")");
+                        echo(" (+ " . count($travellers) . " " . (count($travellers) > 1 ? $lang["system"]["travellers"] : $lang["system"]["traveller"]) . ")");
                     }
 
-                    ?>
-                    </span>
-                <span>
-
-                    </span>
+                    ?><br><?php $leaders = array_filter(scoreOrderGlobal(), function ($i) use ($systemID) {
+                        return $i["_system"] === $systemID && isset($i["_metadata"]["leader2"]) && $i["_metadata"]["leader2"];
+                    }); if (count($leaders) > 0): ?><span style="vertical-align: middle; height: 24px;">Leader<?= count($leaders) > 1 ? "s" : "" ?>: </span><?php foreach ($leaders as $index => $leader): ?><a href="/<?= $leader["name"] ?>" class="member-link"><img src="<?= getAsset($leader["_system"], $leader["id"], "heads") ?>"><span style="vertical-align: middle;"> <?= $leader["display_name"] ?? $leader["name"] ?></span></a><?= $index <= count($leaders) - 1 ? ", " : "" ?><?php endforeach; ?><?php endif; ?>
+                </span>
             </div>
         </div>
     </div>
-- 
cgit