Technologies Used
Created November 12, 2025 • Updated May 18, 2026
Interactive preview of the landing page.
A modern, clean, and interactive restaurant table reservation booking interface. Built with vanilla HTML, CSS, and JavaScript – no dependencies required.
restaurant-hero.html – Complete standalone HTML file with embedded CSS and JavaScriptSimply open restaurant-hero.html in your web browser. No installation or build process required.
# Just open in browser
open restaurant-hero.html
Edit the tables array in the JavaScript section to change table configuration:
const tables = [
{ id: 1, seats: 2, x: 60, y: 80 },
{ id: 2, seats: 4, x: 130, y: 70, reserved: true },
// Add more tables...
];
Table Object Properties:
id – Table number (displayed on the map)seats – Number of seats at the tablex – Horizontal position on the floor plan (0-380)y – Vertical position on the floor plan (0-300)reserved – Optional boolean to mark table as reservedModify the time buttons in the left section to add or remove available reservation times:
<div class="time-slot">
<button class="time-btn" data-time="12:00">12:00</button>
</div>
To disable a time slot and add a tooltip:
<div class="time-slot">
<button class="time-btn" data-time="12:30" disabled>12:30</button>
<div class="tooltip">Fully Booked</div>
</div>
Update CSS variables for quick theme changes:
.time-btn.active {
background: #2563eb; /* Change to your brand color */
}
.table-circle {
fill: #3b82f6; /* Available table color */
}
#2563eb (Blue)#3b82f6 (Blue)#fca5a5 (Light Red)#1a1a1a (Dark Gray)#f8f9fa (Light Gray)Works on all modern browsers:
restaurant-hero.html
├── HTML Structure
│ ├── Hero Container
│ ├── Left Section (Time Selection)
│ └── Right Section (Floor Plan)
├── CSS Styling
│ ├── Layout & Responsive
│ ├── Buttons & Interactions
│ └── Animations
└── JavaScript
├── Table Rendering
├── Time Selection Handler
└── Table Selection & Confirmation
renderTables()Dynamically generates the floor plan with all tables from the tables array.
selectTable(tableId, seats)Handles table selection, shows confirmation message, and triggers animations.
Manages active state for time slots and updates the selectedTime variable.
Add a form submission after table selection:
function selectTable(tableId, seats) {
// ... existing code ...
// Send to backend
fetch('/api/reservations', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
tableId: tableId,
seats: seats,
time: selectedTime,
date: new Date().toISOString()
})
});
}
Free to use and modify for your restaurant or project.
For questions or custom modifications, feel free to reach out. This component is designed to be easily customizable and maintainable.
Built with: HTML5 • CSS3 • Vanilla JavaScript Size: ~8KB (uncompressed) Dependencies: None
Price
$19
A Mudos account is required for licensed downloads and updates.
Live PreviewSecure checkout by Paddle. Downloads, licenses, and future eligible releases are managed from your Mudos Account after purchase.
Share this landing page template.
Have a project in mind? Share brief details and we will get back quickly.