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:
2026-03-14 20:07:05 -07:00
parent d8c8b473ad
commit 9f96a91986
6 changed files with 194 additions and 18 deletions
+31 -3
View File
@@ -65,9 +65,32 @@
Find Movies
</button>
</div>
<p class="text-gray-600 text-sm mt-2">
Try: "pizza night with the kids" &middot; "something scary" &middot; "light fun movie after a hard week" &middot; "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 -->