alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Light of day

Browse Source
This commit is contained in:
Alexander Heldt
2026-06-21 17:41:56 +00:00
commit d61e88fa29
13 changed files with 2556 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+173
View File
@@ -0,0 +1,173 @@
<!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="theme-color" content="#7c5cff" />
<title>Puppy Tracker</title>
<link rel="manifest" href="manifest.json" />
<link rel="icon" href="icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="icon.svg" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>🐶 Puppy Tracker</h1>
<div id="online-status" class="status-pill"></div>
</header>
<main>
<section id="big-clock" class="big-clock" hidden>
<div class="bc-label" id="bc-label">—</div>
<div class="bc-time" id="bc-time">0:00</div>
<div class="bc-since" id="bc-since"></div>
</section>
<section class="quick-actions">
<h2>Log event</h2>
<div class="grid">
<button class="action sleep" data-type="sleep-start">😴 Sleep start</button>
<button class="action sleep" data-type="sleep-end">⏰ Sleep end</button>
<button class="action eat" data-type="eat">🍽️ Ate</button>
<button class="action pee" data-type="pee">💧 Pee</button>
<button class="action poo" data-type="poo">💩 Poo</button>
</div>
</section>
<section class="day-bar">
<button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button>
<input type="date" id="day-picker" />
<button type="button" id="day-today" class="ghost">Today</button>
<button type="button" id="day-next" class="ghost" aria-label="Next day">→</button>
</section>
<section class="overview">
<h2 id="overview-title">Today's overview</h2>
<div class="stats">
<div class="stat">
<div class="stat-label">Sleep</div>
<div class="stat-value" id="stat-sleep">0h 0m</div>
</div>
<div class="stat">
<div class="stat-label">Awake</div>
<div class="stat-value" id="stat-awake">0h 0m</div>
</div>
<div class="stat">
<div class="stat-label">Meals</div>
<div class="stat-value" id="stat-meals">0</div>
</div>
<div class="stat">
<div class="stat-label">Pees</div>
<div class="stat-value" id="stat-pees">0</div>
</div>
<div class="stat">
<div class="stat-label">Poos</div>
<div class="stat-value" id="stat-poos">0</div>
</div>
</div>
<div class="lasts">
<div class="last-row"><span>Last pee</span><span id="last-pee">—</span></div>
<div class="last-row"><span>Last poo</span><span id="last-poo">—</span></div>
<div class="last-row"><span>Last meal</span><span id="last-eat">—</span></div>
<div class="last-row"><span>Last sleep</span><span id="last-sleep">—</span></div>
<div class="last-row" id="currently-row" hidden><span>Currently</span><span id="currently">—</span></div>
</div>
</section>
<section class="sleep">
<h2>Sleep windows</h2>
<ul id="sleep-list" class="wake-list"></ul>
<p id="sleep-empty" class="empty">No sleep windows yet for this day.</p>
</section>
<section class="wake">
<h2>Wake windows</h2>
<ul id="wake-list" class="wake-list"></ul>
<p id="wake-empty" class="empty">No wake windows yet for this day.</p>
</section>
<section class="weekly">
<h2>Last 7 days</h2>
<div class="chart">
<div class="chart-title">Sleep (hours)</div>
<svg id="chart-sleep" class="chart-svg" viewBox="0 0 320 160" role="img" aria-label="Sleep hours per day for the last 7 days"></svg>
</div>
<div class="chart">
<div class="chart-title">Daily counts</div>
<svg id="chart-counts" class="chart-svg" viewBox="0 0 320 180" role="img" aria-label="Pee, poo and meal counts per day for the last 7 days"></svg>
<div class="legend">
<span class="lg pee"><span class="sw"></span>Pees</span>
<span class="lg poo"><span class="sw"></span>Poos</span>
<span class="lg eat"><span class="sw"></span>Meals</span>
</div>
</div>
</section>
<section class="history">
<h2>History</h2>
<ul id="event-list" class="event-list"></ul>
<p id="empty-state" class="empty">No events logged for this day.</p>
</section>
</main>
<dialog id="note-dialog">
<form method="dialog" id="note-form">
<h3 id="note-title">Add note</h3>
<label>Time
<div class="time-row">
<input type="date" id="note-date" />
<input type="time" id="note-time" lang="en-GB" />
<button type="button" id="note-time-now" class="ghost">Now</button>
</div>
</label>
<label>Note
<textarea id="note-input" rows="4" placeholder="e.g. pee was instant, poo took 5min, ate 300g raw food"></textarea>
</label>
<div class="photo-field">
<input type="file" id="note-photo-input" accept="image/*" capture="environment" hidden />
<button type="button" id="note-photo-btn" class="ghost">📷 Add photo</button>
<button type="button" id="note-photo-clear" class="ghost" hidden>Remove photo</button>
<div id="note-photo-preview" class="photo-preview" hidden></div>
</div>
<menu>
<button value="cancel" class="ghost">Cancel</button>
<button value="save" id="note-save">Save</button>
</menu>
</form>
</dialog>
<dialog id="edit-dialog">
<form method="dialog" id="edit-form">
<h3>Edit event</h3>
<label>Time
<div class="time-row">
<input type="date" id="edit-date" />
<input type="time" id="edit-time" lang="en-GB" />
</div>
</label>
<label>Note
<textarea id="edit-note" rows="4"></textarea>
</label>
<div class="photo-field">
<input type="file" id="edit-photo-input" accept="image/*" capture="environment" hidden />
<button type="button" id="edit-photo-btn" class="ghost">📷 Add photo</button>
<button type="button" id="edit-photo-clear" class="ghost" hidden>Remove photo</button>
<div id="edit-photo-preview" class="photo-preview" hidden></div>
</div>
<menu>
<button value="delete" id="edit-delete" class="danger">Delete</button>
<button value="cancel" class="ghost">Cancel</button>
<button value="save">Save</button>
</menu>
</form>
</dialog>
<dialog id="lightbox">
<button type="button" id="lightbox-close" class="lightbox-close" aria-label="Close">×</button>
<img id="lightbox-img" alt="" />
</dialog>
<script src="app.js"></script>
</body>
</html>