NextChair/templates/18-NextChair - Customer - Booking.html

<!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>