Clon de Pinterest

1081 alqsdeus

Abrir en el editor Publica tu código

Recomendado

11 May 2025

Feliz día de la madre

26 December 2024

Matrix es un directorio de páginas de inicio

21 June 2024

Interruptor de palanca de neón

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>

Clon de Pinterest

Recomendado

Feliz día de la madre

Matrix es un directorio de páginas de inicio

Interruptor de palanca de neón

HTML

CSS

JS

Recomendado

Feliz día de la madre

Matrix es un directorio de páginas de inicio

Interruptor de palanca de neón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS