josh/Provisioning
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign frontend with clean light theme and design system
build-and-push / test (push) Successful in 37s
Details
build-and-push / build-and-push (push) Successful in 1m18s
Details

Browse Source 
Replace prototype dark theme with a professional light-theme design
using Outfit (UI) and IBM Plex Mono (data) fonts, navy topbar, white
card surfaces, and a full CSS variable system for colors, shadows,
spacing, and radii. Add LED status indicators, panel components,
and structured tile layout with header/meta/footer sections.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Josh Wright
2026-05-10 22:00:53 -04:00
parent 443a3db9e1
commit 0bf1a62897
4 changed files with 410 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/api/render.go
+66 -27
View File
@@ -33,14 +33,22 @@ func dashboardPage(hosts []model.Host) string {
func hostTile(h model.Host) string {
stateClass := stateColor(h.State)
led := ledClass(h.State)
return fmt.Sprintf(`
<a href="/hosts/%d" class="tile %s" id="tile-%d">
<div class="tile-name">%s</div>
<div class="tile-type">%s</div>
<div class="tile-state">%s</div>
<div class="tile-mac">%s</div>
<div class="tile-header">
<span class="led led-lg %s"></span>
<span class="tile-name">%s</span>
</div>
<div class="tile-meta">
<span class="tile-type">%s</span>
</div>
<div class="tile-footer">
<span class="tile-mac">%s</span>
<span class="tile-state-label">%s</span>
</div>
</a>
`, h.ID, stateClass, h.ID, html.EscapeString(h.Hostname), html.EscapeString(h.ServerType), h.State, h.MAC)
`, h.ID, stateClass, h.ID, led, html.EscapeString(h.Hostname), html.EscapeString(h.ServerType), h.MAC, h.State)
}
func hostFormPage(types []string, errMsg string, prefill *model.Host) string {
@@ -77,11 +85,12 @@ func hostFormPage(types []string, errMsg string, prefill *model.Host) string {
func hostDetailPage(h *model.Host, ops []model.Operation) string {
stateClass := stateColor(h.State)
led := ledClass(h.State)
canRebuild := h.State == model.StateRegistered || h.State == model.StateReady || h.State == model.StateFailed
var actions strings.Builder
if canRebuild {
actions.WriteString(fmt.Sprintf(`<form method="POST" action="/hosts/%d/rebuild" class="inline"><button class="btn">Rebuild with Proxmox</button></form>`, h.ID))
actions.WriteString(fmt.Sprintf(`<form method="POST" action="/hosts/%d/rebuild" class="inline"><button class="btn">Rebuild</button></form>`, h.ID))
}
actions.WriteString(fmt.Sprintf(`<form method="POST" action="/hosts/%d/delete" class="inline" onsubmit="return confirm('Delete this host?')"><button class="btn btn-danger">Delete</button></form>`, h.ID))
@@ -106,22 +115,27 @@ func hostDetailPage(h *model.Host, ops []model.Operation) string {
return layout(h.Hostname, fmt.Sprintf(`
<div class="host-header">
<h2>%s</h2>
<span class="led led-lg %s"></span>
<h2 style="margin-bottom:0">%s</h2>
<span class="badge %s">%s</span>
</div>
<table class="detail-table">
<tr><th>MAC</th><td>%s</td></tr>
<tr><th>Server Type</th><td>%s</td></tr>
<tr><th>IP Address</th><td>%s</td></tr>
<tr><th>Notes</th><td>%s</td></tr>
</table>
<div class="actions">%s</div>
<div class="panel">
<table class="detail-table">
<tr><th>MAC</th><td>%s</td></tr>
<tr><th>Server Type</th><td>%s</td></tr>
<tr><th>IP Address</th><td>%s</td></tr>
<tr><th>Notes</th><td>%s</td></tr>
</table>
<div class="actions">%s</div>
</div>
<h3>Operations</h3>
<table class="ops-table">
<thead><tr><th>Kind</th><th>State</th><th>Started</th><th>Duration</th><th>Error</th></tr></thead>
<tbody>%s</tbody>
</table>
`, html.EscapeString(h.Hostname), stateClass, h.State, h.MAC, h.ServerType, ip, html.EscapeString(h.Notes), actions.String(), opsHTML.String()))
<div class="panel">
<table class="ops-table">
<thead><tr><th>Kind</th><th>State</th><th>Started</th><th>Duration</th><th>Error</th></tr></thead>
<tbody>%s</tbody>
</table>
</div>
`, led, html.EscapeString(h.Hostname), stateClass, h.State, h.MAC, h.ServerType, ip, html.EscapeString(h.Notes), actions.String(), opsHTML.String()))
}
func imagesPage(images []model.Image) string {
@@ -131,24 +145,26 @@ func imagesPage(images []model.Image) string {
if img.IsDefault {
def = `<span class="badge state-green">default</span>`
} else {
def = fmt.Sprintf(`<form method="POST" action="/images/%d/default" class="inline"><button class="btn" style="font-size:0.75rem;padding:0.2rem 0.5rem">Set Default</button></form>`, img.ID)
def = fmt.Sprintf(`<form method="POST" action="/images/%d/default" class="inline"><button class="btn" style="font-size:0.7rem;padding:0.25rem 0.5rem">Set Default</button></form>`, img.ID)
}
deleteBtn := fmt.Sprintf(`<form method="POST" action="/images/%d/delete" class="inline" onsubmit="return confirm('Delete image %s?')"><button class="btn btn-danger" style="font-size:0.75rem;padding:0.2rem 0.5rem">Delete</button></form>`, img.ID, html.EscapeString(img.Name))
deleteBtn := fmt.Sprintf(`<form method="POST" action="/images/%d/delete" class="inline" onsubmit="return confirm('Delete image %s?')"><button class="btn btn-danger" style="font-size:0.7rem;padding:0.25rem 0.5rem">Delete</button></form>`, img.ID, html.EscapeString(img.Name))
rows.WriteString(fmt.Sprintf(`<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>`,
html.EscapeString(img.Name), img.Kind, img.Version, def, img.CreatedAt.Format("2006-01-02"), deleteBtn))
}
if len(images) == 0 {
rows.WriteString(`<tr><td colspan="6" style="text-align:center;color:var(--text-muted)">No images uploaded yet.</td></tr>`)
rows.WriteString(`<tr><td colspan="6" class="empty">No images uploaded yet.</td></tr>`)
}
return layout("Images", fmt.Sprintf(`
<div class="actions">
<a href="/images/new" class="btn">Upload Image</a>
<span class="count">%d images</span>
</div>
<table class="ops-table">
<thead><tr><th>Name</th><th>Kind</th><th>Version</th><th>Default</th><th>Added</th><th></th></tr></thead>
<tbody>%s</tbody>
</table>
<div class="panel">
<table class="ops-table">
<thead><tr><th>Name</th><th>Kind</th><th>Version</th><th>Default</th><th>Added</th><th></th></tr></thead>
<tbody>%s</tbody>
</table>
</div>
`, len(images), rows.String()))
}
@@ -200,6 +216,23 @@ func stateColor(s model.HostState) string {
}
}
func ledClass(s model.HostState) string {
switch s {
case model.StateRegistered:
return "led-grey"
case model.StatePXEReady, model.StatePXEBooted, model.StateInstalling:
return "led-blue"
case model.StateInstalled, model.StateFirstBoot, model.StateJoining:
return "led-amber"
case model.StateReady:
return "led-green"
case model.StateFailed:
return "led-red"
default:
return "led-grey"
}
}
func layout(title, body string) string {
return fmt.Sprintf(`<!DOCTYPE html>
<html lang="en">
@@ -207,6 +240,9 @@ func layout(title, body string) string {
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>%s — Provisioning</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/app.css">
</head>
<body>
@@ -216,7 +252,10 @@ func layout(title, body string) string {
<a href="/">Dashboard</a>
<a href="/images">Images</a>
</div>
<span class="sse-indicator" id="sse-dot">●</span>
<div class="sse-status">
<span class="sse-label">Link</span>
<span class="led led-grey" id="sse-dot"></span>
</div>
</nav>
<main>%s</main>
<script src="/static/app.js"></script>