trabajando en la pestaña cubierta

This commit is contained in:
Jaime Jiménez
2025-07-31 23:10:28 +02:00
parent eb0b5610d8
commit 29dbd21693
11 changed files with 752 additions and 111 deletions

View File

@ -1,4 +1,4 @@
<div>
<div class="animate-fadeInUpBounce">
<div class="row justify-content-center mb-3">
<div class="col-auto">
<button type="button" id="btn-plantilla-cubierta" class="btn btn-outline-primary btn-border">
@ -20,8 +20,8 @@
</div>
<div class="ribbon-content mt-4">
<div class="row justify-content-center imagen-container-group">
<div id="tapa-blanda" class="image-container imagen-selector selected">
<div class="row justify-content-center imagen-container-group mt-3">
<div id="tapaBlanda" class="tapa-cubierta image-container imagen-selector selected">
<img class="image-presupuesto" src="/assets/images/imprimelibros/presupuestador/tapa-blanda.png"
alt="">
<label for="titulo" class="form-label" th:text="#{presupuesto.tapa-blanda}">
@ -29,7 +29,7 @@
</label>
</div>
<div id="tapa-dura" class="image-container imagen-selector">
<div id="tapaDuraLomoRecto" class="tapa-cubierta image-container imagen-selector">
<img class="image-presupuesto"
src="/assets/images/imprimelibros/presupuestador/tapa-dura-lomo-recto.png" alt="">
<label class="form-label" th:text="#{presupuesto.tapa-dura}">
@ -37,7 +37,7 @@
</label>
</div>
<div id="tapa-dura-lomo-redondo" class="image-container imagen-selector">
<div id="tapaDuraLomoRedondo" class="tapa-cubierta image-container imagen-selector">
<img class="image-presupuesto"
src="/assets/images/imprimelibros/presupuestador/tapa-dura-lomo-redondo.png" alt="">
<label class="form-label" th:text="#{presupuesto.tapa-dura-lomo-redondo}">
@ -47,7 +47,8 @@
</div>
<div class="row justify-content-center align-items-center mt-3 imagen-container-group tapa-blanda-options">
<div id="sin-solapas" class="image-container imagen-selector">
<div id="sin-solapas" class="image-container imagen-selector solapas-cubierta selected">
<img class="image-presupuesto"
src="/assets/images/imprimelibros/presupuestador/sinSolapasCubierta.png" alt="">
<label class="form-label" th:text="#{presupuesto.sin-solapas}">
@ -55,7 +56,7 @@
</label>
</div>
<div id="con-solapas" class="image-container imagen-selector">
<div id="con-solapas" class="image-container imagen-selector solapas-cubierta">
<img class="image-presupuesto"
src="/assets/images/imprimelibros/presupuestador/conSolapasCubierta.png" alt="">
<label class="form-label" th:text="#{presupuesto.con-solapas}">
@ -79,7 +80,7 @@
</div>
</div>
<div class="col-auto mb-3">
<div id="div-solapas-cubierta" class="col-auto mb-3 d-none">
<label for="tamanio-solapas-cubierta" class="form-label"
th:text="#{presupuesto.tamanio-solapa}">Tamaño solapa</label>
<input type="number" class="form-control" id="tamanio-solapas-cubierta" value="80" step="1">
@ -87,7 +88,8 @@
</div>
</div>
<div class="row justify-content-center align-items-center mt-3 imagen-container-group tapa-dura-options">
<div class="row justify-content-center align-items-center mt-3 imagen-container-group tapa-dura-options d-none">
<div class="col-auto mb-3">
<label for="papel-guardas" class="form-label" th:text="#{presupuesto.papel-guardas}">Papel de
guardas</label>
@ -133,22 +135,8 @@
<div class="ribbon-content mt-4">
<div class="row justify-content-center imagen-container-group">
<div id="cartulina-grafica-cubierta" data-sk-id="3" class="image-container imagen-selector selected">
<img class="image-presupuesto"
src="/assets/images/imprimelibros/presupuestador/cartulina-grafica.png" alt="">
<label for="titulo" class="form-label" th:text="#{presupuesto.cartulina-grafica-cubierta}">
Cartulina gráfica estucada a una cara
</label>
</div>
<div id="estucado-mate-cubierta" data-sk-id="2" class="image-container imagen-selector">
<img class="image-presupuesto"
src="/assets/images/imprimelibros/presupuestador/estucado-mate-cubierta.png" alt="">
<label class="form-label" th:text="#{presupuesto.estucado-mate}">
Estucado Mate
</label>
</div>
<div id="div-papel-cubierta" class="row justify-content-center imagen-container-group">a
</div>
</div>
@ -165,7 +153,7 @@
</div>
<div class="ribbon-content mt-4">
<div class="hstack gap-2 justify-content-center flex-wrap">
<div id="div-gramaje-cubierta" class="hstack gap-2 justify-content-center flex-wrap">
<input type="radio" class="btn-check" id="gramaje-cubierta-240" name="gramaje-cubierta"
data-gramaje="240">
<label class="btn btn-outline-primary material-shadow gramaje-radio" for="gramaje-cubierta-240">

View File

@ -1,14 +1,22 @@
<div id="content-interior">
<div id="content-interior" class="animate-fadeInUpBounce">
<!-- Ribbon Shape -->
<div class="card ribbon-box border shadow-none mb-lg-0 material-shadow">
<div class="card-body">
<div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.tipo-impresion}">Tipo de impresión
<div class="ribbon ribbon-primary ribbon-shape" th:text="#{presupuesto.tipo-encuadernacion}">Tipo de impresión
</div>
<h5 class="fs-14 text-end" th:text="#{presupuesto.tipo-impresion-descripcion}">Elija entre calidad estándar
<h5 class="fs-14 text-end" th:text="#{presupuesto.tipo-encuadernacion-descripcion}">Elija entre calidad estándar
o premium</h5>
</div>
<div class="ribbon-content mt-4">
<div class="alert alert-danger alert-dismissible alert-label-icon rounded-label fade show material-shadow d-none"
role="alert" id="inside-alert">
<i class="ri-error-warning-line label-icon"></i>
<strong th:text="#{presupuesto.errores-title}">Corrija los siguientes errores:</strong>
<ul class="mb-0" id="inside-alert-list">
</ul>
</div>
<div id="div-opciones-color" class="row justify-content-center imagen-container-group">
</div>
@ -74,7 +82,7 @@
</div>
<div class="ribbon-content mt-4">
<div class="hstack gap-2 justify-content-center flex-wrap">
<div id="div-gramaje-interior" class="hstack gap-2 justify-content-center flex-wrap">
<input type="radio" class="btn-check" data-gramaje="70" id="gramaje-70" name="gramaje-interior">
<label class="btn btn-outline-primary material-shadow gramaje-radio" for="gramaje-70">70</label>
@ -106,11 +114,11 @@
</div>
<div class="d-flex justify-content-between align-items-center mt-4 w-100">
<button type="button" class="btn btn-light d-flex align-items-center">
<button id="btn-prev-interior" type="button" class="btn btn-change-tab-interior btn-light d-flex align-items-center">
<i class=" ri-arrow-left-circle-line label-icon align-middle fs-16 me-2"></i>
<span th:text="#{presupuesto.volver-datos-generales}">Volver a datos generales</span>
</button>
<button type="button" class="btn btn-primary d-flex align-items-center">
<button id="btn-next-interior" type="button" class="btn btn-change-tab-interior btn-primary d-flex align-items-center">
<span th:text="#{presupuesto.continuar-cubierta}">Continuar a diseño cubierta</span>
<i class="ri-arrow-right-circle-line fs-16 ms-2"></i>
</button>