From 67efd470de5b6db6a756e59499acdb42386d8483 Mon Sep 17 00:00:00 2001 From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com> Date: Fri, 3 Jul 2026 17:11:29 -0500 Subject: [PATCH] =?UTF-8?q?feat(firma):=20integraci=C3=B3n=20Topaz=20SigWe?= =?UTF-8?q?b=20en=20ver=5Fformulario=5Fenviado.php?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CSS/HTML: mismo overlay #topaz-overlay con modal de estado - JS: módulo topaz con target={canvas, onAccept} para canvas del profesional (.fpw-canvas) y del paciente turnero (.turnero-cv) - Botón "Tableta" en canvas del paciente (.turnero-topaz) y del profesional (.fpw-topaz); el usuario sigue confirmando manualmente Co-Authored-By: Claude Sonnet 4.6 --- ver_formulario_enviado.php | 178 ++++++++++++++++++++++++++++++++++++- 1 file changed, 177 insertions(+), 1 deletion(-) diff --git a/ver_formulario_enviado.php b/ver_formulario_enviado.php index 4287875..d3d0fac 100644 --- a/ver_formulario_enviado.php +++ b/ver_formulario_enviado.php @@ -359,6 +359,28 @@ function esc2(mixed $v): string { .doc-footer { padding: 10px 22px; } @page { margin: 1cm; } } + /* ── Topaz SigWeb overlay ─────────────────────────── */ + #topaz-overlay { display:none; position:fixed; inset:0; z-index:9999; + background:rgba(0,0,0,.55); align-items:center; + justify-content:center; padding:16px; } + .topaz-modal { background:#fff; border-radius:16px; width:100%; + max-width:400px; box-shadow:0 12px 40px rgba(0,0,0,.3); overflow:hidden; } + .topaz-modal-hdr { background:linear-gradient(135deg,#1565c0,#0288d1); + color:#fff; padding:14px 18px; font-weight:700; font-size:.95rem; + display:flex; align-items:center; gap:8px; } + .topaz-modal-body { padding:20px 18px; } + .topaz-pad-area { border:2px dashed #adb5bd; border-radius:10px; padding:24px 16px; + text-align:center; background:#f8fafc; min-height:100px; + display:flex; flex-direction:column; align-items:center; + justify-content:center; gap:6px; transition:border-color .2s; } + .topaz-pad-area.has-sig { border-color:#198754; border-style:solid; background:#f0fff4; } + .topaz-pts-badge { font-size:.8rem; color:#64748b; } + .topaz-modal-footer { display:flex; gap:8px; justify-content:flex-end; + padding:12px 18px; border-top:1px solid #f1f5f9; flex-wrap:wrap; } + .btn-topaz { font-size:.83rem; padding:6px 13px; border-radius:8px; border:1.5px solid #0288d1; + background:#fff; color:#0288d1; cursor:pointer; font-weight:600; + display:inline-flex; align-items:center; gap:5px; transition:all .15s; } + .btn-topaz:hover { background:#e0f2fe; } @@ -553,6 +575,9 @@ function esc2(mixed $v): string { + @@ -575,8 +600,11 @@ function esc2(mixed $v): string { data-formulario="">

Dibuje su firma en el recuadro:

-
+
+
@@ -897,6 +925,11 @@ function esc2(mixed $v): string { msg.textContent = ''; }); + var btnTopazPro = widget.querySelector('.fpw-topaz'); + if (btnTopazPro) btnTopazPro.addEventListener('click', function() { + topaz.activar({ canvas: canvas, onAccept: function() {} }); + }); + btnSave.addEventListener('click', function() { const svg = canvas.toDataURL('image/png'); if (svg.length < 1000) { @@ -1027,6 +1060,11 @@ document.querySelectorAll('.turnero-firma-item').forEach(function(widget) { msgEl.textContent = ''; }); + var btnTopazPac = widget.querySelector('.turnero-topaz'); + if (btnTopazPac) btnTopazPac.addEventListener('click', function() { + topaz.activar({ canvas: canvas, onAccept: function() {} }); + }); + if (btnFirm) btnFirm.addEventListener('click', function() { var png = canvas.toDataURL('image/png'); if (png.length < 1500) { @@ -1083,5 +1121,143 @@ document.querySelectorAll('.turnero-firma-item').forEach(function(widget) { }); }); + + + + +