Lili Records v1.17

core/templates/core/index.html

@@ -78,6 +78,42 @@
             </div>
         </div>
     </div>
+
+    <!-- QR Payment Section -->
+    <div class="row justify-content-center mt-5">
+        <div class="col-lg-8">
+            <div class="glass-card p-4 rounded-4 shadow-lg border-neon text-center">
+                <div class="d-flex align-items-center justify-content-center mb-4">
+                    <i class="fas fa-qrcode fs-2 me-3 text-primary"></i>
+                    <h2 class="h4 mb-0 fw-bold" style="font-family: 'Righteous', cursive;">Solicita tu Canción</h2>
+                </div>
+                
+                <p class="text-secondary mb-4">Escanea el código con <strong>Transfermóvil</strong> para realizar una transferencia y solicitar tu tema favorito.</p>
+                
+                <div class="qr-container-wrapper p-3 bg-white d-inline-block rounded-4 shadow-sm mb-4">
+                    <div id="transfer-qr" class="qr-code"></div>
+                </div>
+
+                <div class="mt-2 mb-4">
+                    <span class="badge bg-primary px-3 py-2 rounded-pill fs-6" style="cursor: pointer;" onclick="navigator.clipboard.writeText('9227959879036585'); alert('Copiado al portapapeles');">
+                        <i class="fas fa-credit-card me-2"></i>9227 9598 7903 6585
+                    </span>
+                    <p class="small text-muted mt-2">Haz clic arriba para copiar el número de tarjeta</p>
+                </div>
+
+                <div class="info-steps text-start mx-auto" style="max-width: 400px;">
+                    <div class="d-flex align-items-start mb-3">
+                        <div class="step-num me-3">1</div>
+                        <p class="small text-secondary mb-0">Escanea el código desde la opción <strong>Transferencia</strong> en Transfermóvil.</p>
+                    </div>
+                    <div class="d-flex align-items-start">
+                        <div class="step-num me-3">2</div>
+                        <p class="small text-secondary mb-0">Envía el comprobante por WhatsApp con el nombre de la canción y artista.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
 
 <style>
@@ -126,10 +162,33 @@
         font-weight: 500;
         text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
     }
+
+    /* QR Styles */
+    .qr-container-wrapper {
+        border: 8px solid #f8f9fa;
+        transition: transform 0.3s ease;
+    }
+    .qr-container-wrapper:hover {
+        transform: scale(1.05);
+    }
+    .step-num {
+        background: var(--primary-neon);
+        color: white;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 0.75rem;
+        font-weight: bold;
+        flex-shrink: 0;
+    }
 </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');
@@ -148,6 +207,17 @@ document.addEventListener('DOMContentLoaded', function() {
     let currentMetadataUrl = '';
     let metadataInterval = null;
 
+    // QR Generation
+    const qrData = "ETECSA|TRANSFERMOVIL|TRANSFER|9227959879036585|||";
+    new QRCode(document.getElementById("transfer-qr"), {
+        text: qrData,
+        width: 200,
+        height: 200,
+        colorDark : "#000000",
+        colorLight : "#ffffff",
+        correctLevel : QRCode.CorrectLevel.H
+    });
+
     function fetchMetadata() {
         if (!currentMetadataUrl) return;