88 lines
4.5 KiB
HTML
88 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
|
<title>Pago Completado - IntegraRepara</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
:root { --app-bg: #f8fafc; }
|
|
body { background-color: var(--app-bg); }
|
|
.pop-in { animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
@keyframes popIn {
|
|
0% { opacity: 0; transform: scale(0.8) translateY(20px); }
|
|
100% { opacity: 1; transform: scale(1) translateY(0); }
|
|
}
|
|
.success-pulse { animation: successPulse 2s infinite; }
|
|
@keyframes successPulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
|
|
70% { box-shadow: 0 0 0 15px rgba(34, 197, 94, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-slate-800 font-sans antialiased min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
|
|
|
|
<div class="absolute -top-20 -right-20 w-64 h-64 bg-emerald-200/40 rounded-full blur-3xl"></div>
|
|
<div class="absolute -bottom-20 -left-20 w-64 h-64 bg-blue-200/40 rounded-full blur-3xl"></div>
|
|
|
|
<div class="max-w-sm w-full bg-white rounded-[2rem] shadow-[0_20px_60px_rgba(0,0,0,0.05)] border border-slate-100 p-8 text-center pop-in relative z-10">
|
|
|
|
<div class="w-24 h-24 bg-emerald-100 text-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6 success-pulse border-4 border-white shadow-sm">
|
|
<i data-lucide="check-circle" class="w-12 h-12"></i>
|
|
</div>
|
|
|
|
<h1 class="text-2xl font-black tracking-tight text-slate-900 mb-2">¡Pago Exitoso!</h1>
|
|
<p class="text-sm text-slate-500 font-medium leading-relaxed mb-6">Hemos recibido tu pago correctamente. La oficina acaba de ser notificada.</p>
|
|
|
|
<div class="bg-slate-50 rounded-2xl p-4 border border-slate-100 mb-8 flex justify-between items-center text-left">
|
|
<div>
|
|
<p class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-0.5">Referencia del recibo</p>
|
|
<p class="text-sm font-bold text-slate-700" id="refNumber">Cargando...</p>
|
|
</div>
|
|
<div class="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow-sm border border-slate-100 text-emerald-500">
|
|
<i data-lucide="receipt" class="w-5 h-5"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="cerrarVentana()" class="w-full bg-slate-800 hover:bg-slate-700 text-white font-black py-4 rounded-2xl shadow-xl transition-all uppercase tracking-widest text-[11px] flex items-center justify-center gap-2 active:scale-95">
|
|
<i data-lucide="check" class="w-4 h-4"></i> Entendido
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Inicializar iconos
|
|
lucide.createIcons();
|
|
|
|
// Extraer el ID del presupuesto mágicamente de la URL que te mandó Stripe
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const budgetId = urlParams.get('budget_id');
|
|
|
|
if (budgetId) {
|
|
document.getElementById('refNumber').innerText = `PRE-${budgetId}`;
|
|
} else {
|
|
document.getElementById('refNumber').innerText = `Abono Confirmado`;
|
|
}
|
|
|
|
// Función para cerrar la pantalla y volver
|
|
function cerrarVentana() {
|
|
// En el móvil, cuando abres un link desde WhatsApp/App, window.close() a veces funciona
|
|
window.close();
|
|
|
|
// Como plan B (por si el navegador bloquea el cierre automático), le mostramos un mensaje amigable
|
|
document.body.innerHTML = `
|
|
<div class="min-h-screen flex flex-col items-center justify-center text-center p-6 pop-in w-full">
|
|
<div class="w-16 h-16 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center mb-4 border border-slate-200 shadow-sm">
|
|
<i data-lucide="smartphone" class="w-8 h-8"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-black tracking-tight text-slate-800 mb-2">Todo listo</h2>
|
|
<p class="text-sm text-slate-500 font-medium">Ya puedes cerrar esta pestaña y volver a la aplicación o a tu WhatsApp.</p>
|
|
</div>
|
|
`;
|
|
lucide.createIcons();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |