Initial PHP rebuild of the app
This commit is contained in:
690 files changed
+33944
-12046
No files matched your search
@@ -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>
|
||||
Reference in new issue
Block a user