kbondelie
a0c90e8280
The Find Movies button was overlapping the input field on mobile, cutting off the placeholder text. Now stacks vertically on mobile and keeps the inline layout on sm+ screens. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
157 lines
8.4 KiB
HTML
157 lines
8.4 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="flex flex-col sm:flex-row gap-2 sm:gap-0 sm: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 sm:pr-32">
|
|
<button id="find-btn"
|
|
class="w-full sm:w-auto sm:absolute sm:right-2 sm:top-1/2 sm:-translate-y-1/2 px-5 py-3 sm:py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-semibold transition-colors text-sm">
|
|
Find Movies
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Filters Row -->
|
|
<div class="flex flex-wrap items-center gap-3 mt-3">
|
|
<!-- Runtime Filter -->
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="text-xs text-gray-500">Max:</span>
|
|
<button data-runtime="" class="runtime-btn active text-xs px-2.5 py-1 rounded-full border border-gray-700 text-gray-400 transition-colors">Any</button>
|
|
<button data-runtime="90" class="runtime-btn text-xs px-2.5 py-1 rounded-full border border-gray-700 text-gray-400 transition-colors">90m</button>
|
|
<button data-runtime="120" class="runtime-btn text-xs px-2.5 py-1 rounded-full border border-gray-700 text-gray-400 transition-colors">2h</button>
|
|
<button data-runtime="150" class="runtime-btn text-xs px-2.5 py-1 rounded-full border border-gray-700 text-gray-400 transition-colors">2.5h</button>
|
|
</div>
|
|
|
|
<div class="w-px h-5 bg-gray-700"></div>
|
|
|
|
<!-- Kid-Friendly Toggle -->
|
|
<button id="kid-friendly-btn" class="flex items-center gap-1.5 text-xs px-3 py-1 rounded-full border border-gray-700 text-gray-400 transition-colors">
|
|
<span>Kid-Friendly</span>
|
|
</button>
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<!-- Surprise Me -->
|
|
<button id="surprise-btn" class="text-xs px-3 py-1 rounded-full border border-indigo-600/50 text-indigo-400 hover:bg-indigo-600/20 transition-colors">
|
|
Surprise Me
|
|
</button>
|
|
<button id="reset-btn" class="text-xs px-3 py-1 rounded-full border border-gray-700 text-gray-500 hover:text-gray-300 hover:border-gray-500 transition-colors">
|
|
Reset
|
|
</button>
|
|
</div>
|
|
</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 class="mt-4 flex items-center justify-center gap-3">
|
|
<button id="reroll-btn" class="px-6 py-2 border border-indigo-600/50 text-indigo-400 hover:bg-indigo-600/20 rounded-lg font-semibold transition-colors text-sm">
|
|
Show Me More
|
|
</button>
|
|
<button id="share-btn" class="px-4 py-2 border border-gray-700 text-gray-500 hover:text-gray-300 hover:border-gray-500 rounded-lg transition-colors text-sm">
|
|
Copy Link
|
|
</button>
|
|
</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>
|