<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Галерея</title>
<link rel="stylesheet" href="css/style.css">
<style>
.gallery { display: flex; flex-wrap: wrap; }
.gallery img {
  width: 200px;
  margin: 5px;
  border: 2px solid #0F0;
  transition: 0.3s;
}
.gallery img:hover {
  transform: scale(1.1);
}
</style>
</head>
<body>
<h1> Галерея</h1>
<div class="gallery" id="gallery"></div>
<script>
fetch('/photos/')
  .then(res => res.text())
  .then(html => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const links = [...doc.querySelectorAll('a')]
      .map(a => a.href)
      .filter(href => /\.(jpg|jpeg|png|gif)$/i.test(href));
    const gallery = document.getElementById('gallery');
    links.forEach(link => {
      const img = document.createElement('img');
      img.src = link;
      gallery.appendChild(img);
    });
  });
</script>
</body>
</html>
