Good Morning & Fastival Stiker Maker Script for blogger

क्या आप भी हर सुबह अपने दोस्तों और परिवार को बेहतरीन Good Morning Stickers भेजना चाहते हैं? या फिर हर त्यौहार पर अपना नाम और फोटो लगा हुआ Festival Poster बनाना चाहते हैं?
अक्सर हमें इन कामों के लिए अलग-अलग ऐप्स डाउनलोड करने पड़ते हैं, जिनमें बहुत सारे विज्ञापन (Ads) होते हैं। लेकिन आज मैं आपके लिए एक ऐसा Magic HTML Code लेकर आया हूँ, जिसे आप अपनी वेबसाइट या ब्लॉगर पर लगाकर अपना खुद का "पोस्टर मेकर" टूल बना सकते हैं।
इस टूल की खासियतें (Features):

One-Click Copy: नीचे दिए गए बॉक्स से आप पूरा कोड एक क्लिक में कॉपी कर सकते हैं।
Daily Updates: इसमें रोज़ाना नए त्यौहारों और शुभकामनाओं के स्टिकर्स मिलेंगे।
Mobile Friendly: यह कोड मोबाइल और डेस्कटॉप दोनों पर मक्खन की तरह चलता है।
No Coding Knowledge Required: आपको बस कॉपी और पेस्ट करना है!
कोड कैसे इस्तेमाल करें? (How to Use)

नीचे दिए गए Copy Code बटन पर क्लिक करें।
अपने Blogger Dashboard में जाएँ और एक 'New Post' बनाएँ।
पोस्ट एडिटर को HTML View पर सेट करें।
कॉपी किया हुआ कोड वहां पेस्ट कर दें और Publish कर दें।
यहाँ से अपना कोड कॉपी करें (Get Your Code Here)

नोट: नीचे दिए गए बॉक्स में "Daily Festival Poster Maker" का स्क्रिप्ट कोड दिया गया है।
यहाँ से कोड कॉपी करें:
<div class='example'><html lang="hi">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"></meta>

    <title>डेली और फेस्टिवल कार्ड जेनरेटर</title>
    <style>
        /* Google Fonts से Noto Sans Devanagari को लोड करें */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;700&display=swap');

        /* --- 1. General Styling --- */
        body {
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
            min-height: 100vh;
            /* सुनिश्चित करें कि हिंदी फ़ॉन्ट डिफ़ॉल्ट रूप से काम करे */
            font-family: 'Noto Sans Devanagari', 'Poppins', Arial, sans-serif !important;
        }
        .container {
            max-width: 450px;
            margin: 0 auto;
            padding: 15px 10px;
            box-shadow: none;
            text-align: center;
            background-color: #ffffff;
            height: auto;
            box-sizing: border-box;
            overflow-y: visible;
        }
        h2 {
            color: #E91E63;
            font-size: 1.6em;
            margin-bottom: 20px;
        }

        /* Input & Preview Styles */
        #inputSection {
            background-color: #f8f8f8;
            padding: 15px 10px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        #nameInput, #mobileInput, #genderSelect { /* ADDED #genderSelect */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            width: 95%;
            margin-bottom: 10px;
            font-size: 1em;
            box-sizing: border-box;
            display: block; /* Ensure it takes full width */
            margin-left: auto;
            margin-right: auto;
            /* सुनिश्चित करें कि इनपुट फ़ील्ड में भी हिंदी फ़ॉन्ट सही दिखे */
            font-family: 'Noto Sans Devanagari', 'Poppins', Arial, sans-serif !important;
        }

        /* Festival Buttons Container - IMPROVED SCROLLING */
        #festivalSelector {
            margin-top: 15px;
            padding: 10px 0;
            border-top: 1px dashed #ccc;
            overflow-x: auto;
            white-space: nowrap;
            display: flex;
            justify-content: flex-start;
            padding-bottom: 5px;
        }
        .festival-btn {
            background: linear-gradient(135deg, #ffc107 0%, #ff5722 100%);
            color: white;
            padding: 8px 15px;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            font-size: 0.9em;
            margin-right: 10px;
            flex-shrink: 0;
            font-weight: bold;
            transition: background 0.3s ease;
            /* सुनिश्चित करें कि बटन टेक्स्ट भी हिंदी में सही दिखे */
            font-family: 'Noto Sans Devanagari', 'Poppins', Arial, sans-serif !important;
        }
        .festival-btn:hover {
             background: linear-gradient(135deg, #ff9800 0%, #d84315 100%);
        }

        /* Preview and Canvas Area */
        #cardDisplayArea {
            position: relative;
            max-width: 400px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            border: 3px solid #ff9800;
        }
        #finalCardCanvas {
            width: 100%;
            height: auto;
            display: block;
        }
        #nextDesignBtn {
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 8px 12px;
            border-radius: 6px;
            cursor: pointer;
            z-index: 10;
            position: absolute;
            top: 10px;
            right: 10px;
            font-weight: bold;
        }

        /* WhatsApp Share Button */
        #shareWhatsappBtn {
            background-color: #25D366;
            color: white;
            padding: 15px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: bold;
            width: 95%;
            margin-top: 20px;
            margin-bottom: 20px;
            /* सुनिश्चित करें कि शेयर बटन टेक्स्ट भी हिंदी में सही दिखे */
            font-family: 'Noto Sans Devanagari', 'Poppins', Arial, sans-serif !important;
        }

        /* Photo Preview */
        #imagePreviewCircle {
            width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 3px solid #ff9800; margin: 10px auto 15px auto; background-color: #eee; display: flex; justify-content: center; align-items: center; font-size: 0.8em; color: #555; text-align: center;
        }
        #previewImage {
            width: 100%; height: 100%; object-fit: cover; display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="wishTool">
            <h2>📷 डेली और फेस्टिवल कार्ड जेनरेटर</h2>

            <div id="inputSection">
                <label for="imageUpload" style="color: #555555; display: block; font-weight: bold; margin-bottom: 5px;">1. अपनी तस्वीर अपलोड करें:</label>
                <div id="imagePreviewCircle">
                    <img alt="Photo Preview" id="previewImage" src="" />
                    <span id="previewText">अपलोड फोटो</span>
                </div>
                <input accept="image/*" id="imageUpload" onchange="previewUserImage(event)" required="" type="file" />

                <label for="nameInput" style="color: #555555; display: block; font-weight: bold; margin-bottom: 5px; margin-top: 10px;">2. अपना नाम लिखें:</label>
                <input id="nameInput" maxlength="30" placeholder="आपका नाम..." required="" type="text" />

                <label for="genderSelect" style="color: #555555; display: block; font-weight: bold; margin-bottom: 5px; margin-top: 10px;">3. अपना जेंडर चुनें:</label>
                <select id="genderSelect" required="">
                    <option value="Male">पुरुष</option>
                    <option value="Female">महिला</option>
                </select>
                <label for="mobileInput" style="color: #555555; display: block; font-weight: bold; margin-bottom: 5px; margin-top: 10px;">4. मोबाइल नंबर (Optional):</label>
                <input id="mobileInput" maxlength="15" placeholder="आपका मोबाइल नंबर..." type="tel" />
              <h2> 


<a href="https://abateadversity.com/uc5e0t1d?key=3a5f6e4c47647c7fae9759e656883e8c" target="_blank">Download Banner</a></h2>

                <p style="color: #007bff; font-weight: bold; margin-top: 15px;">5. त्यौहार चुनें और कार्ड देखें:</p>

                <div id="festivalSelector">
                    <button class="festival-btn" id="Good Morning_btn" onclick="processImageAndGenerateCard('Good Morning')">☀️ Good Morning</button>
                    <button class="festival-btn" id="Diwali_btn" onclick="processImageAndGenerateCard('Diwali')">🪔 दिवाली</button>
                    <button class="festival-btn" id="Karwachauth_btn" onclick="processImageAndGenerateCard('Karwachauth')">करवा चौथ</button>
                    <button class="festival-btn" id="Dhanteras_btn" onclick="processImageAndGenerateCard('Dhanteras')">धनतेरस</button>
                    <button class="festival-btn" id="Chhoti Diwali_btn" onclick="processImageAndGenerateCard('Chhoti Diwali')">छोटी दिवाली</button>
                    <button class="festival-btn" id="Govardhan Puja_btn" onclick="processImageAndGenerateCard('Govardhan Puja')">गोवर्धन पूजा</button>
                    <button class="festival-btn" id="Bhaiya Dooj_btn" onclick="processImageAndGenerateCard('Bhaiya Dooj')">भैया दूज</button>
                    <button class="festival-btn" id="Christmas_btn" onclick="processImageAndGenerateCard('Christmas')">🎄 Christmas</button>
                    <button class="festival-btn" id="Eid_btn" onclick="processImageAndGenerateCard('Eid')">🌙 ईद</button>
                    <button class="festival-btn" id="New Year_btn" onclick="processImageAndGenerateCard('New Year')">Happy New Year 2026</button>
                    <button class="festival-btn" id="Republic Day_btn" onclick="processImageAndGenerateCard('Republic Day')">26 जनवरी 2026</button>
                    <button class="festival-btn" id="Holi_btn" onclick="processImageAndGenerateCard('Holi')">Happy Holi 2026</button>
                </div>
            </div>

            <div id="previewArea">
                <p id="readyMessage" style="color: #e91e63; display: none; font-weight: bold;">आपका HD कार्ड तैयार है! (डिज़ाइन बदलने के लिए Next दबाएं)</p>

                <div id="cardDisplayArea" style="display: none;">
                    <button id="nextDesignBtn" onclick="processImageAndGenerateCard(currentFestival, true)" style="display: none;">Next ⏩</button>
                    <canvas height="800" id="finalCardCanvas" width="600"></canvas>
                </div>

                <button id="shareWhatsappBtn" onclick="shareOnWhatsApp()" style="display: none;">🟢 इमेज और लिंक WhatsApp पर शेयर करें</button>
            </div>
        </div>
    </div>

<script>
    // यह फंक्शन HTML एंटिटी कोड्स को उनके वास्तविक कैरेक्टर में बदलेगा
    function decodeHtmlEntities(text) {
      const textarea = document.createElement('textarea');
      textarea.innerHTML = text;
      return textarea.value;
    }

    // --- 2. Configuration and Data ---

    // --- CANVAS CONFIG (HD Resolution) ---
    const CARD_WIDTH = 600;
    const CARD_HEIGHT = 800;
    const CIRCLE_RADIUS = 120;
    const CIRCLE_CENTER_Y = 500; // फोटो की Y पोजीशन को नीचे खिसकाया गया
    const CIRCLE_CENTER_X = CARD_WIDTH / 2;
    const BASE_SHARE_TEXT = "आप भी अपना सुंदर ग्रीटिंग कार्ड यहाँ बनाएं: ";

    // --- FESTIVAL DATA (Themes and Shayaris) ---
    const FESTIVAL_DATA = {
        'Good Morning': {
            title: "☀️ Good Morning! शुभ प्रभात! ☕",
            themes: [
                { bg: '#fffde7', text: '#f57f17', accent: '#ff8f00', isDark: false, pattern: 'dots', emoji: '🌄', radheColor: '#f44336' }, // Red
                { bg: '#80cbc4', text: '#004d40', accent: '#aed581', isDark: false, pattern: 'stripes', emoji: '☕', radheColor: '#9c27b0' }, // Purple
                { bg: '#e0f7fa', text: '#006064', accent: '#00bcd4', isDark: false, pattern: 'stars', emoji: '🌞', radheColor: '#2196f3' }, // Blue
                { bg: '#3f51b5', text: '#e8eaf6', accent: '#ffc107', isDark: true, pattern: 'dots', emoji: '☕', radheColor: '#ffc107' }, // Amber
                { bg: '#ffee58', text: '#e65100', accent: '#d84315', isDark: false, pattern: 'stripes', emoji: '🌄', radheColor: '#4caf50' }, // Green
                { bg: '#f9fbe7', text: '#827717', accent: '#c6ff00', isDark: false, pattern: 'stars', emoji: '🌞', radheColor: '#e91e63' }, // Pink
                { bg: '#dcedc8', text: '#33691e', accent: '#ff9800', isDark: false, pattern: 'dots', emoji: '☕', radheColor: '#607d8b' }, // Blue Grey
                { bg: '#ffcdd2', text: '#b71c1c', accent: '#ff5252', isDark: false, pattern: 'stripes', emoji: '🌄', radheColor: '#009688' }, // Teal
                { bg: '#f0f4c3', text: '#689f38', accent: '#ffc107', isDark: false, pattern: 'stars', emoji: '🌞', radheColor: '#cddc39' }, // Lime
                { bg: '#ffccbc', text: '#bf360c', accent: '#e91e63', isDark: false, pattern: 'dots', emoji: '☕', radheColor: '#795548' }, // Brown
                { bg: '#cfd8dc', text: '#455a64', accent: '#ff9800', isDark: false, pattern: 'stripes', emoji: '🌄', radheColor: '#f48fb1' }, // Light Pink
                { bg: '#e8eaf6', text: '#3949ab', accent: '#ffab40', isDark: false, pattern: 'stars', emoji: '🌞', radheColor: '#8bc34a' }, // Light Green
            ],
            shayaris: [
                "\"हर सुबह नई उम्मीदें लाती है, उठो और जीवन को नई दिशा दो। Good Morning!\"",
                "\"एक नई किरण, एक नया दिन, आपकी जिंदगी में खुशियाँ लाए। शुभ प्रभात!\"",
                "\"ख़ुशी से भरी हो हर सुबह आपकी, यही दुआ है दिल से हमारी।\"",
                "\"उम्मीदों से भरी इस नई सुबह में, आपका हर सपना सच हो।\"",
                "\"चाय की चुस्की के साथ, दिन की शुरुआत करें मुस्कुराते हुए। Good Morning!\"",
                "\"जीवन में सफलता के लिए हर सुबह एक नया मौका है।\"",
                "\"सूरज की पहली किरण आपको शक्ति दे, शुभ प्रभात!\"",
                "\"रात गई, बात गई, अब नए सिरे से दिन की शुरुआत करें।\"",
                "\"फूलों की खुशबू और पंछियों के गीत के साथ, आपको शुभ प्रभात!\"",
                "\"आपका आज का दिन कल से बेहतर हो, यही कामना है।\"",
                "\"हर सुबह आपकी जिंदगी में खुशियों का सैलाब लाए।\"",
                "\"सपनों को पूरा करने का समय आ गया है। उठो और लग जाओ!\"",
                "\"एक प्यारी सी मुस्कान के साथ दिन की शुरुआत करें।\"",
                "\"आज का दिन आपके लिए ढेर सारी खुशियाँ लेकर आए।\"",
                "\"शुभ प्रभात! आपका दिन मंगलमय हो।\"",
                "\"उठो, जागो, और अपने लक्ष्य को हासिल करो।\"",
                "\"हर नया दिन एक वरदान है। इसका सम्मान करें।\"",
                "\"जीवन सुंदर है, हर पल का आनंद लें। Good Morning!\"",
                "\"आपकी हर राह आसान हो, शुभ प्रभात।\"",
                "\"नई ऊर्जा और जोश के साथ, दिन की शुरुआत करें।\""
            ],
        },
        'Diwali': {
            title: "✨ शुभ दीपावली ✨",
            themes: [
                { bg: '#34495e', text: '#ffffff', accent: '#ffc107', isDark: true, pattern: 'dots', emoji: '🪔' },
                { bg: '#f9f9f9', text: '#2c3e50', accent: '#e74c3c', isDark: false, pattern: 'stripes', emoji: '💥' },
                { bg: '#6a1b9a', text: '#f3e5f5', accent: '#ff4081', isDark: true, pattern: 'stars', emoji: '🪔' },
                { bg: '#ffe082', text: '#d32f2f', accent: '#000000', isDark: false, pattern: 'dots', emoji: '✨' },
                { bg: '#ff8a65', text: '#3e2723', accent: '#ffffff', isDark: false, pattern: 'stripes', emoji: '🪔' },
                { bg: '#dcedc8', text: '#388e3c', accent: '#ff9800', isDark: false, pattern: 'stars', emoji: '🪔' },
                { bg: '#212121', text: '#ffffff', accent: '#f57c00', isDark: true, pattern: 'dots', emoji: '💥' },
                { bg: '#e0f7fa', text: '#00bcd4', accent: '#e91e63', isDark: false, pattern: 'stripes', emoji: '🪔' },
            ],
            shayaris: [
                "\"दीप जलते रहें, दिल से दिल मिलते रहें, इस दिवाली पर सारी खुशियाँ आपको मिलती रहें।\"",
                "\"पल-पल सुनहरे फूल खिले, कभी ना हो काँटों का सामना, जिंदगी आपकी खुशियों से भरी रहे, यही है दिवाली पर हमारी शुभकामना!\"",
                "\"आया है रोशनी का त्योहार, मिटे अंधकार, खुशियाँ हो अपार, मुबारक हो आपको दिवाली का त्यौहार!\"",
                "\"रोशनी का पर्व, दीपों का त्यौहार, लाए आपके जीवन में सुख-समृद्धि और प्यार।\"",
                "\"दीपक की रोशनी हर पल रहे जगमगाए, हर पल आपके जीवन में नई खुशियां लाए।\"",
                "\"धन की बरसात हो, माँ लक्ष्मी का वास हो, संकटों का नाश हो, हर दिल पर आपका राज हो।\"",
                "\"खुशियों की हो बौछार, अपनों का हो प्यार, मुबारक हो आपको ये दिवाली का त्यौहार!\"",
                "\"मिठास रिश्तों की बढ़ती जाए, हर घर में हो खुशियों का वास, दिवाली की शुभकामनाएं खास!\"",
                "\"हर खुशी, खुशी मांगे आपसे; हर ज़िंदगी, ज़िंदगी मांगे आपसे। दिवाली की शुभकामनाएं!\"",
                "\"गुलाबों की तरह खिलते रहो, दुनिया की हर दौलत मिले आपको। दिवाली मुबारक!\"",
                "\"पटाखों की आवाज़ से गूँज रहा संसार, आई है दिवाली की बहार। शुभकामनाएँ!\"",
                "\"पूजा की थाली, रसोई में पकवान, आंगन में दीया, खुशियों से भरा हो आपका मकान।\"",
                "\"जगमग जलते दीपक, करते हैं प्रार्थना, माँ लक्ष्मी आपके घर पधारें। शुभ दिवाली!\"",
                "\"दीपक की रोशनी से सब अंधेरे दूर हो जाएं, यही दुआ है कि जो चाहो वो मिल जाए।\"",
                "\"दुआ है कि सफलता के शिखर पर आपका नाम हो, हर सुबह खुशियों का आगाज़ हो।\"",
                "\"इस दिवाली आपके सारे सपने सच हों और जीवन आनंद से भर जाए।\"",
                "\"खुशी से हो हर पल, खुशहाल हो हर दिन, दिवाली की बधाई हो आपको, हर हाल में।\"",
                "\"दूर रहे गम, पास रहे खुशियां, यही दुआ है इस दिवाली पर हमारी।\"",
                "\"शुभ हो आपके लिए ये दिवाली का त्यौहार, खुशियों की हो बौछार और प्यार ही प्यार।\"",
                "\"दिवाली की ढेर सारी शुभकामनाएँ! यह त्योहार आपके जीवन में नई रोशनी और खुशियाँ लाए।\""
            ],
        },
        'Christmas': {
            title: "🎄 Merry Christmas! 🎁",
            themes: [
                { bg: '#e57373', text: '#fbe9e7', accent: '#004d40', isDark: true, pattern: 'stars', emoji: '🔔' },
                { bg: '#dcedc8', text: '#388e3c', accent: '#e91e63', isDark: false, pattern: 'stripes', emoji: '🎅' },
                { bg: '#004d40', text: '#aed581', accent: '#ffeb3b', isDark: true, pattern: 'dots', emoji: '🎁' },
                { bg: '#f9f9f9', text: '#d32f2f', accent: '#004d40', isDark: false, pattern: 'stars', emoji: '🎄' },
                { bg: '#ffcdd2', text: '#c62828', accent: '#004d40', isDark: false, pattern: 'stripes', emoji: '🔔' },
                { bg: '#1b5e20', text: '#c8e6c9', accent: '#ffc107', isDark: true, pattern: 'dots', emoji: '🎅' },
                { bg: '#b2dfdb', text: '#004d40', accent: '#ff4081', isDark: false, pattern: 'stars', emoji: '🎁' },
                { bg: '#c62828', text: '#ffcdd2', accent: '#ffeb3b', isDark: true, pattern: 'stripes', emoji: '🎄' },
            ],
            shayaris: [
                "\"क्र리스마स की रौशनी, आपके जीवन में खुशियाँ लाए। Merry Christmas!\"",
                "\"सांता क्लॉस आपकी हर इच्छा पूरी करे, यही दुआ है हमारी।\"",
                "\"क्र리스마स के प्यारे त्यौहार की हार्दिक शुभकामनाएँ।\"",
                "\"यीशु मसीह का आशीर्वाद आप पर सदा बना रहे।\"",
                "\"खुशियाँ, उपहार और प्यार का मौसम, मेरी क्रिसमस!\"",
                "\"क्र리스마स की रात, खुशियों की बहार, आपको और आपके परिवार को मुबारक।\"",
                "\"जिंगल बेल्स, जिंगल बेल्स, जिंगल ऑल द वे... Merry Christmas!\"",
                "\"जीवन में सुख-शांति और समृद्धि बनी रहे।\"",
                "\"दुआ है कि यह क्रिसमस आपके लिए यादगार हो।\"",
                "\"क्र리스마स की ढेर सारी खुशियाँ!\""
            ]
        },
        'Eid': {
            title: "🌙 ईद मुबारक! 💖",
            themes: [
                { bg: '#4db6ac', text: '#004d40', accent: '#ffc107', isDark: false, pattern: 'stars', emoji: '🕌' },
                { bg: '#000000', text: '#ffffff', accent: '#9ccc65', isDark: true, pattern: 'dots', emoji: '🌙' },
                { bg: '#e0f7fa', text: '#37474f', accent: '#e91e63', isDark: false, pattern: 'stripes', emoji: '🎁' },
                { bg: '#263238', text: '#cfd8dc', accent: '#ffc107', isDark: true, pattern: 'stars', emoji: '🕌' },
                { bg: '#aed581', text: '#33691e', accent: '#e91e63', isDark: false, pattern: 'dots', emoji: '🌙' },
                { bg: '#ffecb3', text: '#e65100', accent: '#4db6ac', isDark: false, pattern: 'stripes', emoji: '🎁' },
                { bg: '#004d40', text: '#b2dfdb', accent: '#ffc107', isDark: true, pattern: 'stars', emoji: '🕌' },
                { bg: '#f5f5f5', text: '#424242', accent: '#4db6ac', isDark: false, pattern: 'dots', emoji: '🌙' },
            ],
            shayaris: [
                "\"ईद मुबारक! आपका जीवन खुशियों से भरा हो।\"",
                "\"चाँद की रोशनी, ईद का त्यौहार, आपको और आपके परिवार को ईद मुबारक!\"",
                "\"दुआ है कि ईद का यह पर्व आपके लिए नई खुशियाँ लाए।\"",
                "\"खुशियाँ हों भरपूर, हर गम हो दूर, ईद मुबारक!\"",
                "\"ईद के इस मुबारक मौके पर, अल्लाह आपकी हर दुआ कुबूल करे।\"",
                "\"प्यार और सद्भाव का यह त्यौहार, ईद मुबारक!\"",
                "\"सेवइयों की मिठास, आपके जीवन में घुल जाए।\"",
                "\"दुआ है कि यह ईद आपके लिए सबसे अच्छी हो।\"",
                "\"खुशियों का पैगाम लेकर आई है ईद।\"",
                "\"ईद की ढेर सारी शुभकामनाएँ!\""
            ],
        },

        // --- Karwachauth (Consolidated for Next button) ---
        'Karwachauth': { // अब सभी करवाचौथ डिजाइन एक ही एंट्री में
            // ध्यान दें: इस 'title' का उपयोग तभी होगा जब themes के अंदर वाले title उपलब्ध न हों
            title: "🌙 करवा चौथ की हार्दिक शुभकामनाएँ 💖", // Default title if theme doesn't override
            themes: [
                {
                    bg: '#8e44ad', text: '#ecf0f1', accent: '#f39c12', isDark: true, pattern: 'stars', emoji: '🌕',
                    title: "🌙 करवा चौथ की हार्दिक शुभकामनाएँ 💖", // विशिष्ट डिजाइन का टाइटल
                    shayari: "\"सजा रहे हैं थाली, मन में है उल्लास, पिया की लंबी उम्र का है विश्वास। करवा चौथ की बधाई!\""
                },
                {
                    bg: '#f1c40f', text: '#2c3e50', accent: '#e74c3c', isDark: false, pattern: 'swirl', emoji: '💍',
                    title: "✨ सुहाग का पर्व करवा चौथ ✨",
                    shayari: "\"हाथों में मेंहदी, माथे पर सिंदूर, सदा बनी रहे आपके जीवन में खुशियाँ भरपूर। हैप्पी करवा चौथ!\""
                },
                {
                    bg: '#c0392b', text: '#ffffff', accent: '#f7dc6f', isDark: true, pattern: 'hearts', emoji: '👩‍❤️‍👨',
                    title: "❤️ प्रीति और विश्वास का करवा चौथ 🌹",
                    shayari: "\"आज का दिन है खास, जब पिया के लिए है उपवास, ईश्वर करे हर बार मिले आपका साथ।\""
                },
                {
                    bg: '#2980b9', text: '#ecf0f1', accent: '#9b59b6', isDark: true, pattern: 'lines', emoji: '🌠',
                    title: "🌕 करवा चौथ: प्यार भरा त्यौहार 💖",
                    shayari: "\"चाँद निकला, खुशियाँ छाई, पिया के साथ हो लंबी जुदाई। शुभ करवा चौथ!\""
                },
                {
                    bg: '#e67e22', text: '#f9f9f9', accent: '#27ae60', isDark: false, pattern: 'checks', emoji: '🙏',
                    title: "🌟 करवा चौथ की शुभ बेला 🌙",
                    shayari: "\"व्रत रखा है मैंने, बस एक ख्वाहिश है, लंबी हो उम्र आपकी, यही मेरी सिफारिश है।\""
                },
                {
                    bg: '#3498db', text: '#ffffff', accent: '#e74c3c', isDark: true, pattern: 'waves', emoji: '🎁',
                    title: "💫 प्रेम बंधन का पर्व 💫",
                    shayari: "\"करवा चौथ आया है, खुशियाँ लेकर आया है, आपका साथ सलामत रहे, यही दुआ लाया है।\""
                },
                {
                    bg: '#2ecc71', text: '#ecf0f1', accent: '#f1c40f', isDark: false, pattern: 'stripes', emoji: '🍎',
                    title: "🌹 अखंड सौभाग्य का वरदान 💍",
                    shayari: "\"इस व्रत में है शक्ति, इस व्रत में है प्यार, पिया के लिए है, ये सारा संसार। हैप्पी करवा चौथ!\""
                },
                {
                    bg: '#95a5a6', text: '#2c3e50', accent: '#3498db', isDark: false, pattern: 'circles', emoji: '🕯️',
                    title: "💖 सुहागन की आस्था 🌙",
                    shayari: "\"आप दोनों की जोड़ी बनी रहे सदा, खुशियों से भरी रहे आपकी दुनिया। करवा चौथ की शुभकामनाएँ।\""
                },
                {
                    bg: '#f39c12', text: '#2c3e50', accent: '#d35400', isDark: false, pattern: 'honeycomb', emoji: '🥳',
                    title: "✨ चाँद और पिया का मिलन ✨",
                    shayari: "\"करवा चौथ का व्रत है, खुशियों की सौगात है, आपका साथ हमेशा रहे, बस यही एक बात है।\""
                },
                {
                    bg: '#d35400', text: '#ffffff', accent: '#f1c40f', isDark: true, pattern: 'zigzag', emoji: '💏',
                    title: "💑 प्यार की निशानी करवा चौथ ❤️",
                    shayari: "\"मिलकर रहे सदा, आपका ये बंधन, करवा चौथ लाए आपके जीवन में आनंद।\""
                },
                {
                    bg: '#bdc3c7', text: '#2c3e50', accent: '#e74c3c', isDark: false, pattern: 'rhombus', emoji: '✨',
                    title: "🌕 पति-पत्नी का अटूट प्रेम 💖",
                    shayari: "\"करवा चौथ का व्रत, प्यार का सबूत, ईश्वर का आशीर्वाद, आपके लिए अटूट।\""
                },
                {
                    bg: '#7f8c8d', text: '#ffffff', accent: '#2ecc71', isDark: true, pattern: 'grid', emoji: '💖',
                    title: "✨ शुभ और मंगलमय करवा चौथ 🌹",
                    shayari: "\"खुशियों की बरसात हो, प्यार का एहसास हो, चाँद की रोशनी में, पिया का दीदार हो।\""
                },
                {
                    bg: '#34495e', text: '#ffffff', accent: '#ffc107', isDark: true, pattern: 'dots', emoji: '🌙',
                    title: "🌟 करवा चौथ: सौभाग्य की रात 🌙",
                    shayari: "\"चाँद की रोशनी, खुशी की बहार, आपको और आपके जीवनसाथी को करवा चौथ मुबारक!\""
                },
                {
                    bg: '#e74c3c', text: '#ffffff', accent: '#f39c12', isDark: true, pattern: 'sunrays', emoji: '🌅',
                    title: "❤️ आस्था का दीप 🪔",
                    shayari: "\"करवा चौथ की थाली में सजा है प्यार, आपके लिए लाएँ खुशियाँ हज़ार।\""
                },
                {
                    bg: '#2c3e50', text: '#ecf0f1', accent: '#1abc9c', isDark: true, pattern: 'scales', emoji: '🥳',
                    title: "🌹 प्रेम और त्याग का त्यौहार 💍",
                    shayari: "\"जीवन की हर मुश्किल में आपका साथ हो, करवा चौथ की रात, खुशियों की सौगात हो।\""
                },
                {
                    bg: '#9b59b6', text: '#ecf0f0', accent: '#f1c40f', isDark: true, pattern: 'crosses', emoji: '🎊',
                    title: "💖 मंगल कामनाएँ 🌕",
                    shayari: "\"सदा खुशियों से भरा रहे दामन, करवा चौथ पर मिले पिया का आलिंगन।\""
                },
                {
                    bg: '#3498db', text: '#ffffff', accent: '#e74c3c', isDark: true, pattern: 'confetti', emoji: '🎉',
                    title: "✨ करवा चौथ की दिव्य छटा 💫",
                    shayari: "\"इस पावन पर्व पर, दुआ है हमारी, सलामत रहे आपकी जोड़ी, सबसे प्यारी।\""
                },
                {
                    bg: '#f1c40f', text: '#2c3e50', accent: '#34495e', isDark: false, pattern: 'hexagons', emoji: '🎁',
                    title: "🌙 प्यार की डोर करवा चौथ 🌹",
                    shayari: "\"करवा चौथ का व्रत है, आपका साथ है, खुशियों से भरी हर एक बात है।\""
                },
                {
                    bg: '#e67e22', text: '#f9f9f9', accent: '#c0392b', isDark: false, pattern: 'triangles', emoji: '🧿',
                    title: "🌟 अटूट प्रेम की कहानी ❤️",
                    shayari: "\"चाँद की पूजा और पिया का दीदार, यही है करवा चौथ का सच्चा सार।\""
                },
                {
                    bg: '#ffb300', text: '#333333', accent: '#e53935', isDark: false, pattern: 'squares', emoji: '❤️‍🔥',
                    title: "🌟 करवा चौथ विशेष 🌙",
                    shayari: "\"ये करवा चौथ आपके जीवन में खुशियाँ और प्यार लाए, हर मनोकामना पूरी हो जाए।\""
                }
            ],
        },

        'Dhanteras': {
            title: "💰 धनतेरस की हार्दिक शुभकामनाएँ 🪔",
            themes: [
                { bg: '#fffde7', text: '#e65100', accent: '#ffc107', isDark: false, pattern: 'stripes', emoji: '🪙' },
                { bg: '#ffd700', text: '#333333', accent: '#ff8c00', isDark: false, pattern: 'dots', emoji: '✨' },
                { bg: '#f5f5dc', text: '#8b4513', accent: '#daa520', isDark: false, pattern: 'stars', emoji: '🪔' }
            ],
            shayaris: [
                "\"धन की बरसात हो, माँ लक्ष्मी का वास हो, धनतेरस की बधाई!\"",
                "\"आपके घर में सुख-समृद्धि और वैभव हमेशा बना रहे। शुभ धनतेरस!\"",
                "\"धनतेरस का यह पावन पर्व, आपके जीवन में खुशियाँ और सौभाग्य लाए।\""
            ]
        },
        'Chhoti Diwali': {
            title: "🪔 छोटी दिवाली की शुभकामनाएँ ✨",
            themes: [
                { bg: '#f0f4c3', text: '#558b2f', accent: '#ff9800', isDark: false, pattern: 'stars', emoji: '🪔' },
                { bg: '#ffe0b2', text: '#f57c00', accent: '#ffcc80', isDark: false, pattern: 'dots', emoji: '💥' },
                { bg: '#e0f2f7', text: '#0288d1', accent: '#80deea', isDark: false, pattern: 'stripes', emoji: '🎆' }
            ],
            shayaris: [
                "\"छोटी दिवाली का दीया, लाए खुशियाँ अपार।\"",
                "\"रूप चौदस का यह पर्व, आपके जीवन को रोशन करे।\"",
                "\"दीपक जलाएं, खुशियाँ मनाएं, छोटी दिवाली की ढेर सारी शुभकामनाएँ!\""
            ]
        },
        'Govardhan Puja': {
            title: "⛰️ गोवर्धन पूजा की शुभकामनाएँ 🐄",
            themes: [
                { bg: '#aed581', text: '#33691e', accent: '#ff9800', isDark: false, pattern: 'dots', emoji: '🐄' },
                { bg: '#c8e6c9', text: '#2e7d32', accent: '#a5d6a7', isDark: false, pattern: 'stripes', emoji: '🌱' },
                { bg: '#e8f5e9', text: '#1b5e20', accent: '#81c784', isDark: false, pattern: 'stars', emoji: '🌿' }
            ],
            shayaris: [
                "\"गोवर्धन पूजा के इस पावन पर्व पर हार्दिक बधाई।\"",
                "\"अन्नकूट की खुशियाँ, आपके जीवन में सुख-समृद्धि लाए।\"",
                "\"जय श्री कृष्णा! गोवर्धन महाराज की जय!\""
            ]
        },
        'Bhaiya Dooj': {
            title: "💖 भैया दूज की हार्दिक शुभकामनाएँ 🎁",
            themes: [
                { bg: '#ffcdd2', text: '#c62828', accent: '#ff5252', isDark: false, pattern: 'stripes', emoji: '🎁' },
                { bg: '#f8bbd0', text: '#ad1457', accent: '#f06292', isDark: false, pattern: 'dots', emoji: '👩‍❤️‍👨' },
                { bg: '#e1bee7', text: '#8e24aa', accent: '#ce93d8', isDark: false, pattern: 'hearts', emoji: '🍬' }
            ],
            shayaris: [
                "\"भाई-बहन का प्यार भरा रिश्ता, भैया दूज मुबारक!\"",
                "\"रक्षा का वादा, प्यार का बंधन, भैया दूज की शुभकामनाएँ।\"",
                "\"दुआ है कि भाई-बहन का प्यार सदा बना रहे। हैप्पी भैया दूज!\""
            ]
        },
        'Republic Day': {
            title: "🇮🇳 गणतंत्र दिवस की शुभकामनाएँ 🇮🇳",
            themes: [
                { bg: '#2980b9', text: '#ffffff', accent: '#ff9800', isDark: true, pattern: 'dots', emoji: '🇮🇳' },
                { bg: '#f44336', text: '#ffffff', accent: '#ffeb3b', isDark: true, pattern: 'stripes', emoji: '🧡' },
                { bg: '#4caf50', text: '#ffffff', accent: '#1a237e', isDark: true, pattern: 'stars', emoji: '💚' }
            ],
            shayaris: [
                "\"गणतंत्र दिवस अमर रहे!\"",
                "\"स्वतंत्रता सेनानियों को शत-शत नमन। जय हिन्द!\"",
                "\"देशभक्ति के इस पर्व पर, हार्दिक शुभकामनाएँ!\""
            ]
        },
        'Holi': {
            title: "🌈 होली की हार्दिक शुभकामनाएँ 💦",
            themes: [
                { bg: '#f3e5f5', text: '#4a148c', accent: '#e91e63', isDark: false, pattern: 'stripes', emoji: ' पिचकारी ' },
                { bg: '#ffe0b2', text: '#ff5722', accent: '#4dd0e1', isDark: false, pattern: 'dots', emoji: '🧡' },
                { bg: '#e0f7fa', text: '#2196f3', accent: '#ffeb3b', isDark: false, pattern: 'waves', emoji: '💙' }
            ],
            shayaris: [
                "\"रंगों का त्यौहार, होली मुबारक!\"",
                "\"खुशियों से भर जाए आपकी झोली, Happy Holi!\"",
                "\"होली के रंगों से रंग जाए आपका जीवन।\""
            ]
        },
        'New Year': {
            title: "🎉 Happy New Year 2026 🎉",
            themes: [
                { bg: '#000000', text: '#ffeb3b', accent: '#e91e63', isDark: true, pattern: 'stars', emoji: '🥂' },
                { bg: '#1a237e', text: '#ffffff', accent: '#ffc107', isDark: true, pattern: 'confetti', emoji: '🎆' },
                { bg: '#33691e', text: '#ffffff', accent: '#ff8f00', isDark: true, pattern: 'dots', emoji: '🍾' }
            ],
            shayaris: [
                "\"नया साल आपके लिए खुशियाँ लाए!\"",
                "\"नया साल मुबारक हो! यह साल आपके लिए बहुत खास हो।\"",
                "\"नया सवेरा, नई उम्मीदें, नया साल मुबारक हो!\""
            ]
        }
    };

    // --- Global Variables ---
    let currentFestival = ''; // यहाँ यह ग्लोबल वेरिएबल है
    let currentThemeIndex = 0;
    let currentShayariIndex = 0;
    let userImage = new Image();
    let userName = '';
    let userMobile = '';
    let userGender = '';

    const finalCardCanvas = document.getElementById('finalCardCanvas');
    const ctx = finalCardCanvas.getContext('2d');
    const nameInput = document.getElementById('nameInput');
    const mobileInput = document.getElementById('mobileInput');
    const genderSelect = document.getElementById('genderSelect'); // Gender select element
    const readyMessage = document.getElementById('readyMessage');
    const cardDisplayArea = document.getElementById('cardDisplayArea');
    const nextDesignBtn = document.getElementById('nextDesignBtn');
    const shareWhatsappBtn = document.getElementById('shareWhatsappBtn');
    const imageUpload = document.getElementById('imageUpload');
    const previewImage = document.getElementById('previewImage');
    const previewText = document.getElementById('previewText');


    // --- 3. Core Functions ---

    // Function to preview user uploaded image
    function previewUserImage(event) {
        if (event.target.files && event.target.files[0]) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImage.src = e.target.result;
                previewImage.style.display = 'block';
                previewText.style.display = 'none'; // Hide "Upload Photo" text
                userImage.src = e.target.result; // Set userImage for canvas
                userImage.onload = () => {
                    if (currentFestival) {
                        processImageAndGenerateCard(currentFestival); // Regenerate card with new image
                    }
                };
            };
            reader.readAsDataURL(event.target.files[0]);
        } else {
            previewImage.src = '';
            previewImage.style.display = 'none';
            previewText.style.display = 'block'; // Show "Upload Photo" text
            userImage = new Image(); // Reset userImage
            if (currentFestival) {
                processImageAndGenerateCard(currentFestival); // Regenerate card without image
            }
        }
    }


    // Main function to process image and generate card
    async function processImageAndGenerateCard(festivalName, nextDesign = false) {
        currentFestival = festivalName; // यहाँ यह ग्लोबल वेरिएबल है
        userName = nameInput.value.trim();
        userMobile = mobileInput.value.trim();
        userGender = genderSelect.value; // Get selected gender

        if (!userName) {
            // alert("कृपया अपना नाम लिखें!");
            alert(decodeHtmlEntities("कृपया अपना नाम लिखें!"));
            return;
        }

        const currentFestivalData = FESTIVAL_DATA[currentFestival];
        if (!currentFestivalData) {
            // alert("इस त्यौहार का डेटा उपलब्ध नहीं है!");
            alert(decodeHtmlEntities("इस त्यौहार का डेटा उपलब्ध नहीं है! कृपया एक वैध त्यौहार चुनें।")); // मैसेज को थोड़ा स्पष्ट किया
            return;
        }

        // Cycle through themes and shayaris (slightly different for Karwachauth)
        if (nextDesign) {
            currentThemeIndex = (currentThemeIndex + 1) % currentFestivalData.themes.length;
            if (currentFestival !== 'Karwachauth') { // Karwachauth के लिए शायरी थीम के अंदर है, इसलिए अलग से इंडेक्स नहीं चाहिए
                currentShayariIndex = (currentShayariIndex + 1) % currentFestivalData.shayaris.length;
            }
        } else {
            currentThemeIndex = 0; // Reset to first theme on new festival selection
            currentShayariIndex = 0; // Reset to first shayari on new festival selection
        }

        const currentTheme = currentFestivalData.themes[currentThemeIndex];

        let displayTitle;
        let selectedShayari;

        if (currentFestival === 'Karwachauth') {
            // Karwachauth के लिए, title और shayari सीधे थीम ऑब्जेक्ट से लें
            displayTitle = currentTheme.title;
            selectedShayari = currentTheme.shayari;
        } else {
            // अन्य त्यौहारों के लिए, title मुख्य फेस्टिवल डेटा से, और shayari उनके shayaris एरे से
            displayTitle = currentFestivalData.title;
            selectedShayari = currentFestivalData.shayaris[currentShayariIndex];
        }

        // --- यहाँ HTML एंटिटी कोड को डिकोड किया जा रहा है ---
        displayTitle = decodeHtmlEntities(displayTitle); // टाइटल को भी डिकोड करें
        selectedShayari = decodeHtmlEntities(selectedShayari); // <--- यह लाइन अब भी जरूरी है


        // Set canvas dimensions (HD)
        finalCardCanvas.width = CARD_WIDTH;
        finalCardCanvas.height = CARD_HEIGHT;

        // Clear canvas
        ctx.clearRect(0, 0, CARD_WIDTH, CARD_HEIGHT);

        // Draw background
        ctx.fillStyle = currentTheme.bg;
        ctx.fillRect(0, 0, CARD_WIDTH, CARD_HEIGHT);

        // Draw pattern (simplified example)
        if (currentTheme.pattern === 'dots') {
            ctx.fillStyle = currentTheme.accent + '30'; // Semi-transparent accent color
            for (let i = 0; i < CARD_WIDTH; i += 30) {
                for (let j = 0; j < CARD_HEIGHT; j += 30) {
                    ctx.beginPath();
                    ctx.arc(i + Math.random() * 10, j + Math.random() * 10, 2, 0, Math.PI * 2);
                    ctx.fill();
                }
            }
        } else if (currentTheme.pattern === 'stripes') {
            ctx.fillStyle = currentTheme.accent + '30';
            for (let i = 0; i < CARD_WIDTH; i += 40) {
                ctx.fillRect(i, 0, 10, CARD_HEIGHT);
            }
        } else if (currentTheme.pattern === 'stars') {
            ctx.fillStyle = currentTheme.accent + '30';
            for (let i = 0; i < 50; i++) {
                ctx.beginPath();
                ctx.arc(Math.random() * CARD_WIDTH, Math.random() * CARD_HEIGHT, 3, 0, Math.PI * 2);
                ctx.fill();
            }
        } else if (currentTheme.pattern === 'swirl') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 2;
            for (let i = 0; i < CARD_WIDTH / 2; i += 10) { // Reduced iterations for less density
                ctx.beginPath();
                ctx.arc(CARD_WIDTH / 2, CARD_HEIGHT / 2, i, Math.random() * Math.PI, Math.random() * Math.PI + Math.PI); // Random start/end for swirl effect
                ctx.stroke();
            }
        } else if (currentTheme.pattern === 'hearts') {
            ctx.fillStyle = currentTheme.accent + '30';
            for (let i = 0; i < 20; i++) { // Fewer hearts for cleaner look
                const x = Math.random() * CARD_WIDTH;
                const y = Math.random() * CARD_HEIGHT;
                ctx.beginPath();
                ctx.moveTo(x, y + 5);
                ctx.bezierCurveTo(x + 5, y, x + 10, y, x + 10, y + 5);
                ctx.bezierCurveTo(x + 10, y + 10, x + 5, y + 15, x, y + 10);
                ctx.bezierCurveTo(x - 5, y + 15, x - 10, y + 10, x - 10, y + 5);
                ctx.bezierCurveTo(x - 10, y, x - 5, y, x, y + 5);
                ctx.fill();
            }
        } else if (currentTheme.pattern === 'lines') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 1;
            for (let i = 0; i < CARD_WIDTH; i += 15) {
                ctx.beginPath();
                ctx.moveTo(i, 0);
                ctx.lineTo(i - CARD_HEIGHT / 2, CARD_HEIGHT); // Diagonal lines
                ctx.stroke();
            }
        } else if (currentTheme.pattern === 'checks') {
            ctx.fillStyle = currentTheme.accent + '30';
            const cellSize = 30;
            for (let i = 0; i < CARD_WIDTH / cellSize; i++) {
                for (let j = 0; j < CARD_HEIGHT / cellSize; j++) {
                    if ((i + j) % 2 === 0) {
                        ctx.fillRect(i * cellSize, j * cellSize, cellSize, cellSize);
                    }
                }
            }
        } else if (currentTheme.pattern === 'waves') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 2;
            for (let i = 0; i < 10; i++) {
                ctx.beginPath();
                ctx.moveTo(0, i * (CARD_HEIGHT / 10));
                for (let x = 0; x < CARD_WIDTH; x += 5) {
                    ctx.lineTo(x, i * (CARD_HEIGHT / 10) + Math.sin(x / 20 + i) * 10);
                }
                ctx.stroke();
            }
        } else if (currentTheme.pattern === 'circles') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 1;
            for (let i = 0; i < 40; i++) {
                ctx.beginPath();
                ctx.arc(Math.random() * CARD_WIDTH, Math.random() * CARD_HEIGHT, Math.random() * 30 + 5, 0, Math.PI * 2);
                ctx.stroke();
            }
        } else if (currentTheme.pattern === 'honeycomb') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 1;
            const size = 20;
            const h = size * Math.sqrt(3);
            const w = size * 2;
            for (let row = 0; row * h < CARD_HEIGHT + h; row++) {
                for (let col = 0; col * w * 0.75 < CARD_WIDTH + w; col++) {
                    let x = col * w * 0.75;
                    let y = row * h;
                    if (col % 2 === 1) {
                        y += h / 2;
                    }
                    ctx.beginPath();
                    ctx.moveTo(x + size * 0.5, y);
                    ctx.lineTo(x + size * 1.5, y);
                    ctx.lineTo(x + w, y + h / 2);
                    ctx.lineTo(x + size * 1.5, y + h);
                    ctx.lineTo(x + size * 0.5, y + h);
                    ctx.lineTo(x, y + h / 2);
                    ctx.closePath();
                    ctx.stroke();
                }
            }
        } else if (currentTheme.pattern === 'zigzag') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 2;
            const zigHeight = 20;
            const zigWidth = 30;
            for (let y = 0; y < CARD_HEIGHT; y += zigHeight * 2) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                for (let x = 0; x < CARD_WIDTH; x += zigWidth) {
                    ctx.lineTo(x, y + (x % (zigWidth * 2) === 0 ? 0 : zigHeight));
                }
                ctx.stroke();
            }
        } else if (currentTheme.pattern === 'rhombus') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 1;
            const size = 40;
            for (let x = 0; x < CARD_WIDTH + size; x += size) {
                for (let y = 0; y < CARD_HEIGHT + size; y += size) {
                    ctx.beginPath();
                    ctx.moveTo(x, y);
                    ctx.lineTo(x + size, y + size / 2);
                    ctx.lineTo(x, y + size);
                    ctx.lineTo(x - size, y + size / 2);
                    ctx.closePath();
                    ctx.stroke();
                }
            }
        } else if (currentTheme.pattern === 'grid') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 1;
            const gridSize = 40;
            for (let i = 0; i < CARD_WIDTH; i += gridSize) {
                ctx.beginPath();
                ctx.moveTo(i, 0);
                ctx.lineTo(i, CARD_HEIGHT);
                ctx.stroke();
            }
            for (let i = 0; i < CARD_HEIGHT; i += gridSize) {
                ctx.beginPath();
                ctx.moveTo(0, i);
                ctx.lineTo(CARD_WIDTH, i);
                ctx.stroke();
            }
        } else if (currentTheme.pattern === 'sunrays') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 1;
            const center = { x: CARD_WIDTH / 2, y: CARD_HEIGHT / 2 };
            for (let angle = 0; angle < Math.PI * 2; angle += Math.PI / 20) {
                ctx.beginPath();
                ctx.moveTo(center.x, center.y);
                const endX = center.x + Math.cos(angle) * CARD_WIDTH;
                const endY = center.y + Math.sin(angle) * CARD_HEIGHT;
                ctx.lineTo(endX, endY);
                ctx.stroke();
            }
        } else if (currentTheme.pattern === 'scales') {
            ctx.fillStyle = currentTheme.accent + '30';
            const scaleSize = 40;
            for (let y = 0; y < CARD_HEIGHT; y += scaleSize * 0.75) {
                for (let x = 0; x < CARD_WIDTH + scaleSize; x += scaleSize) {
                    let currentX = x;
                    if ((y / (scaleSize * 0.75)) % 2 === 1) { // Offset every other row
                        currentX -= scaleSize / 2;
                    }
                    ctx.beginPath();
                    ctx.arc(currentX, y, scaleSize / 2, Math.PI, 0, false); // Half circle top
                    ctx.closePath();
                    ctx.fill();
                }
            }
        } else if (currentTheme.pattern === 'crosses') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 2;
            const crossSize = 10;
            for (let x = 0; x < CARD_WIDTH; x += 40) {
                for (let y = 0; y < CARD_HEIGHT; y += 40) {
                    ctx.beginPath();
                    ctx.moveTo(x - crossSize, y);
                    ctx.lineTo(x + crossSize, y);
                    ctx.moveTo(x, y - crossSize);
                    ctx.lineTo(x, y + crossSize);
                    ctx.stroke();
                }
            }
        } else if (currentTheme.pattern === 'confetti') {
            ctx.fillStyle = currentTheme.accent + '50';
            for (let i = 0; i < 100; i++) {
                const x = Math.random() * CARD_WIDTH;
                const y = Math.random() * CARD_HEIGHT;
                const size = Math.random() * 8 + 2;
                ctx.fillRect(x, y, size, size);
            }
        } else if (currentTheme.pattern === 'hexagons') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 1;
            const size = 25;
            const h = size * Math.sqrt(3);
            const w = size * 2;
            for (let row = 0; row * h < CARD_HEIGHT + h; row++) {
                for (let col = 0; col * w * 0.75 < CARD_WIDTH + w; col++) {
                    let x = col * w * 0.75;
                    let y = row * h;
                    if (col % 2 === 1) {
                        y += h / 2;
                    }
                    ctx.beginPath();
                    for (let i = 0; i < 6; i++) {
                        ctx.lineTo(x + size * Math.cos(i * Math.PI / 3), y + size * Math.sin(i * Math.PI / 3));
                    }
                    ctx.closePath();
                    ctx.stroke();
                }
            }
        } else if (currentTheme.pattern === 'triangles') {
            ctx.strokeStyle = currentTheme.accent + '30';
            ctx.lineWidth = 1;
            const size = 40;
            for (let y = 0; y < CARD_HEIGHT + size; y += size / 2) {
                for (let x = 0; x < CARD_WIDTH + size; x += size) {
                    ctx.beginPath();
                    ctx.moveTo(x, y);
                    ctx.lineTo(x + size / 2, y + size / 2);
                    ctx.lineTo(x - size / 2, y + size / 2);
                    ctx.closePath();
                    ctx.stroke();

                    ctx.beginPath();
                    ctx.moveTo(x + size, y);
                    ctx.lineTo(x + size / 2, y + size / 2);
                    ctx.lineTo(x + size * 1.5, y + size / 2);
                    ctx.closePath();
                    ctx.stroke();
                }
            }
        } else if (currentTheme.pattern === 'squares') {
            ctx.fillStyle = currentTheme.accent + '30';
            const size = 25;
            for (let i = 0; i < CARD_WIDTH; i += size) {
                for (let j = 0; j < CARD_HEIGHT; j += size) {
                    ctx.fillRect(i, j, size, size);
                }
            }
        }



        // Draw user image if available
        if (userImage.src && userImage.complete && userImage.naturalWidth > 0) {
            ctx.save();
            ctx.beginPath();
            ctx.arc(CIRCLE_CENTER_X, CIRCLE_CENTER_Y, CIRCLE_RADIUS, 0, Math.PI * 2);
            ctx.closePath();
            ctx.clip(); // Clip to circle shape

            // Calculate image position and size to cover the circle
            // New cropping logic to ensure the circle is filled
            const imageAspectRatio = userImage.naturalWidth / userImage.naturalHeight;
            const circleDiameter = CIRCLE_RADIUS * 2;
            const circleAspectRatio = 1; // A circle has an aspect ratio of 1

            let sourceX = 0;
            let sourceY = 0;
            let sourceWidth = userImage.naturalWidth;
            let sourceHeight = userImage.naturalHeight;

            if (imageAspectRatio > circleAspectRatio) {
                // Image is wider than the circle, so crop width
                sourceWidth = userImage.naturalHeight * circleAspectRatio;
                sourceX = (userImage.naturalWidth - sourceWidth) / 2;
            } else {
                // Image is taller than the circle, so crop height
                sourceHeight = userImage.naturalWidth / circleAspectRatio;
                sourceY = (userImage.naturalHeight - sourceHeight) / 2;
            }

            // Draw image on canvas (cropped and scaled to fill circle)
            ctx.drawImage(userImage, sourceX, sourceY, sourceWidth, sourceHeight,
                          CIRCLE_CENTER_X - CIRCLE_RADIUS, CIRCLE_CENTER_Y - CIRCLE_RADIUS, circleDiameter, circleDiameter);

            ctx.restore(); // Restore context to remove clipping
        } else {
             // Draw a placeholder circle if no image
            ctx.beginPath();
            ctx.arc(CIRCLE_CENTER_X, CIRCLE_CENTER_Y, CIRCLE_RADIUS, 0, Math.PI * 2);
            ctx.fillStyle = '#ccc';
            ctx.fill();
            ctx.strokeStyle = currentTheme.accent;
            ctx.lineWidth = 5;
            ctx.stroke();
            ctx.fillStyle = '#666';
            ctx.font = '30px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(decodeHtmlEntities('आपका फोटो'), CIRCLE_CENTER_X, CIRCLE_CENTER_Y);
        }

        // Draw circle border
        ctx.beginPath();
        ctx.arc(CIRCLE_CENTER_X, CIRCLE_CENTER_Y, CIRCLE_RADIUS, 0, Math.PI * 2);
        ctx.strokeStyle = currentTheme.accent;
        ctx.lineWidth = 8;
        ctx.stroke();


        // Draw Festival Title (position adjusted)
        ctx.fillStyle = currentTheme.text;
        ctx.font = `bold 40px 'Noto Sans Devanagari'`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText(displayTitle, CARD_WIDTH / 2, 50); // ऊपर की तरफ

        // Get current date for Good Morning card
        const today = new Date();
        const options = { day: 'numeric', month: 'long', year: 'numeric' };
        const currentDateString = today.toLocaleDateString('hi-IN', options); // Hindi format

        // Draw "Radhe Radhe" (only for Good Morning card)
        if (currentFestival === 'Good Morning') {
            ctx.fillStyle = currentTheme.radheColor || '#FF5722'; // Use defined color or a default orange
            ctx.font = `bold 45px 'Noto Sans Devanagari'`; // Bigger font for Radhe Radhe
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            ctx.fillText(decodeHtmlEntities("🤲 राधे राधे 🤲"), CARD_WIDTH / 2, 140); // Date के ठीक ऊपर, Y पोजीशन एडजस्ट की
        }

        // Draw Current Date (only for Good Morning card)
        if (currentFestival === 'Good Morning') {
            ctx.fillStyle = currentTheme.accent; // Accent color for date
            ctx.font = `bold 30px 'Noto Sans Devanagari'`; // Bigger font for date
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            // अगर Radhe Radhe है, तो तारीख को थोड़ा नीचे करें
            const dateYPosition = currentFestival === 'Good Morning' ? 95 : 95; // 95 original, 100 for spacing if Radhe Radhe is above.
            ctx.fillText(currentDateString, CARD_WIDTH / 2, dateYPosition);
        }


        // Draw Shayari (position adjusted - above the photo, larger font)
        ctx.fillStyle = currentTheme.text;
        ctx.font = `35px 'Noto Sans Devanagari'`; // फ़ॉन्ट साइज़ 30px से 35px किया
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom'; // ताकि टेक्स्ट नीचे से ऊपर की ओर लिखे
        
        // फोटो के ऊपर शायरी की Y पोजीशन (फोटो के नीचे खिसकने के कारण यह भी एडजस्ट हुई)
        const shayariYPos = CIRCLE_CENTER_Y - CIRCLE_RADIUS - 30; // फोटो सर्कल के ऊपर, थोड़ा गैप देकर
        wrapTextReverse(ctx, selectedShayari, CARD_WIDTH / 2, shayariYPos, CARD_WIDTH - 100, 45); // Line height 40px से 45px किया


        // Draw 'आपका / आपकी' based on gender
        const genderText = (userGender === 'Female') ? 'आपकी' : 'आपका';
        ctx.fillStyle = currentTheme.accent;
        ctx.font = `25px 'Noto Sans Devanagari'`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        let nameY = CARD_HEIGHT - 90; // कार्ड के नीचे की तरफ
        let genderTextY = nameY - 45; // नाम से ऊपर, सही ढंग से
        ctx.fillText(decodeHtmlEntities(genderText), CARD_WIDTH / 2, genderTextY);


        // Draw User Name
        ctx.fillStyle = currentTheme.accent; // Name color
        ctx.font = `bold 35px 'Noto Sans Devanagari'`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText(userName, CARD_WIDTH / 2, nameY);

        // Draw User Mobile
        if (userMobile) {
            ctx.fillStyle = currentTheme.accent;
            ctx.font = `25px 'Noto Sans Devanagari'`;
            ctx.fillText(userMobile, CARD_WIDTH / 2, nameY + 30);
        }
        
        // Draw Watermark
        ctx.fillStyle = currentTheme.isDark ? '#aaaaaa' : '#555555'; // Darker for light backgrounds, lighter for dark
        ctx.font = `18px 'Noto Sans Devanagari'`;
        ctx.textAlign = 'left'; // Left aligned
        ctx.textBaseline = 'bottom';
        ctx.fillText(decodeHtmlEntities("Designed By : 11Toolss.blogspot.com [Kapil Bhai]"), 10, CARD_HEIGHT - 10); // Bottom-left, 10px padding


        // Show card display area
        cardDisplayArea.style.display = 'block';
        readyMessage.style.display = 'block';
        nextDesignBtn.style.display = 'block';
        shareWhatsappBtn.style.display = 'block';
    }

    // Helper function to wrap text (for text flowing downwards)
    function wrapText(context, text, x, y, maxWidth, lineHeight) {
        const words = text.split(' ');
        let line = '';
        for (let n = 0; n < words.length; n++) {
            const testLine = line + words[n] + ' ';
            const metrics = context.measureText(testLine);
            const testWidth = metrics.width;
            if (testWidth > maxWidth && n > 0) {
                context.fillText(line.trim(), x, y);
                line = words[n] + ' ';
                y += lineHeight;
            } else {
                line = testLine;
            }
        }
        context.fillText(line.trim(), x, y);
        return y; // Return final Y position
    }
    
    // Helper function to wrap text (for text flowing upwards from a baseline)
    function wrapTextReverse(context, text, x, y, maxWidth, lineHeight) {
        const words = text.split(' ');
        const lines = [];
        let currentLine = '';

        for (let n = 0; n < words.length; n++) {
            const testLine = currentLine + words[n] + ' ';
            const metrics = context.measureText(testLine);
            const testWidth = metrics.width;
            if (testWidth > maxWidth && n > 0) {
                lines.push(currentLine.trim());
                currentLine = words[n] + ' ';
            } else {
                currentLine = testLine;
            }
        }
        lines.push(currentLine.trim()); // Add the last line

        // Draw lines from bottom up
        let currentY = y;
        for (let i = lines.length - 1; i >= 0; i--) {
            context.fillText(lines[i], x, currentY);
            currentY -= lineHeight;
        }
        return currentY;
    }


    // Function to share on WhatsApp
    async function shareOnWhatsApp() {
        if (!finalCardCanvas.toDataURL) {
            alert(decodeHtmlEntities("आपका ब्राउज़र इमेज को शेयर करने का समर्थन नहीं करता है।"));
            return;
        }

        const imageDataUrl = finalCardCanvas.toDataURL('image/png'); // Get image as data URL

        const blob = await (await fetch(imageDataUrl)).blob(); // Convert data URL to Blob
        const filesArray = [new File([blob], 'festival_card.png', { type: 'image/png' })];

        if (navigator.canShare && navigator.canShare({ files: filesArray })) {
            try {
                await navigator.share({
                    files: filesArray,
                    title: 'फेस्टिवल कार्ड',
                    text: BASE_SHARE_TEXT + window.location.href,
                });
                console.log('Shared successfully');
            } catch (error) {
                console.error('Error sharing:', error);
                alert(decodeHtmlEntities("शेयर करने में समस्या हुई: " + error.message));
            }
        } else {
            // Fallback for browsers that don't support Web Share API
            // Option 1: Offer to download image (already in your HTML setup)
            const downloadLink = document.createElement('a');
            downloadLink.href = imageDataUrl;
            downloadLink.download = 'festival_card.png';
            downloadLink.click();
            alert(decodeHtmlEntities("आपके ब्राउज़र में डायरेक्ट शेयरिंग उपलब्ध नहीं है। इमेज डाउनलोड हो गई है, आप इसे मैन्युअल रूप से WhatsApp पर शेयर कर सकते हैं।"));

            // Option 2: Provide text to copy
            const whatsappText = BASE_SHARE_TEXT + window.location.href;
            prompt(decodeHtmlEntities("यह टेक्स्ट कॉपी करें और WhatsApp पर शेयर करें:"), whatsappText);
        }
    }
</script>
</body>
</html></div>
कोड कॉपी हो गया!
उम्मीद है यह कोड आपके बहुत काम आएगा। अगर आपको कोड सेटअप करने में कोई दिक्कत आए, तो नीचे कमेंट करें या हमारे YouTube चैनल "Kapil Bhai" पर जाकर इसका ट्यूटोरियल देखें।
इस पोस्ट को अपने उन दोस्तों के साथ शेयर करें जो अपना खुद का ऑनलाइन टूल बनाना चाहते हैं!
Live Jankaari

Ticker

Good Morning & Fastival Stiker Maker Script for blogger

इस टूल की खासियतें (Features):

कोड कैसे इस्तेमाल करें? (How to Use)

यहाँ से अपना कोड कॉपी करें (Get Your Code Here)

एक टिप्पणी भेजें

0 टिप्पणियाँ

Subscribe Us

Facebook

Popular Posts

Full Screen Timer App | Full Screen Stopwatch

7 तरीके (Free) - Views Kaise Badhaye 2022 | यूट्यूब पर व्यूज कैसे बढ़ाए

YouTube Course Free

अपना खुद का Ai Photo kaise banaye Kapil Bhai | Ai Photo Editing Prompt Kapil Bhai Nano Banana

Nrega MMS App Download || Nrega MMS Apk Download || NMMS App 3.1.3 Apk Download

Category

Subscribe Us

Footer Menu Widget

Live Jankaari

Ticker

Good Morning & Fastival Stiker Maker Script for blogger

​इस टूल की खासियतें (Features):

​कोड कैसे इस्तेमाल करें? (How to Use)

​यहाँ से अपना कोड कॉपी करें (Get Your Code Here)

एक टिप्पणी भेजें

0 टिप्पणियाँ

Social Plugin

Subscribe Us

Facebook

Popular Posts

Full Screen Timer App | Full Screen Stopwatch

7 तरीके (Free) - Views Kaise Badhaye 2022 | यूट्यूब पर व्यूज कैसे बढ़ाए

YouTube Course Free

अपना खुद का Ai Photo kaise banaye Kapil Bhai | Ai Photo Editing Prompt Kapil Bhai Nano Banana

Nrega MMS App Download || Nrega MMS Apk Download || NMMS App 3.1.3 Apk Download

Category

Subscribe Us

Footer Menu Widget

इस टूल की खासियतें (Features):

कोड कैसे इस्तेमाल करें? (How to Use)

यहाँ से अपना कोड कॉपी करें (Get Your Code Here)
