kbondelie
d8c8b473ad
Saves each mood search and its recommendations to SQLite per user. Recent searches appear below the results area with mood text, top movie titles, and timestamp. Click any entry to reload those results. Entries can be deleted individually. History toggleable via show/hide. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
123 lines
6.1 KiB
HTML
123 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Movie Night</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="/styles.css">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
dark: { 50: '#f8fafc', 100: '#1e293b', 200: '#1a2332', 300: '#151d2b', 400: '#111827', 500: '#0d1320' }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-dark-400 text-gray-100 min-h-screen">
|
|
<div id="app" class="max-w-4xl mx-auto px-4 py-8">
|
|
<!-- Login Screen -->
|
|
<div id="login-screen" class="hidden flex flex-col items-center justify-center min-h-[80vh]">
|
|
<h1 class="text-4xl font-bold mb-2">Movie Night</h1>
|
|
<p class="text-gray-400 mb-8">Sign in with your Jellyfin account</p>
|
|
<form id="login-form" class="w-full max-w-sm space-y-4">
|
|
<input type="text" id="login-username" placeholder="Username"
|
|
class="w-full px-4 py-3 bg-dark-200 border border-gray-700 rounded-lg focus:outline-none focus:border-indigo-500 text-gray-100">
|
|
<input type="password" id="login-password" placeholder="Password"
|
|
class="w-full px-4 py-3 bg-dark-200 border border-gray-700 rounded-lg focus:outline-none focus:border-indigo-500 text-gray-100">
|
|
<button type="submit"
|
|
class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-semibold transition-colors">
|
|
Sign In
|
|
</button>
|
|
<p id="login-error" class="text-red-400 text-sm text-center hidden"></p>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Main App Screen -->
|
|
<div id="main-screen" class="hidden">
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between mb-8">
|
|
<h1 class="text-3xl font-bold">Movie Night</h1>
|
|
<div class="flex items-center gap-3">
|
|
<span id="user-name" class="text-gray-400 text-sm"></span>
|
|
<button id="logout-btn"
|
|
class="text-sm text-gray-500 hover:text-gray-300 transition-colors">Logout</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Picker -->
|
|
<div id="user-picker" class="mb-6">
|
|
<p class="text-sm text-gray-400 mb-2">Show unwatched by:</p>
|
|
<div id="user-pills" class="flex flex-wrap gap-2"></div>
|
|
</div>
|
|
|
|
<!-- Mood Input -->
|
|
<div class="mb-8">
|
|
<div class="relative">
|
|
<input type="text" id="mood-input" placeholder="What are you in the mood for?"
|
|
class="w-full px-5 py-4 bg-dark-200 border border-gray-700 rounded-xl text-lg focus:outline-none focus:border-indigo-500 text-gray-100 pr-24">
|
|
<button id="find-btn"
|
|
class="absolute right-2 top-1/2 -translate-y-1/2 px-5 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-semibold transition-colors text-sm">
|
|
Find Movies
|
|
</button>
|
|
</div>
|
|
<p class="text-gray-600 text-sm mt-2">
|
|
Try: "pizza night with the kids" · "something scary" · "light fun movie after a hard week" · "80s action"
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loading" class="hidden">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="skeleton-card bg-dark-200 rounded-xl h-96 animate-pulse"></div>
|
|
<div class="skeleton-card bg-dark-200 rounded-xl h-96 animate-pulse delay-100"></div>
|
|
<div class="skeleton-card bg-dark-200 rounded-xl h-96 animate-pulse delay-200"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Results -->
|
|
<div id="results" class="hidden">
|
|
<div id="results-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"></div>
|
|
<div id="results-meta" class="mt-6 text-center text-gray-500 text-sm"></div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="empty-state" class="text-center py-16">
|
|
<p class="text-gray-500 text-lg">Describe what you're in the mood for and we'll find the perfect movie from your library.</p>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div id="error-state" class="hidden text-center py-16">
|
|
<p class="text-red-400 text-lg" id="error-message"></p>
|
|
<button onclick="document.getElementById('error-state').classList.add('hidden'); document.getElementById('empty-state').classList.remove('hidden');"
|
|
class="mt-4 text-sm text-gray-400 hover:text-gray-200">Try again</button>
|
|
</div>
|
|
|
|
<!-- Search History -->
|
|
<div id="history-section" class="hidden mt-12">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg font-semibold text-gray-300">Recent Searches</h2>
|
|
<button id="toggle-history-btn" class="text-sm text-indigo-400 hover:text-indigo-300 transition-colors">Hide</button>
|
|
</div>
|
|
<div id="history-list" class="space-y-3"></div>
|
|
</div>
|
|
|
|
<div id="history-toggle" class="hidden mt-8 text-center">
|
|
<button id="show-history-btn" class="text-sm text-gray-500 hover:text-gray-300 transition-colors">Show search history</button>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="mt-12 pt-6 border-t border-gray-800 flex items-center justify-between text-sm text-gray-600">
|
|
<span id="library-stats"></span>
|
|
<button id="refresh-btn" class="hover:text-gray-400 transition-colors">Refresh Library</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|