Add image search prototype UI

frontend/index.html

@@ -33,9 +33,16 @@
           <div class="mb-4 flex items-center justify-between">
             <div>
               <p class="text-xs uppercase tracking-[0.3em] text-zinc-500">Zone A</p>
-              <h2 class="text-2xl font-semibold text-white">AI Smart Discovery</h2>
+              <h2 id="searchModeTitle" class="text-2xl font-semibold text-white">AI Smart Discovery</h2>
             </div>
           </div>
+          <div class="mb-4 flex flex-wrap items-center gap-3">
+            <div class="inline-flex rounded-full border border-white/10 bg-black/30 p-1">
+              <button data-media-type-toggle="video" class="media-type-toggle rounded-full bg-white px-4 py-2 text-sm font-medium text-black transition">Video</button>
+              <button data-media-type-toggle="image" class="media-type-toggle rounded-full px-4 py-2 text-sm font-medium text-zinc-300 transition">Image</button>
+            </div>
+            <p id="searchModeHint" class="text-sm text-zinc-400">비디오 검색 모드입니다. 실제 검색 API와 연결되어 있습니다.</p>
+          </div>
           <div class="mb-4 flex flex-wrap gap-3">
             <button data-platform-toggle="envato" class="platform-toggle rounded-full border border-white bg-white px-4 py-2 text-sm font-medium text-black">Envato</button>
             <button data-platform-toggle="artgrid" class="platform-toggle rounded-full border border-white bg-white px-4 py-2 text-sm font-medium text-black">Artgrid</button>
@@ -43,8 +50,34 @@
           </div>
           <form id="searchForm" class="flex flex-col gap-3 md:flex-row">
             <input id="searchQuery" type="text" placeholder="한글 검색어를 입력하세요" class="flex-1 rounded-2xl border border-white/10 bg-black/40 px-5 py-4 text-base text-white outline-none ring-0 placeholder:text-zinc-500" />
-            <button class="rounded-2xl border border-white bg-white px-7 py-4 text-base font-medium text-black transition hover:bg-zinc-200">AI Search</button>
+            <button id="searchSubmitButton" class="rounded-2xl border border-white bg-white px-7 py-4 text-base font-medium text-black transition hover:bg-zinc-200">AI Search</button>
           </form>
+          <div id="imageSearchSandbox" class="mt-4 hidden rounded-3xl border border-white/10 bg-[linear-gradient(135deg,rgba(250,204,21,0.07),rgba(59,130,246,0.08))] p-4">
+            <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+              <div class="space-y-2">
+                <p class="text-xs uppercase tracking-[0.25em] text-zinc-500">Image Search Prototype</p>
+                <p class="max-w-2xl text-sm leading-6 text-zinc-300">
+                  현재는 UI 전용 테스트 모드입니다. 아래 샘플 스타일 버튼과 테스트 이미지를 사용해 향후 이미지 검색 화면 구성을 미리 볼 수 있습니다.
+                </p>
+              </div>
+              <div class="flex flex-wrap gap-2">
+                <button type="button" class="image-prompt-chip rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-200" data-image-prompt="cinematic city night">Cinematic City</button>
+                <button type="button" class="image-prompt-chip rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-200" data-image-prompt="vintage fashion portrait">Vintage Portrait</button>
+                <button type="button" class="image-prompt-chip rounded-full border border-white/10 px-3 py-2 text-xs uppercase tracking-[0.2em] text-zinc-200" data-image-prompt="minimal product mockup">Product Mockup</button>
+              </div>
+            </div>
+            <div id="imageSearchPreviewStrip" class="mt-4 grid gap-3 sm:grid-cols-3">
+              <div class="overflow-hidden rounded-2xl border border-white/10 bg-black/30">
+                <img src="https://placehold.co/1200x900/0f172a/e2e8f0?text=Test+Image+01" alt="Test image 01" class="aspect-[4/3] w-full object-cover" />
+              </div>
+              <div class="overflow-hidden rounded-2xl border border-white/10 bg-black/30">
+                <img src="https://placehold.co/1200x900/1f2937/fde68a?text=Test+Image+02" alt="Test image 02" class="aspect-[4/3] w-full object-cover" />
+              </div>
+              <div class="overflow-hidden rounded-2xl border border-white/10 bg-black/30">
+                <img src="https://placehold.co/1200x900/3f3f46/dbeafe?text=Test+Image+03" alt="Test image 03" class="aspect-[4/3] w-full object-cover" />
+              </div>
+            </div>
+          </div>
           <div id="searchWarning" class="mt-3 hidden rounded-2xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-200"></div>
           <div id="queryVariants" class="hidden"></div>
           <div id="searchResults" class="mt-6 grid gap-5 sm:grid-cols-2 xl:grid-cols-3"></div>
@@ -224,6 +257,21 @@
       </button>
     </template>
 
-    <script src="/app.js?v=20260317c" defer></script>
+    <template id="imageCardTemplate">
+      <button type="button" class="group overflow-hidden rounded-3xl border border-white/10 bg-black/30 text-left transition hover:border-white/30">
+        <div class="relative aspect-[4/3] overflow-hidden bg-zinc-900">
+          <img class="h-full w-full object-cover transition duration-500 group-hover:scale-105" alt="" />
+          <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent p-4">
+            <p class="image-card-tag text-[11px] uppercase tracking-[0.25em] text-zinc-300"></p>
+          </div>
+        </div>
+        <div class="space-y-2 p-5">
+          <h3 class="image-card-title line-clamp-2 text-base font-medium text-white"></h3>
+          <p class="image-card-caption line-clamp-3 text-sm text-zinc-300"></p>
+        </div>
+      </button>
+    </template>
+
+    <script src="/app.js?v=20260324a" defer></script>
   </body>
 </html>