Skip to content

Commit 9fc85f8

Browse files
siyuanZHANG01siyuanZHANG01
committed
upload web
1 parent a64ed3c commit 9fc85f8

12 files changed

Lines changed: 2435 additions & 0 deletions

‎website_v1/css/style.css‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
2+
3+
:root {
4+
--bg-dark: #0d1117;
5+
--bg-panel: #161b22;
6+
--bg-card: #21262d;
7+
--bg-hover: #30363d;
8+
--accent: #58a6ff;
9+
--accent2: #3fb950;
10+
--text-prim: #e6edf3;
11+
--text-sec: #8b949e;
12+
--border: #30363d;
13+
--shadow: rgba(0,0,0,0.4);
14+
--header-h: 56px;
15+
--sidebar-w: 320px;
16+
--panel-r-w: 280px;
17+
}
18+
19+
html, body { height: 100%; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-dark); color: var(--text-prim); font-size: 13px; }
20+
21+
#header {
22+
position: fixed; top: 0; left: 0; right: 0; height: var(--header-h);
23+
background: var(--bg-panel); border-bottom: 1px solid var(--border);
24+
display: flex; align-items: center; padding: 0 16px; gap: 16px; z-index: 1000;
25+
}
26+
#header .logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--text-prim); text-decoration: none; }
27+
#header .logo svg { color: var(--accent); }
28+
#header .subtitle { color: var(--text-sec); font-size: 12px; border-left: 1px solid var(--border); padding-left: 12px; }
29+
#header .spacer { flex: 1; }
30+
#header .badge { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-size: 11px; color: var(--text-sec); }
31+
32+
#layout {
33+
display: flex; height: 100vh; padding-top: var(--header-h);
34+
}
35+
36+
#sidebar {
37+
width: var(--sidebar-w); flex-shrink: 0;
38+
background: var(--bg-panel); border-right: 1px solid var(--border);
39+
overflow-y: auto; display: flex; flex-direction: column; gap: 0;
40+
}
41+
.sidebar-section { border-bottom: 1px solid var(--border); padding: 14px 16px; }
42+
.sidebar-section:last-child { border-bottom: none; }
43+
.section-title {
44+
font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
45+
text-transform: uppercase; color: var(--text-sec); margin-bottom: 10px;
46+
}
47+
48+
.port-btn {
49+
display: flex; align-items: center; gap: 10px;
50+
width: 100%; background: none; border: 1px solid transparent;
51+
border-radius: 6px; padding: 8px 10px; cursor: pointer;
52+
color: var(--text-prim); text-align: left; margin-bottom: 4px;
53+
transition: background 0.15s, border-color 0.15s;
54+
}
55+
.port-btn:hover { background: var(--bg-hover); }
56+
.port-btn.active { background: rgba(88,166,255,0.12); border-color: var(--accent); }
57+
.port-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
58+
.port-info { flex: 1; min-width: 0; }
59+
.port-name { font-weight: 500; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
60+
.port-meta { font-size: 11px; color: var(--text-sec); }
61+
.port-chevron { color: var(--text-sec); font-size: 10px; }
62+
.port-btn.active .port-chevron { color: var(--accent); }
63+
64+
.filter-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
65+
.filter-label { font-size: 11px; color: var(--text-sec); display: flex; justify-content: space-between; }
66+
.filter-label span { color: var(--accent); font-weight: 600; }
67+
input[type="range"] {
68+
width: 100%; accent-color: var(--accent);
69+
height: 4px; cursor: pointer;
70+
}
71+
72+
.type-grid { display: flex; flex-wrap: wrap; gap: 5px; }
73+
.type-tag {
74+
display: flex; align-items: center; gap: 4px;
75+
padding: 3px 7px; border-radius: 10px; font-size: 11px; font-weight: 500;
76+
border: 1px solid transparent; cursor: pointer; transition: opacity 0.15s;
77+
background: var(--bg-card);
78+
}
79+
.type-tag.inactive { opacity: 0.35; }
80+
.type-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
81+
82+
.pattern-row { display: flex; gap: 4px; flex-wrap: wrap; }
83+
.pattern-btn {
84+
padding: 3px 8px; border-radius: 4px; font-size: 11px; cursor: pointer;
85+
background: var(--bg-card); border: 1px solid var(--border); color: var(--text-sec);
86+
transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
87+
}
88+
.pattern-btn:hover { background: var(--bg-hover); color: var(--text-prim); }
89+
.pattern-btn[data-pattern="all"].active { background: rgba(88,166,255,0.15); border-color: var(--accent); color: var(--accent); }
90+
.pattern-btn[data-pattern="inbound"].active { background: rgba(63,185,80,0.12); border-color: rgba(63,185,80,0.5); color: #3fb950; }
91+
.pattern-btn[data-pattern="outbound"].active { background: rgba(47,129,247,0.12); border-color: rgba(47,129,247,0.5); color: #2f81f7; }
92+
.pattern-btn[data-pattern="anchored"].active { background: rgba(240,136,62,0.12); border-color: rgba(240,136,62,0.5); color: #f0883e; }
93+
.pattern-btn[data-pattern="coastal"].active { background: rgba(188,140,255,0.12);border-color: rgba(188,140,255,0.5);color: #bc8cff; }
94+
.pattern-btn:not(.active) { opacity: 0.45; }
95+
96+
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
97+
.stat-card { background: var(--bg-card); border-radius: 6px; padding: 8px 10px; }
98+
.stat-val { font-size: 16px; font-weight: 700; color: var(--text-prim); line-height: 1; }
99+
.stat-lbl { font-size: 10px; color: var(--text-sec); margin-top: 2px; }
100+
101+
#map-container {
102+
flex: 1; min-width: 300px; position: relative; background: #0a0e14;
103+
}
104+
#map { width: 100%; height: 100%; }
105+
106+
.map-ctrl {
107+
position: absolute; background: var(--bg-panel); border: 1px solid var(--border);
108+
border-radius: 8px; padding: 8px 12px; z-index: 500;
109+
}
110+
#map-legend { bottom: 24px; left: 12px; min-width: 140px; }
111+
#view-toggles { top: 12px; right: 12px; display: flex; gap: 4px; }
112+
.view-btn {
113+
padding: 5px 10px; border-radius: 5px; font-size: 11px; cursor: pointer;
114+
background: var(--bg-card); border: 1px solid var(--border); color: var(--text-sec);
115+
transition: background 0.15s, opacity 0.15s;
116+
}
117+
.view-btn:hover:not(:disabled) { background: var(--bg-hover); }
118+
.view-btn.active { background: rgba(88,166,255,0.15); border-color: var(--accent); color: var(--accent); cursor: default; }
119+
.view-btn:disabled { opacity: 0.4; cursor: default; }
120+
121+
.legend-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 11px; color: var(--text-sec); }
122+
.legend-line { width: 20px; height: 3px; border-radius: 1px; }
123+
124+
#right-panel {
125+
width: var(--panel-r-w); flex-shrink: 0;
126+
background: var(--bg-panel); border-left: 1px solid var(--border);
127+
overflow-y: auto; display: flex; flex-direction: column;
128+
}
129+
.rp-section { border-bottom: 1px solid var(--border); padding: 14px 14px; }
130+
.rp-section:last-child { border-bottom: none; }
131+
132+
.chart-wrap { width: 100%; position: relative; }
133+
#chart-hourly { height: 110px; width: 100%; display: block; }
134+
#chart-sog { height: 90px; width: 100%; display: block; }
135+
#chart-types { height: 160px; width: 100%; display: block; }
136+
#chart-status { height: 110px; width: 100%; display: block; }
137+
138+
139+
.vessel-popup { min-width: 160px; }
140+
.vp-title { font-weight: 700; font-size: 13px; color: var(--accent); margin-bottom: 6px; }
141+
.vp-row { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; color: var(--text-sec); }
142+
.vp-row span { color: var(--text-prim); }
143+
144+
::-webkit-scrollbar { width: 5px; }
145+
::-webkit-scrollbar-track { background: transparent; }
146+
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
147+
148+
.leaflet-container { background: #0a0e14 !important; }
149+
.leaflet-tile { filter: brightness(0.85) contrast(1.05) saturate(0.7); }
150+
.leaflet-popup-content-wrapper {
151+
background: var(--bg-card) !important; border: 1px solid var(--border) !important;
152+
color: var(--text-prim) !important; border-radius: 8px !important;
153+
box-shadow: 0 4px 20px var(--shadow) !important;
154+
}
155+
.leaflet-popup-tip { background: var(--bg-card) !important; }
156+
.leaflet-control-zoom a { background: var(--bg-panel) !important; color: var(--text-prim) !important; border-color: var(--border) !important; }
157+
.leaflet-control-zoom a:hover { background: var(--bg-hover) !important; }
158+
159+
#loading {
160+
position: fixed; inset: 0; background: var(--bg-dark);
161+
display: flex; flex-direction: column; align-items: center; justify-content: center;
162+
z-index: 9999; gap: 16px;
163+
}
164+
#loading .spinner {
165+
width: 36px; height: 36px; border: 3px solid var(--border);
166+
border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite;
167+
}
168+
#loading .load-text { color: var(--text-sec); font-size: 13px; }
169+
@keyframes spin { to { transform: rotate(360deg); } }
170+
171+
.tab-bar { display: flex; border-bottom: 1px solid var(--border); }
172+
.tab-btn {
173+
flex: 1; padding: 8px; font-size: 11px; font-weight: 500; cursor: pointer;
174+
background: none; border: none; color: var(--text-sec); border-bottom: 2px solid transparent;
175+
transition: color 0.15s;
176+
}
177+
.tab-btn:hover { color: var(--text-prim); }
178+
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
179+
.tab-pane { display: none; }
180+
.tab-pane.active { display: block; }
181+
182+
.port-detail-card { display: none; }
183+
.port-detail-card.visible { display: block; }
184+
.pdc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
185+
.pdc-dot { width: 12px; height: 12px; border-radius: 50%; }
186+
.pdc-name { font-weight: 700; font-size: 13px; }
187+
.pdc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
188+
.pdc-stat { background: var(--bg-dark); border-radius: 5px; padding: 7px 9px; }
189+
.pdc-stat-val { font-size: 15px; font-weight: 700; line-height: 1; }
190+
.pdc-stat-lbl { font-size: 10px; color: var(--text-sec); margin-top: 2px; }
191+
.pdc-types { display: flex; flex-wrap: wrap; gap: 4px; }
192+
.pdc-type-chip {
193+
padding: 2px 7px; border-radius: 10px; font-size: 10px; font-weight: 500;
194+
background: rgba(88,166,255,0.12); color: var(--accent); border: 1px solid rgba(88,166,255,0.25);
195+
}
196+
197+
.no-port-msg { color: var(--text-sec); font-size: 12px; text-align: center; padding: 20px 10px; }
198+
199+
.activity-context-bar {
200+
padding: 5px 14px; background: var(--bg-dark);
201+
border-bottom: 1px solid var(--border);
202+
display: flex; align-items: center; gap: 6px;
203+
}
204+
#activity-context-label,
205+
#fleet-context-label {
206+
font-size: 10px; font-weight: 600; letter-spacing: .05em;
207+
text-transform: uppercase; color: var(--text-sec);
208+
}
209+
#activity-context-label.port-mode,
210+
#fleet-context-label.port-mode { color: var(--accent); }
211+
.chart-scope-note {
212+
font-size: 9px; font-weight: 400; text-transform: none;
213+
letter-spacing: 0; color: var(--text-sec); opacity: .75;
214+
}

0 commit comments

Comments
 (0)