<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Archive</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
color: white;
font-family: sans-serif;
padding: 2rem;
}
h1 {
text-align: center;
margin-bottom: 2rem;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 20px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 10px;
cursor: pointer;
transition: transform 0.2s ease;
}
.gallery img:hover {
transform: scale(1.02);
}
/* Lightbox styles */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 999;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
border-radius: 10px;
}
.lightbox .close {
position: absolute;
top: 20px;
right: 30px;
font-size: 30px;
color: white;
cursor: pointer;
}
.arrow {
position: absolute;
top: 50%;
font-size: 40px;
color: white;
cursor: pointer;
user-select: none;
transform: translateY(-50%);
}
.arrow.left {
left: 20px;
}
.arrow.right {
right: 20px;
}
#lightbox-prompt {
color: #ccc;
font-family: monospace;
white-space: pre-wrap;
background: rgba(0, 0, 0, 0.6);
padding: 10px 20px;
border-radius: 10px;
max-width: 80%;
text-align: left;
margin-top: 20px;
}
.button-group {
display: flex;
justify-content: center;
margin-top: 2rem;
}
.button-link {
background: #333;
color: white;
text-decoration: none;
padding: 10px 20px;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
display: inline-block;
text-align: center;
}
.button-link:hover {
background: #555;
}
</style>
</head>
<body>
<h1>Image Archive</h1>
<div class="gallery">
{% for image in images %}
<!-- <img src="{{ url_for('images', filename=image.thumbnail_filename) }}" alt="Image" loading="lazy" onclick="openLightbox({{ loop.index0 }})"> -->
<img src="{{ url_for('images', filename='thumbnails/' + image.filename) }}"
data-fullsrc="{{ url_for('images', filename=image.filename) }}" onclick="openLightbox({{ loop.index0 }})">
{% endfor %}
</div>
<div class="button-group">
<a href="/" class="button-link">Back</a>
</div>
<!-- Lightbox -->
<div class="lightbox" id="lightbox">
<span class="close" onclick="closeLightbox()">×</span>
<span class="arrow left" onclick="prevImage()">❮</span>
<img id="lightbox-img" src="">
<p id="lightbox-prompt"></p>
<span class="arrow right" onclick="nextImage()">❯</span>
</div>
<script>
let images = [
{% for image in images %}
{
src: "{{ url_for('images', filename=image.filename) }}",
prompt: `{{ image.prompt | escape }}`
},
{% endfor %}
];
let currentIndex = 0;
function openLightbox(index) {
currentIndex = index;
<!-- document.getElementById("lightbox-img").src = images[currentIndex].src; -->
document.getElementById("lightbox-img").src = document.querySelectorAll('.gallery img')[currentIndex].dataset.fullsrc;
document.getElementById("lightbox-prompt").textContent = images[currentIndex].prompt;
document.getElementById("lightbox").style.display = "flex";
}
function closeLightbox() {
document.getElementById("lightbox").style.display = "none";
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
openLightbox(currentIndex);
}
function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
openLightbox(currentIndex);
}
</script>
</body>
</html>