ElectronArt — Sitio web (estático)

Landing de ventas estática para ElectronArt (by Electronik Lösungen). Sin build, sin dependencias: HTML + CSS + un JS mínimo.

Sistema visual «Máscara»

El sitio, el foro (backend/static/style.css) y la app (tema Máscara en src/theme/themes.py) comparten una sola identidad. Las reglas completas están en .claude/skills/electronart-design — leerlas antes de tocar nada visual. En dos líneas: la interfaz no parece una placa, se fabrica como una.

• Chaflán a 45°, no border-radius: así sale de la fresadora.
• Rótulos impresos sobre el borde (serigrafía), no etiquetas adentro de una caja.
• Pads perforados como viñetas, líneas de cota como separadores.
• El oro (--gold) se usa poco — si aparece en todos lados, deja de significar algo.
• Prohibido porque delata plantilla: barra de acento a la izquierda de una tarjeta, rombos como marcador, degradados de dos colores en el texto, emoji como viñeta de sección.

Los colores viven sólo en el :root de styles.css. Ninguna página define colores propios: si hace falta un tono nuevo, va como variable ahí. fondo.js dibuja el tejido de cobre y lo inserta solo; alcanza con incluirlo.

Archivos

website/
├── index.html        ← página principal (hero, features, comparación, precios, comunidad, FAQ)
├── descargas.html    ← descargas con SHA-256, verificación, requisitos e instalación
├── changelog.html    ← novedades versión por versión
├── terminos.html     ← términos y licencia (EULA)
├── styles.css        ← tema oscuro (#1e1e2e / #4ecca3 / #4d8eff), responsive
├── script.js         ← nav móvil y año del pie
├── enlaces.js        ← ⭐ URLs externas (foro, manual, redes) en UN solo lugar
├── fondo.js          ← tejido de cobre del fondo (se inserta solo)
├── netlify.toml      ← deploy Netlify (base = website, sin build)
├── vercel.json       ← deploy Vercel (clean URLs + cache de assets)
├── .nojekyll         ← GitHub Pages sirve la carpeta tal cual
└── assets/
    ├── logo.svg
    ├── favicon.svg
    ├── app-schematic.png   ← captura real (hero)
    └── app-3d.png          ← captura real (vista 3D)

Probar localmente

cd website
python -m http.server 8000
# abrir http://localhost:8000

Publicar

Subí la carpeta website/ tal cual a cualquier hosting estático. Ya vienen configs zero-config:

• GitHub Pages (automático): el workflow .github/workflows/deploy-pages.yml publica website/ en cada push a main. Una sola vez: Settings ▸ Pages ▸ Source = "GitHub Actions". (Asume raíz del repo = ElectronArtEDA/; si tu raíz es un nivel más arriba, cambiá website → ElectronArtEDA/website en el workflow). El .nojekyll evita el procesado Jekyll.
• Netlify: conectá el repo; netlify.toml fija base = website, sin build command.
• Vercel: importá el repo con Root Directory = website; vercel.json aplica clean URLs + cache de assets.
• Cloudflare Pages / a mano: arrastrá la carpeta website/ (sin build; publish dir = la carpeta misma).

Mantenimiento por script (no editar a mano)

Qué	Script	Cuándo
Tabla de descargas + SHA-256	python scripts/gen_downloads.py --write	después de cada build
Novedades vs. el «Acerca de» de la app	python scripts/gen_changelog.py --check	antes de publicar una versión
Links, anclas, assets, higiene de páginas	python scripts/check_links.py [--online]	siempre

• gen_downloads.py lee los ZIP de dist/, calcula el hash y reescribe sólo lo que está entre <!-- AUTO:descargas --> y <!-- /AUTO:descargas -->. Con --base-url https://… los nombres quedan enlazados de verdad. Deja también un .sha256 al lado de cada ZIP. --check falla si la página quedó atrás del build.
• gen_changelog.py compara changelog.html contra el «Acerca de» de la app (la fuente de verdad) y avisa qué versiones faltan; con --write las inserta como borrador para curar a mano — no pisa las entradas ya publicadas.

⚠️ Antes de publicar: configurar los links y los pagos

Los links externos (foro, manual, contacto, redes) se cargan en un solo lugar: enlaces.js. Poné la URL en ese objeto y todas las páginas la toman. El foro sale del deploy del backend (backend/fly.toml).

Los botones de precio siguen aparte, en index.html (buscá data-pay= y data-link=). Desde el rediseño comprar→activar (F14.5), todos llevan data-link="tienda" → la página /store del backend, que es el único lugar con el checkout real configurado (EA_PAGO_URLS: Gumroad internacional / MercadoPago Argentina):

Botón	Atributos	Va a
Descargar gratis (Gratuita)	href="descargas.html"	landing de descargas
Pedir licencia (Student)	data-pay="student" data-link="tienda"	/store
Comprar Pro ($79)	data-pay="pro" data-link="tienda"	/store
Comprar Industrial ($299)	data-pay="industrial" data-link="tienda"	/store
MercadoPago / Gumroad	data-pay="…" data-link="tienda"	/store
Manual / Foro / Contacto / Redes	data-link="..."	cargar en enlaces.js

Mientras un href siga siendo #, enlaces.js muestra un aviso de "link pendiente" al hacer clic, en vez de dejar que no pase nada.

Precios (decididos)

• Student — Gratis (uso personal/educativo)
• Pro — USD 79 (uso comercial, autorouter/DRC/ERC, fabricación + 3D)
• Industrial — USD 299 (industrial/VFD, Ladder/PLC, soporte)

Notas

• Las marcas de terceros (Altium, Eagle, Proteus, EasyEDA) se mencionan solo con fines comparativos.
• El hero ya usa una captura real (assets/app-schematic.png). Para refrescarla, reemplazá el PNG por una captura nueva del mismo tamaño.