Spaces:

NeuralFalcon
/

Italian-Brainrot

Running

App Files Files Community

NeuralFalcon commited on Apr 9, 2025

Commit

541e778

verified ·

1 Parent(s): b7c43fd

Update index.html

Browse files

Files changed (1) hide show

index.html +232 -175

index.html CHANGED Viewed

@@ -1,45 +1,72 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Italian Brinarot</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
         body {
             font-family: 'Poppins', sans-serif;
-            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
         }
         .character-card {
             transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             perspective: 1000px;
         }
         .character-card:hover {
             transform: translateY(-8px);
-            box-shadow: 0 15px 30px rgba(0,0,0,0.12);
         }
         .image-container {
-            /* REMOVED clip-path: circle(50% at 50% 50%); */
-            background: linear-gradient(145deg, #ffffff, #e6e6e6);
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-            /* Tailwind classes will handle rounding and overflow */
         }
         .play-btn {
             transition: all 0.2s ease;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
         .play-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4);
         }
         .play-btn:active {
             transform: translateY(0);
@@ -51,247 +78,277 @@
             background-clip: text;
             color: transparent;
         }
         .header-divider {
             height: 4px;
             background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
         }
         @media (max-width: 640px) {
             .character-name {
-                font-size: 1rem;
             }
         }
     </style>
 </head>
-<body class="min-h-screen">
-    <div class="container mx-auto px-4 py-8">
         <!-- Header -->
-        <header class="text-center mb-12">
-            <h1 class="text-4xl md:text-5xl font-bold gradient-text mb-2">Italian Brinarot</h1>
-            <div class="header-divider w-32 mx-auto rounded-full mb-6"></div>
-            <p class="text-gray-600 max-w-2xl mx-auto">Discover the magical sounds of Italian Brinarot characters</p>
         </header>
         <!-- Character Grid -->
-        <div id="characterGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"></div>
     </div>
     <!-- Embedded Character Data -->
     <script>
         const characterData = {
-            "Bombardiro Crocodilo": {
-                "image_path": "./assets/Bombardiro_Crocodilo.png",
-                "audio_path": "./assets/Bombardiro_Crocodilo.wav"
-            },
-            "Tralalero Tralala": {
-                "image_path": "./assets/Tralalero_Tralala.png",
-                "audio_path": "./assets/Tralalero_Tralala.wav"
-            },
-            "Bombombini Gusini": {
-                "image_path": "./assets/Bombombini_Gusini.png",
-                "audio_path": "./assets/Bombombini_Gusini.wav"
-            },
-            "Tung Tung Tung Tung Tung Tung Tung Tung Tung Sahur": {
-                "image_path": "./assets/Tung_Tung_Tung_Tung_Tung_Tung_Tung_Tung_Tung_Sahur.png",
-                "audio_path": "./assets/Tung_Tung_Tung_Tung_Tung_Tung_Tung_Tung_Tung_Sahur.wav"
-            },
-            "Brr Brr Patapim": {
-                "image_path": "./assets/Brr_Brr_Patapim.png",
-                "audio_path": "./assets/Brr_Brr_Patapim.wav"
-            },
-            "Cappuccino Assassino": {
-                "image_path": "./assets/Cappuccino_Assassino.png",
-                "audio_path": "./assets/Cappuccino_Assassino.wav"
-            },
-            "Lirili Larila": {
-                "image_path": "./assets/Lirili_Larila.png",
-                "audio_path": "./assets/Lirili_Larila.wav"
-            },
-            "Trulimero Trulichina": {
-                "image_path": "./assets/Trulimero_Trulichina.png",
-                "audio_path": "./assets/Trulimero_Trulichina.wav"
-            },
-            "Boneca Ambalabu": {
-                "image_path": "./assets/Boneca_Ambalabu.png",
-                "audio_path": "./assets/Boneca_Ambalabu.wav"
-            },
-            "Chimpanzini Bananini": {
-                "image_path": "./assets/Chimpanzini_Bananini.png",
-                "audio_path": "./assets/Chimpanzini_Bananini.wav"
-            },
-            "Bananita Dolfinita": {
-                "image_path": "./assets/Bananita_Dolfinita.png",
-                "audio_path": "./assets/Bananita_Dolfinita.wav"
-            },
-            "Bluberini Octopusini": {
-                "image_path": "./assets/Bluberini_Octopusini.png",
-                "audio_path": "./assets/Bluberini_Octopusini.wav"
-            },
-            "Bobrito Bandito": {
-                "image_path": "./assets/Bobrito_Bandito.png",
-                "audio_path": "./assets/Bobrito_Bandito.wav"
-            },
-            "Brri Brri Bicus Dicus": {
-                "image_path": "./assets/Brri_Brri_Bicus_Dicus.png",
-                "audio_path": "./assets/Brri_Brri_Bicus_Dicus.wav"
-            },
-            "Burbaloni Luliloli": {
-                "image_path": "./assets/Burbaloni_Luliloli.png",
-                "audio_path": "./assets/Burbaloni_Luliloli.wav"
-            },
-            "Chimpanzini Annasini": {
-                "image_path": "./assets/Chimpanzini_Annasini.png",
-                "audio_path": "./assets/Chimpanzini_Annasini.wav"
-            },
-            "Chimpanzini Cocosini": {
-                "image_path": "./assets/Chimpanzini_Cocosini.png",
-                "audio_path": "./assets/Chimpanzini_Cocosini.wav"
-            },
-            "Cocofanto Elefanto": {
-                "image_path": "./assets/Cocofanto_Elefanto.png",
-                "audio_path": "./assets/Cocofanto_Elefanto.wav"
-            },
-            "Frigo Camelo Buffardello": {
-                "image_path": "./assets/frigo_camelo_buffardello.png",
-                "audio_path": "./assets/frigo_camelo_buffardello.wav"
-            },
-            "Giraffe Celeste": {
-                "image_path": "./assets/Giraffe_Celeste.png",
-                "audio_path": "./assets/Giraffe_Celeste.wav"
-            },
-            "Glorbo Fruttodrillo": {
-                "image_path": "./assets/Glorbo_Fruttodrillo.png",
-                "audio_path": "./assets/Glorbo_Fruttodrillo.wav"
-            },
-            "Il Cacto Hipopotoma": {
-                "image_path": "./assets/il_cacto_hipopotoma.png",
-                "audio_path": "./assets/il_cacto_hipopotoma.wav"
-            },
-            "Trippi Troppi Troppa Trippa": {
-                "image_path": "./assets/Trippi_Troppi_Troppa_Trippa.png",
-                "audio_path": "./assets/Trippi_Troppi_Troppa_Trippa.wav"
-            }
         };
         // Function to load and display characters
         function loadCharacters() {
-            const characterGrid = document.getElementById('characterGrid');
-            // Clear any existing content
-            characterGrid.innerHTML = '';
-            // Create cards for each character
             Object.entries(characterData).forEach(([name, data]) => {
                 const card = document.createElement('div');
-                card.className = 'character-card bg-white rounded-2xl overflow-hidden shadow-md flex flex-col items-center p-6';
-                // Image container - **MODIFIED** for square with rounded corners
                 const imageContainer = document.createElement('div');
-                // Added rounded-xl (you can change this) and overflow-hidden
-                imageContainer.className = 'image-container mb-4 w-40 h-40 flex items-center justify-center rounded-2xl overflow-hidden'; // <-- MODIFIED LINE
                 const image = document.createElement('img');
                 image.src = data.image_path.replace(/\\/g, '/');
                 image.alt = name;
-                image.className = 'w-full h-full object-cover'; // object-cover ensures the image fills the square container
                 imageContainer.appendChild(image);
                 // Character name
                 const nameElement = document.createElement('h3');
-                nameElement.className = 'character-name text-lg md:text-xl font-semibold text-gray-800 mb-3 text-center';
                 nameElement.textContent = name;
                 // Play/Pause button
                 const playButton = document.createElement('button');
-                // **MODIFIED** - Adjusted button gradient for better contrast/look (Optional)
-                playButton.className = 'play-btn text-white font-medium py-2 px-6 rounded-full flex items-center';
                 const playIcon = document.createElement('i');
-                playIcon.className = 'fas fa-play mr-2';
                 playButton.appendChild(playIcon);
                 playButton.appendChild(document.createTextNode('Play'));
-                // Audio element
                 const audio = new Audio(data.audio_path.replace(/\\/g, '/'));
-                let isPlaying = false;
-                // Keep track of all audios and buttons to manage pause state
-                let currentAudio = null;
-                let currentButton = null;
-                // Play/Pause button click handler - **REVISED** for better pause handling
                 playButton.addEventListener('click', () => {
-                    // Stop any other audio that might be playing
-                    document.querySelectorAll('audio').forEach(a => {
-                        if (a !== audio && !a.paused) {
-                            a.pause();
-                            // Reset the button associated with that audio
-                            const relatedButton = a.nextElementSibling; // Assuming button is the next sibling
-                            if (relatedButton && relatedButton.classList.contains('play-btn')) {
-                                relatedButton.innerHTML = '<i class="fas fa-play mr-2"></i>Play';
-                                relatedButton.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; // Reset background
-                                // Find the 'isPlaying' state for that audio (more complex, simplified here)
-                            }
-                         }
-                    });
-                     // Find *all* buttons and reset their state visually if they aren't the current one
-                    document.querySelectorAll('.play-btn').forEach(btn => {
-                        if (btn !== playButton && !btn.previousElementSibling.paused) { // Check if audio associated with *other* button is playing
-                           // This part is tricky without a direct link; the logic below handles the active one better.
-                        } else if (btn !== playButton) {
-                             btn.innerHTML = '<i class="fas fa-play mr-2"></i>Play';
-                             btn.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)';
-                        }
-                    });
-                    if (isPlaying) {
                         audio.pause();
                         playButton.innerHTML = '<i class="fas fa-play mr-2"></i>Play';
-                        playButton.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; // Reset background
-                        isPlaying = false;
-                        currentAudio = null;
-                        currentButton = null;
                     } else {
                         audio.currentTime = 0;
-                        audio.play();
                         playButton.innerHTML = '<i class="fas fa-pause mr-2"></i>Pause';
-                        playButton.style.background = '#ef4444'; // Example: Red background for pause state
-                        isPlaying = true;
-                        currentAudio = audio;
-                        currentButton = playButton;
                     }
                 });
-                // When audio ends, reset button
                 audio.addEventListener('ended', () => {
-                    playButton.innerHTML = '<i class="fas fa-play mr-2"></i>Play';
-                    playButton.style.background = 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'; // Reset background
-                    isPlaying = false;
-                    currentAudio = null;
-                    currentButton = null;
                 });
                 // Assemble the card
                 card.appendChild(imageContainer);
                 card.appendChild(nameElement);
-                card.appendChild(audio); // Keep audio in DOM for easier access if needed, hide it
-                audio.style.display = 'none';
                 card.appendChild(playButton);
                 // Add card to the grid
                 characterGrid.appendChild(card);
             });
-             // Improved pause handling: Add a global listener if needed, or rely on the button click logic above.
-             // The revised click handler above should now pause other audios when a new one is played.
         }
-        // Load characters when the page loads
         window.addEventListener('DOMContentLoaded', loadCharacters);
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en" class=""> <!-- Start without 'dark' class -->
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Italian Brinarot - Soundboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        /* Base styles */
         body {
             font-family: 'Poppins', sans-serif;
+            /* Smooth transition for theme changes */
+            @apply transition-colors duration-300 ease-in-out;
+        }
+        /* Light theme base */
+        body {
+             background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
+        }
+        /* Dark theme base */
+        .dark body {
+             background: linear-gradient(135deg, #1f2937 0%, #111827 100%); /* Dark gradient */
         }
         .character-card {
             transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             perspective: 1000px;
+            @apply transition-colors duration-300 ease-in-out; /* Transition background */
         }
         .character-card:hover {
             transform: translateY(-8px);
+            /* Enhanced hover shadow for both themes */
+            @apply shadow-xl dark:shadow-2xl dark:shadow-indigo-500/20;
         }
+        /* Specific light/dark styles will be applied via Tailwind classes directly */
         .image-container {
+             /* Keep the gradient or simplify */
+             background: linear-gradient(145deg, #ffffff, #e6e6e6);
+             box-shadow: 0 4px 15px rgba(0,0,0,0.08);
+             @apply transition-colors duration-300 ease-in-out;
+        }
+        .dark .image-container {
+             background: linear-gradient(145deg, #4b5563, #374151); /* Darker bg for image */
+             box-shadow: 0 4px 15px rgba(0,0,0,0.2);
         }
         .play-btn {
             transition: all 0.2s ease;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         }
+        .play-btn.playing {
+             background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* Red gradient for playing */
+        }
         .play-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 5px 15px rgba(118, 75, 162, 0.4);
         }
+         .play-btn.playing:hover {
+            box-shadow: 0 5px 15px rgba(239, 68, 68, 0.4); /* Red shadow */
+        }
         .play-btn:active {
             transform: translateY(0);
             background-clip: text;
             color: transparent;
         }
+        /* Optional: Slightly adjust gradient text for dark mode if needed */
+        /* .dark .gradient-text { ... } */
         .header-divider {
             height: 4px;
             background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+            @apply transition-all duration-300 ease-in-out;
+        }
+         .dark .header-divider {
+             background: linear-gradient(90deg, #818cf8 0%, #a78bfa 100%); /* Brighter gradient for dark */
+         }
+        /* Theme toggle button */
+        #theme-toggle {
+            @apply fixed top-5 right-5 z-50;
+            @apply w-12 h-12 rounded-full ;
+            @apply flex items-center justify-center;
+            @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm; /* Semi-transparent background */
+            @apply text-gray-600 dark:text-gray-300;
+            @apply hover:bg-white dark:hover:bg-gray-700;
+            @apply shadow-md hover:shadow-lg;
+            @apply transition-all duration-300 ease-in-out;
+            @apply cursor-pointer;
         }
+         #theme-toggle i {
+             @apply text-xl;
+         }
         @media (max-width: 640px) {
             .character-name {
+                font-size: 1rem; /* Already adjusted */
+            }
+            #theme-toggle {
+                @apply top-3 right-3 w-10 h-10; /* Smaller on mobile */
             }
+             #theme-toggle i {
+                 @apply text-lg;
+             }
         }
     </style>
 </head>
+<body class="min-h-screen"> <!-- Body class will be updated by JS -->
+    <!-- Theme Toggle Button -->
+    <button id="theme-toggle" aria-label="Toggle dark mode">
+        <i class="fas fa-moon"></i> <!-- Moon icon for light theme -->
+        <i class="fas fa-sun hidden"></i> <!-- Sun icon for dark theme -->
+    </button>
+    <div class="container mx-auto px-4 py-12 md:py-16">
         <!-- Header -->
+        <header class="text-center mb-12 md:mb-16">
+            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold gradient-text mb-3">Italian Brinarot</h1>
+            <div class="header-divider w-32 md:w-40 mx-auto rounded-full mb-6"></div>
+            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
+                Discover the magical sounds of Italian Brinarot characters
+            </p>
         </header>
         <!-- Character Grid -->
+        <div id="characterGrid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+            <!-- Character cards will be injected here by JS -->
+        </div>
     </div>
     <!-- Embedded Character Data -->
     <script>
         const characterData = {
+            // ... (Keep your characterData object exactly the same)
+            "Bombardiro Crocodilo": { "image_path": "./assets/Bombardiro_Crocodilo.png", "audio_path": "./assets/Bombardiro_Crocodilo.wav" },
+            "Tralalero Tralala": { "image_path": "./assets/Tralalero_Tralala.png", "audio_path": "./assets/Tralalero_Tralala.wav" },
+            "Bombombini Gusini": { "image_path": "./assets/Bombombini_Gusini.png", "audio_path": "./assets/Bombombini_Gusini.wav" },
+            "Tung Tung Tung Tung Tung Tung Tung Tung Tung Sahur": { "image_path": "./assets/Tung_Tung_Tung_Tung_Tung_Tung_Tung_Tung_Tung_Sahur.png", "audio_path": "./assets/Tung_Tung_Tung_Tung_Tung_Tung_Tung_Tung_Tung_Sahur.wav" },
+            "Brr Brr Patapim": { "image_path": "./assets/Brr_Brr_Patapim.png", "audio_path": "./assets/Brr_Brr_Patapim.wav" },
+            "Cappuccino Assassino": { "image_path": "./assets/Cappuccino_Assassino.png", "audio_path": "./assets/Cappuccino_Assassino.wav" },
+            "Lirili Larila": { "image_path": "./assets/Lirili_Larila.png", "audio_path": "./assets/Lirili_Larila.wav" },
+            "Trulimero Trulichina": { "image_path": "./assets/Trulimero_Trulichina.png", "audio_path": "./assets/Trulimero_Trulichina.wav" },
+            "Boneca Ambalabu": { "image_path": "./assets/Boneca_Ambalabu.png", "audio_path": "./assets/Boneca_Ambalabu.wav" },
+            "Chimpanzini Bananini": { "image_path": "./assets/Chimpanzini_Bananini.png", "audio_path": "./assets/Chimpanzini_Bananini.wav" },
+            "Bananita Dolfinita": { "image_path": "./assets/Bananita_Dolfinita.png", "audio_path": "./assets/Bananita_Dolfinita.wav" },
+            "Bluberini Octopusini": { "image_path": "./assets/Bluberini_Octopusini.png", "audio_path": "./assets/Bluberini_Octopusini.wav" },
+            "Bobrito Bandito": { "image_path": "./assets/Bobrito_Bandito.png", "audio_path": "./assets/Bobrito_Bandito.wav" },
+            "Brri Brri Bicus Dicus": { "image_path": "./assets/Brri_Brri_Bicus_Dicus.png", "audio_path": "./assets/Brri_Brri_Bicus_Dicus.wav" },
+            "Burbaloni Luliloli": { "image_path": "./assets/Burbaloni_Luliloli.png", "audio_path": "./assets/Burbaloni_Luliloli.wav" },
+            "Chimpanzini Annasini": { "image_path": "./assets/Chimpanzini_Annasini.png", "audio_path": "./assets/Chimpanzini_Annasini.wav" },
+            "Chimpanzini Cocosini": { "image_path": "./assets/Chimpanzini_Cocosini.png", "audio_path": "./assets/Chimpanzini_Cocosini.wav" },
+            "Cocofanto Elefanto": { "image_path": "./assets/Cocofanto_Elefanto.png", "audio_path": "./assets/Cocofanto_Elefanto.wav" },
+            "Frigo Camelo Buffardello": { "image_path": "./assets/frigo_camelo_buffardello.png", "audio_path": "./assets/frigo_camelo_buffardello.wav" },
+            "Giraffe Celeste": { "image_path": "./assets/Giraffe_Celeste.png", "audio_path": "./assets/Giraffe_Celeste.wav" },
+            "Glorbo Fruttodrillo": { "image_path": "./assets/Glorbo_Fruttodrillo.png", "audio_path": "./assets/Glorbo_Fruttodrillo.wav" },
+            "Il Cacto Hipopotoma": { "image_path": "./assets/il_cacto_hipopotoma.png", "audio_path": "./assets/il_cacto_hipopotoma.wav" },
+            "Trippi Troppi Troppa Trippa": { "image_path": "./assets/Trippi_Troppi_Troppa_Trippa.png", "audio_path": "./assets/Trippi_Troppi_Troppa_Trippa.wav" }
         };
+        const characterGrid = document.getElementById('characterGrid');
+        const themeToggleButton = document.getElementById('theme-toggle');
+        const sunIcon = themeToggleButton.querySelector('.fa-sun');
+        const moonIcon = themeToggleButton.querySelector('.fa-moon');
+        const htmlElement = document.documentElement; // Target <html> for dark class
+        let currentlyPlayingAudio = null;
+        let currentlyPlayingButton = null;
+        // Function to apply the theme
+        function applyTheme(theme) {
+            if (theme === 'dark') {
+                htmlElement.classList.add('dark');
+                moonIcon.classList.add('hidden');
+                sunIcon.classList.remove('hidden');
+                localStorage.setItem('theme', 'dark');
+            } else {
+                htmlElement.classList.remove('dark');
+                moonIcon.classList.remove('hidden');
+                sunIcon.classList.add('hidden');
+                localStorage.setItem('theme', 'light');
+            }
+        }
+        // Function to toggle the theme
+        function toggleTheme() {
+            const currentTheme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
+            applyTheme(currentTheme === 'dark' ? 'light' : 'dark');
+        }
         // Function to load and display characters
         function loadCharacters() {
+            characterGrid.innerHTML = ''; // Clear existing
             Object.entries(characterData).forEach(([name, data]) => {
                 const card = document.createElement('div');
+                // Apply base and dark mode classes using Tailwind
+                card.className = `
+                    character-card
+                    bg-white dark:bg-gray-800
+                    rounded-2xl overflow-hidden
+                    shadow-md hover:shadow-xl dark:hover:shadow-2xl dark:hover:shadow-indigo-500/20
+                    border border-gray-200 dark:border-gray-700/50
+                    flex flex-col items-center p-6
+                    transition-all duration-300 ease-in-out
+                `;
+                // Image container
                 const imageContainer = document.createElement('div');
+                imageContainer.className = `
+                    image-container mb-5 w-40 h-40 lg:w-44 lg:h-44
+                    flex items-center justify-center
+                    rounded-2xl overflow-hidden
+                    border-4 border-white/50 dark:border-gray-700/50
+                `; // Added slightly larger size on larger screens and border
                 const image = document.createElement('img');
                 image.src = data.image_path.replace(/\\/g, '/');
                 image.alt = name;
+                image.className = 'w-full h-full object-cover';
+                image.onerror = () => { // Basic error handling for images
+                    image.src = 'placeholder.png'; // Provide a fallback image path
+                    console.warn(`Image not found: ${data.image_path}`);
+                };
                 imageContainer.appendChild(image);
                 // Character name
                 const nameElement = document.createElement('h3');
+                nameElement.className = `
+                    character-name text-lg md:text-xl font-semibold
+                    text-gray-800 dark:text-gray-100
+                    mb-4 text-center transition-colors duration-300
+                `;
                 nameElement.textContent = name;
                 // Play/Pause button
                 const playButton = document.createElement('button');
+                playButton.className = `
+                    play-btn text-white font-medium py-2.5 px-7
+                    rounded-full flex items-center justify-center
+                    w-32 /* Fixed width for consistency */
+                `;
                 const playIcon = document.createElement('i');
+                playIcon.className = 'fas fa-play mr-2'; // Start with play
                 playButton.appendChild(playIcon);
                 playButton.appendChild(document.createTextNode('Play'));
+                // Audio element (keep it hidden)
                 const audio = new Audio(data.audio_path.replace(/\\/g, '/'));
+                audio.preload = 'metadata'; // Improve loading slightly
+                audio.style.display = 'none';
+                audio.onerror = () => {
+                     console.error(`Error loading audio: ${data.audio_path}`);
+                     playButton.disabled = true; // Disable button if audio fails
+                     playButton.textContent = 'Error';
+                     playButton.classList.add('opacity-50', 'cursor-not-allowed');
+                };
+                // --- Refined Play/Pause Logic ---
                 playButton.addEventListener('click', () => {
+                    // If this audio is currently playing, pause it
+                    if (currentlyPlayingAudio === audio) {
                         audio.pause();
+                        currentlyPlayingAudio = null;
+                        currentlyPlayingButton = null;
+                        // Reset this button visually
                         playButton.innerHTML = '<i class="fas fa-play mr-2"></i>Play';
+                        playButton.classList.remove('playing');
                     } else {
+                        // If another audio is playing, stop it first
+                        if (currentlyPlayingAudio) {
+                            currentlyPlayingAudio.pause();
+                            currentlyPlayingAudio.currentTime = 0; // Reset time
+                            // Reset the *other* button visually
+                            if (currentlyPlayingButton) {
+                                currentlyPlayingButton.innerHTML = '<i class="fas fa-play mr-2"></i>Play';
+                                currentlyPlayingButton.classList.remove('playing');
+                            }
+                        }
+                        // Now play this audio
                         audio.currentTime = 0;
+                        audio.play().catch(e => console.error("Audio play failed:", e)); // Catch potential play errors
+                        currentlyPlayingAudio = audio;
+                        currentlyPlayingButton = playButton;
+                        // Update this button visually to 'Pause'
                         playButton.innerHTML = '<i class="fas fa-pause mr-2"></i>Pause';
+                        playButton.classList.add('playing');
                     }
                 });
+                // When audio naturally ends, reset the button
                 audio.addEventListener('ended', () => {
+                    if (currentlyPlayingAudio === audio) { // Ensure it's the one that just ended
+                        playButton.innerHTML = '<i class="fas fa-play mr-2"></i>Play';
+                        playButton.classList.remove('playing');
+                        currentlyPlayingAudio = null;
+                        currentlyPlayingButton = null;
+                    }
                 });
+                 // --- End Refined Play/Pause Logic ---
                 // Assemble the card
                 card.appendChild(imageContainer);
                 card.appendChild(nameElement);
                 card.appendChild(playButton);
+                card.appendChild(audio); // Add hidden audio element
                 // Add card to the grid
                 characterGrid.appendChild(card);
             });
+        }
+        // --- Initialization ---
+        // 1. Set initial theme based on localStorage or system preference
+        const savedTheme = localStorage.getItem('theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (savedTheme) {
+            applyTheme(savedTheme);
+        } else if (prefersDark) {
+            applyTheme('dark');
+        } else {
+            applyTheme('light'); // Default to light
         }
+        // 2. Add listener for the theme toggle button
+        themeToggleButton.addEventListener('click', toggleTheme);
+        // 3. Load characters when the page loads
         window.addEventListener('DOMContentLoaded', loadCharacters);
     </script>
 </body>
 </html>