ort
2826a3819c
Parents get a real push notification when a kid checks off a task (false->true transitions only, fire-and-forget, degrades gracefully with no VAPID keys configured). Dashboard is a fully installable iOS/Android PWA; each child's kiosk link gets its own dynamic per-token manifest so "Add to Home Screen" opens straight into their board in standalone mode. Kiosk view is reworked for tablets: safe-area-aware full-bleed layout, the whole task row is now tappable (previously only the 24px checkbox was, well under Apple's touch-target minimum), and app icons are generated by a small dependency-free PNG encoder (no image tooling available in this environment). Push requires real HTTPS (iOS Safari won't allow it otherwise) - README and UNRAID.md cover VAPID setup and the HTTPS prerequisite.
134 lines
4.6 KiB
HTML
134 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Dashboard — Kids Calendar</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Nunito:wght@500;700;800&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/css/shared.css">
|
|
<link rel="manifest" href="/manifest.webmanifest">
|
|
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180.png">
|
|
<meta name="theme-color" content="#F1F5FB">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="Calendar">
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div>
|
|
<h1 id="householdName">Loading…</h1>
|
|
<div class="subtitle" id="whoami"></div>
|
|
</div>
|
|
<div class="toolbar">
|
|
<button class="tool" id="inviteBtn">Invite spouse</button>
|
|
<button class="tool danger" id="logoutBtn">Log out</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="section">
|
|
<h2>Notifications</h2>
|
|
<div class="entity-card" id="notificationsCard">
|
|
<p class="meta" id="notificationsMessage">Checking notification support…</p>
|
|
<div>
|
|
<button class="tool primary" id="notificationsBtn" style="display:none;">Enable notifications</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Household</h2>
|
|
<div id="parentsList" class="card-grid"></div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;">
|
|
<h2 style="margin:0;">Children</h2>
|
|
<button class="tool primary" id="addChildBtn">+ Add child</button>
|
|
</div>
|
|
<div id="childrenList" class="card-grid"></div>
|
|
</div>
|
|
|
|
<!-- Invite modal -->
|
|
<div class="modal-backdrop hidden" id="inviteModal">
|
|
<div class="modal">
|
|
<h2>Invite your spouse</h2>
|
|
<p id="inviteLeadText">Share this link — it lets them create a login joined to your household. Expires in 7 days.</p>
|
|
<div class="field">
|
|
<input type="text" id="inviteLinkField" readonly>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button class="tool primary" id="copyInviteBtn">Copy link</button>
|
|
<button class="tool" id="closeInviteBtn">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add child modal -->
|
|
<div class="modal-backdrop hidden" id="addChildModal">
|
|
<div class="modal">
|
|
<h2>Add a child</h2>
|
|
<form id="addChildForm">
|
|
<div class="field">
|
|
<label for="childNameInput">Name</label>
|
|
<input type="text" id="childNameInput" required>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="tool primary">Add</button>
|
|
<button type="button" class="tool" id="cancelAddChildBtn">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- New calendar modal -->
|
|
<div class="modal-backdrop hidden" id="newCalendarModal">
|
|
<div class="modal">
|
|
<h2>New calendar</h2>
|
|
<form id="newCalendarForm">
|
|
<input type="hidden" id="newCalChildId">
|
|
<div class="field">
|
|
<label for="newCalTitle">Title</label>
|
|
<input type="text" id="newCalTitle" placeholder="e.g. Week of Aug 24" required>
|
|
</div>
|
|
<div class="field">
|
|
<label class="opt" style="display:flex; align-items:center; gap:8px; font-weight:700;">
|
|
<input type="checkbox" id="newCalDuplicate">
|
|
Duplicate tasks from most recent calendar (checkmarks reset)
|
|
</label>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="submit" class="tool primary">Create</button>
|
|
<button type="button" class="tool" id="cancelNewCalBtn">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kiosk link modal -->
|
|
<div class="modal-backdrop hidden" id="kioskModal">
|
|
<div class="modal">
|
|
<h2>Tablet link for <span id="kioskChildName"></span></h2>
|
|
<p>Open this link on the tablet's browser and add it to the home screen. It only shows the active calendar and lets your child check items off — nothing else.</p>
|
|
<div class="field">
|
|
<input type="text" id="kioskLinkField" readonly>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button class="tool primary" id="copyKioskBtn">Copy link</button>
|
|
<button class="tool danger" id="regenKioskBtn">Regenerate link</button>
|
|
<button class="tool" id="closeKioskBtn">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script src="/js/api.js"></script>
|
|
<script src="/js/push.js"></script>
|
|
<script src="/js/dashboard.js"></script>
|
|
|
|
</body>
|
|
</html>
|