🐚 WEB SHELL ACTIVATED

📁 File Browser

Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads

📄 Viewing: ./../../Office/../../../586648.klas4s23.mid-ica.nl/public_html/ergowijzer/script.js

document.addEventListener('DOMContentLoaded', function () {
    // ----- EVENT DELEGATION -----
    document.body.addEventListener('click', function (event) {
        const target = event.target;

        // Wishlist functionaliteit
        if (target.closest('.wishlist-icon')) {
            toggleWishlist(target.closest('.wishlist-icon'));
        }

        // Product modal functionaliteit
        if (target.closest('.product-button')) {
            const productCard = target.closest('.product-card');
            const product = {
                title: productCard.querySelector('.product-title').textContent,
                price: productCard.querySelector('.product-price').textContent,
                image: productCard.querySelector('.product-image img').src
            };
            const category = productCard.dataset.category || 'default';
            showProductModal(product, category);
        }

        // Modal sluiten
        if (target.classList.contains('close-modal') || target.classList.contains('modal')) {
            closeModal();
        }
    });

    function toggleWishlist(icon) {
        icon.classList.toggle('active');
        const svg = icon.querySelector('svg path');
        const isActive = icon.classList.contains('active');

        svg.style.fill = isActive ? '#ff4057' : 'none';
        svg.style.stroke = isActive ? '#ff4057' : '#ccc';

        showNotification(isActive ? 'Toegevoegd aan wishlist!' : 'Verwijderd uit wishlist!');
    }

    function showNotification(message) {
        const notification = document.createElement('div');
        notification.className = 'notification';
        notification.textContent = message;
        document.body.appendChild(notification);

        setTimeout(() => {
            notification.classList.add('fade-out');
            setTimeout(() => notification.remove(), 500);
        }, 2500);
    }

    function showProductModal(product, category) {
        const template = productTemplates[category] || productTemplates.default;

        const modal = document.createElement('div');
        modal.className = 'modal';
        modal.innerHTML = `
            <div class="modal-content">
                <span class="close-modal">&times;</span>
                <div class="modal-image">
                    <img src="${product.image}" alt="${product.title}">
                </div>
                <div class="modal-info">
                    <h2>${product.title}</h2>
                    <p class="modal-price">${product.price}</p>
                    <div class="modal-rating">${template.rating}</div>
                    <p class="modal-description">${template.description}</p>
                    <div class="modal-features">
                        <h3>Key Features:</h3>
                        <ul>
                            ${template.features.map(feat => `<li>${feat}</li>`).join('')}
                        </ul>
                    </div>
                    <button class="modal-buy">Toevoegen aan winkelwagen</button>
                </div>
            </div>
        `;

        document.body.appendChild(modal);
        document.body.style.overflow = 'hidden';
    }

    function closeModal() {
        const modal = document.querySelector('.modal');
        if (modal) {
            modal.classList.add('fade-out');
            setTimeout(() => {
                modal.remove();
                document.body.style.overflow = '';
            }, 300);
        }
    }
});

// ----- PRODUCT TEMPLATE CONFIG -----
const productTemplates = {
    mouses: {
        description: "Ergonomische muis voor comfortabel gebruik.",
        features: [
            "57° ergonomisch ontwerp voor polscomfort",
            "Instelbare DPI (800-16000) voor precisie",
            "Textuurgrip voor extra controle",
            "Meerdere apparaten via Bluetooth 5.0",
            "30 dagen batterijduur met snelle lading"
        ],
        rating: "★★★★★ (342 reviews)"
    },
    keyboards: {
        description: "Mechanisch toetsenbord met RGB-verlichting.",
        features: [
            "16.8 miljoen kleuren RGB-verlichting",
            "Cherry MX schakelaars (Red/Blue/Brown)",
            "Afneembare USB-C kabel",
            "Verstelbare voeten met 3 hoeken"
        ],
        rating: "★★★★☆ (278 reviews)"
    },
    desks: {
        description: "Duurzaam bureau met verstelbare hoogte.",
        features: [
            "Compact ontwerp met muurbevestiging",
            "Eco-gecertificeerde materialen",
            "Elektrische of handmatige hoogte-instelling",
            "Geïntegreerde stopcontacten en USB-poorten",
            "Draagvermogen tot 150kg"
        ],
        rating: "★★★★☆ (189 reviews)"
    },
    chairs: {
        description: "Ergonomische bureaustoel met premium afwerking.",
        features: [
            "Stalen frame met versterkte kruissteunen",
            "Duurzaam bamboe zitvlak met matte afwerking",
            "Slim ontwerp met draadloze oplader en USB-C",
            "Geavanceerd kabelbeheer",
            "Stille werking (<30dB) met veiligheidssysteem"
        ],
        rating: "★★★★★ (412 reviews)"
    },
    default: {
        description: "Hoogwaardig product met uitstekende prestaties.",
        features: ["Duurzaam design", "Energiezuinig", "Gebruiksvriendelijk", "Lange levensduur"],
        rating: "★★★★☆ (100+ reviews)"
    }
};


document.addEventListener('DOMContentLoaded', function() {
    // Get elements
    const modal = document.getElementById('mouseModal');
    const btn = document.querySelector('.product-button.details');
    const span = document.querySelector('.close-btn');
    
    // When user clicks the details button
    btn.onclick = function() {
      modal.style.display = "block";
      document.body.style.overflow = "hidden"; // Prevent scrolling
    }
    
    // When user clicks on (x)
    span.onclick = function() {
      modal.style.display = "none";
      document.body.style.overflow = "auto"; // Re-enable scrolling
    }
    
    // When user clicks anywhere outside the modal
    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
        document.body.style.overflow = "auto";
      }
    }
    
    // Thumbnail click functionality
    const thumbnails = document.querySelectorAll('.thumbnail');
    const mainImage = document.querySelector('.main-image');
    
    thumbnails.forEach(thumb => {
      thumb.addEventListener('click', function() {
        // In a real implementation, you would swap the main image src
        // For this example, we'll just highlight the clicked thumbnail
        thumbnails.forEach(t => t.style.borderColor = 'transparent');
        this.style.borderColor = '#4a6bff';
      });
    });
    
    // Color selection functionality
    const colors = document.querySelectorAll('.color');
    
    colors.forEach(color => {
      color.addEventListener('click', function() {
        colors.forEach(c => c.classList.remove('active'));
        this.classList.add('active');
      });
    });
    
    // Add keyboard escape functionality
    document.addEventListener('keydown', function(event) {
      if (event.key === "Escape" && modal.style.display === "block") {
        modal.style.display = "none";
        document.body.style.overflow = "auto";
      }
    });
  });

🎯 Available Actions