implemente a funcionalidade de Favoritar - Follow Up Deployment

index.html

@@ -137,7 +137,7 @@
                         </div>
                         <p class="text-gray-600 mb-6">A maior maratona da América Latina com percursos para todos os níveis.</p>
                         <div class="flex justify-between items-center">
-                            <button class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center">
+                            <button class="text-purple-600 font-medium hover:text-purple-800 transition flex items-center" onclick="showEventDetails('Maratona de São Paulo', 'https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;auto=format&amp;fit=crop&amp;w=1374&amp;q=80', '25 Nov 2023', 'São Paulo, SP', '5K, 10K, 21K', 'Maratona', 'A maior maratona da América Latina com percursos para todos os níveis. Com organização de primeira e estrutura completa para atletas de todos os níveis.', ['06:00 - Credenciamento', '07:00 - Largada 21K', '07:30 - Largada 10K', '08:00 - Largada 5K'])">
                                 <i class="fas fa-info-circle mr-2"></i> Detalhes
                             </button>
                             <button class="bg-purple-600 text-white px-4 py-2 rounded-full hover:bg-purple-700 transition flex items-center">
@@ -501,6 +501,75 @@
         </div>
     </footer>
 
+    <!-- Event Details Modal -->
+    <div id="eventDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300">
+        <div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-y-auto transform transition-all duration-300 scale-95">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-6">
+                    <h3 class="text-2xl font-bold text-gray-800" id="eventDetailsTitle">Detalhes do Evento</h3>
+                    <button id="closeEventDetailsModal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                
+                <div class="flex flex-col lg:flex-row gap-8">
+                    <div class="lg:w-1/2">
+                        <img id="eventDetailsImage" src="" alt="Event image" class="w-full h-64 lg:h-96 object-cover rounded-lg">
+                        
+                        <div class="mt-6 bg-gray-50 p-4 rounded-lg">
+                            <h4 class="font-bold text-lg mb-3">Informações</h4>
+                            <div class="grid grid-cols-2 gap-4">
+                                <div>
+                                    <p class="text-sm text-gray-500">Data</p>
+                                    <p class="font-medium" id="eventDetailsDate"></p>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500">Local</p>
+                                    <p class="font-medium" id="eventDetailsLocation"></p>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500">Distâncias</p>
+                                    <p class="font-medium" id="eventDetailsDistances"></p>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500">Tipo</p>
+                                    <p class="font-medium" id="eventDetailsType"></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="lg:w-1/2">
+                        <div class="mb-6">
+                            <h4 class="font-bold text-lg mb-3">Sobre o Evento</h4>
+                            <p class="text-gray-600" id="eventDetailsDescription"></p>
+                        </div>
+                        
+                        <div class="mb-6">
+                            <h4 class="font-bold text-lg mb-3">Programação</h4>
+                            <ul class="space-y-3" id="eventDetailsSchedule">
+                                <!-- Will be populated by JS -->
+                            </ul>
+                        </div>
+                        
+                        <div class="bg-purple-50 p-4 rounded-lg">
+                            <h4 class="font-bold text-lg mb-3">Inscrição</h4>
+                            <p class="text-gray-600 mb-4">Garanta sua vaga neste evento incrível!</p>
+                            <div class="flex flex-col sm:flex-row gap-3">
+                                <button class="bg-purple-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-purple-700 transition flex-1" onclick="subscribeToEvent()">
+                                    <i class="fas fa-ticket-alt mr-2"></i> Inscrever-se
+                                </button>
+                                <button id="favoriteBtn" class="border border-purple-600 text-purple-600 px-6 py-3 rounded-lg font-bold hover:bg-purple-50 transition flex-1" onclick="toggleFavorite()">
+                                    <i id="favoriteIcon" class="far fa-heart mr-2"></i> <span id="favoriteText">Favoritar</span>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Login Modal -->
     <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 opacity-0 pointer-events-none transition-opacity duration-300 login-modal">
         <div class="bg-white rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 scale-95">
@@ -969,6 +1038,42 @@
             document.querySelector('#userDashboard > div').classList.remove('scale-95');
         });
 
+        // Event Details Modal
+        const eventDetailsModal = document.getElementById('eventDetailsModal');
+        const closeEventDetailsModal = document.getElementById('closeEventDetailsModal');
+        
+        function showEventDetails(title, image, date, location, distances, type, description, schedule) {
+            document.getElementById('eventDetailsTitle').textContent = title;
+            document.getElementById('eventDetailsImage').src = image;
+            document.getElementById('eventDetailsDate').textContent = date;
+            document.getElementById('eventDetailsLocation').textContent = location;
+            document.getElementById('eventDetailsDistances').textContent = distances;
+            document.getElementById('eventDetailsType').textContent = type;
+            document.getElementById('eventDetailsDescription').textContent = description;
+            
+            const scheduleList = document.getElementById('eventDetailsSchedule');
+            scheduleList.innerHTML = '';
+            schedule.forEach(item => {
+                const li = document.createElement('li');
+                li.className = 'flex items-start';
+                li.innerHTML = `
+                    <div class="bg-purple-100 w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-1 mr-3">
+                        <i class="fas fa-circle text-purple-600 text-xs"></i>
+                    </div>
+                    <span>${item}</span>
+                `;
+                scheduleList.appendChild(li);
+            });
+            
+            eventDetailsModal.classList.remove('opacity-0', 'pointer-events-none');
+            document.querySelector('#eventDetailsModal > div').classList.remove('scale-95');
+        }
+        
+        closeEventDetailsModal.addEventListener('click', () => {
+            eventDetailsModal.classList.add('opacity-0', 'pointer-events-none');
+            document.querySelector('#eventDetailsModal > div').classList.add('scale-95');
+        });
+
         // Simple countdown timer (for demo purposes)
         function updateCountdown() {
             const countdownElements = document.querySelectorAll('#countdown > div');
@@ -997,6 +1102,65 @@
         }
         
         setInterval(updateCountdown, 60000); // Update every minute
+
+        // Favorite functionality
+        let isFavorited = false;
+        
+        function toggleFavorite() {
+            isFavorited = !isFavorited;
+            const icon = document.getElementById('favoriteIcon');
+            const text = document.getElementById('favoriteText');
+            const btn = document.getElementById('favoriteBtn');
+            
+            if (isFavorited) {
+                icon.classList.remove('far');
+                icon.classList.add('fas');
+                text.textContent = 'Favoritado';
+                btn.classList.add('bg-purple-100', 'border-purple-700');
+                btn.classList.remove('hover:bg-purple-50');
+                
+                // Show confirmation
+                const eventTitle = document.getElementById('eventDetailsTitle').textContent;
+                alert(`"${eventTitle}" foi adicionado aos seus favoritos!`);
+            } else {
+                icon.classList.remove('fas');
+                icon.classList.add('far');
+                text.textContent = 'Favoritar';
+                btn.classList.remove('bg-purple-100', 'border-purple-700');
+                btn.classList.add('hover:bg-purple-50');
+            }
+        }
+
+        // Subscription function
+        function subscribeToEvent() {
+            const eventTitle = document.getElementById('eventDetailsTitle').textContent;
+            
+            // Show confirmation modal
+            const modal = document.createElement('div');
+            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
+            modal.innerHTML = `
+                <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-xl font-bold">Inscrição Confirmada</h3>
+                        <button onclick="this.parentElement.parentElement.parentElement.remove()" class="text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <p class="mb-6">Sua inscrição para <strong>${eventTitle}</strong> foi confirmada com sucesso!</p>
+                    <div class="flex justify-end">
+                        <button onclick="this.parentElement.parentElement.parentElement.remove()" 
+                                class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition">
+                            OK
+                        </button>
+                    </div>
+                </div>
+            `;
+            
+            document.body.appendChild(modal);
+            
+            // In a real app, you would send this to your backend API here
+            console.log(`User subscribed to: ${eventTitle}`);
+        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mdarlen/runtrack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>