41 lines
1.4 KiB
HTML
41 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PictShare Gallery</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; text-align: center; }
|
|
#gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
|
|
.image-container { width: 150px; cursor: pointer; }
|
|
.image-container img { width: 100%; border-radius: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>PictShare Gallery</h1>
|
|
<div id="gallery"></div>
|
|
|
|
<script>
|
|
fetch("/images")
|
|
.then(response => {
|
|
if (!response.ok) throw new Error("Failed to fetch images.");
|
|
return response.json();
|
|
})
|
|
.then(images => {
|
|
const gallery = document.getElementById("gallery");
|
|
images.forEach(img => {
|
|
const imgContainer = document.createElement("div");
|
|
imgContainer.className = "image-container";
|
|
imgContainer.innerHTML = `<a href="${img.url}" target="_blank">
|
|
<img src="${img.url}" alt="${img.name}">
|
|
</a>`;
|
|
gallery.appendChild(imgContainer);
|
|
});
|
|
})
|
|
.catch(error => console.error("Error loading images:", error));
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|