<?php require ("header.php") ?>



    <main>
            <!-- Hero Section -->
    <div class="py-12 md:py-16 bg-gradient-to-b from-[#0D091C] to-[#0A0714]">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">Explore <span class="text-[#2FE6DE]">Markets</span></h1>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">Discover and trade a wide range of cryptocurrencies with advanced tools and real-time data.</p>
            </div>
        </div>
    </div>

  
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  <script src="https://cdn.tailwindcss.com"></script>
<body class="bg-[#0A0714] text-white">

  <!-- Market Search Section -->
  <div class="py-4 bg-[#0A0714]">
    <div class="container mx-auto px-4">
      <div class="bg-[#0D091C] p-6 rounded-xl border border-[#2FE6DE]/10 mb-10">
        <div class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-4">
          <div class="flex-1">
            <div class="relative">
              <input type="text" id="market-search" placeholder="Search cryptocurrencies..."
                class="w-full bg-[#1A1428] border border-[#2FE6DE]/20 rounded-lg p-3 pl-10 text-white focus:outline-none focus:border-[#2FE6DE] transition-colors">
              <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
          </div>
          <div class="flex space-x-3">
            <select id="market-sort"
              class="bg-[#1A1428] border border-[#2FE6DE]/20 rounded-lg p-3 text-white focus:outline-none focus:border-[#2FE6DE] transition-colors">
              <option value="market_cap_desc">Market Cap (High to Low)</option>
              <option value="market_cap_asc">Market Cap (Low to High)</option>
              <option value="volume_desc">Volume (High to Low)</option>
              <option value="volume_asc">Volume (Low to High)</option>
              <option value="price_change_desc">Gainers</option>
              <option value="price_change_asc">Losers</option>
            </select>
            <button id="apply-filter"
              class="bg-[#2FE6DE] text-[#0A0714] px-4 py-3 rounded-lg hover:bg-[#2FE6DE]/80 transition-colors font-medium">
              <i class="fas fa-filter mr-2"></i> Filter
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Markets List Section -->
  <div class="py-4 bg-[#0A0714]">
    <div class="container mx-auto px-4">
      <div class="mb-8">
        <h2 class="text-2xl font-bold mb-6">Cryptocurrency <span class="text-[#2FE6DE]">Markets</span></h2>

        <!-- Desktop Table View -->
        <div class="hidden md:block overflow-x-auto bg-[#0D091C] rounded-xl border border-[#2FE6DE]/10">
          <table class="w-full border-collapse">
            <thead>
              <tr class="border-b border-[#2FE6DE]/10 text-gray-300">
                <th class="p-4 text-left">#</th>
                <th class="p-4 text-left">Asset</th>
                <th class="p-4 text-right">Price</th>
                <th class="p-4 text-right">24h Change</th>
                <th class="p-4 text-right">24h Volume</th>
                <th class="p-4 text-right">Market Cap</th>
                <th class="p-4 text-right">Action</th>
              </tr>
            </thead>
            <tbody id="crypto-market-table">
              <tr>
                <td colspan="7" class="p-8 text-center text-gray-400">
                  <div class="flex justify-center items-center">
                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-[#2FE6DE]" xmlns="http://www.w3.org/2000/svg"
                      fill="none" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                        stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor"
                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 
                        5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 
                        5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span>Loading market data...</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- Mobile Card View -->
        <div class="md:hidden">
          <div id="crypto-market-cards" class="space-y-4"></div>
        </div>

        <!-- Pagination -->
        <div class="mt-6 flex justify-between items-center">
          <div class="text-gray-400 text-sm">
            Showing <span id="showing-start">0</span>-<span id="showing-end">0</span> of
            <span id="total-count">0</span> cryptocurrencies
          </div>
          <div class="flex space-x-2">
            <button id="prev-page"
              class="px-4 py-2 bg-[#1A1428] text-gray-300 rounded-lg border border-[#2FE6DE]/10 hover:border-[#2FE6DE]/30 disabled:opacity-50 disabled:cursor-not-allowed">
              <i class="fas fa-chevron-left mr-1"></i> Previous
            </button>
            <button id="next-page"
              class="px-4 py-2 bg-[#1A1428] text-gray-300 rounded-lg border border-[#2FE6DE]/10 hover:border-[#2FE6DE]/30 disabled:opacity-50 disabled:cursor-not-allowed">
              Next <i class="fas fa-chevron-right ml-1"></i>
            </button>
          </div>
        </div>
      </div>

      <!-- Top Gainers and Losers -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        <div
          class="bg-[#0D091C] p-6 rounded-xl border border-[#2FE6DE]/10 hover:border-[#2FE6DE]/30 transition-colors">
          <h3 class="text-xl font-semibold mb-4">Top <span class="text-[#2FE6DE]">Gainers</span></h3>
          <div id="top-gainers" class="space-y-3"></div>
        </div>
        <div
          class="bg-[#0D091C] p-6 rounded-xl border border-[#2FE6DE]/10 hover:border-[#2FE6DE]/30 transition-colors">
          <h3 class="text-xl font-semibold mb-4">Top <span class="text-[#2FE6DE]">Losers</span></h3>
          <div id="top-losers" class="space-y-3"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Script -->
  <script>
    let allCoins = [];
    let currentPage = 1;
    const perPage = 10;

    async function fetchCryptoData() {
      try {
        const res = await fetch(
          "https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=250&page=1&sparkline=false"
        );
        allCoins = await res.json();
        renderTable();
        renderCards();
        updatePagination();
        updateGainersLosers();
      } catch (err) {
        console.error("Error fetching data:", err);
      }
    }

    function renderTable() {
      const tbody = document.getElementById("crypto-market-table");
      tbody.innerHTML = "";
      const search = document.getElementById("market-search").value.toLowerCase();
      let coins = allCoins.filter(
        c => c.name.toLowerCase().includes(search) || c.symbol.toLowerCase().includes(search)
      );

      const sort = document.getElementById("market-sort").value;
      if (sort === "market_cap_asc") coins.sort((a, b) => a.market_cap - b.market_cap);
      if (sort === "market_cap_desc") coins.sort((a, b) => b.market_cap - a.market_cap);
      if (sort === "volume_asc") coins.sort((a, b) => a.total_volume - b.total_volume);
      if (sort === "volume_desc") coins.sort((a, b) => b.total_volume - a.total_volume);
      if (sort === "price_change_asc") coins.sort((a, b) => a.price_change_percentage_24h - b.price_change_percentage_24h);
      if (sort === "price_change_desc") coins.sort((a, b) => b.price_change_percentage_24h - a.price_change_percentage_24h);

      const start = (currentPage - 1) * perPage;
      const paginated = coins.slice(start, start + perPage);

      paginated.forEach((coin, i) => {
        tbody.innerHTML += `
          <tr class="border-b border-[#2FE6DE]/10">
            <td class="p-4 text-gray-400">${start + i + 1}</td>
            <td class="p-4 flex items-center space-x-2">
              <img src="${coin.image}" class="w-6 h-6" />
              <span class="text-white">${coin.name}</span>
              <span class="text-gray-400 text-sm">(${coin.symbol.toUpperCase()})</span>
            </td>
            <td class="p-4 text-right text-white">$${coin.current_price.toLocaleString()}</td>
            <td class="p-4 text-right ${coin.price_change_percentage_24h >= 0 ? "text-green-400" : "text-red-400"}">
              ${coin.price_change_percentage_24h.toFixed(2)}%
            </td>
            <td class="p-4 text-right text-gray-300">$${coin.total_volume.toLocaleString()}</td>
            <td class="p-4 text-right text-gray-300">$${coin.market_cap.toLocaleString()}</td>
            <td class="p-4 text-right"><a href="#" class="px-3 py-1 bg-[#2FE6DE]/10 text-[#2FE6DE] rounded text-sm">Trade</a></td>
          </tr>
        `;
      });

      document.getElementById("showing-start").innerText = start + 1;
      document.getElementById("showing-end").innerText = start + paginated.length;
      document.getElementById("total-count").innerText = coins.length;
    }

    function renderCards() {
      const cards = document.getElementById("crypto-market-cards");
      cards.innerHTML = "";
      const search = document.getElementById("market-search").value.toLowerCase();

      let coins = allCoins.filter(
        c => c.name.toLowerCase().includes(search) || c.symbol.toLowerCase().includes(search)
      ).slice(0, 10);

      coins.forEach(coin => {
        cards.innerHTML += `
          <div class="bg-[#0D091C] rounded-xl p-4 border border-[#2FE6DE]/10">
            <div class="flex justify-between items-center">
              <div class="flex items-center space-x-2">
                <img src="${coin.image}" class="w-8 h-8" />
                <div>
                  <p class="text-white">${coin.name}</p>
                  <p class="text-gray-400 text-sm">${coin.symbol.toUpperCase()}</p>
                </div>
              </div>
              <span class="text-white font-semibold">$${coin.current_price.toLocaleString()}</span>
            </div>
            <p class="${coin.price_change_percentage_24h >= 0 ? "text-green-400" : "text-red-400"} text-sm">
              24h: ${coin.price_change_percentage_24h.toFixed(2)}%
            </p>
          </div>
        `;
      });
    }

    function updateGainersLosers() {
      if (!allCoins.length) return;
      const sorted = [...allCoins].sort((a, b) => b.price_change_percentage_24h - a.price_change_percentage_24h);
      const gainers = sorted.slice(0, 5);
      const losers = sorted.slice(-5).reverse();
      const gainerDiv = document.getElementById("top-gainers");
      const loserDiv = document.getElementById("top-losers");
      gainerDiv.innerHTML = "";
      loserDiv.innerHTML = "";
      gainers.forEach(c => {
        gainerDiv.innerHTML += `
          <div class="flex justify-between text-sm">
            <span class="text-white">${c.name} (${c.symbol.toUpperCase()})</span>
            <span class="text-green-400">${c.price_change_percentage_24h.toFixed(2)}%</span>
          </div>
        `;
      });
      losers.forEach(c => {
        loserDiv.innerHTML += `
          <div class="flex justify-between text-sm">
            <span class="text-white">${c.name} (${c.symbol.toUpperCase()})</span>
            <span class="text-red-400">${c.price_change_percentage_24h.toFixed(2)}%</span>
          </div>
        `;
      });
    }

    function updatePagination() {
      document.getElementById("prev-page").disabled = currentPage === 1;
      document.getElementById("next-page").disabled = (currentPage * perPage) >= allCoins.length;
    }

    document.getElementById("market-search").addEventListener("input", () => { renderTable(); renderCards(); });
    document.getElementById("apply-filter").addEventListener("click", () => { renderTable(); renderCards(); });
    document.getElementById("prev-page").addEventListener("click", () => { currentPage--; renderTable(); updatePagination(); });
    document.getElementById("next-page").addEventListener("click", () => { currentPage++; renderTable(); updatePagination(); });

    setInterval(updateGainersLosers, 3000);

    document.addEventListener("DOMContentLoaded", fetchCryptoData);
  </script>
</body>


    <!-- CTA Section -->
    <div class="py-12 bg-[#0A0714]">
        <div class="container mx-auto px-4">
            <div class="bg-gradient-to-r from-[#0D091C] to-[#1A1428] p-8 md:p-12 rounded-2xl border border-[#2FE6DE]/20 relative overflow-hidden">
                <div class="absolute top-0 right-0 w-64 h-64 bg-[#2FE6DE]/10 rounded-full blur-3xl -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-64 h-64 bg-purple-500/10 rounded-full blur-3xl -ml-32 -mb-32"></div>
                <div class="relative z-10">
                    <div class="text-center max-w-3xl mx-auto">
                        <h2 class="text-3xl md:text-4xl font-bold mb-6">Start Trading Today</h2>
                        <p class="text-xl text-gray-300 mb-8">Create an account in minutes and access all markets with low fees and advanced tools.</p>
                        <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                            <a href="register.php" class="px-8 py-3 bg-[#2FE6DE] text-[#0A0714] rounded-lg hover:bg-[#2FE6DE]/80 transition-colors font-medium text-center">Create Account</a>
                            <a href="#" class="px-8 py-3 border border-[#2FE6DE]/30 text-white rounded-lg hover:bg-[#2FE6DE]/10 transition-colors font-medium text-center">Learn More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

        </main>



<?php require ("footer.php") ?>