peter
cf776d3f0b
Generated a transparent PNG set from the source icon (a JPEG with a baked-in checkerboard) by keying out the background on saturation — the arrow is strongly saturated (0.47-0.68) while the grey/white background is 0.00, so the cutout is clean. Produced static/logo.png (top-bar, natural aspect), static/favicon.png (32px), and static/apple-touch-icon.png (180px). Wired favicon + apple-touch links into all three page heads (feed, settings, login) and placed the logo next to the "AgentFeed" title in the top bar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
58 lines
2.3 KiB
HTML
58 lines
2.3 KiB
HTML
<header class="topbar">
|
|
<div class="brandline">
|
|
<a class="brand-link" href="{% url 'feed' %}"><img class="brand-logo" src="/static/logo.png" alt=""><h1>AgentFeed</h1></a>
|
|
</div>
|
|
<div class="toolbar">
|
|
{% if topbar_toolbar %}{% include topbar_toolbar %}{% endif %}
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<button class="icon-button" type="button" data-user-menu-toggle aria-haspopup="true" aria-expanded="false" title="{{ request.user.username }}">
|
|
⚙ {{ request.user.username }}
|
|
</button>
|
|
<div class="user-menu-dropdown" hidden data-user-menu>
|
|
<a href="{% url 'settings-account' %}">Settings</a>
|
|
<a href="{% url 'settings-demo-data' %}">Demo Data</a>
|
|
<button type="button" data-theme-toggle>Dark mode</button>
|
|
<form method="post" action="{% url 'logout' %}">{% csrf_token %}<button type="submit">Log out</button></form>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<script>
|
|
(() => {
|
|
const toggle = document.querySelector("[data-user-menu-toggle]");
|
|
const menu = document.querySelector("[data-user-menu]");
|
|
if (!toggle || !menu) return;
|
|
toggle.addEventListener("click", (event) => {
|
|
event.stopPropagation();
|
|
const isHidden = menu.hidden;
|
|
menu.hidden = !isHidden;
|
|
toggle.setAttribute("aria-expanded", String(isHidden));
|
|
});
|
|
document.addEventListener("click", (event) => {
|
|
if (!menu.hidden && !menu.contains(event.target) && event.target !== toggle) {
|
|
menu.hidden = true;
|
|
toggle.setAttribute("aria-expanded", "false");
|
|
}
|
|
});
|
|
|
|
const themeToggle = document.querySelector("[data-theme-toggle]");
|
|
if (themeToggle) {
|
|
const syncLabel = () => {
|
|
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
|
|
themeToggle.textContent = isDark ? "Light mode" : "Dark mode";
|
|
};
|
|
syncLabel();
|
|
themeToggle.addEventListener("click", () => {
|
|
const isDark = document.documentElement.getAttribute("data-theme") === "dark";
|
|
if (isDark) {
|
|
document.documentElement.removeAttribute("data-theme");
|
|
try { localStorage.setItem("daybook.theme", "light"); } catch (e) {}
|
|
} else {
|
|
document.documentElement.setAttribute("data-theme", "dark");
|
|
try { localStorage.setItem("daybook.theme", "dark"); } catch (e) {}
|
|
}
|
|
syncLabel();
|
|
});
|
|
}
|
|
})();
|
|
</script>
|