JosselynVargas/material-showcase-explorer

1// Modal functionality2function showModal(imageSrc, description) {3    const modal = document.getElementById('imageModal');4    const modalImage = document.getElementById('modalImage');5    const modalDescription = document.getElementById('modalDescription');6    7    modalImage.src = imageSrc;8    modalDescription.textContent = description;9    modal.classList.remove('hidden');10    document.body.style.overflow = 'hidden';11}12 13function closeModal() {14    const modal = document.getElementById('imageModal');15    modal.classList.add('hidden');16    document.body.style.overflow = 'auto';17}18 19// Load more functionality20document.getElementById('loadMoreBtn').addEventListener('click', function() {21    const moreContent = document.getElementById('moreContent');22    const materials = [23        { type: 'wood', name: 'Madera de Pino', desc: 'Madera clara y ligera', img: 'http://static.photos/nature/640x360/6' },24        { type: 'black', name: 'Fondo Negro Mate', desc: 'Acabado mate profesional', img: 'http://static.photos/black/640x360/7' },25        { type: 'leather', name: 'Piel Sintética', desc: 'Alternativa vegana', img: 'http://static.photos/textures/640x360/8' },26        { type: 'marble', name: 'Mármol Negro', desc: 'Mármol negro premium', img: 'http://static.photos/white/640x360/9' },27        { type: 'fabric', name: 'Tela de Lino', desc: 'Tela natural transpirable', img: 'http://static.photos/textures/640x360/10' }28    ];29 30    if (moreContent.classList.contains('hidden')) {31        moreContent.classList.remove('hidden');32        this.innerHTML = 'Mostrar menos <i data-feather="chevron-up"></i>';33        34        materials.forEach(material => {35            const card = document.createElement('div');36            card.className = 'bg-gray-800 p-4 rounded-lg cursor-pointer';37            card.innerHTML = `38                <div onclick="showModal('${material.img}', '${material.desc}')">39                    <img src="${material.img}" alt="${material.name}" class="w-full h-32 object-cover rounded mb-2">40                    <h3 class="font-semibold">${material.name}</h3>41                    <p class="text-sm text-gray-400">${material.desc}</p>42                </div>43            `;44            moreContent.appendChild(card);45        });46    } else {47        moreContent.classList.add('hidden');48        moreContent.innerHTML = '';49        this.innerHTML = 'Ver más materiales <i data-feather="chevron-down"></i>';50    }51    52    feather.replace();53});54 55// Close modal when clicking outside56window.addEventListener('click', function(event) {57    const modal = document.getElementById('imageModal');58    if (event.target === modal) {59        closeModal();60    }61});