mirror of
https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git
synced 2025-10-28 16:45:32 +00:00
grid view
This commit is contained in:
Simon Martens
72
scripts/webp.sh
Executable file
72
scripts/webp.sh
Executable 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
|
||||
File diff suppressed because one or more lines are too long
@@ -7,11 +7,11 @@
|
||||
{{- if $images.MainPages }}
|
||||
<div class="mb-6">
|
||||
<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 -}}
|
||||
{{- if .Available -}}
|
||||
<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">
|
||||
</div>
|
||||
{{- end -}}
|
||||
@@ -24,11 +24,11 @@
|
||||
{{- if $pages }}
|
||||
<div class="mb-6">
|
||||
<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 -}}
|
||||
{{- if .Available -}}
|
||||
<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">
|
||||
</div>
|
||||
{{- end -}}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
{{ $pageItems := (index $model.Pieces.Items $page) }}
|
||||
{{ $maxEndPage := $page }}
|
||||
{{ 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>
|
||||
<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"
|
||||
@@ -109,7 +109,7 @@
|
||||
{{ $pageItems := (index $model.AdditionalPieces.Items $page) }}
|
||||
{{ $maxEndPage := $page }}
|
||||
{{ 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>
|
||||
<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"
|
||||
|
||||
@@ -7,78 +7,103 @@
|
||||
{{ $pages := $images.MainPages }}
|
||||
{{ $pageCount := len $pages }}
|
||||
|
||||
<div class="space-y-6">
|
||||
|
||||
<!-- First page (single) -->
|
||||
<!-- 2-column grid with proper empty spaces -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Page 1: Left, Row 1 -->
|
||||
{{ if ge $pageCount 1 }}
|
||||
{{ $firstPage := index $pages 0 }}
|
||||
{{ if $firstPage.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $firstPage.PageNumber }}">
|
||||
{{ $page1 := index $pages 0 }}
|
||||
{{ if $page1.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $page1.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<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 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 }}"
|
||||
alt="Seite {{ $firstPage.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="{{ $page1.ImagePath }}"
|
||||
alt="Seite {{ $page1.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $firstPage.PageNumber }}, false)"
|
||||
data-page="{{ $firstPage.PageNumber }}"
|
||||
onclick="enlargePage(this, {{ $page1.PageNumber }}, false)"
|
||||
data-page="{{ $page1.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Middle pages (double spread) -->
|
||||
{{ if ge $pageCount 4 }}
|
||||
{{ $middlePage1 := index $pages 1 }}
|
||||
{{ $middlePage2 := index $pages 2 }}
|
||||
{{ if and $middlePage1.Available $middlePage2.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}" data-pages="{{ $middlePage1.PageNumber }},{{ $middlePage2.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<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>
|
||||
<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>
|
||||
<!-- Empty space: Right, Row 1 -->
|
||||
<div></div>
|
||||
|
||||
<!-- Common header for pages 2 and 3 -->
|
||||
{{ if and (ge $pageCount 2) (ge $pageCount 3) }}
|
||||
{{ $page2 := index $pages 1 }}
|
||||
{{ $page3 := index $pages 2 }}
|
||||
{{ if and $page2.Available $page3.Available }}
|
||||
<div class="col-span-2 mb-2">
|
||||
<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 class="double-spread bg-white p-4 rounded-lg border border-slate-200 hover:border-slate-300 transition-colors duration-200">
|
||||
<img src="{{ $middlePage1.ImagePath }}"
|
||||
alt="Seite {{ $middlePage1.PageNumber }}"
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- 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"
|
||||
onclick="enlargePage(this, {{ $middlePage1.PageNumber }}, true)"
|
||||
data-page="{{ $middlePage1.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 }}"
|
||||
onclick="enlargePage(this, {{ $page2.PageNumber }}, false)"
|
||||
data-page="{{ $page2.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ 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 }}
|
||||
{{ $lastPage := index $pages 3 }}
|
||||
{{ if $lastPage.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $lastPage.PageNumber }}">
|
||||
{{ $page4 := index $pages 3 }}
|
||||
{{ if $page4.Available }}
|
||||
<div class="newspaper-page-container" id="page-{{ $page4.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<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 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 }}"
|
||||
alt="Seite {{ $lastPage.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="{{ $page4.ImagePath }}"
|
||||
alt="Seite {{ $page4.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $lastPage.PageNumber }}, false)"
|
||||
data-page="{{ $lastPage.PageNumber }}"
|
||||
onclick="enlargePage(this, {{ $page4.PageNumber }}, false)"
|
||||
data-page="{{ $page4.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,7 +115,7 @@
|
||||
<!-- Beilage Pages -->
|
||||
{{ range $beilageNum, $beilagePages := $images.AdditionalPages }}
|
||||
{{ 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 -->
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<i class="ri-attachment-line text-2xl text-amber-600"></i>
|
||||
@@ -98,102 +123,109 @@
|
||||
</div>
|
||||
{{ $pageCount := len $beilagePages }}
|
||||
|
||||
<!-- First page of beilage -->
|
||||
{{ if ge $pageCount 1 }}
|
||||
{{ $firstPage := index $beilagePages 0 }}
|
||||
{{ if $firstPage.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $firstPage.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<!-- 2-column grid with proper empty spaces -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Page 1: Left, Row 1 -->
|
||||
{{ if ge $pageCount 1 }}
|
||||
{{ $page1 := index $beilagePages 0 }}
|
||||
{{ if $page1.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page1.PageNumber }}">
|
||||
<div class="mb-3">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<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="{{ $page1.PageNumber }}">{{ $page1.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="{{ $page1.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $page1.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $page1.PageNumber }}, false)"
|
||||
data-page="{{ $page1.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Empty space: Right, Row 1 -->
|
||||
<div></div>
|
||||
|
||||
<!-- Common header for pages 2 and 3 -->
|
||||
{{ if and (ge $pageCount 2) (ge $pageCount 3) }}
|
||||
{{ $page2 := index $beilagePages 1 }}
|
||||
{{ $page3 := index $beilagePages 2 }}
|
||||
{{ if and $page2.Available $page3.Available }}
|
||||
<div class="col-span-2 mb-2">
|
||||
<div class="flex items-center justify-center gap-2 mb-4">
|
||||
<i class="ri-file-text-line text-amber-600" style="transform: scaleX(-1);"></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="text-sm font-bold text-slate-600 bg-amber-50 px-2 py-1 rounded">{{ $page2.PageNumber }}-{{ $page3.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="{{ $firstPage.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $firstPage.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $firstPage.PageNumber }}, false)"
|
||||
data-page="{{ $firstPage.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- If beilage has 4+ pages, show middle spread -->
|
||||
{{ if ge $pageCount 4 }}
|
||||
{{ $middlePage1 := index $beilagePages 1 }}
|
||||
{{ $middlePage2 := index $beilagePages 2 }}
|
||||
{{ if and $middlePage1.Available $middlePage2.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}" data-pages="{{ $middlePage1.PageNumber }},{{ $middlePage2.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); margin-right: -8px;"></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="{{ $middlePage1.PageNumber }}">{{ $middlePage1.PageNumber }}-{{ $middlePage2.PageNumber }}</span>
|
||||
<!-- Page 2: Left, Row 2 -->
|
||||
{{ if ge $pageCount 2 }}
|
||||
{{ $page2 := index $beilagePages 1 }}
|
||||
{{ if $page2.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page2.PageNumber }}">
|
||||
<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 }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $page2.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $page2.PageNumber }}, false)"
|
||||
data-page="{{ $page2.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="double-spread bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<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>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ else if eq $pageCount 2 }}
|
||||
<!-- If only 2 pages, show as spread -->
|
||||
{{ $page2 := index $beilagePages 1 }}
|
||||
{{ if $page2.Available }}
|
||||
<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">
|
||||
<img src="{{ $page2.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $page2.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $page2.PageNumber }}, false)"
|
||||
data-page="{{ $page2.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- Last page of beilage (if 4+ pages) -->
|
||||
{{ if ge $pageCount 4 }}
|
||||
{{ $lastPage := index $beilagePages 3 }}
|
||||
{{ if $lastPage.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $lastPage.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>
|
||||
<!-- Page 3: Right, Row 2 -->
|
||||
{{ if ge $pageCount 3 }}
|
||||
{{ $page3 := index $beilagePages 2 }}
|
||||
{{ if $page3.Available }}
|
||||
<div class="newspaper-page-container" id="beilage-{{ $beilageNum }}-page-{{ $page3.PageNumber }}">
|
||||
<div class="single-page bg-white p-4 rounded-lg border border-amber-200 hover:border-amber-300 transition-colors duration-200">
|
||||
<img src="{{ $page3.ImagePath }}"
|
||||
alt="Beilage {{ $beilageNum }}, 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>
|
||||
<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 }}"
|
||||
alt="Beilage {{ $beilageNum }}, Seite {{ $lastPage.PageNumber }}"
|
||||
class="newspaper-page-image cursor-pointer rounded-md hover:scale-[1.02] transition-transform duration-200"
|
||||
onclick="enlargePage(this, {{ $lastPage.PageNumber }}, false)"
|
||||
data-page="{{ $lastPage.PageNumber }}"
|
||||
loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
{{ 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>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user