What types of projects and digital works are published on Tabrej Azam?

Tabrej Azam publishes original interactive webpages, 3D browser mini-games, cultural storytelling microsites, UI/UX design templates, and visual branding showcases for creators and businesses.
How often are new webpages and locked projects unlocked?

New interactive posts and web projects are published multiple times a week. Projects marked as Locked are undergoing final quality testing and typically unlock within 2 to 5 days.
Can I collaborate with Tabrej Azam for custom web design or branding?

Yes! You can reach out directly via the Contact Us page or through the official Instagram profile (@tabrejazam.official) for custom Blogger templates, interactive webpages, or thumbnail design packages.
Are the web applications and games mobile-friendly?

Every webpage, interactive story, and browser game published on this platform is engineered with responsive layouts to run smoothly across smartphones, tablets, and desktop browsers.
Rakshabandhan Webpage - Complete Source Code & Tutorial
Rakshabandhan Webpage

Project Overview & Introduction

Welcome to our comprehensive tutorial and source code guide for Rakshabandhan Webpage. In modern frontend web development, creating interactive, visually appealing, and responsive user interfaces is one of the best ways to sharpen your coding skills and build projects that stand out in a professional portfolio. Whether you are a student learning the fundamentals of web design or an experienced developer looking for a clean, ready-to-use implementation, this complete guide walks you through everything you need to know.
In this post, we have combined the entire architecture of Rakshabandhan Webpage—including semantic HTML5 markup, modern CSS3 styling with custom variables and animations, and dynamic JavaScript logic—into a single, easy-to-use code snippet. You do not need to juggle multiple files or complex build configurations to test this project. Simply review the video walkthrough below, explore how each layer of the interface works, and copy the complete source code to run it directly in your browser.
Before jumping straight into the code, we highly recommend watching the full video tutorial embedded below. It demonstrates the live behavior, responsive breakpoints, and subtle UI interactions that make Rakshabandhan Webpage smooth, accessible, and user-friendly across both desktop and mobile devices.
Video Tutorial & Live Demo Walkthrough

Watch the step-by-step video demonstration below to see Rakshabandhan Webpage in action. If you are new to setting up local HTML projects in your code editor, click the "How to set up this?" button right above the video player for quick instructions.
As shown in the video walkthrough, every visual element is carefully structured to maintain clean spacing, smooth transitions, and fast rendering performance. You can pause the video at any point to compare the visual output with the source code provided below.
Key Features & Technical Highlights

Building Rakshabandhan Webpage involves combining several core frontend techniques that work together seamlessly. Here is a closer look at the primary features and engineering decisions included in this project:
Responsive Layout

Built using fluid CSS Flexbox and Grid layouts so the interface automatically adapts to mobile phones, tablets, laptops, and widescreen monitors.
Single-File Simplicity

All HTML structure, CSS styles, and JavaScript interactivity are merged into one complete snippet for instant testing and zero setup friction.
Modern UI & Styling

Features clean typography, balanced color contrast, smooth hover transitions, and well-organized CSS rules that are easy to customize.
Cross-Browser Ready

Uses standard, dependency-free web APIs that run reliably across Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari.
By studying how these components interact, you gain practical experience with DOM manipulation, event handling, and responsive styling. You can also reuse individual parts of this layout—such as cards, buttons, or interactive scripts—inside your own larger web applications.
Complete Source Code (All-in-One Snippet)

Below is the complete, ready-to-run source code for Rakshabandhan Webpage. Unlike split tutorials where you have to copy HTML, CSS, and JavaScript separately and link them manually, everything here is combined into a single complete code block. Click the copy icon in the top-right corner of the code box to copy the entire file in one click.
Complete HTML, CSS & JavaScript Code

Click below to unlock the complete source 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>
    <style>
* {
      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;
  }
  </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="बंद करें"
        >
          &times;
        </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="बंद करें"
        >
          &times;
        </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>
    <script>
// 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();
    }
});
  </script>
</body>
</html>
Once you have copied the code above, open your favorite text editor (such as Visual Studio Code, Sublime Text, or Notepad++), paste the code into a new file, and save it as index.html. Double click the saved file to launch it directly in your web browser.
Step-by-Step Setup & Customization Guide

Want to understand how Rakshabandhan Webpage works under the hood or customize it for your own personal project? Follow this step-by-step breakdown to set up, edit, and personalize the code:
Step 1: Create Your Project File

Start by creating a dedicated folder on your computer for this project. Inside that folder, create a new file named index.html. Because the code snippet above already includes the internal <style> and <script> tags, saving everything inside a single .html file is all you need to get started immediately.
Step 2: Explore the HTML Structure

Inspect the body section of the code to see how the main containers, headings, buttons, and interactive elements are arranged. Clean class names and semantic tags make it easy to add new sections, change text labels, or embed this component inside an existing webpage.
Step 3: Customize Colors, Fonts & Spacing

Scroll to the <style> section at the top of the document to modify the visual theme. You can adjust background colors, border radius values, box shadows, font sizes, and keyframe animations to match your brand identity. Using browser DevTools (press F12) allows you to preview style changes in real time.
Step 4: Test & Extend JavaScript Logic

Finally, review the <script> block at the bottom of the file. It handles user interactions, DOM updates, and dynamic states. Try tweaking timing values, adding new event listeners, or connecting the UI to local storage or external APIs to take your project to the next level.
Frequently Asked Questions (FAQ)

Here are answers to the most common questions developers ask when working with Rakshabandhan Webpage:
1. Do I need to create separate CSS and JS files to run this code?

No! The complete source code is provided in a single all-in-one snippet that already contains the HTML structure, CSS styles, and JavaScript code. You only need to paste it into one index.html file and open it in any browser.
2. Can I separate the CSS and JavaScript into external files later?

Yes, absolutely. For larger production websites, you can move the contents inside the <style> tag into a style.css file (linked with <link rel="stylesheet" href="style.css">) and move the <script> contents into a script.js file.
3. Why are icons or fonts not loading when I test offline?

If the project uses external CDN libraries like Google Fonts or FontAwesome icons, make sure you have an active internet connection when opening the file so your browser can fetch those stylesheets.
4. Is this project mobile-friendly and responsive?

Yes, the layout is designed with responsive CSS rules and viewport meta settings so it scales cleanly on smartphones, tablets, and desktop screens alike.
Conclusion & Final Thoughts

We hope this complete tutorial and single-snippet source code for Rakshabandhan Webpage helps you build faster and learn new frontend development techniques. Hands-on practice is the most effective way to master HTML, CSS, and JavaScript, so do not hesitate to experiment with the code, change the layout, and add your own creative features.
If you found this guide helpful, be sure to bookmark this page for future reference and watch the complete video tutorial above. Stay tuned for more interactive web development projects, UI components, and coding tutorials!
Welcome to the Complete Code Showcase!
The entire project code (HTML, CSS, and JavaScript) is combined into a single ready-to-use code snippet for quick setup.
How It Works

You can copy and run the entire project in one single file:
Single Complete Snippet: All HTML, CSS, and JavaScript are included together in one code block below
One-Click Copy: Click the copy button in the top-right corner of the code block to copy everything at once
Save & Run: Paste the code into an index.html file and open it in your browser
Copying Code Instructions

To copy the complete code block:
Look for the copy button (📋 icon) in the top-right corner of the code block
Click the copy button to copy the entire code to your clipboard
The button will show a ✅ checkmark when successfully copied
Paste the code into your preferred code editor or IDE
Getting Started

Here's what you need to do to run this project:
Have a Code Editor Ready: Use VS Code, Sublime Text, or any text editor
Create an HTML File: Create a new file named index.html and paste the copied code
Test Your Code: Open index.html in your browser to see the live result
Experiment: Modify the code to customize styles and functionality
Need Help Setting It Up?
Watch the tutorial video above for a complete walkthrough of how this project works and how to customize it step by step.
Ready to Start?
Close this modal, copy the complete code snippet with one click, and run it in your browser. Happy coding! 🚀