Spaces:

srn7exe
/

techforge-cinematic-nexus

Running

can u add three buttons one for pre build pc , customize pc and About us and link them to respected buttons what we have build below make it scroll and try to add some animatition to it

b174791 verified 10 months ago

Raw History Blame Contribute Delete

10.9 kB

// Main JavaScript for TechForge Nexus

document.addEventListener('DOMContentLoaded', function() {
    // Initialize any global functionality
    // Enhanced smooth scrolling for anchor links with animation
    document.querySelectorAll('a.scroll-link').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            if (targetId.startsWith('#')) {
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    // Add active class for visual feedback
                    document.querySelectorAll('a.scroll-link').forEach(link => {
                        link.classList.remove('active');
                    });
                    this.classList.add('active');
                    
                    // Calculate scroll position
                    const headerHeight = document.querySelector('techforge-header')?.shadowRoot?.querySelector('.header')?.offsetHeight || 80;
                    const targetPosition = targetElement.offsetTop - headerHeight - 20;
                    
                    // Smooth scroll with easing
                    window.scrollTo({
                        top: targetPosition,
                        behavior: 'smooth'
                    });
                    
                    // Add visual highlight to target section
                    targetElement.classList.add('highlight-section');
                    setTimeout(() => {
                        targetElement.classList.remove('highlight-section');
                    }, 2000);
                }
            }
        });
    });

    // Smooth scrolling for general # links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        if (!anchor.classList.contains('scroll-link')) {
            anchor.addEventListener('click', function (e) {
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    e.preventDefault();
                    const headerHeight = document.querySelector('techforge-header')?.shadowRoot?.querySelector('.header')?.offsetHeight || 80;
                    window.scrollTo({
                        top: targetElement.offsetTop - headerHeight - 20,
                        behavior: 'smooth'
                    });
                }
            });
        }
    });
// Parallax effect for hero section
    const heroSection = document.querySelector('section:first-of-type');
    if (heroSection) {
        window.addEventListener('scroll', function() {
            const scrolled = window.pageYOffset;
            const rate = scrolled * -0.5;
            if (heroSection.querySelector('video')) {
                heroSection.querySelector('video').style.transform = `translate3d(0px, ${rate}px, 0px)`;
            }
        });
    }

    // Intersection Observer for animations
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-in');
            }
        });
    }, observerOptions);

    // Observe all sections and cards
    document.querySelectorAll('section, .feature-card, .rounded-2xl').forEach(el => {
        el.classList.add('opacity-0', 'transition-opacity', 'duration-700');
        observer.observe(el);
    });
    // Add CSS for animations
    const style = document.createElement('style');
    style.textContent = `
        .animate-fade-in {
            opacity: 1 !important;
            animation: fadeIn 0.7s ease-out forwards;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Highlight animation for target sections */
        .highlight-section {
            animation: highlightPulse 2s ease;
        }
        
        @keyframes highlightPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(245, 196, 107, 0);
            }
            50% {
                box-shadow: 0 0 0 20px rgba(245, 196, 107, 0.2);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(245, 196, 107, 0);
            }
        }
        
        /* New button animations */
        .scroll-link {
            transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .scroll-link:hover {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
    `;
    document.head.appendChild(style);
    
    // Add float animation to new buttons after a delay
    setTimeout(() => {
        const scrollButtons = document.querySelectorAll('.scroll-link');
        scrollButtons.forEach((button, index) => {
            button.style.animationDelay = `${index * 0.1}s`;
            button.classList.add('animate-float-soft');
        });
    }, 1000);
// Video controls
    const heroVideos = document.querySelectorAll('video');
    heroVideos.forEach(video => {
        // Ensure video plays
        video.play().catch(error => {
            console.log('Video autoplay failed:', error);
            // Fallback: play on user interaction
            const playVideoOnce = () => {
                video.play();
                document.removeEventListener('click', playVideoOnce);
            };
            document.addEventListener('click', playVideoOnce);
        });
    });

    // Video player controls for foreground video
    const videoPlayerContainer = document.querySelector('.group');
    if (videoPlayerContainer) {
        const video = videoPlayerContainer.querySelector('video');
        const playButton = videoPlayerContainer.querySelector('button:nth-of-type(1)');
        const muteButton = videoPlayerContainer.querySelector('button:nth-of-type(2)');

        if (playButton && video) {
            playButton.addEventListener('click', () => {
                if (video.paused) {
                    video.play();
                    playButton.innerHTML = '<i data-feather="pause" class="w-5 h-5"></i>';
                } else {
                    video.pause();
                    playButton.innerHTML = '<i data-feather="play" class="w-5 h-5"></i>';
                }
                feather.replace();
            });
        }

        if (muteButton && video) {
            muteButton.addEventListener('click', () => {
                video.muted = !video.muted;
                muteButton.innerHTML = video.muted 
                    ? '<i data-feather="volume-x" class="w-5 h-5"></i>'
                    : '<i data-feather="volume-2" class="w-5 h-5"></i>';
                feather.replace();
            });
        }

        // Update timeline progress (simulated)
        const timelineProgress = videoPlayerContainer.querySelector('.h-full.bg-accent');
        if (timelineProgress && video) {
            const updateProgress = () => {
                if (video.duration) {
                    const percent = (video.currentTime / video.duration) * 100;
                    timelineProgress.style.width = percent + '%';
                }
            };
            video.addEventListener('timeupdate', updateProgress);
        }
    }
// Testimonial hover effects
    const testimonials = document.querySelectorAll('.bg-secondary\\/50');
    testimonials.forEach(testimonial => {
        testimonial.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-5px)';
        });
        
        testimonial.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
        });
    });

    // Mobile menu toggle (if needed in future)
    function initMobileMenu() {
        const menuToggle = document.createElement('button');
        menuToggle.className = 'md:hidden fixed top-6 right-6 z-50 bg-accent text-primary p-3 rounded-xl';
        menuToggle.innerHTML = '<i data-feather="menu"></i>';
        document.body.appendChild(menuToggle);
        
        feather.replace();
        
        menuToggle.addEventListener('click', function() {
            const nav = document.querySelector('nav');
            if (nav) {
                nav.classList.toggle('hidden');
                nav.classList.toggle('flex');
                nav.classList.toggle('flex-col');
                nav.classList.toggle('absolute');
                nav.classList.toggle('top-20');
                nav.classList.toggle('left-0');
                nav.classList.toggle('right-0');
                nav.classList.toggle('bg-secondary');
                nav.classList.toggle('p-4');
            }
        });
    }

    // Initialize mobile menu on small screens
    if (window.innerWidth < 768) {
        initMobileMenu();
    }

    // Update year in footer (if needed)
    const yearElement = document.querySelector('#current-year');
    if (yearElement) {
        yearElement.textContent = new Date().getFullYear();
    }

    // Performance monitoring
    window.addEventListener('load', function() {
        const loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
        console.log(`Page loaded in ${loadTime}ms`);
    });
});

// Utility functions
const TechForgeUtils = {
    debounce: function(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    },

    throttle: function(func, limit) {
        let inThrottle;
        return function() {
            const args = arguments;
            const context = this;
            if (!inThrottle) {
                func.apply(context, args);
                inThrottle = true;
                setTimeout(() => inThrottle = false, limit);
            }
        };
    },

    formatBytes: function(bytes, decimals = 2) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    }
};

// Export for potential module usage
if (typeof module !== 'undefined' && module.exports) {
    module.exports = TechForgeUtils;
}

	// Main JavaScript for TechForge Nexus

	document.addEventListener('DOMContentLoaded', function() {
	// Initialize any global functionality
	// Enhanced smooth scrolling for anchor links with animation
	document.querySelectorAll('a.scroll-link').forEach(anchor => {
	anchor.addEventListener('click', function (e) {
	e.preventDefault();
	const targetId = this.getAttribute('href');
	if (targetId.startsWith('#')) {
	const targetElement = document.querySelector(targetId);
	if (targetElement) {
	// Add active class for visual feedback
	document.querySelectorAll('a.scroll-link').forEach(link => {
	link.classList.remove('active');
	});
	this.classList.add('active');

	// Calculate scroll position
	const headerHeight = document.querySelector('techforge-header')?.shadowRoot?.querySelector('.header')?.offsetHeight \|\| 80;
	const targetPosition = targetElement.offsetTop - headerHeight - 20;

	// Smooth scroll with easing
	window.scrollTo({
	top: targetPosition,
	behavior: 'smooth'
	});

	// Add visual highlight to target section
	targetElement.classList.add('highlight-section');
	setTimeout(() => {
	targetElement.classList.remove('highlight-section');
	}, 2000);
	}
	}
	});
	});

	// Smooth scrolling for general # links
	document.querySelectorAll('a[href^="#"]').forEach(anchor => {
	if (!anchor.classList.contains('scroll-link')) {
	anchor.addEventListener('click', function (e) {
	const targetId = this.getAttribute('href');
	if (targetId === '#') return;

	const targetElement = document.querySelector(targetId);
	if (targetElement) {
	e.preventDefault();
	const headerHeight = document.querySelector('techforge-header')?.shadowRoot?.querySelector('.header')?.offsetHeight \|\| 80;
	window.scrollTo({
	top: targetElement.offsetTop - headerHeight - 20,
	behavior: 'smooth'
	});
	}
	});
	}
	});
	// Parallax effect for hero section
	const heroSection = document.querySelector('section:first-of-type');
	if (heroSection) {
	window.addEventListener('scroll', function() {
	const scrolled = window.pageYOffset;
	const rate = scrolled * -0.5;
	if (heroSection.querySelector('video')) {
	heroSection.querySelector('video').style.transform = `translate3d(0px, ${rate}px, 0px)`;
	}
	});
	}

	// Intersection Observer for animations
	const observerOptions = {
	threshold: 0.1,
	rootMargin: '0px 0px -50px 0px'
	};

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('animate-fade-in');
	}
	});
	}, observerOptions);

	// Observe all sections and cards
	document.querySelectorAll('section, .feature-card, .rounded-2xl').forEach(el => {
	el.classList.add('opacity-0', 'transition-opacity', 'duration-700');
	observer.observe(el);
	});
	// Add CSS for animations
	const style = document.createElement('style');
	style.textContent = `
	.animate-fade-in {
	opacity: 1 !important;
	animation: fadeIn 0.7s ease-out forwards;
	}

	@keyframes fadeIn {
	from {
	opacity: 0;
	transform: translateY(20px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	/* Highlight animation for target sections */
	.highlight-section {
	animation: highlightPulse 2s ease;
	}

	@keyframes highlightPulse {
	0% {
	box-shadow: 0 0 0 0 rgba(245, 196, 107, 0);
	}
	50% {
	box-shadow: 0 0 0 20px rgba(245, 196, 107, 0.2);
	}
	100% {
	box-shadow: 0 0 0 0 rgba(245, 196, 107, 0);
	}
	}

	/* New button animations */
	.scroll-link {
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.scroll-link:hover {
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
	}
	`;
	document.head.appendChild(style);

	// Add float animation to new buttons after a delay
	setTimeout(() => {
	const scrollButtons = document.querySelectorAll('.scroll-link');
	scrollButtons.forEach((button, index) => {
	button.style.animationDelay = `${index * 0.1}s`;
	button.classList.add('animate-float-soft');
	});
	}, 1000);
	// Video controls
	const heroVideos = document.querySelectorAll('video');
	heroVideos.forEach(video => {
	// Ensure video plays
	video.play().catch(error => {
	console.log('Video autoplay failed:', error);
	// Fallback: play on user interaction
	const playVideoOnce = () => {
	video.play();
	document.removeEventListener('click', playVideoOnce);
	};
	document.addEventListener('click', playVideoOnce);
	});
	});

	// Video player controls for foreground video
	const videoPlayerContainer = document.querySelector('.group');
	if (videoPlayerContainer) {
	const video = videoPlayerContainer.querySelector('video');
	const playButton = videoPlayerContainer.querySelector('button:nth-of-type(1)');
	const muteButton = videoPlayerContainer.querySelector('button:nth-of-type(2)');

	if (playButton && video) {
	playButton.addEventListener('click', () => {
	if (video.paused) {
	video.play();
	playButton.innerHTML = '<i data-feather="pause" class="w-5 h-5"></i>';
	} else {
	video.pause();
	playButton.innerHTML = '<i data-feather="play" class="w-5 h-5"></i>';
	}
	feather.replace();
	});
	}

	if (muteButton && video) {
	muteButton.addEventListener('click', () => {
	video.muted = !video.muted;
	muteButton.innerHTML = video.muted
	? '<i data-feather="volume-x" class="w-5 h-5"></i>'
	: '<i data-feather="volume-2" class="w-5 h-5"></i>';
	feather.replace();
	});
	}

	// Update timeline progress (simulated)
	const timelineProgress = videoPlayerContainer.querySelector('.h-full.bg-accent');
	if (timelineProgress && video) {
	const updateProgress = () => {
	if (video.duration) {
	const percent = (video.currentTime / video.duration) * 100;
	timelineProgress.style.width = percent + '%';
	}
	};
	video.addEventListener('timeupdate', updateProgress);
	}
	}
	// Testimonial hover effects
	const testimonials = document.querySelectorAll('.bg-secondary\\/50');
	testimonials.forEach(testimonial => {
	testimonial.addEventListener('mouseenter', function() {
	this.style.transform = 'translateY(-5px)';
	});

	testimonial.addEventListener('mouseleave', function() {
	this.style.transform = 'translateY(0)';
	});
	});

	// Mobile menu toggle (if needed in future)
	function initMobileMenu() {
	const menuToggle = document.createElement('button');
	menuToggle.className = 'md:hidden fixed top-6 right-6 z-50 bg-accent text-primary p-3 rounded-xl';
	menuToggle.innerHTML = '<i data-feather="menu"></i>';
	document.body.appendChild(menuToggle);

	feather.replace();

	menuToggle.addEventListener('click', function() {
	const nav = document.querySelector('nav');
	if (nav) {
	nav.classList.toggle('hidden');
	nav.classList.toggle('flex');
	nav.classList.toggle('flex-col');
	nav.classList.toggle('absolute');
	nav.classList.toggle('top-20');
	nav.classList.toggle('left-0');
	nav.classList.toggle('right-0');
	nav.classList.toggle('bg-secondary');
	nav.classList.toggle('p-4');
	}
	});
	}

	// Initialize mobile menu on small screens
	if (window.innerWidth < 768) {
	initMobileMenu();
	}

	// Update year in footer (if needed)
	const yearElement = document.querySelector('#current-year');
	if (yearElement) {
	yearElement.textContent = new Date().getFullYear();
	}

	// Performance monitoring
	window.addEventListener('load', function() {
	const loadTime = window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart;
	console.log(`Page loaded in ${loadTime}ms`);
	});
	});

	// Utility functions
	const TechForgeUtils = {
	debounce: function(func, wait) {
	let timeout;
	return function executedFunction(...args) {
	const later = () => {
	clearTimeout(timeout);
	func(...args);
	};
	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	};
	},

	throttle: function(func, limit) {
	let inThrottle;
	return function() {
	const args = arguments;
	const context = this;
	if (!inThrottle) {
	func.apply(context, args);
	inThrottle = true;
	setTimeout(() => inThrottle = false, limit);
	}
	};
	},

	formatBytes: function(bytes, decimals = 2) {
	if (bytes === 0) return '0 Bytes';
	const k = 1024;
	const dm = decimals < 0 ? 0 : decimals;
	const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
	const i = Math.floor(Math.log(bytes) / Math.log(k));
	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
	}
	};

	// Export for potential module usage
	if (typeof module !== 'undefined' && module.exports) {
	module.exports = TechForgeUtils;
	}