HTML मिनिफायर

तेज़ HTML मिनिफ़ायर के साथ पेज लोड गति को अनुकूलित करें

जब आधुनिक वेब ब्राउज़र किसी वेब पेज का अनुरोध करते हैं, तो वेब सर्वर संरचना, लेआउट और स्टाइलिंग निर्देशों वाले दस्तावेज़ों के साथ प्रतिक्रिया करता है। जबकि डेवलपर्स पठनीय आर्किटेक्चर बनाने के लिए विशाल संरचनात्मक इंडेंट, व्यापक लाइन ब्रेक, कोड टिप्पणियों और फाइलों के भीतर विस्तृत दस्तावेज़ीकरण पर भरोसा करते हैं, कंपाइलर और क्लाइंट ब्राउज़र को इन मानव-केंद्रित विवरणों की आवश्यकता नहीं होती है। वास्तव में, प्रत्येक रिक्त पंक्ति, स्थान, टेबुलेटर और HTML/CSS टिप्पणी को ओवरहेड के एक अतिरिक्त बाइट के रूप में गिना जाता है। जटिल वेब प्लेटफ़ॉर्म के लिए, ये छोटे फ़ॉर्मेटिंग तत्व फ़ाइल आकार को 10% से 30% तक जमा और बढ़ा सकते हैं, जो लोड समय को धीमा कर देता है और कोर वेब वाइटल्स को ख़राब कर देता है।

यह वह जगह है जहां एक html मिनीफ़ायर आता है। हमारा टूल आपके मार्कअप को पार्स करता है और कोड के रेंडरिंग व्यवहार में बदलाव किए बिना गैर-आवश्यक वर्णों को हटा देता है। अपने HTML दस्तावेज़ों की संरचना को संपीड़ित करके, आप टाइम-टू-फर्स्ट-बाइट (टीटीएफबी) में काफी सुधार कर सकते हैं, प्रारंभिक रेंडरिंग चरणों को तेज कर सकते हैं और समग्र लोडिंग गति में सुधार कर सकते हैं।

आंतरिक पाइपलाइन को समझना: HTML फ़ाइलों को ऑनलाइन सुरक्षित रूप से कैसे संपीड़ित करें

HTML लघुकरण के साथ एक बड़ी चुनौती यह सुनिश्चित करना है कि प्रक्रिया उन तत्वों को नहीं तोड़ती है जो रिक्ति पर निर्भर हैं। उदाहरण के लिए, पैराग्राफ, कोड लिस्टिंग, इनपुट क्षेत्र और पूर्व-स्वरूपित ब्लॉकों को ठीक से प्रस्तुत करने के लिए सटीक व्हाइट-स्पेस लेआउट की आवश्यकता होती है। यदि कोई मिनीफ़ायर

, , या </code> जैसे टैग के अंदर रिक्त स्थान को आँख बंद करके संक्षिप्त कर देता है, तो यह उपयोगकर्ता-सामना वाले टेक्स्ट के स्वरूपण को नष्ट कर देगा।</p><p>इस समस्या को दूर करने के लिए, हमारा उपकरण एक सुरक्षित प्रसंस्करण पाइपलाइन लागू करता है:</p><p>यह बहु-चरणीय दृष्टिकोण गारंटी देता है कि आपकी दृश्य सामग्री, इंटरैक्टिव तत्व और फॉर्म उच्चतम संभव संपीड़न अनुपात प्राप्त करते हुए पूरी तरह से कार्य करते हैं।</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">उन्नत अनुकूलन: स्क्रिप्ट और स्टाइलशीट के लिए दानेदार नियंत्रण</h3><p>अधिकांश आधुनिक वेब टेम्प्लेट में कच्ची HTML संरचना, एम्बेडेड शैलियाँ और इनलाइन स्क्रिप्ट टैग का मिश्रण होता है। जब आप <strong>एचटीएमएल को ऑनलाइन छोटा करने</strong> के लिए इस टूल का उपयोग करते हैं, तो आप प्रत्येक संपीड़न चरण को व्यक्तिगत रूप से नियंत्रित कर सकते हैं:</p><ul class="list-disc list-inside space-y-2"> <li><strong>व्हाट्सएप को संक्षिप्त करें</strong>: संपूर्ण लेआउट दस्तावेज़ में अनावश्यक रिक्ति, न्यूलाइन और इंडेंटेशन को संक्षिप्त करता है।</li><li><strong>टिप्पणियाँ हटाएँ</strong>: सभी HTML टिप्पणियाँ हटा देता है। डेवलपर्स अक्सर लेआउट नेस्टिंग के बारे में नोट्स छोड़ते हैं, जो उत्पादन परिसंपत्तियों पर अनावश्यक भार जोड़ते हैं। इन टिप्पणियों को हटाने से क्लाइंट-साइड कोड साफ़ और पेशेवर बना रहता है।</li><li><strong>इनलाइन जेएस को छोटा करें</strong>: जेएस पेलोड आकार को कम करने के लिए एक सुरक्षित टिप्पणी-स्ट्रिपिंग एल्गोरिदम का उपयोग करके, <कोड><स्क्रिप्ट></कोड> टैग से इनलाइन डेवलपर नोट्स और लाइन ब्रेक को हटा देता है।</li><li><strong>इनलाइन सीएसएस को छोटा करें</strong>: ब्रैकेट बंद करने से पहले सीएसएस टिप्पणियों, ब्रेसिज़ के आसपास अतिरिक्त रिक्त स्थान और अनावश्यक अर्धविराम को हटाकर इनलाइन शैलियों को संपीड़ित करता है।</li> </ul><p>इन चार टॉगल का उपयोग करके, आप अपने कार्यक्षेत्र की आवश्यकताओं के अनुरूप लघुकरण प्रक्रिया को अनुकूलित कर सकते हैं, चाहे आप उत्पादन कोड, टेम्पलेट या कच्चे स्निपेट तैयार कर रहे हों।</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">संपीड़न ट्रेड-ऑफ़ और एज मामलों का मूल्यांकन</h3><p>जबकि HTML को छोटा करने से स्पष्ट प्रदर्शन पुरस्कार मिलते हैं, यह समझना महत्वपूर्ण है कि जटिल परियोजनाओं के लिए टूल को कब और कैसे कॉन्फ़िगर किया जाए। उदाहरण के लिए, सर्वर-साइड रेंडरिंग (एसएसआर) फ्रेमवर्क या पीएचपी, जेएसपी, या जिंजा जैसे टेम्पलेट इंजन का उपयोग करते समय, टेम्पलेट में विशेष सिंटैक्स मार्कर होते हैं (उदाहरण के लिए, ब्रैकेट सिंटैक्स वाले टैग)। यदि सर्वर इंजन द्वारा रिक्ति नियमों को सख्ती से लागू किया जाता है, तो इन सिंटैक्स घटकों वाले कच्चे टेम्पलेट्स को छोटा करने से कभी-कभी पार्सिंग समस्याएं हो सकती हैं या दृश्य बग पैदा हो सकते हैं। ऐसे परिदृश्यों में, स्रोत टेम्पलेट कोड के बजाय अंतिम जेनरेट किए गए स्थिर HTML आउटपुट पर मिनीफ़ायर चलाने की अत्यधिक अनुशंसा की जाती है। इसके अतिरिक्त, HTML फ़ाइलों के अंदर इनलाइन सीएसएस शैलियों का उपयोग करते समय, ब्राउज़र लेआउट इंजनों को कभी-कभी कस्टम हैक को पार्स करने के लिए विशिष्ट रिक्ति की आवश्यकता हो सकती है। यदि आप संपीड़न के बाद स्टाइल संबंधी विसंगतियाँ देखते हैं, तो यह सत्यापित करने के लिए इनलाइन सीएसएस मिनिमिफिकेशन विकल्प को टॉगल करें कि स्टाइलशीट फ़ॉर्मेटिंग समस्या का स्रोत थी या नहीं। व्यक्तिगत टॉगल विकल्पों के साथ प्रयोग करके, आप आक्रामक फ़ाइल आकार में कमी और कोडबेस स्थिरता के बीच सही संतुलन प्राप्त कर सकते हैं।</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">क्लाइंट-साइड निष्पादन: 100% सुरक्षित और निजी</h3><p>ऑनलाइन विकास उपयोगिताओं का उपयोग करते समय डेटा गोपनीयता एक प्रमुख चिंता का विषय है। कई वेब टूल प्रसंस्करण के लिए आपके कोड पेलोड को दूरस्थ सर्वर पर अपलोड करते हैं, जो संवेदनशील एपीआई एंडपॉइंट, कॉन्फ़िगरेशन कुंजी, डेटाबेस स्कीमा, या मालिकाना टेम्पलेट को तीसरे पक्ष के सर्वर पर उजागर करने का जोखिम उठाते हैं।</p><p>हम सभी ऑपरेशन क्लाइंट-साइड निष्पादित करके सुरक्षा को प्राथमिकता देते हैं। हमारा टूल पूरी तरह से आपके स्थानीय ब्राउज़र सैंडबॉक्स में चलता है। HTML मिनिफिकेशन एल्गोरिदम, फ़ॉर्मेटिंग लॉजिक और सिंटैक्स हाइलाइटिंग DOM के भीतर स्थानीय जावास्क्रिप्ट लूप के रूप में चलते हैं। कोई भी डेटा बाहरी सर्वर पर प्रेषित नहीं किया जाता है, जिससे यह सुनिश्चित होता है कि आपके प्री-प्रोडक्शन टेम्पलेट, आंतरिक फॉर्म और कोड सेगमेंट पूरी तरह से निजी रहें।</p> </div> <!-- FAQ Sidebar --> <div class="space-y-6"> <h2 class="text-lg font-bold tracking-tight text-[#171717] dark:text-white font-sans"> अक्सर पूछे जाने वाले प्रश्न </h2> <div class="space-y-4"> <div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">मुझे HTML कोड को छोटा क्यों करना चाहिए?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">मिनिमाइज़ेशन अनावश्यक वर्णों जैसे एकाधिक रिक्त स्थान, न्यूलाइन वर्ण, टैब इंडेंट और कोड टिप्पणियों को हटाकर HTML फ़ाइल आकार को कम करता है। आपके वेब सर्वर या सामग्री वितरण नेटवर्क (सीडीएन) से ब्राउज़र पर भेजे गए समग्र पेलोड को कम करके, पेज लोड गति में सुधार किया जाता है। इसका सीधा मतलब है फर्स्ट बाइट (टीटीएफबी) के लिए कम समय, सबसे बड़े कंटेंटफुल पेंट (एलसीपी) जैसे तेज पेंट मील के पत्थर, मोबाइल उपयोगकर्ताओं के लिए कम बैंडविड्थ खपत और खोज इंजन अनुकूलन (एसईओ) एल्गोरिदम के लिए समग्र सकारात्मक संकेत।</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">क्या यह HTML मिनिफ़ायर मेरी डेटा गोपनीयता से समझौता करता है?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">नहीं, आपका सोर्स कोड पूरी तरह सुरक्षित है। यह HTML लघुकरण उपयोगिता कोड को पूरी तरह से आपके वेब ब्राउज़र में संसाधित करती है। कोई भी HTML संरचना, इनलाइन स्क्रिप्ट, शैलियाँ या कॉन्फ़िगरेशन डेटा दूरस्थ सर्वर या बाहरी एंडपॉइंट पर अपलोड नहीं किया जाता है। क्योंकि सभी प्रोसेसिंग जावास्क्रिप्ट का उपयोग करके क्लाइंट-साइड चलती है, आप डेटा लीक या ट्रैकिंग के बारे में चिंता किए बिना इसे कॉर्पोरेट वेब पोर्टल, प्री-प्रोडक्शन टेम्प्लेट या आंतरिक एपीआई वाले पेजों पर सुरक्षित रूप से उपयोग कर सकते हैं।</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">क्या HTML लघुकरण इनलाइन जावास्क्रिप्ट या सीएसएस शैलियों को तोड़ सकता है?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">आम तौर पर, यदि आपका सिंटैक्स वैध है तो मानक लघुकरण इनलाइन कोड को नहीं तोड़ता है। हमारा HTML मिनिफायर इनलाइन जावास्क्रिप्ट और इनलाइन सीएसएस के लिए अलग-अलग टॉगल कॉन्फ़िगरेशन की सुविधा देता है। सक्षम होने पर, यह सिंटेक्टिक अखंडता को संरक्षित करते हुए स्क्रिप्ट और स्टाइल टैग के भीतर हल्के व्हाइटस्पेस कोलैप्सिंग और टिप्पणी हटाने को लागू करता है। यदि आपका प्रोजेक्ट जटिल टेम्पलेट सिंटैक्स या सख्त स्क्रिप्ट स्क्रिप्ट का उपयोग करता है, तो आप उन अनुभागों को ठीक वैसे ही संरक्षित करने के लिए इनलाइन जेएस या सीएसएस मिनिमेशन को निष्क्रिय कर सकते हैं जैसे वे लिखे गए थे।</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">उपकरण पूर्व-स्वरूपित पाठ और कोड ब्लॉक की सुरक्षा कैसे करता है?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed"><pre>, <code>, और <textarea> जैसे तत्वों के अंदर कोड ब्लॉक अपनी सामग्री को सही ढंग से प्रारूपित करने के लिए शाब्दिक व्हाइटस्पेस वर्णों पर निर्भर करते हैं। इन टैगों के अंदर रिक्त स्थान ढहने से कोड प्रस्तुतिकरण टूट जाएगा। इसे रोकने के लिए, हमारा प्रसंस्करण इंजन इन ब्लॉकों को निकालता है और संपीड़न से पहले उन्हें अद्वितीय अस्थायी प्लेसहोल्डर्स से बदल देता है। एक बार जब बाहरी HTML लेआउट छोटा हो जाता है, तो प्लेसहोल्डर्स को उनके स्वरूपण को बनाए रखते हुए, मूल, असंशोधित कोड ब्लॉक से बदल दिया जाता है।</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">HTML मिनिमिफिकेशन और Gzip कम्प्रेशन के बीच क्या अंतर है?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">HTML मिनिफिकेशन एक बिल्ड-टाइम या प्रोसेस-टाइम ऑप्टिमाइज़ेशन है जो सीधे स्रोत कोड से अनावश्यक टेक्स्ट वर्ण (जैसे डेवलपर टिप्पणियाँ, टैब ब्रेक और अतिरिक्त स्थान) को हटा देता है। जीज़िप (या ब्रॉटली) संपीड़न एक सर्वर-साइड रनटाइम संपीड़न एल्गोरिदम है जो HTTP पर प्रसारित करने से पहले शब्दकोश-आधारित एल्गोरिदम का उपयोग करके टेक्स्ट पेलोड को संपीड़ित करता है। ये दो विधियाँ पूरक हैं; आपके HTML को छोटा करने से बेकार टोकन हट जाते हैं, और फिर Gzip परिणामस्वरूप सुव्यवस्थित कोड को संपीड़ित करता है, जिससे लोडिंग गति अधिकतम हो जाती है।</p> </div> </div> </div> </div> </div> </main> <script id="ui-translations" type="application/json">{"Input HTML":"HTML इनपुट करें","Sample":"नमूना","Clear":"स्पष्ट","Collapse Whitespace":"व्हाइटस्पेस को संक्षिप्त करें","Remove Comments":"टिप्पणियाँ हटाएँ","Minify Inline JS":"इनलाइन जेएस को छोटा करें","Minify Inline CSS":"इनलाइन सीएसएस को छोटा करें","0 chars":"0 वर्ण","Minify HTML":"HTML को छोटा करें","Minified Output":"न्यूनतम आउटपुट","Copy":"प्रतिलिपि","Download":"डाउनलोड करें","Output will appear here…":"आउटपुट यहां दिखाई देगा…","Copied!":"नकल की गई!","Paste your HTML code here…":"अपना HTML कोड यहां पेस्ट करें…","Copied to clipboard!":"क्लिपबोर्ड पर कॉपी किया गया!","Copy failed — try Ctrl+C":"प्रतिलिपि विफल - Ctrl+C आज़माएँ","Minified HTML file downloaded!":"लघु HTML फ़ाइल डाउनलोड की गई!","Failed to process":"संसाधित करने में विफल","{0} char{1}":"{0} वर्ण{1}","{0} chars":"{0} वर्ण","{0} chars · {1}{2}% size reduction":"{0} वर्ण · {1}{2}% आकार में कमी","<span class=\"text-red-500 font-semibold\">✗ Minification Error</span>\\n\\n<span class=\"text-red-400\">{0}</span>":"<span class='text-red-500 फ़ॉन्ट-सेमीबोल्ड'>✗ छोटा करने में त्रुटि</span>\\n\\n<span class='text-red-400'>{0}</span>"}</script> <footer class="w-full border-t border-[#ebebeb] bg-white dark:border-[#1f1f1f] dark:bg-[#000000] transition-colors duration-200"> <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16"> <div class="xl:grid xl:grid-cols-4 xl:gap-8"> <!-- Brand description --> <div class="space-y-4 xl:col-span-1"> <a href="/hi/" class="flex items-center"> <!-- Transparent logo — works on both light & dark --> <img src="/logo-transparent.png" alt="say.tools logo" class="h-[48px] md:h-[96px] w-auto"> </a> <p class="text-sm text-[#4d4d4d] dark:text-[#888] max-w-xs"> तेज़, मुफ़्त और सुरक्षित वेब उपयोगिता टूल के लिए आपका अंतिम गंतव्य। अधिकतम गोपनीयता के लिए पूरी तरह से क्लाइंट-साइड बनाया गया है। </p> <div class="flex items-center gap-2 pt-2"> <span class="w-2 h-2 rounded-full bg-green-400 block flex-shrink-0"></span> <span class="text-xs font-mono text-[#888]">सभी उपकरण क्लाइंट-साइड चलते हैं</span> </div> </div> <!-- Links columns --> <div class="mt-12 grid grid-cols-3 gap-8 xl:col-span-3 xl:mt-0"> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">उपकरण</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/hi/text/word-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">शब्द काउंटर</a></li> <li><a href="/hi/developer/qr-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">क्यूआर कोड जेनरेटर</a></li> <li><a href="/hi/developer/password-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">पासवर्ड जेनरेटर</a></li> <li><a href="/hi/developer/uuid-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">निःशुल्क ऑनलाइन थोक यूयूआईडी जेनरेटर</a></li> <li><a href="/hi/developer/epoch-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">यूनिक्स एपोच टाइमस्टैम्प कनवर्टर</a></li> <li><a href="/hi/developer/jwt-debugger" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">JSON वेब टोकन डिबगर</a></li> <li><a href="/hi/calculators/unit-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">इकाई परिवर्तक</a></li> <li><a href="/hi/design/color-picker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">रंग बीनने वाला और पैलेट जेनरेटर</a></li> <li><a href="/hi/calculators/tip-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">ऑनलाइन टिप कैलकुलेटर</a></li> <li><a href="/hi/calculators/scientific-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">वैज्ञानिक कैलकुलेटर</a></li> <li><a href="/hi/calculators/fraction-to-decimal" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">भिन्न से दशमलव कैलकुलेटर</a></li> <li><a href="/hi/calculators/decimal-to-fraction" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">दशमलव से भिन्न कैलकुलेटर</a></li> <li><a href="/hi/developer/json-validator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन JSON सत्यापनकर्ता और पार्सर</a></li> <li><a href="/hi/developer/css-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन सीएसएस कोड कंप्रेसर</a></li> <li><a href="/hi/developer/base64-to-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">इमेज डिकोडर के लिए निःशुल्क ऑनलाइन बेस64</a></li> <li><a href="/hi/productivity/merge-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">निःशुल्क ऑनलाइन पीडीएफ विलय उपयोगिता</a></li> <li><a href="/hi/productivity/word-to-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">नि</a></li> <li><a href="/hi/productivity/split-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन पीडीएफ स्प्लिटर और पेज एक्सट्रैक्टर</a></li> <li><a href="/hi/developer/whois-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">निःशुल्क क्लाइंट-साइड Whois लुकअप टूल</a></li> <li><a href="/hi/developer/dns-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">निःशुल्क लाइव डीएनएस रिकॉर्ड लुकअप उपयोगिता</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">अधिक उपकरण</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/hi/calculators/date-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">दिनांक कैलक्यूलेटर</a></li> <li><a href="/hi/calculators/bmi-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">बीएमआई कैलकुलेटर</a></li> <li><a href="/hi/developer/base64-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">बेस64 एनकोडर और डिकोडर</a></li> <li><a href="/hi/developer/sql-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">एसक्यूएल फ़ॉर्मेटर</a></li> <li><a href="/hi/developer/user-agent-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">उपयोगकर्ता एजेंट पार्सर</a></li> <li><a href="/hi/text/morse-code-translator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मोर्स कोड अनुवादक</a></li> <li><a href="/hi/design/screen-resolution" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">स्क्रीन और व्यूपोर्ट चेकर</a></li> <li><a href="/hi/text/text-utils" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">टेक्स्ट केस कन्वर्टर एवं उपयोगिताएँ</a></li> <li><a href="/hi/developer/json-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">JSON फ़ॉर्मेटर और सत्यापनकर्ता</a></li> <li><a href="/hi/developer/hash-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">हैश जेनरेटर</a></li> <li><a href="/hi/calculators/lcm-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">एलसीएम (न्यूनतम समापवर्त्य) कैलकुलेटर</a></li> <li><a href="/hi/calculators/gcd-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">जीसीडी कैलकुलेटर</a></li> <li><a href="/hi/calculators/prime-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">प्राइम नंबर चेकर</a></li> <li><a href="/hi/developer/url-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन यूआरएल पार्सर और डिबगर</a></li> <li><a href="/hi/developer/http-headers" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन HTTP अनुरोध हेडर व्यूअर</a></li> <li><a href="/hi/developer/qr-decoder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन क्यूआर कोड डिकोडर और स्कैनर</a></li> <li><a href="/hi/developer/cron-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">क्रॉन एक्सप्रेशन जेनरेटर</a></li> <li><a href="/hi/design/png-to-svg" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">एसवीजी वेक्टराइज़र के लिए मुफ़्त ऑनलाइन पीएनजी</a></li> <li><a href="/hi/calculators/metric-conversion" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">निःशुल्क ऑनलाइन मीट्रिक रूपांतरण उपकरण</a></li> <li><a href="/hi/text/markdown-to-html" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">HTML कन्वर्टर के लिए निःशुल्क ऑनलाइन मार्कडाउन</a></li> <li><a href="/hi/text/html-to-markdown" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन HTML से मार्कडाउन कन्वर्टर</a></li> <li><a href="/hi/developer/json-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन JSON मिनिफ़ायर</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">और भी अधिक</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/hi/productivity/timer" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">ऑनलाइन टाइमर और स्टॉपवॉच</a></li> <li><a href="/hi/productivity/stopwatch" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">ऑनलाइन स्टॉपवॉच</a></li> <li><a href="/hi/text/lorem-ipsum" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">लोरेम इप्सम जेनरेटर</a></li> <li><a href="/hi/calculators/percentage-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">प्रतिशत कैलक्यूलेटर</a></li> <li><a href="/hi/text/markdown-preview" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मार्कडाउन पूर्वावलोकनकर्ता</a></li> <li><a href="/hi/calculators/random-number" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">यादृच्छिक संख्या जेनरेटर</a></li> <li><a href="/hi/design/image-compressor" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">छवि कंप्रेसर</a></li> <li><a href="/hi/design/hex-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">हेक्स और आरजीबी कनवर्टर</a></li> <li><a href="/hi/design/aspect-ratio-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">पहलू अनुपात कैलकुलेटर</a></li> <li><a href="/hi/calculators/quadratic-solver" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">द्विघात समीकरण सॉल्वर</a></li> <li><a href="/hi/calculators/date-difference" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">तिथियों के बीच के दिन कैलकुलेटर</a></li> <li><a href="/hi/calculators/fibonacci-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">फाइबोनैचि अनुक्रम जेनरेटर</a></li> <li><a href="/hi/design/svg-to-png" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन एसवीजी से पीएनजी रैस्टराइज़र</a></li> <li><a href="/hi/design/image-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन स्थानीय छवि कनवर्टर</a></li> <li><a href="/hi/design/placeholder-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">निःशुल्क ऑनलाइन प्लेसहोल्डर छवि जेनरेटर</a></li> <li><a href="/hi/design/contrast-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन रंग कंट्रास्ट चेकर</a></li> <li><a href="/hi/design/hsl-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">नि</a></li> <li><a href="/hi/calculators/gratuity-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन ग्रेच्युटी और टिप कैलकुलेटर</a></li> <li><a href="/hi/text/character-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">मुफ़्त ऑनलाइन कैरेक्टर काउंटर</a></li> <li><a href="/hi/text/sentence-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">निःशुल्क ऑनलाइन वाक्य काउंटर</a></li> <li><a href="/hi/text/paragraph-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">निःशुल्क ऑनलाइन पैराग्राफ काउंटर</a></li> <li><a href="/hi/text/line-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">निःशुल्क ऑनलाइन लाइन काउंटर</a></li> </ul> <div class="mt-6 space-y-2"> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">कंपनी</h3> <ul role="list" class="space-y-2"> <li><a href="/hi/about" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">हमारे बारे में</a></li> <li><a href="/hi/contact" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">संपर्क</a></li> <li><a href="/hi/privacy" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">गोपनीयता नीति</a></li> <li><a href="/hi/terms" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">नियम और शर्तें</a></li> </ul> </div> </div> </div> </div> <!-- Bottom copyrights --> <div class="mt-12 border-t border-[#ebebeb] pt-8 dark:border-[#1f1f1f] flex flex-col sm:flex-row items-center justify-between gap-4"> <p class="text-xs text-[#888] dark:text-[#888] font-mono">
© 2026 say.tools. सर्वाधिकार सुरक्षित। उपकरण 100% क्लाइंट-साइड चलते हैं। </p> <div class="flex flex-col sm:flex-row items-center gap-4 text-xs font-mono text-[#888] dark:text-[#888] select-none"> <span class="flex items-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </span> <span class="hidden sm:inline w-px h-3 bg-[#ebebeb] dark:bg-[#1f1f1f]"></span> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </div> </div> </div> </footer>  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"मुझे HTML कोड को छोटा क्यों करना चाहिए?","acceptedAnswer":{"@type":"Answer","text":"मिनिमाइज़ेशन अनावश्यक वर्णों जैसे एकाधिक रिक्त स्थान, न्यूलाइन वर्ण, टैब इंडेंट और कोड टिप्पणियों को हटाकर HTML फ़ाइल आकार को कम करता है। आपके वेब सर्वर या सामग्री वितरण नेटवर्क (सीडीएन) से ब्राउज़र पर भेजे गए समग्र पेलोड को कम करके, पेज लोड गति में सुधार किया जाता है। इसका सीधा मतलब है फर्स्ट बाइट (टीटीएफबी) के लिए कम समय, सबसे बड़े कंटेंटफुल पेंट (एलसीपी) जैसे तेज पेंट मील के पत्थर, मोबाइल उपयोगकर्ताओं के लिए कम बैंडविड्थ खपत और खोज इंजन अनुकूलन (एसईओ) एल्गोरिदम के लिए समग्र सकारात्मक संकेत।"}},{"@type":"Question","name":"क्या यह HTML मिनिफ़ायर मेरी डेटा गोपनीयता से समझौता करता है?","acceptedAnswer":{"@type":"Answer","text":"नहीं, आपका सोर्स कोड पूरी तरह सुरक्षित है। यह HTML लघुकरण उपयोगिता कोड को पूरी तरह से आपके वेब ब्राउज़र में संसाधित करती है। कोई भी HTML संरचना, इनलाइन स्क्रिप्ट, शैलियाँ या कॉन्फ़िगरेशन डेटा दूरस्थ सर्वर या बाहरी एंडपॉइंट पर अपलोड नहीं किया जाता है। क्योंकि सभी प्रोसेसिंग जावास्क्रिप्ट का उपयोग करके क्लाइंट-साइड चलती है, आप डेटा लीक या ट्रैकिंग के बारे में चिंता किए बिना इसे कॉर्पोरेट वेब पोर्टल, प्री-प्रोडक्शन टेम्प्लेट या आंतरिक एपीआई वाले पेजों पर सुरक्षित रूप से उपयोग कर सकते हैं।"}},{"@type":"Question","name":"क्या HTML लघुकरण इनलाइन जावास्क्रिप्ट या सीएसएस शैलियों को तोड़ सकता है?","acceptedAnswer":{"@type":"Answer","text":"आम तौर पर, यदि आपका सिंटैक्स वैध है तो मानक लघुकरण इनलाइन कोड को नहीं तोड़ता है। हमारा HTML मिनिफायर इनलाइन जावास्क्रिप्ट और इनलाइन सीएसएस के लिए अलग-अलग टॉगल कॉन्फ़िगरेशन की सुविधा देता है। सक्षम होने पर, यह सिंटेक्टिक अखंडता को संरक्षित करते हुए स्क्रिप्ट और स्टाइल टैग के भीतर हल्के व्हाइटस्पेस कोलैप्सिंग और टिप्पणी हटाने को लागू करता है। यदि आपका प्रोजेक्ट जटिल टेम्पलेट सिंटैक्स या सख्त स्क्रिप्ट स्क्रिप्ट का उपयोग करता है, तो आप उन अनुभागों को ठीक वैसे ही संरक्षित करने के लिए इनलाइन जेएस या सीएसएस मिनिमेशन को निष्क्रिय कर सकते हैं जैसे वे लिखे गए थे।"}},{"@type":"Question","name":"उपकरण पूर्व-स्वरूपित पाठ और कोड ब्लॉक की सुरक्षा कैसे करता है?","acceptedAnswer":{"@type":"Answer","text":"<pre>, <code>, और <textarea> जैसे तत्वों के अंदर कोड ब्लॉक अपनी सामग्री को सही ढंग से प्रारूपित करने के लिए शाब्दिक व्हाइटस्पेस वर्णों पर निर्भर करते हैं। इन टैगों के अंदर रिक्त स्थान ढहने से कोड प्रस्तुतिकरण टूट जाएगा। इसे रोकने के लिए, हमारा प्रसंस्करण इंजन इन ब्लॉकों को निकालता है और संपीड़न से पहले उन्हें अद्वितीय अस्थायी प्लेसहोल्डर्स से बदल देता है। एक बार जब बाहरी HTML लेआउट छोटा हो जाता है, तो प्लेसहोल्डर्स को उनके स्वरूपण को बनाए रखते हुए, मूल, असंशोधित कोड ब्लॉक से बदल दिया जाता है।"}},{"@type":"Question","name":"HTML मिनिमिफिकेशन और Gzip कम्प्रेशन के बीच क्या अंतर है?","acceptedAnswer":{"@type":"Answer","text":"HTML मिनिफिकेशन एक बिल्ड-टाइम या प्रोसेस-टाइम ऑप्टिमाइज़ेशन है जो सीधे स्रोत कोड से अनावश्यक टेक्स्ट वर्ण (जैसे डेवलपर टिप्पणियाँ, टैब ब्रेक और अतिरिक्त स्थान) को हटा देता है। जीज़िप (या ब्रॉटली) संपीड़न एक सर्वर-साइड रनटाइम संपीड़न एल्गोरिदम है जो HTTP पर प्रसारित करने से पहले शब्दकोश-आधारित एल्गोरिदम का उपयोग करके टेक्स्ट पेलोड को संपीड़ित करता है। ये दो विधियाँ पूरक हैं; आपके HTML को छोटा करने से बेकार टोकन हट जाते हैं, और फिर Gzip परिणामस्वरूप सुव्यवस्थित कोड को संपीड़ित करता है, जिससे लोडिंग गति अधिकतम हो जाती है।"}}]}</script>  <script type="module" src="/_astro/html-minifier.astro_astro_type_script_index_0_lang.Gbp66YcM.js"></script>  <!-- STICKY BOTTOM NAVIGATION BAR --> <div class="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/80 dark:bg-black/80 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] px-6 py-1.5" style="padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px))"> <div class="flex items-center justify-around h-12"> <!-- Home Button --> <a href="/hi/" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> <span class="text-[10px] font-semibold font-sans">मुख्य</span> </a> <!-- Tools Button --> <button id="bottom-nav-tools-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path> </svg> <span class="text-[10px] font-semibold font-sans">उपकरण</span> </button> <!-- Theme Toggle Button --> <button class="theme-toggle flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none" aria-label="Toggle Theme"> <!-- Sun Icon --> <svg class="theme-toggle-light-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m0-12.728l.707.707m12.728 12.728l.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z"></path> </svg> <!-- Moon Icon --> <svg class="theme-toggle-dark-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> </svg> <span class="text-[10px] font-semibold font-sans">थीम</span> </button> <!-- More Button --> <button id="bottom-nav-more-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="1"></circle> <circle cx="12" cy="5" r="1"></circle> <circle cx="12" cy="19" r="1"></circle> </svg> <span class="text-[10px] font-semibold font-sans">मेनू</span> </button> </div> </div> <!-- TOOLS DRAWER OVERLAY --> <div id="tools-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="tools-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">उपकरण</h3> <button id="tools-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Search Bar --> <div class="px-6 py-3 border-b border-[#e5e5e5] dark:border-[#1f1f1f] bg-[#fafafa]/50 dark:bg-[#0a0a0a]/50"> <div class="relative flex items-center"> <svg class="absolute left-3 w-4 h-4 text-[#888] dark:text-[#555] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> <input type="text" id="tools-search-input" placeholder="उपकरण खोजें…" class="w-full pl-9 pr-8 py-2 text-sm bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-[#1f1f1f] rounded-lg text-[#171717] dark:text-white placeholder-[#888] dark:placeholder-[#555] focus:outline-none focus:border-[#007cf0] dark:focus:border-[#007cf0] focus:ring-1 focus:ring-[#007cf0] transition-all"> <button id="tools-search-clear" class="absolute right-3 hidden text-[#888] dark:text-[#555] hover:text-[#171717] dark:hover:text-white transition-colors cursor-pointer" aria-label="Clear search"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> <!-- Drawer Categories and Links --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> पाठ </h4> <div class="grid grid-cols-2 gap-2"> <a href="/hi/text/word-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="शब्द काउंटर"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">शब्द काउंटर</span> </a><a href="/hi/text/text-utils" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="टेक्स्ट केस कन्वर्टर एवं उपयोगिताएँ"> <span class="text-sm flex-shrink-0">🔤</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">टेक्स्ट केस कन्वर्टर एवं उपयोगिताएँ</span> </a><a href="/hi/text/lorem-ipsum" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="लोरेम इप्सम जेनरेटर"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">लोरेम इप्सम जेनरेटर</span> </a><a href="/hi/text/markdown-preview" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मार्कडाउन पूर्वावलोकनकर्ता"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मार्कडाउन पूर्वावलोकनकर्ता</span> </a><a href="/hi/text/case-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="केस परिवर्तक"> <span class="text-sm flex-shrink-0">🔠</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">केस परिवर्तक</span> </a><a href="/hi/text/remove-duplicate-lines" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="डुप्लिकेट लाइन रिमूवर"> <span class="text-sm flex-shrink-0">🧹</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">डुप्लिकेट लाइन रिमूवर</span> </a><a href="/hi/text/find-and-replace-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="टूल ढूंढें और बदलें"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">टूल ढूंढें और बदलें</span> </a><a href="/hi/text/reverse-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="रिवर्स टेक्स्ट टूल"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">रिवर्स टेक्स्ट टूल</span> </a><a href="/hi/text/string-length" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="स्ट्रिंग लंबाई खोजक"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">स्ट्रिंग लंबाई खोजक</span> </a><a href="/hi/text/word-replacer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="शब्द प्रतिस्थापक"> <span class="text-sm flex-shrink-0">✏️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">शब्द प्रतिस्थापक</span> </a><a href="/hi/text/sort-list-online" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="सूची सॉर्टर"> <span class="text-sm flex-shrink-0">🗂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">सूची सॉर्टर</span> </a><a href="/hi/text/text-to-binary" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="बाइनरी कन्वर्टर के लिए टेक्स्ट"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">बाइनरी कन्वर्टर के लिए टेक्स्ट</span> </a><a href="/hi/text/text-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="हेक्स कनवर्टर के लिए पाठ"> <span class="text-sm flex-shrink-0">🛑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">हेक्स कनवर्टर के लिए पाठ</span> </a><a href="/hi/text/hex-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="हेक्स से टेक्स्ट कन्वर्टर"> <span class="text-sm flex-shrink-0">💬</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">हेक्स से टेक्स्ट कन्वर्टर</span> </a><a href="/hi/text/text-diff" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="टेक्स्ट डिफ टूल"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">टेक्स्ट डिफ टूल</span> </a><a href="/hi/text/number-to-words" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="संख्या से शब्द परिवर्तक"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">संख्या से शब्द परिवर्तक</span> </a><a href="/hi/text/char-frequency" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="चरित्र आवृत्ति काउंटर"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">चरित्र आवृत्ति काउंटर</span> </a><a href="/hi/text/binary-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="बाइनरी से टेक्स्ट कनवर्टर"> <span class="text-sm flex-shrink-0">01</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">बाइनरी से टेक्स्ट कनवर्टर</span> </a><a href="/hi/text/rot13" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="rot13 एनकोडर और डिकोडर"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ROT13 एनकोडर और डिकोडर</span> </a><a href="/hi/text/slug-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="यूआरएल स्लग जेनरेटर"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">यूआरएल स्लग जेनरेटर</span> </a><a href="/hi/text/morse-code-translator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मोर्स कोड अनुवादक"> <span class="text-sm flex-shrink-0">📻</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मोर्स कोड अनुवादक</span> </a><a href="/hi/text/markdown-to-html" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html कन्वर्टर के लिए निःशुल्क ऑनलाइन मार्कडाउन"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML कन्वर्टर के लिए निःशुल्क ऑनलाइन मार्कडाउन</span> </a><a href="/hi/text/html-to-markdown" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन html से मार्कडाउन कन्वर्टर"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन HTML से मार्कडाउन कन्वर्टर</span> </a><a href="/hi/text/character-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन कैरेक्टर काउंटर"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन कैरेक्टर काउंटर</span> </a><a href="/hi/text/sentence-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="निःशुल्क ऑनलाइन वाक्य काउंटर"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">निःशुल्क ऑनलाइन वाक्य काउंटर</span> </a><a href="/hi/text/paragraph-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="निःशुल्क ऑनलाइन पैराग्राफ काउंटर"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">निःशुल्क ऑनलाइन पैराग्राफ काउंटर</span> </a><a href="/hi/text/line-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="निःशुल्क ऑनलाइन लाइन काउंटर"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">निःशुल्क ऑनलाइन लाइन काउंटर</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> डेवलपर </h4> <div class="grid grid-cols-2 gap-2"> <a href="/hi/developer/qr-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="क्यूआर कोड जेनरेटर"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">क्यूआर कोड जेनरेटर</span> </a><a href="/hi/developer/password-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="पासवर्ड जेनरेटर"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">पासवर्ड जेनरेटर</span> </a><a href="/hi/developer/base64-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="बेस64 एनकोडर और डिकोडर"> <span class="text-sm flex-shrink-0">🔏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">बेस64 एनकोडर और डिकोडर</span> </a><a href="/hi/developer/json-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json फ़ॉर्मेटर और सत्यापनकर्ता"> <span class="text-sm flex-shrink-0">📋</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON फ़ॉर्मेटर और सत्यापनकर्ता</span> </a><a href="/hi/developer/hash-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="हैश जेनरेटर"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">हैश जेनरेटर</span> </a><a href="/hi/developer/css-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="सीएसएस फ़ॉर्मेटर"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">सीएसएस फ़ॉर्मेटर</span> </a><a href="/hi/developer/csv-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="csv से json कन्वर्टर"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">CSV से JSON कन्वर्टर</span> </a><a href="/hi/developer/html-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html फ़ॉर्मेटर और ब्यूटीफायर"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML फ़ॉर्मेटर और ब्यूटीफायर</span> </a><a href="/hi/developer/html-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html मिनिफायर"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML मिनिफायर</span> </a><a href="/hi/developer/js-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="जावास्क्रिप्ट फ़ॉर्मेटर"> <span class="text-sm flex-shrink-0">📜</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">जावास्क्रिप्ट फ़ॉर्मेटर</span> </a><a href="/hi/developer/js-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="जावास्क्रिप्ट मिनिफायर"> <span class="text-sm flex-shrink-0">📦</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">जावास्क्रिप्ट मिनिफायर</span> </a><a href="/hi/developer/json-to-csv" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json से csv कनवर्टर"> <span class="text-sm flex-shrink-0">📈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON से CSV कनवर्टर</span> </a><a href="/hi/developer/json-to-xml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json से xml कन्वर्टर"> <span class="text-sm flex-shrink-0">🪵</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON से XML कन्वर्टर</span> </a><a href="/hi/developer/xml-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="xml फ़ॉर्मेटर और ब्यूटीफायर"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">XML फ़ॉर्मेटर और ब्यूटीफायर</span> </a><a href="/hi/developer/xml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="xml से json कन्वर्टर"> <span class="text-sm flex-shrink-0">🧩</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">XML से JSON कन्वर्टर</span> </a><a href="/hi/developer/sql-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="एसक्यूएल फ़ॉर्मेटर"> <span class="text-sm flex-shrink-0">🗄️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">एसक्यूएल फ़ॉर्मेटर</span> </a><a href="/hi/developer/user-agent-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="उपयोगकर्ता एजेंट पार्सर"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">उपयोगकर्ता एजेंट पार्सर</span> </a><a href="/hi/developer/regex-tester" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="रेगेक्स परीक्षक और डिबगर"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">रेगेक्स परीक्षक और डिबगर</span> </a><a href="/hi/developer/json-to-yaml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json से yaml कनवर्टर"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON से YAML कनवर्टर</span> </a><a href="/hi/developer/yaml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="yaml से json कन्वर्टर"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">YAML से JSON कन्वर्टर</span> </a><a href="/hi/developer/cron-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="क्रॉन एक्सप्रेशन जेनरेटर"> <span class="text-sm flex-shrink-0">⚙️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">क्रॉन एक्सप्रेशन जेनरेटर</span> </a><a href="/hi/developer/html-entities" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="html इकाई एनकोडर और डिकोडर"> <span class="text-sm flex-shrink-0">🏷️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">HTML इकाई एनकोडर और डिकोडर</span> </a><a href="/hi/developer/image-to-base64" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="बेस64 एनकोडर के लिए छवि"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">बेस64 एनकोडर के लिए छवि</span> </a><a href="/hi/developer/password-strength" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="पासवर्ड स्ट्रेंथ चेकर"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">पासवर्ड स्ट्रेंथ चेकर</span> </a><a href="/hi/developer/url-encoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="यूआरएल एनकोडर और डिकोडर"> <span class="text-sm flex-shrink-0">🔒</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">यूआरएल एनकोडर और डिकोडर</span> </a><a href="/hi/developer/uuid-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="निःशुल्क ऑनलाइन थोक यूयूआईडी जेनरेटर"> <span class="text-sm flex-shrink-0">🆔</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">निःशुल्क ऑनलाइन थोक यूयूआईडी जेनरेटर</span> </a><a href="/hi/developer/epoch-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="यूनिक्स एपोच टाइमस्टैम्प कनवर्टर"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">यूनिक्स एपोच टाइमस्टैम्प कनवर्टर</span> </a><a href="/hi/developer/jwt-debugger" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="json वेब टोकन डिबगर"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">JSON वेब टोकन डिबगर</span> </a><a href="/hi/developer/json-validator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन json सत्यापनकर्ता और पार्सर"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन JSON सत्यापनकर्ता और पार्सर</span> </a><a href="/hi/developer/css-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन सीएसएस कोड कंप्रेसर"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन सीएसएस कोड कंप्रेसर</span> </a><a href="/hi/developer/base64-to-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="इमेज डिकोडर के लिए निःशुल्क ऑनलाइन बेस64"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">इमेज डिकोडर के लिए निःशुल्क ऑनलाइन बेस64</span> </a><a href="/hi/developer/url-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन यूआरएल पार्सर और डिबगर"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन यूआरएल पार्सर और डिबगर</span> </a><a href="/hi/developer/http-headers" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन http अनुरोध हेडर व्यूअर"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन HTTP अनुरोध हेडर व्यूअर</span> </a><a href="/hi/developer/qr-decoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन क्यूआर कोड डिकोडर और स्कैनर"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन क्यूआर कोड डिकोडर और स्कैनर</span> </a><a href="/hi/developer/whois-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="निःशुल्क क्लाइंट-साइड whois लुकअप टूल"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">निःशुल्क क्लाइंट-साइड Whois लुकअप टूल</span> </a><a href="/hi/developer/dns-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="निःशुल्क लाइव डीएनएस रिकॉर्ड लुकअप उपयोगिता"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">निःशुल्क लाइव डीएनएस रिकॉर्ड लुकअप उपयोगिता</span> </a><a href="/hi/developer/json-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन json मिनिफ़ायर"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन JSON मिनिफ़ायर</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> कैलकुलेटर </h4> <div class="grid grid-cols-2 gap-2"> <a href="/hi/calculators/unit-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="इकाई परिवर्तक"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">इकाई परिवर्तक</span> </a><a href="/hi/calculators/date-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="दिनांक कैलक्यूलेटर"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">दिनांक कैलक्यूलेटर</span> </a><a href="/hi/calculators/bmi-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="बीएमआई कैलकुलेटर"> <span class="text-sm flex-shrink-0">⚖️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">बीएमआई कैलकुलेटर</span> </a><a href="/hi/calculators/age-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="आयु कैलकुलेटर"> <span class="text-sm flex-shrink-0">🎂</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">आयु कैलकुलेटर</span> </a><a href="/hi/calculators/percentage-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="प्रतिशत कैलक्यूलेटर"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">प्रतिशत कैलक्यूलेटर</span> </a><a href="/hi/calculators/random-number" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="यादृच्छिक संख्या जेनरेटर"> <span class="text-sm flex-shrink-0">🎲</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">यादृच्छिक संख्या जेनरेटर</span> </a><a href="/hi/calculators/tip-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="ऑनलाइन टिप कैलकुलेटर"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ऑनलाइन टिप कैलकुलेटर</span> </a><a href="/hi/calculators/lcm-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="एलसीएम (न्यूनतम समापवर्त्य) कैलकुलेटर"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">एलसीएम (न्यूनतम समापवर्त्य) कैलकुलेटर</span> </a><a href="/hi/calculators/quadratic-solver" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="द्विघात समीकरण सॉल्वर"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">द्विघात समीकरण सॉल्वर</span> </a><a href="/hi/calculators/scientific-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="वैज्ञानिक कैलकुलेटर"> <span class="text-sm flex-shrink-0">🧮</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">वैज्ञानिक कैलकुलेटर</span> </a><a href="/hi/calculators/fraction-to-decimal" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="भिन्न से दशमलव कैलकुलेटर"> <span class="text-sm flex-shrink-0">➗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">भिन्न से दशमलव कैलकुलेटर</span> </a><a href="/hi/calculators/decimal-to-fraction" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="दशमलव से भिन्न कैलकुलेटर"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">दशमलव से भिन्न कैलकुलेटर</span> </a><a href="/hi/calculators/gcd-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="जीसीडी कैलकुलेटर"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">जीसीडी कैलकुलेटर</span> </a><a href="/hi/calculators/prime-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="प्राइम नंबर चेकर"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">प्राइम नंबर चेकर</span> </a><a href="/hi/calculators/date-difference" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="तिथियों के बीच के दिन कैलकुलेटर"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">तिथियों के बीच के दिन कैलकुलेटर</span> </a><a href="/hi/calculators/fibonacci-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="फाइबोनैचि अनुक्रम जेनरेटर"> <span class="text-sm flex-shrink-0">🌀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">फाइबोनैचि अनुक्रम जेनरेटर</span> </a><a href="/hi/calculators/metric-conversion" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="निःशुल्क ऑनलाइन मीट्रिक रूपांतरण उपकरण"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">निःशुल्क ऑनलाइन मीट्रिक रूपांतरण उपकरण</span> </a><a href="/hi/calculators/gratuity-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन ग्रेच्युटी और टिप कैलकुलेटर"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन ग्रेच्युटी और टिप कैलकुलेटर</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> डिजाइन </h4> <div class="grid grid-cols-2 gap-2"> <a href="/hi/design/color-picker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="रंग बीनने वाला और पैलेट जेनरेटर"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">रंग बीनने वाला और पैलेट जेनरेटर</span> </a><a href="/hi/design/image-compressor" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="छवि कंप्रेसर"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">छवि कंप्रेसर</span> </a><a href="/hi/design/screen-resolution" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="स्क्रीन और व्यूपोर्ट चेकर"> <span class="text-sm flex-shrink-0">🖥️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">स्क्रीन और व्यूपोर्ट चेकर</span> </a><a href="/hi/design/hex-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="हेक्स और आरजीबी कनवर्टर"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">हेक्स और आरजीबी कनवर्टर</span> </a><a href="/hi/design/color-palette" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="रंग पैलेट जेनरेटर"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">रंग पैलेट जेनरेटर</span> </a><a href="/hi/design/css-gradient" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="सीएसएस ग्रेडिएंट जेनरेटर"> <span class="text-sm flex-shrink-0">🌈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">सीएसएस ग्रेडिएंट जेनरेटर</span> </a><a href="/hi/design/favicon-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="फ़ेविकॉन जेनरेटर"> <span class="text-sm flex-shrink-0">⭐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">फ़ेविकॉन जेनरेटर</span> </a><a href="/hi/design/rgb-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="आरजीबी से हेक्स रंग कनवर्टर"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">आरजीबी से हेक्स रंग कनवर्टर</span> </a><a href="/hi/design/aspect-ratio-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="पहलू अनुपात कैलकुलेटर"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">पहलू अनुपात कैलकुलेटर</span> </a><a href="/hi/design/svg-to-png" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन एसवीजी से पीएनजी रैस्टराइज़र"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन एसवीजी से पीएनजी रैस्टराइज़र</span> </a><a href="/hi/design/image-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन स्थानीय छवि कनवर्टर"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन स्थानीय छवि कनवर्टर</span> </a><a href="/hi/design/placeholder-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="निःशुल्क ऑनलाइन प्लेसहोल्डर छवि जेनरेटर"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">निःशुल्क ऑनलाइन प्लेसहोल्डर छवि जेनरेटर</span> </a><a href="/hi/design/contrast-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन रंग कंट्रास्ट चेकर"> <span class="text-sm flex-shrink-0">👁️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन रंग कंट्रास्ट चेकर</span> </a><a href="/hi/design/png-to-svg" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="एसवीजी वेक्टराइज़र के लिए मुफ़्त ऑनलाइन पीएनजी"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">एसवीजी वेक्टराइज़र के लिए मुफ़्त ऑनलाइन पीएनजी</span> </a><a href="/hi/design/hsl-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="नि"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">नि</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> उत्पादकता </h4> <div class="grid grid-cols-2 gap-2"> <a href="/hi/productivity/timer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="ऑनलाइन टाइमर और स्टॉपवॉच"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ऑनलाइन टाइमर और स्टॉपवॉच</span> </a><a href="/hi/productivity/stopwatch" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="ऑनलाइन स्टॉपवॉच"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">ऑनलाइन स्टॉपवॉच</span> </a><a href="/hi/productivity/pomodoro" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="पोमोडोरो टाइमर"> <span class="text-sm flex-shrink-0">🍅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">पोमोडोरो टाइमर</span> </a><a href="/hi/productivity/merge-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="निःशुल्क ऑनलाइन पीडीएफ विलय उपयोगिता"> <span class="text-sm flex-shrink-0">📑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">निःशुल्क ऑनलाइन पीडीएफ विलय उपयोगिता</span> </a><a href="/hi/productivity/word-to-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="नि"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">नि</span> </a><a href="/hi/productivity/split-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="मुफ़्त ऑनलाइन पीडीएफ स्प्लिटर और पेज एक्सट्रैक्टर"> <span class="text-sm flex-shrink-0">✂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">मुफ़्त ऑनलाइन पीडीएफ स्प्लिटर और पेज एक्सट्रैक्टर</span> </a> </div> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- MORE DRAWER OVERLAY --> <div id="more-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="more-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">मेनू</h3> <button id="more-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Links & Content --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <!-- iOS Style Link List --> <div class="rounded-xl border border-zinc-200 dark:border-[#1f1f1f] bg-zinc-50/50 dark:bg-zinc-900/30 overflow-hidden divide-y divide-[#ebebeb] dark:divide-[#1f1f1f]"> <a href="/hi/about" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">हमारे बारे में</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/hi/contact" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">संपर्क</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/hi/privacy" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">गोपनीयता नीति</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/hi/terms" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">नियम और शर्तें</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Language Selector Section --> <div class="space-y-3"> <h4 class="text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> भाषा </h4> <div class="grid grid-cols-2 gap-2"> <a href="/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>English</span>  </a><a href="/es/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Español</span>  </a><a href="/fr/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Français</span>  </a><a href="/de/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Deutsch</span>  </a><a href="/hi/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-[#007cf0]/10 border-[#007cf0] text-[#007cf0] font-bold dark:bg-[#007cf0]/20"> <span>हिन्दी</span> <span class="text-xs text-[#007cf0]">✓</span> </a><a href="/zh/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>中文</span>  </a><a href="/ja/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>日本語</span>  </a> </div> </div> <!-- Credits Footer --> <div class="pt-6 border-t border-[#ebebeb] dark:border-[#1f1f1f] text-center space-y-2 select-none"> <p class="text-xs font-mono text-[#888] dark:text-[#888] flex items-center justify-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </p> <p class="text-xs font-mono text-[#888] dark:text-[#888]"> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </p> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- Client Script to Toggle Sheet --> <script type="module">const g=document.getElementById("bottom-nav-tools-btn"),B=document.getElementById("tools-sheet-close"),t=document.getElementById("tools-sheet-backdrop"),o=document.getElementById("tools-sheet"),b=document.getElementById("bottom-nav-more-btn"),k=document.getElementById("header-more-btn"),I=document.getElementById("header-more-btn-home"),S=document.getElementById("more-sheet-close"),s=document.getElementById("more-sheet-backdrop"),n=document.getElementById("more-sheet"),e=document.getElementById("tools-search-input"),i=document.getElementById("tools-search-clear"),w=document.querySelectorAll(".category-section"),q=()=>{t?.classList.remove("hidden"),o?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{t?.classList.add("opacity-100"),t?.classList.remove("pointer-events-none"),o?.classList.add("translate-y-0"),o?.classList.remove("translate-y-full"),setTimeout(()=>{e?.focus()},100)})},d=()=>{t?.classList.remove("opacity-100"),t?.classList.add("pointer-events-none"),o?.classList.remove("translate-y-0"),o?.classList.add("translate-y-full"),document.body.style.overflow="",e&&(e.value="",e.dispatchEvent(new Event("input"))),setTimeout(()=>{t?.classList.add("hidden"),o?.classList.add("hidden")},300)};g?.addEventListener("click",()=>{m(),q()});B?.addEventListener("click",d);t?.addEventListener("click",d);const r=()=>{s?.classList.remove("hidden"),n?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{s?.classList.add("opacity-100"),s?.classList.remove("pointer-events-none"),n?.classList.add("translate-y-0"),n?.classList.remove("translate-y-full")})},m=()=>{s?.classList.remove("opacity-100"),s?.classList.add("pointer-events-none"),n?.classList.remove("translate-y-0"),n?.classList.add("translate-y-full"),document.body.style.overflow="",setTimeout(()=>{s?.classList.add("hidden"),n?.classList.add("hidden")},300)};b?.addEventListener("click",()=>{d(),r()});k?.addEventListener("click",()=>{d(),r()});I?.addEventListener("click",()=>{d(),r()});S?.addEventListener("click",m);s?.addEventListener("click",m);e?.addEventListener("input",h=>{const a=h.target.value.toLowerCase().trim();a?i?.classList.remove("hidden"):i?.classList.add("hidden"),w.forEach(v=>{const l=v,u=l.querySelector(".category-title"),y=(u&&u.textContent?.toLowerCase()||"").includes(a),E=l.querySelectorAll(".tool-item");let L=!1;E.forEach(p=>{const c=p,f=c.getAttribute("data-name")||"";y||f.includes(a)?(c.classList.remove("hidden"),c.classList.add("flex"),L=!0):(c.classList.remove("flex"),c.classList.add("hidden"))}),L?l.classList.remove("hidden"):l.classList.add("hidden")})});i?.addEventListener("click",()=>{e&&(e.value="",e.dispatchEvent(new Event("input")),e.focus())});</script> </body> </html>