midocafe/cloudy-metropolis-mirage

1document.addEventListener('DOMContentLoaded', () => {2    // Initialize Vanta.js cloud effect3    let vantaEffect = VANTA.NET({4        el: "#cityscape-cloud",5        mouseControls: true,6        touchControls: true,7        gyroControls: false,8        minHeight: 200.00,9        minWidth: 200.00,10        scale: 1.00,11        scaleMobile: 1.00,12        color: 0x3a86ff,13        backgroundColor: 0x0,14        points: 12.00,15        maxDistance: 22.00,16        spacing: 18.00,17        showDots: false18    });19    // Fetch real Hong Kong cityscape images from Unsplash API20    const fetchHKImages = async () => {21        try {22            const response = await fetch('https://api.unsplash.com/search/photos?query=hong+kong+cityscape&orientation=landscape&per_page=5&client_id=YOUR_UNSPLASH_ACCESS_KEY');23            const data = await response.json();24            return data.results.map(img => img.urls.regular);25        } catch (error) {26            console.error('Error fetching images:', error);27            // Fallback to some Hong Kong cityscape images28            return [29                'https://images.unsplash.com/photo-1508057198894-6b16b1f0cd4f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&q=80',30                'https://images.unsplash.com/photo-1528181304800-259b08848526?ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&q=80',31                'https://images.unsplash.com/photo-1508804185872-d7badad00f7d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&q=80',32                'https://images.unsplash.com/photo-1503177119275-0aa32b3a9368?ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&q=80',33                'https://images.unsplash.com/photo-1536599424071-0b215a388ba7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1024&q=80'34            ];35        }36    };37 38    // Initialize with real Hong Kong city images39    const cityImages = await fetchHKImages();40    // Transform button functionality41    document.getElementById('toggle-effect').addEventListener('click', async () => {42        // Get a random HK city image and update background43        const newImages = await fetchHKImages();44        const randomImage = newImages[Math.floor(Math.random() * newImages.length)];45        46        document.body.style.backgroundImage = `url(${randomImage})`;47        document.body.style.backgroundSize = 'cover';48        document.body.style.backgroundPosition = 'center';49        50        // Randomize Vanta.js parameters for a new effect51        vantaEffect.setOptions({52            color: Math.random() * 0xffffff,53            points: Math.floor(Math.random() * 15) + 5,54            maxDistance: Math.random() * 30 + 10,55            spacing: Math.random() * 20 + 1056        });57    });58// Handle window resize59    window.addEventListener('resize', () => {60        vantaEffect.resize();61    });62 63    // Clean up on page unload64    window.addEventListener('beforeunload', () => {65        if (vantaEffect) vantaEffect.destroy();66    });67});