From 66fb75ff7022ed0a84d044a88280400e814adcb2 Mon Sep 17 00:00:00 2001
From: Flatlogic Bot <support@flatlogic.com>
Date: Fri, 30 Jan 2026 17:41:46 +0000
Subject: [PATCH] Lili Records v1.13

---
 core/templates/core/index.html | 46 ++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 9ea69e4..07917f4 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -75,6 +75,36 @@
                         {% endfor %}
                     </div>
                 </div>
+
+                <!-- Song Request & Payment 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 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>
+                    </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>
+                    
+                    <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>
+                    
+                    <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"><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>
+                            <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>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -126,10 +156,15 @@
         font-weight: 500;
         text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
     }
+    #payment-qr img {
+        display: block;
+        margin: 0 auto;
+    }
 </style>
 {% endblock %}
 
 {% block scripts %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
 <script>
 document.addEventListener('DOMContentLoaded', function() {
     const audio = document.getElementById('audio-player');
@@ -144,6 +179,17 @@ 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
+    new QRCode(document.getElementById("payment-qr"), {
+        text: paymentAccount,
+        width: 144,
+        height: 144,
+        colorDark : "#000000",
+        colorLight : "#ffffff",
+        correctLevel : QRCode.CorrectLevel.H
+    });
+
     let isPlaying = false;
     let currentMetadataUrl = '';
     let metadataInterval = null;