Files
weather/app/public/dashboard-setup.html
T
Nate EmmertandClaude Sonnet 5.5 f21c91527c
Publish Container / publish (push) Successful in 2m43s
Serve PWA icons from fresh /icons/v2/ URLs with every iOS size
iOS showed a letter tile ('N') when adding to the Home Screen. The live files were fine, but a
reverse proxy in front of the app serves static files with a long cache lifetime (live icon.svg
and sw.js were stale) and iOS remembers a failed icon per URL.

- New versioned URLs no proxy/phone has cached; old paths kept for existing installs
- apple-touch-icon declared at 180/167/152/120 (opaque 8-bit RGB PNGs) for app and dashboard
- 180px icon also listed in both manifests; notification icons and root fallbacks use v2
- Service worker cache bumped

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-15 14:22:05 -04:00

59 lines
3.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="manifest" href="/dashboard.webmanifest">
<link rel="icon" type="image/png" sizes="192x192" href="/icons/v2/dashboard-icon-192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/v2/dashboard-apple-touch-icon-180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/icons/v2/dashboard-apple-touch-icon-167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/v2/dashboard-apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="/icons/v2/dashboard-apple-touch-icon-120.png">
<meta name="apple-mobile-web-app-title" content="Station">
<link rel="stylesheet" href="/pwa-safe.css">
<title>Station Dashboard — Create Account</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--ink: #0d1b2a; --paper: #edf2f7; --paper-dark: #ffffff;
--border: #ccd6e2; --accent: #2563eb; --mono: 'Segoe UI Rounded', 'Trebuchet MS', sans-serif;
}
@media (prefers-color-scheme: dark) {
:root { --ink: #dce6f0; --paper: #070c14; --paper-dark: #0d1720; --border: #22405c; --accent: #60a5fa; }
}
html, body { min-height: 100%; background: var(--paper); color: var(--ink); font-family: var(--mono); display: flex; align-items: center; justify-content: center; }
.card { background: var(--paper-dark); border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 2rem; width: min(380px, 94vw); }
h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.sub { color: var(--border); font-size: 0.85rem; margin-bottom: 2rem; }
label { display: block; font-size: 0.85rem; margin-bottom: 0.35rem; opacity: 0.7; }
input { width: 100%; padding: 0.6rem 0.8rem; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font-size: 1rem; font-family: var(--mono); margin-bottom: 1rem; }
input:focus { outline: 2px solid var(--accent); }
button { width: 100%; padding: 0.7rem; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 1rem; font-family: var(--mono); cursor: pointer; font-weight: 600; }
button:hover { opacity: 0.88; }
.error { background: rgba(194,90,42,0.15); border: 1px solid var(--accent); border-radius: 8px; padding: 0.6rem 0.8rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--accent); }
.note { margin-top: 1rem; font-size: 0.8rem; opacity: 0.55; text-align: center; }
html, body { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
</style>
</head>
<body>
<div class="card">
<h1>Create Dashboard Account</h1>
<p class="sub">First-time setup — create your admin account</p>
<div id="err" class="error" style="display:none">Username must be 3–32 letters, numbers, . _ - and the password at least 8 characters.</div>
<form method="POST" action="/dashboard/setup">
<label>Username</label>
<input name="username" pattern="[A-Za-z0-9._\-]{3,32}" autocapitalize="none" type="text" autocomplete="username" autofocus required>
<label>Password</label>
<input name="password" type="password" autocomplete="new-password" required minlength="8">
<button type="submit">Create Account</button>
</form>
<p class="note">This account protects your station dashboard. Store these credentials somewhere safe.</p>
</div>
<script>
if (location.search.includes('error=1')) document.getElementById('err').style.display = 'block';
</script>
</body>
</html>