script.js

// Generate particles
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 30; i++) {
    const particle = document.createElement('div');
    particle.className = 'particle';
    particle.style.left = Math.random() * 100 + '%';
    particle.style.top = Math.random() * 100 + '%';
    particle.style.animationDelay = Math.random() * 15 + 's';
    particle.style.animationDuration = (15 + Math.random() * 10) + 's';
    particlesContainer.appendChild(particle);
}

// Theme functionality
const themeInput = document.getElementById('themeInput');
const applyBtn = document.getElementById('applyBtn');
const themeTags = document.querySelectorAll('.theme-tag');

const themeKeywords = {
    'cyberpunk': ['cyber', 'futuristic', 'neon', 'tech', 'future', 'matrix', 'sci-fi'],
    'nature': ['nature', 'green', 'forest', 'jungle', 'plant', 'earth', 'eco'],
    'ocean': ['ocean', 'sea', 'water', 'blue', 'marine', 'beach', 'wave'],
    'sunset': ['sunset', 'dusk', 'evening', 'orange', 'warm', 'twilight'],
    'neon': ['neon', 'bright', 'vibrant', 'electric', 'glow', 'fluorescent']
};

function detectTheme(input) {
    const lowerInput = input.toLowerCase();
    
    for (const [theme, keywords] of Object.entries(themeKeywords)) {
        if (keywords.some(keyword => lowerInput.includes(keyword))) {
            return theme;
        }
    }
    
    const themes = ['cyberpunk', 'nature', 'ocean', 'sunset', 'neon'];
    return themes[Math.floor(Math.random() * themes.length)];
}

function showSuccess(themeName) {
    const msg = document.createElement('div');
    msg.className = 'success-msg';
    msg.textContent = `✨ ${themeName.charAt(0).toUpperCase() + themeName.slice(1)} theme applied!`;
    document.body.appendChild(msg);
    
    setTimeout(() => {
        msg.style.animation = 'slideIn 0.5s ease reverse';
        setTimeout(() => msg.remove(), 500);
    }, 3000);
}

function applyTheme(input) {
    if (!input.trim()) return;
    
    applyBtn.disabled = true;
    applyBtn.innerHTML = '<span class="loading">Processing...</span>';
    
    setTimeout(() => {
        const theme = detectTheme(input);
        document.body.className = theme;
        
        applyBtn.disabled = false;
        applyBtn.innerHTML = '<span>🎨 Transform</span>';
        themeInput.value = '';
        themeInput.placeholder = `Current: ${theme} ✨`;
        
        showSuccess(theme);
    }, 1500);
}

applyBtn.addEventListener('click', () => applyTheme(themeInput.value));

themeInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') applyTheme(themeInput.value);
});

themeTags.forEach(tag => {
    tag.addEventListener('click', function() {
        const theme = this.dataset.theme;
        applyTheme(theme);
    });
});

// Animate gallery items on hover
document.querySelectorAll('.gallery-item').forEach((item, index) => {
    item.style.animationDelay = (index * 0.1) + 's';
});

// Initial random theme
setTimeout(() => {
    const themes = ['cyberpunk', 'ocean', 'sunset'];
    applyTheme(themes[Math.floor(Math.random() * themes.length)]);
}, 800);