Widget « Scan CCTP » pour prescripteurs

Un snippet HTML à coller sur n'importe quel site partenaire. Le visiteur dépose un PDF, l'analyse CCTPscan se lance (1 scan gratuit / IP / jour) et il est redirigé vers son résultat.

Code à copier
<!-- CCTPscan — Widget de scan CCTP gratuit pour prescripteurs -->
<style>
#cctpscan-embed{max-width:420px;margin:0 auto;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:28px;box-shadow:0 4px 24px rgba(0,0,0,.06);font-family:Inter,-apple-system,system-ui,sans-serif}
#cctpscan-embed *{box-sizing:border-box}
#cctpscan-embed .cs-logo{display:flex;align-items:center;gap:6px;font-weight:800;color:#1A2B4A;font-size:22px;margin-bottom:6px}
#cctpscan-embed .cs-logo span{color:#FF6B00}
#cctpscan-embed .cs-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:#FF6B00;border-radius:8px;color:#fff;font-size:16px}
#cctpscan-embed .cs-sub{color:#6b7280;font-size:13px;line-height:1.5;margin:0 0 18px}
#cctpscan-embed .cs-drop{display:block;border:2px dashed #d1d5db;border-radius:12px;padding:30px 16px;text-align:center;cursor:pointer;transition:all .2s}
#cctpscan-embed .cs-drop:hover{border-color:#FF6B00;background:#fff7ed}
#cctpscan-embed .cs-drop input{display:none}
#cctpscan-embed .cs-ico{font-size:30px}
#cctpscan-embed .cs-fname{font-weight:600;color:#374151;margin-top:8px;font-size:14px;word-break:break-all}
#cctpscan-embed .cs-hint{font-size:12px;color:#9ca3af;margin-top:4px}
#cctpscan-embed .cs-btn{width:100%;margin-top:16px;background:#FF6B00;color:#fff;border:none;border-radius:10px;padding:13px;font-weight:600;font-size:15px;cursor:pointer;font-family:inherit}
#cctpscan-embed .cs-btn:hover:not(:disabled){background:#e56000}
#cctpscan-embed .cs-btn:disabled{background:#d1d5db;cursor:not-allowed}
#cctpscan-embed .cs-status{text-align:center;font-size:13px;color:#6b7280;margin-top:14px;min-height:20px;line-height:1.5}
#cctpscan-embed .cs-spinner{width:16px;height:16px;border:3px solid #e5e7eb;border-top-color:#FF6B00;border-radius:50%;animation:cs-spin .8s linear infinite;display:inline-block;vertical-align:middle;margin-right:8px}
#cctpscan-embed .cs-err{color:#dc2626}
#cctpscan-embed .cs-foot{text-align:center;font-size:11px;color:#9ca3af;margin-top:16px}
#cctpscan-embed .cs-foot a{color:#9ca3af;text-decoration:none;font-weight:500}
#cctpscan-embed .cs-foot a:hover{color:#FF6B00}
@keyframes cs-spin{to{transform:rotate(360deg)}}
</style>
<div id="cctpscan-embed">
  <div class="cs-logo"><span class="cs-mark">⚡</span>cctp<span>scan</span></div>
  <p class="cs-sub">Déposez votre CCTP (PDF) et obtenez votre DPGF en moins d'une minute. Gratuit, sans inscription.</p>
  <form id="cctpscan-form">
    <label class="cs-drop" for="cctpscan-file">
      <div class="cs-ico">📄</div>
      <div class="cs-fname" id="cctpscan-fname">Cliquez ou déposez votre PDF ici</div>
      <div class="cs-hint">PDF — 10 Mo max</div>
      <input type="file" id="cctpscan-file" accept="application/pdf" required>
    </label>
    <button type="submit" class="cs-btn" id="cctpscan-btn" disabled>Scanner mon CCTP</button>
    <div class="cs-status" id="cctpscan-status"></div>
  </form>
  <div class="cs-foot">Propulsé par <a href="https://noisy-btp-build-pro.base44.app" target="_blank" rel="noopener">CCTPscan</a></div>
</div>
<script>
(function(){
var API="https://noisy-btp-build-pro.base44.app/functions/analysePublic";
var form=document.getElementById("cctpscan-form"),fileInput=document.getElementById("cctpscan-file"),btn=document.getElementById("cctpscan-btn"),status=document.getElementById("cctpscan-status"),fname=document.getElementById("cctpscan-fname");
fileInput.addEventListener("change",function(){if(fileInput.files.length){fname.textContent=fileInput.files[0].name;btn.disabled=false;}else{btn.disabled=true;}});
form.addEventListener("submit",function(e){e.preventDefault();if(!fileInput.files.length)return;var f=fileInput.files[0];btn.disabled=true;btn.textContent="Analyse en cours…";status.innerHTML='<span class="cs-spinner"></span>Lecture de votre CCTP… (≈ 1 min)';var fd=new FormData();fd.append("file",f);fd.append("project_name",f.name.replace(/\.pdf$/i,""));fetch(API,{method:"POST",body:fd}).then(function(r){return r.json().then(function(d){return{ok:r.ok,data:d};});}).then(function(res){if(!res.ok)throw new Error(res.data.error||"Analyse échouée");status.innerHTML='<span class="cs-spinner"></span>Redirection vers votre résultat…';window.location.href=res.data.result_url;}).catch(function(err){status.innerHTML='<span class="cs-err">'+err.message+'</span>';btn.disabled=false;btn.textContent="Scanner mon CCTP";});});
})();
</script>

Comment l'intégrer

  1. Copiez le snippet ci-dessus.
  2. Collez-le dans le code HTML de votre page, à l'endroit voulu.
  3. Le widget est autonome — aucune dépendance ni inscription requise pour vos visiteurs.
  4. Chaque visiteur peut lancer 1 analyse gratuite par jour ; au-delà, il est invité à créer un compte CCTPscan.