<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Maxim Van Dorn - Creative Developer</title>
    <link href="styles.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/logo.png">
    <meta name="description" content="CS Senior at University of Vermont specializing in creative problem-solving and ethical computing">
</head>
<body>
    <!-- Video Background -->
    <div class="video-background">
        <video autoplay muted loop playsinline>
            <source src="images/explore.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    
    <!-- Video Overlay -->
    <div class="video-overlay"></div>
    
    <!-- Color Mask -->
    <div class="color-mask"></div>

    <div class="page">
        <!-- Navigation -->
        <nav class="main-nav">
            <div class="nav-brand">
                <h1 class="logo">Maxim Van Dorn</h1>
                <span class="tagline">Creative Developer</span>
            </div>
            <button class="nav-toggle" aria-label="Toggle navigation menu">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </nav>

        <!-- Side Menu -->
        <div class="side-menu" id="sideMenu">
            <div class="menu-content">
                <div class="menu-nav">
                    <a href="index.html" class="menu-link active">Home</a>
                    <a href="about.html" class="menu-link">About</a>
                    <a href="projects.html" class="menu-link">Projects</a>
                    <a href="resume.html" class="menu-link">Resume</a>
                </div>
            </div>
        </div>

        <!-- Hero Section -->
        <main class="hero-section">
            <div class="hero-content">
                <h1 class="hero-title">Maxim Van Dorn</h1>
                <p class="hero-description">
                    Computer Science Senior at University of Vermont
                    <br>
                    Passionate about ethical computing and creative problem-solving
                </p>
                <div class="hero-actions">
                    <a href="about.html" class="btn btn-primary">Learn More</a>
                    <a href="projects.html" class="btn btn-secondary">View Projects</a>
                </div>
            </div>
        </main>

        <!-- Control Panel Toggle -->
        <div class="control-toggle" id="controlToggle" title="Toggle Controls">
            ⚙️
        </div>

        <!-- Control Panel -->
        <div class="control-panel" id="controlPanel">
            <div class="control-group">
                <label class="control-label">Video Filters</label>
                <div class="control-buttons">
                    <button class="control-btn active" data-filter="none">None</button>
                    <button class="control-btn" data-filter="invert">Invert</button>
                    <button class="control-btn" data-filter="grayscale">Greyscale</button>
                    <button class="control-btn" data-filter="sepia">Sepia</button>
                    <button class="control-btn" data-filter="contrast">Contrast</button>
                    <button class="control-btn" data-filter="brightness">Brightness</button>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Background Blur</label>
                <div class="control-buttons">
                    <button class="control-btn blur-btn" data-blur="off">Off</button>
                    <button class="control-btn blur-btn" data-blur="on">On</button>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Mask Color</label>
                <input type="color" class="color-picker" id="colorPicker" value="#ffffff">
            </div>
        </div>
    </div>

    <script>
        // Navigation functionality
        const navToggle = document.querySelector('.nav-toggle');
        const sideMenu = document.querySelector('.side-menu');

        navToggle.addEventListener('click', () => {
            navToggle.classList.toggle('active');
            sideMenu.classList.toggle('active');
        });

        // Control panel toggle functionality
        const controlToggle = document.getElementById('controlToggle');
        const controlPanel = document.getElementById('controlPanel');

        controlToggle.addEventListener('click', () => {
            controlPanel.classList.toggle('active');
        });

        // Close control panel when clicking outside
        document.addEventListener('click', (e) => {
            if (!controlPanel.contains(e.target) && !controlToggle.contains(e.target)) {
                controlPanel.classList.remove('active');
            }
        });

        // Settings persistence
        const VideoSettings = {
            load() {
                return {
                    filter: localStorage.getItem('videoFilter') || 'none',
                    blur: localStorage.getItem('videoBlur') || 'off',
                    maskColor: localStorage.getItem('maskColor') || '#ffffff'
                };
            },
            
            save(settings) {
                localStorage.setItem('videoFilter', settings.filter);
                localStorage.setItem('videoBlur', settings.blur);
                localStorage.setItem('maskColor', settings.maskColor);
            }
        };

        // Filter functionality
        const filterButtons = document.querySelectorAll('[data-filter]');
        const blurButtons = document.querySelectorAll('[data-blur]');
        const videoBackground = document.querySelector('.video-background');
        const colorPicker = document.getElementById('colorPicker');
        const colorMask = document.querySelector('.color-mask');

        // Load saved settings
        const savedSettings = VideoSettings.load();

        // Apply video filter (preserve blur)
        function applyVideoFilter(filter) {
            // Remove all filter classes EXCEPT blur
            videoBackground.classList.remove('filter-invert', 'filter-grayscale', 'filter-sepia', 'filter-contrast', 'filter-brightness');
            
            if (filter !== 'none') {
                videoBackground.classList.add(`filter-${filter}`);
            }
        }

        // Apply blur filter
        function applyBlurFilter(blur) {
            if (blur === 'on') {
                videoBackground.classList.add('filter-blur');
            } else {
                videoBackground.classList.remove('filter-blur');
            }
        }

        // Apply mask color
        function applyMaskColor(color) {
            const r = parseInt(color.substr(1, 2), 16);
            const g = parseInt(color.substr(3, 2), 16);
            const b = parseInt(color.substr(5, 2), 16);
            colorMask.style.background = `rgba(${r}, ${g}, ${b}, 0.4)`;
        }

        // Video filter buttons
        filterButtons.forEach(button => {
            button.addEventListener('click', () => {
                filterButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                
                const filter = button.dataset.filter;
                applyVideoFilter(filter);
                
                // Save settings
                const currentSettings = VideoSettings.load();
                currentSettings.filter = filter;
                VideoSettings.save(currentSettings);
            });
        });

        // Blur buttons
        blurButtons.forEach(button => {
            button.addEventListener('click', () => {
                blurButtons.forEach(btn => btn.classList.remove('active'));
                button.classList.add('active');
                
                const blur = button.dataset.blur;
                applyBlurFilter(blur);
                
                // Save settings
                const currentSettings = VideoSettings.load();
                currentSettings.blur = blur;
                VideoSettings.save(currentSettings);
            });
        });

        // Color picker functionality
        colorPicker.addEventListener('input', (e) => {
            const color = e.target.value;
            applyMaskColor(color);
            
            // Save settings
            const currentSettings = VideoSettings.load();
            currentSettings.maskColor = color;
            VideoSettings.save(currentSettings);
        });

        // Initialize settings on page load
        function initializeSettings() {
            // Apply saved filter
            applyVideoFilter(savedSettings.filter);
            filterButtons.forEach(btn => {
                if (btn.dataset.filter === savedSettings.filter) {
                    btn.classList.add('active');
                }
            });

            // Apply saved blur
            applyBlurFilter(savedSettings.blur);
            blurButtons.forEach(btn => {
                if (btn.dataset.blur === savedSettings.blur) {
                    btn.classList.add('active');
                }
            });

            // Apply saved mask color
            colorPicker.value = savedSettings.maskColor;
            applyMaskColor(savedSettings.maskColor);
        }

        // Initialize on page load
        initializeSettings();

        // Close menu when clicking outside
        document.addEventListener('click', (e) => {
            if (!sideMenu.contains(e.target) && !navToggle.contains(e.target)) {
                navToggle.classList.remove('active');
                sideMenu.classList.remove('active');
            }
        });
    </script>
</body>
</html>