A retro-styled interactive oscilloscope interface with authentic 1990s hardware aesthetics and Canadian currency background elements.
soniarosenberger.github.io/
├── index.html # Main application structure
├── assets/
│ ├── css/
│ │ ├── main.css # Complete styling system
│ │ └── main.css.backup # Backup of previous version
│ └── js/
│ └── synth.js # Interactive oscilloscope logic
└── README.md # Project documentation
- Background: Blue-purple gradient with scan lines
- Hardware: Vintage beige/gray oscilloscope housing
- Display: Green phosphor CRT with Canadian $100 bill background
- Controls: Authentic knobs, buttons, and LED indicators
- Headers: MS Sans Serif (90s system font)
- Hardware Labels: Arial (industrial labeling)
- Brand: Times New Roman (classic serif)
- Values: Courier New (monospace for technical readability)
- Frequency Knob: 20Hz - 2000Hz range with realistic rotation
- Amplitude Knob: 0-100% visual and audio control
- Waveform Buttons: Sine, Square, Sawtooth, Triangle
- Power Button: Full system on/off with state management
- Tone Generator: Real-time audio synthesis
- CRT Display: Authentic phosphor grid with vintage glow
- Status LEDs: Random activity indicators when powered
- Scan Lines: 90s-style CRT effect across entire interface
- Canadian Currency: Subtle $100 bill background in oscilloscope
- Semantic elements with consistent BEM-style naming
oscilloscope-*prefix for hardware componentscontrol-*prefix for interactive elementsapp-*prefix for application structure
/* Base Styles */ - Global resets and body styling
/* 90s Scan Effects */ - Retro visual effects
/* Application Frame */ - Main container styling
/* Header */ - Title bar and status
/* Main Layout */ - Grid system and responsive design
/* Panels */ - Content containers
/* Oscilloscope Unit */ - Hardware housing and branding
/* CRT Display */ - Canvas styling with Canadian bill background
/* Control Panel */ - Interactive controls layout
/* Control Knobs */ - Realistic hardware knobs
/* Wave Buttons */ - Waveform selection controls
/* Power Section */ - Main power controls
/* LED Indicators */ - Status lights
/* System Log */ - Debug/status output// DOM ELEMENTS - Element references and constants
// AUDIO VARIABLES - Synthesis and control state
// CANVAS UTILITIES - Display rendering helpers
// DRAWING FUNCTIONS - Waveform and grid rendering
// AUDIO CONTROL - Web Audio API management
// EVENT HANDLERS - User interaction logic
// KNOB INTERACTION - Realistic knob control mechanics
// INITIALIZATION - Startup and setup- Click and Drag: Vertical mouse movement rotates knobs
- Sensitivity: Optimized for precise frequency/amplitude control
- Visual Feedback: Real-time value updates and knob rotation
- Buttons: Click to select sine, square, sawtooth, or triangle waves
- Active State: Visual feedback for current selection
- Live Update: Immediate waveform change during tone generation
- Power Button: Large red button with authentic hardware feel
- State Persistence: All controls respect power state
- Visual Indicators: LEDs turn off when powered down
The oscilloscope display features a subtle Canadian $100 bill background that:
- Maintains readability of the green phosphor waveform
- Adds authentic vintage character
- Uses proper SVG encoding for CSS compatibility
- Blends seamlessly with the CRT aesthetic
cd soniarosenberger.github.io
python -m http.server 8000
# Navigate to http://localhost:8000- Consistent Naming: Descriptive, hierarchical class names
- Modular CSS: Organized by component with clear sections
- Clean JavaScript: Logical function grouping with comments
- Semantic HTML: Proper element usage and accessibility
- Modern Browsers: Chrome, Firefox, Safari, Edge
- Web Audio API: Required for tone generation
- Canvas API: Required for waveform display
- CSS Grid: Used for responsive layout
Built with authentic 1990s vibes and modern web standards 🎛️✨