/
index.html
executable file
·125 lines (109 loc) · 4.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<title>Images</title>
</head>
<body id="bk">
<h1>Wellcome to my image resource page</h1>
<p>All these images on this page are <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>. So all you have to do is give a link to either my <a href="https://www.instagram.com/haz0.2/">Instagram</a> or this <a href="https://hazonline.co.uk/images/">page</a>.</p>
<h3>You are free to:</h3>
<ul>
<li>
Share — copy and redistribute the material in any medium or format
</li>
<li>
Adapt — remix, transform, and build upon the material
for any purpose, even commercially.
</li>
</ul>
<h3>Under the following terms:</h3>
<ul><li>
Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
</li>
</ul>
<div id="inst" onclick="window.location = 'https://www.instagram.com/haz0.2/'" class="rightlink">
<a>Instagram!</a>
</div>
<div id="flic" onclick="window.location = 'https://www.flickr.com/photos/186500595@N02/'" class="rightlink flic">
<a>Flickr!</a>
</div>
<div class="side">
<ul id="lst">
</ul>
<button onclick="download()" class="download">Download<img src="download.svg"/></button>
</div></div>
<script src="db.js"></script>
<script>
var ilst = new Array();
function arrayToHTML(array){
var result = "";
for (var i = 0; i < array.length;i++){
result+="<li>"+imglst[array[i]].name+"</li>\n";
}
return result;
}
function addnum(num){
var name = num;
if(ilst.includes(name)){
remove(ilst,name);
document.getElementById(num).children[2].children[2].innerHTML = "Add";
document.getElementById(num).children[0].classList.remove("select");
}else{
ilst.push(name);
document.getElementById(num).children[0].classList.add("select");
document.getElementById(num).children[2].children[2].innerHTML = "Remove";
}
document.getElementById("lst").innerHTML = arrayToHTML(ilst);
}
function remove(list,element){
var index = list.indexOf(element);
if (index > -1) {
list.splice(index, 1);
}
}
</script>
<div class="container">
<div id="grid" class="grid">
</div>
</div>
<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons Licence" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/80x15.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
</body>
<script>
for (var j = 0;j < imglst.length;j++){
var i = imglst.length - (j+1);
document.getElementById("grid").innerHTML += "<div id="+imglst[i].num+" class=\"img\"><img class=\"indicator\" src=\"selected.svg\"/><img src="+imglst[i].webpath+" alt="+imglst[i].num+"><div class=\"opt\"><a>"+imglst[i].name+"</a><br/><a class=\"add\" onclick=\"addnum("+imglst[i].num+")\">Add</a></div></div>";
console.log(imglst[i].num);
}
</script>
<div id="overlay" class="behind notUp">
<div class="top">
<h1>Download:</h1>
<ul class="dlist" id="dlist">
</ul>
</div>
</div>
<script>
var notUp = true;
function download(){
if(notUp){
document.getElementById("overlay").classList.remove("notUp");
notUp = false;
}
var result = "";
for (var i = 0; i < ilst.length;i++){
result+="<li><a class=\"down\" href=\""+imglst[ilst[i]].original.replace(" ","%20").replace("-","%2d")+"\" download>"+imglst[ilst[i]].name+"</a></li>\n";
}
result += "<br/><a class=\"down\" href=\"https://creativecommons.org/licenses/by/4.0/legalcode.txt\" download >licence.txt</a>"
result += "<br/><a class=\"down clo\" onclick=\"undown()\">Close</a>"
document.getElementById("dlist").innerHTML = result;
}
function undown(){
if(!notUp){
document.getElementById("overlay").classList.add("notUp");
notUp = true;
}
}
</script>
</html>