addin web tooks

2026-07-13 01:17:54 -06:00
parent b7ee3498da
commit 8b28c70d15
3 changed files with 503 additions and 0 deletions
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>File to Base64 Converter</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        }
+        body {
+            background-color: #f4f6f8;
+            color: #333;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            background: #ffffff;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+            padding: 30px;
+            width: 100%;
+            max-width: 650px;
+        }
+        h2 {
+            margin-bottom: 20px;
+            font-size: 1.5rem;
+            text-align: center;
+        }
+        .drop-zone {
+            border: 2px dashed #0066ff;
+            border-radius: 8px;
+            padding: 30px;
+            text-align: center;
+            background-color: #f0f7ff;
+            cursor: pointer;
+            transition: background 0.2s ease, border-color 0.2s ease;
+        }
+        .drop-zone:hover, .drop-zone.dragover {
+            background-color: #e1effe;
+            border-color: #0052cc;
+        }
+        .drop-zone p {
+            color: #555;
+            font-size: 0.95rem;
+        }
+        .drop-zone input[type="file"] {
+            display: none;
+        }
+        .output-group {
+            margin-top: 25px;
+            display: none;
+        }
+        .output-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+        }
+        label {
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+        button {
+            background-color: #0066ff;
+            color: white;
+            border: none;
+            padding: 6px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 0.85rem;
+            transition: background 0.2s ease;
+        }
+        button:hover {
+            background-color: #0052cc;
+        }
+        textarea {
+            width: 100%;
+            height: 180px;
+            padding: 12px;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            font-family: monospace;
+            font-size: 0.85rem;
+            resize: vertical;
+            background-color: #fafafa;
+            word-break: break-all;
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <h2>File to Base64 Converter</h2>
+    
+    <div class="drop-zone" id="dropZone">
+        <p><strong>Click to browse</strong> or drag & drop a file here</p>
+        <input type="file" id="fileInput">
+    </div>
+
+    <div class="output-group" id="outputGroup">
+        <div class="output-header">
+            <label for="base64Output">Base64 Data URL String:</label>
+            <button id="copyBtn">Copy String</button>
+        </div>
+        <textarea id="base64Output" readonly></textarea>
+    </div>
+</div>
+
+<script>
+    const dropZone = document.getElementById('dropZone');
+    const fileInput = document.getElementById('fileInput');
+    const outputGroup = document.getElementById('outputGroup');
+    const base64Output = document.getElementById('base64Output');
+    const copyBtn = document.getElementById('copyBtn');
+
+    // Trigger file dialog on click
+    dropZone.addEventListener('click', () => fileInput.click());
+
+    // File input change handler
+    fileInput.addEventListener('change', (e) => {
+        if (e.target.files.length > 0) {
+            processFile(e.target.files[0]);
+        }
+    });
+
+    // Drag & Drop event handlers
+    dropZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropZone.classList.add('dragover');
+    });
+
+    ['dragleave', 'dragend'].forEach(type => {
+        dropZone.addEventListener(type, () => dropZone.classList.remove('dragover'));
+    });
+
+    dropZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropZone.classList.remove('dragover');
+        if (e.dataTransfer.files.length > 0) {
+            processFile(e.dataTransfer.files[0]);
+        }
+    });
+
+    // Read file as Data URL
+    function processFile(file) {
+        const reader = new FileReader();
+        reader.onload = () => {
+            base64Output.value = reader.result;
+            outputGroup.style.display = 'block';
+        };
+        reader.onerror = (error) => {
+            alert('Error reading file: ' + error);
+        };
+        reader.readAsDataURL(file);
+    }
+
+    // Copy to clipboard
+    copyBtn.addEventListener('click', () => {
+        base64Output.select();
+        navigator.clipboard.writeText(base64Output.value)
+            .then(() => {
+                const originalText = copyBtn.innerText;
+                copyBtn.innerText = 'Copied!';
+                setTimeout(() => copyBtn.innerText = originalText, 2000);
+            })
+            .catch(err => alert('Failed to copy text: ' + err));
+    });
+</script>
+
+</body>
+</html>