hermes-skills/skills/software-development/portal-ui-mockups/references/apex-vehicle-embed.md

Apex Vehicle Registration — Final Embeddable Snippet

File: /root/.hermes/references/apex-vreg-final.html Format: Self-contained HTML with inline vehicle data JSON + CSS + JS Size: ~16KB Target: Elementor HTML widget on http://apextrackexperience.com/nasa

Usage

1. Open the NASA page in Elementor
2. Add an HTML widget
3. Open apex-vreg-final.html in a text editor
4. Copy the entire contents
5. Paste into the Elementor HTML widget
6. Save

Features

• Cascading make → model → year dropdowns (50+ makes, 200+ models)
• Factory horsepower ratings inline for every make/model/year
• Color selector (16 presets + "Other" with free-text input)
• Specs panel locked until color is selected
• Light theme (white bg, blue accent #2563eb) matching the Apex site
• Email field omitted — part of overall driver registration
• No external dependencies (vehicle data is embedded as JSON)
• Button has 18px margin-top (equidistant with field gaps)

Vehicle Database

The snippet includes ~200 exotic/sports car entries with factory HP. The data is embedded in the <script> tag as vrData. To add/update:

const vrData = {
  "Porsche": {
    "911 GT3 RS": {"2023": 518, "2024": 518}
  },
  "Ferrari": {
    "296 GTB": {"2023": 819, "2024": 819}
  }
};

A daily cron job (exotic-vehicle-scout) checks for new 2025-2026 exotic vehicle announcements and reports them here.

Maintenance

• Data updates: Edit the JSON object in the <script> tag
• Theme changes: CSS is namespaced under #apex-vreg
• To rebuild from scratch: See portal-ui-mockups skill for the vehicle registration pattern
• Live preview available at: https://vaultwarden.tailc2f3b0.ts.net/portal/apex-vreg-final.html