136 lines
5.1 KiB
HTML
136 lines
5.1 KiB
HTML
<!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>
|