Fix image preview for PCRT

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;
 }
 
@@ -480,7 +492,7 @@ footer a i {
         flex-direction: column;
     }
 
-    #result-infos > div {
+    #result-infos>div {
         width: 100%;
         flex: 1 1 100%;
     }
@@ -489,7 +501,8 @@ footer a i {
         font-size: 0.9rem;
     }
 
-    th, td {
+    th,
+    td {
         padding: 0.5rem;
     }
 }
@@ -523,7 +536,11 @@ footer a i {
         width: 50px;
     }
 
-    .card, .form-control, .table, .border, .card-hack {
+    .card,
+    .form-control,
+    .table,
+    .border,
+    .card-hack {
         border-radius: 0.35rem;
     }
 
@@ -549,7 +566,8 @@ footer a i {
         padding: 5px;
     }
 
-    textarea.form-control, pre {
+    textarea.form-control,
+    pre {
         padding: 15px;
         font-size: 0.85rem;
     }
@@ -573,7 +591,8 @@ footer a i {
         min-width: 400px;
     }
 
-    th, td {
+    th,
+    td {
         padding: 0.4rem;
         word-break: break-word;
     }
@@ -594,7 +613,7 @@ footer a i {
     }
 
     /* FAQ/Cheatsheet adjustments */
-    #cheatsheet > div {
+    #cheatsheet>div {
         padding: 8px;
         margin-bottom: 30px;
     }
@@ -652,7 +671,9 @@ footer a i {
         font-size: 0.85rem;
     }
 
-    .btn, .btn-primary, .btn-hack {
+    .btn,
+    .btn-primary,
+    .btn-hack {
         width: 100%;
         padding: 12px;
         font-size: 1rem;
@@ -668,11 +689,12 @@ footer a i {
         padding: 5px;
     }
 
-    #result-infos > div {
+    #result-infos>div {
         padding: 5px;
     }
 
-    textarea.form-control, pre {
+    textarea.form-control,
+    pre {
         padding: 10px;
         font-size: 0.8rem;
     }
@@ -689,7 +711,8 @@ footer a i {
         font-size: 0.75rem;
     }
 
-    th, td {
+    th,
+    td {
         padding: 0.3rem;
     }
 
@@ -719,7 +742,7 @@ footer a i {
         margin-top: 15px;
     }
 
-    .analyzer h2 + div {
+    .analyzer h2+div {
         margin-top: 10px;
     }
 
@@ -757,7 +780,9 @@ footer a i {
         width: 35px;
     }
 
-    .btn, .btn-primary, .btn-hack {
+    .btn,
+    .btn-primary,
+    .btn-hack {
         padding: 10px;
         font-size: 0.9rem;
     }
@@ -779,15 +804,21 @@ footer a i {
         opacity: 0.7;
     }
 
-    .btn, .btn-primary, .btn-hack {
+    .btn,
+    .btn-primary,
+    .btn-hack {
         min-height: 44px;
     }
 
-    input, textarea, select {
+    input,
-        font-size: 16px; /* Prevents zoom on iOS */
+    textarea,
+    select {
+        font-size: 16px;
+        /* Prevents zoom on iOS */
     }
 
-    a, button {
+    a,
+    button {
         min-height: 44px;
         min-width: 44px;
     }
@@ -817,18 +848,30 @@ footer a i {
         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;
     }
 }

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
+  // Check if the clicked element is a copy icon
-    if (event.target.classList.contains('copy-icon')) {
+  if (event.target.classList.contains('copy-icon')) {
-      const icon = event.target;
+    const icon = event.target;
-      const textarea = icon.closest('.textarea-container').querySelector('textarea');
+    const textarea = icon.closest('.textarea-container').querySelector('textarea');
 
-      if (textarea) {
+    if (textarea) {
-        textarea.select();
+      textarea.select();
-        navigator.clipboard.writeText(textarea.value).then(() => {
+      navigator.clipboard.writeText(textarea.value).then(() => {
-          icon.classList.remove('fa-copy');
+        icon.classList.remove('fa-copy');
-          icon.classList.add('fa-check');
+        icon.classList.add('fa-check');
-          setTimeout(() => {
+        setTimeout(() => {
-            icon.classList.remove('fa-check');
+          icon.classList.remove('fa-check');
-            icon.classList.add('fa-copy');
+          icon.classList.add('fa-copy');
-          }, 1500);
+        }, 1500);
-        });
+      });
-      }
     }
-  });
+  }
+});
 
 /**
  * Image preview functions
@@ -250,7 +250,7 @@ function parseResult(result) {
     analyzer.className = `analyzer a-${escapeHtml(tool)}`;
     resultDiv.appendChild(analyzer);
 
-    analyzer.innerHTML += `<h2>${capitalize(tool.replace("_"," "))}</h2>`;
+    analyzer.innerHTML += `<h2>${capitalize(tool.replace("_", " "))}</h2>`;
 
     // 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 += `<div class='results_img'><img src='${escapeHtml(image)}'/></div>`;
+          analyzer.innerHTML += `<div class='results_img'><img src='${escapeHtml(image)}'/></div>`;
         }
       }
 
@@ -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%";