diff --git a/src/App.jsx b/src/App.jsx index d213cb3..4cc8f87 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -223,19 +223,286 @@ const App = () => { alignItems: 'center', overflow: 'hidden' }}> -
+ {config.layout === 'classic' ? ( + /* CLASSIC HAMCLOCK-STYLE LAYOUT */ +
+ {/* TOP BAR - HamClock style */} +
+ {/* Callsign & Time */} +
+
setShowSettings(true)} + title="Click for settings" + > + {config.callsign} +
+
+ Up 35d 18h • v4.20 +
+
+
+ {utcTime}:{String(new Date().getUTCSeconds()).padStart(2, '0')} +
+
+ {utcDate} UTC +
+
+
+ + {/* Solar Indices - SSN & SFI */} +
+ {/* SSN */} +
+
Sunspot Number
+
+
+ {solarIndices?.data?.ssn?.history?.length > 0 && ( + + {(() => { + const data = solarIndices.data.ssn.history.slice(-30); + const values = data.map(d => d.value); + const max = Math.max(...values, 1); + const min = Math.min(...values, 0); + const range = max - min || 1; + const points = data.map((d, i) => { + const x = (i / (data.length - 1)) * 100; + const y = 60 - ((d.value - min) / range) * 55; + return `${x},${y}`; + }).join(' '); + return ; + })()} + + )} +
+
+ {solarIndices?.data?.ssn?.current || '--'} +
+
+
-30 Days
+
+ + {/* SFI */} +
+
10.7 cm Solar flux
+
+
+ {solarIndices?.data?.sfi?.history?.length > 0 && ( + + {(() => { + const data = solarIndices.data.sfi.history.slice(-30); + const values = data.map(d => d.value); + const max = Math.max(...values, 1); + const min = Math.min(...values); + const range = max - min || 1; + const points = data.map((d, i) => { + const x = (i / (data.length - 1)) * 100; + const y = 60 - ((d.value - min) / range) * 55; + return `${x},${y}`; + }).join(' '); + return ; + })()} + + )} +
+
+ {solarIndices?.data?.sfi?.current || '--'} +
+
+
-30 Days +7
+
+
+ + {/* Live Spots & Indices */} +
+ {/* Live Spots by Band */} +
+
Live Spots
+
of {deGrid} - 15 mins
+
+ {[ + { band: '160m', color: '#ff6666' }, + { band: '80m', color: '#ff9966' }, + { band: '60m', color: '#ffcc66' }, + { band: '40m', color: '#ccff66' }, + { band: '30m', color: '#66ff99' }, + { band: '20m', color: '#66ffcc' }, + { band: '17m', color: '#66ccff' }, + { band: '15m', color: '#6699ff' }, + { band: '12m', color: '#9966ff' }, + { band: '10m', color: '#cc66ff' }, + ].map(b => ( +
+ {b.band} + + {dxCluster.data?.filter(s => { + const freq = parseFloat(s.freq); + const bands = { + '160m': [1.8, 2], '80m': [3.5, 4], '60m': [5.3, 5.4], '40m': [7, 7.3], + '30m': [10.1, 10.15], '20m': [14, 14.35], '17m': [18.068, 18.168], + '15m': [21, 21.45], '12m': [24.89, 24.99], '10m': [28, 29.7] + }; + const r = bands[b.band]; + return r && freq >= r[0] && freq <= r[1]; + }).length || 0} + +
+ ))} +
+
+ + {/* Space Weather Indices */} +
+
+
X-Ray
+
M3.0
+
+
+
Kp
+
{spaceWeather?.data?.kIndex ?? '--'}
+
+
+
Bz
+
-0
+
+
+
Aurora
+
18
+
+
+
+
+ + {/* MAIN AREA */} +
+ {/* DX Cluster List */} +
+
+ Cluster + dxspider.co.uk:7300 +
+
+ {dxCluster.data?.slice(0, 25).map((spot, i) => ( +
setHoveredSpot(spot)} + onMouseLeave={() => setHoveredSpot(null)} + > + {parseFloat(spot.freq).toFixed(1)} + {spot.call} + {spot.time || '--'} +
+ ))} +
+
+ + {/* Map */} +
+ + + {/* Settings button overlay */} + +
+
+ + {/* BOTTOM - Frequency Scale */} +
+ MHz + 5 + 10 + 15 + 20 + 25 + 30 + 35 +
+
+ ) : ( + /* MODERN LAYOUT */ +
{/* TOP BAR */}
{
+ )} {/* Modals */} { dark: '→ Modern dark theme (default)', light: '→ Light theme for daytime use', legacy: '→ Green terminal CRT style', - classic: '→ 90s Windows retro style' + retro: '→ 90s Windows retro style' }; const layoutDescriptions = { modern: '→ Modern responsive grid layout', - classic: '→ Classic HamClock-style layout' + classic: '→ Original HamClock-style layout' }; return ( @@ -270,7 +270,7 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => { Theme
- {['dark', 'light', 'legacy', 'classic'].map((t) => ( + {['dark', 'light', 'legacy', 'retro'].map((t) => (