Clone de Pinterest

1,803 alqsdeus

Ouvrir dans l'éditeur Publiez votre code

Recommandé

18 December 2025

Configuration du chargeur HTML5 et de Firebase pour le jeu Escape Road

16 January 2026

Jeu Zombie City Defender HTML Canvas

15 January 2025

Ascension de la tour circulaire

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="twitter:card" content="summary_large_image" />
  <title>apis</title>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" />
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Fredoka One', sans-serif;
    }
    body {
      background: #0d0d0d;
      color: white;
      padding: 40px 20px;
      min-height: 100vh;
    }
    .header {
      font-size: 28px;
      color: #00ff80;
      margin-bottom: 30px;
      text-align: center;
    }
    .gallery {
      display: flex;
      flex-wrap: wrap;
      gap: 0;
      justify-content: center;
    }
    .gallery-item {
      flex: 1 1 200px;
      max-width: 200px;
      margin: 4px;
      background-color: rgba(0, 0, 0, 0.65);
      border-radius: 16px;
      border: 1px solid rgba(0, 255, 128, 0.2);
      box-shadow: 0 0 12px rgba(0, 255, 128, 0.1);
      backdrop-filter: blur(12px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .gallery-item img {
      width: 100%;
      display: block;
      border-bottom: 1px solid rgba(0, 255, 128, 0.2);
      user-select: none;
      -webkit-user-drag: none;
    }
    .download-button {
      background-color: rgba(0, 255, 128, 0.25);
      border: 1px solid rgba(0, 255, 128, 0.4);
      color: white;
      font-size: 14px;
      padding: 8px;
      border-radius: 12px;
      cursor: pointer;
      width: 90%;
      margin: 10px 0;
      transition: background-color 0.3s;
      text-decoration: none;
      display: inline-block;
    }
    .download-button:hover {
      background-color: rgba(0, 255, 128, 0.5);
    }
    @media (max-width: 768px) {
      .gallery-item {
        flex: 1 1 45%;
        max-width: 45%;
      }
    }
    @media (max-width: 480px) {
      .gallery-item {
        flex: 1 1 90%;
        max-width: 90%;
      }
    }
  </style>
</head>
<body>
  <h1 class="header">luyte.rocks avatar gallery</h1>
  <div class="gallery" id="gallery"></div>

function shuffleArray(arr) {
      for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
      }
      return arr;
    }

async function fetchPicsum(count = 7) {
      const randomPage = Math.floor(Math.random() * maxPage) + 1;
      const res = await fetch(`https://picsum.photos/v2/list?page=${randomPage}&limit=100`);
      if (!res.ok) return [];
      let images = await res.json();
      images = images.filter(img => !displayedUrls.has(img.download_url));
      images = shuffleArray(images);
      return images.slice(0, count).map(img => ({
        url: randomEffectUrl(img.download_url, img.id),
        alt: `Photo by ${img.author}`,
        download: img.download_url
      }));
    }

async function fetchDog(count = 3) {
      const promises = [];
      for(let i=0; i<count; i++) {
        promises.push(fetch('https://dog.ceo/api/breeds/image/random').then(res => {
          if(!res.ok) return null;
          return res.json();
        }).then(data => {
          if(data && data.status === 'success' && !displayedUrls.has(data.message)) {
            return { url: data.message, alt: 'Random dog', download: data.message };
          }
          return null;
        }).catch(() => null));
      }
      const results = await Promise.all(promises);
      return results.filter(Boolean);
    }

async function fetchCat(count = 3) {
      const promises = [];
      for(let i=0; i<count; i++) {
        promises.push(fetch('https://api.thecatapi.com/v1/images/search?limit=1').then(res => {
          if(!res.ok) return null;
          return res.json();
        }).then(data => {
          if(data && data.length && !displayedUrls.has(data[0].url)) {
            return { url: data[0].url, alt: 'Random cat', download: data[0].url };
          }
          return null;
        }).catch(() => null));
      }
      const results = await Promise.all(promises);
      return results.filter(Boolean);
    }

async function fetchNekos(category = 'neko', count = 5) {
      const res = await fetch(`https://nekos.best/api/v2/${category}`);
      if(!res.ok) return [];
      const data = await res.json();
      if(!data.results || !data.results.length) return [];
      const filtered = data.results.filter(img => !displayedUrls.has(img.url));
      return filtered.slice(0, count).map(img => ({
        url: img.url,
        alt: `${category} image`,
        download: img.url
      }));
    }

async function loadImages() {
      if (loading) return;
      loading = true;

const picsumPromise = fetchPicsum();
      const dogPromise = fetchDog();
      const catPromise = fetchCat();
      const nekoPromise = fetchNekos();

const [picsumImages, dogImages, catImages, nekoImages] = await Promise.all([
        picsumPromise,
        dogPromise,
        catPromise,
        nekoPromise
      ]);

let allImages = [...picsumImages, ...dogImages, ...catImages, ...nekoImages];
      allImages = shuffleArray(allImages);
      allImages = allImages.filter(img => !displayedUrls.has(img.url));

allImages.forEach(img => {
        displayedUrls.add(img.url);
        const item = document.createElement('div');
        item.className = 'gallery-item';

const image = document.createElement('img');
        image.src = img.url;
        image.alt = img.alt;
        image.loading = 'lazy';

const a = document.createElement('a');
        a.href = img.download;
        a.target = '_blank';
        a.download = '';
        a.className = 'download-button';
        a.textContent = 'download';

item.appendChild(image);
        item.appendChild(a);
        gallery.appendChild(item);
      });

loading = false;
    }

window.addEventListener('scroll', () => {
      if(window.innerHeight + window.scrollY >= document.body.offsetHeight - 800) {
        loadImages();
      }
    });

loadImages();
  </script>
</body>
</html>

CSS