cbz_viewer.html (1805B)
1 {{template "_header" .}} 2 <h2>CBZ: {{.Data.File.Filename}}</h2> 3 4 <div class="cbz-viewer" 5 data-file-id="{{.Data.File.ID}}" 6 data-current-index="{{.Data.CurrentIndex}}" 7 data-total-images="{{.Data.TotalImages}}"> 8 <div class="cbz-navigation"> 9 <div class="nav-buttons"> 10 {{if .Data.HasPrev}} 11 <a href="/cbz/{{.Data.File.ID}}/0" class="nav-btn">⏮ First</a> 12 <a href="/cbz/{{.Data.File.ID}}/{{sub .Data.CurrentIndex 1}}" class="nav-btn">◀ Previous</a> 13 {{else}} 14 <span class="nav-btn disabled">⏮ First</span> 15 <span class="nav-btn disabled">◀ Previous</span> 16 {{end}} 17 18 <span class="page-counter">Page {{add .Data.CurrentIndex 1}} / {{.Data.TotalImages}}</span> 19 20 {{if .Data.HasNext}} 21 <a href="/cbz/{{.Data.File.ID}}/{{add .Data.CurrentIndex 1}}" class="nav-btn">Next ▶</a> 22 <a href="/cbz/{{.Data.File.ID}}/{{sub .Data.TotalImages 1}}" class="nav-btn">Last ⏭</a> 23 {{else}} 24 <span class="nav-btn disabled">Next ▶</span> 25 <span class="nav-btn disabled">Last ⏭</span> 26 {{end}} 27 </div> 28 29 <a href="/file/{{.Data.File.ID}}" class="nav-btn back-btn">← Back to File Info</a> 30 </div> 31 32 <div class="cbz-image-container"> 33 <img src="/cbz/{{.Data.File.ID}}/image/{{.Data.CurrentIndex}}" alt="Page {{add .Data.CurrentIndex 1}}" class="cbz-image"> 34 </div> 35 36 <div class="cbz-gallery"> 37 <h3>All Pages</h3> 38 <div class="gallery-grid"> 39 {{range $i, $img := .Data.Images}} 40 <a href="/cbz/{{$.Data.File.ID}}/{{$i}}" class="gallery-thumb {{if eq $i $.Data.CurrentIndex}}active{{end}}"> 41 <img src="/cbz/{{$.Data.File.ID}}/image/{{$i}}" alt="Page {{add $i 1}}" loading="lazy"> 42 <span class="thumb-label">{{add $i 1}}</span> 43 </a> 44 {{end}} 45 </div> 46 </div> 47 </div> 48 49 <script src="/static/cbz-viewer.js" defer></script> 50 51 {{template "_footer"}}