diff --git a/ui.js b/ui.js deleted file mode 100644 index df03e68..0000000 --- a/ui.js +++ /dev/null @@ -1,87 +0,0 @@ -const $ = (s) => document.querySelector(s); - -export const el = { - setupScreen: $('#setup-screen'), - mainScreen: $('#main-screen'), - setupKey: $('#setup-key'), - setupSave: $('#setup-save'), - btnSettings: $('#btn-settings'), - modal: $('#modal-settings'), - modalKey: $('#modal-key'), - modalSave: $('#modal-save'), - btnCloseModal: $('#btn-close-modal'), - selModel: $('#sel-model'), - inpPrompt: $('#inp-prompt'), - inpFrames: $('#inp-frames'), - inpFps: $('#inp-fps'), - selSize: $('#sel-size'), - selRatio: $('#sel-ratio'), - btnGenerate: $('#btn-generate'), - progressArea: $('#progress-area'), - progressBar: $('#progress-bar'), - progressText: $('#progress-text'), - framesPreview: $('#frames-preview'), - resultArea: $('#result-area'), - resultGif: $('#result-gif'), - btnDownload: $('#btn-download'), -}; - -export function showSetup() { - el.setupScreen.classList.remove('hidden'); - el.mainScreen.classList.add('hidden'); -} - -export function showMain() { - el.setupScreen.classList.add('hidden'); - el.mainScreen.classList.remove('hidden'); -} - -export function showModal(currentKey) { - el.modalKey.value = currentKey; - el.modal.classList.remove('hidden'); -} - -export function hideModal() { - el.modal.classList.add('hidden'); -} - -export function setProgress(pct, text) { - el.progressArea.classList.remove('hidden'); - el.progressArea.classList.add('flex-col'); - el.progressBar.style.width = `${pct}%`; - el.progressText.textContent = text; -} - -export function addFramePreview(base64, index) { - const img = document.createElement('img'); - img.src = base64; - img.className = 'w-16 h-16 rounded-lg border border-neutral-200 object-cover'; - img.title = `frame ${index + 1}`; - el.framesPreview.appendChild(img); -} - -export function resetProgress() { - el.progressArea.classList.add('hidden'); - el.progressArea.classList.remove('flex-col'); - el.progressBar.style.width = '0%'; - el.progressText.textContent = ''; - el.framesPreview.innerHTML = ''; -} - -export function showResult(blobUrl) { - el.resultArea.classList.remove('hidden'); - el.resultArea.classList.add('flex-col'); - el.resultGif.src = blobUrl; - el.btnDownload.href = blobUrl; -} - -export function hideResult() { - el.resultArea.classList.add('hidden'); - el.resultArea.classList.remove('flex-col'); -} - -export function setGenerating(active) { - el.btnGenerate.disabled = active; - el.btnGenerate.classList.toggle('opacity-50', active); - el.btnGenerate.classList.toggle('cursor-not-allowed', active); -}