-
Notifications
You must be signed in to change notification settings - Fork 0
/
template.html
137 lines (137 loc) · 5.7 KB
/
template.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
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .Title }}</title>
<script>
function open_overlay(content) {
var file_name = content.alt
var element_type = ""
file_name_contents = file_name.split(".")
var ext = file_name_contents[file_name_contents.length - 1]
const overlay = document.getElementById("overlay")
const overlay_image = document.getElementById("overlay_image")
const overlay_video = document.getElementById("overlay_video")
const overlay_button = document.getElementById("overlay_button")
if (["jpg", "png", "gif", "jpeg"].includes(ext)) {
overlay_image.src = "./media/" + file_name
overlay_image.style.display = "block"
overlay_button.href = "./media/" + file_name
} else {
overlay_video.src = "./media/" + file_name
overlay_video.style.display = "block"
overlay_button.href = "./media/" + file_name
}
overlay.style.display = "flex"
setTimeout(() => {
overlay.style.opacity = 1
}, 10)
}
function close_overlay() {
const overlay = document.getElementById("overlay")
const overlay_image = document.getElementById("overlay_image")
const overlay_video = document.getElementById("overlay_video")
overlay.style.opacity = 0
overlay_video.pause()
setTimeout(() => {
overlay.style.display = "none"
overlay_image.style.display = "none"
overlay_video.style.display = "none"
overlay_image.src = ""
overlay_video.src = ""
}, 250)
}
</script>
<style>
body {
background-color: #000000;
overflow-x: hidden; /* Disable horizontal scroll */
}
a {
color: #324A5F
}
subject {
font-size: 16px;
}
#preview {
border-radius: 0.5em;
cursor: pointer;
}
div.postContainer {
max-width: 1000px;
background-color: #0C1821;
border: 2px solid #1B2A41!important;
padding: 1em;
margin: 5px auto 5px auto;
color: #D6DAF0;
border-radius: 10px;
display: block;
font-size: 15px;
overflow-x: hidden; /* Disable horizontal scroll */
}
div.overlay {
/* Height & width depends on how you want to reveal the overlay (see JS below) */
height: 100vh;
width: 100vw;
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
background-color: rgb(0,0,0); /* Black fallback color */
background-color: rgba(0,0,0, 0.8); /* Black w/opacity */
display: none;
overflow-x: hidden; /* Disable horizontal scroll */
justify-content: center;
align-items: center;
transition: opacity 0.25s;
opacity: 0;
font-size: 10px;
}
</style>
</head>
<body>
<div class="postContents">
{{range .Posts}}
<div id="p{{ .No }}" class="postContainer">
<div class="postDetails">
<span class="nameBlock">
<span class="name">{{ .Name }}</span>
<br>
<span class="subject">{{ .Sub }}</span>
</span>
<br>
<span>
{{ .Now }}
<a href="#p{{ .No }}" title="Link to this post">
No. {{ .No }}
</a>
</span>
</div>
{{ if .IsMediaPresent }}
<div class="file">
<div class="fileText">
File:
<a title="{{ .Filename }}{{ .Ext }}" href="./media/{{ .File_ID }}{{ .Ext }}" target="_blank">
{{ .File_ID }}{{ .Ext }}
</a>
({{ .Size }}, {{ .W }}x{{ .H }})
</div>
<img id="preview" src="./thumbnails/{{ .File_ID }}s.jpg" alt="{{ .File_ID }}{{ .Ext }}" data-md5="{{ .Md5 }}" loading="lazy" onclick="open_overlay(this)">
</div>
{{ end }}
<blockquote>{{ .Com_html }}</blockquote>
</div>
{{end}}
</div>
<div class="overlay" id="overlay" onclick="close_overlay()">
<div class="overlayContent">
<img id="overlay_image" src="" alt="" style="display: none; max-width: 90vw; max-height: 90vh">
<video id="overlay_video" controls="" loop="" autoplay="" style="display: none; max-width: 90vw; max-height: 90vh" src=""></video>
<a id="overlay_button" href="" rel="noreferrer noopener" target="_blank" role="button" tabindex="0">
Open original
</a>
</div>
</div>
</body>
</html>