Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sport Selector with Booking</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"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"> | |
| <style> | |
| .sport-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .sport-card:hover { | |
| transform: translateY(-10px) scale(1.03); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .sport-card.selected { | |
| transform: translateY(-5px); | |
| box-shadow: 0 0 0 3px #3B82F6; | |
| } | |
| .confetti { | |
| position: fixed; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f00; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| z-index: 1000; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-20px) rotate(180deg); } | |
| 100% { transform: translateY(0px) rotate(360deg); } | |
| } | |
| .floating-icon { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .calendar-container { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.5s ease-out; | |
| } | |
| .calendar-container.open { | |
| max-height: 1000px; | |
| } | |
| .time-slot { | |
| transition: all 0.2s ease; | |
| } | |
| .time-slot:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| .time-slot.selected { | |
| background-color: #3B82F6; | |
| color: white; | |
| } | |
| .calendar-view { | |
| display: none; | |
| } | |
| .calendar-view.active { | |
| display: block; | |
| } | |
| .calendar-header { | |
| background: linear-gradient(135deg, #3B82F6, #6366F1); | |
| } | |
| .fc-daygrid-day-number { | |
| color: #1F2937; | |
| } | |
| .fc-daygrid-day.fc-day-today { | |
| background-color: #EFF6FF; | |
| } | |
| .fc-event { | |
| cursor: pointer; | |
| border-radius: 4px; | |
| font-size: 0.85rem; | |
| padding: 2px 4px; | |
| } | |
| </style> | |
| <link href='https://cdn.jsdelivr.net/npm/[email protected]/main.min.css' rel='stylesheet' /> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-5xl font-bold text-gray-800 mb-4">Choose Your Sport</h1> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Select your favorite activity and book your training sessions!</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Football Card --> | |
| <div class="sport-card bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="relative h-48 bg-gradient-to-r from-green-600 to-green-400 flex items-center justify-center"> | |
| <i class="fas fa-futbol text-white text-8xl floating-icon"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Football</h3> | |
| <p class="text-gray-600">The beautiful game of teamwork, strategy, and skill. Perfect for those who love competition.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Team Sport</span> | |
| <button onclick="showCalendar('football')" class="text-blue-500 font-medium hover:text-blue-700 transition">View sessions</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tennis Card --> | |
| <div class="sport-card bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="relative h-48 bg-gradient-to-r from-blue-500 to-blue-300 flex items-center justify-center"> | |
| <i class="fas fa-table-tennis text-white text-8xl floating-icon"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Tennis</h3> | |
| <p class="text-gray-600">A fast-paced racket sport that improves agility, reflexes, and cardiovascular health.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Individual</span> | |
| <button onclick="showCalendar('tennis')" class="text-blue-500 font-medium hover:text-blue-700 transition">View sessions</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hockey Card --> | |
| <div class="sport-card bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="relative h-48 bg-gradient-to-r from-red-600 to-red-400 flex items-center justify-center"> | |
| <i class="fas fa-hockey-puck text-white text-8xl floating-icon"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Hockey</h3> | |
| <p class="text-gray-600">Fast, physical and exciting. A great way to build endurance and teamwork skills.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full">Team Sport</span> | |
| <button onclick="showCalendar('hockey')" class="text-blue-500 font-medium hover:text-blue-700 transition">View sessions</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Yoga Card --> | |
| <div class="sport-card bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="relative h-48 bg-gradient-to-r from-purple-600 to-purple-400 flex items-center justify-center"> | |
| <i class="fas fa-spa text-white text-8xl floating-icon"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Yoga</h3> | |
| <p class="text-gray-600">Improve flexibility, strength and mental clarity through ancient practice of yoga.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Mind & Body</span> | |
| <button onclick="showCalendar('yoga')" class="text-blue-500 font-medium hover:text-blue-700 transition">View sessions</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Gymnastics Card --> | |
| <div class="sport-card bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="relative h-48 bg-gradient-to-r from-yellow-600 to-yellow-400 flex items-center justify-center"> | |
| <i class="fas fa-medal text-white text-8xl floating-icon"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Gymnastics</h3> | |
| <p class="text-gray-600">Develop strength, flexibility, and coordination through artistic movement.</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">Individual</span> | |
| <button onclick="showCalendar('gymnastics')" class="text-blue-500 font-medium hover:text-blue-700 transition">View sessions</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommendation Card --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-dashed border-gray-300 flex items-center justify-center"> | |
| <div class="p-6 text-center"> | |
| <i class="fas fa-question-circle text-gray-400 text-6xl mb-4"></i> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Need Help Choosing?</h3> | |
| <p class="text-gray-600 mb-4">Click on any sport to view available sessions and book your training!</p> | |
| <button onclick="showRandomCalendar()" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full transition duration-300"> | |
| Show Random Sessions | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Calendar View Section --> | |
| <div id="calendarView" class="mt-12 bg-white rounded-xl shadow-lg p-6 max-w-6xl mx-auto hidden"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div class="flex items-center"> | |
| <i id="calendarSportIcon" class="fas text-4xl mr-4"></i> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-800">Available Sessions for <span id="calendarSportName" class="text-blue-500"></span></h2> | |
| <p id="calendarSportDescription" class="text-gray-600 mt-2"></p> | |
| </div> | |
| </div> | |
| <button onclick="hideCalendar()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-full transition duration-300"> | |
| <i class="fas fa-times mr-2"></i> Close | |
| </button> | |
| </div> | |
| <div id="calendar" class="mb-6"></div> | |
| <div id="calendarBookingForm" class="hidden"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Book Your Session</h3> | |
| <form id="sessionBookingForm" class="space-y-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label for="fullName" class="block text-sm font-medium text-gray-700">Full Name</label> | |
| <input type="text" id="fullName" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> | |
| <input type="email" id="email" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label> | |
| <input type="tel" id="phone" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="participants" class="block text-sm font-medium text-gray-700">Participants</label> | |
| <select id="participants" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="1">1 person</option> | |
| <option value="2">2 people</option> | |
| <option value="3">3 people</option> | |
| <option value="4">4 people</option> | |
| <option value="5">5+ people</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="notes" class="block text-sm font-medium text-gray-700">Special Requests</label> | |
| <textarea id="notes" rows="3" class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <div class="flex justify-between items-center pt-4"> | |
| <div> | |
| <p class="text-sm text-gray-600">Selected session:</p> | |
| <p id="selectedCalendarSession" class="font-medium"></p> | |
| </div> | |
| <button type="submit" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-full transition duration-300"> | |
| Confirm Booking <i class="fas fa-check ml-2"></i> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="calendarConfirmation" class="hidden text-center py-8"> | |
| <i class="fas fa-check-circle text-green-500 text-6xl mb-4"></i> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Booking Confirmed!</h3> | |
| <p id="calendarConfirmationDetails" class="text-gray-600 mb-6"></p> | |
| <div class="flex justify-center space-x-4"> | |
| <button onclick="resetCalendarBooking()" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full transition duration-300"> | |
| Book Another Session | |
| </button> | |
| <button onclick="hideCalendar()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-6 rounded-full transition duration-300"> | |
| Return to Sports | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script> | |
| <script src='https://cdn.jsdelivr.net/npm/[email protected]/main.min.js'></script> | |
| <script> | |
| // Sport data | |
| const sportData = { | |
| football: { | |
| name: "Football", | |
| icon: "fa-futbol", | |
| color: "green", | |
| description: "Football is the world's most popular sport, played by over 250 million players in over 200 countries. It's a great way to build teamwork, endurance, and coordination while having fun with friends." | |
| }, | |
| tennis: { | |
| name: "Tennis", | |
| icon: "fa-table-tennis", | |
| color: "blue", | |
| description: "Tennis is a racket sport that can be played individually against a single opponent or between two teams of two players each. It improves hand-eye coordination, agility, and strategic thinking." | |
| }, | |
| hockey: { | |
| name: "Hockey", | |
| icon: "fa-hockey-puck", | |
| color: "red", | |
| description: "Hockey is a fast-paced team sport played on ice (or field) that requires excellent skating skills, hand-eye coordination, and teamwork. It's great for building endurance and quick reflexes." | |
| }, | |
| yoga: { | |
| name: "Yoga", | |
| icon: "fa-spa", | |
| color: "purple", | |
| description: "Yoga is a group of physical, mental, and spiritual practices originating in ancient India. It helps improve flexibility, strength, balance, and mental well-being through various postures and breathing techniques." | |
| }, | |
| gymnastics: { | |
| name: "Gymnastics", | |
| icon: "fa-medal", | |
| color: "yellow", | |
| description: "Gymnastics is a sport that requires balance, strength, flexibility, agility, coordination, and endurance. It includes exercises on apparatus like the balance beam, uneven bars, and floor exercise." | |
| } | |
| }; | |
| // Generate random events for the calendar | |
| function generateEvents(sport) { | |
| const events = []; | |
| const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; | |
| const colors = { | |
| football: '#10B981', | |
| tennis: '#3B82F6', | |
| hockey: '#EF4444', | |
| yoga: '#8B5CF6', | |
| gymnastics: '#F59E0B' | |
| }; | |
| const sportColor = colors[sport] || '#3B82F6'; | |
| // Generate events for the next 30 days | |
| for (let i = 0; i < 30; i++) { | |
| const date = new Date(); | |
| date.setDate(date.getDate() + i); | |
| // Skip some days randomly | |
| if (Math.random() < 0.2) continue; | |
| const dayOfWeek = date.getDay(); | |
| const dayName = days[dayOfWeek]; | |
| // Different schedules for weekdays vs weekends | |
| let sessions = []; | |
| if (dayOfWeek === 0 || dayOfWeek === 6) { // Weekend | |
| sessions = [ | |
| { time: '09:00', duration: 90, level: 'Beginner' }, | |
| { time: '11:00', duration: 90, level: 'Intermediate' }, | |
| { time: '14:00', duration: 90, level: 'Advanced' }, | |
| { time: '16:00', duration: 90, level: 'All Levels' } | |
| ]; | |
| } else { // Weekday | |
| sessions = [ | |
| { time: '07:00', duration: 60, level: 'Morning Session' }, | |
| { time: '12:00', duration: 60, level: 'Lunchtime Class' }, | |
| { time: '17:30', duration: 90, level: 'After Work' }, | |
| { time: '19:30', duration: 60, level: 'Evening Session' } | |
| ]; | |
| } | |
| // Randomly select 2-4 sessions per day | |
| const sessionCount = Math.floor(Math.random() * 3) + 2; | |
| const selectedSessions = []; | |
| const usedIndices = []; | |
| for (let j = 0; j < sessionCount; j++) { | |
| let randomIndex; | |
| do { | |
| randomIndex = Math.floor(Math.random() * sessions.length); | |
| } while (usedIndices.includes(randomIndex)); | |
| usedIndices.push(randomIndex); | |
| selectedSessions.push(sessions[randomIndex]); | |
| } | |
| // Create events for each selected session | |
| selectedSessions.forEach(session => { | |
| const startTime = new Date(date); | |
| const [hours, minutes] = session.time.split(':').map(Number); | |
| startTime.setHours(hours, minutes, 0, 0); | |
| const endTime = new Date(startTime); | |
| endTime.setMinutes(endTime.getMinutes() + session.duration); | |
| events.push({ | |
| title: `${sportData[sport].name} (${session.level})`, | |
| start: startTime, | |
| end: endTime, | |
| color: sportColor, | |
| extendedProps: { | |
| level: session.level, | |
| coach: getRandomCoach(), | |
| location: getRandomLocation(sport), | |
| sport: sport | |
| } | |
| }); | |
| }); | |
| } | |
| return events; | |
| } | |
| function getRandomCoach() { | |
| const firstNames = ['Alex', 'Jamie', 'Taylor', 'Jordan', 'Casey', 'Morgan', 'Riley', 'Quinn']; | |
| const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Miller', 'Davis', 'Wilson']; | |
| return `${firstNames[Math.floor(Math.random() * firstNames.length)]} ${lastNames[Math.floor(Math.random() * lastNames.length)]}`; | |
| } | |
| function getRandomLocation(sport) { | |
| const locations = { | |
| football: ['Main Field', 'Practice Field 1', 'Practice Field 2', 'Stadium'], | |
| tennis: ['Court 1', 'Court 2', 'Court 3', 'Indoor Court'], | |
| hockey: ['Rink A', 'Rink B', 'Training Rink', 'Main Arena'], | |
| yoga: ['Studio 1', 'Studio 2', 'Zen Room', 'Outdoor Deck'], | |
| gymnastics: ['Gym A', 'Gym B', 'Training Hall', 'Main Gym'] | |
| }; | |
| return locations[sport][Math.floor(Math.random() * locations[sport].length)]; | |
| } | |
| // Calendar functions | |
| let calendar; | |
| let selectedEvent = null; | |
| function showCalendar(sport) { | |
| // Set sport info | |
| document.getElementById('calendarSportName').textContent = sportData[sport].name; | |
| document.getElementById('calendarSportDescription').textContent = sportData[sport].description; | |
| const icon = document.getElementById('calendarSportIcon'); | |
| icon.className = ''; | |
| icon.classList.add('fas', sportData[sport].icon, `text-${sportData[sport].color}-500`); | |
| // Show calendar container | |
| const calendarView = document.getElementById('calendarView'); | |
| calendarView.classList.remove('hidden'); | |
| calendarView.scrollIntoView({ behavior: 'smooth' }); | |
| // Hide booking form and confirmation if they're visible | |
| document.getElementById('calendarBookingForm').classList.add('hidden'); | |
| document.getElementById('calendarConfirmation').classList.add('hidden'); | |
| // Initialize calendar if it doesn't exist | |
| if (!calendar) { | |
| const calendarEl = document.getElementById('calendar'); | |
| calendar = new FullCalendar.Calendar(calendarEl, { | |
| initialView: 'dayGridMonth', | |
| headerToolbar: { | |
| left: 'prev,next today', | |
| center: 'title', | |
| right: 'dayGridMonth,timeGridWeek,timeGridDay' | |
| }, | |
| events: generateEvents(sport), | |
| eventClick: function(info) { | |
| selectedEvent = info.event; | |
| showCalendarBookingForm(); | |
| }, | |
| eventMouseEnter: function(info) { | |
| info.el.style.cursor = 'pointer'; | |
| }, | |
| height: 'auto', | |
| contentHeight: 'auto', | |
| aspectRatio: 1.8 | |
| }); | |
| calendar.render(); | |
| } else { | |
| // Update events for the selected sport | |
| calendar.removeAllEvents(); | |
| calendar.addEventSource(generateEvents(sport)); | |
| } | |
| } | |
| function hideCalendar() { | |
| document.getElementById('calendarView').classList.add('hidden'); | |
| selectedEvent = null; | |
| } | |
| function showCalendarBookingForm() { | |
| if (!selectedEvent) return; | |
| // Set session info | |
| const start = selectedEvent.start; | |
| const end = selectedEvent.end; | |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }; | |
| document.getElementById('selectedCalendarSession').textContent = | |
| `${selectedEvent.title}\n${start.toLocaleDateString('en-US', options)} - ${end.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}`; | |
| // Show booking form | |
| document.getElementById('calendarBookingForm').classList.remove('hidden'); | |
| document.getElementById('calendarConfirmation').classList.add('hidden'); | |
| // Scroll to form | |
| document.getElementById('calendarBookingForm').scrollIntoView({ behavior: 'smooth', block: 'nearest' }); | |
| } | |
| function resetCalendarBooking() { | |
| document.getElementById('calendarBookingForm').classList.add('hidden'); | |
| document.getElementById('calendarConfirmation').classList.add('hidden'); | |
| document.getElementById('sessionBookingForm').reset(); | |
| selectedEvent = null; | |
| } | |
| function showRandomCalendar() { | |
| const sports = ['football', 'tennis', 'hockey', 'yoga', 'gymnastics']; | |
| const randomSport = sports[Math.floor(Math.random() * sports.length)]; | |
| showCalendar(randomSport); | |
| } | |
| // Form submission | |
| document.getElementById('sessionBookingForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // In a real app, you would send this data to a server | |
| const formData = { | |
| name: document.getElementById('fullName').value, | |
| email: document.getElementById('email').value, | |
| phone: document.getElementById('phone').value, | |
| participants: document.getElementById('participants').value, | |
| notes: document.getElementById('notes').value, | |
| session: { | |
| title: selectedEvent.title, | |
| date: selectedEvent.start.toLocaleDateString(), | |
| time: `${selectedEvent.start.toLocaleTimeString()} - ${selectedEvent.end.toLocaleTimeString()}`, | |
| coach: selectedEvent.extendedProps.coach, | |
| location: selectedEvent.extendedProps.location | |
| } | |
| }; | |
| // Show confirmation | |
| document.getElementById('calendarBookingForm').classList.add('hidden'); | |
| const confirmationDetails = document.getElementById('calendarConfirmationDetails'); | |
| confirmationDetails.innerHTML = ` | |
| <p class="mb-2"><strong>Session:</strong> ${formData.session.title}</p> | |
| <p class="mb-2"><strong>Date & Time:</strong> ${formData.session.date} at ${formData.session.time}</p> | |
| <p class="mb-2"><strong>Location:</strong> ${formData.session.location}</p> | |
| <p class="mb-2"><strong>Coach:</strong> ${formData.session.coach}</p> | |
| <p class="mb-2"><strong>Participants:</strong> ${formData.participants}</p> | |
| <p class="mt-4">A confirmation has been sent to ${formData.email}</p> | |
| `; | |
| document.getElementById('calendarConfirmation').classList.remove('hidden'); | |
| document.getElementById('calendarConfirmation').scrollIntoView({ behavior: 'smooth' }); | |
| // Create confetti effect | |
| createConfetti(); | |
| }); | |
| // Confetti effect | |
| function createConfetti() { | |
| const colors = ['#EF4444', '#F59E0B', '#10B981', '#3B82F6', '#8B5CF6']; | |
| for (let i = 0; i < 100; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.left = Math.random() * window.innerWidth + 'px'; | |
| confetti.style.top = -10 + 'px'; | |
| document.body.appendChild(confetti); | |
| const animationDuration = Math.random() * 3 + 2; | |
| confetti.style.transition = `top ${animationDuration}s linear, left ${animationDuration}s ease-out, opacity ${animationDuration}s linear`; | |
| setTimeout(() => { | |
| confetti.style.top = window.innerHeight + 'px'; | |
| confetti.style.left = (parseFloat(confetti.style.left) + (Math.random() - 0.5) * 200) + 'px'; | |
| confetti.style.opacity = '0'; | |
| }, 10); | |
| setTimeout(() => { | |
| confetti.remove(); | |
| }, animationDuration * 1000); | |
| } | |
| } | |
| </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=cameltoe22/crisis-busters" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |