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

Phase 2

Browse Source 
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:
Stefan Lazic committed 2026-08-02 17:47:23 +01:00
1 parent 468d163299
commit 090646fdfd
201 files changed
+31984
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/18-NextChair - Customer - Booking.html
Executable
+207
View File
@@ -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>