JordanJPatt/vibecoding1

1// VibeCoding1 - Main Application Script2 3class VibeCoding1 {4    constructor() {5        this.theme = 'light';6        this.isDark = false;7        this.init();8    }9 10    init() {11        this.setupThemeToggle();12        this.setupAnimations();13        this.setupCodeHighlighting();14        this.setupResponsiveNavigation();15        this.loadPreferences();16        console.log('🚀 VibeCoding1 initialized successfully!');17    }18 19    // Theme Management20    setupThemeToggle() {21        const themeToggle = document.getElementById('theme-toggle');22        if (themeToggle) {23            themeToggle.addEventListener('click', () => this.toggleTheme());24        }25 26        // Check for saved theme preference or default to light mode27        const savedTheme = localStorage.getItem('vibecoding1-theme');28        if (savedTheme) {29            this.setTheme(savedTheme);30        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {31            this.setTheme('dark');32        }33    }34 35    toggleTheme() {36        const newTheme = this.isDark ? 'light' : 'dark';37        this.setTheme(newTheme);38    }39 40    setTheme(theme) {41        this.theme = theme;42        this.isDark = theme === 'dark';43        44        const root = document.documentElement;45        if (this.isDark) {46            root.classList.add('dark');47            root.setAttribute('data-theme', 'dark');48        } else {49            root.classList.remove('dark');50            root.setAttribute('data-theme', 'light');51        }52 53        // Update theme toggle icon54        const themeIcon = document.querySelector('#theme-toggle i');55        if (themeIcon) {56            themeIcon.setAttribute('data-feather', this.isDark ? 'sun' : 'moon');57        }58 59        // Save preference60        localStorage.setItem('vibecoding1-theme', theme);61        62        // Refresh Feather icons63        if (typeof feather !== 'undefined') {64            feather.replace();65        }66    }67 68    // Animation Setup69    setupAnimations() {70        // Intersection Observer for fade-in animations71        const observerOptions = {72            threshold: 0.1,73            rootMargin: '0px 0px -50px 0px'74        };75 76        const observer = new IntersectionObserver((entries) => {77            entries.forEach(entry => {78                if (entry.isIntersecting) {79                    entry.target.classList.add('fade-in-up');80                }81            });82        }, observerOptions);83 84        // Observe cards and sections85        document.querySelectorAll('.card, section').forEach(el => {86            observer.observe(el);87        });88    }89 90    // Code Highlighting91    setupCodeHighlighting() {92        // Add syntax highlighting classes to code blocks93        document.querySelectorAll('pre code').forEach(block => {94            const language = this.detectLanguage(block.textContent);95            block.classList.add(`language-${language}`);96        });97    }98 99    detectLanguage(code) {100        if (code.includes('function') || code.includes('const') || code.includes('let')) {101            return 'javascript';102        } else if (code.includes('<') && code.includes('>')) {103            return 'html';104        } else if (code.includes('{') && code.includes('}')) {105            return 'css';106        }107        return 'text';108    }109 110    // Responsive Navigation111    setupResponsiveNavigation() {112        // Mobile menu toggle (if needed)113        const mobileMenuButton = document.getElementById('mobile-menu-button');114        if (mobileMenuButton) {115            mobileMenuButton.addEventListener('click', () => {116                const menu = document.getElementById('mobile-menu');117                menu.classList.toggle('hidden');118            });119        }120    }121 122    // Preferences Management123    loadPreferences() {124        const preferences = {125            theme: localStorage.getItem('vibecoding1-theme') || 'light',126            animations: localStorage.getItem('vibecoding1-animations') || 'true',127            codeTheme: localStorage.getItem('vibecoding1-code-theme') || 'dark'128        };129        130        this.preferences = preferences;131        return preferences;132    }133 134    savePreferences() {135        Object.keys(this.preferences).forEach(key => {136            localStorage.setItem(`vibecoding1-${key}`, this.preferences[key]);137        });138    }139 140    // Utility Methods141    showNotification(message, type = 'info') {142        const notification = document.createElement('div');143        notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-x-full`;144        145        const bgColor = {146            'info': 'bg-blue-500',147            'success': 'bg-green-500',148            'warning': 'bg-yellow-500',149            'error': 'bg-red-500'150        }[type] || 'bg-blue-500';151        152        notification.classList.add(bgColor);153        notification.innerHTML = `154            <div class="flex items-center text-white">155                <i data-feather="${type === 'error' ? 'alert-circle' : 'check-circle'}" class="w-5 h-5 mr-2"></i>156                ${message}157            </div>158        `;159        160        document.body.appendChild(notification);161        162        // Animate in163        setTimeout(() => {164            notification.classList.remove('translate-x-full');165        }, 100);166        167        // Animate out and remove168        setTimeout(() => {169            notification.classList.add('translate-x-full');170            setTimeout(() => {171                document.body.removeChild(notification);172            }, 300);173        }, 3000);174        175        if (typeof feather !== 'undefined') {176            feather.replace();177        }178    }179 180    // Color Theme Configuration181    setColorTheme(primary, secondary, theme) {182        const root = document.documentElement;183        root.style.setProperty('--primary-color', primary);184        root.style.setProperty('--secondary-color', secondary);185        186        if (theme === 'dark') {187            this.setTheme('dark');188        } else if (theme === 'light') {189            this.setTheme('light');190        }191    }192}193 194// Utility Functions195function copyCode() {196    const codeElement = document.getElementById('code-example');197    if (codeElement) {198        const text = codeElement.textContent;199        navigator.clipboard.writeText(text).then(() => {200            if (window.vibecoding1) {201                window.vibecoding1.showNotification('Code copied to clipboard!', 'success');202            }203        }).catch(() => {204            if (window.vibecoding1) {205                window.vibecoding1.showNotification('Failed to copy code', 'error');206            }207        });208    }209}210 211// Initialize application when DOM is loaded212document.addEventListener('DOMContentLoaded', () => {213    window.vibecoding1 = new VibeCoding1();214});215 216// Global error handling217window.addEventListener('error', (event) => {218    console.error('VibeCoding1 Error:', event.error);219    if (window.vibecoding1) {220        window.vibecoding1.showNotification('An unexpected error occurred', 'error');221    }222});223 224// Export for use in other scripts225if (typeof module !== 'undefined' && module.exports) {226    module.exports = VibeCoding1;227}