<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Message For You</title>
<style>
/* PAGE 1: BOLD & COLORFUL */
#page1 {
background-color: #00FF00; /* Neon Green */
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Arial Black', sans-serif;
text-align: center;
}
.bold-box {
background-color: #FF00FF; /* Hot Pink */
border: 10px solid black;
padding: 40px;
transform: rotate(-2deg);
box-shadow: 20px 20px 0px black;
width: 80%;
}
.bold-box h1 {
color: white;
font-size: 8vw;
margin: 0;
text-transform: uppercase;
line-height: 0.9;
text-shadow: 4px 4px 0px black;
}
.btn-bold {
margin-top: 30px;
padding: 15px 30px;
font-size: 1.5rem;
background: #FFDE03; /* Bright Yellow */
border: 4px solid black;
cursor: pointer;
font-weight: bold;
box-shadow: 5px 5px 0px black;
}
/* PAGE 2: CLASSIC & CLEAN */
#page2 {
display: none; /* Hidden at first */
background-color: #f4f4f4;
min-height: 100vh;
padding: 50px 20px;
font-family: 'Georgia', serif;
color: #333;
line-height: 1.6;
}
.classic-container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 40px;
border-top: 5px solid #333;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.classic-container h2 {
font-style: italic;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
.btn-next {
display: inline-block;
margin-top: 30px;
color: #666;
text-decoration: underline;
cursor: pointer;
font-size: 0.9rem;
}
/* PAGE 3: LOVE THEME */
#page3 {
display: none;
background: linear-gradient(135deg, #ff758c, #ff7eb3);
min-height: 100vh;
padding: 50px 20px;
font-family: 'Cursive', 'Georgia', serif;
color: white;
text-align: center;
}
.love-container {
max-width: 600px;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 40px;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.love-container h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.love-container p {
font-size: 1.2rem;
line-height: 1.8;
}
.btn-back {
display: inline-block;
margin-top: 30px;
color: #fff;
text-decoration: underline;
cursor: pointer;
font-size: 1rem;
}
</style>
</head>
<body>
<div id="page1">
<div class="bold-box">
<h1>I HAVE SOMETHING TO TELL YOU!</h1>
</div>
<button class="btn-bold" onclick="showPage2()">READ THE MESSAGE →</button>
</div>
<div id="page2">
<div class="classic-container">
<h2>Happy Birthday</h2>
<p>Dear Rutvi,</p>
<p>On your special day, may the world shine as brightly as your smile, and may every moment remind you how cherished you are. Happy Birthday, beautiful!</p>
<p>May your day be filled with laughter, love, and all the little things that make life beautiful.</p>
<p>HAPPY BIRTHDAY BEST FRIEND</p>
<p>Best regards,<br>Om Patel</p>
<div class="btn-next" onclick="showPage3()">🎁 Second Gift →</div>
</div>
</div>
<div id="page3">
<div class="love-container">
<h2>With Love ❤️</h2>
<img src="https://8upload.com/display/fdbba5d64f813a56/Screenshot_2026-01-07_192631.png.php" alt="A loving picture" style="max-width:100%; border-radius:10px; margin-bottom:20px; box-shadow:0 4px 15px rgba(0,0,0,0.3);">
<p>Rutvi, you are more than a friend—you are someone who makes life brighter and more meaningful.
On this day, I want you to know that you are deeply loved and appreciated.
May our bond always stay strong, filled with joy, laughter, and endless memories together.</p>
<p>Forever grateful for you,<br>Om Patel</p>
<div class="btn-back" onclick="showPage1()">← Back to Start</div>
</div>
</div>
<script>
// Page switching functions
function showPage2() {
document.getElementById('page1').style.display = 'none';
document.getElementById('page2').style.display = 'block';
document.getElementById('page3').style.display = 'none';
}
function showPage3() {
document.getElementById('page2').style.display = 'none';
document.getElementById('page3').style.display = 'block';
}
function showPage1() {
document.getElementById('page2').style.display = 'none';
document.getElementById('page3').style.display = 'none';
document.getElementById('page1').style.display = 'flex';
}
</script>
</body>
</html>