|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Ingreso de datos</title> |
|
|
<script> |
|
|
let startTime; |
|
|
function empezar() { |
|
|
document.getElementById('inicio').style.display = 'none'; |
|
|
document.getElementById('contenido').style.display = 'flex'; |
|
|
startTime = Date.now(); |
|
|
} |
|
|
|
|
|
function prepararEnvio() { |
|
|
const tiempoTranscurrido = Math.floor((Date.now() - startTime) / 1000); |
|
|
document.getElementById('tiempo').value = tiempoTranscurrido; |
|
|
return true; |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body style="font-family: Arial, sans-serif; text-align: center; margin: 30px;"> |
|
|
|
|
|
<div id="inicio"> |
|
|
|
|
|
<img src="/images/DNI.jpg" width="400" alt="DNI Portada" style="margin-bottom: 30px;"> |
|
|
|
|
|
<h2>Ingresa los datos solicitados del documento de identificaci贸n que se mostrar谩 en la pr贸xima imagen .<br>* Escribe los datos con may煤sculas y las fechas en el formato indicado. *<br>Da clic en el bot贸n Empezar cuando est茅s listo.</h2> |
|
|
<button onclick="empezar()" style="padding:10px 20px; font-size:16px; cursor:pointer;">Empezar</button> |
|
|
</div> |
|
|
|
|
|
<div id="contenido" style="display:none; justify-content: center; align-items: flex-start; gap: 50px;"> |
|
|
|
|
|
|
|
|
<div id="imagen" style="flex: 1; text-align: center;"> |
|
|
<img src="/images/{{ image_name }}" width="800" alt="Documento" style="margin-bottom: 20px;"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="formulario" style="flex: 1; text-align: left;"> |
|
|
<form method="POST" action="/submit" onsubmit="return prepararEnvio()" style="max-width: 400px; margin: 0 auto;"> |
|
|
<label>N煤mero de DNI:</label><br> |
|
|
<input type="text" name="dni" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Primer Apellido:</label><br> |
|
|
<input type="text" name="primer_apellido" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Segundo Apellido:</label><br> |
|
|
<input type="text" name="segundo_apellido" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Pre Nombres:</label><br> |
|
|
<input type="text" name="pre_nombres" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Fecha de nacimiento (DD/MM/AA):</label><br> |
|
|
<input type="text" name="fecha_nacimiento" placeholder="DD/MM/AA" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Ubigeo: (N煤mero al lado de la fecha de nacimiento)</label><br> |
|
|
<input type="text" name="ubigeo" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Sexo (F/M):</label><br> |
|
|
<input type="text" name="sexo" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Estado Civil (C/S):</label><br> |
|
|
<input type="text" name="estado_civil" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Fecha Inscripci贸n (DD/MM/AA):</label><br> |
|
|
<input type="text" name="fecha_inscripcion" placeholder="DD/MM/AA" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Fecha Emisi贸n (DD/MM/AA):</label><br> |
|
|
<input type="text" name="fecha_emision" placeholder="DD/MM/AA" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<label>Fecha Caducidad (DD/MM/AA):</label><br> |
|
|
<input type="text" name="fecha_caducidad" placeholder="DD/MM/AA" required style="width: 100%; padding: 8px; margin-top:5px;"><br> |
|
|
|
|
|
<input type="hidden" name="image_name" value="{{ image_name }}"> |
|
|
<input type="hidden" name="tiempo" id="tiempo" value="0"> |
|
|
|
|
|
<button type="submit" style="margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor:pointer;">Enviar</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</body> |
|
|
</html> |
|
|
|
