348 lines
21 KiB
HTML
348 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<script>
|
|
window.FontAwesomeConfig = {
|
|
autoReplaceSvg: 'nest'
|
|
};
|
|
</script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
|
|
<title>Calendar — TrimTime</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
ink: '#111b15',
|
|
surface: '#ffffff',
|
|
muted: '#8b9790',
|
|
line: '#e1e7e2',
|
|
bgLight: '#f8f9f8',
|
|
accentRed: '#ec1c4b',
|
|
calTeal: '#dcf0f2',
|
|
calTealBorder: '#12a4b8',
|
|
calPurple: '#dce1fa',
|
|
calPurpleBorder: '#6432f7',
|
|
calGreen: '#e3f5e9',
|
|
calGreenBorder: '#23b355'
|
|
},
|
|
fontFamily: { sans: ['Inter', 'sans-serif'] },
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
|
|
|
/* Background grid for calendar */
|
|
.calendar-bg {
|
|
background-image: linear-gradient(to bottom, #e1e7e2 1px, transparent 1px);
|
|
background-size: 100% 60px; /* 1 hour slots */
|
|
}
|
|
|
|
.dashed-line {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 1px;
|
|
background-image: linear-gradient(to right, #e1e7e2 50%, transparent 50%);
|
|
background-size: 8px 1px;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
/* Striped background for unavailabilty */
|
|
.striped-bg {
|
|
background: repeating-linear-gradient(
|
|
45deg,
|
|
#f8f9f8,
|
|
#f8f9f8 10px,
|
|
#ffffff 10px,
|
|
#ffffff 20px
|
|
);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-ink min-h-screen pb-24 flex flex-col font-sans">
|
|
|
|
<!-- Header & Date Picker -->
|
|
<header class="bg-surface sticky top-0 z-40 border-b border-line shadow-sm">
|
|
<div class="flex items-center justify-between px-5 py-4">
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-ink hover:bg-bgLight transition-colors">
|
|
<i class="fa-regular fa-bell text-xl"></i>
|
|
</button>
|
|
|
|
<div class="flex flex-col items-center">
|
|
<button class="flex items-center gap-2 font-bold text-lg">
|
|
Today <i class="fa-solid fa-chevron-down text-sm"></i>
|
|
</button>
|
|
<span class="text-xs text-muted">10:00 - 19:00</span>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1">
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-ink hover:bg-bgLight transition-colors">
|
|
<i class="fa-solid fa-bars-staggered text-lg"></i>
|
|
</button>
|
|
<button class="w-10 h-10 rounded-full flex items-center justify-center text-ink hover:bg-bgLight transition-colors">
|
|
<i class="fa-solid fa-ellipsis-vertical text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date Horizontal -->
|
|
<div class="px-2 pb-4">
|
|
<div class="flex justify-between items-center px-4 overflow-x-auto no-scrollbar">
|
|
<button class="w-12 flex flex-col items-center gap-1 shrink-0 group">
|
|
<span class="text-[10px] font-medium uppercase text-muted">Sun</span>
|
|
<span class="text-lg font-medium text-ink group-hover:text-accentRed transition-colors">7</span>
|
|
</button>
|
|
<button class="w-12 flex flex-col items-center gap-1 shrink-0">
|
|
<span class="text-[10px] font-medium uppercase text-muted">Mon</span>
|
|
<span class="w-8 h-8 rounded-full bg-accentRed text-white flex items-center justify-center text-lg font-bold">8</span>
|
|
</button>
|
|
<button class="w-12 flex flex-col items-center gap-1 shrink-0 group">
|
|
<span class="text-[10px] font-medium uppercase text-muted">Tue</span>
|
|
<span class="text-lg font-medium text-ink group-hover:text-accentRed transition-colors">9</span>
|
|
</button>
|
|
<button class="w-12 flex flex-col items-center gap-1 shrink-0 group">
|
|
<span class="text-[10px] font-medium uppercase text-muted">Wed</span>
|
|
<span class="text-lg font-medium text-ink group-hover:text-accentRed transition-colors">10</span>
|
|
</button>
|
|
<button class="w-12 flex flex-col items-center gap-1 shrink-0 group">
|
|
<span class="text-[10px] font-medium uppercase text-muted">Thu</span>
|
|
<span class="text-lg font-medium text-ink group-hover:text-accentRed transition-colors">11</span>
|
|
</button>
|
|
<button class="w-12 flex flex-col items-center gap-1 shrink-0 group">
|
|
<span class="text-[10px] font-medium uppercase text-muted">Fri</span>
|
|
<span class="text-lg font-medium text-ink group-hover:text-accentRed transition-colors">12</span>
|
|
</button>
|
|
<button class="w-12 flex flex-col items-center gap-1 shrink-0 group">
|
|
<span class="text-[10px] font-medium uppercase text-muted">Sat</span>
|
|
<span class="text-lg font-medium text-ink group-hover:text-accentRed transition-colors">13</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Barbers Filter -->
|
|
<div class="flex px-4 py-3 border-t border-line overflow-x-auto no-scrollbar gap-6">
|
|
<button class="flex items-center gap-2 shrink-0">
|
|
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" alt="Patricia Taylor" class="w-8 h-8 rounded-full object-cover ring-2 ring-transparent ring-offset-1">
|
|
<div class="text-left">
|
|
<p class="text-sm font-semibold">Patricia Taylor</p>
|
|
<p class="text-[10px] text-muted">10:00-19:00</p>
|
|
</div>
|
|
</button>
|
|
<button class="flex items-center gap-2 shrink-0 opacity-60 hover:opacity-100 transition-opacity">
|
|
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" alt="Michael Brown" class="w-8 h-8 rounded-full object-cover">
|
|
<div class="text-left">
|
|
<p class="text-sm font-semibold">Michael Brown</p>
|
|
<p class="text-[10px] text-muted">10:00-19:00</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-1 relative">
|
|
<!-- Calendar Grid -->
|
|
<div class="flex w-full">
|
|
<!-- Time Column -->
|
|
<div class="w-14 shrink-0 border-r border-line relative z-10 bg-surface">
|
|
<!-- 09:00 -->
|
|
<div class="h-[60px] relative">
|
|
<span class="absolute -top-2.5 right-2 text-[10px] font-medium text-muted">09:00</span>
|
|
<div class="absolute top-[15px] right-2 text-[9px] text-line">15</div>
|
|
<div class="absolute top-[30px] right-2 text-[9px] text-line">30</div>
|
|
<div class="absolute top-[45px] right-2 text-[9px] text-line">45</div>
|
|
</div>
|
|
<!-- 10:00 -->
|
|
<div class="h-[60px] relative">
|
|
<span class="absolute -top-2.5 right-2 text-[10px] font-medium text-muted">10:00</span>
|
|
<div class="absolute top-[15px] right-2 text-[9px] text-line">15</div>
|
|
<div class="absolute top-[30px] right-2 text-[9px] text-line">30</div>
|
|
<div class="absolute top-[45px] right-2 text-[9px] text-line">45</div>
|
|
</div>
|
|
<!-- 11:00 -->
|
|
<div class="h-[60px] relative">
|
|
<span class="absolute -top-2.5 right-2 text-[10px] font-medium text-muted">11:00</span>
|
|
<div class="absolute top-[15px] right-2 text-[9px] text-line">15</div>
|
|
<div class="absolute top-[30px] right-2 text-[9px] text-line">30</div>
|
|
<div class="absolute top-[45px] right-2 text-[9px] text-line">45</div>
|
|
</div>
|
|
<!-- 12:00 -->
|
|
<div class="h-[60px] relative">
|
|
<span class="absolute -top-2.5 right-2 text-[10px] font-medium text-muted">12:00</span>
|
|
<div class="absolute top-[15px] right-2 text-[9px] text-line">15</div>
|
|
<div class="absolute top-[30px] right-2 text-[9px] text-line">30</div>
|
|
<div class="absolute top-[45px] right-2 text-[9px] text-line">45</div>
|
|
</div>
|
|
<!-- 13:00 -->
|
|
<div class="h-[60px] relative">
|
|
<span class="absolute -top-2.5 right-2 text-[10px] font-medium text-muted">13:00</span>
|
|
<div class="absolute top-[15px] right-2 text-[9px] text-line">15</div>
|
|
<div class="absolute top-[30px] right-2 text-[9px] text-line">30</div>
|
|
<div class="absolute top-[45px] right-2 text-[9px] text-line">45</div>
|
|
</div>
|
|
<!-- 14:00 -->
|
|
<div class="h-[60px] relative">
|
|
<span class="absolute -top-2.5 right-2 text-[10px] font-medium text-muted">14:00</span>
|
|
<div class="absolute top-[15px] right-2 text-[9px] text-line">15</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Appointments Area -->
|
|
<div class="flex-1 relative calendar-bg">
|
|
<!-- Half-hour dashed lines -->
|
|
<div class="dashed-line top-[30px]"></div>
|
|
<div class="dashed-line top-[90px]"></div>
|
|
<div class="dashed-line top-[150px]"></div>
|
|
<div class="dashed-line top-[210px]"></div>
|
|
<div class="dashed-line top-[270px]"></div>
|
|
<div class="dashed-line top-[330px]"></div>
|
|
|
|
<!-- Columns Container (for multi-barber view, but acting as grid container here) -->
|
|
<div class="absolute inset-0 flex w-[200%] md:w-full">
|
|
<!-- Patricia's Column -->
|
|
<div class="flex-1 relative h-[360px] border-r border-line">
|
|
|
|
<!-- Unavailable / Blocked Time (09:00 - 09:30) -->
|
|
<div class="absolute top-0 left-2 right-2 h-[30px] striped-bg rounded-md opacity-60"></div>
|
|
|
|
<!-- Appointment 1: 09:30 - 10:15 (45m) -> top: 30px, height: 45px -->
|
|
<div class="absolute top-[30px] left-2 right-2 h-[45px] bg-calTeal border-l-4 border-calTealBorder rounded-md p-1.5 overflow-hidden shadow-sm">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight">9:30 - 10:15</span>
|
|
<div class="w-4 h-4 bg-white rounded-full flex items-center justify-center shadow-sm">
|
|
<i class="fa-regular fa-comment text-[8px] text-muted"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-[11px] text-ink mt-0.5 truncate leading-tight">Nancy Moore • Dazzle Dry Manicure</p>
|
|
</div>
|
|
|
|
<!-- Mini Appointment: 11:00 - 11:15 (15m) -> top: 120px, height: 15px -->
|
|
<div class="absolute top-[120px] left-2 right-2 h-[18px] bg-rose-100 border-l-4 border-rose-400 rounded-md px-1.5 flex items-center justify-between shadow-sm overflow-hidden z-10">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight truncate">11:00 - 11:15 Daniel Dav</span>
|
|
<i class="fa-solid fa-heart text-[8px] text-rose-500 shrink-0"></i>
|
|
</div>
|
|
|
|
<!-- Appointment 2: 11:15 - 12:15 (60m) -> top: 135px, height: 60px -->
|
|
<div class="absolute top-[135px] left-2 right-2 h-[60px] bg-calPurple border-l-4 border-calPurpleBorder rounded-md p-1.5 overflow-hidden shadow-sm">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight">11:15 - 12:15</span>
|
|
<p class="text-[11px] text-ink mt-0.5 truncate leading-tight">Daniel Davis • Manicure</p>
|
|
</div>
|
|
|
|
<!-- Appointment 3: 12:30 - 13:15 (45m) -> top: 210px, height: 45px -->
|
|
<div class="absolute top-[210px] left-2 right-2 h-[45px] bg-calTeal border-l-4 border-calTealBorder rounded-md p-1.5 overflow-hidden shadow-sm">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight">12:30 - 13:15</span>
|
|
<div class="w-4 h-4 bg-white rounded-full flex items-center justify-center shadow-sm">
|
|
<i class="fa-regular fa-comment text-[8px] text-muted"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-[11px] text-ink mt-0.5 truncate leading-tight">Nancy Moore • Dazzle Dry Manicure</p>
|
|
</div>
|
|
|
|
<!-- Appointment 4: 13:15 - 14:45 (90m) -> top: 255px, height: 90px -->
|
|
<div class="absolute top-[255px] left-2 right-2 h-[90px] bg-calGreen border-l-4 border-calGreenBorder rounded-md p-1.5 overflow-hidden shadow-sm">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight">13:15 - 14:45</span>
|
|
<div class="w-4 h-4 bg-[#23b355] rounded-full flex items-center justify-center shadow-sm">
|
|
<i class="fa-solid fa-dollar-sign text-[8px] text-white"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-[11px] text-ink mt-0.5 truncate leading-tight">Sarah Jones • Nails Pro</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Michael's Column -->
|
|
<div class="flex-1 relative h-[360px]">
|
|
<!-- Appointment 1: 09:00 - 10:00 (60m) -> top: 0px, height: 60px -->
|
|
<div class="absolute top-0 left-2 right-2 h-[60px] bg-calTeal border-l-4 border-calTealBorder rounded-md p-1.5 overflow-hidden shadow-sm">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight">9:00 - 10:00</span>
|
|
<p class="text-[11px] text-ink mt-0.5 truncate leading-tight">John Doe • Hair Coloring</p>
|
|
</div>
|
|
|
|
<!-- Appointment 2: 10:30 - 11:15 (45m) -> top: 90px, height: 45px -->
|
|
<div class="absolute top-[90px] left-2 right-2 h-[45px] bg-calTeal border-l-4 border-calTealBorder rounded-md p-1.5 overflow-hidden shadow-sm">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight">10:30 - 11:15</span>
|
|
<div class="w-4 h-4 bg-[#8b5cf6] rounded-full flex items-center justify-center shadow-sm">
|
|
<i class="fa-solid fa-rocket text-[8px] text-white"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-[11px] text-ink mt-0.5 truncate leading-tight">Andrew Lopez • Hair Coloring</p>
|
|
</div>
|
|
|
|
<!-- Appointment 3: 11:30 - 12:30 (60m) -> top: 150px, height: 60px -->
|
|
<div class="absolute top-[150px] left-2 right-2 h-[60px] bg-calPurple border-l-4 border-calPurpleBorder rounded-md p-1.5 overflow-hidden shadow-sm">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight">11:30 - 12:30</span>
|
|
<p class="text-[11px] text-ink mt-0.5 leading-tight">Steven Hall • Hot Towel Shave</p>
|
|
</div>
|
|
|
|
<!-- Mini Appointment: 13:15 - 13:30 (15m) -> top: 255px, height: 18px -->
|
|
<div class="absolute top-[255px] left-2 right-2 h-[18px] bg-rose-100 border-l-4 border-rose-400 rounded-md px-1.5 flex items-center justify-between shadow-sm overflow-hidden z-10">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight truncate">13:15 - 13:30 Linda Cla</span>
|
|
<i class="fa-solid fa-heart text-[8px] text-rose-500 shrink-0"></i>
|
|
</div>
|
|
|
|
<!-- Appointment 4: 13:45 - 14:30 (45m) -> top: 285px, height: 45px -->
|
|
<div class="absolute top-[285px] left-2 right-2 h-[45px] bg-calTeal border-l-4 border-calTealBorder rounded-md p-1.5 overflow-hidden shadow-sm">
|
|
<div class="flex justify-between items-start">
|
|
<span class="text-[10px] font-semibold text-ink leading-tight">13:45 - 14:30</span>
|
|
<div class="w-4 h-4 bg-white rounded-full flex items-center justify-center shadow-sm">
|
|
<i class="fa-regular fa-comment text-[8px] text-muted"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-[11px] text-ink mt-0.5 truncate leading-tight">John Doe • Hair Coloring</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Time Line (e.g., 10:20) -> top: 80px -->
|
|
<div class="absolute left-0 right-0 h-px bg-accentRed z-20 top-[80px]">
|
|
<div class="absolute -left-1.5 -top-1.5 w-3 h-3 bg-accentRed rounded-full"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Floating Action Button -->
|
|
<div class="fixed bottom-20 right-4 z-50 flex flex-col gap-3">
|
|
<button class="w-14 h-14 bg-white border border-line rounded-full shadow-lg flex items-center justify-center text-ink hover:bg-bgLight transition-colors">
|
|
<i class="fa-solid fa-clipboard-check text-xl"></i>
|
|
</button>
|
|
<button class="w-14 h-14 bg-ink rounded-full shadow-lg flex items-center justify-center text-white hover:bg-black transition-colors">
|
|
<i class="fa-solid fa-plus text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Staff Navigation -->
|
|
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-2 px-5 border-t border-white/5 flex items-center justify-between">
|
|
<a href="StaffCalendar__mobile.html" class="flex flex-col items-center gap-1 text-white">
|
|
<i class="fa-solid fa-calendar-days text-xl"></i>
|
|
<span class="text-[10px] font-medium">Calendar</span>
|
|
</a>
|
|
<a href="StaffCurrent__mobile.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
|
|
<i class="fa-solid fa-scissors text-xl"></i>
|
|
<span class="text-[10px] font-medium">Current</span>
|
|
</a>
|
|
<a href="StaffCustomers__mobile.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
|
|
<i class="fa-solid fa-users text-xl"></i>
|
|
<span class="text-[10px] font-medium">Clients</span>
|
|
</a>
|
|
<a href="StaffSettings__mobile.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
|
|
<i class="fa-solid fa-gear text-xl"></i>
|
|
<span class="text-[10px] font-medium">Settings</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<style>
|
|
/* SafeArea support for iOS bottom bar */
|
|
.pb-safe { padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); }
|
|
</style>
|
|
</body>
|
|
</html> |