Spaces:

Koperization
/

deepsite-project-nybl2

Running

Initial DeepSite commit

f22b252 verified 6 months ago

8.53 kB

// === Script for "Joined at the Hip: 6 Months of Us" ===

document.addEventListener('DOMContentLoaded', () => {
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }

    // === Navbar Scroll Effect ===
    const navbar = document.getElementById('navbar');
    const navLogo = document.getElementById('navLogo');

    function updateNavbar() {
        if (window.scrollY > 80) {
            navbar.classList.add('scrolled');
            if (navLogo) navLogo.style.opacity = '1';
        } else {
            navbar.classList.remove('scrolled');
            if (navLogo) navLogo.style.opacity = '0';
        }
    }

    window.addEventListener('scroll', updateNavbar);
    updateNavbar(); // Initial check

    // === Mobile Menu Toggle ===
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const mobileMenu = document.getElementById('mobileMenu');

    if (mobileMenuBtn && mobileMenu) {
        mobileMenuBtn.addEventListener('click', () => {
            const isHidden = mobileMenu.classList.contains('hidden');
            if (isHidden) {
                mobileMenu.classList.remove('hidden');
                mobileMenuBtn.innerHTML = '<i data-lucide="x"></i>';
            } else {
                mobileMenu.classList.add('hidden');
                mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
            }
            if (typeof lucide !== 'undefined') lucide.createIcons();
        });

        // Close mobile menu when a link is clicked
        const mobileNavLinks = mobileMenu.querySelectorAll('.mobile-nav-link');
        mobileNavLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
                if (typeof lucide !== 'undefined') lucide.createIcons();
            });
        });
    }

    // Close mobile menu when clicking outside
    document.addEventListener('click', (e) => {
        if (mobileMenu && mobileMenuBtn && !mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
            if (!mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('hidden');
                mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
                if (typeof lucide !== 'undefined') lucide.createIcons();
            }
        }
    });

    // === Floating Particles in Hero ===
    const particlesContainer = document.getElementById('particlesContainer');
    if (particlesContainer) {
        const particleSymbols = ['✦', '♥', '✧', '♡', '·', '◆', '◇', '⋆'];
        for (let i = 0; i < 30; i++) {
            const particle = document.createElement('span');
            particle.className = 'particle';
            particle.textContent = particleSymbols[Math.floor(Math.random() * particleSymbols.length)];
            particle.style.left = Math.random() * 100 + '%';
            particle.style.top = Math.random() * 100 + '%';
            particle.style.fontSize = (Math.random() * 16 + 8) + 'px';
            particle.style.color = Math.random() > 0.5 ? '#81d4fa' : '#c9a96e';
            particle.style.animationDelay = Math.random() * 6 + 's';
            particle.style.animationDuration = (Math.random() * 6 + 6) + 's';
            particle.style.opacity = Math.random() * 0.3 + 0.1;
            particlesContainer.appendChild(particle);
        }
    }

    // === Intersection Observer for Scroll Animations ===
    const fadeElements = document.querySelectorAll('.fade-in-on-scroll');
    const timelineItems = document.querySelectorAll('.timeline-item');

    const observerOptions = {
        root: null,
        rootMargin: '0px 0px -60px 0px',
        threshold: 0.15
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                // Once visible, stop observing
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    // Observe fade elements
    fadeElements.forEach(el => observer.observe(el));

    // Observe timeline items
    const timelineObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                timelineObserver.unobserve(entry.target);
            }
        });
    }, { rootMargin: '0px 0px -40px 0px', threshold: 0.2 });

    timelineItems.forEach(el => timelineObserver.observe(el));

    // === Memory Quiz ===
    const revealBtn = document.getElementById('revealAnswer');
    const quizAnswer = document.getElementById('quizAnswer');

    if (revealBtn && quizAnswer) {
        revealBtn.addEventListener('click', () => {
            quizAnswer.classList.remove('hidden');
            quizAnswer.classList.add('animate-answerReveal');
            revealBtn.textContent = 'Answered! 💙';
            revealBtn.disabled = true;
            revealBtn.style.opacity = '0.6';
            revealBtn.style.cursor = 'default';

            // Reset after a few seconds
            setTimeout(() => {
                quizAnswer.classList.add('hidden');
                quizAnswer.classList.remove('animate-answerReveal');
                revealBtn.textContent = 'Reveal Answer 💙';
                revealBtn.disabled = false;
                revealBtn.style.opacity = '1';
                revealBtn.style.cursor = 'pointer';
            }, 6000);
        });
    }

    // === Countdown Timer ===
    // Target: October 20, 2026 (1-year anniversary)
    const targetDate = new Date('October 20, 2026 00:00:00').getTime();

    function updateCountdown() {
        const now = new Date().getTime();
        const distance = targetDate - now;

        if (distance < 0) {
            // If the date has passed
            document.getElementById('countdownDays').textContent = '00';
            document.getElementById('countdownHours').textContent = '00';
            document.getElementById('countdownMinutes').textContent = '00';
            document.getElementById('countdownSeconds').textContent = '00';
            return;
        }

        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('countdownDays').textContent = String(days).padStart(2, '0');
        document.getElementById('countdownHours').textContent = String(hours).padStart(2, '0');
        document.getElementById('countdownMinutes').textContent = String(minutes).padStart(2, '0');
        document.getElementById('countdownSeconds').textContent = String(seconds).padStart(2, '0');
    }

    // Update countdown immediately and then every second
    updateCountdown();
    const countdownInterval = setInterval(updateCountdown, 1000);

    // === Smooth close mobile menu on resize ===
    window.addEventListener('resize', () => {
        if (window.innerWidth >= 768 && mobileMenu && !mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
            if (mobileMenuBtn) {
                mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
                if (typeof lucide !== 'undefined') lucide.createIcons();
            }
        }
    });

    // === Active nav link highlighting ===
    const sections = document.querySelectorAll('section[id]');
    const navLinks = document.querySelectorAll('.nav-link');

    function highlightNavLink() {
        let scrollPosition = window.scrollY + 100;

        sections.forEach(section => {
            const sectionTop = section.offsetTop;
            const sectionHeight = section.offsetHeight;
            const sectionId = section.getAttribute('id');

            if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                navLinks.forEach(link => {
                    link.style.color = '';
                    if (link.getAttribute('href') === '#' + sectionId) {
                        link.style.color = '#81d4fa';
                    }
                });
            }
        });
    }

    window.addEventListener('scroll', highlightNavLink);
});

	// === Script for "Joined at the Hip: 6 Months of Us" ===

	document.addEventListener('DOMContentLoaded', () => {
	// Initialize Lucide icons
	if (typeof lucide !== 'undefined') {
	lucide.createIcons();
	}

	// === Navbar Scroll Effect ===
	const navbar = document.getElementById('navbar');
	const navLogo = document.getElementById('navLogo');

	function updateNavbar() {
	if (window.scrollY > 80) {
	navbar.classList.add('scrolled');
	if (navLogo) navLogo.style.opacity = '1';
	} else {
	navbar.classList.remove('scrolled');
	if (navLogo) navLogo.style.opacity = '0';
	}
	}

	window.addEventListener('scroll', updateNavbar);
	updateNavbar(); // Initial check

	// === Mobile Menu Toggle ===
	const mobileMenuBtn = document.getElementById('mobileMenuBtn');
	const mobileMenu = document.getElementById('mobileMenu');

	if (mobileMenuBtn && mobileMenu) {
	mobileMenuBtn.addEventListener('click', () => {
	const isHidden = mobileMenu.classList.contains('hidden');
	if (isHidden) {
	mobileMenu.classList.remove('hidden');
	mobileMenuBtn.innerHTML = '<i data-lucide="x"></i>';
	} else {
	mobileMenu.classList.add('hidden');
	mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
	}
	if (typeof lucide !== 'undefined') lucide.createIcons();
	});

	// Close mobile menu when a link is clicked
	const mobileNavLinks = mobileMenu.querySelectorAll('.mobile-nav-link');
	mobileNavLinks.forEach(link => {
	link.addEventListener('click', () => {
	mobileMenu.classList.add('hidden');
	mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
	if (typeof lucide !== 'undefined') lucide.createIcons();
	});
	});
	}

	// Close mobile menu when clicking outside
	document.addEventListener('click', (e) => {
	if (mobileMenu && mobileMenuBtn && !mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
	if (!mobileMenu.classList.contains('hidden')) {
	mobileMenu.classList.add('hidden');
	mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
	if (typeof lucide !== 'undefined') lucide.createIcons();
	}
	}
	});

	// === Floating Particles in Hero ===
	const particlesContainer = document.getElementById('particlesContainer');
	if (particlesContainer) {
	const particleSymbols = ['✦', '♥', '✧', '♡', '·', '◆', '◇', '⋆'];
	for (let i = 0; i < 30; i++) {
	const particle = document.createElement('span');
	particle.className = 'particle';
	particle.textContent = particleSymbols[Math.floor(Math.random() * particleSymbols.length)];
	particle.style.left = Math.random() * 100 + '%';
	particle.style.top = Math.random() * 100 + '%';
	particle.style.fontSize = (Math.random() * 16 + 8) + 'px';
	particle.style.color = Math.random() > 0.5 ? '#81d4fa' : '#c9a96e';
	particle.style.animationDelay = Math.random() * 6 + 's';
	particle.style.animationDuration = (Math.random() * 6 + 6) + 's';
	particle.style.opacity = Math.random() * 0.3 + 0.1;
	particlesContainer.appendChild(particle);
	}
	}

	// === Intersection Observer for Scroll Animations ===
	const fadeElements = document.querySelectorAll('.fade-in-on-scroll');
	const timelineItems = document.querySelectorAll('.timeline-item');

	const observerOptions = {
	root: null,
	rootMargin: '0px 0px -60px 0px',
	threshold: 0.15
	};

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('visible');
	// Once visible, stop observing
	observer.unobserve(entry.target);
	}
	});
	}, observerOptions);

	// Observe fade elements
	fadeElements.forEach(el => observer.observe(el));

	// Observe timeline items
	const timelineObserver = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('visible');
	timelineObserver.unobserve(entry.target);
	}
	});
	}, { rootMargin: '0px 0px -40px 0px', threshold: 0.2 });

	timelineItems.forEach(el => timelineObserver.observe(el));

	// === Memory Quiz ===
	const revealBtn = document.getElementById('revealAnswer');
	const quizAnswer = document.getElementById('quizAnswer');

	if (revealBtn && quizAnswer) {
	revealBtn.addEventListener('click', () => {
	quizAnswer.classList.remove('hidden');
	quizAnswer.classList.add('animate-answerReveal');
	revealBtn.textContent = 'Answered! 💙';
	revealBtn.disabled = true;
	revealBtn.style.opacity = '0.6';
	revealBtn.style.cursor = 'default';

	// Reset after a few seconds
	setTimeout(() => {
	quizAnswer.classList.add('hidden');
	quizAnswer.classList.remove('animate-answerReveal');
	revealBtn.textContent = 'Reveal Answer 💙';
	revealBtn.disabled = false;
	revealBtn.style.opacity = '1';
	revealBtn.style.cursor = 'pointer';
	}, 6000);
	});
	}

	// === Countdown Timer ===
	// Target: October 20, 2026 (1-year anniversary)
	const targetDate = new Date('October 20, 2026 00:00:00').getTime();

	function updateCountdown() {
	const now = new Date().getTime();
	const distance = targetDate - now;

	if (distance < 0) {
	// If the date has passed
	document.getElementById('countdownDays').textContent = '00';
	document.getElementById('countdownHours').textContent = '00';
	document.getElementById('countdownMinutes').textContent = '00';
	document.getElementById('countdownSeconds').textContent = '00';
	return;
	}

	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('countdownDays').textContent = String(days).padStart(2, '0');
	document.getElementById('countdownHours').textContent = String(hours).padStart(2, '0');
	document.getElementById('countdownMinutes').textContent = String(minutes).padStart(2, '0');
	document.getElementById('countdownSeconds').textContent = String(seconds).padStart(2, '0');
	}

	// Update countdown immediately and then every second
	updateCountdown();
	const countdownInterval = setInterval(updateCountdown, 1000);

	// === Smooth close mobile menu on resize ===
	window.addEventListener('resize', () => {
	if (window.innerWidth >= 768 && mobileMenu && !mobileMenu.classList.contains('hidden')) {
	mobileMenu.classList.add('hidden');
	if (mobileMenuBtn) {
	mobileMenuBtn.innerHTML = '<i data-lucide="menu"></i>';
	if (typeof lucide !== 'undefined') lucide.createIcons();
	}
	}
	});

	// === Active nav link highlighting ===
	const sections = document.querySelectorAll('section[id]');
	const navLinks = document.querySelectorAll('.nav-link');

	function highlightNavLink() {
	let scrollPosition = window.scrollY + 100;

	sections.forEach(section => {
	const sectionTop = section.offsetTop;
	const sectionHeight = section.offsetHeight;
	const sectionId = section.getAttribute('id');

	if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
	navLinks.forEach(link => {
	link.style.color = '';
	if (link.getAttribute('href') === '#' + sectionId) {
	link.style.color = '#81d4fa';
	}
	});
	}
	});
	}

	window.addEventListener('scroll', highlightNavLink);
	});