diff options
Diffstat (limited to 'grid.html')
| -rw-r--r-- | grid.html | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/grid.html b/grid.html new file mode 100644 index 0000000..d964a63 --- /dev/null +++ b/grid.html @@ -0,0 +1,202 @@ +<!-- 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> |