Miles-Arts · Miles-Arts · May 1, 2025 · May 1, 2025 · sourcery-ai · May 1, 2025
diff --git a/docs/css/main.css b/docs/css/main.css
@@ -0,0 +1,127 @@
+html, body {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+body {
+    background-color: #2a2b2f; 
+    display: flex; 
+    flex-direction: column;
+    justify-content: center; 
+    font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif; 
+    font-weight: 300;
+    color: #fff;
+    text-align: center;
+}
+
+footer {
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    padding: 10px;
+    margin-top: auto;
+}
+
+.octocat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin: 0 auto;
+    max-width: 300px;
+    height: auto;
+    border: 5px solid #2a2b2f;
+}
+
+.mona-images {
+
+    max-width: 130%; /* Mantiene el tamaño actual de las imágenes al 130% del ancho del contenedor */
+    height: auto; /* Mantiene la proporción de las imágenes */
+    margin: center; /* Centra las imágenes horizontalmente */
+    display: block; /* Asegura que las imágenes se comporten como elementos de bloque */
+
+    padding-left: 10%; /* Asegura proporción de distancia horizontal */
+    padding-right: 10%; /* Asegura proporción de distancia horizontal */
+    border-radius: 0px; /* Bordes redondeados */
+    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3); /* Añade una sombra para el efecto flotante */
+    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para el efecto */
+
+}
+
+.mona-images:hover {
+    transform: translateY(-20px); /* Eleva la imagen ligeramente al pasar el cursor */
+    box-shadow: 0px 30px 40px rgba(0, 0, 0, 0.4); /* Intensifica la sombra al pasar el cursor */
+}
+
+.haiku-containers {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px;
+    margin: 0 auto;
+    max-width: 90%;
+}
+
+.haikus {
+    text-align: left;
+    font-size: 1.2rem;
+    white-space: pre-wrap;
+    margin-bottom: 10px;
+}
+
+.haiku-content {
+    display: flex;
+    align-items: center; /* Alinea el emoji y el texto verticalmente */
+    justify-content: center; /* Centra el contenido horizontalmente */
+    margin-bottom: 10px; /* Espaciado entre el texto y la imagen */
+}
+
+.emoji {
+    margin-right: 2px; /* Espacio entre el emoji y el texto */
+    font-size: 1.5rem; /* Tamaño del emoji */
+}
+
+@media only screen and (max-width: 600px) {
+    .mona-images {
+        max-width: 200px;
+    }
+
+    .haikus {
+        font-size: 1rem;
+    }
+
+    .haiku-containers {
+        padding: 4px;
+    }
+
+    body {
+        margin-top: 20px; /* Margen superior consistente */
+        margin-bottom: 20px; /* Margen inferior consistente */
+    }
+
+    .haiku-containers {
+        margin-top: 10px; /* Ajusta el margen superior */
+        margin-bottom: 10px; /* Ajusta el margen inferior */
+    }
+}
+
+@media only screen and (max-width: 600px) and (orientation: landscape) {
+    .mona-images {
+        max-width: 20px; /* Ajusta el tamaño de las imágenes */
+        margin: 0 auto; /* Centra las imágenes */
+    }
+
+    .haikus {
+        font-size: 1rem; /* Ajusta el tamaño del texto */
+        text-align: center; /* Centra el texto */
+    }
+
+    .haiku-containers {
+        padding: 4px; /* Reduce el padding */
+    }
+}
diff --git a/docs/images/example.jpg b/docs/images/example.jpg
diff --git a/docs/images/linktocat.jpg b/docs/images/linktocat.jpg
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>👦🏼 Haikus GitHub  📚</title>
+  <link href="/css/main.css" rel="stylesheet" type="text/css">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+
+<body>
+  <h1 class="top">👦🏼 Haikus GitHub  📚</h1>
+
+     <div class="haiku-containers">
+      <div class="haiku-content">
+        <span class="emoji"></span>
+        <p class="haikus">Cerebro digital,
+piensa como los humanos,
+futuro hoy.</p>
+      </div>
+
+      </div>
+
+     <div class="haiku-containers">
+      <div class="haiku-content">
+        <span class="emoji"></span>
+        <p class="haikus">Aprende el mundo,
+datos crean caminos,
+sabiduría.</p>
+      </div>
+
+      </div>
+
+
+      <div class="octocat">
+        <h2>the Filmtocat</h2>
+        <img class="mona-images" src="https://octodex.github.com//images/filmtocat.png" alt="the Filmtocat">
+        <p>Luces, cámara, git
+Celuloides digitales
+Filma tu código</p>
+        <p><em>Author: jeejkang</em></p>
+      </div>
+
+      <div style="text-align: center; margin-top: 20px;">
+        <button onclick="window.location.reload()"
+          style="padding: 14px 120px; font-size: 16px; background-color: #007BFF; color: white; border: none; border-radius: 30px; cursor: pointer;">
+          🔄 &nbsp;<span id="countdown"> 40 &nbsp;&nbsp;&nbsp; </span> &nbsp;&nbsp;&nbsp; 👉 &nbsp;Actualizar ahora
+        </button>
+      </div>
+
+      <!-- Temporizador visible -->
+      <!-- <div id="timer" style="text-align: center; margin-top: 20px; font-size: 18px;">
+      👉 La página se recargará en <span id="countdown">40</span> segundos 🕐.
+    </div> -->
+
+
+      <!-- Script para recargar la página y actualizar el temporizador -->
+      <script>
+        let countdown = 40; // Tiempo en segundos
+        const countdownElement = document.getElementById('countdown');
+
+        const interval = setInterval(() => {
+          countdown--;
+          countdownElement.textContent = countdown;
+
+          if (countdown <= 0) {
+            clearInterval(interval);
+            window.location.reload(); // Recarga la página
+          }
+        }, 1000); // Actualiza cada segundo
+      </script>
+      <footer style="margin-top: 18px; padding: 4px; background-color: #333; color: #fff; text-align: center;">
+
+        <p>Haikus GitHub.</p>
+        <p>&copy; 2025 Latam.</p>
+      </footer>
+</body>
+
+</html>
diff --git a/docs/js/script.js b/docs/js/script.js
diff --git a/generate_static.js b/generate_static.js
@@ -0,0 +1,63 @@
+const fs = require('fs');
+const ejs = require('ejs');
+const path = require('path');
+
+// Datos estáticos para renderizar la vista
+const data = {
+  haikus: [
+    {
+      text: "Cerebro digital,\npiensa como los humanos,\nfuturo hoy.",
+      image: "example.jpg"
+    },
+    {
+      text: "Aprende el mundo,\ndatos crean caminos,\nsabiduría.",
+      image: "example.jpg"
+    }
+  ],
+  octocat: {
+    name: "the Filmtocat",
+    url: "https://octodex.github.com//images/filmtocat.png",
+    author: "jeejkang",
+    haiku: "Luces, cámara, git\nCeluloides digitales\nFilma tu código"
+  }
+};
+
+// Ruta de la plantilla EJS
+const templatePath = path.join(__dirname, 'views', 'index.ejs');
+const outputPath = path.join(__dirname, 'docs', 'index.html');
+
+// Leer y renderizar la plantilla
+fs.readFile(templatePath, 'utf-8', (err, template) => {
+  if (err) {
+    console.error('Error leyendo la plantilla:', err);
+    return;
+  }
+
+  const html = ejs.render(template, data);
+
+  // Crear la carpeta docs si no existe
+  if (!fs.existsSync(path.join(__dirname, 'docs'))){
+    fs.mkdirSync(path.join(__dirname, 'docs'));
+  }
+
+  // Escribir el archivo HTML generado
+  fs.writeFile(outputPath, html, (err) => {
+    if (err) {
+      console.error('Error escribiendo el archivo HTML:', err);
+    } else {
+      console.log('Archivo HTML generado correctamente en docs/index.html');
+    }
+  });
+
+  // Copiar recursos estáticos (CSS e imágenes) a la carpeta docs
+  const publicPath = path.join(__dirname, 'public');
+  const docsPath = path.join(__dirname, 'docs');
+
+  fs.cp(publicPath, docsPath, { recursive: true }, (err) => {
+    if (err) {
+      console.error('Error copiando recursos estáticos:', err);
+    } else {
+      console.log('Recursos estáticos copiados correctamente a docs/');
+    }
+  });
+});