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

Track age and weight

Browse Source
This commit is contained in:
Alexander Heldt
2026-07-04 09:20:31 +00:00
parent 709a051afb
commit f14a749169
6 changed files with 540 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html
+51 -2
View File
@@ -12,8 +12,14 @@
</head>
<body>
<header>
<h1>🐶 Puppy Tracker</h1>
<div id="online-status" class="status-pill"></div>
<div class="title">
<h1 id="app-title">🐶 Puppy Tracker</h1>
<div id="puppy-age" class="puppy-age" hidden></div>
</div>
<div class="header-actions">
<button type="button" id="settings-btn" class="ghost icon-btn" aria-label="Settings" title="Settings">⚙️</button>
<div id="online-status" class="status-pill"></div>
</div>
</header>
<main>
@@ -31,6 +37,7 @@
<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>
<button class="action weight" data-type="weight">⚖️ Weigh-in</button>
</div>
</section>
@@ -115,6 +122,26 @@
</div>
</section>
<section class="weight">
<h2>Weight</h2>
<div class="weight-summary">
<div class="stat">
<div class="stat-label">Latest</div>
<div class="stat-value" id="weight-latest">—</div>
</div>
<div class="stat">
<div class="stat-label">Since last</div>
<div class="stat-value" id="weight-change">—</div>
</div>
</div>
<div class="chart">
<div class="chart-title">Weight (kg)</div>
<svg id="chart-weight" class="chart-svg" viewBox="0 0 320 180" role="img" aria-label="Weight in kilograms over time"></svg>
</div>
<ul id="weight-list" class="wake-list"></ul>
<p id="weight-empty" class="empty">No weigh-ins logged yet.</p>
</section>
<section class="history">
<h2>History</h2>
<ul id="event-list" class="event-list"></ul>
@@ -122,6 +149,22 @@
</section>
</main>
<dialog id="settings-dialog">
<form method="dialog" id="settings-form">
<h3>Puppy settings</h3>
<label>Name
<input type="text" id="settings-name" placeholder="e.g. Rex" autocomplete="off" />
</label>
<label>Birthday
<input type="date" id="settings-birthday" />
</label>
<menu>
<button value="cancel" class="ghost">Cancel</button>
<button value="save" id="settings-save">Save</button>
</menu>
</form>
</dialog>
<dialog id="note-dialog">
<form method="dialog" id="note-form">
<h3 id="note-title">Add note</h3>
@@ -132,6 +175,9 @@
<button type="button" id="note-time-now" class="ghost">Now</button>
</div>
</label>
<label id="note-weight-field" hidden>Weight (kg)
<input type="number" id="note-weight" inputmode="decimal" step="0.01" min="0" placeholder="e.g. 5.2" />
</label>
<label>Note
<textarea id="note-input" rows="4" placeholder="e.g. pee was instant, poo took 5min, ate 300g raw food"></textarea>
</label>
@@ -157,6 +203,9 @@
<input type="time" id="edit-time" lang="en-GB" />
</div>
</label>
<label id="edit-weight-field" hidden>Weight (kg)
<input type="number" id="edit-weight" inputmode="decimal" step="0.01" min="0" />
</label>
<label>Note
<textarea id="edit-note" rows="4"></textarea>
</label>