', {
+ class: 'li-wrapper d-flex justify-content-start align-items-center'
+ });
+
+ let $listContent = $('
', {
+ class: 'list-content'
+ });
+
+ $listContent.append($('', {
+ id: 'ud_' + id,
+ class: 'mb-1 tarjeta-tiradas-precios-tirada',
+ text: tirada + ' ud.'
+ }).attr('data', tirada));
+
+ $listContent.append($('', {
+ id: 'tot_' + id,
+ class: 'mb-1 tarjeta-tiradas-precios-precio',
+ text: 'Total: ' + precio + '€'
+ }).attr('data', precio));
+
+ $listContent.append($('', {
+ id: 'pu_' + id,
+ class: 'mb-1 tarjeta-tiradas-precios-precio-unidad',
+ text: precio_unidad + '€/ud'
+ }).attr('data', precio_unidad));
+
+ $liWrapper.append($listContent);
+ $link.append($liWrapper);
+ $html.append($link);
+
+ return $html;
+ }
+}
+
+export default tarjetaTiradasPrecio;
\ No newline at end of file
diff --git a/httpdocs/assets/js/safekat/pages/preview.js b/httpdocs/assets/js/safekat/pages/preview.js
new file mode 100644
index 00000000..4e52b96d
--- /dev/null
+++ b/httpdocs/assets/js/safekat/pages/preview.js
@@ -0,0 +1,759 @@
+
+class previewFormas {
+ constructor(container, tipoLibro, tipoTapa, size, datos) {
+
+ this.container = container;
+ this.tipoLibro = tipoLibro;
+ this.tipoTapa = tipoTapa;
+ this.size = size;
+
+ this.ancho = datos.ancho;
+ this.alto = datos.alto;
+ this.lomo = datos.lomo;
+
+ if (datos.solapas == undefined || datos.solapas == null || datos.solapas == false) {
+ this.solapa = 0;
+ this.offsetSolapa = 0.0;
+ }
+ else {
+ this.solapa = datos.solapas;
+ this.offsetSolapa = 3.0;
+ }
+ this.lomoRedondo = datos.lomoRedondo;
+
+ }
+
+ previewEsquemaCubierta() {
+
+ if (this.tipoLibro.includes("cosido") || this.tipoLibro.includes("fresado")) {
+ if (this.tipoTapa.toLowerCase().includes("dura"))
+ this.#portadaTapaDura();
+ else {
+ this.#portadaTapaBlanda();
+ }
+ }
+ else if (this.tipoLibro.includes("espiral") || this.tipoLibro.includes("wire-o")) {
+ if (this.tipoTapa.toLowerCase().includes("dura"))
+ this.#portadaEspiral(true);
+ else
+ this.#portadaEspiral(false);
+ }
+ else if (this.tipoLibro.includes("grapado")) {
+ this.#portadaGrapado();
+ }
+
+ }
+
+
+ #portadaTapaBlanda() {
+
+ // Variables locales
+ let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa;
+ let styleCotas = { size: 12, family: 'Public Sans' };
+ let sangradoTexto = "Sangrado 5 mm";
+ let sangradoValor = parseFloat(5); // mm
+ let offsetSolapaValor = parseFloat(0); // mm
+
+ // Definicion de los parametros del Esquema de Cubierta (EC)
+ if (this.solapa == 0) {
+ if (this.size == "thumbnail") {
+ anchoSangrado = 350; // px
+ altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+ } else {
+ anchoSangrado = 800; // px
+ altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+ }
+
+ altoLibro = altoSangrado * 0.97;
+ anchoLibro = anchoSangrado * 0.419;
+ anchoSolapa = 0;
+ lomoLibro = anchoSangrado * 0.133;
+ anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+
+ } else {
+ if (this.size == "thumbnail") {
+ anchoSangrado = 350; // px
+ altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+ } else {
+ anchoSangrado = 750; // px
+ altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+ }
+ altoLibro = altoSangrado * 0.95;
+ anchoLibro = anchoSangrado * 0.28;
+ anchoSolapa = anchoSangrado * 0.163;
+ lomoLibro = anchoSangrado * 0.09;
+ anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+ }
+
+ // Clear the canvas element
+ this.container.empty();
+ // Get the element for placing the graphical elements
+ var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
+ // Calculate the center of the canvas element
+ var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
+
+ var sangrado = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ anchoSangrado,
+ altoSangrado
+ );
+ sangrado.stroke = 'black';
+ sangrado.dashes = [5, 5];
+ sangrado.fill = '#FCEAF1';
+ sangrado.linewidth = 1;
+
+ if (this.solapa != 0) {
+ var solapas = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ anchoCubierta,
+ altoLibro);
+ solapas.stroke = 'black';
+ solapas.linewidth = 1;
+
+ // Cotas Solapas
+ if (this.size != "thumbnail") {
+ var cotaSolapa2 = previewEC.makeDobleArrow(
+ origenEC.x - anchoCubierta / 2,
+ origenEC.y - (altoLibro / 3),
+ origenEC.x - anchoLibro - lomoLibro / 2,
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaSolapa2.linewidth = 2;
+ var cotaSolapa1 = previewEC.makeDobleArrow(
+ origenEC.x + anchoCubierta / 2,
+ origenEC.y - (altoLibro / 3),
+ origenEC.x + anchoLibro + lomoLibro / 2,
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaSolapa1.linewidth = 2;
+
+ // Textos Solapas
+ let stylesSolapa = { size: 18, family: 'Public Sans' };
+ previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+ previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+ // Textos Cotas Solapas
+ previewEC.makeText(anchoSolapa.toFixed(1) + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText(anchoSolapa.toFixed(1) + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ }
+
+ }
+
+ var libro = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ ((2 * anchoLibro) + lomoLibro),
+ altoLibro);
+ libro.stroke = 'black';
+ libro.linewidth = 1;
+
+ var lomo = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ lomoLibro,
+ altoLibro);
+ lomo.stroke = 'black';
+ lomo.fill = '#F4F8F2';
+ lomo.linewidth = 1;
+
+ // Cotas y textos
+ if (this.size != "thumbnail") {
+ // Cotas:
+ var cotaAnchoCubierta = previewEC.makeDobleArrow(
+ origenEC.x - (anchoSangrado / 2),
+ origenEC.y + (altoLibro / 2) + 35,
+ origenEC.x + (anchoSangrado / 2),
+ origenEC.y + (altoLibro / 2) + 35,
+ 10);
+ cotaAnchoCubierta.linewidth = 2;
+ var cotaAltoCubierta = previewEC.makeDobleArrow(
+ origenEC.x + (anchoCubierta / 2) + 35,
+ origenEC.y + (altoSangrado / 2),
+ origenEC.x + (anchoCubierta / 2) + 35,
+ origenEC.y - (altoSangrado / 2),
+ 10);
+ cotaAltoCubierta.linewidth = 2;
+ var cotaAltoLibro = previewEC.makeDobleArrow(
+ origenEC.x + (lomoLibro / 2) + 35,
+ origenEC.y + (altoLibro / 2),
+ origenEC.x + (lomoLibro / 2) + 35,
+ origenEC.y - (altoLibro / 2),
+ 10);
+ cotaAltoLibro.linewidth = 2;
+ var cotaLomo = previewEC.makeDobleArrow(
+ origenEC.x - (lomoLibro / 2),
+ origenEC.y + (altoLibro / 3),
+ origenEC.x + (lomoLibro / 2),
+ origenEC.y + (altoLibro / 3),
+ 10);
+ cotaLomo.linewidth = 2;
+ var cotaContraportada = previewEC.makeDobleArrow(
+ origenEC.x - (lomoLibro / 2 + anchoLibro),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x - (lomoLibro / 2),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaContraportada.linewidth = 2;
+ var cotaPortada = previewEC.makeDobleArrow(
+ origenEC.x + (lomoLibro / 2),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x + (lomoLibro / 2 + anchoLibro),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaPortada.linewidth = 2;
+
+
+ // Textos:
+ // Titulos generales
+ let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
+ previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+ previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+ let a = previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
+ // Sangrados
+ let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
+ previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+ previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+ // Cotas
+ previewEC.makeText(lomoLibro.toFixed(1) + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText((anchoLibro + offsetSolapaValor).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText((anchoLibro + offsetSolapaValor).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText(altoLibro.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+ previewEC.makeText((altoLibro + (2 * sangradoValor)).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+ previewEC.makeText(((2 * anchoLibro) + (2 * (anchoSolapa + offsetSolapaValor)) + lomoLibro + (2 * sangradoValor)).toFixed(1) + " mm",
+ origenEC.x,
+ origenEC.y + (altoLibro / 2) + 50,
+ styleCotas);
+
+ }
+
+ previewEC.update();
+
+ }
+
+
+ #portadaTapaDura() {
+
+ // Variables locales
+ let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado;
+ let styleCotas = { size: 12, family: 'Public Sans' };
+ let sangradoTexto = "Sangrado 20 mm";
+ let sangradoValor = parseFloat(20); // mm
+ if (this.ancho >= 210 || this.alto >= 297) {
+ sangradoValor = parseFloat(15); // mm
+ sangradoTexto = "Sangrado 15 mm";
+ }
+ let anchoPliegue = parseFloat(7); // mm cajo
+ let altoPliegue = parseFloat(7); // mm
+ let anchoCarton = parseFloat(6); // mm
+ if (this.lomoRedondo)
+ anchoCarton += parseFloat(6); // mm
+ // Definicion de los parametros del Esquema de Cubierta (EC)
+ if (this.size == "thumbnail") {
+ anchoSangrado = 350; // px
+ altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+ } else {
+ anchoSangrado = 800; // px
+ altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+ }
+ altoLibro = altoSangrado * 0.88;
+ anchoLibro = anchoSangrado * 0.39;
+ lomoLibro = anchoSangrado * 0.133;
+ anchoCubierta = (2 * anchoLibro) + lomoLibro;
+
+ // Clear the canvas element
+ this.container.empty();
+ // Get the element for placing the graphical elements
+ var previewEC = new Two({ fitted: true }).appendTo($(this.container)[0]);
+
+ // Calculate the center of the canvas element
+ var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
+
+ var sangrado = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ anchoSangrado,
+ altoSangrado
+ );
+ sangrado.stroke = 'black';
+ sangrado.dashes = [5, 5];
+ sangrado.fill = '#FCEAF1';
+ sangrado.linewidth = 1;
+
+ var libro = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ ((2 * anchoLibro) + lomoLibro),
+ altoLibro);
+ libro.stroke = 'black';
+ libro.linewidth = 1;
+
+ var lomo = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ lomoLibro,
+ altoLibro);
+ lomo.stroke = 'black';
+ lomo.fill = '#F4F8F2';
+ lomo.linewidth = 1;
+
+ // Cotas y textos
+ if (this.size != "thumbnail") {
+ // Cotas:
+ var cotaAnchoCubierta = previewEC.makeDobleArrow(
+ origenEC.x - (anchoSangrado / 2),
+ origenEC.y + (altoLibro / 2) + 35,
+ origenEC.x + (anchoSangrado / 2),
+ origenEC.y + (altoLibro / 2) + 35,
+ 10);
+ cotaAnchoCubierta.linewidth = 2;
+ var cotaAltoCubierta = previewEC.makeDobleArrow(
+ origenEC.x + (anchoCubierta / 2) + 40,
+ origenEC.y + (altoSangrado / 2),
+ origenEC.x + (anchoCubierta / 2) + 40,
+ origenEC.y - (altoSangrado / 2),
+ 10);
+ cotaAltoCubierta.linewidth = 2;
+ var cotaAltoLibro = previewEC.makeDobleArrow(
+ origenEC.x + (lomoLibro / 2) + 35,
+ origenEC.y + (altoLibro / 2),
+ origenEC.x + (lomoLibro / 2) + 35,
+ origenEC.y - (altoLibro / 2),
+ 10);
+ cotaAltoLibro.linewidth = 2;
+ var cotaLomo = previewEC.makeDobleArrow(
+ origenEC.x - (lomoLibro / 2),
+ origenEC.y + (altoLibro / 3),
+ origenEC.x + (lomoLibro / 2),
+ origenEC.y + (altoLibro / 3),
+ 10);
+ cotaLomo.linewidth = 2;
+ var cotaContraportada = previewEC.makeDobleArrow(
+ origenEC.x - (lomoLibro / 2 + anchoLibro),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x - (lomoLibro / 2),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaContraportada.linewidth = 2;
+ var cotaPortada = previewEC.makeDobleArrow(
+ origenEC.x + (lomoLibro / 2),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x + (lomoLibro / 2 + anchoLibro),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaPortada.linewidth = 2;
+
+
+ // Textos:
+ // Titulos generales
+ let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
+ previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+ previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+ previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
+ // Sangrados
+ let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
+ previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+ previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+ // Cotas
+ previewEC.makeText((this.lomo + anchoCarton).toFixed(1) + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText((this.ancho + anchoPliegue).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText((this.ancho + anchoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText((this.alto + altoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+ previewEC.makeText((this.alto + (2 * sangradoValor) + altoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 55, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+ previewEC.makeText((2 * this.ancho) + this.lomo + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
+ origenEC.x,
+ origenEC.y + (altoLibro / 2) + 50,
+ styleCotas);
+
+ }
+
+ previewEC.update();
+ }
+
+ #portadaEspiral(isTapaDura = false) {
+
+ // Variables locales
+ let altoLibro, anchoLibro, anchoSolapa, anchoCalle, altoSangrado, anchoSangrado, offsetCubierta, anchoCubierta;
+ let styleCotas = { size: 12, family: 'Public Sans' };
+ let sangradoTexto = (isTapaDura) ? "Sangrado 20 mm" : "Sangrado 5 mm";
+ let sangradoValor = (isTapaDura) ? parseFloat(20) : parseFloat(5); // mm
+
+
+ // Definicion de los parametros del Esquema de Cubierta (EC)
+ if ((this.solapa !== 0) && (!isTapaDura)) {
+ if (this.size == "thumbnail") {
+ anchoSangrado = 350; // px
+ altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+ } else {
+ anchoSangrado = 750; // px
+ altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+ }
+ altoLibro = altoSangrado * 0.95;
+ anchoLibro = anchoSangrado * 0.28;
+ anchoCalle = anchoSangrado * 0.02;
+ anchoSolapa = anchoSangrado * 0.163;
+ sangrado = anchoSangrado * 0.03;
+ anchoCubierta = 2 * (anchoLibro + anchoSolapa + sangrado) + anchoCalle;
+ offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa / 2 + sangrado;
+ } else {
+ if (this.size == "thumbnail") {
+ anchoSangrado = 350; // px
+ altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+ } else {
+ anchoSangrado = 750; // px
+ altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+ }
+ altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.9;
+ anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.44;
+ anchoCalle = anchoSangrado * 0.02;
+ anchoSolapa = 0;
+ anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + anchoCalle;
+ offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa + sangradoValor;
+ }
+
+ var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
+ // Calculate the center of the canvas element
+ var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
+
+ var sangrado = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ anchoSangrado,
+ altoSangrado
+ );
+ sangrado.stroke = 'black';
+ sangrado.dashes = [5, 5];
+ sangrado.fill = '#FCEAF1';
+ sangrado.linewidth = 1;
+
+ if ((this.solapa != 0) && (!isTapaDura)) {
+ var solapa1 = previewEC.makeRectangle(
+ origenEC.x + (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
+ origenEC.y,
+ anchoSolapa,
+ altoLibro);
+ solapa1.stroke = 'black';
+ solapa1.linewidth = 1;
+
+ var solapa2 = previewEC.makeRectangle(
+ origenEC.x - (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
+ origenEC.y,
+ anchoSolapa,
+ altoLibro);
+ solapa2.stroke = 'black';
+ solapa2.linewidth = 1;
+
+ // Cotas y textos
+ if (this.size != "thumbnail") {
+ // Cotas
+ var cotaSolapa2 = previewEC.makeDobleArrow(
+ origenEC.x - (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x - (anchoLibro + sangradoValor + anchoCalle / 2),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaSolapa2.linewidth = 2;
+ var cotaSolapa1 = previewEC.makeDobleArrow(
+ origenEC.x + (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x + (anchoLibro + sangradoValor + anchoCalle / 2),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaSolapa1.linewidth = 2;
+
+ // Textos Solapas
+ let stylesSolapa = { size: 18, family: 'Public Sans' };
+ previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+ previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+ // Textos Cotas Solapas
+ previewEC.makeText((this.solapa).toFixed(1) + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText(this.solapa.toFixed(1) + " mm", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ }
+
+ }
+
+ var portada = previewEC.makeRectangle(
+ origenEC.x + (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
+ origenEC.y,
+ anchoLibro,
+ altoLibro);
+ portada.stroke = 'black';
+ portada.linewidth = 1;
+
+ var contraportada = previewEC.makeRectangle(
+ origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
+ origenEC.y,
+ anchoLibro,
+ altoLibro);
+ contraportada.stroke = 'black';
+ contraportada.linewidth = 1;
+
+ var calle = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ anchoCalle,
+ altoSangrado);
+ calle.stroke = 'black';
+ calle.dashes = [2, 5];
+ calle.fill = '#F4F8F2';
+ calle.linewidth = 1;
+
+ // Cotas y textos
+ if (this.size != "thumbnail") {
+ // Cotas:
+ var cotaAnchoCubierta = previewEC.makeDobleArrow(
+ origenEC.x - (anchoSangrado / 2),
+ origenEC.y + (altoLibro / 2) + 35,
+ origenEC.x + (anchoSangrado / 2),
+ origenEC.y + (altoLibro / 2) + 35,
+ 10);
+ cotaAnchoCubierta.linewidth = 2;
+ var cotaAltoCubierta = previewEC.makeDobleArrow(
+ origenEC.x + (anchoSangrado / 2) + 15,
+ origenEC.y + (altoSangrado / 2),
+ origenEC.x + (anchoSangrado / 2) + 15,
+ origenEC.y - (altoSangrado / 2),
+ 10);
+ cotaAltoCubierta.linewidth = 2;
+ var cotaAltoLibro = previewEC.makeDobleArrow(
+ origenEC.x + (anchoCalle / 2) + 35,
+ origenEC.y + (altoLibro / 2),
+ origenEC.x + (anchoCalle / 2) + 35,
+ origenEC.y - (altoLibro / 2),
+ 10);
+ cotaAltoLibro.linewidth = 2;
+ var cotaContraportada = previewEC.makeDobleArrow(
+ origenEC.x - (anchoCalle / 2 + anchoLibro + sangradoValor),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x - ((anchoCalle / 2) + sangradoValor),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaContraportada.linewidth = 2;
+ var cotaPortada = previewEC.makeDobleArrow(
+ origenEC.x + ((anchoCalle / 2) + sangradoValor),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x + (anchoCalle / 2 + anchoLibro + sangradoValor),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaPortada.linewidth = 2;
+
+
+ // Textos:
+ // Titulos generales
+ let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
+ previewEC.makeText("Portada",
+ origenEC.x + anchoLibro / 2 + anchoCalle / 2 + sangradoValor + 15,
+ origenEC.y,
+ stylesEC
+ );
+ previewEC.makeText("Contraportada",
+ origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
+ origenEC.y,
+ stylesEC
+ );
+ // Sangrados
+ let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
+ previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x + (anchoSangrado / 2) - 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+ previewEC.makeText(sangradoTexto, origenEC.x - (anchoSangrado / 2) + 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+ // Cotas
+ previewEC.makeText(this.ancho.toFixed(1) + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText(this.ancho.toFixed(1) + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+ previewEC.makeText((this.alto + (2 * sangradoValor)).toFixed(1) + " mm",
+ origenEC.x + (anchoSangrado / 2) + 30,
+ origenEC.y,
+ styleCotas
+ ).rotation = -Math.PI / 2;
+ previewEC.makeText(((2 * this.ancho) + this.lomo + (2 * sangradoValor)).toFixed(1) + " mm",
+ origenEC.x,
+ origenEC.y + (altoLibro / 2) + 50,
+ styleCotas);
+ }
+
+ previewEC.update();
+
+ }
+
+
+ #portadaGrapado() {
+
+ // Variables locales
+ let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
+ let styleCotas = { size: 12, family: 'Public Sans' };
+ let sangradoTexto = "Sangrado 5 mm";
+ let sangradoValor = parseFloat(5); // mm
+
+ // Definicion de los parametros del Esquema de Cubierta (EC)
+ if (this.solapa == 0) {
+ if (this.size == "thumbnail") {
+ anchoSangrado = 350; // px
+ altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+ } else {
+ anchoSangrado = 750; // px
+ altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+ }
+ altoLibro = altoSangrado * 0.97;
+ anchoLibro = anchoSangrado * 0.48;
+ anchoSolapa = 0;
+ lomoLibro = 0; // ESTA ES LA DIFERENCIA PARA GRAPADO
+ anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+
+ } else {
+ if (this.size == "thumbnail") {
+ anchoSangrado = 350; // px
+ altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+ } else {
+ anchoSangrado = 750; // px
+ altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+ }
+ altoLibro = altoSangrado * 0.95;
+ anchoLibro = anchoSangrado * 0.3;
+ anchoSolapa = anchoSangrado * 0.18;
+ lomoLibro = 0; // ESTA ES LA DIFERENCIA PARA GRAPADO
+ anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
+ }
+
+ var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
+ // Calculate the center of the canvas element
+ var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
+
+ var sangrado = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ anchoSangrado,
+ altoSangrado
+ );
+ sangrado.stroke = 'black';
+ sangrado.dashes = [5, 5];
+ sangrado.fill = '#FCEAF1';
+ sangrado.linewidth = 1;
+
+ if (this.solapa != 0) {
+ var solapas = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ anchoCubierta,
+ altoLibro);
+ solapas.stroke = 'black';
+ solapas.linewidth = 1;
+
+ // Cotas y textos
+ if (this.size != "thumbnail") {
+ // Cotas
+ var cotaSolapa2 = previewEC.makeDobleArrow(
+ origenEC.x - anchoCubierta / 2,
+ origenEC.y - (altoLibro / 3),
+ origenEC.x - anchoLibro - lomoLibro / 2,
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaSolapa2.linewidth = 2;
+ var cotaSolapa1 = previewEC.makeDobleArrow(
+ origenEC.x + anchoCubierta / 2,
+ origenEC.y - (altoLibro / 3),
+ origenEC.x + anchoLibro + lomoLibro / 2,
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaSolapa1.linewidth = 2;
+
+ // Textos Solapas
+ let stylesSolapa = { size: 18, family: 'Public Sans' };
+ previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+ previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
+ // Textos Cotas Solapas
+ previewEC.makeText(this.solapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText(this.solapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ }
+
+ }
+
+ var libro = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ ((2 * anchoLibro) + lomoLibro),
+ altoLibro);
+ libro.stroke = 'black';
+ libro.linewidth = 1;
+
+ var lomo = previewEC.makeRectangle(
+ origenEC.x,
+ origenEC.y,
+ lomoLibro,
+ altoLibro);
+ lomo.stroke = 'black';
+ lomo.fill = '#F4F8F2';
+ lomo.linewidth = 1;
+
+ // Cotas y textos
+ if (this.size != "thumbnail") {
+ // Cotas:
+ var cotaAnchoCubierta = previewEC.makeDobleArrow(
+ origenEC.x - (anchoSangrado / 2),
+ origenEC.y + (altoLibro / 2) + 35,
+ origenEC.x + (anchoSangrado / 2),
+ origenEC.y + (altoLibro / 2) + 35,
+ 10);
+ cotaAnchoCubierta.linewidth = 2;
+ var cotaAltoCubierta = previewEC.makeDobleArrow(
+ origenEC.x + (anchoCubierta / 2) + 35,
+ origenEC.y + (altoSangrado / 2),
+ origenEC.x + (anchoCubierta / 2) + 35,
+ origenEC.y - (altoSangrado / 2),
+ 10);
+ cotaAltoCubierta.linewidth = 2;
+ var cotaAltoLibro = previewEC.makeDobleArrow(
+ origenEC.x + (lomoLibro / 2) + 35,
+ origenEC.y + (altoLibro / 2),
+ origenEC.x + (lomoLibro / 2) + 35,
+ origenEC.y - (altoLibro / 2),
+ 10);
+ cotaAltoLibro.linewidth = 2;
+ var cotaContraportada = previewEC.makeDobleArrow(
+ origenEC.x - (lomoLibro / 2 + anchoLibro),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x - (lomoLibro / 2),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaContraportada.linewidth = 2;
+ var cotaPortada = previewEC.makeDobleArrow(
+ origenEC.x + (lomoLibro / 2),
+ origenEC.y - (altoLibro / 3),
+ origenEC.x + (lomoLibro / 2 + anchoLibro),
+ origenEC.y - (altoLibro / 3),
+ 10);
+ cotaPortada.linewidth = 2;
+
+ // Textos:
+ // Titulos generales
+ let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
+ previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+ previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
+ // Sangrados
+ let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
+ previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
+ previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+ previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+ // Cotas
+ previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+ previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+ previewEC.makeText(this.alto.toFixed(1) + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+ previewEC.makeText(((2 * anchoLibro) + (2 * (this.solapa + this.offsetSolapa)) + this.lomo + (2 * sangradoValor)).toFixed(1) + " mm",
+ origenEC.x,
+ origenEC.y + (altoLibro / 2) + 50,
+ styleCotas);
+ }
+
+ previewEC.update();
+ }
+}
+
+export default previewFormas;
diff --git a/httpdocs/themes/vuexy/css/presupuestoCliente.css b/httpdocs/themes/vuexy/css/presupuestoCliente.css
new file mode 100644
index 00000000..1ad2532f
--- /dev/null
+++ b/httpdocs/themes/vuexy/css/presupuestoCliente.css
@@ -0,0 +1,475 @@
+.image-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ margin-bottom: 20px;
+ position: relative;
+ max-width: 200px;
+}
+
+/* Estilo de la imagen */
+.image-container img {
+ max-width: 150px;
+ max-height: 150px;
+}
+
+/* Pseudo-elemento que muestra el tick */
+.image-container.selected::after {
+ content: '✔'; /* Símbolo de tick */
+ position: absolute;
+ top: calc(50% + 5px);
+ left: calc(100%/2 + 65px); /* Mueve 75px a la derecha fuera del contenedor */
+ font-size: 50px;
+ font-weight: bold;
+ color: green;
+ background-color: rgba(255, 255, 255, 0); /* Fondo transparente */
+ border-radius: 100%;
+ padding: 5px;
+}
+
+
+.image-presupuesto {
+ transition: transform 1s ease;
+}
+
+.image-presupuesto.selected {
+ --webkit-transform: rotateY(360deg);
+ --webkit-transform-style: preserve-3d;
+
+ transform: rotateY(360deg);
+ transform-style: preserve-3d;
+}
+
+.checkbox-presupuesto-container {
+ width: 110px !important;
+ max-width: 110px !important;
+ min-width: 110px !important;
+}
+
+.checkbox-presupuesto-tiradas-envio {
+ width: 130px !important;
+ max-width: 130px !important;
+ min-width: 130px !important;
+}
+
+.min-width-fit {
+ min-width: fit-content !important;
+}
+
+.texto-error {
+ color: #ea5455;
+ font-weight: bold;
+}
+
+.col-item-resumen-table {
+ max-width: 200px;
+ width: 200px;
+ font-weight: bold;
+}
+
+
+
+.loader * {
+ border: 0;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+.loader {
+ --hue: 223;
+ --bg: hsl(var(--hue), 10%, 90%);
+ --fg: hsl(var(--hue), 10%, 10%);
+ --primary: hsl(var(--hue), 90%, 55%);
+ --primary-l: hsl(var(--hue), 90%, 65%);
+ --primary-d: hsl(var(--hue), 90%, 45%);
+ --white: hsl(var(--hue), 10%, 100%);
+ --white-d: hsl(var(--hue), 10%, 45%);
+ font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
+ background-color: rgba(255, 255, 255, 0);
+ color: var(--fg);
+ font: 1em/1.5 sans-serif;
+ height: 100vh;
+ position: fixed;
+ /* Fijo para cubrir la pantalla */
+ left: 50%;
+ /* Centramos horizontalmente */
+ top: 50%;
+ /* Centramos verticalmente */
+ transform: translate(-50%, -50%);
+ /* Ajuste para centrar el loader */
+ width: auto;
+ /* Se ajusta automáticamente */
+ height: auto;
+ /* Se ajusta automáticamente */
+ z-index: 9999;
+ /* Mantener por encima de otros elementos */
+ display: flex;
+ /* Para centrar contenido */
+ justify-content: center;
+ /* Centrar horizontalmente */
+ align-items: center;
+ /* Centrar verticalmente */
+ background-color: rgba(255, 255, 255, 0);
+ /* Fondo completamente transparente */
+}
+
+.book,
+.book__pg-shadow,
+.book__pg {
+ animation: cover 7s ease-in-out infinite;
+}
+
+.book {
+ background-color: var(--primary-l);
+ border-radius: 0.25em;
+ box-shadow:
+ 0 0.25em 0.5em hsla(0, 0%, 0%, 0.3),
+ 0 0 0 0.25em var(--primary) inset;
+ padding: 0.25em;
+ perspective: 37.5em;
+ position: relative;
+ width: 8em;
+ height: 6em;
+ transform: translate3d(0, 0, 0);
+ transform-style: preserve-3d;
+}
+
+.book__pg-shadow,
+.book__pg {
+ position: absolute;
+ left: 0.25em;
+ width: calc(50% - 0.25em);
+}
+
+.book__pg-shadow {
+ animation-name: shadow;
+ background-image: linear-gradient(-45deg, hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, 0.3) 50%);
+ filter: blur(0.25em);
+ top: calc(100% - 0.25em);
+ height: 3.75em;
+ transform: scaleY(0);
+ transform-origin: 100% 0%;
+}
+
+.book__pg {
+ animation-name: pg1;
+ background-color: var(--white);
+ background-image: linear-gradient(90deg, hsla(var(--hue), 10%, 90%, 0) 87.5%, hsl(var(--hue), 10%, 90%));
+ height: calc(100% - 0.5em);
+ transform-origin: 100% 50%;
+}
+
+.book__pg--2,
+.book__pg--3,
+.book__pg--4 {
+ background-image:
+ repeating-linear-gradient(hsl(var(--hue), 10%, 10%) 0 0.125em, hsla(var(--hue), 10%, 10%, 0) 0.125em 0.5em),
+ linear-gradient(90deg, hsla(var(--hue), 10%, 90%, 0) 87.5%, hsl(var(--hue), 10%, 90%));
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 2.5em 4.125em, 100% 100%;
+}
+
+.book__pg--2 {
+ animation-name: pg2;
+}
+
+.book__pg--3 {
+ animation-name: pg3;
+}
+
+.book__pg--4 {
+ animation-name: pg4;
+}
+
+.book__pg--5 {
+ animation-name: pg5;
+}
+
+/* Dark theme */
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg: hsl(var(--hue), 10%, 30%);
+ --fg: hsl(var(--hue), 10%, 90%);
+ }
+}
+
+/* Animations */
+@keyframes cover {
+
+ from,
+ 5%,
+ 45%,
+ 55%,
+ 95%,
+ to {
+ animation-timing-function: ease-out;
+ background-color: var(--primary-l);
+ }
+
+ 10%,
+ 40%,
+ 60%,
+ 90% {
+ animation-timing-function: ease-in;
+ background-color: var(--primary-d);
+ }
+}
+
+@keyframes shadow {
+
+ from,
+ 10.01%,
+ 20.01%,
+ 30.01%,
+ 40.01% {
+ animation-timing-function: ease-in;
+ transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
+ }
+
+ 5%,
+ 15%,
+ 25%,
+ 35%,
+ 45%,
+ 55%,
+ 65%,
+ 75%,
+ 85%,
+ 95% {
+ animation-timing-function: ease-out;
+ transform: translate3d(0, 0, 1px) scaleY(0.2) rotateY(90deg);
+ }
+
+ 10%,
+ 20%,
+ 30%,
+ 40%,
+ 50%,
+ to {
+ animation-timing-function: ease-out;
+ transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
+ }
+
+ 50.01%,
+ 60.01%,
+ 70.01%,
+ 80.01%,
+ 90.01% {
+ animation-timing-function: ease-in;
+ transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
+ }
+
+ 60%,
+ 70%,
+ 80%,
+ 90%,
+ to {
+ animation-timing-function: ease-out;
+ transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
+ }
+}
+
+@keyframes pg1 {
+
+ from,
+ to {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(0.4deg);
+ }
+
+ 10%,
+ 15% {
+ animation-timing-function: ease-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(180deg);
+ }
+
+ 20%,
+ 80% {
+ animation-timing-function: ease-in;
+ background-color: var(--white-d);
+ transform: translate3d(0, 0, 1px) rotateY(180deg);
+ }
+
+ 85%,
+ 90% {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(180deg);
+ }
+}
+
+@keyframes pg2 {
+
+ from,
+ to {
+ animation-timing-function: ease-in;
+ background-color: var(--white-d);
+ transform: translate3d(0, 0, 1px) rotateY(0.3deg);
+ }
+
+ 5%,
+ 10% {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(0.3deg);
+ }
+
+ 20%,
+ 25% {
+ animation-timing-function: ease-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(179.9deg);
+ }
+
+ 30%,
+ 70% {
+ animation-timing-function: ease-in;
+ background-color: var(--white-d);
+ transform: translate3d(0, 0, 1px) rotateY(179.9deg);
+ }
+
+ 75%,
+ 80% {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(179.9deg);
+ }
+
+ 90%,
+ 95% {
+ animation-timing-function: ease-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(0.3deg);
+ }
+}
+
+@keyframes pg3 {
+
+ from,
+ 10%,
+ 90%,
+ to {
+ animation-timing-function: ease-in;
+ background-color: var(--white-d);
+ transform: translate3d(0, 0, 1px) rotateY(0.2deg);
+ }
+
+ 15%,
+ 20% {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(0.2deg);
+ }
+
+ 30%,
+ 35% {
+ animation-timing-function: ease-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(179.8deg);
+ }
+
+ 40%,
+ 60% {
+ animation-timing-function: ease-in;
+ background-color: var(--white-d);
+ transform: translate3d(0, 0, 1px) rotateY(179.8deg);
+ }
+
+ 65%,
+ 70% {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(179.8deg);
+ }
+
+ 80%,
+ 85% {
+ animation-timing-function: ease-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(0.2deg);
+ }
+}
+
+@keyframes pg4 {
+
+ from,
+ 20%,
+ 80%,
+ to {
+ animation-timing-function: ease-in;
+ background-color: var(--white-d);
+ transform: translate3d(0, 0, 1px) rotateY(0.1deg);
+ }
+
+ 25%,
+ 30% {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(0.1deg);
+ }
+
+ 40%,
+ 45% {
+ animation-timing-function: ease-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(179.7deg);
+ }
+
+ 50% {
+ animation-timing-function: ease-in;
+ background-color: var(--white-d);
+ transform: translate3d(0, 0, 1px) rotateY(179.7deg);
+ }
+
+ 55%,
+ 60% {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(179.7deg);
+ }
+
+ 70%,
+ 75% {
+ animation-timing-function: ease-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(0.1deg);
+ }
+}
+
+@keyframes pg5 {
+
+ from,
+ 30%,
+ 70%,
+ to {
+ animation-timing-function: ease-in;
+ background-color: var(--white-d);
+ transform: translate3d(0, 0, 1px) rotateY(0);
+ }
+
+ 35%,
+ 40% {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(0deg);
+ }
+
+ 50% {
+ animation-timing-function: ease-in-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(179.6deg);
+ }
+
+ 60%,
+ 65% {
+ animation-timing-function: ease-out;
+ background-color: var(--white);
+ transform: translate3d(0, 0, 1px) rotateY(0);
+ }
+}
\ No newline at end of file
diff --git a/xdebug.log b/xdebug.log
new file mode 100644
index 00000000..ebe358ce
--- /dev/null
+++ b/xdebug.log
@@ -0,0 +1,24 @@
+[25] Log opened at 2024-11-07 19:18:16.252892
+[25] [Config] INFO: Control socket set up succesfully: '@xdebug-ctrl.25'
+[25] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[25] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[25] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[25] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[25] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[25] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[25] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[25] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[25] Log closed at 2024-11-07 19:18:17.804301
+
+[27] Log opened at 2024-11-07 19:18:17.941917
+[27] [Config] INFO: Control socket set up succesfully: '@xdebug-ctrl.27'
+[27] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[27] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[27] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[27] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[27] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[27] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[27] [Step Debug] INFO: Connecting to configured address/port: 172.29.24.59:9003.
+[27] [Step Debug] ERR: Time-out connecting to debugging client, waited: 200 ms. Tried: 172.29.24.59:9003 (through xdebug.client_host/xdebug.client_port).
+[27] Log closed at 2024-11-07 19:18:18.850160
+
"
+ alt="Fresado">
+