ldbetteridge/self-hoested-media-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Luke Betteridge
2026-07-17 10:00:37 +01:00
commit 2840936b97
5 changed files with 2143 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
index.html Normal file
View File

@@ -0,0 +1,135 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Media Tracker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="app-shell">
<header class="topbar">
<div>
<p class="eyebrow">Self-hosted collection</p>
<h1>Media Tracker</h1>
</div>
<div class="topbar-actions">
<button class="button subtle" id="exportButton" type="button">Export</button>
<label class="button subtle file-button" for="importInput">Import</label>
<input id="importInput" type="file" accept="application/json">
</div>
</header>
<main class="workspace" aria-live="polite">
<section class="search-panel" aria-labelledby="searchHeading">
<div class="section-heading">
<div>
<p class="eyebrow">Discover</p>
<h2 id="searchHeading">Search media</h2>
</div>
</div>
<div class="type-tabs" role="tablist" aria-label="Media type">
<button class="type-tab active" type="button" data-type="movie">Movies</button>
<button class="type-tab" type="button" data-type="tv">TV Shows</button>
<button class="type-tab" type="button" data-type="book">Books</button>
<button class="type-tab" type="button" data-type="game">Games</button>
</div>
<form class="search-form" id="searchForm">
<label for="searchInput">Search</label>
<div class="search-row">
<input id="searchInput" name="query" type="search" autocomplete="off" placeholder="Blade Runner, Silo, Dune, Hades">
<button class="button primary" type="submit">Search</button>
</div>
</form>
<div class="manual-add">
<button class="text-button" id="toggleManualButton" type="button" aria-expanded="false">Add manually</button>
<form class="manual-form hidden" id="manualForm">
<div class="field-grid">
<label>
Title
<input id="manualTitle" type="text" required>
</label>
<label>
Year
<input id="manualYear" type="text" inputmode="numeric" maxlength="4">
</label>
<label>
Creator
<input id="manualCreator" type="text" placeholder="Director, author, studio">
</label>
<label>
Cover URL
<input id="manualCover" type="url" placeholder="https://">
</label>
</div>
<label>
Notes
<textarea id="manualNotes" rows="3"></textarea>
</label>
<div class="manual-actions">
<button class="button primary" type="submit">Add item</button>
</div>
</form>
</div>
<div class="search-feedback" id="searchFeedback">Ready</div>
<div class="result-grid" id="results"></div>
</section>
<section class="tracker-panel" aria-labelledby="trackerHeading">
<div class="section-heading">
<div>
<p class="eyebrow">Collection</p>
<h2 id="trackerHeading">Tracker</h2>
</div>
<div class="summary-strip" id="summary"></div>
</div>
<div class="filters">
<label>
Type
<select id="typeFilter">
<option value="all">All media</option>
<option value="movie">Movies</option>
<option value="tv">TV Shows</option>
<option value="book">Books</option>
<option value="game">Games</option>
</select>
</label>
<label>
Progress
<select id="progressFilter">
<option value="all">All progress</option>
<option value="planned">No dates</option>
<option value="active">In progress</option>
<option value="complete">Finished</option>
</select>
</label>
<label>
Find
<input id="collectionSearch" type="search" placeholder="Filter collection">
</label>
<label>
Sort
<select id="sortSelect">
<option value="recent">Recently added</option>
<option value="updated">Recently updated</option>
<option value="finished">Recently finished</option>
<option value="started">Recently started</option>
<option value="title">Title</option>
</select>
</label>
</div>
<div class="collection-list" id="collection"></div>
</section>
</main>
</div>
<div class="toast hidden" id="toast" role="status"></div>
<script src="app.js" defer></script>
</body>
</html>