Spaces:

cyvn
/

dark-dev-elegance-noir

Running

make the buttons clickable, and only have a cool animation on hover, black background, keep the thin outline

7bd5e35 verified 12 months ago

1.22 kB

document.addEventListener('DOMContentLoaded', () => {
    const audio = document.getElementById('bgAudio');
    const muteBtn = document.getElementById('muteBtn');
    let isMuted = false;
    
    // Ensure audio plays even after refresh
    audio.volume = 0.2;
    document.body.addEventListener('click', () => {
        audio.play().catch(e => console.log('Autoplay prevented:', e));
    }, { once: true });

    muteBtn.addEventListener('click', () => {
        isMuted = !isMuted;
        audio.muted = isMuted;
        muteBtn.innerHTML = isMuted ? 
            '<i data-feather="volume-x"></i>' : 
            '<i data-feather="volume-2"></i>';
        feather.replace();
    });
    // Smooth hover transitions handled in CSS
// Randomly change the background gradient direction
    setInterval(() => {
        const directions = [
            'to right bottom',
            'to left top',
            'to right top',
            'to left bottom'
        ];
        const randomDir = directions[Math.floor(Math.random() * directions.length)];
        document.querySelector('div.absolute.inset-0').style.background = 
            `linear-gradient(${randomDir}, transparent, black, black)`;
    }, 10000);
});

	document.addEventListener('DOMContentLoaded', () => {
	const audio = document.getElementById('bgAudio');
	const muteBtn = document.getElementById('muteBtn');
	let isMuted = false;

	// Ensure audio plays even after refresh
	audio.volume = 0.2;
	document.body.addEventListener('click', () => {
	audio.play().catch(e => console.log('Autoplay prevented:', e));
	}, { once: true });

	muteBtn.addEventListener('click', () => {
	isMuted = !isMuted;
	audio.muted = isMuted;
	muteBtn.innerHTML = isMuted ?
	'<i data-feather="volume-x"></i>' :
	'<i data-feather="volume-2"></i>';
	feather.replace();
	});
	// Smooth hover transitions handled in CSS
	// Randomly change the background gradient direction
	setInterval(() => {
	const directions = [
	'to right bottom',
	'to left top',
	'to right top',
	'to left bottom'
	];
	const randomDir = directions[Math.floor(Math.random() * directions.length)];
	document.querySelector('div.absolute.inset-0').style.background =
	`linear-gradient(${randomDir}, transparent, black, black)`;
	}, 10000);
	});