diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/form.html | 1 | ||||
| -rw-r--r-- | templates/stats.html | 31 |
2 files changed, 32 insertions, 0 deletions
diff --git a/templates/form.html b/templates/form.html index 83e888e..cd29e67 100644 --- a/templates/form.html +++ b/templates/form.html @@ -38,6 +38,7 @@ <button id="tmdb-search" type="button">Search</button> </div> <div id="tmdb-results" class="tmdb-results" aria-live="polite"></div> + <div id="duplicate-notice" class="notice" hidden></div> </div> <div class="form-grid"> diff --git a/templates/stats.html b/templates/stats.html index 797054a..6e3a987 100644 --- a/templates/stats.html +++ b/templates/stats.html @@ -15,6 +15,19 @@ <section class="stats-layout"> <section class="stats-panel stats-panel-wide"> + <div class="stats-overview-row"> + <div class="stats-metric"> + <span class="eyebrow">Films watched</span> + <strong id="stats-total-films">—</strong> + </div> + <div class="stats-metric"> + <span class="eyebrow">Total runtime</span> + <strong id="stats-total-runtime">—</strong> + </div> + </div> + </section> + + <section class="stats-panel stats-panel-wide"> <div class="stats-panel-header"> <div> <p class="eyebrow">World Map</p> @@ -124,7 +137,25 @@ return String(value).padStart(3, "0"); } + function formatRuntime(minutes) { + if (!minutes) return "0h"; + const totalHours = Math.floor(minutes / 60); + if (totalHours >= 24) { + const days = Math.floor(totalHours / 24); + const hours = totalHours % 24; + return hours > 0 ? `${days}d ${hours}h` : `${days}d`; + } + const mins = minutes % 60; + return mins > 0 ? `${totalHours}h ${mins}m` : `${totalHours}h`; + } + function renderLists(data) { + const totalFilms = document.getElementById("stats-total-films"); + if (totalFilms) totalFilms.textContent = data.total_watched; + + const totalRuntime = document.getElementById("stats-total-runtime"); + if (totalRuntime) totalRuntime.textContent = formatRuntime(data.total_runtime_minutes); + const topDirectors = document.getElementById("top-directors"); topDirectors.innerHTML = data.most_watched_directors.slice(0, 8).map((item) => ` <li><span>${item.director}</span><strong>${item.count}</strong></li> |