more cleanup

This commit is contained in:
jason
2026-03-13 14:38:19 -05:00
parent fd0ffaaff2
commit 967c35eb56
7 changed files with 107 additions and 0 deletions

View File

@@ -42,6 +42,13 @@
.v-btn { padding: 4px 8px; font-size: 11px; }
.save-form { display: flex; gap: 8px; margin-top: 10px; }
.save-form input { flex: 1; background: #333; border: 1px solid #444; color: #eee; padding: 8px; border-radius: 4px; font-size: 13px; }
.asset-panel { background: #222; border: 1px solid #444; border-radius: 6px; padding: 16px; margin-top: 20px; }
.asset-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px; margin-top: 10px; }
.asset-item { position: relative; border: 1px solid #333; border-radius: 4px; overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.asset-item img { width: 100%; height: 100%; object-fit: cover; }
.asset-item:hover .asset-copy { opacity: 1; }
.asset-copy { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); color: #C9A84C; font-size: 10px; padding: 4px; text-align: center; opacity: 0; transition: opacity 0.2s; }
</style>
</head>
<body>
@@ -66,6 +73,18 @@
</div>
</div>
<div class="asset-panel">
<h2>Image Assets</h2>
<div class="save-form">
<input type="file" id="asset-upload" style="display:none" onchange="uploadImage()"/>
<button onclick="document.getElementById('asset-upload').click()" class="v-btn">&#8679; Upload Image</button>
<button class="secondary v-btn" onclick="loadImages()">&#8635; Refresh</button>
</div>
<div class="asset-list" id="asset-list">
<!-- Images populated here -->
</div>
</div>
<h2>Handlebars Template (HTML)</h2>
<textarea id="template-editor" spellcheck="false"></textarea>
<div class="actions">
@@ -164,6 +183,46 @@
}
}
async function loadImages() {
const images = await fetch('/api/admin/images').then(r=>r.json()).catch(()=>[]);
const list = document.getElementById('asset-list');
list.innerHTML = images.map(img => `
<div class="asset-item" onclick="copyImageUrl('${img.url}')" title="Click to copy URL">
<img src="${img.url}" />
<div class="asset-copy">Copy URL</div>
</div>
`).join('') || '<div style="color:#777; padding:10px; grid-column: 1/-1;">No images.</div>';
}
async function uploadImage() {
const fileEl = document.getElementById('asset-upload');
if (!fileEl.files.length) return;
const formData = new FormData();
formData.append('image', fileEl.files[0]);
showStatus('Uploading...', true);
const res = await fetch('/api/admin/images', {
method: 'POST',
body: formData
}).then(r=>r.json()).catch(e=>({error:e.message}));
if (res.ok) {
showStatus('Image uploaded!', true);
loadImages();
} else {
showStatus('Error: '+res.error, false);
}
fileEl.value = ''; // Reset input
}
function copyImageUrl(url) {
const fullUrl = window.location.origin + url;
navigator.clipboard.writeText(fullUrl).then(() => {
showStatus('URL copied to clipboard: ' + url, true);
});
}
async function updatePreview() {
const templateHtml = document.getElementById('template-editor').value;
const userData = {
@@ -184,6 +243,7 @@
}
loadTemplate();
loadVersions();
loadImages();
</script>
</body>
</html>