Stefan Lazic
090646fdfd
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.
202 lines
11 KiB
HTML
Executable File
202 lines
11 KiB
HTML
Executable File
<!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> |