Spaces:
Running
Running
Add more buttons like where to pay school fees and make it able to trade forex and exchange foreign currency
3593d3d
verified
| <html lang="en" class="light"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>QuickPay1 - Digital Banking</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f8fafc', | |
| 100: '#f1f5f9', | |
| 200: '#e2e8f0', | |
| 300: '#cbd5e1', | |
| 400: '#94a3b8', | |
| 500: '#64748b', | |
| 600: '#475569', | |
| 700: '#334155', | |
| 800: '#1e293b', | |
| 900: '#0f172a', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-200"> | |
| <quickpay-header></quickpay-header> | |
| <quickpay-nav></quickpay-nav> | |
| <main class="container mx-auto px-4 py-6 max-w-md"> | |
| <!-- Balance Card --> | |
| <div class="balance-glow bg-gradient-to-r from-primary-500 via-primary-600 to-primary-700 rounded-2xl p-6 shadow-xl text-white mb-8 transform transition-all hover:scale-[1.01]"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-sm opacity-90">Available Balance</p> | |
| <h1 class="text-4xl font-extrabold mt-1 tracking-tight sparkle"> | |
| ₦<span class="count-up" data-target="54320">0</span>.50 | |
| </h1> | |
| </div> | |
| <button class="theme-toggle p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all hover:scale-110"> | |
| <i data-feather="moon" class="hidden dark:block"></i> | |
| <i data-feather="sun" class="dark:hidden"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <div> | |
| <p class="text-xs opacity-80">Account Number</p> | |
| <p class="font-medium">0123456789</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-xs opacity-80">Bank</p> | |
| <p class="font-medium">QuickPay1</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div class="grid grid-cols-4 gap-4 mb-10"> | |
| <a href="#" class="quick-action flex flex-col items-center justify-center p-4 rounded-xl bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-all"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-br from-green-100 to-green-200 dark:from-green-800 dark:to-green-900 flex items-center justify-center mb-2"> | |
| <i data-feather="arrow-up-right" class="text-green-600 dark:text-green-300 text-xl"></i> | |
| </div> | |
| <span class="text-xs font-semibold">Transfer</span> | |
| </a> | |
| <a href="#" class="quick-action flex flex-col items-center justify-center p-4 rounded-xl bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-all"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-br from-blue-100 to-blue-200 dark:from-blue-800 dark:to-blue-900 flex items-center justify-center mb-2"> | |
| <i data-feather="dollar-sign" class="text-blue-600 dark:text-blue-300 text-xl"></i> | |
| </div> | |
| <span class="text-xs font-semibold">Withdraw</span> | |
| </a> | |
| <a href="#" class="quick-action flex flex-col items-center justify-center p-4 rounded-xl bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-all"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-800 dark:to-purple-900 flex items-center justify-center mb-2"> | |
| <i data-feather="smartphone" class="text-purple-600 dark:text-purple-300 text-xl"></i> | |
| </div> | |
| <span class="text-xs font-semibold">Airtime</span> | |
| </a> | |
| <a href="forex.html" class="quick-action flex flex-col items-center justify-center p-4 rounded-xl bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-all"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-br from-red-100 to-red-200 dark:from-red-800 dark:to-red-900 flex items-center justify-center mb-2"> | |
| <i data-feather="refresh-cw" class="text-red-600 dark:text-red-300 text-xl"></i> | |
| </div> | |
| <span class="text-xs font-semibold">Forex</span> | |
| </a> | |
| <a href="school-payments.html" class="quick-action flex flex-col items-center justify-center p-4 rounded-xl bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-all"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-800 dark:to-indigo-900 flex items-center justify-center mb-2"> | |
| <i data-feather="book" class="text-indigo-600 dark:text-indigo-300 text-xl"></i> | |
| </div> | |
| <span class="text-xs font-semibold">School Fees</span> | |
| </a> | |
| <a href="#" class="quick-action flex flex-col items-center justify-center p-4 rounded-xl bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-all"> | |
| <div class="w-14 h-14 rounded-full bg-gradient-to-br from-yellow-100 to-yellow-200 dark:from-yellow-800 dark:to-yellow-900 flex items-center justify-center mb-2"> | |
| <i data-feather="more-horizontal" class="text-yellow-600 dark:text-yellow-300 text-xl"></i> | |
| </div> | |
| <span class="text-xs font-semibold">More</span> | |
| </a> | |
| <button class="quick-action flex flex-col items-center justify-center p-3 rounded-xl bg-white dark:bg-gray-800 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> | |
| <div class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mb-2"> | |
| <i data-feather="arrow-up-right" class="text-primary-600 dark:text-primary-400"></i> | |
| </div> | |
| <span class="text-xs font-medium">Transfer</span> | |
| </button> | |
| <button class="quick-action flex flex-col items-center justify-center p-3 rounded-xl bg-white dark:bg-gray-800 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> | |
| <div class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mb-2"> | |
| <i data-feather="dollar-sign" class="text-primary-600 dark:text-primary-400"></i> | |
| </div> | |
| <span class="text-xs font-medium">Withdraw</span> | |
| </button> | |
| <button class="quick-action flex flex-col items-center justify-center p-3 rounded-xl bg-white dark:bg-gray-800 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> | |
| <div class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mb-2"> | |
| <i data-feather="smartphone" class="text-primary-600 dark:text-primary-400"></i> | |
| </div> | |
| <span class="text-xs font-medium">Airtime</span> | |
| </button> | |
| <button class="quick-action flex flex-col items-center justify-center p-3 rounded-xl bg-white dark:bg-gray-800 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> | |
| <div class="w-12 h-12 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mb-2"> | |
| <i data-feather="more-horizontal" class="text-primary-600 dark:text-primary-400"></i> | |
| </div> | |
| <span class="text-xs font-medium">More</span> | |
| </button> | |
| </div> | |
| <!-- Transactions --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800 dark:text-white">Recent Transactions</h2> | |
| <a href="#" class="text-sm font-medium text-primary-600 dark:text-primary-400 hover:underline">See All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="transaction-item bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3"> | |
| <i data-feather="arrow-down-left" class="text-green-600 dark:text-green-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800 dark:text-white">Salary Deposit</h3> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Today, 9:45 AM</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-green-600">+₦120,000</p> | |
| </div> | |
| </div> | |
| <div class="transaction-item bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-3"> | |
| <i data-feather="arrow-up-right" class="text-red-600 dark:text-red-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800 dark:text-white">Amazon Purchase</h3> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday, 2:30 PM</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-red-600">-₦45,320</p> | |
| </div> | |
| </div> | |
| <div class="transaction-item bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3"> | |
| <i data-feather="smartphone" class="text-blue-600 dark:text-blue-400"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800 dark:text-white">Airtime</h3> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Yesterday, 10:15 AM</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-medium text-red-600">-₦1,000</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="components/header.js"></script> | |
| <script src="components/nav.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |