1 files changed, 167 insertions, 0 deletions
diff --git a/html/immoral/index.html b/html/immoral/index.html
new file mode 100644
index 0000000..b6eee24
--- /dev/null
+++ b/html/immoral/index.html
@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>An Immoral Web Font Vacuum</title>
+    <meta name="description" content="Enter a URL to find, preview, and download web fonts (WOFF/TTF/WOFF2/OTF) present on the page.">
+    <style>
+        :root {
+            --beige: #f5f2e9;
+            --dark: #111111;
+            --accent: #ff4d00;
+            --grid-line: #ccbea7;
+            --container-bg: #ffffff;
+            --focus-outline: #2563eb;
+        }
+        
+        body {
+            font-family: 'Courier New', monospace;
+            max-width: 900px;
+            margin: 0 auto;
+            padding: 1rem;
+            line-height: 1.5;
+            background: var(--beige);
+            color: var(--dark);
+        }
+        
+        h1, h2 {
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            border-bottom: 3px solid var(--accent);
+            padding-bottom: 0.5rem;
+            font-weight: 900;
+        }
+        
+        .container {
+            background: var(--container-bg);
+            padding: 2rem;
+            border: 3px solid var(--dark);
+            box-shadow: 8px 8px 0 var(--dark);
+            margin-top: 2rem;
+        }
+        
+        .input-group {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 2rem;
+            border: 2px solid var(--dark);
+            padding: 1rem;
+            background: var(--beige);
+        }
+        
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+        
+        input[type="url"] {
+            flex: 1;
+            padding: 0.75rem;
+            font-size: 1rem;
+            border: 2px solid var(--dark);
+            background: var(--beige);
+            font-family: 'Courier New', monospace;
+        }
+        
+        input[type="url"]:focus {
+            outline: 3px solid var(--focus-outline);
+            outline-offset: 2px;
+        }
+        
+        button {
+            padding: 0.75rem 1.5rem;
+            font-size: 1rem;
+            background: var(--dark);
+            color: var(--beige);
+            border: 2px solid var(--dark);
+            cursor: pointer;
+            text-transform: uppercase;
+            font-weight: bold;
+            font-family: 'Courier New', monospace;
+            transition: all 0.2s;
+        }
+        
+        button:hover,
+        button:focus-visible {
+            background: var(--accent);
+            transform: translateY(-2px);
+            outline: 3px solid var(--focus-outline);
+            outline-offset: 2px;
+        }
+        
+        button:focus:not(:focus-visible) {
+            outline: none;
+        }
+        
+        .error {
+            color: var(--accent);
+            padding: 1rem;
+            background: rgba(255, 77, 0, 0.1);
+            border: 2px solid var(--accent);
+            margin-top: 1rem;
+            display: none;
+            font-weight: bold;
+            role: "alert";
+        }
+        
+        #results {
+            margin-top: 1rem;
+        }
+
+        /* Skip link for keyboard users */
+        .skip-link {
+            position: absolute;
+            top: -40px;
+            left: 0;
+            background: var(--dark);
+            color: var(--beige);
+            padding: 8px;
+            z-index: 100;
+            transition: top 0.2s;
+        }
+
+        .skip-link:focus {
+            top: 0;
+            outline: 3px solid var(--focus-outline);
+        }
+    </style>
+</head>
+<body>
+    <a href="#main-content" class="skip-link">Skip to main content</a>
+    <div class="container" id="main-content">
+        <h1>Immoral 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="error" class="error" role="alert" aria-live="polite"></div>
+        <div id="results" role="region" aria-label="Font analysis results"></div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>