me/henna
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

.

Browse source
This commit is contained in:
icefox 2026-01-11 19:55:28 -03:00
parent 89a99c0aa7
commit cbaa466191
No known key found for this signature in database
3 changed files with 48 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

5
templates/covers.html Normal file
View file

@ -0,0 +1,5 @@
{{range $i, $c := .Covers}}
<div class="cover" :class="{'active': active === total - {{len $.Covers}} + {{$i}}}"{{if and (eq $i 11) $.HasMore}} hx-get="{{$.Prefix}}/load/{{$.NextPage}}" hx-trigger="revealed once" hx-swap="beforeend" hx-target="#covers-container"{{end}}>
<img src="{{$c.Url}}" width="300" height="370" data-comic="{{$c.Comic}}">
</div>
{{end}}

4
templates/index.html
View file

@ -12,8 +12,8 @@
x-data="{active: 0, total: {{len .Covers}}, row: 6, chapter: {{.Chapter}}, prefix: '{{.Prefix}}', comics: [{{range $i, $c := .Covers}}{{if $i}},{{end}}{{$c.Comic}}{{end}}]}"
@keydown.window.left.prevent="active = Math.max(0, active - 1)"
@keydown.window.right.prevent="active = Math.min(total - 1, active + 1)"
@keydown.window.up.prevent="active = Math.max(0, active - row)"
@keydown.window.down.prevent="active = Math.min(total - 1, active + row)"
@keydown.window.up.prevent="active < 7 ? htmx.ajax('GET', prefix + '/' + Math.max(0, chapter - 2), {target: '#app', swap: 'outerHTML'}).then(() => history.replaceState(null, '', prefix + '/' + Math.max(0, chapter - 2))) : active = Math.max(0, active - row)"
@keydown.window.down.prevent="active > 12 ? htmx.ajax('GET', prefix + '/' + chapter, {target: '#app', swap: 'outerHTML'}).then(() => history.replaceState(null, '', prefix + '/' + chapter)) : active = Math.min(total - 1, active + row)"
@keydown.window.i.prevent="htmx.ajax('GET', prefix + '/' + chapter, {target: '#app', swap: 'outerHTML'}).then(() => history.replaceState(null, '', prefix + '/' + chapter))"
@keydown.window.n.prevent="htmx.ajax('GET', prefix + '/' + Math.max(0, chapter - 2), {target: '#app', swap: 'outerHTML'}).then(() => history.replaceState(null, '', prefix + '/' + Math.max(0, chapter - 2)))"
@keydown.window.enter.prevent="window.location.href = '/gallery/' + comics[active]"

41
templates/pages.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Henna</title>
<script src="/assets/htmx.min.js" defer></script>
<script src="/assets/alpine.min.js" defer></script>
</head>
<body style="margin: 0; background-color: black; overflow: hidden;">
<div id="app"
x-data="{active: 0, total: {{len .Covers}}, row: 6, chapter: {{.Chapter}}, prefix: '{{.Prefix}}', comics: [{{range $i, $c := .Covers}}{{if $i}},{{end}}{{$c.Comic}}{{end}}]}"
@keydown.window.left.prevent="active = Math.max(0, active - 1)"
@keydown.window.right.prevent="active = Math.min(total - 1, active + 1)"
@keydown.window.up.prevent="active = Math.max(0, active - row)"
@keydown.window.down.prevent="active = Math.min(total - 1, active + row)"
@keydown.window.i.prevent="htmx.ajax('GET', prefix + '/' + chapter, {target: '#app', swap: 'outerHTML'}).then(() => history.replaceState(null, '', prefix + '/' + chapter))"
@keydown.window.n.prevent="htmx.ajax('GET', prefix + '/' + Math.max(0, chapter - 2), {target: '#app', swap: 'outerHTML'}).then(() => history.replaceState(null, '', prefix + '/' + Math.max(0, chapter - 2)))"
@keydown.window.enter.prevent="window.location.href = '/gallery/' + comics[active]"
@wheel.window.prevent="$event.deltaY > 0 ? htmx.ajax('GET', prefix + '/' + chapter, {target: '#app', swap: 'outerHTML'}).then(() => history.replaceState(null, '', prefix + '/' + chapter)) : htmx.ajax('GET', prefix + '/' + Math.max(0, chapter - 2), {target: '#app', swap: 'outerHTML'}).then(() => history.replaceState(null, '', prefix + '/' + Math.max(0, chapter - 2)))"
autofocus
>
<div>
{{range $i, $c := .Covers}}
<div class="cover" :class="{'active': active === {{$i}}}">
<img src="{{$c.Url}}" width="300" height="370">
</div>
{{end}}
</div>
<style>
.cover { display: inline-block; margin: 2px; outline: 2px solid transparent; }
.cover.active { outline: 2px solid #0af; }
</style>
<script>
setTimeout(() => {
[{{range $i, $c := .Preload}}{{if $i}},{{end}}'{{$c.Url}}'{{end}}].forEach(url => new Image().src = url);
}, 200);
</script>
</div>
</body>
</html>