Tul xxx Tul

Viewing: script.js

      // Tema persistente
      (function themeInit() {
        const pref = localStorage.getItem("theme");
        if (
          pref === "dark" ||
          (pref === null &&
            window.matchMedia("(prefers-color-scheme: dark)").matches)
        ) {
          document.documentElement.classList.add("theme-dark");
        }
      })();

      // Galería: Lightbox accesible con navegación
      (function galleryLightbox() {
        const items = Array.from(document.querySelectorAll('.gallery .g-item'));
        if (!items.length) return;

        // Crear overlay una sola vez
        const overlay = document.createElement('div');
        overlay.className = 'lb-overlay';
        overlay.setAttribute('role', 'dialog');
        overlay.setAttribute('aria-modal', 'true');
        overlay.setAttribute('aria-label', 'Galería');
        overlay.innerHTML = `
          <div class="lb-stage">
            <img class="lb-img" alt="Imagen de galería" />
            <button class="lb-close" aria-label="Cerrar"><i class="fa-solid fa-xmark"></i></button>
            <button class="lb-prev" aria-label="Anterior"><i class="fa-solid fa-chevron-left"></i></button>
            <button class="lb-next" aria-label="Siguiente"><i class="fa-solid fa-chevron-right"></i></button>
          </div>`;
        document.body.appendChild(overlay);

        const imgEl = overlay.querySelector('.lb-img');
        const btnClose = overlay.querySelector('.lb-close');
        const btnPrev = overlay.querySelector('.lb-prev');
        const btnNext = overlay.querySelector('.lb-next');

        const sources = items.map(a => a.getAttribute('href'));
        const alts = items.map(a => (a.querySelector('img')?.alt || 'Imagen de galería'));
        let index = 0;

        function show(i) {
          index = (i + sources.length) % sources.length;
          imgEl.src = sources[index];
          imgEl.alt = alts[index];
          overlay.classList.add('open');
        }

        function close() {
          overlay.classList.remove('open');
          imgEl.removeAttribute('src');
        }

        // Abrir desde miniatura
        items.forEach((a, i) => a.addEventListener('click', (e) => {
          e.preventDefault();
          show(i);
        }));

        // Controles
        btnClose.addEventListener('click', close);
        btnPrev.addEventListener('click', () => show(index - 1));
        btnNext.addEventListener('click', () => show(index + 1));
        overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });

        // Teclado
        document.addEventListener('keydown', (e) => {
          if (!overlay.classList.contains('open')) return;
          if (e.key === 'Escape') close();
          if (e.key === 'ArrowLeft') show(index - 1);
          if (e.key === 'ArrowRight') show(index + 1);
        });

        // Gestos táctiles simples
        let startX = 0;
        overlay.addEventListener('touchstart', (e) => { startX = e.touches[0].clientX; }, { passive: true });
        overlay.addEventListener('touchend', (e) => {
          const dx = e.changedTouches[0].clientX - startX;
          if (Math.abs(dx) > 40) {
            if (dx < 0) show(index + 1); else show(index - 1);
          }
        }, { passive: true });
      })();

      document.getElementById("themeToggle").addEventListener("click", () => {
        const root = document.documentElement;
        const dark = root.classList.toggle("theme-dark");
        localStorage.setItem("theme", dark ? "dark" : "light");
      });

      // Año dinámico
      document.getElementById("year").textContent = new Date().getFullYear();

      // Reveal on scroll
      const observer = new IntersectionObserver(
        (entries) => {
          entries.forEach((e) => {
            if (e.isIntersecting) {
              e.target.classList.add("visible");
              observer.unobserve(e.target);
            }
          });
        },
        { threshold: 0.12 }
      );
      document
        .querySelectorAll(".reveal")
        .forEach((el) => observer.observe(el));

      // Carrusel con flechas, dots y pausa al hover
      (function carousel() {
        const slides = document.getElementById("slides");
        if (!slides) return;
        const root = slides.parentElement; // .carousel
        const btnPrev = root.querySelector(".nav.prev");
        const btnNext = root.querySelector(".nav.next");
        const dotsWrap = root.querySelector(".controls");
        let index = 0;
        const total = slides.children.length;
        let timer;

        // Crear dots dinámicamente según cantidad de slides
        let dots = [];
        if (dotsWrap) {
          dotsWrap.innerHTML = Array.from({ length: total }, (_, i) => `<span class="dot" data-dot="${i}"></span>`).join("");
          dots = Array.from(dotsWrap.querySelectorAll(".dot"));
        }

        const set = (i) => {
          index = (i + total) % total;
          slides.style.transform = `translateX(-${index * 100}%)`;
          dots.forEach((d, di) => d.classList.toggle("active", di === index));
        };

        const start = () => {
          stop();
          timer = setInterval(() => set(index + 1), 4500);
        };
        const stop = () => {
          if (timer) clearInterval(timer);
          timer = null;
        };

        // Dots
        if (dots.length) {
          dots.forEach((d) =>
            d.addEventListener("click", () => {
              const i = parseInt(d.dataset.dot, 10);
              set(isNaN(i) ? 0 : i);
              start();
            })
          );
        }

        // Flechas
        if (btnPrev) btnPrev.addEventListener("click", () => { set(index - 1); start(); });
        if (btnNext) btnNext.addEventListener("click", () => { set(index + 1); start(); });

        // Pausa al hover / reanuda al salir
        root.addEventListener("mouseenter", stop);
        root.addEventListener("mouseleave", start);

        // Navegación por teclado
        root.addEventListener("keydown", (e) => {
          if (e.key === "ArrowLeft") { set(index - 1); start(); }
          if (e.key === "ArrowRight") { set(index + 1); start(); }
        });
        root.setAttribute("tabindex", "0");

        // Init
        set(0);
        start();
      })();

      // Utilidad de mensajes tipo toast
      function toast(msg, ok = true) {
        const t = document.createElement("div");
        t.textContent = msg;
        t.style.cssText = `position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:${
          ok ? "var(--text)" : "var(--danger)"
        };color:var(--bg);padding:.7rem 1rem;border-radius:999px;box-shadow:var(--shadow);z-index:10000;`;
        document.body.appendChild(t);
        setTimeout(() => t.remove(), 2400);
      }

      // Manejo de envío (si existe formulario)
      (function bindPedidoForm(){
        const form = document.getElementById("pedidoForm");
        if (!form) return;
        form.addEventListener("submit", (e) => {
          e.preventDefault();
          const f = e.currentTarget;
          if (f.empresa && f.empresa.value) return; // honeypot
          if (!f.checkValidity()) {
            toast("Revisa los campos ✍️", false);
            return;
          }
          toast("Pedido enviado ✅");
          f.reset();
        });
      })();

      // Newsletter (si existiera)
      (function bindNewsletter(){
        const form = document.getElementById("newsletter");
        if (!form) return;
        form.addEventListener("submit", (e) => {
          e.preventDefault();
          const input = document.getElementById("newsEmail");
          if (!input || !input.checkValidity()) {
            toast("Introduce un email válido", false);
            return;
          }
          toast("Gracias por suscribirte 📨");
          e.currentTarget.reset();
        });
      })();

      // Partículas de harina (canvas)
      (function flour() {
        // Desactivado: eliminamos el efecto de punticos en el fondo
        const DISABLE_FLOUR = true;
        if (DISABLE_FLOUR) return;

        const prefersReduced = window.matchMedia(
          "(prefers-reduced-motion: reduce)"
        ).matches;
        if (prefersReduced) return; // Respeta accesibilidad
        const canvas = document.getElementById("flour-canvas");
        if (!canvas) return;
        const ctx = canvas.getContext("2d");
        const DPR = Math.min(window.devicePixelRatio || 1, 2);
        let W,
          H,
          particles = [],
          anim;
        const P_COUNT = Math.max(
          24,
          Math.min(96, Math.floor(window.innerWidth / 15))
        );

        function resize() {
          W = canvas.width = Math.floor(innerWidth * DPR);
          H = canvas.height = Math.floor(innerHeight * DPR);
          canvas.style.width = innerWidth + "px";
          canvas.style.height = innerHeight + "px";
        }
        function rand(min, max) {
          return Math.random() * (max - min) + min;
        }
        function init() {
          particles = Array.from({ length: P_COUNT }, () => ({
            x: rand(0, W),
            y: rand(0, H),
            r: rand(0.6, 2.2) * DPR,
            vx: rand(-0.15, 0.15) * DPR,
            vy: rand(0.12, 0.35) * DPR,
            a: rand(0.2, 0.5),
          }));
        }
        function step() {
          ctx.clearRect(0, 0, W, H);
          ctx.globalCompositeOperation = "lighter";
          for (const p of particles) {
            p.x += p.vx;
            p.y += p.vy;
            if (p.y > H) p.y = -10;
            if (p.x < -10) p.x = W + 10;
            if (p.x > W + 10) p.x = -10;
            ctx.beginPath();
            ctx.fillStyle = `rgba(255,255,255,${p.a})`;
            ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
            ctx.fill();
          }
          anim = requestAnimationFrame(step);
        }
        resize();
        init();
        step();
        addEventListener("resize", () => {
          cancelAnimationFrame(anim);
          resize();
          init();
          step();
        });
        document.addEventListener("visibilitychange", () => {
          if (document.hidden) cancelAnimationFrame(anim);
          else step();
        });
      })();
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64