diff --git a/templates/index.html b/templates/index.html index 87d6dd8..09f04f9 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1367,18 +1367,17 @@ display: block; } - /* Satellite Pass Predictor - Improved Layout */ + /* Satellite Pass Predictor - Cool UI */ .pass-predictor { display: grid; grid-template-columns: 1fr 1fr; - grid-template-rows: minmax(350px, 1fr) auto; + grid-template-rows: auto auto; gap: 15px; } @media (max-width: 1100px) { .pass-predictor { grid-template-columns: 1fr; - grid-template-rows: auto; } } @@ -1388,7 +1387,7 @@ border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; - min-height: 350px; + min-height: 320px; } .ground-track-cell { @@ -1396,78 +1395,34 @@ border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; - min-height: 350px; + min-height: 320px; } .ground-track-cell #groundTrackMap { - height: 280px; + height: 240px; } - .pass-info-cell { - grid-column: 1 / -1; + .countdown-cell { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; padding: 15px; } - .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; + .countdown-cell .satellite-countdown { + margin: 0; + padding: 0; + border: none; + background: none; } .pass-list-cell { - display: none; + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: 8px; + padding: 15px; + max-height: 350px; + overflow-y: auto; } .polar-plot-header { @@ -3607,35 +3562,43 @@ - -