#!/usr/bin/env python3
"""
Genera carousel.html en la carpeta que le pases como argumento.
Solo flechas < >, sin miniaturas, sin JavaScript.
Uso:
python3 generar_carousel.py /home/esotericwarfare/samba/miinstagram.github.io/cursoelectricidad
python3 generar_carousel.py fotos/
"""
import sys
from pathlib import Path
EXT_OK = {".jpg", ".jpeg", ".png", ".gif", ".webp", ".avif", ".bmp"}
def main():
if len(sys.argv) < 2:
print("Uso: python3 generar_carousel.py <carpeta>")
sys.exit(1)
carpeta = Path(sys.argv[1]).resolve()
if not carpeta.exists():
print("No existe la carpeta: " + str(carpeta))
sys.exit(1)
# Solo imágenes, excluir thumbs
fotos = sorted(
p for p in carpeta.iterdir()
if p.suffix.lower() in EXT_OK
and not p.name.startswith("thumb-")
and not p.name.startswith("thumb_")
)
if not fotos:
print("No hay imágenes en " + str(carpeta))
sys.exit(1)
n = len(fotos)
print("Imágenes encontradas: " + str(n))
L = [] # líneas del HTML
L.append("<!DOCTYPE html>")
L.append('<html lang="es">')
L.append("<head>")
L.append('<meta charset="UTF-8">')
L.append('<meta name="viewport" content="width=device-width, initial-scale=1">')
L.append("<title>Fotos (" + str(n) + ")</title>")
L.append("<style>")
L.append("* { box-sizing: border-box; margin: 0; padding: 0; }")
L.append("body { background: #111; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }")
L.append("input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }")
L.append(".wrap { position: relative; width: 100vw; max-width: 1100px; height: 90vh; display: flex; align-items: center; justify-content: center; }")
L.append(".slide { display: none; width: 100%; height: 100%; align-items: center; justify-content: center; }")
L.append(".slide img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }")
L.append(".arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.8rem; color: #fff; transition: background .15s; z-index: 10; user-select: none; }")
L.append(".arrow:hover { background: rgba(255,255,255,.25); }")
L.append(".arrow.prev { left: 1rem; }")
L.append(".arrow.next { right: 1rem; }")
L.append(".counter { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); font-size: .75rem; color: rgba(255,255,255,.35); letter-spacing: .1em; font-family: sans-serif; pointer-events: none; }")
# slide visible cuando su radio está checked
for i in range(1, n + 1):
L.append("#s" + str(i) + ":checked ~ .wrap .slide:nth-child(" + str(i) + ") { display: flex; }")
# contador
for i in range(1, n + 1):
L.append("#s" + str(i) + ":checked ~ .counter::before { content: '" + str(i) + " / " + str(n) + "'; }")
L.append("</style>")
# radios (fuera del body, antes de .wrap, así el ~ selector funciona)
for i in range(1, n + 1):
checked = " checked" if i == 1 else ""
L.append('<input type="radio" name="c" id="s' + str(i) + '"' + checked + ">")
L.append("<body>")
L.append('<div class="wrap">')
for i, foto in enumerate(fotos, 1):
prev_id = n if i == 1 else i - 1
next_id = 1 if i == n else i + 1
L.append(' <div class="slide">')
L.append(' <label class="arrow prev" for="s' + str(prev_id) + '">‹</label>')
L.append(' <img src="' + foto.name + '" loading="lazy">')
L.append(' <label class="arrow next" for="s' + str(next_id) + '">›</label>')
L.append(' </div>')
L.append("</div>")
L.append('<div class="counter"></div>')
L.append("</body>")
L.append("</html>")
salida = carpeta / "carousel.html"
salida.write_text("\n".join(L), encoding="utf-8")
print("Generado: " + str(salida))
if __name__ == "__main__":
main()