29 lines
1.2 KiB
HTML
29 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Power Display</title>
|
|
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
|
<style>
|
|
:root { color-scheme: light dark; }
|
|
body { font-family: system-ui, sans-serif; margin: 0; min-height: 100vh; display: grid; place-items: center; background: #0f172a; color: #e2e8f0; }
|
|
main { text-align: center; padding: 2rem; }
|
|
.value { font-size: clamp(3rem, 12vw, 8rem); font-weight: 800; line-height: 1; }
|
|
.unit { margin-top: 0.75rem; font-size: 1.25rem; color: #94a3b8; }
|
|
.updated-at { margin-top: 0.5rem; font-size: 0.875rem; color: #64748b; }
|
|
.chart { margin-top: 1.25rem; width: min(92vw, 42rem); }
|
|
.chart-svg { display: block; width: 100%; height: auto; }
|
|
.logo { display: block; width: min(80vw, 36rem); height: auto; margin: 0 auto 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<img class="logo" src="/logo.png" alt="Power Watts logo">
|
|
<div class="value">{{.Watts}} W</div>
|
|
<div class="updated-at">Last updated: {{.UpdatedAt}}</div>
|
|
<div class="chart">{{.HistoryChart}}</div>
|
|
</main>
|
|
</body>
|
|
</html>
|