507 lines
22 KiB
HTML
507 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Schedule Service - HarborSmith Portal</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">
|
|
<link rel="stylesheet" href="../css/maintenance-enhanced.css">
|
|
<style>
|
|
.schedule-container {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.calendar-widget {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.calendar-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.calendar-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.calendar-day {
|
|
aspect-ratio: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
background: #f9fafb;
|
|
}
|
|
|
|
.calendar-day:hover {
|
|
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.calendar-day.available {
|
|
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
|
|
}
|
|
|
|
.calendar-day.selected {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.time-slots {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.time-slot {
|
|
padding: 1rem;
|
|
border-radius: 12px;
|
|
background: #f3f4f6;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.time-slot:hover {
|
|
background: white;
|
|
border-color: #667eea;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.time-slot.selected {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.service-type-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.service-type-card {
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
background: white;
|
|
border: 2px solid #e5e7eb;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-align: center;
|
|
}
|
|
|
|
.service-type-card:hover {
|
|
border-color: #667eea;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
|
|
}
|
|
|
|
.service-type-card.selected {
|
|
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
|
border-color: #667eea;
|
|
}
|
|
|
|
.booking-summary {
|
|
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
border-left: 4px solid #667eea;
|
|
}
|
|
|
|
.summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.75rem 0;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.summary-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.schedule-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="portal">
|
|
<div class="portal-wrapper">
|
|
<!-- Sidebar -->
|
|
<aside class="portal-sidebar" id="sidebar">
|
|
<div class="sidebar-header">
|
|
<a href="maintenance-dashboard.html" class="sidebar-logo">
|
|
<img src="../logo.jpg" alt="HarborSmith">
|
|
<span>HarborSmith</span>
|
|
</a>
|
|
<button class="sidebar-toggle" onclick="toggleSidebar()">
|
|
<i data-lucide="menu"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<nav class="sidebar-nav">
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-title">Main</div>
|
|
<a href="maintenance-dashboard.html" class="sidebar-link">
|
|
<i data-lucide="layout-dashboard"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<a href="maintenance-vessels.html" class="sidebar-link">
|
|
<i data-lucide="ship"></i>
|
|
<span>My Vessels</span>
|
|
</a>
|
|
<a href="maintenance-schedule.html" class="sidebar-link active">
|
|
<i data-lucide="calendar"></i>
|
|
<span>Schedule Service</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-title">Records</div>
|
|
<a href="maintenance-documents.html" class="sidebar-link">
|
|
<i data-lucide="file-text"></i>
|
|
<span>Documents</span>
|
|
</a>
|
|
<a href="maintenance-reports.html" class="sidebar-link">
|
|
<i data-lucide="clipboard-list"></i>
|
|
<span>Service Reports</span>
|
|
</a>
|
|
<a href="maintenance-invoices.html" class="sidebar-link">
|
|
<i data-lucide="receipt"></i>
|
|
<span>Invoices</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-section-title">Account</div>
|
|
<a href="#" class="sidebar-link">
|
|
<i data-lucide="settings"></i>
|
|
<span>Settings</span>
|
|
</a>
|
|
<a href="../portal-login.html" class="sidebar-link" onclick="logout()">
|
|
<i data-lucide="log-out"></i>
|
|
<span>Logout</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="portal-main">
|
|
<!-- Header -->
|
|
<header class="portal-header">
|
|
<div class="portal-breadcrumb">
|
|
<span>Maintenance Portal</span>
|
|
<span class="breadcrumb-separator">/</span>
|
|
<span>Schedule Service</span>
|
|
</div>
|
|
|
|
<div class="portal-header-actions">
|
|
<div class="header-search">
|
|
<i data-lucide="search"></i>
|
|
<input type="text" placeholder="Search...">
|
|
</div>
|
|
|
|
<button class="header-notifications" style="background: none; border: none; cursor: pointer; position: relative;">
|
|
<i data-lucide="bell"></i>
|
|
<span class="notification-badge">3</span>
|
|
</button>
|
|
|
|
<div class="header-user">
|
|
<div class="user-avatar">JS</div>
|
|
<div>
|
|
<div style="font-weight: 600;">John Smith</div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Maintenance Client</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Page Content -->
|
|
<div class="portal-content">
|
|
<div class="page-header">
|
|
<h1>Schedule Service</h1>
|
|
<p>Book maintenance services for your vessels</p>
|
|
</div>
|
|
|
|
<!-- Step 1: Select Vessel and Service -->
|
|
<div class="dashboard-card fade-in" style="margin-bottom: 2rem;">
|
|
<h3 style="margin-bottom: 1.5rem;">
|
|
<i data-lucide="ship" style="width: 20px; height: 20px; display: inline; margin-right: 0.5rem;"></i>
|
|
Select Vessel & Service Type
|
|
</h3>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;">
|
|
<div class="form-group">
|
|
<label class="form-label">Select Vessel</label>
|
|
<select class="form-select">
|
|
<option>Sea Breeze - 2019 Beneteau 45</option>
|
|
<option>Wave Runner - 2021 Sea Ray 350</option>
|
|
<option>Ocean Spirit - 2020 Catalina 425</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Priority Level</label>
|
|
<select class="form-select">
|
|
<option>Routine (Within 2 weeks)</option>
|
|
<option>Urgent (Within 3 days)</option>
|
|
<option>Emergency (Within 24 hours)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 style="margin-bottom: 1rem;">Service Type</h4>
|
|
<div class="service-type-grid">
|
|
<div class="service-type-card selected">
|
|
<i data-lucide="wrench" style="width: 32px; height: 32px; margin-bottom: 0.5rem;"></i>
|
|
<h5>Annual Maintenance</h5>
|
|
<p style="font-size: 0.875rem; color: var(--text-light);">Complete inspection</p>
|
|
</div>
|
|
<div class="service-type-card">
|
|
<i data-lucide="zap" style="width: 32px; height: 32px; margin-bottom: 0.5rem;"></i>
|
|
<h5>Engine Service</h5>
|
|
<p style="font-size: 0.875rem; color: var(--text-light);">Engine maintenance</p>
|
|
</div>
|
|
<div class="service-type-card">
|
|
<i data-lucide="droplet" style="width: 32px; height: 32px; margin-bottom: 0.5rem;"></i>
|
|
<h5>Hull Cleaning</h5>
|
|
<p style="font-size: 0.875rem; color: var(--text-light);">Bottom cleaning</p>
|
|
</div>
|
|
<div class="service-type-card">
|
|
<i data-lucide="cpu" style="width: 32px; height: 32px; margin-bottom: 0.5rem;"></i>
|
|
<h5>Electronics</h5>
|
|
<p style="font-size: 0.875rem; color: var(--text-light);">System check</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Select Date and Time -->
|
|
<div class="schedule-container">
|
|
<div class="calendar-widget">
|
|
<div class="calendar-header">
|
|
<h3>Select Date</h3>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
<button class="btn btn-sm" style="padding: 0.5rem;">
|
|
<i data-lucide="chevron-left"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-primary">Today</button>
|
|
<button class="btn btn-sm" style="padding: 0.5rem;">
|
|
<i data-lucide="chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 style="text-align: center; margin-bottom: 1rem;">December 2024</h4>
|
|
|
|
<div class="calendar-grid">
|
|
<div style="text-align: center; font-weight: 600; font-size: 0.875rem;">Sun</div>
|
|
<div style="text-align: center; font-weight: 600; font-size: 0.875rem;">Mon</div>
|
|
<div style="text-align: center; font-weight: 600; font-size: 0.875rem;">Tue</div>
|
|
<div style="text-align: center; font-weight: 600; font-size: 0.875rem;">Wed</div>
|
|
<div style="text-align: center; font-weight: 600; font-size: 0.875rem;">Thu</div>
|
|
<div style="text-align: center; font-weight: 600; font-size: 0.875rem;">Fri</div>
|
|
<div style="text-align: center; font-weight: 600; font-size: 0.875rem;">Sat</div>
|
|
|
|
<div class="calendar-day">1</div>
|
|
<div class="calendar-day available">2</div>
|
|
<div class="calendar-day">3</div>
|
|
<div class="calendar-day">4</div>
|
|
<div class="calendar-day available">5</div>
|
|
<div class="calendar-day available">6</div>
|
|
<div class="calendar-day">7</div>
|
|
<div class="calendar-day">8</div>
|
|
<div class="calendar-day available selected">9</div>
|
|
<div class="calendar-day">10</div>
|
|
<div class="calendar-day">11</div>
|
|
<div class="calendar-day available">12</div>
|
|
<div class="calendar-day available">13</div>
|
|
<div class="calendar-day">14</div>
|
|
<div class="calendar-day">15</div>
|
|
<div class="calendar-day available">16</div>
|
|
<div class="calendar-day">17</div>
|
|
<div class="calendar-day">18</div>
|
|
<div class="calendar-day available">19</div>
|
|
<div class="calendar-day available">20</div>
|
|
<div class="calendar-day">21</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calendar-widget">
|
|
<h3 style="margin-bottom: 1.5rem;">Available Time Slots - Dec 9</h3>
|
|
<div class="time-slots">
|
|
<div class="time-slot">8:00 AM</div>
|
|
<div class="time-slot selected">10:00 AM</div>
|
|
<div class="time-slot">12:00 PM</div>
|
|
<div class="time-slot" style="opacity: 0.5; cursor: not-allowed;">2:00 PM</div>
|
|
<div class="time-slot">4:00 PM</div>
|
|
<div class="time-slot">6:00 PM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Additional Details -->
|
|
<div class="dashboard-card" style="margin-bottom: 2rem;">
|
|
<h3 style="margin-bottom: 1.5rem;">
|
|
<i data-lucide="user" style="width: 20px; height: 20px; display: inline; margin-right: 0.5rem;"></i>
|
|
Technician Preference
|
|
</h3>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
|
|
<div class="service-type-card">
|
|
<div style="font-weight: 600;">Any Available</div>
|
|
<p style="font-size: 0.875rem; color: var(--text-light);">First available tech</p>
|
|
</div>
|
|
<div class="service-type-card selected">
|
|
<div style="font-weight: 600;">Mike Johnson</div>
|
|
<div style="color: #fbbf24;">★★★★★</div>
|
|
<p style="font-size: 0.875rem; color: var(--text-light);">Your regular technician</p>
|
|
</div>
|
|
<div class="service-type-card">
|
|
<div style="font-weight: 600;">Sarah Williams</div>
|
|
<div style="color: #fbbf24;">★★★★★</div>
|
|
<p style="font-size: 0.875rem; color: var(--text-light);">Engine specialist</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-top: 2rem;">
|
|
<label class="form-label">Special Instructions</label>
|
|
<textarea class="form-textarea" rows="4" placeholder="Any special instructions or concerns..."></textarea>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 2rem; margin-top: 1rem;">
|
|
<label style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<input type="checkbox" checked> Send SMS reminders
|
|
</label>
|
|
<label style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<input type="checkbox" checked> Send email confirmation
|
|
</label>
|
|
<label style="display: flex; align-items: center; gap: 0.5rem;">
|
|
<input type="checkbox"> Add to my calendar
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Booking Summary -->
|
|
<div class="dashboard-card">
|
|
<h3 style="margin-bottom: 1.5rem;">
|
|
<i data-lucide="file-text" style="width: 20px; height: 20px; display: inline; margin-right: 0.5rem;"></i>
|
|
Booking Summary
|
|
</h3>
|
|
|
|
<div class="booking-summary">
|
|
<div class="summary-row">
|
|
<span style="color: var(--text-light);">Vessel:</span>
|
|
<strong>Sea Breeze - 2019 Beneteau 45</strong>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span style="color: var(--text-light);">Service:</span>
|
|
<strong>Annual Maintenance</strong>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span style="color: var(--text-light);">Date:</span>
|
|
<strong>December 9, 2024</strong>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span style="color: var(--text-light);">Time:</span>
|
|
<strong>10:00 AM</strong>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span style="color: var(--text-light);">Technician:</span>
|
|
<strong>Mike Johnson</strong>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span style="color: var(--text-light);">Estimated Duration:</span>
|
|
<strong>4-6 hours</strong>
|
|
</div>
|
|
<div class="summary-row" style="font-size: 1.125rem; padding-top: 1rem;">
|
|
<span style="color: var(--text-light);">Estimated Cost:</span>
|
|
<strong style="color: var(--primary-600);">$1,200 - $1,500</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 1rem; margin-top: 2rem; justify-content: flex-end;">
|
|
<button class="btn btn-secondary">
|
|
<i data-lucide="save"></i>
|
|
Save as Draft
|
|
</button>
|
|
<button class="btn btn-primary">
|
|
<i data-lucide="check-circle"></i>
|
|
Confirm Booking
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
});
|
|
|
|
// Toggle sidebar
|
|
function toggleSidebar() {
|
|
document.getElementById('sidebar').classList.toggle('collapsed');
|
|
}
|
|
|
|
// Logout function
|
|
function logout() {
|
|
localStorage.clear();
|
|
window.location.href = '../portal-login.html';
|
|
}
|
|
|
|
// Service type selection
|
|
document.querySelectorAll('.service-type-card').forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
document.querySelectorAll('.service-type-card').forEach(c => c.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
});
|
|
});
|
|
|
|
// Calendar day selection
|
|
document.querySelectorAll('.calendar-day').forEach(day => {
|
|
day.addEventListener('click', function() {
|
|
if (!this.classList.contains('available')) return;
|
|
document.querySelectorAll('.calendar-day').forEach(d => d.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
});
|
|
});
|
|
|
|
// Time slot selection
|
|
document.querySelectorAll('.time-slot').forEach(slot => {
|
|
slot.addEventListener('click', function() {
|
|
if (this.style.opacity === '0.5') return;
|
|
document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |