Initial import of HarborSmith website
Some checks failed
build-website / build (push) Failing after 1m2s
Some checks failed
build-website / build (push) Failing after 1m2s
This commit is contained in:
405
website-mockups/maintenance/maintenance-dashboard.html
Normal file
405
website-mockups/maintenance/maintenance-dashboard.html
Normal file
@@ -0,0 +1,405 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Maintenance Dashboard - 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 -->
|
||||
<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 active">
|
||||
<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">
|
||||
<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>Dashboard</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>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="portal-content">
|
||||
<!-- Welcome Section -->
|
||||
<div class="portal-page-header">
|
||||
<h1 class="portal-page-title">Welcome back, John!</h1>
|
||||
<p class="portal-page-subtitle">Here's an overview of your fleet maintenance status</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="dashboard-grid">
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Active Vessels</h3>
|
||||
<div class="card-icon">
|
||||
<i data-lucide="ship"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">3</div>
|
||||
<div class="card-change positive">
|
||||
<i data-lucide="trending-up"></i>
|
||||
+1 this month
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Upcoming Services</h3>
|
||||
<div class="card-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);">
|
||||
<i data-lucide="wrench"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">2</div>
|
||||
<p style="color: var(--text-light); font-size: 0.875rem;">Next: Dec 15, 2024</p>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Open Invoices</h3>
|
||||
<div class="card-icon" style="background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);">
|
||||
<i data-lucide="receipt"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">$4,250</div>
|
||||
<span class="status-badge warning">1 overdue</span>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Service Score</h3>
|
||||
<div class="card-icon" style="background: linear-gradient(135deg, #10b981 0%, #34d399 100%);">
|
||||
<i data-lucide="award"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-value">98%</div>
|
||||
<div class="card-change positive">
|
||||
<i data-lucide="trending-up"></i>
|
||||
Excellent
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Two Column Layout -->
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-bottom: var(--space-lg);">
|
||||
<!-- Upcoming Services -->
|
||||
<div class="data-table">
|
||||
<div class="table-header">
|
||||
<h3 class="card-title">Upcoming Services</h3>
|
||||
<div class="table-actions">
|
||||
<button class="btn-portal-secondary" onclick="window.location.href='maintenance-schedule.html'">
|
||||
<i data-lucide="plus"></i>
|
||||
Schedule New
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vessel</th>
|
||||
<th>Service</th>
|
||||
<th>Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Sea Breeze</strong></td>
|
||||
<td>Annual Inspection</td>
|
||||
<td>Dec 15, 2024</td>
|
||||
<td><span class="status-badge warning">Scheduled</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Wave Runner</strong></td>
|
||||
<td>Engine Service</td>
|
||||
<td>Dec 22, 2024</td>
|
||||
<td><span class="status-badge info">Confirmed</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Ocean Spirit</strong></td>
|
||||
<td>Hull Cleaning</td>
|
||||
<td>Jan 5, 2025</td>
|
||||
<td><span class="status-badge success">Scheduled</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity Timeline -->
|
||||
<div class="dashboard-card">
|
||||
<h3 class="card-title" style="margin-bottom: var(--space-md);">Recent Activity</h3>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">2 hours ago</div>
|
||||
<p><strong>Invoice #1247 paid</strong></p>
|
||||
<p style="color: var(--text-light); font-size: 0.875rem;">Payment received for Wave Runner engine service</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">Yesterday</div>
|
||||
<p><strong>Service report uploaded</strong></p>
|
||||
<p style="color: var(--text-light); font-size: 0.875rem;">Sea Breeze monthly maintenance complete</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-marker"></div>
|
||||
<div class="timeline-content">
|
||||
<div class="timeline-date">3 days ago</div>
|
||||
<p><strong>New document added</strong></p>
|
||||
<p style="color: var(--text-light); font-size: 0.875rem;">Insurance renewal certificate for Ocean Spirit</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fleet Overview -->
|
||||
<div class="data-table">
|
||||
<div class="table-header">
|
||||
<h3 class="card-title">Fleet Overview</h3>
|
||||
<div class="table-actions">
|
||||
<button class="btn-portal-secondary" onclick="window.location.href='maintenance-vessels.html'">
|
||||
View All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vessel Name</th>
|
||||
<th>Type</th>
|
||||
<th>Last Service</th>
|
||||
<th>Next Service</th>
|
||||
<th>Health Score</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<img src="../yacht_party_couple_holding_hands.jpg" alt="Sea Breeze" style="width: 40px; height: 40px; border-radius: 8px; object-fit: cover;">
|
||||
<div>
|
||||
<strong>Sea Breeze</strong>
|
||||
<div style="font-size: 0.875rem; color: var(--text-light);">2019 Beneteau 45</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Sailboat</td>
|
||||
<td>Nov 10, 2024</td>
|
||||
<td>Dec 15, 2024</td>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div style="width: 100px; height: 8px; background: var(--soft-cream); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 95%; height: 100%; background: var(--success);"></div>
|
||||
</div>
|
||||
<span>95%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-portal-secondary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
|
||||
View Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<img src="../golden_gate.jpg" alt="Wave Runner" style="width: 40px; height: 40px; border-radius: 8px; object-fit: cover;">
|
||||
<div>
|
||||
<strong>Wave Runner</strong>
|
||||
<div style="font-size: 0.875rem; color: var(--text-light);">2021 Sea Ray 350</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Motor Yacht</td>
|
||||
<td>Oct 28, 2024</td>
|
||||
<td>Dec 22, 2024</td>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div style="width: 100px; height: 8px; background: var(--soft-cream); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 88%; height: 100%; background: var(--warning);"></div>
|
||||
</div>
|
||||
<span>88%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-portal-secondary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
|
||||
View Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.75rem;">
|
||||
<img src="../diver.jpg" alt="Ocean Spirit" style="width: 40px; height: 40px; border-radius: 8px; object-fit: cover;">
|
||||
<div>
|
||||
<strong>Ocean Spirit</strong>
|
||||
<div style="font-size: 0.875rem; color: var(--text-light);">2020 Catalina 425</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>Sailboat</td>
|
||||
<td>Nov 5, 2024</td>
|
||||
<td>Jan 5, 2025</td>
|
||||
<td>
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div style="width: 100px; height: 8px; background: var(--soft-cream); border-radius: 4px; overflow: hidden;">
|
||||
<div style="width: 92%; height: 100%; background: var(--success);"></div>
|
||||
</div>
|
||||
<span>92%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn-portal-secondary" style="padding: 0.5rem 1rem; font-size: 0.875rem;">
|
||||
View Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div style="margin-top: var(--space-lg);">
|
||||
<h3 class="card-title" style="margin-bottom: var(--space-md);">Quick Actions</h3>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-md);">
|
||||
<button class="dashboard-card" style="cursor: pointer; text-align: center; padding: var(--space-md);" onclick="window.location.href='maintenance-schedule.html'">
|
||||
<i data-lucide="calendar-plus" style="width: 32px; height: 32px; margin: 0 auto var(--space-sm); color: var(--warm-orange);"></i>
|
||||
<div style="font-weight: 600;">Schedule Service</div>
|
||||
</button>
|
||||
<button class="dashboard-card" style="cursor: pointer; text-align: center; padding: var(--space-md);" onclick="window.location.href='maintenance-documents.html'">
|
||||
<i data-lucide="upload" style="width: 32px; height: 32px; margin: 0 auto var(--space-sm); color: var(--warm-orange);"></i>
|
||||
<div style="font-weight: 600;">Upload Document</div>
|
||||
</button>
|
||||
<button class="dashboard-card" style="cursor: pointer; text-align: center; padding: var(--space-md);" onclick="window.location.href='maintenance-invoices.html'">
|
||||
<i data-lucide="credit-card" style="width: 32px; height: 32px; margin: 0 auto var(--space-sm); color: var(--warm-orange);"></i>
|
||||
<div style="font-weight: 600;">Pay Invoice</div>
|
||||
</button>
|
||||
<button class="dashboard-card" style="cursor: pointer; text-align: center; padding: var(--space-md);" onclick="window.location.href='maintenance-reports.html'">
|
||||
<i data-lucide="file-text" style="width: 32px; height: 32px; margin: 0 auto var(--space-sm); color: var(--warm-orange);"></i>
|
||||
<div style="font-weight: 600;">View Reports</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</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');
|
||||
}
|
||||
|
||||
// Logout
|
||||
function logout() {
|
||||
localStorage.removeItem('isLoggedIn');
|
||||
localStorage.removeItem('userEmail');
|
||||
localStorage.removeItem('userName');
|
||||
localStorage.removeItem('userRole');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
415
website-mockups/maintenance/maintenance-documents.html
Normal file
415
website-mockups/maintenance/maintenance-documents.html
Normal file
@@ -0,0 +1,415 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Documents - 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&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/portal-styles.css">
|
||||
<link rel="stylesheet" href="../css/maintenance-enhanced.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="portal-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="portal-sidebar" id="sidebar">
|
||||
<a href="maintenance-dashboard.html" class="portal-logo">
|
||||
<img src="../logo.jpg" alt="HarborSmith">
|
||||
<span>HarborSmith</span>
|
||||
</a>
|
||||
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Main</div>
|
||||
<a href="maintenance-dashboard.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="maintenance-vessels.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
|
||||
</svg>
|
||||
<span>My Vessels</span>
|
||||
</a>
|
||||
<a href="maintenance-schedule.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<span>Schedule Service</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Records</div>
|
||||
<a href="maintenance-documents.html" class="nav-link active">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
<a href="maintenance-reports.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v1a1 1 0 001 1h4a1 1 0 001-1v-1m3-2V8a2 2 0 00-2-2H8a2 2 0 00-2 2v8m5-4h4"></path>
|
||||
</svg>
|
||||
<span>Service Reports</span>
|
||||
</a>
|
||||
<a href="maintenance-invoices.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
<span>Invoices</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Account</div>
|
||||
<a href="#" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a href="../portal-login.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="portal-main">
|
||||
<!-- Header -->
|
||||
<header class="portal-header">
|
||||
<div class="breadcrumb">
|
||||
<span>Maintenance Portal</span>
|
||||
<span>/</span>
|
||||
<span>Documents</span>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="search-box">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="text" placeholder="Search documents...">
|
||||
</div>
|
||||
|
||||
<div class="notifications">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
||||
</svg>
|
||||
<span class="notification-badge">3</span>
|
||||
</div>
|
||||
|
||||
<div class="user-profile">
|
||||
<div class="user-avatar">JS</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">John Smith</span>
|
||||
<span class="user-role">Maintenance Client</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="portal-content">
|
||||
<div class="page-header">
|
||||
<h1>Documents</h1>
|
||||
<p>Manage your vessel documentation and certificates</p>
|
||||
</div>
|
||||
|
||||
<div class="document-layout">
|
||||
<!-- Left Sidebar -->
|
||||
<div class="document-sidebar">
|
||||
<!-- Categories -->
|
||||
<div class="categories-card">
|
||||
<h3>Categories</h3>
|
||||
<div class="category-item active">
|
||||
<div class="category-icon">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="category-name">All Documents</span>
|
||||
<span class="category-count">24</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="category-name">Registration</span>
|
||||
<span class="category-count">3</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="category-name">Insurance</span>
|
||||
<span class="category-count">4</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="category-name">Warranties</span>
|
||||
<span class="category-count">6</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="category-name">Safety Certificates</span>
|
||||
<span class="category-count">5</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="category-name">Owner Manuals</span>
|
||||
<span class="category-count">8</span>
|
||||
</div>
|
||||
<div class="category-item">
|
||||
<div class="category-icon">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="category-name">Service History</span>
|
||||
<span class="category-count">12</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upload Zone -->
|
||||
<div class="upload-card">
|
||||
<div class="upload-zone">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
|
||||
</svg>
|
||||
<h4>Drop files here to upload</h4>
|
||||
<p>or click to browse files</p>
|
||||
<p style="margin-top: 0.5rem; font-size: 0.75rem;">Supported formats: PDF, JPG, PNG, DOC, DOCX (Max 10MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Documents Area -->
|
||||
<div class="documents-main">
|
||||
<!-- Actions Bar -->
|
||||
<div class="actions-bar">
|
||||
<div class="filter-group">
|
||||
<select class="filter-select">
|
||||
<option>All Documents</option>
|
||||
<option>Expiring Soon</option>
|
||||
<option>Recently Added</option>
|
||||
<option>By Vessel</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="upload-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
|
||||
</svg>
|
||||
Upload Document
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Documents Grid -->
|
||||
<div class="documents-grid">
|
||||
<div class="document-card">
|
||||
<div class="document-icon">
|
||||
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
<div class="document-name">Vessel Registration - Sea Breeze</div>
|
||||
<div class="document-meta">
|
||||
<span>2.3 MB</span>
|
||||
<span>•</span>
|
||||
<span>Uploaded Nov 15, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="document-status valid">Valid until Dec 2025</div>
|
||||
<div class="document-actions">
|
||||
<button class="doc-action-btn" title="View document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Download document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Delete document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="document-card">
|
||||
<div class="document-icon">
|
||||
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
<div class="document-name">Insurance Policy - Marine Coverage</div>
|
||||
<div class="document-meta">
|
||||
<span>1.8 MB</span>
|
||||
<span>•</span>
|
||||
<span>Uploaded Oct 20, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="document-status expiring">Expires in 30 days</div>
|
||||
<div class="document-actions">
|
||||
<button class="doc-action-btn" title="View document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Download document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Delete document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="document-card">
|
||||
<div class="document-icon">
|
||||
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
<div class="document-name">Safety Equipment Certificate</div>
|
||||
<div class="document-meta">
|
||||
<span>856 KB</span>
|
||||
<span>•</span>
|
||||
<span>Uploaded Sep 5, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="document-status valid">Valid until Jun 2025</div>
|
||||
<div class="document-actions">
|
||||
<button class="doc-action-btn" title="View document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Download document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Delete document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="document-card">
|
||||
<div class="document-icon">
|
||||
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
<div class="document-name">Engine Warranty Documentation</div>
|
||||
<div class="document-meta">
|
||||
<span>524 KB</span>
|
||||
<span>•</span>
|
||||
<span>Uploaded Aug 12, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="document-status valid">Valid until 2026</div>
|
||||
<div class="document-actions">
|
||||
<button class="doc-action-btn" title="View document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Download document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Delete document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="document-card">
|
||||
<div class="document-icon">
|
||||
<svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="document-info">
|
||||
<div class="document-name">Radio License</div>
|
||||
<div class="document-meta">
|
||||
<span>342 KB</span>
|
||||
<span>•</span>
|
||||
<span>Uploaded Jun 15, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="document-status expired">Expired</div>
|
||||
<div class="document-actions">
|
||||
<button class="doc-action-btn" style="background: #fef3c7; border-color: #f59e0b;" title="Document expired warning">
|
||||
<svg fill="none" stroke="#f59e0b" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Download document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="doc-action-btn" title="Delete document">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
391
website-mockups/maintenance/maintenance-invoices.html
Normal file
391
website-mockups/maintenance/maintenance-invoices.html
Normal file
@@ -0,0 +1,391 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Invoices - 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&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/portal-styles.css">
|
||||
<link rel="stylesheet" href="../css/maintenance-enhanced.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="portal-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="portal-sidebar" id="sidebar">
|
||||
<a href="maintenance-dashboard.html" class="portal-logo">
|
||||
<img src="../logo.jpg" alt="HarborSmith">
|
||||
<span>HarborSmith</span>
|
||||
</a>
|
||||
|
||||
<nav class="portal-nav">
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Main</div>
|
||||
<a href="maintenance-dashboard.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="maintenance-vessels.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
|
||||
</svg>
|
||||
<span>My Vessels</span>
|
||||
</a>
|
||||
<a href="maintenance-schedule.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<span>Schedule Service</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Records</div>
|
||||
<a href="maintenance-documents.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
<span>Documents</span>
|
||||
</a>
|
||||
<a href="maintenance-reports.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v1a1 1 0 001 1h4a1 1 0 001-1v-1m3-2V8a2 2 0 00-2-2H8a2 2 0 00-2 2v8m5-4h4"></path>
|
||||
</svg>
|
||||
<span>Service Reports</span>
|
||||
</a>
|
||||
<a href="maintenance-invoices.html" class="nav-link active">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
<span>Invoices</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-title">Account</div>
|
||||
<a href="#" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<a href="../portal-login.html" class="nav-link">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="portal-main">
|
||||
<!-- Header -->
|
||||
<header class="portal-header">
|
||||
<div class="breadcrumb">
|
||||
<span>Maintenance Portal</span>
|
||||
<span>/</span>
|
||||
<span>Invoices</span>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="search-box">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="text" placeholder="Search invoices...">
|
||||
</div>
|
||||
|
||||
<div class="notifications">
|
||||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
||||
</svg>
|
||||
<span class="notification-badge">3</span>
|
||||
</div>
|
||||
|
||||
<div class="user-profile">
|
||||
<div class="user-avatar">JS</div>
|
||||
<div class="user-info">
|
||||
<span class="user-name">John Smith</span>
|
||||
<span class="user-role">Maintenance Client</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="portal-content">
|
||||
<div class="page-header">
|
||||
<h1>Invoices & Payments</h1>
|
||||
<p>Manage your service invoices and payment history</p>
|
||||
</div>
|
||||
|
||||
<!-- Stats Row -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">$12,450</div>
|
||||
<div class="stat-label">Paid This Year</div>
|
||||
</div>
|
||||
<div class="stat-card pending">
|
||||
<div class="stat-value">$2,850</div>
|
||||
<div class="stat-label">Pending Payment</div>
|
||||
</div>
|
||||
<div class="stat-card overdue">
|
||||
<div class="stat-value">$0</div>
|
||||
<div class="stat-label">Overdue</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value">18</div>
|
||||
<div class="stat-label">Total Invoices</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auto-pay Settings -->
|
||||
<div class="autopay-section">
|
||||
<div class="autopay-header">
|
||||
<h3 class="autopay-title">🔄 Auto-Pay Settings</h3>
|
||||
<div class="toggle-switch active"></div>
|
||||
</div>
|
||||
<div class="autopay-settings">
|
||||
<div class="filter-group">
|
||||
<select class="filter-select" title="Select payment method">
|
||||
<option>Visa ending in 4242</option>
|
||||
<option>Bank Account ending in 6789</option>
|
||||
<option>Add new payment method...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<input type="text" class="filter-select" placeholder="Max amount: $5,000">
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<select class="filter-select" title="Select notification preference">
|
||||
<option>Email me before charging</option>
|
||||
<option>Email me after charging</option>
|
||||
<option>Both</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<div class="filters-row">
|
||||
<div class="filter-group">
|
||||
<select class="filter-select" title="Filter by invoice status">
|
||||
<option>All Invoices</option>
|
||||
<option>Paid</option>
|
||||
<option>Pending</option>
|
||||
<option>Overdue</option>
|
||||
</select>
|
||||
<select class="filter-select" title="Filter by vessel">
|
||||
<option>All Vessels</option>
|
||||
<option>Sea Breeze</option>
|
||||
<option>Wave Runner</option>
|
||||
<option>Ocean Spirit</option>
|
||||
</select>
|
||||
<select class="filter-select" title="Filter by date range">
|
||||
<option>Last 30 Days</option>
|
||||
<option>Last 3 Months</option>
|
||||
<option>Last 6 Months</option>
|
||||
<option>This Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="export-btn">
|
||||
<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Invoices Grid -->
|
||||
<div class="invoices-grid">
|
||||
<div class="invoice-card">
|
||||
<div>
|
||||
<div class="invoice-header">
|
||||
<div>
|
||||
<div class="invoice-number">INV-2024-1247</div>
|
||||
<div class="invoice-vessel">Sea Breeze</div>
|
||||
</div>
|
||||
<span class="invoice-status pending">Pending</span>
|
||||
</div>
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Date</span>
|
||||
<span class="invoice-detail-value">Nov 15, 2024</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Service</span>
|
||||
<span class="invoice-detail-value">Annual Maintenance</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Amount</span>
|
||||
<span class="invoice-detail-value">$2,850.00</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Due Date</span>
|
||||
<span class="invoice-detail-value">Nov 30, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoice-actions">
|
||||
<button class="action-btn primary">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
Pay Now
|
||||
</button>
|
||||
<button class="action-btn secondary">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="invoice-card">
|
||||
<div>
|
||||
<div class="invoice-header">
|
||||
<div>
|
||||
<div class="invoice-number">INV-2024-1235</div>
|
||||
<div class="invoice-vessel">Wave Runner</div>
|
||||
</div>
|
||||
<span class="invoice-status paid">Paid</span>
|
||||
</div>
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Date</span>
|
||||
<span class="invoice-detail-value">Oct 28, 2024</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Service</span>
|
||||
<span class="invoice-detail-value">Hull Cleaning</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Amount</span>
|
||||
<span class="invoice-detail-value">$450.00</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Paid On</span>
|
||||
<span class="invoice-detail-value">Oct 30, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoice-actions">
|
||||
<button class="action-btn secondary">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
Receipt
|
||||
</button>
|
||||
<button class="action-btn secondary">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="invoice-card">
|
||||
<div>
|
||||
<div class="invoice-header">
|
||||
<div>
|
||||
<div class="invoice-number">INV-2024-1221</div>
|
||||
<div class="invoice-vessel">Sea Breeze</div>
|
||||
</div>
|
||||
<span class="invoice-status paid">Paid</span>
|
||||
</div>
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Date</span>
|
||||
<span class="invoice-detail-value">Oct 10, 2024</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Service</span>
|
||||
<span class="invoice-detail-value">Engine Service</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Amount</span>
|
||||
<span class="invoice-detail-value">$1,200.00</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Paid On</span>
|
||||
<span class="invoice-detail-value">Oct 12, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoice-actions">
|
||||
<button class="action-btn secondary">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
Receipt
|
||||
</button>
|
||||
<button class="action-btn secondary">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="invoice-card">
|
||||
<div>
|
||||
<div class="invoice-header">
|
||||
<div>
|
||||
<div class="invoice-number">INV-2024-1198</div>
|
||||
<div class="invoice-vessel">Ocean Spirit</div>
|
||||
</div>
|
||||
<span class="invoice-status paid">Paid</span>
|
||||
</div>
|
||||
<div class="invoice-details">
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Date</span>
|
||||
<span class="invoice-detail-value">Sep 15, 2024</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Service</span>
|
||||
<span class="invoice-detail-value">Electronics Update</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Amount</span>
|
||||
<span class="invoice-detail-value">$3,200.00</span>
|
||||
</div>
|
||||
<div class="invoice-detail">
|
||||
<span class="invoice-detail-label">Paid On</span>
|
||||
<span class="invoice-detail-value">Sep 18, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoice-actions">
|
||||
<button class="action-btn secondary">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
Receipt
|
||||
</button>
|
||||
<button class="action-btn secondary">
|
||||
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
View
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
579
website-mockups/maintenance/maintenance-reports.html
Normal file
579
website-mockups/maintenance/maintenance-reports.html
Normal file
@@ -0,0 +1,579 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Service Reports - 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>
|
||||
.reports-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.report-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.report-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.report-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.report-status {
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.report-status.completed {
|
||||
background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.report-status.pending {
|
||||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||||
color: #d97706;
|
||||
}
|
||||
|
||||
.report-status.in-progress {
|
||||
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
|
||||
color: #2563eb;
|
||||
}
|
||||
|
||||
.report-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.report-detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #6b7280;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filter-tab:hover {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.filter-tab.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
|
||||
padding: 1.5rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #6b7280;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
</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">
|
||||
<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 active">
|
||||
<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>Service Reports</span>
|
||||
</div>
|
||||
|
||||
<div class="portal-header-actions">
|
||||
<div class="header-search">
|
||||
<i data-lucide="search"></i>
|
||||
<input type="text" placeholder="Search reports...">
|
||||
</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>Service Reports</h1>
|
||||
<p>View and download your maintenance service reports</p>
|
||||
</div>
|
||||
|
||||
<!-- Statistics -->
|
||||
<div class="stats-row">
|
||||
<div class="stat-box">
|
||||
<div class="stat-value">24</div>
|
||||
<div class="stat-label">Total Reports</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value">18</div>
|
||||
<div class="stat-label">Completed Services</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value">3</div>
|
||||
<div class="stat-label">Pending Reviews</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-value">98%</div>
|
||||
<div class="stat-label">Satisfaction Rate</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Tabs -->
|
||||
<div class="filter-tabs">
|
||||
<button class="filter-tab active" onclick="filterReports('all')">All Reports</button>
|
||||
<button class="filter-tab" onclick="filterReports('completed')">Completed</button>
|
||||
<button class="filter-tab" onclick="filterReports('pending')">Pending</button>
|
||||
<button class="filter-tab" onclick="filterReports('scheduled')">Scheduled</button>
|
||||
</div>
|
||||
|
||||
<!-- Action Bar -->
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
<select class="form-select" style="width: 200px;">
|
||||
<option>All Vessels</option>
|
||||
<option>Sea Breeze</option>
|
||||
<option>Wave Runner</option>
|
||||
<option>Ocean Spirit</option>
|
||||
</select>
|
||||
<select class="form-select" style="width: 200px;">
|
||||
<option>Last 30 Days</option>
|
||||
<option>Last 3 Months</option>
|
||||
<option>Last 6 Months</option>
|
||||
<option>Last Year</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary">
|
||||
<i data-lucide="download"></i>
|
||||
Export All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Reports Grid -->
|
||||
<div class="reports-grid">
|
||||
<!-- Report Card 1 -->
|
||||
<div class="report-card">
|
||||
<div class="report-header">
|
||||
<div>
|
||||
<h4>Annual Inspection</h4>
|
||||
<p style="color: #6b7280; font-size: 0.875rem;">Sea Breeze</p>
|
||||
</div>
|
||||
<span class="report-status completed">Completed</span>
|
||||
</div>
|
||||
<div class="report-details">
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Report #</span>
|
||||
<strong>SR-2024-089</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Date</span>
|
||||
<strong>Nov 10, 2024</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Technician</span>
|
||||
<strong>Mike Johnson</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Duration</span>
|
||||
<strong>5.5 hours</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
||||
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
||||
<i data-lucide="eye"></i>
|
||||
View
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary" style="flex: 1;">
|
||||
<i data-lucide="download"></i>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Card 2 -->
|
||||
<div class="report-card">
|
||||
<div class="report-header">
|
||||
<div>
|
||||
<h4>Engine Service</h4>
|
||||
<p style="color: #6b7280; font-size: 0.875rem;">Wave Runner</p>
|
||||
</div>
|
||||
<span class="report-status completed">Completed</span>
|
||||
</div>
|
||||
<div class="report-details">
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Report #</span>
|
||||
<strong>SR-2024-087</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Date</span>
|
||||
<strong>Oct 28, 2024</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Technician</span>
|
||||
<strong>Sarah Williams</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Duration</span>
|
||||
<strong>3.5 hours</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
||||
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
||||
<i data-lucide="eye"></i>
|
||||
View
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary" style="flex: 1;">
|
||||
<i data-lucide="download"></i>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Card 3 -->
|
||||
<div class="report-card">
|
||||
<div class="report-header">
|
||||
<div>
|
||||
<h4>Hull Cleaning</h4>
|
||||
<p style="color: #6b7280; font-size: 0.875rem;">Ocean Spirit</p>
|
||||
</div>
|
||||
<span class="report-status pending">Pending Review</span>
|
||||
</div>
|
||||
<div class="report-details">
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Report #</span>
|
||||
<strong>SR-2024-086</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Date</span>
|
||||
<strong>Nov 5, 2024</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Technician</span>
|
||||
<strong>Tom Davis</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Duration</span>
|
||||
<strong>2.5 hours</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
||||
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
||||
<i data-lucide="eye"></i>
|
||||
Review
|
||||
</button>
|
||||
<button class="btn btn-sm" style="flex: 1; background: #fbbf24; color: #78350f;">
|
||||
<i data-lucide="message-circle"></i>
|
||||
Feedback
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Card 4 -->
|
||||
<div class="report-card">
|
||||
<div class="report-header">
|
||||
<div>
|
||||
<h4>Electronics Check</h4>
|
||||
<p style="color: #6b7280; font-size: 0.875rem;">Sea Breeze</p>
|
||||
</div>
|
||||
<span class="report-status completed">Completed</span>
|
||||
</div>
|
||||
<div class="report-details">
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Report #</span>
|
||||
<strong>SR-2024-085</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Date</span>
|
||||
<strong>Oct 15, 2024</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Technician</span>
|
||||
<strong>Tom Davis</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Duration</span>
|
||||
<strong>4.0 hours</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
||||
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
||||
<i data-lucide="eye"></i>
|
||||
View
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary" style="flex: 1;">
|
||||
<i data-lucide="download"></i>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Card 5 -->
|
||||
<div class="report-card">
|
||||
<div class="report-header">
|
||||
<div>
|
||||
<h4>Quarterly Maintenance</h4>
|
||||
<p style="color: #6b7280; font-size: 0.875rem;">Wave Runner</p>
|
||||
</div>
|
||||
<span class="report-status in-progress">In Progress</span>
|
||||
</div>
|
||||
<div class="report-details">
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Report #</span>
|
||||
<strong>SR-2024-090</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Date</span>
|
||||
<strong>Dec 22, 2024</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Technician</span>
|
||||
<strong>Mike Johnson</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Status</span>
|
||||
<strong>Scheduled</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
||||
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
||||
<i data-lucide="calendar"></i>
|
||||
Details
|
||||
</button>
|
||||
<button class="btn btn-sm" style="flex: 1; background: #ef4444; color: white;">
|
||||
<i data-lucide="x-circle"></i>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Report Card 6 -->
|
||||
<div class="report-card">
|
||||
<div class="report-header">
|
||||
<div>
|
||||
<h4>Safety Equipment</h4>
|
||||
<p style="color: #6b7280; font-size: 0.875rem;">Ocean Spirit</p>
|
||||
</div>
|
||||
<span class="report-status completed">Completed</span>
|
||||
</div>
|
||||
<div class="report-details">
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Report #</span>
|
||||
<strong>SR-2024-084</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Date</span>
|
||||
<strong>Sep 20, 2024</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Technician</span>
|
||||
<strong>Sarah Williams</strong>
|
||||
</div>
|
||||
<div class="report-detail-row">
|
||||
<span style="color: #6b7280;">Duration</span>
|
||||
<strong>2.0 hours</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
|
||||
<button class="btn btn-sm btn-secondary" style="flex: 1;">
|
||||
<i data-lucide="eye"></i>
|
||||
View
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary" style="flex: 1;">
|
||||
<i data-lucide="download"></i>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div style="display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem;">
|
||||
<button class="btn btn-sm" disabled style="opacity: 0.5;">
|
||||
<i data-lucide="chevron-left"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary">1</button>
|
||||
<button class="btn btn-sm">2</button>
|
||||
<button class="btn btn-sm">3</button>
|
||||
<button class="btn btn-sm">4</button>
|
||||
<button class="btn btn-sm">
|
||||
<i data-lucide="chevron-right"></i>
|
||||
</button>
|
||||
</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';
|
||||
}
|
||||
|
||||
// Filter reports
|
||||
function filterReports(type) {
|
||||
document.querySelectorAll('.filter-tab').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
event.target.classList.add('active');
|
||||
// In a real app, this would filter the reports
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
507
website-mockups/maintenance/maintenance-schedule.html
Normal file
507
website-mockups/maintenance/maintenance-schedule.html
Normal file
@@ -0,0 +1,507 @@
|
||||
<!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>
|
||||
418
website-mockups/maintenance/maintenance-vessels.html
Normal file
418
website-mockups/maintenance/maintenance-vessels.html
Normal file
@@ -0,0 +1,418 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user