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/11-NextChair - Customer - Loyalty.html
Executable
+202
View File
@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>My Loyalty Card — TrimTime</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
ink: '#111b15',
stone: '#f4f6f4',
surface: '#ffffff',
muted: '#6c7870',
line: '#e1e7e2',
accent: '#f59e0b',
},
fontFamily: { sans: ['Inter', 'sans-serif'] },
borderRadius: { jumbo: '1.5rem', tile: '1rem' }
}
}
}
</script>
<style>
.perspective-1000 { perspective: 1000px; }
.preserve-3d { transform-style: preserve-3d; }
.backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }
/* Glossy overlay effect */
.glossy::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,0.08) 100%);
pointer-events: none;
border-radius: inherit;
z-index: 10;
}
/* Subtle shimmer on the gold border */
.gold-border {
border: 3px solid transparent;
background-clip: padding-box;
box-shadow:
0 0 0 3px #f59e0b,
0 30px 60px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.15);
}
</style>
</head>
<body class="bg-stone text-ink overflow-x-hidden pb-32" style="font-family: 'Inter', sans-serif;">
<!-- Header -->
<header class="px-6 pt-12 pb-4 flex items-center justify-between">
<button class="w-11 h-11 rounded-full bg-white border border-line flex items-center justify-center shadow-sm">
<i class="fa-solid fa-arrow-left text-sm"></i>
</button>
<h1 class="text-xl font-bold tracking-tight">Loyalty Rewards</h1>
<div class="w-11"></div>
</header>
<main class="px-5 pt-2">
<!-- 3D Card Container -->
<div class="perspective-1000 w-full mb-10" style="aspect-ratio: 1.65 / 1;">
<div id="loyaltyCard" class="relative w-full h-full preserve-3d gold-border rounded-2xl" style="transform: rotateY(0deg);">
<!-- ═══ FRONT SIDE (Stamps) ═══ -->
<div class="absolute inset-0 backface-hidden bg-[#141414] rounded-2xl flex flex-col justify-between glossy overflow-hidden"
style="padding: 14px 16px 10px 16px;">
<!-- Top: Title -->
<div class="flex justify-between items-center">
<h2 class="text-white font-black italic tracking-tight" style="font-size: clamp(16px, 4.5vw, 22px);">Loyalty Card</h2>
<span class="text-[#f59e0b] font-bold uppercase tracking-widest border border-[#f59e0b]/30 px-2 py-0.5 rounded" style="font-size: 8px;">Member #8421</span>
</div>
<!-- Divider -->
<div class="w-10 h-0.5 bg-[#f59e0b]" style="margin-top: -2px;"></div>
<!-- Stamp Grid -->
<div class="grid grid-cols-5 gap-2 flex-1 items-center" style="margin-top: 8px; margin-bottom: 6px;">
<!-- Row 1: all stamped -->
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<!-- Row 2: 2 stamped, 2 empty, 1 reward -->
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-white rounded-full flex items-center justify-center shadow-inner">
<i class="fa-solid fa-mustache text-ink" style="font-size: clamp(12px, 3.2vw, 18px);"></i>
</div>
<div class="aspect-square bg-[#2a2a2a] border-2 border-dashed border-white/20 rounded-full flex items-center justify-center"></div>
<div class="aspect-square bg-[#2a2a2a] border-2 border-dashed border-white/20 rounded-full flex items-center justify-center"></div>
<!-- Reward slot -->
<div class="aspect-square bg-[#f59e0b] rounded-full flex items-center justify-center shadow-lg" style="transform: scale(1.08);">
<span class="text-ink font-black leading-tight text-center" style="font-size: clamp(7px, 1.8vw, 10px);">50%<br>OFF</span>
</div>
</div>
<!-- Footer: redemption notice -->
<p class="text-white/40 font-bold uppercase tracking-widest text-center" style="font-size: clamp(5px, 1.5vw, 7px); letter-spacing: 0.18em;">
Only redeemable Monday – Thursday &nbsp;·&nbsp; Adults Only
</p>
</div>
<!-- ═══ BACK SIDE (Brand) ═══ -->
<div class="absolute inset-0 rotate-y-180 backface-hidden rounded-2xl overflow-hidden">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_be9ca24e80_ca4b1efb48698320.png" alt="vintage moody barbershop background with grooming tools, dark and elegant, premium feel, deep blacks" />
<div class="absolute inset-0 bg-ink/60 flex items-center justify-center">
<div class="text-center">
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center text-ink text-3xl mx-auto mb-4">
<i class="fa-solid fa-scissors"></i>
</div>
<h3 class="text-white text-2xl font-black uppercase tracking-tighter">TrimTime</h3>
<p class="text-[#f59e0b] font-bold uppercase mt-2" style="font-size: 10px; letter-spacing: 0.3em;">Barber &amp; Grooming</p>
</div>
</div>
</div>
</div>
</div>
<!-- Progress & Info -->
<div class="space-y-5">
<!-- Progress Card -->
<div class="bg-white p-6 rounded-3xl border border-line shadow-sm text-center">
<h3 class="text-lg font-bold mb-1">Almost there, Alex!</h3>
<p class="text-sm text-muted">Complete 2 more visits to unlock your <span class="font-bold text-ink">50% discount</span> on any service.</p>
<div class="mt-5 h-2 w-full bg-stone rounded-full overflow-hidden">
<div class="bg-[#f59e0b] h-full rounded-full" style="width: 77%;"></div>
</div>
<p class="text-xs text-muted mt-2">7 of 9 visits completed</p>
</div>
<!-- How It Works -->
<div class="bg-white p-6 rounded-3xl border border-line shadow-sm">
<h4 class="text-xs font-bold uppercase tracking-widest text-muted mb-5">How it works</h4>
<div class="space-y-4">
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-stone flex items-center justify-center text-xs font-bold shrink-0">1</div>
<p class="text-xs text-muted leading-relaxed pt-1">Book your appointment through the TrimTime app.</p>
</div>
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-stone flex items-center justify-center text-xs font-bold shrink-0">2</div>
<p class="text-xs text-muted leading-relaxed pt-1">Show this digital card to your barber after your haircut.</p>
</div>
<div class="flex gap-4 items-start">
<div class="w-8 h-8 rounded-full bg-stone flex items-center justify-center text-xs font-bold shrink-0">3</div>
<p class="text-xs text-muted leading-relaxed pt-1">The barber will add a digital stamp to your card instantly.</p>
</div>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-line py-2 px-5 flex justify-between items-center">
<a href="Home__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-house text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Home</span>
</a>
<a href="Appointments__mobile.html" class="flex flex-col items-center gap-1 text-muted hover:text-ink transition-colors">
<i class="fa-solid fa-calendar-check text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Bookings</span>
</a>
<a href="Settings__mobile.html" class="flex flex-col items-center gap-1 text-ink">
<i class="fa-solid fa-user text-xl"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Settings</span>
</a>
</nav>
</body>
</html>