HEX

File: /var/www/middleware-citas/resources/views/toku-redirect.blade.php
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redireccionando a Toku</title>
    <link rel="shortcut icon" href="{{ asset(URL_LOGO_FAVICON) }}">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
        }

        .container {
            text-align: center;
        }

        .message {
            font-size: 1.6rem;
            color: #ffffff;
            letter-spacing: 2px;
            animation: fadeInUp 1s ease-out forwards, pulse 2s ease-in-out 1s infinite;
            opacity: 0;
        }

        .message span {
            display: inline-block;
            animation: wave 1.5s ease-in-out infinite;
        }

        .message span:nth-child(1) {
            animation-delay: 0s;
        }

        .message span:nth-child(2) {
            animation-delay: 0.1s;
        }

        .message span:nth-child(3) {
            animation-delay: 0.2s;
        }

        .dots {
            display: inline-block;
            font-size: 1.6rem;
            color: #a78bfa;
            letter-spacing: 4px;
        }

        .dots span {
            animation: dotBounce 1.4s ease-in-out infinite;
            display: inline-block;
        }

        .dots span:nth-child(1) {
            animation-delay: 0s;
        }

        .dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

        .subtitle {
            margin-top: 1rem;
            font-size: 0.95rem;
            color: #a0a0b8;
            animation: fadeInUp 1s ease-out 0.5s forwards;
            opacity: 0;
        }

        .spinner-wrapper {
            margin: 2rem auto 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
            opacity: 0;
        }

        .spinner {
            width: 40px;
            height: 40px;
            margin: 0 auto;
            border: 3px solid rgba(167, 139, 250, 0.2);
            border-top: 3px solid #a78bfa;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.85;
            }
        }

        @keyframes dotBounce {

            0%,
            80%,
            100% {
                transform: translateY(0);
                opacity: 0.4;
            }

            40% {
                transform: translateY(-8px);
                opacity: 1;
            }
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="message">
            Redireccionando a Toku para gestionar su pago
            <span class="dots">
                <span>.</span><span>.</span><span>.</span>
            </span>
        </div>
        <p class="subtitle">Por favor, espere un momento</p>
        <div class="spinner-wrapper">
            <div class="spinner"></div>
        </div>
    </div>
    <script nonce="{{ app('csp_nonce') }}">
        var params = @json($params);
        var query = new URLSearchParams(params).toString();

        fetch("{{ route('payment-build-url') }}?" + query)
            .then(function (res) { return res.json(); })
            .then(function (data) {
                if (data.payment_url) {
                    window.location.href = data.payment_url;
                }
            })
            .catch(function () {
                window.location.href = "{{ route('pago-fallido') }}";
            });
    </script>
</body>

</html>