diff options
| author | elioat <elioat@tilde.institute> | 2025-03-15 21:32:47 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2025-03-15 21:32:47 -0400 |
| commit | 08bc2eccd539f1bd30d9807e76de79fd30b389c0 (patch) | |
| tree | 5889390264a295673cb8f9a79ac0ab4949969f18 /html/immoral/index.html | |
| parent | 048d5be07a287e7ea0650264eb28908e15993dda (diff) | |
| download | tour-08bc2eccd539f1bd30d9807e76de79fd30b389c0.tar.gz | |
*
Diffstat (limited to 'html/immoral/index.html')
| -rw-r--r-- | html/immoral/index.html | 167 |
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> |