Untitled

<head>
  <link href="https://cdn.sell.app/embed/style.css" rel="stylesheet" />
  <style>
    .category {
      margin: 0 auto;
      text-align: center;
      padding: 20px;
    }

    .category h2 {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
      text-transform: uppercase;
      color: rgb(var(--text-color));
    }

    .ipsButton {
      background: linear-gradient(to bottom, #f44336, #ff4081);
      border: none;
      border-radius: 10px;
      color: white;
      cursor: pointer;
      font-family: Arial, sans-serif;
      font-size: 36px;
      padding: 24px 60px;
      text-align: center;
      text-decoration: none;
      text-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
      transition: all 0.2s ease-in-out;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
    }

    .ipsButton:hover {
      background: linear-gradient(to bottom, #ff4081, #f44336);
      box-shadow: 0 7px 28px rgba(0, 0, 0, 0.2), 0 12px 36px rgba(0, 0, 0, 0.15);
      transform: translateY(-2px);
    }

    .eftImg {
      width: 64px;
      height: 64px;
      margin-right: 20px;
      vertical-align: middle;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.15);
    }

    .apexImg {
      width: 64px;
      height: 64px;
      margin-right: 20px;
      vertical-align: middle;
      border-radius: 50%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.15);
      object-fit: contain;
    }
  </style>
</head>

<body>
  <div class="category" style="--text-color: 0, 0, 0;">
    <h2>EFT Impress</h2>
    <button
      class="ipsButton"
      data-sell-store="1645"
      data-sell-product="116668"
      data-sell-theme="#f44336"
      data-sell-darkmode="true"
    >
      <img src="https://gaming-cdn.com/images/products/2360/orig/escape-from-tarkov-pc-game-cover.jpg?v=1674147445" alt="Escape from Tarkov Logo" class="eftImg" />
      Buy Now!
    </button>
  </div>

  <div class="category" style="--text-color: 0, 0, 0;">
    <h2>Apex Impress</h2>
    <button
      class="ipsButton"
      data-sell-store="1645"
      data-sell-product="11750"
      data-sell-theme="#f44336"
      data-sell-darkmode="true"
    >
      <img src="https://cdn.akamai.steamstatic.com/steam/apps/1172470/capsule_616x353.jpg?t=1652292164" alt="Apex Legends Logo" class="apexImg" />
      Buy Now!
    </button>
  </div>
  <script>
    const categories = document.querySelectorAll('.category');

    categories.forEach((category) => {
      const img = category.querySelector('img');
      const colors = getColorsFromImage(img);
      const textColor = getContrastColor(colors);
      category.style.setProperty('--text-color', textColor.join(', '));
    })

    // function to get the predominant colors from an image
    async function getColorsFromImage(img) {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      const width = img.naturalWidth || img.width;
      const height = img.naturalHeight || img.height;
      canvas.width = width;
      canvas.height = height;

      context.drawImage(img, 0, 0, width, height);
      const imageData = context.getImageData(0, 0, width, height);
      const pixels = imageData.data;

      const pixelCount = width * height;
      const colorCounts = {};

      for (let i = 0; i < pixelCount; i++) {
        const offset = i * 4;
        const r = pixels[offset];
        const g = pixels[offset + 1];
        const b = pixels[offset + 2];
        const a = pixels[offset + 3];

        if (a < 128) {
          continue;
        }

        const key = `${r},${g},${b}`;
        if (key in colorCounts) {
          colorCounts[key]++;
        } else {
          colorCounts[key] = 1;
        }
      }

      const sortedColorCounts = Object.entries(colorCounts).sort((a, b) => b[1] - a[1]);

      return sortedColorCounts.slice(0, 3).map((color) => color[0].split(','));
    }

    // function to determine the best contrast color for a given set of colors
    function getContrastColor(colors) {
      const colorValues = colors.map((color) =>
        color.map((c) => parseInt(c))
      );
      const [r, g, b] = colorValues[0];
      const brightness = Math.round(((r * 299) + (g * 587) + (b * 114)) / 1000);

      if (brightness > 125) {
        return [0, 0, 0];
      } else {
        return [255, 255, 255];
      }
    }
  </script>
</body>
Editor is loading...