🍽️ The Grand Palette - Professional Restaurant Website
✨ Professional Upgrades Completed
1. New Authentication Page (auth.html)
- ✅ Dedicated login page for registered users only
- ✅ Professional email/password validation
- ✅ Hardcoded demo accounts for testing:
-
Email: john@example.com |
Password: password123 |
-
Email: jane@example.com |
Password: secure456 |
-
Email: demo@example.com |
Password: demo123 |
- ✅ Guest access option
- ✅ Real-time form validation
- ✅ Smooth animations and transitions
2. Enhanced User Interface
- ✅ Modern gradient backgrounds with glassmorphism effects
- ✅ Professional color scheme (Dark blue/Gold luxury theme)
- ✅ Smooth hover animations and transitions
- ✅ Professional typography with Playfair Display & Inter fonts
- ✅ Improved spacing and visual hierarchy
3. New Sections
- ✅ Hero Section - Premium banner with animated text
- ✅ About Us Section - Restaurant achievements & statistics
- ✅ Enhanced Menu - Improved card design with better layout
- ✅ Menu Filters - Filter by: All, Starters, Mains, Desserts
- ✅ Enhanced Reservation - More fields (name, date, time, guests, phone, notes)
- ✅ Professional Footer - Links, hours, contact info, social media
- ✅ Item quantity tracking
- ✅ Subtotal calculation
- ✅ Tax calculation (18% GST)
- ✅ Total amount display
- ✅ Individual item removal
- ✅ Empty state with helpful message
- ✅ Professional modal design
5. User Experience Improvements
- ✅ User authentication dropdown (shows logged-in user)
- ✅ Logout functionality with confirmation
- ✅ Color-coded notifications (success/error/info)
- ✅ Smooth toast notifications
- ✅ Cart badge with item count
- ✅ Responsive design (Mobile, Tablet, Desktop)
6. Professional Styling
- ✅ Consistent design system with CSS variables
- ✅ Modern button styles with hover effects
- ✅ Glassmorphism effects with backdrop filters
- ✅ Custom scrollbar styling
- ✅ Smooth animations and transitions throughout
- ✅ Professional card shadows and depths
- ✅ LocalStorage for cart persistence
- ✅ LocalStorage for user sessions
- ✅ LocalStorage for reservations
- ✅ Optimized image loading
- ✅ Clean, modular JavaScript code
8. Responsive Design
- ✅ Mobile-first approach
- ✅ Tablet optimization
- ✅ Desktop optimization
- ✅ Touch-friendly buttons
- ✅ Readable font sizes on all devices
🎯 Key Features
Navigation
- Logo with hover effect
- Smooth nav links with underline animation
- Animated cart icon
- Cart badge with count
- User dropdown menu
Authentication Flow
- User clicks “Login” → Redirects to
auth.html
- Enters email & password
- Validation checks against demo database
- On success → Redirected to main page
- Auth dropdown shows user name
- Logout clears session
- 6 signature items (Starters, Mains, Desserts)
- Professional product cards
- Category filters
- Add to cart functionality
- Item descriptions & prices
Cart System
- Add unlimited items
- View cart with quantities
- Calculate subtotal, tax, & total
- Remove items individually
- Checkout confirmation
- Cart persists across sessions
Reservation System
- Book table with full details
- Date & time selection
- Guest count selection
- Phone number & special notes
- Data stored in LocalStorage
📁 File Structure
restaurantproject/
├── html/
│ ├── index.html (Main page)
│ └── auth.html (Login page)
├── css/
│ └── index.css (Professional styling)
├── js/
│ └── main.js (Enhanced functionality)
└── assets/
└── (image assets)
🚀 How to Use
View the Website
- Main Page:
http://localhost:8000/html/index.html
- Login Page:
http://localhost:8000/html/auth.html
Test Demo Accounts
| Email | Password |
|——-|———-|
| john@example.com | password123 |
| jane@example.com | secure456 |
| demo@example.com | demo123 |
Features to Try
- ✅ Scroll through different sections
- ✅ Click “Login” and use demo credentials
- ✅ Filter menu by category
- ✅ Add items to cart
- ✅ View cart with calculations
- ✅ Make a reservation
- ✅ Check responsive design (resize browser)
💻 Technologies Used
- HTML5 - Semantic markup
- CSS3 - Modern styling with animations
- JavaScript (ES6) - Dynamic functionality
- Bootstrap 5 - Responsive grid system
- LocalStorage - Client-side data persistence
- Unsplash Images - High-quality food photography
🎨 Design Highlights
- Color Scheme: Dark navy (#0f1419) + Gold (#D4AF37)
- Typography: Playfair Display (Headings) + Inter (Body)
- Effects: Glassmorphism, smooth transitions, gradient overlays
- Animations: Fade-in, slide, scale, rotate effects
- Accessibility: High contrast, readable fonts, clear CTAs
Professional Restaurant Website Ready! 🎉