deux icônes et pdf

templates/index.html

@@ -16,25 +16,21 @@
       --apple-border: #d1d1d6;
       --apple-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     }
-
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       background: var(--apple-gray);
       color: #1c1c1e;
     }
-
     h1,
     h2,
     h5 {
       font-weight: 600;
     }
-
     /* thumbnails */
     .preset-image-container {
       overflow: hidden;
       margin-bottom: 12px;
     }
-
     .preset-image {
       width: 100%;
       border-radius: 12px;
@@ -43,15 +39,12 @@
       transition: transform 0.3s ease, border-color 0.3s ease;
       cursor: pointer;
     }
-
     .preset-image:hover {
       transform: scale(1.05);
     }
-
     .preset-image.selected {
       border-color: var(--apple-blue);
     }
-
     /* dropzone */
     .dropzone {
       border: 2px dashed var(--apple-border);
@@ -61,7 +54,6 @@
       text-align: center;
       box-shadow: var(--apple-shadow);
     }
-
     /* preview */
     .preview-image {
       max-width: 220px;
@@ -70,22 +62,18 @@
       opacity: 0;
       transition: opacity 0.4s ease;
     }
-
     .preview-image.visible {
       opacity: 1;
     }
-
     /* buttons */
     .btn-primary {
       background: var(--apple-blue);
       border: none;
       font-weight: 500;
     }
-
     .btn-primary:hover {
       background: #005ecb;
     }
-
     /* gauge */
     .jauge-container {
       display: none;
@@ -93,7 +81,6 @@
       gap: 24px;
       margin-top: 24px;
     }
-
     .jauge {
       width: 24px;
       height: 160px;
@@ -103,7 +90,6 @@
       overflow: hidden;
       border: 1px solid var(--apple-border);
     }
-
     .jauge-level {
       position: absolute;
       bottom: 0;
@@ -112,7 +98,6 @@
       background: var(--apple-blue);
       transition: height 0.6s ease, background 0.3s ease;
     }
-
     .jauge-labels {
       font-size: 0.7rem;
       color: #636366;
@@ -121,7 +106,6 @@
       justify-content: space-between;
       height: 160px;
     }
-
     /* icon column */
     .icon-buttons {
       display: none;
@@ -131,7 +115,6 @@
       align-items: center;
       margin-left: 12px;
     }
-
     .icon-buttons button {
       background: none;
       border: none;
@@ -139,7 +122,6 @@
       font-size: 24px;
       cursor: pointer;
     }
-
     /* section hidden until first preview shown */
     #compareSection {
       margin-top: 40px;
@@ -202,9 +184,16 @@
                   <span>most certainly</span><span>very probably</span><span>probably</span><span>possibly</span><span>probably not</span><span>definitely not</span>
                 </div>
               </div>
+              <!-- boutons de PDF -->
               <div class="icon-buttons" id="iconButtons">
-                <button title="Print" onclick="generatePDF()"><i class="fas fa-print"></i></button>
-                <button title="Certificate"><i class="fa-solid fa-file-certificate"></i></button>
+                <button title="Print" onclick="generatePDF1()"><i class="fas fa-print"></i></button>
+                <button
+                  title="Certificate"
+                  aria-label="Certificate PDF"
+                  onclick="generatePDF2()">
+                  <i class="fas fa-certificate" aria-hidden="true"></i>
+                </button>
+
               </div>
             </div>
           </div>
@@ -218,14 +207,12 @@
   <script>
     let file1 = null,
       file2 = null;
-
     function resetSelection(target) {
       for (let i = 1; i <= 3; i++) {
         const thumb = document.getElementById(`preset-${i}-${target}`);
         if (thumb) thumb.classList.remove("selected");
       }
     }
-
     function selectPreset(n, target) {
       const imgEl = document.getElementById(`preset-${n}-${target}`);
       const src = imgEl.src;
@@ -244,7 +231,6 @@
           checkReady();
         });
     }
-
     function updatePreview(fileOrBlob, target) {
       const reader = new FileReader();
       reader.onload = (e) => {
@@ -255,7 +241,6 @@
       };
       reader.readAsDataURL(fileOrBlob);
     }
-
     document.getElementById("fileInput1").addEventListener("change", (e) => {
       if (e.target.files.length) {
         file1 = e.target.files[0];
@@ -272,7 +257,6 @@
         checkReady();
       }
     });
-
     function checkReady() {
       const container = document.getElementById("compareButtonContainer");
       if (file1 && file2) {
@@ -282,7 +266,6 @@
         container.innerHTML = "";
       }
     }
-
     async function processImages() {
       const fd = new FormData();
       fd.append("image1", file1);
@@ -313,41 +296,43 @@
         resDiv.innerHTML = '<div class="text-danger">Error processing images.</div>';
       }
     }
-
-    async function generatePDF() {
-      const { jsPDF } = window.jspdf;
-      const pdf = new jsPDF({ orientation: "portrait", unit: "pt", format: "a4" });
-
-      // capture the score block including gauge & icons (icons will be hidden by CSS print media maybe, but fine)
-      const target = document.querySelector("#compareSection .d-flex");
-      const canvas = await html2canvas(target, { backgroundColor: null });
-      const imgData = canvas.toDataURL("image/png");
-      const pageWidth = pdf.internal.pageSize.getWidth();
-      const margin = 40;
-      const availableWidth = pageWidth - margin * 2;
-
-      // header
-      pdf.setFont("helvetica", "normal");
-      pdf.setFontSize(24);
-      pdf.text("Fraud Score", pageWidth / 2, 50, { align: "center" });
-      pdf.setFontSize(12);
-      pdf.text("Is my work used by generative AI ?", pageWidth / 2, 70, { align: "center" });
-
-      // image
-      const imgProps = pdf.getImageProperties(imgData);
-      const imgHeight = (imgProps.height * availableWidth) / imgProps.width;
-      pdf.addImage(imgData, "PNG", margin, 100, availableWidth, imgHeight);
-
-      // footer
-      const yFooterStart = 110 + imgHeight;
-      pdf.setFontSize(10);
-      const now = new Date();
-      pdf.text(`Generated on: ${now.toLocaleString()}`, margin, yFooterStart);
-      pdf.text(`Calculated by: ${window.location.href}`, margin, yFooterStart + 14);
-
-      const blobUrl = pdf.output("bloburl");
-      window.open(blobUrl, "_blank");
-    }
+    async function generatePDF1(){const {jsPDF}=window.jspdf;const pdf=new jsPDF({orientation:'portrait',unit:'pt',format:'a4'});
+    const pageW=pdf.internal.pageSize.getWidth();const margin=40;const usableW=pageW-margin*2;let y=100;
+    pdf.setFont('helvetica','normal');pdf.setFontSize(24);pdf.text('Fraud Score',pageW/2,y,{align:'center'});
+    y+=20;pdf.setFontSize(12);pdf.text('Is my work used by generative AI ?',pageW/2,y,{align:'center'});
+    y+=100; // six blank lines
+    const section=document.querySelector('#compareSection .d-flex');const clone=section.cloneNode(true);
+    clone.querySelectorAll('button').forEach(b=>b.style.display='none'); // hide calculate/print
+    document.body.appendChild(clone);clone.style.position='absolute';clone.style.left='-9999px';
+    const canvas=await html2canvas(clone,{backgroundColor:null});document.body.removeChild(clone);
+    const imgData=canvas.toDataURL('image/png');const props=pdf.getImageProperties(imgData);const imgH=(props.height*usableW)/props.width;
+    pdf.addImage(imgData,'PNG',margin,y,usableW,imgH);
+    y+=imgH+100; // six blank lines before footer
+    pdf.setFontSize(10);
+    const now=new Date();pdf.text(`Calculated on: ${now.toLocaleString()}`,margin,y);
+    const urlText=`by: ${window.location.href}`;
+    const wrapped=pdf.splitTextToSize(urlText,usableW);
+    pdf.text(wrapped,margin,y+28);
+    window.open(pdf.output('bloburl'),'_blank');}
+    async function generatePDF2(){const {jsPDF}=window.jspdf;const pdf=new jsPDF({orientation:'portrait',unit:'pt',format:'a4'});
+    const pageW=pdf.internal.pageSize.getWidth();const margin=40;const usableW=pageW-margin*2;let y=100;
+    pdf.setFont('helvetica','normal');pdf.setFontSize(24);pdf.text('Fraud Score',pageW/2,y,{align:'center'});
+    y+=20;pdf.setFontSize(12);pdf.text('Is my work used by generative AI ?',pageW/2,y,{align:'center'});
+    y+=100; // six blank lines
+    const section=document.querySelector('#compareSection .d-flex');const clone=section.cloneNode(true);
+    clone.querySelectorAll('button').forEach(b=>b.style.display='none'); // hide calculate/print
+    document.body.appendChild(clone);clone.style.position='absolute';clone.style.left='-9999px';
+    const canvas=await html2canvas(clone,{backgroundColor:null});document.body.removeChild(clone);
+    const imgData=canvas.toDataURL('image/png');const props=pdf.getImageProperties(imgData);const imgH=(props.height*usableW)/props.width;
+    pdf.addImage(imgData,'PNG',margin,y,usableW,imgH);
+    y+=imgH+100; // six blank lines before footer
+    pdf.setFontSize(10);
+    const now=new Date();pdf.text(`Calculated on: ${now.toLocaleString()}`,margin,y);
+    const urlText=`by: ${window.location.href}`;
+    const wrapped=pdf.splitTextToSize(urlText,usableW);
+    pdf.text(wrapped,margin,y+28);
+    window.open(pdf.output('bloburl'),'_blank');}
+    
   </script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>