315 lines
13 KiB
PHP
315 lines
13 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hospitality Group CRM - Login</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.login-container {
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
max-width: 900px;
|
|
width: 100%;
|
|
}
|
|
|
|
.login-left {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 3rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.login-right {
|
|
padding: 3rem;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
opacity: 0.9;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.venue-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 10px;
|
|
padding: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.venue-card:hover,
|
|
.venue-card.selected {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.venue-card i {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 10px;
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.dropdown-item {
|
|
padding: 0.75rem 1rem;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.dropdown-item:hover {
|
|
background: rgba(102, 126, 234, 0.1);
|
|
color: #667eea;
|
|
}
|
|
|
|
.venue-option.selected {
|
|
background: rgba(102, 126, 234, 0.2);
|
|
color: #667eea;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-outline-light {
|
|
border-color: rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
}
|
|
|
|
.btn-outline-light:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
color: white;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
|
}
|
|
|
|
.btn-login {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border: none;
|
|
padding: 0.75rem 2rem;
|
|
border-radius: 25px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-login:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.demo-credentials {
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.demo-credentials h6 {
|
|
color: #495057;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.demo-credentials small {
|
|
color: #6c757d;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-10">
|
|
<div class="login-container">
|
|
<div class="row g-0">
|
|
<!-- Left Panel -->
|
|
<div class="col-lg-5 login-left">
|
|
<div>
|
|
<div class="logo">
|
|
<i class="fas fa-hotel"></i> Hospitality Group
|
|
</div>
|
|
<div class="subtitle">
|
|
CRM & Loyalty Hub
|
|
</div>
|
|
<p class="mb-4">
|
|
Manage guest experiences across Seven Hotel, City Center Hotel, and Coral Bay Resort with our comprehensive loyalty platform.
|
|
</p>
|
|
|
|
<h6 class="mb-3">Select Your Venue</h6>
|
|
<div class="dropdown">
|
|
<button class="btn btn-outline-light dropdown-toggle w-100 text-start d-flex align-items-center" type="button" id="venueDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="fas fa-hotel me-2"></i>
|
|
<span id="selectedVenueText">Seven Hotel</span>
|
|
</button>
|
|
<ul class="dropdown-menu w-100" aria-labelledby="venueDropdown">
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option selected" href="#" data-venue="seven">
|
|
<i class="fas fa-hotel me-2"></i> Seven Hotel
|
|
</a></li>
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="city_center">
|
|
<i class="fas fa-building me-2"></i> City Center Hotel
|
|
</a></li>
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="coral_bay">
|
|
<i class="fas fa-umbrella-beach me-2"></i> Coral Bay Resort
|
|
</a></li>
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="la_taverna">
|
|
<i class="fas fa-utensils me-2"></i> La Taverna
|
|
</a></li>
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="rayes">
|
|
<i class="fas fa-moon me-2"></i> Rayes
|
|
</a></li>
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="taiga_sky">
|
|
<i class="fas fa-glass-martini-alt me-2"></i> Taiga Sky
|
|
</a></li>
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="trabouche">
|
|
<i class="fas fa-water me-2"></i> Trabouche
|
|
</a></li>
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="coral_bay_beach">
|
|
<i class="fas fa-sun me-2"></i> Coral Bay Beach
|
|
</a></li>
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="coral_bay_pool">
|
|
<i class="fas fa-swimming-pool me-2"></i> Coral Bay Pool
|
|
</a></li>
|
|
<li><a class="dropdown-item d-flex align-items-center venue-option" href="#" data-venue="jetskis">
|
|
<i class="fas fa-ship me-2"></i> Jetskis
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel -->
|
|
<div class="col-lg-7 login-right">
|
|
<h3 class="mb-4">Welcome Back</h3>
|
|
<p class="text-muted mb-4">Sign in to access your CRM dashboard</p>
|
|
|
|
<form id="loginForm">
|
|
<div class="mb-3">
|
|
<label for="username" class="form-label">Username</label>
|
|
<input type="text" class="form-control" id="username" name="username" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="password" class="form-label">Password</label>
|
|
<input type="password" class="form-control" id="password" name="password" required>
|
|
</div>
|
|
|
|
<div class="mb-3 form-check">
|
|
<input type="checkbox" class="form-check-input" id="remember">
|
|
<label class="form-check-label" for="remember">Remember me</label>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary btn-login w-100 mb-3" id="loginBtn">
|
|
<i class="fas fa-sign-in-alt"></i> Sign In
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Demo Credentials -->
|
|
<div class="demo-credentials">
|
|
<h6><i class="fas fa-info-circle"></i> Demo Credentials</h6>
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<small><strong>Reception:</strong><br>reception / password</small>
|
|
</div>
|
|
<div class="col-6">
|
|
<small><strong>Admin:</strong><br>admin / password</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
// Venue selection
|
|
document.querySelectorAll('.venue-card').forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
document.querySelectorAll('.venue-card').forEach(c => c.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
});
|
|
});
|
|
|
|
// Login form submission
|
|
document.getElementById('loginForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
const selectedVenue = document.querySelector('.venue-card.selected').dataset.venue;
|
|
|
|
// Show loading state
|
|
const loginBtn = document.getElementById('loginBtn');
|
|
const originalText = loginBtn.innerHTML;
|
|
loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Signing in...';
|
|
loginBtn.disabled = true;
|
|
|
|
// Simulate login (in real app, this would be an API call)
|
|
setTimeout(() => {
|
|
// Simple demo validation
|
|
if ((username === 'reception' && password === 'password') ||
|
|
(username === 'admin' && password === 'password')) {
|
|
|
|
// Store user session (in real app, this would be JWT token)
|
|
localStorage.setItem('user', JSON.stringify({
|
|
username: username,
|
|
role: username === 'admin' ? 'admin' : 'reception',
|
|
venue: selectedVenue
|
|
}));
|
|
|
|
// Redirect to dashboard
|
|
window.location.href = '/dashboard';
|
|
} else {
|
|
alert('Invalid credentials. Use demo credentials shown below.');
|
|
loginBtn.innerHTML = originalText;
|
|
loginBtn.disabled = false;
|
|
}
|
|
}, 1000);
|
|
});
|
|
|
|
// Auto-fill demo credentials on click
|
|
document.querySelectorAll('.demo-credentials small').forEach(el => {
|
|
el.style.cursor = 'pointer';
|
|
el.addEventListener('click', function() {
|
|
const text = this.textContent;
|
|
if (text.includes('reception')) {
|
|
document.getElementById('username').value = 'reception';
|
|
document.getElementById('password').value = 'password';
|
|
} else if (text.includes('admin')) {
|
|
document.getElementById('username').value = 'admin';
|
|
document.getElementById('password').value = 'password';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|