payment portal - Next Stop Relo

<!DOCTYPE html>
<html lang="en">
<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>Next Stop Relo Payment Portal</title>

<script src="https://cdn.tailwindcss.com"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">

<script src="https://unpkg.com/@phosphor-icons/web"></script>

/* --- Base Resets --- */
        html, body { height: 100%; margin: 0; padding: 0; }
        
        /* App Wrapper */
        .app-wrapper {
            background-color: var(--bg-body-desktop);
            font-family: "Outfit", sans-serif;
            color: var(--text-primary);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

.brand-font { font-family: "Space Grotesk", sans-serif; }

/* --- App Container (The Mobile Frame) --- */
        #app-container {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 420px;
            height: 100%; /* Fill the Iframe */
            max-height: 100%;
            background: var(--bg-app);
            border-radius: 40px;
            border: 8px solid #ffffff;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 25px 50px -12px rgba(0,0,0,0.15);
            overflow: hidden;
        }

@media (max-width: 640px) {
            .app-wrapper { padding: 0; align-items: flex-start; background: #fff; }
            #app-container {
                max-width: 100%;
                height: 100dvh;
                max-height: 100dvh;
                border: none;
                border-radius: 0;
            }
            /* On mobile, we use FIXED positioning to stick to the viewport bottom */
            #tab-bar {
                position: fixed !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                width: 100% !important;
                border-top: 1px solid #eee !important;
            }
        }

/* Scroll Area */
        #content-area {
            flex: 1 1 auto;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            padding-bottom: calc(var(--tabbar-h) + 20px); 
        }
        #content-area::-webkit-scrollbar { display: none; }
        #content-area { -ms-overflow-style: none; scrollbar-width: none; }

/* --- Components --- */
        
        /* Cards */
        .theme-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            box-shadow: var(--card-shadow);
            transition: all 0.2s ease;
        }
        .theme-card:active { transform: scale(0.99); }

/* Navigation */
        #tab-bar {
            position: absolute;
            left: 0; right: 0; bottom: 0;
            min-height: var(--tabbar-h);
            height: auto;
            padding-bottom: env(safe-area-inset-bottom);
            background: var(--nav-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid var(--nav-border);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 999;
        }

.nav-btn {
            color: var(--nav-icon-inactive);
            transition: all 0.3s;
            background: none;
            border: none;
            cursor: pointer;
        }
        .nav-btn.active {
            color: var(--nav-icon-active);
            transform: translateY(-2px);
        }

/* Accordion Details */
        details > summary { list-style: none; }
        details > summary::-webkit-details-marker { display: none; }
        
        details[open] summary ~ * { animation: sweep .3s ease-in-out; }
        
        @keyframes sweep {
            0%    {opacity: 0; transform: translateY(-10px)}
            100%  {opacity: 1; transform: translateY(0)}
        }
        
        details[open] .caret { transform: rotate(90deg); }
        .caret { transition: transform 0.2s ease; }

/* Buttons */
        .btn-primary {
            background: var(--accent-gradient);
            color: white;
            font-weight: 700;
            border-radius: 12px;
            padding: 12px 20px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: transform 0.1s;
        }
        .btn-primary:active { transform: scale(0.97); }

/* Tab Animations */
        .tab-content { display: none; opacity: 0; animation: fadeIn 0.3s forwards; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

/* Copy Toast */
        #toast {
            visibility: hidden;
            min-width: 250px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 8px;
            padding: 12px;
            position: absolute;
            z-index: 1000;
            left: 50%;
            bottom: 100px;
            transform: translateX(-50%);
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        #toast.show {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>

<div class="app-wrapper">
    <div id="app-container">
        
        <main id="content-area">
            
            
            <section id="tab-home" class="tab-content active px-6 pt-6">
                <div class="flex flex-col items-center text-center mb-4">
                    
                    <div class="relative w-48 h-32 mb-6 flex items-center justify-center">
                        <img decoding="async" src="https://nextstoprelo.com/wp-content/uploads/2023/05/next-stop-relo-logo.png" 
                             class="w-full h-full object-contain" 
                             alt="Next Stop Relo Logo" 
                             onerror="this.src='https://placehold.co/200x128/000000/ffffff?text=Next+Stop+Relo'">
                    </div>
                    
                    <h1 class="text-3xl font-bold leading-tight text-slate-900 brand-font">Next Stop Relo</h1>
                    <p class="text-slate-500 font-medium text-sm mt-2 tracking-wide">Secure Payment Portal</p>
                    
                    
                    <div class="w-full mt-6 space-y-4">
                        <button onclick="switchTab('payment')" class="btn-primary py-4 shadow-lg shadow-gray-500/20">
                            <span>Make a Payment</span>
                            <i class="ph ph-arrow-right font-bold"></i>
                        </button>
                        
                        <div class="grid grid-cols-2 gap-3 mt-4">
                            <div class="theme-card p-4 rounded-2xl text-center">
                                <i class="ph ph-shield-check text-2xl text-green-600 mb-1"></i>
                                <p class="text-xs font-bold text-slate-700">Secure</p>
                            </div>
                            <div class="theme-card p-4 rounded-2xl text-center">
                                <i class="ph ph-lightning text-2xl text-yellow-500 mb-1"></i>
                                <p class="text-xs font-bold text-slate-700">Instant</p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="mt-4 text-center pb-8">
                    <p class="text-xs text-slate-400">Trusted Relocation Services</p>
                </div>
            </section>

<section id="tab-payment" class="tab-content px-5 pt-12">
                <h2 class="text-2xl font-bold mb-2 brand-font text-slate-900">Select Method</h2>
                <p class="text-slate-500 text-sm mb-6">Choose how you would like to pay.</p>

<div class="space-y-4">
                    
                    
                    <details class="theme-card rounded-2xl overflow-hidden group bg-white">
                        <summary class="cursor-pointer p-5 flex items-center gap-4 hover:bg-gray-50 transition">
                            <div class="w-12 h-12 rounded-xl bg-purple-100 text-purple-600 flex items-center justify-center">
                                <img decoding="async" src="https://nextstoprelo.com/payment/zelle-icon.png" class="w-6 h-6 object-contain" alt="Zelle">
                            </div>
                            <div class="flex-1">
                                <h3 class="font-bold text-slate-900">Zelle</h3>
                                <p class="text-xs text-slate-500">Fast & Secure</p>
                            </div>
                            <i class="ph ph-caret-right caret text-slate-400 text-xl"></i>
                        </summary>
                        <div class="p-5 border-t border-gray-100 bg-gray-50/50">
                            <div class="bg-white p-4 rounded-xl border border-gray-200 text-center shadow-sm">
                                <p class="text-xs text-slate-500 mb-3 font-semibold uppercase tracking-wider">Scan or Send to</p>
                                
                                <img decoding="async" src="https://nextstoprelo.com/payment/zelle-qrcode.png" 
                                     class="w-32 h-32 mx-auto rounded-lg border border-gray-200 mb-4" 
                                     alt="Zelle QR"
                                     onerror="this.style.display='none'">
                                
                                <div class="flex items-center justify-between bg-gray-100 p-3 rounded-lg mb-3">
                                    <div class="text-left overflow-hidden">
                                        <p class="text-[10px] text-slate-400 uppercase font-bold">Zelle Email</p>
                                        <span class="font-mono font-bold text-slate-800 text-xs sm:text-sm break-all">pay@nextstoprelo.com</span>
                                    </div>
                                    <button onclick="copyText('pay@nextstoprelo.com')" class="text-purple-600 text-xs font-bold hover:underline ml-2">COPY</button>
                                </div>

<a href="https://enroll.zellepay.com/qr-codes?data=ewogICJ0b2tlbiIgOiAicGF5QG5leHRzdG9wcmVsby5jb20iLAogICJhY3Rpb24iIDogInBheW1lbnQiLAogICJuYW1lIiA6ICJBJk0gTU9WSU5HIFNFUlZJQ0VTIExMQyIKfQ==" 
                                   target="_blank" 
                                   class="btn-primary" style="background: #6d28d9;">
                                    Open Zelle App
                                </a>
                            </div>
                        </div>
                    </details>

<details class="theme-card rounded-2xl overflow-hidden group bg-white">
                        <summary class="cursor-pointer p-5 flex items-center gap-4 hover:bg-gray-50 transition">
                            <div class="w-12 h-12 rounded-xl bg-blue-100 text-blue-500 flex items-center justify-center">
                                <img decoding="async" src="https://nextstoprelo.com/payment/venmo-icon.png" class="w-6 h-6 object-contain" alt="Venmo">
                            </div>
                            <div class="flex-1">
                                <h3 class="font-bold text-slate-900">Venmo</h3>
                                <p class="text-xs text-slate-500">Safe & Easy</p>
                            </div>
                            <i class="ph ph-caret-right caret text-slate-400 text-xl"></i>
                        </summary>
                        <div class="p-5 border-t border-gray-100 bg-gray-50/50">
                            <div class="bg-white p-4 rounded-xl border border-gray-200 text-center shadow-sm">
                                <p class="text-xs text-slate-500 mb-3 font-semibold uppercase tracking-wider">Scan to Pay</p>
                                
                                <img decoding="async" src="https://nextstoprelo.com/payment/venmo-qrcode.png" 
                                     class="w-32 h-32 mx-auto rounded-lg border border-gray-200 mb-4" 
                                     alt="Venmo QR"
                                     onerror="this.style.display='none'">
                                
                                <div class="flex items-center justify-between bg-gray-100 p-3 rounded-lg mb-3">
                                    <div class="text-left">
                                        <p class="text-[10px] text-slate-400 uppercase font-bold">Username</p>
                                        <span class="font-mono font-bold text-slate-800 text-sm">@movingss</span>
                                    </div>
                                    <button onclick="copyText('@movingss')" class="text-blue-600 text-xs font-bold hover:underline ml-2">COPY</button>
                                </div>

<a href="https://www.venmo.com/u/movingss" 
                                   target="_blank" 
                                   class="btn-primary" style="background: #008CFF;">
                                    Pay on Venmo
                                </a>
                            </div>
                        </div>
                    </details>

<details class="theme-card rounded-2xl overflow-hidden group bg-white">
                        <summary class="cursor-pointer p-5 flex items-center gap-4 hover:bg-gray-50 transition">
                            <div class="w-12 h-12 rounded-xl bg-green-100 text-green-600 flex items-center justify-center">
                                <img decoding="async" src="https://nextstoprelo.com/payment/cashapp-icon.png" class="w-6 h-6 object-contain" alt="Cash App">
                            </div>
                            <div class="flex-1">
                                <h3 class="font-bold text-slate-900">Cash App</h3>
                                <p class="text-xs text-slate-500">Tag: $nextstoprelo1</p>
                            </div>
                            <i class="ph ph-caret-right caret text-slate-400 text-xl"></i>
                        </summary>
                        <div class="p-5 border-t border-gray-100 bg-gray-50/50">
                            <div class="bg-white p-4 rounded-xl border border-gray-200 text-center shadow-sm">
                                <img decoding="async" src="https://nextstoprelo.com/payment/cashapp-qrcode.png" 
                                     class="w-32 h-32 mx-auto rounded-lg border border-gray-200 mb-4" 
                                     alt="CashApp QR"
                                     onerror="this.style.display='none'">
                                
                                <div class="flex items-center justify-between bg-gray-100 p-3 rounded-lg mb-3">
                                    <span class="font-mono font-bold text-slate-800 text-sm">$nextstoprelo1</span>
                                    <button onclick="copyText('$nextstoprelo1')" class="text-green-600 text-xs font-bold hover:underline">COPY</button>
                                </div>

<details class="theme-card rounded-2xl overflow-hidden group bg-white">
                        <summary class="cursor-pointer p-5 flex items-center gap-4 hover:bg-gray-50 transition">
                            <div class="w-12 h-12 rounded-xl bg-slate-100 text-slate-600 flex items-center justify-center">
                                <i class="ph ph-bank text-2xl"></i>
                            </div>
                            <div class="flex-1">
                                <h3 class="font-bold text-slate-900">Bank Transfer</h3>
                                <p class="text-xs text-slate-500">Business Checking</p>
                            </div>
                            <i class="ph ph-caret-right caret text-slate-400 text-xl"></i>
                        </summary>
                        <div class="p-5 border-t border-gray-100 bg-gray-50/50">
                            <div class="bg-white p-4 rounded-xl border border-gray-200 shadow-sm space-y-3">
                                
                                <div class="bg-yellow-50 p-3 rounded-lg border border-yellow-100 mb-2">
                                    <p class="text-xs text-yellow-800 leading-tight">
                                        <i class="ph ph-info mr-1"></i>
                                        Please use only USD. Include <strong>Client Name</strong> and <strong>Job/Invoice Number</strong> in memo.
                                    </p>
                                </div>
                                
                                
                                <div>
                                    <p class="text-xs text-slate-500 mb-1">Account Name</p>
                                    <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg border border-gray-100">
                                        <span class="font-bold text-slate-900 select-all text-sm">Next Stop Relocation</span>
                                        <button onclick="copyText('Next Stop Relocation')" class="text-slate-400 hover:text-black"><i class="ph ph-copy text-lg"></i></button>
                                    </div>
                                </div>
                                
                                
                                <div>
                                    <p class="text-xs text-slate-500 mb-1">Account Number</p>
                                    <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg border border-gray-100">
                                        <span class="font-mono font-bold text-slate-900 select-all">711621915</span>
                                        <button onclick="copyText('711621915')" class="text-slate-400 hover:text-black"><i class="ph ph-copy text-lg"></i></button>
                                    </div>
                                </div>

<div>
                                    <p class="text-xs text-slate-500 mb-1">Routing Number (ABA)</p>
                                    <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg border border-gray-100">
                                        <span class="font-mono font-bold text-slate-900 select-all">074000010</span>
                                        <button onclick="copyText('074000010')" class="text-slate-400 hover:text-black"><i class="ph ph-copy text-lg"></i></button>
                                    </div>
                                </div>

<div>
                                    <p class="text-xs text-slate-500 mb-1">Bank Address</p>
                                    <div class="flex items-center justify-between bg-gray-50 p-3 rounded-lg border border-gray-100">
                                        <span class="text-xs font-medium text-slate-900 select-all">7750 Marabou Mills Way, Indianapolis, IN, 46214</span>
                                        <button onclick="copyText('7750 Marabou Mills Way, Indianapolis, IN, 46214')" class="text-slate-400 hover:text-black"><i class="ph ph-copy text-lg"></i></button>
                                    </div>
                                </div>

</div>
                        </div>
                    </details>
                </div>
            </section>

<section id="tab-contact" class="tab-content px-5 pt-12 pb-20">
                <div class="text-center mb-6">
                    <h2 class="text-2xl font-bold mb-2 brand-font text-slate-900">Support & Info</h2>
                    <p class="text-slate-500 text-sm">Contact details and info.</p>
                </div>

<div class="space-y-4">
                    
                    
                    <div class="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
                        <h3 class="font-bold text-slate-900 mb-4 flex items-center gap-2">
                            <i class="ph ph-chat-circle-dots text-purple-600 text-xl"></i> Contact
                        </h3>
                        
                        <div class="space-y-3">
                            <a href="tel:+12545002119" class="flex items-center justify-between p-3 bg-gray-50 rounded-xl hover:bg-gray-100 transition group">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-full bg-slate-200 group-hover:bg-slate-300 transition flex items-center justify-center"><i class="ph ph-phone text-slate-700"></i></div>
                                    <span class="text-sm font-medium text-slate-700">(254) 500 2119</span>
                                </div>
                                <i class="ph ph-arrow-right text-slate-400"></i>
                            </a>

<a href="mailto:pay@nextstoprelo.com" class="flex items-center justify-between p-3 bg-gray-50 rounded-xl hover:bg-gray-100 transition group">
                                <div class="flex items-center gap-3">
                                    <div class="w-8 h-8 rounded-full bg-slate-200 group-hover:bg-slate-300 transition flex items-center justify-center"><i class="ph ph-envelope text-slate-700"></i></div>
                                    <div class="flex flex-col text-left">
                                        <span class="text-sm font-medium text-slate-700">pay@nextstoprelo.com</span>
                                    </div>
                                </div>
                                <i class="ph ph-arrow-right text-slate-400"></i>
                            </a>
                        </div>
                    </div>

<div class="bg-white rounded-2xl p-5 border border-gray-200 shadow-sm">
                        <h3 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
                            <i class="ph ph-map-pin text-red-500 text-xl"></i> Location
                        </h3>
                        <p class="text-sm text-slate-600 leading-relaxed ml-1">
                            <span class="font-semibold text-slate-800">Next Stop Relocation</span><br>
                            7750 Marabou Mills Way,<br>
                            Indianapolis, IN, 46214
                        </p>
                    </div>

<div class="text-center pt-2 pb-8">
                        <p class="text-xs text-slate-400 font-mono border-t border-dashed border-gray-300 pt-4 inline-block px-4">
                            DOT# 4329204 • MC# 1690079
                        </p>
                    </div>

</div>
            </section>

</main>

<nav id="tab-bar">
            <button class="nav-btn active flex flex-col items-center justify-center w-full h-full" onclick="switchTab('home')" id="nav-home">
                <i class="ph ph-house text-2xl mb-1"></i>
                <span class="text-[10px] font-medium tracking-wide">Home</span>
            </button>
            
            <button class="nav-btn flex flex-col items-center justify-center w-full h-full" onclick="switchTab('payment')" id="nav-payment">
                
                <div class="w-12 h-12 bg-black rounded-full flex items-center justify-center text-white shadow-lg shadow-gray-400/50 transform -translate-y-4 border-4 border-white transition-transform">
                    <i class="ph ph-credit-card text-xl"></i>
                </div>
                <span class="text-[10px] font-medium tracking-wide -mt-2 text-slate-900 font-bold">Pay</span>
            </button>

<div id="toast">Copied to clipboard</div>
    </div>
</div>

// 3. Show target tab
        const targetTab = document.getElementById('tab-' + tabName);
        if(targetTab) targetTab.classList.add('active');

// 4. Set active nav button
        const targetNav = document.getElementById('nav-' + tabName);
        if(targetNav) {
            targetNav.classList.add('active');
            if(tabName === 'payment') {
                targetNav.querySelector('div').classList.add('scale-110');
            } else {
                targetNav.style.color = 'var(--nav-icon-active)';
            }
        }
    }

// Robust Copy Function with Fallback
    function copyText(text) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text)
                .then(() => showToast())
                .catch(err => {
                    fallbackCopyText(text);
                });
        } else {
            fallbackCopyText(text);
        }
    }

function showToast() {
        const toast = document.getElementById("toast");
        toast.className = "show";
        setTimeout(function(){ toast.className = toast.className.replace("show", ""); }, 3000);
    }
</script>