Multi-stage Dockerfile: node:22.13.1-alpine3.21 builds the Vite
bundle, nginx:1.27.4-alpine3.21-slim serves dist/ on container :80.
Compose maps host :4422 to container :80 with a wget healthcheck
and unless-stopped restart policy.
nginx.conf serves Vite's content-addressed /assets/ as immutable,
caches images for 30d, falls back to index.html for SPA routes,
and sets X-Frame-Options / X-Content-Type-Options / Referrer-Policy
/ Permissions-Policy headers. Server tokens off.
.dockerignore keeps the build context lean (no node_modules, dist,
.git, archive, or compose files).
Pin to image digests in Portainer's stack editor for full lock.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Faithful 1:1 port of the single-file index.html to a Vite + Vue 3.5
project. All visuals, behavior, translations, quiz logic, scoring,
SVG paint filters, and modifier panel preserved. The previous
single-file build is archived as index.original.html for A/B compare.
Inline onclick handlers in the static template are converted to
Vue's @click bindings — Vue 3 ignores string-valued on* attributes,
which silently broke the qpb-logo "back to landing" navigation.
Inline handlers inside dynamically-injected innerHTML strings
(quiz options, slider, nav buttons) keep working since the browser
parses them; their target functions are exposed on window from
onMounted.
Pinned: vue 3.5.13, vite 6.4.2, @vitejs/plugin-vue 5.2.1.
Zero npm audit vulnerabilities.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
