A beautifully designed, responsive single-page web application for a fine dining restaurant, built using Vanilla HTML, CSS, and pure JavaScript. This project emphasizes modern UI/UX trends like glassmorphism and smooth animations.
The objective of this project is to showcase professional-grade design using standard web technologies (no frameworks) while maintaining high performance and accessibility.
Since your goal is to learn the workflow and push this project to GitHub, follow these exact steps within this directory. This guide assumes you have a GitHub account and Git installed on your absolute environment.
"Staging" files tells Git that you want to include these current changes in your next commit.
Run this command in the terminal (inside restaurant-app folder):
git add .(The . means "all files" in the current directory).
A "commit" takes a snapshot of your staged files and saves it permanently in your local history.
git commit -m "Initial commit: Add premium restaurant landing page"- Go to github.com and log in.
- Click the
+icon in the top right corner and select New repository. - Name it
restaurant-app, leave it Public, and do NOT check "Add a README file" (we already made one!). - Click Create repository.
Link your local repository to the empty GitHub repository you just created, and push your code! Copy the commands from your GitHub repo page (under "...or push an existing repository from the command line"), or run:
git remote add origin https://github.com/YOUR_USERNAME/restaurant-app.git
git branch -M main
git push -u origin main(Don't forget to replace YOUR_USERNAME with your actual GitHub username!)
- Menu Category Filters: Interactive tabs to filter signature selections dynamically between Main Course, Exquisite Desserts, and Beverages.
- Local Storage Bookings Manager: Simulated reservation manager that allows users to view, search, and cancel active reservations client-side.
- Guest Testimonial Submission Form: Star rating review submission picker that appends guest experiences directly to the landing page with LocalStorage persistence.
- English-Hindi Translation Toggle: Floating button in the navbar to instantly translate the user interface between English and Hindi.
- Responsive Layout: Works beautifully on mobile, tablet, and desktop screens.
- ScrollSpy Highlighting: Dynamically highlights the current section in the navigation menu as you scroll.
- Improved Accessibility (a11y): Full keyboard support (Enter/Space triggers) and standard ARIA markup (
aria-expanded,aria-controls) for the mobile menu. - Date Restriction Validation: Reservation date input dynamically blocks past dates, ensuring only current or future bookings are allowed.
- Dynamic Copyright Year: Automatically renders the current calendar year in the footer.
- Clean Stylesheet Architecture: Extracted inline styling into clean, maintainable CSS classes.
- Glassmorphism: A modern UI trend used in the reservation form and navbar.
- Dark Theme: High contrast, elegant dark mode for a premium "midnight dining" feel.
- Social Sharing: Optimized with Open Graph and Twitter meta tags for professional social media links.
- Back to Top: Smooth scrolling back-to-top button for improved navigation.
- Enhanced Footer: Brand-focused footer with social media links and elegant typography.
- Dynamic Elements: Visual fading animation effects on scroll using IntersectionObserver.
- Dynamic Menu: Fetch menu items from a JSON file or API.
- Table Booking System: Integrate with a backend for real-time table availability.
- Dark/Light Mode Toggle: Allow users to choose between light and dark themes.
No compilation step npm install is needed! Just open the index.html file in your favorite web browser or right-click index.html and use a VS Code extension like "Live Server".
For the best experience on mobile, ensure you view the site in portrait mode.
- Responsive layout optimization.
- Smooth scrolling dynamic navigation.
- Adding dessert card modules.
- Dynamic table booking backend simulation.
- Multi-language English/Hindi translation support.
- Rishu Ray - Lead Developer - rayrishu19-wq