{"id":619,"date":"2026-07-22T15:37:27","date_gmt":"2026-07-22T15:37:27","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=619"},"modified":"2026-07-27T16:42:39","modified_gmt":"2026-07-27T16:42:39","slug":"developer-tools-3","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/developer-tools-3\/","title":{"rendered":"Developer Tools"},"content":{"rendered":"\n<div class=\"fwt-tier2-wrapper\" id=\"fwtTier2Wrapper\" data-theme=\"auto\">\n    <style>\n        .fwt-tier2-wrapper {\n            all: initial;\n            display: block;\n            font-family: system-ui, -apple-system, sans-serif;\n            color: var(--fwt-t2-text, #1e293b);\n            background-color: var(--fwt-t2-bg, #f8fafc);\n            padding: 24px;\n            box-sizing: border-box;\n            width: 100%;\n            max-width: 1400px;\n            margin: 0 auto;\n            border-radius: 20px;\n            border: 1px solid var(--fwt-t2-border, #e2e8f0);\n            box-shadow: 0 10px 25px rgba(0,0,0,0.05);\n            transition: background-color 0.3s, color 0.3s;\n        }\n        .fwt-tier2-wrapper *, .fwt-tier2-wrapper *::before, .fwt-tier2-wrapper *::after {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n        .fwt-t2-container {\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n        }\n        .fwt-t2-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            flex-wrap: wrap;\n            gap: 15px;\n        }\n        .fwt-t2-title {\n            font-size: 1.75rem;\n            font-weight: 800;\n            background: linear-gradient(135deg, #2563eb, #9333ea);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n        }\n        .fwt-t2-theme-btn {\n            background: var(--fwt-t2-panel-bg, #ffffff);\n            border: 1px solid var(--fwt-t2-border, #cbd5e1);\n            color: var(--fwt-t2-text, #1e293b);\n            padding: 8px 16px;\n            border-radius: 10px;\n            cursor: pointer;\n            font-weight: 600;\n            transition: all 0.2s;\n        }\n        .fwt-t2-theme-btn:hover { background: var(--fwt-t2-hover, #f1f5f9); }\n\n        .fwt-t2-tabs {\n            display: flex;\n            gap: 8px;\n            overflow-x: auto;\n            padding-bottom: 5px;\n        }\n        .fwt-t2-tab {\n            background: var(--fwt-t2-input-bg, #f8fafc);\n            border: 1px solid var(--fwt-t2-border, #cbd5e1);\n            color: var(--fwt-t2-text, #1e293b);\n            padding: 8px 14px;\n            border-radius: 8px;\n            cursor: pointer;\n            font-size: 0.85rem;\n            font-weight: 600;\n            white-space: nowrap;\n            transition: all 0.2s;\n        }\n        .fwt-t2-tab.active { background: #2563eb; color: white; border-color: #2563eb; }\n\n        .fwt-t2-panel {\n            background: var(--fwt-t2-panel-bg, #ffffff);\n            padding: 20px;\n            border-radius: 16px;\n            border: 1px solid var(--fwt-t2-border, #e2e8f0);\n            display: none;\n            flex-direction: column;\n            gap: 15px;\n            box-shadow: 0 4px 6px rgba(0,0,0,0.02);\n        }\n        .fwt-t2-panel.active { display: flex; }\n\n        .fwt-t2-group {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n        .fwt-t2-label {\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: var(--fwt-t2-label, #64748b);\n            display: flex;\n            justify-content: space-between;\n        }\n        .fwt-t2-input, .fwt-t2-select, .fwt-t2-textarea {\n            width: 100%;\n            padding: 12px;\n            border-radius: 10px;\n            border: 1px solid var(--fwt-t2-border, #cbd5e1);\n            font-size: 0.95rem;\n            outline: none;\n            background: var(--fwt-t2-input-bg, #f8fafc);\n            color: var(--fwt-t2-text, #1e293b);\n            transition: border-color 0.2s;\n        }\n        .fwt-t2-textarea { resize: vertical; min-height: 120px; font-family: monospace; }\n        .fwt-t2-input:focus, .fwt-t2-select:focus, .fwt-t2-textarea:focus { border-color: #2563eb; }\n\n        .fwt-t2-row {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 15px;\n        }\n        @media(max-width: 800px) {\n            .fwt-t2-row { grid-template-columns: 1fr; }\n        }\n\n        .fwt-t2-actions {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n        }\n        .fwt-t2-btn {\n            background: #2563eb;\n            color: white;\n            border: none;\n            padding: 10px 18px;\n            border-radius: 10px;\n            font-weight: 700;\n            cursor: pointer;\n            transition: background 0.2s, transform 0.1s;\n            font-size: 0.9rem;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 6px;\n        }\n        .fwt-t2-btn:hover { background: #1d4ed8; }\n        .fwt-t2-btn:active { transform: scale(0.98); }\n        .fwt-t2-btn-secondary { background: #475569; }\n        .fwt-t2-btn-secondary:hover { background: #334155; }\n\n        .fwt-t2-output-box {\n            background: var(--fwt-t2-input-bg, #f8fafc);\n            padding: 12px;\n            border-radius: 10px;\n            border: 1px solid var(--fwt-t2-border, #cbd5e1);\n            font-family: monospace;\n            white-space: pre-wrap;\n            word-break: break-all;\n            min-height: 60px;\n            font-size: 0.9rem;\n            color: var(--fwt-t2-text, #1e293b);\n        }\n\n        .fwt-t2-preview-box {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 180px;\n            border-radius: 12px;\n            border: 1px solid var(--fwt-t2-border, #cbd5e1);\n            background: var(--fwt-t2-input-bg, #f8fafc);\n            padding: 20px;\n            overflow: hidden;\n        }\n\n        .fwt-t2-toast {\n            position: fixed;\n            bottom: 20px;\n            right: 20px;\n            background: #0f172a;\n            color: white;\n            padding: 10px 20px;\n            border-radius: 8px;\n            font-size: 0.9rem;\n            box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n            opacity: 0;\n            transition: opacity 0.3s;\n            pointer-events: none;\n            z-index: 9999;\n        }\n        .fwt-t2-toast.show { opacity: 1; }\n\n        @media(prefers-color-scheme: dark) {\n            .fwt-tier2-wrapper[data-theme=\"auto\"] {\n                --fwt-t2-bg: #0f172a;\n                --fwt-t2-panel-bg: #1e293b;\n                --fwt-t2-text: #f8fafc;\n                --fwt-t2-border: #334155;\n                --fwt-t2-input-bg: #0f172a;\n                --fwt-t2-label: #94a3b8;\n                --fwt-t2-hover: #334155;\n            }\n        }\n        .fwt-tier2-wrapper[data-theme=\"dark\"] {\n            --fwt-t2-bg: #0f172a;\n            --fwt-t2-panel-bg: #1e293b;\n            --fwt-t2-text: #f8fafc;\n            --fwt-t2-border: #334155;\n            --fwt-t2-input-bg: #0f172a;\n            --fwt-t2-label: #94a3b8;\n            --fwt-t2-hover: #334155;\n        }\n        .fwt-tier2-wrapper[data-theme=\"light\"] {\n            --fwt-t2-bg: #f8fafc;\n            --fwt-t2-panel-bg: #ffffff;\n            --fwt-t2-text: #1e293b;\n            --fwt-t2-border: #e2e8f0;\n            --fwt-t2-input-bg: #f8fafc;\n            --fwt-t2-label: #64748b;\n            --fwt-t2-hover: #f1f5f9;\n        }\n    <\/style>\n\n    <div class=\"fwt-t2-container\">\n        <div class=\"fwt-t2-header\">\n            <h2 class=\"fwt-t2-title\">\ud83c\udfa8 Tier 2 High Traffic Dev Utilities<\/h2>\n            <button type=\"button\" class=\"fwt-t2-theme-btn\" id=\"fwtThemeToggle\">Toggle Theme<\/button>\n        <\/div>\n\n        <div class=\"fwt-t2-tabs\" id=\"fwtToolTabs\">\n            <button type=\"button\" class=\"fwt-t2-tab active\" data-target=\"colorpicker\">Color Picker<\/button>\n            <button type=\"button\" class=\"fwt-t2-tab\" data-target=\"colorconv\">HEX \u2194 RGB \u2194 HSL<\/button>\n            <button type=\"button\" class=\"fwt-t2-tab\" data-target=\"gradient\">CSS Gradient<\/button>\n            <button type=\"button\" class=\"fwt-t2-tab\" data-target=\"shadow\">Box Shadow<\/button>\n            <button type=\"button\" class=\"fwt-t2-tab\" data-target=\"radius\">Border Radius<\/button>\n            <button type=\"button\" class=\"fwt-t2-tab\" data-target=\"flexbox\">Flexbox Gen<\/button>\n            <button type=\"button\" class=\"fwt-t2-tab\" data-target=\"grid\">CSS Grid Gen<\/button>\n            <button type=\"button\" class=\"fwt-t2-tab\" data-target=\"svgview\">SVG Viewer<\/button>\n            <button type=\"button\" class=\"fwt-t2-tab\" data-target=\"svgopt\">SVG Optimizer<\/button>\n            <button type=\"button\" class=\"fwt-t2-tab\" data-target=\"qrcode\">QR Code Gen<\/button>\n        <\/div>\n\n        <!-- 1. Color Picker -->\n        <div class=\"fwt-t2-panel active\" id=\"panel-colorpicker\">\n            <div class=\"fwt-t2-row\">\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Select Color<\/label>\n                    <input type=\"color\" id=\"pickerInput\" value=\"#2563eb\" style=\"width:100%; height:50px; border:none; border-radius:10px; cursor:pointer; padding:0; background:none;\">\n                <\/div>\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Selected HEX Value<\/label>\n                    <input type=\"text\" id=\"pickerHex\" class=\"fwt-t2-input\" readonly>\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Preview Box<\/label>\n                <div id=\"pickerPreview\" class=\"fwt-t2-preview-box\" style=\"background:#2563eb;\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 2. HEX \u2194 RGB \u2194 HSL Converter -->\n        <div class=\"fwt-t2-panel\" id=\"panel-colorconv\">\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Enter HEX (e.g. #2563eb)<\/label>\n                <input type=\"text\" id=\"convHexInput\" class=\"fwt-t2-input\" value=\"#2563eb\">\n            <\/div>\n            <div class=\"fwt-t2-actions\">\n                <button type=\"button\" class=\"fwt-t2-btn\" id=\"convConvertBtn\">Convert Color<\/button>\n            <\/div>\n            <div class=\"fwt-t2-row\">\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">RGB Output<\/label>\n                    <div id=\"convRgb\" class=\"fwt-t2-output-box\"><\/div>\n                <\/div>\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">HSL Output<\/label>\n                    <div id=\"convHsl\" class=\"fwt-t2-output-box\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 3. CSS Gradient Generator -->\n        <div class=\"fwt-t2-panel\" id=\"panel-gradient\">\n            <div class=\"fwt-t2-row\">\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Color 1<\/label>\n                    <input type=\"color\" id=\"gradColor1\" value=\"#2563eb\" style=\"width:100%; height:40px; border:none; border-radius:8px; padding:0; background:none; cursor:pointer;\">\n                <\/div>\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Color 2<\/label>\n                    <input type=\"color\" id=\"gradColor2\" value=\"#9333ea\" style=\"width:100%; height:40px; border:none; border-radius:8px; padding:0; background:none; cursor:pointer;\">\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Gradient Preview<\/label>\n                <div id=\"gradPreview\" class=\"fwt-t2-preview-box\" style=\"background: linear-gradient(135deg, #2563eb, #9333ea);\"><\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">CSS Code<\/label>\n                <div id=\"gradCss\" class=\"fwt-t2-output-box\">background: linear-gradient(135deg, #2563eb, #9333ea);<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 4. Box Shadow Generator -->\n        <div class=\"fwt-t2-panel\" id=\"panel-shadow\">\n            <div class=\"fwt-t2-row\">\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Horizontal Offset: <span id=\"shXVal\">0<\/span>px<\/label>\n                    <input type=\"range\" id=\"shX\" min=\"-50\" max=\"50\" value=\"0\" class=\"fwt-t2-input\" style=\"padding:0; height:auto;\">\n                <\/div>\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Vertical Offset: <span id=\"shYVal\">10<\/span>px<\/label>\n                    <input type=\"range\" id=\"shY\" min=\"-50\" max=\"50\" value=\"10\" class=\"fwt-t2-input\" style=\"padding:0; height:auto;\">\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-row\">\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Blur Radius: <span id=\"shBlurVal\">25<\/span>px<\/label>\n                    <input type=\"range\" id=\"shBlur\" min=\"0\" max=\"100\" value=\"25\" class=\"fwt-t2-input\" style=\"padding:0; height:auto;\">\n                <\/div>\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Spread Radius: <span id=\"shSpreadVal\">0<\/span>px<\/label>\n                    <input type=\"range\" id=\"shSpread\" min=\"-50\" max=\"50\" value=\"0\" class=\"fwt-t2-input\" style=\"padding:0; height:auto;\">\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Preview<\/label>\n                <!-- Container remains clean, shadow applied to the target box -->\n                <div id=\"shPreviewContainer\" class=\"fwt-t2-preview-box\" style=\"background:var(--fwt-t2-input-bg, #f8fafc);\">\n                    <div id=\"shBoxTarget\" style=\"width:100px; height:100px; background:#2563eb; border-radius:10px; box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.15);\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">CSS Code<\/label>\n                <div id=\"shCss\" class=\"fwt-t2-output-box\">box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.15);<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 5. Border Radius Generator -->\n        <div class=\"fwt-t2-panel\" id=\"panel-radius\">\n            <div class=\"fwt-t2-row\">\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Border Radius: <span id=\"radVal\">20<\/span>px<\/label>\n                    <input type=\"range\" id=\"radInput\" min=\"0\" max=\"150\" value=\"20\" class=\"fwt-t2-input\" style=\"padding:0; height:auto;\">\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Preview<\/label>\n                <div id=\"radPreview\" class=\"fwt-t2-preview-box\">\n                    <div id=\"radBox\" style=\"width:120px; height:120px; background:#2563eb; border-radius:20px;\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">CSS Code<\/label>\n                <div id=\"radCss\" class=\"fwt-t2-output-box\">border-radius: 20px;<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 6. CSS Flexbox Generator -->\n        <div class=\"fwt-t2-panel\" id=\"panel-flexbox\">\n            <div class=\"fwt-t2-row\">\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Justify Content<\/label>\n                    <select id=\"flexJustify\" class=\"fwt-t2-select\">\n                        <option value=\"flex-start\">flex-start<\/option>\n                        <option value=\"center\" selected>center<\/option>\n                        <option value=\"flex-end\">flex-end<\/option>\n                        <option value=\"space-between\">space-between<\/option>\n                        <option value=\"space-around\">space-around<\/option>\n                    <\/select>\n                <\/div>\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Align Items<\/label>\n                    <select id=\"flexAlign\" class=\"fwt-t2-select\">\n                        <option value=\"flex-start\">flex-start<\/option>\n                        <option value=\"center\" selected>center<\/option>\n                        <option value=\"flex-end\">flex-end<\/option>\n                        <option value=\"stretch\">stretch<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Preview<\/label>\n                <div id=\"flexPreview\" class=\"fwt-t2-preview-box\" style=\"display:flex; justify-content:center; align-items:center; gap:10px;\">\n                    <div style=\"width:50px; height:50px; background:#2563eb; border-radius:8px;\"><\/div>\n                    <div style=\"width:50px; height:50px; background:#9333ea; border-radius:8px;\"><\/div>\n                    <div style=\"width:50px; height:50px; background:#0f172a; border-radius:8px;\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">CSS Code<\/label>\n                <div id=\"flexCss\" class=\"fwt-t2-output-box\">display: flex;\njustify-content: center;\nalign-items: center;\ngap: 10px;<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 7. CSS Grid Generator -->\n        <div class=\"fwt-t2-panel\" id=\"panel-grid\">\n            <div class=\"fwt-t2-row\">\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Grid Template Columns<\/label>\n                    <input type=\"text\" id=\"gridCols\" class=\"fwt-t2-input\" value=\"repeat(3, 1fr)\">\n                <\/div>\n                <div class=\"fwt-t2-group\">\n                    <label class=\"fwt-t2-label\">Grid Gap<\/label>\n                    <input type=\"text\" id=\"gridGap\" class=\"fwt-t2-input\" value=\"15px\">\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Preview<\/label>\n                <div id=\"gridPreview\" class=\"fwt-t2-preview-box\" style=\"display:grid; grid-template-columns: repeat(3, 1fr); gap:15px; width:100%;\">\n                    <div style=\"height:50px; background:#2563eb; border-radius:8px;\"><\/div>\n                    <div style=\"height:50px; background:#9333ea; border-radius:8px;\"><\/div>\n                    <div style=\"height:50px; background:#0f172a; border-radius:8px;\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">CSS Code<\/label>\n                <div id=\"gridCss\" class=\"fwt-t2-output-box\">display: grid;\ngrid-template-columns: repeat(3, 1fr);\ngap: 15px;<\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 8. SVG Viewer -->\n        <div class=\"fwt-t2-panel\" id=\"panel-svgview\">\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Paste SVG Code<\/label>\n                <textarea id=\"svgInput\" class=\"fwt-t2-textarea\" placeholder=\"&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;64&quot; height=&quot;64&quot;&gt;&lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;10&quot; fill=&quot;#2563eb&quot;\/&gt;&lt;\/svg&gt;\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t2-actions\">\n                <button type=\"button\" class=\"fwt-t2-btn\" id=\"svgRenderBtn\">Render SVG<\/button>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Visual Preview<\/label>\n                <div id=\"svgPreviewBox\" class=\"fwt-t2-preview-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 9. SVG Optimizer -->\n        <div class=\"fwt-t2-panel\" id=\"panel-svgopt\">\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Unoptimized SVG Code<\/label>\n                <textarea id=\"svgOptInput\" class=\"fwt-t2-textarea\" placeholder=\"Paste SVG to optimize...\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t2-actions\">\n                <button type=\"button\" class=\"fwt-t2-btn\" id=\"svgOptBtn\">Optimize SVG<\/button>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Optimized Output<\/label>\n                <div id=\"svgOptOutput\" class=\"fwt-t2-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 10. QR Code Generator -->\n        <div class=\"fwt-t2-panel\" id=\"panel-qrcode\">\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">Text \/ URL for QR Code<\/label>\n                <input type=\"text\" id=\"qrInput\" class=\"fwt-t2-input\" value=\"https:\/\/example.com\" placeholder=\"Enter URL...\">\n            <\/div>\n            <div class=\"fwt-t2-actions\">\n                <button type=\"button\" class=\"fwt-t2-btn\" id=\"qrGenBtn\">Generate Real QR Code<\/button>\n            <\/div>\n            <div class=\"fwt-t2-group\">\n                <label class=\"fwt-t2-label\">QR Canvas Preview<\/label>\n                <div class=\"fwt-t2-preview-box\" style=\"background:#ffffff; padding: 15px;\">\n                    <img decoding=\"async\" id=\"qrRealImg\" src=\"\" alt=\"Generated QR\" style=\"width: 200px; height: 200px; object-fit: contain;\">\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"fwt-t2-toast\" id=\"fwtToast\">Operation successful!<\/div>\n<\/div>\n\n<script>\n(() => {\n    \"use strict\";\n\n    const root = document.getElementById('fwtTier2Wrapper');\n    if (!root) return;\n\n    const tabs = root.querySelectorAll('.fwt-t2-tab');\n    const panels = root.querySelectorAll('.fwt-t2-panel');\n    const themeToggle = root.querySelector('#fwtThemeToggle');\n    const toast = root.querySelector('#fwtToast');\n\n    const showToast = (msg) => {\n        toast.textContent = msg;\n        toast.classList.add('show');\n        setTimeout(() => toast.classList.remove('show'), 2000);\n    };\n\n    tabs.forEach(tab => {\n        tab.onclick = () => {\n            tabs.forEach(t => t.classList.remove('active'));\n            panels.forEach(p => p.classList.remove('active'));\n            tab.classList.add('active');\n            const targetId = 'panel-' + tab.getAttribute('data-target');\n            root.querySelector('#' + targetId).classList.add('active');\n        };\n    });\n\n    themeToggle.onclick = () => {\n        const current = root.getAttribute('data-theme') || 'auto';\n        root.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');\n    };\n\n    \/\/ 1. Color Picker\n    const pickerInput = root.querySelector('#pickerInput');\n    const pickerHex = root.querySelector('#pickerHex');\n    const pickerPreview = root.querySelector('#pickerPreview');\n    pickerHex.value = pickerInput.value;\n    pickerInput.oninput = () => {\n        pickerHex.value = pickerInput.value;\n        pickerPreview.style.background = pickerInput.value;\n    };\n\n    \/\/ 2. HEX \u2194 RGB \u2194 HSL Converter\n    const convHexInput = root.querySelector('#convHexInput');\n    const convRgb = root.querySelector('#convRgb');\n    const convHsl = root.querySelector('#convHsl');\n    \n    root.querySelector('#convConvertBtn').onclick = () => {\n        let hex = convHexInput.value.trim().replace('#', '');\n        \n        \/\/ Expand 3-digit hex to 6-digit\n        if (hex.length === 3) {\n            hex = hex.split('').map(char => char + char).join('');\n        }\n\n        if (hex.length !== 6 || !\/^[0-9A-Fa-f]{6}$\/.test(hex)) {\n            convRgb.textContent = \"Invalid HEX format\";\n            convHsl.textContent = \"Invalid HEX format\";\n            return;\n        }\n\n        try {\n            let bigint = parseInt(hex, 16);\n            let r = (bigint >> 16) & 255;\n            let g = (bigint >> 8) & 255;\n            let b = bigint & 255;\n            convRgb.textContent = `rgb(${r}, ${g}, ${b})`;\n\n            \/\/ RGB to HSL\n            r \/= 255; g \/= 255; b \/= 255;\n            let max = Math.max(r, g, b), min = Math.min(r, g, b);\n            let h, s, l = (max + min) \/ 2;\n            \n            if(max === min) {\n                h = s = 0;\n            } else {\n                let d = max - min;\n                s = l > 0.5 ? d \/ (2 - max - min) : d \/ (max + min);\n                switch(max) {\n                    case r: h = (g - b) \/ d + (g < b ? 6 : 0); break;\n                    case g: h = (b - r) \/ d + 2; break;\n                    case b: h = (r - g) \/ d + 4; break;\n                }\n                h \/= 6;\n            }\n            convHsl.textContent = `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;\n            showToast(\"Color converted!\");\n        } catch(e) {\n            convRgb.textContent = \"Conversion error\";\n            convHsl.textContent = \"Conversion error\";\n        }\n    };\n\n    \/\/ 3. CSS Gradient Generator\n    const gradColor1 = root.querySelector('#gradColor1');\n    const gradColor2 = root.querySelector('#gradColor2');\n    const gradPreview = root.querySelector('#gradPreview');\n    const gradCss = root.querySelector('#gradCss');\n    const updateGrad = () => {\n        const val = `linear-gradient(135deg, ${gradColor1.value}, ${gradColor2.value})`;\n        gradPreview.style.background = val;\n        gradCss.textContent = `background: ${val};`;\n    };\n    gradColor1.oninput = updateGrad;\n    gradColor2.oninput = updateGrad;\n\n    \/\/ 4. Box Shadow Generator\n    const shX = root.querySelector('#shX');\n    const shY = root.querySelector('#shY');\n    const shBlur = root.querySelector('#shBlur');\n    const shSpread = root.querySelector('#shSpread');\n    const shTarget = root.querySelector('#shBoxTarget');\n    const shCss = root.querySelector('#shCss');\n    const updateShadow = () => {\n        root.querySelector('#shXVal').textContent = shX.value;\n        root.querySelector('#shYVal').textContent = shY.value;\n        root.querySelector('#shBlurVal').textContent = shBlur.value;\n        root.querySelector('#shSpreadVal').textContent = shSpread.value;\n        const val = `${shX.value}px ${shY.value}px ${shBlur.value}px ${shSpread.value}px rgba(0,0,0,0.15)`;\n        shTarget.style.boxShadow = val;\n        shCss.textContent = `box-shadow: ${val};`;\n    };\n    [shX, shY, shBlur, shSpread].forEach(el => el.oninput = updateShadow);\n\n    \/\/ 5. Border Radius Generator\n    const radInput = root.querySelector('#radInput');\n    const radBox = root.querySelector('#radBox');\n    const radCss = root.querySelector('#radCss');\n    radInput.oninput = () => {\n        root.querySelector('#radVal').textContent = radInput.value;\n        radBox.style.borderRadius = radInput.value + 'px';\n        radCss.textContent = `border-radius: ${radInput.value}px;`;\n    };\n\n    \/\/ 6. Flexbox Gen\n    const flexJustify = root.querySelector('#flexJustify');\n    const flexAlign = root.querySelector('#flexAlign');\n    const flexPreview = root.querySelector('#flexPreview');\n    const flexCss = root.querySelector('#flexCss');\n    const updateFlex = () => {\n        flexPreview.style.justifyContent = flexJustify.value;\n        flexPreview.style.alignItems = flexAlign.value;\n        flexCss.textContent = `display: flex;\\njustify-content: ${flexJustify.value};\\nalign-items: ${flexAlign.value};\\ngap: 10px;`;\n    };\n    flexJustify.onchange = updateFlex;\n    flexAlign.onchange = updateFlex;\n\n    \/\/ 7. Grid Gen\n    const gridCols = root.querySelector('#gridCols');\n    const gridGap = root.querySelector('#gridGap');\n    const gridPreview = root.querySelector('#gridPreview');\n    const gridCss = root.querySelector('#gridCss');\n    const updateGrid = () => {\n        gridPreview.style.gridTemplateColumns = gridCols.value;\n        gridPreview.style.gap = gridGap.value;\n        gridCss.textContent = `display: grid;\\ngrid-template-columns: ${gridCols.value};\\ngap: ${gridGap.value};`;\n    };\n    gridCols.oninput = updateGrid;\n    gridGap.oninput = updateGrid;\n\n    \/\/ 8. SVG Viewer\n    const svgInput = root.querySelector('#svgInput');\n    const svgPreviewBox = root.querySelector('#svgPreviewBox');\n    root.querySelector('#svgRenderBtn').onclick = () => {\n        svgPreviewBox.innerHTML = svgInput.value.trim() || \"<span style='color:#64748b;'>No SVG provided<\/span>\";\n        showToast(\"SVG Rendered!\");\n    };\n\n    \/\/ 9. SVG Optimizer\n    const svgOptInput = root.querySelector('#svgOptInput');\n    const svgOptOutput = root.querySelector('#svgOptOutput');\n    root.querySelector('#svgOptBtn').onclick = () => {\n        let val = svgOptInput.value.trim();\n        if (val) {\n            val = val.replace(\/<!--[\\s\\S]*?-->\/g, '') \/\/ Remove comments\n                     .replace(\/>\\s+<\/g, '><')         \/\/ Remove spaces between tags\n                     .replace(\/\\s{2,}\/g, ' ')         \/\/ Collapse inner spaces\n                     .replace(\/[\\r\\n\\t]+\/g, ' ');     \/\/ Remove line breaks and tabs\n            \n            svgOptOutput.textContent = val;\n            showToast(\"SVG Optimized!\");\n        }\n    };\n\n    \/\/ 10. QR Code Gen (Now using real API for scanning compatibility)\n    const qrInput = root.querySelector('#qrInput');\n    const qrRealImg = root.querySelector('#qrRealImg');\n    \n    const generateQR = () => {\n        const text = qrInput.value.trim() || \"https:\/\/example.com\";\n        \/\/ Generates a functioning QR via free reliable API\n        qrRealImg.src = `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=200x200&data=${encodeURIComponent(text)}`;\n        showToast(\"QR Code generated!\");\n    };\n    \n    root.querySelector('#qrGenBtn').onclick = generateQR;\n    \/\/ Initial Render\n    generateQR();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfa8 Tier 2 High Traffic Dev Utilities Toggle Theme Color Picker HEX \u2194 RGB \u2194 HSL CSS Gradient Box Shadow Border Radius Flexbox Gen CSS Grid Gen SVG Viewer SVG Optimizer QR Code Gen Select Color Selected HEX Value Preview Box Enter HEX (e.g. #2563eb) Convert Color RGB Output HSL Output Color 1 Color 2 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-619","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=619"}],"version-history":[{"count":2,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/619\/revisions"}],"predecessor-version":[{"id":746,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/619\/revisions\/746"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}