506 lines
24 KiB
HTML
506 lines
24 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Port Nimara CRM — Mockup C: Bold Modern</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--navy: #1e2844;
|
||
|
|
--navy-80: #474e66;
|
||
|
|
--navy-60: #71768a;
|
||
|
|
--navy-40: #9ea1af;
|
||
|
|
--navy-20: #cdcfd6;
|
||
|
|
--brand-blue: #3a7bc8;
|
||
|
|
--brand-blue-hover: #2f6ab5;
|
||
|
|
--brand-blue-80: #6196d3;
|
||
|
|
--brand-blue-60: #89b0de;
|
||
|
|
--brand-blue-20: #d8e5f4;
|
||
|
|
--teal: #83aab1;
|
||
|
|
--purple: #685aa3;
|
||
|
|
--mint: #add5b3;
|
||
|
|
--sage: #dae3c1;
|
||
|
|
--success: #2d8a4e;
|
||
|
|
--success-bg: #e8f5e9;
|
||
|
|
--warning: #e6a817;
|
||
|
|
--warning-bg: #fff8e1;
|
||
|
|
--error: #d32f2f;
|
||
|
|
--error-bg: #ffebee;
|
||
|
|
--bg: #f4f6f9;
|
||
|
|
--bg-card: #ffffff;
|
||
|
|
--border: #e2e4e8;
|
||
|
|
--shadow-sm: 0 1px 3px rgba(30,40,68,0.06);
|
||
|
|
--shadow: 0 2px 8px rgba(30,40,68,0.08);
|
||
|
|
--shadow-md: 0 4px 12px rgba(30,40,68,0.10);
|
||
|
|
--shadow-lg: 0 8px 24px rgba(30,40,68,0.12);
|
||
|
|
--radius: 12px;
|
||
|
|
--radius-sm: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg); color: var(--navy); }
|
||
|
|
|
||
|
|
/* === COLLAPSED ICON SIDEBAR === */
|
||
|
|
.sidebar {
|
||
|
|
width: 72px; background: var(--navy);
|
||
|
|
display: flex; flex-direction: column; align-items: center;
|
||
|
|
position: fixed; top: 0; left: 0; bottom: 0; z-index: 10;
|
||
|
|
padding: 16px 0;
|
||
|
|
}
|
||
|
|
.sidebar-logo {
|
||
|
|
width: 44px; height: 44px; background: var(--brand-blue);
|
||
|
|
border-radius: 12px; display: flex; align-items: center; justify-content: center;
|
||
|
|
font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 28px;
|
||
|
|
}
|
||
|
|
.sidebar-icons { flex: 1; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 0 12px; }
|
||
|
|
.sidebar-icon-item {
|
||
|
|
width: 48px; height: 44px; border-radius: 10px;
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
color: var(--navy-40); font-size: 18px; cursor: pointer; transition: all 0.15s;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.sidebar-icon-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
|
||
|
|
.sidebar-icon-item.active {
|
||
|
|
background: rgba(58,123,200,0.2); color: var(--brand-blue);
|
||
|
|
}
|
||
|
|
.sidebar-icon-item .s-badge {
|
||
|
|
position: absolute; top: 4px; right: 4px; width: 16px; height: 16px;
|
||
|
|
background: var(--brand-blue); color: #fff; font-size: 9px; font-weight: 700;
|
||
|
|
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||
|
|
}
|
||
|
|
.sidebar-footer-icon {
|
||
|
|
width: 36px; height: 36px; border-radius: 50%; background: var(--brand-blue);
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
font-size: 13px; font-weight: 700; color: #fff; margin-top: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === MAIN === */
|
||
|
|
.main { margin-left: 72px; }
|
||
|
|
|
||
|
|
/* Top header bar with brand blue gradient */
|
||
|
|
.header-bar {
|
||
|
|
background: linear-gradient(135deg, var(--navy) 0%, #253660 50%, var(--brand-blue) 100%);
|
||
|
|
padding: 24px 36px 80px;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
|
||
|
|
.header-top .h-greeting { font-size: 13px; color: rgba(255,255,255,0.6); }
|
||
|
|
.header-top .h-title { font-size: 26px; font-weight: 800; margin-top: 2px; }
|
||
|
|
.header-actions { display: flex; align-items: center; gap: 12px; }
|
||
|
|
.search-box-dark {
|
||
|
|
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
|
||
|
|
border-radius: 10px; padding: 10px 16px; font-size: 13px;
|
||
|
|
color: #fff; width: 300px; outline: none; font-family: inherit;
|
||
|
|
}
|
||
|
|
.search-box-dark::placeholder { color: rgba(255,255,255,0.5); }
|
||
|
|
.search-box-dark:focus { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); }
|
||
|
|
.btn-white {
|
||
|
|
background: #fff; color: var(--navy); border: none;
|
||
|
|
padding: 10px 20px; border-radius: 10px; font-size: 13px;
|
||
|
|
font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s;
|
||
|
|
}
|
||
|
|
.btn-white:hover { background: rgba(255,255,255,0.9); transform: translateY(-1px); }
|
||
|
|
.icon-btn-ghost {
|
||
|
|
width: 40px; height: 40px; border-radius: 10px;
|
||
|
|
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
color: #fff; font-size: 16px; cursor: pointer; position: relative;
|
||
|
|
}
|
||
|
|
.icon-btn-ghost:hover { background: rgba(255,255,255,0.18); }
|
||
|
|
.notif-dot {
|
||
|
|
position: absolute; top: 6px; right: 6px; width: 7px; height: 7px;
|
||
|
|
background: #ff5252; border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* === CONTENT (overlapping cards) === */
|
||
|
|
.content { padding: 0 36px 36px; margin-top: -56px; position: relative; z-index: 2; }
|
||
|
|
|
||
|
|
/* KPI cards that overlap the header */
|
||
|
|
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
|
||
|
|
.kpi-card {
|
||
|
|
background: var(--bg-card); border-radius: var(--radius); padding: 24px;
|
||
|
|
box-shadow: var(--shadow); transition: all 0.2s; position: relative; overflow: hidden;
|
||
|
|
}
|
||
|
|
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
|
||
|
|
.kpi-card .kpi-accent-bar {
|
||
|
|
position: absolute; top: 0; left: 0; right: 0; height: 3px;
|
||
|
|
}
|
||
|
|
.kpi-card .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
|
||
|
|
.kpi-card .kpi-icon {
|
||
|
|
width: 44px; height: 44px; border-radius: 12px;
|
||
|
|
display: flex; align-items: center; justify-content: center; font-size: 20px;
|
||
|
|
}
|
||
|
|
.kpi-card .kpi-trend { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
|
||
|
|
.kpi-card .kpi-trend.up { color: var(--success); }
|
||
|
|
.kpi-card .kpi-trend.down { color: var(--error); }
|
||
|
|
.kpi-card .kpi-value { font-size: 32px; font-weight: 800; color: var(--navy); letter-spacing: -0.5px; }
|
||
|
|
.kpi-card .kpi-label { font-size: 13px; color: var(--navy-60); margin-top: 4px; font-weight: 500; }
|
||
|
|
|
||
|
|
/* Grid layout */
|
||
|
|
.dashboard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
|
||
|
|
.dashboard-row.three-col { grid-template-columns: 1.4fr 1fr 0.8fr; }
|
||
|
|
|
||
|
|
/* Card */
|
||
|
|
.card {
|
||
|
|
background: var(--bg-card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.card-header {
|
||
|
|
padding: 20px 24px 16px; display: flex; align-items: center; justify-content: space-between;
|
||
|
|
}
|
||
|
|
.card-header h3 { font-size: 15px; font-weight: 700; color: var(--navy); }
|
||
|
|
.card-header .tab-pills { display: flex; gap: 4px; }
|
||
|
|
.tab-pill {
|
||
|
|
padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 600;
|
||
|
|
cursor: pointer; transition: all 0.15s; border: none; font-family: inherit;
|
||
|
|
}
|
||
|
|
.tab-pill.active { background: var(--navy); color: #fff; }
|
||
|
|
.tab-pill:not(.active) { background: var(--bg); color: var(--navy-60); }
|
||
|
|
.tab-pill:not(.active):hover { background: var(--border); }
|
||
|
|
.card-action { font-size: 12px; font-weight: 600; color: var(--brand-blue); cursor: pointer; }
|
||
|
|
.card-body { padding: 0 24px 24px; }
|
||
|
|
|
||
|
|
/* Chart bars - rounded gradient */
|
||
|
|
.chart-flex { display: flex; align-items: flex-end; gap: 8px; height: 180px; padding-bottom: 28px; }
|
||
|
|
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
|
||
|
|
.chart-bar {
|
||
|
|
width: 100%; border-radius: 8px 8px 0 0; transition: all 0.3s; position: relative;
|
||
|
|
}
|
||
|
|
.chart-bar:hover { opacity: 0.85; }
|
||
|
|
.chart-lbl { font-size: 10px; color: var(--navy-40); margin-top: 8px; }
|
||
|
|
|
||
|
|
/* Horizontal progress bars */
|
||
|
|
.h-progress-list { display: flex; flex-direction: column; gap: 16px; }
|
||
|
|
.h-progress-item {}
|
||
|
|
.h-progress-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
|
||
|
|
.h-progress-header .label { font-size: 13px; font-weight: 500; color: var(--navy); }
|
||
|
|
.h-progress-header .value { font-size: 13px; font-weight: 700; color: var(--navy); }
|
||
|
|
.h-bar { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
|
||
|
|
.h-bar .fill { height: 100%; border-radius: 4px; }
|
||
|
|
|
||
|
|
/* Client rows */
|
||
|
|
.client-list {}
|
||
|
|
.client-row {
|
||
|
|
display: flex; align-items: center; gap: 14px;
|
||
|
|
padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
|
||
|
|
}
|
||
|
|
.client-row:last-child { border-bottom: none; }
|
||
|
|
.client-avatar {
|
||
|
|
width: 40px; height: 40px; border-radius: 12px;
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
font-size: 14px; font-weight: 700; color: #fff;
|
||
|
|
}
|
||
|
|
.client-info { flex: 1; }
|
||
|
|
.client-info .c-name { font-size: 13px; font-weight: 600; color: var(--navy); }
|
||
|
|
.client-info .c-detail { font-size: 11px; color: var(--navy-60); margin-top: 1px; }
|
||
|
|
.client-amount { font-size: 14px; font-weight: 700; color: var(--navy); }
|
||
|
|
.status-dot { width: 8px; height: 8px; border-radius: 50%; }
|
||
|
|
|
||
|
|
/* Map grid */
|
||
|
|
.marina-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
|
||
|
|
.marina-slot {
|
||
|
|
aspect-ratio: 1.4; border-radius: 6px; display: flex; align-items: center; justify-content: center;
|
||
|
|
font-size: 10px; font-weight: 700; cursor: pointer; transition: all 0.15s;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
.marina-slot:hover { transform: scale(1.06); box-shadow: var(--shadow-sm); }
|
||
|
|
.marina-slot.occ { background: linear-gradient(135deg, var(--brand-blue), var(--brand-blue-80)); }
|
||
|
|
.marina-slot.avail { background: linear-gradient(135deg, var(--mint), #8fc99b); color: var(--navy); }
|
||
|
|
.marina-slot.res { background: linear-gradient(135deg, var(--purple), #7e6fb8); }
|
||
|
|
.marina-slot.maint { background: var(--navy-40); }
|
||
|
|
|
||
|
|
.marina-legend {
|
||
|
|
display: flex; gap: 14px; margin-top: 14px;
|
||
|
|
}
|
||
|
|
.marina-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--navy-60); }
|
||
|
|
.marina-legend-item .mdot { width: 10px; height: 10px; border-radius: 4px; }
|
||
|
|
|
||
|
|
/* Activity feed */
|
||
|
|
.feed-item {
|
||
|
|
display: flex; gap: 12px; padding: 12px 0;
|
||
|
|
border-bottom: 1px solid rgba(0,0,0,0.04);
|
||
|
|
}
|
||
|
|
.feed-item:last-child { border-bottom: none; }
|
||
|
|
.feed-icon {
|
||
|
|
width: 32px; height: 32px; border-radius: 8px;
|
||
|
|
display: flex; align-items: center; justify-content: center;
|
||
|
|
font-size: 14px; flex-shrink: 0;
|
||
|
|
}
|
||
|
|
.feed-text { font-size: 13px; color: var(--navy); line-height: 1.5; }
|
||
|
|
.feed-text strong { font-weight: 600; }
|
||
|
|
.feed-time { font-size: 11px; color: var(--navy-40); margin-top: 2px; }
|
||
|
|
|
||
|
|
/* Status badge */
|
||
|
|
.status-badge {
|
||
|
|
display: inline-block; padding: 4px 12px; border-radius: 20px;
|
||
|
|
font-size: 11px; font-weight: 700;
|
||
|
|
}
|
||
|
|
.status-badge.active { background: var(--success-bg); color: var(--success); }
|
||
|
|
.status-badge.pending { background: var(--warning-bg); color: var(--warning); }
|
||
|
|
.status-badge.overdue { background: var(--error-bg); color: var(--error); }
|
||
|
|
|
||
|
|
.mockup-label {
|
||
|
|
position: fixed; bottom: 16px; right: 16px; z-index: 100;
|
||
|
|
background: var(--navy); color: #fff; padding: 8px 16px;
|
||
|
|
border-radius: 10px; font-size: 12px; font-weight: 600;
|
||
|
|
box-shadow: var(--shadow-lg);
|
||
|
|
}
|
||
|
|
.mockup-label span { color: var(--brand-blue-60); font-weight: 400; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- ICON SIDEBAR -->
|
||
|
|
<aside class="sidebar">
|
||
|
|
<div class="sidebar-logo">PN</div>
|
||
|
|
<div class="sidebar-icons">
|
||
|
|
<div class="sidebar-icon-item active">■</div>
|
||
|
|
<div class="sidebar-icon-item">♦<span class="s-badge">5</span></div>
|
||
|
|
<div class="sidebar-icon-item">⚓</div>
|
||
|
|
<div class="sidebar-icon-item">✉</div>
|
||
|
|
<div class="sidebar-icon-item">✎</div>
|
||
|
|
<div class="sidebar-icon-item">★</div>
|
||
|
|
<div class="sidebar-icon-item">📄</div>
|
||
|
|
<div class="sidebar-icon-item">📈</div>
|
||
|
|
<div class="sidebar-icon-item">⚙</div>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-footer-icon">MC</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<div class="main">
|
||
|
|
<!-- GRADIENT HEADER -->
|
||
|
|
<div class="header-bar">
|
||
|
|
<div class="header-top">
|
||
|
|
<div>
|
||
|
|
<div class="h-greeting">Welcome back, Matt</div>
|
||
|
|
<div class="h-title">Marina Dashboard</div>
|
||
|
|
</div>
|
||
|
|
<div class="header-actions">
|
||
|
|
<input class="search-box-dark" type="text" placeholder="Search clients, berths, contracts...">
|
||
|
|
<div class="icon-btn-ghost">🔔<span class="notif-dot"></span></div>
|
||
|
|
<button class="btn-white">+ New Client</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CONTENT -->
|
||
|
|
<div class="content">
|
||
|
|
<!-- KPIs overlapping header -->
|
||
|
|
<div class="kpi-grid">
|
||
|
|
<div class="kpi-card">
|
||
|
|
<div class="kpi-accent-bar" style="background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-80));"></div>
|
||
|
|
<div class="kpi-top">
|
||
|
|
<div class="kpi-icon" style="background:var(--brand-blue-20);color:var(--brand-blue);">⚓</div>
|
||
|
|
<div class="kpi-trend up">▲ 4.2%</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-value">87%</div>
|
||
|
|
<div class="kpi-label">Berth Occupancy</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-card">
|
||
|
|
<div class="kpi-accent-bar" style="background:linear-gradient(90deg,var(--navy),var(--navy-80));"></div>
|
||
|
|
<div class="kpi-top">
|
||
|
|
<div class="kpi-icon" style="background:rgba(30,40,68,0.08);color:var(--navy);">♦</div>
|
||
|
|
<div class="kpi-trend up">▲ 12</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-value">248</div>
|
||
|
|
<div class="kpi-label">Active Clients</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-card">
|
||
|
|
<div class="kpi-accent-bar" style="background:linear-gradient(90deg,var(--teal),var(--mint));"></div>
|
||
|
|
<div class="kpi-top">
|
||
|
|
<div class="kpi-icon" style="background:rgba(131,170,177,0.12);color:var(--teal);">💰</div>
|
||
|
|
<div class="kpi-trend up">▲ 8.1%</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-value">$2.4M</div>
|
||
|
|
<div class="kpi-label">Revenue YTD</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-card">
|
||
|
|
<div class="kpi-accent-bar" style="background:linear-gradient(90deg,var(--purple),#8b7ec4);"></div>
|
||
|
|
<div class="kpi-top">
|
||
|
|
<div class="kpi-icon" style="background:rgba(104,90,163,0.1);color:var(--purple);">✉</div>
|
||
|
|
<div class="kpi-trend up">▲ 5</div>
|
||
|
|
</div>
|
||
|
|
<div class="kpi-value">14</div>
|
||
|
|
<div class="kpi-label">Open Interests</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Revenue + Occupancy breakdown -->
|
||
|
|
<div class="dashboard-row three-col">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<h3>Revenue</h3>
|
||
|
|
<div class="tab-pills">
|
||
|
|
<button class="tab-pill">Week</button>
|
||
|
|
<button class="tab-pill active">Month</button>
|
||
|
|
<button class="tab-pill">Year</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="chart-flex">
|
||
|
|
<div class="chart-col"><div class="chart-bar" style="height:35%;background:linear-gradient(180deg,var(--brand-blue-60),var(--brand-blue-20));"></div><span class="chart-lbl">Sep</span></div>
|
||
|
|
<div class="chart-col"><div class="chart-bar" style="height:42%;background:linear-gradient(180deg,var(--brand-blue-60),var(--brand-blue-20));"></div><span class="chart-lbl">Oct</span></div>
|
||
|
|
<div class="chart-col"><div class="chart-bar" style="height:38%;background:linear-gradient(180deg,var(--brand-blue-60),var(--brand-blue-20));"></div><span class="chart-lbl">Nov</span></div>
|
||
|
|
<div class="chart-col"><div class="chart-bar" style="height:50%;background:linear-gradient(180deg,var(--brand-blue-60),var(--brand-blue-20));"></div><span class="chart-lbl">Dec</span></div>
|
||
|
|
<div class="chart-col"><div class="chart-bar" style="height:65%;background:linear-gradient(180deg,var(--brand-blue),var(--brand-blue-60));"></div><span class="chart-lbl">Jan</span></div>
|
||
|
|
<div class="chart-col"><div class="chart-bar" style="height:75%;background:linear-gradient(180deg,var(--brand-blue),var(--brand-blue-60));"></div><span class="chart-lbl">Feb</span></div>
|
||
|
|
<div class="chart-col"><div class="chart-bar" style="height:90%;background:linear-gradient(180deg,var(--navy),var(--brand-blue));"></div><span class="chart-lbl">Mar</span></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header"><h3>Occupancy Breakdown</h3></div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="h-progress-list">
|
||
|
|
<div class="h-progress-item">
|
||
|
|
<div class="h-progress-header"><span class="label">Occupied</span><span class="value">17 berths</span></div>
|
||
|
|
<div class="h-bar"><div class="fill" style="width:71%;background:linear-gradient(90deg,var(--brand-blue),var(--brand-blue-80));"></div></div>
|
||
|
|
</div>
|
||
|
|
<div class="h-progress-item">
|
||
|
|
<div class="h-progress-header"><span class="label">Available</span><span class="value">4 berths</span></div>
|
||
|
|
<div class="h-bar"><div class="fill" style="width:17%;background:linear-gradient(90deg,var(--mint),#8fc99b);"></div></div>
|
||
|
|
</div>
|
||
|
|
<div class="h-progress-item">
|
||
|
|
<div class="h-progress-header"><span class="label">Reserved</span><span class="value">2 berths</span></div>
|
||
|
|
<div class="h-bar"><div class="fill" style="width:8%;background:linear-gradient(90deg,var(--purple),#8b7ec4);"></div></div>
|
||
|
|
</div>
|
||
|
|
<div class="h-progress-item">
|
||
|
|
<div class="h-progress-header"><span class="label">Maintenance</span><span class="value">1 berth</span></div>
|
||
|
|
<div class="h-bar"><div class="fill" style="width:4%;background:var(--navy-40);"></div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header"><h3>Pending</h3></div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div style="display:flex;flex-direction:column;gap:14px;">
|
||
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--warning-bg);border-radius:var(--radius-sm);">
|
||
|
|
<div><div style="font-size:13px;font-weight:600;color:var(--navy);">3 Contracts</div><div style="font-size:11px;color:var(--navy-60);">Awaiting signature</div></div>
|
||
|
|
<span style="font-size:18px;">✎</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--error-bg);border-radius:var(--radius-sm);">
|
||
|
|
<div><div style="font-size:13px;font-weight:600;color:var(--navy);">1 Invoice</div><div style="font-size:11px;color:var(--navy-60);">Overdue 14 days</div></div>
|
||
|
|
<span style="font-size:18px;">💰</span>
|
||
|
|
</div>
|
||
|
|
<div style="display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--brand-blue-20);border-radius:var(--radius-sm);">
|
||
|
|
<div><div style="font-size:13px;font-weight:600;color:var(--navy);">2 Interests</div><div style="font-size:11px;color:var(--navy-60);">Needs follow-up</div></div>
|
||
|
|
<span style="font-size:18px;">✉</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Marina Map + Clients + Activity -->
|
||
|
|
<div class="dashboard-row three-col">
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">
|
||
|
|
<h3>Marina Map</h3>
|
||
|
|
<a class="card-action">Expand →</a>
|
||
|
|
</div>
|
||
|
|
<div class="card-body">
|
||
|
|
<div class="marina-grid">
|
||
|
|
<div class="marina-slot occ">A1</div>
|
||
|
|
<div class="marina-slot occ">A2</div>
|
||
|
|
<div class="marina-slot avail">A3</div>
|
||
|
|
<div class="marina-slot occ">A4</div>
|
||
|
|
<div class="marina-slot res">A5</div>
|
||
|
|
<div class="marina-slot occ">A6</div>
|
||
|
|
<div class="marina-slot occ">B1</div>
|
||
|
|
<div class="marina-slot avail">B2</div>
|
||
|
|
<div class="marina-slot occ">B3</div>
|
||
|
|
<div class="marina-slot occ">B4</div>
|
||
|
|
<div class="marina-slot occ">B5</div>
|
||
|
|
<div class="marina-slot res">B6</div>
|
||
|
|
<div class="marina-slot occ">C1</div>
|
||
|
|
<div class="marina-slot occ">C2</div>
|
||
|
|
<div class="marina-slot occ">C3</div>
|
||
|
|
<div class="marina-slot avail">C4</div>
|
||
|
|
<div class="marina-slot occ">C5</div>
|
||
|
|
<div class="marina-slot maint">C6</div>
|
||
|
|
<div class="marina-slot avail">D1</div>
|
||
|
|
<div class="marina-slot occ">D2</div>
|
||
|
|
<div class="marina-slot occ">D3</div>
|
||
|
|
<div class="marina-slot occ">D4</div>
|
||
|
|
<div class="marina-slot occ">D5</div>
|
||
|
|
<div class="marina-slot occ">D6</div>
|
||
|
|
</div>
|
||
|
|
<div class="marina-legend">
|
||
|
|
<div class="marina-legend-item"><div class="mdot" style="background:var(--brand-blue);"></div> Occupied (17)</div>
|
||
|
|
<div class="marina-legend-item"><div class="mdot" style="background:var(--mint);"></div> Available (4)</div>
|
||
|
|
<div class="marina-legend-item"><div class="mdot" style="background:var(--purple);"></div> Reserved (2)</div>
|
||
|
|
<div class="marina-legend-item"><div class="mdot" style="background:var(--navy-40);"></div> Maint (1)</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header"><h3>Top Clients</h3><a class="card-action">View all</a></div>
|
||
|
|
<div class="card-body" style="padding-top:4px;">
|
||
|
|
<div class="client-list">
|
||
|
|
<div class="client-row">
|
||
|
|
<div class="client-avatar" style="background:linear-gradient(135deg,var(--brand-blue),var(--navy));">MT</div>
|
||
|
|
<div class="client-info"><div class="c-name">Marcus Thompson</div><div class="c-detail">72ft · B-14 · Active</div></div>
|
||
|
|
<div class="client-amount">$86.4K</div>
|
||
|
|
</div>
|
||
|
|
<div class="client-row">
|
||
|
|
<div class="client-avatar" style="background:linear-gradient(135deg,var(--teal),var(--navy));">RH</div>
|
||
|
|
<div class="client-info"><div class="c-name">Reef Holdings Ltd</div><div class="c-detail">85ft · A-02 · <span style="color:var(--error);">Overdue</span></div></div>
|
||
|
|
<div class="client-amount">$124K</div>
|
||
|
|
</div>
|
||
|
|
<div class="client-row">
|
||
|
|
<div class="client-avatar" style="background:linear-gradient(135deg,var(--purple),var(--navy));">JB</div>
|
||
|
|
<div class="client-info"><div class="c-name">J. Beaumont</div><div class="c-detail">55ft · C-05 · Renewal</div></div>
|
||
|
|
<div class="client-amount">$67.2K</div>
|
||
|
|
</div>
|
||
|
|
<div class="client-row">
|
||
|
|
<div class="client-avatar" style="background:linear-gradient(135deg,var(--mint),var(--teal));">WC</div>
|
||
|
|
<div class="client-info"><div class="c-name">Windward Capital</div><div class="c-detail">90ft · A-06 · Active</div></div>
|
||
|
|
<div class="client-amount">$142K</div>
|
||
|
|
</div>
|
||
|
|
<div class="client-row">
|
||
|
|
<div class="client-avatar" style="background:linear-gradient(135deg,var(--brand-blue),var(--purple));">AV</div>
|
||
|
|
<div class="client-info"><div class="c-name">Alessandra Voss</div><div class="c-detail">60ft · New interest</div></div>
|
||
|
|
<div class="client-amount">TBD</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header"><h3>Activity</h3></div>
|
||
|
|
<div class="card-body" style="padding-top:4px;">
|
||
|
|
<div class="feed-item">
|
||
|
|
<div class="feed-icon" style="background:var(--success-bg);color:var(--success);">✓</div>
|
||
|
|
<div><div class="feed-text"><strong>Thompson</strong> signed B-14</div><div class="feed-time">12 min</div></div>
|
||
|
|
</div>
|
||
|
|
<div class="feed-item">
|
||
|
|
<div class="feed-icon" style="background:var(--brand-blue-20);color:var(--brand-blue);">✉</div>
|
||
|
|
<div><div class="feed-text">New interest — <strong>Voss</strong></div><div class="feed-time">1 hr</div></div>
|
||
|
|
</div>
|
||
|
|
<div class="feed-item">
|
||
|
|
<div class="feed-icon" style="background:var(--error-bg);color:var(--error);">!</div>
|
||
|
|
<div><div class="feed-text">Invoice #1047 overdue</div><div class="feed-time">3 hrs</div></div>
|
||
|
|
</div>
|
||
|
|
<div class="feed-item">
|
||
|
|
<div class="feed-icon" style="background:rgba(104,90,163,0.1);color:var(--purple);">↻</div>
|
||
|
|
<div><div class="feed-text"><strong>Beaumont</strong> renewal</div><div class="feed-time">Yesterday</div></div>
|
||
|
|
</div>
|
||
|
|
<div class="feed-item">
|
||
|
|
<div class="feed-icon" style="background:var(--success-bg);color:var(--success);">$</div>
|
||
|
|
<div><div class="feed-text"><strong>Windward</strong> paid $42.5K</div><div class="feed-time">Yesterday</div></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mockup-label">Mockup C <span>— Bold Modern</span></div>
|
||
|
|
</body>
|
||
|
|
</html>
|