Initial LinkedSign platform
This commit is contained in:
@@ -0,0 +1,457 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FirmaDoc — Prototipo Android</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #F0F4FF;
|
||||
min-height: 100vh;
|
||||
padding: 2rem 1rem;
|
||||
color: #1A1A2E;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #1565C0;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.subtitle {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #6B7A99;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.screens-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* Phone card */
|
||||
.phone {
|
||||
background: #ffffff;
|
||||
border: 0.5px solid #C5D0E8;
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 24px rgba(21,101,192,0.08);
|
||||
}
|
||||
.status-bar {
|
||||
padding: 6px 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.status-bar span { color: #fff; font-size: 11px; font-weight: 500; }
|
||||
.status-icons { display: flex; gap: 4px; align-items: center; }
|
||||
.app-bar {
|
||||
padding: 8px 14px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.app-bar-title { color: #fff; font-size: 13px; font-weight: 500; }
|
||||
.app-bar-sub { color: #90CAF9; font-size: 10px; }
|
||||
.body-area { padding: 12px; background: #F0F4FF; }
|
||||
.section-label {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #6B7A99;
|
||||
margin-bottom: 8px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .5px;
|
||||
}
|
||||
.doc-item {
|
||||
background: #fff;
|
||||
border: 0.5px solid #C5D0E8;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.doc-icon {
|
||||
width: 34px; height: 40px;
|
||||
border-radius: 4px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.doc-name { font-size: 11px; font-weight: 500; color: #1A1A2E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.doc-meta { font-size: 10px; color: #6B7A99; }
|
||||
.dot-pending { width: 8px; height: 8px; border-radius: 50%; background: #E65100; flex-shrink: 0; }
|
||||
.fab {
|
||||
background: #1565C0;
|
||||
border-radius: 24px;
|
||||
padding: 10px 16px;
|
||||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
cursor: pointer;
|
||||
margin: 0 12px 10px;
|
||||
}
|
||||
.fab span { color: #fff; font-size: 12px; font-weight: 500; }
|
||||
.nav-bar {
|
||||
background: #fff;
|
||||
border-top: 0.5px solid #C5D0E8;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
|
||||
.nav-item span { font-size: 9px; }
|
||||
/* Tabs */
|
||||
.tabs { display: flex; border-bottom: 0.5px solid #C5D0E8; }
|
||||
.tab { flex: 1; padding: 9px 0; text-align: center; font-size: 11px; }
|
||||
.tab.active { color: #1565C0; border-bottom: 2px solid #1565C0; font-weight: 500; }
|
||||
.tab.inactive { color: #6B7A99; }
|
||||
/* Canvas area */
|
||||
.sig-canvas {
|
||||
background: #fff;
|
||||
border: 0.5px solid #C5D0E8;
|
||||
border-radius: 10px;
|
||||
height: 140px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sig-canvas-hint {
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 10px;
|
||||
color: #C5D0E8;
|
||||
}
|
||||
/* Certificate */
|
||||
.cert-card {
|
||||
background: #fff;
|
||||
border: 0.5px solid #C5D0E8;
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.cert-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.cert-key { font-size: 10px; color: #6B7A99; }
|
||||
.cert-val { font-size: 10px; font-weight: 500; color: #1A1A2E; }
|
||||
/* Action buttons */
|
||||
.action-row { display: flex; gap: 8px; }
|
||||
.action-btn {
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border: 0.5px solid #C5D0E8;
|
||||
border-radius: 10px;
|
||||
padding: 9px;
|
||||
display: flex; align-items: center; justify-content: center; gap: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.action-btn span { font-size: 10px; color: #1565C0; font-weight: 500; }
|
||||
.action-btn.primary { background: #1565C0; }
|
||||
.action-btn.primary span { color: #fff; }
|
||||
/* Confirm btn */
|
||||
.confirm-btn {
|
||||
background: #1565C0;
|
||||
border-radius: 24px;
|
||||
padding: 10px;
|
||||
display: flex; align-items: center; justify-content: center; gap: 6px;
|
||||
margin: 0 12px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.confirm-btn span { color: #fff; font-size: 12px; font-weight: 500; }
|
||||
/* Flow bar */
|
||||
.flow-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-top: 2rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
.flow-step {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
color: #6B7A99;
|
||||
background: #fff;
|
||||
border: 0.5px solid #C5D0E8;
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.flow-step.success { color: #2E7D32; background: #E8F5E9; border-color: #A5D6A7; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>FirmaDoc</h1>
|
||||
<p class="subtitle">Prototipo de sistema Android para firma electrónica de documentos</p>
|
||||
|
||||
<div class="screens-grid">
|
||||
|
||||
<!-- Screen 1: Home -->
|
||||
<div class="phone">
|
||||
<div class="status-bar" style="background:#1565C0;">
|
||||
<span>9:41</span>
|
||||
<div class="status-icons">
|
||||
<svg width="12" height="10" viewBox="0 0 12 10"><rect x="0" y="3" width="2" height="7" fill="#fff"/><rect x="3" y="2" width="2" height="8" fill="#fff"/><rect x="6" y="1" width="2" height="9" fill="#fff"/><rect x="9" y="0" width="2" height="10" fill="#fff"/></svg>
|
||||
<svg width="16" height="10" viewBox="0 0 16 10"><rect x="0" y="1" width="13" height="8" rx="2" stroke="#fff" stroke-width="1" fill="none"/><rect x="13.5" y="3" width="2" height="4" rx="1" fill="#fff"/><rect x="1" y="2.5" width="9" height="5" rx="1" fill="#fff"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-bar" style="background:#1565C0;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" fill="none" stroke="#fff" stroke-width="2"/><polyline points="14 2 14 8 20 8" stroke="#fff" stroke-width="2"/><path d="M9 13l2 2 4-4" stroke="#00BCD4" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<div>
|
||||
<div class="app-bar-title">FirmaDoc</div>
|
||||
<div class="app-bar-sub">Firma electrónica</div>
|
||||
</div>
|
||||
<div style="margin-left:auto;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8" stroke="#fff" stroke-width="2" fill="none"/><line x1="21" y1="21" x2="16.65" y2="16.65" stroke="#fff" stroke-width="2"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-area">
|
||||
<div class="section-label">Mis documentos</div>
|
||||
<div class="doc-item">
|
||||
<div class="doc-icon" style="background:#E3F2FD;">
|
||||
<svg width="16" height="20" viewBox="0 0 16 20"><rect width="16" height="20" rx="2" fill="#1565C0"/><text x="2" y="14" font-size="7" fill="white" font-weight="bold">PDF</text></svg>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div class="doc-name">Contrato_servicios.pdf</div>
|
||||
<div class="doc-meta">2.4 MB · Pendiente</div>
|
||||
</div>
|
||||
<div class="dot-pending"></div>
|
||||
</div>
|
||||
<div class="doc-item">
|
||||
<div class="doc-icon" style="background:#E8F5E9;">
|
||||
<svg width="16" height="20" viewBox="0 0 16 20"><rect width="16" height="20" rx="2" fill="#2E7D32"/><text x="2" y="14" font-size="7" fill="white" font-weight="bold">PDF</text></svg>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div class="doc-name">Acuerdo_confidencial.pdf</div>
|
||||
<div class="doc-meta" style="color:#2E7D32;">1.1 MB · Firmado</div>
|
||||
</div>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 11-5.93-9.14" stroke="#2E7D32" stroke-width="2.5" fill="none"/><polyline points="22 4 12 14.01 9 11.01" stroke="#2E7D32" stroke-width="2.5" fill="none"/></svg>
|
||||
</div>
|
||||
<div class="doc-item">
|
||||
<div class="doc-icon" style="background:#E3F2FD;">
|
||||
<svg width="16" height="20" viewBox="0 0 16 20"><rect width="16" height="20" rx="2" fill="#1565C0"/><text x="2" y="14" font-size="7" fill="white" font-weight="bold">PDF</text></svg>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div class="doc-name">Propuesta_2024.pdf</div>
|
||||
<div class="doc-meta">890 KB · Pendiente</div>
|
||||
</div>
|
||||
<div class="dot-pending"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fab">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19" stroke="#fff" stroke-width="2.5"/><line x1="5" y1="12" x2="19" y2="12" stroke="#fff" stroke-width="2.5"/></svg>
|
||||
<span>Subir documento</span>
|
||||
</div>
|
||||
<div class="nav-bar">
|
||||
<div class="nav-item">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="9" rx="1" fill="#1565C0"/><rect x="14" y="3" width="7" height="5" rx="1" fill="none" stroke="#6B7A99" stroke-width="1.5"/><rect x="3" y="15" width="7" height="5" rx="1" fill="none" stroke="#6B7A99" stroke-width="1.5"/><rect x="14" y="11" width="7" height="9" rx="1" fill="none" stroke="#6B7A99" stroke-width="1.5"/></svg>
|
||||
<span style="color:#1565C0;font-weight:500;">Inicio</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z" fill="none" stroke="#6B7A99" stroke-width="1.5"/></svg>
|
||||
<span style="color:#6B7A99;">Docs</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke="#6B7A99" stroke-width="1.5" fill="none"/><circle cx="12" cy="7" r="4" stroke="#6B7A99" stroke-width="1.5" fill="none"/></svg>
|
||||
<span style="color:#6B7A99;">Perfil</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Screen 2: Vista previa -->
|
||||
<div class="phone">
|
||||
<div class="status-bar" style="background:#1565C0;">
|
||||
<span>9:41</span>
|
||||
<div class="status-icons">
|
||||
<svg width="16" height="10" viewBox="0 0 16 10"><rect x="0" y="1" width="13" height="8" rx="2" stroke="#fff" stroke-width="1" fill="none"/><rect x="13.5" y="3" width="2" height="4" rx="1" fill="#fff"/><rect x="1" y="2.5" width="9" height="5" rx="1" fill="#fff"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-bar" style="background:#1565C0;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
<div style="flex:1;">
|
||||
<div class="app-bar-title">Contrato_servicios.pdf</div>
|
||||
<div class="app-bar-sub">Vista previa</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background:#9E9E9E;padding:8px;min-height:220px;">
|
||||
<div style="background:#fff;border-radius:4px;padding:12px;min-height:200px;">
|
||||
<div style="width:60%;height:7px;background:#1A1A2E;border-radius:2px;margin-bottom:6px;opacity:.8;"></div>
|
||||
<div style="width:40%;height:5px;background:#6B7A99;border-radius:2px;margin-bottom:12px;opacity:.5;"></div>
|
||||
<div style="width:100%;height:4px;background:#C5D0E8;border-radius:2px;margin-bottom:5px;"></div>
|
||||
<div style="width:95%;height:4px;background:#C5D0E8;border-radius:2px;margin-bottom:5px;"></div>
|
||||
<div style="width:88%;height:4px;background:#C5D0E8;border-radius:2px;margin-bottom:10px;"></div>
|
||||
<div style="width:100%;height:4px;background:#C5D0E8;border-radius:2px;margin-bottom:5px;"></div>
|
||||
<div style="width:97%;height:4px;background:#C5D0E8;border-radius:2px;margin-bottom:5px;"></div>
|
||||
<div style="width:70%;height:4px;background:#C5D0E8;border-radius:2px;margin-bottom:14px;"></div>
|
||||
<div style="border:1.5px dashed #1565C0;border-radius:6px;padding:10px;background:#F0F4FF;display:flex;flex-direction:column;align-items:center;gap:5px;">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24"><path d="M12 20h9" stroke="#1565C0" stroke-width="2"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z" stroke="#1565C0" stroke-width="2" fill="none"/></svg>
|
||||
<span style="font-size:9px;color:#1565C0;font-weight:500;">Zona de firma</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:12px;background:#F0F4FF;">
|
||||
<div style="background:#1565C0;border-radius:24px;padding:11px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24"><path d="M12 20h9" stroke="#fff" stroke-width="2"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
<span style="color:#fff;font-size:12px;font-weight:500;">Firmar este documento</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Screen 3: Dibujar firma -->
|
||||
<div class="phone">
|
||||
<div class="status-bar" style="background:#1565C0;">
|
||||
<span>9:41</span>
|
||||
<div class="status-icons">
|
||||
<svg width="16" height="10" viewBox="0 0 16 10"><rect x="0" y="1" width="13" height="8" rx="2" stroke="#fff" stroke-width="1" fill="none"/><rect x="13.5" y="3" width="2" height="4" rx="1" fill="#fff"/><rect x="1" y="2.5" width="9" height="5" rx="1" fill="#fff"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-bar" style="background:#1565C0;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
<div style="color:#fff;font-size:12px;font-weight:500;">Dibujar firma</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div class="tab active">Dibujar</div>
|
||||
<div class="tab inactive">Escribir</div>
|
||||
<div class="tab inactive">Imagen</div>
|
||||
</div>
|
||||
<div class="body-area">
|
||||
<div class="sig-canvas">
|
||||
<span class="sig-canvas-hint">Firme aquí con su dedo</span>
|
||||
<svg width="100%" height="100%" viewBox="0 0 200 140" preserveAspectRatio="none" style="position:absolute;top:0;left:0;">
|
||||
<path d="M20,100 C30,80 40,60 55,75 C65,85 70,95 80,70 C88,52 95,45 110,60 C120,70 125,78 135,55 C145,35 155,40 165,60 C170,70 175,78 180,65" stroke="#1A1A2E" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<div style="position:absolute;bottom:28px;left:12px;right:12px;border-top:1px dashed #C5D0E8;"></div>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;">
|
||||
<div style="display:flex;gap:6px;">
|
||||
<div style="width:18px;height:18px;border-radius:50%;background:#1A1A2E;border:2px solid #C5D0E8;cursor:pointer;"></div>
|
||||
<div style="width:18px;height:18px;border-radius:50%;background:#1565C0;border:2px solid #C5D0E8;cursor:pointer;"></div>
|
||||
<div style="width:18px;height:18px;border-radius:50%;background:#2E7D32;border:2px solid #C5D0E8;cursor:pointer;"></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;align-items:center;">
|
||||
<span style="font-size:10px;color:#6B7A99;">Grosor</span>
|
||||
<div style="width:16px;height:3px;background:#6B7A99;border-radius:2px;"></div>
|
||||
<div style="width:16px;height:5px;background:#1A1A2E;border-radius:2px;"></div>
|
||||
<div style="width:16px;height:7px;background:#C5D0E8;border-radius:2px;"></div>
|
||||
</div>
|
||||
<div style="font-size:11px;color:#1565C0;font-weight:500;cursor:pointer;">Limpiar</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="confirm-btn">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12" stroke="#fff" stroke-width="2.5" fill="none"/></svg>
|
||||
<span>Confirmar firma</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Screen 4: Biometría -->
|
||||
<div class="phone">
|
||||
<div class="status-bar" style="background:#0D47A1;">
|
||||
<span>9:41</span>
|
||||
<div class="status-icons">
|
||||
<svg width="16" height="10" viewBox="0 0 16 10"><rect x="0" y="1" width="13" height="8" rx="2" stroke="#fff" stroke-width="1" fill="none"/><rect x="13.5" y="3" width="2" height="4" rx="1" fill="#fff"/><rect x="1" y="2.5" width="9" height="5" rx="1" fill="#fff"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-bar" style="background:#0D47A1;">
|
||||
<div class="app-bar-title">Verificar identidad</div>
|
||||
</div>
|
||||
<div class="body-area">
|
||||
<div style="background:#fff;border:0.5px solid #C5D0E8;border-radius:12px;padding:16px;text-align:center;margin-bottom:10px;">
|
||||
<div style="width:64px;height:64px;margin:0 auto 12px;">
|
||||
<svg viewBox="0 0 64 64" width="64" height="64">
|
||||
<circle cx="32" cy="32" r="30" stroke="#C5D0E8" stroke-width="2" fill="none" stroke-dasharray="188" stroke-dashoffset="47"/>
|
||||
<circle cx="32" cy="32" r="30" stroke="#1565C0" stroke-width="2.5" fill="none" stroke-dasharray="141" stroke-dashoffset="0" stroke-linecap="round"/>
|
||||
<path d="M22 32c0-5.5 4.5-10 10-10s10 4.5 10 10c0 3-1.3 5.7-3.4 7.5" stroke="#0D47A1" stroke-width="1.5" fill="none"/>
|
||||
<path d="M26 32c0-3.3 2.7-6 6-6s6 2.7 6 6c0 1.8-.8 3.4-2 4.5" stroke="#1565C0" stroke-width="1.5" fill="none"/>
|
||||
<circle cx="32" cy="32" r="3" fill="#1565C0"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="font-size:13px;font-weight:500;color:#1A1A2E;margin-bottom:4px;">Huella dactilar</div>
|
||||
<div style="font-size:11px;color:#6B7A99;">Coloque su dedo en el sensor</div>
|
||||
</div>
|
||||
<div style="font-size:10px;color:#6B7A99;text-align:center;margin-bottom:8px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;">o use</div>
|
||||
<div style="display:flex;gap:8px;">
|
||||
<div style="flex:1;background:#fff;border:0.5px solid #C5D0E8;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" stroke="#6B7A99" stroke-width="1.5" fill="none"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" stroke="#6B7A99" stroke-width="1.5" fill="none"/></svg>
|
||||
<span style="font-size:10px;color:#6B7A99;">Face ID</span>
|
||||
</div>
|
||||
<div style="flex:1;background:#fff;border:0.5px solid #C5D0E8;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2" stroke="#6B7A99" stroke-width="1.5" fill="none"/><line x1="12" y1="18" x2="12.01" y2="18" stroke="#6B7A99" stroke-width="2" stroke-linecap="round"/></svg>
|
||||
<span style="font-size:10px;color:#6B7A99;">PIN</span>
|
||||
</div>
|
||||
<div style="flex:1;background:#fff;border:0.5px solid #C5D0E8;border-radius:10px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07" stroke="#6B7A99" stroke-width="1.5" fill="none"/></svg>
|
||||
<span style="font-size:10px;color:#6B7A99;">SMS OTP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Screen 5: Completado -->
|
||||
<div class="phone">
|
||||
<div class="status-bar" style="background:#1B5E20;">
|
||||
<span>9:41</span>
|
||||
<div class="status-icons">
|
||||
<svg width="16" height="10" viewBox="0 0 16 10"><rect x="0" y="1" width="13" height="8" rx="2" stroke="#fff" stroke-width="1" fill="none"/><rect x="13.5" y="3" width="2" height="4" rx="1" fill="#fff"/><rect x="1" y="2.5" width="9" height="5" rx="1" fill="#fff"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="app-bar" style="background:#1B5E20;">
|
||||
<div class="app-bar-title">Documento firmado</div>
|
||||
</div>
|
||||
<div class="body-area">
|
||||
<div style="text-align:center;padding:14px 0 12px;">
|
||||
<div style="width:56px;height:56px;background:#E8F5E9;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#2E7D32" stroke-width="1.5" fill="#E8F5E9"/><polyline points="20 6 9 17 4 12" stroke="#2E7D32" stroke-width="2.5" fill="none"/></svg>
|
||||
</div>
|
||||
<div style="font-size:14px;font-weight:500;color:#1A1A2E;">¡Firmado con éxito!</div>
|
||||
<div style="font-size:11px;color:#6B7A99;margin-top:4px;">Contrato_servicios.pdf</div>
|
||||
</div>
|
||||
<div class="cert-card">
|
||||
<div style="font-size:10px;font-weight:500;color:#6B7A99;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;">Certificado digital</div>
|
||||
<div class="cert-row"><span class="cert-key">Firmante</span><span class="cert-val">Carlos Mendieta</span></div>
|
||||
<div class="cert-row"><span class="cert-key">Fecha y hora</span><span class="cert-val">06/04/2026 09:41</span></div>
|
||||
<div class="cert-row"><span class="cert-key">Hash SHA-256</span><span class="cert-val" style="font-family:'Roboto Mono',monospace;">a4f2b9e1...</span></div>
|
||||
<div class="cert-row" style="margin-bottom:0;"><span class="cert-key">Válido hasta</span><span class="cert-val" style="color:#2E7D32;">2027-04-06</span></div>
|
||||
</div>
|
||||
<div class="action-row">
|
||||
<div class="action-btn">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" stroke="#1565C0" stroke-width="2" fill="none"/><polyline points="7 10 12 15 17 10" stroke="#1565C0" stroke-width="2" fill="none"/><line x1="12" y1="15" x2="12" y2="3" stroke="#1565C0" stroke-width="2"/></svg>
|
||||
<span>Guardar</span>
|
||||
</div>
|
||||
<div class="action-btn">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24"><circle cx="18" cy="5" r="3" stroke="#1565C0" stroke-width="2" fill="none"/><circle cx="6" cy="12" r="3" stroke="#1565C0" stroke-width="2" fill="none"/><circle cx="18" cy="19" r="3" stroke="#1565C0" stroke-width="2" fill="none"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49" stroke="#1565C0" stroke-width="2"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49" stroke="#1565C0" stroke-width="2"/></svg>
|
||||
<span>Compartir</span>
|
||||
</div>
|
||||
<div class="action-btn primary">
|
||||
<svg width="13" height="13" viewBox="0 0 24 24"><polyline points="9 14 4 9 9 4" stroke="#fff" stroke-width="2" fill="none"/><path d="M20 20v-7a4 4 0 00-4-4H4" stroke="#fff" stroke-width="2" fill="none"/></svg>
|
||||
<span>Auditoría</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Flow bar -->
|
||||
<div class="flow-bar">
|
||||
<span class="flow-step">1. Inicio</span>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12"><polyline points="8 1 15 6 8 11" stroke="#C5D0E8" stroke-width="1.5" fill="none"/><line x1="1" y1="6" x2="15" y2="6" stroke="#C5D0E8" stroke-width="1.5"/></svg>
|
||||
<span class="flow-step">2. Vista previa</span>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12"><polyline points="8 1 15 6 8 11" stroke="#C5D0E8" stroke-width="1.5" fill="none"/><line x1="1" y1="6" x2="15" y2="6" stroke="#C5D0E8" stroke-width="1.5"/></svg>
|
||||
<span class="flow-step">3. Dibujar firma</span>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12"><polyline points="8 1 15 6 8 11" stroke="#C5D0E8" stroke-width="1.5" fill="none"/><line x1="1" y1="6" x2="15" y2="6" stroke="#C5D0E8" stroke-width="1.5"/></svg>
|
||||
<span class="flow-step">4. Biometría</span>
|
||||
<svg width="16" height="12" viewBox="0 0 16 12"><polyline points="8 1 15 6 8 11" stroke="#C5D0E8" stroke-width="1.5" fill="none"/><line x1="1" y1="6" x2="15" y2="6" stroke="#C5D0E8" stroke-width="1.5"/></svg>
|
||||
<span class="flow-step success">5. Completado</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user