75 lines
3.2 KiB
Cheetah
75 lines
3.2 KiB
Cheetah
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>trpic</title>
|
|
{{ .Style }}
|
|
{{ if ne .URI "/noscript" }}
|
|
{{ .Script }}
|
|
{{ end }}
|
|
</head>
|
|
<body>
|
|
<div id="gallery">
|
|
<div id="info-box">
|
|
<p style="font-size: 1.2em; font-weight: bold;">trpic</p>
|
|
<p>共 <b>{{ len .RawImages }}</b> 张图片</p>
|
|
<p>以 <b id="sort-info">name</b> 排序</p>
|
|
{{ if eq .URI "/noscript" }}
|
|
<p>无 JavaScript 模式</p>
|
|
{{ else }}
|
|
<noscript>
|
|
<p>当前未启用 JavaScript</p>
|
|
<p>您可以前往 <a href="/noscript">noscript</a> 页面</p>
|
|
</noscript>
|
|
{{ end }}
|
|
</div>
|
|
{{ if eq .URI "/noscript" }}
|
|
{{range $index, $img := .RawImages}}
|
|
{{ $src := $img.URL }}
|
|
{{ if $img.PreviewURL }}{{ $src = $img.PreviewURL }}{{ end }}
|
|
<div style="width:{{$img.JWidth}}px; flex-grow:{{$img.JWidth}}">
|
|
<a href="{{$img.URL}}">
|
|
<i style="padding-bottom:{{$img.JPadding}}%">
|
|
<span><p>{{$img.Long}}px | {{$img.Size}}</p></span>
|
|
</i>
|
|
<img src="{{$src}}" alt="{{$img.Width}}*{{$img.Height}} | {{$img.Size}} | {{$img.FileName}}" loading="lazy" decoding="async" />
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
{{ end }}
|
|
|
|
</div>
|
|
<div id="sentinel"></div>
|
|
<div id="preview">
|
|
<div id="preview-view">
|
|
<div id="preview-header">
|
|
<div id="image-info">
|
|
<span id="image-index"></span>
|
|
<span id="image-caption"></span>
|
|
</div>
|
|
<div id="controls">
|
|
<span id="download-btn"><svg viewBox="0 -960 960 960"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg></span>
|
|
<span id="toggle-sidebar-btn"><svg viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg></span>
|
|
</div>
|
|
</div>
|
|
<div id="nav-controls">
|
|
<span id="prev-btn"><</span>
|
|
<span id="next-btn">></span>
|
|
</div>
|
|
<div id="image-wrapper">
|
|
<img id="preview-img" alt="Image Preview">
|
|
</div>
|
|
</div>
|
|
<div id="sidebar">
|
|
<div id="sidebar-content">
|
|
<span>文件名</span>
|
|
<p id="img-name"></p>
|
|
<span>图片描述</span>
|
|
<p id="img-alt"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|