Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AfriPay - Online Payments with M-Pesa</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| } | |
| .payment-option:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .mpesa-btn { | |
| background: linear-gradient(135deg, #00a650 0%, #007d3e 100%); | |
| } | |
| .mpesa-btn:hover { | |
| background: linear-gradient(135deg, #007d3e 0%, #005c2e 100%); | |
| } | |
| .slide-in { | |
| animation: slideIn 0.3s ease-out forwards; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| transform: translateY(20px); | |
| opacity: 0; | |
| } | |
| to { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shopping-bag text-2xl"></i> | |
| <h1 class="text-2xl font-bold">AfriPay</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-gray-200 font-medium">Home</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Shop</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Deals</a> | |
| <a href="#" class="hover:text-gray-200 font-medium">Account</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <button class="md:hidden"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <div class="relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-yellow-400 text-black rounded-full w-5 h-5 flex items-center justify-center text-xs font-bold">3</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Breadcrumbs --> | |
| <div class="flex items-center text-sm text-gray-600 mb-6"> | |
| <a href="#" class="hover:text-blue-600">Home</a> | |
| <span class="mx-2">/</span> | |
| <a href="#" class="hover:text-blue-600">Cart</a> | |
| <span class="mx-2">/</span> | |
| <span class="text-gray-800 font-medium">Checkout</span> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Payment Section --> | |
| <div class="lg:w-2/3"> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6 slide-in"> | |
| <h2 class="text-xl font-bold mb-6 text-gray-800">Payment Method</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8"> | |
| <!-- Payment Options --> | |
| <div class="payment-option border rounded-lg p-4 cursor-pointer transition-all duration-300 hover:border-blue-500"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-credit-card text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">Credit/Debit Card</h3> | |
| <p class="text-sm text-gray-500">Pay with Visa, Mastercard</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="payment-option border rounded-lg p-4 cursor-pointer transition-all duration-300 hover:border-green-500 bg-green-50 border-green-200"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt text-green-600"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">M-Pesa</h3> | |
| <p class="text-sm text-gray-500">Pay via Safaricom M-Pesa</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- M-Pesa Payment Form (shown when selected) --> | |
| <div id="mpesa-form" class="border border-green-200 rounded-lg p-6 bg-green-50 slide-in"> | |
| <h3 class="font-bold text-lg mb-4 text-gray-800">Pay with M-Pesa</h3> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="phone"> | |
| M-Pesa Phone Number | |
| </label> | |
| <div class="flex"> | |
| <span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"> | |
| +254 | |
| </span> | |
| <input type="tel" id="phone" class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md border border-gray-300 focus:ring-green-500 focus:border-green-500" placeholder="7XX XXX XXX"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="amount"> | |
| Amount to Pay | |
| </label> | |
| <div class="relative rounded-md shadow-sm"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm">KES</span> | |
| </div> | |
| <input type="text" id="amount" class="focus:ring-green-500 focus:border-green-500 block w-full pl-12 pr-12 py-2 border-gray-300 rounded-md" value="2,450" readonly> | |
| </div> | |
| </div> | |
| <button class="mpesa-btn w-full py-3 px-4 rounded-md text-white font-bold hover:shadow-lg transition-all duration-300 flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt mr-2"></i> | |
| Pay with M-Pesa | |
| </button> | |
| <div class="mt-4 text-sm text-gray-600"> | |
| <p>You will receive an M-Pesa push notification to confirm payment.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Delivery Information --> | |
| <div class="bg-white rounded-lg shadow-md p-6 slide-in"> | |
| <h2 class="text-xl font-bold mb-6 text-gray-800">Delivery Information</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="name"> | |
| Full Name | |
| </label> | |
| <input type="text" id="name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" value="John Doe"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="email"> | |
| Email Address | |
| </label> | |
| <input type="email" id="email" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" value="john.doe@example.com"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="address"> | |
| Delivery Address | |
| </label> | |
| <input type="text" id="address" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" value="123 Main Street, Nairobi"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 text-sm font-medium mb-2" for="city"> | |
| City | |
| </label> | |
| <select id="city" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option>Nairobi</option> | |
| <option>Mombasa</option> | |
| <option>Kisumu</option> | |
| <option>Nakuru</option> | |
| <option>Eldoret</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order Summary --> | |
| <div class="lg:w-1/3"> | |
| <div class="bg-white rounded-lg shadow-md p-6 sticky top-4 slide-in"> | |
| <h2 class="text-xl font-bold mb-6 text-gray-800">Order Summary</h2> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Subtotal (3 items)</span> | |
| <span class="font-medium">KES 2,200</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Shipping</span> | |
| <span class="font-medium">KES 250</span> | |
| </div> | |
| <div class="flex justify-between border-t border-gray-200 pt-4"> | |
| <span class="text-gray-600">Total</span> | |
| <span class="font-bold text-lg">KES 2,450</span> | |
| </div> | |
| </div> | |
| <!-- Order Items --> | |
| <div class="border-t border-gray-200 pt-4 mb-6"> | |
| <h3 class="font-medium mb-3">Your Items</h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-md flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/60" alt="Product" class="w-12 h-12 object-contain"> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Wireless Headphones</p> | |
| <p class="text-xs text-gray-500">Qty: 1</p> | |
| </div> | |
| <p class="text-sm font-medium">KES 1,200</p> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-md flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/60" alt="Product" class="w-12 h-12 object-contain"> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Smart Watch</p> | |
| <p class="text-xs text-gray-500">Qty: 1</p> | |
| </div> | |
| <p class="text-sm font-medium">KES 800</p> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-16 h-16 bg-gray-100 rounded-md flex items-center justify-center"> | |
| <img src="https://via.placeholder.com/60" alt="Product" class="w-12 h-12 object-contain"> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium">Phone Case</p> | |
| <p class="text-xs text-gray-500">Qty: 1</p> | |
| </div> | |
| <p class="text-sm font-medium">KES 200</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 border border-blue-100 rounded-md p-4 mb-6"> | |
| <div class="flex items-start space-x-2"> | |
| <i class="fas fa-info-circle text-blue-500 mt-1"></i> | |
| <p class="text-sm text-blue-800">Your order will be delivered within 3-5 business days after payment confirmation.</p> | |
| </div> | |
| </div> | |
| <button class="gradient-bg w-full py-3 px-4 rounded-md text-white font-bold hover:shadow-lg transition-all duration-300"> | |
| Complete Order | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">AfriPay</h3> | |
| <p class="text-gray-400">The fastest way to shop and pay online in Africa with secure M-Pesa payments.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Shop</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Electronics</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Fashion</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Home & Garden</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Phones</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Help</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Payment Help</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Shipping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Returns</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center space-x-2 text-gray-400"> | |
| <i class="fas fa-phone"></i> | |
| <span>+254 700 123 456</span> | |
| </li> | |
| <li class="flex items-center space-x-2 text-gray-400"> | |
| <i class="fas fa-envelope"></i> | |
| <span>help@afripay.co.ke</span> | |
| </li> | |
| <li class="flex items-center space-x-2 text-gray-400"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <span>Nairobi, Kenya</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 AfriPay. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Payment Success Modal (hidden by default) --> | |
| <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-lg p-8 max-w-md w-full mx-4 slide-in"> | |
| <div class="text-center"> | |
| <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-check-circle text-green-500 text-4xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Payment Successful!</h3> | |
| <p class="text-gray-600 mb-6">Your payment of KES 2,450 via M-Pesa has been received. Your order is being processed.</p> | |
| <div class="bg-green-50 border border-green-100 rounded-md p-4 mb-6"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-receipt text-green-500"></i> | |
| <p class="text-sm text-green-800">Transaction ID: MP1234567890</p> | |
| </div> | |
| </div> | |
| <button onclick="closeModal()" class="gradient-bg w-full py-3 px-4 rounded-md text-white font-bold hover:shadow-lg transition-all duration-300"> | |
| Continue Shopping | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple script to simulate M-Pesa payment | |
| document.querySelector('.mpesa-btn').addEventListener('click', function() { | |
| const phoneInput = document.getElementById('phone'); | |
| if (!phoneInput.value || phoneInput.value.length < 9) { | |
| alert('Please enter a valid M-Pesa phone number'); | |
| return; | |
| } | |
| // Show processing animation | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing Payment...'; | |
| this.disabled = true; | |
| // Simulate API call to M-Pesa | |
| setTimeout(() => { | |
| document.getElementById('success-modal').classList.remove('hidden'); | |
| this.innerHTML = '<i class="fas fa-mobile-alt mr-2"></i> Pay with M-Pesa'; | |
| this.disabled = false; | |
| }, 2000); | |
| }); | |
| function closeModal() { | |
| document.getElementById('success-modal').classList.add('hidden'); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Markgee/geezy-payment" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> | |