Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Banesco - Transacción Fallida</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --khaki-primary: #78866b; | |
| --khaki-dark: #5a6348; | |
| --khaki-light: #9caf88; | |
| --khaki-pale: #e8ecd5; | |
| --banesco-red: #e31837; | |
| --banesco-orange: #ff6b35; | |
| --white: #ffffff; | |
| --gray-100: #f7f7f7; | |
| --gray-200: #e5e5e5; | |
| --gray-600: #666666; | |
| --gray-800: #333333; | |
| --error-red: #dc2626; | |
| --warning-yellow: #f59e0b; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background: linear-gradient(135deg, var(--khaki-primary) 0%, var(--khaki-dark) 100%); | |
| min-height: 100vh; | |
| color: var(--gray-800); | |
| line-height: 1.6; | |
| } | |
| /* Header Styles */ | |
| .header { | |
| background: var(--white); | |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| padding: 1rem 0; | |
| } | |
| .header-container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo-section { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .banesco-logo { | |
| width: 150px; | |
| height: 40px; | |
| background: linear-gradient(90deg, var(--banesco-red), var(--banesco-orange)); | |
| border-radius: 4px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-weight: bold; | |
| font-size: 1.5rem; | |
| letter-spacing: 2px; | |
| text-transform: uppercase; | |
| } | |
| .anycoder-badge { | |
| background: var(--khaki-primary); | |
| color: white; | |
| padding: 0.5rem 1rem; | |
| border-radius: 20px; | |
| font-size: 0.85rem; | |
| text-decoration: none; | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .anycoder-badge:hover { | |
| background: var(--khaki-dark); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.2); | |
| } | |
| .user-menu { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| background: var(--khaki-primary); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| cursor: pointer; | |
| transition: transform 0.3s ease; | |
| } | |
| .user-avatar:hover { | |
| transform: scale(1.1); | |
| } | |
| /* Main Layout */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 2rem auto; | |
| padding: 0 2rem; | |
| display: grid; | |
| grid-template-columns: 250px 1fr; | |
| gap: 2rem; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| background: var(--white); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.1); | |
| height: fit-content; | |
| } | |
| .nav-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| padding: 1rem; | |
| margin-bottom: 0.5rem; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| color: var(--gray-600); | |
| text-decoration: none; | |
| } | |
| .nav-item:hover, .nav-item.active { | |
| background: var(--khaki-pale); | |
| color: var(--khaki-dark); | |
| font-weight: 600; | |
| } | |
| .nav-item i { | |
| width: 24px; | |
| text-align: center; | |
| } | |
| /* Main Content */ | |
| .main-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2rem; | |
| } | |
| .alert-card { | |
| background: var(--white); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.1); | |
| border-left: 5px solid var(--error-red); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .alert-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| width: 200px; | |
| height: 200px; | |
| background: radial-gradient(circle, rgba(220, 38, 38, 0.1) 0%, transparent 70%); | |
| border-radius: 50%; | |
| transform: translate(50%, -50%); | |
| } | |
| .alert-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .alert-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: rgba(220, 38, 38, 0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--error-red); | |
| font-size: 1.5rem; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .alert-title { | |
| font-size: 1.5rem; | |
| color: var(--error-red); | |
| font-weight: 700; | |
| } | |
| .alert-subtitle { | |
| color: var(--gray-600); | |
| font-size: 0.95rem; | |
| } | |
| .transaction-details { | |
| background: var(--gray-100); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin: 1.5rem 0; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .detail-item { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .detail-label { | |
| font-size: 0.85rem; | |
| color: var(--gray-600); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| font-weight: 600; | |
| } | |
| .detail-value { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--gray-800); | |
| } | |
| .detail-value.amount { | |
| color: var(--error-red); | |
| font-size: 1.3rem; | |
| } | |
| .detail-value.account { | |
| font-family: 'Courier New', monospace; | |
| background: var(--white); | |
| padding: 0.5rem; | |
| border-radius: 6px; | |
| border: 2px solid var(--gray-200); | |
| display: inline-block; | |
| } | |
| .documents-section { | |
| background: var(--white); | |
| border-radius: 16px; | |
| padding: 2rem; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.1); | |
| } | |
| .section-title { | |
| font-size: 1.25rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--gray-800); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .document-item { | |
| background: rgba(245, 158, 11, 0.1); | |
| border: 2px dashed var(--warning-yellow); | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .document-item:hover { | |
| transform: translateX(5px); | |
| background: rgba(245, 158, 11, 0.15); | |
| } | |
| .doc-icon { | |
| width: 50px; | |
| height: 50px; | |
| background: var(--warning-yellow); | |
| color: white; | |
| border-radius: 10px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| } | |
| .doc-info { | |
| flex: 1; | |
| } | |
| .doc-title { | |
| font-weight: 700; | |
| color: var(--gray-800); | |
| margin-bottom: 0.25rem; | |
| } | |
| .doc-status { | |
| color: var(--error-red); | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| } | |
| .action-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 2rem; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 1rem; | |
| } | |
| .btn-primary { | |
| background: var(--banesco-red); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: #c41230; | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(227, 24, 55, 0.3); | |
| } | |
| .btn-secondary { | |
| background: var(--gray-200); | |
| color: var(--gray-800); | |
| } | |
| .btn-secondary:hover { | |
| background: var(--gray-600); | |
| color: white; | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 2px solid var(--khaki-primary); | |
| color: var(--khaki-dark); | |
| } | |
| .btn-outline:hover { | |
| background: var(--khaki-primary); | |
| color: white; | |
| } | |
| .footer { | |
| text-align: center; | |
| padding: 2rem; | |
| color: var(--white); | |
| opacity: 0.8; | |
| font-size: 0.9rem; | |
| } | |
| /* Mobile Responsive */ | |
| @media (max-width: 968px) { | |
| .container { | |
| grid-template-columns: 1fr; | |
| } | |
| .sidebar { | |
| display: none; | |
| } | |
| .transaction-details { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .header-container { | |
| flex-direction: column; | |
| gap: 1rem; | |
| text-align: center; | |
| } | |
| .alert-card, .documents-section { | |
| padding: 1.5rem; | |
| } | |
| .action-buttons { | |
| flex-direction: column; | |
| } | |
| .btn { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| } | |
| /* Modal Styles */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.5); | |
| z-index: 2000; | |
| align-items: center; | |
| justify-content: center; | |
| backdrop-filter: blur(4px); | |
| } | |
| .modal.active { | |
| display: flex; | |
| } | |
| .modal-content { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 16px; | |
| max-width: 500px; | |
| width: 90%; | |
| animation: slideUp 0.3s ease; | |
| } | |
| @keyframes slideUp { | |
| from { | |
| transform: translateY(50px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .modal-header { | |
| margin-bottom: 1.5rem; | |
| } | |
| .modal-title { | |
| font-size: 1.5rem; | |
| color: var(--gray-800); | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 8px; | |
| background: var(--gray-200); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin: 1rem 0; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: var(--banesco-red); | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="header-container"> | |
| <div class="logo-section"> | |
| <div class="banesco-logo">BANESCO</div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge"> | |
| <i class="fas fa-code"></i> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| <div class="user-menu"> | |
| <span style="color: var(--gray-600); font-weight: 500;">Juan Pérez</span> | |
| <div class="user-avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="container"> | |
| <aside class="sidebar"> | |
| <nav> | |
| <a href="#" class="nav-item"> | |
| <i class="fas fa-home"></i> | |
| <span>Inicio</span> | |
| </a> | |
| <a href="#" class="nav-item active"> | |
| <i class="fas fa-exchange-alt"></i> | |
| <span>Transferencias</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i class="fas fa-file-invoice"></i> | |
| <span>Pagos</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i class="fas fa-folder-open"></i> | |
| <span>Documentos</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i class="fas fa-cog"></i> | |
| <span>Configuración</span> | |
| </a> | |
| <a href="#" class="nav-item"> | |
| <i class="fas fa-sign-out-alt"></i> | |
| <span>Cerrar Sesión</span> | |
| </a> | |
| </nav> | |
| </aside> | |
| <main class="main-content"> | |
| <div class="alert-card"> | |
| <div class="alert-header"> | |
| <div class="alert-icon"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <div> | |
| <h1 class="alert-title">Transacción Fallida</h1> | |
| <p class="alert-subtitle">No se pudo completar la transferencia por falta de documentación</p> | |
| </div> | |
| </div> | |
| <p style="color: var(--gray-600); margin-bottom: 1rem;"> | |
| Estimado cliente, su transacción ha sido rechazada por el sistema debido a la falta de documentación fiscal requerida. | |
| Para completar esta operación, debe adjuntar el timbre fiscal correspondiente. | |
| </p> | |
| <div class="transaction-details"> | |
| <div class="detail-item"> | |
| <span class="detail-label">Estado</span> | |
| <span class="detail-value" style="color: var(--error-red);"> | |
| <i class="fas fa-times-circle"></i> Rechazada | |
| </span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label">Monto</span> | |
| <span class="detail-value amount">€650.000,00</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label">Cuenta Destino</span> | |
| <span class="detail-value account">7546629 01145569604</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label">Fecha</span> | |
| <span class="detail-value" id="current-date"></span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label">Referencia</span> | |
| <span class="detail-value">TRX-2024-8842</span> | |
| </div> | |
| <div class="detail-item"> | |
| <span class="detail-label">Tipo</span> | |
| <span class="detail-value">Transferencia Internacional</span> | |
| </div> | |
| </div> | |
| <div class="action-buttons"> | |
| <button class="btn btn-primary" onclick="openModal()"> | |
| <i class="fas fa-upload"></i> | |
| Subir Documentos | |
| </button> | |
| <button class="btn btn-secondary" onclick="retryTransaction()"> | |
| <i class="fas fa-redo"></i> | |
| Reintentar | |
| </button> | |
| <button class="btn btn-outline" onclick="contactSupport()"> | |
| <i class="fas fa-headset"></i> | |
| Contactar Soporte | |
| </button> | |
| </div> | |
| </div> | |
| <div class="documents-section"> | |
| <h2 class="section-title"> | |
| <i class="fas fa-exclamation-circle" style="color: var(--warning-yellow);"></i> | |
| Documentación Requerida | |
| </h2> | |
| <div class="document-item"> | |
| <div class="doc-icon"> | |
| <i class="fas fa-stamp"></i> | |
| </div> | |
| <div class="doc-info"> | |
| <div class="doc-title">Timbre Fiscal (Tax Stamp)</div> | |
| <div class="doc-status"> | |
| <i class="fas fa-times"></i> No aplicado / Faltante | |
| </div> | |
| <p style="font-size: 0.9rem; color: var(--gray-600); margin-top: 0.5rem;"> | |
| Se requiere el timbre fiscal oficial para transferencias superiores a €50.000 | |
| </p> | |
| </div> | |
| </div> | |
| <div class="document-item" style="background: rgba(120, 134, 107, 0.1); border-color: var(--khaki-primary); opacity: 0.6;"> | |
| <div class="doc-icon" style="background: var(--khaki-primary);"> | |
| <i class="fas fa-file-alt"></i> | |
| </div> | |
| <div class="doc-info"> | |
| <div class="doc-title">Justificación de Origen de Fondos</div> | |
| <div class="doc-status" style="color: var(--khaki-primary);"> | |
| <i class="fas fa-check"></i> Verificado | |
| </div> | |
| </div> | |
| </div> | |
| <div class="document-item" style="background: rgba(120, 134, 107, 0.1); border-color: var(--khaki-primary); opacity: 0.6;"> | |
| <div class="doc-icon" style="background: var(--khaki-primary);"> | |
| <i class="fas fa-id-card"></i> | |
| </div> | |
| <div class="doc-info"> | |
| <div class="doc-title">Documento de Identidad</div> | |
| <div class="doc-status" style="color: var(--khaki-primary);"> | |
| <i class="fas fa-check"></i> Verificado | |
| </div> | |
| </div> | |
| </div> | |
| <div style="background: var(--khaki-pale); padding: 1rem; border-radius: 8px; margin-top: 1.5rem; border-left: 4px solid var(--khaki-primary);"> | |
| <p style="font-size: 0.9rem; color: var(--khaki-dark);"> | |
| <i class="fas fa-info-circle"></i> | |
| <strong>Nota importante:</strong> Sin el timbre fiscal aplicado, no es posible procesar transferencias de alto valor. | |
| Por favor, acérquese a una oficina de Banesco o utilice nuestro portal de sellos digitales. | |
| </p> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <footer class="footer"> | |
| <p>© 2024 Banesco Banco Universal. Todos los derechos reservados.</p> | |
| <p style="margin-top: 0.5rem; font-size: 0.8rem;">Sucursal Principal - España</p> | |
| </footer> | |
| <!-- Modal para subir documentos --> | |
| <div class="modal" id="uploadModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3 class="modal-title">Subir Timbre Fiscal</h3> | |
| </div> | |
| <div style="border: 2px dashed var(--gray-200); border-radius: 8px; padding: 2rem; text-align: center; margin: 1rem 0;"> | |
| <i class="fas fa-cloud-upload-alt" style="font-size: 3rem; color: var(--khaki-primary); margin-bottom: 1rem;"></i> | |
| <p>Arrastre aquí el archivo o haga clic para seleccionar</p> | |
| <input type="file" style="display: none;" id="fileInput"> | |
| <button class="btn btn-outline" style="margin-top: 1rem;" onclick="document.getElementById('fileInput').click()"> | |
| Seleccionar Archivo | |
| </button> | |
| </div> | |
| <div class="progress-bar" id="progressBar" style="display: none;"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| <div class="action-buttons" style="margin-top: 1rem;"> | |
| <button class="btn btn-secondary" onclick="closeModal()" style="flex: 1;">Cancelar</button> | |
| <button class="btn btn-primary" onclick="uploadFile()" style="flex: 1;">Subir Documento</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Establecer fecha actual | |
| const dateElement = document.getElementById('current-date'); | |
| const today = new Date(); | |
| dateElement.textContent = today.toLocaleDateString('es-ES', { | |
| year: 'numeric', | |
| month: 'long', | |
| day: 'numeric', | |
| hour: '2-digit', | |
| minute: '2-digit' | |
| }); | |
| // Funciones del modal | |
| function openModal() { | |
| document.getElementById('uploadModal').classList.add('active'); | |
| } | |
| function closeModal() { | |
| document.getElementById('uploadModal').classList.remove('active'); | |
| document.getElementById('progressBar').style.display = 'none'; | |
| document.getElementById('progressFill').style.width = '0%'; | |
| } | |
| function uploadFile() { | |
| const progressBar = document.getElementById('progressBar'); | |
| const progressFill = document.getElementById('progressFill'); | |
| progressBar.style.display = 'block'; | |
| let width = 0; | |
| const interval = setInterval(() => { | |
| if (width >= 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| alert('Documento subido correctamente. El equipo de validación revisará el timbre fiscal en un plazo de 24 horas.'); | |
| closeModal(); | |
| }, 500); | |
| } else { | |
| width += 10; | |
| progressFill.style.width = width + '%'; | |
| } | |
| }, 200); | |
| } | |
| function retryTransaction() { | |
| const btn = event.target.closest('.btn'); | |
| const originalText = btn.innerHTML; | |
| btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Procesando...'; | |
| btn.disabled = true; | |
| setTimeout(() => { | |
| btn.innerHTML = originalText; | |
| btn.disabled = false; | |
| alert('La transacción no puede procesarse hasta que se adjunte el timbre fiscal correspondiente.'); | |
| }, 2000); | |
| } | |
| function contactSupport() { | |
| window.open('mailto:soporte@banesco.es?subject=Consulta%20Transacción%20TRX-2024-8842&body=Estimado%20soporte,%0A%0ANecesito%20ayuda%20con%20mi%20transacción%20fallida%20por%20falta%20de%20timbre%20fiscal.%0A%0AReferencia:%20TRX-2024-8842%0AMonto:%20€650.000,00%0A%0AGracias.'); | |
| } | |
| // Cerrar modal al hacer clic fuera | |
| window.onclick = function(event) { | |
| const modal = document.getElementById('uploadModal'); | |
| if (event.target === modal) { | |
| closeModal(); | |
| } | |
| } | |
| // Animación de entrada | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const cards = document.querySelectorAll('.alert-card, .documents-section'); | |
| cards.forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| setTimeout(() => { | |
| card.style.transition = 'all 0.5s ease'; | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, index * 200); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |