5 Star BBU Hotel Website

## 🔑 Key Features & Technical Specifications ### 1. Glassmorphic Sticky Header & Auth Sync - **Sticky Glass Panel**: Stays fixed at the top with `backdrop-filter: blur(16px)` and subtle gold border tint (`border-amber-500/20`). - **Dynamic Auth Button**: Automatically inspects `localStorage` (`bbu_hotel_user`). - If **logged out**: Displays gold "Sign In" button linking to `login.html`. - If **logged in**: Renders a custom VIP badge with user's initial, full name, email, and dropdown menu ("My Reservations", "Sign Out"). ### 2. Hero Section & Quick Availability Engine - **Atmospheric Background**: Dimmed HD hotel exterior background with smooth gradient overlay. - **Floating Search Bar**: Allows guests to select Check-in Date, Check-out Date, Guest count, and Suite Category. - **Date Validation**: JavaScript automatically restricts check-in dates to today or later, and forces check-out dates to be at least 1 day after check-in. ### 3. Handcrafted Suites Showcase & Filtering - **Data-Driven Grid**: Rooms are dynamically rendered from the JS data model `ROOMS_DATA`. - **Category Filter Pills**: Filter suites instantly without page reloads: - `All Accommodations` - `Royal Suites` - `Oceanfront Villas` - `Imperial Club` - **Suite Cards**: Displays room title, category pill, rating, review count, square meters, max guests, key amenity tags, price per night, and "Reserve Suite" trigger button. ### 4. Interactive Reservation Modal - **Dynamic Pricing Engine**: Calculates stay duration (nights), subtotal (`price * nights`), 10% tax/fees, and grand total. - **Special Requests Form**: Guest text input for airport limousine transfer, champagne on arrival, etc. - **Confirmation Toast**: Displays an animated golden toast notification upon reservation submission. ### 5. VIP Authentication Portal (`login.html`) - **Split-Screen Layout**: - **Left Side**: Full-height atmospheric hotel image with 5-star badge, concierge quote, and back navigation link. - **Right Side**: Glassmorphism container with smooth tab switcher between *Sign In* and *Create VIP Account*. - **Interactive Features**: - Show/Hide password toggle button (`👁️`). - Form validation for required fields. - Simulated social authentication (Google & Apple ID). - Saves user credentials to `localStorage` and redirects to `index.html` with welcome toast. ### 6. Toast Notification Engine - Custom non-blocking notification container positioned at `bottom: 24px, right: 24px`. - Smooth slide-in right animation with auto-dismiss after 4 seconds.