File size: 3,810 Bytes
b568de0 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<!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">
<!-- Imagen portada inicial -->
<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;">
<!-- Imagen a la izquierda -->
<div id="imagen" style="flex: 1; text-align: center;">
<img src="/images/{{ image_name }}" width="800" alt="Documento" style="margin-bottom: 20px;">
</div>
<!-- Formulario a la derecha -->
<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>
|