`; document.querySelector('.featured-monuments').insertBefore(eraFilter, document.querySelector('.monuments-grid')); // Add styles for era filter buttons const style = document.createElement('style'); style.textContent = ` .era-filter-btn { padding: 10px 20px; background: white; border: 1px solid var(--monument-gold); border-radius: 6px; color: var(--monument-gold); font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .era-filter-btn:hover, .era-filter-btn.active { background: var(--monument-gold); color: white; } `; document.head.appendChild(style); // Era filter functionality const eraButtons = document.querySelectorAll('.era-filter-btn'); eraButtons.forEach(button => { button.addEventListener('click', function() { eraButtons.forEach(btn => btn.classList.remove('active')); this.classList.add('active'); const era = this.getAttribute('data-era'); // In a real implementation, this would filter monuments by historical era console.log('Filtering by era:', era); }); }); // Monument details modal (simulated) const monumentCards = document.querySelectorAll('.monument-card'); monumentCards.forEach(card => { card.addEventListener('click', function(e) { if (!e.target.closest('.btn-secondary')) { const title = this.querySelector('.monument-title').textContent; // In a real implementation, this would open a modal with detailed information console.log('Opening details for:', title); } }); }); // Visitor counter simulation const visitorCounter = document.createElement('div'); visitorCounter.innerHTML = ` `; document.querySelector('.monument-categories').insertBefore(visitorCounter, document.querySelector('.categories-grid')); // Animate visitor counter function animateCounter() { const counter = document.getElementById('visitor-count'); let count = 2847; setInterval(() => { count += Math.floor(Math.random() * 5) + 1; counter.textContent = count.toLocaleString(); }, 3000); } animateCounter(); });