Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-07-07 09:08:12 -07:00
Code Issues Packages Projects Releases Wiki Activity

Adjustment to dashboard style and 500 error

Browse Source
This commit is contained in:
Marc
2026-01-23 16:00:13 -06:00
parent 9d67c01bc8
commit 0e3443ece6
4 changed files with 886 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/ais_dashboard.html
+10 -413
View File
@@ -4,420 +4,17 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VESSEL RADAR // INTERCEPT - See the Invisible</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/ais_dashboard.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/responsive.css') }}">
<style>
:root {
--bg-primary: #0a0a0f;
--bg-secondary: #12121a;
--bg-tertiary: #1a1a24;
--border-color: #2a2a3a;
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
--text-muted: #606070;
--accent-cyan: #00d4ff;
--accent-green: #00ff88;
--accent-yellow: #ffcc00;
--accent-red: #ff4444;
--accent-blue: #4488ff;
--accent-orange: #ff8844;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'JetBrains Mono', monospace;
background: var(--bg-primary);
color: var(--text-primary);
height: 100vh;
overflow: hidden;
}
.header {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
padding: 10px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 18px;
font-weight: 700;
color: var(--accent-cyan);
letter-spacing: 2px;
}
.logo span {
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
}
.back-link {
color: var(--accent-cyan);
text-decoration: none;
font-size: 12px;
}
.back-link:hover { text-decoration: underline; }
.stats-strip {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
padding: 8px 15px;
}
.stats-strip-inner {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.strip-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.strip-value {
font-size: 16px;
font-weight: 600;
color: var(--accent-cyan);
}
.strip-label {
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
}
.strip-divider {
width: 1px;
height: 30px;
background: var(--border-color);
}
.strip-btn {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 6px 12px;
font-size: 11px;
cursor: pointer;
border-radius: 3px;
font-family: inherit;
}
.strip-btn:hover { background: var(--bg-secondary); border-color: var(--accent-cyan); }
.strip-btn.primary { border-color: var(--accent-cyan); color: var(--accent-cyan); }
.strip-status {
display: flex;
align-items: center;
gap: 6px;
}
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent-red);
}
.status-dot.active {
background: var(--accent-green);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.strip-time {
font-size: 12px;
color: var(--text-secondary);
}
.dashboard {
display: flex;
height: calc(100vh - 100px);
}
.main-display {
flex: 1;
position: relative;
}
#vesselMap {
width: 100%;
height: 100%;
}
.sidebar {
width: 320px;
background: var(--bg-secondary);
border-left: 1px solid var(--border-color);
display: flex;
flex-direction: column;
overflow: hidden;
}
.panel {
border-bottom: 1px solid var(--border-color);
}
.panel-header {
background: var(--bg-tertiary);
padding: 10px 15px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-secondary);
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-indicator {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent-cyan);
}
.selected-info {
padding: 15px;
min-height: 200px;
}
.no-vessel {
color: var(--text-muted);
text-align: center;
padding: 40px 20px;
}
.no-vessel-icon {
font-size: 48px;
margin-bottom: 10px;
opacity: 0.3;
}
.vessel-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
}
.vessel-icon {
font-size: 32px;
}
.vessel-name {
font-size: 16px;
font-weight: 600;
color: var(--accent-cyan);
}
.vessel-mmsi {
font-size: 11px;
color: var(--text-muted);
}
.vessel-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.detail-item {
background: var(--bg-tertiary);
padding: 8px 10px;
border-radius: 4px;
}
.detail-label {
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
}
.detail-value {
font-size: 13px;
color: var(--text-primary);
margin-top: 2px;
}
.vessel-list-content {
flex: 1;
overflow-y: auto;
max-height: 300px;
}
.vessel-item {
padding: 10px 15px;
border-bottom: 1px solid var(--border-color);
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
}
.vessel-item:hover { background: var(--bg-tertiary); }
.vessel-item.selected { background: var(--bg-tertiary); border-left: 3px solid var(--accent-cyan); }
.vessel-item-icon { font-size: 20px; }
.vessel-item-info { flex: 1; }
.vessel-item-name {
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
}
.vessel-item-type {
font-size: 10px;
color: var(--text-muted);
}
.vessel-item-speed {
font-size: 11px;
color: var(--accent-cyan);
text-align: right;
}
.controls-bar {
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
padding: 10px 15px;
display: flex;
gap: 20px;
flex-wrap: wrap;
align-items: center;
}
.control-group {
display: flex;
align-items: center;
gap: 8px;
}
.control-group-label {
font-size: 9px;
color: var(--text-muted);
text-transform: uppercase;
}
.control-group-items {
display: flex;
align-items: center;
gap: 6px;
}
.control-group select,
.control-group input[type="text"],
.control-group input[type="number"] {
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 5px 8px;
font-size: 11px;
font-family: inherit;
border-radius: 3px;
}
.control-group label {
font-size: 11px;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 4px;
}
.start-btn {
background: var(--accent-green);
color: #000;
border: none;
padding: 8px 20px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border-radius: 3px;
font-family: inherit;
}
.start-btn:hover { opacity: 0.9; }
.start-btn.active {
background: var(--accent-red);
color: #fff;
}
/* Vessel markers */
.vessel-marker {
background: transparent;
border: none;
}
.vessel-marker-inner {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
filter: drop-shadow(0 0 2px rgba(0,0,0,0.8));
transition: transform 0.3s ease;
}
.vessel-marker.selected .vessel-marker-inner {
filter: drop-shadow(0 0 6px var(--accent-cyan));
}
/* Range rings */
.range-ring {
fill: none;
stroke: var(--accent-cyan);
stroke-opacity: 0.3;
stroke-width: 1;
stroke-dasharray: 4 4;
}
/* Leaflet overrides */
.leaflet-container {
background: var(--bg-primary);
font-family: 'JetBrains Mono', monospace;
}
.leaflet-control-zoom a {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
.leaflet-control-attribution {
background: var(--bg-secondary) !important;
color: var(--text-muted) !important;
font-size: 9px !important;
}
.leaflet-popup-content-wrapper {
background: var(--bg-secondary);
color: var(--text-primary);
border-radius: 4px;
}
.leaflet-popup-tip { background: var(--bg-secondary); }
</style>
</head>
<body>
<!-- Radar background effects -->
<div class="radar-bg"></div>
<div class="scanline"></div>
<header class="header">
<div class="logo">
VESSEL RADAR
@@ -663,8 +260,8 @@
// Add observer marker
observerMarker = L.circleMarker([observerLocation.lat, observerLocation.lon], {
radius: 8,
fillColor: '#00ff88',
color: '#00ff88',
fillColor: '#22c55e',
color: '#22c55e',
weight: 2,
opacity: 1,
fillOpacity: 0.5
@@ -727,7 +324,7 @@
const circle = L.circle([observerLocation.lat, observerLocation.lon], {
radius: nm * nmToMeters,
fill: false,
color: '#00d4ff',
color: '#4a9eff',
opacity: 0.3,
weight: 1,
dashArray: '4 4'
@@ -857,7 +454,7 @@
trailLines[mmsi].setLatLngs(points);
} else {
trailLines[mmsi] = L.polyline(points, {
color: '#00d4ff',
color: '#4a9eff',
weight: 2,
opacity: 0.5
}).addTo(vesselMap);