418 lines
22 KiB
HTML
418 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>My Vessels - 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">
|
|
</head>
|
|
<body class="portal">
|
|
<div class="portal-wrapper">
|
|
<!-- Sidebar (Same as dashboard) -->
|
|
<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 active">
|
|
<i data-lucide="ship"></i>
|
|
<span>My Vessels</span>
|
|
</a>
|
|
<a href="maintenance-schedule.html" class="sidebar-link">
|
|
<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>My Vessels</span>
|
|
</div>
|
|
|
|
<div class="portal-header-actions">
|
|
<div class="header-search">
|
|
<i data-lucide="search"></i>
|
|
<input type="text" placeholder="Search vessels...">
|
|
</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>
|
|
|
|
<!-- Content -->
|
|
<div class="portal-content">
|
|
<!-- Page Header -->
|
|
<div class="portal-page-header">
|
|
<h1 class="portal-page-title">My Vessels</h1>
|
|
<p class="portal-page-subtitle">Manage your fleet and vessel information</p>
|
|
</div>
|
|
|
|
<!-- Actions Bar -->
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg);">
|
|
<div style="display: flex; gap: var(--space-sm);">
|
|
<button class="btn-portal-secondary">
|
|
<i data-lucide="filter"></i>
|
|
Filter
|
|
</button>
|
|
<button class="btn-portal-secondary">
|
|
<i data-lucide="download"></i>
|
|
Export
|
|
</button>
|
|
</div>
|
|
<button class="btn-portal-primary" onclick="showAddVesselModal()">
|
|
<i data-lucide="plus"></i>
|
|
Add New Vessel
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Vessels Grid -->
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: var(--space-md);">
|
|
<!-- Vessel Card 1 -->
|
|
<div class="dashboard-card">
|
|
<div style="position: relative; height: 200px; margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md); overflow: hidden; border-radius: 12px 12px 0 0;">
|
|
<img src="../yacht_party_couple_holding_hands.jpg" alt="Sea Breeze" style="width: 100%; height: 100%; object-fit: cover;">
|
|
<span class="status-badge success" style="position: absolute; top: 1rem; right: 1rem;">Active</span>
|
|
</div>
|
|
|
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.5rem;">Sea Breeze</h3>
|
|
<p style="color: var(--text-light); margin-bottom: var(--space-md);">2019 Beneteau Oceanis 45</p>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-md);">
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Registration</div>
|
|
<div style="font-weight: 600;">CA-1234-SB</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Length</div>
|
|
<div style="font-weight: 600;">45 ft</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Last Service</div>
|
|
<div style="font-weight: 600;">Nov 10, 2024</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Next Service</div>
|
|
<div style="font-weight: 600;">Dec 15, 2024</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-md);">
|
|
<div style="flex: 1; height: 8px; background: var(--soft-cream); border-radius: 4px; overflow: hidden;">
|
|
<div style="width: 95%; height: 100%; background: var(--success);"></div>
|
|
</div>
|
|
<span style="font-weight: 600;">95% Health</span>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: var(--space-sm);">
|
|
<button class="btn-portal-primary" style="flex: 1;">
|
|
<i data-lucide="eye"></i>
|
|
View Details
|
|
</button>
|
|
<button class="btn-portal-secondary" style="flex: 1;">
|
|
<i data-lucide="calendar"></i>
|
|
Schedule
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vessel Card 2 -->
|
|
<div class="dashboard-card">
|
|
<div style="position: relative; height: 200px; margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md); overflow: hidden; border-radius: 12px 12px 0 0;">
|
|
<img src="../golden_gate.jpg" alt="Wave Runner" style="width: 100%; height: 100%; object-fit: cover;">
|
|
<span class="status-badge success" style="position: absolute; top: 1rem; right: 1rem;">Active</span>
|
|
</div>
|
|
|
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.5rem;">Wave Runner</h3>
|
|
<p style="color: var(--text-light); margin-bottom: var(--space-md);">2021 Sea Ray Sundancer 350</p>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-md);">
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Registration</div>
|
|
<div style="font-weight: 600;">CA-5678-WR</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Length</div>
|
|
<div style="font-weight: 600;">35 ft</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Last Service</div>
|
|
<div style="font-weight: 600;">Oct 28, 2024</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Next Service</div>
|
|
<div style="font-weight: 600;">Dec 22, 2024</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-md);">
|
|
<div style="flex: 1; height: 8px; background: var(--soft-cream); border-radius: 4px; overflow: hidden;">
|
|
<div style="width: 88%; height: 100%; background: var(--warning);"></div>
|
|
</div>
|
|
<span style="font-weight: 600;">88% Health</span>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: var(--space-sm);">
|
|
<button class="btn-portal-primary" style="flex: 1;">
|
|
<i data-lucide="eye"></i>
|
|
View Details
|
|
</button>
|
|
<button class="btn-portal-secondary" style="flex: 1;">
|
|
<i data-lucide="calendar"></i>
|
|
Schedule
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Vessel Card 3 -->
|
|
<div class="dashboard-card">
|
|
<div style="position: relative; height: 200px; margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-md)) var(--space-md); overflow: hidden; border-radius: 12px 12px 0 0;">
|
|
<img src="../diver.jpg" alt="Ocean Spirit" style="width: 100%; height: 100%; object-fit: cover;">
|
|
<span class="status-badge success" style="position: absolute; top: 1rem; right: 1rem;">Active</span>
|
|
</div>
|
|
|
|
<h3 style="font-size: 1.25rem; margin-bottom: 0.5rem;">Ocean Spirit</h3>
|
|
<p style="color: var(--text-light); margin-bottom: var(--space-md);">2020 Catalina 425</p>
|
|
|
|
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-md);">
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Registration</div>
|
|
<div style="font-weight: 600;">CA-9012-OS</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Length</div>
|
|
<div style="font-weight: 600;">42.5 ft</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Last Service</div>
|
|
<div style="font-weight: 600;">Nov 5, 2024</div>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 0.875rem; color: var(--text-light);">Next Service</div>
|
|
<div style="font-weight: 600;">Jan 5, 2025</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-md);">
|
|
<div style="flex: 1; height: 8px; background: var(--soft-cream); border-radius: 4px; overflow: hidden;">
|
|
<div style="width: 92%; height: 100%; background: var(--success);"></div>
|
|
</div>
|
|
<span style="font-weight: 600;">92% Health</span>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: var(--space-sm);">
|
|
<button class="btn-portal-primary" style="flex: 1;">
|
|
<i data-lucide="eye"></i>
|
|
View Details
|
|
</button>
|
|
<button class="btn-portal-secondary" style="flex: 1;">
|
|
<i data-lucide="calendar"></i>
|
|
Schedule
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add New Vessel Card -->
|
|
<div class="dashboard-card" style="border: 2px dashed var(--border); background: var(--soft-cream); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; cursor: pointer;" onclick="showAddVesselModal()">
|
|
<i data-lucide="plus-circle" style="width: 48px; height: 48px; color: var(--text-light); margin-bottom: var(--space-sm);"></i>
|
|
<h3 style="color: var(--text-dark); margin-bottom: 0.5rem;">Add New Vessel</h3>
|
|
<p style="color: var(--text-light); text-align: center;">Register a new vessel for maintenance services</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Add Vessel Modal (Hidden by default) -->
|
|
<div id="addVesselModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 2000; align-items: center; justify-content: center;">
|
|
<div class="portal-form" style="max-width: 600px; max-height: 90vh; overflow-y: auto; margin: var(--space-lg);">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-lg);">
|
|
<h2 class="form-section-title" style="margin: 0; border: none;">Add New Vessel</h2>
|
|
<button onclick="hideAddVesselModal()" style="background: none; border: none; cursor: pointer;">
|
|
<i data-lucide="x"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form>
|
|
<div class="form-section">
|
|
<h3 class="form-section-title">Basic Information</h3>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label required">Vessel Name</label>
|
|
<input type="text" class="form-input" placeholder="Enter vessel name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label required">Registration Number</label>
|
|
<input type="text" class="form-input" placeholder="CA-XXXX-XX">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label required">Manufacturer</label>
|
|
<input type="text" class="form-input" placeholder="e.g., Beneteau">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label required">Model</label>
|
|
<input type="text" class="form-input" placeholder="e.g., Oceanis 45">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label required">Year</label>
|
|
<input type="number" class="form-input" placeholder="2024">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label required">Type</label>
|
|
<select class="form-select">
|
|
<option>Sailboat</option>
|
|
<option>Motor Yacht</option>
|
|
<option>Catamaran</option>
|
|
<option>Sport Fishing</option>
|
|
<option>Other</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3 class="form-section-title">Specifications</h3>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label class="form-label">Length (ft)</label>
|
|
<input type="number" class="form-input" placeholder="45">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Beam (ft)</label>
|
|
<input type="number" class="form-input" placeholder="14">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Draft (ft)</label>
|
|
<input type="number" class="form-input" placeholder="6">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Engine Type</label>
|
|
<select class="form-select">
|
|
<option>Inboard</option>
|
|
<option>Outboard</option>
|
|
<option>Inboard/Outboard</option>
|
|
<option>Sail Only</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3 class="form-section-title">Photos</h3>
|
|
<div class="upload-area">
|
|
<i data-lucide="upload-cloud" class="upload-icon"></i>
|
|
<p>Drag and drop photos here, or click to browse</p>
|
|
<p style="font-size: 0.875rem; color: var(--text-light);">Maximum file size: 10MB</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: var(--space-sm); justify-content: flex-end;">
|
|
<button type="button" class="btn-portal-secondary" onclick="hideAddVesselModal()">Cancel</button>
|
|
<button type="submit" class="btn-portal-primary">Add Vessel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialize Lucide icons
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
lucide.createIcons();
|
|
|
|
// Check authentication
|
|
if (!localStorage.getItem('isLoggedIn')) {
|
|
window.location.href = '../portal-login.html';
|
|
}
|
|
});
|
|
|
|
// Toggle sidebar
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
sidebar.classList.toggle('collapsed');
|
|
}
|
|
|
|
// Show/Hide Add Vessel Modal
|
|
function showAddVesselModal() {
|
|
document.getElementById('addVesselModal').style.display = 'flex';
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function hideAddVesselModal() {
|
|
document.getElementById('addVesselModal').style.display = 'none';
|
|
}
|
|
|
|
// Logout
|
|
function logout() {
|
|
localStorage.removeItem('isLoggedIn');
|
|
localStorage.removeItem('userEmail');
|
|
localStorage.removeItem('userName');
|
|
localStorage.removeItem('userRole');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |