#!/bin/bash
#copia lo script in /usr/sbin, rendilo eseguibile e poi lo puoi eseguire dentro la dir che contiene le foro da rendere slideshow
# Nome del file HTML da generare
OUTPUT_FILE="index.html"

# Inizio file HTML con CSS per slideshow
echo '<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slideshow Foto</title>
    <style>
        body { font-family: sans-serif; background: #bebebe; color: #fff; margin: 0; display: flex; flex-direction: column; align-items: center; }
        .slideshow-container { max-width: 800px; position: relative; margin: auto; margin-top: 20px; }
        .mySlides { display: none; }
        img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.5); }
        .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; background-color: rgba(0,0,0,0.3); }
        .next { right: 0; border-radius: 3px 0 0 3px; }
        .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
    </style>
</head>
<body>

<h2>La mia galleria</h2>
<div class="slideshow-container">' > $OUTPUT_FILE

# Aggiunge le immagini al file HTML
i=0
for img in *.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}; do
    [ -e "$img" ] || continue
    echo "    <div class=\"mySlides\">
        <img src=\"$img\">
    </div>" >> $OUTPUT_FILE
    ((i++))
done

# Aggiunge pulsanti e JavaScript per la navigazione
echo '    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<script>
    let slideIndex = 1;
    showSlides(slideIndex);
    function plusSlides(n) { showSlides(slideIndex += n); }
    function showSlides(n) {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        if (n > slides.length) {slideIndex = 1}
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {slides[i].style.display = "none";}
        slides[slideIndex-1].style.display = "block";
    }
</script>
</body>
<b>RETURN &nbsp;</b><a TARGET="_top" HREF="/salsero/">Salsero</a>
</html>' >> $OUTPUT_FILE

echo "Slideshow creato: $OUTPUT_FILE con $i immagini."
# Opzionale: apre il file automaticamente (macOS: open, Linux: xdg-open)
# xdg-open $OUTPUT_FILE 

