File "index - copia.html"
Full Path: C:/wamp64/www/PERSONAL/Carnet/index - copia.html
File size: 12.3 KB
MIME-type: text/html
Charset: utf-8
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="Oficina de Tecnologías de la Información y Comunicaciones, Sanmarino" />
<title>Creación de Carnét Corporativo</title>
<link rel="icon" type="image/png" href="../img/icono.png">
<link rel="stylesheet" type="text/css" href="css/carnet.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
<style>
.loading-spinner {
display: none;
width: 20px;
height: 20px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-left: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.alert-custom {
padding: 10px;
margin-top: 10px;
border-radius: 5px;
display: none;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a href="../Personal/index.php" class="btn btn-sm text-light" style="background-color:#999999;">
<i class="fas fa-sign-out-alt"></i> 🔙 Regresar
</a>
<a href="../logout.php" class="btn btn-sm text-light" style="background-color:#E65100;">
<i class="fas fa-sign-out-alt"></i> Cerrar Sesión
</a>
</div>
</div>
</nav>
<div class="container my-5">
<div class="row align-items-start">
<div class="col-md-4 border p-4 shadow rounded-4" style="background-color: white;">
<form>
<div class="mb-3">
<label for="titulo" class="form-label" style="text-align: center; display: block; font-weight: bold;">Datos Del Personal</label>
<hr>
<label for="cedula" class="form-label">Cédula</label>
<div class="d-flex align-items-center">
<input type="number" class="form-control" id="cedula" oninput="buscarEmpleado();" />
<div class="loading-spinner" id="loadingSpinner"></div>
</div>
</div>
<div class="alert alert-custom" id="alertMessage"></div>
<div class="mb-3">
<label for="nombre" class="form-label">Nombres</label>
<input type="text" class="form-control" id="nombre" onkeyup="fAgrega();" />
</div>
<div class="mb-3">
<label for="apellido" class="form-label">Apellidos</label>
<input type="text" class="form-control" id="apellido" onkeyup="fAgrega();" />
</div>
<div class="mb-3">
<label for="cargo" class="form-label">Cargo</label>
<input type="text" class="form-control" id="cargo" onkeyup="fAgrega();" />
</div>
<div class="mb-3">
<label for="sangre" class="form-label">Grupo Sanguíneo</label>
<select class="form-select" onchange="fAgrega()" id="sangre">
<option disabled selected></option>
<option>O -</option>
<option>O +</option>
<option>A -</option>
<option>A +</option>
<option>B -</option>
<option>B +</option>
<option>AB -</option>
<option>AB +</option>
</select>
</div>
<div class="mb-3">
<label for="fecha" class="form-label">Fecha</label>
<input type="date" class="form-control" id="fecha" onchange="fAgrega();" />
</div>
</form>
<div class="mt-5">
<button id="crearimagen" type="button" class="btn btn-secondary">
<img class="icon" src="img/icon.png" alt="icon" /> Descargar Imagen
</button>
</div>
</div>
<div class="col-md-8">
<div id="contenido" class="mx-auto">
<div class="fondo" style="background-image: url('img/fondo.jpg')">
<p class="texto position-absolute text-center text-white lh-1 p-1 ms-0">
<input id="nombreb" type="text" class="input_preview" readonly />
<input id="apellidob" type="text" class="input_preview fw-bold" readonly />
<br />
<input id="cargob" type="text" class="input_preview mb-1" readonly />
<br />
<input id="cedulab" type="text" class="input_preview fw-bold" readonly />
<br />
<input id="sangreb" type="text" class="input_preview" readonly />
<img id="imagenQR" src="" />
<input id="fechab" type="text" class="input_preview" readonly />
</p>
<div id="imagePreview" style="background-repeat: no-repeat;">
<p class="subir_txt">
<img src="img/photo.png" alt="icon" style="width: 48px; filter: opacity(0.2)" />
</p>
</div>
<input id="uploadFile" type="file" name="image" class="img" />
</div>
</div>
</div>
</div>
</div>
<footer class="text-center py-3 mt-5" style="background-color: #f8f9fa; border-top: 1px solid #dee2e6;">
<p class="mb-0 text-muted">
© <span id="currentYear"></span> Avicampo. Todos los derechos reservados.
</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/filesaver.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
// Actualizar el año actual automáticamente
document.getElementById('currentYear').textContent = new Date().getFullYear();
// Variable para controlar el timeout de búsqueda
let searchTimeout;
// Función para buscar empleado por cédula
function buscarEmpleado() {
clearTimeout(searchTimeout);
const cedula = document.getElementById("cedula").value;
if (cedula.length >= 5) {
// Mostrar spinner de carga
document.getElementById("loadingSpinner").style.display = "inline-block";
document.getElementById("alertMessage").style.display = "none";
searchTimeout = setTimeout(function() {
$.ajax({
url: 'get_empleado.php',
type: 'GET',
data: { cedula: cedula },
dataType: 'json',
success: function(response) {
document.getElementById("loadingSpinner").style.display = "none";
if (response.success) {
// Llenar los campos con la información del empleado
document.getElementById("nombre").value = response.data.nombre || '';
document.getElementById("apellido").value = response.data.apellido || '';
document.getElementById("cargo").value = response.data.cargo || '';
// Buscar y seleccionar el grupo sanguíneo
if (response.data.rh) {
const selectSangre = document.getElementById("sangre");
for (let i = 0; i < selectSangre.options.length; i++) {
if (selectSangre.options[i].value === response.data.rh) {
selectSangre.selectedIndex = i;
break;
}
}
}
// Actualizar la vista previa del carnet
fAgrega();
// Mostrar mensaje de éxito
showAlert('Empleado encontrado correctamente', 'success');
} else {
// Limpiar campos si no se encuentra
document.getElementById("nombre").value = '';
document.getElementById("apellido").value = '';
document.getElementById("cargo").value = '';
document.getElementById("sangre").selectedIndex = 0;
showAlert('Empleado no encontrado', 'warning');
}
},
error: function() {
document.getElementById("loadingSpinner").style.display = "none";
showAlert('Error al buscar empleado', 'danger');
}
});
}, 500); // Esperar 500ms después de que el usuario deje de escribir
} else {
// Si la cédula tiene menos de 5 dígitos, actualizar solo la vista previa
fAgrega();
}
}
// Función para mostrar alertas
function showAlert(message, type) {
const alertDiv = document.getElementById("alertMessage");
alertDiv.className = 'alert-custom alert alert-' + type;
alertDiv.textContent = message;
alertDiv.style.display = "block";
// Ocultar alerta después de 3 segundos
setTimeout(function() {
alertDiv.style.display = "none";
}, 3000);
}
// Función para agregar sobre el carnet los datos ingresados
function fAgrega() {
document.getElementById("nombreb").value = document.getElementById("nombre").value;
document.getElementById("apellidob").value = document.getElementById("apellido").value;
document.getElementById("cedulab").value = "CC: " + document.getElementById("cedula").value;
document.getElementById("cargob").value = document.getElementById("cargo").value;
document.getElementById("sangreb").value = "RH: " + document.getElementById("sangre").value;
document.getElementById("fechab").value = document.getElementById("fecha").value;
document.getElementById("imagenQR").src =
"https://api.qrserver.com/v1/create-qr-code/?data=" +
document.getElementById("cedula").value +
"&size=140x140&qzone=1";
}
</script>
<script>
$("#changewp").change(function () {
var imageFileName = $(this).val();
$(".fondo").css("background-image", "url(img/" + imageFileName + ".png)");
});
</script>
<script type="text/javascript">
// Función para crear la imagen del carnet
$(function () {
$("#crearimagen").click(function () {
// Crear contenedor temporal
var tempDiv = $("<div>").css({position: "absolute", left: "-9999px", top: "-9999px"}).appendTo("body");
// Clonar solo el contenido interno
$("#contenido").children().clone().appendTo(tempDiv);
// Reemplazar inputs por spans
tempDiv.find("input").each(function() {
var val = $(this).val();
var style = window.getComputedStyle(this);
var span = $('<span>').text(val).css({
position: style.position,
top: style.top,
left: style.left,
right: style.right,
bottom: style.bottom,
transform: style.transform,
zIndex: style.zIndex,
display: style.display,
width: style.width,
height: style.height,
padding: style.padding,
margin: style.margin,
"line-height": style.lineHeight,
"font-size": style.fontSize,
"font-family": style.fontFamily,
color: style.color,
"font-weight": style.fontWeight,
"text-align": style.textAlign,
"vertical-align": "middle",
background: style.background,
border: style.border
});
$(this).replaceWith(span);
});
// Generar imagen
html2canvas(tempDiv[0], { allowTaint: false, useCORS: true }).then(function(canvas) {
canvas.toBlob(function(blob) {
saveAs(blob, $("#cedula").val() + ".png");
tempDiv.remove(); // limpiar div temporal
});
});
});
});
</script>
<script>
$(function () {
$("#uploadFile").on("change", function () {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^image/.test(files[0].type)) {
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function () {
$("#imagePreview").css("background-image", "url(" + this.result + ")");
$(".subir_txt").remove();
};
}
});
$("#imagePreview").click(function () {
$("#uploadFile").trigger("click");
});
});
</script>
</body>
</html>