78 lines
3.7 KiB
HTML
78 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>WhatToWatch — Watchlist</title>
|
|
|
|
<script>
|
|
window.tailwind = {
|
|
config: {
|
|
darkMode: 'class',
|
|
theme: { extend: {} }
|
|
}
|
|
}
|
|
</script>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
|
|
<div class="max-w-3xl mx-auto p-6">
|
|
<header class="flex items-center justify-between mb-6">
|
|
<h1 class="text-2xl font-semibold">WhatToWatch</h1>
|
|
<div class="flex items-center gap-3">
|
|
<label class="flex items-center gap-2 text-sm">
|
|
<input id="darkToggle" type="checkbox" class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700" />
|
|
Dark mode
|
|
</label>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="mb-6 bg-white dark:bg-gray-800 shadow rounded-lg p-4">
|
|
<h2 class="text-lg font-medium mb-3">Add to Watchlist</h2>
|
|
<form id="addForm" class="space-y-3">
|
|
<input id="title" class="w-full rounded border px-3 py-2 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700" placeholder="Title (movie or series)" required />
|
|
<select id="type" class="w-full rounded border px-3 py-2 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700">
|
|
<option value="movie">Movie</option>
|
|
<option value="series">Series</option>
|
|
</select>
|
|
<textarea id="notes" class="w-full rounded border px-3 py-2 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700" placeholder="Notes (optional)"></textarea>
|
|
<input id="poster" class="w-full rounded border px-3 py-2 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700" placeholder="Poster image URL (optional)" />
|
|
<div>
|
|
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Add</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="bg-white dark:bg-gray-800 shadow rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h2 class="text-lg font-medium">Your Watchlist</h2>
|
|
<div class="flex items-center gap-2">
|
|
<button id="refresh" class="px-3 py-1 rounded border border-gray-200 dark:border-gray-700">Refresh</button>
|
|
<button id="suggest" class="px-3 py-1 rounded bg-amber-400 hover:bg-amber-500 text-black">Suggest</button>
|
|
<label class="flex items-center gap-2 text-sm">
|
|
<input id="onlyUnwatched" type="checkbox" class="h-4 w-4 rounded" />
|
|
Only unwatched
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<input id="filter" type="search" placeholder="Filter watchlist..." class="w-full rounded border px-3 py-2 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 mb-3" autocomplete="off" />
|
|
<label class="sr-only" for="search">Search movies & series</label>
|
|
<div class="relative">
|
|
<input id="search" type="search" placeholder="Search movies or series..." class="w-full rounded border px-3 py-2 bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700" autocomplete="off" />
|
|
<div id="searchResults" class="absolute left-0 right-0 mt-1 z-20 hidden rounded bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow max-h-80 overflow-auto"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="suggestion" class="mb-4 p-3 rounded hidden bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700"></div>
|
|
|
|
<div id="list" class="space-y-3">
|
|
<!-- items rendered here -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |