Spaces:
Running
Running
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Skardu ViewPoint - Hotel Management</title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
<style> | |
:root { | |
--primary: #2c6e49; | |
--primary-light: #4c956c; | |
--secondary: #d68c45; | |
--accent: #fefee3; | |
--light: #f8edeb; | |
--gray: #94a3b8; | |
--dark: #1a1a1a; | |
--white: #ffffff; | |
--success: #38a169; | |
--warning: #dd6b20; | |
--danger: #e53e3e; | |
--shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
--radius: 8px; | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'Poppins', sans-serif; | |
background-color: #f5f5f5; | |
color: var(--dark); | |
line-height: 1.6; | |
overflow-x: hidden; | |
} | |
/* Utility Classes */ | |
.container { | |
width: 100%; | |
max-width: 1200px; | |
margin: 0 auto; | |
padding: 0 20px; | |
} | |
.btn { | |
display: inline-block; | |
padding: 10px 20px; | |
border: none; | |
border-radius: var(--radius); | |
cursor: pointer; | |
font-size: 14px; | |
font-weight: 500; | |
transition: all 0.3s ease; | |
text-decoration: none; | |
} | |
.btn-primary { | |
background-color: var(--primary); | |
color: var(--white); | |
} | |
.btn-primary:hover { | |
background-color: var(--primary-light); | |
} | |
.btn-secondary { | |
background-color: var(--secondary); | |
color: var(--white); | |
} | |
.btn-secondary:hover { | |
background-color: #e6913e; | |
} | |
.btn-outline { | |
background-color: transparent; | |
border: 1px solid var(--primary); | |
color: var(--primary); | |
} | |
.btn-outline:hover { | |
background-color: var(--primary); | |
color: var(--white); | |
} | |
.flex { | |
display: flex; | |
} | |
.flex-center { | |
align-items: center; | |
justify-content: center; | |
} | |
.flex-between { | |
justify-content: space-between; | |
} | |
/* Layout */ | |
#app { | |
display: grid; | |
grid-template-rows: auto 1fr auto; | |
min-height: 100vh; | |
} | |
/* Header */ | |
header { | |
background-color: var(--white); | |
box-shadow: var(--shadow); | |
position: fixed; | |
width: 100%; | |
z-index: 100; | |
} | |
.navbar { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
padding: 15px 0; | |
} | |
.logo { | |
font-family: 'Playfair Display', serif; | |
font-size: 24px; | |
font-weight: 700; | |
color: var(--primary); | |
} | |
.logo span { | |
color: var(--secondary); | |
} | |
.nav-links { | |
display: flex; | |
gap: 25px; | |
} | |
.nav-links a { | |
text-decoration: none; | |
color: var(--dark); | |
font-weight: 500; | |
transition: color 0.3s; | |
} | |
.nav-links a:hover, .nav-links a.active { | |
color: var(--primary); | |
} | |
.user-menu { | |
display: flex; | |
align-items: center; | |
gap: 15px; | |
} | |
.notification-bell { | |
position: relative; | |
cursor: pointer; | |
} | |
.notification-bell .badge { | |
position: absolute; | |
top: -5px; | |
right: -5px; | |
background-color: var(--danger); | |
color: white; | |
border-radius: 50%; | |
width: 18px; | |
height: 18px; | |
font-size: 10px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.avatar { | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
background-color: var(--primary-light); | |
color: var(--white); | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
font-weight: 600; | |
cursor: pointer; | |
} | |
/* Main Content */ | |
main { | |
padding-top: 80px; | |
padding-bottom: 50px; | |
min-height: calc(100vh - 150px); | |
} | |
/* Dashboard */ | |
.dashboard { | |
display: grid; | |
grid-template-columns: 250px 1fr; | |
gap: 30px; | |
padding: 30px 0; | |
} | |
.sidebar { | |
background-color: var(--white); | |
border-radius: var(--radius); | |
box-shadow: var(--shadow); | |
padding: 20px; | |
height: fit-content; | |
position: sticky; | |
top: 90px; | |
} | |
.sidebar-title { | |
font-size: 18px; | |
font-weight: 600; | |
margin-bottom: 20px; | |
padding-bottom: 10px; | |
border-bottom: 1px solid #eee; | |
color: var(--primary); | |
} | |
.sidebar-menu { | |
list-style: none; | |
} | |
.sidebar-menu li { | |
margin-bottom: 10px; | |
} | |
.sidebar-menu a { | |
display: flex; | |
align-items: center; | |
padding: 8px 10px; | |
color: var(--dark); | |
text-decoration: none; | |
border-radius: var(--radius); | |
transition: all 0.3s; | |
} | |
.sidebar-menu a:hover, | |
.sidebar-menu a.active { | |
background-color: rgba(44, 110, 73, 0.1); | |
color: var(--primary); | |
} | |
.sidebar-menu i { | |
margin-right: 10px; | |
width: 20px; | |
text-align: center; | |
} | |
.dashboard-content { | |
background-color: var(--white); | |
border-radius: var(--radius); | |
box-shadow: var(--shadow); | |
padding: 30px; | |
} | |
/* Stats Cards */ | |
.stats-cards { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
gap: 20px; | |
margin-bottom: 30px; | |
} | |
.stat-card { | |
background-color: var(--white); | |
border-radius: var(--radius); | |
padding: 20px; | |
box-shadow: var(--shadow); | |
border-left: 5px solid var(--primary); | |
} | |
.stat-card.warning { | |
border-left-color: var(--warning); | |
} | |
.stat-card.success { | |
border-left-color: var(--success); | |
} | |
.stat-card.danger { | |
border-left-color: var(--danger); | |
} | |
.stat-card-title { | |
font-size: 14px; | |
color: var(--gray); | |
margin-bottom: 10px; | |
} | |
.stat-card-value { | |
font-size: 28px; | |
font-weight: 700; | |
margin-bottom: 5px; | |
} | |
.stat-card-change { | |
font-size: 12px; | |
display: flex; | |
align-items: center; | |
} | |
.stat-card-change.up { | |
color: var(--success); | |
} | |
.stat-card-change.down { | |
color: var(--danger); | |
} | |
.stat-card-change i { | |
margin-right: 5px; | |
} | |
/* Tables */ | |
.data-table { | |
width: 100%; | |
border-collapse: collapse; | |
margin: 20px 0; | |
} | |
.data-table th, | |
.data-table td { | |
padding: 12px 15px; | |
text-align: left; | |
border-bottom: 1px solid #eee; | |
} | |
.data-table th { | |
background-color: #f9f9f9; | |
font-weight: 600; | |
color: var(--primary); | |
} | |
.data-table tr:hover { | |
background-color: #f5f5f5; | |
} | |
/* Status Badges */ | |
.status { | |
display: inline-block; | |
padding: 5px 10px; | |
border-radius: 20px; | |
font-size: 12px; | |
font-weight: 500; | |
} | |
.status.available { | |
background-color: rgba(56, 161, 105, 0.1); | |
color: var(--success); | |
} | |
.status.booked { | |
background-color: rgba(229, 62, 62, 0.1); | |
color: var(--danger); | |
} | |
.status.maintenance { | |
background-color: rgba(221, 107, 32, 0.1); | |
color: var(--warning); | |
} | |
/* Buttons in Tables */ | |
.table-actions { | |
display: flex; | |
gap: 10px; | |
} | |
.table-actions .btn { | |
padding: 5px 10px; | |
font-size: 12px; | |
} | |
/* Forms */ | |
.form-group { | |
margin-bottom: 20px; | |
} | |
.form-label { | |
display: block; | |
margin-bottom: 8px; | |
font-weight: 500; | |
} | |
.form-control { | |
width: 100%; | |
padding: 10px 15px; | |
border: 1px solid #ddd; | |
border-radius: var(--radius); | |
font-size: 14px; | |
transition: border-color 0.3s; | |
} | |
.form-control:focus { | |
border-color: var(--primary); | |
outline: none; | |
} | |
/* Forms in rows */ | |
.form-row { | |
display: grid; | |
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
gap: 20px; | |
} | |
/* Calendar */ | |
.calendar { | |
background-color: var(--white); | |
border-radius: var(--radius); | |
box-shadow: var(--shadow); | |
padding: 25px; | |
margin-bottom: 30px; | |
} | |
.calendar-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
margin-bottom: 20px; | |
} | |
.calendar-title { | |
font-size: 18px; | |
font-weight: 600; | |
color: var(--primary); | |
} | |
.calendar-grid { | |
display: grid; | |
grid-template-columns: repeat(7, 1fr); | |
gap: 5px; | |
} | |
.calendar-day-header { | |
text-align: center; | |
font-weight: 600; | |
padding: 10px; | |
background-color: #f9f9f9; | |
color: var(--primary); | |
} | |
.calendar-day { | |
border: 1px solid #eee; | |
padding: 10px; | |
min-height: 80px; | |
font-size: 14px; | |
} | |
.day-number { | |
font-weight: 600; | |
margin-bottom: 5px; | |
} | |
.calendar-event { | |
background-color: var(--primary-light); | |
color: white; | |
font-size: 12px; | |
padding: 3px 5px; | |
border-radius: 3px; | |
margin-bottom: 3px; | |
cursor: pointer; | |
} | |
/* Login Page */ | |
.auth-container { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
min-height: 100vh; | |
background: linear-gradient(135deg, rgba(44,110,73,0.9), rgba(76,149,108,0.9)); | |
} | |
.auth-card { | |
background-color: var(--white); | |
border-radius: var(--radius); | |
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
width: 100%; | |
max-width: 400px; | |
padding: 30px; | |
animation: fadeIn 0.5s ease; | |
} | |
.auth-header { | |
text-align: center; | |
margin-bottom: 30px; | |
} | |
.auth-title { | |
font-size: 24px; | |
font-weight: 700; | |
color: var(--primary); | |
margin-bottom: 5px; | |
} | |
.auth-subtitle { | |
color: var(--gray); | |
font-size: 14px; | |
} | |
.social-login { | |
display: flex; | |
justify-content: center; | |
gap: 15px; | |
margin-bottom: 20px; | |
} | |
.social-btn { | |
width: 40px; | |
height: 40px; | |
border-radius: 50%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
color: white; | |
cursor: pointer; | |
transition: transform 0.3s; | |
} | |
.social-btn:hover { | |
transform: translateY(-2px); | |
} | |
.social-btn.google { | |
background-color: #DB4437; | |
} | |
.social-btn.facebook { | |
background-color: #4267B2; | |
} | |
.divider { | |
display: flex; | |
align-items: center; | |
margin: 20px 0; | |
} | |
.divider-line { | |
flex-grow: 1; | |
height: 1px; | |
background-color: #eee; | |
} | |
.divider-text { | |
padding: 0 10px; | |
color: var(--gray); | |
font-size: 14px; | |
} | |
/* Error Messages */ | |
.error-message { | |
color: var(--danger); | |
font-size: 13px; | |
margin-top: 5px; | |
display: none; | |
} | |
.forgot-password { | |
text-align: right; | |
margin-bottom: 15px; | |
} | |
.forgot-password a { | |
color: var(--secondary); | |
font-size: 13px; | |
text-decoration: none; | |
} | |
.auth-footer { | |
text-align: center; | |
margin-top: 20px; | |
font-size: 14px; | |
color: var(--gray); | |
} | |
.auth-footer a { | |
color: var(--primary); | |
text-decoration: none; | |
font-weight: 500; | |
} | |
/* Modal */ | |
.modal { | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
background-color: rgba(0, 0, 0, 0.5); | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
z-index: 200; | |
opacity: 0; | |
visibility: hidden; | |
transition: all 0.3s; | |
} | |
.modal.active { | |
opacity: 1; | |
visibility: visible; | |
} | |
.modal-content { | |
background-color: var(--white); | |
border-radius: var(--radius); | |
width: 90%; | |
max-width: 600px; | |
max-height: 90vh; | |
overflow-y: auto; | |
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); | |
transform: translateY(20px); | |
transition: transform 0.3s; | |
} | |
.modal.active .modal-content { | |
transform: translateY(0); | |
} | |
.modal-header { | |
display: flex; | |
justify-content: space-between; | |
align-items: center; | |
padding: 20px; | |
border-bottom: 1px solid #eee; | |
} | |
.modal-title { | |
font-size: 18px; | |
font-weight: 600; | |
color: var(--primary); | |
} | |
.modal-close { | |
background: none; | |
border: none; | |
font-size: 20px; | |
cursor: pointer; | |
color: var(--gray); | |
} | |
.modal-body { | |
padding: 20px; | |
} | |
.modal-footer { | |
padding: 20px; | |
border-top: 1px solid #eee; | |
display: flex; | |
justify-content: flex-end; | |
gap: 10px; | |
} | |
/* Loading Spinner */ | |
.loading-spinner { | |
width: 50px; | |
height: 50px; | |
border: 5px solid #f3f3f3; | |
border-top: 5px solid var(--primary); | |
border-radius: 50%; | |
animation: spin 1s linear infinite; | |
margin: 30px auto; | |
} | |
/* Animations */ | |
@keyframes fadeIn { | |
from { opacity: 0; } | |
to { opacity: 1; } | |
} | |
@keyframes spin { | |
0% { transform: rotate(0deg); } | |
100% { transform: rotate(360deg); } | |
} | |
/* Responsive Design */ | |
@media (max-width: 992px) { | |
.dashboard { | |
grid-template-columns: 1fr; | |
} | |
.sidebar { | |
position: static; | |
} | |
} | |
@media (max-width: 768px) { | |
.navbar { | |
flex-direction: column; | |
gap: 15px; | |
} | |
.nav-links { | |
justify-content: center; | |
flex-wrap: wrap; | |
} | |
.stats-cards { | |
grid-template-columns: 1fr 1fr; | |
} | |
} | |
@media (max-width: 576px) { | |
.stats-cards { | |
grid-template-columns: 1fr; | |
} | |
.form-row { | |
grid-template-columns: 1fr; | |
} | |
.data-table { | |
display: block; | |
overflow-x: auto; | |
} | |
.modal-content { | |
width: 95%; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Loading Screen --> | |
<div id="loading" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 9999;"> | |
<div class="loading-spinner"></div> | |
</div> | |
<!-- Application Container --> | |
<div id="app"> | |
<!-- Login Page (Initial View) --> | |
<div id="login-page" class="auth-container"> | |
<div class="auth-card"> | |
<div class="auth-header"> | |
<h1 class="auth-title">Skardu ViewPoint</h1> | |
<p class="auth-subtitle">Hotel Management System</p> | |
</div> | |
<div id="login-error" class="error-message"></div> | |
<form id="login-form"> | |
<div class="form-group"> | |
<label for="login-email" class="form-label">Email Address</label> | |
<input type="email" id="login-email" class="form-control" placeholder="Enter your email" required> | |
</div> | |
<div class="form-group"> | |
<label for="login-password" class="form-label">Password</label> | |
<input type="password" id="login-password" class="form-control" placeholder="Enter your password" required> | |
</div> | |
<div class="forgot-password"> | |
<a href="#" id="forgot-password-link">Forgot password?</a> | |
</div> | |
<button type="submit" class="btn btn-primary" style="width: 100%;">Login</button> | |
</form> | |
<div class="divider"> | |
<div class="divider-line"></div> | |
<div class="divider-text">OR</div> | |
<div class="divider-line"></div> | |
</div> | |
<div class="social-login"> | |
<div class="social-btn google"> | |
<i class="fab fa-google"></i> | |
</div> | |
<div class="social-btn facebook"> | |
<i class="fab fa-facebook-f"></i> | |
</div> | |
</div> | |
<div class="auth-footer"> | |
Don't have an account? <a href="#" id="register-link">Sign up</a> | |
</div> | |
</div> | |
</div> | |
<!-- Main Application (Hidden Initially) --> | |
<div id="app-container" style="display: none;"> | |
<!-- Header --> | |
<header> | |
<div class="container"> | |
<nav class="navbar"> | |
<div class="logo">Skardu<span>ViewPoint</span></div> | |
<div class="nav-links"> | |
<a href="#" class="active" data-section="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a> | |
<a href="#" data-section="bookings"><i class="fas fa-calendar-check"></i> Bookings</a> | |
<a href="#" data-section="rooms"><i class="fas fa-bed"></i> Rooms</a> | |
<a href="#" data-section="guests" class="staff-only"><i class="fas fa-users"></i> Guests</a> | |
<a href="#" data-section="reports" class="admin-only"><i class="fas fa-chart-line"></i> Reports</a> | |
</div> | |
<div class="user-menu"> | |
<div class="notification-bell"> | |
<i class="fas fa-bell"></i> | |
<div class="badge">3</div> | |
</div> | |
<div class="avatar" id="user-avatar">AD</div> | |
</div> | |
</nav> | |
</div> | |
</header> | |
<!-- Main Content --> | |
<main> | |
<div class="container"> | |
<div class="dashboard"> | |
<!-- Sidebar --> | |
<div class="sidebar"> | |
<h3 class="sidebar-title" id="sidebar-title">Dashboard</h3> | |
<ul class="sidebar-menu" id="dashboard-menu"> | |
<!-- Menu items will be loaded dynamically based on user role --> | |
</ul> | |
</div> | |
<!-- Dashboard Content --> | |
<div class="dashboard-content" id="dashboard-content"> | |
<!-- Dashboard Overview --> | |
<div id="dashboard-overview"> | |
<div class="dashboard-header"> | |
<h2 id="greeting-text">Welcome back, Admin</h2> | |
<button class="btn btn-secondary" id="quick-booking-btn"> | |
<i class="fas fa-plus"></i> New Booking | |
</button> | |
</div> | |
<!-- Stats Cards --> | |
<div class="stats-cards"> | |
<div class="stat-card"> | |
<div class="stat-card-title">Current Occupancy</div> | |
<div class="stat-card-value">78%</div> | |
<div class="stat-card-change up"> | |
<i class="fas fa-arrow-up"></i> 5% from last week | |
</div> | |
</div> | |
<div class="stat-card success"> | |
<div class="stat-card-title">Available Rooms</div> | |
<div class="stat-card-value">24</div> | |
<div class="stat-card-change down"> | |
<i class="fas fa-arrow-down"></i> 8 from yesterday | |
</div> | |
</div> | |
<div class="stat-card warning"> | |
<div class="stat-card-title">Today's Check-ins</div> | |
<div class="stat-card-value">12</div> | |
<div class="stat-card-change up"> | |
<i class="fas fa-arrow-up"></i> 3 from estimated | |
</div> | |
</div> | |
<div class="stat-card danger"> | |
<div class="stat-card-title">Pending Payments</div> | |
<div class="stat-card-value">5</div> | |
<div class="stat-card-change down"> | |
<i class="fas fa-arrow-down"></i> 2 resolved today | |
</div> | |
</div> | |
</div> | |
<!-- Recent Bookings --> | |
<div class="dashboard-header"> | |
<h3>Recent Bookings</h3> | |
<a href="#" class="btn btn-outline" data-section="bookings">View All</a> | |
</div> | |
<table class="data-table"> | |
<thead> | |
<tr> | |
<th>Booking ID</th> | |
<th>Guest</th> | |
<th>Room</th> | |
<th>Check-in</th> | |
<th>Check-out</th> | |
<th>Status</th> | |
<th>Actions</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>#BK-2023-001</td> | |
<td>John Smith</td> | |
<td>Deluxe Room (202)</td> | |
<td>15 Jul 2023</td> | |
<td>18 Jul 2023</td> | |
<td><span class="status available">Confirmed</span></td> | |
<td> | |
<div class="table-actions"> | |
<button class="btn btn-outline btn-sm" title="View"> | |
<i class="fas fa-eye"></i> | |
</button> | |
</div> | |
</td> | |
</tr> | |
<!-- More rows would be added dynamically --> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
</div> | |
</main> | |
</div> | |
</div> | |
<!-- JavaScript --> | |
<script> | |
// Simulate loading | |
setTimeout(() => { | |
document.getElementById('loading').style.display = 'none'; | |
}, 1000); | |
// Form handling | |
const loginForm = document.getElementById('login-form'); | |
const loginError = document.getElementById('login-error'); | |
if (loginForm) { | |
loginForm.addEventListener('submit', function(e) { | |
e.preventDefault(); | |
const email = document.getElementById('login-email').value; | |
const password = document.getElementById('login-password').value; | |
// Very basic validation | |
if (!email || !password) { | |
loginError.textContent = 'Please fill in all fields'; | |
loginError.style.display = 'block'; | |
return; | |
} | |
// Simulate successful login | |
loginError.style.display = 'none'; | |
// Hide login page, show app | |
document.getElementById('login-page').style.display = 'none'; | |
document.getElementById('app-container').style.display = 'block'; | |
// Update greeting text based on time of day | |
const hour = new Date().getHours(); | |
const greeting = hour < 12 ? 'Good morning' : | |
hour < 18 ? 'Good afternoon' : 'Good evening'; | |
document.getElementById('greeting-text').textContent = `${greeting}, Admin`; | |
// Simulate loading dashboard content | |
const loadingSpinner = document.createElement('div'); | |
loadingSpinner.className = 'loading-spinner'; | |
document.getElementById('dashboard-content').appendChild(loadingSpinner); | |
setTimeout(() => { | |
document.getElementById('dashboard-content').innerHTML = document.getElementById('dashboard-overview').outerHTML; | |
}, 1000); | |
}); | |
} | |
// Navigation switching | |
const navLinks = document.querySelectorAll('.nav-links a'); | |
if (navLinks) { | |
navLinks.forEach(link => { | |
link.addEventListener('click', function(e) { | |
e.preventDefault(); | |
// Remove active class from all links | |
navLinks.forEach(lnk => lnk.classList.remove('active')); | |
// Add active class to clicked link | |
this.classList.add('active'); | |
// Get the section to show | |
const section = this.getAttribute('data-section'); | |
// Simulate loading section | |
const dashboardContent = document.getElementById('dashboard-content'); | |
const loadingSpinner = document.createElement('div'); | |
loadingSpinner.className = 'loading-spinner'; | |
dashboardContent.innerHTML = ''; | |
dashboardContent.appendChild(loadingSpinner); | |
setTimeout(() => { | |
// This would be replaced with actual content loading | |
dashboardContent.innerHTML = ` | |
<div class="dashboard-header"> | |
<h2>${this.textContent}</h2> | |
<button class="btn btn-primary"> | |
<i class="fas fa-plus"></i> Add New | |
</button> | |
</div> | |
<div style="background-color: #f9f9f9; border-radius: 8px; padding: 40px; text-align: center;"> | |
<i class="fas fa-wrench" style="font-size: 50px; color: var(--primary-light); margin-bottom: 20px;"></i> | |
<h3>${this.textContent} Section</h3> | |
<p>This section will contain all ${this.textContent.toLowerCase()} management functionality</p> | |
</div> | |
`; | |
}, 800); | |
}); | |
}); | |
} | |
// Quick booking button | |
const quickBookingBtn = document.getElementById('quick-booking-btn'); | |
if (quickBookingBtn) { | |
quickBookingBtn.addEventListener('click', function(e) { | |
e.preventDefault(); | |
alert('Quick booking modal would open here.'); | |
}); | |
} | |
// Register link | |
const registerLink = document.getElementById('register-link'); | |
if (registerLink) { | |
registerLink.addEventListener('click', function(e) { | |
e.preventDefault(); | |
alert('Registration form would appear here.'); | |
}); | |
} | |
// Forgot password link | |
const forgotPasswordLink = document.getElementById('forgot-password-link'); | |
if (forgotPasswordLink) { | |
forgotPasswordLink.addEventListener('click', function(e) { | |
e.preventDefault(); | |
alert('Password reset form would appear here.'); | |
}); | |
} | |
</script> | |
</body> | |
</html> |