// Premium character data with enhanced details const characters = [ { id: 1, name: "Seraphina Nightshade", image: "http://static.photos/purple/320x240/133", likes: "2.1M", description: "Mysterious vampire aristocrat with a dark past | Enigmatic & Seductive", tags: ["Premium", "Vampire", "Aristocrat", "Mysterious"], isPremium: true }, { id: 2, name: "Kael Dragonheart", image: "http://static.photos/red/320x240/245", likes: "1.8M", description: "Noble dragon rider from ancient realms | Brave & Honorable", tags: ["Premium", "Dragon", "Warrior", "Noble"], isPremium: true }, { id: 3, name: "Luna Starweaver", image: "http://static.photos/blue/320x240/356", likes: "3.2M", description: "Celestial sorceress mastering cosmic magic | Wise & Ethereal", tags: ["Premium", "Sorceress", "Cosmic", "Wise"], isPremium: true }, { id: 4, name: "Dante Inferno", image: "http://static.photos/orange/320x240/467", likes: "2.7M", description: "Rebel demon prince seeking redemption | Charismatic & Complex", tags: ["Premium", "Demon", "Rebel", "Complex"], isPremium: true }, { id: 5, name: "Aria Moonwhisper", image: "http://static.photos/green/320x240/578", likes: "1.9M", description: "Elven archer守护者 of ancient forests | Graceful & Protective", tags: ["Premium", "Elf", "Archer", "Nature"], isPremium: true }, { id: 6, name: "Zara Cyberpunk", image: "http://static.photos/pink/320x240/689", likes: "2.4M", description: "Hacker extraordinaire from neon districts | Tech-Savvy & Edgy", tags: ["Premium", "Cyberpunk", "Hacker", "Futuristic"], isPremium: true }, { id: 7, name: "Orion Blackthorne", image: "http://static.photos/black/320x240/790", likes: "2.3M", description: "Gothic noble with a haunted mansion | Brooding & Mysterious", tags: ["Premium", "Gothic", "Noble", "Haunted"], isPremium: true }, { id: 8, name: "Ivy Thornfield", image: "http://static.photos/teal/320x240/801", likes: "1.6M", description: "Botanist with magical plant abilities | Gentle & Nurturing", tags: ["Premium", "Botanist", "Magic", "Gentle"], isPremium: true } ]; // Populate characters container with premium styling function populateCharacters(chars) { const container = document.getElementById('characters-container'); if (!container) return; container.innerHTML = ''; chars.forEach((char, index) => { const card = document.createElement('custom-character-card'); card.setAttribute('data-id', char.id); card.setAttribute('data-name', char.name); card.setAttribute('data-image', char.image); card.setAttribute('data-likes', char.likes); card.setAttribute('data-description', char.description); card.setAttribute('data-tags', JSON.stringify(char.tags)); card.setAttribute('data-premium', char.isPremium || false); // Add animation delay for staggered effect card.style.animationDelay = `${index * 0.1}s`; container.appendChild(card); }); } // Initialize characters when DOM is loaded document.addEventListener('DOMContentLoaded', function() { populateCharacters(characters); }); // Character carousel navigation document.addEventListener('DOMContentLoaded', function() { const nextBtn = document.getElementById('next-characters'); const prevBtn = document.getElementById('prev-characters'); const container = document.getElementById('characters-container'); if (nextBtn && container) { nextBtn.addEventListener('click', function() { container.scrollBy({ left: 300, behavior: 'smooth' }); }); } if (prevBtn && container) { prevBtn.addEventListener('click', function() { container.scrollBy({ left: -300, behavior: 'smooth' }); }); } });