diff --git a/aperisolve/static/css/aperisolve.css b/aperisolve/static/css/aperisolve.css index 732a323..a27cb42 100644 --- a/aperisolve/static/css/aperisolve.css +++ b/aperisolve/static/css/aperisolve.css @@ -224,6 +224,7 @@ pre { background-color: var(--dark-bg-hover); box-shadow: 0 0 10px var(--theme-green); } + #upload-form { transition: height 0.4s ease, padding 0.4s ease, margin 0.4s ease; overflow: hidden; @@ -276,6 +277,15 @@ td { min-width: 150px; } +.a-pcrt .results_img { + width: 100%; + margin: auto; + text-align: center; +} +#result .a-pcrt .results_img img{ + width: 75%; +} + /* ======== Modal ======== */ #image-modal-container { position: fixed; @@ -441,10 +451,12 @@ footer a i { box-shadow: 0 0 10px var(--theme-green-shadow); } -#httperror{ +#httperror { padding-top: 100px; } -#httperror h1, #httperror h2{ + +#httperror h1, +#httperror h2 { text-align: center; } @@ -455,7 +467,7 @@ footer a i { .results_img { width: 33.333%; } - + .browse-images { width: 33.333%; } @@ -467,29 +479,30 @@ footer a i { padding-left: 15px; padding-right: 15px; } - + .results_img { width: 50%; } - + .browse-images { width: 50%; } - + #result-infos { flex-direction: column; } - - #result-infos > div { + + #result-infos>div { width: 100%; flex: 1 1 100%; } - + table { font-size: 0.9rem; } - - th, td { + + th, + td { padding: 0.5rem; } } @@ -500,110 +513,116 @@ footer a i { body { font-size: 14px; } - + .container { margin-top: 20px !important; padding-left: 10px; padding-right: 10px; } - + h1 { font-size: 1.5rem; } - + h2 { font-size: 1.25rem; } - + h3 { font-size: 1.1rem; } - + #water-logo { width: 50px; } - - .card, .form-control, .table, .border, .card-hack { + + .card, + .form-control, + .table, + .border, + .card-hack { border-radius: 0.35rem; } - + .card { padding: 15px !important; } - + #drop-zone { padding: 20px !important; } - + #drop-zone p { font-size: 0.9rem; } - + .results_img { width: 50%; padding: 5px; } - + .browse-images { width: 50%; padding: 5px; } - - textarea.form-control, pre { + + textarea.form-control, + pre { padding: 15px; font-size: 0.85rem; } - + .a-strings textarea { height: 250px; } - + .a-exiftool .table-container { max-height: 300px; } - + /* Make tables scrollable horizontally */ .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } - + table { font-size: 0.8rem; min-width: 400px; } - - th, td { + + th, + td { padding: 0.4rem; word-break: break-word; } - + footer { justify-content: center !important; margin: 20px 0; flex-wrap: wrap; gap: 15px; } - + footer a i { font-size: 28px; } - + #coffee { height: 28px; } - + /* FAQ/Cheatsheet adjustments */ - #cheatsheet > div { + #cheatsheet>div { padding: 8px; margin-bottom: 30px; } - + #cheatsheet img { max-width: 100%; height: auto; } - + .command { padding: 8px; font-size: 0.85rem; @@ -617,112 +636,116 @@ footer a i { body { font-size: 13px; } - + .container { margin-top: 15px !important; padding-left: 8px; padding-right: 8px; } - + h1 { font-size: 1.3rem; } - + h2 { font-size: 1.1rem; } - + h3 { font-size: 1rem; } - + #water-logo { width: 40px; } - + .card { padding: 12px !important; } - + #drop-zone { padding: 15px !important; } - + #drop-zone p { font-size: 0.85rem; } - - .btn, .btn-primary, .btn-hack { + + .btn, + .btn-primary, + .btn-hack { width: 100%; padding: 12px; font-size: 1rem; } - + .results_img { width: 100%; padding: 5px; } - + .browse-images { width: 100%; padding: 5px; } - - #result-infos > div { + + #result-infos>div { padding: 5px; } - - textarea.form-control, pre { + + textarea.form-control, + pre { padding: 10px; font-size: 0.8rem; } - + .a-strings textarea { height: 200px; } - + .a-exiftool .table-container { max-height: 250px; } - + table { font-size: 0.75rem; } - - th, td { + + th, + td { padding: 0.3rem; } - + .copy-icon { display: block; right: 5px; margin-top: -35px; } - + footer { gap: 12px; } - + footer a i { font-size: 24px; } - + #coffee { height: 24px; } - + #image-modal-container img { width: 95%; } - + .analyzer { margin-top: 15px; } - - .analyzer h2 + div { + + .analyzer h2+div { margin-top: 10px; } - + .analyzer h3 { margin-top: 15px; } @@ -732,12 +755,12 @@ footer a i { padding-left: 20px; font-size: 0.9rem; } - + .command { font-size: 0.75rem; padding: 6px; } - + #httperror { padding-top: 50px; } @@ -748,24 +771,26 @@ footer a i { body { font-size: 12px; } - + h1 { font-size: 1.1rem; } - + #water-logo { width: 35px; } - - .btn, .btn-primary, .btn-hack { + + .btn, + .btn-primary, + .btn-hack { padding: 10px; font-size: 0.9rem; } - + footer a i { font-size: 22px; } - + #coffee { height: 22px; } @@ -778,16 +803,22 @@ footer a i { display: block; opacity: 0.7; } - - .btn, .btn-primary, .btn-hack { + + .btn, + .btn-primary, + .btn-hack { min-height: 44px; } - - input, textarea, select { - font-size: 16px; /* Prevents zoom on iOS */ + + input, + textarea, + select { + font-size: 16px; + /* Prevents zoom on iOS */ } - - a, button { + + a, + button { min-height: 44px; min-width: 44px; } @@ -798,7 +829,7 @@ footer a i { .container { margin-top: 10px !important; } - + #image-modal-container img { max-height: 85vh; width: auto; @@ -811,24 +842,36 @@ footer a i { #three-bg { display: none; } - + body { background-color: white; color: black; } - - .card, .form-control, .table, .border, .card-hack { + + .card, + .form-control, + .table, + .border, + .card-hack { background-color: white; border-color: #333 !important; box-shadow: none; } - - h1, h2, h3, h4, h5, h6, strong, .highlight { + + h1, + h2, + h3, + h4, + h5, + h6, + strong, + .highlight { color: #333; text-shadow: none; } - - a, .text-accent { + + a, + .text-accent { color: #333; } } diff --git a/aperisolve/static/js/aperisolve.js b/aperisolve/static/js/aperisolve.js index abaedd4..26eb3a4 100644 --- a/aperisolve/static/js/aperisolve.js +++ b/aperisolve/static/js/aperisolve.js @@ -97,24 +97,24 @@ function showInfo(message, reset) { */ document.addEventListener('click', function (event) { - // Check if the clicked element is a copy icon - if (event.target.classList.contains('copy-icon')) { - const icon = event.target; - const textarea = icon.closest('.textarea-container').querySelector('textarea'); + // Check if the clicked element is a copy icon + if (event.target.classList.contains('copy-icon')) { + const icon = event.target; + const textarea = icon.closest('.textarea-container').querySelector('textarea'); - if (textarea) { - textarea.select(); - navigator.clipboard.writeText(textarea.value).then(() => { - icon.classList.remove('fa-copy'); - icon.classList.add('fa-check'); - setTimeout(() => { - icon.classList.remove('fa-check'); - icon.classList.add('fa-copy'); - }, 1500); - }); - } + if (textarea) { + textarea.select(); + navigator.clipboard.writeText(textarea.value).then(() => { + icon.classList.remove('fa-copy'); + icon.classList.add('fa-check'); + setTimeout(() => { + icon.classList.remove('fa-check'); + icon.classList.add('fa-copy'); + }, 1500); + }); } - }); + } +}); /** * Image preview functions @@ -250,7 +250,7 @@ function parseResult(result) { analyzer.className = `analyzer a-${escapeHtml(tool)}`; resultDiv.appendChild(analyzer); - analyzer.innerHTML += `

${capitalize(tool.replace("_"," "))}

`; + analyzer.innerHTML += `

${capitalize(tool.replace("_", " "))}

`; // Parse text output if (typeof result[tool]["output"] === "string") { @@ -314,7 +314,7 @@ function parseResult(result) { if ("png_images" in result[tool]) { for (const image of result[tool]["png_images"]) { - analyzer.innerHTML += `
`; + analyzer.innerHTML += `
`; } } @@ -347,9 +347,9 @@ async function pollStatus(submission_hash) { const resultResp = await fetch(`/result/${submission_hash}`); const resultData = await resultResp.json(); fetchImageInfo(submission_hash); - if ("error" in resultData){ + if ("error" in resultData) { showWarning(`❌ ${resultData.error}`, true); - }else if ("results" in resultData) { + } else if ("results" in resultData) { parseResult(resultData.results); } } else if (statusData.status === "error") { @@ -360,9 +360,9 @@ async function pollStatus(submission_hash) { try { const resultResp = await fetch(`/result/${submission_hash}`); const resultData = await resultResp.json(); - if ("error" in resultData){ + if ("error" in resultData) { // showWarning(`❌ ${resultData.error}`, true); - }else if ("results" in resultData) { + } else if ("results" in resultData) { fetchImageInfo(submission_hash); parseResult(resultData.results); } @@ -488,7 +488,7 @@ if (browseBtn) { } } else if (xhr.status == 413) { showDanger("❌ File too large. Please upload a smaller file.", true); - }else { + } else { showDanger(`❌ HTTP error ${xhr.status}`, true); } progressBar.style.width = "100%";