Spaces:

templates
/

static_html

Running

App Files Files Community

CamielCrisisBuster commited on 25 days ago

Commit

5b566df

verified ·

1 Parent(s): ab39600

Upload index.html

Browse files

Files changed (1) hide show

index.html +551 -23

index.html CHANGED Viewed

@@ -1,24 +1,552 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>
-				You can modify this app directly by editing <i>index.html</i> in the
-				Files and versions tab.
-			</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank"
-					>Spaces documentation</a
-				>.
-			</p>
-		</div>
-	</body>
-</html>

 <!DOCTYPE html>
+<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>