सलेक्ट 10

वाह! बेहतरीन! पिछले संस्करणों ने कार्यक्षमता और लेआउट पर ध्यान केंद्रित किया था। अब, अंतिम चरण में, हम इसे विज़ुअल रूप से और अधिक आकर्षक और परिष्कृत ("जानदार डेकोरेशन") बनाते हैं। मैंने निम्नलिखित परिवर्तन किए हैं: 1. **नई डिफ़ॉल्ट थीम:** * एक अधिक आधुनिक और शांत रंग पैलेट (नीला/ग्रे) चुना गया है। * CSS वेरिएबल्स (`:root` और प्रीव्यू स्टाइल में) और HTML नियंत्रणों (`value="..."`) के डिफ़ॉल्ट मानों को इस नई थीम से मेल खाने के लिए अपडेट किया गया है। अब जेनरेट किया गया डिफ़ॉल्ट TOC और बटन अधिक पेशेवर दिखेंगे। * मुख्य बैकग्राउंड अब बहुत हल्का ग्रे (`#f8f9fa`) है, और नियंत्रण/कोड कॉलम सफेद (`#ffffff`) है। 2. **UI पॉलिश:** * नियंत्रण आइटम्स, शीर्षक और बटनों के बीच स्पेसिंग और पैडिंग को बेहतर बनाया गया है। * बॉर्डर को और अधिक सूक्ष्म (`#dee2e6` या `rgba(0,0,0,0.1)`) बनाया गया है। * इनपुट फ़ील्ड्स (टेक्स्ट, नंबर, सेलेक्ट) को थोड़ा और परिष्कृत किया गया है, जिसमें बेहतर फोकस स्थिति शामिल है। * स्लाइडर नेविगेशन बटनों को थोड़ा बड़ा और अधिक आकर्षक बनाया गया है। 3. **कोड बॉक्स सुधार:** * कोड टेक्स्टएरिया के बैकग्राउंड को थोड़ा गहरा ग्रे (`#e9ecef`) किया गया है ताकि कंट्रास्ट बेहतर हो। * कॉपी बटन अब हेडर के दाईं ओर अलाइन हैं। 4. **प्रीव्यू क्षेत्र:** * प्रीव्यू कंटेनर (`widget-preview-container`) में एक बहुत हल्का आंतरिक शैडो (`box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);`) जोड़ा गया है ताकि यह मुख्य बैकग्राउंड से थोड़ा अलग दिखे। * प्रीव्यू के अंदर डिफ़ॉल्ट TOC स्टाइल अब नई थीम से मेल खाते हैं। 5. **संक्रमण और होवर प्रभाव:** * नियंत्रण आइटम्स, TOC लिंक्स और बटनों पर सूक्ष्म होवर प्रभाव जोड़े गए हैं। * स्लाइड बदलने पर एक हल्का फेड-इन प्रभाव (`fadeInUp` एनीमेशन पहले से मौजूद है)। 6. **उत्तरदायित्व (Responsiveness):** लेआउट को छोटे स्क्रीन पर बेहतर ढंग से काम करने के लिए थोड़ा समायोजित किया गया है, खासकर ग्रिड लेआउट ब्रेकपॉइंट। यह अंतिम, पॉलिश किया हुआ संस्करण है: ```html

TOC Customizer

Basic Configuration

Post Container: Default: .post-body Theme V2/Contempo: .post-body.entry-content Older Themes: .post.hentry Some Custom Themes: article .post-body Rarely: #post-body (ID) Default: .entry-content Some Themes: .post-content Theme Frameworks: .content-area Specific Themes: article .entry-content HTML5 Themes: main .entry-content Newspaper/TagDiv: .td-post-content GeneratePress: article.post Astra: .single-content Common: .page-content Common: .main-content HTML5: article HTML5: main Schema: [itemprop=articleBody] Custom Selector...

Custom Selector:

Headings:

Min Headings:

TOC Title:

Show Text:

Hide Text:

Button & Icons

Show Icon:

Hide Icon:

List Icons:

H2 Icon:

H3 Icon:

H4 Icon:

List Icon Size: em

Use Font Awesome 6 Free classes (e.g., fa-solid fa-star)

TOC Box Style

BG Start:

BG End:

Border:

Border Style: Solid Dashed Dotted None

Shadow (Color):

Box Radius:px

Padding Top:px

Padding Btm:px

Padding L/R:px

TOC Title Style

Title Color:

Border Color:

Border Style: Solid Dashed Dotted None

Font Weight: 400 (Normal) 500 (Medium) 600 (Semi-Bold) 700 (Bold)

Text Transform: None UPPERCASE Capitalize

Letter Spacing:px

List Style

Columns:

Col Gap:px

Rule Color:

Item Margin Btm:px

Line Height:

Link Color:

Hover BG (Color):

Hover Text:

Link Weight: 400 (Normal) 500 (Medium) 600 (Semi-Bold)

Link Transform: None Capitalize

Subheading Style

H3 Font Size:em

H4 Font Size:em

H3 Indent:px

H3 Pad L:px

H3 Indicator:

H3 BG (Color):

H3 Hover BG(Color):

H3 Hover Ind:

H4 Indent:px

H4 Pad L:px

H4 Indicator:

Highlight & Scroll

Highlight BG:

Highlight Border:

Highlight Text:

Highlight Glow (Color):

Content BG:

Content Border:

Duration (ms): ms

Scroll Padding: px

Button Appearance

BG Start:

BG End:

Border:

Text Color:

Glow (Color):

Radius:px

Padding V:px

Padding H:px

Font Size:em

Font Weight: 400 (Normal) 500 (Medium) 600 (Semi-Bold) 700 (Bold)

Letter Spacing:px

Icon Size:em

Basic Configuration

Generated CSS Code

/* ===== TOC & Highlight Styles v3 - START ===== */ /* --- Generated CSS Variables START --- */ :root { --toc-bg-start: #ffffff; --toc-bg-end: #f8f9fa; --toc-border: #ced4da; --toc-shadow: rgba(0, 0, 0, 0.05); --toc-title-color: #007bff; --toc-title-border: #dee2e6; --toc-column-rule: #e0e0e0; --toc-list-hover-bg: rgba(0, 123, 255, 0.08); --toc-list-hover-text: #007bff; --toc-h3-indicator: #6c757d; --toc-h3-bg: rgba(108, 117, 125, 0.03); --toc-h3-hover-bg: rgba(108, 117, 125, 0.08); --toc-h3-hover-indicator: #007bff; --toc-h4-indicator: #ced4da; --toc-link-color: #343a40; --highlight-bg: #fff3cd; --highlight-border: #ffc107; --highlight-pulse-glow: rgba(255, 193, 7, 0.3); --content-highlight-bg: #fff9e0; --button-bg-start: #007bff; --button-bg-end: #0056b3; --button-border: #0056b3; --button-text-color: #ffffff; --button-glow: rgba(0, 123, 255, 0.4); --scroll-padding-top: 80px; --toc-column-count: 1; --toc-column-gap: 25px; --toc-h3-indent: 12px; --toc-h3-padding: 15px; --toc-h4-indent: 24px; --toc-h4-padding: 12px; --button-radius: 6px; --button-padding-v: 10px; --button-padding-h: 16px; --button-font-size: 1.05em; --toc-box-radius: 6px; --toc-icon-size: 1em; --toc-border-style: solid; --toc-padding-top: 18px; --toc-padding-bottom: 18px; --toc-padding-horizontal: 20px; --toc-title-weight: 600; --toc-title-transform: none; --toc-title-spacing: 0px; --toc-title-border-style: solid; --toc-list-line-height: 1.5; --toc-item-margin-bottom: 6px; --toc-link-weight: 400; --toc-link-transform: none; --toc-h3-font-size: 0.95em; --toc-h4-font-size: 0.9em; --highlight-text-color: #856404; --content-highlight-border: #ffeeba; --button-font-weight: 500; --button-letter-spacing: 0.5px; } /* --- End Generated CSS Variables --- */ html { scroll-behavior: smooth !important; scroll-padding-top: var(--scroll-padding-top, 80px); /* Updated default */ } @keyframes tocFadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes buttonPulseGlow { 0% { box-shadow: 0 0 5px var(--button-glow, rgba(0, 123, 255, 0.4)), 0 0 10px var(--button-glow, rgba(0, 123, 255, 0.4)); transform: scale(1); } 50% { box-shadow: 0 0 10px var(--button-glow, rgba(0, 123, 255, 0.4)), 0 0 20px var(--button-glow, rgba(0, 123, 255, 0.4)), 0 0 30px var(--button-glow, rgba(0, 123, 255, 0.4)); transform: scale(1.02); } 100% { box-shadow: 0 0 5px var(--button-glow, rgba(0, 123, 255, 0.4)), 0 0 10px var(--button-glow, rgba(0, 123, 255, 0.4)); transform: scale(1); } } @keyframes highlightPulse { 0% { box-shadow: 0 0 0 2px var(--highlight-border, #ffc107), 0 0 0 3px var(--highlight-pulse-glow, rgba(255, 193, 7, 0.3)); background-color: var(--highlight-bg, #fff3cd); transform: scale(1); } 50% { box-shadow: 0 0 0 3px var(--highlight-border, #ffc107), 0 0 0 6px var(--highlight-pulse-glow, rgba(255, 193, 7, 0.3)); background-color: #fff8e1; transform: scale(1.01); } 100% { box-shadow: 0 0 0 2px var(--highlight-border, #ffc107), 0 0 0 3px var(--highlight-pulse-glow, rgba(255, 193, 7, 0.3)); background-color: var(--highlight-bg, #fff3cd); transform: scale(1); } } #toc-container { margin: 25px 0 30px 0; clear: both; position: relative; } #toc-toggle-button { display: block; width: 100%; text-align: center; cursor: pointer; color: var(--button-text-color, #ffffff); border: 1px solid var(--button-border, #0056b3); border-radius: var(--button-radius, 6px); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.3s ease, border-radius 0.2s ease; background: linear-gradient(140deg, var(--button-bg-start, #007bff), var(--button-bg-end, #0056b3)); font-size: var(--button-font-size, 1.05em); padding: var(--button-padding-v, 10px) var(--button-padding-h, 16px); font-weight: var(--button-font-weight, 500); letter-spacing: var(--button-letter-spacing, 0.5px); position: relative; overflow: hidden; } #toc-toggle-button.toc-closed-effect { animation: buttonPulseGlow 2.2s infinite ease-in-out; } /* धीमा एनीमेशन */ #toc-toggle-button:hover { background: linear-gradient(140deg, var(--button-bg-end, #0056b3), var(--button-bg-start, #007bff)); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); transform: translateY(-1px); } #toc-toggle-button::before { content: ''; position: absolute; top: 0; left: -130%; width: 70%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); transform: skewX(-25deg); transition: left 0.9s ease-in-out; } /* सूक्ष्म शीन */ #toc-toggle-button:hover::before { left: 140%; } #toc-container.toc-is-shown #toc-toggle-button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #toc { max-height: 0; opacity: 0; overflow: hidden; margin: 0; padding: 0 var(--toc-padding-horizontal, 20px); border: 1px solid var(--toc-border, #ced4da); /* पतला बॉर्डर */ border-top: none; border-radius: 0 0 var(--toc-box-radius, 6px) var(--toc-box-radius, 6px); background: linear-gradient(135deg, var(--toc-bg-start, #ffffff), var(--toc-bg-end, #f8f9fa)); box-shadow: 0 4px 10px var(--toc-shadow, rgba(0, 0, 0, 0.05)); transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease-in-out 0.1s, padding-top 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding-bottom 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.1s ease-in-out 0.5s; border-style: var(--toc-border-style, solid); } #toc.toc-visible { max-height: 2000px; opacity: 1; padding-top: var(--toc-padding-top, 18px); padding-bottom: var(--toc-padding-bottom, 18px); border-width: 0 1px 1px 1px; /* पतला बॉर्डर */ } #toc h2 { font-size: 1.2em; margin: 0 0 18px 0; padding-bottom: 12px; border-bottom-width: 1px; /* पतला बॉर्डर */ border-bottom-style: var(--toc-title-border-style, solid); color: var(--toc-title-color, #007bff); font-weight: var(--toc-title-weight, 600); text-align: center; text-shadow: none; column-span: all; -webkit-column-span: all; animation: tocFadeIn 0.6s ease-out 0.2s backwards; text-transform: var(--toc-title-transform, none); letter-spacing: var(--toc-title-spacing, 0px); border-bottom-color: var(--toc-title-border, #dee2e6); } #toc ul { list-style-type: none; padding-left: 0; margin: 0; column-count: var(--toc-column-count, 1); /* डिफ़ॉल्ट 1 कॉलम */ column-gap: var(--toc-column-gap, 25px); column-rule: 1px dotted var(--toc-column-rule, #e0e0e0); border-radius: 4px; padding: 10px 5px; } /* पैडिंग समायोजित */ #toc li { margin-bottom: 0; line-height: var(--toc-list-line-height, 1.5); break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; position: relative; } #toc li + li { margin-top: var(--toc-item-margin-bottom, 6px); } #toc li.toc-level-3 { margin-left: var(--toc-h3-indent, 12px); padding-left: var(--toc-h3-padding, 15px); border-left: 2px solid var(--toc-h3-indicator, #6c757d); background-color: var(--toc-h3-bg, rgba(108, 117, 125, 0.03)); border-radius: 4px; transition: background-color 0.3s ease, border-color 0.3s ease; font-size: var(--toc-h3-font-size, 0.95em); } #toc li.toc-level-3:hover { background-color: var(--toc-h3-hover-bg, rgba(108, 117, 125, 0.08)); border-left-color: var(--toc-h3-hover-indicator, #007bff); } #toc li.toc-level-4 { margin-left: var(--toc-h4-indent, 24px); padding-left: var(--toc-h4-padding, 12px); border-left: 2px solid var(--toc-h4-indicator, #ced4da); font-style: italic; font-size: var(--toc-h4-font-size, 0.9em); } #toc a { text-decoration: none; color: var(--toc-link-color, #343a40); transition: color 0.25s ease, transform 0.2s ease, background-color 0.25s ease, box-shadow 0.25s ease; display: flex; align-items: center; padding: 8px 12px; /* पैडिंग समायोजित */ border-radius: 4px; font-weight: var(--toc-link-weight, 400); text-transform: var(--toc-link-transform, none); position: relative; overflow: hidden; } #toc a:hover { color: var(--toc-list-hover-text, #007bff) !important; background-color: var(--toc-list-hover-bg, rgba(0, 123, 255, 0.08)); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); transform: translateX(3px); } #toc a i[class*="fa-"] { margin-right: 10px; font-size: var(--toc-icon-size, 1em); width: 1.2em; text-align: center; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55), color 0.25s ease; flex-shrink: 0; color: var(--ui-secondary); } /* आइकन रंग */ #toc-toggle-button i { font-size: var(--button-icon-size, 0.95em); } #toc a:hover i[class*="fa-"] { transform: rotate(5deg) scale(1.1); color: var(--ui-primary); } /* होवर आइकन रंग */ /* विशिष्ट स्तर के आइकन रंगों को हटाया जा सकता है या वेरिएबल बनाया जा सकता है */ .highlight-target { background-color: var(--highlight-bg, #fff3cd) !important; box-shadow: 0 0 0 2px var(--highlight-border, #ffc107) !important; border-radius: 4px !important; padding: 4px 8px !important; margin: -4px -8px !important; animation: highlightPulse 1.8s infinite ease-in-out !important; color: var(--highlight-text-color, #856404) !important; display: inline-block !important; width: auto !important; } .highlight-content { background-color: var(--content-highlight-bg, #fff9e0) !important; transition: background-color 0.4s ease-in-out !important; border-radius: 5px !important; padding: 12px 18px !important; margin-top: 10px !important; margin-bottom: 10px !important; box-shadow: 0 2px 6px rgba(218, 165, 32, 0.08) !important; display: block !important; border: 1px solid var(--content-highlight-border, #ffeeba); } @media(max-width: 768px) { #toc ul { column-count: 1; column-rule: none; } #toc { padding: 15px; } #toc h2 { font-size: 1.1em; } #toc li.toc-level-3 { margin-left: 8px; padding-left: 12px; } #toc a { padding: 7px 10px; } } /* ===== TOC & Highlight Styles v3 - END ===== */

Generated JavaScript Code

document.addEventListener("DOMContentLoaded", function () { // --- Configuration (Generated by Tool) --- const config = { postContainerSelector: '.post-body', headingsSelector: 'h2, h3', minHeadingsForToc: 2, tocTitleText: 'Table of Contents', showButtonBaseText: 'Table of Contents', hideButtonBaseText: 'Hide Contents', showIconClass: 'fa-solid fa-list', hideIconClass: 'fa-solid fa-chevron-up', highlightDuration: 2500, useIcons: true, h2IconClass: 'fa-solid fa-heading', h3IconClass: 'fa-regular fa-circle-dot', h4IconClass: 'fa-solid fa-caret-right', }; // --- End Configuration --- let currentHighlightTimeout = null; let tocContainer = null; let toc = null; let toggleButton = null; // सुरक्षित और अद्वितीय आईडी बनाएं function createSafeId(heading, index) { let textForId = (heading.textContent || '').trim().toLowerCase(); // सुरक्षित आईडी के लिए गैर-अक्षर अंक हटाएं, स्पेस को हाइफ़न से बदलें let baseId = textForId.replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/--+/g, '-').replace(/^-+|-+$/g, ''); // यदि baseId खाली है तो इंडेक्स का उपयोग करें let id = "toc-h-" + (baseId || index); // आईडी की विशिष्टता सुनिश्चित करें let counter = 1; const originalId = id; while (document.getElementById(id)) { id = originalId + '-' + counter; counter++; } return id; } // मौजूदा हाइलाइट हटाएं function clearHighlights(specificHeading = null, specificContent = []) { if (currentHighlightTimeout) { clearTimeout(currentHighlightTimeout); currentHighlightTimeout = null; } // विशिष्ट या सभी हाइलाइट हटाएं if (specificHeading) { specificHeading.classList.remove('highlight-target'); } if (specificContent.length > 0) { specificContent.forEach(el => el.classList.remove('highlight-content')); } else if (!specificHeading && !specificContent.length) { // यदि कोई विशिष्ट तत्व नहीं दिया गया है document.querySelectorAll('.highlight-target').forEach(el => el.classList.remove('highlight-target')); document.querySelectorAll('.highlight-content').forEach(el => el.classList.remove('highlight-content')); } } // लक्ष्य हेडिंग और उसके बाद की सामग्री पर हाइलाइट लागू करें function applyHighlight(targetHeading) { clearHighlights(); // पहले मौजूदा हाइलाइट हटाएं targetHeading.classList.add('highlight-target'); // हेडिंग पर क्लास जोड़ें const highlightedContent = []; let sibling = targetHeading.nextElementSibling; // अगले हेडिंग या TOC कंटेनर तक सभी एलिमेंट नोड्स को हाइलाइट करें while (sibling && !sibling.matches(config.headingsSelector) && !sibling.matches('#toc-container')) { if (sibling.nodeType === 1 && sibling.tagName !== 'SCRIPT' && sibling.tagName !== 'STYLE') { sibling.classList.add('highlight-content'); highlightedContent.push(sibling); } sibling = sibling.nextElementSibling; } // निर्धारित अवधि के बाद हाइलाइट हटाएं currentHighlightTimeout = setTimeout(() => { clearHighlights(targetHeading, highlightedContent); }, config.highlightDuration); } // तत्व तक स्मूथ स्क्रॉल करें function smoothScrollToTarget(element) { if (!element) return; element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } // बटन के ग्लो प्रभाव को नियंत्रित करें function controlButtonGlow(buttonElement, shouldGlow) { if (!buttonElement) return; if (shouldGlow) { // थोड़ा विलंब दें ताकि CSS ट्रांज़िशन पूरा हो सके setTimeout(() => { // केवल तभी ग्लो जोड़ें जब TOC वास्तव में बंद हो if (!toc?.classList.contains('toc-visible')) { buttonElement.classList.add('toc-closed-effect'); } }, 700); } else { buttonElement.classList.remove('toc-closed-effect'); } } // टॉगल बटन का टेक्स्ट और आइकन अपडेट करें function updateButtonContent(isExpanded) { if (!toggleButton) return; const text = isExpanded ? config.hideButtonBaseText : config.showButtonBaseText; const iconClass = isExpanded ? config.hideIconClass : config.showIconClass; // आइकन और टेक्स्ट के साथ बटन HTML सेट करें toggleButton.innerHTML = `<span style="display: inline-flex; align-items: center; gap: 8px;"><i class="${iconClass}" aria-hidden="true"></i> ${text}</span>`; toggleButton.setAttribute('aria-expanded', String(isExpanded)); } // TOC को इनिशियलाइज़ करें function initializeToc() { const postContent = document.querySelector(config.postContainerSelector); if (!postContent) { console.warn("TOC Error: Container '" + config.postContainerSelector + "' not found."); return; // यदि कंटेनर नहीं मिलता है तो बाहर निकलें } const headings = Array.from(postContent.querySelectorAll(config.headingsSelector)); const validHeadings = []; let firstValidHeading = null; // मान्य हेडिंग्स फ़िल्टर करें (TOC के अंदर नहीं, और टेक्स्ट हो) headings.forEach(heading => { if (!heading.closest('#toc-container') && heading.textContent?.trim()) { validHeadings.push(heading); if (!firstValidHeading) firstValidHeading = heading; } }); // यदि पर्याप्त हेडिंग्स नहीं हैं, तो TOC न बनाएं if (validHeadings.length < config.minHeadingsForToc) { console.log(`TOC Info: Not enough headings (${validHeadings.length}). Minimum required: ${config.minHeadingsForToc}. TOC not generated.`); document.getElementById('toc-container')?.remove(); // मौजूदा हटाएं यदि आवश्यक हो return; } document.getElementById('toc-container')?.remove(); // हमेशा मौजूदा हटाएं // TOC तत्व बनाएं tocContainer = document.createElement("div"); tocContainer.id = "toc-container"; toggleButton = document.createElement("button"); toggleButton.id = "toc-toggle-button"; toggleButton.type = "button"; updateButtonContent(false); // प्रारंभिक बटन स्थिति toggleButton.setAttribute("aria-controls", "toc"); controlButtonGlow(toggleButton, true); // ग्लो प्रभाव सक्षम करें toc = document.createElement("div"); toc.id = "toc"; const tocTitle = document.createElement("h2"); tocTitle.textContent = config.tocTitleText; toc.appendChild(tocTitle); const tocList = document.createElement("ul"); // प्रत्येक मान्य हेडिंग के लिए सूची आइटम बनाएं validHeadings.forEach((heading, index) => { let id = heading.getAttribute("id"); if (!id || document.querySelectorAll('#' + CSS.escape(id)).length > 1) { id = createSafeId(heading, index); // सुरक्षित आईडी बनाएं heading.setAttribute("id", id); } const listItem = document.createElement("li"); const headingLevel = heading.tagName.toLowerCase(); // h2, h3 आदि listItem.classList.add('toc-level-' + headingLevel.replace('h','')); const link = document.createElement("a"); link.setAttribute("href", "#" + id); // आइकन जोड़ें (यदि सक्षम हो) if (config.useIcons) { let iconClass = ""; if (headingLevel === 'h2' && config.h2IconClass) iconClass = config.h2IconClass; else if (headingLevel === 'h3' && config.h3IconClass) iconClass = config.h3IconClass; else if (headingLevel === 'h4' && config.h4IconClass) iconClass = config.h4IconClass; if (iconClass) { const iconElement = document.createElement("i"); iconClass.split(' ').forEach(cls => { if (cls) iconElement.classList.add(cls); }); iconElement.setAttribute("aria-hidden", "true"); link.appendChild(iconElement); // लिंक के अंदर आइकन } } // टेक्स्ट जोड़ें link.appendChild(document.createTextNode((heading.textContent || '').trim())); listItem.appendChild(link); tocList.appendChild(listItem); }); toc.appendChild(tocList); tocContainer.appendChild(toggleButton); tocContainer.appendChild(toc); // DOM में TOC डालें if (firstValidHeading?.parentNode) { firstValidHeading.parentNode.insertBefore(tocContainer, firstValidHeading); console.log("TOC Info: Inserted before the first heading."); } else if (postContent.firstChild) { postContent.insertBefore(tocContainer, postContent.firstChild); console.log("TOC Info: Inserted at the beginning of the container."); } else { postContent.appendChild(tocContainer); console.log("TOC Info: Appended to the container."); } setupEventListeners(); // इवेंट श्रोता सेट करें } // इवेंट श्रोताओं को सेट करें function setupEventListeners() { if (!tocContainer || !toc || !toggleButton) return; // टॉगल बटन क्लिक toggleButton.addEventListener('click', (e) => { e.preventDefault(); // अनावश्यक सबमिट रोकें const isExpanded = toc.classList.toggle('toc-visible'); updateButtonContent(isExpanded); tocContainer.classList.toggle('toc-is-shown', isExpanded); controlButtonGlow(toggleButton, !isExpanded); }); // TOC लिंक क्लिक (इवेंट डेलिगेशन) toc.addEventListener('click', (event) => { const linkElement = event.target.closest('a'); if (linkElement && linkElement.getAttribute('href')?.startsWith('#')) { event.preventDefault(); const targetId = linkElement.getAttribute('href').substring(1); const targetHeading = document.getElementById(targetId); if (targetHeading) { // यदि TOC बंद है तो खोलें if (!toc.classList.contains('toc-visible')) { toggleButton.click(); // खोलने के लिए क्लिक करें } // स्क्रॉल करें और हाइलाइट करें smoothScrollToTarget(targetHeading); setTimeout(() => { applyHighlight(targetHeading); }, 350); // स्क्रॉल के बाद विलंब } else { console.warn(`TOC Warning: Target heading with ID '${targetId}' not found.`); } } }); } // --- आरंभ करें --- try { initializeToc(); // पेज लोड पर हैश के आधार पर स्क्रॉल/हाइलाइट करें (वैकल्पिक) if (window.location.hash && window.location.hash.startsWith('#toc-h-')) { const initialTargetId = window.location.hash.substring(1); // DOM रेडी होने तक थोड़ा प्रतीक्षा करें setTimeout(() => { const initialTarget = document.getElementById(initialTargetId); if (initialTarget && initialTarget.matches(config.headingsSelector)) { // यदि TOC बंद है, तो इसे खोलें if (!toc?.classList.contains('toc-visible') && toggleButton) { toggleButton.click(); // खोलने और स्क्रॉल करने के लिए अधिक विलंब setTimeout(() => { smoothScrollToTarget(initialTarget); setTimeout(() => { applyHighlight(initialTarget); }, 350); }, 300); // खोलने के लिए विलंब } else if (toc?.classList.contains('toc-visible')) { // यदि पहले से खुला है, तो बस स्क्रॉल/हाइलाइट करें smoothScrollToTarget(initialTarget); setTimeout(() => { applyHighlight(initialTarget); }, 350); } } }, 100); // DOM रेडी होने के लिए प्रारंभिक विलंब } } catch (error) { console.error("TOC Script Initialization Error:", error); } });

Live Preview

Chapter 1: The Call of the Wild

In a small village nestled beside a dense, mysterious jungle lived a curious boy named Aarav. The jungle had always fascinated him, its untold stories, hidden paths, and the strange sounds that echoed at night captivated his imagination. The village elders warned against venturing into the woods, recounting ancient legends and tales of lost travelers. But Aarav's heart yearned for adventure.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Chapter 2: First Steps and the Mysterious Map

One golden morning, Aarav mustered his courage and took his first steps into the jungle. The air inside was cool and filled with the scent of damp earth and blooming flowers. Tall trees towered towards the sky, their leaves forming a dense canopy, while colorful birds chirped melodiously.

Sub-chapter 2.1: The Old Banyan

Wandering deeper, he reached a clearing dominated by a gigantic, ancient banyan tree with roots cascading down like thick ropes. A small stone platform sat peacefully beneath it.

Sub-chapter 2.2: The Hidden Clue

Aarav sat on the platform to rest. His eyes caught a loose stone. Curiosity piqued, he carefully dislodged it. Beneath it lay a small, leather-bound roll - an old map!

Sub-chapter 2.3: The Map's Secret

The map was brittle with age, marked with strange symbols. It pointed towards a specific location deep within the heart of the jungle. Aarav's heart pounded with excitement and anticipation.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Chapter 3: Journey's Challenges

Following the map, Aarav ventured further. The path wasn't easy. Dense undergrowth blocked his way, and slippery moss-covered rocks demanded careful footing. He had to be resourceful and determined.

Sub-chapter 3.1: Crossing the River

He arrived at the bank of a swift-flowing river. The map indicated he needed to cross. Spotting a fallen log spanning the water, he carefully balanced his way across the natural bridge.

Sub-chapter 3.2: The Labyrinth Cave

Beyond the river, the map led him to the dark entrance of a cave system. Lighting a makeshift torch, he navigated the winding tunnels, deciphering symbols on the walls that matched his map to find the correct path.

Sub-chapter 3.3: Nightfall Camp

As daylight faded, he emerged from the cave onto a small ledge. He gathered dry wood, built a small fire for warmth and safety, and settled down for the night under the starry jungle sky.

Chapter 4: The Destination and the Jungle's Heart

After what felt like hours of climbing the next morning, Aarav reached the summit indicated on the map. Standing before him was an ancient stone temple, partially reclaimed by nature, vines snaking across its weathered facade.

Sub-chapter 4.1: The Temple Gate

The temple entrance was sealed by a heavy stone door with a complex locking mechanism. Using the symbols from the map, Aarav carefully manipulated the stone dials until a soft click echoed, and the door creaked open.

Sub-chapter 4.2: The Glowing Crystal

Inside, the air was still and ancient. In the center of the main chamber, upon a stone altar, rested a large, luminous crystal pulsing with a soft, ethereal blue light. This was the heart of the jungle's magic.

Sub-chapter 4.3: The Return

Aarav gazed at the crystal, understanding its power and importance to the jungle's balance. He decided to leave it undisturbed, its secret safe. With newfound respect and understanding for the wild, he began his journey back to the village, forever changed by his adventure.

``` इस संस्करण में एक साफ, अधिक पेशेवर डिफ़ॉल्ट रूप है, बेहतर स्पेसिंग, अधिक सूक्ष्म बॉर्डर और शैडो, और बेहतर नियंत्रण स्टाइलिंग है। उम्मीद है यह आपके "जानदार डेकोरेशन" के अनुरोध को पूरा करता है!