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

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

No files matched your search

@@ -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>
@@ -0,0 +1,115 @@
<!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, viewport-fit=cover">
<title>Settings</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="px-6 py-6 bg-white border-b border-line sticky top-0 z-40">
<h1 class="text-2xl font-bold tracking-tight">Settings</h1>
</header>
<main class="mt-6">
<!-- Profile Overview -->
<section class="px-6 mb-8">
<div class="bg-white p-5 rounded-jumbo border border-line flex items-center gap-4 shadow-sm">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" class="w-16 h-16 rounded-full border border-line" alt="User">
<div class="flex-1">
<h2 class="text-lg font-bold">Alex Chen</h2>
<p class="text-xs text-muted">alex.chen@example.com</p>
</div>
<button class="w-10 h-10 bg-stone rounded-full flex items-center justify-center text-ink">
<i class="fa-solid fa-pen text-xs"></i>
</button>
</div>
</section>
<!-- Setting Links -->
<section class="px-6 space-y-3">
<div class="bg-white rounded-jumbo border border-line overflow-hidden">
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-user-check text-xs"></i></div>
<span class="text-sm font-bold">Preferred Barber</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-award text-xs"></i></div>
<span class="text-sm font-bold">Loyalty Card</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full px-6 py-5 flex items-center justify-between hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-bell text-xs"></i></div>
<span class="text-sm font-bold">Notifications</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
</div>
<div class="bg-white rounded-jumbo border border-line overflow-hidden">
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-shield-halved text-xs"></i></div>
<span class="text-sm font-bold">Privacy &amp; Security</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full px-6 py-5 flex items-center justify-between hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-circle-question text-xs"></i></div>
<span class="text-sm font-bold">Help &amp; Support</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
</div>
<button onclick="location.href='Welcome__mobile.html'" class="w-full bg-white text-error py-5 rounded-jumbo border border-line font-bold uppercase text-xs tracking-widest hover:bg-red-50 transition-all flex items-center justify-center gap-2">
<i class="fa-solid fa-right-from-bracket"></i>
Log Out
</button>
</section>
</main>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-2 px-5 flex justify-between items-center">
<a href="Home__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-house text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</a>
<a href="Appointments__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span>
</a>
<a href="Settings__mobile.html" class="flex flex-col items-center gap-1 text-ink">
<i class="fa-solid fa-user text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,202 @@
<!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, viewport-fit=cover">
<title>My Loyalty Card — TrimTime</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">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#111b15',
stone: '#f4f6f4',
surface: '#ffffff',
muted: '#6c7870',
line: '#e1e7e2',
accent: '#f59e0b',
},
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
<style>
.perspective-1000 { perspective: 1000px; }
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }
/* Glossy overlay effect */
.glossy::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.08) 100%);
pointer-events: none;
border-radius: inherit;
z-index: 10;
}
/* Subtle shimmer on the gold border */
.gold-border {
border: 3px solid transparent;
background-clip: padding-box;
box-shadow:
0 0 0 3px #f59e0b,
0 30px 60px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.15);
}
</style>
</head>
<body class="bg-stone text-ink overflow-x-hidden pb-32" style="font-family: 'Inter', sans-serif;">
<!-- Header -->
<header class="px-6 pt-12 pb-4 flex items-center justify-between">
<button class="w-11 h-11 rounded-full bg-white border border-line flex items-center justify-center shadow-sm">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-xl font-bold tracking-tight">Loyalty Rewards</h1>
<div class="w-11"></div>
</header>
<main class="px-5 pt-2">
<!-- 3D Card Container -->
<div class="perspective-1000 w-full mb-10" style="aspect-ratio: 1.65 / 1;">
<div id="loyaltyCard" class="relative w-full h-full preserve-3d gold-border rounded-2xl" style="transform: rotateY(0deg);">
<!-- ═══ FRONT SIDE (Stamps) ═══ -->
<div class="absolute inset-0 backface-hidden bg-[#141414] rounded-2xl flex flex-col justify-between glossy overflow-hidden"
style="padding: 14px 16px 10px 16px;">
<!-- Top: Title -->
<div class="flex justify-between items-center">
<h2 class="text-white font-black italic tracking-tight" style="font-size: clamp(16px, 4.5vw, 22px);">Loyalty Card</h2>
<span class="text-[#f59e0b] font-bold uppercase tracking-widest border border-[#f59e0b]/30 px-2 py-0.5 rounded" style="font-size: 8px;">Member #8421</span>
</div>
<!-- Divider -->
<div class="w-10 h-0.5 bg-[#f59e0b]" style="margin-top: -2px;"></div>
<!-- Stamp Grid -->
<div class="grid grid-cols-5 gap-2 flex-1 items-center" style="margin-top: 8px; margin-bottom: 6px;">
<!-- Row 1: all stamped -->
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<!-- Row 2: 2 stamped, 2 empty, 1 reward -->
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-[#2a2a2a] border-2 border-dashed border-white/20 rounded-full flex items-center justify-center"></div>
<div class="aspect-square bg-[#2a2a2a] border-2 border-dashed border-white/20 rounded-full flex items-center justify-center"></div>
<!-- Reward slot -->
<div class="aspect-square bg-[#f59e0b] rounded-full flex items-center justify-center shadow-lg" style="transform: scale(1.08);">
<span class="text-ink font-black leading-tight text-center" style="font-size: clamp(7px, 1.8vw, 10px);">50%<br>OFF</span>
</div>
</div>
<!-- Footer: redemption notice -->
<p class="text-white/40 font-bold uppercase tracking-widest text-center" style="font-size: clamp(5px, 1.5vw, 7px); letter-spacing: 0.18em;">
Only redeemable Monday – Thursday &nbsp;·&nbsp; Adults Only
</p>
</div>
<!-- ═══ BACK SIDE (Brand) ═══ -->
<div class="absolute inset-0 rotate-y-180 backface-hidden rounded-2xl overflow-hidden">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_be9ca24e80_ca4b1efb48698320.png" alt="vintage moody barbershop background with grooming tools, dark and elegant, premium feel, deep blacks" />
<div class="absolute inset-0 bg-ink/60 flex items-center justify-center">
<div class="text-center">
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-ink text-3xl mx-auto mb-4">
<i class="fa-solid fa-scissors"></i>
</div>
<h3 class="text-white text-2xl font-black uppercase tracking-tighter">TrimTime</h3>
<p class="text-[#f59e0b] font-bold uppercase mt-2" style="font-size: 10px; letter-spacing: 0.3em;">Barber &amp; Grooming</p>
</div>
</div>
</div>
</div>
</div>
<!-- Progress & Info -->
<div class="space-y-5">
<!-- Progress Card -->
<div class="bg-white p-6 rounded-3xl border border-line shadow-sm text-center">
<h3 class="text-lg font-bold mb-1">Almost there, Alex!</h3>
<p class="text-sm text-muted">Complete 2 more visits to unlock your <span class="font-bold text-ink">50% discount</span> on any service.</p>
<div class="mt-5 h-2 w-full bg-stone rounded-full overflow-hidden">
<div class="bg-[#f59e0b] h-full rounded-full" style="width: 77%;"></div>
</div>
<p class="text-xs text-muted mt-2">7 of 9 visits completed</p>
</div>
<!-- How It Works -->
<div class="bg-white p-6 rounded-3xl border border-line shadow-sm">
<h4 class="text-xs font-bold uppercase tracking-widest text-muted mb-5">How it works</h4>
<div class="space-y-4">
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-stone flex items-center justify-center text-xs font-bold shrink-0">1</div>
<p class="text-xs text-muted leading-relaxed pt-1">Book your appointment through the TrimTime app.</p>
</div>
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-stone flex items-center justify-center text-xs font-bold shrink-0">2</div>
<p class="text-xs text-muted leading-relaxed pt-1">Show this digital card to your barber after your haircut.</p>
</div>
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-stone flex items-center justify-center text-xs font-bold shrink-0">3</div>
<p class="text-xs text-muted leading-relaxed pt-1">The barber will add a digital stamp to your card instantly.</p>
</div>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-2 px-5 flex justify-between items-center">
<a href="Home__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-house text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</a>
<a href="Appointments__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span>
</a>
<a href="Settings__mobile.html" class="flex flex-col items-center gap-1 text-ink">
<i class="fa-solid fa-user text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,95 @@
<!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, viewport-fit=cover">
<title>Team Management — TrimTime Admin</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="fixed top-0 left-0 right-0 z-50 px-6 py-6 bg-white/80 backdrop-blur-md border-b border-line flex items-center justify-between">
<h1 class="text-xl font-bold tracking-tight">Our Team</h1>
<button class="w-10 h-10 bg-ink text-white rounded-full flex items-center justify-center">
<i class="fa-solid fa-plus text-sm"></i>
</button>
</header>
<main class="pt-24 px-6 space-y-4">
<!-- Staff Member -->
<div class="bg-white p-5 rounded-jumbo border border-line flex items-center gap-4 shadow-sm group">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-14 h-14 rounded-full border border-line" alt="Marcus">
<div class="flex-1">
<h3 class="text-sm font-bold">Marcus Reed</h3>
<p class="text-[10px] text-accent font-bold uppercase tracking-widest mt-0.5">Master Barber • Active</p>
</div>
<button class="w-10 h-10 border border-line rounded-full flex items-center justify-center text-muted group-hover:text-ink">
<i class="fa-solid fa-chevron-right text-xs"></i>
</button>
</div>
<!-- Staff Member -->
<div class="bg-white p-5 rounded-jumbo border border-line flex items-center gap-4 shadow-sm group">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-14 h-14 rounded-full border border-line" alt="Leo">
<div class="flex-1">
<h3 class="text-sm font-bold">Leo Vance</h3>
<p class="text-[10px] text-accent font-bold uppercase tracking-widest mt-0.5">Senior Specialist • Active</p>
</div>
<button class="w-10 h-10 border border-line rounded-full flex items-center justify-center text-muted group-hover:text-ink">
<i class="fa-solid fa-chevron-right text-xs"></i>
</button>
</div>
<!-- Staff Member -->
<div class="bg-white p-5 rounded-jumbo border border-line flex items-center gap-4 shadow-sm group opacity-60">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" class="w-14 h-14 rounded-full border border-line grayscale" alt="Sasha">
<div class="flex-1">
<h3 class="text-sm font-bold">Sasha Gray</h3>
<p class="text-[10px] text-muted font-bold uppercase tracking-widest mt-0.5">Expert Stylist • On Break</p>
</div>
<button class="w-10 h-10 border border-line rounded-full flex items-center justify-center text-muted group-hover:text-ink">
<i class="fa-solid fa-chevron-right text-xs"></i>
</button>
</div>
</main>
<!-- Admin Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-4 px-10 border-t border-white/5 flex items-center justify-between">
<a href="OwnerDashboard__mobile.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<i class="fa-solid fa-chart-line text-xl"></i>
<span class="text-[10px] font-medium">Dashboard</span>
</a>
<a href="OwnerStaff__mobile.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-users text-xl"></i>
<span class="text-[10px] font-medium">Staff</span>
</a>
<a href="StaffCalendar__mobile.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<i class="fa-solid fa-calendar-days text-xl"></i>
<span class="text-[10px] font-medium">Calendar</span>
</a>
<a href="OwnerSettings__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">Admin</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,147 @@
<!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, viewport-fit=cover">
<title>Business Settings — TrimTime Admin</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="px-6 pt-12 pb-6 bg-white border-b border-line sticky top-0 z-40">
<h1 class="text-2xl font-bold tracking-tight">Business Admin</h1>
</header>
<main class="mt-6 px-6 space-y-6">
<!-- Profile Card -->
<div class="bg-white p-5 rounded-jumbo border border-line flex items-center gap-4 shadow-sm">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-16 h-16 rounded-full border border-line" alt="Marcus">
<div class="flex-1">
<h2 class="text-lg font-bold">Shop Owner</h2>
<p class="text-[10px] text-accent font-bold uppercase tracking-widest">Administrator</p>
</div>
<button class="w-10 h-10 bg-stone rounded-full flex items-center justify-center text-ink">
<i class="fa-solid fa-pen text-xs"></i>
</button>
</div>
<!-- NEW: Analytics Card (Dashboard relocated here) -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Shop Performance</h3>
<button onclick="location.href='OwnerDashboard__mobile.html'" class="w-full bg-ink text-white p-6 rounded-jumbo flex items-center justify-between shadow-lg shadow-ink/20">
<div class="flex items-center gap-4">
<div class="w-10 h-10 bg-white/10 rounded-xl flex items-center justify-center">
<i class="fa-solid fa-chart-simple"></i>
</div>
<div class="text-left">
<span class="text-sm font-bold block">Business Dashboard</span>
<span class="text-[10px] text-white/60">Revenue, Occupancy, & Trends</span>
</div>
</div>
<i class="fa-solid fa-chevron-right text-xs"></i>
</button>
</section>
<!-- Business Rules -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Shop Controls</h3>
<div class="bg-white rounded-jumbo border border-line overflow-hidden">
<button onclick="location.href='OwnerStaff__mobile.html'" class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-users text-xs"></i></div>
<span class="text-sm font-bold">Team Management</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-list-check text-xs"></i></div>
<span class="text-sm font-bold">Services &amp; Categories</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-crown text-xs text-amber-500"></i></div>
<span class="text-sm font-bold">Loyalty Programme</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full px-6 py-5 flex items-center justify-between hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-clock-rotate-left text-xs"></i></div>
<span class="text-sm font-bold">Booking Windows</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
</div>
</section>
<!-- Standard Staff Settings (Merged) -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Staff Preferences</h3>
<div class="bg-white rounded-jumbo border border-line overflow-hidden">
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-clock text-xs"></i></div>
<span class="text-sm font-bold">Working Hours</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-bell text-xs"></i></div>
<span class="text-sm font-bold">Notifications</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button onclick="location.href='Welcome__mobile.html'" class="w-full px-6 py-5 flex items-center justify-between hover:bg-red-50 transition-all text-error">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center text-error"><i class="fa-solid fa-right-from-bracket text-xs"></i></div>
<span class="text-sm font-bold">Log Out</span>
</div>
</button>
</div>
</section>
</main>
<!-- Navigation remains contextual to whoever is viewing (Staff or Owner) -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-4 px-10 border-t border-white/5 flex items-center justify-between">
<a href="StaffCalendar__mobile.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<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="OwnerSettings__mobile.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-gear text-xl"></i>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,127 @@
<!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, viewport-fit=cover">
<title>Customer Details — TrimTime</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="fixed top-0 left-0 right-0 z-50 px-6 py-6 bg-white/80 backdrop-blur-md border-b border-line flex items-center justify-between">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-lg font-bold tracking-tight">Client Details</h1>
<button class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-pen text-xs"></i>
</button>
</header>
<main class="pt-24 px-4 space-y-6">
<!-- Profile Overview -->
<div class="bg-white p-6 rounded-jumbo border border-line shadow-sm flex flex-col items-center text-center">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" class="w-24 h-24 rounded-full border-4 border-stone mb-4" alt="Alex Chen">
<h2 class="text-2xl font-bold">Alex Chen</h2>
<p class="text-sm text-muted">Client since Jan 2024</p>
<div class="flex gap-4 mt-6 w-full">
<div class="flex-1 bg-stone/50 p-3 rounded-xl">
<span class="text-[10px] font-bold uppercase text-muted block mb-1">Total Visits</span>
<p class="text-lg font-bold">12</p>
</div>
<div class="flex-1 bg-stone/50 p-3 rounded-xl">
<span class="text-[10px] font-bold uppercase text-muted block mb-1">Loyalty</span>
<p class="text-lg font-bold">8 / 10</p>
</div>
</div>
</div>
<!-- Contact Actions -->
<div class="grid grid-cols-2 gap-3">
<a href="tel:123456789" class="bg-white py-4 rounded-xl border border-line flex items-center justify-center gap-2 font-bold text-sm">
<i class="fa-solid fa-phone text-accent"></i> Call
</a>
<a href="mailto:alex@example.com" class="bg-white py-4 rounded-xl border border-line flex items-center justify-center gap-2 font-bold text-sm">
<i class="fa-solid fa-envelope text-accent"></i> Email
</a>
</div>
<!-- Notes Section -->
<section>
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1 mb-3">Service Notes</h3>
<div class="bg-white p-5 rounded-jumbo border border-line space-y-4">
<div class="border-b border-line pb-4">
<p class="text-xs font-bold mb-1">Oct 12, 2024</p>
<p class="text-sm text-gray-700">Prefers a high skin fade. Always uses matte clay. Very sensitive on the neck area.</p>
</div>
<div>
<p class="text-xs font-bold mb-1">Aug 15, 2024</p>
<p class="text-sm text-gray-700">First time beard trim. Keep it squared off, not rounded.</p>
</div>
<button class="w-full py-3 bg-stone rounded-lg text-[10px] font-bold uppercase tracking-widest">+ Add Note</button>
</div>
</section>
<!-- Visit History -->
<section>
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1 mb-3">Visit History</h3>
<div class="space-y-3">
<div class="bg-white p-4 rounded-xl border border-line flex justify-between items-center">
<div>
<p class="text-sm font-bold">Standard Cut</p>
<p class="text-[10px] text-muted">Oct 12 • Marcus Reed</p>
</div>
<span class="text-sm font-bold">$35.00</span>
</div>
<div class="bg-white p-4 rounded-xl border border-line flex justify-between items-center">
<div>
<p class="text-sm font-bold">Beard Trim</p>
<p class="text-[10px] text-muted">Aug 15 • Leo Vance</p>
</div>
<span class="text-sm font-bold">$20.00</span>
</div>
</div>
</section>
</main>
<!-- 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 hover:text-white transition-colors">
<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 text-white">
<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>
</body>
</html>
+380
View File
@@ -0,0 +1,380 @@
<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, viewport-fit=cover">
<title>Home</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">
<script>
tailwind.config = {
theme:
{
extend:
{
colors:
{
ink: '#111b15',
stone: '#f4f6f4',
surface: '#ffffff',
muted: '#6c7870',
line: '#e1e7e2',
accent: '#10b981'
},
fontFamily:
{
sans: ['Inter', 'sans-serif']
},
borderRadius:
{
jumbo: '1rem',
tile: '0.75rem'
}
}
}
}
</script>
<style>
.no-scrollbar::-webkit-scrollbar
{
display: none;
}
.nav-blur
{
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
</style>
</head>
<body class="bg-stone text-ink overflow-x-hidden pb-32">
<!-- Top Hero Section -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>The Cut &amp; Shave Co. — TrimTime</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<section class="relative">
<div class="h-72 w-full overflow-hidden"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_6f41884203_51631d7a07f0b3a6.png"
alt="exterior and interior of a premium heritage barbershop, dark wood, classic signage, atmospheric ligh"
class="w-full h-full object-cover"></div>
<!-- Header Overlay Buttons -->
<!-- Photos Overlay --><button
class="absolute bottom-6 right-6 bg-white/90 backdrop-blur-sm px-4 py-2 rounded-lg text-[10px] font-bold uppercase tracking-widest shadow-sm">
Show all photos
</button>
</section><!-- Gallery Preview -->
<div class="flex gap-1 overflow-x-auto no-scrollbar py-1 bg-stone"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e586b8a854_62ba2a631fca3c08.png"
alt="men's sharp fade haircut, side profile, barbershop background"
class="w-24 h-20 object-cover"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_782a439f88_fc2c5d9ed81f2686.png"
alt="barber grooming a beard with precision, warm lighting"
class="w-24 h-20 object-cover"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e188dc18b7_604cc720c67b47cc.png"
alt="classic pompadour hairstyle, professional studio lighting"
class="w-24 h-20 object-cover"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_312c057f78_b7165e53db4b5429.png"
alt="modern beard trim and shape up" class="w-24 h-20 object-cover">
<div class="relative w-24 h-20 shrink-0"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_2b32eca278_abfffae3ac340230.png"
alt="barbershop interior wide shot"
class="w-full h-full object-cover brightness-50"><span
class="absolute inset-0 flex items-center justify-center text-white font-bold text-sm">+29</span>
</div>
</div>
<main class="bg-white">
<!-- Shop Info -->
<section class="px-6 py-6">
<h1 class="text-2xl font-bold tracking-tight mb-1">Blake Heritage
Barbershop</h1>
<p class="text-xs text-muted mb-3">79 Joel Street, HA6 1LW, Northwood,
Northwood</p>
<div class="flex items-center gap-3 text-sm mb-4">
<div class="flex items-center gap-1 text-amber-500"><i
class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i
class="fa-solid fa-star"></i></div><span
class="font-bold">5.0</span><a href="#"
class="text-blue-600 underline">1,142 reviews</a>
</div>
<p class="text-[10px] font-bold uppercase tracking-widest text-muted">
Entrepreneur</p>
</section><!-- Policy Link -->
<section class="px-6 py-4 border-t border-line"><button
class="w-full flex items-center justify-between group">
<div class="flex items-center gap-3">
<div
class="w-8 h-8 rounded-lg bg-green-50 flex items-center justify-center text-green-600">
<i class="fa-solid fa-shield-halved"></i></div><span
class="text-sm font-medium">Review policies and safety</span>
</div><i
class="fa-solid fa-chevron-right text-muted group-hover:translate-x-1 transition-transform"></i>
</button></section><!-- Tabbed Menu -->
<section
class="sticky top-0 z-40 bg-white border-b border-line overflow-x-auto no-scrollbar">
<div class="flex px-6"><button onclick="switchTab('services')"
id="tab-services"
class="tab-btn px-4 py-4 text-[10px] font-bold uppercase tracking-[0.15em] border-b-2 border-ink whitespace-nowrap">Services</button><button
onclick="switchTab('portfolio')" id="tab-portfolio"
class="tab-btn px-4 py-4 text-[10px] font-bold uppercase tracking-[0.15em] border-b-2 border-transparent text-muted whitespace-nowrap">Portfolio</button><button
onclick="switchTab('details')" id="tab-details"
class="tab-btn px-4 py-4 text-[10px] font-bold uppercase tracking-[0.15em] border-b-2 border-transparent text-muted whitespace-nowrap">Details</button>
</div>
</section><!-- Tab Contents -->
<div id="content-services" class="tab-content block">
<!-- Search -->
<div class="px-6 py-4">
<div class="relative"><i
class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-muted"></i><input
type="text" placeholder="Search for service"
class="w-full bg-stone/50 border border-line rounded-xl pl-12 pr-4 py-4 focus:ring-2 focus:ring-ink outline-none text-sm transition-all">
</div>
</div><!-- Categories -->
<div class="px-6 flex gap-2 overflow-x-auto no-scrollbar mb-6"><button
class="px-4 py-2 rounded-full border border-ink bg-ink text-white text-[10px] font-bold whitespace-nowrap">Hair
&amp; Beard Services Senior B...</button><button
class="px-4 py-2 rounded-full border border-line bg-stone text-ink text-[10px] font-bold whitespace-nowrap">(Junior
Barber)</button></div><!-- Service List -->
<div class="px-6 space-y-6 pb-12">
<div>
<h3 class="text-sm font-bold mb-4 flex items-center gap-2">👍 Hair
&amp; Beard Services Senior Barber</h3>
<div class="space-y-6">
<div class="flex justify-between items-start gap-4">
<div class="flex-1">
<h4 class="text-sm font-medium mb-1">Haircut &amp; Style (Skin
fade/Taper not included)</h4>
<p class="text-xs text-muted">30m</p>
</div>
<div class="text-right">
<p class="font-bold mb-2">£22.00</p><button
onclick="location.href='Schedule__mobile.html'"
class="bg-blue-500 text-white px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-blue-600 transition-colors">Book</button>
</div>
</div>
<div
class="flex justify-between items-start gap-4 pt-6 border-t border-stone">
<div class="flex-1">
<h4 class="text-sm font-medium mb-1">Skinfade / Taper &amp;
Style (Beard not included)</h4>
<p class="text-xs text-muted">30m</p>
</div>
<div class="text-right">
<p class="font-bold mb-2">£25.00</p><button
onclick="location.href='Schedule__mobile.html'"
class="bg-blue-500 text-white px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-blue-600 transition-colors">Book</button>
</div>
</div>
<div
class="flex justify-between items-start gap-4 pt-6 border-t border-stone">
<div class="flex-1">
<h4 class="text-sm font-medium mb-1">Haircut &amp; Beard
(Skinfade not included)</h4>
<p class="text-xs text-muted">40m</p>
</div>
<div class="text-right">
<p class="font-bold mb-2">£30.00</p><button
onclick="location.href='Schedule__mobile.html'"
class="bg-blue-500 text-white px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-blue-600 transition-colors">Book</button>
</div>
</div>
</div>
</div>
<div class="pt-8">
<h3 class="text-sm font-bold mb-4">Oap Haircut</h3>
<div class="flex justify-between items-start gap-4">
<div class="flex-1">
<h4 class="text-sm font-medium mb-1">Standard OAP Cut</h4>
<p class="text-xs text-muted">20m</p>
</div>
<div class="text-right">
<p class="font-bold mb-2">£15.00+</p><button
onclick="location.href='Schedule__mobile.html'"
class="bg-blue-500 text-white px-6 py-2 rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-blue-600 transition-colors">Book</button>
</div>
</div>
</div>
</div>
</div>
<div id="content-reviews" class="tab-content hidden p-6">
<h3 class="text-lg font-bold mb-4">Reviews</h3>
<p class="text-sm text-muted">Review content goes here...</p>
</div>
<div id="content-portfolio" class="tab-content hidden">
<div class="px-6 py-4 flex gap-2 overflow-x-auto no-scrollbar"><button
class="px-4 py-2 rounded-full bg-ink text-white text-[10px] font-bold">All</button><button
class="px-4 py-2 rounded-full bg-stone text-ink text-[10px] font-bold">Fades</button><button
class="px-4 py-2 rounded-full bg-stone text-ink text-[10px] font-bold">Beards</button><button
class="px-4 py-2 rounded-full bg-stone text-ink text-[10px] font-bold">Long
Hair</button></div>
<div class="grid grid-cols-2 gap-1 bg-stone p-1"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_da55042625_823a14a0d2abd502.png"
alt="sharp skin fade haircut detailed work"
class="w-full aspect-square object-cover"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_15370a1287_f764d58e3bd92072.png"
alt="professional beard line up and trim"
class="w-full aspect-square object-cover"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_465184396a_408d980cf6a78b99.png"
alt="classic pompadour styling"
class="w-full aspect-square object-cover"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_b8c3765997_e56374cb93dd94a8.png"
alt="textured crop haircut for men"
class="w-full aspect-square object-cover"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_8bee30dac8_9efb939a95f39e70.png"
alt="clean tapered haircut profile"
class="w-full aspect-square object-cover"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_73a26d2bf3_6c12eeca17949780.png"
alt="master barber at work with clippers"
class="w-full aspect-square object-cover"></div>
</div>
<div id="content-packages" class="tab-content hidden p-6">
<h3 class="text-lg font-bold mb-4">Packages</h3>
<p class="text-sm text-muted">Packages content goes here...</p>
</div>
<div id="content-details" class="tab-content hidden">
<!-- Map Section -->
<div class="relative h-48 bg-stone"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_48ef4fd311_eab8ed092996a6b5.png"
alt="simplified stylized street map of Northwood London area with a pin icon"
class="w-full h-full object-cover">
<div
class="absolute inset-x-6 bottom-4 bg-white p-4 rounded-xl shadow-lg border border-line flex items-center justify-between">
<div>
<h4 class="text-xs font-bold mb-1">Blake Heritage Barbershop</h4>
<p class="text-[10px] text-muted">79 Joel Street, HA6 1LW</p>
</div><button
class="w-10 h-10 rounded-full bg-stone flex items-center justify-center"><i
class="fa-solid fa-location-arrow text-blue-600"></i></button>
</div>
</div><!-- About -->
<section class="px-6 py-8">
<h3
class="text-[10px] font-bold uppercase tracking-widest text-muted mb-4">
About Us</h3>
<p class="text-sm leading-relaxed text-gray-700">
Blake Heritage has come to Northwood! Check our Instagram
@Blake.Heritage.Barbershop for more info..
</p>
</section><!-- Staff -->
<section class="px-6 pb-8">
<h3
class="text-[10px] font-bold uppercase tracking-widest text-muted mb-6">
Staffers</h3>
<div class="flex gap-6 overflow-x-auto no-scrollbar">
<div class="w-20 shrink-0 text-center"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg"
alt="Jay"
class="w-20 h-20 rounded-full object-cover mb-2 border border-line">
<p class="text-xs font-medium">Jay The Bar...</p>
</div>
<div class="w-20 shrink-0 text-center"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg"
alt="Issa"
class="w-20 h-20 rounded-full object-cover mb-2 border border-line">
<p class="text-xs font-medium">Barber Issa</p>
</div>
<div class="w-20 shrink-0 text-center"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg"
alt="Alfie"
class="w-20 h-20 rounded-full object-cover mb-2 border border-line">
<p class="text-xs font-medium">Alfie (Junior...</p>
</div>
</div>
</section><!-- Hours -->
<section class="px-6 pb-8">
<h3
class="text-[10px] font-bold uppercase tracking-widest text-muted mb-6">
Contact &amp; Business Hours</h3>
<div class="space-y-4">
<div class="flex justify-between items-center text-sm"><span
class="text-gray-600">Monday</span><span
class="font-medium text-muted">Closed</span></div>
<div class="flex justify-between items-center text-sm"><span
class="text-gray-600">Tuesday</span><span
class="font-bold">10:00 - 19:00</span></div>
<div class="flex justify-between items-center text-sm"><span
class="text-gray-600">Wednesday</span><span
class="font-bold">10:00 - 19:00</span></div>
<div class="flex justify-between items-center text-sm"><span
class="text-gray-600">Thursday</span><span
class="font-bold">10:00 - 19:30</span></div>
<div class="flex justify-between items-center text-sm"><span
class="text-gray-600">Friday</span><span class="font-bold">10:00
- 19:00</span></div>
</div>
</section><!-- Amenities -->
<section class="px-6 pb-12">
<h3
class="text-[10px] font-bold uppercase tracking-widest text-muted mb-4">
Venue Amenities</h3>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center gap-3 text-sm"><i
class="fa-solid fa-car text-muted"></i><span>Free Parking</span>
</div>
<div class="flex items-center gap-3 text-sm"><i
class="fa-solid fa-wifi text-muted"></i><span>Guest WiFi</span>
</div>
</div>
</section>
</div>
</main>
<script>
function switchTab(tabId)
{
// Hide all content
document.querySelectorAll('.tab-content').forEach(content =>
{
content.classList.add('hidden');
content.classList.remove('block');
});
// Show selected content
const activeContent = document.getElementById('content-' + tabId);
activeContent.classList.remove('hidden');
activeContent.classList.add('block');
// Reset tab styles
document.querySelectorAll('.tab-btn').forEach(btn =>
{
btn.classList.remove('border-ink');
btn.classList.add('border-transparent', 'text-muted');
});
// Highlight active tab
const activeTab = document.getElementById('tab-' + tabId);
activeTab.classList.add('border-ink');
activeTab.classList.remove('border-transparent', 'text-muted');
}
</script>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-4 px-10 flex justify-between items-center">
<a href="Home__mobile.html" class="flex flex-col items-center gap-1 text-ink">
<i class="fa-solid fa-house text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</a>
<a href="Appointments__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span>
</a>
<a href="Settings__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-user text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,140 @@
<!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, viewport-fit=cover">
<title>Appointments</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
appbg: '#f8f9f8',
cardbg: '#ffffff',
ink: '#111b15',
muted: '#8a948e',
line: '#eaeaeb',
brandbtn: '#4887a0',
pillbg: '#e4e6e5'
},
fontFamily: { sans: ['Inter', 'sans-serif'] },
boxShadow: {
'card': '0 2px 10px rgba(0, 0, 0, 0.03)'
}
}
}
}
</script>
</head>
<body class="bg-appbg text-ink min-h-screen pb-28 font-sans">
<!-- Header -->
<header class="px-5 py-6 bg-appbg sticky top-0 z-40">
<h1 class="text-3xl font-bold tracking-tight">Appointments</h1>
</header>
<main class="px-5 max-w-md mx-auto">
<!-- Section Header -->
<div class="py-4">
<h2 class="text-sm font-medium text-muted uppercase tracking-wide">Finished Appointments</h2>
</div>
<!-- Appointments List -->
<div class="space-y-4">
<!-- Appointment Card 1 -->
<div class="bg-cardbg rounded-2xl shadow-card p-4 flex">
<!-- Left Side Details -->
<div class="flex-1 pr-4">
<span class="inline-block px-3 py-1 bg-pillbg text-muted text-xs font-medium rounded-full mb-3">Finished</span>
<h3 class="text-[14px] font-semibold leading-tight text-ink mb-1">Haircut & Style (Skin fade/Taper not included)</h3>
<p class="text-sm text-muted mb-3">with Jay The Barber</p>
<button class="bg-brandbtn text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-opacity-90 transition-opacity">
Book again
</button>
</div>
<!-- Right Side Date/Time -->
<div class="w-20 pl-4 border-l border-line flex flex-col items-center justify-center text-center">
<span class="text-[15px] text-ink mb-1">August</span>
<span class="text-4xl font-light text-ink mb-2">1</span>
<span class="text-[15px] text-ink">11:55</span>
</div>
</div>
<!-- Appointment Card 2 -->
<div class="bg-cardbg rounded-2xl shadow-card p-4 flex">
<!-- Left Side Details -->
<div class="flex-1 pr-4">
<span class="inline-block px-3 py-1 bg-pillbg text-muted text-xs font-medium rounded-full mb-3">Finished</span>
<h3 class="text-[14px] font-semibold leading-tight text-ink mb-1">Haircut & Style (Skin fade/Taper not included)</h3>
<p class="text-sm text-muted mb-3">with Jay The Barber</p>
<button class="bg-brandbtn text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-opacity-90 transition-opacity">
Book again
</button>
</div>
<!-- Right Side Date/Time -->
<div class="w-20 pl-4 border-l border-line flex flex-col items-center justify-center text-center">
<span class="text-[15px] text-ink mb-1">June</span>
<span class="text-4xl font-light text-ink mb-2">17</span>
<span class="text-[15px] text-ink">10:00</span>
</div>
</div>
<!-- Appointment Card 3 -->
<div class="bg-cardbg rounded-2xl shadow-card p-4 flex">
<!-- Left Side Details -->
<div class="flex-1 pr-4">
<span class="inline-block px-3 py-1 bg-pillbg text-muted text-xs font-medium rounded-full mb-3">Cancelled</span>
<h3 class="text-[14px] font-semibold leading-tight text-ink mb-1">Haircut & Style (Skin fade/Taper not included)</h3>
<p class="text-sm text-muted mb-3">with Jay The Barber</p>
<button class="bg-brandbtn text-white px-5 py-2.5 rounded-lg text-sm font-medium hover:bg-opacity-90 transition-opacity">
Book again
</button>
</div>
<!-- Right Side Date/Time -->
<div class="w-20 pl-4 border-l border-line flex flex-col items-center justify-center text-center">
<span class="text-[15px] text-ink mb-1">April</span>
<span class="text-4xl font-light text-ink mb-2">15</span>
<span class="text-[15px] text-ink">10:00</span>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-4 px-10 flex justify-between items-center">
<a href="Home__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-house text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</a>
<a href="Appointments__mobile.html" class="flex flex-col items-center gap-1 text-ink">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span>
</a>
<a href="Settings__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-user text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,183 @@
<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, viewport-fit=cover">
<title>Confirmed</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">
<script>
tailwind.config = {
theme:
{
extend:
{
colors:
{
ink: '#111b15',
stone: '#f4f6f4',
surface: '#ffffff',
muted: '#6c7870',
line: '#e1e7e2',
accent: '#10b981',
},
fontFamily:
{
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
},
borderRadius:
{
jumbo: '1.5rem',
tile: '1rem',
}
}
}
}
</script>
<style>
body
{
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
}
.nav-blur
{
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
@keyframes scaleIn
{
from
{
transform: scale(0.8);
opacity: 0;
}
to
{
transform: scale(1);
opacity: 1;
}
}
.animate-scale-in
{
animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
</style>
</head>
<body class="bg-stone text-ink overflow-x-hidden">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Booking Confirmed — TrimTime</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<main class="pt-12 pb-24 px-6 flex flex-col items-center">
<!-- Success Animation/Icon -->
<div
class="w-24 h-24 bg-accent rounded-full flex items-center justify-center text-white text-4xl mb-8 animate-scale-in shadow-lg shadow-accent/20">
<i class="fa-solid fa-check"></i></div>
<h1 class="text-3xl font-semibold text-center mb-2">You're all set!</h1>
<p class="text-muted text-center mb-10">We've sent a confirmation to your
email.</p><!-- Booking Details Card -->
<section
class="w-full bg-surface rounded-jumbo shadow-soft p-8 mb-10 border border-line">
<div class="flex justify-between items-start mb-6">
<div><span
class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Service</span>
<h2 class="text-xl font-semibold">Standard Cut</h2>
</div>
<div class="text-right"><span
class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Price</span><span
class="text-xl font-semibold">£22.00</span></div>
</div>
<div class="grid grid-cols-2 gap-6 pt-6 border-t border-line">
<div><span
class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Barber</span>
<div class="flex items-center gap-2"><img
src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg"
alt="Leo" class="w-6 h-6 rounded-full object-cover"><span
class="text-sm font-medium">Leo</span></div>
</div>
<div><span
class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Duration</span><span
class="text-sm font-medium">30 min</span></div>
<div><span
class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Date</span><span
class="text-sm font-medium">Sat, Aug 24</span></div>
<div><span
class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Time</span><span
class="text-sm font-medium">14:00 PM</span></div>
</div>
<div
class="mt-8 pt-6 border-t border-line flex justify-between items-center">
<button
class="text-xs font-bold uppercase tracking-widest text-ink hover:text-accent flex items-center gap-2"><i
class="fa-solid fa-calendar-plus"></i> Add to Calendar
</button></div>
</section><!-- Loyalty Card Section -->
<section
class="w-full bg-ink text-white rounded-tile p-8 mb-10 shadow-xl relative overflow-hidden">
<div class="relative z-10">
<div class="flex justify-between items-center mb-6">
<h3 class="text-lg font-semibold">TrimTime Loyalty</h3><i
class="fa-solid fa-crown text-amber-400"></i>
</div><!-- Stamp Progress -->
<div class="flex justify-between mb-4">
<div class="flex gap-2">
<div
class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-[10px]">
<i class="fa-solid fa-scissors"></i></div>
<div
class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-[10px]">
<i class="fa-solid fa-scissors"></i></div>
<div
class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-[10px]">
<i class="fa-solid fa-scissors"></i></div>
<div
class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-[10px]">
<i class="fa-solid fa-scissors"></i></div>
<div
class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-[10px]">
<i class="fa-solid fa-scissors"></i></div>
<div
class="w-8 h-8 rounded-full bg-accent flex items-center justify-center text-[10px]">
<i class="fa-solid fa-scissors"></i></div>
</div>
<div class="flex gap-2">
<div class="w-8 h-8 rounded-full border border-white/20"></div>
<div class="w-8 h-8 rounded-full border border-white/20"></div>
<div class="w-8 h-8 rounded-full border border-white/20"></div>
<div class="w-8 h-8 rounded-full border border-white/20"></div>
</div>
</div>
<p class="text-sm font-medium">6 of 10 stamps collected</p>
<p class="text-xs text-white/50 mt-1">4 more visits until your free
haircut.</p>
</div><!-- Decorative Background Element -->
<div
class="absolute -right-8 -bottom-8 w-32 h-32 bg-accent/20 rounded-full blur-3xl">
</div>
</section><!-- Final Actions -->
<div class="w-full space-y-4"><a href="Home__mobile.html"
class="block w-full bg-ink text-white py-5 rounded-full text-center font-bold uppercase tracking-widest hover:bg-black transition-all">
Done
</a></div>
</main><!-- Fixed Bottom Navigation -->
</body>
</html>
@@ -0,0 +1,207 @@
<!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, viewport-fit=cover">
<title>Booking</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#111b15',
stone: '#f4f6f4',
surface: '#ffffff',
muted: '#6c7870',
line: '#e1e7e2',
accent: '#10b981',
},
fontFamily: {
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
},
borderRadius: {
jumbo: '1.5rem',
tile: '1rem',
}
}
}
}
</script>
<style>
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.nav-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.sticky-bottom { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
</style>
</head>
<body class="bg-stone text-ink overflow-x-hidden">
<!-- Header -->
<header class="fixed top-0 left-0 right-0 z-50 px-4 py-4 bg-stone/80 nav-blur border-b border-line flex items-center justify-between">
<a href="Services__mobile.html" class="w-10 h-10 rounded-full border border-line flex items-center justify-center hover:bg-surface transition-colors">
<i class="fa-solid fa-arrow-left text-sm"></i>
</a>
<h1 class="text-lg font-semibold tracking-tight">Barber & Time</h1>
<div class="w-10"></div>
</header>
<main class="pt-24 pb-12 px-4 space-y-8">
<!-- Barber Selection (Circle Style) -->
<section>
<div class="flex gap-6 overflow-x-auto hide-scrollbar py-2">
<!-- Anyone -->
<button class="flex flex-col items-center gap-2 group shrink-0">
<div class="relative w-14 h-14 rounded-full border-2 border-accent bg-surface flex items-center justify-center">
<i class="fa-solid fa-user text-muted text-xl"></i>
<div class="absolute -top-1 -right-1 w-5 h-5 bg-accent border-2 border-white rounded-full flex items-center justify-center">
<i class="fa-solid fa-check text-[10px] text-white"></i>
</div>
</div>
<span class="text-[10px] font-medium text-muted">Anyone</span>
</button>
<!-- Barber 1 -->
<button class="flex flex-col items-center gap-2 group shrink-0">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-14 h-14 rounded-full grayscale border border-line" alt="Tony">
<span class="text-[10px] font-medium text-muted">Tony</span>
</button>
<!-- Barber 2 -->
<button class="flex flex-col items-center gap-2 group shrink-0">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-14 h-14 rounded-full grayscale border border-line" alt="Vince">
<span class="text-[10px] font-medium text-muted">Vince</span>
</button>
<!-- Barber 3 -->
<button class="flex flex-col items-center gap-2 group shrink-0">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" class="w-14 h-14 rounded-full grayscale border border-line" alt="Sandro">
<span class="text-[10px] font-medium text-muted">Sandro</span>
</button>
</div>
</section>
<!-- Calendar Month Grid -->
<section class="bg-surface rounded-tile border border-line p-4">
<div class="flex items-center justify-between mb-6">
<h3 class="text-base font-semibold">September 2020</h3>
<button class="flex items-center gap-2 text-xs text-muted border border-line rounded-lg px-3 py-1.5">
Show Month <i class="fa-solid fa-chevron-down text-[10px]"></i>
</button>
</div>
<!-- Calendar Headers -->
<div class="grid grid-cols-7 text-center mb-4">
<span class="text-[10px] font-bold uppercase text-muted">Sun</span>
<span class="text-[10px] font-bold uppercase text-muted">Mon</span>
<span class="text-[10px] font-bold uppercase text-muted">Tue</span>
<span class="text-[10px] font-bold uppercase text-muted">Wed</span>
<span class="text-[10px] font-bold uppercase text-muted">Thu</span>
<span class="text-[10px] font-bold uppercase text-muted">Fri</span>
<span class="text-[10px] font-bold uppercase text-muted">Sat</span>
</div>
<!-- Calendar Days -->
<div class="grid grid-cols-7 text-center gap-y-2">
<!-- Row 1 -->
<span class="py-2 text-sm text-line">20</span>
<span class="py-2 text-sm text-line">21</span>
<span class="py-2 text-sm text-line">22</span>
<span class="py-2 text-sm text-line">23</span>
<span class="py-2 text-sm text-line">24</span>
<span class="py-2 text-sm text-line">25</span>
<span class="py-2 text-sm font-medium border border-line rounded-lg">26</span>
<!-- Row 2 -->
<span class="py-2 text-sm text-muted">27</span>
<span class="py-2 text-sm text-muted">28</span>
<span class="bg-accent/10 border-2 border-accent text-ink rounded-lg py-2 text-sm font-bold">29</span>
<span class="py-2 text-sm text-ink">30</span>
<span class="py-2 text-sm text-ink">1</span>
<span class="py-2 text-sm text-ink">2</span>
<span class="py-2 text-sm text-ink">3</span>
</div>
</section>
<!-- Time Slots -->
<section>
<div class="flex gap-3 overflow-x-auto hide-scrollbar py-2">
<button class="bg-surface border border-line px-6 py-4 rounded-xl text-sm font-medium shrink-0 min-w-[100px]">8:00 AM</button>
<button class="bg-surface border border-line px-6 py-4 rounded-xl text-sm font-medium shrink-0 min-w-[100px]">8:15 AM</button>
<button class="bg-accent/10 border-2 border-accent px-6 py-4 rounded-xl text-sm font-bold shrink-0 min-w-[100px]">8:30 AM</button>
<button class="bg-surface border border-line px-6 py-4 rounded-xl text-sm font-medium shrink-0 min-w-[100px]">8:45 AM</button>
</div>
</section>
<!-- Selection Summary -->
<section class="border-t border-line pt-6">
<div class="flex items-start justify-between">
<div>
<h4 class="text-base font-bold">Haircut</h4>
<div class="flex items-center gap-2 mt-2">
<div class="w-6 h-6 rounded-full bg-stone flex items-center justify-center">
<i class="fa-solid fa-user text-[10px] text-muted"></i>
</div>
<span class="text-xs text-muted">Anyone</span>
<button class="text-[10px] font-bold uppercase tracking-widest text-ink border border-line px-2 py-0.5 rounded-full ml-2">Change</button>
</div>
</div>
<div class="text-right">
<span class="text-xs text-muted">8:30 AM - 8:45 AM</span>
</div>
</div>
<button class="flex items-center gap-2 text-accent text-xs font-bold uppercase tracking-widest mt-8">
<i class="fa-solid fa-plus"></i> Add another service
</button>
<div class="mt-8 border-t border-line pt-6">
<div class="flex items-center gap-3 text-muted">
<i class="fa-regular fa-comment"></i>
<input type="text" placeholder="Leave a note (optional)" class="bg-transparent border-none focus:ring-0 text-sm w-full outline-none">
</div>
</div>
</section>
<!-- Final Booking Button -->
<section class="pt-4">
<button onclick="location.href='Confirmation__mobile.html'" class="w-full bg-accent text-white py-5 rounded-xl font-bold text-base uppercase tracking-widest shadow-lg shadow-accent/20">
Book
</button>
</section>
</main>
<!-- Sticky Bottom Panel (Summary info above nav) -->
<div class="fixed bottom-[76px] left-0 right-0 z-40 bg-stone/90 sticky-bottom border-t border-line px-6 py-4 flex items-center justify-between">
<div>
<span class="text-[10px] text-muted font-bold uppercase tracking-wider block">Sat, Aug 24 • 14:00</span>
<span class="text-xl font-semibold">$30.00</span>
</div>
<a href="Confirmation__mobile.html" class="bg-ink text-white px-6 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-black transition-all shadow-lg flex items-center gap-2">
Review <i class="fa-solid fa-chevron-right text-xs"></i>
</a>
</div>
<!-- Fixed Bottom Navigation (Updated per reference) -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white text-[#111b15] py-5 px-6 border-t border-line flex items-center justify-around shadow-[0_-4px_20px_rgba(0,0,0,0.05)]">
<a href="NextChair - Customer - Home__mobile.html" class="flex flex-col items-center gap-2 group">
<i class="fa-solid fa-house text-xl opacity-60 group-hover:opacity-100 transition-opacity"></i>
<span class="text-[9px] font-black uppercase tracking-[0.1em] opacity-60 group-hover:opacity-100 transition-opacity">Home</span>
</a>
<a href="NextChair - Customer - Booking__mobile.html" class="flex flex-col items-center gap-2 group">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[9px] font-black uppercase tracking-[0.1em]">Bookings</span>
</a>
<a href="OwnerSettings__mobile.html" class="flex flex-col items-center gap-2 group">
<i class="fa-solid fa-user text-xl opacity-60 group-hover:opacity-100 transition-opacity"></i>
<span class="text-[9px] font-black uppercase tracking-[0.1em] opacity-60 group-hover:opacity-100 transition-opacity">Settings</span>
</a>
</nav>
</body>
</html>
+101
View File
@@ -0,0 +1,101 @@
<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, viewport-fit=cover">
<title>Create Account — TrimTime</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">
<script>
tailwind.config = {
theme:
{
extend:
{
colors:
{
ink: '#111b15',
stone: '#f4f6f4',
surface: '#ffffff',
muted: '#6c7870',
line: '#e1e7e2',
accent: '#10b981'
},
fontFamily:
{
sans: ['Inter', 'sans-serif']
},
borderRadius:
{
jumbo: '1rem',
tile: '0.75rem'
}
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen flex flex-col px-6 py-12">
<div class="flex-1 max-w-md mx-auto w-full h-[500px] block" id="igc4">
<header class="mb-10"><button onclick="history.back()"
class="w-10 h-10 rounded-full border border-line flex items-center justify-center mb-8"><i
class="fa-solid fa-arrow-left text-sm"></i></button>
<h1 class="text-3xl font-bold tracking-tight">Create Account</h1>
<p class="text-muted mt-2">Join TrimTime to track your appointments and
loyalty.</p>
</header>
<form class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div><label
class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">First
Name</label><input type="text" placeholder="John"
class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
<div><label
class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Last
Name</label><input type="text" placeholder="Doe"
class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
</div>
<div><label
class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Email
Address</label><input type="email" placeholder="name@example.com"
class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
<div><label
class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Phone
Number</label><input type="tel" placeholder="+1 (555) 000-0000"
class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
<div><label
class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Password</label><input
type="password" placeholder="••••••••"
class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
<p class="text-[10px] text-muted leading-relaxed px-1">
By creating an account, you agree to our <a href="#"
class="underline">Terms of Service</a> and <a href="#"
class="underline">Privacy Policy</a>.
</p><button type="button" onclick="location.href='Verify__mobile.html'"
class="w-full bg-ink text-white py-5 rounded-full font-bold uppercase tracking-widest hover:bg-black transition-all shadow-lg mt-4">
Sign Up
</button>
</form>
<p class="mt-10 text-center text-sm text-muted">
Already have an account? <a href="Login__mobile.html"
class="text-ink font-bold border-b border-ink">Log in</a></p>
</div>
</body>
</html>
+120
View File
@@ -0,0 +1,120 @@
<!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, viewport-fit=cover">
<title>Active Appointment — TrimTime</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="px-6 py-6">
<h1 class="text-2xl font-bold tracking-tight">Current Visit</h1>
</header>
<main class="px-6 space-y-6">
<!-- Active Client Card -->
<div class="bg-ink text-white p-8 rounded-jumbo shadow-xl relative overflow-hidden">
<div class="relative z-10">
<div class="flex items-center gap-4 mb-8">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" class="w-20 h-20 rounded-full border-2 border-white/20" alt="Client">
<div>
<h2 class="text-2xl font-bold">Alex Chen</h2>
<div class="flex items-center gap-2 mt-1">
<span class="text-[10px] font-bold uppercase tracking-widest text-accent">Arrived</span>
<div class="w-1 h-1 bg-white/20 rounded-full"></div>
<span class="text-[10px] font-bold uppercase tracking-widest text-white/60">Regular</span>
</div>
</div>
</div>
<div class="space-y-6 mb-10">
<div class="flex items-center justify-between">
<span class="text-[10px] font-bold uppercase tracking-widest text-white/40">Service</span>
<span class="text-sm font-bold">Standard Cut • 30m</span>
</div>
<div class="flex items-center justify-between">
<span class="text-[10px] font-bold uppercase tracking-widest text-white/40">Notes</span>
<span class="text-sm font-medium italic">Keep length on top.</span>
</div>
</div>
<div class="flex gap-3">
<button class="flex-1 bg-accent text-white py-4 rounded-xl font-bold uppercase text-xs tracking-widest">Start Visit</button>
<button class="w-14 h-14 bg-white/10 rounded-xl flex items-center justify-center border border-white/20">
<i class="fa-solid fa-phone"></i>
</button>
</div>
</div>
<div class="absolute -right-12 -bottom-12 w-48 h-48 bg-white/5 rounded-full blur-3xl"></div>
</div>
<!-- Post-Visit Actions -->
<div class="bg-white p-6 rounded-jumbo border border-line space-y-4">
<h3 class="text-xs font-bold uppercase tracking-widest text-muted ml-1">Post-Visit Tasks</h3>
<button class="w-full py-5 bg-stone border border-line rounded-xl flex items-center justify-center gap-3 text-sm font-bold hover:bg-ink hover:text-white transition-all group">
<i class="fa-solid fa-stamp text-accent group-hover:text-white"></i>
Add Loyalty Stamp
</button>
<button class="w-full py-5 bg-stone border border-line rounded-xl flex items-center justify-center gap-3 text-sm font-bold hover:bg-ink hover:text-white transition-all group">
<i class="fa-solid fa-calendar-check text-accent group-hover:text-white"></i>
Mark as Completed
</button>
</div>
<!-- Customer Profile Note -->
<div class="bg-white p-6 rounded-jumbo border border-line">
<h3 class="text-xs font-bold uppercase tracking-widest text-muted mb-4 ml-1">Customer History</h3>
<div class="flex gap-2">
<div class="flex-1 bg-stone/50 p-3 rounded-lg">
<span class="text-[8px] font-bold uppercase text-muted block mb-1">Last Visit</span>
<p class="text-xs font-bold">Aug 12, 2024</p>
</div>
<div class="flex-1 bg-stone/50 p-3 rounded-lg">
<span class="text-[8px] font-bold uppercase text-muted block mb-1">Stamps</span>
<p class="text-xs font-bold">8 / 10</p>
</div>
</div>
</div>
</main>
<!-- 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 hover:text-white transition-colors">
<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 text-white">
<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>
</body>
</html>
+69
View File
@@ -0,0 +1,69 @@
<!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, viewport-fit=cover">
<title>Welcome — TrimTime</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#111b15',
stone: '#f4f6f4',
surface: '#ffffff',
muted: '#6c7870',
line: '#e1e7e2',
accent: '#10b981',
},
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen flex flex-col">
<div class="flex-1 relative flex flex-col justify-end">
<!-- Hero Background -->
<div class="absolute inset-0 z-0">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_87441e7357_9c456e6b69e28328.png" alt="cinematic portrait of a barber shop interior with vintage chairs, moody lighting, high-end editorial" />
<div class="absolute inset-0 bg-gradient-to-t from-ink via-ink/40 to-transparent"></div>
</div>
<!-- Content -->
<div class="relative z-10 px-8 pb-16">
<div class="w-16 h-16 bg-white text-ink rounded-2xl flex items-center justify-center text-3xl mb-8">
<i class="fa-solid fa-scissors"></i>
</div>
<h1 class="text-5xl font-bold text-white tracking-tight leading-tight mb-4">TrimTime</h1>
<p class="text-white/70 text-lg mb-12 max-w-xs">Precision grooming at your fingertips. Book your next visit in seconds.</p>
<div class="space-y-4">
<button onclick="location.href='CreateAccount__mobile.html'" class="w-full bg-white text-ink py-5 rounded-full font-bold uppercase tracking-widest hover:bg-stone transition-all">
Create Account
</button>
<button onclick="location.href='Login__mobile.html'" class="w-full bg-transparent border-2 border-white/20 text-white py-5 rounded-full font-bold uppercase tracking-widest hover:bg-white/10 transition-all">
Sign In
</button>
</div>
<div class="mt-12 text-center">
<button onclick="location.href='Home__mobile.html'" class="text-white/50 text-sm font-medium hover:text-white transition-colors">
Continue as Guest
</button>
</div>
</div>
</div>
</body>
</html>
@@ -0,0 +1,130 @@
<!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, viewport-fit=cover">
<title>Admin Dashboard — TrimTime</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="fixed top-0 left-0 right-0 z-50 px-6 py-6 bg-white/80 backdrop-blur-md border-b border-line flex items-center justify-between">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-lg font-bold tracking-tight">Business Dashboard</h1>
<div class="w-10"></div>
</header>
<main class="mt-24 px-6 space-y-8">
<!-- Business Health Stats -->
<section class="grid grid-cols-2 gap-3">
<div class="bg-white p-5 rounded-jumbo border border-line shadow-sm">
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Total Visits</span>
<p class="text-2xl font-bold">124</p>
<span class="text-[8px] text-accent font-bold">This Week</span>
</div>
<div class="bg-white p-5 rounded-jumbo border border-line shadow-sm">
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Occupancy</span>
<p class="text-2xl font-bold">88%</p>
<span class="text-[8px] text-accent font-bold">Peak Hours</span>
</div>
</section>
<!-- Popular Services -->
<section>
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1 mb-4">Top Services</h3>
<div class="bg-white rounded-jumbo border border-line overflow-hidden">
<div class="px-6 py-4 border-b border-line flex items-center justify-between">
<span class="text-sm font-bold">Standard Cut</span>
<span class="text-xs text-muted">42%</span>
</div>
<div class="px-6 py-4 border-b border-line flex items-center justify-between">
<span class="text-sm font-bold">Skin Fade</span>
<span class="text-xs text-muted">31%</span>
</div>
<div class="px-6 py-4 flex items-center justify-between">
<span class="text-sm font-bold">Beard Sculpt</span>
<span class="text-xs text-muted">18%</span>
</div>
</div>
</section>
<!-- Staff Performance -->
<section>
<div class="flex justify-between items-end mb-4 px-1">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted">Staff Performance</h3>
<a href="OwnerStaff__mobile.html" class="text-[10px] font-bold text-ink uppercase tracking-widest border-b border-ink">Manage Team</a>
</div>
<div class="space-y-3">
<div class="bg-white p-4 rounded-jumbo border border-line flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-10 h-10 rounded-full" alt="Marcus">
<div class="flex-1">
<p class="text-sm font-bold">Marcus Reed</p>
<div class="h-1.5 w-full bg-stone rounded-full mt-2 overflow-hidden">
<div class="h-full bg-accent w-[92%]"></div>
</div>
</div>
<span class="text-xs font-bold">92%</span>
</div>
<div class="bg-white p-4 rounded-jumbo border border-line flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-10 h-10 rounded-full" alt="Leo">
<div class="flex-1">
<p class="text-sm font-bold">Leo Vance</p>
<div class="h-1.5 w-full bg-stone rounded-full mt-2 overflow-hidden">
<div class="h-full bg-accent w-[78%]"></div>
</div>
</div>
<span class="text-xs font-bold">78%</span>
</div>
</div>
</section>
<!-- Booking Rules Quick Link -->
<section class="bg-ink text-white p-6 rounded-jumbo">
<h3 class="text-lg font-bold mb-2">Booking Rules</h3>
<p class="text-white/60 text-xs mb-6">Manage cancellation policies, booking windows, and lead times.</p>
<button class="w-full bg-white text-ink py-3 rounded-xl font-bold text-xs uppercase tracking-widest">Update Rules</button>
</section>
</main>
<!-- Admin Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-4 px-10 border-t border-white/5 flex items-center justify-between">
<a href="StaffCalendar__mobile.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<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="OwnerSettings__mobile.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-gear text-xl"></i>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,418 @@
<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, viewport-fit=cover">
<title>Loyalty Configuration</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&amp;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',
stone: '#f4f6f4',
surface: '#ffffff',
muted: '#6c7870',
line: '#e1e7e2',
accent: '#10b981',
},
fontFamily:
{
sans: ['Inter', 'sans-serif']
},
borderRadius:
{
jumbo: '1.5rem',
tile: '1rem'
}
}
}
}
</script>
<style>
::-webkit-scrollbar
{
display: none;
}
</style>
</head>
<body class="bg-stone text-ink font-sans pb-40">
<!-- Header -->
<header id="header"
class="bg-white border-b border-line px-6 pt-12 pb-5 sticky top-0 z-50 flex items-center justify-between">
<div class="flex items-center gap-4"><button onclick="history.back()"
class="w-10 h-10 rounded-full border border-line flex items-center justify-center"><i
class="fa-solid fa-arrow-left text-sm"></i></button>
<h1 class="text-xl font-bold tracking-tight">Loyalty Setup</h1>
</div><button
class="bg-accent text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-full">Save</button>
</header>
<main id="main" class="mt-6 px-5 space-y-8">
<!-- 1. Card Appearance -->
<section id="card-appearance" class="space-y-4">
<h3
class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">
Card Appearance</h3>
<div id="i3isp"
class="bg-white p-6 rounded-jumbo border border-line shadow-sm space-y-8 h-[620px]">
<!-- Back of Card -->
<div id="back-image-section"></div><!-- Divider -->
<!-- Front Background — Toggle -->
<div id="front-background-section"
class="relative left-0 top-[-37px]">
<div class="flex items-center justify-between mb-5"><label
class="block text-xs font-bold">Background</label>
<!-- Toggle Switch -->
<div class="flex items-center gap-2 bg-stone rounded-full p-1">
<button id="btn-color" onclick="setFrontMode('color')"
class="px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest transition-all bg-ink text-white shadow">Color</button><button
id="btn-image" onclick="setFrontMode('image')"
class="px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-widest transition-all text-muted">Image</button>
</div>
</div><!-- Color Mode -->
<div id="front-color-mode">
<div class="flex items-center gap-3 flex-wrap"><button
onclick="selectColor(this, '#111b15')"
class="w-11 h-11 rounded-full bg-[#111b15] border-[3px] border-accent shadow-md ring-2 ring-accent/30"></button><button
onclick="selectColor(this, '#f4f6f4')"
class="w-11 h-11 rounded-full bg-[#f4f6f4] border-2 border-line"></button><button
onclick="selectColor(this, '#1e293b')"
class="w-11 h-11 rounded-full bg-[#1e293b] border-2 border-line"></button><button
onclick="selectColor(this, '#451a03')"
class="w-11 h-11 rounded-full bg-[#451a03] border-2 border-line"></button><button
onclick="selectColor(this, '#0f172a')"
class="w-11 h-11 rounded-full bg-[#0f172a] border-2 border-line"></button><button
onclick="selectColor(this, '#064e3b')"
class="w-11 h-11 rounded-full bg-[#064e3b] border-2 border-line"></button>
<!-- Custom --><label
class="w-11 h-11 rounded-full border-2 border-dashed border-line flex items-center justify-center text-muted cursor-pointer relative overflow-hidden"><i
class="fa-solid fa-plus text-xs"></i><input type="color"
onchange="handleCustomColor(this)"
class="absolute inset-0 opacity-0 cursor-pointer w-full h-full"></label>
</div>
<div id="selected-color-preview"
class="mt-4 flex items-center gap-3">
<div
class="w-6 h-6 rounded-full bg-[#111b15] border border-line">
</div><span class="text-xs text-muted font-medium">#111b15 —
Midnight Ink</span>
</div>
</div><!-- Image Mode (hidden by default) -->
<div id="front-image-mode" class="hidden">
<div
class="relative w-full aspect-video rounded-xl overflow-hidden border-2 border-dashed border-line group cursor-pointer">
<div
class="absolute inset-0 flex flex-col items-center justify-center text-muted gap-3">
<div
class="w-14 h-14 rounded-full bg-stone flex items-center justify-center">
<i class="fa-solid fa-image text-2xl"></i></div>
<p class="text-xs font-bold uppercase tracking-widest">Tap to
upload</p>
<p class="text-[10px]">JPG, PNG or WebP — max 5MB</p>
</div>
</div>
<p class="text-[10px] text-muted mt-2 uppercase tracking-widest">
Image will be used as the front card background</p>
</div>
</div><!-- Divider -->
<div id="idxtw" class="border-t border-line relative top-[-38px]">
</div><!-- Stamp Icon -->
<div id="stamp-section" class="relative top-[-44px]"><label
class="block text-xs font-bold mb-3">Stamp Icon / Image</label>
<div class="grid grid-cols-4 gap-3"><button
onclick="selectStamp(this)"
class="aspect-square bg-stone rounded-xl flex items-center justify-center text-2xl text-ink border-2 border-accent shadow-sm"><i
class="fa-solid fa-mustache"></i></button><button
onclick="selectStamp(this)"
class="aspect-square bg-stone rounded-xl flex items-center justify-center text-2xl text-muted border-2 border-transparent"><i
class="fa-solid fa-scissors"></i></button><button
onclick="selectStamp(this)"
class="aspect-square bg-stone rounded-xl flex items-center justify-center text-2xl text-muted border-2 border-transparent"><i
class="fa-solid fa-crown"></i></button><button
onclick="selectStamp(this)"
class="aspect-square bg-stone rounded-xl flex items-center justify-center text-2xl text-muted border-2 border-transparent"><i
class="fa-solid fa-star"></i></button><button
onclick="selectStamp(this)"
class="aspect-square bg-stone rounded-xl flex items-center justify-center text-2xl text-muted border-2 border-transparent"><i
class="fa-solid fa-fire"></i></button><button
onclick="selectStamp(this)"
class="aspect-square bg-stone rounded-xl flex items-center justify-center text-2xl text-muted border-2 border-transparent"><i
class="fa-solid fa-bolt"></i></button><button
onclick="selectStamp(this)"
class="aspect-square bg-stone rounded-xl flex items-center justify-center text-2xl text-muted border-2 border-transparent"><i
class="fa-solid fa-gem"></i></button><button
class="aspect-square border-2 border-dashed border-line rounded-xl flex flex-col items-center justify-center text-muted gap-1"><i
class="fa-solid fa-plus text-xs"></i><span
class="text-[9px] font-bold uppercase tracking-widest">Upload</span></button>
</div>
</div><!-- Divider -->
<div class="border-t border-line relative top-[-50px]" id="i0k6o">
</div><!-- Terms Line -->
<div id="terms-section" class="relative top-[-57px]"><label
class="block text-xs font-bold mb-1">Terms Line <span
class="text-muted font-normal">(shown below card)</span></label>
<p class="text-[10px] text-muted uppercase tracking-widest mb-3">Max
60 characters</p>
<div class="relative"><input id="terms-input" type="text"
maxlength="60"
value="Valid for 12 months. One reward per visit."
oninput="updateCharCount(this)"
placeholder="e.g. Valid for 12 months. One reward per visit."
class="w-full bg-stone border border-line rounded-xl px-4 py-4 text-sm font-medium outline-none focus:border-accent transition-colors pr-16"><span
id="char-count"
class="absolute right-4 top-1/2 -translate-y-1/2 text-[10px] font-bold text-muted">42/60</span>
</div><!-- Preview -->
</div>
</div>
</section><!-- 2. Reward Rules -->
<section id="reward-rules" class="space-y-4">
<h3
class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">
Reward Rules</h3>
<div
class="bg-white p-6 rounded-jumbo border border-line shadow-sm space-y-8">
<!-- Stamps Required -->
<div id="stamps-required"><label
class="block text-xs font-bold mb-4">Stamps required for
reward</label>
<div class="flex items-center gap-6"><button
onclick="adjustStamps(-1)"
class="w-12 h-12 rounded-full border-2 border-line flex items-center justify-center text-lg font-bold hover:border-accent hover:text-accent transition-all">−</button>
<div class="text-center"><span id="stamp-count"
class="text-4xl font-black">10</span>
<p
class="text-[10px] text-muted uppercase tracking-widest mt-1">
stamps</p>
</div><button onclick="adjustStamps(1)"
class="w-12 h-12 rounded-full border-2 border-line flex items-center justify-center text-lg font-bold hover:border-accent hover:text-accent transition-all">+</button>
</div><!-- Visual dots preview -->
<div id="stamp-dots" class="flex flex-wrap gap-2 mt-5">
</div>
<p class="text-[10px] text-muted mt-3 uppercase tracking-widest">
Recommended: 8–10 stamps</p>
</div><!-- Divider -->
<div class="border-t border-line"></div><!-- Reward Type -->
<div id="reward-type-section"><label
class="block text-xs font-bold mb-4">Reward Type</label>
<div class="grid grid-cols-3 gap-2 mb-5"><button
onclick="selectReward(this, 'percent')"
class="py-3.5 border-2 border-accent bg-accent/5 rounded-xl text-[10px] font-bold uppercase tracking-widest text-ink"><i
class="fa-solid fa-percent block text-base mb-1"></i>Percentage
</button><button onclick="selectReward(this, 'fixed')"
class="py-3.5 border border-line bg-white rounded-xl text-[10px] font-bold uppercase tracking-widest text-muted"><i
class="fa-solid fa-sterling-sign block text-base mb-1"></i>Fixed
Off
</button><button onclick="selectReward(this, 'free')"
class="py-3.5 border border-line bg-white rounded-xl text-[10px] font-bold uppercase tracking-widest text-muted"><i
class="fa-solid fa-gift block text-base mb-1"></i>Free
</button></div><!-- Value input (hidden for free) -->
<div id="reward-value-wrap">
<div class="relative mb-4"><span id="reward-symbol"
class="absolute left-4 top-1/2 -translate-y-1/2 font-black text-ink">%</span><input
id="reward-value" type="number" value="50"
class="w-full bg-stone border border-line rounded-xl pl-10 pr-4 py-4 font-bold text-lg outline-none focus:border-accent transition-colors">
</div>
</div><!-- Reward label -->
<div><label
class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Reward
Display Name</label><input id="reward-name" type="text"
value="50% Off Any Service" placeholder="e.g. Next Haircut Free"
class="w-full bg-stone border border-line rounded-xl px-4 py-4 text-sm font-medium outline-none focus:border-accent transition-colors">
</div>
</div>
</div>
</section><!-- Danger Zone -->
<section id="danger-zone" class="pb-2"><button
class="w-full py-4 border-2 border-dashed border-red-200 rounded-xl text-[10px] font-bold uppercase tracking-widest text-red-400 hover:border-red-500 hover:text-red-500 transition-all flex items-center justify-center gap-2"><i
class="fa-solid fa-ban"></i> Disable Loyalty Program
</button></section>
</main><!-- Bottom Nav -->
<nav id="bottom-nav"
class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-4 px-10 border-t border-white/5 flex items-center justify-between">
<a href="#"
class="flex flex-col items-center gap-1 hover:text-white transition-colors"><i
class="fa-solid fa-calendar-days text-xl"></i><span
class="text-[10px] font-medium">Calendar</span></a><a href="#"
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="#"
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="#"
class="flex flex-col items-center gap-1 text-white"><i
class="fa-solid fa-gear text-xl"></i><span
class="text-[10px] font-medium">Settings</span></a></nav>
<script>
// ── Front background toggle ──────────────────────────────────────
function setFrontMode(mode)
{
const btnColor = document.getElementById('btn-color');
const btnImage = document.getElementById('btn-image');
const colorMode = document.getElementById('front-color-mode');
const imageMode = document.getElementById('front-image-mode');
if (mode === 'color')
{
btnColor.classList.add('bg-ink', 'text-white', 'shadow');
btnColor.classList.remove('text-muted');
btnImage.classList.remove('bg-ink', 'text-white', 'shadow');
btnImage.classList.add('text-muted');
colorMode.classList.remove('hidden');
imageMode.classList.add('hidden');
}
else
{
btnImage.classList.add('bg-ink', 'text-white', 'shadow');
btnImage.classList.remove('text-muted');
btnColor.classList.remove('bg-ink', 'text-white', 'shadow');
btnColor.classList.add('text-muted');
imageMode.classList.remove('hidden');
colorMode.classList.add('hidden');
}
}
// ── Color selection ──────────────────────────────────────────────
const colorNames = {
'#111b15': 'Midnight Ink',
'#f4f6f4': 'Cloud Stone',
'#1e293b': 'Slate Deep',
'#451a03': 'Mahogany',
'#0f172a': 'Void Blue',
'#064e3b': 'Forest Dark',
};
function selectColor(btn, hex)
{
document.querySelectorAll('#front-color-mode button[onclick]').forEach(
b =>
{
b.classList.remove('border-accent', 'ring-2', 'ring-accent/30',
'shadow-md');
b.classList.add('border-line');
b.style.borderWidth = '2px';
});
btn.classList.add('border-accent', 'ring-2', 'ring-accent/30',
'shadow-md');
btn.classList.remove('border-line');
btn.style.borderWidth = '3px';
const preview = document.getElementById('selected-color-preview');
const name = colorNames[hex] || 'Custom';
preview.querySelector('div').style.backgroundColor = hex;
preview.querySelector('span').textContent = `${hex} — ${name}`;
}
function handleCustomColor(input)
{
colorNames[input.value] = 'Custom';
}
// ── Stamp icon selection ─────────────────────────────────────────
function selectStamp(btn)
{
document.querySelectorAll('#stamp-section button[onclick]').forEach(b =>
{
b.classList.remove('border-accent', 'text-ink');
b.classList.add('border-transparent', 'text-muted');
});
btn.classList.add('border-accent', 'text-ink');
btn.classList.remove('border-transparent', 'text-muted');
}
// ── Stamps counter & dots ────────────────────────────────────────
let stampCount = 10;
function adjustStamps(delta)
{
stampCount = Math.min(20, Math.max(3, stampCount + delta));
document.getElementById('stamp-count').textContent = stampCount;
renderDots();
}
function renderDots()
{
const container = document.getElementById('stamp-dots');
container.innerHTML = '';
for (let i = 0; i < stampCount; i++)
{
const dot = document.createElement('div');
dot.className = 'w-6 h-6 rounded-full border-2 border-line bg-stone';
container.appendChild(dot);
}
}
renderDots();
// ── Reward type ──────────────────────────────────────────────────
function selectReward(btn, type)
{
document.querySelectorAll('#reward-type-section .grid button').forEach(
b =>
{
b.classList.remove('border-accent', 'bg-accent/5', 'text-ink');
b.classList.add('border-line', 'text-muted');
});
btn.classList.add('border-accent', 'bg-accent/5', 'text-ink');
btn.classList.remove('border-line', 'text-muted');
const valueWrap = document.getElementById('reward-value-wrap');
const symbol = document.getElementById('reward-symbol');
const rewardName = document.getElementById('reward-name');
if (type === 'free')
{
valueWrap.classList.add('hidden');
rewardName.value = 'Next Service Free';
}
else if (type === 'percent')
{
valueWrap.classList.remove('hidden');
symbol.textContent = '%';
rewardName.value = '50% Off Any Service';
}
else
{
valueWrap.classList.remove('hidden');
symbol.textContent = '£';
rewardName.value = '£5 Off Next Visit';
}
}
// ── Terms character counter ──────────────────────────────────────
function updateCharCount(input)
{
const len = input.value.length;
const counter = document.getElementById('char-count');
counter.textContent = `${len}/60`;
counter.classList.toggle('text-red-500', len >= 55);
counter.classList.toggle('text-muted', len < 55);
document.getElementById('terms-preview').textContent = input.value ||
'—';
}
// Initialise char count
updateCharCount(document.getElementById('terms-input'));
</script>
</body>
</html>
@@ -0,0 +1,191 @@
<!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, viewport-fit=cover">
<title>Home — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
<style>
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: This is the personalized, logged-in customer home. The public
business-discovery page lives at "15-NextChair - Customer - Home.html"
(mistitled in the original export — see docs/implementation-plan.md §2). -->
<!-- Header -->
<header class="px-6 pt-12 pb-4 flex items-center justify-between">
<div>
<p class="text-xs text-muted font-medium">Good afternoon</p>
<h1 class="text-2xl font-bold tracking-tight">Alex Chen</h1>
</div>
<div class="flex items-center gap-3">
<button class="w-11 h-11 rounded-full bg-white border border-line flex items-center justify-center relative">
<i class="fa-regular fa-bell text-ink"></i>
<span class="absolute top-2 right-2.5 w-1.5 h-1.5 bg-accent rounded-full"></span>
</button>
<a href="10-NextChair - Customer - Setting.html">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" class="w-11 h-11 rounded-full border border-line object-cover" alt="Alex Chen">
</a>
</div>
</header>
<main class="px-6 space-y-6">
<!-- Upcoming Appointment Card -->
<a href="25-NextChair - Customer - Appointment Details.html" class="block bg-ink text-white p-6 rounded-jumbo shadow-xl relative overflow-hidden">
<div class="relative z-10">
<div class="flex items-center justify-between mb-6">
<span class="text-[10px] font-bold uppercase tracking-widest text-white/50">Your Next Visit</span>
<span class="text-[10px] font-bold uppercase tracking-widest bg-accent/20 text-accent px-3 py-1 rounded-full">In 2 days</span>
</div>
<div class="flex items-center gap-4 mb-6">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-14 h-14 rounded-full border-2 border-white/20" alt="Marcus Reed">
<div>
<h2 class="text-lg font-bold">Standard Cut</h2>
<p class="text-sm text-white/60">with Marcus Reed</p>
</div>
</div>
<div class="flex items-center justify-between pt-5 border-t border-white/10">
<div>
<p class="text-sm font-bold">Sat, Oct 12 &bull; 2:00 PM</p>
<p class="text-[10px] text-white/50 uppercase tracking-widest mt-0.5">Blake Heritage Barbershop</p>
</div>
<div class="flex items-center gap-1 text-white/60 text-xs font-bold uppercase tracking-widest">
Details <i class="fa-solid fa-chevron-right text-[10px]"></i>
</div>
</div>
</div>
<div class="absolute -right-10 -bottom-10 w-40 h-40 bg-accent/10 rounded-full blur-3xl"></div>
</a>
<!-- Quick Actions -->
<div class="grid grid-cols-2 gap-3">
<a href="24-NextChair - Customer - Appointments Upcoming.html" class="bg-white border border-line rounded-jumbo p-5 flex flex-col gap-3 hover:border-ink transition-all">
<div class="w-10 h-10 bg-stone rounded-xl flex items-center justify-center text-ink"><i class="fa-solid fa-rotate-right"></i></div>
<span class="text-sm font-bold">Book Again</span>
</a>
<a href="15-NextChair - Customer - Home.html" class="bg-white border border-line rounded-jumbo p-5 flex flex-col gap-3 hover:border-ink transition-all">
<div class="w-10 h-10 bg-stone rounded-xl flex items-center justify-center text-ink"><i class="fa-solid fa-plus"></i></div>
<span class="text-sm font-bold">Book New</span>
</a>
</div>
<!-- Loyalty Teaser -->
<a href="11-NextChair - Customer - Loyalty.html" class="block bg-white p-5 rounded-jumbo border border-line shadow-sm">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-amber-50 rounded-xl flex items-center justify-center text-amber-500"><i class="fa-solid fa-award"></i></div>
<div>
<p class="text-sm font-bold">Loyalty Card</p>
<p class="text-[11px] text-muted">3 more visits until your free cut</p>
</div>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</div>
<div class="h-2 w-full bg-stone rounded-full overflow-hidden">
<div class="bg-amber-500 h-full rounded-full" style="width: 70%;"></div>
</div>
</a>
<!-- Your Barbers -->
<section>
<div class="flex items-center justify-between mb-4 px-1">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted">Your Barbers</h3>
<a href="15-NextChair - Customer - Home.html" class="text-[10px] font-bold uppercase tracking-widest text-ink border-b border-ink">See all</a>
</div>
<div class="flex gap-5 overflow-x-auto no-scrollbar">
<div class="w-20 shrink-0 text-center">
<div class="relative">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-20 h-20 rounded-full object-cover mb-2 border-2 border-accent" alt="Marcus Reed">
<span class="absolute -bottom-1 right-1 bg-accent text-white text-[7px] font-bold uppercase px-1.5 py-0.5 rounded-full">Fave</span>
</div>
<p class="text-xs font-medium">Marcus</p>
</div>
<div class="w-20 shrink-0 text-center">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" class="w-20 h-20 rounded-full object-cover mb-2 border border-line" alt="Leo Vance">
<p class="text-xs font-medium">Leo</p>
</div>
<div class="w-20 shrink-0 text-center">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-20 h-20 rounded-full object-cover mb-2 border border-line" alt="Sasha Gray">
<p class="text-xs font-medium">Sasha</p>
</div>
</div>
</section>
<!-- Popular Services -->
<section>
<div class="flex items-center justify-between mb-4 px-1">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted">Popular Services</h3>
<a href="15-NextChair - Customer - Home.html" class="text-[10px] font-bold uppercase tracking-widest text-ink border-b border-ink">See all</a>
</div>
<div class="bg-white rounded-jumbo border border-line divide-y divide-line overflow-hidden">
<div class="px-5 py-4 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Skinfade &amp; Style</p>
<p class="text-xs text-muted mt-0.5">30m</p>
</div>
<span class="text-sm font-bold">£25.00</span>
</div>
<div class="px-5 py-4 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Haircut &amp; Beard</p>
<p class="text-xs text-muted mt-0.5">40m</p>
</div>
<span class="text-sm font-bold">£30.00</span>
</div>
</div>
</section>
<!-- Reviews Teaser -->
<a href="15-NextChair - Customer - Home.html" class="flex items-center justify-between bg-white p-5 rounded-jumbo border border-line">
<div class="flex items-center gap-3">
<div class="flex items-center gap-1 text-amber-500 text-sm">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<span class="text-sm font-bold">5.0</span>
<span class="text-xs text-muted">&middot; 1,142 reviews</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</a>
</main>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-2 px-5 flex justify-between items-center">
<a href="23-NextChair - Customer - Home (Logged In).html" class="flex flex-col items-center gap-1 text-ink">
<i class="fa-solid fa-house text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</a>
<a href="24-NextChair - Customer - Appointments Upcoming.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span>
</a>
<a href="10-NextChair - Customer - Setting.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-user text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,166 @@
<!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, viewport-fit=cover">
<title>Appointments — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: Supersedes "16-NextChair - Customer - Appoint.html", which only
showed Finished/Cancelled history. This adds the missing Upcoming
view with Cancel/Reschedule/Details actions, per docs/implementation-plan.md §6. -->
<header class="px-6 py-6 bg-white border-b border-line sticky top-0 z-40">
<h1 class="text-2xl font-bold tracking-tight mb-5">Appointments</h1>
<div class="flex gap-2 bg-stone rounded-full p-1">
<button id="tab-upcoming" onclick="switchTab('upcoming')" class="flex-1 py-2.5 rounded-full text-xs font-bold uppercase tracking-widest bg-ink text-white transition-all">Upcoming</button>
<button id="tab-past" onclick="switchTab('past')" class="flex-1 py-2.5 rounded-full text-xs font-bold uppercase tracking-widest text-muted transition-all">Past</button>
</div>
</header>
<main class="mt-6 px-6">
<!-- Upcoming Tab -->
<div id="content-upcoming" class="space-y-4">
<a href="25-NextChair - Customer - Appointment Details.html" class="block bg-white p-5 rounded-jumbo border border-line shadow-sm hover:border-ink transition-all">
<div class="flex items-start justify-between mb-4">
<span class="inline-block px-3 py-1 bg-accent/10 text-accent text-[10px] font-bold uppercase tracking-widest rounded-full">Confirmed</span>
<div class="text-right">
<p class="text-sm font-bold">Sat, Oct 12</p>
<p class="text-xs text-muted">2:00 PM</p>
</div>
</div>
<div class="flex items-center gap-3 mb-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-10 h-10 rounded-full object-cover" alt="Marcus Reed">
<div>
<h3 class="text-sm font-bold">Standard Cut</h3>
<p class="text-xs text-muted">with Marcus Reed</p>
</div>
</div>
<div class="flex gap-2 pt-4 border-t border-line">
<a href="27-NextChair - Customer - Reschedule.html" onclick="event.stopPropagation()" class="flex-1 text-center py-2.5 bg-stone rounded-lg text-xs font-bold uppercase tracking-widest">Reschedule</a>
<button onclick="event.stopPropagation(); event.preventDefault();" class="flex-1 py-2.5 border border-red-200 text-red-500 rounded-lg text-xs font-bold uppercase tracking-widest hover:bg-red-50 transition-colors">Cancel</button>
</div>
</a>
<a href="25-NextChair - Customer - Appointment Details.html" class="block bg-white p-5 rounded-jumbo border border-line shadow-sm hover:border-ink transition-all">
<div class="flex items-start justify-between mb-4">
<span class="inline-block px-3 py-1 bg-amber-100 text-amber-700 text-[10px] font-bold uppercase tracking-widest rounded-full">Pending Approval</span>
<div class="text-right">
<p class="text-sm font-bold">Thu, Oct 24</p>
<p class="text-xs text-muted">11:30 AM</p>
</div>
</div>
<div class="flex items-center gap-3 mb-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" class="w-10 h-10 rounded-full object-cover" alt="Leo Vance">
<div>
<h3 class="text-sm font-bold">Beard Trim</h3>
<p class="text-xs text-muted">with Leo Vance</p>
</div>
</div>
<div class="pt-4 border-t border-line">
<p class="text-[11px] text-muted">We'll notify you once the shop confirms this time.</p>
</div>
</a>
<!-- Empty state reference (hidden) — shown instead of the list above when there are no upcoming appointments -->
<div class="hidden flex-col items-center text-center py-16 px-6">
<div class="w-16 h-16 bg-white border border-line rounded-full flex items-center justify-center text-muted text-2xl mb-5">
<i class="fa-regular fa-calendar"></i>
</div>
<h3 class="text-base font-bold mb-1">No upcoming appointments</h3>
<p class="text-sm text-muted mb-6">Book your next visit in a few taps.</p>
<a href="15-NextChair - Customer - Home.html" class="bg-ink text-white px-8 py-3.5 rounded-full text-xs font-bold uppercase tracking-widest">Book Now</a>
</div>
</div>
<!-- Past Tab -->
<div id="content-past" class="hidden space-y-4">
<div class="bg-white rounded-jumbo border border-line p-4 flex">
<div class="flex-1 pr-4">
<span class="inline-block px-3 py-1 bg-stone text-muted text-[10px] font-bold uppercase tracking-widest rounded-full mb-3">Completed</span>
<h3 class="text-sm font-bold mb-1">Haircut &amp; Style</h3>
<p class="text-xs text-muted mb-3">with Jay The Barber</p>
<button class="bg-ink text-white px-5 py-2.5 rounded-lg text-xs font-bold uppercase tracking-widest">Book again</button>
</div>
<div class="w-16 pl-4 border-l border-line flex flex-col items-center justify-center text-center">
<span class="text-[10px] text-muted uppercase">Aug</span>
<span class="text-2xl font-light">1</span>
</div>
</div>
<div class="bg-white rounded-jumbo border border-line p-4 flex">
<div class="flex-1 pr-4">
<span class="inline-block px-3 py-1 bg-red-50 text-red-500 text-[10px] font-bold uppercase tracking-widest rounded-full mb-3">Cancelled</span>
<h3 class="text-sm font-bold mb-1">Haircut &amp; Style</h3>
<p class="text-xs text-muted mb-3">with Jay The Barber</p>
<button class="bg-ink text-white px-5 py-2.5 rounded-lg text-xs font-bold uppercase tracking-widest">Book again</button>
</div>
<div class="w-16 pl-4 border-l border-line flex flex-col items-center justify-center text-center">
<span class="text-[10px] text-muted uppercase">Apr</span>
<span class="text-2xl font-light">15</span>
</div>
</div>
</div>
</main>
<script>
function switchTab(tab) {
const upcoming = document.getElementById('content-upcoming');
const past = document.getElementById('content-past');
const btnUpcoming = document.getElementById('tab-upcoming');
const btnPast = document.getElementById('tab-past');
if (tab === 'upcoming') {
upcoming.classList.remove('hidden');
past.classList.add('hidden');
btnUpcoming.classList.add('bg-ink', 'text-white');
btnUpcoming.classList.remove('text-muted');
btnPast.classList.remove('bg-ink', 'text-white');
btnPast.classList.add('text-muted');
} else {
past.classList.remove('hidden');
upcoming.classList.add('hidden');
btnPast.classList.add('bg-ink', 'text-white');
btnPast.classList.remove('text-muted');
btnUpcoming.classList.remove('bg-ink', 'text-white');
btnUpcoming.classList.add('text-muted');
}
}
</script>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-2 px-5 flex justify-between items-center">
<a href="23-NextChair - Customer - Home (Logged In).html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-house text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</a>
<a href="24-NextChair - Customer - Appointments Upcoming.html" class="flex flex-col items-center gap-1 text-ink">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span>
</a>
<a href="10-NextChair - Customer - Setting.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-user text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,121 @@
<!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, viewport-fit=cover">
<title>Appointment Details — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="px-6 pt-12 pb-6 flex items-center justify-between">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line bg-white flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-lg font-bold tracking-tight">Appointment Details</h1>
<div class="w-10"></div>
</header>
<main class="px-6 space-y-5">
<div class="flex justify-center">
<span class="inline-block px-4 py-1.5 bg-accent/10 text-accent text-[10px] font-bold uppercase tracking-widest rounded-full">Confirmed</span>
</div>
<!-- Details Card -->
<div class="bg-white p-6 rounded-jumbo border border-line shadow-sm space-y-6">
<div class="flex items-center gap-4 pb-6 border-b border-line">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-14 h-14 rounded-full object-cover" alt="Marcus Reed">
<div>
<h2 class="text-lg font-bold">Standard Cut</h2>
<p class="text-sm text-muted">with Marcus Reed</p>
</div>
</div>
<div class="grid grid-cols-2 gap-6">
<div>
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Date</span>
<p class="text-sm font-bold">Sat, Oct 12</p>
</div>
<div>
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Time</span>
<p class="text-sm font-bold">2:00 PM</p>
</div>
<div>
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Duration</span>
<p class="text-sm font-bold">30 min</p>
</div>
<div>
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Price</span>
<p class="text-sm font-bold">£22.00</p>
</div>
</div>
<div class="pt-6 border-t border-line">
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Location</span>
<p class="text-sm font-medium">Blake Heritage Barbershop</p>
<p class="text-xs text-muted mt-0.5">79 Joel Street, HA6 1LW, Northwood</p>
</div>
<div class="pt-6 border-t border-line">
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-2">Your Notes</span>
<p class="text-sm text-gray-700 italic">Keep length on top, skin fade on the sides.</p>
</div>
</div>
<!-- Policy Note -->
<div class="bg-white p-5 rounded-jumbo border border-line flex items-start gap-3">
<i class="fa-solid fa-circle-info text-muted mt-0.5"></i>
<p class="text-xs text-muted leading-relaxed">Free cancellation or rescheduling up to 24 hours before your appointment. Later changes may incur a fee.</p>
</div>
<!-- Actions -->
<div class="space-y-3 pt-2">
<button class="w-full py-4 bg-white border border-line rounded-jumbo flex items-center justify-center gap-2 text-sm font-bold">
<i class="fa-solid fa-calendar-plus text-accent"></i> Add to Calendar
</button>
<a href="27-NextChair - Customer - Reschedule.html" class="w-full py-4 bg-white border border-line rounded-jumbo flex items-center justify-center gap-2 text-sm font-bold">
<i class="fa-solid fa-clock-rotate-left text-accent"></i> Reschedule
</a>
<button class="w-full py-4 border border-red-200 text-red-500 rounded-jumbo flex items-center justify-center gap-2 text-sm font-bold hover:bg-red-50 transition-colors">
<i class="fa-solid fa-xmark"></i> Cancel Appointment
</button>
</div>
</main>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-2 px-5 flex justify-between items-center">
<a href="23-NextChair - Customer - Home (Logged In).html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-house text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</a>
<a href="24-NextChair - Customer - Appointments Upcoming.html" class="flex flex-col items-center gap-1 text-ink">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span>
</a>
<a href="10-NextChair - Customer - Setting.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-user text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,90 @@
<!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, viewport-fit=cover">
<title>Your Details — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-12">
<!-- NOTE: New step in the guest booking flow, inserted between
"18-NextChair - Customer - Booking.html" (barber/date/time) and
"9-NextChair - Customer - Review.html" (review). Previously the flow
had no way to capture a guest's identity at all — see
docs/implementation-plan.md §6. Logged-in customers skip this step
entirely (their saved details are used on the Review screen). -->
<header class="px-6 py-6">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center mb-8">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-3xl font-bold tracking-tight">Your Details</h1>
<p class="text-muted mt-2">We'll use this to confirm your booking and send reminders.</p>
</header>
<main class="px-6 space-y-6">
<form class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">First Name</label>
<input type="text" placeholder="Alex" class="w-full bg-white border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Last Name</label>
<input type="text" placeholder="Chen" class="w-full bg-white border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Email Address</label>
<input type="email" placeholder="name@example.com" class="w-full bg-white border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Phone Number</label>
<input type="tel" placeholder="+44 7700 900000" class="w-full bg-white border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
</form>
<!-- Optional account creation -->
<div class="bg-white rounded-jumbo border border-line p-5">
<label class="flex items-start gap-3 cursor-pointer">
<input type="checkbox" id="create-account-toggle" onchange="document.getElementById('password-field').classList.toggle('hidden', !this.checked)" class="mt-1 w-4 h-4 rounded border-line text-accent focus:ring-accent">
<div>
<span class="text-sm font-bold block">Create an account</span>
<span class="text-xs text-muted">Track this booking, save your details for next time, and start earning loyalty stamps.</span>
</div>
</label>
<div id="password-field" class="hidden mt-4 pt-4 border-t border-line">
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Create a Password</label>
<input type="password" placeholder="••••••••" class="w-full bg-stone border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
</div>
<p class="text-[10px] text-muted leading-relaxed px-1">
By continuing, you agree to our <a href="#" class="underline">Terms of Service</a> and <a href="#" class="underline">Privacy Policy</a>. You can access this booking any time via a secure link sent to your email.
</p>
<button onclick="location.href='9-NextChair - Customer - Review.html'" class="w-full bg-ink text-white py-5 rounded-full font-bold uppercase tracking-widest hover:bg-black transition-all shadow-lg shadow-ink/10">
Continue to Review
</button>
</main>
</body>
</html>
@@ -0,0 +1,120 @@
<!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, viewport-fit=cover">
<title>Reschedule — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
<style>
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.nav-blur { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
</style>
</head>
<body class="bg-stone text-ink min-h-screen pb-12">
<header class="fixed top-0 left-0 right-0 z-50 px-4 py-4 bg-stone/80 nav-blur border-b border-line flex items-center justify-between">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line bg-white flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-lg font-semibold tracking-tight">Reschedule</h1>
<div class="w-10"></div>
</header>
<main class="pt-24 px-4 space-y-6">
<!-- Current Appointment Summary -->
<div class="bg-white border border-line rounded-jumbo p-5 flex items-center gap-3">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" class="w-10 h-10 rounded-full object-cover" alt="Marcus Reed">
<div class="flex-1">
<p class="text-sm font-bold">Standard Cut with Marcus Reed</p>
<p class="text-xs text-muted">Currently: Sat, Oct 12 &bull; 2:00 PM</p>
</div>
</div>
<div class="bg-amber-50 border border-amber-200 rounded-xl p-4 flex items-start gap-3">
<i class="fa-solid fa-triangle-exclamation text-amber-500 mt-0.5"></i>
<p class="text-xs text-amber-800 leading-relaxed">You can reschedule for free up to 24 hours before your appointment. Choose a new date and time below.</p>
</div>
<!-- Calendar Month Grid -->
<section class="bg-surface rounded-tile border border-line p-4">
<div class="flex items-center justify-between mb-6">
<h3 class="text-base font-semibold">October 2024</h3>
<div class="flex gap-2">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-xs"><i class="fa-solid fa-chevron-left"></i></button>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-xs"><i class="fa-solid fa-chevron-right"></i></button>
</div>
</div>
<div class="grid grid-cols-7 text-center mb-4">
<span class="text-[10px] font-bold uppercase text-muted">Sun</span>
<span class="text-[10px] font-bold uppercase text-muted">Mon</span>
<span class="text-[10px] font-bold uppercase text-muted">Tue</span>
<span class="text-[10px] font-bold uppercase text-muted">Wed</span>
<span class="text-[10px] font-bold uppercase text-muted">Thu</span>
<span class="text-[10px] font-bold uppercase text-muted">Fri</span>
<span class="text-[10px] font-bold uppercase text-muted">Sat</span>
</div>
<div class="grid grid-cols-7 text-center gap-y-2">
<span class="py-2 text-sm text-line">29</span>
<span class="py-2 text-sm text-line">30</span>
<span class="py-2 text-sm text-ink">1</span>
<span class="py-2 text-sm text-ink">2</span>
<span class="py-2 text-sm text-ink">3</span>
<span class="py-2 text-sm text-ink">4</span>
<span class="py-2 text-sm text-ink">5</span>
<span class="py-2 text-sm text-ink">14</span>
<span class="py-2 text-sm text-ink">15</span>
<span class="bg-accent/10 border-2 border-accent text-ink rounded-lg py-2 text-sm font-bold">16</span>
<span class="py-2 text-sm text-ink">17</span>
<span class="py-2 text-sm text-ink">18</span>
<span class="py-2 text-sm text-ink">19</span>
<span class="py-2 text-sm text-ink">20</span>
</div>
</section>
<!-- Time Slots -->
<section>
<p class="text-[10px] font-bold uppercase tracking-widest text-muted mb-3 ml-1">Available Times &mdash; Marcus Reed</p>
<div class="flex gap-3 overflow-x-auto hide-scrollbar py-1">
<button class="bg-surface border border-line px-6 py-4 rounded-xl text-sm font-medium shrink-0 min-w-[100px]">10:00 AM</button>
<button class="bg-accent/10 border-2 border-accent px-6 py-4 rounded-xl text-sm font-bold shrink-0 min-w-[100px]">11:30 AM</button>
<button class="bg-surface border border-line px-6 py-4 rounded-xl text-sm font-medium shrink-0 min-w-[100px]">1:00 PM</button>
<button class="bg-surface border border-line px-6 py-4 rounded-xl text-sm font-medium shrink-0 min-w-[100px]">3:15 PM</button>
</div>
</section>
<!-- New Selection Summary -->
<section class="border-t border-line pt-6">
<div class="flex items-center justify-between">
<span class="text-xs text-muted uppercase tracking-widest font-bold">New Time</span>
<span class="text-sm font-bold">Wed, Oct 16 &bull; 11:30 AM</span>
</div>
</section>
<button onclick="location.href='25-NextChair - Customer - Appointment Details.html'" class="w-full bg-ink text-white py-5 rounded-full font-bold uppercase tracking-widest hover:bg-black transition-all shadow-lg shadow-ink/10">
Confirm Reschedule
</button>
</main>
</body>
</html>
@@ -0,0 +1,188 @@
<!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, viewport-fit=cover">
<title>Business Details — TrimTime Admin</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: This screen did not exist anywhere in the original export.
"21-NextChair - Owner - Business D.html" is actually the Admin
Dashboard despite its filename — see docs/implementation-plan.md
Finding #1. This is the real business-profile editor. -->
<header class="px-6 pt-12 pb-5 bg-white border-b border-line sticky top-0 z-40 flex items-center justify-between">
<div class="flex items-center gap-4">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-xl font-bold tracking-tight">Business Details</h1>
</div>
<button class="bg-accent text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-full">Save</button>
</header>
<main class="mt-6 px-6 space-y-8">
<!-- Logo & Name -->
<section class="bg-white p-6 rounded-jumbo border border-line shadow-sm flex items-center gap-5">
<div class="relative shrink-0">
<div class="w-20 h-20 rounded-2xl bg-ink text-white flex items-center justify-center text-2xl"><i class="fa-solid fa-scissors"></i></div>
<button class="absolute -bottom-1 -right-1 w-7 h-7 bg-white border border-line rounded-full flex items-center justify-center text-[10px]"><i class="fa-solid fa-camera"></i></button>
</div>
<div class="flex-1">
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Business Name</label>
<input type="text" value="Blake Heritage Barbershop" class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm font-bold outline-none focus:border-accent transition-colors">
</div>
</section>
<!-- About -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">About</h3>
<div class="bg-white p-6 rounded-jumbo border border-line shadow-sm">
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Description</label>
<textarea class="w-full bg-stone border border-line rounded-xl p-4 text-sm outline-none focus:border-accent transition-colors min-h-[100px]">Blake Heritage has come to Northwood! Check our Instagram @Blake.Heritage.Barbershop for more info.</textarea>
</div>
</section>
<!-- Contact & Address -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Contact &amp; Address</h3>
<div class="bg-white p-6 rounded-jumbo border border-line shadow-sm space-y-4">
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Street Address</label>
<input type="text" value="79 Joel Street" class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm outline-none focus:border-accent transition-colors">
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">City</label>
<input type="text" value="Northwood" class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm outline-none focus:border-accent transition-colors">
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Postcode</label>
<input type="text" value="HA6 1LW" class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm outline-none focus:border-accent transition-colors">
</div>
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Phone</label>
<input type="tel" value="+44 1923 000000" class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm outline-none focus:border-accent transition-colors">
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Email</label>
<input type="email" value="hello@blakeheritage.co.uk" class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm outline-none focus:border-accent transition-colors">
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Website</label>
<input type="url" placeholder="https://" class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm outline-none focus:border-accent transition-colors">
</div>
</div>
</section>
<!-- Social -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Social Links</h3>
<div class="bg-white p-6 rounded-jumbo border border-line shadow-sm space-y-4">
<div class="relative">
<i class="fa-brands fa-instagram absolute left-4 top-1/2 -translate-y-1/2 text-muted"></i>
<input type="text" value="@Blake.Heritage.Barbershop" class="w-full bg-stone border border-line rounded-xl pl-11 pr-4 py-3 text-sm outline-none focus:border-accent transition-colors">
</div>
<div class="relative">
<i class="fa-brands fa-facebook absolute left-4 top-1/2 -translate-y-1/2 text-muted"></i>
<input type="text" placeholder="facebook.com/yourpage" class="w-full bg-stone border border-line rounded-xl pl-11 pr-4 py-3 text-sm outline-none focus:border-accent transition-colors">
</div>
</div>
</section>
<!-- Regional Settings -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Regional Settings</h3>
<div class="bg-white p-6 rounded-jumbo border border-line shadow-sm space-y-4">
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Time Zone</label>
<select class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm outline-none focus:border-accent transition-colors">
<option>Europe/London (GMT+0)</option>
<option>Europe/Paris (GMT+1)</option>
<option>America/New_York (GMT-5)</option>
</select>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Currency</label>
<select class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm outline-none focus:border-accent transition-colors">
<option>GBP &pound;</option>
<option>USD $</option>
<option>EUR &euro;</option>
</select>
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Locale</label>
<select class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm outline-none focus:border-accent transition-colors">
<option>English (UK)</option>
<option>English (US)</option>
</select>
</div>
</div>
</div>
</section>
<!-- Policies -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Policies</h3>
<div class="bg-white p-6 rounded-jumbo border border-line shadow-sm space-y-5">
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Cancellation Policy</label>
<textarea class="w-full bg-stone border border-line rounded-xl p-4 text-sm outline-none focus:border-accent transition-colors min-h-[80px]">Free cancellation up to 24 hours before your appointment.</textarea>
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Late Arrival Policy</label>
<textarea class="w-full bg-stone border border-line rounded-xl p-4 text-sm outline-none focus:border-accent transition-colors min-h-[80px]">Arrivals more than 10 minutes late may need to be rescheduled.</textarea>
</div>
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Booking Terms</label>
<textarea class="w-full bg-stone border border-line rounded-xl p-4 text-sm outline-none focus:border-accent transition-colors min-h-[80px]"></textarea>
</div>
<a href="#" class="text-xs font-bold text-ink border-b border-ink inline-block">Edit Privacy Policy</a>
</div>
</section>
</main>
<!-- Admin Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-4 px-10 border-t border-white/5 flex items-center justify-between">
<a href="5-NextChair - Owner - Calendar.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<i class="fa-solid fa-calendar-days text-xl"></i>
<span class="text-[10px] font-medium">Calendar</span>
</a>
<a href="2-NextChair - Staff - Current.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="3-NextChair - Staff - Customers.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="13-NextChair - Owner - Settings.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-gear text-xl"></i>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,152 @@
<!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, viewport-fit=cover">
<title>Services &amp; Categories — TrimTime Admin</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: New screen. Linked from "13-NextChair - Owner - Settings.html"
("Services & Categories" row) but had no destination in the original
export — see docs/implementation-plan.md §6. -->
<header class="fixed top-0 left-0 right-0 z-50 px-6 py-6 bg-white/80 backdrop-blur-md border-b border-line flex items-center justify-between">
<div class="flex items-center gap-4">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-lg font-bold tracking-tight">Services</h1>
</div>
<button class="w-10 h-10 bg-ink text-white rounded-full flex items-center justify-center">
<i class="fa-solid fa-plus text-sm"></i>
</button>
</header>
<main class="pt-28 px-6 space-y-8">
<!-- Category 1 -->
<section>
<div class="flex items-center justify-between mb-3 px-1">
<div class="flex items-center gap-2">
<i class="fa-solid fa-grip-lines text-line text-xs"></i>
<h3 class="text-sm font-bold">Hair &amp; Beard Services &mdash; Senior Barber</h3>
</div>
<button class="text-muted"><i class="fa-solid fa-pen text-xs"></i></button>
</div>
<div class="bg-white rounded-jumbo border border-line overflow-hidden divide-y divide-line">
<div class="px-5 py-4 flex items-center gap-4">
<i class="fa-solid fa-grip-lines text-line text-xs"></i>
<div class="flex-1">
<p class="text-sm font-bold">Haircut &amp; Style</p>
<p class="text-xs text-muted mt-0.5">30 min &bull; £22.00</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</div>
<div class="px-5 py-4 flex items-center gap-4">
<i class="fa-solid fa-grip-lines text-line text-xs"></i>
<div class="flex-1">
<p class="text-sm font-bold">Skinfade / Taper &amp; Style</p>
<p class="text-xs text-muted mt-0.5">30 min &bull; £25.00</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</div>
<div class="px-5 py-4 flex items-center gap-4">
<i class="fa-solid fa-grip-lines text-line text-xs"></i>
<div class="flex-1">
<p class="text-sm font-bold">Haircut &amp; Beard</p>
<p class="text-xs text-muted mt-0.5">40 min &bull; £30.00</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</div>
<button class="w-full px-5 py-4 flex items-center gap-3 text-accent text-xs font-bold uppercase tracking-widest hover:bg-stone transition-colors">
<i class="fa-solid fa-plus"></i> Add Service
</button>
</div>
</section>
<!-- Category 2 -->
<section>
<div class="flex items-center justify-between mb-3 px-1">
<div class="flex items-center gap-2">
<i class="fa-solid fa-grip-lines text-line text-xs"></i>
<h3 class="text-sm font-bold">OAP Haircut</h3>
</div>
<button class="text-muted"><i class="fa-solid fa-pen text-xs"></i></button>
</div>
<div class="bg-white rounded-jumbo border border-line overflow-hidden divide-y divide-line">
<div class="px-5 py-4 flex items-center gap-4">
<i class="fa-solid fa-grip-lines text-line text-xs"></i>
<div class="flex-1">
<p class="text-sm font-bold">Standard OAP Cut</p>
<p class="text-xs text-muted mt-0.5">20 min &bull; £15.00</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</div>
<button class="w-full px-5 py-4 flex items-center gap-3 text-accent text-xs font-bold uppercase tracking-widest hover:bg-stone transition-colors">
<i class="fa-solid fa-plus"></i> Add Service
</button>
</div>
</section>
<button class="w-full py-4 border-2 border-dashed border-line rounded-jumbo text-xs font-bold uppercase tracking-widest text-muted hover:border-ink hover:text-ink transition-all">
+ Add Category
</button>
</main>
<!-- Admin Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-4 px-10 border-t border-white/5 flex items-center justify-between">
<a href="5-NextChair - Owner - Calendar.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<i class="fa-solid fa-calendar-days text-xl"></i>
<span class="text-[10px] font-medium">Calendar</span>
</a>
<a href="2-NextChair - Staff - Current.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="3-NextChair - Staff - Customers.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="13-NextChair - Owner - Settings.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-gear text-xl"></i>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,88 @@
<!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, viewport-fit=cover">
<title>Clients — TrimTime Staff</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="px-6 py-6 bg-white border-b border-line sticky top-0 z-40">
<h1 class="text-2xl font-bold tracking-tight mb-6">Clients</h1>
<div class="relative">
<i class="fa-solid fa-magnifying-glass absolute left-4 top-1/2 -translate-y-1/2 text-muted"></i>
<input type="text" placeholder="Search by name or email..." class="w-full bg-stone border border-line rounded-xl pl-12 pr-4 py-4 focus:ring-2 focus:ring-ink outline-none transition-all text-sm">
</div>
</header>
<main class="mt-6 px-6 space-y-3">
<!-- Client Row -->
<button class="w-full bg-white p-4 rounded-jumbo border border-line flex items-center gap-4 hover:border-ink transition-all text-left">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-1.jpg" class="w-12 h-12 rounded-full border border-line" alt="Client">
<div class="flex-1">
<h3 class="text-sm font-bold">Alex Chen</h3>
<p class="text-[10px] text-muted uppercase tracking-widest mt-0.5">8 Appointments • 8 Stamps</p>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full bg-white p-4 rounded-jumbo border border-line flex items-center gap-4 hover:border-ink transition-all text-left">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" class="w-12 h-12 rounded-full border border-line" alt="Client">
<div class="flex-1">
<h3 class="text-sm font-bold">Sarah Miller</h3>
<p class="text-[10px] text-muted uppercase tracking-widest mt-0.5">3 Appointments • 3 Stamps</p>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full bg-white p-4 rounded-jumbo border border-line flex items-center gap-4 hover:border-ink transition-all text-left">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-8.jpg" class="w-12 h-12 rounded-full border border-line" alt="Client">
<div class="flex-1">
<h3 class="text-sm font-bold">David Park</h3>
<p class="text-[10px] text-muted uppercase tracking-widest mt-0.5">12 Appointments • 2 Rewards</p>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
</main>
<!-- 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 hover:text-white transition-colors">
<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 text-white">
<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>
</body>
</html>
@@ -0,0 +1,206 @@
<!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, viewport-fit=cover">
<title>Booking Rules — TrimTime Admin</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: New screen. Referenced by the "Update Rules" button on
"21-NextChair - Owner - Business D.html" (the Admin Dashboard) and
the "Booking Windows" row on "13-NextChair - Owner - Settings.html",
neither of which had a destination — see docs/implementation-plan.md §6. -->
<header class="bg-white border-b border-line px-6 pt-12 pb-5 sticky top-0 z-50 flex items-center justify-between">
<div class="flex items-center gap-4">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-xl font-bold tracking-tight">Booking Rules</h1>
</div>
<button class="bg-accent text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-full">Save</button>
</header>
<main class="mt-6 px-6 space-y-8">
<!-- Booking Window -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Booking Window</h3>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Minimum notice</p>
<p class="text-xs text-muted mt-0.5">How soon before a slot a booking can be made</p>
</div>
<div class="flex items-center gap-3 shrink-0 ml-4">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">&minus;</button>
<span class="text-sm font-bold w-16 text-center">2 hours</span>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">+</button>
</div>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Maximum advance booking</p>
<p class="text-xs text-muted mt-0.5">How far ahead customers can book</p>
</div>
<div class="flex items-center gap-3 shrink-0 ml-4">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">&minus;</button>
<span class="text-sm font-bold w-16 text-center">60 days</span>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">+</button>
</div>
</div>
</div>
</section>
<!-- Cancellation & Rescheduling -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Cancellation &amp; Rescheduling</h3>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<div class="px-6 py-5 flex items-center justify-between">
<p class="text-sm font-bold">Free cancellation window</p>
<div class="flex items-center gap-3 shrink-0 ml-4">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">&minus;</button>
<span class="text-sm font-bold w-16 text-center">24 hrs</span>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">+</button>
</div>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<p class="text-sm font-bold">Free reschedule window</p>
<div class="flex items-center gap-3 shrink-0 ml-4">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">&minus;</button>
<span class="text-sm font-bold w-16 text-center">24 hrs</span>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">+</button>
</div>
</div>
</div>
</section>
<!-- Scheduling -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Scheduling</h3>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<div class="px-6 py-5 flex items-center justify-between">
<p class="text-sm font-bold">Appointment slot interval</p>
<select class="bg-stone border border-line rounded-lg px-3 py-2 text-xs font-bold outline-none">
<option>15 min</option>
<option selected>30 min</option>
<option>45 min</option>
<option>60 min</option>
</select>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<p class="text-sm font-bold">Buffer before appointments</p>
<div class="flex items-center gap-3 shrink-0 ml-4">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">&minus;</button>
<span class="text-sm font-bold w-16 text-center">0 min</span>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">+</button>
</div>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<p class="text-sm font-bold">Buffer after appointments</p>
<div class="flex items-center gap-3 shrink-0 ml-4">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">&minus;</button>
<span class="text-sm font-bold w-16 text-center">5 min</span>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">+</button>
</div>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<p class="text-sm font-bold">Max appointments per day</p>
<div class="flex items-center gap-3 shrink-0 ml-4">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">&minus;</button>
<span class="text-sm font-bold w-16 text-center">No limit</span>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-sm font-bold">+</button>
</div>
</div>
</div>
</section>
<!-- Customer Options -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Customer Options</h3>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Customers can choose a barber</p>
<p class="text-xs text-muted mt-0.5">If off, "Anyone" is assigned automatically</p>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Allow guest bookings</p>
<p class="text-xs text-muted mt-0.5">Let customers book without an account</p>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Require approval for new bookings</p>
<p class="text-xs text-muted mt-0.5">Bookings wait for staff confirmation</p>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer">
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between opacity-50">
<div>
<p class="text-sm font-bold">Require deposit</p>
<p class="text-xs text-muted mt-0.5">Coming soon</p>
</div>
<label class="relative inline-flex items-center shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" disabled>
<div class="w-11 h-6 bg-line rounded-full relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5"></div>
</label>
</div>
</div>
</section>
</main>
<!-- Admin Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-4 px-10 border-t border-white/5 flex items-center justify-between">
<a href="5-NextChair - Owner - Calendar.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<i class="fa-solid fa-calendar-days text-xl"></i>
<span class="text-[10px] font-medium">Calendar</span>
</a>
<a href="2-NextChair - Staff - Current.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="3-NextChair - Staff - Customers.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="13-NextChair - Owner - Settings.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-gear text-xl"></i>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,181 @@
<!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, viewport-fit=cover">
<title>Working Hours — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: New screen. Linked from "4-NextChair - Staff - Settings.html"
and "13-NextChair - Owner - Settings.html" ("Working Hours" row),
neither of which had a destination — see docs/implementation-plan.md §6.
An owner reaches the same screen scoped to a staff member from
"34-NextChair - Owner - Staff Details.html". -->
<header class="bg-white border-b border-line px-6 pt-12 pb-5 sticky top-0 z-40 flex items-center justify-between">
<div class="flex items-center gap-4">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-xl font-bold tracking-tight">Working Hours</h1>
</div>
<button class="bg-accent text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-full">Save</button>
</header>
<main class="mt-6 px-6 space-y-4">
<button class="text-xs font-bold text-ink border-b border-ink ml-1 mb-2">Copy Monday to all days</button>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<!-- Monday (open) -->
<div class="px-6 py-5">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-bold w-24">Monday</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="flex items-center gap-3">
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>10:00 AM</option></select>
<span class="text-xs text-muted">to</span>
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>7:00 PM</option></select>
</div>
</div>
<!-- Tuesday (open) -->
<div class="px-6 py-5">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-bold w-24">Tuesday</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="flex items-center gap-3">
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>10:00 AM</option></select>
<span class="text-xs text-muted">to</span>
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>7:00 PM</option></select>
</div>
</div>
<!-- Wednesday (open) -->
<div class="px-6 py-5">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-bold w-24">Wednesday</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="flex items-center gap-3">
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>10:00 AM</option></select>
<span class="text-xs text-muted">to</span>
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>7:00 PM</option></select>
</div>
</div>
<!-- Thursday (open, extended) -->
<div class="px-6 py-5">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-bold w-24">Thursday</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="flex items-center gap-3">
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>10:00 AM</option></select>
<span class="text-xs text-muted">to</span>
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>7:30 PM</option></select>
</div>
</div>
<!-- Friday (open) -->
<div class="px-6 py-5">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-bold w-24">Friday</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="flex items-center gap-3">
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>10:00 AM</option></select>
<span class="text-xs text-muted">to</span>
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>7:00 PM</option></select>
</div>
</div>
<!-- Saturday (open) -->
<div class="px-6 py-5">
<div class="flex items-center justify-between mb-4">
<span class="text-sm font-bold w-24">Saturday</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="flex items-center gap-3">
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>9:00 AM</option></select>
<span class="text-xs text-muted">to</span>
<select class="flex-1 bg-stone border border-line rounded-lg px-3 py-2.5 text-sm font-medium outline-none"><option>5:00 PM</option></select>
</div>
</div>
<!-- Sunday (closed) -->
<div class="px-6 py-5 opacity-60">
<div class="flex items-center justify-between">
<span class="text-sm font-bold w-24">Sunday</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" class="sr-only peer">
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<p class="text-xs text-muted mt-1">Closed</p>
</div>
</div>
</main>
<!-- 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="1-NextChair - Staff - Calendar.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<i class="fa-solid fa-calendar-days text-xl"></i>
<span class="text-[10px] font-medium">Calendar</span>
</a>
<a href="2-NextChair - Staff - Current.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="3-NextChair - Staff - Customers.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="4-NextChair - Staff - Settings.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-gear text-xl"></i>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,111 @@
<!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, viewport-fit=cover">
<title>Manage Breaks — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: New screen. Linked from "4-NextChair - Staff - Settings.html"
("Manage Breaks" row), which had no destination — see
docs/implementation-plan.md §6. -->
<header class="px-6 py-6 bg-white border-b border-line sticky top-0 z-40 flex items-center justify-between">
<h1 class="text-2xl font-bold tracking-tight">Manage Breaks</h1>
<button class="w-10 h-10 bg-ink text-white rounded-full flex items-center justify-center">
<i class="fa-solid fa-plus text-sm"></i>
</button>
</header>
<main class="mt-6 px-6 space-y-3">
<!-- Break 1 -->
<div class="bg-white p-5 rounded-jumbo border border-line shadow-sm">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-mug-hot text-xs"></i></div>
<div>
<p class="text-sm font-bold">Lunch Break</p>
<p class="text-xs text-muted mt-0.5">12:00 PM &ndash; 1:00 PM</p>
</div>
</div>
<div class="flex items-center gap-2">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-muted"><i class="fa-solid fa-pen text-[10px]"></i></button>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-red-500"><i class="fa-solid fa-trash text-[10px]"></i></button>
</div>
</div>
<div class="flex gap-1.5 pl-12">
<span class="text-[9px] font-bold uppercase bg-stone text-muted px-2 py-1 rounded">Mon</span>
<span class="text-[9px] font-bold uppercase bg-stone text-muted px-2 py-1 rounded">Tue</span>
<span class="text-[9px] font-bold uppercase bg-stone text-muted px-2 py-1 rounded">Wed</span>
<span class="text-[9px] font-bold uppercase bg-stone text-muted px-2 py-1 rounded">Thu</span>
<span class="text-[9px] font-bold uppercase bg-stone text-muted px-2 py-1 rounded">Fri</span>
</div>
</div>
<!-- Break 2 -->
<div class="bg-white p-5 rounded-jumbo border border-line shadow-sm">
<div class="flex items-start justify-between mb-3">
<div class="flex items-center gap-3">
<div class="w-9 h-9 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-mug-hot text-xs"></i></div>
<div>
<p class="text-sm font-bold">Afternoon Break</p>
<p class="text-xs text-muted mt-0.5">4:00 PM &ndash; 4:15 PM</p>
</div>
</div>
<div class="flex items-center gap-2">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-muted"><i class="fa-solid fa-pen text-[10px]"></i></button>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-red-500"><i class="fa-solid fa-trash text-[10px]"></i></button>
</div>
</div>
<div class="flex gap-1.5 pl-12">
<span class="text-[9px] font-bold uppercase bg-stone text-muted px-2 py-1 rounded">Sat</span>
</div>
</div>
<button class="w-full py-4 border-2 border-dashed border-line rounded-jumbo text-xs font-bold uppercase tracking-widest text-muted hover:border-ink hover:text-ink transition-all">
+ Add Break
</button>
</main>
<!-- 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="1-NextChair - Staff - Calendar.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<i class="fa-solid fa-calendar-days text-xl"></i>
<span class="text-[10px] font-medium">Calendar</span>
</a>
<a href="2-NextChair - Staff - Current.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="3-NextChair - Staff - Customers.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="4-NextChair - Staff - Settings.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-gear text-xl"></i>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,106 @@
<!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, viewport-fit=cover">
<title>Time Off — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: New screen. Linked from "4-NextChair - Staff - Settings.html"
("Time Off / Vacation" row), which had no destination — see
docs/implementation-plan.md §6. -->
<header class="px-6 py-6 bg-white border-b border-line sticky top-0 z-40 flex items-center justify-between">
<h1 class="text-2xl font-bold tracking-tight">Time Off</h1>
<button class="w-10 h-10 bg-ink text-white rounded-full flex items-center justify-center">
<i class="fa-solid fa-plus text-sm"></i>
</button>
</header>
<main class="mt-6 px-6 space-y-6">
<section>
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1 mb-3">Upcoming</h3>
<div class="space-y-3">
<div class="bg-white p-5 rounded-jumbo border border-line shadow-sm flex items-center gap-4">
<div class="w-12 h-12 bg-stone rounded-xl flex flex-col items-center justify-center shrink-0">
<span class="text-[8px] font-bold uppercase text-muted">Dec</span>
<span class="text-sm font-bold">23</span>
</div>
<div class="flex-1">
<p class="text-sm font-bold">Dec 23 &ndash; Jan 2</p>
<p class="text-xs text-muted mt-0.5">Holiday</p>
</div>
<span class="text-[9px] font-bold uppercase text-accent bg-accent/10 px-2.5 py-1 rounded-full">Approved</span>
</div>
<div class="bg-white p-5 rounded-jumbo border border-line shadow-sm flex items-center gap-4">
<div class="w-12 h-12 bg-stone rounded-xl flex flex-col items-center justify-center shrink-0">
<span class="text-[8px] font-bold uppercase text-muted">Nov</span>
<span class="text-sm font-bold">4</span>
</div>
<div class="flex-1">
<p class="text-sm font-bold">Nov 4</p>
<p class="text-xs text-muted mt-0.5">Personal day</p>
</div>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-muted"><i class="fa-solid fa-xmark text-xs"></i></button>
</div>
</div>
</section>
<section>
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1 mb-3">Past</h3>
<div class="bg-white p-5 rounded-jumbo border border-line shadow-sm flex items-center gap-4 opacity-60">
<div class="w-12 h-12 bg-stone rounded-xl flex flex-col items-center justify-center shrink-0">
<span class="text-[8px] font-bold uppercase text-muted">Aug</span>
<span class="text-sm font-bold">12</span>
</div>
<div class="flex-1">
<p class="text-sm font-bold">Aug 12 &ndash; Aug 19</p>
<p class="text-xs text-muted mt-0.5">Holiday</p>
</div>
</div>
</section>
</main>
<!-- 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="1-NextChair - Staff - Calendar.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<i class="fa-solid fa-calendar-days text-xl"></i>
<span class="text-[10px] font-medium">Calendar</span>
</a>
<a href="2-NextChair - Staff - Current.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="3-NextChair - Staff - Customers.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="4-NextChair - Staff - Settings.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-gear text-xl"></i>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body>
</html>
@@ -0,0 +1,178 @@
<!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, viewport-fit=cover">
<title>Staff Details — TrimTime Admin</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: New screen. Tapping a staff row on
"12-NextChair - Owner - Team Manag.html" had no destination —
see docs/implementation-plan.md §6. -->
<header class="fixed top-0 left-0 right-0 z-50 px-6 py-6 bg-white/80 backdrop-blur-md border-b border-line flex items-center justify-between">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-lg font-bold tracking-tight">Staff Details</h1>
<button class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-pen text-xs"></i>
</button>
</header>
<main class="pt-28 px-6 space-y-6">
<!-- Profile Overview -->
<div class="bg-white p-6 rounded-jumbo border border-line shadow-sm flex flex-col items-center text-center">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-24 h-24 rounded-full border-4 border-stone mb-4" alt="Marcus Reed">
<h2 class="text-2xl font-bold">Marcus Reed</h2>
<p class="text-sm text-accent font-bold uppercase tracking-widest mt-1">Master Barber &bull; Active</p>
<p class="text-xs text-muted mt-2">Joined Jan 2023</p>
</div>
<!-- Role & Permissions -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Role &amp; Permissions</h3>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<div class="px-6 py-5">
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Role</label>
<select class="w-full bg-stone border border-line rounded-xl px-4 py-3 text-sm font-bold outline-none focus:border-accent transition-colors">
<option>Barber</option>
<option selected>Owner / Administrator</option>
</select>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Manage business settings</p>
<p class="text-xs text-muted mt-0.5">Services, booking rules, loyalty</p>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Manage staff &amp; permissions</p>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
</div>
</section>
<!-- Services Provided -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Services Provided</h3>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<label class="px-6 py-4 flex items-center justify-between cursor-pointer">
<span class="text-sm font-medium">Haircut &amp; Style</span>
<input type="checkbox" checked class="w-5 h-5 rounded border-line text-accent focus:ring-accent">
</label>
<label class="px-6 py-4 flex items-center justify-between cursor-pointer">
<span class="text-sm font-medium">Skinfade / Taper &amp; Style</span>
<input type="checkbox" checked class="w-5 h-5 rounded border-line text-accent focus:ring-accent">
</label>
<label class="px-6 py-4 flex items-center justify-between cursor-pointer">
<span class="text-sm font-medium">Haircut &amp; Beard</span>
<input type="checkbox" checked class="w-5 h-5 rounded border-line text-accent focus:ring-accent">
</label>
<label class="px-6 py-4 flex items-center justify-between cursor-pointer">
<span class="text-sm font-medium">Standard OAP Cut</span>
<input type="checkbox" class="w-5 h-5 rounded border-line text-accent focus:ring-accent">
</label>
</div>
</section>
<!-- Availability -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Availability</h3>
<div class="bg-white rounded-jumbo border border-line overflow-hidden">
<a href="31-NextChair - Staff - Working Hours.html" class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-clock text-xs"></i></div>
<span class="text-sm font-bold">Working Hours</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</a>
<a href="32-NextChair - Staff - Breaks.html" class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-mug-hot text-xs"></i></div>
<span class="text-sm font-bold">Manage Breaks</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</a>
<a href="33-NextChair - Staff - Time Off.html" class="w-full px-6 py-5 flex items-center justify-between hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-plane-arrival text-xs"></i></div>
<span class="text-sm font-bold">Time Off / Vacation</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</a>
</div>
</section>
<!-- Contact -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Contact</h3>
<div class="grid grid-cols-2 gap-3">
<a href="tel:123456789" class="bg-white py-4 rounded-xl border border-line flex items-center justify-center gap-2 font-bold text-sm">
<i class="fa-solid fa-phone text-accent"></i> Call
</a>
<a href="mailto:marcus@blakeheritage.co.uk" class="bg-white py-4 rounded-xl border border-line flex items-center justify-center gap-2 font-bold text-sm">
<i class="fa-solid fa-envelope text-accent"></i> Email
</a>
</div>
</section>
<!-- Danger Zone -->
<section class="pb-2">
<button class="w-full py-4 border-2 border-dashed border-red-200 rounded-xl text-[10px] font-bold uppercase tracking-widest text-red-400 hover:border-red-500 hover:text-red-500 transition-all flex items-center justify-center gap-2">
<i class="fa-solid fa-user-slash"></i> Deactivate Staff Member
</button>
</section>
</main>
<!-- Admin Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-4 px-10 border-t border-white/5 flex items-center justify-between">
<a href="5-NextChair - Owner - Calendar.html" class="flex flex-col items-center gap-1 hover:text-white transition-colors">
<i class="fa-solid fa-calendar-days text-xl"></i>
<span class="text-[10px] font-medium">Calendar</span>
</a>
<a href="2-NextChair - Staff - Current.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="12-NextChair - Owner - Team Manag.html" class="flex flex-col items-center gap-1 text-white">
<i class="fa-solid fa-users text-xl"></i>
<span class="text-[10px] font-medium">Clients</span>
</a>
<a href="13-NextChair - Owner - Settings.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>
</body>
</html>
@@ -0,0 +1,165 @@
<!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, viewport-fit=cover">
<title>Notifications — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<!-- NOTE: New screen. Linked from "10-NextChair - Customer - Setting.html"
("Notifications" row) — the staff-facing equivalent linked from
"4-NextChair - Staff - Settings.html" follows the identical pattern,
just under the staff shell. Neither had a destination in the
original export — see docs/implementation-plan.md §6. -->
<header class="px-6 pt-12 pb-6 bg-white border-b border-line sticky top-0 z-40 flex items-center gap-4">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-xl font-bold tracking-tight">Notifications</h1>
</header>
<main class="mt-6 px-6 space-y-8">
<!-- Booking Notifications -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Booking Notifications</h3>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Booking confirmations</p>
<p class="text-xs text-muted mt-0.5">When a booking is confirmed</p>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Appointment reminders</p>
<p class="text-xs text-muted mt-0.5">24 hours before your visit</p>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Booking changes</p>
<p class="text-xs text-muted mt-0.5">Reschedules made by the shop</p>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div>
<p class="text-sm font-bold">Cancellations</p>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
</div>
</section>
<!-- Loyalty & Offers -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Loyalty &amp; Offers</h3>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<div class="px-6 py-5 flex items-center justify-between">
<p class="text-sm font-bold">Reward earned</p>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<p class="text-sm font-bold">Promotions &amp; offers</p>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer">
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
</div>
</section>
<!-- Delivery Method -->
<section class="space-y-3">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Delivery Method</h3>
<div class="bg-white rounded-jumbo border border-line shadow-sm divide-y divide-line">
<div class="px-6 py-5 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-regular fa-envelope text-xs"></i></div>
<span class="text-sm font-bold">Email</span>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-comment-sms text-xs"></i></div>
<span class="text-sm font-bold">SMS</span>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer">
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
<div class="px-6 py-5 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-bell text-xs"></i></div>
<span class="text-sm font-bold">Push notifications</span>
</div>
<label class="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
<input type="checkbox" class="sr-only peer" checked>
<div class="w-11 h-6 bg-line rounded-full peer peer-checked:bg-accent transition-colors relative after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-5"></div>
</label>
</div>
</div>
</section>
</main>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-2 px-5 flex justify-between items-center">
<a href="23-NextChair - Customer - Home (Logged In).html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-house text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</a>
<a href="24-NextChair - Customer - Appointments Upcoming.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span>
</a>
<a href="10-NextChair - Customer - Setting.html" class="flex flex-col items-center gap-1 text-ink">
<i class="fa-solid fa-user text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</a>
</nav>
</body>
</html>
+118
View File
@@ -0,0 +1,118 @@
<!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, viewport-fit=cover">
<title>Staff Settings — TrimTime</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="px-6 py-6 bg-white border-b border-line sticky top-0 z-40">
<h1 class="text-2xl font-bold tracking-tight">Staff Settings</h1>
</header>
<main class="mt-6 px-6 space-y-6">
<!-- Profile Card -->
<div class="bg-white p-5 rounded-jumbo border border-line flex items-center gap-4 shadow-sm">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-16 h-16 rounded-full border border-line" alt="Marcus">
<div class="flex-1">
<h2 class="text-lg font-bold">Marcus Reed</h2>
<p class="text-[10px] text-accent font-bold uppercase tracking-widest">Master Barber</p>
</div>
<button class="w-10 h-10 bg-stone rounded-full flex items-center justify-center text-ink">
<i class="fa-solid fa-pen text-xs"></i>
</button>
</div>
<!-- Setting Sections -->
<div class="space-y-4">
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Availability</h3>
<div class="bg-white rounded-jumbo border border-line overflow-hidden">
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-clock text-xs"></i></div>
<span class="text-sm font-bold">Working Hours</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-mug-hot text-xs"></i></div>
<span class="text-sm font-bold">Manage Breaks</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button class="w-full px-6 py-5 flex items-center justify-between hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-plane-arrival text-xs"></i></div>
<span class="text-sm font-bold">Time Off / Vacation</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
</div>
<h3 class="text-[10px] font-bold uppercase tracking-widest text-muted ml-1">Account</h3>
<div class="bg-white rounded-jumbo border border-line overflow-hidden">
<button class="w-full px-6 py-5 flex items-center justify-between border-b border-line hover:bg-stone transition-all">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-stone rounded-lg flex items-center justify-center text-muted"><i class="fa-solid fa-bell text-xs"></i></div>
<span class="text-sm font-bold">Notifications</span>
</div>
<i class="fa-solid fa-chevron-right text-[10px] text-muted"></i>
</button>
<button onclick="location.href='Welcome__mobile.html'" class="w-full px-6 py-5 flex items-center justify-between hover:bg-red-50 transition-all text-error">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center text-error"><i class="fa-solid fa-right-from-bracket text-xs"></i></div>
<span class="text-sm font-bold">Log Out</span>
</div>
</button>
</div>
</div>
<!-- Switch Role (Admin Only - Mockup) -->
<button onclick="location.href='OwnerDashboard__mobile.html'" class="w-full py-4 border-2 border-dashed border-line rounded-jumbo text-[10px] font-bold uppercase tracking-widest text-muted hover:border-ink hover:text-ink transition-all">
Switch to Admin View
</button>
</main>
<!-- 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 hover:text-white transition-colors">
<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 text-white">
<i class="fa-solid fa-gear text-xl"></i>
<span class="text-[10px] font-medium">Settings</span>
</a>
</nav>
</body>
</html>
+150
View File
@@ -0,0 +1,150 @@
<!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, viewport-fit=cover">
<title>Staff Schedule — TrimTime</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-32">
<header class="fixed top-0 left-0 right-0 z-50 px-6 py-6 bg-white/80 backdrop-blur-md border-b border-line flex items-center justify-between">
<div class="flex flex-col">
<div class="flex items-center gap-2">
<h1 class="text-xl font-bold tracking-tight">Schedule</h1>
<i class="fa-solid fa-chevron-down text-[10px] text-muted"></i>
</div>
<!-- Owner-only indicator -->
<div class="flex items-center gap-2 mt-1">
<div class="w-1.5 h-1.5 rounded-full bg-accent animate-pulse"></div>
<p class="text-[8px] text-muted font-bold uppercase tracking-widest">View: All Staff Members</p>
</div>
</div>
<button class="w-10 h-10 bg-stone rounded-full flex items-center justify-center text-muted">
<i class="fa-solid fa-magnifying-glass text-xs"></i>
</button>
</header>
<main class="pt-24 px-6">
<!-- Week Navigator -->
<section class="mb-8">
<div class="flex justify-between items-center mb-6">
<span class="text-sm font-bold">Oct 12, 2024</span>
<div class="flex gap-2">
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-xs"><i class="fa-solid fa-chevron-left"></i></button>
<button class="w-8 h-8 rounded-full border border-line flex items-center justify-center text-xs"><i class="fa-solid fa-chevron-right"></i></button>
</div>
</div>
<div class="flex gap-3 overflow-x-auto no-scrollbar">
<button class="w-14 py-4 bg-white border border-line rounded-xl flex flex-col items-center shrink-0">
<span class="text-[8px] font-bold uppercase text-muted mb-1">Thu</span>
<span class="text-sm font-bold">10</span>
</button>
<button class="w-14 py-4 bg-white border border-line rounded-xl flex flex-col items-center shrink-0">
<span class="text-[8px] font-bold uppercase text-muted mb-1">Fri</span>
<span class="text-sm font-bold">11</span>
</button>
<button class="w-14 py-4 bg-ink text-white rounded-xl flex flex-col items-center shrink-0 shadow-lg scale-110">
<span class="text-[8px] font-bold uppercase text-white/50 mb-1">Sat</span>
<span class="text-sm font-bold">12</span>
</button>
<button class="w-14 py-4 bg-white border border-line rounded-xl flex flex-col items-center shrink-0">
<span class="text-[8px] font-bold uppercase text-muted mb-1">Mon</span>
<span class="text-sm font-bold">14</span>
</button>
</div>
</section>
<!-- Timeline -->
<div class="space-y-6">
<!-- 9:00 Slot -->
<div class="flex gap-4">
<div class="w-10 text-right"><span class="text-[10px] font-bold text-muted uppercase">09:00</span></div>
<div class="flex-1 space-y-2">
<div class="bg-white p-4 rounded-xl border border-line flex items-center gap-3 shadow-sm">
<div class="w-1 h-8 bg-blue-400 rounded-full"></div>
<div class="flex-1">
<p class="text-xs font-bold">John Doe</p>
<p class="text-[9px] text-muted uppercase tracking-widest">Marcus Reed</p>
</div>
</div>
</div>
</div>
<!-- 10:00 Slot -->
<div class="flex gap-4">
<div class="w-10 text-right"><span class="text-[10px] font-bold text-muted uppercase">10:00</span></div>
<div class="flex-1 space-y-2">
<div class="bg-white p-4 rounded-xl border border-line flex items-center gap-3 shadow-sm">
<div class="w-1 h-8 bg-purple-400 rounded-full"></div>
<div class="flex-1">
<p class="text-xs font-bold">Mike Ross</p>
<p class="text-[9px] text-muted uppercase tracking-widest">Leo Vance</p>
</div>
</div>
</div>
</div>
<!-- 11:00 (Mixed Staff View) -->
<div class="flex gap-4">
<div class="w-10 text-right"><span class="text-[10px] font-bold text-muted uppercase">11:00</span></div>
<div class="flex-1 grid grid-cols-2 gap-2">
<div class="bg-white p-3 rounded-xl border border-line flex items-center gap-2 shadow-sm">
<div class="w-1 h-6 bg-blue-400 rounded-full"></div>
<div class="flex-1 min-w-0">
<p class="text-[10px] font-bold truncate">Sarah M.</p>
<p class="text-[8px] text-muted truncate">Marcus</p>
</div>
</div>
<div class="bg-white p-3 rounded-xl border border-line flex items-center gap-2 shadow-sm">
<div class="w-1 h-6 bg-emerald-400 rounded-full"></div>
<div class="flex-1 min-w-0">
<p class="text-[10px] font-bold truncate">Dave P.</p>
<p class="text-[8px] text-muted truncate">Sasha</p>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Navigation context: Owner/Staff same layout -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#0c0c0c] text-gray-400 py-4 px-10 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="OwnerSettings__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>
</body>
</html>
+94
View File
@@ -0,0 +1,94 @@
<!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, viewport-fit=cover">
<title>Sign In — TrimTime</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#111b15',
stone: '#f4f6f4',
surface: '#ffffff',
muted: '#6c7870',
line: '#e1e7e2',
accent: '#10b981',
},
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '2rem', tile: '1rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen flex flex-col p-6">
<div class="flex-1 flex flex-col justify-center max-w-md mx-auto w-full">
<header class="mb-12">
<div class="w-16 h-16 bg-ink text-white rounded-[1.25rem] flex items-center justify-center text-3xl mb-8 shadow-xl shadow-ink/20">
<i class="fa-solid fa-scissors"></i>
</div>
<h1 class="text-4xl font-bold tracking-tight mb-2">Welcome</h1>
<p class="text-muted leading-relaxed">Please enter your credentials to access your appointments.</p>
</header>
<form class="space-y-4">
<div>
<label class="block text-[10px] font-bold uppercase tracking-[0.2em] text-muted mb-2 ml-1">Email Address</label>
<div class="relative">
<i class="fa-regular fa-envelope absolute left-5 top-1/2 -translate-y-1/2 text-muted"></i>
<input type="email" placeholder="name@example.com" class="w-full bg-white border border-line rounded-2xl pl-12 pr-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
</div>
<div>
<div class="flex justify-between items-center mb-2 ml-1">
<label class="text-[10px] font-bold uppercase tracking-[0.2em] text-muted">Password</label>
<a href="ForgotPassword__mobile.html" class="text-[10px] font-bold uppercase tracking-[0.2em] text-muted">Forgot?</a>
</div>
<div class="relative">
<i class="fa-solid fa-lock absolute left-5 top-1/2 -translate-y-1/2 text-muted"></i>
<input type="password" placeholder="••••••••" class="w-full bg-white border border-line rounded-2xl pl-12 pr-12 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
<button type="button" class="absolute right-4 top-1/2 -translate-y-1/2 text-muted hover:text-ink">
<i class="fa-regular fa-eye text-sm"></i>
</button>
</div>
</div>
<button type="button" onclick="location.href='NextChair - Customer - Home__mobile.html'" class="w-full bg-ink text-white py-5 rounded-full font-bold uppercase tracking-[0.15em] hover:bg-black transition-all shadow-xl shadow-ink/10 mt-6">
Sign In
</button>
</form>
<div class="mt-10">
<div class="relative flex items-center justify-center mb-8">
<div class="absolute inset-0 flex items-center"><div class="w-full border-t border-line"></div></div>
<span class="relative bg-stone px-4 text-[10px] font-bold text-muted uppercase tracking-[0.2em]">Or continue with</span>
</div>
<div class="grid grid-cols-2 gap-4">
<button class="flex items-center justify-center gap-3 bg-white border border-line py-4 rounded-2xl hover:bg-stone/50 transition-all font-bold text-xs uppercase tracking-widest">
<i class="fa-brands fa-google text-red-500"></i> Google
</button>
<button class="flex items-center justify-center gap-3 bg-white border border-line py-4 rounded-2xl hover:bg-stone/50 transition-all font-bold text-xs uppercase tracking-widest">
<i class="fa-brands fa-apple"></i> Apple
</button>
</div>
</div>
<p class="mt-12 text-center text-sm text-muted">
Don't have an account? <a href="CreateAccount__mobile.html" class="text-ink font-bold border-b-2 border-ink">Create one</a>
</p>
</div>
</body>
</html>
+56
View File
@@ -0,0 +1,56 @@
<!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, viewport-fit=cover">
<title>Verify — TrimTime</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen flex flex-col px-6 py-12">
<div class="flex-1 flex flex-col justify-center max-w-md mx-auto w-full text-center">
<header class="mb-12">
<div class="w-20 h-20 bg-ink text-white rounded-full flex items-center justify-center text-3xl mx-auto mb-8">
<i class="fa-solid fa-shield-halved"></i>
</div>
<h1 class="text-3xl font-bold tracking-tight">Verify Your Account</h1>
<p class="text-muted mt-4 text-sm leading-relaxed">We've sent a 4-digit code to <br><span class="text-ink font-semibold">alex.chen@example.com</span></p>
</header>
<div class="flex justify-center gap-4 mb-12">
<input type="text" maxlength="1" class="w-16 h-16 bg-surface border border-line rounded-2xl text-center text-2xl font-bold focus:ring-2 focus:ring-ink outline-none transition-all">
<input type="text" maxlength="1" class="w-16 h-16 bg-surface border border-line rounded-2xl text-center text-2xl font-bold focus:ring-2 focus:ring-ink outline-none transition-all">
<input type="text" maxlength="1" class="w-16 h-16 bg-surface border border-line rounded-2xl text-center text-2xl font-bold focus:ring-2 focus:ring-ink outline-none transition-all">
<input type="text" maxlength="1" class="w-16 h-16 bg-surface border border-line rounded-2xl text-center text-2xl font-bold focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
<button type="button" onclick="location.href='Onboarding__mobile.html'" class="w-full bg-ink text-white py-5 rounded-full font-bold uppercase tracking-widest hover:bg-black transition-all shadow-lg">
Verify &amp; Continue
</button>
<div class="mt-12">
<p class="text-sm text-muted">Didn't receive the code?</p>
<button class="text-ink font-bold border-b border-ink mt-2">Resend Code</button>
</div>
</div>
</body>
</html>
+51
View File
@@ -0,0 +1,51 @@
<!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, viewport-fit=cover">
<title>Forgot Password — TrimTime</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen flex flex-col px-6 py-12">
<div class="flex-1 flex flex-col justify-center max-w-md mx-auto w-full">
<header class="mb-10">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center mb-8">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-3xl font-bold tracking-tight">Reset Password</h1>
<p class="text-muted mt-2">Enter your email and we'll send you a link to reset your password.</p>
</header>
<form class="space-y-6">
<div>
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2 ml-1">Email Address</label>
<input type="email" placeholder="name@example.com" class="w-full bg-surface border border-line rounded-xl px-5 py-4 focus:ring-2 focus:ring-ink outline-none transition-all">
</div>
<button type="button" onclick="location.href='Verify__mobile.html'" class="w-full bg-ink text-white py-5 rounded-full font-bold uppercase tracking-widest hover:bg-black transition-all shadow-lg">
Send Reset Link
</button>
</form>
</div>
</body>
</html>
@@ -0,0 +1,86 @@
<!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, viewport-fit=cover">
<title>Review Booking</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: { ink: '#111b15', stone: '#f4f6f4', surface: '#ffffff', muted: '#6c7870', line: '#e1e7e2', accent: '#10b981' },
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1rem', tile: '0.75rem' }
}
}
}
</script>
</head>
<body class="bg-stone text-ink min-h-screen pb-12">
<header class="px-6 py-6">
<button onclick="history.back()" class="w-10 h-10 rounded-full border border-line flex items-center justify-center mb-8">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-3xl font-bold tracking-tight">Review Details</h1>
<p class="text-muted mt-2">Please check your visit details before confirming.</p>
</header>
<main class="px-6 space-y-4">
<!-- Details Card -->
<div class="bg-white p-8 rounded-jumbo border border-line shadow-sm space-y-8">
<div class="flex justify-between items-start">
<div>
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block mb-1">Business</span>
<h2 class="text-xl font-bold">The Cut &amp; Shave Co.</h2>
</div>
</div>
<div class="space-y-6">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-stone rounded-xl flex items-center justify-center text-muted"><i class="fa-solid fa-scissors"></i></div>
<div class="flex-1">
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block">Service</span>
<p class="text-sm font-bold">Standard Cut • 30 min</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-stone rounded-xl flex items-center justify-center text-muted"><i class="fa-solid fa-user-check"></i></div>
<div class="flex-1">
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block">Barber</span>
<p class="text-sm font-bold">Marcus Reed</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-stone rounded-xl flex items-center justify-center text-muted"><i class="fa-solid fa-calendar"></i></div>
<div class="flex-1">
<span class="text-[10px] font-bold uppercase tracking-widest text-muted block">Date &amp; Time</span>
<p class="text-sm font-bold">Sat, Oct 12 • 2:00 PM</p>
</div>
</div>
</div>
<!-- Notes field -->
<div class="pt-6 border-t border-line">
<label class="block text-[10px] font-bold uppercase tracking-widest text-muted mb-2">Special Notes (Optional)</label>
<textarea placeholder="e.g. skin sensitivity, specific style requests..." class="w-full bg-stone/50 border border-line rounded-xl p-4 text-sm focus:ring-2 focus:ring-ink outline-none min-h-[100px]"></textarea>
</div>
</div>
<button onclick="location.href='Confirmation__mobile.html'" class="w-full bg-ink text-white py-5 rounded-full font-bold uppercase tracking-widest shadow-lg shadow-ink/20 mt-8">
Confirm Booking
</button>
</main>
</body>
</html>