https://fourstarpizzaploiesti.ro/js/oferte.js

1// === 1) Datele promoțiilor (editezi doar aici) ===
2const PROMOS = [
3  {
4    tag: "Promoția lunii",
5    title: "Delicios burger cu cartofi prăjiți",
6    text: "Avem burgeri de vită sau de pui. Alege meniul tău preferat, cu sos inclus.",
7    cta: { label: "Alege meniul de Burger", href: "meniuri.html#burgers" },
8    bg: "linear-gradient(90deg, #f59e0b 0%, #f97316 100%)",
9    image: "img/oferte/burger-hero.webp",
10    imageAlt: "Burger suculent cu cartofi",
11    w: 761, h: 650,
12  },
13  {
14    tag: "Super ofertă",
15    title: "PIZZA 2 LOVE",
16    text: "Alege orice 2 pizza Party și combină băuturile preferate: Cola sau Bergenbier.",
17    cta: { label: "Vezi oferta Pizza 2 Love", href: "oferte-pizza-ploiesti.html#party" },
18    bg: "linear-gradient(90deg, #2563eb 0%, #0ea5e9 100%)",
19    image: "img/oferte/promo-primavara.webp",
20    imageAlt: "promotii pizza",
21    w: 762, h: 650,
22  },
23 
24  {
25    tag: "Cryspy Days",
26    title: "Ai pofta de ceva crispy?",
27    text: "Ti-e pofta de niste ARIPIOARE!.",
28    cta: { label: "Vezi oferta Meniu Aripioare", href: "meniuri.html#meniu8" },
29    bg: "linear-gradient(90deg, #0bc20bff 0%, #539453ff 100%)",
30    image: "img/oferte/fried-chicken-slide-final.webp",
31    imageAlt: "promotii crispy",
32    w: 761, h: 650,
33  },
34];
35
36// === 2) Randare slider ===
37const track = document.getElementById("promoTrack");
38const dotsWrap = document.getElementById("promoDots");
39let idx = 0,
40  timer = null,
41  hover = false;
42
43function slideTpl(promo, i) {
44  // All slides are non-critical for LCP; lazy-load and keep low priority
45  const loading = "lazy";
46  const fetchp = "low";
47  return `
48      <article class="promo-slide" style="background:${promo.bg}">
49        <div class="promo-copy">
50          ${promo.tag ? `<span class="tag">${promo.tag}</span>` : ""}
51          <h2>${promo.title}</h2>
52          ${promo.text ? `<p>${promo.text}</p>` : ""}
53          ${
54            promo.cta
55              ? `<a class="promo-cta" href="${promo.cta.href}">${promo.cta.label}</a>`
56              : ""
57          }
58        </div>
59        <div class="promo-media">
60          <img src="${promo.image}" alt="${
61    promo.imageAlt || promo.title
62  }" width="${promo.w || 800}" height="${promo.h || 600}" style="aspect-ratio:${promo.w || 800}/${promo.h || 600}" loading="${loading}" decoding="async" fetchpriority="${fetchp}">
63        </div>
64      </article>
65    `;
66}
67
68function renderPromos() {
69  track.innerHTML = PROMOS.map(slideTpl).join("");
70  dotsWrap.innerHTML = PROMOS.map(
71    (_, i) => `
72      <button class="promo-dot" role="tab" aria-label="Slide ${
73        i + 1
74      }" aria-selected="${i === 0 ? "true" : "false"}" data-i="${i}"></button>
75    `
76  ).join("");
77  goTo(0, false);
78}
79
80function goTo(i, animate = true) {
81  idx = (i + PROMOS.length) % PROMOS.length;
82  track.style.transition = animate ? "transform .6s ease" : "none";
83  track.style.transform = `translateX(-${idx * 100}%)`;
84  [...dotsWrap.children].forEach((d, j) =>
85    d.setAttribute("aria-selected", j === idx ? "true" : "false")
86  );
87}
88
89function next() {
90  goTo(idx + 1);
91}
92function prev() {
93  goTo(idx - 1);
94}
95
96// autoplay
97function start() {
98  stop();
99  timer = setInterval(() => {
100    if (!hover) next();
101  }, 6000);
102}
103function stop() {
104  if (timer) {
105    clearInterval(timer);
106    timer = null;
107  }
108}
109
110// evenimente
111document.getElementById("promoNext").addEventListener("click", next);
112document.getElementById("promoPrev").addEventListener("click", prev);
113dotsWrap.addEventListener("click", (e) => {
114  const b = e.target.closest(".promo-dot");
115  if (!b) return;
116  goTo(parseInt(b.dataset.i, 10));
117});
118const sliderEl = document.getElementById("promo-slider");
119sliderEl.addEventListener("mouseenter", () => {
120  hover = true;
121});
122sliderEl.addEventListener("mouseleave", () => {
123  hover = false;
124});
125
126// swipe pe mobil
127(function enableSwipe() {
128  let sx = 0,
129    dx = 0;
130  sliderEl.addEventListener(
131    "touchstart",
132    (e) => {
133      sx = e.touches[0].clientX;
134      dx = 0;
135    },
136    { passive: true }
137  );
138  sliderEl.addEventListener(
139    "touchmove",
140    (e) => {
141      dx = e.touches[0].clientX - sx;
142    },
143    { passive: true }
144  );
145  sliderEl.addEventListener(
146    "touchend",
147    () => {
148      if (Math.abs(dx) > 50) {
149        dx < 0 ? next() : prev();
150      }
151      sx = dx = 0;
152    },
153    { passive: true }
154  );
155})();
156
157// init
158renderPromos();
159start();