Add runtime filter, kid-friendly toggle, surprise me, and re-roll
- Runtime quick-select buttons (Any/90m/2h/2.5h) filter movies by length - Kid-friendly toggle forces PG-13 max and boosts Family/Animation genres - Surprise Me picks a random mood prompt from 20 curated options - Show Me More re-rolls same mood excluding already-shown movies - Re-roll appends new results to the existing search history entry Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
+31
-3
@@ -65,9 +65,32 @@
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
@@ -83,6 +106,11 @@
|
||||
<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 text-center">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
|
||||
Reference in New Issue
Block a user