Ponzo el boton verde y los mininos

successbyfailure · successbyfailure · commit 0e80c8693ab2 · 2025-12-20T12:49:06.000+01:00
diff --git a/CURRENT_PLAN.md b/CURRENT_PLAN.md
@@ -2,8 +2,6 @@
 
 Usa esta lista para acordar los pasos antes de ejecutar cambios. Actualízala según avances.
 
-- [x] Revisar instrucciones vigentes y el estado base del repo.
-- [x] Definir flujo de GitHub Actions para construir y publicar la imagen.
-- [x] Ajustar Docker Compose para permitir descargar la imagen desde GitHub.
-- [x] Documentar el uso de la imagen remota y notas relevantes.
-- [x] Actualizar notas en FOUND_WHILE_WORKING.md si aparecen hallazgos.
+- [x] Actualizar Dockerfile para incluir las imagenes locales en el contenedor.
+- [x] Reconstruir la imagen y levantar el servicio.
+- [x] Probar que los SVG se sirven correctamente desde el contenedor.
diff --git a/Dockerfile b/Dockerfile
@@ -1,3 +1,4 @@
 FROM nginx:alpine
 
 COPY index.html /usr/share/nginx/html/index.html
+COPY images/ /usr/share/nginx/html/images/
diff --git a/images/cat-1.svg b/images/cat-1.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="Ilustracion de gatito naranja">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#ffe9c5"/>
+      <stop offset="1" stop-color="#f7c98f"/>
+    </linearGradient>
+  </defs>
+  <rect width="320" height="200" rx="24" fill="url(#bg)"/>
+  <circle cx="160" cy="112" r="60" fill="#e58b3a"/>
+  <polygon points="112,68 140,30 150,78" fill="#e58b3a"/>
+  <polygon points="208,68 170,30 168,78" fill="#e58b3a"/>
+  <polygon points="120,70 140,44 148,78" fill="#f4b071"/>
+  <polygon points="200,70 180,44 172,78" fill="#f4b071"/>
+  <circle cx="138" cy="112" r="8" fill="#2f2a28"/>
+  <circle cx="182" cy="112" r="8" fill="#2f2a28"/>
+  <circle cx="138" cy="112" r="3" fill="#ffffff"/>
+  <circle cx="182" cy="112" r="3" fill="#ffffff"/>
+  <polygon points="160,124 152,134 168,134" fill="#b85c4a"/>
+  <path d="M160 134 C150 140 140 144 130 144" stroke="#2f2a28" stroke-width="3" fill="none"/>
+  <path d="M160 134 C170 140 180 144 190 144" stroke="#2f2a28" stroke-width="3" fill="none"/>
+  <path d="M88 116 H124" stroke="#2f2a28" stroke-width="3"/>
+  <path d="M196 116 H232" stroke="#2f2a28" stroke-width="3"/>
+</svg>
diff --git a/images/cat-2.svg b/images/cat-2.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="Ilustracion de gatito gris">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e6f1f5"/>
+      <stop offset="1" stop-color="#c8d7e6"/>
+    </linearGradient>
+  </defs>
+  <rect width="320" height="200" rx="24" fill="url(#bg)"/>
+  <circle cx="160" cy="114" r="58" fill="#808a95"/>
+  <polygon points="112,70 140,32 150,82" fill="#808a95"/>
+  <polygon points="208,70 170,32 168,82" fill="#808a95"/>
+  <polygon points="120,72 140,48 148,82" fill="#a2aab2"/>
+  <polygon points="200,72 180,48 172,82" fill="#a2aab2"/>
+  <ellipse cx="140" cy="114" rx="10" ry="12" fill="#2a2a2a"/>
+  <ellipse cx="180" cy="114" rx="10" ry="12" fill="#2a2a2a"/>
+  <circle cx="140" cy="114" r="4" fill="#ffffff"/>
+  <circle cx="180" cy="114" r="4" fill="#ffffff"/>
+  <polygon points="160,126 152,136 168,136" fill="#d8887e"/>
+  <path d="M160 136 C148 144 138 148 126 148" stroke="#2a2a2a" stroke-width="3" fill="none"/>
+  <path d="M160 136 C172 144 182 148 194 148" stroke="#2a2a2a" stroke-width="3" fill="none"/>
+  <path d="M90 116 H122" stroke="#2a2a2a" stroke-width="3"/>
+  <path d="M198 116 H230" stroke="#2a2a2a" stroke-width="3"/>
+</svg>
diff --git a/images/cat-3.svg b/images/cat-3.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="200" viewBox="0 0 320 200" role="img" aria-label="Ilustracion de gatito negro con ojos verdes">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#efe7e2"/>
+      <stop offset="1" stop-color="#f2d8c5"/>
+    </linearGradient>
+  </defs>
+  <rect width="320" height="200" rx="24" fill="url(#bg)"/>
+  <circle cx="160" cy="112" r="60" fill="#2b2b2b"/>
+  <polygon points="112,68 140,30 150,78" fill="#2b2b2b"/>
+  <polygon points="208,68 170,30 168,78" fill="#2b2b2b"/>
+  <polygon points="120,70 140,46 148,78" fill="#4a4a4a"/>
+  <polygon points="200,70 180,46 172,78" fill="#4a4a4a"/>
+  <ellipse cx="140" cy="112" rx="10" ry="12" fill="#2ecc71"/>
+  <ellipse cx="180" cy="112" rx="10" ry="12" fill="#2ecc71"/>
+  <rect x="137" y="106" width="6" height="12" rx="3" fill="#1a1a1a"/>
+  <rect x="177" y="106" width="6" height="12" rx="3" fill="#1a1a1a"/>
+  <polygon points="160,124 152,134 168,134" fill="#c07a72"/>
+  <path d="M160 134 C150 140 140 144 130 144" stroke="#1a1a1a" stroke-width="3" fill="none"/>
+  <path d="M160 134 C170 140 180 144 190 144" stroke="#1a1a1a" stroke-width="3" fill="none"/>
+  <path d="M90 116 H122" stroke="#1a1a1a" stroke-width="3"/>
+  <path d="M198 116 H230" stroke="#1a1a1a" stroke-width="3"/>
+</svg>
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
       }
 
       button {
-        background: #1f4fb8;
+        background: #1c8a3a;
         color: #ffffff;
         border: none;
         border-radius: 999px;
@@ -54,7 +54,7 @@
 
       button:hover {
         transform: translateY(-2px);
-        box-shadow: 0 10px 20px rgba(31, 79, 184, 0.25);
+        box-shadow: 0 10px 20px rgba(28, 138, 58, 0.25);
       }
 
       #mensaje {
@@ -63,6 +63,25 @@
         font-weight: 600;
         min-height: 24px;
       }
+
+      .cat-grid {
+        margin-top: 24px;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+        gap: 12px;
+      }
+
+      .cat-card {
+        margin: 0;
+      }
+
+      .cat-card img {
+        width: 100%;
+        height: 140px;
+        object-fit: cover;
+        border-radius: 16px;
+        box-shadow: 0 8px 18px rgba(30, 40, 60, 0.15);
+      }
     </style>
   </head>
   <body>
@@ -71,14 +90,25 @@ <h1>Humanos ¿Opcionales?</h1>
       <p>Demo del workshop sobre programar en tiempos de IA y automatizaciones.</p>
       <button id="boton-hola" type="button">Hola</button>
       <div id="mensaje" aria-live="polite"></div>
+      <div class="cat-grid" aria-label="Galeria de gatitos">
+        <figure class="cat-card">
+          <img src="images/cat-1.svg" alt="Gatito curioso mirando a la camara">
+        </figure>
+        <figure class="cat-card">
+          <img src="images/cat-2.svg" alt="Gatito descansando con luz suave">
+        </figure>
+        <figure class="cat-card">
+          <img src="images/cat-3.svg" alt="Gatito atigrado en primer plano">
+        </figure>
+      </div>
     </main>
 
     <script>
       const botonHola = document.getElementById("boton-hola");
       const mensaje = document.getElementById("mensaje");
 
       botonHola.addEventListener("click", () => {
-        mensaje.textContent = "Hola mundo!";
+        mensaje.textContent = "Saludos a los asistentes del taller";
       });
     </script>
   </body>

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
`1`	`1`	`FROM nginx:alpine`
`2`	`2`
`3`	`3`	`COPY index.html /usr/share/nginx/html/index.html`
	`4`	`+COPY images/ /usr/share/nginx/html/images/`