{"id":347,"date":"2025-07-26T14:44:25","date_gmt":"2025-07-26T14:44:25","guid":{"rendered":"https:\/\/vijaypandit.in\/?page_id=347"},"modified":"2025-07-26T14:44:25","modified_gmt":"2025-07-26T14:44:25","slug":"base64-decoder","status":"publish","type":"page","link":"https:\/\/vijaypandit.in\/?page_id=347","title":{"rendered":"Base64 Decoder"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Base64 Decoder Tool<\/title>\n    <style>\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        .gp-base64-decoder-tool {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            background-color: #f5f5f5;\n            min-height: 100vh;\n            padding: 20px;\n        }\n\n        .gp-base64-decoder-container {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        .gp-base64-decoder-header {\n            background: white;\n            padding: 25px;\n            border-radius: 12px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            margin-bottom: 20px;\n            display: flex;\n            align-items: center;\n            gap: 20px;\n        }\n\n        .gp-base64-decoder-icon {\n            width: 80px;\n            height: 80px;\n            background: linear-gradient(135deg, #4285f4, #1a73e8);\n            border-radius: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 18px;\n            font-weight: 900;\n            color: white;\n            flex-shrink: 0;\n        }\n\n        .gp-base64-decoder-title-section h1 {\n            font-size: 32px;\n            color: #000;\n            font-weight: 900;\n            margin-bottom: 8px;\n        }\n\n        .gp-base64-decoder-title-section p {\n            font-size: 18px;\n            color: #000;\n            font-weight: 700;\n        }\n\n        .gp-base64-decoder-main {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 20px;\n            margin-bottom: 20px;\n        }\n\n        .gp-base64-decoder-section {\n            background: white;\n            border-radius: 12px;\n            padding: 25px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            height: fit-content;\n        }\n\n        .gp-base64-decoder-section h2 {\n            font-size: 20px;\n            color: #000;\n            font-weight: 900;\n            margin-bottom: 15px;\n            display: flex;\n            align-items: center;\n            gap: 10px;\n        }\n\n        .gp-base64-decoder-textarea {\n            width: 100%;\n            height: 300px;\n            border: 2px solid #e0e0e0;\n            border-radius: 8px;\n            padding: 15px;\n            font-family: 'Segoe UI', monospace;\n            font-size: 14px;\n            font-weight: 700;\n            color: #000;\n            resize: vertical;\n            transition: border-color 0.3s ease;\n            line-height: 1.5;\n            word-break: break-all;\n        }\n\n        .gp-base64-decoder-textarea:focus {\n            outline: none;\n            border-color: #4285f4;\n        }\n\n        .gp-base64-decoder-controls {\n            margin-top: 15px;\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 15px;\n        }\n\n        .gp-base64-decoder-control-group {\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n        }\n\n        .gp-base64-decoder-control-row {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n\n        .gp-base64-decoder-control-row label {\n            font-weight: 700;\n            color: #000;\n            font-size: 14px;\n            min-width: 80px;\n        }\n\n        .gp-base64-decoder-select {\n            padding: 8px 12px;\n            border: 2px solid #e0e0e0;\n            border-radius: 6px;\n            font-family: 'Segoe UI', sans-serif;\n            font-weight: 700;\n            color: #000;\n            background: white;\n            cursor: pointer;\n            flex: 1;\n        }\n\n        .gp-base64-decoder-checkbox-group {\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            flex-wrap: wrap;\n        }\n\n        .gp-base64-decoder-checkbox-group input[type=\"checkbox\"] {\n            width: 18px;\n            height: 18px;\n            cursor: pointer;\n        }\n\n        .gp-base64-decoder-checkbox-group label {\n            font-weight: 700;\n            color: #000;\n            cursor: pointer;\n            font-size: 14px;\n            min-width: auto;\n        }\n\n        .gp-base64-decoder-button {\n            background: #000 !important;\n            color: white !important;\n            border: none;\n            padding: 12px 20px;\n            border-radius: 8px;\n            font-family: 'Segoe UI', sans-serif;\n            font-weight: 700;\n            font-size: 14px;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            justify-content: center;\n            text-decoration: none;\n        }\n\n        .gp-base64-decoder-button:hover {\n            background: #333 !important;\n            color: white !important;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(0,0,0,0.2);\n        }\n\n        .gp-base64-decoder-button:active {\n            transform: translateY(0);\n        }\n\n        .gp-base64-decoder-button.secondary {\n            background: #666 !important;\n            color: white !important;\n        }\n\n        .gp-base64-decoder-button.secondary:hover {\n            background: #555 !important;\n            color: white !important;\n        }\n\n        .gp-base64-decoder-actions {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n            gap: 12px;\n            margin-top: 15px;\n        }\n\n        .gp-base64-decoder-stats {\n            background: white;\n            border-radius: 12px;\n            padding: 25px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            margin-bottom: 20px;\n        }\n\n        .gp-base64-decoder-stats h2 {\n            font-size: 20px;\n            color: #000;\n            font-weight: 900;\n            margin-bottom: 15px;\n        }\n\n        .gp-base64-decoder-stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n            gap: 20px;\n        }\n\n        .gp-base64-decoder-stat {\n            text-align: center;\n        }\n\n        .gp-base64-decoder-stat-number {\n            font-size: 32px;\n            font-weight: 900;\n            color: #D97757;\n            display: block;\n            margin-bottom: 5px;\n            transition: all 0.3s ease;\n        }\n\n        .gp-base64-decoder-stat-label {\n            font-size: 14px;\n            font-weight: 900;\n            color: #000;\n        }\n\n        .gp-base64-decoder-description {\n            background: #CBCADC;\n            border-left: 4px solid #D97757;\n            padding: 20px;\n            border-radius: 8px;\n            margin-bottom: 20px;\n        }\n\n        .gp-base64-decoder-description h3 {\n            font-size: 18px;\n            color: #000;\n            font-weight: 900;\n            margin-bottom: 10px;\n        }\n\n        .gp-base64-decoder-description p {\n            font-size: 14px;\n            color: #000;\n            font-weight: 700;\n            line-height: 1.5;\n        }\n\n        .gp-base64-decoder-history {\n            background: white;\n            border-radius: 12px;\n            padding: 25px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            margin-bottom: 20px;\n        }\n\n        .gp-base64-decoder-history h2 {\n            font-size: 20px;\n            color: #000;\n            font-weight: 900;\n            margin-bottom: 15px;\n        }\n\n        .gp-base64-decoder-history-item {\n            background: #f8f9fa;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            padding: 12px;\n            margin-bottom: 10px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .gp-base64-decoder-history-text {\n            font-size: 14px;\n            color: #000;\n            font-weight: 700;\n            flex: 1;\n        }\n\n        .gp-base64-decoder-history-restore {\n            background: #4285f4;\n            color: white;\n            border: none;\n            padding: 6px 12px;\n            border-radius: 4px;\n            font-weight: 700;\n            font-size: 12px;\n            cursor: pointer;\n        }\n\n        .gp-base64-decoder-toast {\n            position: fixed;\n            top: 20px;\n            right: 20px;\n            background: #000;\n            color: white;\n            padding: 12px 20px;\n            border-radius: 8px;\n            font-weight: 700;\n            z-index: 1000;\n            transform: translateX(400px);\n            transition: transform 0.3s ease;\n        }\n\n        .gp-base64-decoder-toast.show {\n            transform: translateX(0);\n        }\n\n        .gp-base64-decoder-pulse {\n            animation: pulse 0.5s ease-in-out;\n        }\n\n        @keyframes pulse {\n            0% { transform: scale(1); }\n            50% { transform: scale(1.1); }\n            100% { transform: scale(1); }\n        }\n\n        .gp-base64-decoder-preview {\n            background: #f8f9fa;\n            border: 1px solid #e0e0e0;\n            border-radius: 6px;\n            padding: 15px;\n            margin-top: 15px;\n            font-family: 'Segoe UI', sans-serif;\n            font-size: 14px;\n            font-weight: 700;\n            color: #000;\n            max-height: 150px;\n            overflow-y: auto;\n            white-space: pre-wrap;\n            word-break: break-word;\n        }\n\n        .gp-base64-decoder-validation {\n            background: #fff3cd;\n            border: 1px solid #ffc107;\n            border-radius: 6px;\n            padding: 10px;\n            margin-top: 10px;\n            font-size: 12px;\n            font-weight: 700;\n            color: #000;\n        }\n\n        .gp-base64-decoder-validation.valid {\n            background: #d4edda;\n            border-color: #28a745;\n        }\n\n        .gp-base64-decoder-validation.invalid {\n            background: #f8d7da;\n            border-color: #dc3545;\n        }\n\n        .gp-base64-decoder-download-area {\n            background: #f0f8ff;\n            border: 1px solid #4285f4;\n            border-radius: 6px;\n            padding: 15px;\n            margin-top: 15px;\n            text-align: center;\n        }\n\n        .gp-base64-decoder-download-info {\n            font-size: 12px;\n            font-weight: 700;\n            color: #000;\n            margin-bottom: 10px;\n        }\n\n        .gp-base64-decoder-file-preview {\n            background: #fff;\n            border: 1px solid #e0e0e0;\n            border-radius: 4px;\n            padding: 10px;\n            margin: 10px 0;\n            font-family: 'Segoe UI', monospace;\n            font-size: 11px;\n            font-weight: 700;\n            color: #000;\n            max-height: 100px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        \/* Mobile Responsive *\/\n        @media (max-width: 768px) {\n            .gp-base64-decoder-tool {\n                padding: 15px;\n            }\n\n            .gp-base64-decoder-header {\n                flex-direction: column;\n                text-align: center;\n                padding: 20px;\n            }\n\n            .gp-base64-decoder-title-section h1 {\n                font-size: 24px;\n            }\n\n            .gp-base64-decoder-title-section p {\n                font-size: 16px;\n            }\n\n            .gp-base64-decoder-main {\n                grid-template-columns: 1fr;\n                gap: 15px;\n            }\n\n            .gp-base64-decoder-section {\n                padding: 20px;\n            }\n\n            .gp-base64-decoder-textarea {\n                height: 250px;\n            }\n\n            .gp-base64-decoder-stats-grid {\n                grid-template-columns: repeat(2, 1fr);\n                gap: 15px;\n            }\n\n            .gp-base64-decoder-actions {\n                grid-template-columns: 1fr;\n            }\n\n            .gp-base64-decoder-controls {\n                grid-template-columns: 1fr;\n            }\n\n            .gp-base64-decoder-control-row {\n                flex-direction: column;\n                align-items: stretch;\n                gap: 5px;\n            }\n\n            .gp-base64-decoder-control-row label {\n                min-width: auto;\n            }\n\n            .gp-base64-decoder-checkbox-group {\n                justify-content: center;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"gp-base64-decoder-tool\">\n        <div class=\"gp-base64-decoder-container\">\n            <!-- Header -->\n            <div class=\"gp-base64-decoder-header\">\n                <div class=\"gp-base64-decoder-icon\">B64\u2192<\/div>\n                <div class=\"gp-base64-decoder-title-section\">\n                    <h1>Base64 Decoder<\/h1>\n                    <p>Decode Base64 encoded data back to original text, files, and images with comprehensive format detection<\/p>\n                <\/div>\n            <\/div>\n\n            <!-- Description with rotating tips -->\n            <div class=\"gp-base64-decoder-description\" id=\"descriptionBox\">\n                <h3>Pro Tip<\/h3>\n                <p id=\"rotatingTip\">Perfect for decoding Base64 emails, data URIs, encoded files, and understanding the original content of Base64 strings.<\/p>\n            <\/div>\n\n            <!-- Main Content -->\n            <div class=\"gp-base64-decoder-main\">\n                <!-- Input Section -->\n                <div class=\"gp-base64-decoder-section\">\n                    <h2>\ud83d\udd10 Base64 Input<\/h2>\n                    <textarea \n                        class=\"gp-base64-decoder-textarea\" \n                        id=\"inputText\" \n                        placeholder=\"Enter Base64 encoded data here...\n\nSupported formats:\nSGVsbG8gV29ybGQh\nSGVsbG8gV29y\nbGQh\ndata:text\/plain;base64,SGVsbG8gV29ybGQh\ndata:image\/png;base64,iVBORw0KGgo...\n\nThe decoder will automatically detect and handle various Base64 formats.\"\n                    ><\/textarea>\n                    \n                    <div class=\"gp-base64-decoder-controls\">\n                        <div class=\"gp-base64-decoder-control-group\">\n                            <div class=\"gp-base64-decoder-control-row\">\n                                <label for=\"inputFormat\">Input Format:<\/label>\n                                <select class=\"gp-base64-decoder-select\" id=\"inputFormat\">\n                                    <option value=\"auto\">Auto Detect<\/option>\n                                    <option value=\"standard\">Standard Base64<\/option>\n                                    <option value=\"url-safe\">URL Safe<\/option>\n                                    <option value=\"data-uri\">Data URI<\/option>\n                                    <option value=\"mime\">MIME Format<\/option>\n                                <\/select>\n                            <\/div>\n                            <div class=\"gp-base64-decoder-control-row\">\n                                <label for=\"outputEncoding\">Output Encoding:<\/label>\n                                <select class=\"gp-base64-decoder-select\" id=\"outputEncoding\">\n                                    <option value=\"utf8\">UTF-8<\/option>\n                                    <option value=\"ascii\">ASCII<\/option>\n                                    <option value=\"latin1\">Latin-1<\/option>\n                                    <option value=\"binary\">Binary<\/option>\n                                <\/select>\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"gp-base64-decoder-control-group\">\n                            <div class=\"gp-base64-decoder-control-row\">\n                                <label for=\"outputFormat\">Output Format:<\/label>\n                                <select class=\"gp-base64-decoder-select\" id=\"outputFormat\">\n                                    <option value=\"text\">Plain Text<\/option>\n                                    <option value=\"hex\">Hexadecimal<\/option>\n                                    <option value=\"json\">JSON (if valid)<\/option>\n                                    <option value=\"binary\">Binary View<\/option>\n                                <\/select>\n                            <\/div>\n                            <div class=\"gp-base64-decoder-control-row\">\n                                <label for=\"errorHandling\">Error Handling:<\/label>\n                                <select class=\"gp-base64-decoder-select\" id=\"errorHandling\">\n                                    <option value=\"strict\">Strict<\/option>\n                                    <option value=\"lenient\">Lenient<\/option>\n                                    <option value=\"ignore\">Ignore Errors<\/option>\n                                <\/select>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"gp-base64-decoder-controls\">\n                        <div class=\"gp-base64-decoder-checkbox-group\">\n                            <input type=\"checkbox\" id=\"showNonPrintable\">\n                            <label for=\"showNonPrintable\">Show Non-Printable<\/label>\n                        <\/div>\n                        <div class=\"gp-base64-decoder-checkbox-group\">\n                            <input type=\"checkbox\" id=\"preserveLineBreaks\" checked>\n                            <label for=\"preserveLineBreaks\">Preserve Line Breaks<\/label>\n                        <\/div>\n                        <div class=\"gp-base64-decoder-checkbox-group\">\n                            <input type=\"checkbox\" id=\"detectFileType\" checked>\n                            <label for=\"detectFileType\">Detect File Type<\/label>\n                        <\/div>\n                        <div class=\"gp-base64-decoder-checkbox-group\">\n                            <input type=\"checkbox\" id=\"showBreakdown\" checked>\n                            <label for=\"showBreakdown\">Show Analysis<\/label>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"gp-base64-decoder-actions\">\n                        <button class=\"gp-base64-decoder-button\" onclick=\"decodeBase64()\">\n                            \ud83d\udd13 Decode\n                        <\/button>\n                        <button class=\"gp-base64-decoder-button secondary\" onclick=\"clearInput()\">\n                            \ud83d\uddd1\ufe0f Clear\n                        <\/button>\n                        <button class=\"gp-base64-decoder-button secondary\" onclick=\"undoAction()\">\n                            \u21b6 Undo\n                        <\/button>\n                        <button class=\"gp-base64-decoder-button secondary\" onclick=\"redoAction()\">\n                            \u21b7 Redo\n                        <\/button>\n                    <\/div>\n\n                    <!-- Input Validation -->\n                    <div class=\"gp-base64-decoder-validation\" id=\"inputValidation\">\n                        Enter Base64 data to see validation status&#8230;\n                    <\/div>\n\n                    <!-- Live Preview -->\n                    <div class=\"gp-base64-decoder-preview\" id=\"livePreview\">\n                        Live preview will appear here&#8230;\n                    <\/div>\n                <\/div>\n\n                <!-- Output Section -->\n                <div class=\"gp-base64-decoder-section\">\n                    <h2>\u2705 Decoded Output<\/h2>\n                    <textarea \n                        class=\"gp-base64-decoder-textarea\" \n                        id=\"outputText\" \n                        readonly\n                        placeholder=\"Your decoded content will appear here...\"\n                    ><\/textarea>\n\n                    <div class=\"gp-base64-decoder-actions\">\n                        <button class=\"gp-base64-decoder-button\" onclick=\"copyToClipboard()\">\n                            \ud83d\udccb Copy to Clipboard\n                        <\/button>\n                        <button class=\"gp-base64-decoder-button secondary\" onclick=\"downloadResult()\">\n                            \ud83d\udcbe Download\n                        <\/button>\n                        <button class=\"gp-base64-decoder-button secondary\" onclick=\"copyToInput()\">\n                            \u2b05\ufe0f Copy to Input\n                        <\/button>\n                        <button class=\"gp-base64-decoder-button secondary\" onclick=\"encodeBack()\">\n                            \ud83d\udd10 Encode Back\n                        <\/button>\n                    <\/div>\n\n                    <!-- File Download Area -->\n                    <div class=\"gp-base64-decoder-download-area\" id=\"downloadArea\" style=\"display: none;\">\n                        <div class=\"gp-base64-decoder-download-info\">\n                            <strong>Detected File Type:<\/strong> <span id=\"detectedType\">Unknown<\/span><br>\n                            <strong>File Size:<\/strong> <span id=\"fileSize\">0 bytes<\/span>\n                        <\/div>\n                        <button class=\"gp-base64-decoder-button\" onclick=\"downloadAsFile()\">\n                            \ud83d\udcc1 Download as File\n                        <\/button>\n                        <div class=\"gp-base64-decoder-file-preview\" id=\"filePreview\">\n                            File preview will appear here&#8230;\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Statistics -->\n            <div class=\"gp-base64-decoder-stats\">\n                <h2>\ud83d\udcca Statistics<\/h2>\n                <div class=\"gp-base64-decoder-stats-grid\">\n                    <div class=\"gp-base64-decoder-stat\">\n                        <span class=\"gp-base64-decoder-stat-number\" id=\"inputChars\">0<\/span>\n                        <span class=\"gp-base64-decoder-stat-label\">Input Characters<\/span>\n                    <\/div>\n                    <div class=\"gp-base64-decoder-stat\">\n                        <span class=\"gp-base64-decoder-stat-number\" id=\"outputBytes\">0<\/span>\n                        <span class=\"gp-base64-decoder-stat-label\">Output Bytes<\/span>\n                    <\/div>\n                    <div class=\"gp-base64-decoder-stat\">\n                        <span class=\"gp-base64-decoder-stat-number\" id=\"compressionRatio\">0%<\/span>\n                        <span class=\"gp-base64-decoder-stat-label\">Size Reduction<\/span>\n                    <\/div>\n                    <div class=\"gp-base64-decoder-stat\">\n                        <span class=\"gp-base64-decoder-stat-number\" id=\"paddingRemoved\">0<\/span>\n                        <span class=\"gp-base64-decoder-stat-label\">Padding Removed<\/span>\n                    <\/div>\n                    <div class=\"gp-base64-decoder-stat\">\n                        <span class=\"gp-base64-decoder-stat-number\" id=\"printableChars\">0<\/span>\n                        <span class=\"gp-base64-decoder-stat-label\">Printable Chars<\/span>\n                    <\/div>\n                    <div class=\"gp-base64-decoder-stat\">\n                        <span class=\"gp-base64-decoder-stat-number\" id=\"validationErrors\">0<\/span>\n                        <span class=\"gp-base64-decoder-stat-label\">Validation Errors<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Operation History -->\n            <div class=\"gp-base64-decoder-history\">\n                <h2>\ud83d\udcda Operation History<\/h2>\n                <div id=\"historyContainer\">\n                    <p style=\"color: #000; font-weight: 700; text-align: center; padding: 20px;\">No operations performed yet<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Toast Notification -->\n        <div class=\"gp-base64-decoder-toast\" id=\"toast\"><\/div>\n    <\/div>\n\n    <script>\n        \/\/ Global variables\n        let history = [];\n        let historyIndex = -1;\n        let operationHistory = [];\n        let lastDecodedData = null;\n        let detectedMimeType = null;\n        \n        \/\/ Rotating tips\n        const tips = [\n            \"Perfect for decoding Base64 emails, data URIs, encoded files, and understanding the original content of Base64 strings.\",\n            \"Base64 decoder can reveal the original content of encoded images, documents, and text files.\",\n            \"Auto-detection identifies data URIs, MIME formats, and URL-safe Base64 automatically for seamless decoding.\",\n            \"File type detection analyzes decoded content to identify images, PDFs, JSON, XML, and other file formats.\",\n            \"Error handling options help process malformed Base64 data by ignoring padding errors or invalid characters.\",\n            \"Hexadecimal output view shows the raw binary data structure for debugging and analysis purposes.\",\n            \"Non-printable character display reveals control codes and binary data hidden in the original content.\",\n            \"MIME and data URI formats are commonly used in email attachments and web embedded content.\"\n        ];\n        \n        let currentTipIndex = 0;\n        \n        \/\/ Rotate tips every 5 seconds\n        setInterval(() => {\n            currentTipIndex = (currentTipIndex + 1) % tips.length;\n            document.getElementById('rotatingTip').textContent = tips[currentTipIndex];\n        }, 5000);\n\n        \/\/ Initialize\n        document.addEventListener('DOMContentLoaded', function() {\n            const inputText = document.getElementById('inputText');\n            inputText.addEventListener('input', updateStats);\n            inputText.addEventListener('input', debounce(updateLivePreview, 300));\n            inputText.addEventListener('input', debounce(validateInput, 300));\n            \n            \/\/ Add event listeners for all controls\n            ['inputFormat', 'outputEncoding', 'outputFormat', 'errorHandling', 'showNonPrintable', 'preserveLineBreaks', 'detectFileType', 'showBreakdown'].forEach(id => {\n                const element = document.getElementById(id);\n                if (element) {\n                    element.addEventListener('change', updateLivePreview);\n                    element.addEventListener('input', debounce(updateLivePreview, 300));\n                }\n            });\n            \n            \/\/ Load sample data\n            inputText.value = `SGVsbG8gV29ybGQhIFRoaXMgaXMgYSBCYXNlNjQgZGVjb2RpbmcgZXhhbXBsZS4KU3BlY2lhbCBjaGFyYWN0ZXJzOiDDoWXDrW\/DunUgw7HDvMOnCk51bWJlcnMgYW5kIHN5bWJvbHM6IDEyMyAhQCMkJV4mKigp\n\ndata:text\/plain;base64,VGhpcyBpcyBhIGRhdGEgVVJJIGV4YW1wbGU=`;\n            updateStats();\n            updateLivePreview();\n            validateInput();\n        });\n\n        \/\/ Debounce function\n        function debounce(func, wait) {\n            let timeout;\n            return function executedFunction(...args) {\n                const later = () => {\n                    clearTimeout(timeout);\n                    func(...args);\n                };\n                clearTimeout(timeout);\n                timeout = setTimeout(later, wait);\n            };\n        }\n\n        \/\/ Validate Base64 input\n        function validateInput() {\n            const inputText = document.getElementById('inputText').value;\n            const validation = document.getElementById('inputValidation');\n            \n            if (!inputText.trim()) {\n                validation.textContent = 'Enter Base64 data to see validation status...';\n                validation.className = 'gp-base64-decoder-validation';\n                return;\n            }\n\n            try {\n                const cleanedInput = cleanBase64Input(inputText);\n                const formatInfo = detectBase64Format(inputText);\n                \n                \/\/ Test decode\n                atob(cleanedInput);\n                \n                validation.textContent = `\u2713 Valid ${formatInfo.format} Base64: ${cleanedInput.length} characters, ${Math.floor(cleanedInput.length * 3 \/ 4)} bytes when decoded`;\n                validation.className = 'gp-base64-decoder-validation valid';\n                \n            } catch (error) {\n                validation.textContent = `\u2717 Invalid Base64: ${error.message}`;\n                validation.className = 'gp-base64-decoder-validation invalid';\n            }\n        }\n\n        \/\/ Clean Base64 input\n        function cleanBase64Input(input) {\n            let cleaned = input.trim();\n            \n            \/\/ Remove data URI prefix if present\n            if (cleaned.includes('data:')) {\n                const commaIndex = cleaned.indexOf(',');\n                if (commaIndex !== -1) {\n                    cleaned = cleaned.substring(commaIndex + 1);\n                }\n            }\n            \n            \/\/ Remove whitespace and line breaks\n            cleaned = cleaned.replace(\/[\\r\\n\\s]\/g, '');\n            \n            \/\/ Handle URL-safe format\n            cleaned = cleaned.replace(\/-\/g, '+').replace(\/_\/g, '\/');\n            \n            \/\/ Add padding if missing\n            while (cleaned.length % 4) {\n                cleaned += '=';\n            }\n            \n            return cleaned;\n        }\n\n        \/\/ Detect Base64 format\n        function detectBase64Format(input) {\n            if (input.includes('data:')) {\n","protected":false},"excerpt":{"rendered":"<p>Base64 Decoder Tool B64\u2192 Base64 Decoder Decode Base64 encoded data back to original text, files, and images with comprehensive format &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Base64 Decoder\" class=\"read-more button\" href=\"https:\/\/vijaypandit.in\/?page_id=347#more-347\" aria-label=\"More on Base64 Decoder\">Read more<\/a><\/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-347","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=347"}],"version-history":[{"count":1,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/347\/revisions"}],"predecessor-version":[{"id":348,"href":"https:\/\/vijaypandit.in\/index.php?rest_route=\/wp\/v2\/pages\/347\/revisions\/348"}],"wp:attachment":[{"href":"https:\/\/vijaypandit.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}