| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>AdMaster Pro - Ad Account Management Platform</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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#4F46E5', |
| secondary: '#10B981', |
| dark: '#1F2937', |
| light: '#F9FAFB', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%); |
| } |
| .sidebar-item:hover .sidebar-icon { |
| transform: translateX(5px); |
| } |
| .sidebar-icon { |
| transition: transform 0.2s ease; |
| } |
| .dashboard-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .dashboard-card { |
| transition: all 0.3s ease; |
| } |
| .tab-content { |
| display: none; |
| } |
| .tab-content.active { |
| display: block; |
| animation: fadeIn 0.5s ease; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| .notification-badge { |
| position: absolute; |
| top: -5px; |
| right: -5px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <div class="hidden md:flex md:flex-shrink-0"> |
| <div class="flex flex-col w-64 bg-white border-r border-gray-200"> |
| <div class="flex items-center justify-center h-16 px-4 gradient-bg"> |
| <div class="flex items-center"> |
| <i class="fas fa-ad text-white text-2xl mr-2"></i> |
| <span class="text-white font-bold text-xl">AdMaster Pro</span> |
| </div> |
| </div> |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> |
| |
| <div class="flex items-center px-4 py-3 mb-6 bg-gray-100 rounded-lg"> |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> |
| <div class="ml-3"> |
| <p class="text-sm font-medium text-gray-900">John Doe</p> |
| <p class="text-xs text-gray-500">Admin</p> |
| </div> |
| </div> |
| |
| |
| <nav class="flex-1 space-y-2"> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-900 bg-gray-100 rounded-lg sidebar-item"> |
| <i class="fas fa-tachometer-alt sidebar-icon text-gray-600 mr-3"></i> |
| Dashboard |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg sidebar-item hover:bg-gray-100"> |
| <i class="fas fa-ad sidebar-icon text-gray-600 mr-3"></i> |
| Ad Accounts |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg sidebar-item hover:bg-gray-100"> |
| <i class="fas fa-exchange-alt sidebar-icon text-gray-600 mr-3"></i> |
| Transactions |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg sidebar-item hover:bg-gray-100"> |
| <i class="fas fa-wallet sidebar-icon text-gray-600 mr-3"></i> |
| Balance |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg sidebar-item hover:bg-gray-100"> |
| <i class="fas fa-users sidebar-icon text-gray-600 mr-3"></i> |
| Users |
| </a> |
| <a href="#" class="flex items-center px-4 py-3 text-sm font-medium text-gray-700 rounded-lg sidebar-item hover:bg-gray-100"> |
| <i class="fas fa-cog sidebar-icon text-gray-600 mr-3"></i> |
| Settings |
| </a> |
| </nav> |
| |
| |
| <div class="mt-auto mb-4"> |
| <div class="px-4 py-3 text-sm text-gray-700 bg-gray-100 rounded-lg"> |
| <div class="flex items-center justify-between"> |
| <span>Storage</span> |
| <span>65%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2"> |
| <div class="bg-primary h-1.5 rounded-full" style="width: 65%"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex flex-col flex-1 overflow-hidden"> |
| |
| <header class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200"> |
| <div class="flex items-center md:hidden"> |
| <button class="text-gray-500 focus:outline-none"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| |
| <div class="flex-1 max-w-md ml-4 md:ml-6"> |
| <div class="relative"> |
| <div class="absolute inset-y-0 left-0 flex items-center pl-3"> |
| <i class="fas fa-search text-gray-400"></i> |
| </div> |
| <input class="block w-full py-2 pl-10 pr-3 text-sm bg-gray-100 border border-transparent rounded-md focus:bg-white focus:border-gray-300 focus:outline-none" placeholder="Search..."> |
| </div> |
| </div> |
| |
| <div class="flex items-center"> |
| <div class="relative mr-4"> |
| <button class="text-gray-500 focus:outline-none"> |
| <i class="fas fa-bell text-xl"></i> |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full notification-badge"></span> |
| </button> |
| </div> |
| <div class="relative"> |
| <button class="flex items-center focus:outline-none"> |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile"> |
| <span class="ml-2 text-sm font-medium text-gray-700 md:block hidden">John Doe</span> |
| <i class="ml-1 fas fa-chevron-down text-gray-500 text-xs"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
| |
| |
| <main class="flex-1 overflow-auto p-6 bg-gray-50"> |
| <div class="mb-6"> |
| <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1> |
| <p class="text-gray-600">Welcome back, John! Here's what's happening with your ad accounts.</p> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-2 lg:grid-cols-4"> |
| <div class="p-6 bg-white rounded-lg shadow-sm dashboard-card"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Total Balance</p> |
| <p class="mt-1 text-2xl font-semibold text-gray-900">$12,345.67</p> |
| </div> |
| <div class="p-3 rounded-full bg-blue-50"> |
| <i class="fas fa-wallet text-blue-500 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-green-500"> |
| <span>+12% from last month</span> |
| <i class="ml-1 fas fa-arrow-up"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-6 bg-white rounded-lg shadow-sm dashboard-card"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Active Accounts</p> |
| <p class="mt-1 text-2xl font-semibold text-gray-900">24</p> |
| </div> |
| <div class="p-3 rounded-full bg-green-50"> |
| <i class="fas fa-ad text-green-500 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-green-500"> |
| <span>+3 new this week</span> |
| <i class="ml-1 fas fa-arrow-up"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-6 bg-white rounded-lg shadow-sm dashboard-card"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Pending Requests</p> |
| <p class="mt-1 text-2xl font-semibold text-gray-900">5</p> |
| </div> |
| <div class="p-3 rounded-full bg-yellow-50"> |
| <i class="fas fa-clock text-yellow-500 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-red-500"> |
| <span>2 urgent</span> |
| <i class="ml-1 fas fa-exclamation-circle"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="p-6 bg-white rounded-lg shadow-sm dashboard-card"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Spend This Month</p> |
| <p class="mt-1 text-2xl font-semibold text-gray-900">$8,765.43</p> |
| </div> |
| <div class="p-3 rounded-full bg-purple-50"> |
| <i class="fas fa-chart-line text-purple-500 text-xl"></i> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <div class="flex items-center text-sm text-green-500"> |
| <span>+8% from last month</span> |
| <i class="ml-1 fas fa-arrow-up"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <div class="border-b border-gray-200"> |
| <nav class="flex -mb-px space-x-8"> |
| <button onclick="switchTab('accounts')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-primary text-primary"> |
| Ad Accounts |
| </button> |
| <button onclick="switchTab('requests')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> |
| Account Requests |
| </button> |
| <button onclick="switchTab('transactions')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> |
| Transactions |
| </button> |
| <button onclick="switchTab('users')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> |
| User Management |
| </button> |
| </nav> |
| </div> |
| </div> |
| |
| |
| <div id="accounts" class="tab-content active"> |
| <div class="mb-4 flex justify-between items-center"> |
| <h2 class="text-lg font-medium text-gray-800">Your Ad Accounts</h2> |
| <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-dark focus:outline-none"> |
| <i class="fas fa-plus mr-2"></i> New Account |
| </button> |
| </div> |
| |
| <div class="bg-white shadow-sm rounded-lg overflow-hidden"> |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <input type="text" placeholder="Filter accounts..." class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"> |
| <i class="fas fa-filter"></i> Filter |
| </button> |
| <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"> |
| <i class="fas fa-download"></i> Export |
| </button> |
| </div> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Platform</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account ID</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spend (30d)</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> |
| <i class="fab fa-facebook text-blue-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Meta (Facebook)</div> |
| <div class="text-sm text-gray-500">Personal Ad Account</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">act_123456789</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$1,234.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$876.50</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark mr-3">Manage</button> |
| <button class="text-gray-600 hover:text-gray-900">Top Up</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 bg-red-100 rounded-full flex items-center justify-center"> |
| <i class="fab fa-google text-red-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Google Ads</div> |
| <div class="text-sm text-gray-500">Search Campaigns</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">123-456-7890</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$2,345.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$1,234.50</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark mr-3">Manage</button> |
| <button class="text-gray-600 hover:text-gray-900">Top Up</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 bg-pink-100 rounded-full flex items-center justify-center"> |
| <i class="fab fa-tiktok text-pink-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">TikTok Ads</div> |
| <div class="text-sm text-gray-500">Video Campaigns</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7890123456</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$0.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$0.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark mr-3">View</button> |
| <button class="text-gray-600 hover:text-gray-900">Cancel</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> |
| <i class="fab fa-twitter text-blue-400"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Twitter Ads</div> |
| <div class="text-sm text-gray-500">Promoted Tweets</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">abc123xyz</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$567.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$345.75</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark mr-3">Manage</button> |
| <button class="text-gray-600 hover:text-gray-900">Top Up</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center"> |
| <i class="fab fa-snapchat text-purple-600"></i> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Snapchat Ads</div> |
| <div class="text-sm text-gray-500">Story Ads</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">snap-789012</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Suspended</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$123.00</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$89.25</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark mr-3">Appeal</button> |
| <button class="text-gray-600 hover:text-gray-900">Close</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| |
| <div class="px-4 py-3 bg-gray-50 border-t border-gray-200 flex items-center justify-between"> |
| <div class="flex-1 flex justify-between sm:hidden"> |
| <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Previous</button> |
| <button class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Next</button> |
| </div> |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> |
| <div> |
| <p class="text-sm text-gray-700"> |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">24</span> results |
| </p> |
| </div> |
| <div> |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> |
| <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| <span class="sr-only">Previous</span> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <button aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</button> |
| <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</button> |
| <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</button> |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span> |
| <button class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">8</button> |
| <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> |
| <span class="sr-only">Next</span> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </nav> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="requests" class="tab-content"> |
| <div class="mb-4 flex justify-between items-center"> |
| <h2 class="text-lg font-medium text-gray-800">Account Requests</h2> |
| <div class="flex space-x-2"> |
| <button class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"> |
| <i class="fas fa-filter mr-2"></i> Filter |
| </button> |
| </div> |
| </div> |
| |
| <div class="bg-white shadow-sm rounded-lg overflow-hidden"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Request ID</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Platform</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Requested At</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">REQ-12345</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Jane Smith</div> |
| <div class="text-sm text-gray-500">Reseller</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-8 w-8 bg-blue-100 rounded-full flex items-center justify-center"> |
| <i class="fab fa-facebook text-blue-600"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="text-sm text-gray-900">Meta (Facebook)</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours ago</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending Review</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-green-600 hover:text-green-900 mr-3">Approve</button> |
| <button class="text-red-600 hover:text-red-900">Reject</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">REQ-12344</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Robert Johnson</div> |
| <div class="text-sm text-gray-500">Regular User</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-8 w-8 bg-pink-100 rounded-full flex items-center justify-center"> |
| <i class="fab fa-tiktok text-pink-600"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="text-sm text-gray-900">TikTok Ads</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Needs Info</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Request Info</button> |
| <button class="text-red-600 hover:text-red-900">Reject</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">REQ-12343</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Sarah Williams</div> |
| <div class="text-sm text-gray-500">Admin</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-8 w-8 bg-red-100 rounded-full flex items-center justify-center"> |
| <i class="fab fa-google text-red-600"></i> |
| </div> |
| <div class="ml-3"> |
| <div class="text-sm text-gray-900">Google Ads</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Approved</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark">View</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="transactions" class="tab-content"> |
| <div class="mb-4 flex justify-between items-center"> |
| <h2 class="text-lg font-medium text-gray-800">Transactions</h2> |
| <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-dark focus:outline-none"> |
| <i class="fas fa-plus mr-2"></i> Add Funds |
| </button> |
| </div> |
| |
| |
| <div class="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4"> |
| <div class="p-4 bg-white rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-blue-50 mr-3"> |
| <i class="fab fa-cc-stripe text-blue-500 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Stripe</p> |
| <p class="text-sm text-gray-900">Connected</p> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-white rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-yellow-50 mr-3"> |
| <i class="fab fa-cc-paypal text-yellow-500 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">PayPal</p> |
| <p class="text-sm text-gray-900">Connected</p> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-white rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-green-50 mr-3"> |
| <i class="fas fa-wallet text-green-500 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Payoneer</p> |
| <p class="text-sm text-gray-900">Not connected</p> |
| </div> |
| </div> |
| </div> |
| <div class="p-4 bg-white rounded-lg shadow-sm"> |
| <div class="flex items-center"> |
| <div class="p-3 rounded-full bg-purple-50 mr-3"> |
| <i class="fab fa-bitcoin text-purple-500 text-xl"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium text-gray-500">Crypto</p> |
| <p class="text-sm text-gray-900">Available</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white shadow-sm rounded-lg overflow-hidden"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Transaction ID</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment Method</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TXN-98765</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Deposit</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$500.00</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <i class="fab fa-cc-stripe text-blue-500 mr-2"></i> |
| <span class="text-sm text-gray-500">Stripe</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:45 AM</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TXN-98764</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Withdrawal</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$250.00</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <i class="fab fa-cc-paypal text-yellow-500 mr-2"></i> |
| <span class="text-sm text-gray-500">PayPal</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 3:30 PM</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TXN-98763</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Deposit</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$1,000.00</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <i class="fab fa-bitcoin text-purple-500 mr-2"></i> |
| <span class="text-sm text-gray-500">Bitcoin</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago, 11:20 AM</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TXN-98762</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Transfer</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$150.00</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <i class="fas fa-exchange-alt text-gray-500 mr-2"></i> |
| <span class="text-sm text-gray-500">Internal</span> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 days ago, 5:15 PM</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="users" class="tab-content"> |
| <div class="mb-4 flex justify-between items-center"> |
| <h2 class="text-lg font-medium text-gray-800">User Management</h2> |
| <button class="flex items-center px-4 py-2 text-sm font-medium text-white bg-primary rounded-md hover:bg-primary-dark focus:outline-none"> |
| <i class="fas fa-plus mr-2"></i> Add User |
| </button> |
| </div> |
| |
| <div class="bg-white shadow-sm rounded-lg overflow-hidden"> |
| <div class="p-4 border-b border-gray-200 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <input type="text" placeholder="Search users..." class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary"> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"> |
| <i class="fas fa-filter"></i> Filter |
| </button> |
| <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200"> |
| <i class="fas fa-download"></i> Export |
| </button> |
| </div> |
| </div> |
| |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">User</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Role</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Joined</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">John Doe</div> |
| <div class="text-sm text-gray-500">Admin</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">john.doe@example.com</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Admin</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jan 12, 2023</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark mr-3">Edit</button> |
| <button class="text-gray-600 hover:text-gray-900">View</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/42.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Jane Smith</div> |
| <div class="text-sm text-gray-500">Reseller</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">jane.smith@example.com</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Reseller</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Feb 5, 2023</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark mr-3">Edit</button> |
| <button class="text-gray-600 hover:text-gray-900">View</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Robert Johnson</div> |
| <div class="text-sm text-gray-500">User</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">robert.j@example.com</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">User</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mar 18, 2023</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark mr-3">Edit</button> |
| <button class="text-gray-600 hover:text-gray-900">View</button> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <div class="flex items-center"> |
| <div class="flex-shrink-0 h-10 w-10"> |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt=""> |
| </div> |
| <div class="ml-4"> |
| <div class="text-sm font-medium text-gray-900">Sarah Williams</div> |
| <div class="text-sm text-gray-500">Admin</div> |
| </div> |
| </div> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">sarah.w@example.com</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">Admin</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Apr 2, 2023</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span> |
| </td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
| <button class="text-primary hover:text-primary-dark mr-3">Edit</button> |
| <button class="text-gray-600 hover:text-gray-900">View</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| </div> |
|
|
| |
| <div id="addFundsModal" class="fixed inset-0 z-50 hidden overflow-y-auto"> |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
| </div> |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"> |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
| <div class="sm:flex sm:items-start"> |
| <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 sm:mx-0 sm:h-10 sm:w-10"> |
| <i class="fas fa-wallet text-primary"></i> |
| </div> |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> |
| <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Add Funds to Your Account</h3> |
| <div class="mt-2"> |
| <div class="mb-4"> |
| <label for="amount" class="block text-sm font-medium text-gray-700">Amount</label> |
| <div class="mt-1 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">$</span> |
| </div> |
| <input type="text" name="amount" id="amount" class="focus:ring-primary focus:border-primary block w-full pl-7 pr-12 sm:text-sm border-gray-300 rounded-md" placeholder="0.00"> |
| <div class="absolute inset-y-0 right-0 flex items-center"> |
| <label for="currency" class="sr-only">Currency</label> |
| <select id="currency" name="currency" class="focus:ring-primary focus:border-primary h-full py-0 pl-2 pr-7 border-transparent bg-transparent text-gray-500 sm:text-sm rounded-md"> |
| <option>USD</option> |
| <option>EUR</option> |
| <option>GBP</option> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label class="block text-sm font-medium text-gray-700">Payment Method</label> |
| <div class="mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2"> |
| <div class="relative flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-primary"> |
| <input id="payment-stripe" name="payment-method" type="radio" class="h-4 w-4 text-primary focus:ring-primary border-gray-300" checked> |
| <label for="payment-stripe" class="ml-3 block text-sm font-medium text-gray-700"> |
| <div class="flex items-center"> |
| <i class="fab fa-cc-stripe text-blue-500 text-xl mr-2"></i> |
| <span>Stripe</span> |
| </div> |
| </label> |
| </div> |
| <div class="relative flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-primary"> |
| <input id="payment-paypal" name="payment-method" type="radio" class="h-4 w-4 text-primary focus:ring-primary border-gray-300"> |
| <label for="payment-paypal" class="ml-3 block text-sm font-medium text-gray-700"> |
| <div class="flex items-center"> |
| <i class="fab fa-cc-paypal text-yellow-500 text-xl mr-2"></i> |
| <span>PayPal</span> |
| </div> |
| </label> |
| </div> |
| <div class="relative flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-primary"> |
| <input id="payment-payoneer" name="payment-method" type="radio" class="h-4 w-4 text-primary focus:ring-primary border-gray-300"> |
| <label for="payment-payoneer" class="ml-3 block text-sm font-medium text-gray-700"> |
| <div class="flex items-center"> |
| <i class="fas fa-wallet text-green-500 text-xl mr-2"></i> |
| <span>Payoneer</span> |
| </div> |
| </label> |
| </div> |
| <div class="relative flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-primary"> |
| <input id="payment-crypto" name="payment-method" type="radio" class="h-4 w-4 text-primary focus:ring-primary border-gray-300"> |
| <label for="payment-crypto" class="ml-3 block text-sm font-medium text-gray-700"> |
| <div class="flex items-center"> |
| <i class="fab fa-bitcoin text-purple-500 text-xl mr-2"></i> |
| <span>Crypto</span> |
| </div> |
| </label> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-4"> |
| <label for="notes" class="block text-sm font-medium text-gray-700">Notes (Optional)</label> |
| <div class="mt-1"> |
| <textarea id="notes" name="notes" rows="3" class="shadow-sm focus:ring-primary focus:border-primary mt-1 block w-full sm:text-sm border border-gray-300 rounded-md"></textarea> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
| <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:ml-3 sm:w-auto sm:text-sm"> |
| Add Funds |
| </button> |
| <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
| Cancel |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| function switchTab(tabId) { |
| |
| document.querySelectorAll('.tab-content').forEach(tab => { |
| tab.classList.remove('active'); |
| }); |
| |
| |
| document.getElementById(tabId).classList.add('active'); |
| |
| |
| document.querySelectorAll('.tab-button').forEach(button => { |
| button.classList.remove('border-primary', 'text-primary'); |
| button.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); |
| }); |
| |
| |
| event.currentTarget.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); |
| event.currentTarget.classList.add('border-primary', 'text-primary'); |
| } |
| |
| |
| function openModal(modalId) { |
| document.getElementById(modalId).classList.remove('hidden'); |
| } |
| |
| function closeModal(modalId) { |
| document.getElementById(modalId).classList.add('hidden'); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| document.querySelectorAll('.fixed.inset-0').forEach(modalBg => { |
| modalBg.addEventListener('click', function(e) { |
| if (e.target === modalBg) { |
| modalBg.parentElement.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| const addFundsBtn = document.querySelector('button:has(i.fa-plus) + i.fa-wallet'); |
| if (addFundsBtn) { |
| addFundsBtn.addEventListener('click', function() { |
| openModal('addFundsModal'); |
| }); |
| } |
| }); |
| |
| |
| const sampleChartData = { |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], |
| datasets: [{ |
| label: 'Spend', |
| data: [1200, 1900, 1500, 2100, 1800, 2500], |
| backgroundColor: 'rgba(79, 70, 229, 0.2)', |
| borderColor: 'rgba(79, 70, 229, 1)', |
| borderWidth: 1 |
| }] |
| }; |
| </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=ceebaby/admaster" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
