diff options
author | elioat <elioat@tilde.institute> | 2025-03-16 10:47:43 -0400 |
---|---|---|
committer | elioat <elioat@tilde.institute> | 2025-03-16 10:47:43 -0400 |
commit | 3f8525f54f3e02e7cf6abaeec73f84d2db4dd108 (patch) | |
tree | 37d94375f8a94f7e3d094a00c47d0879ca01bf77 | |
parent | 50c456d4d39c8be4b8a63c845ba8ac2462a0f5e9 (diff) | |
download | tour-3f8525f54f3e02e7cf6abaeec73f84d2db4dd108.tar.gz |
*
-rw-r--r-- | html/immoral/bookmarklet.js | 25 | ||||
-rw-r--r-- | html/immoral/index.html | 19 |
2 files changed, 20 insertions, 24 deletions
diff --git a/html/immoral/bookmarklet.js b/html/immoral/bookmarklet.js index 613bbf1..7f61ec4 100644 --- a/html/immoral/bookmarklet.js +++ b/html/immoral/bookmarklet.js @@ -1,12 +1,11 @@ (function() { - // Prevent multiple instances + // Prevent multiple instances from running at once if (window.immoralFontVacuum) { alert('Web Font Vacuum is already running!'); return; } window.immoralFontVacuum = true; - // Create a logging collector const logCollector = { logs: [], group: function(label) { @@ -40,7 +39,6 @@ ${this.logs.join('\n')}`; } }; - // Create an isolated container for our styles const styleRoot = document.createElement('div'); styleRoot.className = 'fv-root'; styleRoot.style.all = 'initial'; // Reset all styles @@ -181,12 +179,10 @@ ${this.logs.join('\n')}`; styleRoot.appendChild(style); document.body.appendChild(styleRoot); - // Create UI container const container = document.createElement('div'); container.className = 'fv-container'; styleRoot.appendChild(container); - // Make the container draggable let isDragging = false; let currentX; let currentY; @@ -195,7 +191,6 @@ ${this.logs.join('\n')}`; let xOffset = 0; let yOffset = 0; - // Create header with drag handle const header = document.createElement('header'); header.className = 'fv-header'; header.innerHTML = ` @@ -203,7 +198,6 @@ ${this.logs.join('\n')}`; <button class="fv-close">×</button> `; - // Add drag functionality header.addEventListener('mousedown', dragStart); document.addEventListener('mousemove', drag); document.addEventListener('mouseup', dragEnd); @@ -231,17 +225,14 @@ ${this.logs.join('\n')}`; isDragging = false; } - // Add close button functionality header.querySelector('.fv-close').addEventListener('click', () => { document.body.removeChild(styleRoot); window.immoralFontVacuum = false; }); - // Create content area const content = document.createElement('div'); content.className = 'fv-content'; - // Helper to extract font URLs from CSS text function extractFontUrls(cssText, baseUrl) { const fontUrls = []; const fontFaceRegex = /@font-face\s*{[^}]*}/g; @@ -250,19 +241,19 @@ ${this.logs.join('\n')}`; function resolveUrl(url, base) { try { - // Handle protocol-relative URLs + // Protocol-relative URLs if (url.startsWith('//')) { return `${location.protocol}${url}`; } - // Handle absolute URLs + // Absolute URLs if (url.match(/^https?:\/\//)) { return url; } - // Handle root-relative URLs + // Root-relative URLs if (url.startsWith('/')) { return `${location.origin}${url}`; } - // Handle relative URLs - use stylesheet URL as base if available + // Relative URLs - use stylesheet URL as base if available return new URL(url, base || location.href).href; } catch (e) { console.warn('Failed to resolve URL:', url, e); @@ -300,7 +291,6 @@ ${this.logs.join('\n')}`; return fontUrls; } - // Function to find all fonts on the page function findFonts() { const fonts = new Map(); logCollector.group('Font Vacuum: Scanning Stylesheets'); @@ -366,7 +356,6 @@ ${this.logs.join('\n')}`; try { logCollector.group(`Font Vacuum: Downloading ${filename} from ${url}`); - // Try to get the font from an already loaded stylesheet first logCollector.log('Searching for existing font-face rule...'); const existingFontRule = Array.from(document.styleSheets) .flatMap(sheet => { @@ -502,19 +491,16 @@ ${this.logs.join('\n')}`; const fontItem = document.createElement('div'); fontItem.className = 'fv-font-item'; - // Font family name const fontName = document.createElement('h3'); fontName.style.margin = '0 0 1rem 0'; fontName.textContent = fontData.family; fontItem.appendChild(fontName); - // Preview section const preview = document.createElement('div'); preview.className = 'fv-preview'; preview.innerHTML = '0123456789<br><br>Society for me my misery<br>Since Gift of Thee --<br><br>The quick brown fox jumps over the lazy dog!?'; fontItem.appendChild(preview); - // Download buttons for unique files const uniqueDownloads = new Map(); fontData.variants.forEach(variant => { if (!uniqueDownloads.has(variant.url)) { @@ -554,7 +540,6 @@ ${this.logs.join('\n')}`; }); } - // Create footer with debug button const footer = document.createElement('div'); footer.className = 'fv-footer'; diff --git a/html/immoral/index.html b/html/immoral/index.html index 4bece93..9792444 100644 --- a/html/immoral/index.html +++ b/html/immoral/index.html @@ -50,6 +50,17 @@ background: var(--beige); } + @media (max-width: 600px) { + .input-group { + flex-direction: column; + gap: 0.75rem; + } + + .input-group button { + width: 100%; + } + } + .sr-only { position: absolute; width: 1px; @@ -160,10 +171,12 @@ <button id="analyzeBtn" type="submit" - aria-label="Analyze website for fonts" - >Analyze Fonts</button> + aria-label="Find all web fonts on the website" + >Find Fonts</button> </form> </section> + <section id="error" class="error" role="alert" aria-live="polite"></section> + <section id="results" role="region" aria-label="Font analysis results"></section> <section class="bookmarklet-section" style="margin: 2rem 0; padding: 1rem; border: 2px dashed var(--dark); background: var(--beige);"> <h2>Web Font Vacuum Bookmarklet</h2> <p>Drag this link to your bookmarks bar to vacuum web fonts from any webpage:</p> @@ -183,8 +196,6 @@ Use the bookmarklet on any webpage to find and download its fonts directly. </p> </section> - <section id="error" class="error" role="alert" aria-live="polite"></section> - <section id="results" role="region" aria-label="Font analysis results"></section> </main> <footer> <br> |