*

1 files changed, 39 insertions, 20 deletions

diff --git a/html/immoral/index.html b/html/immoral/index.html
index b7c089d..c2f4b26 100644
--- a/html/immoral/index.html
+++ b/html/immoral/index.html
@@ -145,26 +145,45 @@
     <main class="container">
         <h1><span class="immoral">Immoral</span> Web Font Vacuum</h1>
         <p>Enter a URL to find, preview, and download web fonts (WOFF/TTF/WOFF2/OTF) present on the page.</p>
-        
-        <form class="input-group" role="search" aria-label="Website URL search form" onsubmit="event.preventDefault();">
-            <label for="urlInput" class="sr-only">Website URL</label>
-            <input 
-                type="url" 
-                id="urlInput" 
-                name="urlInput"
-                placeholder="Enter website URL (e.g., https://example.com)" 
-                required
-                aria-required="true"
-                aria-describedby="urlHint"
-            >
-            <span id="urlHint" class="sr-only">Enter the full website URL including https:// or http://</span>
-            <button 
-                id="analyzeBtn" 
-                type="submit"
-                aria-label="Analyze website for fonts"
-            >Analyze Fonts</button>
-        </form>
-
+        <div id="urlForm">
+            <form class="input-group" role="search" aria-label="Website URL search form" onsubmit="event.preventDefault();">
+                <label for="urlInput" class="sr-only">Website URL</label>
+                <input 
+                    type="url" 
+                    id="urlInput" 
+                    name="urlInput"
+                    placeholder="Enter website URL (e.g., https://example.com)" 
+                    required
+                    aria-required="true"
+                    aria-describedby="urlHint"
+                >
+                <span id="urlHint" class="sr-only">Enter the full website URL including https:// or http://</span>
+                <button 
+                    id="analyzeBtn" 
+                    type="submit"
+                    aria-label="Analyze website for fonts"
+                >Analyze Fonts</button>
+            </form>
+        </div>
+        <div class="bookmarklet-section" style="margin: 2rem 0; padding: 1rem; border: 2px dashed var(--dark); background: var(--beige);">
+            <h2>Font Vacuum Bookmarklet</h2>
+            <p>Drag this link to your bookmarks bar to vacuum fonts from any webpage:</p>
+            <p style="text-align: center;">
+                <a href="javascript:(function(){
+                    const script = document.createElement('script');
+                    script.src = 'https://smallandnearlysilent.com/immoral/bookmarklet.js';
+                    document.body.appendChild(script);
+                })()" 
+                class="bookmarklet-link" 
+                style="display: inline-block; padding: 0.5rem 1rem; background: var(--dark); color: var(--beige); text-decoration: none; border-radius: 4px; font-weight: bold;"
+                onclick="event.preventDefault(); alert('Drag this to your bookmarks bar!');">
+                    Font Vacuum
+                </a>
+            </p>
+            <p style="font-size: 0.9rem; color: var(--dark); margin-top: 1rem;">
+                How to: Click the bookmarklet on any webpage to find and download its fonts directly.
+            </p>
+        </div>
         <div id="error" class="error" role="alert" aria-live="polite"></div>
         <div id="results" role="region" aria-label="Font analysis results"></div>
     </main>