Spaces:

scottlily6
/

anycoder-7d4ec6fa

Running

App Files Files Community

scottlily6 commited on about 1 month ago

Commit

16a6a64

verified ·

1 Parent(s): 6803a12

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +855 -19

index.html CHANGED Viewed

@@ -1,19 +1,855 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Banesco - Fallo de Transacción</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --banesco-green: #007953;
+            --banesco-dark: #005a3d;
+            --banesco-light: #00a378;
+            --khaki-bg: #8F9779;
+            --khaki-light: #b5bda8;
+            --white: #ffffff;
+            --error-red: #dc3545;
+            --warning-orange: #fd7e14;
+            --text-dark: #2c3e50;
+            --shadow: rgba(0, 0, 0, 0.15);
+            --glass-bg: rgba(255, 255, 255, 0.95);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, var(--khaki-bg) 0%, #7a8565 100%);
+            min-height: 100vh;
+            color: var(--text-dark);
+            line-height: 1.6;
+        }
+        /* Header Styles */
+        header {
+            background: linear-gradient(135deg, var(--banesco-green) 0%, var(--banesco-dark) 100%);
+            color: var(--white);
+            padding: 1rem 0;
+            box-shadow: 0 4px 20px var(--shadow);
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            backdrop-filter: blur(10px);
+        }
+        .header-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+        .logo-section {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            flex: 1;
+        }
+        .logo-input-group {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
+            flex: 1;
+            max-width: 400px;
+        }
+        .logo-input-group label {
+            font-size: 0.75rem;
+            opacity: 0.9;
+            font-weight: 500;
+        }
+        .logo-input-group input {
+            padding: 0.5rem 1rem;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-radius: 8px;
+            background: rgba(255,255,255,0.1);
+            color: white;
+            font-size: 0.9rem;
+            transition: all 0.3s ease;
+        }
+        .logo-input-group input::placeholder {
+            color: rgba(255,255,255,0.6);
+        }
+        .logo-input-group input:focus {
+            outline: none;
+            border-color: white;
+            background: rgba(255,255,255,0.2);
+        }
+        .logo-display {
+            height: 50px;
+            width: auto;
+            object-fit: contain;
+            filter: brightness(0) invert(1);
+        }
+        .anycoder-badge {
+            background: rgba(255,255,255,0.2);
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            text-decoration: none;
+            color: white;
+            transition: all 0.3s ease;
+            border: 1px solid rgba(255,255,255,0.3);
+        }
+        .anycoder-badge:hover {
+            background: rgba(255,255,255,0.3);
+            transform: translateY(-2px);
+        }
+        /* Navigation */
+        nav {
+            background: rgba(0,0,0,0.1);
+            padding: 0.5rem 0;
+        }
+        .nav-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            display: flex;
+            gap: 2rem;
+            overflow-x: auto;
+        }
+        .nav-item {
+            color: white;
+            text-decoration: none;
+            font-weight: 500;
+            padding: 0.5rem 0;
+            border-bottom: 2px solid transparent;
+            transition: all 0.3s;
+            white-space: nowrap;
+        }
+        .nav-item:hover, .nav-item.active {
+            border-bottom-color: white;
+        }
+        /* Main Content */
+        main {
+            max-width: 1200px;
+            margin: 2rem auto;
+            padding: 0 2rem;
+        }
+        .transaction-container {
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 2rem;
+            margin-bottom: 3rem;
+        }
+        @media (min-width: 768px) {
+            .transaction-container {
+                grid-template-columns: 1fr 1fr;
+            }
+        }
+        /* Alert Card */
+        .alert-card {
+            background: var(--glass-bg);
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 10px 40px var(--shadow);
+            border-left: 6px solid var(--error-red);
+            position: relative;
+            overflow: hidden;
+        }
+        .alert-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 200px;
+            height: 200px;
+            background: linear-gradient(135deg, transparent 50%, rgba(220, 53, 69, 0.1) 50%);
+            border-radius: 0 0 0 100%;
+        }
+        .alert-header {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1.5rem;
+        }
+        .alert-icon {
+            width: 60px;
+            height: 60px;
+            background: linear-gradient(135deg, var(--error-red), #c82333);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2rem;
+            color: white;
+            box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
+            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: #666;
+            font-size: 0.9rem;
+        }
+        .error-details {
+            background: rgba(220, 53, 69, 0.05);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-top: 1rem;
+            border: 1px solid rgba(220, 53, 69, 0.2);
+        }
+        .error-code {
+            display: inline-block;
+            background: var(--error-red);
+            color: white;
+            padding: 0.25rem 0.75rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            margin-bottom: 1rem;
+        }
+        .error-message {
+            color: var(--text-dark);
+            font-size: 1.1rem;
+            line-height: 1.6;
+        }
+        .error-highlight {
+            color: var(--error-red);
+            font-weight: 700;
+        }
+        /* Account Details Card */
+        .details-card {
+            background: var(--glass-bg);
+            border-radius: 20px;
+            padding: 2rem;
+            box-shadow: 0 10px 40px var(--shadow);
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+        }
+        .card-header {
+            border-bottom: 2px solid #eee;
+            padding-bottom: 1rem;
+        }
+        .card-title {
+            font-size: 1.25rem;
+            color: var(--banesco-green);
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .balance-display {
+            background: linear-gradient(135deg, var(--banesco-green), var(--banesco-light));
+            color: white;
+            padding: 2rem;
+            border-radius: 16px;
+            text-align: center;
+            box-shadow: 0 8px 25px rgba(0, 121, 83, 0.3);
+        }
+        .balance-label {
+            font-size: 0.9rem;
+            opacity: 0.9;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 0.5rem;
+        }
+        .balance-amount {
+            font-size: 2.5rem;
+            font-weight: 700;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+        .detail-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 1rem;
+            background: rgba(0,0,0,0.03);
+            border-radius: 10px;
+            transition: all 0.3s;
+        }
+        .detail-row:hover {
+            background: rgba(0,0,0,0.05);
+            transform: translateX(5px);
+        }
+        .detail-label {
+            font-weight: 600;
+            color: #666;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .detail-value {
+            font-weight: 700;
+            color: var(--text-dark);
+            font-family: 'Courier New', monospace;
+        }
+        .stamp-warning {
+            background: linear-gradient(135deg, #fff3cd, #ffeeba);
+            border: 2px solid var(--warning-orange);
+            border-radius: 12px;
+            padding: 1.5rem;
+            margin-top: 1rem;
+            position: relative;
+        }
+        .stamp-warning::before {
+            content: '⚠️';
+            position: absolute;
+            top: -15px;
+            left: 20px;
+            background: white;
+            padding: 0 10px;
+            font-size: 1.5rem;
+        }
+        .stamp-amount {
+            font-size: 1.5rem;
+            color: var(--warning-orange);
+            font-weight: 700;
+            text-align: center;
+            margin-top: 0.5rem;
+        }
+        /* Action Buttons */
+        .actions {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+            margin-top: 1rem;
+        }
+        .btn {
+            padding: 1rem 2rem;
+            border: none;
+            border-radius: 10px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 1rem;
+            flex: 1;
+            min-width: 200px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, var(--banesco-green), var(--banesco-light));
+            color: white;
+            box-shadow: 0 4px 15px rgba(0, 121, 83, 0.4);
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 121, 83, 0.6);
+        }
+        .btn-secondary {
+            background: white;
+            color: var(--banesco-green);
+            border: 2px solid var(--banesco-green);
+        }
+        .btn-secondary:hover {
+            background: var(--banesco-green);
+            color: white;
+        }
+        .btn-danger {
+            background: white;
+            color: var(--error-red);
+            border: 2px solid var(--error-red);
+        }
+        .btn-danger:hover {
+            background: var(--error-red);
+            color: white;
+        }
+        /* Footer */
+        footer {
+            background: linear-gradient(135deg, var(--banesco-green) 0%, var(--banesco-dark) 100%);
+            color: white;
+            padding: 3rem 0 2rem;
+            margin-top: 4rem;
+        }
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2rem;
+        }
+        .footer-section h3 {
+            margin-bottom: 1rem;
+            font-size: 1.1rem;
+            opacity: 0.9;
+        }
+        .footer-section p, .footer-section a {
+            color: rgba(255,255,255,0.8);
+            text-decoration: none;
+            line-height: 1.8;
+            font-size: 0.9rem;
+        }
+        .footer-section a:hover {
+            color: white;
+            text-decoration: underline;
+        }
+        .footer-bottom {
+            text-align: center;
+            margin-top: 2rem;
+            padding-top: 2rem;
+            border-top: 1px solid rgba(255,255,255,0.2);
+            color: rgba(255,255,255,0.6);
+            font-size: 0.85rem;
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .header-container {
+                flex-direction: column;
+                text-align: center;
+            }
+            .logo-input-group {
+                max-width: 100%;
+                width: 100%;
+            }
+            .balance-amount {
+                font-size: 1.75rem;
+            }
+            .alert-title {
+                font-size: 1.25rem;
+            }
+            .nav-container {
+                gap: 1rem;
+            }
+        }
+        /* Loading Animation */
+        .processing {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.8);
+            z-index: 9999;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            gap: 2rem;
+        }
+        .processing.active {
+            display: flex;
+        }
+        .spinner {
+            width: 80px;
+            height: 80px;
+            border: 6px solid rgba(255,255,255,0.3);
+            border-top-color: var(--banesco-green);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .processing-text {
+            color: white;
+            font-size: 1.25rem;
+            font-weight: 500;
+        }
+        /* Icons */
+        .icon::before {
+            display: inline-block;
+            font-style: normal;
+            font-variant: normal;
+            text-rendering: auto;
+            -webkit-font-smoothing: antialiased;
+        }
+    </style>
+</head>
+<body>
+    <!-- Processing Overlay -->
+    <div class="processing" id="processingOverlay">
+        <div class="spinner"></div>
+        <div class="processing-text">Procesando solicitud...</div>
+    </div>
+    <!-- Header -->
+    <header>
+        <div class="header-container">
+            <div class="logo-section">
+                <img src="https://via.placeholder.com/150x50/007953/ffffff?text=BANESCO" alt="Banesco Logo" class="logo-display" id="logoImage">
+                <div class="logo-input-group">
+                    <label for="logoUrl">URL del Logo (.png)</label>
+                    <input type="url" id="logoUrl" placeholder="https://ejemplo.com/logo.png" onchange="updateLogo()">
+                </div>
+            </div>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-badge">
+                Built with anycoder 🤗
+            </a>
+        </div>
+        <nav>
+            <div class="nav-container">
+                <a href="#" class="nav-item">Inicio</a>
+                <a href="#" class="nav-item">Cuentas</a>
+                <a href="#" class="nav-item active">Transferencias</a>
+                <a href="#" class="nav-item">Pagos</a>
+                <a href="#" class="nav-item">Servicios</a>
+                <a href="#" class="nav-item">Ayuda</a>
+            </div>
+        </nav>
+    </header>
+    <!-- Main Content -->
+    <main>
+        <div class="transaction-container">
+            <!-- Error Alert Section -->
+            <div class="alert-card">
+                <div class="alert-header">
+                    <div class="alert-icon">✕</div>
+                    <div>
+                        <div class="alert-title">Transacción Fallida</div>
+                        <div class="alert-subtitle">Operación #TXN-7845291</div>
+                    </div>
+                </div>
+                <div class="error-details">
+                    <span class="error-code">ERROR_DOC_001</span>
+                    <p class="error-message">
+                        No se puede completar la transferencia debido a <span class="error-highlight">documentación incompleta</span>.
+                        El timbre fiscal no está aplicado correctamente a su cuenta.
+                    </p>
+                </div>
+                <div class="stamp-warning">
+                    <h4 style="color: #856404; margin-bottom: 0.5rem;">Timbre Fiscal Requerido</h4>
+                    <p style="color: #856404; font-size: 0.9rem;">
+                        Para completar transacciones internacionales o de alto valor, es obligatorio tener el timbre fiscal actualizado.
+                    </p>
+                    <div class="stamp-amount">
+                        €200.00 <small style="font-size: 0.8rem; color: #666;">(Impuesto de Timbre)</small>
+                    </div>
+                </div>
+                <div class="actions" style="margin-top: 2rem;">
+                    <button class="btn btn-primary" onclick="fixStamp()">
+                        <span>💳</span> Aplicar Timbre Ahora
+                    </button>
+                    <button class="btn btn-secondary" onclick="contactSupport()">
+                        <span>📞</span> Contactar Soporte
+                    </button>
+                </div>
+            </div>
+            <!-- Account Details Section -->
+            <div class="details-card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <span>🏦</span> Detalles de la Cuenta
+                    </div>
+                </div>
+                <div class="balance-display">
+                    <div class="balance-label">Saldo Disponible</div>
+                    <div class="balance-amount">€650,000.00</div>
+                </div>
+                <div style="margin-top: 1rem;">
+                    <div class="detail-row">
+                        <span class="detail-label">
+                            <span>📤</span> Cuenta Origen:
+                        </span>
+                        <span class="detail-value">**** **** **** 4521</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">
+                            <span>📥</span> Cuenta Destino:
+                        </span>
+                        <span class="detail-value">7546629 01145569604</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">
+                            <span>💶</span> Monto a Transferir:
+                        </span>
+                        <span class="detail-value" style="color: var(--banesco-green);">Consultar Saldo</span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">
+                            <span>📅</span> Fecha:
+                        </span>
+                        <span class="detail-value" id="currentDate"></span>
+                    </div>
+                    <div class="detail-row">
+                        <span class="detail-label">
+                            <span>⏱️</span> Estado:
+                        </span>
+                        <span class="detail-value" style="color: var(--error-red);">⏸️ PENDIENTE</span>
+                    </div>
+                </div>
+                <div style="background: #f8f9fa; padding: 1rem; border-radius: 10px; margin-top: 1rem; font-size: 0.85rem; color: #666;">
+                    <strong>Nota:</strong> La transacción permanecerá en estado pendiente durante 24 horas mientras se resuelve la inconsistencia documental. Pasado este tiempo, será cancelada automáticamente.
+                </div>
+                <div class="actions">
+                    <button class="btn btn-danger" onclick="cancelTransaction()">
+                        <span>🚫</span> Cancelar Operación
+                    </button>
+                    <button class="btn btn-secondary" onclick="downloadReport()">
+                        <span>📄</span> Descargar Reporte
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Additional Information -->
+        <div style="background: var(--glass-bg); padding: 2rem; border-radius: 20px; box-shadow: 0 10px 40px var(--shadow); margin-top: 2rem;">
+            <h3 style="color: var(--banesco-green); margin-bottom: 1rem;">¿Qué es el Timbre Fiscal?</h3>
+            <p style="color: #666; line-height: 1.8; margin-bottom: 1rem;">
+                El timbre fiscal es un impuesto obligatorio establecido por la normativa bancaria europea para transacciones que exceden ciertos umbrales o que involucran transferencias internacionales. Este impuesto debe estar correctamente registrado en su cuenta antes de realizar operaciones de alto valor.
+            </p>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1.5rem;">
+                <div style="padding: 1rem; background: rgba(0,121,83,0.05); border-radius: 10px; border-left: 4px solid var(--banesco-green);">
+                    <strong style="color: var(--banesco-green); display: block; margin-bottom: 0.5rem;">Pago Único</strong>
+                    <span style="font-size: 0.9rem; color: #666;">El timbre se paga una sola vez y es válido por 12 meses.</span>
+                </div>
+                <div style="padding: 1rem; background: rgba(0,121,83,0.05); border-radius: 10px; border-left: 4px solid var(--banesco-green);">
+                    <strong style="color: var(--banesco-green); display: block; margin-bottom: 0.5rem;">Cobertura Total</strong>
+                    <span style="font-size: 0.9rem; color: #666;">Cubre todas las transacciones hasta un límite agregado de €5,000,000.</span>
+                </div>
+                <div style="padding: 1rem; background: rgba(0,121,83,0.05); border-radius: 10px; border-left: 4px solid var(--banesco-green);">
+                    <strong style="color: var(--banesco-green); display: block; margin-bottom: 0.5rem;">Proceso Rápido</strong>
+                    <span style="font-size: 0.9rem; color: #666;">Una vez aplicado, la activación es inmediata.</span>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer>
+        <div class="footer-content">
+            <div class="footer-section">
+                <h3>Banesco Banco Universal</h3>
+                <p>Servicios financieros seguros y confiables para todos sus necesidades bancarias.</p>
+                <p style="margin-top: 1rem;">
+                    <strong>Teléfono:</strong> +34 900 123 456<br>
+                    <strong>Email:</strong> soporte@banesco.es
+                </p>
+            </div>
+            <div class="footer-section">
+                <h3>Enlaces Rápidos</h3>
+                <p>
+                    <a href="#">Estado de Cuenta</a><br>
+                    <a href="#">Transferencias Internacionales</a><br>
+                    <a href="#">Documentación Requerida</a><br>
+                    <a href="#">Límites y Comisiones</a>
+                </p>
+            </div>
+            <div class="footer-section">
+                <h3>Seguridad</h3>
+                <p>
+                    <a href="#">Centro de Seguridad</a><br>
+                    <a href="#">Reportar Fraude</a><br>
+                    <a href="#">Política de Privacidad</a><br>
+                    <a href="#">Términos y Condiciones</a>
+                </p>
+            </div>
+            <div class="footer-section">
+                <h3>Oficinas</h3>
+                <p>
+                    Madrid: Calle Mayor 15<br>
+                    Barcelona: Passeig de Gràcia 50<br>
+                    Valencia: Plaza del Ayuntamiento 8
+                </p>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>&copy; 2024 Banesco Banco Universal. Todos los derechos reservados. | NIF: A12345678</p>
+        </div>
+    </footer>
+    <script>
+        // Set current date
+        document.getElementById('currentDate').textContent = new Date().toLocaleDateString('es-ES', {
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+        // Update logo function
+        function updateLogo() {
+            const url = document.getElementById('logoUrl').value;
+            if (url) {
+                document.getElementById('logoImage').src = url;
+            }
+        }
+        // Show processing overlay
+        function showProcessing() {
+            document.getElementById('processingOverlay').classList.add('active');
+        }
+        function hideProcessing() {
+            document.getElementById('processingOverlay').classList.remove('active');
+        }
+        // Fix stamp action
+        function fixStamp() {
+            showProcessing();
+            setTimeout(() => {
+                hideProcessing();
+                alert('Redirigiendo al sistema de pagos de timbre fiscal...\n\nSe procederá al cobro de €200.00 para activar el timbre fiscal en su cuenta.\n\nMétodos de pago aceptados:\n- Tarjeta de Débito/Crédito\n- Transferencia bancaria inmediata\n- Domiciliación bancaria');
+            }, 1500);
+        }
+        // Contact support
+        function contactSupport() {
+            const message = `Asunto: Fallo de Transacción - Timbre Fiscal Pendiente\n\nEstimado cliente,\n\nHemos registrado su consulta sobre la transacción fallida #TXN-7845291.\n\nUn agente de soporte se pondrá en contacto con usted en las próximas 24 horas.\n\nMientras tanto, puede:\n1. Aplicar el timbre fiscal automáticamente (€200.00)\n2. Visitar una sucursal física con documentación adicional\n3. Esperar a que un agente le contacte\n\nGracias por su paciencia.`;
+            alert(message);
+        }
+        // Cancel transaction
+        function cancelTransaction() {
+            if (confirm('¿Está seguro de que desea cancelar esta transacción?\n\nLa operación #TXN-7845291 será eliminada permanentemente.')) {
+                showProcessing();
+                setTimeout(() => {
+                    hideProcessing();
+                    alert('Transacción cancelada exitosamente.\n\nSe ha enviado un correo de confirmación a su dirección registrada.');
+                    // Visual feedback
+                    document.querySelector('.alert-title').textContent = 'Transacción Cancelada';
+                    document.querySelector('.alert-title').style.color = '#666';
+                    document.querySelector('.alert-icon').style.background = '#666';
+                    document.querySelector('.alert-icon').textContent = '✓';
+                }, 1500);
+            }
+        }
+        // Download report
+        function downloadReport() {
+            const reportContent = `
+REPORTE DE TRANSACCIÓN FALLIDA
+===============================
+Banco: Banesco Banco Universal
+Fecha: ${new Date().toLocaleString('es-ES')}
+DETALLES DE LA OPERACIÓN:
+- Número de Transacción: TXN-7845291
+- Estado: FALLIDA - Documentación incompleta
+- Cuenta Origen: **** **** **** 4521
+- Cuenta Destino: 7546629 01145569604
+- Saldo Disponible: €650,000.00
+ERROR DETECTADO:
+- Código: ERROR_DOC_001
+- Descripción: Timbre fiscal no aplicado
+- Solución: Pago de €200.00 para activación del timbre
+ACCIONES REQUERIDAS:
+1. Aplicar timbre fiscal (€200.00)
+2. Reintentar la operación
+3. O contactar soporte técnico
+Este documento es una constancia oficial del intento de operación.
+            `;
+            const blob = new Blob([reportContent], { type: 'text/plain' });
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `Reporte_Fallo_Transaccion_${Date.now()}.txt`;
+            a.click();
+            window.URL.revokeObjectURL(url);
+        }
+        // Add some interactive hover effects
+        document.querySelectorAll('.detail-row').forEach(row => {
+            row.addEventListener('mouseenter', function() {
+                this.style.borderLeft = '4px solid var(--banesco-green)';
+            });
+            row.addEventListener('mouseleave', function() {
+                this.style.borderLeft = 'none';
+            });
+        });
+    </script>
+</body>
+</html>