owenandClaude Sonnet 5
affdbfaa41
- Rework the admin UI (topbar, sidebar, cards, tables, badges, stat tiles) into a dark theme with a light/dark toggle, matching the visual style requested for the project. - Fix Dockerfile: chown /data to the distroless nonroot uid/gid before the VOLUME declaration so a freshly created named volume is seeded with writable permissions instead of root:root (was causing "unable to open database file" on first run). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QTXFrNP1imCW7jtfL5SZrw
69 lines
3.4 KiB
HTML
69 lines
3.4 KiB
HTML
{{define "header"}}<!doctype html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{.Title}} · vibeproxy</title>
|
|
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="/static/css/bootstrap-icons.min.css">
|
|
<link rel="stylesheet" href="/static/css/app.css">
|
|
<script>
|
|
(function () {
|
|
var saved = localStorage.getItem("vp-theme");
|
|
if (saved === "light" || saved === "dark") {
|
|
document.documentElement.setAttribute("data-bs-theme", saved);
|
|
}
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<header class="vp-topbar d-flex align-items-center justify-content-between">
|
|
<a href="/dashboard" class="vp-brand d-flex align-items-center gap-2">
|
|
<i class="bi bi-hexagon-fill"></i>
|
|
<span>vibeproxy</span>
|
|
</a>
|
|
<div class="d-flex align-items-center gap-2">
|
|
<button type="button" class="btn vp-icon-btn" title="Toggle theme" data-theme-toggle>
|
|
<i class="bi bi-moon-stars"></i>
|
|
</button>
|
|
<span class="vp-user-badge"><i class="bi bi-person-circle"></i> admin</span>
|
|
</div>
|
|
</header>
|
|
<div class="vp-shell">
|
|
<nav class="vp-sidebar d-flex flex-column">
|
|
<ul class="nav flex-column vp-nav">
|
|
<li class="nav-item"><a class="nav-link {{if eq .Active "dashboard"}}active{{end}}" href="/dashboard"><i class="bi bi-speedometer2"></i> Dashboard</a></li>
|
|
|
|
<li class="vp-nav-label">Proxy</li>
|
|
<li class="nav-item"><a class="nav-link {{if eq .Active "proxy_hosts"}}active{{end}}" href="/proxy-hosts"><i class="bi bi-globe2"></i> Proxy Hosts</a></li>
|
|
<li class="nav-item"><a class="nav-link {{if eq .Active "streams"}}active{{end}}" href="/streams"><i class="bi bi-arrow-left-right"></i> TCP/UDP Streams</a></li>
|
|
<li class="nav-item"><a class="nav-link {{if eq .Active "backends"}}active{{end}}" href="/backends"><i class="bi bi-hdd-network"></i> Backends</a></li>
|
|
|
|
<li class="vp-nav-label">Security</li>
|
|
<li class="nav-item"><a class="nav-link {{if eq .Active "certificates"}}active{{end}}" href="/certificates"><i class="bi bi-shield-lock"></i> Certificates</a></li>
|
|
<li class="nav-item"><a class="nav-link {{if eq .Active "access_lists"}}active{{end}}" href="/access-lists"><i class="bi bi-key"></i> Access Lists</a></li>
|
|
|
|
<li class="vp-nav-label">Operations</li>
|
|
<li class="nav-item"><a class="nav-link {{if eq .Active "logs"}}active{{end}}" href="/logs"><i class="bi bi-journal-text"></i> Logs</a></li>
|
|
|
|
<li class="vp-nav-label">Settings</li>
|
|
<li class="nav-item"><a class="nav-link {{if eq .Active "settings"}}active{{end}}" href="/settings"><i class="bi bi-gear"></i> Settings</a></li>
|
|
<li class="nav-item"><a class="nav-link {{if eq .Active "api"}}active{{end}}" href="/api-tokens"><i class="bi bi-code-slash"></i> API</a></li>
|
|
</ul>
|
|
<div class="vp-sidebar-footer text-secondary small">
|
|
<i class="bi bi-box-seam"></i> vibeproxy
|
|
</div>
|
|
</nav>
|
|
<main class="vp-main">
|
|
<div class="vp-page-header d-flex align-items-center justify-content-between">
|
|
<h1 class="h4 mb-0">{{.Title}}</h1>
|
|
</div>
|
|
<div class="vp-content">
|
|
{{if .Flash}}
|
|
<div class="alert alert-{{if .FlashKind}}{{.FlashKind}}{{else}}success{{end}} alert-dismissible fade show" role="alert">
|
|
{{.Flash}}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|