/** * This application creates a client-side data URI generator with the following features: * - File upload through input and drag-and-drop * - Automatic MIME type detection * - Preview of the uploaded file (image, video, audio, or text) * - Copy button to easily copy the generated data URI * * We'll use the FileReader API for file handling and data URI generation. * The application will be built using HTML, CSS, and JavaScript, served by a Hono app. */ import { serve } from 'https://esm.town/v/g/serveUtils'; import { Hono } from 'npm:hono'; function html() { /* Data URI Generator

Data URI Generator

Drag & Drop file here or

Choose a file

*/ } function css() { /* body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; } .container { max-width: 800px; margin: 0 auto; background-color: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; color: #333; } .drop-zone { border: 2px dashed #ccc; border-radius: 5px; padding: 20px; text-align: center; margin-bottom: 20px; transition: background-color 0.3s; } .drop-zone.dragover { background-color: #e9e9e9; } .file-input-label { background-color: #4CAF50; color: white; padding: 10px 15px; border-radius: 5px; cursor: pointer; } #file-input { display: none; } .preview { margin-bottom: 20px; text-align: center; } .preview img, .preview video { max-width: 100%; max-height: 300px; } textarea { width: 100%; height: 100px; margin-bottom: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; resize: vertical; } button { display: block; width: 100%; padding: 10px; background-color: #008CBA; color: white; border: none; border-radius: 5px; cursor: pointer; } button:disabled { background-color: #ccc; cursor: not-allowed; } */ } function js() { /* const dropZone = document.getElementById('drop-zone'); const fileInput = document.getElementById('file-input'); const preview = document.getElementById('preview'); const output = document.getElementById('output'); const copyBtn = document.getElementById('copy-btn'); function handleFile(file) { const reader = new FileReader(); reader.onload = function(e) { const dataUri = e.target.result; output.value = dataUri; copyBtn.disabled = false; preview.innerHTML = ''; if (file.type.startsWith('image/')) { const img = document.createElement('img'); img.src = dataUri; preview.appendChild(img); } else if (file.type.startsWith('video/')) { const video = document.createElement('video'); video.src = dataUri; video.controls = true; preview.appendChild(video); } else if (file.type.startsWith('audio/')) { const audio = document.createElement('audio'); audio.src = dataUri; audio.controls = true; preview.appendChild(audio); } else { const pre = document.createElement('pre'); pre.textContent = dataUri.slice(0, 100) + '...'; preview.appendChild(pre); } }; reader.readAsDataURL(file); } dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('dragover'); }); dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('dragover'); }); dropZone.addEventListener('drop', (e) => { e.preventDefault(); dropZone.classList.remove('dragover'); const file = e.dataTransfer.files[0]; handleFile(file); }); fileInput.addEventListener('change', (e) => { const file = e.target.files[0]; handleFile(file); }); copyBtn.addEventListener('click', () => { output.select(); document.execCommand('copy'); }); */ } const app = new Hono(); app.get('/', serve(html, 'text/html')); app.get('/styles.css', serve(css, 'text/css')); app.get('/main.js', serve(js, 'text/javascript')); export default app.fetch;

dataUriGenApp