Lili Records v1.14

This commit is contained in:
Flatlogic Bot 2026-01-30 17:47:50 +00:00
parent 66fb75ff70
commit 1e30857a3b

View File

@ -76,32 +76,41 @@
</div>
</div>
<!-- Song Request & Payment Section -->
<!-- Transfermóvil Pago en Línea Section -->
<div class="mt-4 p-4 rounded-4 bg-dark bg-opacity-75 border border-primary border-opacity-25 text-center shadow">
<h5 class="mb-3 text-uppercase small ls-wide fw-bold text-primary">Solicita tu Canción</h5>
<p class="small text-secondary mb-3">Escanea el código para pagar por tu canción favorita.</p>
<div class="d-flex align-items-center justify-content-center mb-2">
<span class="badge bg-info text-dark me-2">Transfermóvil</span>
<h5 class="mb-0 text-uppercase small ls-wide fw-bold text-primary">Pago en Línea</h5>
</div>
<p class="small text-secondary mb-3">Escanea con Transfermóvil para pagar tu canción con descuento.</p>
<div class="d-flex justify-content-center mb-3">
<div id="payment-qr" class="p-2 bg-white rounded-3 shadow-sm" style="width: 160px; height: 160px;">
<!-- QR Code will be generated here -->
<div class="position-relative p-2 bg-white rounded-3 shadow-sm" style="width: 170px; height: 170px;">
<div id="payment-qr"></div>
<!-- Small overlay logo for branding -->
<div class="position-absolute top-50 left-50 translate-middle bg-white p-1 rounded-circle shadow-sm" style="width: 30px; height: 30px; margin-top: -15px; margin-left: -15px;">
<img src="https://www.etecsa.cu/favicon.ico" alt="TM" class="img-fluid rounded-circle">
</div>
</div>
</div>
<div class="mt-2">
<span class="badge bg-primary px-3 py-2 rounded-pill mb-2 d-block mx-auto" style="max-width: fit-content;">Cuenta: 9225 XXXX XXXX XXXX</span>
<div class="mt-2 mb-3">
<span class="badge bg-primary px-3 py-2 rounded-pill mb-1 d-block mx-auto" style="max-width: fit-content;">ID Comercio: 00000</span>
<small class="text-info d-block">¡Aprovecha el descuento de la plataforma!</small>
</div>
<button class="btn btn-outline-primary btn-sm w-100 rounded-pill" data-bs-toggle="collapse" data-bs-target="#payment-details">
Ver detalles de pago
<button class="btn btn-outline-primary btn-sm w-100 rounded-pill mb-2" data-bs-toggle="collapse" data-bs-target="#payment-details">
Ver detalles de pago alternativo
</button>
<div class="collapse mt-3 text-start" id="payment-details">
<div class="p-3 rounded bg-black bg-opacity-50 small border border-secondary">
<p class="mb-1 text-primary"><strong>Transferencia Directa:</strong></p>
<p class="mb-1"><strong>Banco:</strong> Metropolitano / BPA</p>
<p class="mb-1"><strong>Titular:</strong> Lili Records</p>
<p class="mb-2"><strong>Concepto:</strong> Pago Canción</p>
<p class="mb-1"><strong>Cuenta:</strong> 9225 XXXX XXXX XXXX</p>
<p class="mb-2"><strong>Titular:</strong> Lili Records</p>
<hr class="border-secondary my-2">
<p class="mb-0 text-secondary italic text-center">Una vez realizado el pago, envía el comprobante por WhatsApp.</p>
<p class="mb-0 text-secondary italic text-center">Una vez realizado el pago (en línea o transferencia), envía el comprobante por WhatsApp.</p>
</div>
</div>
</div>
@ -156,7 +165,7 @@
font-weight: 500;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
#payment-qr img {
#payment-qr canvas, #payment-qr img {
display: block;
margin: 0 auto;
}
@ -179,12 +188,15 @@ document.addEventListener('DOMContentLoaded', function() {
const volumeControl = document.getElementById('volume-control');
const volumeIndicator = document.getElementById('volume-indicator');
// Generate QR Code
const paymentAccount = "9225 XXXX XXXX XXXX"; // Placeholder
// Generate Transfermóvil Pago en Línea QR Code
// Format: ETECSA|TRANSFERMOVIL|PAY|{MerchantID}|{Amount}|{Currency}|{Description}
const merchantId = "00000"; // Default placeholder
const paymentString = `ETECSA|TRANSFERMOVIL|PAY|${merchantId}||CUP|Pago Cancion Lili Records`;
new QRCode(document.getElementById("payment-qr"), {
text: paymentAccount,
width: 144,
height: 144,
text: paymentString,
width: 154,
height: 154,
colorDark : "#000000",
colorLight : "#ffffff",
correctLevel : QRCode.CorrectLevel.H