Webleb - HTML UI Elements - Um Código por alejandrokundrah

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MineTrader Pro - Advanced Mining Trading Platform</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js"></script>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 text-gray-200 min-h-screen">
  
  <nav id="navbar" class="bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-lg border-b border-gray-700 fixed w-full z-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex items-center">
          <div class="flex-shrink-0 flex items-center">
            <i class="fas fa-gem text-emerald-400 mr-2 text-xl"></i>
            <span class="text-xl font-bold text-white">MineTrader Pro</span>
          </div>
          <div class="hidden md:ml-6 md:flex md:space-x-4">
            <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Markets</a>
            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Trade</a>
            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Wallet</a>
            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
          </div>
        </div>
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <button id="loginBtn" class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
              Login
            </button>
          </div>
          <div class="ml-3 relative hidden" id="userMenuContainer">
            <div>
              <button id="userMenuBtn" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500">
                <span class="sr-only">Open user menu</span>
                <div class="h-8 w-8 rounded-full bg-gray-700 flex items-center justify-center">
                  <i class="fas fa-user text-emerald-400"></i>
                </div>
              </button>
            </div>
            <div id="userMenu" class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none">
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">Your Profile</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">Settings</a>
              <a href="#" class="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-700">Sign out</a>
            </div>
          </div>
          <div class="ml-3 md:hidden">
            <button id="mobileMenuBtn" class="text-gray-400 hover:text-white focus:outline-none focus:text-white">
              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
    <div id="mobileMenu" class="hidden md:hidden bg-gray-800 border-t border-gray-700">
      <div class="px-2 pt-2 pb-3 space-y-1">
        <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
        <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Markets</a>
        <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Trade</a>
        <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Wallet</a>
        <a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a>
      </div>
    </div>
  </nav>

<div class="pt-16 flex">
    
    <aside id="sidebar" class="bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-lg w-64 fixed h-full overflow-y-auto border-r border-gray-700 transition-all duration-300 transform md:translate-x-0 -translate-x-full">
      <div class="p-4">
        <div class="flex items-center justify-between text-gray-100 mb-6">
          <span class="text-lg font-semibold">Navigation</span>
          <button id="closeSidebar" class="md:hidden text-gray-400 hover:text-white">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <nav>
          <ul>
            <li class="mb-2">
              <a href="#" class="flex items-center px-4 py-2 text-gray-100 bg-gray-700 bg-opacity-50 rounded-md">
                <i class="fas fa-chart-line mr-3 text-emerald-400"></i>
                <span>Dashboard</span>
              </a>
            </li>
            <li class="mb-2">
              <a href="#" class="flex items-center px-4 py-2 text-gray-400 hover:text-gray-100 hover:bg-gray-700 hover:bg-opacity-50 rounded-md">
                <i class="fas fa-coins mr-3 text-emerald-400"></i>
                <span>Markets</span>
              </a>
            </li>
            <li class="mb-2">
              <a href="#" class="flex items-center px-4 py-2 text-gray-400 hover:text-gray-100 hover:bg-gray-700 hover:bg-opacity-50 rounded-md">
                <i class="fas fa-exchange-alt mr-3 text-emerald-400"></i>
                <span>Trade</span>
              </a>
            </li>
            <li class="mb-2">
              <a href="#" class="flex items-center px-4 py-2 text-gray-400 hover:text-gray-100 hover:bg-gray-700 hover:bg-opacity-50 rounded-md">
                <i class="fas fa-wallet mr-3 text-emerald-400"></i>
                <span>Wallet</span>
              </a>
            </li>
            <li class="mb-2">
              <a href="#" class="flex items-center px-4 py-2 text-gray-400 hover:text-gray-100 hover:bg-gray-700 hover:bg-opacity-50 rounded-md">
                <i class="fas fa-file-alt mr-3 text-emerald-400"></i>
                <span>Reports</span>
              </a>
            </li>
            <li class="mb-2">
              <a href="#" class="flex items-center px-4 py-2 text-gray-400 hover:text-gray-100 hover:bg-gray-700 hover:bg-opacity-50 rounded-md">
                <i class="fas fa-cog mr-3 text-emerald-400"></i>
                <span>Settings</span>
              </a>
            </li>
          </ul>
        </nav>
        <div class="border-t border-gray-700 mt-6 pt-4">
          <div class="flex items-center px-4 py-2 text-gray-400 hover:text-gray-100 hover:bg-gray-700 hover:bg-opacity-50 rounded-md cursor-pointer">
            <i class="fas fa-question-circle mr-3 text-emerald-400"></i>
            <span>Help & Support</span>
          </div>
        </div>
      </div>
    </aside>

<main id="content" class="flex-1 transition-all duration-300 md:ml-64 ml-0 p-6">
      <div class="mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
        <div>
          <h1 class="text-2xl font-bold text-white">Dashboard</h1>
          <p class="text-gray-400">Welcome back, <span id="username">Guest</span></p>
        </div>
        <div class="mt-4 md:mt-0 flex space-x-3">
          <button id="toggleSidebarBtn" class="md:hidden bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-md">
            <i class="fas fa-bars"></i>
          </button>
          <div class="relative">
            <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-md flex items-center">
              <i class="fas fa-bell mr-2"></i>
              <span>Notifications</span>
              <span class="bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center ml-2">3</span>
            </button>
          </div>
          <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-4 py-2 rounded-md flex items-center">
            <i class="fas fa-plus mr-2"></i>
            <span>Deposit</span>
          </button>
        </div>
      </div>

<div class="bg-gray-800 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl p-6 mb-6 border border-gray-700">
        <div class="flex flex-col md:flex-row justify-between mb-4">
          <h2 class="text-xl font-bold text-white mb-4 md:mb-0">Portfolio Summary</h2>
          <div class="flex space-x-3">
            <button class="text-gray-400 hover:text-white px-3 py-1 rounded-md text-sm border border-gray-600">
              <i class="fas fa-download mr-1"></i> Export
            </button>
            <select class="bg-gray-700 text-gray-300 rounded-md border border-gray-600 px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
              <option>Last 7 days</option>
              <option>Last 30 days</option>
              <option>Last 90 days</option>
              <option>Last year</option>
              <option>All time</option>
            </select>
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
            <div class="flex justify-between items-start">
              <div>
                <p class="text-gray-400 text-sm">Total Balance</p>
                <p class="text-2xl font-bold text-white">$128,560.45</p>
              </div>
              <span class="text-green-400 flex items-center text-sm">
                <i class="fas fa-arrow-up mr-1"></i> 12.5%
              </span>
            </div>
            <div class="mt-4 h-16">
              <canvas id="balanceChart"></canvas>
            </div>
          </div>
          <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
            <div class="flex justify-between items-start">
              <div>
                <p class="text-gray-400 text-sm">Today's Profit/Loss</p>
                <p class="text-2xl font-bold text-green-400">+$3,256.12</p>
              </div>
              <span class="text-green-400 flex items-center text-sm">
                <i class="fas fa-arrow-up mr-1"></i> 5.7%
              </span>
            </div>
            <div class="mt-4 h-16">
              <canvas id="profitChart"></canvas>
            </div>
          </div>
          <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
            <div class="flex justify-between items-start">
              <div>
                <p class="text-gray-400 text-sm">Portfolio Distribution</p>
                <p class="text-2xl font-bold text-white">4 Minerals</p>
              </div>
              <div class="text-white text-sm bg-gray-600 px-2 py-1 rounded">
                <i class="fas fa-chart-pie mr-1"></i> View
              </div>
            </div>
            <div class="mt-4 h-16">
              <canvas id="distributionChart"></canvas>
            </div>
          </div>
        </div>
      </div>

<div class="bg-gray-800 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl p-6 mb-6 border border-gray-700">
        <div class="flex flex-col md:flex-row justify-between mb-6">
          <h2 class="text-xl font-bold text-white mb-4 md:mb-0">Market Overview</h2>
          <div class="flex space-x-3">
            <button class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-md text-sm border border-gray-600 active">
              All
            </button>
            <button class="text-gray-400 hover:text-white px-3 py-1 rounded-md text-sm border border-gray-600">
              Precious Metals
            </button>
            <button class="text-gray-400 hover:text-white px-3 py-1 rounded-md text-sm border border-gray-600">
              Industrial Metals
            </button>
            <button class="text-gray-400 hover:text-white px-3 py-1 rounded-md text-sm border border-gray-600">
              Rare Minerals
            </button>
          </div>
        </div>
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-700">
            <thead class="bg-gray-700 bg-opacity-50">
              <tr>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                  Asset
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                  Price
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                  24h Change
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                  Market Cap
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                  Volume (24h)
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                  Chart
                </th>
                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                  Action
                </th>
              </tr>
            </thead>
            <tbody class="bg-gray-800 bg-opacity-50 divide-y divide-gray-700">
              <tr class="hover:bg-gray-700 transition duration-150">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-yellow-100">
                      <i class="fas fa-coins text-yellow-600"></i>
                    </div>
                    <div class="ml-4">
                      <div class="text-sm font-medium text-white">Gold</div>
                      <div class="text-sm text-gray-400">GOLD</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$1,876.43</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-green-400 flex items-center">
                    <i class="fas fa-caret-up mr-1"></i> 2.34%
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$456.7B</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$24.5B</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="h-10 w-20">
                    <canvas class="miniChart" data-id="gold-chart"></canvas>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                  <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-3 py-1 rounded-md mr-2">
                    Buy
                  </button>
                  <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded-md">
                    Sell
                  </button>
                </td>
              </tr>
              <tr class="hover:bg-gray-700 transition duration-150">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-gray-200">
                      <i class="fas fa-coins text-gray-600"></i>
                    </div>
                    <div class="ml-4">
                      <div class="text-sm font-medium text-white">Silver</div>
                      <div class="text-sm text-gray-400">SILV</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$23.75</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-green-400 flex items-center">
                    <i class="fas fa-caret-up mr-1"></i> 1.25%
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$128.3B</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$8.7B</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="h-10 w-20">
                    <canvas class="miniChart" data-id="silver-chart"></canvas>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                  <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-3 py-1 rounded-md mr-2">
                    Buy
                  </button>
                  <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded-md">
                    Sell
                  </button>
                </td>
              </tr>
              <tr class="hover:bg-gray-700 transition duration-150">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-blue-100">
                      <i class="fas fa-atom text-blue-600"></i>
                    </div>
                    <div class="ml-4">
                      <div class="text-sm font-medium text-white">Lithium</div>
                      <div class="text-sm text-gray-400">LITH</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$67.92</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-red-400 flex items-center">
                    <i class="fas fa-caret-down mr-1"></i> 0.87%
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$89.5B</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$5.2B</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="h-10 w-20">
                    <canvas class="miniChart" data-id="lithium-chart"></canvas>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                  <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-3 py-1 rounded-md mr-2">
                    Buy
                  </button>
                  <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded-md">
                    Sell
                  </button>
                </td>
              </tr>
              <tr class="hover:bg-gray-700 transition duration-150">
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="flex items-center">
                    <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-orange-100">
                      <i class="fas fa-bolt text-orange-600"></i>
                    </div>
                    <div class="ml-4">
                      <div class="text-sm font-medium text-white">Copper</div>
                      <div class="text-sm text-gray-400">COPP</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$4.52</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-green-400 flex items-center">
                    <i class="fas fa-caret-up mr-1"></i> 3.45%
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$106.8B</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="text-sm text-white">$7.1B</div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  <div class="h-10 w-20">
                    <canvas class="miniChart" data-id="copper-chart"></canvas>
                  </div>
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm">
                  <button class="bg-emerald-500 hover:bg-emerald-600 text-white px-3 py-1 rounded-md mr-2">
                    Buy
                  </button>
                  <button class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded-md">
                    Sell
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
        <div class="lg:col-span-2 bg-gray-800 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl p-6 border border-gray-700">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-white">Price Chart</h2>
            <div class="flex space-x-3">
              <select id="chartAssetSelect" class="bg-gray-700 text-gray-300 rounded-md border border-gray-600 px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500">
                <option value="gold">Gold</option>
                <option value="silver">Silver</option>
                <option value="lithium">Lithium</option>
                <option value="copper">Copper</option>
              </select>
              <div class="flex bg-gray-700 rounded-md border border-gray-600 overflow-hidden">
                <button class="text-gray-400 hover:text-white px-3 py-1 text-sm border-r border-gray-600">1D</button>
                <button class="text-gray-400 hover:text-white px-3 py-1 text-sm border-r border-gray-600">1W</button>
                <button class="text-gray-400 hover:text-white px-3 py-1 text-sm border-r border-gray-600">1M</button>
                <button class="bg-emerald-500 text-white px-3 py-1 text-sm">1Y</button>
              </div>
            </div>
          </div>
          <div class="h-80">
            <canvas id="mainChart"></canvas>
          </div>
        </div>
        <div class="bg-gray-800 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl p-6 border border-gray-700">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-white">Recent Transactions</h2>
            <a href="#" class="text-emerald-400 hover:text-emerald-300 text-sm">View All</a>
          </div>
          <div class="space-y-4">
            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-green-100">
                    <i class="fas fa-arrow-down text-green-600"></i>
                  </div>
                  <div class="ml-3">
                    <div class="text-sm font-medium text-white">Bought Gold</div>
                    <div class="text-xs text-gray-400">Today, 10:45 AM</div>
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-sm font-medium text-white">+0.258 GOLD</div>
                  <div class="text-xs text-gray-400">$485.32</div>
                </div>
              </div>
            </div>
            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="flex-shrink-0<div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-red-100">
                    <i class="fas fa-arrow-up text-red-600"></i>
                  </div>
                  <div class="ml-3">
                    <div class="text-sm font-medium text-white">Sold Lithium</div>
                    <div class="text-xs text-gray-400">Yesterday, 4:30 PM</div>
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-sm font-medium text-white">-1.542 LITH</div>
                  <div class="text-xs text-gray-400">$104.73</div>
                </div>
              </div>
            </div>
            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-green-100">
                    <i class="fas fa-arrow-down text-green-600"></i>
                  </div>
                  <div class="ml-3">
                    <div class="text-sm font-medium text-white">Bought Silver</div>
                    <div class="text-xs text-gray-400">Feb 23, 2023</div>
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-sm font-medium text-white">+5.000 SILV</div>
                  <div class="text-xs text-gray-400">$118.75</div>
                </div>
              </div>
            </div>
            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-blue-100">
                    <i class="fas fa-wallet text-blue-600"></i>
                  </div>
                  <div class="ml-3">
                    <div class="text-sm font-medium text-white">Deposit</div>
                    <div class="text-xs text-gray-400">Feb 21, 2023</div>
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-sm font-medium text-white">+$1,000.00</div>
                  <div class="text-xs text-gray-400">Bank Transfer</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-gray-800 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl p-6 border border-gray-700">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-white">Market News</h2>
            <a href="#" class="text-emerald-400 hover:text-emerald-300 text-sm">More News</a>
          </div>
          <div class="space-y-6">
            <div class="flex flex-col md:flex-row">
              <div class="md:w-1/4 flex-shrink-0">
                <div class="h-48 md:h-32 bg-gray-700 rounded-lg overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1622728734782-556725341bb0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover" alt="Gold mine">
                </div>
              </div>
              <div class="md:w-3/4 md:pl-6 mt-4 md:mt-0">
                <h3 class="text-lg font-semibold text-white">Gold prices surge amid global economic uncertainty</h3>
                <p class="text-gray-400 mt-2 text-sm">Gold prices climbed to a six-month high on Monday as concerns about economic growth, geopolitical tensions and expectations of a less aggressive Federal Reserve interest rate trajectory burnished bullion's safe-haven appeal.</p>
                <div class="flex items-center mt-3">
                  <span class="text-xs text-gray-500">Reuters • 2 hours ago</span>
                  <span class="mx-2 text-gray-600">•</span>
                  <a href="#" class="text-emerald-400 hover:text-emerald-300 text-xs">Read More</a>
                </div>
              </div>
            </div>
            <div class="flex flex-col md:flex-row">
              <div class="md:w-1/4 flex-shrink-0">
                <div class="h-48 md:h-32 bg-gray-700 rounded-lg overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1622728734782-556725341bb0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover" alt="Mining operation">
                </div>
              </div>
              <div class="md:w-3/4 md:pl-6 mt-4 md:mt-0">
                <h3 class="text-lg font-semibold text-white">Copper demand set to double by 2035, leading miners say</h3>
                <p class="text-gray-400 mt-2 text-sm">The world's appetite for copper, an essential component in EVs and renewable energy technologies, will exceed supply by 2035, potentially leading to a 9.9 million ton shortfall, according to a new report from leading industry experts.</p>
                <div class="flex items-center mt-3">
                  <span class="text-xs text-gray-500">Bloomberg • 5 hours ago</span>
                  <span class="mx-2 text-gray-600">•</span>
                  <a href="#" class="text-emerald-400 hover:text-emerald-300 text-xs">Read More</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bg-gray-800 bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl p-6 border border-gray-700">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-white">Alerts</h2>
            <button class="text-emerald-400 hover:text-emerald-300 text-sm">
              <i class="fas fa-plus mr-1"></i> New Alert
            </button>
          </div>
          <div class="space-y-4">
            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <div class="h-3 w-3 bg-emerald-400 rounded-full"></div>
                  <span class="ml-3 text-white text-sm font-medium">Gold price above $1,900</span>
                </div>
                <div class="flex items-center">
                  <button class="text-gray-400 hover:text-white">
                    <i class="fas fa-pen"></i>
                  </button>
                  <button class="text-gray-400 hover:text-white ml-3">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <div class="h-3 w-3 bg-red-400 rounded-full"></div>
                  <span class="ml-3 text-white text-sm font-medium">Silver below $22.50</span>
                </div>
                <div class="flex items-center">
                  <button class="text-gray-400 hover:text-white">
                    <i class="fas fa-pen"></i>
                  </button>
                  <button class="text-gray-400 hover:text-white ml-3">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
            </div>
            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4 border border-gray-600">
              <div class="flex items-center justify-between">
                <div class="flex items-center">
                  <div class="h-3 w-3 bg-blue-400 rounded-full"></div>
                  <span class="ml-3 text-white text-sm font-medium">Lithium volatility alert</span>
                </div>
                <div class="flex items-center">
                  <button class="text-gray-400 hover:text-white">
                    <i class="fas fa-pen"></i>
                  </button>
                  <button class="text-gray-400 hover:text-white ml-3">
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <button class="w-full mt-6 bg-gray-700 hover:bg-gray-600 text-white py-2 rounded-md text-sm">
            View All Alerts
          </button>
        </div>
      </div>

<div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
        <div class="bg-gray-800 rounded-xl p-8 max-w-md w-full mx-4 border border-gray-700">
          <div class="flex justify-between items-center mb-6">
            <h2 class="text-xl font-bold text-white">Login to MineTrader Pro</h2>
            <button id="closeLoginModal" class="text-gray-400 hover:text-white">
              <i class="fas fa-times"></i>
            </button>
          </div>
          <form id="loginForm">
            <div class="mb-4">
              <label for="email" class="block text-gray-400 mb-2 text-sm">Email Address</label>
              <input type="email" id="email" class="w-full bg-gray-700 border border-gray-600 rounded-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder="Enter your email">
            </div>
            <div class="mb-6">
              <label for="password" class="block text-gray-400 mb-2 text-sm">Password</label>
              <input type="password" id="password" class="w-full bg-gray-700 border border-gray-600 rounded-md px-4 py-2 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500" placeholder="Enter your password">
              <div class="flex justify-between mt-2">
                <div class="flex items-center">
                  <input type="checkbox" id="remember" class="rounded bg-gray-700 border-gray-600 text-emerald-500 focus:ring-emerald-500">
                  <label for="remember" class="ml-2 text-sm text-gray-400">Remember me</label>
                </div>
                <a href="#" class="text-emerald-400 hover:text-emerald-300 text-sm">Forgot password?</a>
              </div>
            </div>
            <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-white py-2 rounded-md transition duration-300">
              Sign In
            </button>
            <p class="text-center mt-4 text-gray-400 text-sm">
              Don't have an account? <a href="#" class="text-emerald-400 hover:text-emerald-300">Sign up</a>
            </p>
          </form>
        </div>
      </div>
    </main>
  </div>

/* Custom Styles for MineTrader Pro */

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(31, 41, 55, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(75, 85, 99, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.8);
}

/* Background gradient animation */
body {
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Glassmorphism effects */
.backdrop-filter {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* Custom animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Card hover effects */
.hover-card-effect {
  transition: all 0.3s ease;
}

.hover-card-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.1);
}

/* Active navigation item */
.active-nav-item {
  background-color: rgba(16, 185, 129, 0.1);
  color: #fff;
  border-left: 3px solid #10b981;
}

/* Custom button styles */
.btn-emerald {
  background: linear-gradient(to right, #059669, #10b981);
  transition: all 0.3s ease;
}

.btn-emerald:hover {
  background: linear-gradient(to right, #047857, #059669);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.5);
}

/* Chart tooltip styling */
.chart-tooltip {
  background-color: rgba(31, 41, 55, 0.9);
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 4px;
  padding: 8px 12px;
  color: #f9fafb;
  font-size: 12px;
  pointer-events: none;
}

/* Table row hover animation */
.table-row-hover {
  transition: background-color 0.2s ease;
}

.table-row-hover:hover {
  background-color: rgba(55, 65, 81, 0.7);
}

/* Custom toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4b5563;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: #10b981;
}

input:focus + .toggle-slider {
  box-shadow: 0 0 1px #10b981;
}

input:checked + .toggle-slider:before {
  transform: translateX(24px);
}

/* Modal animations */
.modal-animation {
  animation: modalFade 0.3s ease;
}

@keyframes modalFade {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Loading spinner */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(16, 185, 129, 0.3);
  border-radius: 50%;
  border-top-color: #10b981;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Notification badge animation */
@keyframes notify {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.notification-badge {
  animation: notify 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Mobile menu animation */
.mobile-menu-enter {
  opacity: 0;
  transform: translateY(-10px);
}

.mobile-menu-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 200ms, transform 200ms;
}

.mobile-menu-exit {
  opacity: 1;
}

.mobile-menu-exit-active {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 200ms, transform 200ms;
}

// MineTrader Pro - Main JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // Initialize UI components
  initNavigation();
  initModals();
  initCharts();
  initUserMenu();
  setupDemoData();
});

// Initialize navigation and sidebar functionality
function initNavigation() {
  const sidebar = document.getElementById('sidebar');
  const content = document.getElementById('content');
  const toggleSidebarBtn = document.getElementById('toggleSidebarBtn');
  const closeSidebarBtn = document.getElementById('closeSidebar');
  const mobileMenuBtn = document.getElementById('mobileMenuBtn');
  const mobileMenu = document.getElementById('mobileMenu');

// Toggle sidebar on mobile
  toggleSidebarBtn.addEventListener('click', function() {
    sidebar.classList.toggle('-translate-x-full');
  });

// Close sidebar on mobile
  closeSidebarBtn.addEventListener('click', function() {
    sidebar.classList.add('-translate-x-full');
  });

// Mobile menu toggle
  mobileMenuBtn.addEventListener('click', function() {
    mobileMenu.classList.toggle('hidden');
  });

// Close mobile menu when clicking outside
  document.addEventListener('click', function(event) {
    if (!mobileMenuBtn.contains(event.target) && !mobileMenu.contains(event.target)) {
      mobileMenu.classList.add('hidden');
    }
  });

// Handle responsive layout
  function handleResize() {
    if (window.innerWidth >= 768) { // md breakpoint
      sidebar.classList.remove('-translate-x-full');
      content.classList.remove('ml-0');
      content.classList.add('md:ml-64');
    } else {
      sidebar.classList.add('-translate-x-full');
    }
  }

// Initialize and listen for window resize
  handleResize();
  window.addEventListener('resize', handleResize);
}

// Initialize modals
function initModals() {
  const loginBtn = document.getElementById('loginBtn');
  const loginModal = document.getElementById('loginModal');
  const closeLoginModal = document.getElementById('closeLoginModal');
  const loginForm = document.getElementById('loginForm');
  const userMenuContainer = document.getElementById('userMenuContainer');
  const userMenuBtn = document.getElementById('userMenuBtn');
  const userMenu = document.getElementById('userMenu');
  const usernameEl = document.getElementById('username');

// Open login modal
  loginBtn.addEventListener('click', function() {
    loginModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden'; // Prevent scrolling
  });

// Close login modal
  closeLoginModal.addEventListener('click', function() {
    loginModal.classList.add('hidden');
    document.body.style.overflow = ''; // Restore scrolling
  });

// Close modal when clicking outside
  loginModal.addEventListener('click', function(event) {
    if (event.target === loginModal) {
      loginModal.classList.add('hidden');
      document.body.style.overflow = ''; // Restore scrolling
    }
  });

// Handle login form submission
  loginForm.addEventListener('submit', function(event) {
    event.preventDefault();
    
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    
    // For demo purposes, just check if fields are not empty
    if (email && password) {
      // Simulate successful login
      loginModal.classList.add('hidden');
      document.body.style.overflow = ''; // Restore scrolling
      
      // Update UI to logged in state
      loginBtn.classList.add('hidden');
      userMenuContainer.classList.remove('hidden');
      
      // Extract username from email
      const username = email.split('@')[0];
      usernameEl.textContent = username;
    }
  });

// User menu toggle
  userMenuBtn.addEventListener('click', function() {
    userMenu.classList.toggle('hidden');
  });

// Close user menu when clicking outside
  document.addEventListener('click', function(event) {
    if (!userMenuBtn.contains(event.target) && !userMenu.contains(event.target)) {
      userMenu.classList.add('hidden');
    }
  });
}

// Initialize user menu functionality
function initUserMenu() {
  const userMenuBtn = document.getElementById('userMenuBtn');
  const userMenu = document.getElementById('userMenu');

userMenuBtn.addEventListener('click', function() {
    userMenu.classList.toggle('hidden');
  });

// Initialize charts
function initCharts() {
  // Set default chart options for consistent styling
  Chart.defaults.color = '#9ca3af';
  Chart.defaults.borderColor = 'rgba(75, 85, 99, 0.3)';
  Chart.defaults.font.family = "'Inter', 'Helvetica', 'Arial', sans-serif";

// Initialize portfolio summary charts
  initBalanceChart();
  initProfitChart();
  initDistributionChart();
  
  // Initialize main chart
  initMainPriceChart();
  
  // Initialize mini charts
  initMiniCharts();
}

// Initialize balance chart
function initBalanceChart() {
  const balanceCtx = document.getElementById('balanceChart').getContext('2d');
  
  const balanceData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Balance',
      data: [85400, 92000, 88500, 97600, 116200, 128560],
      backgroundColor: 'rgba(16, 185, 129, 0.2)',
      borderColor: '#10b981',
      borderWidth: 2,
      tension: 0.4,
      pointRadius: 0
    }]
  };
  
  new Chart(balanceCtx, {
    type: 'line',
    data: balanceData,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          enabled: false
        }
      },
      scales: {
        x: {
          display: false
        },
        y: {
          display: false
        }
      }
    }
  });
}

// Initialize profit chart
function initProfitChart() {
  const profitCtx = document.getElementById('profitChart').getContext('2d');
  
  const profitData = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    datasets: [{
      label: 'Profit/Loss',
      data: [520, 1120, -450, 890, -320, 1400, 3256],
      backgroundColor: function(context) {
        const index = context.dataIndex;
        const value = context.dataset.data[index];
        return value < 0 ? 'rgba(239, 68, 68, 0.2)' : 'rgba(16, 185, 129, 0.2)';
      },
      borderColor: function(context) {
        const index = context.dataIndex;
        const value = context.dataset.data[index];
        return value < 0 ? '#ef4444' : '#10b981';
      },
      borderWidth: 2
    }]
  };
  
  new Chart(profitCtx, {
    type: 'bar',
    data: profitData,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          enabled: false
        }
      },
      scales: {
        x: {
          display: false
        },
        y: {
          display: false
        }
      }
    }
  });
}

// Initialize distribution chart
function initDistributionChart() {
  const distributionCtx = document.getElementById('distributionChart').getContext('2d');
  
  const distributionData = {
    labels: ['Gold', 'Silver', 'Lithium', 'Copper'],
    datasets: [{
      label: 'Distribution',
      data: [45, 25, 15, 15],
      backgroundColor: [
        '#f59e0b', // Gold (amber)
        '#94a3b8', // Silver (gray)
        '#3b82f6', // Lithium (blue)
        '#d97706'  // Copper (orange)
      ],
      borderWidth: 0
    }]
  };
  
  new Chart(distributionCtx, {
    type: 'doughnut',
    data: distributionData,
    options: {
      responsive: true,
      maintainAspectRatio: false,
      cutout: '70%',
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          enabled: false
        }
      }
    }
  });
}

// Initialize main price chart
function initMainPriceChart() {
  const mainChartCtx = document.getElementById('mainChart').getContext('2d');
  const chartAssetSelect = document.getElementById('chartAssetSelect');
  
  // Generate chart data for different assets
  const chartData = {
    gold: generateChartData(1800, 1900, 365, 0.5),
    silver: generateChartData(22, 24, 365, 0.8),
    lithium: generateChartData(60, 70, 365, 1.2),
    copper: generateChartData(4, 4.6, 365, 0.7)
  };
  
  // Create the initial chart
  let currentAsset = 'gold';
  let mainChart = createMainChart(mainChartCtx, chartData[currentAsset], currentAsset);
  
  // Update chart when asset changes
  chartAssetSelect.addEventListener('change', function() {
    currentAsset = this.value;
    
    // Destroy previous chart and create new one
    mainChart.destroy();
    mainChart = createMainChart(mainChartCtx, chartData[currentAsset], currentAsset);
  });
}

// Create main chart with the provided data
function createMainChart(ctx, data, assetType) {
  // Set colors based on asset type
  let primaryColor, gradientColor;
  
  switch(assetType) {
    case 'gold':
      primaryColor = '#f59e0b';
      gradientColor = 'rgba(245, 158, 11, 0.1)';
      break;
    case 'silver':
      primaryColor = '#94a3b8';
      gradientColor = 'rgba(148, 163, 184, 0.1)';
      break;
    case 'lithium':
      primaryColor = '#3b82f6';
      gradientColor = 'rgba(59, 130, 246, 0.1)';
      break;
    case 'copper':
      primaryColor = '#d97706';
      gradientColor = 'rgba(217, 119, 6, 0.1)';
      break;
    default:
      primaryColor = '#10b981';
      gradientColor = 'rgba(16, 185, 129, 0.1)';
  }
  
  // Create gradient fill
  const gradient = ctx.createLinearGradient(0, 0, 0, 300);
  gradient.addColorStop(0, gradientColor);
  gradient.addColorStop(1, 'rgba(31, 41, 55, 0)');
  
  // Create chart
  return new Chart(ctx, {
    type: 'line',
    data: {
      labels: data.labels,
      datasets: [{
        label: assetType.charAt(0).toUpperCase + assetType.slice(1) + ' Price',
        data: data.values,
        backgroundColor: gradient,
        borderColor: primaryColor,
        borderWidth: 2,
        tension: 0.4,
        fill: true,
        pointRadius: 0,
        pointHoverRadius: 4,
        pointHoverBackgroundColor: primaryColor,
        pointHoverBorderColor: '#fff'
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: {
        mode: 'index',
        intersect: false
      },
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          enabled: true,
          backgroundColor: 'rgba(31, 41, 55, 0.9)',
          titleColor: '#f9fafb',
          bodyColor: '#f9fafb',
          borderColor: 'rgba(75, 85, 99, 0.5)',
          borderWidth: 1,
          padding: 10,
          cornerRadius: 4,
          displayColors: false,
          callbacks: {
            label: function(context) {
              return `$${context.parsed.y.toFixed(2)}`;
            }
          }
        }
      },
      scales: {
        x: {
          grid: {
            display: false
          },
          ticks: {
            maxRotation: 0,
            maxTicksLimit: 6
          }
        },
        y: {
          grid: {
            color: 'rgba(75, 85, 99, 0.1)'
          },
          ticks: {
            callback: function(value) {
              return '$' + value;
            }
          }
        }
      }
    }
  });
}

// Initialize mini charts in the market overview table
function initMiniCharts() {
  const miniChartElements = document.querySelectorAll('.miniChart');
  
  miniChartElements.forEach(canvas => {
    const ctx = canvas.getContext('2d');
    const id = canvas.getAttribute('data-id');
    
    // Generate different data patterns based on the chart id
    let data, color;
    
    switch(id) {
      case 'gold-chart':
        data = [1850, 1860, 1865, 1855, 1870, 1875, 1876];
        color = '#f59e0b';
        break;
      case 'silver-chart':
        data = [23.2, 23.5, 23.4, 23.6, 23.7, 23.5, 23.75];
        color = '#94a3b8';
        break;
      case 'lithium-chart':
        data = [68.5, 68.2, 68.0, 67.8, 67.5, 68.0, 67.92];
        color = '#3b82f6';
        break;
      case 'copper-chart':
        data = [4.37, 4.40, 4.42, 4.45, 4.48, 4.50, 4.52];
        color = '#d97706';
        break;
      default:
        data = [100, 102, 98, 101, 99, 103, 105];
        color = '#10b981';
    }
    
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['', '', '', '', '', '', ''],
        datasets: [{
          data: data,
          borderColor: color,
          borderWidth: 2,
          tension: 0.4,
          pointRadius: 0
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            enabled: false
          }
        },
        scales: {
          x: {
            display: false
          },
          y: {
            display: false
          }
        }
      }
    });
  });
}

// Generate sample chart data
function generateChartData(min, max, days, volatility) {
  const values = [];
  const labels = [];
  let currentValue = (max + min) / 2;
  
  const now = new Date();
  
  for (let i = days; i >= 0; i--) {
    // Add some randomness to the price
    const change = (Math.random() - 0.5) * volatility;
    currentValue = Math.max(min, Math.min(max, currentValue * (1 + change)));
    values.push(currentValue);
    
    // Create date label
    const date = new Date();
    date.setDate(now.getDate() - i);
    labels.push(formatDate(date));
  }
  
  return { values, labels };
}

// Format date for chart labels
function formatDate(date) {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  return `${months[date.getMonth()]} ${date.getDate()}`;
}

// Setup demo data
function setupDemoData() {
  // Simulate loading delay
  setTimeout(() => {
    // Example of updating UI elements with demo data
    document.getElementById('username').textContent = 'Demo User';
  }, 1000);
}

Validating your code, please wait...

HTML

CSS