script.js

 
        // Theme toggle functionality
        const body = document.body;
        const logoContainer = document.getElementById('logo-container');
        const menuToggle = document.getElementById('menu-toggle');
        const sidebar = document.getElementById('cake-sidenav');
        const mainContent = document.getElementById('main-content');

        logoContainer.addEventListener('click', toggleTheme);
        logoContainer.addEventListener('keypress', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                toggleTheme();
            }
        });

        function toggleTheme() {
            body.classList.add('transitioning');
            body.classList.toggle('dark-theme');
            body.classList.toggle('light-theme');

            setTimeout(() => {
                body.classList.remove('transitioning');
            }, 300);
        }

        // Mobile menu toggle
        menuToggle.addEventListener('click', function () {
            sidebar.classList.toggle('show');
            mainContent.classList.toggle('expanded');
        });

        // Load content functionality
        function loadContent(htmlFile) {
            const contentContainer = document.getElementById('content-container');
            contentContainer.innerHTML = `
                <iframe src="${htmlFile}" 
                        frameborder="0" 
                        width="100%" 
                        height="600px" 
                        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                        title="HTML Tutorial Content">
                </iframe>
            `;

            // Show content container and hide other sections
            contentContainer.style.display = 'block';
            const elementsToHide = document.querySelectorAll('.hideable');
            elementsToHide.forEach(element => {
                element.style.display = 'none';
            });

            // Close mobile menu if open
            if (window.innerWidth <= 768) {
                sidebar.classList.remove('show');
                mainContent.classList.remove('expanded');
            }
        }

        // Copy code functionality
        function copyCode(iconElement) {
            const codeElement = iconElement.nextElementSibling.querySelector('code') ||
                iconElement.nextElementSibling;
            const textToCopy = codeElement.textContent || codeElement.innerText;

            navigator.clipboard.writeText(textToCopy).then(() => {
                // Visual feedback
                iconElement.style.transform = 'scale(1.2)';
                iconElement.style.opacity = '1';
                setTimeout(() => {
                    iconElement.style.transform = 'scale(1)';
                    iconElement.style.opacity = '0.7';
                }, 200);
            }).catch(err => {
                console.error('Failed to copy: ', err);
            });
        }

        // Handle window resize
        window.addEventListener('resize', function () {
            if (window.innerWidth > 768) {
                sidebar.classList.remove('show');
                mainContent.classList.remove('expanded');
            }
        });

        // Initialize theme based on user preference
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
            body.classList.remove('dark-theme');
            body.classList.add('light-theme');
        }

        // Handle system theme changes
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
            if (e.matches) {
                body.classList.remove('light-theme');
                body.classList.add('dark-theme');
            }
        });

        // Smooth scrolling for accessibility
        document.addEventListener('keydown', function (e) {
            if (e.key === 'Tab') {
                document.body.classList.add('keyboard-navigation');
            }
        });

        document.addEventListener('mousedown', function () {
            document.body.classList.remove('keyboard-navigation');
        });