File "index.html"
Full Path: C:/wamp64/www/Identifica/avicampo/index.html
File size: 8.32 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="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" />
<!-- <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet"> -->
</head>
<body>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand text-white" href="#"> LOGO </a>
</div>
</div>
</nav>
<div class="container my-5">
<div class="row">
<div class="col-md-4">
<form>
<div class="mb-3">
<label for="cedula" class="form-label">Cédula</label>
<input type="number" class="form-control" id="cedula" onkeyup="fAgrega();" />
</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="cargo" 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>
<!-- SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/filesaver.js" type="text/javascript"></script>
<!-- <script src="js/html2canvas.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script>
//funcion para agregar sobre el carnet los datos ingresados.......................
function fAgrega() {
const options = {
weekday: "long",
year: "numeric",
month: "long",
day: "numeric",
timeZone: "UTC",
};
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">
// esta funcion es para crear la imagen ya diesñada 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; // no file selected, or no FileReader support
if (/^image/.test(files[0].type)) {
// only image file
var reader = new FileReader(); // instance of the FileReader
reader.readAsDataURL(files[0]); // read the local file
reader.onloadend = function () {
// set image data as background of div
$("#imagePreview").css(
"background-image",
"url(" + this.result + ")"
);
$(".subir_txt").remove();
};
}
});
$("#imagePreview").click(function () {
$("#uploadFile").trigger("click");
});
});
</script>
</body>
</html>