Phase 2
Base app architecture:
Route groups for customer, staff and owner.
* Reusable design system with around 20 UI components.
* Complete Prisma schema.
* Authentication with email/password and Google.
* Role and permission model.
* Protected routes.
* Clean separation between features, services, components and shared utilities.
This commit is contained in:
201 files changed
+31984
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>
|
||||
+115
@@ -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 & 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 & 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>
|
||||
+202
@@ -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 · 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 & 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>
|
||||
+95
@@ -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>
|
||||
+147
@@ -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 & 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>
|
||||
+127
@@ -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
@@ -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 & 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
|
||||
& 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
|
||||
& 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 & 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 &
|
||||
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 & 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 & 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>
|
||||
+140
@@ -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>
|
||||
+183
@@ -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>
|
||||
+207
@@ -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>
|
||||
Executable
+101
@@ -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>
|
||||
Executable
+120
@@ -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>
|
||||
Executable
+69
@@ -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>
|
||||
+130
@@ -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>
|
||||
+418
@@ -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&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 • 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 & 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 & 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">· 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 & 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 & 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 • 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 — 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 • 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 & 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 £</option>
|
||||
<option>USD $</option>
|
||||
<option>EUR €</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 & 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 & Beard Services — 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 & Style</p>
|
||||
<p class="text-xs text-muted mt-0.5">30 min • £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 & Style</p>
|
||||
<p class="text-xs text-muted mt-0.5">30 min • £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 & Beard</p>
|
||||
<p class="text-xs text-muted mt-0.5">40 min • £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 • £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>
|
||||
+88
@@ -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">−</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">−</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 & 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">−</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">−</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">−</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">−</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">−</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 – 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 – 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 – 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 – 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 • 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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
@@ -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
@@ -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>
|
||||
Executable
+94
@@ -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>
|
||||
Executable
+56
@@ -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 & 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>
|
||||
Executable
+51
@@ -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>
|
||||
+86
@@ -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 & 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 & 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>
|
||||
Reference in new issue
Block a user