KB8PMY
/
openhamclock
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #17 from accius/Modular-Staging

Browse Source 
Modular staging
pull/27/head
accius 3 days ago committed by GitHub
parent 6b739c42a8 23ebba09e5
commit f06cc67071
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 32 deletions
Show Stats Download Patch File Download Diff File

4
src/App.jsx
Unescape View File

@ -262,7 +262,7 @@ const App = () => {
Up 35d 18h • v4.20 Up 35d 18h • v4.20
</div> </div>
<div style={{ marginTop: '8px' }}> <div style={{ marginTop: '8px' }}>
<div style={{ fontSize: '36px', fontWeight: '700', color: '#00ff00', fontFamily: 'Orbitron, monospace', lineHeight: 1 }}> <div style={{ fontSize: '36px', fontWeight: '700', color: '#00ff00', fontFamily: 'JetBrains Mono, Consolas, monospace', lineHeight: 1, width: '180px' }}>
{utcTime}<span style={{ fontSize: '20px', color: '#00cc00' }}>:{String(new Date().getUTCSeconds()).padStart(2, '0')}</span> {utcTime}<span style={{ fontSize: '20px', color: '#00cc00' }}>:{String(new Date().getUTCSeconds()).padStart(2, '0')}</span>
</div> </div>
<div style={{ fontSize: '14px', color: '#00cc00', marginTop: '2px' }}> <div style={{ fontSize: '14px', color: '#00cc00', marginTop: '2px' }}>
@ -497,7 +497,7 @@ const App = () => {
transformOrigin: 'center center', transformOrigin: 'center center',
display: 'grid', display: 'grid',
gridTemplateColumns: '270px 1fr 300px', gridTemplateColumns: '270px 1fr 300px',
gridTemplateRows: '65px 1fr', gridTemplateRows: '55px 1fr',
gap: '8px', gap: '8px',
padding: '8px', padding: '8px',
overflow: 'hidden', overflow: 'hidden',

75
src/components/Header.jsx
Unescape View File

@ -22,50 +22,64 @@ export const Header = ({
<div style={{ <div style={{
gridColumn: '1 / -1', gridColumn: '1 / -1',
display: 'flex', display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
background: 'var(--bg-panel)', background: 'var(--bg-panel)',
border: '1px solid var(--border-color)', border: '1px solid var(--border-color)',
borderRadius: '6px', borderRadius: '6px',
padding: '8px 20px', padding: '6px 12px',
minHeight: '60px', minHeight: '50px',
fontFamily: 'JetBrains Mono, monospace' fontFamily: 'JetBrains Mono, monospace',
overflow: 'hidden'
}}> }}>
{/* Callsign & Settings */} {/* Callsign & Settings */}
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexShrink: 0 }}>
<span <span
style={{ fontSize: '24px', fontWeight: '900', color: 'var(--accent-amber)', cursor: 'pointer', fontFamily: 'Orbitron, monospace' }} style={{ fontSize: '22px', fontWeight: '900', color: 'var(--accent-amber)', cursor: 'pointer', fontFamily: 'Orbitron, monospace', whiteSpace: 'nowrap' }}
onClick={onSettingsClick} onClick={onSettingsClick}
title="Click for settings" title="Click for settings"
> >
{config.callsign} {config.callsign}
</span> </span>
<span style={{ fontSize: '12px', color: 'var(--text-muted)' }}>v3.7.0</span> <span style={{ fontSize: '11px', color: 'var(--text-muted)' }}>v3.7.0</span>
</div> </div>
{/* UTC Clock */} {/* UTC Clock */}
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexShrink: 0 }}>
<span style={{ fontSize: '14px', color: 'var(--accent-cyan)', fontWeight: '600' }}>UTC</span> <span style={{ fontSize: '13px', color: 'var(--accent-cyan)', fontWeight: '600' }}>UTC</span>
<span style={{ fontSize: '28px', fontWeight: '700', color: 'var(--accent-cyan)', fontFamily: 'Orbitron, monospace' }}>{utcTime}</span> <span style={{
<span style={{ fontSize: '13px', color: 'var(--text-muted)' }}>{utcDate}</span> fontSize: '24px',
fontWeight: '700',
color: 'var(--accent-cyan)',
fontFamily: 'JetBrains Mono, Consolas, monospace',
whiteSpace: 'nowrap'
}}>{utcTime}</span>
<span style={{ fontSize: '12px', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{utcDate}</span>
</div> </div>
{/* Local Clock - Clickable to toggle 12/24 hour format */} {/* Local Clock - Clickable to toggle 12/24 hour format */}
<div <div
style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer' }} style={{ display: 'flex', alignItems: 'center', gap: '6px', cursor: 'pointer', flexShrink: 0 }}
onClick={onTimeFormatToggle} onClick={onTimeFormatToggle}
title={`Click to switch to ${use12Hour ? '24-hour' : '12-hour'} format`} title={`Click to switch to ${use12Hour ? '24-hour' : '12-hour'} format`}
> >
<span style={{ fontSize: '14px', color: 'var(--accent-amber)', fontWeight: '600' }}>LOCAL</span> <span style={{ fontSize: '13px', color: 'var(--accent-amber)', fontWeight: '600' }}>LOCAL</span>
<span style={{ fontSize: '28px', fontWeight: '700', color: 'var(--accent-amber)', fontFamily: 'Orbitron, monospace' }}>{localTime}</span> <span style={{
<span style={{ fontSize: '13px', color: 'var(--text-muted)' }}>{localDate}</span> fontSize: '24px',
fontWeight: '700',
color: 'var(--accent-amber)',
fontFamily: 'JetBrains Mono, Consolas, monospace',
whiteSpace: 'nowrap'
}}>{localTime}</span>
<span style={{ fontSize: '12px', color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{localDate}</span>
</div> </div>
{/* Weather & Solar Stats */} {/* Weather & Solar Stats */}
<div style={{ display: 'flex', gap: '20px', fontSize: '14px' }}> <div style={{ display: 'flex', gap: '12px', fontSize: '13px', fontFamily: 'JetBrains Mono, Consolas, monospace', whiteSpace: 'nowrap', flexShrink: 0 }}>
{localWeather?.data && ( {localWeather?.data && (
<div title={`${localWeather.data.description} • Wind: ${localWeather.data.windSpeed} mph`}> <div title={`${localWeather.data.description} • Wind: ${localWeather.data.windSpeed} mph`}>
<span style={{ marginRight: '4px' }}>{localWeather.data.icon}</span> <span style={{ marginRight: '3px' }}>{localWeather.data.icon}</span>
<span style={{ color: 'var(--accent-cyan)', fontWeight: '600' }}> <span style={{ color: 'var(--accent-cyan)', fontWeight: '600' }}>
{localWeather.data.temp}°F/{Math.round((localWeather.data.temp - 32) * 5/9)}°C {localWeather.data.temp}°F/{Math.round((localWeather.data.temp - 32) * 5/9)}°C
</span> </span>
@ -73,22 +87,22 @@ export const Header = ({
)} )}
<div> <div>
<span style={{ color: 'var(--text-muted)' }}>SFI </span> <span style={{ color: 'var(--text-muted)' }}>SFI </span>
<span style={{ color: 'var(--accent-amber)', fontWeight: '700', fontSize: '16px' }}>{spaceWeather?.data?.solarFlux || '--'}</span> <span style={{ color: 'var(--accent-amber)', fontWeight: '700' }}>{spaceWeather?.data?.solarFlux || '--'}</span>
</div> </div>
<div> <div>
<span style={{ color: 'var(--text-muted)' }}>K </span> <span style={{ color: 'var(--text-muted)' }}>K </span>
<span style={{ color: parseInt(spaceWeather?.data?.kIndex) >= 4 ? 'var(--accent-red)' : 'var(--accent-green)', fontWeight: '700', fontSize: '16px' }}> <span style={{ color: parseInt(spaceWeather?.data?.kIndex) >= 4 ? 'var(--accent-red)' : 'var(--accent-green)', fontWeight: '700' }}>
{spaceWeather?.data?.kIndex ?? '--'} {spaceWeather?.data?.kIndex ?? '--'}
</span> </span>
</div> </div>
<div> <div>
<span style={{ color: 'var(--text-muted)' }}>SSN </span> <span style={{ color: 'var(--text-muted)' }}>SSN </span>
<span style={{ color: 'var(--accent-cyan)', fontWeight: '700', fontSize: '16px' }}>{spaceWeather?.data?.sunspotNumber || '--'}</span> <span style={{ color: 'var(--accent-cyan)', fontWeight: '700' }}>{spaceWeather?.data?.sunspotNumber || '--'}</span>
</div> </div>
</div> </div>
{/* Settings & Fullscreen Buttons */} {/* Settings & Fullscreen Buttons */}
<div style={{ display: 'flex', gap: '8px' }}> <div style={{ display: 'flex', gap: '6px', flexShrink: 0 }}>
<a <a
href="https://buymeacoffee.com/k0cjh" href="https://buymeacoffee.com/k0cjh"
target="_blank" target="_blank"
@ -96,16 +110,17 @@ export const Header = ({
style={{ style={{
background: 'linear-gradient(135deg, #ff813f 0%, #ffdd00 100%)', background: 'linear-gradient(135deg, #ff813f 0%, #ffdd00 100%)',
border: 'none', border: 'none',
padding: '8px 14px', padding: '6px 10px',
borderRadius: '4px', borderRadius: '4px',
color: '#000', color: '#000',
fontSize: '13px', fontSize: '12px',
cursor: 'pointer', cursor: 'pointer',
fontWeight: '600', fontWeight: '600',
textDecoration: 'none', textDecoration: 'none',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
gap: '4px' gap: '3px',
whiteSpace: 'nowrap'
}} }}
title="Buy me a coffee!" title="Buy me a coffee!"
> >
@ -116,11 +131,12 @@ export const Header = ({
style={{ style={{
background: 'var(--bg-tertiary)', background: 'var(--bg-tertiary)',
border: '1px solid var(--border-color)', border: '1px solid var(--border-color)',
padding: '8px 14px', padding: '6px 10px',
borderRadius: '4px', borderRadius: '4px',
color: 'var(--text-secondary)', color: 'var(--text-secondary)',
fontSize: '13px', fontSize: '12px',
cursor: 'pointer' cursor: 'pointer',
whiteSpace: 'nowrap'
}} }}
> >
⚙ Settings ⚙ Settings
@ -130,11 +146,12 @@ export const Header = ({
style={{ style={{
background: isFullscreen ? 'rgba(0, 255, 136, 0.15)' : 'var(--bg-tertiary)', background: isFullscreen ? 'rgba(0, 255, 136, 0.15)' : 'var(--bg-tertiary)',
border: `1px solid ${isFullscreen ? 'var(--accent-green)' : 'var(--border-color)'}`, border: `1px solid ${isFullscreen ? 'var(--accent-green)' : 'var(--border-color)'}`,
padding: '8px 14px', padding: '6px 10px',
borderRadius: '4px', borderRadius: '4px',
color: isFullscreen ? 'var(--accent-green)' : 'var(--text-secondary)', color: isFullscreen ? 'var(--accent-green)' : 'var(--text-secondary)',
fontSize: '13px', fontSize: '12px',
cursor: 'pointer' cursor: 'pointer',
whiteSpace: 'nowrap'
}} }}
title={isFullscreen ? "Exit Fullscreen (Esc)" : "Enter Fullscreen"} title={isFullscreen ? "Exit Fullscreen (Esc)" : "Enter Fullscreen"}
> >

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.