Spaces:
Running
Running
File size: 2,075 Bytes
a1f924b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html>
<html>
<head>
<title>{{ designer }} - {{ show }}</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<style>
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grid img { width: 100%; cursor: pointer; }
.modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); }
.modal img { margin: auto; display: block; max-width: 90%; max-height: 90%; margin-top: 5vh; }
</style>
</head>
<body>
<a href="/" style="position: fixed; top: 20px; left: 20px; background: black; color: white; padding: 8px 14px; border-radius: 6px; text-decoration: none; font-weight: bold; z-index: 1000;">Home</a>
<h1>{{ designer }} - {{ show }}</h1>
<div class="grid">
{% for img in images %}
<img src="{{ img }}" onclick="openModal({{ loop.index0 }})">
{% endfor %}
</div>
<div id="modal" class="modal" onclick="closeModal()">
<img id="modalImage">
</div>
<script>
const images = {{ images | tojson }};
let modal = document.getElementById("modal");
let modalImg = document.getElementById("modalImage");
function openModal(index) {
modal.style.display = "block";
modalImg.src = images[index];
}
function closeModal() {
modal.style.display = "none";
}
document.addEventListener("keydown", function(e) {
if (modal.style.display === "block") {
let currentIndex = images.indexOf(modalImg.src);
if (e.key === "ArrowRight") {
modalImg.src = images[(currentIndex + 1) % images.length];
} else if (e.key === "ArrowLeft") {
modalImg.src = images[(currentIndex - 1 + images.length) % images.length];
} else if (e.key === "Escape") {
closeModal();
}
}
});
</script>
</body>
</html>
|