Update

1 files changed, 147 insertions, 246 deletions

diff --git a/includes/header.inc b/includes/header.inc
index e851c85..c893cea 100644
--- a/includes/header.inc
+++ b/includes/header.inc
@@ -1,5 +1,6 @@
 <?php global $title; global $pages;
 
+$useNewUI = isset($_GET['new']) || isset($_COOKIE['new']);
 $readOnly = false;
 @file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/.test", "hello");
 
@@ -90,12 +91,15 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/ical/main.php";
             margin-left: 32px;
         }
 
-        #admin-page .navbar {
-            margin-left: -32px;
+        .modal {
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
         }
 
         nav.navbar {
-            background-color: black !important;
+            background-color: rgba(0, 0, 0, .75) !important;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
             border-bottom: 1px solid rgba(255, 255, 255, .25);
         }
 
@@ -753,249 +757,146 @@ require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/ical/main.php";
         }
     </style>
 </head>
-<body<?php if ($page["rail"] && $isLoggedIn): ?> id="admin-page"<?php endif; ?>>
-    <nav class="navbar navbar-expand-<?= $isLoggedIn ? 'xl' : 'lg' ?> bg-dark navbar-dark" style="height:60px;">
-        <div class="container-fluid">
-            <a class="navbar-brand" href="/"><img src="/assets/logo/newlogo.png" alt="" style="width:32px;vertical-align: middle;margin-right:5px;"> <span style="vertical-align: middle;">Cold Haze</span><a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="collapsibleNavbar">
-                <ul class="navbar-nav">
-                    <?php if (!isset($demoHeader) || !$demoHeader): ?>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
-                            <img src="/assets/icons/global.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                            <span style="vertical-align: middle;">Global</span>
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li><a class="dropdown-item" href="/">
-                                <img src="/assets/icons/home.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["home"]["name"] ?></span>
-                            </a></li>
-                            <li><a class="dropdown-item" href="/-/disclaimers">
-                                <img src="/assets/icons/disclaimers.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["disclaimers"]["name"] ?></span>
-                            </a></li>
-                            <li><a class="dropdown-item" href="/-/relations">
-                                <img src="/assets/icons/relations.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["relations"]["name"] ?></span>
-                            </a></li>
-                            <li><a class="dropdown-item" href="/-/government">
-                                    <img src="/assets/icons/government.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                    <span style="vertical-align: middle;"><?= $pages["government"]["name"] ?></span>
-                                </a></li>
-                            <li><a class="dropdown-item" href="/-/terminology">
-                                <img src="/assets/icons/terminology.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["terminology"]["name"] ?></span>
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h5 class="dropdown-header">Tools</h5></li>
-                            <li><a class="dropdown-item" href="/-/parser">
-                                <img src="/assets/icons/parser.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["parser"]["name"] ?></span>
-                            </a></li>
-                            <li><a class="dropdown-item" href="/-/prefix">
-                                <img src="/assets/icons/prefix.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["prefix"]["name"] ?></span>
-                            </a></li>
-                        </ul>
-                    </li>
-                    <?php if ($isLoggedIn): ?>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
-                            <img src="/assets/icons/admin.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                            <span style="vertical-align: middle;">Administrator</span>
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li><a class="dropdown-item" href="/-/emergency">
-                                <img src="/assets/icons/emergency.svg" alt="" style="width:24px;vertical-align: middle;">
-                                <span class="text-danger" style="vertical-align: middle;"><b><?= $pages["emergency"]["name"] ?></b></span>
-                            </a></li>
-                            <?php
-
-                            $frontCloudburst = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/ynmuc/fronters.json"), true)["members"];
-                            $frontRaindrops = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/gdapd/fronters.json"), true)["members"];
-
-                            if (isset($_GET['pleasure']) || (isset($frontRaindrops[0]) && isset($frontCloudburst[0]) && (
-                                    ((int)date('H') >= 20 || (int)date('H') < 6) &&
-                                    ($frontCloudburst[0]["id"] === "erknz" &&
-                                    $frontRaindrops[0]["id"]  === "qbzxm") ||
-                                    ($frontCloudburst[0]["id"] === "zzise" &&
-                                    $frontRaindrops[0]["id"]  === "tfbob") ||
-                                    ($frontCloudburst[0]["id"] === "vncoa" &&
-                                    $frontRaindrops[0]["id"]  === "qraku")
-                                ))): ?>
-                            <li><a class="dropdown-item" href="/-/pleasure" <?= isset($_GET['pleasure']) ? 'style="opacity: .5;"' : '' ?>>
-                                <img src="/assets/icons/pleasure.svg" alt="" style="width:24px;vertical-align: middle;">
-                                <span class="text-success" style="vertical-align: middle;"><b><?= $pages["pleasure"]["name"] ?></b></span>
-                            </a></li>
-                            <?php endif; ?>
-
-                            <?php if (isset($_GET['wakeup']) || (int)date('H') >= 20 || (int)date('H') < 8): ?>
-                            <li><a class="dropdown-item" href="/-/wakeup" <?= isset($_GET['wakeup']) ? 'style="opacity: .5;"' : '' ?>>
-                                <img src="/assets/icons/wakeup.svg" alt="" style="width:24px;vertical-align: middle;">
-                                <span class="text-info" style="vertical-align: middle;"><b><?= $pages["wakeup"]["name"] ?></b></span>
-                            </a></li>
-                            <?php endif; ?>
-                            <li><hr class="dropdown-divider"></li>
-
-                            <li><h5 class="dropdown-header">Applications</h5></li>
-                            <li><a class="dropdown-item" href="/-/dashboard">
-                                <img src="/assets/icons/dashboard.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["dashboard"]["name"] ?></span>
-                            </a></li>
-                            <li><a class="dropdown-item" href="/-/fronting">
-                                <img src="/assets/icons/fronting.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["fronting"]["name"] ?></span>
-                            </a></li>
-                            <li><a class="dropdown-item" href="/-/docs">
-                                <img src="/assets/icons/docs.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["docs"]["name"] ?></span>
-                            </a></li>
-                            <li><a class="dropdown-item" href="/-/travelling">
-                                <img src="/assets/icons/travel.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["travelling"]["name"] ?></span>
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-
-                            <li><h5 class="dropdown-header">Debugging</h5></li>
-                            <li><a class="dropdown-item" href="/-/debug">
-                                <img src="/assets/icons/debug.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["debug"]["name"] ?></span>
-                            </a></li>
-                            <li><a class="dropdown-item" href="/-/score">
-                                <img src="/assets/icons/score.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["score"]["name"] ?></span>
-                            </a></li>
-                            <li><hr class="dropdown-divider"></li>
-
-                            <li><a class="dropdown-item" href="/-/logout">
-                                <img src="/assets/icons/logout.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $pages["logout"]["name"] ?></span>
-                            </a></li>
-                        </ul>
-                    </li>
-                    <?php endif; else: ?>
-                    <li class="nav-item">
-                        <a class="nav-link" href="/" role="button">
-                            <img src="/assets/icons/right.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                            <span style="vertical-align: middle;">Reste du site (en anglais)</span>
-                        </a>
-                    </li>
-                    <?php endif; ?>
-                    <?php if (!isset($emergencyHeader) || !$emergencyHeader): ?>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="/cloudburst" role="button" data-bs-toggle="dropdown">
-                            <img src="/assets/uploads/cloudburst.png" alt="" style="width:24px;vertical-align: middle;">
-                            <span style="vertical-align: middle;">Cloudburst System</span>
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li><a class="dropdown-item" href="/cloudburst">
-                                <img src="/assets/icons/about.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;">About us</span>
-                            </a></li>
-                            <?php
-
-                            $subsystems1 = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/subsystems/ynmuc.json"), true);
-                            $subsystemsNotMember = array_values(array_filter($subsystems1, function ($i) {
-                                return $i["source_type"] !== "member";
-                            }));
-
-                            if (count($subsystemsNotMember) > 0): ?>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h5 class="dropdown-header">Subsystems</h5></li>
-                            <?php foreach ($subsystemsNotMember as $subsystem): $ssData = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/subsystems/ynmuc-" . $subsystem['source'] . ".json"), true); ?>
-                            <li><a class="dropdown-item" href="/cloudburst/-/subsystem/<?= $subsystem['source'] ?>">
-                                <img src="/assets/uploads/ss-<?= $subsystem['source'] ?>.png" alt="" style="border-radius:5px;width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;"><?= $ssData['name'] ?? $subsystem['source'] ?></span>
-                            </a></li>
-                            <?php endforeach; ?>
-                            <?php endif; ?>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h5 class="dropdown-header">Members</h5></li>
-                            <?php foreach (scoreOrder(withTravelers(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/ynmuc/members.json"), true), "ynmuc"), "ynmuc") as $member): if ($member['name'] !== "unknown" && $member['name'] !== "fusion" && $member['name'] !== "new"): ?>
-                                <li><a class="dropdown-item" href="/<?= $member['name'] ?>">
-                                    <img src="<?= getAsset($member["system"], $member["id"], "heads") ?>" alt="" style="width:24px;vertical-align: middle;">
-                                    <span style="vertical-align: middle;"><?= $member['display_name'] ?? $member['name'] ?></span>
-                                </a></li>
-                            <?php endif; endforeach; ?>
-                        </ul>
-                    </li>
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="/raindrops" role="button" data-bs-toggle="dropdown">
-                            <img src="/assets/uploads/raindrops.png" alt="" style="width:24px;vertical-align: middle;">
-                            <span style="vertical-align: middle;">Raindrops System</span>
-                        </a>
-                        <ul class="dropdown-menu">
-                            <li><a class="dropdown-item" href="/raindrops">
-                                <img src="/assets/icons/about.svg" class="dropdown-icon" alt="" style="width:24px;vertical-align: middle;">
-                                <span style="vertical-align: middle;">About us</span>
-                            </a></li>
-                            <?php
-
-                            $subsystems1 = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/subsystems/gdapd.json"), true);
-                            $subsystemsNotMember = array_values(array_filter($subsystems1, function ($i) {
-                                return $i["source_type"] !== "member";
-                            }));
-
-                            if (count($subsystemsNotMember) > 0): ?>
-                                <li><hr class="dropdown-divider"></li>
-                                <li><h5 class="dropdown-header">Subsystems</h5></li>
-                                <?php foreach ($subsystemsNotMember as $subsystem): $ssData = json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/subsystems/gdapd-" . $subsystem['source'] . ".json"), true); ?>
-                                    <li><a class="dropdown-item" href="/raindrops/-/subsystem/<?= $subsystem['source'] ?>">
-                                            <img src="/assets/uploads/ss-<?= $subsystem['source'] ?>.png" alt="" style="border-radius:5px;width:24px;vertical-align: middle;">
-                                            <span style="vertical-align: middle;"><?= $ssData['name'] ?? $subsystem['source'] ?></span>
-                                        </a></li>
-                                <?php endforeach; ?>
-                            <?php endif; ?>
-                            <li><hr class="dropdown-divider"></li>
-                            <li><h5 class="dropdown-header">Members</h5></li>
-                            <?php foreach (scoreOrder(withTravelers(json_decode(file_get_contents($_SERVER['DOCUMENT_ROOT'] . "/includes/data/gdapd/members.json"), true), "gdapd"), "gdapd") as $member): if ($member['name'] !== "unknown" && $member['name'] !== "fusion" && $member['name'] !== "new"): ?>
-                                <li><a class="dropdown-item" href="/<?= $member['name'] ?>">
-                                    <img src="<?= getAsset($member["system"], $member["id"], "heads") ?>" alt="" style="width:24px;vertical-align: middle;">
-                                    <span style="vertical-align: middle;"><?= $member['display_name'] ?? $member['name'] ?></span>
-                                </a></li>
-                            <?php endif; endforeach; ?>
-                        </ul>
-                    </li>
-                    <?php if ($isLoggedIn): ?>
-                        <li class="nav-item" style="margin-left: auto;">
-                            <a class="nav-link" href="/-/user">
-                                <?php global $_PROFILE; ?>
-                                <span style="vertical-align: middle;">
-                            <?= $_PROFILE["name"] ?>
-                        </span>
-                                <img alt="" src="/assets/icons/shield.svg" style="filter:invert(1);width:24px;vertical-align: middle;">
-                            </a>
-                        </li>
-                    <?php elseif ($isUserLoggedIn): ?>
-                        <li class="nav-item" style="margin-left: auto;">
-                            <a class="nav-link" href="/-/user">
-                                <?php global $_PROFILE; ?>
-                                <span style="vertical-align: middle;">
-                            <?= $_PROFILE["name"] ?>
-                        </span>
-                                <img alt="" src="/assets/icons/shield.svg" style="filter:invert(1);width:24px;vertical-align: middle;">
-                            </a>
-                        </li>
-                    <?php else: ?>
-                        <li class="nav-item" style="margin-left: auto;">
-                            <a class="nav-link" href="/-/login">
-                                <?php global $_PROFILE; ?>
-                                <span style="vertical-align: middle;">
-                            Not logged in
-                        </span>
-                                <img alt="" src="/assets/icons/login.svg" style="filter:invert(1);width:24px;vertical-align: middle;">
-                            </a>
-                        </li>
-                    <?php endif; ?>
-                    <?php endif; ?>
-                </ul>
-            </div>
-        </div>
-    </nav>
+<body<?php if ($page["rail"] && $isLoggedIn && !$useNewUI): ?> id="admin-page"<?php endif; ?>>
+    <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/navigation.inc"; global $navigation; ?>
+    <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/navbar.inc"; ?>
+
+    <?php if (!$useNewUI): ?>
+    <div style="margin-top: 60px;" id="top-of-page"></div>
+    <?php endif; ?>
+
+    <?php if ($useNewUI): ?>
+    <aside id="navigation-pane">
+        <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/pane.inc"; ?>
+    </aside>
+
+    <div id="title-bar">
+        <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/titlebar.inc"; ?>
+    </div>
+
+    <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/mobilenav.inc"; ?>
+
+    <div style="margin-top: 34px;"></div>
+
+    <style>
+        body {
+            margin-left: 300px;
+        }
+
+        .modal.show {
+            top: 34px;
+            left: 300px;
+            width: calc(100% - 300px);
+        }
+
+        nav {
+            display: none !important;
+        }
+
+        #navigation-pane {
+            z-index: 9999;
+            background: black;
+            position: fixed;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            width: 300px;
+            border-right: 1px solid rgba(255, 255, 255, .25);
+            overflow: auto;
+        }
+
+        #title-bar {
+            position: fixed;
+            top: 0;
+            left: 300px;
+            right: 0;
+            height: 34px;
+            background: rgba(0, 0, 0, .75);
+            z-index: 9999;
+            padding: 5px;
+            text-align: center;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(255, 255, 255, .25);
+        }
+
+        #mobile-navigation {
+            display: none;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 48px;
+            background: rgba(0, 0, 0, .75);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border-top: 1px solid rgba(255, 255, 255, .25);
+            z-index: 999999;
+        }
+
+        @media (max-width: 1360px) {
+            .modal.show {
+                left: 250px !important;
+                width: calc(100% - 250px) !important;
+            }
+
+            #title-bar {
+                left: 250px !important;
+            }
+
+            #navigation-pane {
+                width: 250px !important;
+            }
+
+            body {
+                margin-left: 250px !important;
+            }
+        }
+
+        @media (max-width: 1300px) {
+            .modal.show {
+                left: 200px !important;
+                width: calc(100% - 200px) !important;
+            }
+
+            #title-bar {
+                left: 200px !important;
+            }
+
+            #navigation-pane {
+                width: 200px !important;
+            }
+
+            body {
+                margin-left: 200px !important;
+            }
+        }
+
+        @media (max-width: 1195px) {
+            .modal.show {
+                left: 0 !important;
+                width: 100% !important;
+            }
+
+            #title-bar {
+                left: 0 !important;
+            }
+
+            #navigation-pane {
+                display: none !important;
+            }
+
+            body {
+                margin-left: 0 !important;
+            }
+
+            #mobile-navigation {
+                display: block !important;
+            }
+        }
+    </style>
+    <?php endif; ?>
 
-<?php if ($page["rail"] && $isLoggedIn): ?>
+<?php if ($page["rail"] && $isLoggedIn && !$useNewUI): ?>
     <?php require_once $_SERVER['DOCUMENT_ROOT'] . "/includes/rail.inc"; ?>
 <?php endif; ?>