Implementación completa del sitio JAILGAMES (bloques A–J)

Sitio estático generado con Eleventy (11ty) + Nginx en Docker:
- Plantillas Nunjucks con layout base, tarjetas y fichas individuales
- Datos de juegos en YAML, colección ordenada por fecha
- CSS con tema oscuro gaming y diseño responsive (3/2/1 columnas)
- Lightbox vanilla JS para capturas de pantalla
- Build multi-stage Docker (node:20-alpine → nginx:alpine)
- 2 juegos de ejemplo con imágenes SVG placeholder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-30 12:58:55 +02:00
parent 93e41baf26
commit e337d7bc45
29 changed files with 3680 additions and 0 deletions
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<rect width="200" height="200" fill="#0f3460" rx="12"/>
<text x="100" y="90" text-anchor="middle" font-family="monospace" font-size="56" fill="#e94560">🚀</text>
<text x="100" y="130" text-anchor="middle" font-family="monospace" font-size="13" fill="#eaeaea">COSMIC ESCAPE</text>
<text x="100" y="155" text-anchor="middle" font-family="monospace" font-size="11" fill="#4ecca3">v1.2.0</text>
</svg>

After

Width:  |  Height:  |  Size: 496 B

@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
<rect width="800" height="450" fill="#0a0a1a"/>
<rect x="0" y="380" width="800" height="70" fill="#1a1a2e"/>
<circle cx="120" cy="80" r="40" fill="#f4d03f" opacity="0.8"/>
<circle cx="300" cy="50" r="8" fill="#eaeaea" opacity="0.4"/>
<circle cx="500" cy="120" r="5" fill="#eaeaea" opacity="0.5"/>
<circle cx="700" cy="30" r="10" fill="#eaeaea" opacity="0.3"/>
<rect x="350" y="250" width="40" height="60" fill="#4ecca3"/>
<rect x="360" y="220" width="20" height="30" fill="#a0a0a0"/>
<text x="400" y="430" text-anchor="middle" font-family="monospace" font-size="18" fill="#e94560">COSMIC ESCAPE — Nivel 1</text>
<text x="400" y="230" text-anchor="middle" font-family="monospace" font-size="12" fill="#a0a0a0">[Captura 1 — Placeholder]</text>
</svg>

After

Width:  |  Height:  |  Size: 861 B

@@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
<rect width="800" height="450" fill="#16213e"/>
<rect x="50" y="200" width="700" height="20" fill="#0f3460"/>
<rect x="50" y="300" width="300" height="20" fill="#0f3460"/>
<rect x="500" y="320" width="250" height="20" fill="#0f3460"/>
<circle cx="200" cy="190" r="15" fill="#e94560" opacity="0.9"/>
<circle cx="400" cy="290" r="15" fill="#e94560" opacity="0.7"/>
<rect x="370" y="160" width="30" height="40" fill="#4ecca3"/>
<text x="400" y="430" text-anchor="middle" font-family="monospace" font-size="18" fill="#e94560">COSMIC ESCAPE — Nivel 4</text>
<text x="400" y="60" text-anchor="middle" font-family="monospace" font-size="12" fill="#a0a0a0">[Captura 2 — Placeholder]</text>
</svg>

After

Width:  |  Height:  |  Size: 799 B

@@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
<rect width="800" height="450" fill="#1a0a0a"/>
<rect x="0" y="350" width="800" height="100" fill="#2a1a1a"/>
<ellipse cx="400" cy="200" rx="200" ry="120" fill="#e94560" opacity="0.15"/>
<circle cx="400" cy="200" r="60" fill="#c73650" opacity="0.6"/>
<text x="400" y="208" text-anchor="middle" font-family="monospace" font-size="36" fill="#eaeaea">👾</text>
<rect x="360" y="330" width="30" height="20" fill="#4ecca3"/>
<text x="400" y="430" text-anchor="middle" font-family="monospace" font-size="18" fill="#e94560">COSMIC ESCAPE — Jefe Final</text>
<text x="400" y="50" text-anchor="middle" font-family="monospace" font-size="12" fill="#a0a0a0">[Captura 3 — Placeholder]</text>
</svg>

After

Width:  |  Height:  |  Size: 797 B

+13
View File
@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<rect width="200" height="200" fill="#16213e" rx="12"/>
<rect x="60" y="60" width="20" height="20" fill="#4ecca3"/>
<rect x="80" y="60" width="20" height="20" fill="#4ecca3"/>
<rect x="100" y="60" width="20" height="20" fill="#4ecca3"/>
<rect x="60" y="80" width="20" height="20" fill="#4ecca3"/>
<rect x="100" y="80" width="20" height="20" fill="#4ecca3"/>
<rect x="60" y="100" width="20" height="20" fill="#4ecca3"/>
<rect x="80" y="100" width="20" height="20" fill="#4ecca3"/>
<rect x="100" y="100" width="20" height="20" fill="#4ecca3"/>
<text x="100" y="150" text-anchor="middle" font-family="monospace" font-size="11" fill="#eaeaea">PIXEL DUNGEON</text>
<text x="100" y="170" text-anchor="middle" font-family="monospace" font-size="10" fill="#a0a0a0">v0.9.1</text>
</svg>

After

Width:  |  Height:  |  Size: 888 B

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
<rect width="800" height="450" fill="#0a0a12"/>
<!-- Cuadrícula de tiles -->
<rect x="100" y="100" width="600" height="260" fill="#16213e"/>
<!-- Paredes -->
<rect x="100" y="100" width="600" height="20" fill="#0f3460"/>
<rect x="100" y="340" width="600" height="20" fill="#0f3460"/>
<rect x="100" y="100" width="20" height="260" fill="#0f3460"/>
<rect x="680" y="100" width="20" height="260" fill="#0f3460"/>
<!-- Pasillos -->
<rect x="300" y="100" width="20" height="80" fill="#0a0a12"/>
<rect x="480" y="280" width="20" height="80" fill="#0a0a12"/>
<!-- Jugador -->
<rect x="190" y="200" width="16" height="16" fill="#4ecca3"/>
<rect x="194" y="196" width="8" height="8" fill="#eaeaea"/>
<!-- Enemigo -->
<rect x="500" y="230" width="16" height="16" fill="#e94560"/>
<rect x="504" y="226" width="8" height="8" fill="#a02040"/>
<!-- Objetos -->
<rect x="380" y="230" width="10" height="10" fill="#f4d03f"/>
<rect x="420" y="210" width="8" height="14" fill="#8e44ad"/>
<text x="400" y="430" text-anchor="middle" font-family="monospace" font-size="14" fill="#4ecca3">PIXEL DUNGEON — Nivel B1</text>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

+5
View File
@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" viewBox="0 0 300 80">
<rect width="300" height="80" fill="#1a1a2e" rx="6"/>
<text x="20" y="52" font-family="monospace" font-size="36" font-weight="bold" fill="#e94560">JAIL</text>
<text x="115" y="52" font-family="monospace" font-size="36" font-weight="bold" fill="#4ecca3">GAMES</text>
</svg>

After

Width:  |  Height:  |  Size: 365 B