again

src/pages/custom.astro

@@ -0,0 +1,44 @@
+---
+import Layout from '../layouts/Layout.astro';
+import SlugInput from '../components/SlugInput.astro';
+
+const title = "ComicK - Custom RSS Feed";
+const description = "Create a custom RSS feed for your favorite comics";
+---
+
+<Layout title={title} description={description}>
+  <div class="container mx-auto px-4 py-8">
+    <!-- Add back button -->
+    <a 
+      href="/en/sfw/all" 
+      class="inline-flex items-center gap-2 mb-6 px-4 py-2 bg-secondary hover:bg-hover rounded-md transition-colors font-medium"
+    >
+      <svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        class="w-5 h-5" 
+        viewBox="0 0 24 24" 
+        fill="none" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      >
+        <path d="M19 12H5M12 19l-7-7 7-7"/>
+      </svg>
+      Back to Comics
+    </a>
+
+    <main class="mx-auto px-3 sm:px-4 lg:px-8 max-w-[800px] py-4 sm:py-8">
+      <h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-center mb-4 sm:mb-8">Custom RSS Feed</h1>
+      
+      <div class="bg-secondary/50 p-3 sm:p-6 rounded-lg shadow-lg">
+        <SlugInput />
+      </div>
+
+      <div class="mt-4 sm:mt-8 text-center text-primary/60 text-sm sm:text-base">
+        <p>Search for your favorite comics using the search box above, or add their slugs manually.</p>
+        <p class="mt-2">Manual example: For <a href="https://comick.io/comic/01-one-piece" class="text-accent hover:underline">https://comick.io/comic/01-one-piece</a>, the slug is "01-one-piece"</p>
+      </div>
+    </main>
+  </div>
+</Layout>