index.html

Repository

wynajem_motorowek

Original path

index.html

Role

SOURCE

Size

22481 bytes

Lines

724

SHA-256

6867d08365abf9bdb2687c8c8c63a141d5cf5818220acf583e1fcc00c54b96dc

Displayed range

501–724

   VIEW
   ========================= */
function renderHome(){
  setActiveNav("home");
  setActiveBoat(null);
  app.innerHTML = `
    <div class="title-big">MOTORÓWKI BEZ PATENTU</div>
    <div class="card">
      <div class="quote">
        “<strong>${OFFER_TEXT.replaceAll("\n","<br/>")}</strong>”
        <br/><span></span>
      </div>
      <div class="contact-big">
        <div class="phone">${CONTACT.phone}</div>
        <div class="addr">${CONTACT.addr1}<br/>${CONTACT.addr2}</div>
      </div>
    </div>
    <div class="card">
      <h2 style="margin:0 0 8px;">Rezerwacje</h2>
      <div id="booking-root"></div>
    </div>
  `;
}

function renderOferta(){
  setActiveNav("oferta");
  setActiveBoat(null);
  app.innerHTML = `
    <div class="backrow">
      <div style="color:var(--muted)">Oferta</div>
      <button onclick="go('home')">Powrót</button>
    </div>
    <div class="card">
      <h2 style="margin:0 0 10px;">Oferta</h2>
      <p style="margin:0; color:var(--muted); line-height:1.7;">
        ${OFFER_TEXT.replaceAll("\n","<br/>")}
        <br/><br/>
        <strong style="color:var(--text)">Przykładowo:</strong><br/>
        • 1h: … zł<br/>
        • 2h: … zł<br/>
        • Dzień: … zł<br/>
        • Kaucja: … zł<br/>
      </p>
    </div>
  `;
}

function renderKontakt(){
  setActiveNav("kontakt");
  setActiveBoat(null);
  app.innerHTML = `
    <div class="backrow">
      <div style="color:var(--muted)">Kontakt</div>
      <button onclick="go('home')">Powrót</button>
    </div>

    <div class="card">
      <h2 style="margin:0 0 10px;">Kontakt</h2>

      <p style="margin:0; color:var(--muted); line-height:1.85;">
        <strong style="color:var(--text)">Telefon:</strong> ${CONTACT.phone}<br/>
        <strong style="color:var(--text)">Adres:</strong> ${CONTACT.addr1}, ${CONTACT.addr2}<br/>
        <strong style="color:var(--text)">Godziny:</strong> …<br/>
      </p>

      <div style="margin-top:14px; padding-top:14px; border-top:1px solid var(--line);">
        <div style="display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;">
          <div style="color:var(--muted)">Mapa dojazdu</div>
          <a href="${CONTACT.mapsLink}" target="_blank" rel="noopener"
             style="color:var(--accent); text-decoration:none;">
            Otwórz w Google Maps →
          </a>
        </div>

        <div style="margin-top:10px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:rgba(0,0,0,.35);">
          <iframe
            src="${CONTACT.mapsEmbedSrc}"
            width="100%"
            height="320"
            style="border:0; display:block;"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            allowfullscreen>
          </iframe>
        </div>
      </div>
    </div>
  `;
}

async function renderBoat(boatId){
  const boat = BOATS.find(b=>b.id===boatId);
  if(!boat){ renderHome(); return; }

  setActiveNav("none");
  setActiveBoat(boatId);

  app.innerHTML = `
    <div class="backrow">
      <div style="color:var(--muted)">Galeria</div>
      <button onclick="go('home')">Powrót</button>
    </div>

    <div class="card">
      <div class="boat-head">
        <h2>${boat.name}</h2>
        <div class="meta">${boat.desc}</div>
      </div>
      <div style="margin-top:12px; color:var(--muted);">Ładuję zdjęcia…</div>
    </div>
  `;

  const media = await buildMediaList(boat);
  LB_MEDIA = media;

  let idx = 0;

  function mediaEl(m){
    if(!m){
      return `<div class="viewer-media" style="display:flex;align-items:center;justify-content:center;color:var(--muted);height:100%;">Brak zdjęć w folderze</div>`;
    }
    return `<img class="viewer-media" id="viewerMedia" src="${m.src}" alt="${boat.name}" />`;
  }

  function thumbsHtml(activeIndex){
    return media.map((m,i)=>{
      const isActive = i===activeIndex ? "active" : "";
      return `
        <div class="thumb ${isActive}" data-i="${i}" title="Zdjęcie">
          <img src="${m.src}" alt="">
        </div>
      `;
    }).join("");
  }

  function render(){
    app.innerHTML = `
      <div class="backrow">
        <div style="color:var(--muted)">Galeria</div>
        <button onclick="go('home')">Powrót</button>
      </div>

      <div class="card">
        <div class="boat-head">
          <h2>${boat.name}</h2>
          <div class="meta">${boat.desc}</div>
        </div>

        <div class="chips">
          ${(boat.chips||[]).map(x=>`<div class="chip">${x}</div>`).join("")}
        </div>

        <div class="gallery" style="margin-top:14px;">
          <div class="viewer" id="viewer">
            ${mediaEl(media[idx])}
            <button class="btn prev" aria-label="Poprzednie" id="prevBtn">‹</button>
            <button class="btn next" aria-label="Następne" id="nextBtn">›</button>
          </div>

          <div class="thumbs" id="thumbs">
            ${thumbsHtml(idx)}
          </div>
        </div>
      </div>
    `;

    $("#prevBtn").onclick = ()=>{ if(media.length){ idx = (idx - 1 + media.length) % media.length; render(); } };
    $("#nextBtn").onclick = ()=>{ if(media.length){ idx = (idx + 1) % media.length; render(); } };

    $("#thumbs").onclick = (e)=>{
      const t = e.target.closest(".thumb");
      if(!t) return;
      const i = Number(t.dataset.i);
      if(Number.isFinite(i)){ idx = i; render(); }
    };

    const vm = $("#viewerMedia");
    if(vm) vm.onclick = ()=> openLightbox(idx);

    window.onkeydown = (e)=>{
      if(lightbox.classList.contains("open")) return;
      if(!media.length) return;
      if(e.key === "ArrowLeft"){ idx = (idx - 1 + media.length) % media.length; render(); }
      if(e.key === "ArrowRight"){ idx = (idx + 1) % media.length; render(); }
    };
  }

  render();
  scrollToFrameIfMobile();
}

/* =========================
   ROUTING
   ========================= */
function go(view){
  if(view === "home") location.hash = "";
  else location.hash = "#" + view;
}

async function onRoute(){
  const hash = (location.hash || "").replace("#","").trim();
  if(!hash){ renderHome(); return; }

  if(hash === "oferta") { renderOferta(); scrollToFrameIfMobile(); return; }
  if(hash === "kontakt"){ renderKontakt(); scrollToFrameIfMobile(); return; }

  await renderBoat(hash);
}

/* =========================
   INIT
   ========================= */
$("#btnOferta").onclick = ()=> { go("oferta"); scrollToFrameIfMobile(); };
$("#btnKontakt").onclick = ()=> { go("kontakt"); scrollToFrameIfMobile(); };
$("#goHome").onclick = ()=> { go("home"); scrollToFrameIfMobile(); };
$("#goHome").onkeydown = (e)=>{ if(e.key==="Enter"){ go("home"); scrollToFrameIfMobile(); } };

buildMenu();
window.addEventListener("hashchange", ()=>{ onRoute(); });
onRoute();
</script>

</body>
</html>