Refactor: Remove demo and add donation warning

index.html

@@ -11,6 +11,7 @@
             --text: #1a1a1a;
             --text-muted: #666666;
             --accent: #0070f3;
+            --warning: #eb5757;
             --code-bg: #f5f5f5;
             --border: #eaeaea;
             --radius: 8px;
@@ -46,43 +47,29 @@
         p.tagline {
             font-size: 1.25rem;
             color: var(--text-muted);
-            margin-bottom: 48px;
+            margin-bottom: 32px;
         }
 
-        .search-demo {
-            margin-bottom: 48px;
-        }
-
-        .input-group {
-            display: flex;
-            gap: 8px;
-            background: var(--code-bg);
-            padding: 8px;
+        .status-notice {
+            padding: 16px;
+            background: #fff5f5;
+            border: 1px solid #ffe0e0;
             border-radius: var(--radius);
-            border: 1px solid var(--border);
+            margin-bottom: 48px;
         }
 
-        .input-group span {
-            color: var(--text-muted);
-            padding-left: 8px;
-            display: flex;
-            align-items: center;
-            user-select: none;
-        }
-
-        input {
-            flex: 1;
-            border: none;
-            background: transparent;
-            font-family: inherit;
-            font-size: 1rem;
-            outline: none;
+        .status-notice p {
+            margin: 0;
+            font-size: 0.95rem;
             color: var(--text);
-            padding: 4px 0;
+        }
+
+        .status-notice strong {
+            color: var(--warning);
         }
 
         .usage {
-            margin-top: 48px;
+            margin-bottom: 48px;
         }
 
         h2 {
@@ -98,20 +85,12 @@
             overflow-x: auto;
             font-size: 0.9rem;
             border: 1px solid var(--border);
-            position: relative;
         }
 
         code {
             font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
         }
 
-        .copy-hint {
-            font-size: 0.8rem;
-            color: var(--text-muted);
-            margin-top: 8px;
-            text-align: right;
-        }
-
         .grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -130,6 +109,17 @@
             font-size: 1rem;
         }
 
+        .btc-address {
+            font-family: monospace;
+            background: var(--code-bg);
+            padding: 4px 8px;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            word-break: break-all;
+            display: inline-block;
+            margin-top: 8px;
+        }
+
         footer {
             width: 100%;
             max-width: 680px;
@@ -162,13 +152,12 @@
         <h1>direct-img.link</h1>
         <p class="tagline">Live images in markdown, powered by search.</p>
 
-        <section class="search-demo">
-            <h2>Try it out</h2>
-            <div class="input-group">
-                <span>direct-img.link/</span>
-                <input type="text" id="queryInput" placeholder="orange+cat" spellcheck="false">
-            </div>
-            <div class="copy-hint" id="urlPreview">![image](https://direct-img.link/orange+cat)</div>
+        <section class="status-notice">
+            <p>
+                This service is <strong>free</strong> to use. However, API and infrastructure costs are significant. 
+                Without community donations, <strong>this project will die quickly.</strong>
+            </p>
+            <div class="btc-address">BTC: bc1qkqdmhk0we49qn74ua9752ysfxzd7uxqettymhv</div>
         </section>
 
         <section class="usage">
@@ -199,14 +188,5 @@
         </div>
     </footer>
 
-    <script>
-        const input = document.getElementById('queryInput');
-        const preview = document.getElementById('urlPreview');
-
-        input.addEventListener('input', (e) => {
-            const val = e.target.value.trim().replace(/\s+/g, '+') || 'orange+cat';
-            preview.textContent = `![image](https://direct-img.link/${val})`;
-        });
-    </script>
 </body>
 </html>