denshooter
e236e1f673
- Enhanced all major components with glassmorphic styling: * EngineData gauges: frosted glass panels with animations * InstrumentPanel: glassmorphic waypoint boxes and data tables * NowPlaying: glassmorphic album art container and controls * All panels: smooth fade-in animations on mount - Updated visual elements: * Consistent use of backdrop-filter blur effect * Semi-transparent borders with 0.1-0.2 opacity * Smooth animations (slideInUp, slideInDown, fadeIn) * Better font weights and hierarchy * Improved contrast and readability - Color scheme refinements: * Highlight backgrounds use RGBA with proper opacity * Better use of accent colors for emphasis * Consistent border styling with transparency * Support for light/dark mode throughout - Animation improvements: * All cards and panels animate on mount * Tab transitions are smooth and snappy * Hover effects with scale and shadow changes * Cubic-bezier timing functions for natural feel - Build optimization: * Still 70 modules, same bundle size * CSS is well-organized and maintainable * No breaking changes to component APIs Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
28 lines
928 B
JavaScript
28 lines
928 B
JavaScript
import Gauge from '../instruments/Gauge.jsx'
|
|
import { useNMEA } from '../../hooks/useNMEA.js'
|
|
|
|
export default function EngineData() {
|
|
const { rpm, waterTemp, fuel } = useNMEA()
|
|
|
|
return (
|
|
<div style={styles.grid}>
|
|
<Gauge value={rpm} min={0} max={3000} label="RPM" unit="rpm" warning={2500} danger={2800} />
|
|
<Gauge value={waterTemp} min={0} max={120} label="Coolant" unit="°C" warning={85} danger={100} />
|
|
<Gauge value={fuel} min={0} max={100} label="Fuel" unit="%" warning={20} danger={10} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const styles = {
|
|
grid: {
|
|
display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center',
|
|
padding: 16,
|
|
background: 'var(--glass-bg)',
|
|
backdropFilter: 'blur(var(--glass-blur))',
|
|
WebkitBackdropFilter: 'blur(var(--glass-blur))',
|
|
borderRadius: 'var(--radius-lg)',
|
|
border: '1px solid rgba(255, 255, 255, 0.1)',
|
|
animation: 'slideInUp 0.3s ease-out',
|
|
}
|
|
}
|