diff options
Diffstat (limited to 'includes/components/header.inc')
| -rw-r--r-- | includes/components/header.inc | 464 |
1 files changed, 456 insertions, 8 deletions
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 |