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

classic view

Browse Source
pull/6/head
accius 3 days ago
parent 99c8644dbc
commit cbae93ba61
3 changed files with 250 additions and 7 deletions
Show Stats Download Patch File Download Diff File

11
src/components/SettingsPanel.jsx
Unescape View File

@ -106,7 +106,8 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
const themeDescriptions = {
dark: '→ Modern dark theme (default)',
light: '→ Light theme for daytime use',
legacy: '→ Classic green terminal style'
legacy: '→ Green terminal CRT style',
classic: '→ 90s Windows retro style'
};
const layoutDescriptions = {
@ -268,8 +269,8 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
<label style={{ display: 'block', marginBottom: '8px', color: 'var(--text-muted)', fontSize: '11px', textTransform: 'uppercase', letterSpacing: '1px' }}>
Theme
</label>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '8px' }}>
{['dark', 'light', 'legacy'].map((t) => (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '8px' }}>
{['dark', 'light', 'legacy', 'classic'].map((t) => (
<button
key={t}
onClick={() => setTheme(t)}
@ -279,12 +280,12 @@ export const SettingsPanel = ({ isOpen, onClose, config, onSave }) => {
border: `1px solid ${theme === t ? 'var(--accent-amber)' : 'var(--border-color)'}`,
borderRadius: '6px',
color: theme === t ? '#000' : 'var(--text-secondary)',
fontSize: '13px',
fontSize: '12px',
cursor: 'pointer',
fontWeight: theme === t ? '600' : '400'
}}
>
{t === 'dark' ? '🌙' : t === 'light' ? '☀️' : '💻'} {t.charAt(0).toUpperCase() + t.slice(1)}
{t === 'dark' ? '🌙' : t === 'light' ? '☀️' : t === 'legacy' ? '💻' : '🪟'} {t.charAt(0).toUpperCase() + t.slice(1)}
</button>
))}
</div>

244
src/styles/main.css
Unescape View File

@ -47,7 +47,7 @@
}
/* ============================================
THEME: LEGACY (Classic HamClock Style)
THEME: LEGACY (Green Terminal Style)
============================================ */
[data-theme="legacy"] {
--bg-primary: #000000;
@ -70,6 +70,34 @@
--scanline-opacity: 0.05;
}
/* ============================================
THEME: CLASSIC (90s Windows Style)
============================================ */
[data-theme="classic"] {
--bg-primary: #008080;
--bg-secondary: #c0c0c0;
--bg-tertiary: #dfdfdf;
--bg-panel: #c0c0c0;
--border-color: #808080;
--border-light: #ffffff;
--border-dark: #404040;
--text-primary: #000000;
--text-secondary: #000000;
--text-muted: #404040;
--accent-amber: #ffff00;
--accent-amber-dim: #c0c000;
--accent-green: #00ff00;
--accent-green-dim: #00c000;
--accent-red: #ff0000;
--accent-blue: #000080;
--accent-cyan: #008080;
--accent-purple: #800080;
--title-bar: linear-gradient(90deg, #000080, #1084d0);
--title-bar-text: #ffffff;
--map-ocean: #000080;
--scanline-opacity: 0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@ -87,6 +115,12 @@ body {
font-family: 'JetBrains Mono', monospace !important;
}
/* Classic theme uses system fonts */
[data-theme="classic"] body,
[data-theme="classic"] * {
font-family: 'Tahoma', 'MS Sans Serif', 'Arial', sans-serif !important;
}
/* Subtle scanline effect */
body::before {
content: '';
@ -97,6 +131,191 @@ body::before {
z-index: 9999;
}
/* ============================================
CLASSIC THEME - 90s WINDOWS STYLING
============================================ */
/* 3D Beveled border effect for classic theme */
[data-theme="classic"] .panel {
background: #c0c0c0 !important;
border: none !important;
border-radius: 0 !important;
box-shadow:
inset -1px -1px 0 #404040,
inset 1px 1px 0 #ffffff,
inset -2px -2px 0 #808080,
inset 2px 2px 0 #dfdfdf !important;
backdrop-filter: none !important;
}
/* Classic window title bar style */
[data-theme="classic"] .panel-header,
[data-theme="classic"] .panel > div:first-child {
background: linear-gradient(90deg, #000080, #1084d0) !important;
color: #ffffff !important;
font-weight: bold !important;
padding: 2px 4px !important;
margin: -10px -10px 8px -10px !important;
font-size: 12px !important;
}
/* Classic buttons */
[data-theme="classic"] button,
[data-theme="classic"] .map-style-btn {
background: #c0c0c0 !important;
color: #000000 !important;
border: none !important;
border-radius: 0 !important;
box-shadow:
inset -1px -1px 0 #404040,
inset 1px 1px 0 #ffffff,
inset -2px -2px 0 #808080,
inset 2px 2px 0 #dfdfdf !important;
font-family: 'Tahoma', 'MS Sans Serif', sans-serif !important;
font-size: 11px !important;
padding: 4px 12px !important;
}
[data-theme="classic"] button:hover,
[data-theme="classic"] .map-style-btn:hover {
background: #dfdfdf !important;
}
[data-theme="classic"] button:active,
[data-theme="classic"] .map-style-btn:active,
[data-theme="classic"] .map-style-btn.active {
box-shadow:
inset 1px 1px 0 #404040,
inset -1px -1px 0 #ffffff,
inset 2px 2px 0 #808080,
inset -2px -2px 0 #dfdfdf !important;
}
/* Classic inputs */
[data-theme="classic"] input,
[data-theme="classic"] select {
background: #ffffff !important;
color: #000000 !important;
border: none !important;
border-radius: 0 !important;
box-shadow:
inset 1px 1px 0 #404040,
inset -1px -1px 0 #ffffff,
inset 2px 2px 0 #808080,
inset -2px -2px 0 #dfdfdf !important;
font-family: 'Tahoma', 'MS Sans Serif', sans-serif !important;
font-size: 11px !important;
padding: 2px 4px !important;
}
/* Classic scrollbars */
[data-theme="classic"] ::-webkit-scrollbar {
width: 16px;
height: 16px;
}
[data-theme="classic"] ::-webkit-scrollbar-track {
background: #c0c0c0;
background-image:
linear-gradient(45deg, #808080 25%, transparent 25%),
linear-gradient(-45deg, #808080 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #808080 75%),
linear-gradient(-45deg, transparent 75%, #808080 75%);
background-size: 4px 4px;
background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
}
[data-theme="classic"] ::-webkit-scrollbar-thumb {
background: #c0c0c0;
border-radius: 0;
box-shadow:
inset -1px -1px 0 #404040,
inset 1px 1px 0 #ffffff,
inset -2px -2px 0 #808080,
inset 2px 2px 0 #dfdfdf;
}
[data-theme="classic"] ::-webkit-scrollbar-button {
background: #c0c0c0;
box-shadow:
inset -1px -1px 0 #404040,
inset 1px 1px 0 #ffffff;
width: 16px;
height: 16px;
}
/* Classic links */
[data-theme="classic"] a {
color: #0000ff !important;
text-decoration: underline !important;
}
[data-theme="classic"] a:visited {
color: #800080 !important;
}
/* Classic header styling */
[data-theme="classic"] [style*="gridColumn: '1 / -1'"] {
background: #c0c0c0 !important;
}
/* Classic text colors override */
[data-theme="classic"] [style*="color: var(--accent-cyan)"],
[data-theme="classic"] [style*="color: var(--accent-amber)"],
[data-theme="classic"] [style*="color: var(--accent-green)"] {
color: #000080 !important;
}
/* Classic modal/dialog styling */
[data-theme="classic"] [style*="position: fixed"][style*="background: rgba"] {
background: rgba(0, 128, 128, 0.9) !important;
}
/* Classic table styling for DX cluster */
[data-theme="classic"] table,
[data-theme="classic"] [style*="display: grid"] {
border-collapse: collapse;
}
[data-theme="classic"] tr:nth-child(even) {
background: #dfdfdf;
}
[data-theme="classic"] tr:nth-child(odd) {
background: #c0c0c0;
}
/* Classic Leaflet overrides */
[data-theme="classic"] .leaflet-container {
background: #000080 !important;
}
[data-theme="classic"] .leaflet-control-zoom {
border-radius: 0 !important;
}
[data-theme="classic"] .leaflet-control-zoom a {
background: #c0c0c0 !important;
color: #000000 !important;
border-radius: 0 !important;
box-shadow:
inset -1px -1px 0 #404040,
inset 1px 1px 0 #ffffff !important;
}
[data-theme="classic"] .leaflet-popup-content-wrapper {
background: #c0c0c0 !important;
border-radius: 0 !important;
box-shadow:
inset -1px -1px 0 #404040,
inset 1px 1px 0 #ffffff,
2px 2px 4px rgba(0,0,0,0.5) !important;
}
[data-theme="classic"] .leaflet-popup-tip {
background: #c0c0c0 !important;
}
/* ============================================
ANIMATIONS
============================================ */
@ -120,6 +339,13 @@ body::before {
border-top-color: var(--accent-amber);
}
/* Classic theme uses hourglass cursor for loading */
[data-theme="classic"] .loading-spinner {
border-radius: 0;
border-color: #000000;
border-top-color: #808080;
}
/* ============================================
LEAFLET MAP CUSTOMIZATIONS
============================================ */
@ -198,6 +424,13 @@ body::before {
border: 2px solid #aaaacc;
}
/* Classic theme markers - square */
[data-theme="classic"] .custom-marker,
[data-theme="classic"] .de-marker,
[data-theme="classic"] .dx-marker {
border-radius: 0 !important;
}
/* ============================================
MAP STYLE SELECTOR
============================================ */
@ -308,6 +541,15 @@ body::before {
border-top-color: #ffffff !important;
}
/* Classic tooltips */
[data-theme="classic"] .dx-tooltip {
background: #ffffcc !important;
border: 1px solid #000000 !important;
border-radius: 0 !important;
color: #000000 !important;
box-shadow: 2px 2px 0 #000000 !important;
}
/* ============================================
SCROLLBAR STYLING
============================================ */

2
src/utils/config.js
Unescape View File

@ -7,7 +7,7 @@ export const DEFAULT_CONFIG = {
callsign: 'N0CALL',
location: { lat: 40.0150, lon: -105.2705 }, // Boulder, CO (default)
defaultDX: { lat: 35.6762, lon: 139.6503 }, // Tokyo
theme: 'dark', // 'dark', 'light', or 'legacy'
theme: 'dark', // 'dark', 'light', 'legacy', or 'classic'
layout: 'modern', // 'modern' or 'legacy'
refreshIntervals: {
spaceWeather: 300000,

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.