*

1 files changed, 148 insertions, 54 deletions

diff --git a/html/immoral/app.js b/html/immoral/app.js
index 1c3bb16..dcea768 100644
--- a/html/immoral/app.js
+++ b/html/immoral/app.js
@@ -529,7 +529,27 @@ document.addEventListener('DOMContentLoaded', () => {
         resultsDiv.innerHTML = '';
 
         // Convert urls to array if it's a Set, or use as is if already array
-        const fontsArray = Array.isArray(urls) ? urls : Array.from(urls);
+        let fontsArray = Array.isArray(urls) ? urls : Array.from(urls);
+        
+        // Group fonts by family and collect their style variations
+        const fontFamilies = new Map(); // Map<familyName, Array<fontData>>
+        fontsArray.forEach(fontData => {
+            if (!fontFamilies.has(fontData.family)) {
+                fontFamilies.set(fontData.family, {
+                    variants: [],
+                    // Keep the first CSS rule as the base rule
+                    cssRule: fontData.cssRule
+                });
+            }
+            fontFamilies.get(fontData.family).variants.push(fontData);
+        });
+
+        // Convert back to array format but with grouped variants
+        fontsArray = Array.from(fontFamilies.entries()).map(([family, data]) => ({
+            family,
+            variants: data.variants,
+            cssRule: data.cssRule
+        }));
         
         if (fontsArray.length === 0) {
             resultsDiv.innerHTML = '<p>No fonts found on this webpage.</p>';
@@ -570,15 +590,25 @@ document.addEventListener('DOMContentLoaded', () => {
             fontName.textContent = fontData.family;
             fontInfo.appendChild(fontName);
 
-            const fontType = document.createElement('div');
-            fontType.style.display = 'inline-block';
-            fontType.style.background = 'var(--dark)';
-            fontType.style.color = 'var(--beige)';
-            fontType.style.padding = '0.2rem 0.5rem';
-            fontType.style.marginTop = '0.5rem';
-            fontType.style.fontSize = '0.8rem';
-            fontType.textContent = fontData.filename.split('.').pop().toUpperCase();
-            fontInfo.appendChild(fontType);
+            // Show all available formats
+            const formatContainer = document.createElement('div');
+            formatContainer.style.display = 'flex';
+            formatContainer.style.gap = '0.5rem';
+            formatContainer.style.flexWrap = 'wrap';
+            formatContainer.style.marginTop = '0.5rem';
+            
+            const uniqueFormats = new Set(fontData.variants.map(v => v.filename.split('.').pop().toUpperCase()));
+            uniqueFormats.forEach(format => {
+                const formatBadge = document.createElement('div');
+                formatBadge.style.display = 'inline-block';
+                formatBadge.style.background = 'var(--dark)';
+                formatBadge.style.color = 'var(--beige)';
+                formatBadge.style.padding = '0.2rem 0.5rem';
+                formatBadge.style.fontSize = '0.8rem';
+                formatBadge.textContent = format;
+                formatContainer.appendChild(formatBadge);
+            });
+            fontInfo.appendChild(formatContainer);
 
             const previewContainer = document.createElement('div');
             previewContainer.style.marginTop = '1rem';
@@ -596,11 +626,46 @@ document.addEventListener('DOMContentLoaded', () => {
             previewLabel.textContent = 'Preview';
             previewContainer.appendChild(previewLabel);
 
-            const preview = document.createElement('div');
-            preview.style.marginBottom = '1rem';
-            preview.id = `preview-${fontData.filename}`;
-            preview.innerHTML = 'Society for me my misery<br>Since Gift of Thee --';
-            previewContainer.appendChild(preview);
+            // Create preview for each style variation
+            const previewText = 'Society for me my misery<br>Since Gift of Thee --';
+            const styleVariations = document.createElement('div');
+            styleVariations.style.display = 'flex';
+            styleVariations.style.flexDirection = 'column';
+            styleVariations.style.gap = '1rem';
+
+            // Add a preview for each variant
+            fontData.variants.forEach((variant, index) => {
+                const variantPreview = document.createElement('div');
+                variantPreview.style.marginBottom = '1rem';
+                variantPreview.id = `preview-${variant.filename}-${index}`;
+                variantPreview.innerHTML = previewText;
+                
+                // Extract style information from CSS rule if available
+                let styleInfo = 'Regular';
+                if (variant.cssRule) {
+                    const fontStyle = variant.cssRule.match(/font-style:\s*([^;]+)/);
+                    const fontWeight = variant.cssRule.match(/font-weight:\s*([^;]+)/);
+                    if (fontStyle || fontWeight) {
+                        styleInfo = [
+                            fontWeight?.[1] || '',
+                            fontStyle?.[1] !== 'normal' ? fontStyle?.[1] : ''
+                        ].filter(Boolean).join(' ') || 'Regular';
+                    }
+                }
+                
+                const styleLabel = document.createElement('div');
+                styleLabel.style.fontSize = '0.8rem';
+                styleLabel.style.color = 'var(--dark)';
+                styleLabel.style.marginBottom = '0.25rem';
+                styleLabel.textContent = styleInfo;
+                
+                const variantContainer = document.createElement('div');
+                variantContainer.appendChild(styleLabel);
+                variantContainer.appendChild(variantPreview);
+                styleVariations.appendChild(variantContainer);
+            });
+
+            previewContainer.appendChild(styleVariations);
 
             // Add CSS Rule section
             if (fontData.cssRule) {
@@ -625,6 +690,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 cssLabel.textContent = '@font-face';
                 cssContainer.appendChild(cssLabel);
                 
+                // Show all CSS rules for the font family
                 const cssContent = document.createElement('pre');
                 cssContent.style.margin = '0';
                 cssContent.style.fontFamily = 'monospace';
@@ -632,15 +698,18 @@ document.addEventListener('DOMContentLoaded', () => {
                 cssContent.style.whiteSpace = 'pre-wrap';
                 cssContent.style.wordBreak = 'break-all';
                 
-                // Format the CSS rule nicely
-                const formattedCss = fontData.cssRule
-                    .replace(/{/, ' {\n    ')
-                    .replace(/;/g, ';\n    ')
-                    .replace(/}/g, '\n}')
-                    .replace(/\s+}/g, '}')
-                    .trim();
+                // Combine and format all CSS rules
+                const allCssRules = fontData.variants.map(variant => {
+                    if (!variant.cssRule) return '';
+                    return variant.cssRule
+                        .replace(/{/, ' {\n    ')
+                        .replace(/;/g, ';\n    ')
+                        .replace(/}/g, '\n}')
+                        .replace(/\s+}/g, '}')
+                        .trim();
+                }).join('\n\n');
                 
-                cssContent.textContent = formattedCss;
+                cssContent.textContent = allCssRules;
                 cssContainer.appendChild(cssContent);
                 
                 fontInfo.appendChild(cssContainer);
@@ -664,12 +733,16 @@ document.addEventListener('DOMContentLoaded', () => {
             buttonContainer.style.display = 'flex';
             buttonContainer.style.gap = '0.5rem';
             buttonContainer.style.marginTop = '1rem';
-
-            const downloadBtn = document.createElement('button');
-            downloadBtn.textContent = '⬇ Download';
-            downloadBtn.style.flex = '1';
-            downloadBtn.addEventListener('click', () => downloadFont(fontData.url, fontData.filename));
-            buttonContainer.appendChild(downloadBtn);
+            buttonContainer.style.flexWrap = 'wrap';
+
+            // Create download buttons for each variant
+            fontData.variants.forEach(variant => {
+                const downloadBtn = document.createElement('button');
+                downloadBtn.textContent = `⬇ Download ${variant.filename}`;
+                downloadBtn.style.flex = '1';
+                downloadBtn.addEventListener('click', () => downloadFont(variant.url, variant.filename));
+                buttonContainer.appendChild(downloadBtn);
+            });
 
             if (!shouldAutoPreview) {
                 const previewBtn = document.createElement('button');
@@ -680,18 +753,30 @@ document.addEventListener('DOMContentLoaded', () => {
                 previewBtn.addEventListener('click', async () => {
                     if (!isPreviewVisible) {
                         previewContainer.style.display = 'block';
-                        const previewElement = document.getElementById(`preview-${fontData.filename}`);
-                        if (await previewFont(fontData.url, fontData.family)) {
-                            previewElement.style.fontFamily = fontData.family;
-                            sizeVariations.querySelectorAll('div').forEach(div => {
-                                div.style.fontFamily = fontData.family;
-                            });
-                            previewBtn.textContent = '👁 Hide Preview';
-                            isPreviewVisible = true;
-                        } else {
-                            // If preview fails, hide the container again
-                            previewContainer.style.display = 'none';
-                        }
+                        
+                        // Load all variants
+                        const loadPromises = fontData.variants.map(async (variant, index) => {
+                            const previewElement = document.getElementById(`preview-${variant.filename}-${index}`);
+                            if (await previewFont(variant.url, fontData.family)) {
+                                previewElement.style.fontFamily = fontData.family;
+                                if (variant.cssRule) {
+                                    const fontStyle = variant.cssRule.match(/font-style:\s*([^;]+)/);
+                                    const fontWeight = variant.cssRule.match(/font-weight:\s*([^;]+)/);
+                                    if (fontStyle) previewElement.style.fontStyle = fontStyle[1];
+                                    if (fontWeight) previewElement.style.fontWeight = fontWeight[1];
+                                }
+                            }
+                        });
+                        
+                        await Promise.all(loadPromises);
+                        
+                        // Apply font to size variations
+                        sizeVariations.querySelectorAll('div').forEach(div => {
+                            div.style.fontFamily = fontData.family;
+                        });
+                        
+                        previewBtn.textContent = '👁 Hide Preview';
+                        isPreviewVisible = true;
                     } else {
                         previewContainer.style.display = 'none';
                         previewBtn.textContent = '👁 Preview';
@@ -699,25 +784,34 @@ document.addEventListener('DOMContentLoaded', () => {
                     }
                 });
                 buttonContainer.appendChild(previewBtn);
+            } else {
+                // Auto-preview for all variants
+                setTimeout(async () => {
+                    const loadPromises = fontData.variants.map(async (variant, index) => {
+                        const previewElement = document.getElementById(`preview-${variant.filename}-${index}`);
+                        if (await previewFont(variant.url, fontData.family)) {
+                            previewElement.style.fontFamily = fontData.family;
+                            if (variant.cssRule) {
+                                const fontStyle = variant.cssRule.match(/font-style:\s*([^;]+)/);
+                                const fontWeight = variant.cssRule.match(/font-weight:\s*([^;]+)/);
+                                if (fontStyle) previewElement.style.fontStyle = fontStyle[1];
+                                if (fontWeight) previewElement.style.fontWeight = fontWeight[1];
+                            }
+                        }
+                    });
+                    
+                    await Promise.all(loadPromises);
+                    
+                    sizeVariations.querySelectorAll('div').forEach(div => {
+                        div.style.fontFamily = fontData.family;
+                    });
+                }, 100);
             }
 
             fontItem.appendChild(fontInfo);
             fontItem.appendChild(previewContainer);
             fontItem.appendChild(buttonContainer);
             container.appendChild(fontItem);
-
-            if (shouldAutoPreview) {
-                // Use setTimeout to ensure the DOM is ready
-                setTimeout(async () => {
-                    const previewElement = document.getElementById(`preview-${fontData.filename}`);
-                    if (await previewFont(fontData.url, fontData.family)) {
-                        previewElement.style.fontFamily = fontData.family;
-                        sizeVariations.querySelectorAll('div').forEach(div => {
-                            div.style.fontFamily = fontData.family;
-                        });
-                    }
-                }, 100);
-            }
         }
 
         resultsDiv.appendChild(container);