diff --git a/src/rmbg_as_a_service/static/index.html b/src/rmbg_as_a_service/static/index.html index 8088293..2126c4b 100644 --- a/src/rmbg_as_a_service/static/index.html +++ b/src/rmbg_as_a_service/static/index.html @@ -25,6 +25,7 @@
▲ DROP IMAGE
NO FILE SELECTED
+
@@ -175,6 +176,7 @@ const sidebarToggle = $('sidebarToggle'); const drop = $('drop'); const fileInput = $('file'); const fname = $('fname'); +const fstats = $('fstats'); const thumb = $('thumb'); const go = $('go'); const dl = $('dl'); @@ -281,12 +283,13 @@ function pickFile(file) { selectedFile = file; const url = URL.createObjectURL(file); const kb = Math.round(file.size / 1024); - fname.textContent = file.name + ' · ' + kb + ' KB'; + fname.textContent = file.name; + fstats.textContent = kb + ' KB'; thumb.src = url; thumb.hidden = false; drop.classList.add('has-file'); srcImg.onload = () => { - fname.textContent = file.name + ' · ' + + fstats.textContent = srcImg.naturalWidth + '×' + srcImg.naturalHeight + ' PX · ' + kb + ' KB'; }; srcImg.src = url; @@ -309,6 +312,7 @@ reset.addEventListener('click', () => { selectedFile = null; fileInput.value = ''; fname.textContent = 'NO FILE SELECTED'; + fstats.textContent = ''; thumb.removeAttribute('src'); thumb.hidden = true; drop.classList.remove('has-file'); diff --git a/src/rmbg_as_a_service/static/styles.css b/src/rmbg_as_a_service/static/styles.css index 60c5104..4b080aa 100644 --- a/src/rmbg_as_a_service/static/styles.css +++ b/src/rmbg_as_a_service/static/styles.css @@ -928,6 +928,13 @@ select option { background-color: #000000; } +/* px / KB stats, on their own line below the filename */ +.upload-stats { + color: #5a7a5a; + font-size: 11px; + margin-top: 4px; +} + /* upload box thumbnail state */ .upload-box.has-file { border-color: #7aa87a;