ort
66b8fc5d4d
Express + SQLite (node:sqlite, no native build step) family calendar: parent accounts with household invites, per-child calendars with save/duplicate/print, a token-gated read-only kiosk view for tablets, and polling to keep parent and kiosk views in sync. Defaults to port 3007.
116 lines
3.8 KiB
HTML
116 lines
3.8 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">
|
|
</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>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/dashboard.js"></script>
|
|
|
|
</body>
|
|
</html>
|