From 81100f0d1bbb984cc256f85ba7b69b39b6579513 Mon Sep 17 00:00:00 2001
From: DJP <DJP>
Date: Tue, 2 Sep 2025 14:22:26 -0400
Subject: [PATCH] Initial commit: Base64 viewer with auto-scaling output
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- HTML page with Base64 input and render functionality
- Auto-detects images vs text content
- Output window scales to image size
- Handles data URL prefixes
- Clean, responsive design

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 index.html | 180 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 180 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..45fe561
--- /dev/null
+++ b/index.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Base64 Viewer</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background-color: #f5f5f5;
+        }
+        
+        .container {
+            display: flex;
+            gap: 20px;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        .input-section, .output-section {
+            flex: 1;
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        
+        h1 {
+            text-align: center;
+            color: #333;
+            margin-bottom: 30px;
+        }
+        
+        h2 {
+            margin-top: 0;
+            color: #444;
+        }
+        
+        textarea {
+            width: 100%;
+            height: 300px;
+            border: 2px solid #ddd;
+            border-radius: 4px;
+            padding: 10px;
+            font-family: monospace;
+            resize: vertical;
+            box-sizing: border-box;
+        }
+        
+        button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            margin-top: 10px;
+        }
+        
+        button:hover {
+            background-color: #0056b3;
+        }
+        
+        .output-box {
+            width: 100%;
+            min-height: 300px;
+            border: 2px solid #ddd;
+            border-radius: 4px;
+            padding: 10px;
+            background: #f9f9f9;
+            overflow: auto;
+            box-sizing: border-box;
+        }
+        
+        .output-box img {
+            max-width: 100%;
+            height: auto;
+        }
+        
+        .error {
+            color: #dc3545;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <h1>Base64 Viewer</h1>
+    
+    <div class="container">
+        <div class="input-section">
+            <h2>Input Base64</h2>
+            <textarea id="base64Input" placeholder="Paste your Base64 encoded content here..."></textarea>
+            <button onclick="renderBase64()">Render</button>
+        </div>
+        
+        <div class="output-section">
+            <h2>Output</h2>
+            <div id="outputBox" class="output-box">
+                Click "Render" to display the decoded content
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function renderBase64() {
+            const input = document.getElementById('base64Input').value.trim();
+            const outputBox = document.getElementById('outputBox');
+            
+            if (!input) {
+                outputBox.style.height = '300px';
+                outputBox.innerHTML = '<span class="error">Please enter Base64 content</span>';
+                return;
+            }
+            
+            try {
+                // Remove data URL prefix if present
+                let base64Data = input;
+                if (input.startsWith('data:')) {
+                    const commaIndex = input.indexOf(',');
+                    if (commaIndex !== -1) {
+                        base64Data = input.substring(commaIndex + 1);
+                    }
+                }
+                
+                // Check if it's an image by trying to decode and display
+                if (isValidBase64(base64Data)) {
+                    // Try to display as image first
+                    const img = new Image();
+                    img.onload = function() {
+                        outputBox.innerHTML = '';
+                        outputBox.style.height = 'auto';
+                        outputBox.appendChild(img);
+                    };
+                    img.onerror = function() {
+                        // If not an image, try to decode as text
+                        try {
+                            const decodedText = atob(base64Data);
+                            outputBox.style.height = 'auto';
+                            outputBox.innerHTML = '<pre>' + escapeHtml(decodedText) + '</pre>';
+                        } catch (e) {
+                            outputBox.style.height = '300px';
+                            outputBox.innerHTML = '<span class="error">Unable to decode Base64 content</span>';
+                        }
+                    };
+                    img.src = 'data:image/png;base64,' + base64Data;
+                } else {
+                    outputBox.style.height = '300px';
+                    outputBox.innerHTML = '<span class="error">Invalid Base64 format</span>';
+                }
+            } catch (error) {
+                outputBox.style.height = '300px';
+                outputBox.innerHTML = '<span class="error">Error decoding Base64: ' + error.message + '</span>';
+            }
+        }
+        
+        function isValidBase64(str) {
+            try {
+                return btoa(atob(str)) === str;
+            } catch (err) {
+                return false;
+            }
+        }
+        
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+        
+        // Allow Enter key to trigger render
+        document.getElementById('base64Input').addEventListener('keydown', function(event) {
+            if (event.ctrlKey && event.key === 'Enter') {
+                renderBase64();
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
