lorokas978/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Billing - PolyGlot</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9</head>10<body class="bg-gray-50 min-h-screen">11 <div class="flex flex-col min-h-screen">12 <custom-navbar></custom-navbar>13 14 <div class="flex flex-1">15 <custom-sidebar active="billing"></custom-sidebar>16 17 <main class="flex-1 p-8">18 <div class="max-w-5xl mx-auto">19 <div class="flex justify-between items-center mb-8">20 <h1 class="text-3xl font-bold text-gray-900">Billing</h1>21 <div class="flex gap-2">22 <button class="bg-gray-200 text-gray-700 px-4 py-2 rounded hover:bg-gray-300 flex items-center gap-2">23 <i data-feather="download"></i> Invoice History24 </button>25 <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 flex items-center gap-2">26 <i data-feather="credit-card"></i> Update Payment27 </button>28 </div>29 </div>30 31 <!-- Current Plan -->32 <div class="bg-white shadow rounded-lg p-6 mb-8">33 <h2 class="text-xl font-semibold mb-4">Current Plan</h2>34 <div class="flex flex-col md:flex-row justify-between items-start md:items-center">35 <div>36 <p class="text-lg font-medium">Pro Plan</p>37 <p class="text-gray-600">$29/month • Billed monthly</p>38 <p class="text-sm text-gray-500 mt-2">Next billing date: August 15, 2023</p>39 </div>40 <div class="flex gap-3 mt-4 md:mt-0">41 <button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 flex items-center gap-2">42 <i data-feather="pause"></i> Pause Plan43 </button>44 <button class="bg-red-100 text-red-700 px-4 py-2 rounded hover:bg-red-200 flex items-center gap-2">45 <i data-feather="x"></i> Cancel Plan46 </button>47 </div>48 </div>49 </div>50 51 <!-- Plan Options -->52 <h2 class="text-xl font-semibold mb-4">Change Plan</h2>53 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">54 <!-- Free Plan -->55 <div class="bg-white border border-gray-200 rounded-lg p-6">56 <h3 class="font-bold text-lg mb-2">Free</h3>57 <p class="text-3xl font-bold mb-4">$0<span class="text-lg font-normal text-gray-500">/month</span></p>58 <ul class="space-y-2 mb-6">59 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> 1 Project</li>60 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> 3 Languages</li>61 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> Basic Support</li>62 </ul>63 <button class="w-full bg-gray-200 text-gray-800 py-2 rounded hover:bg-gray-300">Current Plan</button>64 </div>65 66 <!-- Pro Plan -->67 <div class="bg-white border-2 border-blue-500 rounded-lg p-6 relative">68 <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-bl rounded-tr">RECOMMENDED</div>69 <h3 class="font-bold text-lg mb-2">Pro</h3>70 <p class="text-3xl font-bold mb-4">$29<span class="text-lg font-normal text-gray-500">/month</span></p>71 <ul class="space-y-2 mb-6">72 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> 10 Projects</li>73 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> Unlimited Languages</li>74 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> Priority Support</li>75 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> Team Collaboration</li>76 </ul>77 <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">Upgrade to Pro</button>78 </div>79 80 <!-- Enterprise Plan -->81 <div class="bg-white border border-gray-200 rounded-lg p-6">82 <h3 class="font-bold text-lg mb-2">Enterprise</h3>83 <p class="text-3xl font-bold mb-4">$99<span class="text-lg font-normal text-gray-500">/month</span></p>84 <ul class="space-y-2 mb-6">85 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> Unlimited Projects</li>86 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> Unlimited Languages</li>87 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> 24/7 Support</li>88 <li class="flex items-center"><i data-feather="check" class="text-green-500 mr-2 w-4 h-4"></i> Advanced Analytics</li>89 </ul>90 <button class="w-full bg-gray-800 text-white py-2 rounded hover:bg-gray-900">Contact Sales</button>91 </div>92 </div>93 94 <!-- Payment Method -->95 <div class="bg-white shadow rounded-lg p-6 mb-8">96 <h2 class="text-xl font-semibold mb-4">Payment Method</h2>97 <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg mb-4">98 <div class="flex items-center">99 <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/visa/visa-original.svg" class="h-8 mr-4" alt="Visa">100 <div>101 <p class="font-medium">Visa ending in 4242</p>102 <p class="text-sm text-gray-500">Expires 04/2025</p>103 </div>104 </div>105 <button class="text-blue-600 hover:text-blue-800 flex items-center gap-1">106 <i data-feather="edit" class="w-4 h-4"></i> Edit107 </button>108 </div>109 <button class="text-blue-600 hover:text-blue-800 flex items-center gap-1">110 <i data-feather="plus" class="w-4 h-4"></i> Add new payment method111 </button>112 </div>113 114 <!-- Billing History -->115 <div class="bg-white shadow rounded-lg p-6">116 <h2 class="text-xl font-semibold mb-4">Billing History</h2>117 <table class="min-w-full divide-y divide-gray-200">118 <thead>119 <tr>120 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>121 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>122 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>123 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>124 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Receipt</th>125 </tr>126 </thead>127 <tbody class="bg-white divide-y divide-gray-200">128 <tr>129 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jul 15, 2023</td>130 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Pro Plan Subscription</td>131 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$29.00</td>132 <td class="px-6 py-4 whitespace-nowrap">133 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Paid</span>134 </td>135 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">136 <a href="#" class="text-blue-600 hover:text-blue-900">Download</a>137 </td>138 </tr>139 <tr>140 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 15, 2023</td>141 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Pro Plan Subscription</td>142 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$29.00</td>143 <td class="px-6 py-4 whitespace-nowrap">144 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Paid</span>145 </td>146 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">147 <a href="#" class="text-blue-600 hover:text-blue-900">Download</a>148 </td>149 </tr>150 </tbody>151 </table>152 </div>153 </div>154 </main>155 </div>156 </div>157 158 <script src="components/navbar.js"></script>159 <script src="components/sidebar.js"></script>160 <script>161 feather.replace();162 </script>163</body>164</html>