clfs2026/collage-carnival

1 2document.addEventListener('DOMContentLoaded', () => {3    // Sample data (in a real app, this would come from an API)4    const collages = [5        // Add your own collage data here6        { id: 1, title: "Your Title", artist: "Your Name", imageUrl: "http://static.photos/category/640x360/1", likes: 0 },7        // Add more as needed8    ];9 10    const artists = [11        // Add your own artist data here12        { id: 1, name: "Your Name", avatar: "http://static.photos/people/200x200/1", collages: 0 },13        // Add more as needed14    ];15// Render collages in gallery page16    const galleryGrid = document.querySelector('#gallery-grid');17    if (galleryGrid) {18        galleryGrid.innerHTML = collages.map(collage => `19            <div class="collage-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-all">20                <div class="h-64 bg-cover bg-center" style="background-image: url('${collage.imageUrl}')"></div>21                <div class="p-6">22                    <h3 class="text-xl font-semibold text-indigo-900 mb-2">${collage.title}</h3>23                    <p class="text-indigo-600">Artist: ${collage.artist}</p>24                    <div class="mt-4 flex justify-between items-center">25                        <span class="text-indigo-500 flex items-center">26                            <i data-feather="heart" class="w-4 h-4 mr-1"></i>27                            ${collage.likes}28                        </span>29                        <a href="#" class="text-indigo-500 hover:text-indigo-700 transition-colors text-sm">30                            View Details31                        </a>32                    </div>33                </div>34            </div>35        `).join('');36        feather.replace();37    }38 39    // Render artists in community page40    const artistsGrid = document.querySelector('#artists-grid');41    if (artistsGrid) {42        artistsGrid.innerHTML = artists.map(artist => `43            <div class="artist-card bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-all text-center">44                <div class="w-24 h-24 rounded-full bg-cover bg-center mx-auto mb-4" style="background-image: url('${artist.avatar}')"></div>45                <h3 class="text-xl font-semibold text-indigo-900 mb-1">${artist.name}</h3>46                <p class="text-indigo-500 text-sm">${artist.collages} collages</p>47                <a href="#" class="mt-3 inline-block text-indigo-600 hover:text-indigo-800 text-sm font-medium">48                    View Profile49                </a>50            </div>51        `).join('');52        53        feather.replace();54    }55 56    // Handle form submission on upload page57    const uploadForm = document.getElementById('upload-form');58    if (uploadForm) {59        uploadForm.addEventListener('submit', (e) => {60            e.preventDefault();61            62            const title = document.getElementById('title').value;63            const artist = document.getElementById('artist').value;64            const fileInput = document.getElementById('dropzone-file');65            66            if (!title || !artist || !fileInput.files[0]) {67                alert('Please fill all fields and select an image');68                return;69            }70            71            // Show success message72            const successMessage = document.createElement('div');73            successMessage.className = 'fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 animate-fade-in';74            successMessage.innerHTML = `75                <div class="flex items-center">76                    <i data-feather="check-circle" class="w-5 h-5 mr-2"></i>77                    <span>Collage "${title}" submitted successfully!</span>78                </div>79            `;80            document.body.appendChild(successMessage);81            feather.replace();82            83            // Remove message after 3 seconds84            setTimeout(() => {85                successMessage.classList.add('animate-fade-out');86                setTimeout(() => successMessage.remove(), 300);87            }, 3000);88            89            uploadForm.reset();90        });91    }92 93    // Animation styles94    const style = document.createElement('style');95style.textContent = `96    @keyframes fadeInUp {97        from { opacity: 0; transform: translateY(20px); }98        to { opacity: 1; transform: translateY(0); }99    }100    @keyframes fadeIn {101        from { opacity: 0; }102        to { opacity: 1; }103    }104    @keyframes fadeOut {105        from { opacity: 1; }106        to { opacity: 0; }107    }108    .animate-fade-in-up {109        animation: fadeInUp 0.6s ease-out forwards;110    }111    .animate-fade-in {112        animation: fadeIn 0.3s ease-out forwards;113    }114    .animate-fade-out {115        animation: fadeOut 0.3s ease-out forwards;116    }117`;118document.head.appendChild(style);119}120 121    // Add animation classes to elements as they come into view122    const animateOnScroll = () => {123        const elements = document.querySelectorAll('.collage-card, .artist-card');124        elements.forEach(el => {125            const rect = el.getBoundingClientRect();126            if (rect.top < window.innerHeight - 100) {127                el.classList.add('animate-fade-in-up');128            }129        });130    };131 132    window.addEventListener('scroll', animateOnScroll);133    animateOnScroll(); // Run once on load134});