479 lines
17 KiB
HTML
479 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>HarborSmith Portal - Login</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;700;900&display=swap" rel="stylesheet">
|
||
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
||
|
|
<link rel="stylesheet" href="css/voyage-layout.css">
|
||
|
|
<link rel="stylesheet" href="css/themes.css">
|
||
|
|
<link rel="stylesheet" href="css/portal-styles.css">
|
||
|
|
<style>
|
||
|
|
/* Enhanced Login Page Styles */
|
||
|
|
.login-container {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-right {
|
||
|
|
background: #f8fafc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-form-container {
|
||
|
|
background: white;
|
||
|
|
padding: 2.5rem;
|
||
|
|
border-radius: 20px;
|
||
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Enhanced Form Fields */
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 0.75rem;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #1f2937;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
letter-spacing: 0.025em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0.875rem 1rem;
|
||
|
|
font-size: 1rem;
|
||
|
|
border: 2px solid #e5e7eb;
|
||
|
|
border-radius: 12px;
|
||
|
|
background: #f9fafb;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: #6366f1;
|
||
|
|
background: white;
|
||
|
|
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-input::placeholder {
|
||
|
|
color: #9ca3af;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Enhanced Primary Button */
|
||
|
|
.btn-portal-primary {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
color: white;
|
||
|
|
padding: 1rem 2rem;
|
||
|
|
border: none;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-size: 1rem;
|
||
|
|
font-weight: 600;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 0.75rem;
|
||
|
|
width: 100%;
|
||
|
|
margin-top: 0.5rem;
|
||
|
|
box-shadow: 0 4px 6px rgba(99, 102, 241, 0.25);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-portal-primary:hover {
|
||
|
|
transform: translateY(-3px);
|
||
|
|
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-portal-primary:active {
|
||
|
|
transform: translateY(-1px);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Enhanced Role Selector */
|
||
|
|
.role-selector {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
padding: 0.5rem;
|
||
|
|
background: #f3f4f6;
|
||
|
|
border-radius: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.role-option {
|
||
|
|
flex: 1;
|
||
|
|
padding: 1rem;
|
||
|
|
border-radius: 12px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #6b7280;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.role-option:hover {
|
||
|
|
background: white;
|
||
|
|
color: #4b5563;
|
||
|
|
}
|
||
|
|
|
||
|
|
.role-option.active {
|
||
|
|
background: white;
|
||
|
|
color: #6366f1;
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Enhanced OAuth Buttons */
|
||
|
|
.oauth-btn {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 0.75rem;
|
||
|
|
padding: 0.875rem 1.5rem;
|
||
|
|
background: white;
|
||
|
|
border: 2px solid #e5e7eb;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #374151;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
cursor: pointer;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.oauth-btn:hover {
|
||
|
|
background: #f9fafb;
|
||
|
|
border-color: #6366f1;
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
.oauth-buttons {
|
||
|
|
display: flex;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Enhanced Checkbox */
|
||
|
|
input[type="checkbox"] {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
border: 2px solid #e5e7eb;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="checkbox"]:checked {
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
border-color: #6366f1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Enhanced Links */
|
||
|
|
a {
|
||
|
|
color: #6366f1;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
a:hover {
|
||
|
|
color: #764ba2;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Divider Enhancement */
|
||
|
|
.divider {
|
||
|
|
text-align: center;
|
||
|
|
margin: 2rem 0;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 1px;
|
||
|
|
background: #e5e7eb;
|
||
|
|
}
|
||
|
|
|
||
|
|
.divider span {
|
||
|
|
background: white;
|
||
|
|
padding: 0 1rem;
|
||
|
|
position: relative;
|
||
|
|
color: #9ca3af;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Demo Credentials Box Enhancement */
|
||
|
|
.demo-box {
|
||
|
|
margin-top: 2rem;
|
||
|
|
padding: 1.25rem;
|
||
|
|
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||
|
|
border-radius: 12px;
|
||
|
|
border-left: 4px solid #f59e0b;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Password Input with Toggle */
|
||
|
|
.password-wrapper {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.password-toggle {
|
||
|
|
position: absolute;
|
||
|
|
right: 1rem;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
cursor: pointer;
|
||
|
|
color: #9ca3af;
|
||
|
|
transition: color 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.password-toggle:hover {
|
||
|
|
color: #6366f1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Loading State */
|
||
|
|
.btn-portal-primary.loading {
|
||
|
|
pointer-events: none;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-portal-primary.loading::after {
|
||
|
|
content: '';
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
border: 2px solid white;
|
||
|
|
border-top-color: transparent;
|
||
|
|
border-radius: 50%;
|
||
|
|
animation: spin 0.8s linear infinite;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin {
|
||
|
|
to { transform: rotate(360deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Form animations */
|
||
|
|
.form-group {
|
||
|
|
animation: slideUp 0.5s ease forwards;
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-group:nth-child(1) { animation-delay: 0.1s; }
|
||
|
|
.form-group:nth-child(2) { animation-delay: 0.2s; }
|
||
|
|
.form-group:nth-child(3) { animation-delay: 0.3s; }
|
||
|
|
|
||
|
|
@keyframes slideUp {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(20px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="login-container">
|
||
|
|
<!-- Left Side - Video/Brand -->
|
||
|
|
<div class="login-left">
|
||
|
|
<video autoplay loop muted playsinline class="login-video">
|
||
|
|
<source src="https://videos.pexels.com/video-files/3571264/3571264-uhd_2560_1440_30fps.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
<div class="login-overlay">
|
||
|
|
<div class="login-brand">
|
||
|
|
<img src="logo.jpg" alt="HarborSmith">
|
||
|
|
<h1>HarborSmith</h1>
|
||
|
|
<p class="login-tagline">Your trusted partner in yacht services</p>
|
||
|
|
</div>
|
||
|
|
<div class="login-features">
|
||
|
|
<div class="feature-item" style="color: white; margin-bottom: 1rem;">
|
||
|
|
<i data-lucide="shield-check" style="display: inline; width: 20px; height: 20px; margin-right: 0.5rem;"></i>
|
||
|
|
Secure & Protected
|
||
|
|
</div>
|
||
|
|
<div class="feature-item" style="color: white; margin-bottom: 1rem;">
|
||
|
|
<i data-lucide="clock" style="display: inline; width: 20px; height: 20px; margin-right: 0.5rem;"></i>
|
||
|
|
24/7 Access to Your Account
|
||
|
|
</div>
|
||
|
|
<div class="feature-item" style="color: white;">
|
||
|
|
<i data-lucide="users" style="display: inline; width: 20px; height: 20px; margin-right: 0.5rem;"></i>
|
||
|
|
Personalized Dashboard
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Right Side - Login Form -->
|
||
|
|
<div class="login-right">
|
||
|
|
<div class="login-form-container">
|
||
|
|
<div class="login-form-header">
|
||
|
|
<h2 class="login-form-title">Welcome Back</h2>
|
||
|
|
<p class="login-form-subtitle">Sign in to your HarborSmith account</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Role Selector -->
|
||
|
|
<div class="role-selector">
|
||
|
|
<div class="role-option active" onclick="selectRole(this, 'maintenance')">
|
||
|
|
<i data-lucide="wrench"></i>
|
||
|
|
<span>Maintenance</span>
|
||
|
|
</div>
|
||
|
|
<div class="role-option" onclick="selectRole(this, 'charter')">
|
||
|
|
<i data-lucide="sailboat"></i>
|
||
|
|
<span>Charter</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Login Form -->
|
||
|
|
<form id="loginForm" onsubmit="handleLogin(event)">
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label" for="email">Email Address</label>
|
||
|
|
<input type="email" id="email" class="form-input" placeholder="your@email.com" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label class="form-label" for="password">Password</label>
|
||
|
|
<div class="password-wrapper">
|
||
|
|
<input type="password" id="password" class="form-input" placeholder="Enter your password" required>
|
||
|
|
<span class="password-toggle" onclick="togglePassword()">
|
||
|
|
<i data-lucide="eye" id="toggleIcon"></i>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
|
||
|
|
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||
|
|
<input type="checkbox" id="remember" style="width: 18px; height: 18px;">
|
||
|
|
<span style="color: var(--text-light);">Remember me</span>
|
||
|
|
</label>
|
||
|
|
<a href="#" style="color: var(--warm-orange); text-decoration: none; font-weight: 500;">Forgot password?</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" class="btn-portal-primary" style="width: 100%; justify-content: center;">
|
||
|
|
<i data-lucide="log-in"></i>
|
||
|
|
Sign In
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
<div class="divider">
|
||
|
|
<span>or continue with</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- OAuth Options -->
|
||
|
|
<div class="oauth-buttons">
|
||
|
|
<button class="oauth-btn" onclick="oauthLogin('google')">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24">
|
||
|
|
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
|
||
|
|
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
|
||
|
|
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
|
||
|
|
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
|
||
|
|
</svg>
|
||
|
|
Sign in with Google
|
||
|
|
</button>
|
||
|
|
<button class="oauth-btn" onclick="oauthLogin('apple')">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M17.05 20.28c-.98.95-2.05.88-3.08.36-1.09-.55-2.08-.56-3.24 0-1.44.68-2.2.53-3.06-.36C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.75 1.18-.24 2.31-.91 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.13zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.53-3.74 4.25z"/>
|
||
|
|
</svg>
|
||
|
|
Sign in with Apple
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="text-align: center; margin-top: 2rem;">
|
||
|
|
<p style="color: var(--text-light);">
|
||
|
|
Don't have an account?
|
||
|
|
<a href="#" style="color: var(--warm-orange); text-decoration: none; font-weight: 500;">Contact Sales</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Demo Credentials Notice -->
|
||
|
|
<div class="demo-box">
|
||
|
|
<p style="font-size: 0.875rem; color: #92400e; margin-bottom: 0.5rem;">
|
||
|
|
<strong>Demo Credentials:</strong>
|
||
|
|
</p>
|
||
|
|
<p style="font-size: 0.875rem; color: #78350f; margin-bottom: 0.25rem;">
|
||
|
|
Maintenance: maintenance@demo.com / demo123
|
||
|
|
</p>
|
||
|
|
<p style="font-size: 0.875rem; color: #78350f;">
|
||
|
|
Charter: charter@demo.com / demo123
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Initialize Lucide icons
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
lucide.createIcons();
|
||
|
|
});
|
||
|
|
|
||
|
|
// Role selection
|
||
|
|
function selectRole(element, role) {
|
||
|
|
document.querySelectorAll('.role-option').forEach(opt => {
|
||
|
|
opt.classList.remove('active');
|
||
|
|
});
|
||
|
|
element.classList.add('active');
|
||
|
|
|
||
|
|
// Store selected role
|
||
|
|
localStorage.setItem('userRole', role);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handle login
|
||
|
|
function handleLogin(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
|
||
|
|
const email = document.getElementById('email').value;
|
||
|
|
const password = document.getElementById('password').value;
|
||
|
|
const role = localStorage.getItem('userRole') || 'maintenance';
|
||
|
|
|
||
|
|
// Demo authentication
|
||
|
|
if ((email === 'maintenance@demo.com' && password === 'demo123' && role === 'maintenance') ||
|
||
|
|
(email === 'charter@demo.com' && password === 'demo123' && role === 'charter')) {
|
||
|
|
|
||
|
|
// Store user session
|
||
|
|
localStorage.setItem('isLoggedIn', 'true');
|
||
|
|
localStorage.setItem('userEmail', email);
|
||
|
|
localStorage.setItem('userName', role === 'maintenance' ? 'John Smith' : 'Sarah Johnson');
|
||
|
|
|
||
|
|
// Redirect to appropriate dashboard
|
||
|
|
if (role === 'maintenance') {
|
||
|
|
window.location.href = 'maintenance/maintenance-dashboard.html';
|
||
|
|
} else {
|
||
|
|
window.location.href = 'charter/charter-dashboard.html';
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
alert('Invalid credentials. Please use the demo credentials provided.');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// OAuth login handler
|
||
|
|
function oauthLogin(provider) {
|
||
|
|
alert(`OAuth login with ${provider} would be implemented here in production.`);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Password visibility toggle
|
||
|
|
function togglePassword() {
|
||
|
|
const passwordInput = document.getElementById('password');
|
||
|
|
const toggleIcon = document.getElementById('toggleIcon');
|
||
|
|
|
||
|
|
if (passwordInput.type === 'password') {
|
||
|
|
passwordInput.type = 'text';
|
||
|
|
toggleIcon.setAttribute('data-lucide', 'eye-off');
|
||
|
|
} else {
|
||
|
|
passwordInput.type = 'password';
|
||
|
|
toggleIcon.setAttribute('data-lucide', 'eye');
|
||
|
|
}
|
||
|
|
lucide.createIcons();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|