Karl/ai-frame-image-server
1
0
Fork 0
mirror of https://github.com/karl0ss/ai_image_frame_server.git synced 2025-05-19 12:16:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

add back button to the bottom of the gallery

Browse Source
This commit is contained in:
Karl 2025-05-15 09:26:10 +01:00
parent da37913d84
commit 0ccebcf037
1 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
templates/gallery.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,21 +11,25 @@
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
background-color: black; background-color: black;
color: white; color: white;
font-family: sans-serif; font-family: sans-serif;
padding: 2rem; padding: 2rem;
} }
h1 { h1 {
text-align: center; text-align: center;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.gallery { .gallery {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
gap: 20px; gap: 20px;
} }
.gallery img { .gallery img {
width: 100%; width: 100%;
height: auto; height: auto;
@ -32,6 +37,7 @@
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
.gallery img:hover { .gallery img:hover {
transform: scale(1.02); transform: scale(1.02);
} }
@ -50,11 +56,13 @@
flex-direction: column; flex-direction: column;
z-index: 999; z-index: 999;
} }
.lightbox img { .lightbox img {
max-width: 90%; max-width: 90%;
max-height: 80%; max-height: 80%;
border-radius: 10px; border-radius: 10px;
} }
.lightbox .close { .lightbox .close {
position: absolute; position: absolute;
top: 20px; top: 20px;
@ -63,6 +71,7 @@
color: white; color: white;
cursor: pointer; cursor: pointer;
} }
.arrow { .arrow {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -72,9 +81,11 @@
user-select: none; user-select: none;
transform: translateY(-50%); transform: translateY(-50%);
} }
.arrow.left { .arrow.left {
left: 20px; left: 20px;
} }
.arrow.right { .arrow.right {
right: 20px; right: 20px;
} }
@ -90,17 +101,46 @@
text-align: left; text-align: left;
margin-top: 20px; 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> </style>
</head> </head>
<body> <body>
<h1>Image Archive</h1> <h1>Image Archive</h1>
<div class="gallery"> <div class="gallery">
{% for image in images %} {% 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=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 }})"> <img src="{{ url_for('images', filename='thumbnails/' + image.filename) }}"
data-fullsrc="{{ url_for('images', filename=image.filename) }}" onclick="openLightbox({{ loop.index0 }})">
{% endfor %} {% endfor %}
</div> </div>
<div class="button-group">
<a href="/" class="button-link">Back</a>
</div>
<!-- Lightbox --> <!-- Lightbox -->
<div class="lightbox" id="lightbox"> <div class="lightbox" id="lightbox">
@ -114,11 +154,11 @@
<script> <script>
let images = [ let images = [
{% for image in images %} {% for image in images %}
{ {
src: "{{ url_for('images', filename=image.filename) }}", src: "{{ url_for('images', filename=image.filename) }}",
prompt: `{{ image.prompt | escape }}` prompt: `{{ image.prompt | escape }}`
}, },
{% endfor %} {% endfor %}
]; ];
let currentIndex = 0; let currentIndex = 0;
@ -145,4 +185,5 @@
} }
</script> </script>
</body> </body>
</html>
</html>