mirror of
https://git.imnavajas.es/jjimenez/safekat.git
synced 2025-07-25 22:52:08 +00:00
guardar terminado
This commit is contained in:
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 46 KiB |
@ -3,6 +3,8 @@ class tarjetaDireccion {
|
||||
constructor(container, id, direccion) {
|
||||
|
||||
this.container = container;
|
||||
this.id = id;
|
||||
this.direccionId = direccion.id;
|
||||
this.card = this.#generateHTML(id, direccion);
|
||||
this.deleteBtn = this.card.find('.direccion-eliminar');
|
||||
this.editBtn = this.card.find('.direccion-editar');
|
||||
@ -82,6 +84,22 @@ class tarjetaDireccion {
|
||||
getCp() {
|
||||
return this.card.find('.address-cp').text();
|
||||
}
|
||||
|
||||
getId() {
|
||||
return this.id;
|
||||
}
|
||||
|
||||
getDireccionId() {
|
||||
return this.direccionId;
|
||||
}
|
||||
|
||||
getFormData() {
|
||||
return {
|
||||
id: this.direccionId,
|
||||
unidades: this.getUnidades(),
|
||||
entregaPalets: this.getEntregaPalets()
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export default tarjetaDireccion;
|
||||
@ -1,4 +1,5 @@
|
||||
import ClassSelect from '../../components/select2.js';
|
||||
import tarjetaTiradasPrecio from './tarjetaTiradasPrecio.js';
|
||||
|
||||
|
||||
class DatosGenerales {
|
||||
@ -13,6 +14,10 @@ class DatosGenerales {
|
||||
this.cliente = new ClassSelect($("#clienteId"), '/clientes/cliente/getSelect2', window.translations["selectCliente"]);
|
||||
|
||||
this.titulo = this.domItem.find("#titulo");
|
||||
this.autor = this.domItem.find("#autor");
|
||||
this.isbn = this.domItem.find("#isbn");
|
||||
this.coleccion = this.domItem.find("#coleccion");
|
||||
this.referenciaCliente = this.domItem.find("#referenciaCliente");
|
||||
|
||||
this.tirada1 = this.domItem.find("#tirada");
|
||||
this.tirada2 = this.domItem.find("#tirada2");
|
||||
|
||||
@ -23,10 +23,12 @@ class Direcciones {
|
||||
this.divDirecciones = $(this.domItem.find('#divDirecciones'));
|
||||
this.divTiradas = this.domItem.find('#containerTiradasEnvios');
|
||||
|
||||
this.checksTiradasEnvio = $('.tirada-envio');
|
||||
this.checksTiradasEnvio = $('.check-tirada-envio');
|
||||
|
||||
this.direcciones = [];
|
||||
|
||||
this.direcciones.calcularPresupuesto = false;
|
||||
|
||||
this.initValidation();
|
||||
|
||||
}
|
||||
@ -57,7 +59,7 @@ class Direcciones {
|
||||
const div = $('#divErrorEnvios'); // Selecciona el div
|
||||
|
||||
div.find('.fv-plugins-message-container').remove();
|
||||
|
||||
|
||||
if ($('.check-tirada-envio:checked').length > 0) {
|
||||
let unidades = parseInt($($('.check-tirada-envio:checked')[0]).attr('tirada'));
|
||||
let total_envio = 0;
|
||||
@ -132,6 +134,18 @@ class Direcciones {
|
||||
});
|
||||
}
|
||||
|
||||
obtenerDireccionesCalculo() {
|
||||
let direcciones = [];
|
||||
this.direcciones.forEach(direccion => {
|
||||
let dir = {
|
||||
id: direccion.getId(),
|
||||
unidades: direccion.getUnidades(),
|
||||
entregaPalets: direccion.getEntregaPalets()
|
||||
};
|
||||
direcciones.push(dir);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
#nuevaDireccion() {
|
||||
|
||||
@ -185,12 +199,12 @@ class Direcciones {
|
||||
let id = this.direccionesCliente.getVal();
|
||||
let unidades = this.unidadesAdd.val();
|
||||
let entregaPalets = this.entregaPieCallero.is(':checked');
|
||||
let dirId = "dirEnvio-" + id;
|
||||
let divId = "dirEnvio-1";
|
||||
let direccionesActuales = this.divDirecciones.find('.direccion-cliente');
|
||||
if (direccionesActuales.length > 0) {
|
||||
// the the lass item
|
||||
let last = direccionesActuales[direccionesActuales.length - 1];
|
||||
dirId = "dirEnvio-" + (parseInt(last.id.split('-')[1]) + 1);
|
||||
divId = "dirEnvio-" + (parseInt(last.id.split('-')[1]) + 1);
|
||||
}
|
||||
|
||||
if (id == null || id <= 0 || id == undefined)
|
||||
@ -202,7 +216,16 @@ class Direcciones {
|
||||
let peticion = new Ajax('/misdirecciones/get/' + id, {}, {},
|
||||
(response) => {
|
||||
|
||||
let tarjeta = new tarjetaDireccion(this.divDirecciones, dirId, response.data[0]);
|
||||
if (this.direcciones.length == 0) {
|
||||
$('#loader').hide();
|
||||
if (entregaPalets) {
|
||||
this.calcularPresupuesto = true;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.calcularPresupuesto = true;
|
||||
}
|
||||
let tarjeta = new tarjetaDireccion(this.divDirecciones, divId, response.data[0]);
|
||||
tarjeta.setUnidades(unidades);
|
||||
tarjeta.setEntregaPalets(entregaPalets);
|
||||
tarjeta.card.find('.direccion-editar').on('click', this.#editUnits.bind(self));
|
||||
@ -210,7 +233,7 @@ class Direcciones {
|
||||
this.divDirecciones.append(tarjeta.card);
|
||||
this.direcciones.push(tarjeta);
|
||||
self.divDirecciones.trigger('change');
|
||||
$('#loader').hide();
|
||||
|
||||
},
|
||||
() => {
|
||||
console.error('Error getting address');
|
||||
@ -236,8 +259,8 @@ class Direcciones {
|
||||
|
||||
#editUnits(event) {
|
||||
|
||||
let id = $(event.currentTarget.closest('.direccion-cliente')).id;
|
||||
let tarjeta = this.direcciones.find(direccion => direccion.id == id).card;
|
||||
let id = $(event.currentTarget.closest('.direccion-cliente'))[0].id;
|
||||
let tarjeta = this.direcciones.filter(direccion => direccion.id == id)[0].card;
|
||||
let unidades = tarjeta.find('.unidades').text().split(' ')[0];
|
||||
|
||||
let modal = $('#modalInput');
|
||||
@ -252,6 +275,9 @@ class Direcciones {
|
||||
let nuevo_valor = parseInt(modal.find('.modal-body input').val());
|
||||
if (nuevo_valor > 0) {
|
||||
tarjeta.find('.unidades').text(nuevo_valor + ' unidades');
|
||||
if (this.direcciones.length > 1) {
|
||||
this.calcularPresupuesto = true;
|
||||
}
|
||||
this.divDirecciones.trigger('change');
|
||||
}
|
||||
} catch (error) {
|
||||
@ -266,10 +292,22 @@ class Direcciones {
|
||||
let tarjeta = event.currentTarget.closest('.direccion-cliente');
|
||||
let id = tarjeta.id;
|
||||
|
||||
const numTarjetasAntes = this.direcciones.length;
|
||||
if (numTarjetasAntes == 2) {
|
||||
this.calcularPresupuesto = true;
|
||||
}
|
||||
|
||||
this.direcciones = this.direcciones.filter(direccion => direccion.getId() !== id);
|
||||
|
||||
tarjeta.remove();
|
||||
this.divDirecciones.trigger('change');
|
||||
}
|
||||
|
||||
this.direcciones = this.direcciones.filter(direccion => direccion.id != id);
|
||||
getSelectedTirada() {
|
||||
if ($('.check-tirada-envio:checked').length > 0)
|
||||
return parseInt($($('.check-tirada-envio:checked')[0]).attr('tirada'));
|
||||
else
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -318,7 +318,7 @@ class DisenioCubierta {
|
||||
acabados.plastificado = this.domItem.find("#plastificado ").children("option:selected").val();
|
||||
acabados.barniz = this.domItem.find("#barniz").children("option:selected").val();
|
||||
acabados.estampado = this.domItem.find("#estampado").children("option:selected").val();
|
||||
acabados.retractilado = this.domItem.find("#retractilado").hasClass('selected') ? true : false;
|
||||
acabados.retractilado = this.domItem.find("#retractilado").hasClass('selected') ? 'RETR' : 'NONE';
|
||||
}
|
||||
return acabados;
|
||||
} catch (e) {
|
||||
|
||||
@ -23,6 +23,10 @@ class PresupuestoCliente {
|
||||
this.btnSave = $('#btnSave');
|
||||
this.btnConfirm = $('#btnConfirm');
|
||||
|
||||
this.c = $("#c");
|
||||
this.lc = $("#lc");
|
||||
this.lsc = $("#lsc");
|
||||
|
||||
this.datosGenerales = new DatosGenerales($("#datos-generales"), this.clientePresupuestoWizard, this.validationStepper);
|
||||
this.disenioInterior = new DisenioInterior($("#interior-libro"), this.clientePresupuestoWizard, this.validationStepper);
|
||||
this.disenioCubierta = new DisenioCubierta($("#cubierta-libro"), this.clientePresupuestoWizard, this.validationStepper);
|
||||
@ -43,10 +47,7 @@ class PresupuestoCliente {
|
||||
|
||||
init() {
|
||||
|
||||
this.btnNext.on('click', this.#nextStep.bind(this));
|
||||
this.btnPrev.on('click', this.#prevtStep.bind(this));
|
||||
|
||||
$(".calcular-presupuesto").on('change', this.checkForm.bind(this));
|
||||
this.RELLENAR_PRESUPUESTO(false);
|
||||
|
||||
// Fuerza el foco en el campo de búsqueda de select2
|
||||
$(document).on('select2:open', () => {
|
||||
@ -60,18 +61,35 @@ class PresupuestoCliente {
|
||||
this.disenioCubierta.init();
|
||||
this.direcciones.init();
|
||||
|
||||
//this.RELLENAR_PRESUPUESTO();
|
||||
|
||||
this.btnNext.on('click', this.#nextStep.bind(this));
|
||||
this.btnPrev.on('click', this.#prevtStep.bind(this));
|
||||
this.btnSave.on('click', this.#savePresupuesto.bind(this));
|
||||
|
||||
$(".calcular-presupuesto").on('change', this.checkForm.bind(this));
|
||||
|
||||
this.RELLENAR_PRESUPUESTO(true);
|
||||
|
||||
if(window.location.href.includes("edit")){
|
||||
//load
|
||||
const successMessage = sessionStorage.getItem('message');
|
||||
if(successMessage){
|
||||
popSuccessAlert(successMessage);
|
||||
sessionStorage.removeItem('message');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
checkForm(event) {
|
||||
|
||||
if (event.target.id === 'divDirecciones') {
|
||||
this.actualizarTiradasEnvio = false;
|
||||
if(this.direcciones.direcciones.length == 1 && this.direcciones.direcciones[0].getEntregaPalets() == false) {
|
||||
if (!this.direcciones.calcularPresupuesto) {
|
||||
this.actualizarTiradasEnvio = false;
|
||||
$('#loader').hide();
|
||||
return;
|
||||
}
|
||||
|
||||
}
|
||||
else {
|
||||
this.actualizarTiradasEnvio = true;
|
||||
@ -82,10 +100,10 @@ class PresupuestoCliente {
|
||||
|
||||
this.divTiradasPrecios.empty();
|
||||
|
||||
let datos_to_check = this.datos;
|
||||
let datos_to_check = { ...this.datos };
|
||||
if (datos_to_check.direcciones) {
|
||||
delete datos_to_check.direcciones;
|
||||
}
|
||||
delete datos_to_check.direcciones;
|
||||
}
|
||||
|
||||
if (Object.values(datos_to_check).every(this.#isValidDataForm)) {
|
||||
try {
|
||||
@ -96,6 +114,7 @@ class PresupuestoCliente {
|
||||
|
||||
this.ajax_calcular.setData(this.datos);
|
||||
this.ajax_calcular.post();
|
||||
this.direcciones.calcularPresupuesto = false;
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
@ -106,59 +125,66 @@ class PresupuestoCliente {
|
||||
}
|
||||
|
||||
|
||||
RELLENAR_PRESUPUESTO() {
|
||||
RELLENAR_PRESUPUESTO(finalizar) {
|
||||
|
||||
$("#titulo").val("Titulo del libro");
|
||||
$("#titulo").trigger('change');
|
||||
if (finalizar) {
|
||||
|
||||
const clienteId = $("#clienteId");
|
||||
const newOption = new Option("Cliente Potencial", "1817", true, true);
|
||||
clienteId.append(newOption).trigger('change');
|
||||
$("#titulo").val("Titulo del libro");
|
||||
$("#titulo").trigger('change');
|
||||
|
||||
const papelFormatoId = $("#papelFormatoId");
|
||||
const newOption2 = new Option("148 x 210", "1", true, true);
|
||||
papelFormatoId.append(newOption2).trigger('change');
|
||||
const clienteId = $("#clienteId");
|
||||
const newOption = new Option("Cliente Potencial", "1817", true, true);
|
||||
clienteId.append(newOption).trigger('change');
|
||||
|
||||
const papelFormatoId = $("#papelFormatoId");
|
||||
const newOption2 = new Option("148 x 210", "1", true, true);
|
||||
papelFormatoId.append(newOption2).trigger('change');
|
||||
|
||||
|
||||
$("#paginasColor").val("6");
|
||||
$("#paginasColor").trigger('change');
|
||||
$("#paginasColor").val("6");
|
||||
$("#paginasColor").trigger('change');
|
||||
|
||||
$("#fresado").trigger("click");
|
||||
$("#fresado").trigger("click");
|
||||
|
||||
|
||||
$("#colorPremium").trigger("click");
|
||||
$("#offsetBlanco").trigger("click");
|
||||
$("#colorPremium").trigger("click");
|
||||
$("#offsetBlanco").trigger("click");
|
||||
|
||||
setTimeout(function () {
|
||||
$("#gramaje90").trigger("click");
|
||||
}, 0);
|
||||
setTimeout(function () {
|
||||
$("#gramaje90").trigger("click");
|
||||
}, 0);
|
||||
|
||||
setTimeout(function () {
|
||||
$("#tapaDura").trigger("click");
|
||||
}, 0);
|
||||
setTimeout(function () {
|
||||
$("#tapaDura").trigger("click");
|
||||
}, 0);
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
$("#btnNext").trigger("click");
|
||||
}, 0);
|
||||
setTimeout(function () {
|
||||
$("#btnNext").trigger("click");
|
||||
}, 0);
|
||||
setTimeout(function () {
|
||||
$("#btnNext").trigger("click");
|
||||
}, 0);
|
||||
setTimeout(function () {
|
||||
$("#btnNext").trigger("click");
|
||||
}, 0);
|
||||
setTimeout(function () {
|
||||
$("#btnNext").trigger("click");
|
||||
}, 0);
|
||||
setTimeout(function () {
|
||||
$("#btnNext").trigger("click");
|
||||
}, 0);
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
$("#unidadesEnvio").val("50");
|
||||
}, 0);
|
||||
setTimeout(function () {
|
||||
$("#unidadesEnvio").val("50");
|
||||
}, 0);
|
||||
|
||||
}
|
||||
else {
|
||||
$("#titulo").trigger('change');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
stepperHandler() {
|
||||
|
||||
const element = $('.fv-plugins-bootstrap5.fv-plugins-framework.active');
|
||||
|
||||
|
||||
switch (element.attr('id')) {
|
||||
case 'datos-generales':
|
||||
this.btnPrev.addClass('d-none');
|
||||
@ -193,6 +219,41 @@ class PresupuestoCliente {
|
||||
}
|
||||
|
||||
|
||||
#savePresupuesto() {
|
||||
|
||||
this.#getDatos(true);
|
||||
|
||||
try {
|
||||
$('#loader').show();
|
||||
|
||||
if(window.location.href.includes("edit")){
|
||||
this.datos["id"] = window.location.href.split("/").pop();
|
||||
}
|
||||
new Ajax('/presupuestocliente/guardar',
|
||||
this.datos,
|
||||
{},
|
||||
(response) => {
|
||||
$('#loader').hide();
|
||||
console.log(response);
|
||||
if(this.datos["confirmar"] || window.location.href.includes("add")){
|
||||
sessionStorage.setItem('message', response.message);
|
||||
window.location.href = response.url + '/' + response.status;
|
||||
}
|
||||
else{
|
||||
popSuccessAlert(response.message);
|
||||
}
|
||||
},
|
||||
() => { $('#loader').hide(); }
|
||||
).post();
|
||||
|
||||
}
|
||||
catch (e) {
|
||||
console.log(e);
|
||||
$('#loader').hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#procesarPresupuesto(response) {
|
||||
|
||||
$('#loader').hide();
|
||||
@ -213,6 +274,8 @@ class PresupuestoCliente {
|
||||
if (this.actualizarTiradasEnvio)
|
||||
this.direcciones.insertTirada(response.tiradas[i]);
|
||||
|
||||
this.lc.val(parseFloat(response.info.lomo_cubierta).toFixed(2));
|
||||
this.lsc.val(parseFloat(response.info.lomo_sobrecubierta).toFixed(2));
|
||||
}
|
||||
}
|
||||
// DEBUG
|
||||
@ -247,13 +310,13 @@ class PresupuestoCliente {
|
||||
|
||||
|
||||
#prevtStep() {
|
||||
if (this.validationStepper._currentIndex >= 1 && this.validationStepper._currentIndex <= 4){
|
||||
if (this.validationStepper._currentIndex >= 1 && this.validationStepper._currentIndex <= 4) {
|
||||
this.validationStepper.previous();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#getDatos() {
|
||||
#getDatos(save = false) {
|
||||
|
||||
this.datos = {
|
||||
|
||||
@ -314,8 +377,23 @@ class PresupuestoCliente {
|
||||
}
|
||||
|
||||
if (this.direcciones.direcciones.length > 0) {
|
||||
this.datos.direcciones = this.direcciones.direcciones;
|
||||
this.datos.direcciones = [];
|
||||
for (let i = 0; i < this.direcciones.direcciones.length; i++) {
|
||||
this.datos.direcciones.push(this.direcciones.direcciones[i].getFormData());
|
||||
};
|
||||
}
|
||||
|
||||
if (save) {
|
||||
this.datos.datosCabecera = {
|
||||
titulo: this.datosGenerales.titulo.val(),
|
||||
autor: this.datosGenerales.autor.val(),
|
||||
isbn: this.datosGenerales.isbn.val(),
|
||||
coleccion: this.datosGenerales.coleccion.val(),
|
||||
referenciaCliente: this.datosGenerales.referenciaCliente.val(),
|
||||
}
|
||||
this.datos.selectedTirada = this.direcciones.getSelectedTirada();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
|
||||
/* Pseudo-elemento que muestra el tick */
|
||||
.image-container.selected::after {
|
||||
content: '✔'; /* Símbolo de tick */
|
||||
content: '✔';
|
||||
/* Símbolo de tick */
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
right: 25px;
|
||||
@ -64,3 +65,396 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user