391 lines
22 KiB
HTML
391 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Port Nimara CRM — Design System Preview</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--navy: #1e2844;
|
||
|
|
--brand: #3a7bc8;
|
||
|
|
--navy-80: #474e66;
|
||
|
|
--navy-60: #71768a;
|
||
|
|
--navy-40: #9ea1af;
|
||
|
|
--navy-20: #cdcfd6;
|
||
|
|
--brand-80: #6196d3;
|
||
|
|
--brand-60: #89b0de;
|
||
|
|
--brand-40: #b1cbe9;
|
||
|
|
--brand-20: #d8e5f4;
|
||
|
|
--sage: #dae3c1;
|
||
|
|
--mint: #add5b3;
|
||
|
|
--teal: #83aab1;
|
||
|
|
--purple: #685aa3;
|
||
|
|
--success: #2d8a4e;
|
||
|
|
--warning: #e6a817;
|
||
|
|
--error: #d32f2f;
|
||
|
|
--bg: #ffffff;
|
||
|
|
--bg-secondary: #f8f9fa;
|
||
|
|
--bg-tertiary: #f1f3f5;
|
||
|
|
}
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body { font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif; color: var(--navy); background: var(--bg); line-height: 1.5; }
|
||
|
|
.page { max-width: 1280px; margin: 0 auto; padding: 40px 24px; }
|
||
|
|
h1 { font-size: 30px; font-weight: 700; margin-bottom: 8px; }
|
||
|
|
h2 { font-size: 20px; font-weight: 600; margin: 40px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--navy-20); }
|
||
|
|
h3 { font-size: 16px; font-weight: 600; margin: 24px 0 12px; }
|
||
|
|
p { color: var(--navy-80); margin-bottom: 16px; font-size: 14px; }
|
||
|
|
.subtitle { color: var(--navy-60); font-size: 14px; }
|
||
|
|
|
||
|
|
/* Color Grid */
|
||
|
|
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; margin: 16px 0; }
|
||
|
|
.color-card { border-radius: 8px; overflow: hidden; border: 1px solid var(--navy-20); }
|
||
|
|
.color-swatch { height: 80px; }
|
||
|
|
.color-info { padding: 10px 12px; font-size: 12px; }
|
||
|
|
.color-info strong { display: block; font-size: 13px; margin-bottom: 2px; }
|
||
|
|
.color-info code { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--navy-60); }
|
||
|
|
|
||
|
|
/* Type Scale */
|
||
|
|
.type-row { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bg-tertiary); }
|
||
|
|
.type-label { width: 80px; font-size: 11px; color: var(--navy-60); font-family: monospace; flex-shrink: 0; }
|
||
|
|
|
||
|
|
/* Button Grid */
|
||
|
|
.btn-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; align-items: center; }
|
||
|
|
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; font-family: inherit; cursor: pointer; border: none; transition: all 150ms; }
|
||
|
|
.btn-primary { background: var(--brand); color: white; }
|
||
|
|
.btn-primary:hover { background: #2f6ab5; }
|
||
|
|
.btn-secondary { background: var(--navy); color: white; }
|
||
|
|
.btn-secondary:hover { background: #171f35; }
|
||
|
|
.btn-outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy-20); }
|
||
|
|
.btn-outline:hover { background: var(--bg-tertiary); border-color: var(--navy-40); }
|
||
|
|
.btn-ghost { background: transparent; color: var(--brand); }
|
||
|
|
.btn-ghost:hover { background: var(--brand-20); }
|
||
|
|
.btn-destructive { background: var(--error); color: white; }
|
||
|
|
.btn-sm { padding: 5px 12px; font-size: 13px; }
|
||
|
|
.btn-lg { padding: 11px 28px; font-size: 15px; }
|
||
|
|
|
||
|
|
/* Badge */
|
||
|
|
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 12px; font-weight: 500; }
|
||
|
|
|
||
|
|
/* Card */
|
||
|
|
.card { background: white; border: 1px solid var(--navy-20); border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(30,40,68,0.10), 0 1px 2px rgba(30,40,68,0.06); }
|
||
|
|
|
||
|
|
/* Table */
|
||
|
|
.demo-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
|
||
|
|
.demo-table th { text-align: left; padding: 10px 12px; background: var(--bg-tertiary); font-weight: 500; font-size: 13px; color: var(--navy-80); border-bottom: 2px solid var(--navy-20); }
|
||
|
|
.demo-table td { padding: 10px 12px; border-bottom: 1px solid var(--bg-tertiary); }
|
||
|
|
.demo-table tr:hover td { background: var(--brand-20); }
|
||
|
|
|
||
|
|
/* Status dot */
|
||
|
|
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
|
||
|
|
|
||
|
|
/* Input */
|
||
|
|
.input { padding: 8px 12px; border: 1.5px solid var(--navy-20); border-radius: 6px; font-size: 14px; font-family: inherit; color: var(--navy); width: 240px; outline: none; transition: border 150ms; }
|
||
|
|
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(58,123,200,0.15); }
|
||
|
|
.input::placeholder { color: var(--navy-60); }
|
||
|
|
.label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
|
||
|
|
|
||
|
|
/* Sidebar Preview */
|
||
|
|
.sidebar-preview { width: 256px; background: var(--navy); border-radius: 12px; padding: 20px 0; color: var(--navy-20); }
|
||
|
|
.sidebar-logo { padding: 0 20px 20px; border-bottom: 1px solid var(--navy-80); margin-bottom: 8px; }
|
||
|
|
.sidebar-logo span { font-size: 15px; font-weight: 600; color: white; letter-spacing: 0.5px; }
|
||
|
|
.sidebar-item { display: flex; align-items: center; gap: 10px; padding: 9px 20px; font-size: 14px; cursor: pointer; transition: background 150ms; }
|
||
|
|
.sidebar-item:hover { background: #171f35; }
|
||
|
|
.sidebar-item.active { background: rgba(58,123,200,0.12); color: white; }
|
||
|
|
.sidebar-item .icon { width: 18px; height: 18px; border-radius: 3px; background: var(--teal); opacity: 0.7; flex-shrink: 0; }
|
||
|
|
.sidebar-item.active .icon { background: var(--brand); opacity: 1; }
|
||
|
|
.sidebar-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; padding: 16px 20px 6px; color: var(--navy-60); }
|
||
|
|
|
||
|
|
/* Dashboard Card */
|
||
|
|
.stat-card { background: white; border: 1px solid var(--navy-20); border-radius: 12px; padding: 20px; }
|
||
|
|
.stat-card .stat-label { font-size: 13px; color: var(--navy-60); margin-bottom: 4px; }
|
||
|
|
.stat-card .stat-value { font-size: 30px; font-weight: 700; color: var(--navy); }
|
||
|
|
.stat-card .stat-change { font-size: 12px; margin-top: 4px; }
|
||
|
|
.stat-change.up { color: var(--success); }
|
||
|
|
.stat-change.down { color: var(--error); }
|
||
|
|
|
||
|
|
/* Flex helpers */
|
||
|
|
.flex { display: flex; }
|
||
|
|
.flex-wrap { flex-wrap: wrap; }
|
||
|
|
.gap-4 { gap: 16px; }
|
||
|
|
.gap-3 { gap: 12px; }
|
||
|
|
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
||
|
|
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
||
|
|
|
||
|
|
/* Toast Preview */
|
||
|
|
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; font-size: 13px; box-shadow: 0 10px 15px rgba(30,40,68,0.10); border: 1px solid; max-width: 360px; }
|
||
|
|
.toast-success { background: #e8f5e9; border-color: #a5d6a7; color: #1b5e20; }
|
||
|
|
.toast-warning { background: #fff8e1; border-color: #ffe082; color: #e65100; }
|
||
|
|
.toast-error { background: #ffebee; border-color: #ef9a9a; color: #b71c1c; }
|
||
|
|
.toast-info { background: var(--brand-20); border-color: var(--brand-60); color: #1a4e8a; }
|
||
|
|
|
||
|
|
/* Berth status bar */
|
||
|
|
.berth-bar { display: flex; border-radius: 6px; overflow: hidden; height: 32px; margin: 16px 0; }
|
||
|
|
.berth-bar div { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: white; }
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.grid-2, .grid-4 { grid-template-columns: 1fr; }
|
||
|
|
.sidebar-preview { width: 100%; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="page">
|
||
|
|
|
||
|
|
<h1>Port Nimara CRM — Design System</h1>
|
||
|
|
<p class="subtitle">Based on the official Port Nimara Brand Guidelines. All tokens derived from PMS 553, PMS 660, and the secondary palette.</p>
|
||
|
|
|
||
|
|
<!-- PRIMARY COLORS -->
|
||
|
|
<h2>1. Primary Brand Colors</h2>
|
||
|
|
<div class="color-grid">
|
||
|
|
<div class="color-card">
|
||
|
|
<div class="color-swatch" style="background:#1e2844"></div>
|
||
|
|
<div class="color-info"><strong>PMS 553 — Navy</strong><code>#1e2844</code><br>Headings, sidebar, dark backgrounds</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-card">
|
||
|
|
<div class="color-swatch" style="background:#3a7bc8"></div>
|
||
|
|
<div class="color-info"><strong>PMS 660 — Brand Blue</strong><code>#3a7bc8</code><br>Primary actions, links, focus</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-card">
|
||
|
|
<div class="color-swatch" style="background:#000000"></div>
|
||
|
|
<div class="color-info"><strong>Black</strong><code>#000000</code><br>Maximum contrast text</div>
|
||
|
|
</div>
|
||
|
|
<div class="color-card">
|
||
|
|
<div class="color-swatch" style="background:#ffffff; border-bottom: 1px solid #cdcfd6"></div>
|
||
|
|
<div class="color-info"><strong>White</strong><code>#ffffff</code><br>Page backgrounds</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- NAVY TINTS -->
|
||
|
|
<h3>Navy Tint Ladder (PMS 553)</h3>
|
||
|
|
<div class="color-grid">
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#1e2844"></div><div class="color-info"><strong>100%</strong><code>#1e2844</code></div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#474e66"></div><div class="color-info"><strong>80%</strong><code>#474e66</code></div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#71768a"></div><div class="color-info"><strong>60%</strong><code>#71768a</code></div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#9ea1af"></div><div class="color-info"><strong>40%</strong><code>#9ea1af</code></div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#cdcfd6"></div><div class="color-info"><strong>20%</strong><code>#cdcfd6</code></div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Brand Blue Tint Ladder (PMS 660)</h3>
|
||
|
|
<div class="color-grid">
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#3a7bc8"></div><div class="color-info"><strong>100%</strong><code>#3a7bc8</code></div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#6196d3"></div><div class="color-info"><strong>80%</strong><code>#6196d3</code></div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#89b0de"></div><div class="color-info"><strong>60%</strong><code>#89b0de</code></div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#b1cbe9"></div><div class="color-info"><strong>40%</strong><code>#b1cbe9</code></div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#d8e5f4"></div><div class="color-info"><strong>20%</strong><code>#d8e5f4</code></div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SECONDARY COLORS -->
|
||
|
|
<h2>2. Secondary Palette</h2>
|
||
|
|
<div class="color-grid">
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#dae3c1"></div><div class="color-info"><strong>PMS 7485 — Sage</strong><code>#dae3c1</code><br>Soft backgrounds, low priority</div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#add5b3"></div><div class="color-info"><strong>PMS 344 — Mint</strong><code>#add5b3</code><br>Available, success hints</div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#83aab1"></div><div class="color-info"><strong>PMS 5493 — Teal</strong><code>#83aab1</code><br>Secondary info, nav icons</div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#685aa3"></div><div class="color-info"><strong>PMS 2725 — Purple</strong><code>#685aa3</code><br>Premium, reserved, highlights</div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- STATUS COLORS -->
|
||
|
|
<h2>3. Status Colors</h2>
|
||
|
|
<div class="color-grid">
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#2d8a4e"></div><div class="color-info"><strong>Success</strong><code>#2d8a4e</code><br>Active, paid, confirmed, signed</div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#e6a817"></div><div class="color-info"><strong>Warning</strong><code>#e6a817</code><br>Pending, expiring, attention</div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#d32f2f"></div><div class="color-info"><strong>Error</strong><code>#d32f2f</code><br>Overdue, failed, rejected</div></div>
|
||
|
|
<div class="color-card"><div class="color-swatch" style="background:#3a7bc8"></div><div class="color-info"><strong>Info</strong><code>#3a7bc8</code><br>Informational (brand blue)</div></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- BERTH STATUS -->
|
||
|
|
<h3>Berth Status Colors</h3>
|
||
|
|
<div class="berth-bar">
|
||
|
|
<div style="background:#add5b3; width:30%; color:#1e2844">Available</div>
|
||
|
|
<div style="background:#3a7bc8; width:35%">Occupied</div>
|
||
|
|
<div style="background:#685aa3; width:15%">Reserved</div>
|
||
|
|
<div style="background:#e6a817; width:10%; color:#1e2844">Maint.</div>
|
||
|
|
<div style="background:#999; width:10%">N/A</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TYPOGRAPHY -->
|
||
|
|
<h2>4. Typography (Inter)</h2>
|
||
|
|
<div style="margin: 16px 0">
|
||
|
|
<div class="type-row"><span class="type-label">text-3xl</span><span style="font-size:30px;font-weight:700">Dashboard overview</span></div>
|
||
|
|
<div class="type-row"><span class="type-label">text-2xl</span><span style="font-size:24px;font-weight:700">Client Details</span></div>
|
||
|
|
<div class="type-row"><span class="type-label">text-xl</span><span style="font-size:20px;font-weight:600">Berth Management</span></div>
|
||
|
|
<div class="type-row"><span class="type-label">text-lg</span><span style="font-size:18px;font-weight:600">Recent Activity</span></div>
|
||
|
|
<div class="type-row"><span class="type-label">text-base</span><span style="font-size:16px">This is standard body text used throughout the CRM interface.</span></div>
|
||
|
|
<div class="type-row"><span class="type-label">text-sm</span><span style="font-size:14px;color:#474e66">Table cell content, secondary descriptions, form labels</span></div>
|
||
|
|
<div class="type-row"><span class="type-label">text-xs</span><span style="font-size:12px;color:#71768a">Timestamps, fine print, metadata</span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- BUTTONS -->
|
||
|
|
<h2>5. Buttons</h2>
|
||
|
|
<div class="btn-grid">
|
||
|
|
<button class="btn btn-primary">Primary</button>
|
||
|
|
<button class="btn btn-secondary">Secondary</button>
|
||
|
|
<button class="btn btn-outline">Outline</button>
|
||
|
|
<button class="btn btn-ghost">Ghost</button>
|
||
|
|
<button class="btn btn-destructive">Destructive</button>
|
||
|
|
</div>
|
||
|
|
<h3>Sizes</h3>
|
||
|
|
<div class="btn-grid">
|
||
|
|
<button class="btn btn-primary btn-sm">Small</button>
|
||
|
|
<button class="btn btn-primary">Default</button>
|
||
|
|
<button class="btn btn-primary btn-lg">Large</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- BADGES -->
|
||
|
|
<h2>6. Badges & Status Indicators</h2>
|
||
|
|
<div class="flex flex-wrap gap-3" style="display:flex;flex-wrap:wrap;gap:10px;margin:16px 0">
|
||
|
|
<span class="badge" style="background:#e8f5e9;color:#1b5e20"><span class="status-dot" style="background:#2d8a4e"></span>Active</span>
|
||
|
|
<span class="badge" style="background:#fff8e1;color:#e65100"><span class="status-dot" style="background:#e6a817"></span>Pending</span>
|
||
|
|
<span class="badge" style="background:#ffebee;color:#b71c1c"><span class="status-dot" style="background:#d32f2f"></span>Overdue</span>
|
||
|
|
<span class="badge" style="background:var(--brand-20);color:#1a4e8a"><span class="status-dot" style="background:var(--brand)"></span>In Progress</span>
|
||
|
|
<span class="badge" style="background:#f3f0fa;color:#4d4280"><span class="status-dot" style="background:var(--purple)"></span>Reserved</span>
|
||
|
|
<span class="badge" style="background:#edf6ee;color:#1b5e20"><span class="status-dot" style="background:var(--mint)"></span>Available</span>
|
||
|
|
<span class="badge" style="background:var(--bg-tertiary);color:var(--navy-60)"><span class="status-dot" style="background:#999"></span>Inactive</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- INTEREST STAGE PIPELINE -->
|
||
|
|
<h3>Interest Stage Pipeline</h3>
|
||
|
|
<div style="display:flex;gap:4px;margin:16px 0">
|
||
|
|
<div style="flex:1;padding:8px 12px;background:var(--sage);border-radius:6px 0 0 6px;text-align:center;font-size:12px;font-weight:600;color:var(--navy)">Lead</div>
|
||
|
|
<div style="flex:1;padding:8px 12px;background:var(--teal);text-align:center;font-size:12px;font-weight:600;color:white">Contacted</div>
|
||
|
|
<div style="flex:1;padding:8px 12px;background:var(--brand);text-align:center;font-size:12px;font-weight:600;color:white">Qualified</div>
|
||
|
|
<div style="flex:1;padding:8px 12px;background:var(--purple);text-align:center;font-size:12px;font-weight:600;color:white">Negotiating</div>
|
||
|
|
<div style="flex:1;padding:8px 12px;background:var(--success);border-radius:0 6px 6px 0;text-align:center;font-size:12px;font-weight:600;color:white">Won</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- FORM ELEMENTS -->
|
||
|
|
<h2>7. Form Elements</h2>
|
||
|
|
<div class="grid-2" style="margin:16px 0">
|
||
|
|
<div>
|
||
|
|
<label class="label">Client Name</label>
|
||
|
|
<input class="input" placeholder="Enter client name..." style="width:100%">
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<label class="label">Email Address</label>
|
||
|
|
<input class="input" type="email" placeholder="client@example.com" style="width:100%">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- CARDS -->
|
||
|
|
<h2>8. Cards & Dashboard Stats</h2>
|
||
|
|
<div class="grid-4" style="margin:16px 0">
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-label">Active Clients</div>
|
||
|
|
<div class="stat-value">247</div>
|
||
|
|
<div class="stat-change up">+12 this month</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-label">Berth Occupancy</div>
|
||
|
|
<div class="stat-value">84%</div>
|
||
|
|
<div class="stat-change up">+3% vs last quarter</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-label">Open Interests</div>
|
||
|
|
<div class="stat-value">38</div>
|
||
|
|
<div class="stat-change down">-5 vs last month</div>
|
||
|
|
</div>
|
||
|
|
<div class="stat-card">
|
||
|
|
<div class="stat-label">Revenue (MTD)</div>
|
||
|
|
<div class="stat-value">€1.2M</div>
|
||
|
|
<div class="stat-change up">+8% vs target</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TABLE -->
|
||
|
|
<h2>9. Data Table</h2>
|
||
|
|
<div style="border:1px solid var(--navy-20);border-radius:12px;overflow:hidden;margin:16px 0">
|
||
|
|
<table class="demo-table">
|
||
|
|
<thead>
|
||
|
|
<tr><th>Client</th><th>Berth</th><th>Status</th><th>Tenure Expires</th><th>Annual Fee</th></tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Harrison Yacht Group</strong></td>
|
||
|
|
<td>A-14</td>
|
||
|
|
<td><span class="badge" style="background:#e8f5e9;color:#1b5e20"><span class="status-dot" style="background:#2d8a4e"></span>Active</span></td>
|
||
|
|
<td>Dec 2027</td>
|
||
|
|
<td>€185,000</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Azure Marine Ltd</strong></td>
|
||
|
|
<td>B-07</td>
|
||
|
|
<td><span class="badge" style="background:#fff8e1;color:#e65100"><span class="status-dot" style="background:#e6a817"></span>Expiring</span></td>
|
||
|
|
<td>Apr 2026</td>
|
||
|
|
<td>€142,000</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Mediterranean Charters</strong></td>
|
||
|
|
<td>C-22</td>
|
||
|
|
<td><span class="badge" style="background:var(--brand-20);color:#1a4e8a"><span class="status-dot" style="background:var(--brand)"></span>Negotiating</span></td>
|
||
|
|
<td>—</td>
|
||
|
|
<td>€210,000</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td><strong>Pacific Ventures</strong></td>
|
||
|
|
<td>A-03</td>
|
||
|
|
<td><span class="badge" style="background:#ffebee;color:#b71c1c"><span class="status-dot" style="background:#d32f2f"></span>Overdue</span></td>
|
||
|
|
<td>Jan 2026</td>
|
||
|
|
<td>€165,000</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- TOAST NOTIFICATIONS -->
|
||
|
|
<h2>10. Toast Notifications</h2>
|
||
|
|
<div style="display:flex;flex-direction:column;gap:10px;margin:16px 0">
|
||
|
|
<div class="toast toast-success">✓ EOI document sent to Harrison Yacht Group for signing</div>
|
||
|
|
<div class="toast toast-warning">⚠ Azure Marine tenure expires in 45 days</div>
|
||
|
|
<div class="toast toast-error">✗ Failed to sync calendar — check Google API connection</div>
|
||
|
|
<div class="toast toast-info">ℹ 3 new emails received for Mediterranean Charters</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SIDEBAR -->
|
||
|
|
<h2>11. Sidebar Navigation</h2>
|
||
|
|
<div style="margin:16px 0">
|
||
|
|
<div class="sidebar-preview">
|
||
|
|
<div class="sidebar-logo">
|
||
|
|
<span>PORT NIMARA</span>
|
||
|
|
</div>
|
||
|
|
<div class="sidebar-section">Main</div>
|
||
|
|
<div class="sidebar-item active"><div class="icon"></div>Dashboard</div>
|
||
|
|
<div class="sidebar-item"><div class="icon"></div>Clients</div>
|
||
|
|
<div class="sidebar-item"><div class="icon"></div>Berths</div>
|
||
|
|
<div class="sidebar-item"><div class="icon"></div>Interests</div>
|
||
|
|
<div class="sidebar-section">Operations</div>
|
||
|
|
<div class="sidebar-item"><div class="icon"></div>Email</div>
|
||
|
|
<div class="sidebar-item"><div class="icon"></div>Documents</div>
|
||
|
|
<div class="sidebar-item"><div class="icon"></div>Expenses</div>
|
||
|
|
<div class="sidebar-item"><div class="icon"></div>Files</div>
|
||
|
|
<div class="sidebar-section">Admin</div>
|
||
|
|
<div class="sidebar-item"><div class="icon"></div>Settings</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- SHADOWS -->
|
||
|
|
<h2>12. Elevation & Shadows</h2>
|
||
|
|
<div style="display:flex;gap:24px;margin:16px 0;flex-wrap:wrap">
|
||
|
|
<div style="width:140px;height:80px;border-radius:8px;background:white;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--navy-60);box-shadow:0 1px 2px rgba(30,40,68,0.06)">shadow-sm</div>
|
||
|
|
<div style="width:140px;height:80px;border-radius:8px;background:white;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--navy-60);box-shadow:0 1px 3px rgba(30,40,68,0.10), 0 1px 2px rgba(30,40,68,0.06)">shadow</div>
|
||
|
|
<div style="width:140px;height:80px;border-radius:8px;background:white;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--navy-60);box-shadow:0 4px 6px rgba(30,40,68,0.10), 0 2px 4px rgba(30,40,68,0.06)">shadow-md</div>
|
||
|
|
<div style="width:140px;height:80px;border-radius:8px;background:white;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--navy-60);box-shadow:0 10px 15px rgba(30,40,68,0.10), 0 4px 6px rgba(30,40,68,0.05)">shadow-lg</div>
|
||
|
|
<div style="width:140px;height:80px;border-radius:8px;background:white;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--navy-60);box-shadow:0 20px 25px rgba(30,40,68,0.10), 0 8px 10px rgba(30,40,68,0.04)">shadow-xl</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- PRIORITY BADGES -->
|
||
|
|
<h2>13. Priority Badges</h2>
|
||
|
|
<div style="display:flex;gap:10px;margin:16px 0">
|
||
|
|
<span class="badge" style="background:var(--sage);color:var(--navy)">Low</span>
|
||
|
|
<span class="badge" style="background:var(--brand-20);color:var(--brand)">Medium</span>
|
||
|
|
<span class="badge" style="background:#fff8e1;color:#e6a817;font-weight:600">High</span>
|
||
|
|
<span class="badge" style="background:#ffebee;color:#d32f2f;font-weight:600">Critical</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top:48px;padding-top:24px;border-top:2px solid var(--navy-20);font-size:12px;color:var(--navy-60)">
|
||
|
|
Port Nimara CRM Design System — Generated from Brand Guidelines PDF — All color values sourced from official Pantone specifications
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|