Clone de Pinterest

1253 alqsdeus

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

10 August 2025

Structure d'animation de bloc CSS

29 September 2025

Animation de chargement CSS avec image d'arrière-plan

31 October 2023

Jeu de Serpent simple

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>

Recommandé

Structure d'animation de bloc CSS

Animation de chargement CSS avec image d'arrière-plan

Jeu de Serpent simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS