<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lời Nhắn Gửi PhucPhucc</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap" rel="stylesheet">
<!-- Chosen Palette: Soft Rose -->
<!-- Application Structure Plan: This design uses a vertical scrolling slideshow narrative. The user scrolls down, and each section animates into view with more dynamic transitions than before (sliding, fading). This structure was chosen to create a more polished, presentation-like feel that guides the user through the emotional beats of the letter. -->
<!-- Visualization & Content Choices: The core interaction remains scrolling. The 'reveal on scroll' animation has been enhanced. Headings and paragraphs can have staggered or different animations (e.g., scaling, sliding) to create more visual interest. This is achieved with CSS transitions and Intersection Observer, providing a smooth, modern, and engaging user experience. -->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Quicksand', sans-serif;
background-color: #fef2f2; /* Tailwind's rose-50 */
color: #374151; /* Tailwind's gray-700 */
}
.scroll-reveal {
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
opacity: 0;
transform: translateY(40px);
}
.scroll-reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Custom delay classes */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
</style>
</head>
<body class="antialiased">
<div class="relative container mx-auto px-6 py-24 md:py-32">
<div class="max-w-2xl mx-auto flex flex-col items-center text-center space-y-24 md:space-y-32">
<!-- Section 1: Birthday Wish -->
<section class="min-h-[70vh] flex flex-col justify-center">
<h1 class="scroll-reveal text-4xl md:text-5xl font-semibold text-rose-800">Chúc Mừng Sinh Nhật PhucPhucc</h1>
<div class="scroll-reveal delay-100 w-20 h-px bg-rose-300 my-8 mx-auto"></div>
<p class="scroll-reveal delay-200 text-xl md:text-2xl leading-relaxed text-gray-600">Hôm nay là một ngày đặc biệt, nên anh chúc em có một tuổi mới lúc nào cũng vui vẻ, ngập tràn tiếng cười và thật bình yên. Mong em sẽ làm được hết những gì em ấp ủ và có một ngày sinh nhật thật trọn vẹn bên những người em thương yêu nhé!</p>
</section>
<!-- Section 2: Check-in -->
<section>
<h2 class="scroll-reveal text-3xl font-medium text-rose-800 mb-6">Đôi lời hỏi thăm</h2>
<p class="scroll-reveal delay-100 text-xl leading-relaxed text-gray-600">Lâu rồi tụi mình không nói chuyện, không biết dạo này em sao rồi, mọi thứ có ổn không? Công việc, cuộc sống và mấy dự định ngày xưa em hay kể, giờ mọi thứ vẫn tốt đẹp cả chứ? Thỉnh thoảng anh vẫn hay nghĩ về những kỷ niệm của tụi mình, đó đều là những ký ức rất đẹp. Anh không mong gì hơn ngoài việc em vẫn đang sống tốt và vui vẻ mỗi ngày.</p>
</section>
<!-- Section 3: Reflection -->
<section>
<h2 class="scroll-reveal text-3xl font-medium text-rose-800 mb-6">Một chút tự sự</h2>
<p class="scroll-reveal delay-100 text-xl leading-relaxed text-gray-600">Dạo gần đây anh cũng dành nhiều thời gian để suy nghĩ lắm. Anh nhận ra mình đã từng có nhiều thiếu sót và đang thật sự cố gắng để thay đổi từng ngày đây. Giờ thì anh đang học cách trưởng thành hơn, biết kiên nhẫn lắng nghe và nhìn mọi việc một cách tích cực hơn trước rất nhiều. Anh tập trung vào bản thân và những mục tiêu của mình hơn.</p>
</section>
<!-- Section 4: Promise -->
<section>
<h2 class="scroll-reveal text-3xl font-medium text-rose-800 mb-6">Sau này</h2>
<p class="scroll-reveal delay-100 text-xl leading-relaxed text-gray-600">Anh hứa là, nếu sau này mình có duyên gặp lại, em chắc chắn sẽ thấy một con người khác của anh, một phiên bản tốt hơn bây giờ nhiều! Và anh hy vọng rằng, khi đó em sẽ cho anh một cơ hội nữa. Còn bây giờ, em hãy cứ vững bước trên con đường của mình và phải thật hạnh phúc đó nha.</p>
</section>
<!-- Section 5: Closing -->
<section class="pt-12">
<p class="scroll-reveal text-lg leading-relaxed italic text-gray-500">Anh viết mấy dòng này là để nhắn gửi những điều tốt đẹp nhất đến em và cũng là những lời tâm sự thật lòng của anh.</p>
<div class="mt-16">
<p class="scroll-reveal delay-200 text-xs text-gray-500 italic">anh sẽ quay lại vào 17/1/2026.</p>
<p class="scroll-reveal delay-300 mt-4 text-sm text-gray-500 font-semibold tracking-wider">Anh thật sự rất nhớ em🥺</p>
</div>
</section>
</div>
</div>
<script>
// Scroll reveal effect
document.addEventListener('DOMContentLoaded', function() {
const revealElements = document.querySelectorAll('.scroll-reveal');
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
// Corrected the typo from isInteracting to isIntersecting
if (entry.isIntersecting) {
entry.target.classList.add('visible');
// Stop observing the element once it's visible
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.15 // Trigger a bit earlier
});
revealElements.forEach(el => {
observer.observe(el);
});
});
</script>
</body>
</html>