diff --git a/static/css/satellite_dashboard.css b/static/css/satellite_dashboard.css index e907591..2d6af59 100644 --- a/static/css/satellite_dashboard.css +++ b/static/css/satellite_dashboard.css @@ -279,12 +279,19 @@ body { .primary-layout { display: grid; - grid-template-columns: minmax(0, 1.8fr) 360px; + grid-template-columns: 300px minmax(0, 1.6fr) 360px; gap: 12px; min-height: 520px; min-width: 0; } +.mission-drawer { + display: grid; + grid-template-rows: auto auto auto minmax(180px, 1fr); + gap: 12px; + min-width: 0; +} + .command-rail { display: grid; grid-template-rows: auto auto auto minmax(220px, 1fr); @@ -360,6 +367,374 @@ body { overflow-y: auto; } +.drawer-panel .panel-content { + display: flex; + flex-direction: column; + gap: 10px; +} + +.drawer-actions { + display: grid; + grid-template-columns: 1fr; + gap: 8px; +} + +.drawer-action-btn { + padding: 8px 10px; + border: 1px solid rgba(74, 163, 255, 0.28); + border-radius: 6px; + background: rgba(8, 20, 31, 0.88); + color: var(--text-secondary); + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.08em; + cursor: pointer; + transition: all 0.2s ease; +} + +.drawer-action-btn:hover { + border-color: rgba(74, 163, 255, 0.65); + color: var(--accent-cyan); +} + +.drawer-action-btn-primary { + background: linear-gradient(135deg, rgba(74, 163, 255, 0.18), rgba(56, 193, 128, 0.14)); + color: var(--text-primary); +} + +.drawer-action-btn-small { + padding: 4px 8px; + font-size: 9px; +} + +.drawer-status { + min-height: 46px; + padding: 9px 10px; + border-radius: 6px; + border: 1px solid rgba(74, 163, 255, 0.16); + background: rgba(255, 255, 255, 0.025); + color: var(--text-secondary); + font-size: 11px; + line-height: 1.4; +} + +.drawer-status[data-level="success"] { + color: var(--accent-green); + border-color: rgba(56, 193, 128, 0.26); +} + +.drawer-status[data-level="warn"] { + color: var(--accent-orange); + border-color: rgba(214, 168, 94, 0.26); +} + +.drawer-status[data-level="error"] { + color: var(--accent-red); + border-color: rgba(226, 93, 93, 0.26); +} + +.drawer-panel-tools { + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; +} + +.drawer-panel-kicker { + color: var(--text-secondary); + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.drawer-list { + min-height: 0; + max-height: 240px; + overflow-y: auto; +} + +.drawer-empty-state { + padding: 12px; + border: 1px dashed rgba(74, 163, 255, 0.18); + border-radius: 6px; + color: var(--text-secondary); + font-size: 11px; + text-align: center; +} + +.drawer-sat-item { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 7px 8px; + margin-bottom: 6px; + border: 1px solid rgba(74, 163, 255, 0.12); + border-radius: 6px; + background: rgba(0, 0, 0, 0.22); +} + +.drawer-sat-item input[type="checkbox"] { + accent-color: var(--accent-cyan); +} + +.drawer-sat-item.builtin { + background: linear-gradient(135deg, rgba(74, 163, 255, 0.08), rgba(8, 20, 31, 0.9)); +} + +.drawer-sat-label { + display: flex; + align-items: flex-start; + gap: 8px; + flex: 1; + cursor: pointer; +} + +.drawer-sat-copy { + display: flex; + flex-direction: column; + gap: 2px; + min-width: 0; +} + +.drawer-sat-name { + color: var(--text-primary); + font-size: 11px; + line-height: 1.3; +} + +.drawer-sat-meta { + color: var(--text-dim); + font-size: 9px; + font-family: var(--font-mono); +} + +.drawer-sat-remove { + padding: 4px 8px; + border: none; + background: transparent; + color: var(--accent-red); + font-size: 16px; + line-height: 1; + cursor: pointer; +} + +.drawer-field { + display: flex; + flex-direction: column; + gap: 5px; +} + +.drawer-field label { + color: var(--text-secondary); + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.1em; + text-transform: uppercase; +} + +.drawer-select, +.drawer-field-value { + padding: 8px 10px; + border: 1px solid rgba(74, 163, 255, 0.18); + border-radius: 6px; + background: rgba(0, 0, 0, 0.22); + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 11px; +} + +.drawer-note { + color: var(--text-secondary); + font-size: 10px; + line-height: 1.45; +} + +.drawer-info-grid { + display: grid; + grid-template-columns: 1fr; + gap: 8px; +} + +.drawer-info-card { + padding: 9px 10px; + border: 1px solid rgba(74, 163, 255, 0.14); + border-radius: 6px; + background: rgba(255, 255, 255, 0.025); +} + +.drawer-info-label { + margin-bottom: 4px; + color: var(--text-secondary); + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.drawer-info-value { + color: var(--text-primary); + font-size: 11px; + line-height: 1.4; +} + +.sat-management-modal { + position: fixed; + inset: 0; + z-index: 2200; + display: none; + align-items: center; + justify-content: center; + padding: 24px; + background: rgba(3, 10, 16, 0.72); + backdrop-filter: blur(6px); +} + +.sat-management-modal.active { + display: flex; +} + +.sat-management-dialog { + position: relative; + width: min(720px, calc(100vw - 32px)); + max-height: min(82vh, 860px); + overflow: auto; + border: 1px solid rgba(74, 163, 255, 0.24); + border-radius: 12px; + background: linear-gradient(135deg, rgba(8, 19, 30, 0.98), rgba(10, 27, 43, 0.96)); + box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45); + padding: 22px; +} + +.sat-management-close { + position: absolute; + top: 12px; + right: 12px; + width: 34px; + height: 34px; + border: 1px solid rgba(74, 163, 255, 0.24); + border-radius: 50%; + background: rgba(8, 20, 31, 0.88); + color: var(--text-secondary); + font-size: 24px; + line-height: 1; + cursor: pointer; +} + +.sat-management-close:hover { + border-color: rgba(74, 163, 255, 0.65); + color: var(--accent-cyan); +} + +.sat-management-title { + color: var(--text-primary); + font-family: 'Orbitron', monospace; + font-size: 22px; + letter-spacing: 0.08em; +} + +.sat-management-subtitle { + margin-top: 8px; + color: var(--text-secondary); + font-size: 12px; + line-height: 1.5; +} + +.sat-management-tabs { + display: flex; + gap: 10px; + margin-top: 18px; + margin-bottom: 16px; +} + +.sat-management-tab { + flex: 1; + padding: 10px 12px; + border: 1px solid rgba(74, 163, 255, 0.22); + border-radius: 8px; + background: rgba(8, 20, 31, 0.82); + color: var(--text-secondary); + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.1em; + cursor: pointer; + transition: all 0.2s ease; +} + +.sat-management-tab.active { + background: linear-gradient(135deg, rgba(74, 163, 255, 0.18), rgba(56, 193, 128, 0.14)); + border-color: rgba(74, 163, 255, 0.5); + color: var(--text-primary); +} + +.sat-management-section { + display: none; +} + +.sat-management-section.active { + display: block; +} + +.sat-management-copy { + color: var(--text-secondary); + font-size: 12px; + line-height: 1.5; + margin-bottom: 12px; +} + +.sat-management-textarea { + width: 100%; + min-height: 180px; + padding: 12px; + border: 1px solid rgba(74, 163, 255, 0.18); + border-radius: 8px; + background: rgba(0, 0, 0, 0.28); + color: var(--text-primary); + font-family: var(--font-mono); + font-size: 11px; + resize: vertical; +} + +.sat-management-textarea:focus { + outline: none; + border-color: rgba(74, 163, 255, 0.55); + box-shadow: 0 0 18px rgba(74, 163, 255, 0.12); +} + +.sat-management-submit { + width: 100%; + margin-top: 12px; +} + +.sat-management-status { + min-height: 36px; + margin-bottom: 12px; + padding: 9px 10px; + border-radius: 6px; + border: 1px solid rgba(74, 163, 255, 0.16); + background: rgba(255, 255, 255, 0.025); + color: var(--text-secondary); + font-size: 11px; + line-height: 1.4; +} + +.sat-management-status[data-level="success"] { + color: var(--accent-green); + border-color: rgba(56, 193, 128, 0.26); +} + +.sat-management-status[data-level="error"] { + color: var(--accent-red); + border-color: rgba(226, 93, 93, 0.26); +} + +.sat-management-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 8px; +} + /* Polar plot */ .polar-container { min-height: 250px; @@ -1123,7 +1498,7 @@ body { /* Responsive */ @media (max-width: 1480px) { .primary-layout { - grid-template-columns: minmax(0, 1.55fr) 330px; + grid-template-columns: 280px minmax(0, 1fr) 330px; } .data-grid { @@ -1148,6 +1523,30 @@ body { } } +@media (max-width: 1320px) { + .primary-layout { + grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); + align-items: start; + } + + .mission-drawer { + grid-column: 1; + grid-row: 1 / span 2; + } + + .map-container { + grid-column: 2; + grid-row: 1; + } + + .command-rail { + grid-column: 2; + grid-row: 2; + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: auto auto; + } +} + @media (max-width: 1180px) { .dashboard { grid-template-rows: auto auto auto; @@ -1159,6 +1558,18 @@ body { grid-template-columns: 1fr; } + .mission-drawer, + .map-container, + .command-rail { + grid-column: auto; + grid-row: auto; + } + + .mission-drawer { + grid-template-columns: repeat(2, minmax(0, 1fr)); + grid-template-rows: auto auto; + } + .command-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; @@ -1193,14 +1604,20 @@ body { width: calc(100% - 28px); max-height: 210px; } + + .sat-management-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } } @media (max-width: 768px) { + .mission-drawer, .controls-bar { flex-wrap: wrap; padding: 8px 12px; } + .mission-drawer, .command-rail { grid-template-columns: 1fr; } @@ -1223,6 +1640,38 @@ body { align-items: flex-start; flex-direction: column; } + + .packet-console { + position: static; + width: 100%; + max-height: 220px; + margin: 12px 0 0; + } + + .map-panel-content { + display: flex; + flex-direction: column; + } + + #groundMap { + min-height: 420px; + } + + .map-overlay-card { + position: static; + width: 100%; + margin: 12px 0 0; + } + + .sat-management-dialog { + width: calc(100vw - 20px); + max-height: calc(100vh - 20px); + padding: 18px; + } + + .sat-management-grid { + grid-template-columns: 1fr; + } } /* Embedded Mode Styles */ diff --git a/templates/satellite_dashboard.html b/templates/satellite_dashboard.html index e571629..2e2173b 100644 --- a/templates/satellite_dashboard.html +++ b/templates/satellite_dashboard.html @@ -72,6 +72,86 @@
+ +
@@ -412,6 +492,45 @@
+
+ +
+