Spaces:

MoShow
/

sonic-bloom-fest

Running

Create a music festival landing page with artist/band lineup, stage schedule, venue map, ticket options with early bird pricing, photo gallery from previous years, camping information, FAQ, and buy tickets button.

36a4617 verified 9 months ago

Raw History Blame Contribute Delete

1.93 kB

// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

// Countdown timer to festival
function updateCountdown() {
    const festivalDate = new Date('July 15, 2023 16:00:00').getTime();
    const now = new Date().getTime();
    const distance = festivalDate - now;
    
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    document.getElementById('countdown').innerHTML = `
        <div class="countdown-item">
            <span class="countdown-number">${days}</span>
            <span class="countdown-label">Days</span>
        </div>
        <div class="countdown-item">
            <span class="countdown-number">${hours}</span>
            <span class="countdown-label">Hours</span>
        </div>
        <div class="countdown-item">
            <span class="countdown-number">${minutes}</span>
            <span class="countdown-label">Minutes</span>
        </div>
        <div class="countdown-item">
            <span class="countdown-number">${seconds}</span>
            <span class="countdown-label">Seconds</span>
        </div>
    `;
}

// Initialize countdown
updateCountdown();
setInterval(updateCountdown, 1000);

// Ticket hover effect
document.querySelectorAll('.ticket-card').forEach(card => {
    card.addEventListener('mouseenter', () => {
        card.style.transform = 'translateY(-10px)';
    });
    card.addEventListener('mouseleave', () => {
        card.style.transform = 'translateY(0)';
    });
});

	// Smooth scrolling for anchor links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();
	document.querySelector(this.getAttribute('href')).scrollIntoView({
	behavior: 'smooth'
	});
	});
	});

	// Countdown timer to festival
	function updateCountdown() {
	const festivalDate = new Date('July 15, 2023 16:00:00').getTime();
	const now = new Date().getTime();
	const distance = festivalDate - now;

	const days = Math.floor(distance / (1000 * 60 * 60 * 24));
	const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
	const seconds = Math.floor((distance % (1000 * 60)) / 1000);

	document.getElementById('countdown').innerHTML = `
	<div class="countdown-item">
	<span class="countdown-number">${days}</span>
	<span class="countdown-label">Days</span>
	</div>
	<div class="countdown-item">
	<span class="countdown-number">${hours}</span>
	<span class="countdown-label">Hours</span>
	</div>
	<div class="countdown-item">
	<span class="countdown-number">${minutes}</span>
	<span class="countdown-label">Minutes</span>
	</div>
	<div class="countdown-item">
	<span class="countdown-number">${seconds}</span>
	<span class="countdown-label">Seconds</span>
	</div>
	`;
	}

	// Initialize countdown
	updateCountdown();
	setInterval(updateCountdown, 1000);

	// Ticket hover effect
	document.querySelectorAll('.ticket-card').forEach(card => {
	card.addEventListener('mouseenter', () => {
	card.style.transform = 'translateY(-10px)';
	});
	card.addEventListener('mouseleave', () => {
	card.style.transform = 'translateY(0)';
	});
	});