-
Notifications
You must be signed in to change notification settings - Fork 0
/
template-gallery.htm
134 lines (128 loc) · 3.31 KB
/
template-gallery.htm
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
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="{{language}}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Films</title>
<link rel="icon" href="{{icon}}" >
<style>
body {
font: normal 14px Verdana, Arial, sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: blue;
}
p {
margin-top:0px;
margin-bottom:10px;
}
div.image {
display:inline-table; /* or inline-grid */
margin-bottom:5px;
width:160px;
align-items: center;
}
h2 {
line-height: 18px;
border-top: 2px solid lightgrey;
border-bottom: 2px solid lightgrey;
padding-top:5px;
padding-bottom:5px;
}
img.cover {
max-width: 160px;
max-height: 240px;
width: auto;
height: auto;
}
div.anchor {
visibility: hidden;
padding-top: 45px;
margin-top: -45px;
}
#searchInput {
background-image: url('searchicon2.png'); /* Add a search icon to input */
background-position: 10px -1px; /* Position the search icon */
background-repeat: no-repeat; /* Do not repeat the icon image */
width: 30%;
height: 0px;
font-size: 16px; /* Increase font-size */
padding: 12px 20px 12px 40px; /* Add some padding */
//border: 1px solid #ddd; /* Add a grey border */
border: none; /* Add a grey border */
}
input:focus{
outline: none;
}
</style>
{% include 'menu.css' %}
{% if search %}
<script>
function searchFunction() {
const input = document.getElementById('searchInput');
const filter = input.value.toUpperCase();
const alldiv = document.getElementsByTagName("div");
for (let i = 0; i < alldiv.length; i++) {
let txtValue = alldiv[i].getAttribute("name");
if (txtValue) {
if (txtValue.toUpperCase().indexOf("@@@") == 0 && txtValue.toUpperCase().indexOf(filter) > -1) {
alldiv[i].style.display = "";
} else {
alldiv[i].style.display = "none";
}
}
}
}
</script>
{% endif %}
</head>
<body>
<div style="width: 95%; margin-left: auto; margin-right: auto">
{% if index %}
<div style="width: 94%; height:60px; top: 0; background-color: white; position: fixed; ">
{% include 'menu.htm' %}
<h2>
{% for x in index %}
<a style="display:inline-table;" href="#{{x}}">{{x}}</a>
{% endfor %}
{% if search %}
<input type="text" id="searchInput" onkeyup="searchFunction()" placeholder="Search for names..">
{% endif %}
</h2>
</div>
<br>
<br>
{% else %}
<div style="width: 94%; height:0px; top: 0; position: fixed; ">
{% include 'menu.htm' %}
</div>
{% endif %}
{% for key, records in sorted_records.items()|sort(attribute='0') %}
{% if tags[key] %}
<div id="{{tags[key]}}" class="anchor"></div>
{% endif %}
{% if key %}
<div name="@@@{{key}}">
<h2>{{key}} <img src="top-icon.png" style="float: right;" alt="Top" onclick="window.location.href='#top'" ></h2>
{% endif %}
{% for record in records %}
<div class="image">
<img
class="cover"
src="{{record.thumb_path|urlencode}}"
alt="{{record.title}} cover"
title="{{record.hover_text}}"
onclick="window.open('{{record.movie_page}}', '_self')" >
<p>{{record.year_title if caption else record.title}}</p>
</div>
{% endfor %}
{% if key %}
</div>
{% endif %}
{% endfor %}
</div>
</body>
</html>