mirror of
https://git.imnavajas.es/jjimenez/erp-imprimelibros.git
synced 2026-01-12 16:38:48 +00:00
terminado pagos
This commit is contained in:
@ -11,6 +11,7 @@ import org.springframework.security.access.prepost.PreAuthorize;
|
||||
import org.springframework.stereotype.Controller;
|
||||
import org.springframework.ui.Model;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RequestParam;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.ResponseBody;
|
||||
@ -276,7 +277,8 @@ public class PaymentController {
|
||||
+ messageSource.getMessage("pagos.table.finalizar", null, locale) + "</span> ";
|
||||
|
||||
}
|
||||
if ((pago.getAmountCents() - p.getAmountRefundedCents() > 0) && pago.getStatus() == PaymentTransactionStatus.succeeded) {
|
||||
if ((pago.getAmountCents() - p.getAmountRefundedCents() > 0)
|
||||
&& pago.getStatus() == PaymentTransactionStatus.succeeded) {
|
||||
actions += "<span class=\'badge bg-secondary btn-transfer-refund \' data-dsOrderId=\'"
|
||||
+ p.getGatewayOrderId()
|
||||
+ "\' data-transactionId=\'" + pago.getPayment().getId()
|
||||
@ -309,4 +311,21 @@ public class PaymentController {
|
||||
}
|
||||
}
|
||||
|
||||
@PostMapping(value = "/transfer/refund/{id}", produces = "application/json")
|
||||
public ResponseEntity<Map<String, Object>> refundTransfer(@PathVariable Long id,
|
||||
@RequestParam("amountCents") Long amountCents) {
|
||||
|
||||
Map<String, Object> response;
|
||||
try {
|
||||
paymentService.refundBankTransfer(id, amountCents);
|
||||
response = Map.of("success", true);
|
||||
return ResponseEntity.ok(response);
|
||||
|
||||
} catch (Exception e) {
|
||||
e.printStackTrace();
|
||||
response = Map.of("success", false);
|
||||
response.put("error", e.getMessage());
|
||||
return ResponseEntity.badRequest().body(response);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -312,7 +312,7 @@ public class PaymentService {
|
||||
tx.setCurrency(currency);
|
||||
// tx.setProcessedAt(null); // la dejas nula hasta que se confirme
|
||||
txRepo.save(tx);
|
||||
|
||||
|
||||
return p;
|
||||
}
|
||||
|
||||
@ -358,6 +358,84 @@ public class PaymentService {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Devuelve (total o parcialmente) un pago hecho por transferencia bancaria.
|
||||
* - Solo permite gateway = "bank_transfer".
|
||||
* - Crea un Refund + PaymentTransaction de tipo REFUND.
|
||||
* - Actualiza amountRefundedCents y el estado del Payment.
|
||||
*/
|
||||
@Transactional
|
||||
public Refund refundBankTransfer(Long paymentId, long amountCents) {
|
||||
Payment p = payRepo.findById(paymentId)
|
||||
.orElseThrow(() -> new IllegalArgumentException("Payment no encontrado: " + paymentId));
|
||||
|
||||
if (!"bank_transfer".equals(p.getGateway())) {
|
||||
throw new IllegalStateException("El Payment " + paymentId + " no es de tipo bank_transfer");
|
||||
}
|
||||
|
||||
if (amountCents <= 0) {
|
||||
throw new IllegalArgumentException("El importe de devolución debe ser > 0");
|
||||
}
|
||||
|
||||
// Solo tiene sentido devolver si está capturado o ya parcialmente devuelto
|
||||
if (p.getStatus() != PaymentStatus.captured
|
||||
&& p.getStatus() != PaymentStatus.partially_refunded) {
|
||||
throw new IllegalStateException(
|
||||
"El Payment " + paymentId + " no está capturado; estado actual: " + p.getStatus());
|
||||
}
|
||||
|
||||
long maxRefundable = p.getAmountCapturedCents() - p.getAmountRefundedCents();
|
||||
if (amountCents > maxRefundable) {
|
||||
throw new IllegalStateException(
|
||||
"Importe de devolución supera lo todavía reembolsable. " +
|
||||
"maxRefundable=" + maxRefundable + " requested=" + amountCents);
|
||||
}
|
||||
|
||||
LocalDateTime now = LocalDateTime.now();
|
||||
|
||||
// 1) Crear Refund (para transferencias lo marcamos como SUCCEEDED directamente)
|
||||
Refund refund = new Refund();
|
||||
refund.setPayment(p);
|
||||
refund.setAmountCents(amountCents);
|
||||
// reason usa el valor por defecto (customer_request); si quieres otro, cámbialo
|
||||
// aquí
|
||||
refund.setStatus(RefundStatus.succeeded);
|
||||
refund.setRequestedAt(now);
|
||||
refund.setProcessedAt(now);
|
||||
// requestedByUserId, notes, metadata -> opcionales, déjalos en null si no los
|
||||
// usas
|
||||
refund = refundRepo.save(refund);
|
||||
|
||||
// 2) Crear transacción de tipo REFUND
|
||||
PaymentTransaction tx = new PaymentTransaction();
|
||||
tx.setPayment(p);
|
||||
tx.setType(PaymentTransactionType.REFUND);
|
||||
tx.setStatus(PaymentTransactionStatus.succeeded);
|
||||
tx.setAmountCents(amountCents);
|
||||
tx.setCurrency(p.getCurrency());
|
||||
tx.setProcessedAt(now);
|
||||
// gatewayTransactionId lo dejamos null → el índice UNIQUE permite múltiples
|
||||
// NULL
|
||||
tx = txRepo.save(tx);
|
||||
|
||||
// Vincular el Refund con la transacción
|
||||
refund.setTransaction(tx);
|
||||
refundRepo.save(refund);
|
||||
|
||||
// 3) Actualizar Payment: total devuelto y estado
|
||||
p.setAmountRefundedCents(p.getAmountRefundedCents() + amountCents);
|
||||
|
||||
if (p.getAmountRefundedCents().equals(p.getAmountCapturedCents())) {
|
||||
p.setStatus(PaymentStatus.refunded);
|
||||
} else {
|
||||
p.setStatus(PaymentStatus.partially_refunded);
|
||||
}
|
||||
|
||||
payRepo.save(p);
|
||||
|
||||
return refund;
|
||||
}
|
||||
|
||||
private boolean isRedsysAuthorized(RedsysService.RedsysNotification notif) {
|
||||
if (notif.response == null) {
|
||||
return false;
|
||||
|
||||
@ -3,7 +3,6 @@ checkout.summary=Resumen de la compra
|
||||
checkout.billing-address=Dirección de facturación
|
||||
checkout.payment=Método de pago
|
||||
|
||||
|
||||
checkout.billing-address.title=Seleccione una dirección
|
||||
checkout.billing-address.new-address=Nueva dirección
|
||||
checkout.billing-address.select-placeholder=Buscar en direcciones...
|
||||
@ -15,4 +14,5 @@ checkout.payment.bank-transfer=Transferencia bancaria
|
||||
checkout.error.payment=Error al procesar el pago: el pago ha sido cancelado o rechazado Por favor, inténtelo de nuevo.
|
||||
checkout.success.payment=Pago realizado con éxito. Gracias por su compra.
|
||||
|
||||
checkout.make-payment=Realizar el pago
|
||||
checkout.make-payment=Realizar el pago
|
||||
checkout.authorization-required=Certifico que tengo los derechos para imprimir los archivos incluidos en mi pedido y me hago responsable en caso de reclamación de los mismos
|
||||
@ -18,6 +18,16 @@ $(() => {
|
||||
|
||||
$('#addBillingAddressBtn').on('click', seleccionarDireccionEnvio);
|
||||
|
||||
$('#authorization-required').on('change', function () {
|
||||
if($(this).is(':checked')) {
|
||||
if ($('#direccion-div .direccion-card').length > 0) {
|
||||
$('#btn-checkout').prop('disabled', false);
|
||||
}
|
||||
} else {
|
||||
$('#btn-checkout').prop('disabled', true);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
async function seleccionarDireccionEnvio() {
|
||||
|
||||
@ -133,7 +143,9 @@ $(() => {
|
||||
const html = await response.text();
|
||||
$('#direccion-div').append(html);
|
||||
$('#addBillingAddressBtn').addClass('d-none');
|
||||
$('#btn-checkout').prop('disabled', false);
|
||||
if ($('#authorization-required').is(':checked')) {
|
||||
$('#btn-checkout').prop('disabled', false);
|
||||
}
|
||||
hideLoader();
|
||||
return true;
|
||||
}
|
||||
|
||||
@ -83,7 +83,7 @@ $(() => {
|
||||
buttonsStyling: false,
|
||||
title: window.languageBundle['pagos.refund.title'],
|
||||
text: window.languageBundle['pagos.refund.text'],
|
||||
input: 'number',
|
||||
input: 'text',
|
||||
confirmButtonText: window.languageBundle['app.aceptar'] || 'Seleccionar',
|
||||
cancelButtonText: window.languageBundle['app.cancelar'] || 'Cancelar',
|
||||
customClass: {
|
||||
@ -95,16 +95,17 @@ $(() => {
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
const amountToRefund = parseFloat(result.value);
|
||||
const normalized = result.value.replace(',', '.');
|
||||
const amountToRefund = parseFloat(normalized);
|
||||
if (isNaN(amountToRefund) || amountToRefund <= 0) {
|
||||
showSwal('Error', window.languageBundle['pagos.refund.error.invalid-number'], 'error');
|
||||
return;
|
||||
}
|
||||
if (amountToRefund*100 > maxAmountCents) {
|
||||
if (amountToRefund * 100 > maxAmountCents) {
|
||||
showSwal('Error', window.languageBundle['pagos.refund.error.invalid-number'], 'error');
|
||||
return;
|
||||
}
|
||||
if (amountToRefund*100 > maxAmountCents) {
|
||||
if (amountToRefund * 100 > maxAmountCents) {
|
||||
showSwal('Error', window.languageBundle['pagos.refund.error.invalid-number'], 'error');
|
||||
return;
|
||||
}
|
||||
@ -112,7 +113,7 @@ $(() => {
|
||||
url: '/pagos/redsys/refund/' + transactionId,
|
||||
method: 'POST',
|
||||
data: {
|
||||
amountCents: amountToRefund*100
|
||||
amountCents: amountToRefund * 100
|
||||
}
|
||||
}).then((response) => {
|
||||
response = typeof response === 'string' ? JSON.parse(response) : response;
|
||||
@ -223,6 +224,60 @@ $(() => {
|
||||
});
|
||||
});
|
||||
|
||||
$(document).on('click', '.btn-transfer-refund', function () {
|
||||
const transferId = $(this).data('transactionid');
|
||||
const maxAmountCents = $(this).data('amount');
|
||||
// show swal confirmation with input for amount to refund
|
||||
Swal.fire({
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
title: window.languageBundle['pagos.refund.title'],
|
||||
text: window.languageBundle['pagos.refund.text'],
|
||||
input: 'text',
|
||||
confirmButtonText: window.languageBundle['app.aceptar'] || 'Seleccionar',
|
||||
cancelButtonText: window.languageBundle['app.cancelar'] || 'Cancelar',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-secondary me-2',
|
||||
cancelButton: 'btn btn-light',
|
||||
},
|
||||
inputAttributes: {
|
||||
min: 0,
|
||||
}
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
const normalized = result.value.replace(',', '.');
|
||||
const amountToRefund = parseFloat(normalized);
|
||||
if (isNaN(amountToRefund) || amountToRefund <= 0) {
|
||||
showSwal('Error', window.languageBundle['pagos.refund.error.invalid-number'], 'error');
|
||||
return;
|
||||
}
|
||||
if (amountToRefund * 100 > maxAmountCents) {
|
||||
showSwal('Error', window.languageBundle['pagos.refund.error.invalid-number'], 'error');
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
url: '/pagos/transfer/refund/' + transferId,
|
||||
method: 'POST',
|
||||
data: {
|
||||
amountCents: amountToRefund * 100
|
||||
}
|
||||
}).then((response) => {
|
||||
response = typeof response === 'string' ? JSON.parse(response) : response;
|
||||
if (response.success) {
|
||||
showSwal('Éxito', window.languageBundle['pagos.refund.success'], 'success');
|
||||
$('#pagos-transferencias-datatable').DataTable().draw();
|
||||
} else {
|
||||
showSwal('Error', window.languageBundle['pagos.refund.error.general'], 'error');
|
||||
$('#pagos-transferencias-datatable').DataTable().draw();
|
||||
|
||||
}
|
||||
}).fail(() => {
|
||||
showSwal('Error', window.languageBundle['pagos.refund.error.general'], 'error');
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function showSwal(title, text, icon) {
|
||||
Swal.fire({
|
||||
title: title,
|
||||
|
||||
@ -0,0 +1,94 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Password addon Js File
|
||||
*/
|
||||
|
||||
// password addon
|
||||
Array.from(document.querySelectorAll("form .auth-pass-inputgroup")).forEach(function (item) {
|
||||
Array.from(item.querySelectorAll(".password-addon")).forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function (event) {
|
||||
var passwordInput = item.querySelector(".password-input");
|
||||
if (passwordInput.type === "password") {
|
||||
passwordInput.type = "text";
|
||||
} else {
|
||||
passwordInput.type = "password";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// passowrd match
|
||||
var password = document.getElementById("password-input"),
|
||||
confirm_password = document.getElementById("confirm-password-input");
|
||||
|
||||
function validatePassword() {
|
||||
if (password.value != confirm_password.value) {
|
||||
confirm_password.setCustomValidity("Passwords Don't Match");
|
||||
} else {
|
||||
confirm_password.setCustomValidity("");
|
||||
}
|
||||
}
|
||||
|
||||
//Password validation
|
||||
password.onchange = validatePassword;
|
||||
|
||||
var myInput = document.getElementById("password-input");
|
||||
var letter = document.getElementById("pass-lower");
|
||||
var capital = document.getElementById("pass-upper");
|
||||
var number = document.getElementById("pass-number");
|
||||
var length = document.getElementById("pass-length");
|
||||
|
||||
// When the user clicks on the password field, show the message box
|
||||
myInput.onfocus = function () {
|
||||
document.getElementById("password-contain").style.display = "block";
|
||||
};
|
||||
|
||||
// When the user clicks outside of the password field, hide the password-contain box
|
||||
myInput.onblur = function () {
|
||||
document.getElementById("password-contain").style.display = "none";
|
||||
};
|
||||
|
||||
// When the user starts to type something inside the password field
|
||||
myInput.onkeyup = function () {
|
||||
// Validate lowercase letters
|
||||
var lowerCaseLetters = /[a-z]/g;
|
||||
if (myInput.value.match(lowerCaseLetters)) {
|
||||
letter.classList.remove("invalid");
|
||||
letter.classList.add("valid");
|
||||
} else {
|
||||
letter.classList.remove("valid");
|
||||
letter.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate capital letters
|
||||
var upperCaseLetters = /[A-Z]/g;
|
||||
if (myInput.value.match(upperCaseLetters)) {
|
||||
capital.classList.remove("invalid");
|
||||
capital.classList.add("valid");
|
||||
} else {
|
||||
capital.classList.remove("valid");
|
||||
capital.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate numbers
|
||||
var numbers = /[0-9]/g;
|
||||
if (myInput.value.match(numbers)) {
|
||||
number.classList.remove("invalid");
|
||||
number.classList.add("valid");
|
||||
} else {
|
||||
number.classList.remove("valid");
|
||||
number.classList.add("invalid");
|
||||
}
|
||||
|
||||
// Validate length
|
||||
if (myInput.value.length >= 8) {
|
||||
length.classList.remove("invalid");
|
||||
length.classList.add("valid");
|
||||
} else {
|
||||
length.classList.remove("valid");
|
||||
length.classList.add("invalid");
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
/*
|
||||
Template Name: Velzon - Admin & Dashboard Template
|
||||
Author: Themesbrand
|
||||
Website: https://Themesbrand.com/
|
||||
Contact: Themesbrand@gmail.com
|
||||
File: Password addon Js File
|
||||
*/
|
||||
|
||||
// password addon
|
||||
Array.from(document.querySelectorAll("form .auth-pass-inputgroup")).forEach(function (item) {
|
||||
Array.from(item.querySelectorAll(".password-addon")).forEach(function (subitem) {
|
||||
subitem.addEventListener("click", function (event) {
|
||||
var passwordInput = item.querySelector(".password-input");
|
||||
if (passwordInput.type === "password") {
|
||||
passwordInput.type = "text";
|
||||
} else {
|
||||
passwordInput.type = "password";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -123,7 +123,7 @@
|
||||
|
||||
<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="#{checkout.shipping.order}">Envio
|
||||
<div class="ribbon ribbon-primary ribbon-shape" th:text="#{cart.shipping.order}">Envio
|
||||
del pedido
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -38,9 +38,17 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div
|
||||
class="form-check form-switch form-switch-custom form-switch-presupuesto mb-3 d-row align-items-center mt-2">
|
||||
|
||||
<input type="checkbox" class="form-check-input me-2" id="authorization-required"/>
|
||||
<label for="authorization-required" class="form-label d-flex align-items-center mb-0">
|
||||
<span th:text="#{checkout.authorization-required}" class="me-2"></span>
|
||||
</label>
|
||||
</div>
|
||||
<form th:action="@{/pagos/redsys/crear}" method="post">
|
||||
<input type="hidden" name="amountCents" th:value="${summary.amountCents}" />
|
||||
<input type="hidden" name="method" value="card"/>
|
||||
<input type="hidden" name="method" value="card" />
|
||||
<input type="hidden" name="cartId" th:value="${summary.cartId}" />
|
||||
<button id="btn-checkout" type="submit" class="btn btn-secondary w-100 mt-2"
|
||||
th:text="#{checkout.make-payment}" disabled>Checkout</button>
|
||||
|
||||
@ -0,0 +1,298 @@
|
||||
<html>
|
||||
|
||||
<body>
|
||||
<div th:fragment="offcanvas" th:remove="tag">
|
||||
<div class="offcanvas offcanvas-end border-0" tabindex="-1" id="userProfileCanvasExample">
|
||||
<!--end offcanvas-header-->
|
||||
<div class="offcanvas-body profile-offcanvas p-0">
|
||||
<div class="team-cover">
|
||||
<img src="assets/images/small/img-9.jpg" alt="" class="img-fluid" />
|
||||
</div>
|
||||
<div class="p-1 pb-4 pt-0">
|
||||
<div class="team-settings">
|
||||
<div class="row g-0">
|
||||
<div class="col">
|
||||
<div class="btn nav-btn">
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"
|
||||
aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<div class="user-chat-nav d-flex">
|
||||
<button type="button" class="btn nav-btn favourite-btn active">
|
||||
<i class="ri-star-fill"></i>
|
||||
</button>
|
||||
|
||||
<div class="dropdown">
|
||||
<a class="btn nav-btn" href="javascript:void(0);" data-bs-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<i class="ri-more-2-fill"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i
|
||||
class="ri-inbox-archive-line align-bottom text-muted me-2"></i>Archive</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i
|
||||
class="ri-mic-off-line align-bottom text-muted me-2"></i>Muted</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i
|
||||
class="ri-delete-bin-5-line align-bottom text-muted me-2"></i>Delete</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end col-->
|
||||
</div>
|
||||
<div class="p-3 text-center">
|
||||
<img src="assets/images/users/avatar-2.jpg" alt=""
|
||||
class="avatar-lg img-thumbnail rounded-circle mx-auto profile-img">
|
||||
<div class="mt-3">
|
||||
<h5 class="fs-16 mb-1"><a href="javascript:void(0);" class="link-primary username">Lisa
|
||||
Parker</a>
|
||||
</h5>
|
||||
<p class="text-muted"><i
|
||||
class="ri-checkbox-blank-circle-fill me-1 align-bottom text-success"></i>Online</p>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2 justify-content-center">
|
||||
<button type="button" class="btn avatar-xs p-0" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Message">
|
||||
<span class="avatar-title rounded bg-light text-body">
|
||||
<i class="ri-question-answer-line"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn avatar-xs p-0" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Favourite">
|
||||
<span class="avatar-title rounded bg-light text-body">
|
||||
<i class="ri-star-line"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn avatar-xs p-0" data-bs-toggle="tooltip" data-bs-placement="top"
|
||||
title="Phone">
|
||||
<span class="avatar-title rounded bg-light text-body">
|
||||
<i class="ri-phone-line"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div class="dropdown">
|
||||
<button class="btn avatar-xs p-0" type="button" data-bs-toggle="dropdown"
|
||||
aria-haspopup="true" aria-expanded="false">
|
||||
<span class="avatar-title bg-light text-body rounded">
|
||||
<i class="ri-more-fill"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i
|
||||
class="ri-inbox-archive-line align-bottom text-muted me-2"></i>Archive</a>
|
||||
</li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i
|
||||
class="ri-mic-off-line align-bottom text-muted me-2"></i>Muted</a></li>
|
||||
<li><a class="dropdown-item" href="javascript:void(0);"><i
|
||||
class="ri-delete-bin-5-line align-bottom text-muted me-2"></i>Delete</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-top border-top-dashed p-3">
|
||||
<h5 class="fs-15 mb-3">Personal Details</h5>
|
||||
<div class="mb-3">
|
||||
<p class="text-muted text-uppercase fw-medium fs-12 mb-1">Number</p>
|
||||
<h6>+(256) 2451 8974</h6>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<p class="text-muted text-uppercase fw-medium fs-12 mb-1">Email</p>
|
||||
<h6>lisaparker@gmail.com</h6>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-muted text-uppercase fw-medium fs-12 mb-1">Location</p>
|
||||
<h6 class="mb-0">California, USA</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border-top border-top-dashed p-3">
|
||||
<h5 class="fs-15 mb-3">Attached Files</h5>
|
||||
|
||||
<div class="vstack gap-2">
|
||||
<div class="border rounded border-dashed p-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-light text-secondary rounded fs-20">
|
||||
<i class="ri-folder-zip-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-13 mb-1"><a href="#" class="text-body text-truncate d-block">App
|
||||
pages.zip</a></h5>
|
||||
<div class="text-muted">2.2MB</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="d-flex gap-1">
|
||||
<button type="button" class="btn btn-icon text-muted btn-sm fs-18"><i
|
||||
class="ri-download-2-line"></i></button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon text-muted btn-sm fs-18 dropdown" type="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-share-line align-bottom me-2 text-muted"></i>
|
||||
Share</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-bookmark-line align-bottom me-2 text-muted"></i>
|
||||
Bookmark</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-delete-bin-line align-bottom me-2 text-muted"></i>
|
||||
Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded border-dashed p-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-light text-secondary rounded fs-20">
|
||||
<i class="ri-file-ppt-2-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-13 mb-1"><a href="#" class="text-body text-truncate d-block">Velzon
|
||||
admin.ppt</a></h5>
|
||||
<div class="text-muted">2.4MB</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="d-flex gap-1">
|
||||
<button type="button" class="btn btn-icon text-muted btn-sm fs-18"><i
|
||||
class="ri-download-2-line"></i></button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon text-muted btn-sm fs-18 dropdown" type="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-share-line align-bottom me-2 text-muted"></i>
|
||||
Share</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-bookmark-line align-bottom me-2 text-muted"></i>
|
||||
Bookmark</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-delete-bin-line align-bottom me-2 text-muted"></i>
|
||||
Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded border-dashed p-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-light text-secondary rounded fs-20">
|
||||
<i class="ri-folder-zip-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-13 mb-1"><a href="#"
|
||||
class="text-body text-truncate d-block">Images.zip</a></h5>
|
||||
<div class="text-muted">1.2MB</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="d-flex gap-1">
|
||||
<button type="button" class="btn btn-icon text-muted btn-sm fs-18"><i
|
||||
class="ri-download-2-line"></i></button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon text-muted btn-sm fs-18 dropdown" type="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-share-line align-bottom me-2 text-muted"></i>
|
||||
Share</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-bookmark-line align-bottom me-2 text-muted"></i>
|
||||
Bookmark</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-delete-bin-line align-bottom me-2 text-muted"></i>
|
||||
Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="border rounded border-dashed p-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="flex-shrink-0 me-3">
|
||||
<div class="avatar-xs">
|
||||
<div class="avatar-title bg-light text-secondary rounded fs-20">
|
||||
<i class="ri-image-2-line"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow-1 overflow-hidden">
|
||||
<h5 class="fs-13 mb-1"><a href="#"
|
||||
class="text-body text-truncate d-block">bg-pattern.png</a></h5>
|
||||
<div class="text-muted">1.1MB</div>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ms-2">
|
||||
<div class="d-flex gap-1">
|
||||
<button type="button" class="btn btn-icon text-muted btn-sm fs-18"><i
|
||||
class="ri-download-2-line"></i></button>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-icon text-muted btn-sm fs-18 dropdown" type="button"
|
||||
data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<i class="ri-more-fill"></i>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-share-line align-bottom me-2 text-muted"></i>
|
||||
Share</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-bookmark-line align-bottom me-2 text-muted"></i>
|
||||
Bookmark</a></li>
|
||||
<li><a class="dropdown-item" href="#"><i
|
||||
class="ri-delete-bin-line align-bottom me-2 text-muted"></i>
|
||||
Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-2">
|
||||
<button type="button" class="btn btn-primary">Load more <i
|
||||
class="ri-arrow-right-fill align-bottom ms-1"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--end offcanvas-body-->
|
||||
</div>
|
||||
<!--end offcanvas-->
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
833
src/main/resources/templates/theme/partials/customizer.html
Normal file
833
src/main/resources/templates/theme/partials/customizer.html
Normal file
@ -0,0 +1,833 @@
|
||||
<html>
|
||||
|
||||
<body>
|
||||
<div th:fragment="customizer" th:remove="tag">
|
||||
<!--start back-to-top-->
|
||||
<button onclick="topFunction()" class="btn btn-danger btn-icon" id="back-to-top">
|
||||
<i class="ri-arrow-up-line"></i>
|
||||
</button>
|
||||
<!--end back-to-top-->
|
||||
|
||||
<!--preloader-->
|
||||
<div id="preloader">
|
||||
<div id="status">
|
||||
<div class="spinner-border text-primary avatar-sm" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="customizer-setting d-none d-md-block">
|
||||
<div class="btn-info btn-rounded shadow-lg btn btn-icon btn-lg p-2" data-bs-toggle="offcanvas"
|
||||
data-bs-target="#theme-settings-offcanvas" aria-controls="theme-settings-offcanvas">
|
||||
<i class='mdi mdi-spin mdi-cog-outline fs-22'></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Theme Settings -->
|
||||
<div class="offcanvas offcanvas-end border-0" tabindex="-1" id="theme-settings-offcanvas">
|
||||
<div class="d-flex align-items-center bg-primary bg-gradient p-3 offcanvas-header">
|
||||
<h5 class="m-0 me-2 text-white">Theme Customizer</h5>
|
||||
|
||||
<button type="button" class="btn-close btn-close-white ms-auto" id="customizerclose-btn"
|
||||
data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body p-0">
|
||||
<div data-simplebar class="h-100">
|
||||
<div class="p-4">
|
||||
<h6 class="mb-0 fw-semibold text-uppercase">Layout</h6>
|
||||
<p class="text-muted">Choose your layout</p>
|
||||
|
||||
<div class="row gy-3">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout01" name="data-layout" type="radio" value="vertical"
|
||||
class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout01">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Vertical</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout02" name="data-layout" type="radio" value="horizontal"
|
||||
class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout02">
|
||||
<span class="d-flex h-100 flex-column gap-1">
|
||||
<span class="bg-light d-flex p-1 gap-1 align-items-center">
|
||||
<span class="d-block p-1 bg-soft-primary rounded me-1"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-soft-primary ms-auto"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-soft-primary"></span>
|
||||
</span>
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Horizontal</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout03" name="data-layout" type="radio" value="twocolumn"
|
||||
class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout03">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1">
|
||||
<span class="d-block p-1 bg-soft-primary mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Two Column</h5>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input id="customizer-layout04" name="data-layout" type="radio" value="semibox"
|
||||
class="form-check-input">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="customizer-layout04">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0 p-1">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column pt-1 pe-2">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Semi Box</h5>
|
||||
</div>
|
||||
<!-- end col -->
|
||||
</div>
|
||||
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Color Scheme</h6>
|
||||
<p class="text-muted">Choose Light or Dark Scheme.</p>
|
||||
|
||||
<div class="colorscheme-cardradio">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-mode"
|
||||
id="layout-mode-light" value="light">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="layout-mode-light">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Light</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio dark">
|
||||
<input class="form-check-input" type="radio" name="data-layout-mode"
|
||||
id="layout-mode-dark" value="dark">
|
||||
<label class="form-check-label p-0 avatar-md w-100 bg-dark"
|
||||
for="layout-mode-dark">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-soft-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-soft-light d-block p-1"></span>
|
||||
<span class="bg-soft-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-visibility">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Visibility</h6>
|
||||
<p class="text-muted">Choose show or Hidden sidebar.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-visibility"
|
||||
id="sidebar-visibility-show" value="show">
|
||||
<label class="form-check-label p-0 avatar-md w-100"
|
||||
for="sidebar-visibility-show">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0 p-1">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column pt-1 pe-2">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Show</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-visibility"
|
||||
id="sidebar-visibility-hidden" value="hidden">
|
||||
<label class="form-check-label p-0 avatar-md w-100 px-2"
|
||||
for="sidebar-visibility-hidden">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column pt-1 px-2">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Hidden</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="layout-width">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Layout Width</h6>
|
||||
<p class="text-muted">Choose Fluid or Boxed layout.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-width"
|
||||
id="layout-width-fluid" value="fluid">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="layout-width-fluid">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Fluid</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-width"
|
||||
id="layout-width-boxed" value="boxed">
|
||||
<label class="form-check-label p-0 avatar-md w-100 px-2"
|
||||
for="layout-width-boxed">
|
||||
<span class="d-flex gap-1 h-100 border-start border-end">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Boxed</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="layout-position">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Layout Position</h6>
|
||||
<p class="text-muted">Choose Fixed or Scrollable Layout Position.</p>
|
||||
|
||||
<div class="btn-group radio" role="group">
|
||||
<input type="radio" class="btn-check" name="data-layout-position"
|
||||
id="layout-position-fixed" value="fixed">
|
||||
<label class="btn btn-light w-sm" for="layout-position-fixed">Fixed</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="data-layout-position"
|
||||
id="layout-position-scrollable" value="scrollable">
|
||||
<label class="btn btn-light w-sm ms-0"
|
||||
for="layout-position-scrollable">Scrollable</label>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Topbar Color</h6>
|
||||
<p class="text-muted">Choose Light or Dark Topbar Color.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-topbar"
|
||||
id="topbar-color-light" value="light">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-light">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Light</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-topbar"
|
||||
id="topbar-color-dark" value="dark">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="topbar-color-dark">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-primary d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-size">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Size</h6>
|
||||
<p class="text-muted">Choose a size of Sidebar.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size"
|
||||
id="sidebar-size-default" value="lg">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-default">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Default</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size"
|
||||
id="sidebar-size-compact" value="md">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-compact">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Compact</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size"
|
||||
id="sidebar-size-small" value="sm">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-size-small">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1">
|
||||
<span class="d-block p-1 bg-soft-primary mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Small (Icon View)</h5>
|
||||
</div>
|
||||
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-size"
|
||||
id="sidebar-size-small-hover" value="sm-hover">
|
||||
<label class="form-check-label p-0 avatar-md w-100"
|
||||
for="sidebar-size-small-hover">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1">
|
||||
<span class="d-block p-1 bg-soft-primary mb-2"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Small Hover View</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-view">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar View</h6>
|
||||
<p class="text-muted">Choose Default or Detached Sidebar view.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-style"
|
||||
id="sidebar-view-default" value="default">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-default">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Default</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-layout-style"
|
||||
id="sidebar-view-detached" value="detached">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-view-detached">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-flex p-1 gap-1 align-items-center px-2">
|
||||
<span class="d-block p-1 bg-soft-primary rounded me-1"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-soft-primary ms-auto"></span>
|
||||
<span class="d-block p-1 pb-0 px-2 bg-soft-primary"></span>
|
||||
</span>
|
||||
<span class="d-flex gap-1 h-100 p-1 px-2">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="bg-light d-block p-1 mt-auto px-2"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Detached</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar-color">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Color</h6>
|
||||
<p class="text-muted">Choose a color of Sidebar.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseBgGradient.show">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar"
|
||||
id="sidebar-color-light" value="light">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-light">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span
|
||||
class="bg-white border-end d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Light</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio" data-bs-toggle="collapse"
|
||||
data-bs-target="#collapseBgGradient.show">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar"
|
||||
id="sidebar-color-dark" value="dark">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="sidebar-color-dark">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-primary d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Dark</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<button class="btn btn-link avatar-md w-100 p-0 overflow-hidden border collapsed"
|
||||
type="button" data-bs-toggle="collapse" data-bs-target="#collapseBgGradient"
|
||||
aria-expanded="false" aria-controls="collapseBgGradient">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-vertical-gradient d-flex h-100 flex-column gap-1 p-1">
|
||||
<span class="d-block p-1 px-2 bg-soft-light rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-light"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<h5 class="fs-13 text-center mt-2">Gradient</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end row -->
|
||||
|
||||
<div class="collapse" id="collapseBgGradient">
|
||||
<div class="d-flex gap-2 flex-wrap img-switch p-2 px-3 bg-light rounded">
|
||||
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar"
|
||||
id="sidebar-color-gradient" value="gradient">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle"
|
||||
for="sidebar-color-gradient">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar"
|
||||
id="sidebar-color-gradient-2" value="gradient-2">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle"
|
||||
for="sidebar-color-gradient-2">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient-2"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar"
|
||||
id="sidebar-color-gradient-3" value="gradient-3">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle"
|
||||
for="sidebar-color-gradient-3">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient-3"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar"
|
||||
id="sidebar-color-gradient-4" value="gradient-4">
|
||||
<label class="form-check-label p-0 avatar-xs rounded-circle"
|
||||
for="sidebar-color-gradient-4">
|
||||
<span class="avatar-title rounded-circle bg-vertical-gradient-4"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sidebar-img">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Sidebar Images</h6>
|
||||
<p class="text-muted">Choose a image of Sidebar.</p>
|
||||
|
||||
<div class="d-flex gap-2 flex-wrap img-switch">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image"
|
||||
id="sidebarimg-none" value="none">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-none">
|
||||
<span
|
||||
class="avatar-md w-auto bg-light d-flex align-items-center justify-content-center">
|
||||
<i class="ri-close-fill fs-20"></i>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image"
|
||||
id="sidebarimg-01" value="img-1">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-01">
|
||||
<img src="assets/images/sidebar/img-1.jpg" alt=""
|
||||
class="avatar-md w-auto object-cover">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image"
|
||||
id="sidebarimg-02" value="img-2">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-02">
|
||||
<img src="assets/images/sidebar/img-2.jpg" alt=""
|
||||
class="avatar-md w-auto object-cover">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image"
|
||||
id="sidebarimg-03" value="img-3">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-03">
|
||||
<img src="assets/images/sidebar/img-3.jpg" alt=""
|
||||
class="avatar-md w-auto object-cover">
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-sidebar-image"
|
||||
id="sidebarimg-04" value="img-4">
|
||||
<label class="form-check-label p-0 avatar-sm h-auto" for="sidebarimg-04">
|
||||
<img src="assets/images/sidebar/img-4.jpg" alt=""
|
||||
class="avatar-md w-auto object-cover">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="preloader-menu">
|
||||
<h6 class="mt-4 mb-0 fw-semibold text-uppercase">Preloader</h6>
|
||||
<p class="text-muted">Choose a preloader.</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-preloader"
|
||||
id="preloader-view-custom" value="enable">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-custom">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<!-- <div id="preloader"> -->
|
||||
<div id="status" class="d-flex align-items-center justify-content-center">
|
||||
<div class="spinner-border text-primary avatar-xxs m-auto"
|
||||
role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Enable</h5>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="form-check sidebar-setting card-radio">
|
||||
<input class="form-check-input" type="radio" name="data-preloader"
|
||||
id="preloader-view-none" value="disable">
|
||||
<label class="form-check-label p-0 avatar-md w-100" for="preloader-view-none">
|
||||
<span class="d-flex gap-1 h-100">
|
||||
<span class="flex-shrink-0">
|
||||
<span class="bg-light d-flex h-100 flex-column gap-1 p-1">
|
||||
<span
|
||||
class="d-block p-1 px-2 bg-soft-primary rounded mb-2"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
<span class="d-block p-1 px-2 pb-0 bg-soft-primary"></span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="flex-grow-1">
|
||||
<span class="d-flex h-100 flex-column">
|
||||
<span class="bg-light d-block p-1"></span>
|
||||
<span class="bg-light d-block p-1 mt-auto"></span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<h5 class="fs-13 text-center mt-2">Disable</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end preloader-menu -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="offcanvas-footer border-top p-3 text-center">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button type="button" class="btn btn-light w-100" id="reset-layout">Reset</button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<a href="https://1.envato.market/velzon-admin" target="_blank" class="btn btn-primary w-100">Buy
|
||||
Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
22
src/main/resources/templates/theme/partials/footer.html
Normal file
22
src/main/resources/templates/theme/partials/footer.html
Normal file
@ -0,0 +1,22 @@
|
||||
<html>
|
||||
|
||||
<body>
|
||||
<div th:fragment="footer" th:remove="tag">
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<script>document.write(new Date().getFullYear())</script> © Velzon.
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="text-sm-end d-none d-sm-block">
|
||||
Design & Develop by Themesbrand
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
16
src/main/resources/templates/theme/partials/head-css.html
Normal file
16
src/main/resources/templates/theme/partials/head-css.html
Normal file
@ -0,0 +1,16 @@
|
||||
<th:block th:fragment="head-css">
|
||||
|
||||
<!-- Layout config Js -->
|
||||
<script src="/assets/js/layout.js"></script>
|
||||
<!-- Bootstrap Css -->
|
||||
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
|
||||
<!-- Icons Css -->
|
||||
<link href="/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
||||
<!-- App Css-->
|
||||
<link href="/assets/css/app.min.css" rel="stylesheet" type="text/css" />
|
||||
<!-- custom Css-->
|
||||
<link href="/assets/css/custom.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<!-- Imprimelibros overrides -->
|
||||
<link href="/assets/css/imprimelibros.css" rel="stylesheet" type="text/css" />
|
||||
</div>
|
||||
25
src/main/resources/templates/theme/partials/page-title.html
Normal file
25
src/main/resources/templates/theme/partials/page-title.html
Normal file
@ -0,0 +1,25 @@
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
|
||||
<body>
|
||||
<div th:fragment="page-title(title,pagetitle)" th:remove="tag">
|
||||
<!-- start page title -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-sm-0" th:text="${title}"></h4>
|
||||
|
||||
<div class="page-title-right">
|
||||
<ol class="breadcrumb m-0">
|
||||
<li class="breadcrumb-item"><a href="javascript: void(0);" th:text="${pagetitle}"></a></li>
|
||||
<li class="breadcrumb-item active" th:text="${title}"></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end page title -->
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1290
src/main/resources/templates/theme/partials/sidebar.html
Normal file
1290
src/main/resources/templates/theme/partials/sidebar.html
Normal file
File diff suppressed because it is too large
Load Diff
15
src/main/resources/templates/theme/partials/title-meta.html
Normal file
15
src/main/resources/templates/theme/partials/title-meta.html
Normal file
@ -0,0 +1,15 @@
|
||||
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
|
||||
|
||||
<body>
|
||||
<div th:fragment="title-meta(title)" th:remove="tag">
|
||||
<meta charset="utf-8" />
|
||||
<title th:text="${title} + ' | Velzon - Admin & Dashboard Template'"></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
|
||||
<meta content="Themesbrand" name="author" />
|
||||
<!-- App favicon -->
|
||||
<link rel="shortcut icon" href="/assets/images/favicon.ico">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
740
src/main/resources/templates/theme/partials/topbar.html
Normal file
740
src/main/resources/templates/theme/partials/topbar.html
Normal file
@ -0,0 +1,740 @@
|
||||
<html>
|
||||
|
||||
<body>
|
||||
<div th:fragment="topbar" th:remove="tag">
|
||||
<header id="page-topbar">
|
||||
<div class="layout-width">
|
||||
<div class="navbar-header">
|
||||
<div class="d-flex">
|
||||
<!-- LOGO -->
|
||||
<div class="navbar-brand-box horizontal-logo">
|
||||
<a href="/" class="logo logo-dark">
|
||||
<span class="logo-sm">
|
||||
<img src="/assets/images/logo-sm.png" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img src="/assets/images/logo-dark.png" alt="" height="17">
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a href="/" class="logo logo-light">
|
||||
<span class="logo-sm">
|
||||
<img src="/assets/images/logo-sm.png" alt="" height="22">
|
||||
</span>
|
||||
<span class="logo-lg">
|
||||
<img src="/assets/images/logo-light.png" alt="" height="17">
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-sm px-3 fs-16 header-item vertical-menu-btn topnav-hamburger" id="topnav-hamburger-icon">
|
||||
<span class="hamburger-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- App Search-->
|
||||
<form class="app-search d-none d-md-block">
|
||||
<div class="position-relative">
|
||||
<input type="text" class="form-control" placeholder="Search..." autocomplete="off" id="search-options" value="">
|
||||
<span class="mdi mdi-magnify search-widget-icon"></span>
|
||||
<span class="mdi mdi-close-circle search-widget-icon search-widget-icon-close d-none" id="search-close-options"></span>
|
||||
</div>
|
||||
<div class="dropdown-menu dropdown-menu-lg" id="search-dropdown">
|
||||
<div data-simplebar style="max-height: 320px;">
|
||||
<!-- item-->
|
||||
<div class="dropdown-header">
|
||||
<h6 class="text-overflow text-muted mb-0 text-uppercase">Recent Searches</h6>
|
||||
</div>
|
||||
|
||||
<div class="dropdown-item bg-transparent text-wrap">
|
||||
<a href="index" class="btn btn-soft-secondary btn-sm btn-rounded">how to setup <i class="mdi mdi-magnify ms-1"></i></a>
|
||||
<a href="index" class="btn btn-soft-secondary btn-sm btn-rounded">buttons <i class="mdi mdi-magnify ms-1"></i></a>
|
||||
</div>
|
||||
<!-- item-->
|
||||
<div class="dropdown-header mt-2">
|
||||
<h6 class="text-overflow text-muted mb-1 text-uppercase">Pages</h6>
|
||||
</div>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||||
<i class="ri-bubble-chart-line align-middle fs-18 text-muted me-2"></i>
|
||||
<span>Analytics Dashboard</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||||
<i class="ri-lifebuoy-line align-middle fs-18 text-muted me-2"></i>
|
||||
<span>Help Center</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item">
|
||||
<i class="ri-user-settings-line align-middle fs-18 text-muted me-2"></i>
|
||||
<span>My account settings</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<div class="dropdown-header mt-2">
|
||||
<h6 class="text-overflow text-muted mb-2 text-uppercase">Members</h6>
|
||||
</div>
|
||||
|
||||
<div class="notification-list">
|
||||
<!-- item -->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item py-2">
|
||||
<div class="d-flex">
|
||||
<img src="/assets/images/users/avatar-2.jpg" class="me-3 rounded-circle avatar-xs" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<h6 class="m-0">Angela Bernier</h6>
|
||||
<span class="fs-11 mb-0 text-muted">Manager</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- item -->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item py-2">
|
||||
<div class="d-flex">
|
||||
<img src="/assets/images/users/avatar-3.jpg" class="me-3 rounded-circle avatar-xs" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<h6 class="m-0">David Grasso</h6>
|
||||
<span class="fs-11 mb-0 text-muted">Web Designer</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<!-- item -->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item py-2">
|
||||
<div class="d-flex">
|
||||
<img src="/assets/images/users/avatar-5.jpg" class="me-3 rounded-circle avatar-xs" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<h6 class="m-0">Mike Bunch</h6>
|
||||
<span class="fs-11 mb-0 text-muted">React Developer</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center pt-3 pb-1">
|
||||
<a href="/pages-search-results" class="btn btn-primary btn-sm">View All Results <i class="ri-arrow-right-line ms-1"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
|
||||
<div class="dropdown d-md-none topbar-head-dropdown header-item">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle" id="page-header-search-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class="bx bx-search fs-22"></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0" aria-labelledby="page-header-search-dropdown">
|
||||
<form class="p-3">
|
||||
<div class="form-group m-0">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search ..." aria-label="Recipient's username">
|
||||
<button class="btn btn-primary" type="submit"><i class="mdi mdi-magnify"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown ms-1 topbar-head-dropdown header-item">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<img id="header-lang-img" src="/assets/images/flags/us.svg" alt="Header Language" height="20" class="rounded">
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item language py-2" data-lang="en" title="English">
|
||||
<img src="/assets/images/flags/us.svg" alt="user-image" class="me-2 rounded" height="18">
|
||||
<span class="align-middle">English</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="sp" title="Spanish">
|
||||
<img src="/assets/images/flags/spain.svg" alt="user-image" class="me-2 rounded" height="18">
|
||||
<span class="align-middle">Española</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="gr" title="German">
|
||||
<img src="/assets/images/flags/germany.svg" alt="user-image" class="me-2 rounded" height="18"> <span class="align-middle">Deutsche</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="it" title="Italian">
|
||||
<img src="/assets/images/flags/italy.svg" alt="user-image" class="me-2 rounded" height="18">
|
||||
<span class="align-middle">Italiana</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ru" title="Russian">
|
||||
<img src="/assets/images/flags/russia.svg" alt="user-image" class="me-2 rounded" height="18">
|
||||
<span class="align-middle">русский</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ch" title="Chinese">
|
||||
<img src="/assets/images/flags/china.svg" alt="user-image" class="me-2 rounded" height="18">
|
||||
<span class="align-middle">中国人</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="fr" title="French">
|
||||
<img src="/assets/images/flags/french.svg" alt="user-image" class="me-2 rounded" height="18">
|
||||
<span class="align-middle">français</span>
|
||||
</a>
|
||||
|
||||
<!-- item-->
|
||||
<a href="javascript:void(0);" class="dropdown-item notify-item language" data-lang="ar" title="Arabic">
|
||||
<img src="/assets/images/flags/ae.svg" alt="user-image" class="me-2 rounded" height="18">
|
||||
<span class="align-middle">Arabic</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown topbar-head-dropdown ms-1 header-item">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<i class='bx bx-category-alt fs-22'></i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-lg p-0 dropdown-menu-end">
|
||||
<div class="p-3 border-top-0 border-start-0 border-end-0 border-dashed border">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h6 class="m-0 fw-semibold fs-15"> Web Apps </h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#!" class="btn btn-sm btn-soft-info"> View All Apps
|
||||
<i class="ri-arrow-right-s-line align-middle"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-2">
|
||||
<div class="row g-0">
|
||||
<div class="col">
|
||||
<a class="dropdown-icon-item" href="#!">
|
||||
<img src="/assets/images/brands/github.png" alt="Github">
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="dropdown-icon-item" href="#!">
|
||||
<img src="/assets/images/brands/bitbucket.png" alt="bitbucket">
|
||||
<span>Bitbucket</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="dropdown-icon-item" href="#!">
|
||||
<img src="/assets/images/brands/dribbble.png" alt="dribbble">
|
||||
<span>Dribbble</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-0">
|
||||
<div class="col">
|
||||
<a class="dropdown-icon-item" href="#!">
|
||||
<img src="/assets/images/brands/dropbox.png" alt="dropbox">
|
||||
<span>Dropbox</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="dropdown-icon-item" href="#!">
|
||||
<img src="/assets/images/brands/mail_chimp.png" alt="mail_chimp">
|
||||
<span>Mail Chimp</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col">
|
||||
<a class="dropdown-icon-item" href="#!">
|
||||
<img src="/assets/images/brands/slack.png" alt="slack">
|
||||
<span>Slack</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown topbar-head-dropdown ms-1 header-item">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle" id="page-header-cart-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
|
||||
<i class='bx bx-shopping-bag fs-22'></i>
|
||||
<span class="position-absolute topbar-badge cartitem-badge fs-10 translate-middle badge rounded-pill bg-info">5</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-end p-0 dropdown-menu-cart" aria-labelledby="page-header-cart-dropdown">
|
||||
<div class="p-3 border-top-0 border-start-0 border-end-0 border-dashed border">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h6 class="m-0 fs-16 fw-semibold"> My Cart</h6>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="badge badge-soft-warning fs-13"><span class="cartitem-badge">7</span>
|
||||
items</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-simplebar style="max-height: 300px;">
|
||||
<div class="p-2">
|
||||
<div class="text-center empty-cart" id="empty-cart">
|
||||
<div class="avatar-md mx-auto my-3">
|
||||
<div class="avatar-title bg-soft-info text-info fs-36 rounded-circle">
|
||||
<i class='bx bx-cart'></i>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="mb-3">Your Cart is Empty!</h5>
|
||||
<a href="/apps-ecommerce-products" class="btn btn-success w-md mb-3">Shop Now</a>
|
||||
</div>
|
||||
<div class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/products/img-1.png" class="me-3 rounded-circle avatar-sm p-2 bg-light" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<h6 class="mt-0 mb-1 fs-14">
|
||||
<a href="/apps-ecommerce-product-details" class="text-reset">Branded
|
||||
T-Shirts</a>
|
||||
</h6>
|
||||
<p class="mb-0 fs-12 text-muted">
|
||||
Quantity: <span>10 x $32</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<h5 class="m-0 fw-normal">$<span class="cart-item-price">320</span></h5>
|
||||
</div>
|
||||
<div class="ps-2">
|
||||
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"><i class="ri-close-fill fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/products/img-2.png" class="me-3 rounded-circle avatar-sm p-2 bg-light" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<h6 class="mt-0 mb-1 fs-14">
|
||||
<a href="/apps-ecommerce-product-details" class="text-reset">Bentwood Chair</a>
|
||||
</h6>
|
||||
<p class="mb-0 fs-12 text-muted">
|
||||
Quantity: <span>5 x $18</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<h5 class="m-0 fw-normal">$<span class="cart-item-price">89</span></h5>
|
||||
</div>
|
||||
<div class="ps-2">
|
||||
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"><i class="ri-close-fill fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/products/img-3.png" class="me-3 rounded-circle avatar-sm p-2 bg-light" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<h6 class="mt-0 mb-1 fs-14">
|
||||
<a href="/apps-ecommerce-product-details" class="text-reset">
|
||||
Borosil Paper Cup</a>
|
||||
</h6>
|
||||
<p class="mb-0 fs-12 text-muted">
|
||||
Quantity: <span>3 x $250</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<h5 class="m-0 fw-normal">$<span class="cart-item-price">750</span></h5>
|
||||
</div>
|
||||
<div class="ps-2">
|
||||
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"><i class="ri-close-fill fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/products/img-6.png" class="me-3 rounded-circle avatar-sm p-2 bg-light" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<h6 class="mt-0 mb-1 fs-14">
|
||||
<a href="/apps-ecommerce-product-details" class="text-reset">Gray
|
||||
Styled T-Shirt</a>
|
||||
</h6>
|
||||
<p class="mb-0 fs-12 text-muted">
|
||||
Quantity: <span>1 x $1250</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<h5 class="m-0 fw-normal">$ <span class="cart-item-price">1250</span></h5>
|
||||
</div>
|
||||
<div class="ps-2">
|
||||
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"><i class="ri-close-fill fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-block dropdown-item dropdown-item-cart text-wrap px-3 py-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/assets/images/products/img-5.png" class="me-3 rounded-circle avatar-sm p-2 bg-light" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<h6 class="mt-0 mb-1 fs-14">
|
||||
<a href="/apps-ecommerce-product-details" class="text-reset">Stillbird Helmet</a>
|
||||
</h6>
|
||||
<p class="mb-0 fs-12 text-muted">
|
||||
Quantity: <span>2 x $495</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2">
|
||||
<h5 class="m-0 fw-normal">$<span class="cart-item-price">990</span></h5>
|
||||
</div>
|
||||
<div class="ps-2">
|
||||
<button type="button" class="btn btn-icon btn-sm btn-ghost-secondary remove-item-btn"><i class="ri-close-fill fs-16"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 border-bottom-0 border-start-0 border-end-0 border-dashed border" id="checkout-elem">
|
||||
<div class="d-flex justify-content-between align-items-center pb-3">
|
||||
<h5 class="m-0 text-muted">Total:</h5>
|
||||
<div class="px-2">
|
||||
<h5 class="m-0" id="cart-item-total">$1258.58</h5>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/apps-ecommerce-checkout" class="btn btn-success text-center w-100">
|
||||
Checkout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ms-1 header-item d-none d-sm-flex">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle" data-toggle="fullscreen">
|
||||
<i class='bx bx-fullscreen fs-22'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="ms-1 header-item d-none d-sm-flex">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle light-dark-mode">
|
||||
<i class='bx bx-moon fs-22'></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="dropdown topbar-head-dropdown ms-1 header-item" id="notificationDropdown">
|
||||
<button type="button" class="btn btn-icon btn-topbar btn-ghost-secondary rounded-circle" id="page-header-notifications-dropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
|
||||
<i class='bx bx-bell fs-22'></i>
|
||||
<span class="position-absolute topbar-badge fs-10 translate-middle badge rounded-pill bg-danger">3<span class="visually-hidden">unread messages</span></span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0" aria-labelledby="page-header-notifications-dropdown">
|
||||
|
||||
<div class="dropdown-head bg-primary bg-pattern rounded-top">
|
||||
<div class="p-3">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<h6 class="m-0 fs-16 fw-semibold text-white"> Notifications </h6>
|
||||
</div>
|
||||
<div class="col-auto dropdown-tabs">
|
||||
<span class="badge badge-soft-light fs-13"> 4 New</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 pt-2">
|
||||
<ul class="nav nav-tabs dropdown-tabs nav-tabs-custom" data-dropdown-tabs="true" id="notificationItemsTab" role="tablist">
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link active" data-bs-toggle="tab" href="#all-noti-tab" role="tab" aria-selected="true">
|
||||
All (4)
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#messages-tab" role="tab" aria-selected="false">
|
||||
Messages
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item waves-effect waves-light">
|
||||
<a class="nav-link" data-bs-toggle="tab" href="#alerts-tab" role="tab" aria-selected="false">
|
||||
Alerts
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-content position-relative" id="notificationItemsTabContent">
|
||||
<div class="tab-pane fade show active py-2 ps-2" id="all-noti-tab" role="tabpanel">
|
||||
<div data-simplebar style="max-height: 300px;" class="pe-2">
|
||||
<div class="text-reset notification-item d-block dropdown-item position-relative">
|
||||
<div class="d-flex">
|
||||
<div class="avatar-xs me-3">
|
||||
<span class="avatar-title bg-soft-info text-info rounded-circle fs-16">
|
||||
<i class="bx bx-badge-check"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-2 lh-base">Your <b>Elite</b> author Graphic
|
||||
Optimization <span class="text-secondary">reward</span> is
|
||||
ready!
|
||||
</h6>
|
||||
</a>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> Just 30 sec ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="all-notification-check01">
|
||||
<label class="form-check-label" for="all-notification-check01"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-reset notification-item d-block dropdown-item position-relative">
|
||||
<div class="d-flex">
|
||||
<img src="/assets/images/users/avatar-2.jpg" class="me-3 rounded-circle avatar-xs" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Angela Bernier</h6>
|
||||
</a>
|
||||
<div class="fs-13 text-muted">
|
||||
<p class="mb-1">Answered to your comment on the cash flow forecast's
|
||||
graph 🔔.</p>
|
||||
</div>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> 48 min ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="all-notification-check02">
|
||||
<label class="form-check-label" for="all-notification-check02"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-reset notification-item d-block dropdown-item position-relative">
|
||||
<div class="d-flex">
|
||||
<div class="avatar-xs me-3">
|
||||
<span class="avatar-title bg-soft-danger text-danger rounded-circle fs-16">
|
||||
<i class='bx bx-message-square-dots'></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-2 fs-13 lh-base">You have received <b class="text-success">20</b> new messages in the conversation
|
||||
</h6>
|
||||
</a>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> 2 hrs ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="all-notification-check03">
|
||||
<label class="form-check-label" for="all-notification-check03"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-reset notification-item d-block dropdown-item position-relative">
|
||||
<div class="d-flex">
|
||||
<img src="/assets/images/users/avatar-8.jpg" class="me-3 rounded-circle avatar-xs" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Maureen Gibson</h6>
|
||||
</a>
|
||||
<div class="fs-13 text-muted">
|
||||
<p class="mb-1">We talked about a project on linkedin.</p>
|
||||
</div>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> 4 hrs ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="all-notification-check04">
|
||||
<label class="form-check-label" for="all-notification-check04"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-3 text-center view-all">
|
||||
<button type="button" class="btn btn-soft-success waves-effect waves-light">View
|
||||
All Notifications <i class="ri-arrow-right-line align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade py-2 ps-2" id="messages-tab" role="tabpanel" aria-labelledby="messages-tab">
|
||||
<div data-simplebar style="max-height: 300px;" class="pe-2">
|
||||
<div class="text-reset notification-item d-block dropdown-item">
|
||||
<div class="d-flex">
|
||||
<img src="/assets/images/users/avatar-3.jpg" class="me-3 rounded-circle avatar-xs" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-1 fs-13 fw-semibold">James Lemire</h6>
|
||||
</a>
|
||||
<div class="fs-13 text-muted">
|
||||
<p class="mb-1">We talked about a project on linkedin.</p>
|
||||
</div>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> 30 min ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="messages-notification-check01">
|
||||
<label class="form-check-label" for="messages-notification-check01"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-reset notification-item d-block dropdown-item">
|
||||
<div class="d-flex">
|
||||
<img src="/assets/images/users/avatar-2.jpg" class="me-3 rounded-circle avatar-xs" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Angela Bernier</h6>
|
||||
</a>
|
||||
<div class="fs-13 text-muted">
|
||||
<p class="mb-1">Answered to your comment on the cash flow forecast's
|
||||
graph 🔔.</p>
|
||||
</div>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> 2 hrs ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="messages-notification-check02">
|
||||
<label class="form-check-label" for="messages-notification-check02"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-reset notification-item d-block dropdown-item">
|
||||
<div class="d-flex">
|
||||
<img src="/assets/images/users/avatar-6.jpg" class="me-3 rounded-circle avatar-xs" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Kenneth Brown</h6>
|
||||
</a>
|
||||
<div class="fs-13 text-muted">
|
||||
<p class="mb-1">Mentionned you in his comment on 📃 invoice #12501.
|
||||
</p>
|
||||
</div>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> 10 hrs ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="messages-notification-check03">
|
||||
<label class="form-check-label" for="messages-notification-check03"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-reset notification-item d-block dropdown-item">
|
||||
<div class="d-flex">
|
||||
<img src="/assets/images/users/avatar-8.jpg" class="me-3 rounded-circle avatar-xs" alt="user-pic">
|
||||
<div class="flex-1">
|
||||
<a href="#!" class="stretched-link">
|
||||
<h6 class="mt-0 mb-1 fs-13 fw-semibold">Maureen Gibson</h6>
|
||||
</a>
|
||||
<div class="fs-13 text-muted">
|
||||
<p class="mb-1">We talked about a project on linkedin.</p>
|
||||
</div>
|
||||
<p class="mb-0 fs-11 fw-medium text-uppercase text-muted">
|
||||
<span><i class="mdi mdi-clock-outline"></i> 3 days ago</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="px-2 fs-15">
|
||||
<div class="form-check notification-check">
|
||||
<input class="form-check-input" type="checkbox" value="" id="messages-notification-check04">
|
||||
<label class="form-check-label" for="messages-notification-check04"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-3 text-center view-all">
|
||||
<button type="button" class="btn btn-soft-success waves-effect waves-light">View
|
||||
All Messages <i class="ri-arrow-right-line align-middle"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade p-4" id="alerts-tab" role="tabpanel" aria-labelledby="alerts-tab"></div>
|
||||
|
||||
<div class="notification-actions" id="notification-actions">
|
||||
<div class="d-flex text-muted justify-content-center">
|
||||
Select <div id="select-content" class="text-body fw-semibold px-1">0</div> Result <button type="button" class="btn btn-link link-danger p-0 ms-3" data-bs-toggle="modal" data-bs-target="#removeNotificationModal">Remove</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dropdown ms-sm-3 header-item topbar-user">
|
||||
<button type="button" class="btn" id="page-header-user-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="d-flex align-items-center">
|
||||
<img class="rounded-circle header-profile-user" src="/assets/images/users/avatar-1.jpg" alt="Header Avatar">
|
||||
<span class="text-start ms-xl-2">
|
||||
<span class="d-none d-xl-inline-block ms-1 fw-medium user-name-text">Anna Adame</span>
|
||||
<span class="d-none d-xl-block ms-1 fs-12 text-muted user-name-sub-text">Founder</span>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-end">
|
||||
<!-- item-->
|
||||
<h6 class="dropdown-header">Welcome Anna!</h6>
|
||||
<a class="dropdown-item" href="/pages-profile"><i class="mdi mdi-account-circle text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Profile</span></a>
|
||||
<a class="dropdown-item" href="/apps-chat"><i class="mdi mdi-message-text-outline text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Messages</span></a>
|
||||
<a class="dropdown-item" href="/apps-tasks-kanban"><i class="mdi mdi-calendar-check-outline text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Taskboard</span></a>
|
||||
<a class="dropdown-item" href="/pages-faqs"><i class="mdi mdi-lifebuoy text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Help</span></a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="/pages-profile"><i class="mdi mdi-wallet text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Balance : <b>$5971.67</b></span></a>
|
||||
<a class="dropdown-item" href="/pages-profile-settings"><span class="badge bg-soft-success text-success mt-1 float-end">New</span><i class="mdi mdi-cog-outline text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Settings</span></a>
|
||||
<a class="dropdown-item" href="auth-lockscreen-basic"><i class="mdi mdi-lock text-muted fs-16 align-middle me-1"></i> <span class="align-middle">Lock screen</span></a>
|
||||
<a class="dropdown-item" href="auth-logout-basic"><i class="mdi mdi-logout text-muted fs-16 align-middle me-1"></i> <span class="align-middle" data-key="t-logout">Logout</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- removeNotificationModal -->
|
||||
<div id="removeNotificationModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="NotificationModalbtn-close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mt-2 text-center">
|
||||
<lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
|
||||
<div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
|
||||
<h4>Are you sure ?</h4>
|
||||
<p class="text-muted mx-4 mb-0">Are you sure you want to remove this Notification ?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 justify-content-center mt-4 mb-2">
|
||||
<button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn w-sm btn-danger" id="delete-notification">Yes, Delete It!</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,14 @@
|
||||
<html>
|
||||
|
||||
<body>
|
||||
<div th:fragment="scripts" th:remove="tag">
|
||||
<!-- JAVASCRIPT -->
|
||||
<script src="/assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="/assets/libs/simplebar/simplebar.min.js"></script>
|
||||
<script src="/assets/libs/node-waves/waves.min.js"></script>
|
||||
<script src="/assets/libs/feather-icons/feather.min.js"></script>
|
||||
<script src="/assets/js/plugins.js"></script>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user