blob: d964a6397d8dadce344dd0e2ffa0433955e1f42b (
plain) (
tree)
|
|
<!-- grid.html -->
<!DOCTYPE html>
<html>
<style>
:root {
background: #e9e9e9;
}
body {
overflow: hidden;
font-family: sans-serif;
}
.logo {
object-fit: cover;
height: 17rem;
}
.screen {
display: flex;
flex-direction: row;
justify-content: center;
align-items: bottom;
height: 100vh;
}
.controls {
flex-grow: 1;
font-size: x-large;
text-align: center;
min-width: 24%;
padding-top: 20px;
padding-right: 10px;
}
.galery {
flex-grow: 4;
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
gap: 10px;
padding: 20px;
min-width: 74%;
}
.img_name {
padding: .2rem;
}
.img_selected {
background: #669934;
color: white;
text-decoration: none;
width: inherit;
display: inline-block;
// padding: 10px;
border-radius: 10px;
}
a.img_selector {
padding: .2rem;
text-decoration: none;
color: white;
text-align: center;
width: 100%;
display: inline-block;
border-radius: 10px;
transition: all .2s ease-in-out;
}
.img_selector:hover {
background: lightgray;
cursor: pointer;
}
.img_img {
cursor: pointer;
max-width: 35vw;
max-height: 37vh;
border-radius: 10px;
margin-top: 10px;
}
.img_frame {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
padding-left: .5rem;
padding-right: .5rem;
object-fit: cover;
min-width: 35vw;
width: 35vw;
min-height: 45vh;
height: 45vh;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
a {
display: block;
margin: 10px 0;
padding: 10px 20px;
background: #333;
color: white;
text-decoration: none;
border-radius: 10px;
transition: all .2s ease-in-out;
}
a:hover {
background: #669934;
cursor: pointer;
}
form {
display: flex;
flex-direction: column;
justify-content: center;
min-width: none;
margin: 10px 0;
overflow: visible;
}
input[type="text"] {
padding: 10px 20px;
border-radius: 10px;
border: none;
margin-bottom: 10px;
}
input[type="submit"] {
padding: 10px 20px;
background: #333;
color: white;
border: none;
border-radius: 10px;
transition: all .2s ease-in-out;
}
input[type="submit"]:hover {
background: #669934;
cursor: pointer;
}
input:placeholder-shown + input[type="submit"] {
background: lightgrey;
pointer-events: none;
}
.smally {
font-size: small;
}
#help {
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
<head>
<link rel="stylesheet" href="static/viewerjs/dist/viewer.css">
<script src="static/viewerjs/dist/viewer.min.js"></script>
<title>Image Grid</title>
</head>
<body>
<div class="screen">
<div id="my-gallery" class="galery">
{{range $index, $element := .}}
<div class="img_frame">
<img class="img_img" src="{{$element.Filename}}">
<a id="img_button_{{$index}}"
class="img_selector {{if $element.Liked}}img_selected{{end}}"
href="{{if $element.Liked}}remove{{else}}select{{end}}?img_index={{$index}}">
<div class="img_name">
{{.Name}}
</div>
</a>
</div>
{{end}}
<br>
</div>
<div class="controls">
<img class="logo" src="/static/logo.jpg">
<a href="/?idx=0">◄◄ Αρχή</a>
<a href="/?idx=100000">Τέλος ►►</a>
<a id="nav-prev" href="/prev">◄ Προηγούμενο</a>
<a id="nav-next" href="/next">Επόμενο ►</a>
<a href="/favs">⭐ Επιλεγμένα</a>
<form action="/" autocomplete="off">
<input type="text" id="name" name="name" placeholder="Όνομα εικόνας">
<input type="submit" value="go!">
</form>
<div class="smally">(κλικ στις εικόνες για ζουμ!)</div>
<a id="help" href="/static/help.html">🛈 Βοήθεια</a>
</div>
</div>
<script>
const gallery = new Viewer(document.getElementById('my-gallery'), {transition: false});
document.onkeyup = function(e) {
if (!gallery.fulled) {
if (e.key == 'ArrowRight') {
document.getElementById('nav-next').click();
} else if (e.key == 'ArrowLeft') {
document.getElementById('nav-prev').click();
} else if (e.key == 'z') {
document.getElementById('img_button_0').click();
} else if (e.key == 'x') {
document.getElementById('img_button_1').click();
} else if (e.key == 'c') {
document.getElementById('img_button_2').click();
} else if (e.key == 'v') {
document.getElementById('img_button_3').click();
}
}
};
</script>
</body>
</html>
|
