{/* Callsign & Settings */}
- 0.1 && config.headerSize <= 2
+ ? `${22 * config.headerSize}px`
+ : "22px", fontWeight: '900', color: 'var(--accent-amber)', cursor: 'pointer', fontFamily: 'Orbitron, monospace', whiteSpace: 'nowrap'
+ }}
onClick={onSettingsClick}
title="Click for settings"
>
@@ -44,37 +48,41 @@ export const Header = ({
{config.version && v{config.version}}
-
+
{/* UTC Clock */}
UTC
- 0.1 && config.headerSize <= 2
+ ? `${24 * config.headerSize}px`
+ : "24px",
+ fontWeight: '700',
+ color: 'var(--accent-cyan)',
fontFamily: 'JetBrains Mono, Consolas, monospace',
whiteSpace: 'nowrap'
}}>{utcTime}
{utcDate}
-
+
{/* Local Clock - Clickable to toggle 12/24 hour format */}
-
LOCAL
- 0.1 && config.headerSize <= 2
+ ? `${24 * config.headerSize}px`
+ : "24px",
+ fontWeight: '700',
+ color: 'var(--accent-amber)',
fontFamily: 'JetBrains Mono, Consolas, monospace',
whiteSpace: 'nowrap'
}}>{localTime}
{localDate}
-
+
{/* Weather & Solar Stats */}
{localWeather?.data && (() => {
@@ -85,12 +93,22 @@ export const Header = ({
const tempC = Math.round(rawC);
const windLabel = localWeather.data.windUnit || 'mph';
return (
-
- {localWeather.data.icon}
-
- {tempF}°F/{tempC}°C
-
-
+
+ 0.1 && config.headerSize <= 2
+ ? `${12 * config.headerSize}px`
+ : "12px",
+ }}>
+ {localWeather.data.icon}
+
+ 0.1 && config.headerSize <= 2
+ ? `${12 * config.headerSize}px`
+ : "12px",
+ }}>
+ {tempF}°F/{tempC}°C
+
+
);
})()}
@@ -108,7 +126,7 @@ export const Header = ({
{spaceWeather?.data?.sunspotNumber || '--'}
-
+
{/* Settings & Fullscreen Buttons */}
+ {/* Callsign Size*/}
+
+
+
+ {
+ if (e.target.value >= 0.1 && e.target.value <= 2.0) {
+ setheaderSize(e.target.value)
+ }}}
+ style={{
+ width: '100%',
+ padding: '10px',
+ background: 'var(--bg-tertiary)',
+ border: '1px solid var(--border-color)',
+ borderRadius: '6px',
+ color: 'var(--text-primary)',
+ fontSize: '14px',
+ fontFamily: 'JetBrains Mono, monospace',
+ boxSizing: 'border-box'
+ }}
+ />
+
+
+
{/* Grid Square */}