CARTAS DE POEMAS ALETORIOS EN HTML CODIGO APRENDIZAJE
- samuel gaitan
- 2 sept
- 6 Min. de lectura
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cartas de Poemas Aleatorios</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
max-width: 1200px;
width: 100%;
text-align: center;
}
h1 {
color: white;
margin-bottom: 40px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.cards-container {
display: flex;
gap: 30px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
}
.card {
background: white;
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
padding: 30px;
width: 400px;
min-height: 500px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
}
.card-header {
margin-bottom: 25px;
}
.card-icon {
font-size: 3em;
margin-bottom: 15px;
}
.friendship-card .card-icon {
color: #ff6b6b;
}
.cats-card .card-icon {
color: #4ecdc4;
}
.card-title {
font-size: 1.8em;
color: #333;
margin-bottom: 10px;
font-weight: bold;
}
.card-subtitle {
color: #666;
font-size: 1em;
font-style: italic;
}
.poem-content {
text-align: left;
line-height: 1.8;
color: #444;
font-size: 1.1em;
background: rgba(248, 249, 250, 0.8);
padding: 20px;
border-radius: 10px;
border-left: 4px solid #ddd;
}
.friendship-card .poem-content {
border-left-color: #ff6b6b;
}
.cats-card .poem-content {
border-left-color: #4ecdc4;
}
.poem-title {
font-weight: bold;
color: #333;
margin-bottom: 15px;
text-align: center;
font-size: 1.2em;
}
.poem-text {
white-space: pre-line;
margin-bottom: 15px;
}
.poem-signature {
text-align: right;
font-style: italic;
color: #888;
margin-top: 20px;
font-size: 0.9em;
}
.generate-btn {
color: white;
border: none;
padding: 15px 30px;
font-size: 1.1em;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.generate-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
.cards-container {
flex-direction: column;
align-items: center;
}
.card {
width: 100%;
max-width: 400px;
}
h1 {
font-size: 2em;
}
}
</style>
</head>
<body>
<div class="container">
<h1>📜 Cartas de Poemas Aleatorios 📜</h1>
<div class="cards-container">
<div class="card friendship-card" onclick="generateFriendshipPoem()">
<div class="card-header">
<div class="card-icon">💕</div>
<div class="card-title">Amistad y Amor</div>
<div class="card-subtitle">Entre un hombre y una mujer</div>
</div>
<div class="poem-content" id="friendship-poem">
<div class="poem-title">Haz clic para generar un poema</div>
<div class="poem-text">Cada clic revelará una nueva historia de amistad que florece en amor...</div>
</div>
</div>
<div class="card cats-card" onclick="generateCatPoem()">
<div class="card-header">
<div class="card-icon">🐱</div>
<div class="card-title">Amor Gatuno</div>
<div class="card-subtitle">Mi pasión por los gatos</div>
</div>
<div class="poem-content" id="cat-poem">
<div class="poem-title">Haz clic para generar un poema</div>
<div class="poem-text">Descubre poemas llenos de ronroneos y travesuras felinas...</div>
</div>
</div>
</div>
<button class="generate-btn" onclick="generateBothPoems()">
✨ Generar Ambos Poemas ✨
</button>
</div>
<script>
const friendshipPoems = [
{
title: "Cuando la amistad se vuelve amor",
text: `Éramos dos almas caminando juntas,
compartiendo secretos y aventuras,
tu sonrisa iluminaba mis mañanas,
y yo era tu refugio en las noches oscuras.
Sin darse cuenta, el corazón cambió,
lo que era compañía se transformó,
ahora tus ojos brillan diferente,
y siento que mi alma en ti se perdió.
Ya no somos solo buenos amigos,
somos dos corazones que han elegido
convertir la amistad en algo eterno,
un amor que nació siendo genuino.`,
signature: "~ Un amor que comenzó con amistad ~"
},
{
title: "El día que todo cambió",
text: `Recuerdo el momento exacto
cuando tu mirada cambió,
ya no me veías como amigo,
sino como algo que siempre fui.
Hablábamos de todo y nada,
reíamos hasta llorar,
pero esa tarde de primavera
algo mágico comenzó a pasar.
Tu mano buscó la mía,
tu voz se volvió susurro,
y entendí que la amistad
puede ser el mejor preludio.
Del amor más verdadero,
del que nace sin prisa,
del que crece día a día
como una flor que se desliza.`,
signature: "~ Entre amigos que se aman ~"
},
{
title: "Confesión entre amigos",
text: `Te conocí como amigo,
te quise como hermano,
pero el tiempo me enseñó
que eras mucho más, mi amor.
Cada charla, cada risa,
cada momento a tu lado,
construía sin saberlo
este amor inesperado.
Hoy te miro y ya no veo
al amigo de siempre,
veo al hombre que amo,
que mi corazón necesita tenerle.
¿Cómo decirte que la amistad
se convirtió en pasión?
¿Cómo confesar que eres
dueño de mi corazón?`,
signature: "~ Cuando el corazón no puede callar ~"
},
{
title: "De la risa al amor",
text: `Comenzamos siendo cómplices,
de travesuras y de sueños,
tu amistad era mi tesoro,
tu presencia, mi deseo.
No sé cuándo fue que cambió
la forma de mirarte,
cuándo tus abrazos se volvieron
mi manera de amarte.
Lo que sé es que ahora
cuando dices mi nombre,
se me acelera el corazón
como a una joven que se enamora.
Gracias por ser mi amigo primero,
por conocer mi alma entera,
ahora que somos algo más,
nada nos separa ni nos altera.`,
signature: "~ De la amistad al amor eterno ~"
},
{
title: "Dos amigos, un destino",
text: `Jugábamos a ser solo amigos,
fingíamos que era suficiente,
pero el corazón no miente
cuando encuentra a su gente.
Tus ojos guardan secretos
que solo yo sé descifrar,
tu sonrisa es mi refugio,
tu voz, mi despertar.
Hemos crecido juntos,
hemos llorado juntos,
ahora quiero amarte
en todos los puntos.
Eres mi mejor amigo
y mi amor verdadero,
eres todo lo que quiero
y todo lo que espero.`,
signature: "~ Amistad que se volvió destino ~"
}
];
const catPoems = [
{
title: "Mi obsesión felina",
text: `No puedo explicar qué me pasa
cuando veo un gato pasar,
mi corazón se acelera
y no puedo dejar de mirar.
Sus ojitos brillantes,
sus patitas suaves,
ese ronroneo que calma
todas mis penas graves.
Me gustan los gatos negros,
los blancos, los rayados,
todos son perfectos
y me tienen hechizado.
Si fuera por mí,
tendría mil gatos en casa,
pero mi amor por ellos
nunca se apaga, nunca pasa.`,
signature: "~ Una eterna enamorada de los gatos ~"
},
{
title: "Ronroneos de amor",
text: `Hay algo mágico en los gatos
que me roba el corazón,
tal vez sea su independencia
o su tierna devoción.
Cuando uno se acerca a mí
siento una felicidad inmensa,
cuando ronronea en mis brazos
toda pena se recompensa.
Me gustan sus travesuras,
sus saltos imposibles,
cómo duermen todo el día
en posturas increíbles.
Los gatos son poesía
con patas y bigotes,
son maestros del amor
sin palabras ni devotes.`,
signature: "~ Adicta a los bigotes y ronroneos ~"
},
{
title: "Confesiones gatuneras",
text: `Tengo que confesarlo:
estoy obsesionada con los gatos,
veo uno en la calle
y se me van los ratos.
Bajo videos en internet
de gatitos jugando,
tengo fotos de gatos
que sigo coleccionando.
Mis amigos ya lo saben,
mi familia se resignó,
saben que mi debilidad
son esos seres que Dios creó.
Si me preguntan por qué
me gustan tanto estos seres,
les digo que es amor puro
como pocos placeres.`,
signature: "~ Loca de los gatos y orgullosa ~"
},
{
title: "El mundo según los gatos",
text: `Los gatos me enseñaron
que la vida es más simple,
que dormir es un arte
y que el amor no se finge.
Me gustan sus estiramientos,
sus bostezos sin pena,
cómo miran por la ventana
como si fuera una antena.
Cada gato es único,
cada uno especial,
tienen personalidad
que no es nada banal.
Por eso los amo tanto,
por eso me fascinan,
porque en su simplicidad
todas las respuestas cristalizan.`,
signature: "~ Discípula de la sabiduría felina ~"
},
{
title: "Mi corazón gatuno",
text: `Si tuviera que elegir
entre el oro y un gato,
elegiría al minino
sin pensarlo ni un rato.
Me gusta su elegancia,
su caminar sigiloso,
cómo se acicalan
con un gesto gracioso.
Los gatos son perfectos,
son arte con vida,
son compañía silente
y alegría compartida.
No entiendo a quien no le gustan,
no comprendo su frialdad,
porque amar a los gatos
es amar la libertad.`,
signature: "~ Con el corazón lleno de patitas ~"
}
];
function getRandomPoem(poemsArray) {
const randomIndex = Math.floor(Math.random() * poemsArray.length);
return poemsArray[randomIndex];
}
function generateFriendshipPoem() {
const poem = getRandomPoem(friendshipPoems);
const container = document.getElementById('friendship-poem');
container.innerHTML = `
<div class="poem-title">${poem.title}</div>
<div class="poem-text">${poem.text}</div>
<div class="poem-signature">${poem.signature}</div>
`;
// Agregar efecto de aparición
container.style.opacity = '0';
setTimeout(() => {
container.style.transition = 'opacity 0.5s ease';
container.style.opacity = '1';
}, 100);
}
function generateCatPoem() {
const poem = getRandomPoem(catPoems);
const container = document.getElementById('cat-poem');
container.innerHTML = `
<div class="poem-title">${poem.title}</div>
<div class="poem-text">${poem.text}</div>
<div class="poem-signature">${poem.signature}</div>
`;
// Agregar efecto de aparición
container.style.opacity = '0';
setTimeout(() => {
container.style.transition = 'opacity 0.5s ease';
container.style.opacity = '1';
}, 100);
}
function generateBothPoems() {
generateFriendshipPoem();
setTimeout(() => {
generateCatPoem();
}, 200);
}
// Generar poemas iniciales al cargar la página
window.addEventListener('load', () => {
setTimeout(generateBothPoems, 500);
});
</script>
</body>
</html>
Comentarios