<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Un pequeño regalo para ti 🎁</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
font-family: Georgia, 'Times New Roman', serif;
color: #fff5f5;
background: linear-gradient(145deg, #1c1026, #52263f, #21152e);
text-align: center;
overflow-x: hidden;
}
main {
width: min(92%, 700px);
margin: auto;
padding: 55px 0;
}
h1 {
font-size: clamp(2rem, 7vw, 3.2rem);
margin-bottom: 12px;
color: #ffd6e5;
}
.subtitle {
line-height: 1.8;
color: #f4dce7;
margin-bottom: 35px;
}
.notice {
font-size: .9rem;
opacity: .8;
margin-bottom: 35px;
}
.gifts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
.gift {
min-height: 175px;
padding: 20px 12px;
color: white;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,214,229,.3);
border-radius: 20px;
cursor: pointer;
transition: .25s;
font-family: inherit;
}
.gift:hover {
transform: translateY(-5px);
background: rgba(255,255,255,.15);
}
.gift:focus-visible {
outline: 2px solid #ffd6e5;
outline-offset: 4px;
}
.gift-icon {
display: block;
font-size: 3.6rem;
margin-bottom: 12px;
}
.gift span:last-child {
display: block;
font-size: 1rem;
}
.gift.opened {
background: rgba(255,214,229,.13);
border-color: #ffd6e5;
}
.message {
display: none;
margin-top: 12px;
padding: 27px 22px;
border-radius: 20px;
background: rgba(255,255,255,.09);
border: 1px solid rgba(255,214,229,.3);
animation: appear .5s ease;
}
.message.show {
display: block;
}
.message h2 {
color: #ffd6e5;
}
.message p {
font-size: 1.08rem;
line-height: 1.9;
white-space: pre-line;
}
.close-note {
margin-top: 45px;
font-size: .95rem;
line-height: 1.8;
color: #f5dce7;
}
footer {
margin-top: 35px;
opacity: .7;
font-size: .85rem;
}
@keyframes appear {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 380px) {
.gifts { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<main>
<div style="font-size: 3rem;">💌</div>
<h1>Un pequeño detalle para ti</h1>
<p class="subtitle">
Hay personas que llegan a nuestra vida y dejan recuerdos
que merecen ser recordados con una sonrisa.<br><br>
Preparé algo pequeño para ti.<br>
Abre cada regalo cuando quieras. 🎁
</p>
<p class="notice">
✨ No tienes que responder nada. Solo quería dejarte algo bonito.
</p>
<section class="gifts" aria-label="Regalos sorpresa">
<button class="gift" onclick="openGift(0, this)">
<span class="gift-icon">🎁</span>
<span>Regalo número 1</span>
<span>Un recuerdo bonito</span>
</button>
<button class="gift" onclick="openGift(1, this)">
<span class="gift-icon">💗</span>
<span>Regalo número 2</span>
<span>Lo que me hiciste sentir</span>
</button>
<button class="gift" onclick="openGift(2, this)">
<span class="gift-icon">🧸</span>
<span>Regalo número 3</span>
<span>Algo que quiero agradecer</span>
</button>
<button class="gift" onclick="openGift(3, this)">
<span class="gift-icon">🌷</span>
<span>Regalo número 4</span>
<span>Un deseo para tu vida</span>
</button>
<button class="gift" onclick="openGift(4, this)"
style="grid-column: 1 / -1;">
<span class="gift-icon">💌</span>
<span>El último regalo</span>
<span>Unas palabras desde el corazón</span>
</button>
</section>
<section id="message" class="message" aria-live="polite">
<h2 id="messageTitle"></h2>
<p id="messageText"></p>
</section>
<p class="close-note">
A veces, querer bonito también significa agradecer lo vivido,
respetar los caminos que tomamos y desear felicidad,
incluso cuando ya no caminamos juntos. 🤍
</p>
<footer>
Hecho con cariño, sin rencores y con buenos deseos. ✨
</footer>
</main>
<script>
const gifts = [
{
title: "🎁 Un recuerdo bonito",
text: `Quería que el primer regalo fuera un recuerdo.
Gracias por cada momento que compartimos,
por las risas, las conversaciones y esas pequeñas
cosas que quizá parecían normales, pero que para mí
significaron muchísimo.
Me la pasé muy bonito contigo y siempre voy a guardar
con cariño esa parte de mi vida.`
},
{
title: "💗 Lo que me hiciste sentir",
text: `No sé si alguna vez te diste cuenta de todo
lo bonito que llegaste a despertar en mí.
Me hiciste sentir emociones que voy a recordar
con una sonrisa. Hubo momentos en los que tu presencia,
tu forma de ser y hasta los pequeños detalles
hicieron mis días mucho más especiales.
Y por eso, aunque las cosas hayan cambiado,
no me arrepiento de haber sentido algo tan bonito por ti.`
},
{
title: "🧸 Gracias por lo vivido",
text: `Gracias por el tiempo que me regalaste,
por las experiencias, por las sonrisas
y por todo lo que aprendí a tu lado.
No todo tiene que durar para siempre
para haber sido importante.
Me quedo con lo bueno, con lo que me enseñaste
y con la bonita experiencia de haberte conocido.
De corazón, gracias por haber formado parte de mi vida.`
},
{
title: "🌷 Deseo que seas feliz",
text: `Ahora que tu vida ha tomado otro camino,
quiero desearte cosas bonitas de verdad.
Espero que te vaya súper bien con tu nueva pareja,
que se cuiden, se respeten, se apoyen y construyan
momentos que los hagan felices.
Deseo que encuentres tranquilidad, amor sincero,
muchas razones para sonreír y personas que valoren
todo lo bonito que hay en ti.
Te deseo felicidad, de corazón.`
},
{
title: "💌 Lo último que quería decirte",
text: `No hice esto para cambiar tu presente
ni para pedirte que regreses.
Solo quería que supieras que fuiste alguien especial
para mí, que disfruté mucho el tiempo contigo
y que me hiciste sentir cosas muy bonitas.
Quizá nuestros caminos ya no sean los mismos,
y está bien. La vida sigue, las personas cambian
y cada quien merece encontrar su felicidad.
Si algún día recuerdas lo que vivimos,
espero que puedas hacerlo con una sonrisa,
así como yo quiero recordar las cosas bonitas.
Cuídate mucho. Espero que la vida te trate bonito
y que seas muy, muy feliz.
Gracias por coincidir conmigo. 🤍`
}
];
function openGift(index, button) {
const message = document.getElementById("message");
const title = document.getElementById("messageTitle");
const text = document.getElementById("messageText");
title.textContent = gifts[index].title;
text.textContent = gifts[index].text;
message.classList.remove("show");
void message.offsetWidth;
message.classList.add("show");
document.querySelectorAll(".gift").forEach(gift => {
gift.classList.remove("opened");
});
button.classList.add("opened");
message.scrollIntoView({
behavior: "smooth",
block: "nearest"
});
}
</script>
</body>
</html>