Initial commit: Base64 viewer with auto-scaling output
- 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>
This commit is contained in:
DJP
commit
81100f0d1b
1 changed files with 180 additions and 0 deletions
180
index.html
Normal file
180
index.html
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Reference in a new issue