Spaces:
Running
Running
| <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> | |