Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bonesco Bank - Estado de Transacción</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.95); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| } | |
| .stamp-animation { | |
| animation: stampDenial 0.5s ease-out forwards; | |
| opacity: 0; | |
| transform: scale(2) rotate(-10deg); | |
| } | |
| @keyframes stampDenial { | |
| 0% { | |
| opacity: 0; | |
| transform: scale(3) rotate(-20deg); | |
| } | |
| 50% { | |
| opacity: 1; | |
| transform: scale(0.9) rotate(-10deg); | |
| } | |
| 100% { | |
| opacity: 0.8; | |
| transform: scale(1) rotate(-10deg); | |
| } | |
| } | |
| .shake { | |
| animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; | |
| transform: translate3d(0, 0, 0); | |
| } | |
| @keyframes shake { | |
| 10%, 90% { transform: translate3d(-1px, 0, 0); } | |
| 20%, 80% { transform: translate3d(2px, 0, 0); } | |
| 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } | |
| 40%, 60% { transform: translate3d(4px, 0, 0); } | |
| } | |
| .receipt-tear { | |
| background-image: linear-gradient(45deg, transparent 50%, #e5e7eb 50%), linear-gradient(-45deg, transparent 50%, #e5e7eb 50%); | |
| background-size: 20px 20px; | |
| background-repeat: repeat-x; | |
| height: 20px; | |
| width: 100%; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 0; | |
| } | |
| .fiscal-stamp { | |
| background: repeating-linear-gradient( | |
| 45deg, | |
| #fee2e2, | |
| #fee2e2 10px, | |
| #fecaca 10px, | |
| #fecaca 20px | |
| ); | |
| border: 2px dashed #dc2626; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .fiscal-stamp::before { | |
| content: "SELLO FISCAL REQUERIDO"; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%) rotate(-45deg); | |
| font-size: 0.75rem; | |
| font-weight: bold; | |
| color: #991b1b; | |
| white-space: nowrap; | |
| opacity: 0.3; | |
| } | |
| .progress-bar { | |
| transition: width 0.3s ease; | |
| } | |
| .tooltip { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .has-tooltip:hover .tooltip { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="flex items-center justify-center p-4"> | |
| <div class="w-full max-w-4xl"> | |
| <!-- Header --> | |
| <header class="glass-effect rounded-2xl p-6 mb-6 shadow-2xl"> | |
| <div class="flex justify-between items-center flex-wrap gap-4"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-12 h-12 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg"> | |
| <i class="fas fa-university"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">Bonesco Bank</h1> | |
| <p class="text-sm text-gray-500">Banca Digital Empresarial</p> | |
| </div> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-sm text-blue-600 hover:text-blue-800 font-medium transition-colors flex items-center gap-2 bg-blue-50 px-4 py-2 rounded-full"> | |
| <i class="fas fa-code"></i> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="grid md:grid-cols-3 gap-6"> | |
| <!-- Sidebar --> | |
| <aside class="md:col-span-1 space-y-4"> | |
| <div class="glass-effect rounded-2xl p-6 shadow-xl"> | |
| <div class="flex items-center gap-3 mb-6 pb-4 border-b border-gray-200"> | |
| <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| <div> | |
| <p class="font-semibold text-gray-800">Corp. Industrial S.A.</p> | |
| <p class="text-xs text-gray-500">NIT: 900.123.456-7</p> | |
| </div> | |
| </div> | |
| <nav class="space-y-2"> | |
| <button class="w-full text-left px-4 py-3 rounded-xl hover:bg-white/50 transition-colors flex items-center gap-3 text-gray-700"> | |
| <i class="fas fa-home w-5"></i> Inicio | |
| </button> | |
| <button class="w-full text-left px-4 py-3 rounded-xl bg-blue-50 text-blue-700 font-medium flex items-center gap-3"> | |
| <i class="fas fa-exchange-alt w-5"></i> Transferencias | |
| </button> | |
| <button class="w-full text-left px-4 py-3 rounded-xl hover:bg-white/50 transition-colors flex items-center gap-3 text-gray-700"> | |
| <i class="fas fa-stamp w-5"></i> Sellos Fiscales | |
| <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span> | |
| </button> | |
| <button class="w-full text-left px-4 py-3 rounded-xl hover:bg-white/50 transition-colors flex items-center gap-3 text-gray-700"> | |
| <i class="fas fa-file-invoice w-5"></i> Comprobantes | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Fiscal Status Card --> | |
| <div class="glass-effect rounded-2xl p-6 shadow-xl border-l-4 border-red-500"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-semibold text-gray-800">Estado Fiscal</h3> | |
| <i class="fas fa-exclamation-triangle text-red-500"></i> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">Sellos Disponibles:</span> | |
| <span class="font-bold text-red-600">0</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">Vencen:</span> | |
| <span class="text-gray-800">N/A</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-red-500 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| <button class="w-full mt-2 bg-red-100 text-red-700 text-sm py-2 rounded-lg hover:bg-red-200 transition-colors font-medium"> | |
| Comprar Sellos | |
| </button> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Main Transaction Area --> | |
| <section class="md:col-span-2"> | |
| <div class="glass-effect rounded-2xl shadow-xl overflow-hidden relative" id="transactionCard"> | |
| <!-- Progress Bar --> | |
| <div class="w-full bg-gray-200 h-1"> | |
| <div id="progressBar" class="progress-bar bg-blue-600 h-1" style="width: 0%"></div> | |
| </div> | |
| <div class="p-8"> | |
| <!-- Transaction Header --> | |
| <div class="flex justify-between items-start mb-8"> | |
| <div> | |
| <p class="text-sm text-gray-500 mb-1">Transacción #</p> | |
| <p class="font-mono text-lg font-bold text-gray-800">TRX-8847291-BON</p> | |
| <p class="text-xs text-gray-400 mt-1">15 de Enero, 2024 - 14:32:18 COL</p> | |
| </div> | |
| <div id="statusBadge" class="px-4 py-2 rounded-full text-sm font-semibold bg-gray-100 text-gray-600 flex items-center gap-2"> | |
| <i class="fas fa-clock"></i> | |
| <span>Procesando...</span> | |
| </div> | |
| </div> | |
| <!-- Transaction Details --> | |
| <div class="bg-gray-50 rounded-xl p-6 mb-6 border border-gray-200"> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div> | |
| <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Cuenta Origen</p> | |
| <p class="font-semibold text-gray-800">**** 8842</p> | |
| <p class="text-sm text-gray-600">Cuenta Corriente Empresarial</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Cuenta Destino</p> | |
| <p class="font-semibold text-gray-800">**** 1934</p> | |
| <p class="text-sm text-gray-600">Banco Agrario</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Monto</p> | |
| <p class="font-bold text-2xl text-gray-800">$45.000.000 <span class="text-sm font-normal text-gray-500">COP</span></p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 uppercase tracking-wider mb-1">Descripción</p> | |
| <p class="text-sm text-gray-800">Pago Proveedores - Factura #445</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Error Message Container --> | |
| <div id="errorContainer" class="hidden"> | |
| <div class="bg-red-50 border-l-4 border-red-500 rounded-r-xl p-6 mb-6 shake"> | |
| <div class="flex items-start gap-4"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-stamp text-red-600 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="text-lg font-bold text-red-800 mb-2">Transacción Rechazada</h3> | |
| <p class="text-red-700 mb-3"> | |
| La transacción no puede ser procesada debido a la falta de <strong>sellos fiscales electrónicos</strong> vigentes. | |
| </p> | |
| <div class="bg-white rounded-lg p-4 border border-red-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm font-medium text-gray-700">Código de Error:</span> | |
| <span class="font-mono text-sm bg-red-100 px-2 py-1 rounded text-red-800">ERR-FISCAL-001</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-sm font-medium text-gray-700">Requerimiento:</span> | |
| <span class="text-sm text-gray-600">Sello Fiscal por $45.000.000 COP</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Fiscal Stamp Visual --> | |
| <div class="fiscal-stamp rounded-xl p-8 mb-6 text-center relative"> | |
| <div class="absolute top-4 right-4 stamp-animation"> | |
| <div class="border-4 border-red-600 text-red-600 font-bold text-xl px-4 py-2 rounded transform -rotate-12 bg-white/80 backdrop-blur"> | |
| RECHAZADO<br> | |
| <span class="text-sm">SIN SELLO</span> | |
| </div> | |
| </div> | |
| <i class="fas fa-file-invoice-dollar text-6xl text-red-300 mb-4"></i> | |
| <h4 class="text-xl font-bold text-red-800 mb-2">Obligación Tributaria Pendiente</h4> | |
| <p class="text-red-700 max-w-md mx-auto"> | |
| Según la resolución 000123 de 2024, toda transacción superior a $10.000.000 COP requiere validación mediante sello fiscal electrónico. | |
| </p> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="flex flex-col sm:flex-row gap-3"> | |
| <button onclick="simulatePurchase()" class="flex-1 bg-blue-600 text-white py-3 px-6 rounded-xl font-semibold hover:bg-blue-700 transition-colors flex items-center justify-center gap-2 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all"> | |
| <i class="fas fa-shopping-cart"></i> | |
| Adquirir Sellos Fiscales | |
| </button> | |
| <button onclick="saveAsDraft()" class="flex-1 bg-gray-200 text-gray-700 py-3 px-6 rounded-xl font-semibold hover:bg-gray-300 transition-colors flex items-center justify-center gap-2"> | |
| <i class="fas fa-save"></i> | |
| Guardar como Borrador | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Success/Processing State --> | |
| <div id="processingState" class="text-center py-12"> | |
| <div class="relative inline-block mb-6"> | |
| <div class="w-20 h-20 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin"></div> | |
| <i class="fas fa-shield-alt absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">Validando requisitos fiscales...</h3> | |
| <p class="text-gray-500">Verificando sello fiscal en la DIAN</p> | |
| </div> | |
| </div> | |
| <!-- Receipt Bottom Effect --> | |
| <div class="receipt-tear"></div> | |
| </div> | |
| <!-- Info Card --> | |
| <div class="mt-6 glass-effect rounded-2xl p-6 shadow-lg"> | |
| <div class="flex items-start gap-3"> | |
| <i class="fas fa-info-circle text-blue-600 text-xl mt-1"></i> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 mb-1">¿Qué son los Sellos Fiscales?</h4> | |
| <p class="text-sm text-gray-600 leading-relaxed"> | |
| Los sellos fiscales electrónicos son un mecanismo de control tributario que certifica el pago de impuestos sobre transacciones financieras de alto valor. En Bonesco Bank, trabajamos bajo estrictas normativas de la DIAN para garantizar el cumplimiento fiscal. | |
| </p> | |
| <button class="text-blue-600 text-sm font-medium mt-2 hover:underline"> | |
| Más información <i class="fas fa-arrow-right text-xs"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Modal for Stamp Purchase --> | |
| <div id="stampModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm hidden items-center justify-center z-50 p-4"> | |
| <div class="bg-white rounded-2xl max-w-md w-full p-6 shadow-2xl transform transition-all scale-95 opacity-0" id="modalContent"> | |
| <div class="text-center mb-6"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-check text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800">Sellos Adquiridos</h3> | |
| <p class="text-gray-600 mt-2">Ha comprado exitosamente 10 sellos fiscales electrónicos.</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-4 mb-6 space-y-2"> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">Cantidad:</span> | |
| <span class="font-semibold">10 Sellos</span> | |
| </div> | |
| <div class="flex justify-between text-sm"> | |
| <span class="text-gray-600">Valor Unitario:</span> | |
| <span class="font-semibold">$4.500 COP</span> | |
| </div> | |
| <div class="border-t border-gray-200 pt-2 flex justify-between font-bold text-gray-800"> | |
| <span>Total:</span> | |
| <span>$45.000 COP</span> | |
| </div> | |
| </div> | |
| <button onclick="retryTransaction()" class="w-full bg-blue-600 text-white py-3 rounded-xl font-semibold hover:bg-blue-700 transition-colors"> | |
| Reintentar Transacción | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simulate transaction process | |
| let transactionStep = 0; | |
| function startTransaction() { | |
| const progressBar = document.getElementById('progressBar'); | |
| const processingState = document.getElementById('processingState'); | |
| const errorContainer = document.getElementById('errorContainer'); | |
| const statusBadge = document.getElementById('statusBadge'); | |
| // Reset states | |
| progressBar.style.width = '0%'; | |
| errorContainer.classList.add('hidden'); | |
| processingState.classList.remove('hidden'); | |
| statusBadge.className = 'px-4 py-2 rounded-full text-sm font-semibold bg-blue-100 text-blue-600 flex items-center gap-2'; | |
| statusBadge.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i><span>Procesando...</span>'; | |
| // Step 1: Initial validation (0-30%) | |
| setTimeout(() => { | |
| progressBar.style.width = '30%'; | |
| }, 500); | |
| // Step 2: Fiscal validation (30-60%) - This will fail | |
| setTimeout(() => { | |
| progressBar.style.width = '60%'; | |
| progressBar.classList.remove('bg-blue-600'); | |
| progressBar.classList.add('bg-red-500'); | |
| // Show error | |
| processingState.classList.add('hidden'); | |
| errorContainer.classList.remove('hidden'); | |
| // Update status badge | |
| statusBadge.className = 'px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-600 flex items-center gap-2'; | |
| statusBadge.innerHTML = '<i class="fas fa-times-circle"></i><span>Fallida</span>'; | |
| // Shake effect | |
| document.getElementById('transactionCard').classList.add('shake'); | |
| setTimeout(() => { | |
| document.getElementById('transactionCard').classList.remove('shake'); | |
| }, 820); | |
| }, 2500); | |
| } | |
| function simulatePurchase() { | |
| const modal = document.getElementById('stampModal'); | |
| const modalContent = document.getElementById('modalContent'); | |
| modal.classList.remove('hidden'); | |
| modal.classList.add('flex'); | |
| setTimeout(() => { | |
| modalContent.classList.remove('scale-95', 'opacity-0'); | |
| modalContent.classList.add('scale-100', 'opacity-100'); | |
| }, 10); | |
| } | |
| function retryTransaction() { | |
| // Close modal | |
| const modal = document.getElementById('stampModal'); | |
| const modalContent = document.getElementById('modalContent'); | |
| modalContent.classList.remove('scale-100', 'opacity-100'); | |
| modalContent.classList.add('scale-95', 'opacity-0'); | |
| setTimeout(() => { | |
| modal.classList.add('hidden'); | |
| modal.classList.remove('flex'); | |
| // Update fiscal status sidebar | |
| document.querySelector('.border-l-4.border-red-500').classList.remove('border-red-500', 'border-l-4'); | |
| document.querySelector('.border-l-4')?.classList.add('border-green-500'); | |
| // Reset and start success flow | |
| const progressBar = document.getElementById('progressBar'); | |
| const errorContainer = document.getElementById('errorContainer'); | |
| const processingState = document.getElementById('processingState'); | |
| const statusBadge = document.getElementById('statusBadge'); | |
| progressBar.classList.remove('bg-red-500'); | |
| progressBar.classList.add('bg-green-500'); | |
| progressBar.style.width = '0%'; | |
| errorContainer.classList.add('hidden'); | |
| processingState.classList.remove('hidden'); | |
| statusBadge.className = 'px-4 py-2 rounded-full text-sm font-semibold bg-blue-100 text-blue-600 flex items-center gap-2'; | |
| statusBadge.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i><span>Procesando...</span>'; | |
| // Success flow | |
| setTimeout(() => progressBar.style.width = '50%', 500); | |
| setTimeout(() => progressBar.style.width = '100%', 1500); | |
| setTimeout(() => { | |
| processingState.innerHTML = ` | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 animate-bounce"> | |
| <i class="fas fa-check text-green-600 text-3xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-green-700 mb-2">¡Transacción Exitosa!</h3> | |
| <p class="text-gray-600">El comprobante ha sido enviado a su correo</p> | |
| <div class="mt-4 p-4 bg-green-50 rounded-lg inline-block"> | |
| <p class="text-sm text-green-800 font-mono">AUTH-CODE: 8847291-OK</p> | |
| </div> | |
| </div> | |
| `; | |
| statusBadge.className = 'px-4 py-2 rounded-full text-sm font-semibold bg-green-100 text-green-600 flex items-center gap-2'; | |
| statusBadge.innerHTML = '<i class="fas fa-check-circle"></i><span>Completada</span>'; | |
| }, 2500); | |
| }, 300); | |
| } | |
| function saveAsDraft() { | |
| const btn = event.target; | |
| const originalContent = btn.innerHTML; | |
| btn.innerHTML = '<i class="fas fa-check"></i> Guardado'; | |
| btn.classList.remove('bg-gray-200', 'text-gray-700'); | |
| btn.classList.add('bg-green-200', 'text-green-700'); | |
| setTimeout(() => { | |
| btn.innerHTML = originalContent; | |
| btn.classList.add('bg-gray-200', 'text-gray-700'); | |
| btn.classList.remove('bg-green-200', 'text-green-700'); | |
| }, 2000); | |
| } | |
| // Start the simulation when page loads | |
| window.addEventListener('load', () => { | |
| setTimeout(startTransaction, 1000); | |
| }); | |
| // Close modal on outside click | |
| document.getElementById('stampModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| const modalContent = document.getElementById('modalContent'); | |
| modalContent.classList.remove('scale-100', 'opacity-100'); | |
| modalContent.classList.add('scale-95', 'opacity-0'); | |
| setTimeout(() => { | |
| this.classList.add('hidden'); | |
| this.classList.remove('flex'); | |
| }, 300); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |