Implement Manticore fully and re-theme
This commit is contained in:
@@ -6,10 +6,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en-GB">
|
||||
<head>
|
||||
<script>
|
||||
(function () {
|
||||
var storedTheme = "light";
|
||||
try {
|
||||
storedTheme = localStorage.getItem("theme") || "light";
|
||||
} catch (error) {
|
||||
}
|
||||
var resolvedTheme = storedTheme === "dark" ? "dark" : "light";
|
||||
document.documentElement.dataset.theme = resolvedTheme;
|
||||
if (resolvedTheme === "dark") {
|
||||
document.documentElement.style.backgroundColor = "#090d16";
|
||||
document.documentElement.style.color = "#f8fafc";
|
||||
} else {
|
||||
document.documentElement.style.backgroundColor = "#f3f4f6";
|
||||
document.documentElement.style.color = "#1b2433";
|
||||
}
|
||||
var faviconHref = resolvedTheme === "dark"
|
||||
? "{% static 'favicon-dark.svg' %}"
|
||||
: "{% static 'favicon-light.svg' %}";
|
||||
document.querySelectorAll("link[data-gia-favicon]").forEach(function (link) {
|
||||
link.setAttribute("href", faviconHref);
|
||||
});
|
||||
document.querySelectorAll(".js-theme-logo").forEach(function (image) {
|
||||
image.setAttribute("src", faviconHref);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
html[data-theme="dark"],
|
||||
html[data-theme="dark"] body {
|
||||
background: #090d16 !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
html[data-theme="light"],
|
||||
html[data-theme="light"] body {
|
||||
background: #f3f4f6 !important;
|
||||
color: #1b2433 !important;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block browser_title %}{% firstof page_browser_title page_title as explicit_title %}{% if explicit_title %}{{ explicit_title }} · GIA{% else %}{% with route_value=request.resolver_match.url_name|default:request.path_info|humanize_route %}{% if route_value %}{{ route_value }} · GIA{% else %}GIA{% endif %}{% endwith %}{% endif %}{% endblock %}</title>
|
||||
<link rel="shortcut icon" href="{% static 'favicon.ico' %}">
|
||||
<link rel="icon" type="image/svg+xml" href="{% static 'favicon-light.svg' %}" data-gia-favicon>
|
||||
<link rel="shortcut icon" href="{% static 'favicon-light.svg' %}" data-gia-favicon>
|
||||
<link rel="manifest" href="{% static 'manifest.webmanifest' %}">
|
||||
<link rel="stylesheet" href="{% static 'css/bulma.min.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'css/bulma-tooltip.min.css' %}">
|
||||
@@ -29,6 +69,66 @@
|
||||
<script src="{% static 'js/gridstack-all.js' %}"></script>
|
||||
<script defer src="{% static 'js/magnet.min.js' %}"></script>
|
||||
<script>
|
||||
(function () {
|
||||
function applyFavicon(theme) {
|
||||
var href = theme === "dark"
|
||||
? "{% static 'favicon-dark.svg' %}"
|
||||
: "{% static 'favicon-light.svg' %}";
|
||||
document.querySelectorAll("link[data-gia-favicon]").forEach(function (link) {
|
||||
link.setAttribute("href", href);
|
||||
});
|
||||
document.querySelectorAll(".js-theme-logo").forEach(function (image) {
|
||||
image.setAttribute("src", href);
|
||||
});
|
||||
}
|
||||
|
||||
function applyTheme(mode) {
|
||||
var validMode = mode === "dark" ? "dark" : "light";
|
||||
document.documentElement.dataset.theme = validMode;
|
||||
applyFavicon(validMode);
|
||||
try {
|
||||
localStorage.setItem("theme", validMode);
|
||||
} catch (error) {
|
||||
}
|
||||
document.querySelectorAll(".js-theme-toggle").forEach(function (button) {
|
||||
var nextMode = validMode === "dark" ? "light" : "dark";
|
||||
button.setAttribute("data-theme-mode", validMode);
|
||||
button.setAttribute("aria-label", "Theme: " + validMode + ". Click to switch to " + nextMode + ".");
|
||||
button.setAttribute("title", "Theme: " + validMode);
|
||||
var label = button.querySelector("[data-theme-label]");
|
||||
if (label) {
|
||||
label.textContent = validMode === "dark" ? "Dark" : "Light";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function cycleTheme() {
|
||||
var currentTheme = "light";
|
||||
try {
|
||||
currentTheme = localStorage.getItem("theme") || "light";
|
||||
} catch (error) {
|
||||
}
|
||||
if (currentTheme === "dark") {
|
||||
applyTheme("light");
|
||||
return;
|
||||
}
|
||||
applyTheme("dark");
|
||||
}
|
||||
|
||||
try {
|
||||
applyTheme(localStorage.getItem("theme") || "light");
|
||||
} catch (error) {
|
||||
applyTheme("light");
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.querySelectorAll(".js-theme-toggle").forEach(function (button) {
|
||||
button.addEventListener("click", cycleTheme);
|
||||
});
|
||||
applyTheme(document.documentElement.dataset.theme || "light");
|
||||
});
|
||||
})();
|
||||
|
||||
document.addEventListener("restore-scroll", function () {
|
||||
var scrollpos = localStorage.getItem("scrollpos");
|
||||
if (scrollpos) {
|
||||
@@ -204,6 +304,28 @@
|
||||
.navbar {
|
||||
background-color:rgba(0, 0, 0, 0.03) !important;
|
||||
}
|
||||
.gia-brand-shell {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.gia-brand-logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: 16px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1px solid rgba(21, 28, 39, 0.08);
|
||||
box-shadow: 0 10px 24px rgba(21, 28, 39, 0.08);
|
||||
}
|
||||
.gia-brand-logo img {
|
||||
display: block;
|
||||
}
|
||||
[data-theme="dark"] .gia-brand-logo {
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
border-color: rgba(255, 255, 255, 0.82);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
|
||||
}
|
||||
.section > .container.gia-page-shell,
|
||||
.section > .container {
|
||||
max-width: 1340px;
|
||||
@@ -227,11 +349,13 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: rgba(248, 250, 252, 0.96) !important;
|
||||
color: #1b1f2a !important;
|
||||
backdrop-filter: blur(6px);
|
||||
z-index: 1;
|
||||
}
|
||||
[data-theme="dark"] .table thead th {
|
||||
background: rgba(44, 44, 44, 0.96) !important;
|
||||
color: #f3f5f8 !important;
|
||||
}
|
||||
.table td,
|
||||
.table th {
|
||||
@@ -351,6 +475,26 @@
|
||||
color: #1f4f99 !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.theme-toggle-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.brand-theme-toggle {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: 0 !important;
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
line-height: 1;
|
||||
width: 3.15rem;
|
||||
height: 3.15rem;
|
||||
}
|
||||
.brand-theme-logo {
|
||||
display: block;
|
||||
width: 3.15rem;
|
||||
height: 3.15rem;
|
||||
}
|
||||
.security-page-tabs a {
|
||||
transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
@@ -369,9 +513,20 @@
|
||||
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{% url 'home' %}">
|
||||
<img src="{% static 'logo.svg' %}" width="112" height="28" alt="logo">
|
||||
</a>
|
||||
<div class="navbar-item">
|
||||
<span class="gia-brand-shell">
|
||||
{% if user.is_authenticated %}
|
||||
<button class="button is-light theme-toggle-button gia-brand-logo brand-theme-toggle js-theme-toggle" type="button" data-theme-mode="light" aria-label="Theme toggle">
|
||||
<img class="brand-theme-logo js-theme-logo" src="{% static 'favicon-light.svg' %}" alt="" aria-hidden="true">
|
||||
<span class="is-sr-only" data-theme-label>Auto</span>
|
||||
</button>
|
||||
{% else %}
|
||||
<a href="{% url 'home' %}" class="gia-brand-logo" aria-label="GIA home">
|
||||
<img class="brand-theme-logo" src="{% static 'favicon-light.svg' %}" alt="logo">
|
||||
</a>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="bar">
|
||||
<span aria-hidden="true"></span>
|
||||
@@ -473,6 +628,9 @@
|
||||
System
|
||||
</a>
|
||||
{% endif %}
|
||||
<a class="navbar-item{% if request.resolver_match.url_name == 'accessibility_settings' %} is-current-route{% endif %}" href="{% url 'accessibility_settings' %}">
|
||||
Accessibility
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item has-text-weight-semibold is-size-7 has-text-grey">
|
||||
Security
|
||||
@@ -512,8 +670,8 @@
|
||||
<a class="navbar-item{% if request.resolver_match.url_name == 'translation_settings' %} is-current-route{% endif %}" href="{% url 'translation_settings' %}">
|
||||
Translation
|
||||
</a>
|
||||
<a class="navbar-item{% if request.resolver_match.url_name == 'availability_settings' %} is-current-route{% endif %}" href="{% url 'availability_settings' %}">
|
||||
Availability
|
||||
<a class="navbar-item{% if request.resolver_match.url_name == 'availability_settings' or request.resolver_match.url_name == 'behavioral_signals_settings' %} is-current-route{% endif %}" href="{% url 'behavioral_signals_settings' %}">
|
||||
Behavioral Signals
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item has-text-weight-semibold is-size-7 has-text-grey">
|
||||
@@ -525,10 +683,6 @@
|
||||
<a class="navbar-item{% if request.resolver_match.url_name == 'osint_workspace' %} is-current-route{% endif %}" href="{% url 'osint_workspace' %}">
|
||||
OSINT Workspace
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item{% if request.resolver_match.url_name == 'accessibility_settings' %} is-current-route{% endif %}" href="{% url 'accessibility_settings' %}">
|
||||
Accessibility
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user