whatsapp

// UltraFit Ring Landing Page JavaScript
document.addEventListener(‘DOMContentLoaded’, function() {
// A/B Testing for Headlines
const headlines = [
“Track. Transform. Transcend. With UltraFit Ring”,
“Smarter Fitness at Your Fingertips”,
“Unlock Peak Performance—No Limits, Just UltraFit”
];

// Randomly select headline for A/B testing
function initHeadlineABTest() {
const headlineElement = document.getElementById(‘main-headline’);
if (headlineElement) {
const randomIndex = Math.floor(Math.random() * headlines.length);
const selectedHeadline = headlines[randomIndex];

headlineElement.textContent = selectedHeadline;

// Track which headline was shown (in real implementation, this would go to analytics)
console.log(‘A/B Test – Headline shown:’, selectedHeadline, ‘Index:’, randomIndex);
}
}

// Smooth scrolling for navigation links
function initSmoothScrolling() {
const navLinks = document.querySelectorAll(‘.nav-link[href^=”#”]’);

navLinks.forEach(link => {
link.addEventListener(‘click’, function(e) {
e.preventDefault();
const targetId = this.getAttribute(‘href’);
const targetElement = document.querySelector(targetId);

if (targetElement) {
const offsetTop = targetElement.offsetTop – 100; // Account for fixed nav
window.scrollTo({
top: offsetTop,
behavior: ‘smooth’
});
}
});
});
}

// Countdown Timer for Pricing Urgency
function initCountdownTimer() {
const countdownElement = document.getElementById(‘countdown’);
if (!countdownElement) return;

// Set countdown for 24 hours from now
const endTime = new Date().getTime() + (24 * 60 * 60 * 1000);

function updateCountdown() {
const now = new Date().getTime();
const timeLeft = endTime – now;

if (timeLeft > 0) {
const hours = Math.floor(timeLeft / (1000 * 60 * 60));
const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

countdownElement.textContent =
`${hours.toString().padStart(2, ‘0’)}:${minutes.toString().padStart(2, ‘0’)}:${seconds.toString().padStart(2, ‘0’)}`;
} else {
countdownElement.textContent = “00:00:00”;
}
}

updateCountdown();
setInterval(updateCountdown, 1000);
}

// Animated Stock Counter
function initStockCounter() {
const stockElement = document.querySelector(‘.stock-count’);
if (!stockElement) return;

let currentStock = 47;

// Simulate stock decreasing over time
function updateStock() {
if (currentStock > 20 && Math.random() < 0.3) { currentStock--; stockElement.textContent = currentStock; // Add flash effect stockElement.style.color = '#ff4444'; setTimeout(() => {
stockElement.style.color = ‘#ff8c00’;
}, 300);
}
}

// Update stock every 30-60 seconds
setInterval(updateStock, Math.random() * 30000 + 30000);
}

// Scroll Animation for Fade-in Effects
function initScrollAnimations() {
const observerOptions = {
threshold: 0.1,
rootMargin: ‘0px 0px -50px 0px’
};

const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘visible’);
}
});
}, observerOptions);

// Add fade-in class to elements and observe them
const animatedElements = document.querySelectorAll(‘.benefit-card, .testimonial-card, .features-text, .features-visual’);
animatedElements.forEach(el => {
el.classList.add(‘fade-in’);
observer.observe(el);
});
}

// CTA Click Handlers
function initCTAHandlers() {
const ctaButtons = document.querySelectorAll(‘.btn–primary, .hero-cta-primary, .pricing-cta’);

ctaButtons.forEach(button => {
button.addEventListener(‘click’, function(e) {
e.preventDefault();

// Add loading state
this.classList.add(‘loading’);
this.disabled = true;

// Show alert after loading simulation
setTimeout(() => {
this.classList.remove(‘loading’);
this.disabled = false;

// Show success message
alert(‘Thank you for your interest! In a real implementation, this would redirect to the checkout page.’);
}, 1500);

// Track conversion (in real implementation, this would go to analytics)
console.log(‘CTA Clicked:’, this.textContent.trim());
});
});

// Handle all order buttons specifically
const orderButtons = document.querySelectorAll(‘button:not(.hero-cta-secondary)’);
orderButtons.forEach(button => {
if (button.textContent.includes(‘Order’) || button.textContent.includes(‘Start Your Health’)) {
button.addEventListener(‘click’, function(e) {
e.preventDefault();

// Add loading state
this.classList.add(‘loading’);
this.disabled = true;

// Show alert after loading simulation
setTimeout(() => {
this.classList.remove(‘loading’);
this.disabled = false;

// Show success message
alert(‘Thank you for your interest! In a real implementation, this would redirect to the checkout page.’);
}, 1500);

// Track conversion
console.log(‘Order CTA Clicked:’, this.textContent.trim());
});
}
});

// Secondary CTA (Watch Demo Video)
const demoCTA = document.querySelector(‘.hero-cta-secondary’);
if (demoCTA) {
demoCTA.addEventListener(‘click’, function(e) {
e.preventDefault();
// Show demo modal alert
alert(‘Demo video would open here in a real implementation.’);
console.log(‘Demo video CTA clicked’);
});
}
}

// Navigation Background Opacity on Scroll
function initNavScrollEffect() {
const nav = document.querySelector(‘.nav’);
if (!nav) return;

window.addEventListener(‘scroll’, function() {
const scrolled = window.pageYOffset;
const opacity = Math.min(0.95, 0.8 + (scrolled / 500) * 0.15);

nav.style.background = `rgba(255, 255, 255, ${opacity})`;
});
}

// Form Validation (if forms are added later)
function initFormValidation() {
const forms = document.querySelectorAll(‘form’);

forms.forEach(form => {
form.addEventListener(‘submit’, function(e) {
e.preventDefault();

const inputs = form.querySelectorAll(‘input[required], select[required], textarea[required]’);
let isValid = true;

inputs.forEach(input => {
if (!input.value.trim()) {
isValid = false;
input.classList.add(‘error’);
} else {
input.classList.remove(‘error’);
}
});

if (isValid) {
// Process form
console.log(‘Form submitted successfully’);
} else {
console.log(‘Form validation failed’);
}
});
});
}

// Mobile Menu Toggle (for future mobile menu implementation)
function initMobileMenu() {
// This would be implemented if a mobile hamburger menu is added
const mobileToggle = document.querySelector(‘.mobile-menu-toggle’);
const navMenu = document.querySelector(‘.nav-menu’);

if (mobileToggle && navMenu) {
mobileToggle.addEventListener(‘click’, function() {
navMenu.classList.toggle(‘active’);
this.classList.toggle(‘active’);
});
}
}

// Performance tracking for optimization
function trackPerformance() {
// Track page load time
window.addEventListener(‘load’, function() {
const loadTime = performance.now();
console.log(‘Page load time:’, Math.round(loadTime), ‘ms’);
});

// Track scroll depth for engagement
let maxScroll = 0;
const debouncedScrollTrack = debounce(function() {
const scrollPercent = Math.round((window.pageYOffset / (document.body.scrollHeight – window.innerHeight)) * 100);
if (scrollPercent > maxScroll) {
maxScroll = scrollPercent;
console.log(‘Max scroll depth:’, maxScroll + ‘%’);
}
}, 100);

window.addEventListener(‘scroll’, debouncedScrollTrack);
}

// Social sharing (for future implementation)
function initSocialSharing() {
const shareButtons = document.querySelectorAll(‘.share-btn’);

shareButtons.forEach(button => {
button.addEventListener(‘click’, function(e) {
e.preventDefault();
const platform = this.dataset.platform;
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(‘Check out the amazing UltraFit Ring!’);

let shareUrl;
switch(platform) {
case ‘twitter’:
shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
break;
case ‘facebook’:
shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
break;
case ‘linkedin’:
shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
break;
case ‘whatsapp’:
shareUrl = `https://wa.me/?text=${title}%20${url}`;
break;
}

if (shareUrl) {
window.open(shareUrl, ‘_blank’, ‘width=600,height=400’);
}
});
});
}

// Error handling
function initErrorHandling() {
window.addEventListener(‘error’, function(e) {
console.error(‘JavaScript error:’, e.error);
});

// Handle failed image loads
const images = document.querySelectorAll(‘img’);
images.forEach(img => {
img.addEventListener(‘error’, function() {
// In a real implementation, you might show a placeholder image
console.log(‘Failed to load image:’, this.src);
// Set fallback image or hide broken image
this.style.display = ‘none’;
});
});
}

// Initialize all functionality
function init() {
try {
initHeadlineABTest();
initSmoothScrolling();
initCountdownTimer();
initStockCounter();
initScrollAnimations();
initCTAHandlers();
initNavScrollEffect();
initFormValidation();
initMobileMenu();
trackPerformance();
initSocialSharing();
initErrorHandling();

console.log(‘UltraFit Ring landing page initialized successfully’);
} catch (error) {
console.error(‘Error initializing landing page:’, error);
}
}

// Start the application
init();

// Expose functions for external use or testing
window.UltraFitApp = {
headlines: headlines,
reinitialize: init
};
});

// Additional utility functions
function debounce(func, wait) {
let timeout;
return function executedFunction(…args) {
const later = () => {
clearTimeout(timeout);
func(…args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}

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

// Export for potential A/B testing analysis
window.getABTestData = function() {
return {
currentHeadline: document.getElementById(‘main-headline’)?.textContent || ”,
timestamp: new Date().toISOString(),
userAgent: navigator.userAgent
};
};