Hugging Face's logo

Spaces:
usups
/
booking
Running

App Files Community
booking / index.html
usups's picture
usups
undefined - Initial Deployment
2bd500b verified
raw
history blame contribute delete
33.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Hotel Booking Management System</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>
 .sidebar {
 transition: all 0.3s ease;
 }
 .sidebar.collapsed {
 width: 70px;
 }
 .sidebar.collapsed .sidebar-text {
 display: none;
 }
 .sidebar.collapsed .logo-text {
 display: none;
 }
 .sidebar.collapsed .menu-item {
 justify-content: center;
 }
 .content {
 transition: all 0.3s ease;
 }
 .content.expanded {
 margin-left: 70px;
 }
 .room-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 .calendar-day {
 transition: all 0.2s ease;
 }
 .calendar-day:hover {
 background-color: #e2e8f0;
 }
 .calendar-day.booked {
 background-color: #fecaca;
 }
 .calendar-day.available {
 background-color: #bbf7d0;
 }
 .calendar-day.selected {
 background-color: #93c5fd;
 }
 </style>
</head>
<body class="bg-gray-100 font-sans">
 <div class="flex h-screen overflow-hidden">
 <!-- Sidebar -->
 <div class="sidebar bg-indigo-800 text-white w-64 flex flex-col">
 <div class="p-4 flex items-center space-x-3 border-b border-indigo-700">
 <div class="bg-white p-2 rounded-lg">
 <i class="fas fa-hotel text-indigo-800 text-xl"></i>
 </div>
 <span class="logo-text text-xl font-bold">HotelPro</span>
 </div>
<div class="p-4 flex-1 overflow-y-auto">
 <div class="space-y-2">
 <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
 <i class="fas fa-tachometer-alt"></i>
 <span class="sidebar-text">Dashboard</span>
 </div>
 <div class="menu-item flex items-center space-x-3 p-3 rounded-lg bg-indigo-700 cursor-pointer">
 <i class="fas fa-calendar-check"></i>
 <span class="sidebar-text">Bookings</span>
 </div>
 <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
 <i class="fas fa-bed"></i>
 <span class="sidebar-text">Rooms</span>
 </div>
 <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
 <i class="fas fa-users"></i>
 <span class="sidebar-text">Guests</span>
 </div>
 <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
 <i class="fas fa-chart-line"></i>
 <span class="sidebar-text">Reports</span>
 </div>
 <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
 <i class="fas fa-cog"></i>
 <span class="sidebar-text">Settings</span>
 </div>
 </div>
<div class="mt-8 pt-4 border-t border-indigo-700">
 <div class="menu-item flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-700 cursor-pointer">
 <i class="fas fa-question-circle"></i>
 <span class="sidebar-text">Help & Support</span>
 </div>
 </div>
 </div>
<div class="p-4 border-t border-indigo-700">
 <div class="flex items-center space-x-3">
 <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full">
 <div class="sidebar-text">
 <div class="font-medium">Admin User</div>
 <div class="text-xs text-indigo-300">Hotel Owner</div>
 </div>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <div class="content flex-1 overflow-y-auto">
 <!-- Top Navigation -->
 <div class="bg-white shadow-sm p-4 flex justify-between items-center">
 <div class="flex items-center space-x-4">
 <button id="sidebarToggle" class="text-gray-600 hover:text-gray-900">
 <i class="fas fa-bars text-xl"></i>
 </button>
 <h1 class="text-2xl font-bold text-gray-800">Booking Management</h1>
 </div>
<div class="flex items-center space-x-4">
 <div class="relative">
 <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
 <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
 </div>
 <div class="relative">
 <button class="text-gray-600 hover:text-gray-900 relative">
 <i class="fas fa-bell text-xl"></i>
 <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
 </button>
 </div>
 </div>
 </div>
<!-- Main Content Area -->
 <div class="p-6">
 <!-- Stats Cards -->
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
 <div class="bg-white rounded-lg shadow p-6">
 <div class="flex justify-between items-center">
 <div>
 <p class="text-gray-500">Total Bookings</p>
 <h3 class="text-2xl font-bold">1,248</h3>
 <p class="text-green-500 text-sm">+12% from last month</p>
 </div>
 <div class="bg-indigo-100 p-3 rounded-full">
 <i class="fas fa-calendar-check text-indigo-600 text-xl"></i>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6">
 <div class="flex justify-between items-center">
 <div>
 <p class="text-gray-500">Occupancy Rate</p>
 <h3 class="text-2xl font-bold">78%</h3>
 <p class="text-green-500 text-sm">+5% from last month</p>
 </div>
 <div class="bg-green-100 p-3 rounded-full">
 <i class="fas fa-chart-line text-green-600 text-xl"></i>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6">
 <div class="flex justify-between items-center">
 <div>
 <p class="text-gray-500">Revenue</p>
 <h3 class="text-2xl font-bold">$24,580</h3>
 <p class="text-red-500 text-sm">-3% from last month</p>
 </div>
 <div class="bg-blue-100 p-3 rounded-full">
 <i class="fas fa-dollar-sign text-blue-600 text-xl"></i>
 </div>
 </div>
 </div>
<div class="bg-white rounded-lg shadow p-6">
 <div class="flex justify-between items-center">
 <div>
 <p class="text-gray-500">Available Rooms</p>
 <h3 class="text-2xl font-bold">12</h3>
 <p class="text-green-500 text-sm">4 rooms cleaning</p>
 </div>
 <div class="bg-yellow-100 p-3 rounded-full">
 <i class="fas fa-bed text-yellow-600 text-xl"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Booking Management Section -->
 <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
 <!-- Calendar View -->
 <div class="bg-white rounded-lg shadow p-6 lg:col-span-2">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-xl font-bold text-gray-800">Booking Calendar</h2>
 <div class="flex space-x-2">
 <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">Today</button>
 <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Month</button>
 <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Week</button>
 <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Day</button>
 </div>
 </div>
<div class="grid grid-cols-7 gap-1 mb-4">
 <div class="text-center font-medium py-2">Sun</div>
 <div class="text-center font-medium py-2">Mon</div>
 <div class="text-center font-medium py-2">Tue</div>
 <div class="text-center font-medium py-2">Wed</div>
 <div class="text-center font-medium py-2">Thu</div>
 <div class="text-center font-medium py-2">Fri</div>
 <div class="text-center font-medium py-2">Sat</div>
 </div>
<div class="grid grid-cols-7 gap-1" id="calendar">
 <!-- Calendar days will be populated by JavaScript -->
 </div>
 </div>
<!-- Quick Actions -->
 <div class="bg-white rounded-lg shadow p-6">
 <h2 class="text-xl font-bold text-gray-800 mb-6">Quick Actions</h2>
<button class="w-full mb-4 flex items-center justify-center space-x-2 bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition">
 <i class="fas fa-plus"></i>
 <span>New Booking</span>
 </button>
<button class="w-full mb-4 flex items-center justify-center space-x-2 bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 transition">
 <i class="fas fa-bed"></i>
 <span>Check Availability</span>
 </button>
<button class="w-full mb-4 flex items-center justify-center space-x-2 bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition">
 <i class="fas fa-file-invoice-dollar"></i>
 <span>Generate Invoice</span>
 </button>
<div class="border-t pt-4 mt-4">
 <h3 class="font-medium mb-3">Recent Activities</h3>
 <div class="space-y-3">
 <div class="flex items-start space-x-3">
 <div class="bg-indigo-100 p-2 rounded-full">
 <i class="fas fa-check text-indigo-600 text-sm"></i>
 </div>
 <div>
 <p class="text-sm">Room 203 checked out</p>
 <p class="text-xs text-gray-500">2 minutes ago</p>
 </div>
 </div>
 <div class="flex items-start space-x-3">
 <div class="bg-green-100 p-2 rounded-full">
 <i class="fas fa-calendar text-green-600 text-sm"></i>
 </div>
 <div>
 <p class="text-sm">New booking for Room 105</p>
 <p class="text-xs text-gray-500">15 minutes ago</p>
 </div>
 </div>
 <div class="flex items-start space-x-3">
 <div class="bg-yellow-100 p-2 rounded-full">
 <i class="fas fa-bed text-yellow-600 text-sm"></i>
 </div>
 <div>
 <p class="text-sm">Room 301 needs cleaning</p>
 <p class="text-xs text-gray-500">30 minutes ago</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Recent Bookings Table -->
 <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
 <div class="p-6 flex justify-between items-center border-b">
 <h2 class="text-xl font-bold text-gray-800">Recent Bookings</h2>
 <button class="text-indigo-600 hover:text-indigo-800">View All</button>
 </div>
<div class="overflow-x-auto">
 <table class="min-w-full divide-y divide-gray-200">
 <thead class="bg-gray-50">
 <tr>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Booking ID</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Guest</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Room</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dates</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
 </tr>
 </thead>
 <tbody class="bg-white divide-y divide-gray-200">
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#BK-1001</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10">
 <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">John Smith</div>
 <div class="text-sm text-gray-500">john@example.com</div>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Deluxe Suite (205)</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 12 - Jun 15, 2023</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Checked In</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$450</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
 <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
 <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#BK-1002</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10">
 <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
 <div class="text-sm text-gray-500">sarah@example.com</div>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Standard Room (104)</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15 - Jun 18, 2023</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Confirmed</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$300</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
 <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
 <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
 </td>
 </tr>
 <tr>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#BK-1003</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <div class="flex items-center">
 <div class="flex-shrink-0 h-10 w-10">
 <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
 </div>
 <div class="ml-4">
 <div class="text-sm font-medium text-gray-900">Michael Brown</div>
 <div class="text-sm text-gray-500">michael@example.com</div>
 </div>
 </div>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Executive Suite (301)</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 18 - Jun 22, 2023</td>
 <td class="px-6 py-4 whitespace-nowrap">
 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
 </td>
 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$600</td>
 <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
 <button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
 <button class="text-green-600 hover:text-green-900 mr-3"><i class="fas fa-edit"></i></button>
 <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash"></i></button>
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
<!-- Room Availability -->
 <div class="bg-white rounded-lg shadow overflow-hidden">
 <div class="p-6 flex justify-between items-center border-b">
 <h2 class="text-xl font-bold text-gray-800">Room Availability</h2>
 <div class="flex space-x-2">
 <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">All Rooms</button>
 <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Available</button>
 <button class="px-4 py-2 border rounded-lg hover:bg-gray-100">Occupied</button>
 </div>
 </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
 <div class="room-card bg-white border rounded-lg overflow-hidden shadow-sm transition cursor-pointer">
 <div class="h-32 bg-indigo-100 flex items-center justify-center">
 <i class="fas fa-bed text-indigo-500 text-4xl"></i>
 </div>
 <div class="p-4">
 <h3 class="font-bold text-lg">Deluxe Suite (205)</h3>
 <p class="text-gray-600 mb-2">$150/night</p>
 <div class="flex justify-between items-center">
 <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Available</span>
 <button class="text-indigo-600 hover:text-indigo-800">Book Now</button>
 </div>
 </div>
 </div>
<div class="room-card bg-white border rounded-lg overflow-hidden shadow-sm transition cursor-pointer">
 <div class="h-32 bg-blue-100 flex items-center justify-center">
 <i class="fas fa-bed text-blue-500 text-4xl"></i>
 </div>
 <div class="p-4">
 <h3 class="font-bold text-lg">Standard Room (104)</h3>
 <p class="text-gray-600 mb-2">$100/night</p>
 <div class="flex justify-between items-center">
 <span class="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">Occupied</span>
 <button class="text-gray-400 cursor-not-allowed">Book Now</button>
 </div>
 </div>
 </div>
<div class="room-card bg-white border rounded-lg overflow-hidden shadow-sm transition cursor-pointer">
 <div class="h-32 bg-green-100 flex items-center justify-center">
 <i class="fas fa-bed text-green-500 text-4xl"></i>
 </div>
 <div class="p-4">
 <h3 class="font-bold text-lg">Executive Suite (301)</h3>
 <p class="text-gray-600 mb-2">$200/night</p>
 <div class="flex justify-between items-center">
 <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">Available</span>
 <button class="text-indigo-600 hover:text-indigo-800">Book Now</button>
 </div>
 </div>
 </div>
<div class="room-card bg-white border rounded-lg overflow-hidden shadow-sm transition cursor-pointer">
 <div class="h-32 bg-yellow-100 flex items-center justify-center">
 <i class="fas fa-bed text-yellow-500 text-4xl"></i>
 </div>
 <div class="p-4">
 <h3 class="font-bold text-lg">Family Room (108)</h3>
 <p class="text-gray-600 mb-2">$180/night</p>
 <div class="flex justify-between items-center">
 <span class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded-full">Cleaning</span>
 <button class="text-gray-400 cursor-not-allowed">Book Now</button>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Toggle sidebar
 document.getElementById('sidebarToggle').addEventListener('click', function() {
 document.querySelector('.sidebar').classList.toggle('collapsed');
 document.querySelector('.content').classList.toggle('expanded');
 });
 // Generate calendar
 function generateCalendar() {
 const calendar = document.getElementById('calendar');
 const date = new Date();
 const currentMonth = date.getMonth();
 const currentYear = date.getFullYear();
// Get first day of month
 const firstDay = new Date(currentYear, currentMonth, 1).getDay();
// Get days in month
 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
// Get days from previous month to show
 const prevMonthDays = new Date(currentYear, currentMonth, 0).getDate();
// Clear calendar
 calendar.innerHTML = '';
// Previous month days
 for (let i = firstDay - 1; i >= 0; i--) {
 const dayElement = document.createElement('div');
 dayElement.className = 'calendar-day bg-gray-100 text-gray-400 p-2 h-24 rounded';
 dayElement.textContent = prevMonthDays - i;
 calendar.appendChild(dayElement);
 }
// Current month days
 for (let i = 1; i <= daysInMonth; i++) {
 const dayElement = document.createElement('div');
 dayElement.className = 'calendar-day border p-2 h-24 rounded cursor-pointer';
// Add date number
 const dateNumber = document.createElement('div');
 dateNumber.className = 'font-bold';
 dateNumber.textContent = i;
 dayElement.appendChild(dateNumber);
// Randomly mark some days as booked or available
 if (Math.random() > 0.7) {
 dayElement.classList.add('booked');
 const bookingInfo = document.createElement('div');
 bookingInfo.className = 'text-xs mt-1 bg-red-100 text-red-800 p-1 rounded';
 bookingInfo.textContent = 'Booked';
 dayElement.appendChild(bookingInfo);
 } else if (Math.random() > 0.5 && i > new Date().getDate()) {
 dayElement.classList.add('available');
 const bookingInfo = document.createElement('div');
 bookingInfo.className = 'text-xs mt-1 bg-green-100 text-green-800 p-1 rounded';
 bookingInfo.textContent = 'Available';
 dayElement.appendChild(bookingInfo);
 }
// Highlight today
 if (i === new Date().getDate() && currentMonth === new Date().getMonth()) {
 dayElement.classList.add('selected');
 const todayInfo = document.createElement('div');
 todayInfo.className = 'text-xs mt-1 bg-blue-100 text-blue-800 p-1 rounded';
 todayInfo.textContent = 'Today';
 dayElement.appendChild(todayInfo);
 }
calendar.appendChild(dayElement);
 }
// Calculate remaining cells (next month days)
 const totalCells = 42; // 6 rows x 7 days
 const remainingCells = totalCells - (firstDay + daysInMonth);
// Next month days
 for (let i = 1; i <= remainingCells; i++) {
 const dayElement = document.createElement('div');
 dayElement.className = 'calendar-day bg-gray-100 text-gray-400 p-2 h-24 rounded';
 dayElement.textContent = i;
 calendar.appendChild(dayElement);
 }
 }
// Initialize calendar
 generateCalendar();
// Add click event to calendar days
 document.getElementById('calendar').addEventListener('click', function(e) {
 const dayElement = e.target.closest('.calendar-day');
 if (dayElement && !dayElement.classList.contains('bg-gray-100')) {
 // Remove selected class from all days
 document.querySelectorAll('.calendar-day').forEach(day => {
 day.classList.remove('selected');
 });
// Add selected class to clicked day
 dayElement.classList.add('selected');
 }
 });
// Room card hover effect
 document.querySelectorAll('.room-card').forEach(card => {
 card.addEventListener('mouseenter', function() {
 this.classList.add('shadow-md');
 });
card.addEventListener('mouseleave', function() {
 this.classList.remove('shadow-md');
 });
 });
 </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=usups/booking" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>