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 @@ - -
-
+ +
+
+ Next Pass Countdown +
+
+
--
+
+
+
Next Pass In
+
--:--:--
+
--
+
+
+
Visibility
+
--:--
+
Duration
+
+
+
Max Elevation
+
--°
+
--
+
+
+
Calculate passes to see countdown
+
+
+ + +
+
Upcoming Passes 0 passes
-
-
-
Next Pass
-
-
-
--:--:--
-
Time to Pass
-
-
-
--:--
-
Duration
-
-
-
--°
-
Max El
-
-
-
Calculate passes to see countdown
-
-
-
- Click "Calculate Passes" to predict satellite passes for your location. -
+
+
+ Click "Calculate Passes" to predict satellite passes for your location.