Updated 19 files and added assets/icons/new/menu.svg (automated)

1 files changed, 125 insertions, 18 deletions

diff --git a/includes/components/2023ui.inc b/includes/components/2023ui.inc
index cd37e36..b69f0f5 100644
--- a/includes/components/2023ui.inc
+++ b/includes/components/2023ui.inc
@@ -1,18 +1,106 @@
+<style>
+    .new-homepage-link {
+        background-color: rgba(0, 0, 0, .01) !important;
+    }
+
+    .new-homepage-link:hover {
+        background-color: rgba(0, 0, 0, .05) !important;
+    }
+
+    .new-homepage-link:active {
+        background-color: rgba(0, 0, 0, .1) !important;
+    }
+
+    .new-homepage-system-list {
+        background: linear-gradient(180deg, rgba(216,53,124,0.1) 0%, rgba(227,65,55,0.1) 7%, rgba(231,155,96,0.1) 14%, rgba(223,191,78,0.1) 21%, rgba(203,207,117,0.1) 28%, rgba(108,224,154,0.1) 35%, rgba(106,228,205,0.1) 42%, rgba(100,217,234,0.1) 49%, rgba(83,182,238,0.1) 56%, rgba(74,158,234,0.1) 63%, rgba(164,137,238,0.1) 70%, rgba(211,142,240,0.1) 77%, rgba(230,122,238,0.1) 84%, rgba(227,113,196,0.1) 91%);
+    }
+
+    #banner-lower, #timeline-container {
+        backdrop-filter: none !important;
+        background-color: var(--palette-2) !important;
+    }
+
+    #hpd-legacy {
+        display: none !important;
+    }
+
+    #system-page, #member-page {
+        background-color: var(--palette-2) !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+    }
+
+    @media (max-width: 926px) {
+        .mobile-hide {
+            display: none !important;
+        }
+
+        .mobile-icon-container-right {
+            margin-right: 0 !important;
+        }
+
+        #menu-bar {
+            grid-template-columns: 1fr max-content 1fr !important;
+            left: 20px !important;
+        }
+
+        #side-bar-systems {
+            display: none !important;
+        }
+
+        #side-bar-options {
+            margin: 0 !important;
+        }
+
+        #side-bar {
+            bottom: 0 !important;
+            right: 0 !important;
+            width: 100% !important;
+            height: 64px;
+            top: unset !important;
+            z-index: 9 !important;
+            align-items: center;
+        }
+
+        #app {
+            left: 0 !important;
+            right: 0 !important;
+            bottom: 64px;
+        }
+
+        .ui2023-side-bar-item:not(.mobile-hide) {
+            display: inline-block !important;
+        }
+
+        .mobile-show {
+            display: inline-block !important;
+        }
+        
+        #app {
+            z-index: -1;
+        }
+
+        body:not(.modal-open) #menu-bar {
+            z-index: 9999;
+        }
+    }
+</style>
+
 <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-ng.png" style="width: 32px;">
+                <img class="antialias" src="/assets/logo/newlogo-ng.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;">
+            <div class="mobile-icon-container mobile-icon-container-left" style="margin-left: auto; margin-right: auto;">
+                <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Alerts" class="ui2023-side-bar-item mobile-hide" 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;">
+                </a><a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Member lists" class="ui2023-side-bar-item mobile-hide" 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>
@@ -27,12 +115,30 @@
     <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;">
+                <div style="margin-left: auto; margin-right: auto;" class="mobile-icon-container mobile-icon-container-right">
+                    <a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Jobs" class="ui2023-side-bar-item mobile-hide" 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;">
+                    </a><a data-bs-toggle="tooltip" data-bs-placement="bottom" title="Account" class="ui2023-side-bar-item mobile-hide" 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>
+                    </a><div class="ui2023-side-bar-item mobile-show dropdown" style="padding: 10px; height: 48px; width: 48px; display: none; border-radius: 999px;">
+                        <a data-bs-toggle="dropdown" href="#">
+                            <img src="<?= icon("menu") ?>" style="max-width: 28px; max-height: 28px;">
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li><a class="dropdown-item" href="/-/alerts">
+                                <img src="<?= icon("alerts") ?>" style="vertical-align: middle; width: 24px; height: 24px;"><span style="vertical-align: middle; margin-left: 5px;">Alerts</span>
+                            </a></li>
+                            <li><a class="dropdown-item" href="/-/lists">
+                                <img src="<?= icon("lists") ?>" style="vertical-align: middle; width: 24px; height: 24px;"><span style="vertical-align: middle; margin-left: 5px;">Lists</span>
+                            </a></li>
+                            <li><a class="dropdown-item" href="/-/jobs">
+                                <img src="<?= icon("jobs") ?>" style="vertical-align: middle; width: 24px; height: 24px;"><span style="vertical-align: middle; margin-left: 5px;">Jobs</span>
+                            </a></li>
+                            <li><a class="dropdown-item" href="/-/account">
+                                <img src="<?= icon("sessions") ?>" style="vertical-align: middle; width: 24px; height: 24px;"><span style="vertical-align: middle; margin-left: 5px;">Account</span>
+                            </a></li>
+                        </ul>
+                    </div>
                 </div>
             <?php endif; ?>
         </div>
@@ -40,16 +146,16 @@
             <?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>
+                        <span class="mobile-hide" 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);">
+                        <span class="mobile-hide" style="margin-right: 5px; vertical-align: middle; margin-top: -2px;"><?= $_PROFILE["name"] ?></span>
+                        <img class="antialias" 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>
+                    <span class="mobile-hide" 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>
@@ -74,27 +180,28 @@
 
 <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;">
+        <div id="side-bar-systems" 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;">
+                <img class="antialias" class="antialias" 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;">
+                    <img class="antialias" class="antialias" 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;">
+                <img class="antialias" src="<?= getAsset("ynmuc") ?>" style="max-width: 32px; max-height: 32px;">
             </a>
         </div>
 
-        <div style="margin-top: 20px;">
+        <div id="side-bar-options" 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>
+            <div class="mobile-hide" style="margin: 10px 0; width: 48px; height: 2px; background-color: var(--palette-2);"></div>
+            <div class="mobile-show" style="display: none; margin: 0 10px; height: 48px; width: 2px; background-color: var(--palette-2); vertical-align: middle;"></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;">