diff --git a/docs/css/main.css b/docs/css/main.css new file mode 100644 index 0000000..f9a42ab --- /dev/null +++ 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 new file mode 100644 index 0000000..e69de29 diff --git a/docs/images/linktocat.jpg b/docs/images/linktocat.jpg new file mode 100644 index 0000000..bdd8e66 Binary files /dev/null and b/docs/images/linktocat.jpg differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..e986144 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,78 @@ + + + + + 👦🏼 Haikus GitHub 📚 + + + + + +

👦🏼 Haikus GitHub 📚

+ +
+
+ +

Cerebro digital, +piensa como los humanos, +futuro hoy.

+
+ +
+ +
+
+ +

Aprende el mundo, +datos crean caminos, +sabiduría.

+
+ +
+ + +
+

the Filmtocat

+ the Filmtocat +

Luces, cámara, git +Celuloides digitales +Filma tu código

+

Author: jeejkang

+
+ +
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/docs/js/script.js b/docs/js/script.js new file mode 100644 index 0000000..e69de29 diff --git a/generate_static.js b/generate_static.js new file mode 100644 index 0000000..c9a75a8 --- /dev/null +++ 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/'); + } + }); +}); \ No newline at end of file