first commit

2026-02-21 09:20:13 +01:00 · 2026-02-21 09:20:13 +01:00 · 93d56a4725
commit 93d56a4725
2 changed files with 138 additions and 0 deletions
--- a/app.js
+++ b/app.js
@ -0,0 +1,58 @@
+const API_URL = 'https://prova.patachina.it/photos';
+
+async function loadPhotos() {
+  const res = await fetch(API_URL);
+  if (!res.ok) {
+    console.error('Errore nel fetch', res.status);
+    return;
+  }
+  const data = await res.json();
+  renderGallery(data);
+}
+
+function renderGallery(photos) {
+  const gallery = document.getElementById('gallery');
+  gallery.innerHTML = '';
+
+  photos.forEach(photo => {
+    const thumbDiv = document.createElement('div');
+    thumbDiv.className = 'thumb';
+
+    const img = document.createElement('img');
+    // anteprima
+    img.src = `https://prova.patachina.it/${photo.thub1}`;
+    img.alt = photo.name || '';
+
+    thumbDiv.appendChild(img);
+
+    // click: apri immagine grande
+    thumbDiv.addEventListener('click', () => {
+      openModal(`https://prova.patachina.it/${photo.path}`);
+    });
+
+    gallery.appendChild(thumbDiv);
+  });
+}
+
+// Modal
+const modal = document.getElementById('modal');
+const modalImg = document.getElementById('modalImage');
+const modalClose = document.getElementById('modalClose');
+
+function openModal(src) {
+  modalImg.src = src;
+  modal.classList.add('open');
+}
+
+function closeModal() {
+  modal.classList.remove('open');
+  modalImg.src = '';
+}
+
+modalClose.addEventListener('click', closeModal);
+modal.addEventListener('click', (e) => {
+  if (e.target === modal) closeModal();
+});
+
+// avvio
+loadPhotos();
--- a/index.html
+++ b/index.html
@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+  <meta charset="UTF-8" />
+  <title>Galleria foto</title>
+  <style>
+    body { font-family: sans-serif; margin: 0; padding: 0; }
+    .gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+      gap: 8px;
+      padding: 8px;
+    }
+    .thumb {
+      cursor: pointer;
+      overflow: hidden;
+      border-radius: 4px;
+      border: 1px solid #ddd;
+    }
+    .thumb img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+    /* Modal */
+    .modal {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.8);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+    }
+    .modal.open {
+      display: flex;
+    }
+    .modal-content {
+      max-width: 90vw;
+      max-height: 90vh;
+      position: relative;
+    }
+    .modal-content img {
+      max-width: 100%;
+      max-height: 100%;
+      display: block;
+    }
+    .modal-close {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      background: #fff;
+      border-radius: 50%;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      font-weight: bold;
+      border: 1px solid #ccc;
+    }
+  </style>
+</head>
+<body>
+  <h1 style="margin: 8px;">Galleria foto</h1>
+  <div id="gallery" class="gallery"></div>
+
+  <!-- Modal -->
+  <div id="modal" class="modal">
+    <div class="modal-content">
+      <div class="modal-close" id="modalClose">×</div>
+      <img id="modalImage" src="" alt="">
+    </div>
+  </div>
+
+  <script src="app.js"></script>
+</body>
+</html>