INIT

index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Image Library</title>
+  <meta name="description" content="Browse and search the image library. Click an image to copy its URL." />
+  <link rel="stylesheet" href="assets/styles.css" />
+</head>
+<body>
+  <header class="site-header">
+    <div class="wrap">
+      <h1 class="site-title">Image Library</h1>
+      <p class="site-sub">Click any image to copy its URL to your clipboard.</p>
+
+      <div class="search-bar">
+        <svg class="search-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M10 2a8 8 0 1 0 4.9 14.32l5.39 5.39 1.42-1.42-5.39-5.39A8 8 0 0 0 10 2Zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z"/>
+        </svg>
+        <input
+          id="search"
+          type="search"
+          class="search-input"
+          placeholder="Search image names…"
+          autocomplete="off"
+          spellcheck="false"
+          aria-label="Search image names"
+        />
+        <button id="clear" class="search-clear" type="button" aria-label="Clear search" hidden>&times;</button>
+      </div>
+
+      <div class="meta">
+        <span id="count" class="count" aria-live="polite"></span>
+        <span id="manifest-info" class="manifest-info"></span>
+      </div>
+    </div>
+  </header>
+
+  <main class="wrap">
+    <div id="grid" class="grid"></div>
+
+    <div id="empty" class="empty" hidden>
+      <p class="empty-title">No images found</p>
+      <p class="empty-hint" id="empty-hint"></p>
+    </div>
+
+    <div id="loading" class="loading">Loading…</div>
+  </main>
+
+  <div id="toast" class="toast" role="status" aria-live="polite" hidden></div>
+
+  <script src="assets/app.js"></script>
+</body>
+</html>