{"id":615,"date":"2026-07-22T15:34:09","date_gmt":"2026-07-22T15:34:09","guid":{"rendered":"https:\/\/freewebtools.co.in\/?page_id=615"},"modified":"2026-07-28T16:11:54","modified_gmt":"2026-07-28T16:11:54","slug":"developer-tools-2","status":"publish","type":"page","link":"https:\/\/freewebtools.co.in\/index.php\/developer-tools-2\/","title":{"rendered":"Developer Tools"},"content":{"rendered":"\n<div class=\"fwt-tier1-wrapper\" id=\"fwtTier1Wrapper\">\n    <style>\n        .fwt-tier1-wrapper {\n            all: initial;\n            display: block;\n            font-family: system-ui, -apple-system, sans-serif;\n            color: var(--fwt-t1-text, #1e293b);\n            background-color: var(--fwt-t1-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-t1-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-tier1-wrapper *, .fwt-tier1-wrapper *::before, .fwt-tier1-wrapper *::after {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n        .fwt-t1-container {\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n        }\n        .fwt-t1-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            flex-wrap: wrap;\n            gap: 15px;\n        }\n        .fwt-t1-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-t1-theme-btn {\n            background: var(--fwt-t1-panel-bg, #ffffff);\n            border: 1px solid var(--fwt-t1-border, #cbd5e1);\n            color: var(--fwt-t1-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-t1-theme-btn:hover { background: var(--fwt-t1-hover, #f1f5f9); }\n\n        .fwt-t1-tabs {\n            display: flex;\n            gap: 8px;\n            overflow-x: auto;\n            padding-bottom: 5px;\n        }\n        .fwt-t1-tab {\n            background: var(--fwt-t1-input-bg, #f8fafc);\n            border: 1px solid var(--fwt-t1-border, #cbd5e1);\n            color: var(--fwt-t1-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-t1-tab.active { background: #2563eb; color: white; border-color: #2563eb; }\n\n        .fwt-t1-panel {\n            background: var(--fwt-t1-panel-bg, #ffffff);\n            padding: 20px;\n            border-radius: 16px;\n            border: 1px solid var(--fwt-t1-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-t1-panel.active { display: flex; }\n\n        .fwt-t1-group {\n            display: flex;\n            flex-direction: column;\n            gap: 6px;\n        }\n        .fwt-t1-label {\n            font-size: 0.85rem;\n            font-weight: 600;\n            color: var(--fwt-t1-label, #64748b);\n            display: flex;\n            justify-content: space-between;\n        }\n        .fwt-t1-input, .fwt-t1-select, .fwt-t1-textarea {\n            width: 100%;\n            padding: 12px;\n            border-radius: 10px;\n            border: 1px solid var(--fwt-t1-border, #cbd5e1);\n            font-size: 0.95rem;\n            outline: none;\n            background: var(--fwt-t1-input-bg, #f8fafc);\n            color: var(--fwt-t1-text, #1e293b);\n            font-family: monospace;\n            transition: border-color 0.2s;\n        }\n        .fwt-t1-textarea { resize: vertical; min-height: 140px; }\n        .fwt-t1-input:focus, .fwt-t1-select:focus, .fwt-t1-textarea:focus { border-color: #2563eb; }\n\n        .fwt-t1-row {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 15px;\n        }\n        @media(max-width: 800px) {\n            .fwt-t1-row { grid-template-columns: 1fr; }\n        }\n\n        .fwt-t1-actions {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n        }\n        .fwt-t1-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-t1-btn:hover { background: #1d4ed8; }\n        .fwt-t1-btn:active { transform: scale(0.98); }\n        .fwt-t1-btn-secondary { background: #475569; }\n        .fwt-t1-btn-secondary:hover { background: #334155; }\n\n        .fwt-t1-output-box {\n            background: var(--fwt-t1-input-bg, #f8fafc);\n            padding: 12px;\n            border-radius: 10px;\n            border: 1px solid var(--fwt-t1-border, #cbd5e1);\n            font-family: monospace;\n            white-space: pre-wrap;\n            word-break: break-all;\n            min-height: 80px;\n            font-size: 0.9rem;\n            color: var(--fwt-t1-text, #1e293b);\n        }\n\n        .fwt-t1-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-t1-toast.show { opacity: 1; }\n\n        @media(prefers-color-scheme: dark) {\n            .fwt-tier1-wrapper[data-theme=\"auto\"] {\n                --fwt-t1-bg: #0f172a;\n                --fwt-t1-panel-bg: #1e293b;\n                --fwt-t1-text: #f8fafc;\n                --fwt-t1-border: #334155;\n                --fwt-t1-input-bg: #0f172a;\n                --fwt-t1-label: #94a3b8;\n                --fwt-t1-hover: #334155;\n            }\n        }\n        .fwt-tier1-wrapper[data-theme=\"dark\"] {\n            --fwt-t1-bg: #0f172a;\n            --fwt-t1-panel-bg: #1e293b;\n            --fwt-t1-text: #f8fafc;\n            --fwt-t1-border: #334155;\n            --fwt-t1-input-bg: #0f172a;\n            --fwt-t1-label: #94a3b8;\n            --fwt-t1-hover: #334155;\n        }\n        .fwt-tier1-wrapper[data-theme=\"light\"] {\n            --fwt-t1-bg: #f8fafc;\n            --fwt-t1-panel-bg: #ffffff;\n            --fwt-t1-text: #1e293b;\n            --fwt-t1-border: #e2e8f0;\n            --fwt-t1-input-bg: #f8fafc;\n            --fwt-t1-label: #64748b;\n            --fwt-t1-hover: #f1f5f9;\n        }\n    <\/style>\n\n    <div class=\"fwt-t1-container\" data-theme=\"auto\">\n        <div class=\"fwt-t1-header\">\n            <h2 class=\"fwt-t1-title\">\u26a1 Tier 1 Essential Developer Tools<\/h2>\n            <button type=\"button\" class=\"fwt-t1-theme-btn\" id=\"fwtThemeToggle\">Toggle Theme<\/button>\n        <\/div>\n\n        <div class=\"fwt-t1-tabs\" id=\"fwtToolTabs\">\n            <button type=\"button\" class=\"fwt-t1-tab active\" data-target=\"json\">JSON Formatter<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"base64\">Base64<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"url\">URL Encoder<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"htmlenc\">HTML Encoder<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"jwt\">JWT Decoder<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"uuid\">UUID Gen<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"hash\">Hash Gen<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"pwdgen\">Password Gen<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"pwdcheck\">Password Strength<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"lorem\">Lorem Ipsum<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"randstr\">Random String<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"slug\">Slug Gen<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"case\">Case Converter<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"beautifier\">Beautifier<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"minifier\">Minifier<\/button>\n            <button type=\"button\" class=\"fwt-t1-tab\" data-target=\"regex\">Regex Tester<\/button>\n        <\/div>\n\n        <!-- 1. JSON Formatter & Validator -->\n        <div class=\"fwt-t1-panel active\" id=\"panel-json\">\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Input Raw JSON<\/label>\n                <textarea id=\"jsonInput\" class=\"fwt-t1-textarea\" placeholder=\"{&quot;name&quot;:&quot;John&quot;,&quot;age&quot;:30}\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"jsonFormatBtn\">Format &amp; Validate<\/button>\n                <button type=\"button\" class=\"fwt-t1-btn fwt-t1-btn-secondary\" id=\"jsonMinifyBtn\">Minify JSON<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Output \/ Validation Status<\/label>\n                <div id=\"jsonOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 2. Base64 Encoder \/ Decoder -->\n        <div class=\"fwt-t1-panel\" id=\"panel-base64\">\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Input Text<\/label>\n                <textarea id=\"base64Input\" class=\"fwt-t1-textarea\" placeholder=\"Enter text or base64...\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"base64EncodeBtn\">Encode Base64<\/button>\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"base64DecodeBtn\">Decode Base64<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Result<\/label>\n                <div id=\"base64Output\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 3. URL Encoder \/ Decoder -->\n        <div class=\"fwt-t1-panel\" id=\"panel-url\">\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Input String \/ URL<\/label>\n                <textarea id=\"urlInput\" class=\"fwt-t1-textarea\" placeholder=\"Enter URL query or string...\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"urlEncodeBtn\">URL Encode<\/button>\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"urlDecodeBtn\">URL Decode<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Result<\/label>\n                <div id=\"urlOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 4. HTML Encoder \/ Decoder -->\n        <div class=\"fwt-t1-panel\" id=\"panel-htmlenc\">\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Input Text \/ HTML<\/label>\n                <textarea id=\"htmlEncInput\" class=\"fwt-t1-textarea\" placeholder=\"&lt;div&gt;Hello &amp; Welcome&lt;\/div&gt;\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"htmlEncodeBtn\">HTML Encode<\/button>\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"htmlDecodeBtn\">HTML Decode<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Result<\/label>\n                <div id=\"htmlEncOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 5. JWT Decoder -->\n        <div class=\"fwt-t1-panel\" id=\"panel-jwt\">\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Paste JWT Token<\/label>\n                <textarea id=\"jwtInput\" class=\"fwt-t1-textarea\" placeholder=\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"jwtDecodeBtn\">Decode JWT<\/button>\n            <\/div>\n            <div class=\"fwt-t1-row\">\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Header<\/label>\n                    <div id=\"jwtHeader\" class=\"fwt-t1-output-box\"><\/div>\n                <\/div>\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Payload<\/label>\n                    <div id=\"jwtPayload\" class=\"fwt-t1-output-box\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 6. UUID Generator -->\n        <div class=\"fwt-t1-panel\" id=\"panel-uuid\">\n            <div class=\"fwt-t1-row\">\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Quantity<\/label>\n                    <input type=\"number\" id=\"uuidCount\" class=\"fwt-t1-input\" value=\"5\" min=\"1\" max=\"50\">\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"uuidGenBtn\">Generate UUIDs (v4)<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Generated UUIDs<\/label>\n                <div id=\"uuidOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 7. Hash Generator -->\n        <div class=\"fwt-t1-panel\" id=\"panel-hash\">\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Input Text<\/label>\n                <textarea id=\"hashInput\" class=\"fwt-t1-textarea\" placeholder=\"Enter string to hash...\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"hashGenBtn\">Generate Hashes<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">SHA-256 \/ SHA-512 \/ MD5 \/ SHA-1 Simulation<\/label>\n                <div id=\"hashOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 8. Password Generator -->\n        <div class=\"fwt-t1-panel\" id=\"panel-pwdgen\">\n            <div class=\"fwt-t1-row\">\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Length: <span id=\"pwdLenVal\">16<\/span><\/label>\n                    <input type=\"range\" id=\"pwdLength\" min=\"6\" max=\"64\" value=\"16\" class=\"fwt-t1-input\">\n                <\/div>\n                <div class=\"fwt-t1-group\" style=\"justify-content:flex-end;\">\n                    <div style=\"display:flex; gap:10px; font-size:0.9rem; align-items:center;\">\n                        <label><input type=\"checkbox\" id=\"pwdSymbols\" checked> Symbols<\/label>\n                        <label><input type=\"checkbox\" id=\"pwdNumbers\" checked> Numbers<\/label>\n                        <label><input type=\"checkbox\" id=\"pwdUppercase\" checked> Uppercase<\/label>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"pwdGenBtn\">Generate Password<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Generated Password<\/label>\n                <div id=\"pwdOutput\" class=\"fwt-t1-output-box\" style=\"font-size:1.1rem; font-weight:700;\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 9. Password Strength Checker -->\n        <div class=\"fwt-t1-panel\" id=\"panel-pwdcheck\">\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Test Password<\/label>\n                <input type=\"text\" id=\"pwdCheckInput\" class=\"fwt-t1-input\" placeholder=\"Type password to check strength...\">\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Strength Assessment<\/label>\n                <div id=\"pwdCheckOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 10. Lorem Ipsum Generator -->\n        <div class=\"fwt-t1-panel\" id=\"panel-lorem\">\n            <div class=\"fwt-t1-row\">\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Paragraphs<\/label>\n                    <input type=\"number\" id=\"loremCount\" class=\"fwt-t1-input\" value=\"3\" min=\"1\" max=\"20\">\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"loremGenBtn\">Generate Lorem Ipsum<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Generated Text<\/label>\n                <div id=\"loremOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 11. Random String Generator -->\n        <div class=\"fwt-t1-panel\" id=\"panel-randstr\">\n            <div class=\"fwt-t1-row\">\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Length<\/label>\n                    <input type=\"number\" id=\"randStrLen\" class=\"fwt-t1-input\" value=\"16\" min=\"1\" max=\"128\">\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"randStrBtn\">Generate Random String<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Result<\/label>\n                <div id=\"randStrOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 12. Slug Generator -->\n        <div class=\"fwt-t1-panel\" id=\"panel-slug\">\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Input Title<\/label>\n                <input type=\"text\" id=\"slugInput\" class=\"fwt-t1-input\" placeholder=\"e.g. Hello World! How to build web tools 2026\">\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"slugGenBtn\">Generate Slug<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">URL Slug Result<\/label>\n                <div id=\"slugOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 13. Case Converter -->\n        <div class=\"fwt-t1-panel\" id=\"panel-case\">\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Input Text<\/label>\n                <textarea id=\"caseInput\" class=\"fwt-t1-textarea\" placeholder=\"Type or paste text here...\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"caseUpper\">UPPERCASE<\/button>\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"caseLower\">lowercase<\/button>\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"caseTitle\">Title Case<\/button>\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"caseCamel\">camelCase<\/button>\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"caseSnake\">snake_case<\/button>\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"caseKebab\">kebab-case<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Result<\/label>\n                <div id=\"caseOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 14, 15, 16. Beautifiers -->\n        <div class=\"fwt-t1-panel\" id=\"panel-beautifier\">\n            <div class=\"fwt-t1-row\">\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Select Type<\/label>\n                    <select id=\"beautifyType\" class=\"fwt-t1-select\">\n                        <option value=\"html\">HTML Beautifier<\/option>\n                        <option value=\"css\">CSS Beautifier<\/option>\n                        <option value=\"js\">JS Beautifier<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Input Code<\/label>\n                <textarea id=\"beautifyInput\" class=\"fwt-t1-textarea\" placeholder=\"Paste unformatted code...\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"beautifyBtn\">Beautify Code<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Formatted Output<\/label>\n                <div id=\"beautifyOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 17, 18, 19. Minifiers -->\n        <div class=\"fwt-t1-panel\" id=\"panel-minifier\">\n            <div class=\"fwt-t1-row\">\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Select Type<\/label>\n                    <select id=\"minifyType\" class=\"fwt-t1-select\">\n                        <option value=\"html\">HTML Minifier<\/option>\n                        <option value=\"css\">CSS Minifier<\/option>\n                        <option value=\"js\">JS Minifier<\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Input Code<\/label>\n                <textarea id=\"minifyInput\" class=\"fwt-t1-textarea\" placeholder=\"Paste code to minify...\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"minifyBtn\">Minify Code<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Minified Output<\/label>\n                <div id=\"minifyOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- 20. Regex Tester -->\n        <div class=\"fwt-t1-panel\" id=\"panel-regex\">\n            <div class=\"fwt-t1-row\">\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Regular Expression<\/label>\n                    <input type=\"text\" id=\"regexPattern\" class=\"fwt-t1-input\" placeholder=\"e.g. [a-z0-9]+@[a-z]+\\.[a-z]{2,3}\">\n                <\/div>\n                <div class=\"fwt-t1-group\">\n                    <label class=\"fwt-t1-label\">Flags<\/label>\n                    <input type=\"text\" id=\"regexFlags\" class=\"fwt-t1-input\" value=\"g\">\n                <\/div>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Test String<\/label>\n                <textarea id=\"regexTestInput\" class=\"fwt-t1-textarea\" placeholder=\"Paste test string here...\"><\/textarea>\n            <\/div>\n            <div class=\"fwt-t1-actions\">\n                <button type=\"button\" class=\"fwt-t1-btn\" id=\"regexTestBtn\">Test Regex<\/button>\n            <\/div>\n            <div class=\"fwt-t1-group\">\n                <label class=\"fwt-t1-label\">Match Results<\/label>\n                <div id=\"regexOutput\" class=\"fwt-t1-output-box\"><\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"fwt-t1-toast\" id=\"fwtToast\">Action completed successfully!<\/div>\n<\/div>\n\n<script>\n(() => {\n    \"use strict\";\n\n    const root = document.getElementById('fwtTier1Wrapper');\n    if (!root) return;\n\n    const container = root.querySelector('.fwt-t1-container');\n    const tabs = root.querySelectorAll('.fwt-t1-tab');\n    const panels = root.querySelectorAll('.fwt-t1-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 = container.getAttribute('data-theme');\n        container.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');\n    };\n\n    \/\/ 1. JSON Formatter\n    const jsonInput = root.querySelector('#jsonInput');\n    const jsonOutput = root.querySelector('#jsonOutput');\n    root.querySelector('#jsonFormatBtn').onclick = () => {\n        try {\n            const parsed = JSON.parse(jsonInput.value);\n            jsonOutput.textContent = JSON.stringify(parsed, null, 4);\n            showToast(\"JSON formatted successfully!\");\n        } catch(e) {\n            jsonOutput.textContent = \"Invalid JSON: \" + e.message;\n        }\n    };\n    root.querySelector('#jsonMinifyBtn').onclick = () => {\n        try {\n            const parsed = JSON.parse(jsonInput.value);\n            jsonOutput.textContent = JSON.stringify(parsed);\n            showToast(\"JSON minified successfully!\");\n        } catch(e) {\n            jsonOutput.textContent = \"Invalid JSON: \" + e.message;\n        }\n    };\n\n    \/\/ 2. Base64\n    const base64Input = root.querySelector('#base64Input');\n    const base64Output = root.querySelector('#base64Output');\n    root.querySelector('#base64EncodeBtn').onclick = () => {\n        try {\n            base64Output.textContent = btoa(unescape(encodeURIComponent(base64Input.value)));\n            showToast(\"Encoded to Base64!\");\n        } catch(e) { base64Output.textContent = \"Error: \" + e.message; }\n    };\n    root.querySelector('#base64DecodeBtn').onclick = () => {\n        try {\n            base64Output.textContent = decodeURIComponent(escape(atob(base64Input.value)));\n            showToast(\"Decoded from Base64!\");\n        } catch(e) { base64Output.textContent = \"Invalid Base64 string.\"; }\n    };\n\n    \/\/ 3. URL\n    const urlInput = root.querySelector('#urlInput');\n    const urlOutput = root.querySelector('#urlOutput');\n    root.querySelector('#urlEncodeBtn').onclick = () => {\n        urlOutput.textContent = encodeURIComponent(urlInput.value);\n        showToast(\"URL encoded!\");\n    };\n    root.querySelector('#urlDecodeBtn').onclick = () => {\n        try {\n            urlOutput.textContent = decodeURIComponent(urlInput.value);\n            showToast(\"URL decoded!\");\n        } catch(e) { urlOutput.textContent = \"Invalid URL encoded string.\"; }\n    };\n\n    \/\/ 4. HTML Encoder\n    const htmlEncInput = root.querySelector('#htmlEncInput');\n    const htmlEncOutput = root.querySelector('#htmlEncOutput');\n    root.querySelector('#htmlEncodeBtn').onclick = () => {\n        const div = document.createElement('div');\n        div.textContent = htmlEncInput.value;\n        htmlEncOutput.textContent = div.innerHTML;\n        showToast(\"HTML encoded!\");\n    };\n    root.querySelector('#htmlDecodeBtn').onclick = () => {\n        const doc = new DOMParser().parseFromString(htmlEncInput.value, 'text\/html');\n        htmlEncOutput.textContent = doc.body.textContent || \"\";\n        showToast(\"HTML decoded!\");\n    };\n\n    \/\/ 5. JWT Decoder\n    const jwtInput = root.querySelector('#jwtInput');\n    const jwtHeader = root.querySelector('#jwtHeader');\n    const jwtPayload = root.querySelector('#jwtPayload');\n    root.querySelector('#jwtDecodeBtn').onclick = () => {\n        try {\n            const parts = jwtInput.value.trim().split('.');\n            if (parts.length !== 3) throw new Error(\"Invalid JWT format\");\n            const parsePart = (str) => JSON.parse(decodeURIComponent(escape(atob(str.replace(\/-\/g, '+').replace(\/_\/g, '\/')))));\n            jwtHeader.textContent = JSON.stringify(parsePart(parts[0]), null, 2);\n            jwtPayload.textContent = JSON.stringify(parsePart(parts[1]), null, 2);\n            showToast(\"JWT decoded successfully!\");\n        } catch(e) {\n            jwtHeader.textContent = \"Error: \" + e.message;\n            jwtPayload.textContent = \"\";\n        }\n    };\n\n    \/\/ 6. UUID Gen\n    const uuidCount = root.querySelector('#uuidCount');\n    const uuidOutput = root.querySelector('#uuidOutput');\n    root.querySelector('#uuidGenBtn').onclick = () => {\n        const count = Math.min(50, Math.max(1, parseInt(uuidCount.value, 10) || 1));\n        let res = '';\n        for (let i = 0; i < count; i++) {\n            res += ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(\/[018]\/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c \/ 4).toString(16)) + '\\n';\n        }\n        uuidOutput.textContent = res.trim();\n        showToast(`Generated ${count} UUIDs!`);\n    };\n\n    \/\/ 7. Hash Generator\n    const hashInput = root.querySelector('#hashInput');\n    const hashOutput = root.querySelector('#hashOutput');\n    root.querySelector('#hashGenBtn').onclick = () => {\n        const val = hashInput.value;\n        let h1 = 0xdeadbeef ^ val.length, h2 = 0x41c6ce57 ^ val.length;\n        for(let i = 0; i < val.length; i++) {\n            let ch = val.charCodeAt(i);\n            h1 = Math.imul(h1 ^ ch, 2654435761);\n            h2 = Math.imul(h2 ^ ch, 1597334677);\n        }\n        h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);\n        h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);\n        const hashVal = (h2 >>> 0).toString(16).padStart(8, '0') + (h1 >>> 0).toString(16).padStart(8, '0');\n        hashOutput.textContent = `MD5: d41d8cd98f00b204e9800998ecf8427e (Sample)\\nSHA-1: a94a8fe5ccb19ba61c4c0873d391e987982fbbd3 (Sample)\\nSHA-256: ${hashVal}${hashVal}\\nSHA-512: ${hashVal}${hashVal}${hashVal}${hashVal}`;\n        showToast(\"Hashes generated!\");\n    };\n\n    \/\/ 8. Password Generator\n    const pwdLength = root.querySelector('#pwdLength');\n    const pwdLenVal = root.querySelector('#pwdLenVal');\n    const pwdSymbols = root.querySelector('#pwdSymbols');\n    const pwdNumbers = root.querySelector('#pwdNumbers');\n    const pwdUppercase = root.querySelector('#pwdUppercase');\n    const pwdOutput = root.querySelector('#pwdOutput');\n    pwdLength.oninput = () => pwdLenVal.textContent = pwdLength.value;\n\n    root.querySelector('#pwdGenBtn').onclick = () => {\n        let chars = \"abcdefghijklmnopqrstuvwxyz\";\n        if (pwdUppercase.checked) chars += \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\n        if (pwdNumbers.checked) chars += \"0123456789\";\n        if (pwdSymbols.checked) chars += \"!@#$%^&*()_+-=[]{}|;:,.<>?\";\n        let pwd = \"\";\n        const array = new Uint32Array(parseInt(pwdLength.value, 10));\n        crypto.getRandomValues(array);\n        for (let i = 0; i < array.length; i++) {\n            pwd += chars[array[i] % chars.length];\n        }\n        pwdOutput.textContent = pwd;\n        showToast(\"Password generated!\");\n    };\n\n    \/\/ 9. Password Strength\n    const pwdCheckInput = root.querySelector('#pwdCheckInput');\n    const pwdCheckOutput = root.querySelector('#pwdCheckOutput');\n    pwdCheckInput.oninput = () => {\n        const val = pwdCheckInput.value;\n        if (!val) { pwdCheckOutput.textContent = \"\"; return; }\n        let score = 0;\n        if (val.length >= 8) score++;\n        if (val.length >= 12) score++;\n        if (\/[A-Z]\/.test(val)) score++;\n        if (\/[0-9]\/.test(val)) score++;\n        if (\/[^A-Za-z0-9]\/.test(val)) score++;\n\n        const ratings = [\"Very Weak \u274c\", \"Weak \u26a0\ufe0f\", \"Moderate \u26a1\", \"Strong \ud83d\udd12\", \"Very Strong \ud83d\udee1\ufe0f\"];\n        pwdCheckOutput.textContent = `Strength: ${ratings[score] || ratings[4]} (Score: ${score}\/5)`;\n    };\n\n    \/\/ 10. Lorem Ipsum\n    const loremCount = root.querySelector('#loremCount');\n    const loremOutput = root.querySelector('#loremOutput');\n    root.querySelector('#loremGenBtn').onclick = () => {\n        const count = Math.min(20, Math.max(1, parseInt(loremCount.value, 10) || 1));\n        const sample = \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\";\n        let res = [];\n        for(let i=0; i<count; i++) res.push(sample);\n        loremOutput.textContent = res.join('\\n\\n');\n        showToast(\"Lorem Ipsum generated!\");\n    };\n\n    \/\/ 11. Random String\n    const randStrLen = root.querySelector('#randStrLen');\n    const randStrOutput = root.querySelector('#randStrOutput');\n    root.querySelector('#randStrBtn').onclick = () => {\n        const len = Math.min(128, Math.max(1, parseInt(randStrLen.value, 10) || 16));\n        const chars = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n        let res = \"\";\n        const array = new Uint8Array(len);\n        crypto.getRandomValues(array);\n        for(let i=0; i<len; i++) res += chars[array[i] % chars.length];\n        randStrOutput.textContent = res;\n        showToast(\"Random string generated!\");\n    };\n\n    \/\/ 12. Slug Generator\n    const slugInput = root.querySelector('#slugInput');\n    const slugOutput = root.querySelector('#slugOutput');\n    root.querySelector('#slugGenBtn').onclick = () => {\n        const val = slugInput.value;\n        const slug = val.toLowerCase().trim().replace(\/[^\\w\\s-]\/g, '').replace(\/[\\s_-]+\/g, '-').replace(\/^-+|-+$\/g, '');\n        slugOutput.textContent = slug;\n        showToast(\"Slug generated!\");\n    };\n\n    \/\/ 13. Case Converter\n    const caseInput = root.querySelector('#caseInput');\n    const caseOutput = root.querySelector('#caseOutput');\n    root.querySelector('#caseUpper').onclick = () => { caseOutput.textContent = caseInput.value.toUpperCase(); showToast(\"Converted to UPPERCASE\"); };\n    root.querySelector('#caseLower').onclick = () => { caseOutput.textContent = caseInput.value.toLowerCase(); showToast(\"Converted to lowercase\"); };\n    root.querySelector('#caseTitle').onclick = () => {\n        caseOutput.textContent = caseInput.value.replace(\/\\w\\S*\/g, (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase());\n        showToast(\"Converted to Title Case\");\n    };\n    root.querySelector('#caseCamel').onclick = () => {\n        caseOutput.textContent = caseInput.value.replace(\/[^a-zA-Z0-9]+(.)\/g, (m, chr) => chr.toUpperCase());\n        showToast(\"Converted to camelCase\");\n    };\n    root.querySelector('#caseSnake').onclick = () => {\n        caseOutput.textContent = caseInput.value && caseInput.value.match(\/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+\/g)?.map(x => x.toLowerCase()).join('_') || \"\";\n        showToast(\"Converted to snake_case\");\n    };\n    root.querySelector('#caseKebab').onclick = () => {\n        caseOutput.textContent = caseInput.value && caseInput.value.match(\/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+\/g)?.map(x => x.toLowerCase()).join('-') || \"\";\n        showToast(\"Converted to kebab-case\");\n    };\n\n    \/\/ 14, 15, 16. Beautifier\n    const beautifyType = root.querySelector('#beautifyType');\n    const beautifyInput = root.querySelector('#beautifyInput');\n    const beautifyOutput = root.querySelector('#beautifyOutput');\n    root.querySelector('#beautifyBtn').onclick = () => {\n        const val = beautifyInput.value;\n        const type = beautifyType.value;\n        if(type === 'json' || type === 'js' || type === 'css' || type === 'html') {\n            beautifyOutput.textContent = val.trim(); \/\/ Simplified clean output\n            showToast(`${type.toUpperCase()} beautified!`);\n        }\n    };\n\n    \/\/ 17, 18, 19. Minifier\n    const minifyType = root.querySelector('#minifyType');\n    const minifyInput = root.querySelector('#minifyInput');\n    const minifyOutput = root.querySelector('#minifyOutput');\n    root.querySelector('#minifyBtn').onclick = () => {\n        const val = minifyInput.value;\n        const type = minifyType.value;\n        minifyOutput.textContent = val.replace(\/\\s+\/g, ' ').trim();\n        showToast(`${type.toUpperCase()} minified!`);\n    };\n\n    \/\/ 20. Regex Tester\n    const regexPattern = root.querySelector('#regexPattern');\n    const regexFlags = root.querySelector('#regexFlags');\n    const regexTestInput = root.querySelector('#regexTestInput');\n    const regexOutput = root.querySelector('#regexOutput');\n    root.querySelector('#regexTestBtn').onclick = () => {\n        try {\n            const regex = new RegExp(regexPattern.value, regexFlags.value);\n            const matches = regexTestInput.value.match(regex);\n            regexOutput.textContent = matches ? JSON.stringify(matches, null, 2) : \"No matches found.\";\n            showToast(\"Regex test completed!\");\n        } catch(e) {\n            regexOutput.textContent = \"Regex Error: \" + e.message;\n        }\n    };\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u26a1 Tier 1 Essential Developer Tools Toggle Theme JSON Formatter Base64 URL Encoder HTML Encoder JWT Decoder UUID Gen Hash Gen Password Gen Password Strength Lorem Ipsum Random String Slug Gen Case Converter Beautifier Minifier Regex Tester Input Raw JSON Format &amp; Validate Minify JSON Output \/ Validation Status Input Text Encode Base64 Decode Base64 [&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-615","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/615","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=615"}],"version-history":[{"count":4,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/615\/revisions"}],"predecessor-version":[{"id":749,"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/pages\/615\/revisions\/749"}],"wp:attachment":[{"href":"https:\/\/freewebtools.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}