document.addEventListener('DOMContentLoaded', function() {
// Log user information
console.log("User ID: {{USER:USER_ID}}");
console.log("User Name: {{USER:NAME}}");
console.log("User Email: {{USER:EMAIL}}");
console.log("User Plan ID: {{USER:PLAN_ID}}");
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add hover effect to link buttons
const linkButtons = document.querySelectorAll('.link-button');
linkButtons.forEach(button => {
button.addEventListener('mouseenter', () => {
button.style.transform = 'scale(1.02)';
button.style.boxShadow = '0 4px 10px rgba(0, 0, 0, 0.1)';
});
button.addEventListener('mouseleave', () => {
button.style.transform = 'scale(1)';
button.style.boxShadow = 'none';
});
});
// Lazy load images
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.getAttribute('data-src');
img.removeAttribute('data-src');
imageObserver.unobserve(img);
}
});
});
images.forEach(img => imageObserver.observe(img));
// Example of using user data for personalization
const welcomeMessage = document.createElement('div');
welcomeMessage.textContent = `Welcome, {{USER:NAME}}!`;
welcomeMessage.style.textAlign = 'center';
welcomeMessage.style.padding = '10px';
welcomeMessage.style.backgroundColor = '#f0f0f0';
welcomeMessage.style.marginBottom = '20px';
document.body.insertBefore(welcomeMessage, document.body.firstChild);
// Example of plan-specific feature
if ('{{USER:PLAN_ID}}' === 'pro' || '{{USER:PLAN_ID}}' === 'enterprise') {
// Add some premium feature here
console.log('Premium feature activated for {{USER:PLAN_ID}} user');
}
});