Components

Shared components used across Everything

Music Player

Persistent audio player that maintains state across page navigation.

Files

• /js/components/music-player.js
• /css/components/music-player.css

Features

• Play/pause Octi_Everything.mp3
• Volume control
• Progress bar with seek
• Minimizable interface
• State persists via localStorage
• Theme-aware styling
• Keyboard shortcut: Space to toggle

localStorage Keys

everything_music: {
  isPlaying: boolean,
  isMinimized: boolean,
  volume: number (0-1),
  currentTime: number (seconds)
}

Chaos Navigation

Theme-aware navigation system with multiple visual variants.

Files

• /js/components/nav-chaos.js
• /css/components/nav-chaos.css

Nav Variants

• Floating (default) - Floating panel with categories
• Taskbar (Windows XP) - Bottom taskbar with start menu
• Terminal (Linux) - Command-line navigation
• Minimal - Simple dropdown

Features

• "Random Page" button on every variant
• Pages grouped by category
• Keyboard navigation (Escape to close)
• Current page highlighting

Visitor Counter

Retro-style visitor counter using localStorage.

Usage

<div data-visitor-counter data-counter-style="digital"></div>

Styles

• digital - LED display
• text - Plain text
• roman - Roman numerals

Random Facts

Displays random facts from the database.

Usage

<p data-random-fact data-refreshable>Loading...</p>

The data-refreshable attribute makes it clickable to get a new fact.