<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Raksha Bandhan</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
margin: 0;
padding: 0;
background: white;
color: #333;
text-align: center;
}
.border {
border: 15px solid transparent;
padding: 20px;
border-image: url('https://i.ibb.co/3z94nRb/traditional-border.png') 30 round;
max-width: 900px;
margin: auto;
}
h1 {
color: #b22222;
font-size: 2.5em;
margin-bottom: 0.2em;
}
.input-section, .letter-section, .rakhi-section, .feedback-section {
margin-top: 20px;
}
button {
padding: 10px 20px;
background-color: #b22222;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
}
button:hover {
background-color: #8b1a1a;
}
.envelope {
font-size: 3em;
cursor: pointer;
margin-top: 20px;
}
.letter {
display: none;
background: #fff8e7;
padding: 20px;
border: 2px solid #deb887;
font-size: 1.1em;
line-height: 1.5;
max-width: 700px;
margin: auto;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
}
.greeting-image {
max-width: 100%;
height: auto;
margin-top: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="border">
<h1>💖 Happy Raksha Bandhan 💖</h1>
<div class="input-section">
<p>Please enter your name, dear sister:</p>
<input type="text" id="sisterName" placeholder="Enter your name">
<button onclick="showEnvelope()">Submit</button>
</div>
<div id="envelopeSection" style="display:none;">
<p class="envelope" onclick="openLetter()">✉️</p>
<p>Click the envelope to open your letter!</p>
</div>
<div id="letterSection" class="letter-section">
<div id="letter" class="letter"></div>
</div>
<div id="greetingImageSection" style="display:none;">
<img class="greeting-image" src="https://i.ibb.co/j5LrmL8/rakhi-greeting-card.jpg" alt="Happy Raksha Bandhan Greeting">
<button onclick="showFeedback()">Next</button>
</div>
<div id="feedbackSection" class="feedback-section" style="display:none;">
<p>Give your feedback to your brother:</p>
<textarea id="feedback" placeholder="Write something..." rows="4" cols="40"></textarea><br><br>
<button onclick="sendFeedback()">Submit Feedback</button>
</div>
</div>
<script>
let sisterName = '';
function showEnvelope() {
sisterName = document.getElementById('sisterName').value.trim();
if (sisterName === '') {
alert('Please enter your name.');
return;
}
document.querySelector('.input-section').style.display = 'none';
document.getElementById('envelopeSection').style.display = 'block';
}
function openLetter() {
let letterText = `
Dear ${sisterName},<br><br>
From the days of 7th and 8th standard till now, you have always been more than a friend — you are my sister in every way that matters.
Thank you for the countless laughs, the advice, and the times you wasted me in fun! You’ve been a part of my journey, and I’m truly grateful.<br><br>
Your loving brother,<br>
<b>Sanchith</b>
`;
document.getElementById('letter').innerHTML = letterText;
document.getElementById('letter').style.display = 'block';
document.getElementById('envelopeSection').style.display = 'none';
setTimeout(() => {
document.getElementById('greetingImageSection').style.display = 'block';
}, 2000);
}
function showFeedback() {
document.getElementById('greetingImageSection').style.display = 'none';
document.getElementById('feedbackSection').style.display = 'block';
}
function sendFeedback() {
let fb = document.getElementById('feedback').value.trim();
if (fb === '') {
alert('Please write your feedback.');
return;
}
alert('Thank you for your feedback, ' + sisterName + '!');
// Later we can connect this to send feedback to you
}
</script>
</body>
</html>