lazis002/NextChair
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PHP Rebuild
CI / ci (push) Canceled after 0s
Details

Browse Source 
Initial PHP rebuild of the app
This commit is contained in:
Stefan Lazic committed 2026-09-05 08:21:33 +01:00
1 parent 8a2b211069
commit 2ef3654841
690 files changed
+33944 -12046
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

legacy-nextjs/templates/1-NextChair - Staff - Calendar.html
+348
View File
@@ -0,0 +1,348 @@
<!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>