diff --git a/internal/web/ui/assets/style.css b/internal/web/ui/assets/style.css
index 2f6757c..2011beb 100644
--- a/internal/web/ui/assets/style.css
+++ b/internal/web/ui/assets/style.css
@@ -432,4 +432,16 @@ pre{margin-top:12px;padding:12px;border-radius:var(--radius);border:1px solid va
.assignment-board-grid{grid-template-columns:1fr}
}
-.sidebar-footer{margin-top:auto;padding:16px 8px 0;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:var(--sidebar-muted);line-height:1.6;text-align:center}
+.sidebar-footer{margin-top:auto;padding:16px 8px 0;font-size:11px;color:var(--sidebar-muted);line-height:1.6;text-align:center}
+.sidebar-footer .mode-toggle{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0;cursor:pointer;user-select:none}
+.sidebar-footer .mode-toggle:hover{background:var(--sidebar-hover)}
+.mode-label{font-size:11px;font-weight:500;transition:color .16s ease}
+.mode-label-left{color:var(--sidebar-text)}
+.mode-label-right{color:var(--sidebar-muted)}
+body[data-mode=expert] .mode-label-left{color:var(--sidebar-muted)}
+body[data-mode=expert] .mode-label-right{color:var(--sidebar-text)}
+.mode-track{position:relative;width:36px;height:20px;border-radius:10px;background:var(--surface-strong);border:1px solid var(--border);transition:background .16s ease,border-color .16s ease;flex-shrink:0}
+body[data-mode=expert] .mode-track{background:var(--primary-strong);border-color:var(--primary)}
+.mode-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--sidebar-text);transition:transform .16s ease}
+body[data-mode=expert] .mode-thumb{transform:translateX(16px)}
+body:not([data-mode=expert]) .expert-only{display:none}
diff --git a/internal/web/ui/templates/layout.html b/internal/web/ui/templates/layout.html
index fcd1e57..16aa208 100644
--- a/internal/web/ui/templates/layout.html
+++ b/internal/web/ui/templates/layout.html
@@ -6,7 +6,7 @@
{{.Title}}
-
+
@@ -19,7 +19,6 @@
@@ -342,6 +346,20 @@
}
}
+ var modeKey = "safesight-mode";
+ function applyMode(mode, persist) {
+ var nextMode = mode === "expert" ? "expert" : "standard";
+ document.body.setAttribute("data-mode", nextMode);
+ if (persist) {
+ localStorage.setItem(modeKey, nextMode);
+ }
+ }
+ applyMode(localStorage.getItem(modeKey) || "standard", false);
+ document.getElementById("mode-toggle").addEventListener("click", function () {
+ var current = document.body.getAttribute("data-mode") || "standard";
+ applyMode(current === "expert" ? "standard" : "expert", true);
+ });
+
})();