ort/KCal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add self-hosted kids calendar app

Browse Source 
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.
This commit is contained in:
ort
2026-08-15 13:48:01 -04:00
commit 66b8fc5d4d
42 changed files with 3567 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/dashboard.html
+115
View File
@@ -0,0 +1,115 @@
<!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>