Files
atlas/web/templates/base.html

110 lines
4.3 KiB
HTML

{{define "base"}}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>{{.Title}} • AtlasOS</title>
<!-- v1: Tailwind CDN (later: bundle local) -->
<!-- Try multiple CDN sources for better reliability -->
<script src="https://cdn.tailwindcss.com" onerror="this.onerror=null;this.src='https://unpkg.com/@tailwindcss/browser@4/dist/tailwind.min.js'"></script>
<script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.min.js" onerror="this.onerror=null;this.src='https://cdn.jsdelivr.net/npm/htmx.org@1.9.12/dist/htmx.min.js'"></script>
</head>
<body class="bg-slate-950 text-slate-100">
<header class="border-b border-slate-800 bg-slate-950/80 backdrop-blur">
<div class="mx-auto max-w-6xl px-4 py-3 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-9 w-9 rounded-lg bg-slate-800 flex items-center justify-center font-bold">A</div>
<div>
<div class="font-semibold leading-tight">AtlasOS</div>
<div class="text-xs text-slate-400 leading-tight">Storage Controller v1</div>
</div>
</div>
<nav class="text-sm text-slate-300 flex items-center gap-4">
<a class="hover:text-white" href="/">Dashboard</a>
<a class="hover:text-white" href="/storage">Storage</a>
<a class="hover:text-white" href="/shares">Shares</a>
<a class="hover:text-white" href="/iscsi">iSCSI</a>
<a class="hover:text-white" href="/protection">Data Protection</a>
<a class="hover:text-white" href="/management">Management</a>
<a class="hover:text-white opacity-50 cursor-not-allowed" href="#">Monitoring</a>
<span id="auth-status" class="ml-4"></span>
</nav>
</div>
</header>
<main class="mx-auto max-w-6xl px-4 py-8">
{{$ct := getContentTemplate .}}
{{if eq $ct "storage-content"}}
{{template "storage-content" .}}
{{else if eq $ct "shares-content"}}
{{template "shares-content" .}}
{{else if eq $ct "iscsi-content"}}
{{template "iscsi-content" .}}
{{else if eq $ct "protection-content"}}
{{template "protection-content" .}}
{{else if eq $ct "management-content"}}
{{template "management-content" .}}
{{else if eq $ct "login-content"}}
{{template "login-content" .}}
{{else}}
{{template "content" .}}
{{end}}
</main>
<footer class="mx-auto max-w-6xl px-4 pb-10 text-xs text-slate-500">
<div class="border-t border-slate-800 pt-4 flex items-center justify-between">
<span>AtlasOS • {{nowRFC3339}}</span>
<span>Build: {{index .Build "version"}}</span>
</div>
</footer>
<script>
// Update auth status in navigation
function updateAuthStatus() {
const authStatusEl = document.getElementById('auth-status');
if (!authStatusEl) return;
const token = localStorage.getItem('atlas_token');
const userStr = localStorage.getItem('atlas_user');
if (token && userStr) {
try {
const user = JSON.parse(userStr);
authStatusEl.innerHTML = `
<span class="text-slate-400">${user.username || 'User'}</span>
<button onclick="handleLogout()" class="ml-2 px-2 py-1 text-xs bg-slate-700 hover:bg-slate-600 text-white rounded">
Logout
</button>
`;
} catch {
authStatusEl.innerHTML = `
<a href="/login" class="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded">Login</a>
`;
}
} else {
authStatusEl.innerHTML = `
<a href="/login" class="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded">Login</a>
`;
}
}
function handleLogout() {
localStorage.removeItem('atlas_token');
localStorage.removeItem('atlas_user');
window.location.href = '/login';
}
// Update on page load
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', updateAuthStatus);
} else {
updateAuthStatus();
}
</script>
</body>
</html>
{{end}}