<!-- views/success.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stripe Connection Success</title>
    <link rel="stylesheet" href="<%= process.env.APP_URL %>/css/main.css">

    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
        }
        section {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100%;
        }
       
        .container h1 {
            color: #4CAF50;
        }
        .container p {
            font-size: 16px;
            margin: 10px 0;
        }
        .url-field {
            background-color: #f1f1f1;
            border: 1px solid #ccc;
            padding: 10px;
            border-radius: 4px;
            word-break: break-all;
        }
        .btn{
    padding: 10px !important;
}
.btn-primary {
    background-color: var(--primary) !important;
    color: var(--white) !important;
    border-color: var(--primary) !important;
    border-radius: var(--btn-border-radius) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 145px;
    font-size: 1rem !important;
}
        .Custom-img {
  width: 300px;
}
        @media (max-width: 575.98px) { 
            .Custom-img {
  width: 260px !important;
} 
         }
    </style>
 
    <meta charset="utf-8">
    <link rel="icon" href="img/fav_icon.png"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Swizzle-Pay</title>
    <!-- Google-icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
    <!-- Fonts -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
    <!-- Custom Css -->
    <!-- Bootstrap core CSS-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- Bootstrap core JavaScript-->

    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>


 </head>
<body>
   

    <section>
        <div class="container">
        <div class="" id="staticBackdrop2" >
           
                
                    <div class="card stripe-card">
                        <div class="card-body">
                        <div class="row">
                            <div class="col-lg-4 col-md-6 col-sm-8  mx-auto">
                                <div class="text-center">
                                    <img class="img-fluid Custom-img" src="images/successtripe.png">
                                    <h3 class="mt-4">Success!</h3>
                                    <p class="gray mb-4">Your account is now enabled for payouts</p>
                                    <a href="<%= url %>" class="btn btn-primary w-100" >Get Started</a>
                        
                                </div>
                            </div>
                        </div>
                    </div>
                    </div>
                </div>
                            
        </div>
    </section>  



        <!-- <h1>Stripe Connected Successfully!</h1>
        <p>Your Stripe account has been connected.</p>
        <p>Here is your URL:</p>
        <div class="url-field">
            <a href="<%= url %>">Success</a>
        </div> -->

</body>
</html>


