310 lines
21 KiB
HTML
310 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Calendar View - Scheduling Platform</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.calendar-day { min-height: 120px; }
|
|
.time-slot { height: 60px; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
<!-- Header -->
|
|
<header class="bg-white border-b border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
|
|
<div class="flex items-center space-x-8">
|
|
<h1 class="text-2xl font-bold text-gray-900">SchedulePro</h1>
|
|
<nav class="hidden md:flex space-x-6">
|
|
<a href="#" class="text-blue-600 font-medium">Calendar</a>
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Bookings</a>
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Services</a>
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Analytics</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button class="text-gray-600 hover:text-gray-900">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white font-medium">
|
|
JD
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="max-w-7xl mx-auto px-6 py-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
|
<!-- Calendar Section -->
|
|
<div class="lg:col-span-3">
|
|
<!-- Calendar Header -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center space-x-4">
|
|
<h2 class="text-2xl font-semibold text-gray-900">January 2025</h2>
|
|
<div class="flex space-x-2">
|
|
<button class="p-2 hover:bg-gray-100 rounded-lg">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<button class="p-2 hover:bg-gray-100 rounded-lg">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<button class="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">Day</button>
|
|
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg">Week</button>
|
|
<button class="px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg">Month</button>
|
|
<button class="px-4 py-2 text-sm font-medium text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50">
|
|
+ New Booking
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Week View Calendar -->
|
|
<div class="overflow-x-auto">
|
|
<div class="min-w-full">
|
|
<!-- Days Header -->
|
|
<div class="grid grid-cols-8 border-b border-gray-200">
|
|
<div class="p-3"></div>
|
|
<div class="p-3 text-center">
|
|
<div class="text-xs text-gray-500 font-medium">MON</div>
|
|
<div class="text-2xl font-semibold text-gray-900 mt-1">13</div>
|
|
</div>
|
|
<div class="p-3 text-center">
|
|
<div class="text-xs text-gray-500 font-medium">TUE</div>
|
|
<div class="text-2xl font-semibold text-gray-900 mt-1">14</div>
|
|
</div>
|
|
<div class="p-3 text-center bg-blue-50">
|
|
<div class="text-xs text-blue-600 font-medium">WED</div>
|
|
<div class="text-2xl font-semibold text-blue-600 mt-1">15</div>
|
|
</div>
|
|
<div class="p-3 text-center">
|
|
<div class="text-xs text-gray-500 font-medium">THU</div>
|
|
<div class="text-2xl font-semibold text-gray-900 mt-1">16</div>
|
|
</div>
|
|
<div class="p-3 text-center">
|
|
<div class="text-xs text-gray-500 font-medium">FRI</div>
|
|
<div class="text-2xl font-semibold text-gray-900 mt-1">17</div>
|
|
</div>
|
|
<div class="p-3 text-center">
|
|
<div class="text-xs text-gray-500 font-medium">SAT</div>
|
|
<div class="text-2xl font-semibold text-gray-400 mt-1">18</div>
|
|
</div>
|
|
<div class="p-3 text-center">
|
|
<div class="text-xs text-gray-500 font-medium">SUN</div>
|
|
<div class="text-2xl font-semibold text-gray-400 mt-1">19</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Time Slots -->
|
|
<div class="relative">
|
|
<!-- 9:00 AM Row -->
|
|
<div class="grid grid-cols-8 border-b border-gray-100">
|
|
<div class="p-3 text-sm text-gray-500 font-medium">9:00 AM</div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-green-50 border-l-4 border-l-green-500">
|
|
<div class="text-xs font-medium text-green-900">Hair Styling</div>
|
|
<div class="text-xs text-green-700">Sarah Johnson</div>
|
|
</div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-blue-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-purple-50 border-l-4 border-l-purple-500">
|
|
<div class="text-xs font-medium text-purple-900">Consultation</div>
|
|
<div class="text-xs text-purple-700">Mike Chen</div>
|
|
</div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
</div>
|
|
|
|
<!-- 10:00 AM Row -->
|
|
<div class="grid grid-cols-8 border-b border-gray-100">
|
|
<div class="p-3 text-sm text-gray-500 font-medium">10:00 AM</div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-blue-50 border-l-4 border-l-blue-500">
|
|
<div class="text-xs font-medium text-blue-900">Personal Training</div>
|
|
<div class="text-xs text-blue-700">Alex Rivera</div>
|
|
</div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-amber-50 border-l-4 border-l-amber-500">
|
|
<div class="text-xs font-medium text-amber-900">Massage Therapy</div>
|
|
<div class="text-xs text-amber-700">Emma Davis</div>
|
|
</div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
</div>
|
|
|
|
<!-- 11:00 AM Row -->
|
|
<div class="grid grid-cols-8 border-b border-gray-100">
|
|
<div class="p-3 text-sm text-gray-500 font-medium">11:00 AM</div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-blue-50 border-l-4 border-l-blue-500">
|
|
<div class="text-xs font-medium text-blue-900">Yoga Session</div>
|
|
<div class="text-xs text-blue-700">Lisa Park</div>
|
|
</div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-blue-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
</div>
|
|
|
|
<!-- 12:00 PM Row -->
|
|
<div class="grid grid-cols-8 border-b border-gray-100">
|
|
<div class="p-3 text-sm text-gray-500 font-medium">12:00 PM</div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-pink-50 border-l-4 border-l-pink-500">
|
|
<div class="text-xs font-medium text-pink-900">Makeup Session</div>
|
|
<div class="text-xs text-pink-700">Rachel Kim</div>
|
|
</div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-blue-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-green-50 border-l-4 border-l-green-500">
|
|
<div class="text-xs font-medium text-green-900">Nutrition Consult</div>
|
|
<div class="text-xs text-green-700">Tom Wilson</div>
|
|
</div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
</div>
|
|
|
|
<!-- 1:00 PM Row -->
|
|
<div class="grid grid-cols-8 border-b border-gray-100">
|
|
<div class="p-3 text-sm text-gray-500 font-medium">1:00 PM</div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-blue-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
</div>
|
|
|
|
<!-- 2:00 PM Row -->
|
|
<div class="grid grid-cols-8 border-b border-gray-100">
|
|
<div class="p-3 text-sm text-gray-500 font-medium">2:00 PM</div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-purple-50 border-l-4 border-l-purple-500">
|
|
<div class="text-xs font-medium text-purple-900">Design Review</div>
|
|
<div class="text-xs text-purple-700">James Lee</div>
|
|
</div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-amber-50 border-l-4 border-l-amber-500">
|
|
<div class="text-xs font-medium text-amber-900">Therapy Session</div>
|
|
<div class="text-xs text-amber-700">Anna Brown</div>
|
|
</div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-blue-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
<div class="time-slot border-l border-gray-100 p-2 bg-gray-50"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar - Upcoming Bookings -->
|
|
<div class="lg:col-span-1">
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Upcoming Today</h3>
|
|
|
|
<!-- Booking Item 1 -->
|
|
<div class="mb-4 pb-4 border-b border-gray-200">
|
|
<div class="flex items-start justify-between mb-2">
|
|
<div class="flex-1">
|
|
<div class="text-sm font-semibold text-gray-900">Personal Training</div>
|
|
<div class="text-xs text-gray-500 mt-1">Alex Rivera</div>
|
|
</div>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
Confirmed
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center text-xs text-gray-600 mt-2">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
10:00 AM - 11:00 AM
|
|
</div>
|
|
<div class="text-xs font-medium text-gray-900 mt-2">$75.00</div>
|
|
</div>
|
|
|
|
<!-- Booking Item 2 -->
|
|
<div class="mb-4 pb-4 border-b border-gray-200">
|
|
<div class="flex items-start justify-between mb-2">
|
|
<div class="flex-1">
|
|
<div class="text-sm font-semibold text-gray-900">Makeup Session</div>
|
|
<div class="text-xs text-gray-500 mt-1">Rachel Kim</div>
|
|
</div>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
Pending
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center text-xs text-gray-600 mt-2">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
12:00 PM - 1:30 PM
|
|
</div>
|
|
<div class="text-xs font-medium text-gray-900 mt-2">$120.00</div>
|
|
</div>
|
|
|
|
<!-- Booking Item 3 -->
|
|
<div class="mb-4 pb-4 border-b border-gray-200">
|
|
<div class="flex items-start justify-between mb-2">
|
|
<div class="flex-1">
|
|
<div class="text-sm font-semibold text-gray-900">Therapy Session</div>
|
|
<div class="text-xs text-gray-500 mt-1">Anna Brown</div>
|
|
</div>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
Confirmed
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center text-xs text-gray-600 mt-2">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
2:00 PM - 3:00 PM
|
|
</div>
|
|
<div class="text-xs font-medium text-gray-900 mt-2">$150.00</div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="mt-6 pt-4 border-t border-gray-200">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="text-sm text-gray-600">Today's Revenue</span>
|
|
<span class="text-lg font-semibold text-gray-900">$345.00</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-sm text-gray-600">Total Bookings</span>
|
|
<span class="text-lg font-semibold text-gray-900">8</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Availability Settings -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mt-6">
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
|
|
<button class="w-full px-4 py-2 text-sm font-medium text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 mb-3">
|
|
Set Availability
|
|
</button>
|
|
<button class="w-full px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">
|
|
Block Time Off
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |