more cleanup
This commit is contained in:
@@ -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">⇧ Upload Image</button>
|
||||
<button class="secondary v-btn" onclick="loadImages()">↻ 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>
|
||||
|
||||
Reference in New Issue
Block a user