|
|
<!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 todos los datos solicitados.<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>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:</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>
|
|
|
|
