Lili Records v1.14
This commit is contained in:
parent
66fb75ff70
commit
1e30857a3b
@ -76,32 +76,41 @@
|
|||||||
</div>
|
</div>
|
||||||
</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">
|
<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>
|
<div class="d-flex align-items-center justify-content-center mb-2">
|
||||||
<p class="small text-secondary mb-3">Escanea el código para pagar por tu canción favorita.</p>
|
<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 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;">
|
<div class="position-relative p-2 bg-white rounded-3 shadow-sm" style="width: 170px; height: 170px;">
|
||||||
<!-- QR Code will be generated here -->
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="mt-2">
|
<div class="mt-2 mb-3">
|
||||||
<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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<button class="btn btn-outline-primary btn-sm w-100 rounded-pill" data-bs-toggle="collapse" data-bs-target="#payment-details">
|
<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
|
Ver detalles de pago alternativo
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div class="collapse mt-3 text-start" id="payment-details">
|
<div class="collapse mt-3 text-start" id="payment-details">
|
||||||
<div class="p-3 rounded bg-black bg-opacity-50 small border border-secondary">
|
<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>Banco:</strong> Metropolitano / BPA</p>
|
||||||
<p class="mb-1"><strong>Titular:</strong> Lili Records</p>
|
<p class="mb-1"><strong>Cuenta:</strong> 9225 XXXX XXXX XXXX</p>
|
||||||
<p class="mb-2"><strong>Concepto:</strong> Pago Canción</p>
|
<p class="mb-2"><strong>Titular:</strong> Lili Records</p>
|
||||||
<hr class="border-secondary my-2">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -156,7 +165,7 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
|
text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
#payment-qr img {
|
#payment-qr canvas, #payment-qr img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
@ -179,12 +188,15 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||||||
const volumeControl = document.getElementById('volume-control');
|
const volumeControl = document.getElementById('volume-control');
|
||||||
const volumeIndicator = document.getElementById('volume-indicator');
|
const volumeIndicator = document.getElementById('volume-indicator');
|
||||||
|
|
||||||
// Generate QR Code
|
// Generate Transfermóvil Pago en Línea QR Code
|
||||||
const paymentAccount = "9225 XXXX XXXX XXXX"; // Placeholder
|
// 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"), {
|
new QRCode(document.getElementById("payment-qr"), {
|
||||||
text: paymentAccount,
|
text: paymentString,
|
||||||
width: 144,
|
width: 154,
|
||||||
height: 144,
|
height: 154,
|
||||||
colorDark : "#000000",
|
colorDark : "#000000",
|
||||||
colorLight : "#ffffff",
|
colorLight : "#ffffff",
|
||||||
correctLevel : QRCode.CorrectLevel.H
|
correctLevel : QRCode.CorrectLevel.H
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user