Plateforme de négociation minière : échangez des métaux et des minéraux

390 ericksuarezdo

Ouvrir dans l'éditeur Publiez votre code

Plateforme de négociation minière : échangez des métaux et des minéraux

Recommandé

22 August 2025

Animation de notification de blob CSS

20 August 2025

Modèle HTML CSS de formulaire de connexion et d'inscription

14 May 2025

Un code par cyrillsemah

HTML

<!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>

CSS

/* 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;
}

JS

// 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);
}

Recommandé

Animation de notification de blob CSS

Modèle HTML CSS de formulaire de connexion et d'inscription

Un code par cyrillsemah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS