MuchDesign/gpu-nexus-aggregator
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>User Dashboard - GPU Nexus Aggregator</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>11 <style>12 @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');13 body {14 font-family: 'Space Grotesk', sans-serif;15 background-color: #111827;16 color: #f3f4f6;17 }18 .sidebar {19 height: calc(100vh - 4rem);20 }21 .active-tab {22 background-color: #1e40af;23 border-left: 4px solid #3b82f6;24 }25 .progress-bar {26 height: 6px;27 border-radius: 3px;28 }29 .usage-card {30 transition: all 0.3s ease;31 }32 .usage-card:hover {33 transform: translateY(-3px);34 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);35 }36 </style>37</head>38<body>39 <!-- Navigation -->40 <nav class="container mx-auto px-6 py-4 flex justify-between items-center">41 <div class="flex items-center space-x-2">42 <i data-feather="cpu" class="text-blue-400 w-8 h-8"></i>43 <span class="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">GPU Nexus</span>44 </div>45 <div class="hidden md:flex space-x-8">46 <a href="index.html" class="hover:text-blue-400 transition">Home</a>47 <a href="marketplace.html" class="hover:text-blue-400 transition">Marketplace</a>48 <a href="dashboard.html" class="text-blue-400">Dashboard</a>49 <a href="#" class="hover:text-blue-400 transition">Recommendations</a>50 <a href="#" class="hover:text-blue-400 transition">Community</a>51 </div>52 <div class="flex items-center space-x-4">53 <div class="relative">54 <button class="flex items-center space-x-2">55 <img src="http://static.photos/people/200x200/1" alt="User" class="w-8 h-8 rounded-full">56 <span class="hidden md:inline">John Doe</span>57 <i data-feather="chevron-down" class="w-4 h-4"></i>58 </button>59 </div>60 <button class="md:hidden">61 <i data-feather="menu" class="w-6 h-6"></i>62 </button>63 </div>64 </nav>65 66 <!-- Dashboard Content -->67 <div class="container mx-auto px-6 flex">68 <!-- Sidebar -->69 <div class="w-64 pr-6 py-6 hidden md:block sidebar sticky top-16">70 <div class="bg-gray-800 rounded-xl p-4 mb-6">71 <div class="flex items-center mb-4">72 <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-3">73 <div>74 <h3 class="font-semibold">John Doe</h3>75 <p class="text-sm text-gray-400">Pro Member</p>76 </div>77 </div>78 <div class="flex justify-between text-sm mb-2">79 <span class="text-gray-400">Credits:</span>80 <span>$42.50</span>81 </div>82 <button class="w-full py-2 bg-blue-600 hover:bg-blue-500 rounded-lg transition text-sm">83 Add Credits84 </button>85 </div>86 87 <nav>88 <ul class="space-y-1">89 <li>90 <a href="#" class="flex items-center px-4 py-3 rounded-lg active-tab">91 <i data-feather="home" class="w-5 h-5 mr-3"></i>92 Dashboard93 </a>94 </li>95 <li>96 <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-800 transition">97 <i data-feather="shopping-bag" class="w-5 h-5 mr-3"></i>98 My Rentals99 </a>100 </li>101 <li>102 <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-800 transition">103 <i data-feather="hard-drive" class="w-5 h-5 mr-3"></i>104 My GPUs105 </a>106 </li>107 <li>108 <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-800 transition">109 <i data-feather="dollar-sign" class="w-5 h-5 mr-3"></i>110 Earnings111 </a>112 </li>113 <li>114 <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-800 transition">115 <i data-feather="bookmark" class="w-5 h-5 mr-3"></i>116 Bookmarks117 </a>118 </li>119 <li>120 <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-800 transition">121 <i data-feather="settings" class="w-5 h-5 mr-3"></i>122 Settings123 </a>124 </li>125 <li>126 <a href="#" class="flex items-center px-4 py-3 rounded-lg hover:bg-gray-800 transition text-red-400">127 <i data-feather="log-out" class="w-5 h-5 mr-3"></i>128 Sign Out129 </a>130 </li>131 </ul>132 </nav>133 </div>134 135 <!-- Main Content -->136 <div class="flex-1 py-6">137 <h1 class="text-3xl font-bold mb-8">Dashboard</h1>138 139 <!-- Stats Cards -->140 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">141 <div class="bg-gray-800 rounded-xl p-6">142 <div class="flex justify-between items-start">143 <div>144 <p class="text-gray-400">Active Rentals</p>145 <h2 class="text-2xl font-bold mt-1">3</h2>146 </div>147 <div class="p-3 bg-blue-900 bg-opacity-50 rounded-lg">148 <i data-feather="cpu" class="w-6 h-6 text-blue-400"></i>149 </div>150 </div>151 <div class="mt-4">152 <a href="#" class="text-blue-400 text-sm flex items-center">153 View All <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>154 </a>155 </div>156 </div>157 158 <div class="bg-gray-800 rounded-xl p-6">159 <div class="flex justify-between items-start">160 <div>161 <p class="text-gray-400">Listed GPUs</p>162 <h2 class="text-2xl font-bold mt-1">2</h2>163 </div>164 <div class="p-3 bg-green-900 bg-opacity-50 rounded-lg">165 <i data-feather="hard-drive" class="w-6 h-6 text-green-400"></i>166 </div>167 </div>168 <div class="mt-4">169 <a href="#" class="text-blue-400 text-sm flex items-center">170 Manage <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>171 </a>172 </div>173 </div>174 175 <div class="bg-gray-800 rounded-xl p-6">176 <div class="flex justify-between items-start">177 <div>178 <p class="text-gray-400">Monthly Earnings</p>179 <h2 class="text-2xl font-bold mt-1">$124.50</h2>180 </div>181 <div class="p-3 bg-purple-900 bg-opacity-50 rounded-lg">182 <i data-feather="dollar-sign" class="w-6 h-6 text-purple-400"></i>183 </div>184 </div>185 <div class="mt-4">186 <a href="#" class="text-blue-400 text-sm flex items-center">187 Withdraw <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>188 </a>189 </div>190 </div>191 </div>192 193 <!-- Active Rentals -->194 <div class="bg-gray-800 rounded-xl p-6 mb-8">195 <div class="flex justify-between items-center mb-6">196 <h2 class="text-xl font-semibold">Active Rentals</h2>197 <a href="#" class="text-blue-400 text-sm flex items-center">198 View All <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>199 </a>200 </div>201 202 <div class="overflow-x-auto">203 <table class="w-full">204 <thead>205 <tr class="text-gray-400 text-left border-b border-gray-700">206 <th class="pb-3">GPU</th>207 <th class="pb-3">Provider</th>208 <th class="pb-3">Started</th>209 <th class="pb-3">Duration</th>210 <th class="pb-3">Cost</th>211 <th class="pb-3">Status</th>212 <th class="pb-3">Actions</th>213 </tr>214 </thead>215 <tbody>216 <tr class="border-b border-gray-700 hover:bg-gray-750 transition">217 <td class="py-4">218 <div class="flex items-center">219 <img src="http://static.photos/technology/200x200/1" alt="A100" class="w-10 h-10 mr-3">220 <div>221 <div class="font-medium">NVIDIA A100</div>222 <div class="text-sm text-gray-400">80GB</div>223 </div>224 </div>225 </td>226 <td>Vast.ai</td>227 <td>2 hours ago</td>228 <td>24 hours</td>229 <td>$28.80</td>230 <td><span class="px-2 py-1 bg-green-900 text-green-300 text-xs rounded">Running</span></td>231 <td>232 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">233 Connect234 </button>235 </td>236 </tr>237 <tr class="border-b border-gray-700 hover:bg-gray-750 transition">238 <td class="py-4">239 <div class="flex items-center">240 <img src="http://static.photos/technology/200x200/2" alt="RTX 4090" class="w-10 h-10 mr-3">241 <div>242 <div class="font-medium">RTX 4090</div>243 <div class="text-sm text-gray-400">24GB</div>244 </div>245 </div>246 </td>247 <td>RunPod</td>248 <td>1 day ago</td>249 <td>3 days</td>250 <td>$48.96</td>251 <td><span class="px-2 py-1 bg-green-900 text-green-300 text-xs rounded">Running</span></td>252 <td>253 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">254 Connect255 </button>256 </td>257 </tr>258 <tr class="hover:bg-gray-750 transition">259 <td class="py-4">260 <div class="flex items-center">261 <img src="http://static.photos/technology/200x200/3" alt="RTX 3090" class="w-10 h-10 mr-3">262 <div>263 <div class="font-medium">RTX 3090</div>264 <div class="text-sm text-gray-400">24GB</div>265 </div>266 </div>267 </td>268 <td>Vast.ai</td>269 <td>3 days ago</td>270 <td>7 days</td>271 <td>$75.60</td>272 <td><span class="px-2 py-1 bg-yellow-900 text-yellow-300 text-xs rounded">Expiring</span></td>273 <td>274 <button class="px-3 py-1 bg-blue-600 hover:bg-blue-500 rounded text-sm">275 Extend276 </button>277 </td>278 </tr>279 </tbody>280 </table>281 </div>282 </div>283 284 <!-- Your GPUs -->285 <div class="bg-gray-800 rounded-xl p-6 mb-8">286 <div class="flex justify-between items-center mb-6">287 <h2 class="text-xl font-semibold">Your GPUs</h2>288 <a href="#" class="text-blue-400 text-sm flex items-center">289 Add GPU <i data-feather="plus" class="w-4 h-4 ml-1"></i>290 </a>291 </div>292 293 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">294 <div class="bg-gray-750 rounded-lg p-5 flex items-start">295 <img src="http://static.photos/technology/200x200/4" alt="RTX 4090" class="w-16 h-16 mr-4">296 <div class="flex-1">297 <div class="flex justify-between">298 <h3 class="font-semibold">RTX 4090</h3>299 <span class="flex items-center text-yellow-400">300 <i data-feather="star" class="w-4 h-4 fill-current"></i>301 <span class="ml-1">4.8</span>302 </span>303 </div>304 <p class="text-sm text-gray-400 mb-3">24GB GDDR6X • 16,384 CUDA Cores</p>305 <div class="flex justify-between text-sm mb-2">306 <span class="text-gray-400">Price:</span>307 <span>$0.85/hr</span>308 </div>309 <div class="flex justify-between text-sm mb-3">310 <span class="text-gray-400">Earnings:</span>311 <span>$124.50</span>312 </div>313 <div class="w-full bg-gray-700 rounded-full h-1.5 mb-3">314 <div class="bg-blue-600 h-1.5 rounded-full" style="width: 72%"></div>315 </div>316 <div class="flex space-x-2">317 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">318 Edit319 </button>320 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">321 Stats322 </button>323 <button class="px-3 py-1 bg-red-600 hover:bg-red-500 rounded text-sm">324 Remove325 </button>326 </div>327 </div>328 </div>329 330 <div class="bg-gray-750 rounded-lg p-5 flex items-start">331 <img src="http://static.photos/technology/200x200/5" alt="RTX 3090" class="w-16 h-16 mr-4">332 <div class="flex-1">333 <div class="flex justify-between">334 <h3 class="font-semibold">RTX 3090</h3>335 <span class="flex items-center text-yellow-400">336 <i data-feather="star" class="w-4 h-4 fill-current"></i>337 <span class="ml-1">4.5</span>338 </span>339 </div>340 <p class="text-sm text-gray-400 mb-3">24GB GDDR6X • 10,496 CUDA Cores</p>341 <div class="flex justify-between text-sm mb-2">342 <span class="text-gray-400">Price:</span>343 <span>$0.45/hr</span>344 </div>345 <div class="flex justify-between text-sm mb-3">346 <span class="text-gray-400">Earnings:</span>347 <span>$82.30</span>348 </div>349 <div class="w-full bg-gray-700 rounded-full h-1.5 mb-3">350 <div class="bg-blue-600 h-1.5 rounded-full" style="width: 48%"></div>351 </div>352 <div class="flex space-x-2">353 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">354 Edit355 </button>356 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">357 Stats358 </button>359 <button class="px-3 py-1 bg-red-600 hover:bg-red-500 rounded text-sm">360 Remove361 </button>362 </div>363 </div>364 </div>365 </div>366 </div>367 368 <!-- Usage Statistics -->369 <div class="bg-gray-800 rounded-xl p-6">370 <h2 class="text-xl font-semibold mb-6">Usage Statistics</h2>371 372 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">373 <div class="usage-card bg-gray-750 rounded-lg p-5">374 <div class="flex justify-between items-start mb-4">375 <div>376 <h3 class="font-medium">Compute Hours</h3>377 <p class="text-sm text-gray-400">This Month</p>378 </div>379 <div class="p-2 bg-blue-900 bg-opacity-50 rounded-lg">380 <i data-feather="clock" class="w-5 h-5 text-blue-400"></i>381 </div>382 </div>383 <h2 class="text-2xl font-bold mb-2">142 hrs</h2>384 <div class="text-sm text-green-400 flex items-center">385 <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>386 <span>12% from last month</span>387 </div>388 </div>389 390 <div class="usage-card bg-gray-750 rounded-lg p-5">391 <div class="flex justify-between items-start mb-4">392 <div>393 <h3 class="font-medium">Total Spent</h3>394 <p class="text-sm text-gray-400">This Month</p>395 </div>396 <div class="p-2 bg-purple-900 bg-opacity-50 rounded-lg">397 <i data-feather="dollar-sign" class="w-5 h-5 text-purple-400"></i>398 </div>399 </div>400 <h2 class="text-2xl font-bold mb-2">$153.36</h2>401 <div class="text-sm text-red-400 flex items-center">402 <i data-feather="trending-down" class="w-4 h-4 mr-1"></i>403 <span>8% from last month</span>404 </div>405 </div>406 407 <div class="usage-card bg-gray-750 rounded-lg p-5">408 <div class="flex justify-between items-start mb-4">409 <div>410 <h3 class="font-medium">Earnings</h3>411 <p class="text-sm text-gray-400">This Month</p>412 </div>413 <div class="p-2 bg-green-900 bg-opacity-50 rounded-lg">414 <i data-feather="credit-card" class="w-5 h-5 text-green-400"></i>415 </div>416 </div>417 <h2 class="text-2xl font-bold mb-2">$206.80</h2>418 <div class="text-sm text-green-400 flex items-center">419 <i data-feather="trending-up" class="w-4 h-4 mr-1"></i>420 <span>22% from last month</span>421 </div>422 </div>423 </div>424 </div>425 </div>426 </div>427 428 <!-- Footer -->429 <footer class="bg-gray-800 py-12">430 <div class="container mx-auto px-6">431 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">432 <div>433 <div class="flex items-center space-x-2 mb-4">434 <i data-feather="cpu" class="text-blue-400 w-6 h-6"></i>435 <span class="text-xl font-bold bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">GPU Nexus</span>436 </div>437 <p class="text-gray-400">The ultimate marketplace for GPU rentals across all major platforms.</p>438 </div>439 <div>440 <h4 class="text-lg font-semibold mb-4">Marketplace</h4>441 <ul class="space-y-2">442 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Browse GPUs</a></li>443 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">List Your GPU</a></li>444 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Pricing</a></li>445 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Comparison Tool</a></li>446 </ul>447 </div>448 <div>449 <h4 class="text-lg font-semibold mb-4">Resources</h4>450 <ul class="space-y-2">451 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Blog</a></li>452 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Guides</a></li>453 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">Benchmarks</a></li>454 <li><a href="#" class="text-gray-400 hover:text-blue-400 transition">FAQ</a></li>455 </ul>456 </div>457 <div>458 <h4 class="text-lg font-semibold mb-4">Connect</h4>459 <div class="flex space-x-4 mb-4">460 <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i data-feather="twitter"></i></a>461 <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i data-feather="discord"></i></a>462 <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i data-feather="github"></i></a>463 <a href="#" class="text-gray-400 hover:text-blue-400 transition"><i data-feather="linkedin"></i></a>464 </div>465 <p class="text-gray-400">Subscribe to our newsletter</p>466 <div class="flex mt-2">467 <input type="email" placeholder="Your email" class="px-3 py-2 bg-gray-700 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-blue-500 w-full">468 <button class="px-4 py-2 bg-blue-600 rounded-r-lg hover:bg-blue-500 transition">469 <i data-feather="send" class="w-4 h-4"></i>470 </button>471 </div>472 </div>473 </div>474 <div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">475 <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 GPU Nexus Aggregator. All rights reserved.</p>476 <div class="flex space-x-6">477 <a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Terms</a>478 <a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Privacy</a>479 <a href="#" class="text-gray-400 hover:text-blue-400 transition text-sm">Cookies</a>480 </div>481 </div>482 </div>483 </footer>484 <script>485 // API endpoints486 const API_BASE_URL = 'https://api.gpu-nexus.com';487 const DASHBOARD_API = `${API_BASE_URL}/dashboard`;488 const RENTALS_API = `${API_BASE_URL}/rentals`;489 490 // DOM Elements491 const statsCards = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-3.gap-6');492 const rentalsTable = document.querySelector('table tbody');493 const userGpusContainer = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.gap-6');494 const usageStatsContainer = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3.gap-6');495 496 // Initialize dashboard497 document.addEventListener('DOMContentLoaded', async () => {498 try {499 const [dashboardData, rentalsData, userGpusData] = await Promise.all([500 fetchDashboardData(),501 fetchRentalsData(),502 fetchUserGpusData()503 ]);504 505 renderDashboard(dashboardData);506 renderRentals(rentalsData);507 renderUserGpus(userGpusData);508 renderUsageStats(dashboardData.usage);509 } catch (error) {510 console.error('Error initializing dashboard:', error);511 }512 // Fetch dashboard data513 async function fetchDashboardData() {514 const response = await fetch(DASHBOARD_API, {515 headers: {516 'Authorization': `Bearer ${localStorage.getItem('token')}`517 }518 });519 return await response.json();520 }521 522 // Fetch rentals data523 async function fetchRentalsData() {524 const response = await fetch(RENTALS_API, {525 headers: {526 'Authorization': `Bearer ${localStorage.getItem('token')}`527 }528 });529 return await response.json();530 }531 532 // Fetch user GPUs data533 async function fetchUserGpusData() {534 const response = await fetch(`${DASHBOARD_API}/gpus`, {535 headers: {536 'Authorization': `Bearer ${localStorage.getItem('token')}`537 }538 });539 return await response.json();540 }541 542 // Render dashboard543 function renderDashboard(data) {544 statsCards.innerHTML = `545 <div class="bg-gray-800 rounded-xl p-6">546 <div class="flex justify-between items-start">547 <div>548 <p class="text-gray-400">Active Rentals</p>549 <h2 class="text-2xl font-bold mt-1">${data.activeRentals}</h2>550 </div>551 <div class="p-3 bg-blue-900 bg-opacity-50 rounded-lg">552 <i data-feather="cpu" class="w-6 h-6 text-blue-400"></i>553 </div>554 </div>555 <div class="mt-4">556 <a href="rentals.html" class="text-blue-400 text-sm flex items-center">557 View All <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>558 </a>559 </div>560 </div>561 562 <div class="bg-gray-800 rounded-xl p-6">563 <div class="flex justify-between items-start">564 <div>565 <p class="text-gray-400">Listed GPUs</p>566 <h2 class="text-2xl font-bold mt-1">${data.listedGpus}</h2>567 </div>568 <div class="p-3 bg-green-900 bg-opacity-50 rounded-lg">569 <i data-feather="hard-drive" class="w-6 h-6 text-green-400"></i>570 </div>571 </div>572 <div class="mt-4">573 <a href="my-gpus.html" class="text-blue-400 text-sm flex items-center">574 Manage <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>575 </a>576 </div>577 </div>578 579 <div class="bg-gray-800 rounded-xl p-6">580 <div class="flex justify-between items-start">581 <div>582 <p class="text-gray-400">Monthly Earnings</p>583 <h2 class="text-2xl font-bold mt-1">${data.monthlyEarnings}</h2>584 </div>585 <div class="p-3 bg-purple-900 bg-opacity-50 rounded-lg">586 <i data-feather="dollar-sign" class="w-6 h-6 text-purple-400"></i>587 </div>588 </div>589 <div class="mt-4">590 <a href="#" class="text-blue-400 text-sm flex items-center">591 Withdraw <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>592 </a>593 </div>594 </div>595 `;596 597 feather.replace();598 }599 600 // Render rentals601 function renderRentals(rentals) {602 rentalsTable.innerHTML = rentals.map(rental => `603 <tr class="border-b border-gray-700 hover:bg-gray-750 transition">604 <td class="py-4">605 <div class="flex items-center">606 <img src="${rental.image || 'http://static.photos/technology/200x200/1'}" 607 alt="${rental.model}" class="w-10 h-10 mr-3">608 <div>609 <div class="font-medium">${rental.model}</div>610 <div class="text-sm text-gray-400">${rental.vram}</div>611 </div>612 </div>613 </td>614 <td>${rental.provider}</td>615 <td>${rental.started}</td>616 <td>${rental.duration}</td>617 <td>${rental.cost}</td>618 <td>619 <span class="px-2 py-1 ${getStatusClass(rental.status)} text-xs rounded">620 ${rental.status}621 </span>622 </td>623 <td>624 <button class="px-3 py-1 ${rental.status === 'Expiring' ? 625 'bg-blue-600 hover:bg-blue-500' : 'bg-gray-700 hover:bg-gray-600'} 626 rounded text-sm" data-id="${rental.id}">627 ${rental.status === 'Expiring' ? 'Extend' : 'Connect'}628 </button>629 </td>630 </tr>631 `).join('');632 633 // Add event listeners634 document.querySelectorAll('table button').forEach(btn => {635 btn.addEventListener('click', () => {636 if (btn.textContent === 'Extend') {637 window.location.href = `extend-rental.html?id=${btn.dataset.id}`;638 } else {639 // Connect to GPU logic640 console.log('Connecting to rental:', btn.dataset.id);641 }642 });643 });644 }645 646 // Render user GPUs647 function renderUserGpus(gpus) {648 userGpusContainer.innerHTML = gpus.map(gpu => `649 <div class="bg-gray-750 rounded-lg p-5 flex items-start">650 <img src="${gpu.image || 'http://static.photos/technology/200x200/1'}" 651 alt="${gpu.model}" class="w-16 h-16 mr-4">652 <div class="flex-1">653 <div class="flex justify-between">654 <h3 class="font-semibold">${gpu.model}</h3>655 <span class="flex items-center text-yellow-400">656 <i data-feather="star" class="w-4 h-4 fill-current"></i>657 <span class="ml-1">${gpu.rating}</span>658 </span>659 </div>660 <p class="text-sm text-gray-400 mb-3">${gpu.specs}</p>661 <div class="flex justify-between text-sm mb-2">662 <span class="text-gray-400">Price:</span>663 <span>${gpu.price}/hr</span>664 </div>665 <div class="flex justify-between text-sm mb-3">666 <span class="text-gray-400">Earnings:</span>667 <span>${gpu.earnings}</span>668 </div>669 <div class="w-full bg-gray-700 rounded-full h-1.5 mb-3">670 <div class="bg-blue-600 h-1.5 rounded-full" style="width: ${gpu.utilization}%"></div>671 </div>672 <div class="flex space-x-2">673 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-id="${gpu.id}">674 Edit675 </button>676 <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm" data-id="${gpu.id}">677 Stats678 </button>679 <button class="px-3 py-1 bg-red-600 hover:bg-red-500 rounded text-sm" data-id="${gpu.id}">680 Remove681 </button>682 </div>683 </div>684 </div>685 `).join('');686 }687 688 // Render usage stats689 function renderUsageStats(stats) {690 usageStatsContainer.innerHTML = `691 <div class="usage-card bg-gray-750 rounded-lg p-5">692 <div class="flex justify-between items-start mb-4">693 <div>694 <h3 class="font-medium">Compute Hours</h3>695 <p class="text-sm text-gray-400">This Month</p>696 </div>697 <div class="p-2 bg-blue-900 bg-opacity-50 rounded-lg">698 <i data-feather="clock" class="w-5 h-5 text-blue-400"></i>699 </div>700 </div>701 <h2 class="text-2xl font-bold mb-2">${stats.computeHours} hrs</h2>702 <div class="text-sm ${stats.computeTrend > 0 ? 'text-green-400' : 'text-red-400'} flex items-center">703 <i data-feather="${stats.computeTrend > 0 ? 'trending-up' : 'trending-down'}" class="w-4 h-4 mr-1"></i>704 <span>${Math.abs(stats.computeTrend)}% from last month</span>705 </div>706 </div>707 708 <div class="usage-card bg-gray-750 rounded-lg p-5">709 <div class="flex justify-between items-start mb-4">710 <div>711 <h3 class="font-medium">Total Spent</h3>712 <p class="text-sm text-gray-400">This Month</p>713 </div>714 <div class="p-2 bg-purple-900 bg-opacity-50 rounded-lg">715 <i data-feather="dollar-sign" class="w-5 h-5 text-purple-400"></i>716 </div>717 </div>718 <h2 class="text-2xl font-bold mb-2">${stats.totalSpent}</h2>719 <div class="text-sm ${stats.spendingTrend > 0 ? 'text-red-400' : 'text-green-400'} flex items-center">720 <i data-feather="${stats.spendingTrend > 0 ? 'trending-up' : 'trending-down'}" class="w-4 h-4 mr-1"></i>721 <span>${Math.abs(stats.spendingTrend)}% from last month</span>722 </div>723 </div>724 725 <div class="usage-card bg-gray-750 rounded-lg p-5">726 <div class="flex justify-between items-start mb-4">727 <div>728 <h3 class="font-medium">Earnings</h3>729 <p class="text-sm text-gray-400">This Month</p>730 </div>731 <div class="p-2 bg-green-900 bg-opacity-50 rounded-lg">732 <i data-feather="credit-card" class="w-5 h-5 text-green-400"></i>733 </div>734 </div>735 <h2 class="text-2xl font-bold mb-2">${stats.earnings}</h2>736 <div class="text-sm ${stats.earningsTrend > 0 ? 'text-green-400' : 'text-red-400'} flex items-center">737 <i data-feather="${stats.earningsTrend > 0 ? 'trending-up' : 'trending-down'}" class="w-4 h-4 mr-1"></i>738 <span>${Math.abs(stats.earningsTrend)}% from last month</span>739 </div>740 </div>741 `;742 743 feather.replace();744 }745 746 // Helper function for status classes747 function getStatusClass(status) {748 switch(status) {749 case 'Running': return 'bg-green-900 text-green-300';750 case 'Expiring': return 'bg-yellow-900 text-yellow-300';751 case 'Pending': return 'bg-blue-900 text-blue-300';752 default: return 'bg-gray-700 text-gray-300';753 }754 }755 756 // Animate elements757 anime({758targets: '.usage-card',759 translateY: [20, 0],760 opacity: [0, 1],761 delay: anime.stagger(100),762 easing: 'easeOutExpo'763 });764 });765 </script>766</body>767</html>768