Theodor-Springmann-Stiftung/kgpz_web
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git synced 2025-10-29 09:05:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

grid view

Browse Source
This commit is contained in:
Simon Martens
2025-09-15 17:13:57 +02:00
parent b1840bc2ad
commit bcf11e4e11
5 changed files with 240 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
scripts/webp.sh Executable file
View File

@@ -0,0 +1,72 @@
#!/bin/bash
# PNG to WebP conversion script with quality set to 80%
# Usage: ./png_to_webp.sh [folder_path]
# Check if folder argument is provided
if [ $# -eq 0 ]; then
echo "Usage: $0 [folder_path]"
echo "Converts all PNG files in the specified folder to WebP format with 80% quality"
exit 1
fi
# Check if the folder exists
if [ ! -d "$1" ]; then
echo "Error: Folder '$1' does not exist."
exit 1
fi
# Check if cwebp is installed
if ! command -v cwebp &> /dev/null; then
echo "Error: cwebp is not installed. Please install it with:"
echo "sudo apt install webp"
exit 1
fi
# Change to the specified directory
cd "$1"
# Count PNG files
png_count=$(find . -maxdepth 1 -name "*.png" | wc -l)
if [ "$png_count" -eq 0 ]; then
echo "No PNG files found in the specified folder."
exit 0
fi
echo "Found $png_count PNG files in '$1'"
echo "Converting to WebP with 80% quality..."
# Convert all PNG files to WebP with 80% quality
converted=0
for file in *.png; do
if [ -f "$file" ]; then
output_file="${file%.png}.webp"
echo "Converting: $file → $output_file"
cwebp -q 80 "$file" -o "$output_file" > /dev/null 2>&1
if [ $? -eq 0 ]; then
echo "✓ Success: $output_file"
((converted++))
else
echo "✗ Failed to convert: $file"
fi
fi
done
echo "Conversion complete: $converted of $png_count files converted successfully."
# Optional: Display file size comparison
if [ "$converted" -gt 0 ]; then
echo ""
echo "File size comparison:"
for file in *.webp; do
if [ -f "$file" ]; then
original="${file%.webp}.png"
if [ -f "$original" ]; then
original_size=$(du -h "$original" | cut -f1)
webp_size=$(du -h "$file" | cut -f1)
echo "$original: $original_size → $file: $webp_size"
fi
fi
done
fi

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

8
views/routes/ausgabe/components/_bilder.gohtml
View File

@@ -7,11 +7,11 @@
{{- if $images.MainPages }} {{- if $images.MainPages }}
<div class="mb-6"> <div class="mb-6">
<h4 class="text-md font-medium mb-2">Hauptausgabe</h4> <h4 class="text-md font-medium mb-2">Hauptausgabe</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
{{- range $images.MainPages -}} {{- range $images.MainPages -}}
{{- if .Available -}} {{- if .Available -}}
<div class="border rounded-lg p-2"> <div class="border rounded-lg p-2">
<h5 class="text-sm font-medium mb-2">Seite {{ .PageNumber }}</h5> <h5 class="font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-sm mb-2">Seite {{ .PageNumber }}</h5>
<img src="{{ .ImagePath }}" alt="Seite {{ .PageNumber }}" class="w-full h-auto border" loading="lazy"> <img src="{{ .ImagePath }}" alt="Seite {{ .PageNumber }}" class="w-full h-auto border" loading="lazy">
</div> </div>
{{- end -}} {{- end -}}
@@ -24,11 +24,11 @@
{{- if $pages }} {{- if $pages }}
<div class="mb-6"> <div class="mb-6">
<h4 class="text-md font-medium mb-2">Beilage {{ $beilageNum }}</h4> <h4 class="text-md font-medium mb-2">Beilage {{ $beilageNum }}</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
{{- range $pages -}} {{- range $pages -}}
{{- if .Available -}} {{- if .Available -}}
<div class="border rounded-lg p-2"> <div class="border rounded-lg p-2">
<h5 class="text-sm font-medium mb-2">Seite {{ .PageNumber }}</h5> <h5 class="font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-sm mb-2">Seite {{ .PageNumber }}</h5>
<img src="{{ .ImagePath }}" alt="Beilage {{ $beilageNum }}, Seite {{ .PageNumber }}" class="w-full h-auto border" loading="lazy"> <img src="{{ .ImagePath }}" alt="Beilage {{ $beilageNum }}, Seite {{ .PageNumber }}" class="w-full h-auto border" loading="lazy">
</div> </div>
{{- end -}} {{- end -}}

4
views/routes/ausgabe/components/_inhaltsverzeichnis.gohtml
View File

@@ -31,7 +31,7 @@
{{ $pageItems := (index $model.Pieces.Items $page) }} {{ $pageItems := (index $model.Pieces.Items $page) }}
{{ $maxEndPage := $page }} {{ $maxEndPage := $page }}
{{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }} {{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }}
<a href="#page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-xs transition-colors duration-200 hover:bg-blue-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a> <a href="#page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-blue-50 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-blue-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a>
</div> </div>
<button class="page-permalink-btn text-slate-400 hover:text-blue-600 text-xs p-1 rounded hover:bg-blue-50 transition-colors duration-200" <button class="page-permalink-btn text-slate-400 hover:text-blue-600 text-xs p-1 rounded hover:bg-blue-50 transition-colors duration-200"
title="Link zu dieser Seite kopieren" title="Link zu dieser Seite kopieren"
@@ -109,7 +109,7 @@
{{ $pageItems := (index $model.AdditionalPieces.Items $page) }} {{ $pageItems := (index $model.AdditionalPieces.Items $page) }}
{{ $maxEndPage := $page }} {{ $maxEndPage := $page }}
{{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }} {{ range $groupedPiece := $pageItems }}{{ if gt $groupedPiece.EndPage $maxEndPage }}{{ $maxEndPage = $groupedPiece.EndPage }}{{ end }}{{ end }}
<a href="#beilage-1-page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-amber-50 px-2 py-1 rounded text-xs transition-colors duration-200 hover:bg-amber-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a> <a href="#beilage-1-page-{{ $page }}" class="page-number-inhalts font-bold text-slate-700 bg-amber-50 px-2 py-1 rounded text-sm transition-colors duration-200 hover:bg-amber-100 no-underline" data-page-number="{{ $page }}" data-end-page="{{ $maxEndPage }}" data-page-range="{{ $page }}-{{ $maxEndPage }}">{{ if ne $page $maxEndPage }}{{ $page }}-{{ $maxEndPage }}{{ else }}{{ $page }}{{ end }}</a>
</div> </div>
<button class="page-permalink-btn text-slate-400 hover:text-amber-600 text-xs p-1 rounded hover:bg-amber-50 transition-colors duration-200" <button class="page-permalink-btn text-slate-400 hover:text-amber-600 text-xs p-1 rounded hover:bg-amber-50 transition-colors duration-200"
title="Link zu dieser Seite kopieren" title="Link zu dieser Seite kopieren"

230
views/routes/ausgabe/components/_newspaper_layout.gohtml
View File

@@ -7,78 +7,103 @@
{{ $pages := $images.MainPages }} {{ $pages := $images.MainPages }}
{{ $pageCount := len $pages }} {{ $pageCount := len $pages }}
<div class="space-y-6"> <!-- 2-column grid with proper empty spaces -->
<div class="grid grid-cols-2 gap-4">
<!-- First page (single) --> <!-- Page 1: Left, Row 1 -->
{{ if ge $pageCount 1 }} {{ if ge $pageCount 1 }}
{{ $firstPage := index $pages 0 }} {{ $page1 := index $pages 0 }}
{{ if $firstPage.Available }} {{ if $page1.Available }}
<div class="newspaper-page-container" id="page-{{ $firstPage.PageNumber }}"> <div class="newspaper-page-container" id="page-{{ $page1.PageNumber }}">
<div class="mb-3"> <div class="mb-3">
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<i class="ri-file-text-line text-black"></i> <i class="ri-file-text-line text-black"></i>
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $firstPage.PageNumber }}">{{ $firstPage.PageNumber }}</span> <span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page1.PageNumber }}">{{ $page1.PageNumber }}</span>
</div> </div>
</div> </div>
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200"> <div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
<img src="{{ $firstPage.ImagePath }}" <img src="{{ $page1.ImagePath }}"
alt="Seite {{ $firstPage.PageNumber }}" alt="Seite {{ $page1.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $firstPage.PageNumber }}, false)" onclick="enlargePage(this, {{ $page1.PageNumber }}, false)"
data-page="{{ $firstPage.PageNumber }}" data-page="{{ $page1.PageNumber }}"
loading="lazy"> loading="lazy">
</div> </div>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
<!-- Middle pages (double spread) --> <!-- Empty space: Right, Row 1 -->
{{ if ge $pageCount 4 }} <div></div>
{{ $middlePage1 := index $pages 1 }}
{{ $middlePage2 := index $pages 2 }} <!-- Common header for pages 2 and 3 -->
{{ if and $middlePage1.Available $middlePage2.Available }} {{ if and (ge $pageCount 2) (ge $pageCount 3) }}
<div class="newspaper-page-container" id="page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}" data-pages="{{ $middlePage1.PageNumber }},{{ $middlePage2.PageNumber }}"> {{ $page2 := index $pages 1 }}
<div class="mb-3"> {{ $page3 := index $pages 2 }}
<div class="flex items-center gap-2 mb-2"> {{ if and $page2.Available $page3.Available }}
<i class="ri-file-text-line text-black" style="transform: scaleX(-1); margin-right: -8px;"></i><i class="ri-file-text-line text-black"></i> <div class="col-span-2 mb-2">
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $middlePage1.PageNumber }}">{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}</span> <div class="flex items-center justify-center gap-2 mb-4">
<i class="ri-file-text-line text-black" style="transform: scaleX(-1);"></i>
<i class="ri-file-text-line text-black"></i>
<span class="text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded">{{ $page2.PageNumber }}-{{ $page3.PageNumber }}</span>
</div> </div>
</div> </div>
<div class="double-spread bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200"> {{ end }}
<img src="{{ $middlePage1.ImagePath }}" {{ end }}
alt="Seite {{ $middlePage1.PageNumber }}"
<!-- Page 2: Left, Row 2 -->
{{ if ge $pageCount 2 }}
{{ $page2 := index $pages 1 }}
{{ if $page2.Available }}
<div class="newspaper-page-container" id="page-{{ $page2.PageNumber }}">
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
<img src="{{ $page2.ImagePath }}"
alt="Seite {{ $page2.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $middlePage1.PageNumber }}, true)" onclick="enlargePage(this, {{ $page2.PageNumber }}, false)"
data-page="{{ $middlePage1.PageNumber }}" data-page="{{ $page2.PageNumber }}"
loading="lazy">
<img src="{{ $middlePage2.ImagePath }}"
alt="Seite {{ $middlePage2.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $middlePage2.PageNumber }}, true)"
data-page="{{ $middlePage2.PageNumber }}"
loading="lazy"> loading="lazy">
</div> </div>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
<!-- Last page (single) --> <!-- Page 3: Right, Row 2 -->
{{ if ge $pageCount 3 }}
{{ $page3 := index $pages 2 }}
{{ if $page3.Available }}
<div class="newspaper-page-container" id="page-{{ $page3.PageNumber }}">
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
<img src="{{ $page3.ImagePath }}"
alt="Seite {{ $page3.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $page3.PageNumber }}, false)"
data-page="{{ $page3.PageNumber }}"
loading="lazy">
</div>
</div>
{{ end }}
{{ end }}
<!-- Empty space: Left, Row 3 -->
<div></div>
<!-- Page 4: Right, Row 3 -->
{{ if ge $pageCount 4 }} {{ if ge $pageCount 4 }}
{{ $lastPage := index $pages 3 }} {{ $page4 := index $pages 3 }}
{{ if $lastPage.Available }} {{ if $page4.Available }}
<div class="newspaper-page-container" id="page-{{ $lastPage.PageNumber }}"> <div class="newspaper-page-container" id="page-{{ $page4.PageNumber }}">
<div class="mb-3"> <div class="mb-3">
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<i class="ri-file-text-line text-black" style="transform: scaleX(-1);"></i> <i class="ri-file-text-line text-black" style="transform: scaleX(-1);"></i>
<span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $lastPage.PageNumber }}">{{ $lastPage.PageNumber }}</span> <span class="page-indicator text-sm font-bold text-slate-600 bg-blue-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page4.PageNumber }}">{{ $page4.PageNumber }}</span>
</div> </div>
</div> </div>
<div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200"> <div class="single-page bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
<img src="{{ $lastPage.ImagePath }}" <img src="{{ $page4.ImagePath }}"
alt="Seite {{ $lastPage.PageNumber }}" alt="Seite {{ $page4.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $lastPage.PageNumber }}, false)" onclick="enlargePage(this, {{ $page4.PageNumber }}, false)"
data-page="{{ $lastPage.PageNumber }}" data-page="{{ $page4.PageNumber }}"
loading="lazy"> loading="lazy">
</div> </div>
</div> </div>
@@ -90,7 +115,7 @@
<!-- Beilage Pages --> <!-- Beilage Pages -->
{{ range $beilageNum, $beilagePages := $images.AdditionalPages }} {{ range $beilageNum, $beilagePages := $images.AdditionalPages }}
{{ if $beilagePages }} {{ if $beilagePages }}
<div class="space-y-6 mt-12 pt-8 border-t-2 border-amber-200"> <div class="mt-12 pt-8 border-t-2 border-amber-200">
<!-- Header for beilage --> <!-- Header for beilage -->
<div class="flex items-center gap-3 mb-6"> <div class="flex items-center gap-3 mb-6">
<i class="ri-attachment-line text-2xl text-amber-600"></i> <i class="ri-attachment-line text-2xl text-amber-600"></i>
@@ -98,68 +123,54 @@
</div> </div>
{{ $pageCount := len $beilagePages }} {{ $pageCount := len $beilagePages }}
<!-- First page of beilage --> <!-- 2-column grid with proper empty spaces -->
<div class="grid grid-cols-2 gap-4">
<!-- Page 1: Left, Row 1 -->
{{ if ge $pageCount 1 }} {{ if ge $pageCount 1 }}
{{ $firstPage := index $beilagePages 0 }} {{ $page1 := index $beilagePages 0 }}
{{ if $firstPage.Available }} {{ if $page1.Available }}
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $firstPage.PageNumber }}"> <div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page1.PageNumber }}">
<div class="mb-3"> <div class="mb-3">
<div class="flex items-center gap-2 mb-2"> <div class="flex items-center gap-2 mb-2">
<i class="ri-file-text-line text-amber-600"></i> <i class="ri-file-text-line text-amber-600"></i>
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $firstPage.PageNumber }}">{{ $firstPage.PageNumber }}</span> <span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page1.PageNumber }}">{{ $page1.PageNumber }}</span>
</div> </div>
</div> </div>
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200"> <div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
<img src="{{ $firstPage.ImagePath }}" <img src="{{ $page1.ImagePath }}"
alt="Beilage {{ $beilageNum }}, Seite {{ $firstPage.PageNumber }}" alt="Beilage {{ $beilageNum }}, Seite {{ $page1.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $firstPage.PageNumber }}, false)" onclick="enlargePage(this, {{ $page1.PageNumber }}, false)"
data-page="{{ $firstPage.PageNumber }}" data-page="{{ $page1.PageNumber }}"
loading="lazy"> loading="lazy">
</div> </div>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
<!-- If beilage has 4+ pages, show middle spread --> <!-- Empty space: Right, Row 1 -->
{{ if ge $pageCount 4 }} <div></div>
{{ $middlePage1 := index $beilagePages 1 }}
{{ $middlePage2 := index $beilagePages 2 }} <!-- Common header for pages 2 and 3 -->
{{ if and $middlePage1.Available $middlePage2.Available }} {{ if and (ge $pageCount 2) (ge $pageCount 3) }}
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}" data-pages="{{ $middlePage1.PageNumber }},{{ $middlePage2.PageNumber }}"> {{ $page2 := index $beilagePages 1 }}
<div class="mb-3"> {{ $page3 := index $beilagePages 2 }}
<div class="flex items-center gap-2 mb-2"> {{ if and $page2.Available $page3.Available }}
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1); margin-right: -8px;"></i><i class="ri-file-text-line text-amber-600"></i> <div class="col-span-2 mb-2">
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $middlePage1.PageNumber }}">{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}</span> <div class="flex items-center justify-center gap-2 mb-4">
</div> <i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1);"></i>
</div> <i class="ri-file-text-line text-amber-600"></i>
<div class="double-spread bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200"> <span class="text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded">{{ $page2.PageNumber }}-{{ $page3.PageNumber }}</span>
<img src="{{ $middlePage1.ImagePath }}"
alt="Beilage {{ $beilageNum }}, Seite {{ $middlePage1.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $middlePage1.PageNumber }}, true)"
data-page="{{ $middlePage1.PageNumber }}"
loading="lazy">
<img src="{{ $middlePage2.ImagePath }}"
alt="Beilage {{ $beilageNum }}, Seite {{ $middlePage2.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $middlePage2.PageNumber }}, true)"
data-page="{{ $middlePage2.PageNumber }}"
loading="lazy">
</div> </div>
</div> </div>
{{ end }} {{ end }}
{{ else if eq $pageCount 2 }} {{ end }}
<!-- If only 2 pages, show as spread -->
<!-- Page 2: Left, Row 2 -->
{{ if ge $pageCount 2 }}
{{ $page2 := index $beilagePages 1 }} {{ $page2 := index $beilagePages 1 }}
{{ if $page2.Available }} {{ if $page2.Available }}
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page2.PageNumber }}"> <div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page2.PageNumber }}">
<div class="mb-3">
<div class="flex items-center gap-2 mb-2">
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1);"></i>
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page2.PageNumber }}">{{ $page2.PageNumber }}</span>
</div>
</div>
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200"> <div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
<img src="{{ $page2.ImagePath }}" <img src="{{ $page2.ImagePath }}"
alt="Beilage {{ $beilageNum }}, Seite {{ $page2.PageNumber }}" alt="Beilage {{ $beilageNum }}, Seite {{ $page2.PageNumber }}"
@@ -172,28 +183,49 @@
{{ end }} {{ end }}
{{ end }} {{ end }}
<!-- Last page of beilage (if 4+ pages) --> <!-- Page 3: Right, Row 2 -->
{{ if ge $pageCount 4 }} {{ if ge $pageCount 3 }}
{{ $lastPage := index $beilagePages 3 }} {{ $page3 := index $beilagePages 2 }}
{{ if $lastPage.Available }} {{ if $page3.Available }}
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $lastPage.PageNumber }}"> <div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page3.PageNumber }}">
<div class="mb-3">
<div class="flex items-center gap-2 mb-2">
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1);"></i>
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $lastPage.PageNumber }}">{{ $lastPage.PageNumber }}</span>
</div>
</div>
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200"> <div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
<img src="{{ $lastPage.ImagePath }}" <img src="{{ $page3.ImagePath }}"
alt="Beilage {{ $beilageNum }}, Seite {{ $lastPage.PageNumber }}" alt="Beilage {{ $beilageNum }}, Seite {{ $page3.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200" class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $lastPage.PageNumber }}, false)" onclick="enlargePage(this, {{ $page3.PageNumber }}, false)"
data-page="{{ $lastPage.PageNumber }}" data-page="{{ $page3.PageNumber }}"
loading="lazy"> loading="lazy">
</div> </div>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}
<!-- Empty space: Left, Row 3 -->
<div></div>
<!-- Page 4: Right, Row 3 -->
{{ if ge $pageCount 4 }}
{{ $page4 := index $beilagePages 3 }}
{{ if $page4.Available }}
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page4.PageNumber }}">
<div class="mb-3">
<div class="flex items-center gap-2 mb-2">
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1);"></i>
<span class="page-indicator text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded transition-all duration-300" data-page="{{ $page4.PageNumber }}">{{ $page4.PageNumber }}</span>
</div>
</div>
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
<img src="{{ $page4.ImagePath }}"
alt="Beilage {{ $beilageNum }}, Seite {{ $page4.PageNumber }}"
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
onclick="enlargePage(this, {{ $page4.PageNumber }}, false)"
data-page="{{ $page4.PageNumber }}"
loading="lazy">
</div>
</div>
{{ end }}
{{ end }}
</div>
</div> </div>
{{ end }} {{ end }}
{{ end }} {{ end }}