Rakshabandhan Code
Code & Video Showcase
Code Examples
HTML Code
<!DOCTYPE html>
<html lang="hi" itemscope itemtype="https://schema.org/WebPage">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary SEO Meta Tags -->
<title>राखी की शुभकामनाएं 2025 | रक्षाबंधन विशेष | Divine Greetings</title>
<meta
name="title"
content="राखी की शुभकामनाएं 2025 | रक्षाबंधन विशेष | Divine Greetings"
/>
<meta
name="description"
content="रक्षाबंधन 2025 की हार्दिक शुभकामनाएं भेजें। राखी का त्योहार, भाई-बहन का प्यार, रक्षाबंधन की शुभकामनाएं, राखी मैसेज, रक्षाबंधन स्पेशल। मुफ्त में सुंदर राखी की शुभकामनाएं बनाएं और भेजें।"
/>
<meta
name="keywords"
content="रक्षाबंधन, राखी, रक्षाबंधन 2025, राखी की शुभकामनाएं, भाई बहन का प्यार, रक्षाबंधन विशेष, राखी मैसेज, raksha bandhan, rakhi, raksha bandhan wishes, rakhi festival, brother sister love, raksha bandhan greetings, rakhi messages, रक्षा बंधन कार्ड, राखी फोटो, रक्षाबंधन इमेज, राखी स्टेटस, रक्षाबंधन SMS, राखी व्हाट्सऐप मैसेज"
/>
<meta name="author" content="Divine Greetings" />
<meta
name="robots"
content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"
/>
<meta name="language" content="Hindi" />
<meta name="revisit-after" content="1 days" />
<!-- Canonical URL -->
<link
rel="canonical"
href="https://oopsg.blogspot.com/2025/08/divine-greetings.html"
/>
<!-- Hreflang for multilingual -->
<link
rel="alternate"
hreflang="hi"
href="https://oopsg.blogspot.com/2025/08/divine-greetings.html"
/>
<link
rel="alternate"
hreflang="en"
href="https://oopsg.blogspot.com/2025/08/divine-greetings.html"
/>
<link
rel="alternate"
hreflang="x-default"
href="https://oopsg.blogspot.com/2025/08/divine-greetings.html"
/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://oopsg.blogspot.com/2025/08/divine-greetings.html"
/>
<meta
property="og:title"
content="राखी की शुभकामनाएं 2025 | रक्षाबंधन विशेष | Divine Greetings"
/>
<meta
property="og:description"
content="रक्षाबंधन 2025 की हार्दिक शुभकामनाएं भेजें। राखी का त्योहार, भाई-बहन का प्यार, रक्षाबंधन की शुभकामनाएं बनाएं और भेजें। मुफ्त रक्षाबंधन ग्रीटिंग कार्ड और मैसेज।"
/>
<meta
property="og:image"
content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="रक्षाबंधन राखी की शुभकामनाएं" />
<meta property="og:locale" content="hi_IN" />
<meta
property="og:site_name"
content="Divine Greetings - रक्षाबंधन विशेष"
/>
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta
property="twitter:url"
content="https://oopsg.blogspot.com/2025/08/divine-greetings.html"
/>
<meta
property="twitter:title"
content="राखी की शुभकामनाएं 2025 | रक्षाबंधन विशेष"
/>
<meta
property="twitter:description"
content="रक्षाबंधन 2025 की हार्दिक शुभकामनाएं भेजें। राखी का त्योहार, भाई-बहन का प्यार, मुफ्त रक्षाबंधन ग्रीटिंग कार्ड बनाएं।"
/>
<meta
property="twitter:image"
content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png"
/>
<meta name="twitter:creator" content="@DivineGreetings" />
<!-- Additional Meta Tags -->
<meta name="theme-color" content="#ff6b9d" />
<meta name="msapplication-TileColor" content="#ff6b9d" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="format-detection" content="telephone=no" />
<!-- Favicon -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png"
/>
<link
rel="apple-touch-icon"
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png"
/>
<!-- Fonts - Preload for Performance -->
<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=Poppins:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600&family=Noto+Sans+Devanagari:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
crossorigin="anonymous"
/>
<!-- Schema.org Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "WebPage",
"@id": "https://oopsg.blogspot.com/2025/08/divine-greetings.html",
"url": "https://oopsg.blogspot.com/2025/08/divine-greetings.html",
"name": "राखी की शुभकामनाएं 2025 | रक्षाबंधन विशेष | Divine Greetings",
"description": "रक्षाबंधन 2025 की हार्दिक शुभकामनाएं भेजें। राखी का त्योहार, भाई-बहन का प्यार, रक्षाबंधन की शुभकामनाएं बनाएं और भेजें।",
"inLanguage": "hi-IN",
"isPartOf": {
"@type": "WebSite",
"@id": "https://oopsg.blogspot.com/",
"name": "Divine Greetings",
"url": "https://oopsg.blogspot.com/"
},
"about": {
"@type": "Event",
"name": "रक्षाबंधन 2025",
"description": "रक्षाबंधन भारतीय त्योहार है जो भाई-बहन के प्रेम और सुरक्षा के रिश्ते को मनाता है।",
"startDate": "2025-08-09",
"location": {
"@type": "Country",
"name": "भारत"
}
},
"mainEntity": {
"@type": "WebApplication",
"name": "रक्षाबंधन शुभकामना जेनरेटर",
"description": "मुफ्त में व्यक्तिगत रक्षाबंधन की शुभकामनाएं बनाएं और भेजें",
"applicationCategory": "Greeting Card Generator",
"operatingSystem": "Any",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "INR"
}
}
},
{
"@type": "Organization",
"@id": "https://oopsg.blogspot.com/#organization",
"name": "Divine Greetings",
"url": "https://oopsg.blogspot.com/",
"logo": {
"@type": "ImageObject",
"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png",
"width": 60,
"height": 60
}
},
{
"@type": "HowTo",
"name": "रक्षाबंधन की शुभकामनाएं कैसे बनाएं",
"description": "व्यक्तिगत रक्षाबंधन की शुभकामनाएं बनाने का आसान तरीका",
"step": [
{
"@type": "HowToStep",
"name": "नाम दर्ज करें",
"text": "अपना या प्राप्तकर्ता का नाम दर्ज करें"
},
{
"@type": "HowToStep",
"name": "फोटो चुनें",
"text": "रक्षाबंधन की सुंदर फोटो चुनें"
},
{
"@type": "HowToStep",
"name": "शुभकामना तैयार करें",
"text": "व्यक्तिगत शुभकामना लिंक तैयार करें"
},
{
"@type": "HowToStep",
"name": "साझा करें",
"text": "व्हाट्सऐप या अन्य माध्यमों से साझा करें"
}
]
}
]
}
</script>
<!-- Preload Critical Resources -->
<link
rel="preload"
href="https://res.cloudinary.com/tabrej/video/upload/v1753617354/indian-flute-and-tabla-new-tune-remastered-277266-_AudioTrimmer.com_nq7szz.mp3"
as="audio"
/>
<style>
/*peast all style*/
</style>
</head>
<script
type="text/javascript"
src="//pl27304325.profitableratecpm.com/15/d9/76/15d97613d4fcce5aa926e43e870fe885.js"
></script>
<body>
<!-- Background Music -->
<audio id="backgroundMusic" loop preload="auto" style="display: none">
<source
src="https://res.cloudinary.com/tabrej/video/upload/v1753617354/indian-flute-and-tabla-new-tune-remastered-277266-_AudioTrimmer.com_nq7szz.mp3"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
<!-- SEO Hidden Content for Search Engines -->
<div class="seo-content">
<h1>रक्षाबंधन 2025 की शुभकामनाएं - राखी का त्योहार</h1>
<p>
रक्षाबंधन भारत का सबसे प्रिय त्योहार है जो भाई-बहन के प्रेम और सुरक्षा
के रिश्ते को मनाता है। यह श्रावण मास की पूर्णिमा को मनाया जाता है।
</p>
<h2>रक्षाबंधन क्यों मनाते हैं?</h2>
<p>
रक्षाबंधन का त्योहार भाई-बहन के पवित्र रिश्ते का प्रतीक है। इस दिन बहन
अपने भाई की कलाई पर राखी बांधती है।
</p>
<h3>राखी की शुभकामनाएं हिंदी में</h3>
<p>
राखी के प्रेम और सुरक्षा की हार्दिक शुभकामनाएं। भाई-बहन का प्यार सदा बना
रहे।
</p>
</div>
<!-- Music Control Button -->
<button
id="musicControl"
class="music-control"
onclick="toggleMusic()"
title="संगीत चालू/बंद करें"
aria-label="संगीत नियंत्रण"
>
<i class="fas fa-music" aria-hidden="true"></i>
</button>
<!-- Music Notification -->
<div
id="musicNotification"
class="music-notification"
role="status"
aria-live="polite"
>
<i class="fas fa-music musical-note" aria-hidden="true"></i>
<span>भारतीय संगीत चल रहा है</span>
</div>
<!-- Simplified Particle System -->
<div
class="particles-container"
id="particlesContainer"
aria-hidden="true"
></div>
<!-- Main Content -->
<main>
<!-- Form Page -->
<section class="form-page" id="formPage" role="main">
<div class="container">
<header class="header">
<h1>
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png"
alt="राखी का चित्र"
class="rakhi-img rakhi-img-header"
loading="lazy"
/>
राखी की शुभकामनाएं
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png"
alt="राखी का चित्र"
class="rakhi-img rakhi-img-header"
loading="lazy"
/>
</h1>
<p>प्रेम और सुरक्षा के पावन धागे</p>
<p class="subtitle">भाई-बहन के अटूट रिश्ते की खुशियां बांटें</p>
</header>
<div class="form-section" id="formSection">
<form
onsubmit="event.preventDefault(); generateRakhiLink();"
role="form"
>
<div class="form-group">
<label for="userName">🌟 अपना प्यारा नाम लिखें:</label>
<input
type="text"
id="userName"
name="userName"
class="name-input"
placeholder="जैसे: राहुल, प्रिया, अर्जुन..."
maxlength="50"
required
aria-describedby="nameHelp"
/>
<div id="nameHelp" class="sr-only">
अपना नाम दर्ज करें ताकि व्यक्तिगत शुभकामना बन सके
</div>
</div>
<button
type="button"
class="btn template-btn"
id="chooseTemplateBtn"
onclick="openTemplateModal()"
aria-describedby="templateHelp"
>
<i class="fas fa-images" aria-hidden="true"></i>
<span id="templateBtnText">रक्षाबंधन की फोटो चुनें</span>
</button>
<div id="templateHelp" class="sr-only">
सुंदर रक्षाबंधन फोटो चुनें
</div>
<button type="submit" class="btn" id="generateBtn">
<span id="btnText">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png"
alt="राखी"
class="rakhi-img rakhi-img-btn"
loading="lazy"
/>
राखी की शुभकामना तैयार करें
</span>
<span
class="loading-spinner hidden"
id="loadingSpinner"
aria-label="लोड हो रहा है"
></span>
</button>
</form>
<div
class="generated-link hidden"
id="generatedLink"
role="region"
aria-labelledby="linkTitle"
>
<p id="linkTitle">🎉 आपकी राखी की शुभकामनाएं तैयार हैं!</p>
<div
class="link-display"
id="linkDisplay"
role="textbox"
aria-readonly="true"
></div>
<button
type="button"
class="btn copy-btn"
onclick="copyToClipboard()"
aria-describedby="copyHelp"
>
<i class="fa-regular fa-copy" aria-hidden="true"></i> लिंक कॉपी
करें
</button>
<div id="copyHelp" class="sr-only">
लिंक कॉपी करके दूसरों के साथ साझा करें
</div>
<button
type="button"
class="btn"
onclick="shareOnWhatsApp()"
style="background: linear-gradient(135deg, #25d366, #128c7e)"
aria-describedby="whatsappHelp"
>
<i class="fa-brands fa-whatsapp" aria-hidden="true"></i>
व्हाट्सऐप पर भेजें
</button>
<div id="whatsappHelp" class="sr-only">
व्हाट्सऐप पर शुभकामना साझा करें
</div>
</div>
</div>
</div>
</section>
<!-- Envelope Page -->
<section class="envelope-page" id="envelopePage" role="main">
<div class="envelope-container" id="envelope-container">
<div class="wrapper" id="envelope-wrapper">
<div class="lid one"></div>
<div class="lid two"></div>
<div class="envelope"></div>
<button class="open-btn" id="open-btn" aria-label="लिफाफा खोलें">
<i class="fas fa-envelope-open" aria-hidden="true"></i>
</button>
<div class="letter">
<img
id="envelope-image"
src="https://i.postimg.cc/NMmL5h91/Raksha-Bandhan-1.png"
alt="रक्षाबंधन की शुभकामना"
loading="lazy"
crossorigin="anonymous"
/>
</div>
</div>
</div>
<div
class="content-container"
id="content-container"
role="dialog"
aria-labelledby="wishTitle"
>
<div class="content-card-envelope">
<img
id="main-image"
src="https://i.postimg.cc/NMmL5h91/Raksha-Bandhan-1.png"
alt="रक्षाबंधन की शुभकामना"
class="rakhi-image"
loading="lazy"
crossorigin="anonymous"
/>
<button
type="button"
class="download-btn"
id="download-btn"
aria-describedby="downloadHelp"
>
<i class="fas fa-download" aria-hidden="true"></i>
Download Image
</button>
<div id="downloadHelp" class="sr-only">इमेज डाउनलोड करें</div>
<div class="wish-text" id="wish-text" role="text">
राखी के प्रेम और सुरक्षा की हार्दिक शुभकामनाएं भेजी हैं!
</div>
<div class="action-buttons">
<button
type="button"
class="action-btn"
onclick="showRakshaBandhanInfo()"
>
राखी के बारे में जानें
</button>
<button
type="button"
class="action-btn secondary"
onclick="createNewWish()"
>
नई शुभकामना बनाएं
</button>
</div>
</div>
</div>
</section>
</main>
<!-- Template Selection Modal -->
<div
id="templateModal"
class="modal"
role="dialog"
aria-labelledby="modalTitle"
aria-hidden="true"
>
<div class="modal-content">
<button
type="button"
class="close"
onclick="closeTemplateModal()"
aria-label="बंद करें"
>
×
</button>
<h2 id="modalTitle" class="modal-title">रक्षाबंधन की फोटो चुनें</h2>
<div class="carousel-container" role="region" aria-label="फोटो गैलरी">
<div class="carousel">
<div class="carousel-slide active">
<img
src="https://i.postimg.cc/NMmL5h91/Raksha-Bandhan-1.png"
alt="रक्षाबंधन 1"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/gjMp04DV/Raksha-Bandhan-2.png"
alt="रक्षाबंधन 2"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/G2KwMz6W/Raksha-Bandhan-3.png"
alt="रक्षाबंधन 3"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/VvNy2n8d/Raksha-Bandhan-4.png"
alt="रक्षाबंधन 4"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/j229MTHf/Raksha-Bandhan-5.png"
alt="रक्षाबंधन 5"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/NMJC9n3j/Raksha-Bandhan-6.png"
alt="रक्षाबंधन 6"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/PJC3m4Hz/Raksha-Bandhan-7.png"
alt="रक्षाबंधन 7"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/DyqD5xsB/Raksha-Bandhan-8.png"
alt="रक्षाबंधन 8"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/R00DS9YD/Raksha-Bandhan-9.png"
alt="रक्षाबंधन 9"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/zG2kkhdx/Raksha-Bandhan-10.png"
alt="रक्षाबंधन 10"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/6pFv3fbx/Raksha-Bandhan-11.png"
alt="रक्षाबंधन 11"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/Hsxc9hfC/Raksha-Bandhan-12.png"
alt="रक्षाबंधन 12"
loading="lazy"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/PqmPqs81/Raksha-Bandhan-13.png"
alt="रक्षाबंधन 13"
loading="lazy"
/>
</div>
</div>
<button
type="button"
class="nav-button prev-btn"
onclick="prevSlide()"
aria-label="पिछली फोटो"
>
<i class="fas fa-chevron-left" aria-hidden="true"></i>
</button>
<button
type="button"
class="nav-button next-btn"
onclick="nextSlide()"
aria-label="अगली फोटो"
>
<i class="fas fa-chevron-right" aria-hidden="true"></i>
</button>
<button
type="button"
class="select-button"
onclick="selectTemplate()"
aria-describedby="selectHelp"
>
<span class="select-text">
<i class="fas fa-check" aria-hidden="true"></i>
Select
</span>
<i class="fas fa-check check-icon" aria-hidden="true"></i>
</button>
<div id="selectHelp" class="sr-only">यह फोटो चुनें</div>
</div>
</div>
</div>
<!-- Raksha Bandhan Information Modal -->
<div
id="infoModal"
class="info-modal"
role="dialog"
aria-labelledby="infoTitle"
aria-hidden="true"
>
<div class="info-modal-content">
<button
type="button"
class="info-close"
onclick="closeInfoModal()"
aria-label="बंद करें"
>
×
</button>
<!-- Particles for info modal -->
<div
class="particles-container"
id="infoParticlesContainer"
aria-hidden="true"
></div>
<main class="info-container">
<!-- Header -->
<header class="page-header slide-in">
<h1 id="infoTitle">
<i class="fas fa-hands-praying" aria-hidden="true"></i>
रक्षा बंधन
</h1>
<p class="subtitle">भाई-बहन के पवित्र रिश्ते का उत्सव</p>
</header>
<!-- What is Raksha Bandhan -->
<article class="content-card slide-in">
<h2 class="section-title">
<span class="section-icon"
><i class="fas fa-lotus" aria-hidden="true"></i
></span>
Raksha Bandhan क्या है?
</h2>
<p class="content-text">
रक्षा बंधन एक प्रमुख हिंदू त्योहार है, जिसमें बहन अपने भाई की कलाई
पर राखी बाँधती है, और उसकी दीर्घायु, रक्षा और समृद्धि की कामना
करती है। बदले में भाई उसे जीवनभर रक्षा का वचन देता है और उपहार
देता है। यह पारिवारिक प्रेम और विश्वास का प्रतीक है।
</p>
</article>
<!-- Origins -->
<article class="content-card slide-in">
<h2 class="section-title">
<span class="section-icon"
><i class="fas fa-scroll" aria-hidden="true"></i
></span>
रक्षा बंधन की शुरुआत कैसे हुई?
</h2>
<div class="highlight-box">
<h3 class="story-title">
<i class="fas fa-star story-icon" aria-hidden="true"></i>
पौराणिक कथाएँ (Mythological Origins)
</h3>
</div>
<div class="story-box">
<h4 class="story-title">
<i class="fas fa-sword story-icon" aria-hidden="true"></i>
द्रौपदी और श्रीकृष्ण
</h4>
<p class="content-text">
महाभारत के अनुसार, श्रीकृष्ण ने जब शिशुपाल का वध किया, तो उनकी
उंगली कट गई।
</p>
<p class="content-text">
द्रौपदी ने तुरंत अपनी साड़ी का टुकड़ा फाड़कर उनकी उंगली पर बाँध
दिया।
</p>
<p class="content-text">
इस बंध का ऋण चुकाने के लिए श्रीकृष्ण ने चीरहरण के समय द्रौपदी की
लाज बचाई।
</p>
</div>
<div class="story-box">
<h4 class="story-title">
<i class="fas fa-crown story-icon" aria-hidden="true"></i>
इंद्राणी और इंद्र
</h4>
<p class="content-text">
एक बार देवताओं और असुरों में युद्ध हो रहा था। इंद्र की पत्नी
इंद्राणी (शची) ने उन्हें रक्षासूत्र बाँधा, जिससे इंद्र युद्ध में
विजयी हुए।
</p>
<p class="content-text">
इससे संकेत मिलता है कि रक्षा सूत्र केवल भाई-बहन के बीच नहीं
बल्कि सुरक्षा और आशीर्वाद का प्रतीक है।
</p>
</div>
</article>
<!-- Historical Events -->
<article class="content-card slide-in">
<h2 class="section-title">
<span class="section-icon"
><i class="fas fa-landmark" aria-hidden="true"></i
></span>
इतिहास में रक्षा बंधन की घटनाएँ
</h2>
<div class="historical-box">
<h4 class="story-title">
<i class="fas fa-chess-queen story-icon" aria-hidden="true"></i>
रानी कर्णावती और बादशाह हुमायूं
</h4>
<p class="content-text">
सन् 1535 में चित्तौड़ की विधवा रानी कर्णावती ने गुजरात के
सुल्तान बहादुर शाह से अपनी रियासत को बचाने के लिए मुगल सम्राट
हुमायूं को राखी भेजी थी।
</p>
<p class="content-text">
रक्षाबंधन को एक राजनीतिक और भावनात्मक उपकरण बनाकर रानी ने
मुस्लिम शासक से मदद मांगी।
</p>
<p class="content-text">
हुमायूं ने राखी की मर्यादा रखते हुए अपनी फौज भेजी, लेकिन वो देर
से पहुँचा और चित्तौड़ किला गिर गया।
</p>
<div class="highlight-box">
<p class="content-text">
<i class="fas fa-lightbulb story-icon" aria-hidden="true"></i>
यह घटना दर्शाती है कि राखी केवल भाई-बहन के रिश्ते तक सीमित
नहीं, बल्कि यह सुरक्षा और विश्वास का सार्वभौमिक प्रतीक बन चुकी
थी।
</p>
</div>
</div>
<div class="historical-box">
<h4 class="story-title">
<i class="fas fa-flag story-icon" aria-hidden="true"></i>
रवींद्रनाथ टैगोर और बंगाल विभाजन (1905)
</h4>
<p class="content-text">
ब्रिटिश सरकार ने 1905 में बंगाल को धार्मिक आधार पर बाँटने की
कोशिश की।
</p>
<p class="content-text">
रवींद्रनाथ टैगोर ने हिंदू और मुस्लिमों को एकता के प्रतीक स्वरूप
राखी बाँधने की अपील की।
</p>
<p class="content-text">
इसने रक्षाबंधन को राष्ट्रीय एकता का प्रतीक भी बना दिया।
</p>
</div>
</article>
<!-- Cultural Significance -->
<article class="content-card slide-in">
<h2 class="section-title">
<span class="section-icon"
><i class="fas fa-star" aria-hidden="true"></i
></span>
रक्षाबंधन का सांस्कृतिक महत्व
</h2>
<table class="info-table">
<thead>
<tr>
<th><i class="fas fa-list" aria-hidden="true"></i> तत्व</th>
<th>
<i class="fas fa-info-circle" aria-hidden="true"></i> विवरण
</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>राखी</strong></td>
<td>
केवल धागा नहीं, यह सुरक्षा, स्नेह और आशीर्वाद का प्रतीक है।
</td>
</tr>
<tr>
<td><strong>भाई-बहन</strong></td>
<td>प्रेम, विश्वास, और पारिवारिक संबंध का सम्मान।</td>
</tr>
<tr>
<td><strong>आशीर्वाद</strong></td>
<td>
कई क्षेत्रों में बहन अपने भाई के लिए सुख-समृद्धि की पूजा और
व्रत भी करती है।
</td>
</tr>
<tr>
<td><strong>समय</strong></td>
<td>श्रावण मास की पूर्णिमा को मनाया जाता है।</td>
</tr>
</tbody>
</table>
<div class="highlight-box">
<h4 class="story-title">
<i class="fas fa-gem story-icon" aria-hidden="true"></i>
संक्षेप में
</h4>
<p class="content-text">
रक्षा बंधन केवल भाई-बहन का त्यौहार नहीं है — यह रक्षा, प्रेम,
त्याग, नारी-सम्मान और सामाजिक एकता का उत्सव है।
</p>
<p class="content-text">
यह पौराणिक कथाओं, ऐतिहासिक घटनाओं और आधुनिक भारत के सामाजिक
आंदोलनों से जुड़ा हुआ है।
</p>
</div>
</article>
</main>
</div>
</div>
<!-- Toast Notification -->
<div class="toast" id="toast" role="alert" aria-live="assertive">
<img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png"
alt="राखी"
class="rakhi-img rakhi-img-toast"
loading="lazy"
/>
लिंक सफलतापूर्वक कॉपी हो गया!
</div>
<script>
//peast all script
</script>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-gradient: linear-gradient(135deg, #ff6b9d 0%, #4834d4 100%);
--main-background: linear-gradient(135deg,
#ff6b9d 0%,
#4834d4 50%,
#ff9ff3 100%);
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.2);
--text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
--box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
body {
font-family: "Poppins", "Noto Sans Devanagari", sans-serif;
overflow-x: hidden;
min-height: 100vh;
background: var(--main-background);
background-attachment: fixed;
position: relative;
}
/* Simplified particle system */
.particles-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: float 8s infinite ease-in-out;
}
@keyframes float {
0%,
100% {
transform: translateY(0px) translateX(0px);
opacity: 0.3;
}
50% {
transform: translateY(-50px) translateX(30px);
opacity: 1;
}
}
/* Main Container */
.container {
position: relative;
z-index: 10;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
/* Form Page Styles */
.form-page {
display: block;
}
.form-page.hidden {
display: none;
}
/* Header */
.header {
text-align: center;
margin-bottom: 40px;
}
.header h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 700;
color: #fff;
text-shadow: var(--text-shadow);
margin-bottom: 15px;
font-family: "Dancing Script", "Noto Sans Devanagari", cursive;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.header p {
font-size: clamp(1rem, 2.5vw, 1.3rem);
color: rgba(255, 255, 255, 0.9);
text-shadow: var(--text-shadow);
margin-bottom: 8px;
}
.header .subtitle {
font-size: clamp(0.9rem, 2vw, 1rem);
color: rgba(255, 255, 255, 0.8);
font-style: italic;
}
/* Rakhi Images */
.rakhi-img {
filter: drop-shadow(0 0 15px rgba(255, 107, 157, 0.5));
vertical-align: middle;
}
.rakhi-img-header {
width: clamp(35px, 6vw, 60px);
height: clamp(35px, 6vw, 60px);
}
.rakhi-img-main {
width: clamp(60px, 8vw, 100px);
height: clamp(60px, 8vw, 100px);
margin: 20px 0;
}
.rakhi-img-btn {
width: 18px;
height: 18px;
margin-right: 8px;
}
.rakhi-img-toast {
width: 20px;
height: 20px;
margin-right: 10px;
}
/* Form Section */
.form-section {
background: var(--glass-bg);
backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
border-radius: 25px;
padding: 40px;
text-align: center;
box-shadow: var(--box-shadow);
max-width: 600px;
width: 100%;
position: relative;
}
.form-group {
margin-bottom: 30px;
}
.form-group label {
display: block;
color: #fff;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 12px;
text-shadow: var(--text-shadow);
}
.name-input {
width: 100%;
padding: 16px 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
background: rgba(255, 255, 255, 0.2);
color: #333;
font-size: 1.1rem;
font-weight: 500;
outline: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.name-input:focus {
border-color: #ff6b9d;
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
.name-input::placeholder {
color: rgba(51, 51, 51, 0.7);
}
/* Buttons */
.btn {
background: var(--primary-gradient);
color: #fff;
border: none;
padding: 15px 35px;
border-radius: 20px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(255, 107, 157, 0.3);
margin: 10px;
font-family: "Poppins", "Noto Sans Devanagari", sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(255, 107, 157, 0.4);
}
.template-btn {
background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
box-shadow: 0 8px 20px rgba(108, 92, 231, 0.3);
}
.template-btn.selected {
background: linear-gradient(135deg, #2ed573 0%, #1e90ff 100%);
box-shadow: 0 8px 20px rgba(46, 213, 115, 0.3);
}
.copy-btn {
background: linear-gradient(135deg, #ffd700 0%, #ff9ff3 100%);
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.3);
}
/* Generated Link */
.generated-link {
margin: 30px 0;
padding: 25px;
background: rgba(255, 255, 255, 0.15);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.generated-link p {
color: #fff;
font-weight: 600;
margin-bottom: 12px;
text-shadow: var(--text-shadow);
}
.link-display {
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 10px;
color: #fff;
font-family: "Courier New", monospace;
word-break: break-all;
font-size: 0.9rem;
margin-bottom: 15px;
}
/* Modal Styles - Enhanced for Mobile */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
align-items: center;
justify-content: center;
padding: 20px;
}
.modal.hidden {
display: none;
}
.modal.show {
display: flex;
}
.modal-content {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95),
rgba(245, 245, 245, 0.95));
border-radius: 25px;
width: 100%;
max-width: 800px;
position: relative;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
max-height: 90vh;
overflow-y: auto;
padding: 30px;
margin: 0;
transform: scale(0.9);
opacity: 0;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal.show .modal-content {
transform: scale(1);
opacity: 1;
}
.close {
color: #666;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 20px;
right: 25px;
z-index: 1001;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(0, 0, 0, 0.1);
}
.close:hover {
color: #ff4757;
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
border-color: #ff4757;
}
.modal-title {
text-align: center;
font-size: 2.5rem;
font-weight: bold;
color: #333;
margin-bottom: 30px;
font-family: "Dancing Script", "Noto Sans Devanagari", cursive;
background: linear-gradient(135deg, #ff6b9d, #4834d4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Raksha Bandhan Info Modal Styles - FIXED */
.info-modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: var(--main-background);
background-attachment: fixed;
overflow-y: auto;
}
.info-modal.show {
display: block;
}
.info-modal-content {
background: var(--main-background);
background-attachment: fixed;
min-height: 100vh;
padding: 0;
position: relative;
color: #fff;
font-family: "Poppins", "Noto Sans Devanagari", sans-serif;
line-height: 1.7;
}
.info-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 10;
}
.info-close {
position: fixed;
top: 30px;
right: 30px;
color: #fff;
font-size: 2rem;
font-weight: bold;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.3);
z-index: 2001;
backdrop-filter: blur(10px);
}
.info-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.page-header {
text-align: center;
margin-bottom: 60px;
padding: 60px 40px;
background: var(--glass-bg);
backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
border-radius: 25px;
box-shadow: var(--box-shadow);
position: relative;
overflow: hidden;
margin-top: 40px;
}
.page-header h1 {
color: #fff;
font-size: 3.5rem;
margin-bottom: 20px;
font-weight: 700;
font-family: "Dancing Script", "Noto Sans Devanagari", sans-serif;
text-shadow: var(--text-shadow);
}
.page-header .subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1.4rem;
font-style: italic;
font-weight: 500;
text-shadow: var(--text-shadow);
}
.content-card {
background: var(--glass-bg);
backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
padding: 45px;
border-radius: 25px;
box-shadow: var(--box-shadow);
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
.section-title {
color: #fff;
font-size: 2rem;
margin-bottom: 25px;
font-weight: 700;
display: flex;
align-items: center;
gap: 15px;
font-family: "Dancing Script", "Noto Sans Devanagari", sans-serif;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
padding-bottom: 15px;
text-shadow: var(--text-shadow);
}
.section-icon {
color: #ff9ff3;
font-size: 1.3em;
background: rgba(255, 255, 255, 0.2);
padding: 8px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}
.content-text {
color: rgba(255, 255, 255, 0.95);
font-size: 1.15rem;
line-height: 1.8;
text-align: justify;
margin-bottom: 20px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.story-box {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 30px;
color: rgba(255, 255, 255, 0.95);
font-size: 1.1em;
margin: 25px 0;
backdrop-filter: blur(10px);
}
.highlight-box {
background: rgba(255, 107, 157, 0.2);
border: 1px solid rgba(255, 107, 157, 0.3);
border-radius: 15px;
padding: 25px;
margin: 25px 0;
backdrop-filter: blur(10px);
}
.historical-box {
background: rgba(108, 92, 231, 0.2);
border: 1px solid rgba(108, 92, 231, 0.3);
border-radius: 15px;
padding: 30px;
margin: 25px 0;
backdrop-filter: blur(10px);
}
.story-title {
font-size: 1.4rem;
font-weight: 600;
color: #fff;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
font-family: "Dancing Script", "Noto Sans Devanagari", sans-serif;
text-shadow: var(--text-shadow);
}
.story-icon {
color: #ff9ff3;
font-size: 1.2em;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.info-table th {
background: var(--primary-gradient);
color: white;
padding: 20px 18px;
font-weight: 600;
font-size: 1.1rem;
text-align: left;
text-shadow: var(--text-shadow);
}
.info-table td {
padding: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 1rem;
color: rgba(255, 255, 255, 0.95);
}
.info-table tr:nth-child(even) {
background: rgba(255, 255, 255, 0.05);
}
.info-table tr:nth-child(odd) {
background: rgba(255, 255, 255, 0.02);
}
h4 {
font-size: 24px;
font-weight: bold;
color: #fff;
text-shadow: var(--text-shadow);
font-family: "Dancing Script", "Noto Sans Devanagari", sans-serif;
}
/* Carousel - Enhanced styling */
.carousel-container {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
border: 3px solid rgba(255, 255, 255, 0.2);
}
.carousel {
position: relative;
width: 100%;
height: 100%;
}
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.carousel-slide.active {
opacity: 1;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.95);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.nav-button:hover {
background: rgba(255, 255, 255, 1);
transform: translateY(-50%) scale(1.15);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.prev-btn {
left: 20px;
}
.next-btn {
right: 20px;
}
/* Enhanced Select Button with Animation */
.select-button {
position: absolute;
top: 20px;
right: 20px;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-size: 1rem;
font-weight: bold;
background: linear-gradient(135deg, #ff6b9d, #4834d4);
color: white;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 15;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 8px 20px rgba(255, 107, 157, 0.4);
min-width: 120px;
justify-content: center;
}
.select-button:hover:not(.selected) {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 30px rgba(255, 107, 157, 0.6);
}
.select-button.selected {
background: linear-gradient(135deg, #2ed573, #1e90ff);
border-radius: 50%;
width: 40px;
height: 40px;
min-width: 40px;
padding: 0;
transform: scale(1.1);
box-shadow: 0 10px 25px rgba(46, 213, 115, 0.5);
animation: selectSuccess 0.6s ease-in-out;
}
.select-button.selected .select-text {
display: none;
}
.select-button.selected .check-icon {
display: block;
font-size: 18px;
animation: checkBounce 0.6s ease-in-out;
}
.select-button .check-icon {
display: none;
}
@keyframes selectSuccess {
0% {
transform: scale(1);
border-radius: 25px;
}
50% {
transform: scale(1.2);
border-radius: 35px;
}
100% {
transform: scale(1.1);
border-radius: 50%;
}
}
@keyframes checkBounce {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.3);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Music Control Button */
.music-control {
position: fixed;
top: 30px;
right: 30px;
padding: 15px;
background: var(--primary-gradient);
color: white;
border: none;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 10px 25px rgba(255, 107, 157, 0.4);
z-index: 101;
transition: all 0.3s ease;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.music-control:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(255, 107, 157, 0.5);
}
.music-control.muted {
background: linear-gradient(135deg, #888 0%, #555 100%);
box-shadow: 0 10px 25px rgba(136, 136, 136, 0.4);
}
/* Music Notification */
.music-notification {
position: fixed;
top: 100px;
right: 30px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 15px 20px;
border-radius: 15px;
color: #fff;
font-size: 0.9rem;
box-shadow: 0 10px 25px rgba(255, 107, 157, 0.3);
z-index: 102;
opacity: 0;
transform: translateX(100px);
transition: all 0.5s ease;
display: flex;
align-items: center;
gap: 10px;
max-width: 250px;
}
.music-notification.show {
opacity: 1;
transform: translateX(0);
}
.musical-note {
animation: musicBounce 1s infinite ease-in-out;
color: #ff9ff3;
}
@keyframes musicBounce {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
/* Envelope Page Styles */
.envelope-page {
display: none;
height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
position: relative;
}
.envelope-page.active {
display: flex;
}
.envelope-container {
position: relative;
z-index: 10;
transition: opacity 1s ease, transform 1s ease;
}
.envelope-container.hidden {
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}
.wrapper {
height: 180px;
width: 270px;
background-color: #3760c9;
position: relative;
display: flex;
justify-content: center;
z-index: 10;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.lid {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
border-right: 135px solid transparent;
border-bottom: 90px solid transparent;
border-left: 135px solid transparent;
transform-origin: top;
transition: transform 0.25s linear;
}
.lid.one {
border-top: 90px solid #658ced;
transform: rotateX(0deg);
z-index: 3;
transition-delay: 0.75s;
}
.lid.two {
border-top: 90px solid #3760c9;
transform: rotateX(90deg);
z-index: 1;
transition-delay: 0.5s;
}
.envelope {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
border-top: 90px solid transparent;
border-right: 135px solid #c4dff0;
border-bottom: 90px solid #c4dff0;
border-left: 135px solid #a4d4f2;
z-index: 3;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.letter {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
background-color: white;
border-radius: 10px;
z-index: 2;
transition: all 0.8s ease;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.letter img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.open-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ff6b35;
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
z-index: 4;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.open-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
background: #ff5722;
}
/* Opening Animation */
.wrapper.opening .lid.one {
transform: rotateX(90deg);
transition-delay: 0s;
}
.wrapper.opening .lid.two {
transform: rotateX(180deg);
transition-delay: 0.25s;
}
.wrapper.opening .letter {
transform: translateY(-60px) scale(1.2);
z-index: 10;
transition-delay: 0.3s;
}
.wrapper.opening .open-btn {
opacity: 0;
visibility: hidden;
}
/* Content Container */
.content-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: all 1s ease;
z-index: 20;
width: 90%;
max-width: 450px;
}
.content-container.show {
opacity: 1;
visibility: visible;
}
.content-card-envelope {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 60px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.rakhi-image {
width: 100%;
max-width: 320px;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.download-btn {
background: linear-gradient(135deg, #ff6b9d 0%, #4834d4 100%);
color: white;
border: none;
padding: 12px 25px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
margin: 15px auto;
justify-content: center;
}
.download-btn:hover {
transform: scale(1.05);
}
.download-btn.loading {
pointer-events: none;
opacity: 0.7;
}
.download-btn.loading i {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.wish-text {
font-size: 1.2rem;
font-weight: 600;
color: #333;
margin: 20px 0;
line-height: 1.5;
font-family: "Dancing Script", "Noto Sans Devanagari", cursive;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 25px;
}
.action-btn {
background: linear-gradient(135deg, #4ecdc4 0%, #45b7d1 100%);
color: white;
border: none;
padding: 12px 20px;
border-radius: 20px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
font-family: "Poppins", "Noto Sans Devanagari", sans-serif;
}
.action-btn:hover {
transform: translateY(-2px);
}
.action-btn.secondary {
background: linear-gradient(135deg, #ffd700 0%, #ff9ff3 100%);
}
/* Toast Notification */
.toast {
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #ff6b9d, #4834d4);
color: #fff;
padding: 15px 25px;
border-radius: 12px;
box-shadow: 0 15px 30px rgba(255, 107, 157, 0.3);
transform: translateX(400px);
transition: all 0.4s ease;
z-index: 1000;
font-weight: 600;
display: flex;
align-items: center;
}
.toast.show {
transform: translateX(0);
}
.hidden {
display: none;
}
/* Loading Spinner */
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* SEO Hidden Content for Search Engines */
.seo-content {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Responsive Design - Enhanced for mobile */
@media (max-width: 768px) {
.container {
padding: 15px;
}
.form-section {
padding: 30px 20px;
margin: 10px;
}
.btn {
padding: 12px 25px;
font-size: 1rem;
width: 100%;
margin: 8px 0;
}
.name-input {
padding: 14px 18px;
font-size: 1rem;
}
/* Enhanced modal responsiveness */
.modal {
padding: 15px;
align-items: center;
}
.modal-content {
width: 100%;
max-width: 95vw;
max-height: 85vh;
padding: 20px;
border-radius: 20px;
}
.modal-title {
font-size: 1.8rem;
margin-bottom: 20px;
}
.carousel-container {
border-radius: 15px;
}
.nav-button {
width: 40px;
height: 40px;
font-size: 16px;
}
.prev-btn {
left: 15px;
}
.next-btn {
right: 15px;
}
.select-button {
padding: 10px 20px;
font-size: 0.9rem;
top: 15px;
right: 15px;
min-width: 100px;
}
.select-button.selected {
width: 30px;
height: 30px;
min-width: 40px;
}
.music-control {
top: 20px;
right: 20px;
width: 50px;
height: 50px;
padding: 12px;
font-size: 1rem;
}
.info-close {
top: 20px;
right: 20px;
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.music-notification {
top: 80px;
right: 20px;
max-width: 200px;
padding: 12px 15px;
font-size: 0.8rem;
}
.wrapper {
height: 140px;
width: 210px;
}
.lid {
border-right: 105px solid transparent;
border-left: 105px solid transparent;
border-bottom: 70px solid transparent;
}
.lid.one {
border-top: 70px solid #658ced;
}
.lid.two {
border-top: 70px solid #3760c9;
}
.envelope {
border-top: 70px solid transparent;
border-right: 105px solid #c4dff0;
border-bottom: 70px solid #c4dff0;
border-left: 105px solid #a4d4f2;
}
.content-card-envelope {
padding: 20px;
margin: 0 10px;
}
.rakhi-image {
height: 180px;
}
.wish-text {
font-size: 1.1rem;
}
.page-header {
padding: 40px 25px;
}
.page-header h1 {
font-size: 2.5rem;
}
.content-card {
padding: 30px 25px;
}
.section-title {
font-size: 1.7rem;
flex-direction: column;
text-align: center;
gap: 10px;
}
.story-title {
font-size: 1.3rem;
flex-direction: column;
text-align: center;
gap: 8px;
}
}
@media (max-width: 480px) {
.header h1 {
font-size: 2rem;
}
.rakhi-img-header {
width: 30px;
height: 30px;
}
.form-section {
padding: 25px 15px;
}
/* Extra small screens */
.modal {
padding: 10px;
}
.modal-content {
padding: 15px;
border-radius: 15px;
}
.modal-title {
font-size: 1.5rem;
margin-bottom: 15px;
}
.nav-button {
width: 35px;
height: 35px;
font-size: 14px;
}
.prev-btn {
left: 10px;
}
.next-btn {
right: 10px;
}
.select-button {
padding: 8px 16px;
font-size: 0.8rem;
top: 10px;
right: 10px;
min-width: 80px;
}
.select-button.selected {
width: 30px;
height: 30px;
min-width: 30px;
}
.wrapper {
height: 120px;
width: 180px;
}
.lid {
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: 60px solid transparent;
}
.lid.one {
border-top: 60px solid #658ced;
}
.lid.two {
border-top: 60px solid #3760c9;
}
.envelope {
border-top: 60px solid transparent;
border-right: 90px solid #c4dff0;
border-bottom: 60px solid #c4dff0;
border-left: 90px solid #a4d4f2;
}
.open-btn {
width: 40px;
height: 40px;
font-size: 14px;
}
.rakhi-image {
height: 160px;
}
.info-container {
padding: 0 15px;
}
.content-text {
font-size: 1rem;
}
.info-table th,
.info-table td {
padding: 12px 10px;
font-size: 0.9rem;
}
.story-box,
.highlight-box,
.historical-box {
padding: 20px;
}
}
/* Additional mobile optimizations */
@media (max-height: 600px) and (max-width: 768px) {
.modal-content {
max-height: 95vh;
padding: 15px;
}
.modal-title {
font-size: 1.5rem;
margin-bottom: 15px;
}
}
/* Fade in animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.slide-in {
animation: slideIn 0.8s ease-out;
}
JavaScript Code
// Music variables
let isPlaying = false;
let backgroundMusic = null;
// Download flag to prevent double downloads - FIXED
let isDownloading = false;
// Initialize music when page loads
function initializeMusic() {
backgroundMusic = document.getElementById("backgroundMusic");
if (backgroundMusic) {
// Set volume to a pleasant level
backgroundMusic.volume = 0.3;
// Try to play music after user interaction
document.addEventListener(
"click",
function playMusicOnFirstInteraction() {
if (!isPlaying) {
playMusic();
}
// Remove this listener after first interaction
document.removeEventListener(
"click",
playMusicOnFirstInteraction
);
},
{ once: true }
);
// For modern browsers, try to play immediately
backgroundMusic
.play()
.then(() => {
isPlaying = true;
updateMusicButton();
showMusicNotification();
})
.catch((error) => {
console.log("Autoplay prevented, waiting for user interaction");
// Music will play on first click due to the event listener above
});
}
}
// Play music function
function playMusic() {
if (backgroundMusic && !isPlaying) {
backgroundMusic
.play()
.then(() => {
isPlaying = true;
updateMusicButton();
showMusicNotification();
})
.catch((error) => {
console.log("Could not play music:", error);
});
}
}
// Toggle music function
function toggleMusic() {
if (!backgroundMusic) return;
if (isPlaying) {
backgroundMusic.pause();
isPlaying = false;
hideMusicNotification();
} else {
backgroundMusic
.play()
.then(() => {
isPlaying = true;
showMusicNotification();
})
.catch((error) => {
console.log("Could not play music:", error);
});
}
updateMusicButton();
}
// Update music button appearance - FIXED
function updateMusicButton() {
const musicControl = document.getElementById("musicControl");
const icon = musicControl.querySelector("i");
if (isPlaying) {
icon.className = "fas fa-music";
musicControl.classList.remove("muted");
musicControl.title =
"\u0938\u0902\u0917\u0940\u0924 \u092C\u0902\u0926 \u0915\u0930\u0947\u0902"; // संगीत बंद करें
} else {
icon.className = "fas fa-volume-mute";
musicControl.classList.add("muted");
musicControl.title =
"\u0938\u0902\u0917\u0940\u0924 \u091A\u093E\u0932\u0942 \u0915\u0930\u0947\u0902"; // संगीत चालू करें
}
}
// Show music notification
function showMusicNotification() {
const notification = document.getElementById("musicNotification");
if (notification) {
notification.classList.add("show");
// Hide notification after 4 seconds
setTimeout(() => {
notification.classList.remove("show");
}, 4000);
}
}
// Hide music notification
function hideMusicNotification() {
const notification = document.getElementById("musicNotification");
if (notification) {
notification.classList.remove("show");
}
}
// All Hindi text in Unicode escape format as requested
const rakhiMessages = {
baseTemplate:
"\u0906\u092A\u0915\u094B \u0930\u093E\u0916\u0940 \u0915\u0947 \u092A\u094D\u0930\u0947\u092E \u0914\u0930 \u0938\u0941\u0930\u0915\u094D\u0937\u093E \u0915\u0940 \u0939\u093E\u0930\u094D\u0926\u093F\u0915 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E\u090F\u0902",
imageUrl:
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdFjQcdXHNnTuljQUE54Rc9I1CSG6Uq5U1InU1xu60P2BzIsOBVbtv3SZYR_s6g0jfbZn9DFDcmSTQklYCh6ATMkkKtWirP2ltdbD0IDEKtJtAUTXVjEJoiaoxbo5vUDtjxWOSrakFg64_mQ4NFInBpNYb7QKGGwSNhQLVoVVL4xfSh-oiuafvJdkEPTw/s1600/pngwing.com%20%281%29.png",
colors: ["#ff6b9d", "#4834d4", "#ff9ff3", "#ffd700"],
toast: {
linkCopied:
"\u0932\u093F\u0902\u0915 \u0938\u092B\u0932\u0924\u093E\u092A\u0942\u0930\u094D\u0935\u0915 \u0915\u0949\u092A\u0940 \u0939\u094B \u0917\u092F\u093E!",
templateSelected:
"\u091F\u0947\u092E\u094D\u092A\u094D\u0932\u0947\u091F \u0938\u0947\u0932\u0947\u0915\u094D\u091F \u0939\u094B \u0917\u092F\u093E! \uD83C\uDFA8",
wishGenerated:
"\u0930\u093E\u0916\u0940 \u0915\u0940 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E \u0924\u0948\u092F\u093E\u0930 \u0939\u094B \u0917\u092F\u0940!",
enterName:
"\u0915\u0943\u092A\u092F\u093E \u0905\u092A\u0928\u093E \u0928\u093E\u092E \u0926\u0930\u094D\u091C \u0915\u0930\u0947\u0902! \uD83D\uDE4F",
},
wishes: {
ready:
"\uD83C\uDF89 \u0906\u092A\u0915\u0940 \u0930\u093E\u0916\u0940 \u0915\u0940 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E\u090F\u0902 \u0924\u0948\u092F\u093E\u0930 \u0939\u0948\u0902!",
copyLink:
"\uD83D\uDCCB \u0932\u093F\u0902\u0915 \u0915\u0949\u092A\u0940 \u0915\u0930\u0947\u0902",
shareWhatsApp:
"\uD83D\uDCF1 \u0935\u094D\u0939\u093E\u091F\u094D\u0938\u0905\u092A \u092A\u0930 \u092D\u0947\u091C\u0947\u0902",
newWish:
"\uD83C\uDFE0 \u0928\u0908 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E \u092C\u0928\u093E\u090F\u0902",
wishText:
"\u0928\u0947 \u0906\u092A\u0915\u094B \u0930\u093E\u0916\u0940 \u0915\u0947 \u092A\u094D\u0930\u0947\u092E \u0914\u0930 \u0938\u0941\u0930\u0915\u094D\u0937\u093E \u0915\u0940 \u0939\u093E\u0930\u094D\u0926\u093F\u0915 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E\u090F\u0902 \u092D\u0947\u091C\u0940 \u0939\u0948\u0902!",
aboutRakhi:
"\u0930\u093E\u0916\u0940 \u0915\u0947 \u092C\u093E\u0930\u0947 \u092E\u0947\u0902 \u091C\u093E\u0928\u0947\u0902",
downloadError:
"\u0921\u093E\u0909\u0928\u0932\u094B\u0921 \u092E\u0947\u0902 \u0938\u092E\u0938\u094D\u092F\u093E",
shareError:
"\u0936\u0947\u092F\u0930 \u092E\u0947\u0902 \u0938\u092E\u0938\u094D\u092F\u093E",
copyError:
"\u0915\u0949\u092A\u0940 \u092E\u0947\u0902 \u0938\u092E\u0938\u094D\u092F\u093E",
},
};
// Template Images - All 16:9 aspect ratio
const templateImages = [
"https://i.postimg.cc/NMmL5h91/Raksha-Bandhan-1.png",
"https://i.postimg.cc/gjMp04DV/Raksha-Bandhan-2.png",
"https://i.postimg.cc/G2KwMz6W/Raksha-Bandhan-3.png",
"https://i.postimg.cc/VvNy2n8d/Raksha-Bandhan-4.png",
"https://i.postimg.cc/j229MTHf/Raksha-Bandhan-5.png",
"https://i.postimg.cc/NMJC9n3j/Raksha-Bandhan-6.png",
"https://i.postimg.cc/PJC3m4Hz/Raksha-Bandhan-7.png",
"https://i.postimg.cc/DyqD5xsB/Raksha-Bandhan-8.png",
"https://i.postimg.cc/R00DS9YD/Raksha-Bandhan-9.png",
"https://i.postimg.cc/zG2kkhdx/Raksha-Bandhan-10.png",
"https://i.postimg.cc/6pFv3fbx/Raksha-Bandhan-11.png",
"https://i.postimg.cc/Hsxc9hfC/Raksha-Bandhan-12.png",
"https://i.postimg.cc/PqmPqs81/Raksha-Bandhan-13.png",
];
// Global variables
let currentSlide = 0;
let selectedTemplate = null;
let isEnvelopeOpened = false;
let userName = "";
let selectedImage = "";
// Check page mode
function checkPageMode() {
const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get("name");
if (name) {
document.getElementById("formPage").classList.add("hidden");
document.getElementById("envelopePage").classList.add("active");
initializeEnvelopePage();
} else {
document.getElementById("formPage").classList.remove("hidden");
document.getElementById("envelopePage").classList.remove("active");
initializeFormPage();
}
}
// Initialize Form Page
function initializeFormPage() {
createSimpleParticles();
initializeEventListeners();
// Initialize music for form page
initializeMusic();
}
// Initialize Envelope Page
function initializeEnvelopePage() {
const urlParams = new URLSearchParams(window.location.search);
userName =
urlParams.get("name") ||
"\u0915\u094B\u0908 \u0916\u093E\u0938 \u0935\u094D\u092F\u0915\u094D\u0924\u093F";
const templateIndex = urlParams.get("template");
if (
templateIndex !== null &&
templateIndex >= 0 &&
templateIndex < templateImages.length
) {
selectedImage = templateImages[parseInt(templateIndex)];
} else {
selectedImage = templateImages[0];
}
document.getElementById("envelope-image").src = selectedImage;
document.getElementById("main-image").src = selectedImage;
document.getElementById("wish-text").textContent =
userName + " " + rakhiMessages.wishes.wishText;
initializeEnvelopeEvents();
// Initialize music for envelope page
initializeMusic();
}
// Simplified particle system
function createSimpleParticles() {
const container = document.getElementById("particlesContainer");
if (!container) return;
for (let i = 0; i < 20; i++) {
const particle = document.createElement("div");
particle.className = "particle";
particle.style.left = Math.random() * 100 + "%";
particle.style.top = Math.random() * 100 + "%";
particle.style.animationDelay = Math.random() * 8 + "s";
particle.style.animationDuration = Math.random() * 4 + 6 + "s";
container.appendChild(particle);
}
}
// Create particles for info modal
function createInfoParticles() {
const container = document.getElementById("infoParticlesContainer");
if (!container) return;
// Clear existing particles
container.innerHTML = "";
for (let i = 0; i < 15; i++) {
const particle = document.createElement("div");
particle.className = "particle";
particle.style.left = Math.random() * 100 + "%";
particle.style.top = Math.random() * 100 + "%";
particle.style.animationDelay = Math.random() * 8 + "s";
particle.style.animationDuration = Math.random() * 4 + 6 + "s";
container.appendChild(particle);
}
}
// Initialize envelope events
function initializeEnvelopeEvents() {
const openBtn = document.getElementById("open-btn");
const downloadBtn = document.getElementById("download-btn");
const envelopeWrapper = document.getElementById("envelope-wrapper");
const envelopeContainer = document.getElementById("envelope-container");
const contentContainer = document.getElementById("content-container");
openBtn.addEventListener("click", function () {
if (!isEnvelopeOpened) {
isEnvelopeOpened = true;
envelopeWrapper.classList.add("opening");
setTimeout(() => {
envelopeContainer.classList.add("hidden");
setTimeout(() => {
contentContainer.classList.add("show");
}, 500);
}, 2000);
}
});
downloadBtn.addEventListener("click", function () {
downloadImage();
});
}
// Modal Functions - Enhanced
function openTemplateModal() {
const modal = document.getElementById("templateModal");
if (modal) {
modal.classList.remove("hidden");
modal.classList.add("show");
document.body.style.overflow = "hidden";
showSlide(0);
}
}
function closeTemplateModal() {
const modal = document.getElementById("templateModal");
if (modal) {
modal.classList.remove("show");
document.body.style.overflow = "auto";
// Delay hiding to allow animation to complete
setTimeout(() => {
modal.classList.add("hidden");
}, 300);
// Reset select button if it was in selected state
const selectBtn = document.querySelector(".select-button");
if (selectBtn && selectBtn.classList.contains("selected")) {
resetSelectButton();
}
}
}
// Info Modal Functions - FIXED
function openInfoModal() {
const modal = document.getElementById("infoModal");
if (modal) {
modal.classList.add("show");
document.body.style.overflow = "hidden";
createInfoParticles();
// Trigger staggered animations for content cards
setTimeout(() => {
const slideElements = modal.querySelectorAll(".slide-in");
slideElements.forEach((element, index) => {
element.style.animationDelay = `${index * 0.2}s`;
});
}, 100);
}
}
function closeInfoModal() {
const modal = document.getElementById("infoModal");
if (modal) {
modal.classList.remove("show");
document.body.style.overflow = "auto";
}
}
// Enhanced Select Template Function with Animation - FIXED
function selectTemplate() {
const selectBtn = document.querySelector(".select-button");
const templateBtn = document.getElementById("chooseTemplateBtn");
const templateBtnText = document.getElementById("templateBtnText");
if (selectBtn && !selectBtn.classList.contains("selected")) {
// Add selected class to trigger animation
selectBtn.classList.add("selected");
// Store the selected template
selectedTemplate = templateImages[currentSlide];
// Update the main template button - FIXED
templateBtn.classList.add("selected");
templateBtnText.innerHTML = "आपका फोटो चुन लिया गया है।";
// Show success toast after animation
setTimeout(() => {
showToast(rakhiMessages.toast.templateSelected);
// Close modal after a short delay
setTimeout(() => {
closeTemplateModal();
}, 1000);
}, 600);
}
}
// Reset select button to original state
function resetSelectButton() {
const selectBtn = document.querySelector(".select-button");
if (selectBtn) {
selectBtn.classList.remove("selected");
}
}
// Carousel Functions
function showSlide(index) {
const slides = document.querySelectorAll(".carousel-slide");
slides.forEach((slide) => slide.classList.remove("active"));
if (slides[index]) {
slides[index].classList.add("active");
}
// Reset select button when changing slides
resetSelectButton();
}
function nextSlide() {
const slides = document.querySelectorAll(".carousel-slide");
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
function prevSlide() {
const slides = document.querySelectorAll(".carousel-slide");
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
// Generate Rakhi Link
function generateRakhiLink() {
const userNameInput = document.getElementById("userName");
const btnText = document.getElementById("btnText");
const loadingSpinner = document.getElementById("loadingSpinner");
if (!userNameInput) return;
const userName = userNameInput.value.trim();
if (!userName) {
showToast(rakhiMessages.toast.enterName);
return;
}
// Show loading
if (btnText) btnText.classList.add("hidden");
if (loadingSpinner) loadingSpinner.classList.remove("hidden");
setTimeout(function () {
const currentUrl = window.location.origin + window.location.pathname;
let greetingUrl =
currentUrl + "?name=" + encodeURIComponent(userName);
if (selectedTemplate) {
const templateIndex = templateImages.indexOf(selectedTemplate);
greetingUrl += "&template=" + templateIndex;
}
const linkDisplay = document.getElementById("linkDisplay");
if (linkDisplay) {
linkDisplay.textContent = greetingUrl;
}
const generatedLink = document.getElementById("generatedLink");
if (generatedLink) {
generatedLink.classList.remove("hidden");
}
// Reset button
if (btnText) btnText.classList.remove("hidden");
if (loadingSpinner) loadingSpinner.classList.add("hidden");
showToast(rakhiMessages.toast.wishGenerated);
}, 1000);
}
// Copy to Clipboard
function copyToClipboard() {
const linkDisplay = document.getElementById("linkDisplay");
if (!linkDisplay) return;
const linkText = linkDisplay.textContent || linkDisplay.innerText;
if (navigator.clipboard) {
navigator.clipboard
.writeText(linkText)
.then(function () {
showToast(rakhiMessages.toast.linkCopied);
})
.catch(function () {
fallbackCopyTextToClipboard(linkText);
});
} else {
fallbackCopyTextToClipboard(linkText);
}
}
function fallbackCopyTextToClipboard(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand("copy");
showToast(rakhiMessages.toast.linkCopied);
} catch (err) {
showToast(rakhiMessages.wishes.copyError);
}
textArea.remove();
}
// WhatsApp Share
function shareOnWhatsApp() {
const linkDisplay = document.getElementById("linkDisplay");
if (!linkDisplay) return;
const linkText = linkDisplay.textContent || linkDisplay.innerText;
try {
const urlParams = new URLSearchParams(linkText.split("?")[1]);
const userName =
urlParams.get("name") || "\u0915\u093F\u0938\u0940 \u0928\u0947";
const message =
userName +
" " +
rakhiMessages.wishes.wishText +
"\n\n\u2728 \u092F\u0939\u093E\u0901 \u0926\u0947\u0916\u0947\u0902: " +
linkText +
"\n\n\uD83D\uDE4F \u0930\u093E\u0916\u0940 \u0915\u0940 \u0939\u093E\u0930\u094D\u0926\u093F\u0915 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E\u090F\u0902!";
const whatsappUrl =
"https://wa.me/?text=" + encodeURIComponent(message);
window.open(whatsappUrl, "_blank");
} catch (e) {
showToast(rakhiMessages.wishes.shareError);
}
}
// Show Toast
function showToast(message) {
const toast = document.getElementById("toast");
if (!toast) return;
const img = toast.querySelector("img");
const textNode = document.createTextNode(message);
toast.innerHTML = "";
if (img) {
toast.appendChild(img.cloneNode(true));
}
toast.appendChild(textNode);
toast.classList.add("show");
setTimeout(function () {
toast.classList.remove("show");
}, 3000);
}
// Download Image Function - FIXED to prevent double downloads
function downloadImage() {
// Prevent multiple simultaneous downloads
if (isDownloading) {
return;
}
isDownloading = true;
const downloadBtn = document.getElementById("download-btn");
downloadBtn.classList.add("loading");
downloadBtn.innerHTML = '<i class="fas fa-spinner"></i> Downloading...';
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.crossOrigin = "anonymous";
// Clear any previous event listeners
img.onload = null;
img.onerror = null;
img.onload = function () {
try {
// Maintain 16:9 aspect ratio
const aspectRatio = 16 / 9;
let canvasWidth = img.naturalWidth;
let canvasHeight = img.naturalHeight;
if (canvasWidth / canvasHeight > aspectRatio) {
canvasWidth = canvasHeight * aspectRatio;
} else {
canvasHeight = canvasWidth / aspectRatio;
}
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const x = (img.naturalWidth - canvasWidth) / 2;
const y = (img.naturalHeight - canvasHeight) / 2;
ctx.drawImage(
img,
x,
y,
canvasWidth,
canvasHeight,
0,
0,
canvasWidth,
canvasHeight
);
canvas.toBlob(
function (blob) {
if (blob) {
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "rakhi-image-" + Date.now() + ".jpg";
// Add link to DOM, click it, then remove it
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
// Clean up the blob URL
URL.revokeObjectURL(url);
resetDownloadButton();
} else {
fallbackDownload();
}
},
"image/jpeg",
0.95
);
} catch (error) {
console.error("Canvas download error:", error);
fallbackDownload();
}
};
img.onerror = function () {
console.error("Image load error");
fallbackDownload();
};
// Start loading the image
img.src = selectedImage;
}
function fallbackDownload() {
try {
const link = document.createElement("a");
link.href = selectedImage;
link.download = "rakhi-image-" + Date.now() + ".jpg";
link.target = "_blank";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
resetDownloadButton();
} catch (error) {
console.error("Fallback download error:", error);
resetDownloadButton();
}
}
function resetDownloadButton() {
const downloadBtn = document.getElementById("download-btn");
setTimeout(() => {
downloadBtn.classList.remove("loading");
downloadBtn.innerHTML =
'<i class="fas fa-download"></i> Download Image';
// Reset the download flag
isDownloading = false;
}, 1000);
}
// Modified Action button functions - Open info modal instead of redirecting
function showRakshaBandhanInfo() {
openInfoModal();
}
function createNewWish() {
// Redirect to initial webpage without any permission
window.location.href = window.location.pathname;
}
// Event Listeners
function initializeEventListeners() {
const userName = document.getElementById("userName");
if (userName) {
userName.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
generateRakhiLink();
}
});
}
}
// Keyboard navigation for modal
document.addEventListener("keydown", function (e) {
const templateModal = document.getElementById("templateModal");
const infoModal = document.getElementById("infoModal");
if (templateModal && templateModal.classList.contains("show")) {
if (e.key === "ArrowLeft") {
prevSlide();
} else if (e.key === "ArrowRight") {
nextSlide();
} else if (e.key === "Escape") {
closeTemplateModal();
} else if (e.key === "Enter") {
selectTemplate();
}
}
if (infoModal && infoModal.classList.contains("show")) {
if (e.key === "Escape") {
closeInfoModal();
}
}
});
// Touch support for mobile
let startX = 0;
function initializeTouchEvents() {
const carouselContainer = document.querySelector(".carousel-container");
if (carouselContainer) {
carouselContainer.addEventListener("touchstart", function (e) {
startX = e.touches[0].clientX;
});
carouselContainer.addEventListener("touchend", function (e) {
if (!startX) return;
const endX = e.changedTouches[0].clientX;
const diffX = startX - endX;
if (Math.abs(diffX) > 50) {
if (diffX > 0) {
nextSlide();
} else {
prevSlide();
}
}
startX = 0;
});
}
}
// Close modal when clicking outside
window.onclick = function (event) {
const templateModal = document.getElementById("templateModal");
const infoModal = document.getElementById("infoModal");
if (event.target === templateModal) {
closeTemplateModal();
}
if (event.target === infoModal) {
closeInfoModal();
}
};
// Initialize Page on Load
window.addEventListener("load", function () {
checkPageMode();
initializeTouchEvents();
});
// Handle browser navigation
window.addEventListener("popstate", function () {
checkPageMode();
});
// DOM Content Loaded fallback
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", function () {
checkPageMode();
});
} else {
checkPageMode();
}
// Handle music ended event
document.addEventListener("DOMContentLoaded", function () {
if (backgroundMusic) {
backgroundMusic.addEventListener("ended", function () {
// Music will loop automatically due to the 'loop' attribute
isPlaying = true;
});
backgroundMusic.addEventListener("pause", function () {
isPlaying = false;
updateMusicButton();
});
backgroundMusic.addEventListener("play", function () {
isPlaying = true;
updateMusicButton();
});
}
});
// Prevent right-click on music element (optional security)
document.addEventListener("contextmenu", function (e) {
if (e.target.id === "backgroundMusic") {
e.preventDefault();
}
});
Comments
Post a Comment