aebrs/anycoder-c2958fc5
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>YPCC Trade Dashboard</title>7 <!-- Icons -->8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">9 <!-- Fonts -->10 <link href="https://fonts.googleapis.com/css2?family=Inter:wght=300;400;500;600;700&display=swap" rel="stylesheet">11 12 <style>13 :root {14 --bg-dark: #0f172a;15 --bg-card: #1e293b;16 --bg-sidebar: #162032;17 --text-main: #f8fafc;18 --text-muted: #94a3b8;19 --accent-primary: #38bdf8;20 --accent-secondary: #818cf8;21 --success: #22c55e;22 --danger: #ef4444;23 --border: #334155;24 --gradient-main: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);25 --glass: rgba(30, 41, 59, 0.7);26 }27 28 * {29 margin: 0;30 padding: 0;31 box-sizing: box-sizing;32 font-family: 'Inter', sans-serif;33 }34 35 body {36 background-color: var(--bg-dark);37 color: var(--text-main);38 overflow-x: hidden;39 display: flex;40 min-height: 100vh;41 }42 43 /* Sidebar */44 .sidebar {45 width: 260px;46 background-color: var(--bg-sidebar);47 border-right: 1px solid var(--border);48 display: flex;49 flex-direction: column;50 padding: 20px;51 position: fixed;52 height: 100vh;53 transition: transform 0.3s ease;54 z-index: 100;55 }56 57 .logo-area {58 display: flex;59 align-items: center;60 gap: 10px;61 padding-bottom: 30px;62 margin-bottom: 20px;63 border-bottom: 1px solid var(--border);64 }65 66 .logo-icon {67 width: 32px;68 height: 32px;69 background: var(--gradient-main);70 border-radius: 8px;71 display: flex;72 align-items: center;73 justify-content: center;74 font-weight: bold;75 color: white;76 }77 78 .logo-text {79 font-weight: 700;80 font-size: 1.2rem;81 letter-spacing: 0.5px;82 }83 84 .nav-links {85 list-style: none;86 flex-grow: 1;87 }88 89 .nav-item {90 margin-bottom: 10px;91 }92 93 .nav-link {94 display: flex;95 align-items: center;96 gap: 12px;97 padding: 12px 16px;98 color: var(--text-muted);99 text-decoration: none;100 border-radius: 12px;101 transition: all 0.2s;102 font-weight: 500;103 }104 105 .nav-link:hover, .nav-link.active {106 background-color: var(--bg-card);107 color: var(--text-main);108 border-left: 3px solid var(--accent-primary);109 }110 111 .nav-link i {112 width: 20px;113 text-align: center;114 }115 116 .anycoder-link {117 margin-top: auto;118 padding: 15px;119 background: rgba(30, 41, 59, 0.4);120 border-radius: 12px;121 text-align: center;122 font-size: 0.85rem;123 color: var(--text-muted);124 border: 1px solid var(--border);125 transition: 0.3s;126 }127 128 .anycoder-link:hover {129 background: var(--bg-card);130 color: var(--accent-primary);131 }132 133 /* Main Content */134 .main-content {135 flex-grow: 1;136 padding: 20px 30px;137 overflow-y: auto;138 position: relative;139 }140 141 /* Header */142 .header {143 display: flex;144 justify-content: space-between;145 align-items: center;146 margin-bottom: 30px;147 }148 149 .header-title h1 {150 font-size: 1.8rem;151 font-weight: 600;152 }153 154 .header-title p {155 color: var(--text-muted);156 font-size: 0.9rem;157 }158 159 .user-actions {160 display: flex;161 align-items: center;162 gap: 15px;163 }164 165 .btn {166 padding: 10px 20px;167 border-radius: 8px;168 border: none;169 cursor: pointer;170 font-weight: 600;171 transition: 0.2s;172 display: flex;173 align-items: center;174 gap: 8px;175 }176 177 .btn-primary {178 background: var(--gradient-main);179 color: white;180 box-shadow: 0 4px 15px rgba(56, 189, 248, 0.3);181 }182 183 .btn-primary:hover {184 transform: translateY(-2px);185 box-shadow: 0 6px 20px rgba(56, 189, 248, 0.4);186 }187 188 .btn-outline {189 background: transparent;190 border: 1px solid var(--border);191 color: var(--text-main);192 }193 194 .btn-outline:hover {195 border-color: var(--accent-primary);196 }197 198 .user-profile {199 width: 40px;200 height: 40px;201 border-radius: 10px;202 background: var(--bg-card);203 display: flex;204 align-items: center;205 justify-content: center;206 border: 1px solid var(--border);207 cursor: pointer;208 }209 210 /* Dashboard Grid */211 .dashboard-grid {212 display: grid;213 grid-template-columns: 2fr 1fr;214 gap: 25px;215 margin-bottom: 30px;216 }217 218 @media (max-width: 900px) {219 .dashboard-grid {220 grid-template-columns: 1fr;221 }222 }223 224 /* Cards */225 .card {226 background: var(--bg-card);227 border-radius: 20px;228 padding: 25px;229 border: 1px solid var(--border);230 position: relative;231 overflow: hidden;232 }233 234 .card-header {235 display: flex;236 justify-content: space-between;237 align-items: center;238 margin-bottom: 20px;239 }240 241 .card-title {242 font-size: 1.1rem;243 font-weight: 600;244 color: var(--text-main);245 }246 247 /* Stats Cards */248 .stats-row {249 display: grid;250 grid-template-columns: repeat(3, 1fr);251 gap: 20px;252 margin-bottom: 30px;253 }254 255 @media (max-width: 768px) {256 .stats-row {257 grid-template-columns: 1fr;258 }259 }260 261 .stat-card {262 background: var(--bg-card);263 padding: 20px;264 border-radius: 16px;265 border: 1px solid var(--border);266 display: flex;267 flex-direction: column;268 gap: 10px;269 }270 271 .stat-icon {272 width: 40px;273 height: 40px;274 background: rgba(56, 189, 248, 0.1);275 border-radius: 10px;276 display: flex;277 align-items: center;278 justify-content: center;279 color: var(--accent-primary);280 font-size: 1.2rem;281 }282 283 .stat-value {284 font-size: 1.5rem;285 font-weight: 700;286 }287 288 .stat-label {289 color: var(--text-muted);290 font-size: 0.85rem;291 }292 293 /* Chart Area */294 .chart-container {295 height: 300px;296 width: 100%;297 position: relative;298 }299 300 canvas {301 width: 100%;302 height: 100%;303 }304 305 /* Asset Table */306 .table-container {307 width: 100%;308 overflow-x: auto;309 }310 311 table {312 width: 100%;313 text-align: left;314 border-collapse: collapse;315 }316 317 th {318 padding: 15px;319 color: var(--text-muted);320 font-weight: 500;321 font-size: 0.9rem;322 border-bottom: 1px solid var(--border);323 }324 325 td {326 padding: 15px;327 font-size: 0.95rem;328 border-bottom: 1px solid rgba(51, 65, 85, 0.3);329 }330 331 td:first-child {332 font-weight: 600;333 color: var(--text-main);334 }335 336 .trend-up { color: var(--success); }337 .trend-down { color: var(--danger); }338 339 .action-btn {340 background: rgba(56, 189, 248, 0.1);341 color: var(--accent-primary);342 padding: 5px 10px;343 border-radius: 6px;344 font-size: 0.8rem;345 border: none;346 cursor: pointer;347 margin-left: 5px;348 }349 350 .action-btn:hover {351 background: rgba(56, 189, 248, 0.2);352 }353 354 /* Sidebar Toggle (Mobile) */355 .menu-toggle {356 display: none;357 background: none;358 border: none;359 color: var(--text-main);360 font-size: 1.5rem;361 cursor: pointer;362 }363 364 @media (max-width: 900px) {365 .sidebar {366 transform: translateX(-100%);367 }368 .sidebar.active {369 transform: translateX(0);370 }371 .menu-toggle {372 display: block;373 }374 .main-content {375 padding: 15px;376 }377 }378 379 /* Animations */380 @keyframes fadeIn {381 from { opacity: 0; transform: translateY(10px); }382 to { opacity: 1; transform: translateY(0); }383 }384 385 .animate-in {386 animation: fadeIn 0.5s ease forwards;387 }388 </style>389</head>390<body>391 392 <!-- Sidebar -->393 <nav class="sidebar">394 <div class="logo-area">395 <div class="logo-icon">YP</div>396 <div class="logo-text">YPCC Trade</div>397 </div>398 399 <ul class="nav-links">400 <li class="nav-item">401 <a href="#" class="nav-link active">402 <i class="fas fa-th-large"></i>403 <span>Dashboard</span>404 </a>405 </li>406 <li class="nav-item">407 <a href="#" class="nav-link">408 <i class="fas fa-chart-line"></i>409 <span>Analytics</span>410 </a>411 </li>412 <li class="nav-item">413 <a href="#" class="nav-link">414 <i class="fas fa-wallet"></i>415 <span>Wallet</span>416 </a>417 </li>418 <li class="nav-item">419 <a href="#" class="nav-link">420 <i class="fas fa-exchange-alt"></i>421 <span>Exchange</span>422 </a>423 </li>424 <li class="nav-item">425 <a href="#" class="nav-link">426 <i class="fas fa-cog"></i>427 <span>Settings</span>428 </a>429 </li>430 </ul>431 432 <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">433 Built with <span style="color: var(--accent-primary); font-weight: bold;">anycoder</span>434 </a>435 </nav>436 437 <!-- Main Content -->438 <main class="main-content">439 440 <!-- Header -->441 <header class="header">442 <button class="menu-toggle" onclick="toggleSidebar()">443 <i class="fas fa-bars"></i>444 </button>445 <div class="header-title">446 <h1>Market Overview</h1>447 <p>Welcome back, Trader. Here is your daily summary.</p>448 </div>449 <div class="user-actions">450 <button class="btn btn-outline">451 <i class="fas fa-download"></i> Report452 </button>453 <button class="btn btn-primary">454 <i class="fas fa-plus"></i> New Trade455 </button>456 <div class="user-profile">457 <i class="fas fa-user"></i>458 </div>459 </div>460 </header>461 462 <!-- Stats Row -->463 <div class="stats-row animate-in">464 <div class="stat-card">465 <div class="stat-icon"><i class="fas fa-coins"></i></div>466 <div class="stat-value">$42,894.00</div>467 <div class="stat-label">Total Balance</div>468 </div>469 <div class="stat-card">470 <div class="stat-icon"><i class="fas fa-arrow-up"></i></div>471 <div class="stat-value">+12.5%</div>472 <div class="stat-label">Daily Profit</div>473 </div>474 <div class="stat-card">475 <div class="stat-icon"><i class="fas fa-layer-group"></i></div>476 <div class="stat-value">14</div>477 <div class="stat-label">Active Positions</div>478 </div>479 </div>480 481 <!-- Main Grid -->482 <div class="dashboard-grid animate-in">483 484 <!-- Chart Section -->485 <section class="card">486 <div class="card-header">487 <h2 class="card-title">YPCC Asset Performance</h2>488 <select style="background: var(--bg-dark); color: white; border: 1px solid var(--border); padding: 5px 10px; border-radius: 6px;">489 <option>24H</option>490 <option>7D</option>491 <option>30D</option>492 </select>493 </div>494 <div class="chart-container">495 <canvas id="tradeChart"></canvas>496 </div>497 </section>498 499 <!-- Right Panel: Recent Assets -->500 <section class="card">501 <div class="card-header">502 <h2 class="card-title">Top Assets</h2>503 <i class="fas fa-ellipsis-h" style="color: var(--text-muted);"></i>504 </div>505 <div class="table-container">506 <table>507 <thead>508 <tr>509 <th>Asset</th>510 <th>Price</td>511 <th>Change</td>512 <th>Action</td>513 </tr>514 </thead>515 <tbody>516 <tr>517 <td>YPCC Token</td>518 <td>$124.50</td>519 <td class="trend-up">+2.4%</td>520 <td><button class="action-btn">Trade</button></td>521 </tr>522 <tr>523 <td>BTC</td>524 <td>$64,230</td>525 <td class="trend-down">-0.8%</td>526 <td><button class="action-btn">Trade</button></td>527 </tr>528 <tr>529 <td>ETH</td>530 <td>$3,450</td>531 <td class="trend-up">+1.2%</td>532 <td><button class="action-btn">Trade</button></td>533 </tr>534 <tr>535 <td>SOL</td>536 <td>$148.20</td>537 <td class="trend-up">+5.6%</td>538 <td><button class="action-btn">Trade</button></td>539 </tr>540 </tbody>541 </table>542 </div>543 </section>544 </div>545 546 <!-- Bottom Section: Transactions -->547 <section class="card animate-in">548 <div class="card-header">549 <h2 class="card-title">Recent Transactions</h2>550 <button class="btn btn-outline" style="padding: 5px 15px; font-size: 0.8rem;">View All</button>551 </div>552 <div class="table-container">553 <table>554 <thead>555 <tr>556 <th>Type</th>557 <th>Asset</th>558 <th>Amount</td>559 <th>Date</td>560 <th>Status</td>561 </tr>562 </thead>563 <tbody>564 <tr>565 <td><i class="fas fa-arrow-down" style="color: var(--danger);"></i> Withdraw</td>566 <td>USDT</td>567 <td>$2,500.00</td>568 <td>Oct 24, 2023</td>569 <td><span style="color: var(--success);">Completed</span></td>570 </tr>571 <tr>572 <td><i class="fas fa-arrow-up" style="color: var(--success);"></i> Deposit</td>573 <td>ETH</td>574 <td>1.5 ETH</td>575 <td>Oct 22, 2023</td>576 <td><span style="color: var(--success);">Completed</span></td>577 </tr>578 <tr>579 <td><i class="fas fa-exchange-alt" style="color: var(--accent-primary);"></i> Swap</td>580 <td>YPCC -> BTC</td>581 <td>$500.00</td>582 <td>Oct 20, 2023</td>583 <td><span style="color: var(--success);">Completed</span></td>584 </tr>585 </tbody>586 </table>587 </div>588 </section>589 590 </main>591 592 <script>593 // Sidebar Toggle Logic594 function toggleSidebar() {595 const sidebar = document.querySelector('.sidebar');596 sidebar.classList.toggle('active');597 }598 599 // Simple Chart Rendering Logic using Canvas600 function drawChart() {601 const canvas = document.getElementById('tradeChart');602 const ctx = canvas.getContext('2d');603 604 // Resize canvas to fit container605 canvas.width = canvas.parentElement.offsetWidth;606 canvas.height = canvas.parentElement.offsetHeight;607 608 const width = canvas.width;609 const height = canvas.height;610 611 // Gradient fill612 ctx.fillStyle = '#1e293b'; // Background613 ctx.fillRect(0, 0, width, height);614 615 // Generate random smooth line data616 const points = [];617 const numPoints = 20;618 for(let i=0; i<numPoints; i++) {619 points.push(Math.random() * height * 0.8 + height * 0.1);620 }621 622 // Draw Line623 ctx.beginPath();624 ctx.moveTo(0, height - points[0]);625 626 for(let i=1; i<points.length; i++) {627 // Simple bezier smoothing approximation628 const x = (i / (numPoints - 1)) * width;629 const y = height - points[i];630 ctx.lineTo(x, y);631 }632 633 ctx.strokeStyle = '#38bdf8';634 ctx.lineWidth = 3;635 ctx.stroke();636 637 // Draw Gradient under line638 ctx.beginPath();639 ctx.moveTo(0, height);640 for(let i=0; i<points.length; i++) {641 const x = (i / (numPoints - 1)) * width;642 const y = height - points[i];643 ctx.lineTo(x, y);644 }645 ctx.lineTo(width, height);646 ctx.fillStyle = 'rgba(56, 189, 248, 0.2)';647 ctx.fill();648 649 // Draw Dots650 ctx.fillStyle = '#fff';651 for(let i=0; i<points.length; i++) {652 const x = (i / (numPoints - 1)) * width;653 const y = height - points[i];654 ctx.beginPath();655 ctx.arc(x, y, 4, 0, Math.PI * 2);656 ctx.fill();657 }658 }659 660 // Initialize Chart661 window.addEventListener('resize', drawChart);662 drawChart();663 664 // Add interactivity to nav links665 const navLinks = document.querySelectorAll('.nav-link');666 navLinks.forEach(link => {667 link.addEventListener('click', (e) => {668 e.preventDefault();669 navLinks.forEach(l => l.classList.remove('active'));670 link.classList.add('active');671 });672 });673 </script>674</body>675</html>