From 9e19c1c8c758e3c10cd31cea5cb481ba833c507e Mon Sep 17 00:00:00 2001 From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com> Date: Fri, 3 Jul 2026 17:06:47 -0500 Subject: [PATCH] =?UTF-8?q?feat(firma):=20integraci=C3=B3n=20pad=20biom?= =?UTF-8?q?=C3=A9trico=20Topaz=20SigWeb?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - CSS: overlay #topaz-overlay con modal centrado, estado has-sig - HTML: modal con área de estado, contador de trazos, botones Cancelar / Limpiar / Aceptar - JS: módulo topaz — carga SigWebTablet.js desde localhost:47289, compatible con SigWeb v1 (globals+ctx) y v2 (métodos en objeto), soporta fid='__global' para canvas principal e inline (fw-*) - Botón "Tableta" agregado en canvas area global y en renderFirmaInline para campos tipo firma/firma_profesional Co-Authored-By: Claude Sonnet 4.6 --- form_cliente.php | 197 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 195 insertions(+), 2 deletions(-) diff --git a/form_cliente.php b/form_cliente.php index 1444e73..0b21ec2 100644 --- a/form_cliente.php +++ b/form_cliente.php @@ -90,6 +90,29 @@ if (preg_match('/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/ /* ── Loading screen ──────────────────────────────── */ #loading-screen { min-height:50vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; } + + /* ── 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; } @@ -204,11 +227,15 @@ if (preg_match('/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/

✍️ Dibuja tu firma con el dedo o el mouse.

-
+
+ Sin firma
@@ -294,6 +321,36 @@ if (preg_match('/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/
+ +
+
+
+ Pad biométrico Topaz +
+
+
+ +
+ Firme en el pad biométrico +
+
Trazos: 0
+
+
+
+ + + +
+
+
+