Featured Show

Apple Original

THE SHOW TITLE

Stream dramatic series, documentaries, and groundbreaking films crafted by world-class creators.

Stream Now Add to Up Next

document.addEventListener('DOMContentLoaded', () => { const modal = document.getElementById('appletv-modal'); const modalImg = document.getElementById('modal-img'); const modalTitle = document.getElementById('modal-title'); const modalTag = document.getElementById('modal-tag'); const modalYear = document.getElementById('modal-year'); const modalDesc = document.getElementById('modal-description'); /** * Opens the detail modal with data read from the clicked card */ function openModal(data) { modalImg.src = data.img || ''; modalTitle.textContent = data.title || 'Untitled'; modalTag.textContent = data.tag || ''; modalYear.textContent = data.year || ''; modalDesc.textContent = data.description || 'No additional details available.'; modal.classList.add('active'); modal.setAttribute('aria-hidden', 'false'); } /** * Closes the active modal overlay */ function closeModal() { modal.classList.remove('active'); modal.setAttribute('aria-hidden', 'true'); } // Attach click listener to every project card across the page document.querySelectorAll('.appletv-card, .appletv-hero-card').forEach(card => { card.addEventListener('click', (e) => { // Prevent opening modal if a specific sub-button inside the hero was clicked directly if (e.target.closest('a') && !e.target.closest('.open-details-btn')) return; const cardData = { title: card.getAttribute('data-title'), tag: card.getAttribute('data-tag'), img: card.getAttribute('data-img'), description: card.getAttribute('data-description'), year: card.getAttribute('data-year') }; openModal(cardData); }); }); // Attach event listeners to close triggers document.querySelectorAll('.appletv-modal-close, .modal-close-btn, .appletv-modal-overlay').forEach(btn => { btn.addEventListener('click', closeModal); }); // Close modal when pressing the Escape key document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.classList.contains('active')) { closeModal(); } }); });