script.js

// ScatBoi Art Gen JavaScript
class ScatBoiArtGenerator {
    constructor() {
        this.gallery = document.getElementById('gallery');
        this.promptInput = document.getElementById('promptInput');
        this.generateBtn = document.getElementById('generateBtn');
        this.loadingState = document.getElementById('loadingState');
        
        this.initializeEventListeners();
        this.loadSampleImages();
    }

    initializeEventListeners() {
        this.generateBtn.addEventListener('click', () => this.generateArt());
        this.promptInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                this.generateArt();
            }
        });
    }

    async generateArt() {
        const prompt = this.promptInput.value.trim();
        
        if (!prompt) {
            this.showNotification('Please enter a prompt first! 💩', 'warning');
            return;
        }

        // Check if prompt contains relevant keywords
        if (!this.isValidPrompt(prompt)) {
            this.showNotification('Your prompt should be more scatboi-related! 💩', 'warning');
            return;
        }

        this.showLoading(true);
        
        try {
            // Simulate AI generation delay
            await new Promise(resolve => setTimeout(resolve, 2000));
            
            // Generate unique image based on prompt
            const imageData = await this.createUniqueImage(prompt);
            this.displayGeneratedImage(imageData);
            
            this.showNotification('Your scatboi art has been generated! 🎨', 'success');
        } catch (error) {
            this.showNotification('Oops! Something went wrong. Try again! 💩', 'error');
        } finally {
            this.showLoading(false);
        }
    }

    isValidPrompt(prompt) {
        const keywords = ['boy', 'poop', 'toilet', 'bathroom', 'scat', 'dump', 'turd', 'crap'];
        return keywords.some(keyword => prompt.toLowerCase().includes(keyword));
    }

    async createUniqueImage(prompt) {
        // Create a unique hash from the prompt
        const hash = this.hashCode(prompt);
        
        // Use placeholder service with consistent seed
        const seed = Math.abs(hash % 1000);
        const category = ['people', 'minimal', 'abstract'][Math.abs(hash % 3)];
        
        return {
            url: `http://static.photos/${category}/640x360/${seed}`,
            prompt: prompt,
            timestamp: new Date().toISOString(),
            id: Math.random().toString(36).substr(2, 9)
        };
    }

    hashCode(str) {
        let hash = 0;
        for (let i = 0; i < str.length; i++) {
            const char = str.charCodeAt(i);
            hash = ((hash << 5) - hash) + char;
            hash = hash & hash;
        }
        return hash;
    }

    displayGeneratedImage(imageData) {
        const imageCard = this.createImageCard(imageData);
        this.gallery.insertBefore(imageCard, this.gallery.firstChild);
        
        // Add fade-in animation
        setTimeout(() => {
            imageCard.classList.add('fade-in');
        }, 100);
        
        // Clear input
        this.promptInput.value = '';
    }

    createImageCard(imageData) {
        const card = document.createElement('div');
        card.className = 'image-card bg-white rounded-2xl shadow-lg overflow-hidden';
        
        card.innerHTML = `
            <div class="relative group">
                <img 
                    src="${imageData.url}" 
                    alt="Generated scatboi art"
                    class="w-full h-64 object-cover"
                    onerror="this.src='http://static.photos/minimal/640x360/42'"
                >
                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-all duration-300 flex items-center justify-center">
                    <button 
                        onclick="scatBoiArtGenerator.downloadImage('${imageData.url}', '${imageData.id}')"
                        class="opacity-0 group-hover:opacity-100 bg-white text-gray-800 p-3 rounded-full transform scale-0 group-hover:scale-100 transition-all duration-300"
                    >
                        <i data-feather="download" class="w-5 h-5"></i>
                    </button>
                </div>
            </div>
            <div class="p-6">
                <p class="text-gray-700 text-sm mb-4 line-clamp-3">${imageData.prompt}</p>
                <div class="flex items-center justify-between text-xs text-gray-500">
                    <span><i data-feather="clock" class="w-4 h-4 inline mr-1"></i>${new Date(imageData.timestamp).toLocaleTimeString()}</span>
                    <span><i data-feather="hash" class="w-4 h-4 inline mr-1"></i>${imageData.id}</span>
                </div>
            </div>
        `;
        
        return card;
    }

    async loadSampleImages() {
        const samplePrompts = [
            "A boy sitting on a rainbow toilet in space, shooting stars made of poop",
            "Cute anime boy pooping golden nuggets in a magical garden",
            "Cartoon boy on a giant toilet throne, surrounded by poop emojis",
            "A boy reading a book while pooping in a forest, birds carrying away the poop",
            "Superhero boy pooping lightning bolts in the city sky"
        ];

        for (let i = 0; i < 3; i++) {
            const imageData = await this.createUniqueImage(samplePrompts[i]);
            const card = this.createImageCard(imageData);
            card.classList.add('fade-in');
            this.gallery.appendChild(card);
        }
    }

    downloadImage(url, id) {
        const link = document.createElement('a');
        link.href = url;
        link.download = `scatboi-art-${id}.jpg`;
        link.click();
        
        this.showNotification('Image downloaded! 💩', 'success');
    }

    showLoading(show) {
        this.loadingState.classList.toggle('hidden', !show);
        this.generateBtn.disabled = show;
        this.generateBtn.classList.toggle('pulse', show);
    }

    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 fade-in ${
            type === 'success' ? 'bg-green-500 text-white' :
            type === 'warning' ? 'bg-amber-500 text-white' :
            type === 'error' ? 'bg-red-500 text-white' :
            'bg-blue-500 text-white'
        }`;
        
        notification.innerHTML = `
            <div class="flex items-center">
                <span>${message}</span>
                <button onclick="this.parentElement.parentElement.remove()" class="ml-4">
                    <i data-feather="x" class="w-4 h-4"></i>
                </button>
            </div>
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.remove();
        }, 3000);
    }
}

// Initialize the app
const scatBoiArtGenerator = new ScatBoiArtGenerator();

// Add some fun easter eggs
document.addEventListener('keydown', (e) => {
    // Konami code for secret mode
    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
        console.log('💩 Secret scatboi mode activated! 💩');
    }
});

// Add smooth scrolling for any anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    });
});