gitea
daba5a8438
This commit adds IntelliJ IDEA-specific configuration files for the project, including module setup, version control integration, inspection profiles, and workspace settings. These files facilitate development environment configuration for contributors using IntelliJ IDEA.
233 lines
8.9 KiB
HTML
233 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Line Operator Dashboard | Container Depot</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f5f7fa;
|
|
}
|
|
.content-area {
|
|
transition: all 0.3s;
|
|
}
|
|
.nav-item {
|
|
transition: all 0.2s;
|
|
}
|
|
.card {
|
|
transition: all 0.3s;
|
|
}
|
|
.card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.tab {
|
|
transition: all 0.2s;
|
|
}
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
display: block;
|
|
animation: fadeIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
.form-section {
|
|
animation: slideIn 0.5s ease-in-out;
|
|
}
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="layout-root">
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h1 class="sidebar-title">Container Depot</h1>
|
|
<p class="sidebar-subtitle">Line Operator Portal</p>
|
|
</div>
|
|
<nav class="nav-section">
|
|
<div class="nav-label">Main</div>
|
|
<a href="#" class="nav-item active">
|
|
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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" />
|
|
</svg>
|
|
Dashboard
|
|
</a>
|
|
<!-- Repeat for other nav items like Container Preinfo, Expedition Orders, Reports, etc. -->
|
|
</nav>
|
|
<div class="user-profile">
|
|
<div class="user-avatar">LO</div>
|
|
<div class="user-details">
|
|
<p class="user-name">Maersk Line</p>
|
|
<p class="user-role">Line Operator</p>
|
|
</div>
|
|
<button class="logout-button">
|
|
<svg class="nav-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
<!-- Main content layout will continue here... -->
|
|
<main class="content-area">
|
|
<header class="topbar">
|
|
<div class="topbar-inner">
|
|
<div class="topbar-title">
|
|
<h2>Dashboard</h2>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<button class="topbar-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="topbar-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<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" />
|
|
</svg>
|
|
</button>
|
|
<button class="topbar-button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="topbar-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- More dashboard content will follow -->
|
|
<section class="dashboard-overview">
|
|
<div class="dashboard-cards">
|
|
<div class="card card-blue">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="card-icon-inner" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
</svg>
|
|
</div>
|
|
<div class="card-details">
|
|
<h3 class="card-title">Active Containers</h3>
|
|
<p class="card-number">42</p>
|
|
<p class="card-note green">+3 since last week</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-green">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="card-icon-inner" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</div>
|
|
<div class="card-details">
|
|
<h3 class="card-title">Preinfo Sent</h3>
|
|
<p class="card-number">18</p>
|
|
<p class="card-note green">+5 since last week</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card card-orange">
|
|
<div class="card-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="card-icon-inner" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
|
|
</svg>
|
|
</div>
|
|
<div class="card-details">
|
|
<h3 class="card-title">Pending Orders</h3>
|
|
<p class="card-number">7</p>
|
|
<p class="card-note orange">2 require attention</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="dashboard-tables">
|
|
<div class="table-container">
|
|
<div class="table-header">
|
|
<h3>Recent Container Activity</h3>
|
|
</div>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Container</th>
|
|
<th>Type</th>
|
|
<th>Status</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>MSCU1234567</td>
|
|
<td>40HC</td>
|
|
<td><span class="badge badge-green">Received</span></td>
|
|
<td>2023-06-15</td>
|
|
</tr>
|
|
<tr>
|
|
<td>MSCU7654321</td>
|
|
<td>20DV</td>
|
|
<td><span class="badge badge-blue">Preinfo</span></td>
|
|
<td>2023-06-14</td>
|
|
</tr>
|
|
<tr>
|
|
<td>MSCU2468135</td>
|
|
<td>40DV</td>
|
|
<td><span class="badge badge-orange">Order</span></td>
|
|
<td>2023-06-13</td>
|
|
</tr>
|
|
<tr>
|
|
<td>MSCU1357924</td>
|
|
<td>20RF</td>
|
|
<td><span class="badge badge-red">Expedited</span></td>
|
|
<td>2023-06-12</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<div class="table-header">
|
|
<h3>Payment Status</h3>
|
|
</div>
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Invoice</th>
|
|
<th>Amount</th>
|
|
<th>Status</th>
|
|
<th>Due Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>INV-2023-0042</td>
|
|
<td>$1,250.00</td>
|
|
<td><span class="badge badge-green">Paid</span></td>
|
|
<td>2023-06-10</td>
|
|
</tr>
|
|
<tr>
|
|
<td>INV-2023-0041</td>
|
|
<td>$875.50</td>
|
|
<td><span class="badge badge-yellow">Pending</span></td>
|
|
<td>2023-06-20</td>
|
|
</tr>
|
|
<tr>
|
|
<td>INV-2023-0040</td>
|
|
<td>$2,100.00</td>
|
|
<td><span class="badge badge-red">Overdue</span></td>
|
|
<td>2023-06-05</td>
|
|
</tr>
|
|
<tr>
|
|
<td>INV-2023-0039</td>
|
|
<td>$950.25</td>
|
|
<td><span class="badge badge-green">Paid</span></td>
|
|
<td>2023-05-28</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
</body>
|
|
|
|
</html>
|