Homelab Control Panel (Rapture Landing Page)

The Homelab Control Panel is a highly customized BioShock-themed webpage hosted on the web-portfolio VM (172.30.1.201) and served publicly via Cloudflare Tunnels. This page combined custom Art Deco auesthetics with dynamic backend systems monitoring and synthetic sound effects.

1. Architectural Overview & Data Flow

The portal acts as a central landing page for the homelab. It displays node metadata (IPs, roles) and integrates dynamic polling script that updates VM online/offline states.

sequenceDiagram
    autonumber
    actor User as Developer Browser
    participant CF as Cloudflare Edge
    participant WebVM as web-portfolio (172.30.1.201)
    participant Monitor as homelab-monitor.service
    participant Nodes as Control & Media VMs

    %% Background Monitoring Loop
    Note over Monitor, Nodes: Every 10 Seconds
    Monitor->>Nodes: ICMP Ping (1s timeout)
    Nodes->>Monitor: Echo Reply
    Monitor->>WebVM: Write /usr/share/nginx/html/status.json

    %% Frontend Fetch
    User->>CF: Request dashboard.shooey.xyz (HTTPS)
    CF->>WebVM: Tunnel Forward to port 80 (HTTP)
    WebVM->>User: Serve index.html, style.css, script.js, bg.jpg
    Note over User: Page Loads & AudioContext Init
    loop Every 10 Seconds
        User->>WebVM: HTTP GET status.json
        WebVM->>User: Return {"control": true, "web": true, "media": true}
        Note over User: JS toggles status indicators (Cyan/Red)
    end

2. Design System & Thematic Style

The styling is designed to mimic a run-down, water damaged post-civil-war terminal inside the underwater city of Rapture:

Color Scheme: Sourced from my Konsole colorscheme:
- Base Background: Deep forest-teal balck (rgb(14,24,23)).
- Card Panels: Frosted glass using rgba(11,20,19,0.92) with a heavy backdrop-filter: blur(24px).
- Accents: Bioluminescent cyan (rgb(51,224,208)) and oxidized Art Deco gold/brass (rgb(212,174,44)).
Visual Enhancements:
- Double Frame: A double-line gold outline border (outline: 6px double var(--rust-accent))
- Vignette & Scanlines: A dark viewport vignette shadow simulatoring deep-water claustrophobia, combined with horizontal CRT scanlihnes layerd behind the text cards to keep typography sharp.
- Flickering Lights: CSS @keyframes simulating power grid failures by randomly toggling oppacity on the header title and status indicators.
- Slow Bubbles: A fixed background layer animating glowing teal bubbles floating lazily upward.

3. Rapture Broadcast System

Instead of playing raw audio, the dashboard implements a vintage vacuum-tube AM radio weidget utiliizng the browser's Web Audio API:

CORS & file:// Bypassing: To resolve browser security policies (which block Web Audio manipulation on external domains), a 6-song playlist of 1930s jazz tracks (Al Bowlly & Django Reinhardt) is downloaded locally and saved to website/audio/.
Bandpass Filter: The audio stream is routed through a BiquadFilterNode before hitting the output destination:
- type = 'bandpass' (cuts deep bass and high treble).
- frequency.value = 1100 (centers the audio in the mid-range where vintage speakers peaked).
- Q.value = 1.8 (narrows the band, creating a tinny, lo-fi vacuum-tube effect).
Continuous Playlist Loop: JavaScript tracks ended event handlers to aumatically load the next local track and update the "Now Playing" string.

4. Real-Time System Monitoring (Dynamic Pinging)

The status lights on the cards are backed by an automated server monitoring script:

Python Script (ping_status.py): Deployed to /usr/share/nginx/html/, it loops through a dictionary of VM hosts and runs ping -c 1 -W 1 <IP>. It writes a dictionary of booleans directly to /usr/share/nginx/html/status.json.
Systemd Service (homelab-monitor.service): Configured as a background daemon running an infinite loop with a 10-second sleep, starting automatically on boot:

[Unit]
Description=Homelab Nodes Status Monitor
After=network.target

[Service]
Type=simple
ExecStart=/bash -c "while true; do /usr/bin/python3 /usr/share/nginx/html/ping_status.py; sleep 10; done"
Restart=always

[Install]
WantedBy=multi-user.target

Frontend Poll: The JavaScript fetches status.json asynchronously every 10 seconds and updates class names to .online (pulsing cyan) or .offline (pulsing red).

5. UI Micro-interactions & Sound Synthesis

The gaming-interface feel is completed with custom cursors and dynamic sound effects:

Custom Cursors: Base SVG custom cursors (gold pointers) and hover states (cyan pointers) are embedded directly inside style.css using Base64/SVG URIs, ensuring zero asset lag.
Synthesized Switch Replay (Radio Switch): When clicking hte radio ON/OFF switch, two oscillators (triangle and sawtooth waves) decay rapidly from high to low frequencies over 0.12 seconds, synthesiizng a heavy physical relay switch clack.
Hover Tick (Card Enter): Moving the mouse cursor into any card triggers a sine-wave oscillator decaying from 1400Hz to 400Hz in 0.03 seconds, creating a clean, mechanical UI selection click.

6. Infrastructure Deployment Automation

All Nginx, firewall, SELinux, and service setups are fully automated in the Ansible playbooks:

deploy_website.yml: Installs Nginx, opens ports via firewalld, and synchronizes files.
deploy_monitor.yml: Registers the background Python monitor and configures the systemd service, executing restorecon as an idempotent handler to fix SELinux labeling on /usr/share/nginx/html.

5.6 KiB Raw Blame History