image-debug.js

/**
 * Debug and Diagnostic Script for Image Loading Issues
 * Vietnamese Bird's Nest Landing Page
 */

document.addEventListener('DOMContentLoaded', function() {
    console.log('🔍 Starting image diagnostic...');
    
    // Check device information
    logDeviceInfo();
    
    // Monitor all images
    monitorImages();
    
    // Check for common issues
    checkCommonIssues();
    
    // Set up real-time monitoring
    setupRealTimeMonitoring();
});

function logDeviceInfo() {
    console.log('📱 Device Information:');
    console.log('User Agent:', navigator.userAgent);
    console.log('Screen Size:', window.screen.width + 'x' + window.screen.height);
    console.log('Viewport Size:', window.innerWidth + 'x' + window.innerHeight);
    console.log('Device Pixel Ratio:', window.devicePixelRatio);
    console.log('Connection:', navigator.connection ? navigator.connection.effectiveType : 'Unknown');
    
    // Check if iPhone SE
    const isIPhoneSE = window.innerWidth === 375 && window.innerHeight === 667;
    console.log('Is iPhone SE:', isIPhoneSE);
    
    if (isIPhoneSE) {
        console.log('🎯 iPhone SE detected - applying specific fixes...');
        applyIPhoneSEFixes();
    }
}

function monitorImages() {
    const images = document.querySelectorAll('img');
    console.log(`🖼️ Found ${images.length} images to monitor`);
    
    images.forEach((img, index) => {
        console.log(`Image ${index + 1}:`, {
            src: img.src,
            alt: img.alt,
            className: img.className,
            loaded: img.complete,
            naturalWidth: img.naturalWidth,
            naturalHeight: img.naturalHeight,
            width: img.width,
            height: img.height,
            style: {
                display: getComputedStyle(img).display,
                visibility: getComputedStyle(img).visibility,
                opacity: getComputedStyle(img).opacity,
                zIndex: getComputedStyle(img).zIndex,
                position: getComputedStyle(img).position,
                transform: getComputedStyle(img).transform
            }
        });
        
        // Monitor load events
        img.addEventListener('load', function() {
            console.log(`✅ Image ${index + 1} loaded successfully:`, this.src);
        });
        
        img.addEventListener('error', function() {
            console.error(`❌ Image ${index + 1} failed to load:`, this.src);
            console.log('Attempting to fix...');
            fixBrokenImage(this, index + 1);
        });
    });
}

function checkCommonIssues() {
    console.log('🔍 Checking for common issues...');
    
    // Check for product images
    const productImages = document.querySelectorAll('.product-image');
    console.log(`Found ${productImages.length} product images`);
    
    productImages.forEach((img, index) => {
        const rect = img.getBoundingClientRect();
        const isVisible = rect.width > 0 && rect.height > 0 && 
                         getComputedStyle(img).visibility !== 'hidden' &&
                         getComputedStyle(img).display !== 'none' &&
                         getComputedStyle(img).opacity !== '0';
        
        console.log(`Product Image ${index + 1}:`, {
            visible: isVisible,
            boundingRect: rect,
            computedStyle: {
                display: getComputedStyle(img).display,
                visibility: getComputedStyle(img).visibility,
                opacity: getComputedStyle(img).opacity,
                transform: getComputedStyle(img).transform,
                zIndex: getComputedStyle(img).zIndex
            }
        });
        
        if (!isVisible) {
            console.warn(`⚠️ Product Image ${index + 1} is not visible! Attempting to fix...`);
            forceImageVisibility(img, index + 1);
        }
    });
    
    // Check hero visual container
    const heroVisual = document.querySelector('.hero-visual');
    if (heroVisual) {
        const rect = heroVisual.getBoundingClientRect();
        console.log('Hero Visual Container:', {
            boundingRect: rect,
            computedStyle: {
                display: getComputedStyle(heroVisual).display,
                visibility: getComputedStyle(heroVisual).visibility,
                opacity: getComputedStyle(heroVisual).opacity,
                overflow: getComputedStyle(heroVisual).overflow,
                zIndex: getComputedStyle(heroVisual).zIndex
            }
        });
    }
}

function forceImageVisibility(img, index) {
    console.log(`🔧 Forcing visibility for image ${index}...`);
    
    // Apply aggressive visibility fixes
    img.style.cssText += `
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 99999 !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 auto !important;
        clip: auto !important;
        clip-path: none !important;
        mask: none !important;
        -webkit-mask: none !important;
        filter: none !important;
        animation: none !important;
        transition: opacity 0.3s ease !important;
    `;
    
    // Ensure parent containers don't interfere
    let parent = img.parentElement;
    while (parent && parent !== document.body) {
        parent.style.cssText += `
            overflow: visible !important;
            position: relative !important;
            z-index: auto !important;
            transform: none !important;
            clip: auto !important;
            clip-path: none !important;
            mask: none !important;
            -webkit-mask: none !important;
        `;
        parent = parent.parentElement;
    }
    
    setTimeout(() => {
        const rect = img.getBoundingClientRect();
        const isNowVisible = rect.width > 0 && rect.height > 0;
        console.log(`📊 Image ${index} visibility fix result:`, isNowVisible ? '✅ Success' : '❌ Still hidden');
    }, 100);
}

function applyIPhoneSEFixes() {
    console.log('🎯 Applying iPhone SE specific fixes...');
    
    // Add iPhone SE class to body
    document.body.classList.add('iphone-se-device');
    
    // Force all critical images to be visible
    const criticalSelectors = [
        '.product-image',
        '.hero-visual img',
        '.about-image img',
        '.image-placeholder'
    ];
    
    criticalSelectors.forEach(selector => {
        const elements = document.querySelectorAll(selector);
        elements.forEach((el, index) => {
            console.log(`Applying iPhone SE fix to ${selector} ${index + 1}`);
            forceImageVisibility(el, index + 1);
        });
    });
    
    // Apply container fixes
    const heroContent = document.querySelector('.hero-content');
    if (heroContent) {
        heroContent.style.cssText += `
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 2rem !important;
            align-items: center !important;
            justify-items: center !important;
            overflow: visible !important;
        `;
    }
}

function fixBrokenImage(img, index) {
    console.log(`🔧 Attempting to fix broken image ${index}...`);
    
    // Try reloading the image
    const originalSrc = img.src;
    img.src = '';
    
    setTimeout(() => {
        img.src = originalSrc;
        console.log(`🔄 Reloaded image ${index}`);
    }, 1000);
    
    // Create fallback if still fails
    setTimeout(() => {
        if (!img.complete || img.naturalWidth === 0) {
            console.log(`📝 Creating fallback for image ${index}`);
            const fallback = document.createElement('div');
            fallback.innerHTML = `
                <div style="
                    width: 280px;
                    height: 280px;
                    background: linear-gradient(135deg, #f8f6f3 0%, #e8e6e3 100%);
                    border: 2px dashed #c89678;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #c89678;
                    font-family: Arial, sans-serif;
                    font-size: 16px;
                    text-align: center;
                    border-radius: 12px;
                    margin: 0 auto;
                ">
                    🖼️<br>Product Image<br>Loading...
                </div>
            `;
            
            img.parentNode.insertBefore(fallback, img);
            img.style.display = 'none';
        }
    }, 3000);
}

function setupRealTimeMonitoring() {
    // Monitor viewport changes
    window.addEventListener('resize', function() {
        console.log('📏 Viewport changed:', window.innerWidth + 'x' + window.innerHeight);
        setTimeout(() => {
            checkCommonIssues();
        }, 500);
    });
    
    // Monitor orientation changes
    window.addEventListener('orientationchange', function() {
        console.log('🔄 Orientation changed');
        setTimeout(() => {
            logDeviceInfo();
            checkCommonIssues();
        }, 500);
    });
    
    // Periodic health check
    setInterval(() => {
        const productImages = document.querySelectorAll('.product-image');
        let visibleCount = 0;
        
        productImages.forEach(img => {
            const rect = img.getBoundingClientRect();
            if (rect.width > 0 && rect.height > 0 && 
                getComputedStyle(img).visibility !== 'hidden' &&
                getComputedStyle(img).opacity !== '0') {
                visibleCount++;
            }
        });
        
        if (productImages.length > 0 && visibleCount === 0) {
            console.warn('⚠️ No product images are visible! Running emergency fix...');
            productImages.forEach((img, index) => {
                forceImageVisibility(img, index + 1);
            });
        }
    }, 5000);
}

// Emergency fix function that can be called manually
window.emergencyImageFix = function() {
    console.log('🚨 Running emergency image fix...');
    const allImages = document.querySelectorAll('img');
    allImages.forEach((img, index) => {
        forceImageVisibility(img, index + 1);
    });
};

// Export functions for console access
window.imageDebug = {
    logDeviceInfo,
    monitorImages,
    checkCommonIssues,
    forceImageVisibility,
    applyIPhoneSEFixes
};