diff --git a/src/components/SettingsPanel.jsx b/src/components/SettingsPanel.jsx index 26baf20..c044f6b 100644 --- a/src/components/SettingsPanel.jsx +++ b/src/components/SettingsPanel.jsx @@ -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 }) => { -
- {['dark', 'light', 'legacy'].map((t) => ( +
+ {['dark', 'light', 'legacy', 'classic'].map((t) => ( ))}
diff --git a/src/styles/main.css b/src/styles/main.css index 235dbb7..0f29ce0 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -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 ============================================ */ diff --git a/src/utils/config.js b/src/utils/config.js index 8afc553..0659e9a 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -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,