|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="content flex-1 overflow-y-auto"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
document.getElementById('sidebarToggle').addEventListener('click', function() { |
|
|
document.querySelector('.sidebar').classList.toggle('collapsed'); |
|
|
document.querySelector('.content').classList.toggle('expanded'); |
|
|
}); |
|
|
|
|
|
|
|
|
function generateCalendar() { |
|
|
const calendar = document.getElementById('calendar'); |
|
|
const date = new Date(); |
|
|
const currentMonth = date.getMonth(); |
|
|
const currentYear = date.getFullYear(); |
|
|
|
|
|
|
|
|
const firstDay = new Date(currentYear, currentMonth, 1).getDay(); |
|
|
|
|
|
|
|
|
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); |
|
|
|
|
|
|
|
|
const prevMonthDays = new Date(currentYear, currentMonth, 0).getDate(); |
|
|
|
|
|
|
|
|
calendar.innerHTML = ''; |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
for (let i = 1; i <= daysInMonth; i++) { |
|
|
const dayElement = document.createElement('div'); |
|
|
dayElement.className = 'calendar-day border p-2 h-24 rounded cursor-pointer'; |
|
|
|
|
|
|
|
|
const dateNumber = document.createElement('div'); |
|
|
dateNumber.className = 'font-bold'; |
|
|
dateNumber.textContent = i; |
|
|
dayElement.appendChild(dateNumber); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
const totalCells = 42; |
|
|
const remainingCells = totalCells - (firstDay + daysInMonth); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
generateCalendar(); |
|
|
|
|
|
|
|
|
document.getElementById('calendar').addEventListener('click', function(e) { |
|
|
const dayElement = e.target.closest('.calendar-day'); |
|
|
if (dayElement && !dayElement.classList.contains('bg-gray-100')) { |
|
|
|
|
|
document.querySelectorAll('.calendar-day').forEach(day => { |
|
|
day.classList.remove('selected'); |
|
|
}); |
|
|
|
|
|
|
|
|
dayElement.classList.add('selected'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
