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

monotype adjustment

Browse Source
pull/17/head
accius 3 days ago
parent f7b534773b
commit 23ebba09e5
2 changed files with 42 additions and 41 deletions
Show Stats Download Patch File Download Diff File

2
src/App.jsx
Unescape View File

@ -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',

81
src/components/Header.jsx
Unescape View File

@ -22,89 +22,87 @@ 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', width: '36px' }}>UTC</span> <span style={{ fontSize: '13px', color: 'var(--accent-cyan)', fontWeight: '600' }}>UTC</span>
<span style={{ <span style={{
fontSize: '28px', fontSize: '24px',
fontWeight: '700', fontWeight: '700',
color: 'var(--accent-cyan)', color: 'var(--accent-cyan)',
fontFamily: 'JetBrains Mono, Consolas, monospace', fontFamily: 'JetBrains Mono, Consolas, monospace',
width: '95px', whiteSpace: 'nowrap'
display: 'inline-block',
textAlign: 'center'
}}>{utcTime}</span> }}>{utcTime}</span>
<span style={{ fontSize: '13px', color: 'var(--text-muted)', width: '115px', display: 'inline-block' }}>{utcDate}</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', width: '50px' }}>LOCAL</span> <span style={{ fontSize: '13px', color: 'var(--accent-amber)', fontWeight: '600' }}>LOCAL</span>
<span style={{ <span style={{
fontSize: '28px', fontSize: '24px',
fontWeight: '700', fontWeight: '700',
color: 'var(--accent-amber)', color: 'var(--accent-amber)',
fontFamily: 'JetBrains Mono, Consolas, monospace', fontFamily: 'JetBrains Mono, Consolas, monospace',
width: use12Hour ? '130px' : '95px', whiteSpace: 'nowrap'
display: 'inline-block',
textAlign: 'center'
}}>{localTime}</span> }}>{localTime}</span>
<span style={{ fontSize: '13px', color: 'var(--text-muted)', width: '115px', display: 'inline-block' }}>{localDate}</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', fontFamily: 'JetBrains Mono, Consolas, monospace' }}> <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`} style={{ width: '120px' }}> <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>
</div> </div>
)} )}
<div style={{ width: '65px' }}> <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 style={{ width: '40px' }}> <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 style={{ width: '70px' }}> <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"
@ -112,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!"
> >
@ -132,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
@ -146,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.