diff --git a/templates/index.html b/templates/index.html index 09f04f9..87d6dd8 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1367,17 +1367,18 @@ display: block; } - /* Satellite Pass Predictor - Cool UI */ + /* Satellite Pass Predictor - Improved Layout */ .pass-predictor { display: grid; grid-template-columns: 1fr 1fr; - grid-template-rows: auto auto; + grid-template-rows: minmax(350px, 1fr) auto; gap: 15px; } @media (max-width: 1100px) { .pass-predictor { grid-template-columns: 1fr; + grid-template-rows: auto; } } @@ -1387,7 +1388,7 @@ border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; - min-height: 320px; + min-height: 350px; } .ground-track-cell { @@ -1395,34 +1396,78 @@ border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; - min-height: 320px; + min-height: 350px; } .ground-track-cell #groundTrackMap { - height: 240px; + height: 280px; } - .countdown-cell { + .pass-info-cell { + grid-column: 1 / -1; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; } - .countdown-cell .satellite-countdown { - margin: 0; - padding: 0; - border: none; - background: none; + .pass-info-layout { + display: grid; + grid-template-columns: 320px 1fr; + gap: 20px; + } + + @media (max-width: 900px) { + .pass-info-layout { + grid-template-columns: 1fr; + } + } + + .countdown-compact { + display: flex; + flex-direction: column; + gap: 10px; + } + + .countdown-compact .countdown-satellite-name { + font-size: 14px; + color: var(--accent-cyan); + font-weight: 600; + } + + .countdown-compact .countdown-grid { + display: flex; + gap: 15px; + } + + .countdown-compact .countdown-block { + text-align: center; + } + + .countdown-compact .countdown-value { + font-size: 20px; + font-weight: bold; + color: var(--text-primary); + } + + .countdown-compact .countdown-label { + font-size: 9px; + color: var(--text-secondary); + text-transform: uppercase; + } + + .pass-list-section { + max-height: 200px; + overflow-y: auto; + } + + /* Legacy support - hide old cells */ + .countdown-cell { + display: none; } .pass-list-cell { - background: var(--bg-secondary); - border: 1px solid var(--border-color); - border-radius: 8px; - padding: 15px; - max-height: 350px; - overflow-y: auto; + display: none; } .polar-plot-header { @@ -3562,43 +3607,35 @@ - -