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.
183 lines
7.2 KiB
HTML
Executable File
183 lines
7.2 KiB
HTML
Executable File
<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> |