<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy Raksha Bandhan</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
text-align: center;
background: url('https://i.ibb.co/4gQX1YN/rakhi-background.jpg') no-repeat center center/cover;
color: #fff;
margin: 0;
}
.hidden { display: none; }
.section { padding: 20px; }
button {
background: #d6336c;
border: none;
padding: 12px 24px;
font-size: 18px;
cursor: pointer;
border-radius: 8px;
color: white;
font-weight: bold;
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.envelope {
width: 200px;
cursor: pointer;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.letter {
background: url('https://i.ibb.co/4RKkF1b/old-letter-bg.jpg') no-repeat center center/cover;
color: #4b2e2e;
padding: 20px;
border: 3px solid #d4a017;
font-family: 'Georgia', serif;
max-width: 550px;
margin: 20px auto;
box-shadow: 0 0 15px rgba(0,0,0,0.4);
}
canvas {
border: 3px solid #fff;
margin-top: 10px;
background-color: #fff0f5;
}
h1,h2 {
text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class="section" id="nameSection">
<h1>🌸 Happy Raksha Bandhan 🌸</h1>
<p>Please enter your name, sister:</p>
<input type="text" id="sisterName" placeholder="Your name">
<br><br>
<button onclick="showEnvelope()">Submit</button>
</div>
<div class="section hidden" id="envelopeSection">
<h2>💌 Click the envelope to open your letter 💌</h2>
<img src="https://i.ibb.co/Dt43Z6S/traditional-envelope.jpg" class="envelope" onclick="openLetter()">
</div>
<div class="section hidden" id="letterSection">
<audio id="bgMusic" src="https://cdn.pixabay.com/download/audio/2022/03/15/audio_f9a771a3a5.mp3?filename=happy-indian-festive-background-music-113090.mp3" loop></audio>
<div class="letter" id="letterContent"></div>
<br>
<button onclick="showRakhiMaker()">Next ➡</button>
</div>
<div class="section hidden" id="rakhiSection">
<h2>🎨 Make Your Own Rakhi 🎨</h2>
<select id="rakhiShape">
<option value="circle">Circle</option>
<option value="star">Star</option>
<option value="flower">Flower</option>
</select>
<br><br>
<input type="text" id="rakhiText" placeholder="Name to write on rakhi">
<br><br>
<button onclick="drawRakhi()">Create Rakhi</button>
<br>
<canvas id="rakhiCanvas" width="200" height="200"></canvas>
<br><br>
<button onclick="showCollage()">Submit ➡</button>
</div>
<div class="section hidden" id="collageSection">
<h2>💖 Memories 💖</h2>
<img src="https://i.ibb.co/3BbFZ4K/rakhi-collage.jpg" width="300">
<br><br>
<button onclick="showFeedback()">Next ➡</button>
</div>
<div class="section hidden" id="feedbackSection">
<h2>💬 Feedback for Brother 💬</h2>
<textarea id="feedback" rows="4" cols="40" placeholder="Write something..."></textarea>
<br><br>
<button onclick="finishGreeting()">Submit</button>
</div>
<div class="section hidden" id="finalSection">
<h1>🌺 Happy Raksha Bandhan 🌺</h1>
<img src="https://i.ibb.co/6r3x4pC/radha-krishna.jpg" width="300">
<h2>From Sanchith 💖</h2>
</div>
<script>
let sisterName = "";
function showEnvelope() {
sisterName = document.getElementById("sisterName").value.trim();
if (!sisterName) {
alert("Please enter your name!");
return;
}
document.getElementById("nameSection").classList.add("hidden");
document.getElementById("envelopeSection").classList.remove("hidden");
}
function openLetter() {
document.getElementById("envelopeSection").classList.add("hidden");
let music = document.getElementById("bgMusic");
music.play();
document.getElementById("letterContent").innerHTML = `
Dear ${sisterName},<br><br>
Thank you for always being there with me.
Some of you have been with me since 7th or 8th standard,
and all of you are like my sisters.
You tease me, waste my time, but you also make life fun!
Wishing you endless happiness.<br><br>
Regards,<br>
Sanchith
`;
document.getElementById("letterSection").classList.remove("hidden");
}
function showRakhiMaker() {
document.getElementById("letterSection").classList.add("hidden");
document.getElementById("rakhiSection").classList.remove("hidden");
}
function drawRakhi() {
let shape = document.getElementById("rakhiShape").value;
let text = document.getElementById("rakhiText").value;
let ctx = document.getElementById("rakhiCanvas").getContext("2d");
ctx.clearRect(0,0,200,200);
ctx.fillStyle = "#FFD700";
if (shape === "circle") {
ctx.beginPath();
ctx.arc(100,100,80,0,Math.PI*2);
ctx.fill();
} else if (shape === "star") {
ctx.beginPath();
for (let i = 0; i < 5; i++) {
ctx.lineTo(100 + 80 * Math.cos((18 + i * 72) * Math.PI/180),
100 - 80 * Math.sin((18 + i * 72) * Math.PI/180));
ctx.lineTo(100 + 35 * Math.cos((54 + i * 72) * Math.PI/180),
100 - 35 * Math.sin((54 + i * 72) * Math.PI/180));
}
ctx.closePath();
ctx.fill();
} else if (shape === "flower") {
for (let i=0; i<8; i++) {
ctx.beginPath();
ctx.arc(100 + 50*Math.cos(i*Math.PI/4), 100 + 50*Math.sin(i*Math.PI/4), 30, 0, Math.PI*2);
ctx.fill();
}
ctx.beginPath();
ctx.arc(100,100,40,0,Math.PI*2);
ctx.fill();
}
ctx.fillStyle = "#000";
ctx.font = "16px Arial";
ctx.textAlign = "center";
ctx.fillText(text, 100, 105);
}
function showCollage() {
document.getElementById("rakhiSection").classList.add("hidden");
document.getElementById("collageSection").classList.remove("hidden");
setTimeout(() => {
document.getElementById("collageSection").classList.add("hidden");
document.getElementById("feedbackSection").classList.remove("hidden");
}, 5000);
}
function showFeedback() {
document.getElementById("collageSection").classList.add("hidden");
document.getElementById("feedbackSection").classList.remove("hidden");
}
function finishGreeting() {
alert("Feedback submitted! Thank you ❤️");
document.getElementById("feedbackSection").classList.add("hidden");
document.getElementById("finalSection").classList.remove("hidden");
}
</script>
</body>
</html>