mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-06-05 22:50:17 +00:00
84 lines
3.5 KiB
HTML
84 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Photo Faceted Search</title>
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<div class="container mx-auto px-4 py-8">
|
|
<h1 class="text-3xl font-bold mb-8">Photo Faceted Search</h1>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
<!-- Facets -->
|
|
<div class="col-span-1">
|
|
<h2 class="text-xl font-semibold mb-4">Filters</h2>
|
|
|
|
<!-- Geography facet -->
|
|
<div class="mb-6">
|
|
<h3 class="font-semibold mb-2">Geography</h3>
|
|
<select name="geography" class="w-full p-2 border rounded"
|
|
hx-get="/api/facets/geography"
|
|
hx-trigger="load, change"
|
|
hx-target="#geography-options">
|
|
<option value="">Select location</option>
|
|
</select>
|
|
<div id="geography-options" class="mt-2"></div>
|
|
</div>
|
|
|
|
<!-- Lens facet -->
|
|
<div class="mb-6">
|
|
<h3 class="font-semibold mb-2">Lens</h3>
|
|
<select name="lens" class="w-full p-2 border rounded"
|
|
hx-get="/api/facets/lens"
|
|
hx-trigger="load"
|
|
hx-target="this">
|
|
<option value="">Select lens</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Camera make facet -->
|
|
<div class="mb-6">
|
|
<h3 class="font-semibold mb-2">Camera Make</h3>
|
|
<select name="camera_make" class="w-full p-2 border rounded"
|
|
hx-get="/api/facets/camera_make"
|
|
hx-trigger="load"
|
|
hx-target="this">
|
|
<option value="">Select camera make</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Aperture facet -->
|
|
<div class="mb-6">
|
|
<h3 class="font-semibold mb-2">Aperture</h3>
|
|
<select name="aperture" class="w-full p-2 border rounded"
|
|
hx-get="/api/facets/aperture"
|
|
hx-trigger="load, change"
|
|
hx-target="#aperture-options">
|
|
<option value="">Select aperture</option>
|
|
</select>
|
|
<div id="aperture-options" class="mt-2"></div>
|
|
</div>
|
|
|
|
<button class="bg-blue-500 text-white px-4 py-2 rounded"
|
|
hx-get="/api/photos"
|
|
hx-target="#photo-results"
|
|
hx-include="[name='geography'],[name='lens'],[name='camera_make'],[name='aperture']">
|
|
Apply Filters
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Photo results -->
|
|
<div class="col-span-1 md:col-span-3">
|
|
<div id="photo-results" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<!-- Photo results will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|