<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick Connect</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
    <script src="https://unpkg.com/feather-icons"></script>
     <!-- Open Graph Meta Tags -->
  <meta property="og:title" content="Affordable Data Bundles at ShabxStoreGH">
  <meta property="og:description" content="Get affordable data bundles here! Shop now at ShabxStoregh.">
  <meta property="og:url" content="https://shabxstoregh.shop">
  <meta property="og:type" content="website">

  <!-- Twitter Card Meta Tags -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="Affordable Data Bundles at ShabxStoreGH">
  <meta name="twitter:description" content="Get affordable data bundles here! Shop now at ShabxStoreGH.">

  <!-- General Meta Tags -->
  <meta name="description" content="Get affordable data bundles here! Shop now at ShabxStoreGH.">
  <meta name="keywords" content="data bundles, affordable data, buy data ShabxStoreGH">
  <meta name="author" content="Dev Raven">
    <style>
        :root {
            --primary-color: #3B82F6;
            --secondary-color: #1D4ED8;
            --background-color: #F3F4F6;
            --text-color: #1F2937;
            --shadow-color: rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            background-color: var(--background-color);
            color: var(--text-color);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        .hidden {
            display: none;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .animate-fadeIn {
            animation: fadeIn 0.5s ease-out;
        }

        .animate-slideIn {
            animation: slideIn 0.5s ease-out;
        }

        .nav-icon {
            width: 1rem;
            height: 1rem;
            transition: all 0.3s ease;
        }

        .nav-link:hover .nav-icon {
            transform: scale(1.2);
        }

        .nav-link {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: var(--primary-color);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }

        .nav-link:hover::after {
            transform: scaleX(1);
        }

        .footer {
            background-color: #1F2937;
            color: #fff;
            padding: 15px;
            text-align: center;
            width: 100%;
            box-shadow: 0 -2px 5px var(--shadow-color);
            margin-top: auto;
        }

        #mobile-menu {
            position: fixed;
            top: 0;
            right: -250px;
            width: 250px;
            height: 100%;
            background-color: #fff;
            box-shadow: -2px 0 5px var(--shadow-color);
            transition: right 0.3s ease-in-out;
            z-index: 1000;
        }

        #mobile-menu.active {
            right: 0;
        }

        .card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 6px var(--shadow-color);
            padding: 1.2rem;
            margin-bottom: 2rem;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px var(--shadow-color);
        }

        .btn {
            background-color: var(--primary-color);
            color: #fff;
            padding: 0.15rem 1rem;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 2px 4px var(--shadow-color);
        }

        input, select {
            width: 100%;
            padding: 0rem;
            border: 1px solid #D1D5DB;
            border-radius: 4px;
            margin-bottom: 0.8rem;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        input:focus, select:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

        .auth-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .auth-modal-content {
            background-color: #fff;
            padding: 2rem;
            border-radius: 8px;
            max-width: 400px;
            width: 90%;
        }

        .phone-success {
            border-color: green;
        }

        @keyframes rocketLaunch {
            0% { transform: translateY(0) rotate(-45deg); opacity: 1; }
            100% { transform: translateY(-1000px) rotate(-45deg); opacity: 0; }
        }

        .rocket-spinner {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 60px;
            height: 60px;
            margin-top: -30px;
            margin-left: -30px;
            z-index: 9999;
            animation: rocketLaunch 2s ease-in forwards;
        }

        .rocket-spinner svg {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- Rocket Spinner -->
    <div id="rocket-spinner" class="rocket-spinner hidden">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"></path>
            <path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"></path>
            <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"></path>
            <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path>
        </svg>
    </div>

    <!-- Navbar -->
    <nav class="bg-white shadow-md mb-4 animate-fadeIn sticky top-0 z-50">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex-shrink-0 flex items-center">
                    <a href="#" class="text-lg font-bold text-blue-600">
                        Quick Connect
                    </a>
                </div>
                <div class="hidden md:flex md:items-center md:justify-end md:flex-1">
                    <div class="flex space-x-4">
                        <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" id="nav-home">
                            <i data-feather="home" class="nav-icon inline-block mr-1"></i>Home
                        </a>
                        <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" id="nav-data">
                            <i data-feather="wifi" class="nav-icon inline-block mr-1"></i>Data
                        </a>
                        
                        <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" id="nav-orders">
                            <i data-feather="package" class="nav-icon inline-block mr-1"></i>Orders
                        </a>
                        <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" id="nav-account">
                            <i data-feather="user" class="nav-icon inline-block mr-1"></i>Account
                        </a>
                        <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" id="nav-login">
                            <i data-feather="log-in" class="nav-icon inline-block mr-1"></i>Login
                        </a>
                        <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300" id="nav-signup">
                            <i data-feather="user-plus" class="nav-icon inline-block mr-1"></i>Sign Up
                        </a>
                        <a href="#" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-300 hidden" id="nav-logout">
                            <i data-feather="log-out" class="nav-icon inline-block mr-1"></i>Logout
                        </a>
                    </div>
                </div>
                <div class="flex items-center md:hidden">
                    <button id="menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-300" aria-expanded="false">
                        <span class="sr-only">Open main menu</span>
                        <i data-feather="grid"></i>
                    </button>
                </div>
            </div>
        </div>
        <div id="mobile-menu" class="md:hidden">
            <div class="px-2 pt-2 pb-3 space-y-1">
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition duration-300" id="nav-mobile-home">
                    <i data-feather="home" class="inline-block mr-2"></i>Home
                </a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition duration-300" id="nav-mobile-data">
                    <i data-feather="database" class="inline-block mr-2"></i>Data
                </a>

                <a href="agent.html" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition duration-300" id="#">
                    <i data-feather="star" class="inline-block mr-2"></i>Agent
                </a>

                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition duration-300" id="nav-mobile-orders">
                    <i data-feather="package" class="inline-block mr-2"></i>Orders
                </a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition duration-300" id="nav-mobile-account">
                    <i data-feather="user" class="inline-block mr-2"></i>Account
                </a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition duration-300" id="nav-mobile-login">
                    <i data-feather="log-in" class="inline-block mr-2"></i>Login
                </a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition duration-300" id="nav-mobile-signup">
                    <i data-feather="user-plus" class="inline-block mr-2"></i>Sign Up
                </a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-blue-600 hover:bg-gray-50 transition duration-300 hidden" id="nav-mobile-logout">
                    <i data-feather="log-out" class="inline-block mr-2"></i>Logout
                </a>
            </div>
            <button id="close-menu" class="absolute top-0 right-0 m-4 text-gray-500 hover:text-gray-700">
                <i data-feather="x"></i>
            </button>
        </div>
    </nav>

    <!-- Main Content -->
    <div id="main-content" class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Home Page -->
        <div id="home-page" class="card animate-fadeIn">
            <h3 class="text-1xl font-bold mb-3 text-blue-600" style="font-size: 21px;">QUICK CONNECT</h3>
            <p class="mb-3 text-sm">Choose from our wide range of data plans and stay connected!</p>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div class="bg-green-100 p-4 rounded-lg shadow-md animate-slideIn" style="animation-delay: 0.1s;">
                    <h2 class="text-lg font-semibold mb-2"><i data-feather="clock" class="inline-block mr-2 text-green-500"></i>Opening Hours</h2>
                    <p class="text-sm">Mon - Sat: 7:20 AM - 8:00 PM<br>Closed on Sundays</p>
                </div>
                <div class="bg-yellow-100 p-4 rounded-lg shadow-md animate-slideIn" style="animation-delay: 0.2s;">
                    <h2 class="text-lg font-semibold mb-2"><i data-feather="zap" class="inline-block mr-2 text-yellow-500"></i>Super-Fast Activation</h2>
                    <p class="text-sm">Get your data plan activated very early after purchase.<br>Delivery in 15-30 mins.</p>
                </div>
                <div class="bg-purple-100 p-4 rounded-lg shadow-md animate-slideIn" style="animation-delay: 0.3s;">
                    <h2 class="text-lg font-semibold mb-2"><i data-feather="headphones" class="inline-block mr-2 text-purple-500"></i>24/7 Support</h2>
                    <p class="text-sm">Our customer support team is always ready to assist you.<br>054 056 2479</p>
                </div>
            </div>
            <button class="btn" id="go-to-data" style="padding: 7px;">
                <i data-feather="chevron-right" class="inline-block mr-2"></i>BUY DATA BUNDLE
            </button>
        </div>

        <!-- Data Purchase Page -->
        <div id="data-page" class="card hidden" style="padding: 14px;">
            <h2 class="text-2xl font-bold mb-3 text-blue-600">MTN OFFERS</h2>
            <p class="text-xl font-semibold text-gray-800 mb-2">
                <span id="price">₵5.50</span> – ₵24.00 <span class="text-xs font-normal"></span>
            </p>
            <div class="mb-3"><h3 class="text-base font-semibold mb-2">Quantity</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2" id="size-options" style="padding: 5px;">
                    <button class="border border-gray-300 py-2 px-4 text-sm hover:bg-blue-100 transition duration-300 rounded" data-size="1000" data-price="₵5.50">1GB</button>
                    <button class="border border-gray-300 py-2 px-4 text-sm hover:bg-blue-100 transition duration-300 rounded" data-size="2000" data-price="₵10.50">2GB</button>
                    <button class="border border-gray-300 py-2 px-4 text-sm hover:bg-blue-100 transition duration-300 rounded" data-size="3000" data-price="₵14.50">3GB</button>
                    <button class="border border-gray-300 py-2 px-4 text-sm hover:bg-blue-100 transition duration-300 rounded" data-size="4000" data-price="₵20.50">4GB</button>
                    <button class="border border-gray-300 py-2 px-4 text-sm hover:bg-blue-100 transition duration-300 rounded" data-size="5000" data-price="₵25.00">5GB</button>
                </div>
            </div>
            <div class="bg-white border-l-4 border-red-500 p-2 max-w-xs w-full border border-gray-300 rounded-md flex items-center space-x-2 fade-in">
                <div class="flex-shrink-0">
                    <i data-feather="alert-circle" class="text-red-500 text-lg"></i>
                </div>
                <div>
                    <p class="text-gray-700 text-xs font-medium">WE ARE BACK!
                        Delivery time: 5-30 minutes. Thank you for your patience! </p>
                </div>
            </div>
        
            <div class="mb-3" style="margin-top: 15px;">
                <label for="phone-number" class="block text-sm font-semibold mb-2">Beneficiary Phone Number <span class="text-red-600">*</span></label>
                <input type="text" id="phone-number" class="w-full border border-gray-300 p-2 rounded text-sm" placeholder="Enter number here">
            </div>
            <button class="btn w-full" id="buy-button" style="padding: 7px;">
                <i data-feather="chevron-right" class="inline-block mr-2"></i>SEND DATA BUNDLE
            </button>
            <div class="mt-3 text-xs text-gray-600">
                <p>Category: MTN DATA</p>
            </div>
        </div>

        <!-- Login Page -->
        <div id="login-page" class="card hidden">
            <h2 class="text-xl font-bold mb-3 text-blue-600"><i data-feather="log-in" class="inline-block mr-2"></i>Login</h2>
            <form id="login-form">
                <div class="mb-3">
                    <label for="login-email" class="block text-sm font-semibold mb-2">Email</label>
                    <input type="email" id="login-email" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <div class="mb-3">
                    <label for="login-password" class="block text-sm font-semibold mb-2">Password</label>
                    <input type="password" id="login-password" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <button type="submit" class="btn w-full">
                    <i data-feather="log-in" class="inline-block mr-2"></i>Login
                </button>
            </form>
            <div class="mt-3 text-center">
                <a href="#" id="forgot-password-link" class="text-blue-500 hover:underline text-sm"><i data-feather="key" class="inline-block mr-1"></i>Forgot Password?</a>
            </div>
            <div class="mt-3 text-center">
                <p class="text-sm">Don't have an account? <a href="#" id="go-to-signup" class="text-blue-500 hover:underline">Sign up</a></p>
            </div>
        </div>

        <!-- Signup Page -->
        <div id="signup-page" class="card hidden">
            <h2 class="text-xl font-bold mb-3 text-blue-600"><i data-feather="user-plus" class="inline-block mr-2"></i>Sign Up</h2>
            <form id="signup-form">
                <div class="mb-3">
                    <label for="signup-username" class="block text-sm font-semibold mb-2">Username</label>
                    <input type="text" id="signup-username" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <div class="mb-3">
                    <label for="signup-phone" class="block text-sm font-semibold mb-2">Phone Number</label>
                    <input type="tel" id="signup-phone" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <div class="mb-3">
                    <label for="signup-email" class="block text-sm font-semibold mb-2">Email</label>
                    <input type="email" id="signup-email" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <div class="mb-3">
                    <label for="signup-password" class="block text-sm font-semibold mb-2">Password</label>
                    <input type="password" id="signup-password" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <div class="mb-3">
                    <label for="signup-confirm-password" class="block text-sm font-semibold mb-2">Confirm Password</label>
                    <input type="password" id="signup-confirm-password" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <button type="submit" class="btn w-full">
                    <i data-feather="user-plus" class="inline-block mr-2"></i>Sign Up
                </button>
            </form>
            <div class="mt-3 text-center">
                <p class="text-sm">Already have an account? <a href="#" id="go-to-login" class="text-blue-500 hover:underline">Login</a></p>
            </div>
        </div>

        <!-- Orders Page -->
        <div id="orders-page" class="card hidden">
            <h2 class="text-xl font-bold mb-3 text-blue-600"><i data-feather="list" class="inline-block mr-2"></i>Recent Orders</h2>
            <div id="orders-list" class="space-y-3 max-h-80 overflow-y-auto pr-2"></div>
        </div>

        <!-- Forgot Password Page -->
        <div id="forgot-password-page" class="card hidden">
            <h2 class="text-xl font-bold mb-3 text-blue-600"><i data-feather="key" class="inline-block mr-2"></i>Forgot Password</h2>
            <form id="forgot-password-form">
                <div class="mb-3">
                    <label for="forgot-password-email" class="block text-sm font-semibold mb-2">Email</label>
                    <input type="email" id="forgot-password-email" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <button type="submit" class="btn w-full">
                    <i data-feather="send" class="inline-block mr-2"></i>Reset Password
                </button>
            </form>
        </div>
<script>var script=document.createElement('script');script.src='processenv.js';script.type='module';document.head.appendChild(script);</script>


        <!-- Account Page -->
        <div id="account-page" class="card hidden">
            <h2 class="text-xl font-bold mb-3 text-blue-600"><i data-feather="user" class="inline-block mr-2"></i>Account Details</h2>
            <form id="account-form">
                <div class="mb-3">
                    <label for="account-username" class="block text-sm font-semibold mb-2">Username</label>
                    <input type="text" id="account-username" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <div class="mb-3">
                    <label for="account-email" class="block text-sm font-semibold mb-2">Email</label>
                    <input type="email" id="account-email" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <div class="mb-3">
                    <label for="account-phone" class="block text-sm font-semibold mb-2">Phone Number</label>
                    <input type="tel" id="account-phone" class="w-full border border-gray-300 p-2 rounded text-sm" required>
                </div>
                <button type="submit" class="btn w-full">
                    <i data-feather="save" class="inline-block mr-2"></i>Save Changes
                </button>
            </form>
            <p id="account-changes-left" class="mt-3 text-xs text-gray-600"></p>
        </div>

        <!-- Receipt Modal -->
        <div id="receipt-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
            <div class="relative top-20 mx-auto p-5 border w-80 shadow-lg rounded-md bg-white animate-fadeIn">
                <div class="mt-3 text-center">
                    <h3 class="text-lg leading-6 font-medium text-gray-900">Order Receipt</h3>
                    <div class="mt-2 px-7 py-3">
                        <div class="text-left">
                            <p class="text-xs text-gray-500" id="receipt-content"></p>
                        </div>
                    </div>
                    <div class="items-center px-4 py-3">
                        <button id="download-receipt" class="btn w-full mb-2">
                            <i data-feather="download" class="inline-block mr-2"></i>Download Receipt
                        </button>
                    </div>
                    <div class="items-center px-4 py-3">
                        <button id="close-receipt" class="px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-300 transition duration-300">
                            <i data-feather="x" class="inline-block mr-2"></i>Close
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Auth Modal -->
        <div id="auth-modal" class="auth-modal hidden">
            <div class="auth-modal-content">
                <h2 class="text-xl font-bold mb-3 text-blue-600"><i data-feather="lock" class="inline-block mr-2"></i>Authentication Required</h2>
                <p class="mb-4">Please log in or sign up to access this feature.</p>
                <button id="auth-modal-login" class="btn w-full mb-2">
                    <i data-feather="log-in" class="inline-block mr-2"></i>Login
                </button>
                <button id="auth-modal-signup" class="btn w-full">
                    <i data-feather="user-plus" class="inline-block mr-2"></i>Sign Up
                </button>
                <button id="auth-modal-close" class="mt-4 px-4 py-2 bg-gray-500 text-white text-sm font-medium rounded-md w-full shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-300 transition duration-300">
                    <i data-feather="x" class="inline-block mr-2"></i>Close
                </button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer mt-auto">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p class="text-sm">&copy; 2023 Quick Connect. All rights reserved.</p>
                <div class="flex space-x-4 mt-2 md:mt-0">
                    <a href="#" class="text-white hover:text-blue-300 transition duration-300"><i data-feather="message-circle"></i></a>
                    <a href="#" class="text-white hover:text-blue-300 transition duration-300"><i data-feather="twitter"></i></a>
                    <a href="#" class="text-white hover:text-blue-300 transition duration-300"><i data-feather="instagram"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.js"></script>
    <script src="https://js.paystack.co/v1/inline.js"></script>
    <script type="module" src="index.js"></script>

</body>
</html>

