version samedi 3 mai 17:57

templates/index.html

@@ -21,116 +21,57 @@
       background: var(--apple-gray);
       color: #1c1c1e;
     }
-    h1,
-    h2,
-    h5 {
-      font-weight: 600;
-    }
+    h1, h2, h5 { font-weight: 600; }
     /* thumbnails */
-    .preset-image-container {
-      overflow: hidden;
-      margin-bottom: 12px;
-    }
+    .preset-image-container { overflow: hidden; margin-bottom: 12px; }
     .preset-image {
-      width: 100%;
-      border-radius: 12px;
-      border: 2px solid transparent;
-      box-shadow: var(--apple-shadow);
-      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);
+      width: 100%; border-radius: 12px; border: 2px solid transparent;
+      box-shadow: var(--apple-shadow); transition: transform .3s ease, border-color .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);
-      border-radius: 16px;
-      background: #fff;
-      padding: 20px;
-      text-align: center;
-      box-shadow: var(--apple-shadow);
+      border: 2px dashed var(--apple-border); border-radius: 16px; background: #fff;
+      padding: 20px; text-align: center; box-shadow: var(--apple-shadow);
     }
     /* preview */
     .preview-image {
-      max-width: 220px;
-      border-radius: 16px;
-      box-shadow: var(--apple-shadow);
-      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;
+      max-width: 220px; border-radius: 16px; box-shadow: var(--apple-shadow);
+      opacity: 0; transition: opacity .4s ease;
     }
+    .preview-image.visible { opacity: 1; }
+    /* generic primary button (blue) */
+    .btn-primary        { background: var(--apple-blue); border: none; font-weight: 500; }
+    .btn-primary:hover  { background: #005ecb; }
+    /* validate button (light blue) */
+    .btn-validate               { background: #8ec3ff; border: none; font-weight: 500; }
+    .btn-validate:disabled      { background: #d0e5ff; cursor: not-allowed; }
     /* gauge */
     .jauge-container {
-      display: none;
-      align-items: center;
-      gap: 24px;
-      margin-top: 24px;
+      display: none; align-items: center; gap: 24px; margin-top: 24px;
     }
     .jauge {
-      width: 24px;
-      height: 160px;
-      border-radius: 12px;
-      background: #e5e5ea;
-      position: relative;
-      overflow: hidden;
-      border: 1px solid var(--apple-border);
+      width: 24px; height: 160px; border-radius: 12px; background: #e5e5ea;
+      position: relative; overflow: hidden; border: 1px solid var(--apple-border);
     }
     .jauge-level {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      border-radius: 12px;
-      background: var(--apple-blue);
-      transition: height 0.6s ease, background 0.3s ease;
+      position: absolute; bottom: 0; width: 100%; border-radius: 12px;
+      background: var(--apple-blue); transition: height .6s ease, background .3s ease;
     }
     .jauge-labels {
-      font-size: 0.7rem;
-      color: #636366;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 160px;
+      font-size: 0.7rem; color: #636366; display: flex; flex-direction: column; justify-content: space-between; height: 160px;
     }
     /* icon column */
     .icon-buttons {
-      display: none;
-      flex-direction: column;
-      gap: 16px;
-      justify-content: center;
-      align-items: center;
-      margin-left: 12px;
-    }
-    .icon-buttons button {
-      background: none;
-      border: none;
-      color: var(--apple-blue);
-      font-size: 24px;
-      cursor: pointer;
+      display: none; flex-direction: column; gap: 16px; justify-content: center; align-items: center; margin-left: 12px;
     }
+    .icon-buttons button { background: none; border: none; color: var(--apple-blue); font-size: 24px; cursor: pointer; }
     /* section hidden until first preview shown */
-    #compareSection {
-      margin-top: 40px;
-      text-align: center;
-      display: none;
-    }
+    #compareSection { margin-top: 40px; text-align: center; display: none; }
     /* modal */
-    .modal-header{border-bottom:1px solid var(--apple-border)}
-    .modal-footer{border-top:1px solid var(--apple-border)}
+    .modal-header { border-bottom: 1px solid var(--apple-border); }
+    .modal-footer { border-top: 1px solid var(--apple-border); }
   </style>
 </head>
 <body>
@@ -149,12 +90,13 @@
           <div class="col-4"><div class="preset-image-container"><img id="preset-3-1" src="/static/muhammad ali_1.jpg" class="preset-image" onclick="selectPreset(3,1)" alt="Original 3" /></div></div>
         </div>
         <div class="dropzone mt-3" id="dropzone1">
-          <p class="mb-2">Drag & Drop or Upload (.jpg/.png/.webp)</p>
+          <p class="mb-2">Drag &amp; Drop or Upload (.jpg/.png/.webp)</p>
           <input type="file" id="fileInput1" accept="image/*" hidden />
           <button class="btn btn-outline-secondary" onclick="document.getElementById('fileInput1').click()">Upload</button>
         </div>
       </div>
-      <!-- AI -->
+
+      <!-- AI generated -->
       <div class="col-md-6">
         <h5 class="text-center mb-3">Select AI Generated Image</h5>
         <div class="row">
@@ -163,7 +105,7 @@
           <div class="col-4"><div class="preset-image-container"><img id="preset-3-2" src="/static/muhammad ali_2.png" class="preset-image" onclick="selectPreset(3,2)" alt="AI 3" /></div></div>
         </div>
         <div class="dropzone mt-3" id="dropzone2">
-          <p class="mb-2">Drag & Drop or Upload (.jpg/.png/.webp)</p>
+          <p class="mb-2">Drag &amp; Drop or Upload (.jpg/.png/.webp)</p>
           <input type="file" id="fileInput2" accept="image/*" hidden />
           <button class="btn btn-outline-secondary" onclick="document.getElementById('fileInput2').click()">Upload</button>
         </div>
@@ -187,11 +129,9 @@
                   <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="generatePDF1()"><i class="fas fa-print"></i></button>
                 <button title="Certificate" data-bs-toggle="modal" data-bs-target="#certModal"><i class="fas fa-certificate"></i></button>
-
               </div>
             </div>
           </div>
@@ -202,6 +142,7 @@
       <div id="results" class="mt-4"></div>
     </div>
   </div>
+
   <!-- Certificate modal -->
   <div class="modal fade" id="certModal" tabindex="-1" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered">
@@ -214,15 +155,31 @@
           <div class="modal-body">
             <div class="row g-3">
               <div class="col-md-6">
-                <label class="form-label">First Name</label>
+                <label for="firstName" class="form-label">First Name</label>
                 <input id="firstName" class="form-control" required>
               </div>
               <div class="col-md-6">
-                <label class="form-label">Last Name</label>
+                <label for="lastName" class="form-label">Last Name</label>
                 <input id="lastName" class="form-control" required>
               </div>
+              <div class="col-md-6">
+                <label for="occupation" class="form-label">Occupation</label>
+                <input id="occupation" class="form-control" required>
+              </div>
+              <div class="col-md-6">
+                <label for="city" class="form-label">City</label>
+                <input id="city" class="form-control" required>
+              </div>
+              <div class="col-md-6">
+                <label for="state" class="form-label">State</label>
+                <input id="state" class="form-control" required>
+              </div>
+              <div class="col-md-6">
+                <label for="linkedin" class="form-label">LinkedIn URL</label>
+                <input id="linkedin" type="url" class="form-control" placeholder="https://www.linkedin.com/in/…" required>
+              </div>
               <div class="col-12">
-                <label class="form-label">Generative AI</label>
+                <label for="aiModel" class="form-label">Generative AI</label>
                 <select id="aiModel" class="form-select" required>
                   <option value="" selected disabled>Select…</option>
                   <option>Adobe Firefly Image Model 4</option>
@@ -237,7 +194,7 @@
                   <option>NightCafe Creator</option>
                   <option>Playground AI</option>
                   <option>Runway Gen‑3 Alpha</option>
-                  <option>Stable Diffusion 3</option>                 
+                  <option>Stable Diffusion 3</option>
                   <option>Other</option>
                 </select>
               </div>
@@ -254,213 +211,154 @@
               </div>
             </div>
           </div>
+          <!-- modal footer -->
           <div class="modal-footer">
             <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
-            <button type="submit" class="btn btn-primary">Validate &amp; Generate PDF</button>
+            <button id="validateBtn" type="submit" class="btn btn-validate" disabled>Validate & Generate PDF</button>
           </div>
         </form>
       </div>
     </div>
   </div>
+
+  <!-- scripts -->
   <script>
-    let file1 = null,
-      file2 = null;
-/* formulaire certificat */
-document.getElementById('certForm').addEventListener('submit',e=>{
-  e.preventDefault();
-  certData={
-    first:document.getElementById('firstName').value.trim(),
-    last:document.getElementById('lastName').value.trim(),
-    ai:document.getElementById('aiModel').value,
-    prompt:document.getElementById('promptText').value.trim()
-  };
-  bootstrap.Modal.getInstance(document.getElementById('certModal')).hide();
-  generatePDF2();
-});
-/* PDF2 : certificat avec les infos du formulaire */
-async function generatePDF2 () {
-  const { jsPDF } = window.jspdf;
-  const pdf       = new jsPDF({ unit : 'pt', format : 'a4' });
-  /* ── page metrics ─────────────────────────────────── */
-  const pageW   = pdf.internal.pageSize.getWidth();
-  const margin  = 40;
-  const usableW = pageW - margin * 2;
-  let   y       = 80;
-  /* ── header ───────────────────────────────────────── */
-  pdf.setFont('helvetica', 'normal');
-  pdf.setFontSize(26);
-  pdf.text('Certification', pageW / 2, y, { align : 'center' });
-  y += 22;
-  pdf.setDrawColor('#d1d1d6');
-  pdf.line(margin, y, pageW - margin, y);            /* thin divider */
-  y += 32;
-  /* ── visual block (images + gauge + score) ────────── */
-  const section = document.querySelector('#compareSection .d-flex');
-  const clone   = section.cloneNode(true);
-  clone.querySelectorAll('button').forEach(b => (b.style.display = 'none'));
-  document.body.appendChild(clone);
-  clone.style.cssText = 'position:absolute;left:-9999px;top:0';
-  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 + 40;
-  /* ── certificate text ─────────────────────────────── */
-  pdf.setFontSize(12);
-  pdf.text('I hereby certify that the original picture shown on the left is my own work and that', margin, y);
-  y += 20;
-  pdf.text('the AI‑generated picture shown on the right was produced by the generative AI', margin, y);
-  y += 20;
-  pdf.text('indicated below, using the prompt that follows.', margin, y);
-  y += 50;
-  const indentX         = 150;                 // tabulation pour les valeurs saisies
-  
-  /* generative AI (label regular, value italic) */
-  pdf.setFont('helvetica', 'normal');
-  pdf.text('Generative AI:', margin + 50, y);
-  pdf.setFont('helvetica', 'italic');
-  pdf.text(certData.ai, margin + indentX, y);
-  y += 30;
-  /* prompt */
-  const promptMaxWidth  = usableW - indentX;   // largeur réellement disponible
-  
-  pdf.setFont('helvetica', 'normal');
-  pdf.text('Prompt:', margin + 50, y);
-  pdf.setFont('helvetica', 'italic');
-  const promptLines = pdf.splitTextToSize(certData.prompt, promptMaxWidth);
-  pdf.text(promptLines, margin + indentX, y);   // même retrait pour toutes les lignes
-  y += promptLines.length * 14 + 20;
-  /* signer’s name */
-  pdf.setFont('helvetica', 'normal');
-  pdf.text('Name:', margin + 50, y);
-  pdf.setFont('helvetica', 'italic');
-  pdf.text(` ${certData.first} ${certData.last}`,margin + indentX,y);
-  y += 30;
-  /* date */
-  const now = new Date().toLocaleString();
-  pdf.setFont('helvetica', 'normal');
-  pdf.text('Date:', margin + 50, y);
-  pdf.setFont('helvetica', 'italic');
-  pdf.text(` ${now.toLocaleString()}`,margin + indentX,y);
-  y += 50;                                          
-   /* URL */
-  pdf.setFont('helvetica', 'normal');
-  const footerLines = pdf.splitTextToSize(`Fraud Score calculated by: ${window.location.href}`, usableW);
-  pdf.text(footerLines, margin, y);
-  /* ── open PDF ─────────────────────────────────────── */
-  window.open(pdf.output('bloburl'), '_blank');
-}
-    
-    function resetSelection(target) {
-      for (let i = 1; i <= 3; i++) {
-        const thumb = document.getElementById(`preset-${i}-${target}`);
-        if (thumb) thumb.classList.remove("selected");
+    let file1 = null, file2 = null;
+    /* helper functions for selection */
+    function resetSelection(target){
+      for(let i=1;i<=3;i++){
+        const t=document.getElementById(`preset-${i}-${target}`);
+        if(t) t.classList.remove('selected');
       }
     }
-    function selectPreset(n, target) {
-      const imgEl = document.getElementById(`preset-${n}-${target}`);
-      const src = imgEl.src;
-      fetch(src)
-        .then((r) => r.blob())
-        .then((blob) => {
-          const file = new File([blob], src.split("/").pop(), { type: blob.type });
-          if (target === 1) {
-            file1 = file;
-          } else {
-            file2 = file;
-          }
-          updatePreview(blob, target);
-          resetSelection(target);
-          imgEl.classList.add("selected");
-          checkReady();
-        });
+    function selectPreset(n,target){
+      const imgEl=document.getElementById(`preset-${n}-${target}`);
+      const src=imgEl.src;
+      fetch(src).then(r=>r.blob()).then(blob=>{
+        const f=new File([blob],src.split('/').pop(),{type:blob.type});
+        if(target===1){file1=f;}else{file2=f;}
+        updatePreview(blob,target);
+        resetSelection(target);
+        imgEl.classList.add('selected');
+        checkReady();
+      });
     }
-    function updatePreview(fileOrBlob, target) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const img = document.getElementById(`previewImage${target}`);
-        img.src = e.target.result;
-        img.classList.add("visible");
-        document.getElementById("compareSection").style.display = "block";
+    function updatePreview(blob,target){
+      const reader=new FileReader();
+      reader.onload=e=>{
+        const img=document.getElementById(`previewImage${target}`);
+        img.src=e.target.result;
+        img.classList.add('visible');
+        document.getElementById('compareSection').style.display='block';
       };
-      reader.readAsDataURL(fileOrBlob);
+      reader.readAsDataURL(blob);
     }
-    document.getElementById("fileInput1").addEventListener("change", (e) => {
-      if (e.target.files.length) {
-        file1 = e.target.files[0];
-        updatePreview(file1, 1);
-        resetSelection(1);
-        checkReady();
-      }
+    /* upload inputs */
+    document.getElementById('fileInput1').addEventListener('change',e=>{
+      if(e.target.files.length){file1=e.target.files[0];updatePreview(file1,1);resetSelection(1);checkReady();}
     });
-    document.getElementById("fileInput2").addEventListener("change", (e) => {
-      if (e.target.files.length) {
-        file2 = e.target.files[0];
-        updatePreview(file2, 2);
-        resetSelection(2);
-        checkReady();
-      }
+    document.getElementById('fileInput2').addEventListener('change',e=>{
+      if(e.target.files.length){file2=e.target.files[0];updatePreview(file2,2);resetSelection(2);checkReady();}
     });
-    function checkReady() {
-      const container = document.getElementById("compareButtonContainer");
-      if (file1 && file2) {
-        container.innerHTML =
-          '<button class="btn btn-primary" onclick="processImages()">Calculate Fraud Score</button>';
-      } else {
-        container.innerHTML = "";
-      }
+    /* enable calculate button */
+    function checkReady(){
+      const c=document.getElementById('compareButtonContainer');
+      c.innerHTML = (file1&&file2) ? '<button class="btn btn-primary" onclick="processImages()">Calculate Fraud Score</button>' : '';
     }
-    async function processImages() {
-      const fd = new FormData();
-      fd.append("image1", file1);
-      fd.append("image2", file2);
-      const resDiv = document.getElementById("results");
-      resDiv.innerHTML = '<div class="spinner-border text-primary"></div>';
-      try {
-        const res = await fetch("/process", { method: "POST", body: fd });
-        const data = await res.json();
-        const euclid = parseFloat(data.distance);
-        const fraud = Math.min(100, Math.max(2, 185 - 2.73 * euclid));
-        document.getElementById("euclidVal").textContent = fraud.toFixed(1);
-        document.getElementById("scoreBlock").style.display = "block";
-        // gauge
-        let color = "#198754";
-        if (fraud > 90) color = "#dc3545";
-        else if (fraud > 75) color = "#fd7e14";
-        else if (fraud > 60) color = "#ffc107";
-        else if (fraud > 45) color = "#0dcaf0";
-        else if (fraud > 30) color = "#0d6efd";
-        const gaugeLevel = document.getElementById("jaugeLevel");
-        gaugeLevel.style.height = `${Math.min(100, fraud)}%`;
-        gaugeLevel.style.backgroundColor = color;
-        document.getElementById("gaugeWrapper").style.display = "flex";
-        document.getElementById("iconButtons").style.display = "flex";
-        resDiv.innerHTML = "";
-      } catch (err) {
-        resDiv.innerHTML = '<div class="text-danger">Error processing images.</div>';
-      }
+    /* fraud score API */
+    async function processImages(){
+      const fd=new FormData();
+      fd.append('image1',file1);
+      fd.append('image2',file2);
+      const resDiv=document.getElementById('results');
+      resDiv.innerHTML='<div class="spinner-border text-primary"></div>';
+      try{
+        const res=await fetch('/process',{method:'POST',body:fd});
+        const data=await res.json();
+        const euclid=parseFloat(data.distance);
+        const fraud=Math.min(100,Math.max(2,185-2.73*euclid));
+        document.getElementById('euclidVal').textContent=fraud.toFixed(1);
+        document.getElementById('scoreBlock').style.display='block';
+        /* gauge colour */
+        const g=document.getElementById('jaugeLevel');
+        g.style.height=`${Math.min(100,fraud)}%`;
+        g.style.backgroundColor = fraud>90?"#dc3545":fraud>75?"#fd7e14":fraud>60?"#ffc107":fraud>45?"#0dcaf0":fraud>30?"#0d6efd":"#198754";
+        document.getElementById('gaugeWrapper').style.display='flex';
+        document.getElementById('iconButtons').style.display='flex';
+        resDiv.innerHTML='';
+      }catch{resDiv.innerHTML='<div class="text-danger">Error processing images.</div>';}
+    }
+    /* validate button enable logic */
+    const validateBtn=document.getElementById('validateBtn');
+    const certCheck  =document.getElementById('certCheck');
+    certCheck.addEventListener('change',()=>{ validateBtn.disabled = !certCheck.checked; });
+    /* certificate form submission */
+    document.getElementById('certForm').addEventListener('submit',e=>{
+      if(!certCheck.checked){ e.preventDefault(); certCheck.focus(); return; }
+      e.preventDefault();
+      const certData={
+        first      : firstName.value.trim(),
+        last       : lastName.value.trim(),
+        occupation : occupation.value.trim(),
+        city       : city.value.trim(),
+        state      : state.value.trim(),
+        linkedin   : linkedin.value.trim(),
+        ai         : aiModel.value,
+        prompt     : promptText.value.trim()
+      };
+      bootstrap.Modal.getInstance(certModal).hide();
+      generatePDF2(certData);
+    });
+    /* PDF – simple fraud score */
+    async function generatePDF1(){
+      const {jsPDF}=window.jspdf;
+      const pdf=new jsPDF({unit:'pt',format:'a4'});
+      const pageW=pdf.internal.pageSize.getWidth(),margin=40,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;
+      const section=document.querySelector('#compareSection .d-flex'); const clone=section.cloneNode(true);
+      clone.querySelectorAll('button').forEach(b=>b.style.display='none'); document.body.appendChild(clone);
+      clone.style.cssText='position:absolute;left:-9999px;top:0;';
+      const canvas=await html2canvas(clone,{backgroundColor:null}); document.body.removeChild(clone);
+      const img=canvas.toDataURL('image/png'); const prop=pdf.getImageProperties(img);
+      const imgH=(prop.height*usableW)/prop.width; pdf.addImage(img,'PNG',margin,y,usableW,imgH);
+      y+=imgH+60; pdf.setFontSize(10);
+      const urlLines=pdf.splitTextToSize(`Calculated by: ${window.location.href}`,usableW);
+      pdf.text(urlLines,margin,y);
+      window.open(pdf.output('bloburl'),'_blank');
+    }
+    /* PDF – certificate */
+    async function generatePDF2(certData){
+      const {jsPDF}=window.jspdf;
+      const pdf=new jsPDF({unit:'pt',format:'a4'});
+      const pageW=pdf.internal.pageSize.getWidth(),margin=40,usableW=pageW-margin*2; let y=80;
+      pdf.setFont('helvetica','normal'); pdf.setFontSize(26); pdf.text('Certification',pageW/2,y,{align:'center'});
+      y+=22; pdf.setDrawColor('#d1d1d6'); pdf.line(margin,y,pageW-margin,y); y+=32;
+      const section=document.querySelector('#compareSection .d-flex'); const clone=section.cloneNode(true);
+      clone.querySelectorAll('button').forEach(b=>b.style.display='none'); document.body.appendChild(clone);
+      clone.style.cssText='position:absolute;left:-9999px;top:0;';
+      const canvas=await html2canvas(clone,{backgroundColor:null}); document.body.removeChild(clone);
+      const img=canvas.toDataURL('image/png'); const prop=pdf.getImageProperties(img);
+      const imgH=(prop.height*usableW)/prop.width; pdf.addImage(img,'PNG',margin,y,usableW,imgH); y+=imgH+40;
+      pdf.setFontSize(12);
+      pdf.text('I hereby certify that the original picture shown on the left is my own work and that',margin,y); y+=18;
+      pdf.text('the AI‑generated picture shown on the right was produced by the generative AI',          margin,y); y+=18;
+      pdf.text('indicated below, using the prompt that follows.',                                             margin,y); y+=40;
+      const labelX = margin + 50, valueX = margin + 150;
+      pdf.setFont('helvetica','normal'); pdf.text('Generative AI:',labelX,y); pdf.setFont('helvetica','italic'); pdf.text(certData.ai,valueX,y); y+=28;
+      pdf.setFont('helvetica','normal'); pdf.text('Prompt:',labelX,y);    pdf.setFont('helvetica','italic');
+      const promptLines=pdf.splitTextToSize(certData.prompt,usableW-valueX);
+      pdf.text(promptLines,valueX,y); y+=promptLines.length*14+28;
+      pdf.setFont('helvetica','normal'); pdf.text('Name:',labelX,y);    pdf.setFont('helvetica','italic'); pdf.text(`${certData.first} ${certData.last}`,valueX,y); y+=28;
+      pdf.setFont('helvetica','normal'); pdf.text('Occupation:',labelX,y); pdf.setFont('helvetica','italic'); pdf.text(certData.occupation,valueX,y); y+=28;
+      pdf.setFont('helvetica','normal'); pdf.text('City / State:',labelX,y); pdf.setFont('helvetica','italic'); pdf.text(`${certData.city}, ${certData.state}`,valueX,y); y+=28;
+      pdf.setFont('helvetica','normal'); pdf.text('LinkedIn:',labelX,y);  pdf.setFont('helvetica','italic'); pdf.text(certData.linkedin,valueX,y); y+=40;
+      pdf.setFont('helvetica','normal'); pdf.text('Date:',labelX,y);     pdf.setFont('helvetica','italic'); pdf.text(new Date().toLocaleString(),valueX,y); y+=40;
+      const footer=pdf.splitTextToSize(`Fraud Score calculated by: ${window.location.href}`,usableW);
+      pdf.text(footer,margin,y);
+      window.open(pdf.output('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');}
-    
   </script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
@@ -468,3 +366,4 @@ async function generatePDF2 () {
 
 
 
+