blob: 8adc60a9d9303eab5c3d26171d356475fe85b1b8 (
plain) (
tree)
|
|
<!-- 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>
|
