diff options
Diffstat (limited to 'favs.html')
| -rw-r--r-- | favs.html | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/favs.html b/favs.html new file mode 100644 index 0000000..8adc60a --- /dev/null +++ b/favs.html @@ -0,0 +1,168 @@ +<!-- favs.html --> +<!DOCTYPE html> +<html> + <style> + :root { + --max: 600px; + background: #e9e9e9; + } + .screen { + display: flex; + flex-direction: row; + justify-content: center; + align-items: bottom; + } + .right-side { + display: block; + flex-grow: 1; + } + .controls { + right: 20px; + top: 20px; + position: sticky; + text-align: center; + min-width: 24%; + padding-top: 20px; + } + .galery { + flex-grow: 4; + display: grid; + grid-template-columns: auto auto; + gap: 10px; + padding: 20px; + min-width: 74%; + min-height: none; + } + .img_name { + padding: .2rem; + } + .img_selected { + background: #669934; + color: white; + text-decoration: none; + width: inherit; + display: inline-block; + // padding: 10px; + border-radius: 10px; + } + .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 { + max-width: 100%; + max-height: 35vh; + border-radius: 10px; + } + .img_frame { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding-left: .5rem; + padding-right: .5rem; + } + 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: inline-block; + min-width: none; + margin: 20px 0; + } + input[type="text"] { + padding: 10px 20px; + border-radius: 10px; + border: none; + margin-right: 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; + } + #file-list { + font-family: mono; + } + </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 id="img_{{$index}}" class="img_img" src="{{$element.Filename}}"> + <a class="img_selector img_selected" + href="/removefav?filename={{$element.Filename}}#img_{{minus $index 1}}"> + <div class="img_name"> + {{.Name}} + </div> + </a> + </div> + {{end}} + <br> + </div> + <div class="right-side"> + <div class="controls"> + <h1>Φωτοομάδα preview</h1> + <a href="/">◄ Πίσω</a> + <br><br> + <div>Λίστα αρχείων:</div> + <button id="button1" onclick="copyDivToClipboard()">Copy</button> + <div id="file-list"> + {{range .}} + {{.Name}} + {{end}} + </div> + </div> + </div> + </div> + <script> + function copyDivToClipboard() { + var range = document.createRange(); + range.selectNode(document.getElementById("file-list")); + window.getSelection().removeAllRanges(); // clear current selection + window.getSelection().addRange(range); // to select text + document.execCommand("copy"); + window.getSelection().removeAllRanges();// to deselect + } + const gallery = new Viewer(document.getElementById('my-gallery'), {transition: false}); + </script> + </body> +</html> |