{"id":98418,"date":"2026-11-08T16:23:17","date_gmt":"2026-11-08T15:23:17","guid":{"rendered":"https:\/\/balotade.com\/puzzle-black-friday-2\/"},"modified":"2026-11-08T18:34:16","modified_gmt":"2026-11-08T17:34:16","slug":"black-friday-slagalica","status":"publish","type":"page","link":"https:\/\/balotade.com\/hr\/black-friday-slagalica\/","title":{"rendered":"Puzzle Black Friday"},"content":{"rendered":"<style id=\"bpz-styl\">\n.bpz{--blekit:#0000FF;--blekit-ciemny:#0000c4;--czern:#000;--tekst:#333;--przygas:#777;\n --bialy:#fff;--tlo-przygas:#f5f6f9;--kreska:#e6e6e6;--ok:#0a8f4d;--blad:#c62828;\n --display:\"Lexend Deca\",Arial,Helvetica,sans-serif;--body:\"Open Sans\",Arial,Helvetica,sans-serif;\n font-family:var(--body);font-size:16px;line-height:1.6;color:var(--tekst);\n max-width:620px;margin:0 auto;padding-block:8px 40px}\n.bpz *{box-sizing:border-box}\n.bpz-app{display:flex;flex-direction:column;gap:32px}\n.bpz h1,.bpz h2,.bpz h3{font-family:var(--display);font-weight:700;line-height:1.12;margin:0;\n color:var(--czern);text-wrap:balance;letter-spacing:-.01em}\n.bpz h1{font-size:clamp(28px,7.4vw,40px)}\n.bpz h2{font-size:clamp(22px,5.2vw,28px)}\n.bpz h3{font-size:17px;font-weight:700}\n.bpz p{margin:0}\n.bpz a{color:var(--blekit)}\n.bpz b,.bpz strong{font-weight:700;color:var(--czern)}\n.bpz .eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blekit)}\n.bpz .lead{font-size:16.5px}\n.bpz .drobne{font-size:13px;color:var(--przygas);line-height:1.55}\n.bpz .stack{display:flex;flex-direction:column;gap:16px}\n.bpz hr{border:0;border-top:1px solid var(--kreska);margin:0}\n.bpz .pula{background:var(--blekit);color:#fff;padding:22px 20px;display:flex;gap:18px;align-items:center}\n.bpz .pula .cyfra{font-family:var(--display);font-weight:700;font-size:58px;line-height:.9;font-variant-numeric:tabular-nums}\n.bpz .pula .opis{font-size:14.5px;line-height:1.5}\n.bpz .pula .opis b{color:#fff}\n.bpz .kroki{list-style:none;padding:0;margin:0;border:1px solid var(--kreska)}\n.bpz .kroki li{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:15px 17px;\n border-bottom:1px solid var(--kreska);align-items:start}\n.bpz .kroki li:last-child{border-bottom:0}\n.bpz .kroki b{font-family:var(--display);font-weight:700;font-size:19px;color:var(--blekit);line-height:1.3}\n.bpz .kroki span{font-size:15.5px;color:var(--czern);font-weight:700}\n.bpz .kroki small{display:block;color:var(--przygas);font-size:13.5px;font-weight:400;margin-top:1px;line-height:1.5}\n.bpz form{display:flex;flex-direction:column;gap:15px}\n.bpz label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;\n letter-spacing:.04em;text-transform:uppercase;color:var(--czern)}\n.bpz input[type=text],.bpz input[type=email]{font:inherit;font-size:16px;font-weight:400;\n text-transform:none;letter-spacing:0;color:var(--czern);background:var(--bialy);\n border:1px solid #cfd2da;border-radius:0;padding:14px;width:100%}\n.bpz input[type=text]:focus,.bpz input[type=email]:focus{outline:none;border-color:var(--blekit);\n box-shadow:0 0 0 2px rgba(0,0,255,.2)}\n.bpz input[aria-invalid=true]{border-color:var(--blad)}\n.bpz .zgoda{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:13.5px;\n font-weight:400;letter-spacing:0;text-transform:none;color:var(--tekst);line-height:1.5}\n.bpz .zgoda input{width:22px;height:22px;margin:0;accent-color:var(--blekit);flex:none}\n.bpz .pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}\n.bpz .btn{font-family:var(--body);font-size:17px;font-weight:700;background:var(--blekit);\n color:#fff;border:0;border-radius:0;padding:16px 24px;cursor:pointer;width:100%;\n transition:background .15s;text-decoration:none;display:block;text-align:center;\n text-transform:none;letter-spacing:normal;line-height:1.3}\n.bpz .btn:hover{background:var(--blekit-ciemny);color:#fff}\n.bpz .btn:disabled{opacity:.5;cursor:default}\n.bpz .btn-ghost{background:var(--bialy);border:1px solid var(--czern);color:var(--czern);\n font-size:14px;padding:12px 18px;width:auto;display:inline-block}\n.bpz .btn-ghost:hover{background:var(--tlo-przygas);color:var(--czern)}\n.bpz .btn-czarny{background:var(--czern)}\n.bpz .btn-czarny:hover{background:#222}\n.bpz .blad{color:var(--blad);font-size:13.5px;font-weight:700}\n.bpz .postep{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}\n.bpz .etap{border:1px solid var(--kreska);background:var(--bialy);overflow:hidden;\n display:flex;flex-direction:column}\n.bpz .etap .foto{position:relative;display:block}\n.bpz .etap img{width:100%;aspect-ratio:2\/3;object-fit:cover;display:block;\n filter:grayscale(1);opacity:.45;transition:filter .2s,opacity .2s}\n.bpz .etap .plakietka{position:absolute;left:0;right:0;bottom:0;padding:5px 7px;font-size:11px;\n font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(0,0,0,.72);\n color:#fff;text-align:center}\n.bpz .etap .podpis{display:block;padding:8px 6px;font-size:11.5px;line-height:1.3;text-align:center;\n color:var(--przygas);border-top:1px solid var(--kreska);flex:1}\n.bpz .etap.teraz{box-shadow:0 0 0 2px var(--blekit)}\n.bpz .etap.teraz img,.bpz .etap.zrobione img{filter:none;opacity:1}\n.bpz .etap.teraz .plakietka{background:var(--blekit)}\n.bpz .etap.zrobione .plakietka{background:var(--ok)}\n.bpz .etap.teraz .podpis,.bpz .etap.zrobione .podpis{color:var(--czern);font-weight:700}\n.bpz .gra{display:flex;flex-direction:column;align-items:center;gap:14px}\n.bpz .pasek{display:flex;gap:10px;align-items:center;width:100%;max-width:380px;justify-content:center}\n.bpz .board{position:relative;width:min(100%,360px,calc(58vh * 2 \/ 3));aspect-ratio:2\/3;max-width:100%;\n display:grid;gap:3px;background:var(--kreska);border:1px solid var(--kreska);padding:3px;touch-action:none}\n.bpz .p{background-repeat:no-repeat;cursor:grab;touch-action:none;user-select:none;\n -webkit-user-select:none;position:relative;transition:box-shadow .15s,opacity .12s}\n.bpz .p.wybrany{box-shadow:0 0 0 3px var(--blekit) inset,0 0 0 2px var(--blekit)}\n.bpz .p.chwytany{opacity:.2}\n.bpz .p.cel{box-shadow:0 0 0 3px var(--blekit) inset}\n.bpz .board.ulozone .p{cursor:default}\n.bpz .podglad{position:absolute;inset:3px;background-size:cover;background-position:center;\n opacity:0;pointer-events:none;transition:opacity .18s}\n.bpz .board.podglad-on .podglad{opacity:1}\n.bpz .board.podglad-on .p{opacity:0}\n.bpz-duch{position:fixed;z-index:999999;pointer-events:none;background-repeat:no-repeat;\n box-shadow:0 12px 30px rgba(0,0,0,.4);outline:2px solid #0000FF}\n.bpz .karta{border:1px solid var(--kreska);padding:20px 18px;display:flex;flex-direction:column;\n gap:14px;background:var(--bialy)}\n.bpz .karta.ok{border-color:var(--ok);border-left-width:4px}\n.bpz .kod{font-family:var(--display);font-weight:700;font-size:clamp(28px,8.4vw,42px);\n letter-spacing:.08em;text-align:center;padding:20px 12px;border:2px dashed var(--blekit);\n color:var(--czern);background:var(--tlo-przygas);word-break:break-all}\n.bpz .pasek-pula{height:10px;background:var(--kreska);overflow:hidden}\n.bpz .pasek-pula i{display:block;height:100%;background:var(--blekit);transition:width .6s ease}\n.bpz .licznik-kod{margin-top:10px;padding:6px 8px;font-size:14px;color:var(--tekst);transition:background .3s}\n.bpz .licznik-kod b{font-family:var(--display);font-weight:700;font-size:22px;color:var(--blekit);\n font-variant-numeric:tabular-nums;margin-right:4px}\n.bpz .licznik-kod.blysk{animation:bpz-puls 1.2s ease}\n@keyframes bpz-puls{0%{background:rgba(0,0,255,.16)}100%{background:transparent}}\n.bpz .teaser{display:grid;grid-template-columns:104px 1fr;gap:15px;align-items:center;\n border:1px solid var(--kreska);padding:12px;background:var(--bialy)}\n.bpz .teaser p{margin:0;font-size:14px;line-height:1.45;color:var(--przygas)}\n.bpz .teaser b{display:block;color:var(--czern);font-size:15.5px;margin-bottom:2px}\n.bpz .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--kreska);\n border:1px solid var(--kreska);padding:2px;aspect-ratio:2\/3}\n.bpz .mini i{display:block;background-repeat:no-repeat}\n.bpz .licznik-osob{display:flex;align-items:center;gap:12px;border:1px solid var(--kreska);\n border-left:4px solid var(--blekit);padding:13px 15px;font-size:14px;line-height:1.45}\n.bpz .licznik-osob b{font-family:var(--display);font-weight:700;font-size:26px;color:var(--blekit);\n line-height:1;font-variant-numeric:tabular-nums;flex:none}\n.bpz .produkt-linia{font-size:13.5px;color:var(--przygas);text-align:center;line-height:1.5;max-width:380px}\n.bpz .produkt-linia b{color:var(--czern);font-weight:600}\n.bpz .produkt-linia a{white-space:nowrap}\n.bpz .rzad{display:flex;gap:10px;flex-wrap:wrap}\n.bpz .rzad>*{flex:1 1 180px;min-width:0}\n@media (prefers-reduced-motion:reduce){.bpz *{animation:none!important;transition:none!important}}\n<\/style>\n\t<div class=\"bpz\" id=\"bpz\"><div class=\"bpz-app\"><\/div><\/div><script id=\"bpz-konfig\" type=\"application\/json\">{\"rest\":\"https:\/\/balotade.com\/hr\/wp-json\/balotade-puzzle\/v1\",\"tryb\":\"gra\",\"lang\":\"hr\",\"t\":{\"eyebrow\":\"Black Friday \u00b7 Balotade\",\"h1\":\"Slo\u017ei tri slagalice,<br>uzmi najve\u0107i<br>popust u godini.\",\"lead\":\"Prijavi\u0161 se, slo\u017ei\u0161 tri fotografije, a {data} \u0161aljemo ti e-po\u0161tom kod za popust.\",\"data_maila\":\"u nedjelju 15. studenoga u 18:00\",\"f_btn\":\"Prijavi me i pokreni slagalicu\",\"c_sklep\":\"Idi u trgovinu\",\"osob\":\"ljudi ve\u0107 je slo\u017eilo sve tri fotografije i \u010deka kod. Kodova ima {pula} \u2014 u nedjelju odlu\u010duje brzina.\",\"pula_b\":\"Toliko puta kod \u0107e raditi.\",\"pula_o\":\"Trideset \u010detvrta osoba vidjet \u0107e samo poruku da su kodovi potro\u0161eni.\",\"k1\":\"Prijavi\u0161 se\",\"k1o\":\"Ime i e-po\u0161ta. Ni\u0161ta vi\u0161e nije potrebno.\",\"k2\":\"Slo\u017ei\u0161 tri fotografije\",\"k2o\":\"Svaka ima dvanaest dijelova. Sve tri \u2014 bez toga nema koda.\",\"k3\":\"\u010ceka\u0161 e-poruku\",\"k3o\":\"\u0160aljemo je {data}. Tko prvi do\u0111e, njegov je popust.\",\"f_imie\":\"Ime\",\"f_imie_ph\":\"Kako da te zovemo?\",\"f_email\":\"Adresa e-po\u0161te\",\"f_email_ph\":\"tvoja@adresa.hr\",\"f_zgoda\":\"\u017delim dobiti kod za popust i prijavljujem se na Balotade newsletter. Pristajem na primanje komercijalnih informacija na navedenu adresu e-po\u0161te. Privolu mogu povu\u0107i u svakom trenutku jednim klikom u podno\u017eju bilo koje poruke.\",\"f_polityka\":\"Pravila privatnosti\",\"f_btn_czekaj\":\"Spremamo\u2026\",\"f_regulamin\":\"Pravila akcije: {link}.\",\"f_reg_link\":\"Pravila\",\"e_imie\":\"Upi\u0161i ime \u2014 dovoljno je samo ime, bez prezimena.\",\"e_email\":\"Ova adresa e-po\u0161te izgleda nepotpuno. Provjeri je \u2014 na nju ide kod.\",\"e_zgoda\":\"Bez tvoje privole ne mo\u017eemo ti poslati poruku s kodom.\",\"e_ogolny\":\"Ne\u0161to je po\u0161lo po zlu. Poku\u0161aj ponovno.\",\"b_eyebrow\":\"Korak 2 od 3 \u00b7 Tri slagalice\",\"b_h2\":\"Na popisu si, {imie}.\",\"b_lead\":\"Ostale su slagalice. <b>Tri fotografije, svaka od dvanaest dijelova<\/b> \u2014 tek nakon tre\u0107e tvoja adresa ulazi na popis onih koji dobivaju kod.\",\"b_jak\":\"Kako se sla\u017ee\",\"b_jak_o\":\"Povuci jedan dio na drugi i zamijenit \u0107e mjesta. Na telefonu mo\u017ee\u0161 i dodirnuti dva dijela jedan za drugim. Gumb <b>Prika\u017ei predlo\u017eak<\/b> pokazuje cijelu fotografiju dok ga dr\u017ei\u0161.\",\"b_produkty\":\"Na fotografijama na\u0161i proizvodi: {lista}.\",\"b_start\":\"Kre\u0107emo \u2014 fotografija 1 od 3\",\"b_wracam\":\"Natrag na fotografiju {n} od 3\",\"g_eyebrow\":\"Fotografija {n} od 3 \u00b7 {nazwa}\",\"g_h2\":\"Slo\u017ei fotografiju.\",\"g_podglad\":\"Prika\u017ei predlo\u017eak\",\"g_zostalo\":\"Jo\u0161 {n} dijelova nije na mjestu.\",\"g_gotowe\":\"Gotovo!\",\"g_ulozone\":\"Slo\u017eeno.\",\"g_na_zdjeciu\":\"Na fotografiji: <b>{produkt}<\/b>\",\"g_zobacz\":\"pogledaj u trgovini\",\"m_eyebrow\":\"Slo\u017eeno {n} od 3\",\"m_h2_1\":\"Prva je gotova.\",\"m_h2_2\":\"Ostala je zadnja.\",\"m_lead_1\":\"Ostale su dvije fotografije. Bez \u017eurbe \u2014 sla\u017ei u miru.\",\"m_lead_2\":\"Jedna fotografija dijeli te od mjesta na popisu.\",\"m_btn\":\"Sla\u017eem fotografiju {n} od 3\",\"m_uwaga\":\"Ako sada ode\u0161, kod ne\u0107e sti\u0107i.\",\"w_eyebrow\":\"Korak 3 od 3 \u00b7 Kvalificiran\",\"w_h1\":\"Tri od tri.<br>U igri si.\",\"w_karta\":\"Sve tri slagalice su slo\u017eene. Tvoja adresa <b>{email}<\/b> nalazi se na popisu onih koji dobivaju kod.\",\"w_mail\":\"<b>Poruka kre\u0107e {data}.<\/b> Klikni na poveznicu \u010dim stigne \u2014 nakon {pula} iskori\u0161tenja kod prestaje raditi i nitko ne zna u koliko sati \u0107e to biti.\",\"w_spam\":\"Ako poruke nema u glavnom pretincu, pogledaj u Promocije i u ne\u017eeljenu po\u0161tu. Po\u0161iljatelj: Balotade &lt;kontakt@balotade.com&gt;.\",\"w_sklep\":\"Pogledaj trgovinu\",\"c_eyebrow\":\"Black Friday \u00b7 Tvoj kod\",\"c_h1\":\"{rabat} popusta.<br>Za prvih {pula} osoba.\",\"c_h1_bez\":\"Tvoj kod za popust.<br>Za prvih {pula} osoba.\",\"c_lead\":\"Upi\u0161i ovaj kod u ko\u0161aricu. Vrijedi na cijelu narud\u017ebu, bez minimalnog iznosa.\",\"c_kopiuj\":\"Kopiraj kod\",\"c_kopiuj_ok\":\"Kopirano\",\"c_kopiuj_recz\":\"Ozna\u010deno \u2014 kopiraj ru\u010dno\",\"c_licznik\":\"Ostalo <b>{n}<\/b> od {pula} iskori\u0161tenja\",\"c_odswiez\":\"Broja\u010d se osvje\u017eava svakih 10 sekundi.\",\"c_drobne\":\"Kod prestaje vrijediti nakon {pula} iskori\u0161tenja. Jedno po osobi, ne kombinira se s kodom BF2026 niti vrijedi na ve\u0107 sni\u017eenim proizvodima.\",\"c_reg\":\"Pravila akcije\",\"c_pusto_h1\":\"Kodovi su potro\u0161eni.\",\"c_pusto_lead\":\"{pula} osoba bilo je br\u017ee. Ovaj kod vi\u0161e ne radi \u2014 ali Black Friday s cijenama bez PDV-a traje do 27. studenoga.\",\"p_ulozone\":\"Slo\u017eeno\",\"p_ukladasz\":\"U tijeku\",\"p_czeka\":\"\u010ceka\",\"foto1\":\"Oglav Comfort\",\"foto2\":\"Uzda Diamant\",\"foto3\":\"Uzda Azur\",\"foto1_alt\":\"Konj s naran\u010dastim oglavom Balotade Comfort na snijegu\",\"foto2_alt\":\"\u017ddrijebe prvak s uzdom Balotade Diamant\",\"foto3_alt\":\"Ri\u0111an s uzdom Balotade Azur\"},\"foto\":[{\"src\":\"https:\/\/i0.wp.com\/balotade.com\/wp-content\/uploads\/2026\/11\/puzzle-bf-kantar-comfort.jpg?fit=900%2C1350&ssl=1\",\"krotka\":\"Oglav Comfort\",\"produkt\":\"Halter Balotade\u00ae Comfort\",\"url\":\"https:\/\/balotade.com\/hr\/halter-balotade-comfort\/\",\"alt\":\"Konj s naran\u010dastim oglavom Balotade Comfort na snijegu\"},{\"src\":\"https:\/\/i0.wp.com\/balotade.com\/wp-content\/uploads\/2026\/11\/puzzle-bf-oglowie-diamant.jpg?fit=899%2C1350&ssl=1\",\"krotka\":\"Uzda Diamant\",\"produkt\":\"Anatomska uzda s lakiranim nosnim remenom Balotade\u00ae Halifax\",\"url\":\"https:\/\/balotade.com\/hr\/anatomska-uzda-s-lakiranim-nosnim-remenom-balotade-halifax\/\",\"alt\":\"\u017ddrijebe prvak s uzdom Balotade Diamant\"},{\"src\":\"https:\/\/i0.wp.com\/balotade.com\/wp-content\/uploads\/2026\/11\/puzzle-bf-oglowie-azur.jpg?fit=900%2C1350&ssl=1\",\"krotka\":\"Uzda Azur\",\"produkt\":\"Anatomska uzda Balotade\u00ae Azur\",\"url\":\"https:\/\/balotade.com\/hr\/anatomska-uzda-balotade-azur\/\",\"alt\":\"Ri\u0111an s uzdom Balotade Azur\"}],\"kol\":3,\"wie\":4,\"pula\":33,\"podloga\":2,\"minPokaz\":20,\"kod\":\"PUZZLE33\",\"sklep\":\"https:\/\/balotade.com\/hr\/\",\"sklepLista\":\"https:\/\/balotade.com\/hr\/trgovina\/\",\"prywatnosc\":\"https:\/\/balotade.com\/hr\/pravila-o-zastiti-osobnih-podataka\/\",\"regulamin\":\"https:\/\/balotade.com\/hr\/pravila-puzzle-black-friday\/\",\"uczestnicy\":117,\"pozostalo\":33,\"czynny\":false,\"rabat\":\"\"}<\/script><script id=\"bpz-skrypt\">\n(function(){\n  var K = JSON.parse(document.getElementById(\"bpz-konfig\").textContent);\n  var T = K.t || {};\n  var app = document.querySelector(\"#bpz .bpz-app\");\n  if (!app || !K.foto.length) { return; }\n\n  var stan = { ekran: (K.tryb === \"kod\" ? \"kod\" : \"start\"), imie:\"\", email:\"\", token:\"\",\n               etap:0, pozostalo:K.pozostalo, czynny:K.czynny, rabat:K.rabat, blysk:false };\n\n  function esc(s){ return String(s).replace(\/[&<>\"']\/g, function(c){\n    return {\"&\":\"&amp;\",\"<\":\"&lt;\",\">\":\"&gt;\",'\"':\"&quot;\",\"'\":\"&#39;\"}[c]; }); }\n\n  \/** Podstawia {klucz} w tekscie ze slownika. *\/\n  function t(klucz, dane){\n    var s = T[klucz] != null ? T[klucz] : \"\";\n    if (!dane) { return s; }\n    return s.replace(\/\\{(\\w+)\\}\/g, function(_, k){ return dane[k] != null ? dane[k] : \"\"; });\n  }\n\n  function wyslij(sciezka, dane){\n    return fetch(K.rest + sciezka, {\n      method:\"POST\", headers:{\"Content-Type\":\"application\/json\"},\n      body: JSON.stringify(dane), credentials:\"omit\"\n    }).then(function(r){ return r.json().then(function(j){ return {ok:r.ok, dane:j}; }); });\n  }\n\n  function nagora(){\n    var box = document.getElementById(\"bpz\");\n    if (box) { window.scrollTo({ top: box.getBoundingClientRect().top + window.pageYOffset - 20, behavior:\"smooth\" }); }\n  }\n\n  function render(){\n    if (stan.ekran === \"kod\")    { return ekranKod(); }\n    if (stan.ekran === \"start\")  { return ekranStart(); }\n    if (stan.ekran === \"brama\")  { return ekranBrama(); }\n    if (stan.ekran === \"gra\")    { return ekranGra(); }\n    if (stan.ekran === \"miedzy\") { return ekranMiedzy(); }\n    if (stan.ekran === \"gotowe\") { return ekranGotowe(); }\n  }\n\n  \/** Zapowiedz planszy \u2014 zdjecie 1 pociete na kafelki, zeby bylo widac, na czym polega gra. *\/\n  function podgladPlanszy(){\n    var f = K.foto[0];\n    if (!f) { return \"\"; }\n    var n = K.kol * K.wie, kafle = \"\", i, kol, wie;\n    for (i = 0; i < n; i++){\n      kol = i % K.kol; wie = Math.floor(i \/ K.kol);\n      kafle += '<i style=\"background-image:url(\\''+f.src+'\\');background-size:'+(K.kol*100)+'% '+(K.wie*100)+'%;'+\n        'background-position:'+(kol*100\/(K.kol-1))+'% '+(wie*100\/(K.wie-1))+'%\"><\/i>';\n    }\n    return '<div class=\"teaser\"><div class=\"mini\" aria-hidden=\"true\">'+kafle+'<\/div>'+\n      '<p><b>'+t(\"k2\")+'<\/b>'+t(\"k2o\")+'<\/p><\/div>';\n  }\n\n  function licznikOsob(){\n    if (K.uczestnicy < K.minPokaz) { return \"\"; }\n    return '<div class=\"licznik-osob\"><b>'+K.uczestnicy+'<\/b><span>'+\n      t(\"osob\", {pula:K.pula})+'<\/span><\/div>';\n  }\n\n  function ekranStart(){\n    app.innerHTML =\n    '<div class=\"stack\">'+\n      '<p class=\"eyebrow\">'+t(\"eyebrow\")+'<\/p>'+\n      '<h1>'+t(\"h1\")+'<\/h1>'+\n      '<p class=\"lead\">'+t(\"lead\", {data:t(\"data_maila\")})+'<\/p>'+\n    '<\/div>'+\n    podgladPlanszy()+\n    licznikOsob()+\n    '<form id=\"bpz-f\" novalidate>'+\n      '<label for=\"bpz-imie\">'+t(\"f_imie\")+'<input id=\"bpz-imie\" name=\"imie\" type=\"text\" '+\n        'autocomplete=\"given-name\" placeholder=\"'+esc(t(\"f_imie_ph\"))+'\" value=\"'+esc(stan.imie)+'\"><\/label>'+\n      '<label for=\"bpz-email\">'+t(\"f_email\")+'<input id=\"bpz-email\" name=\"email\" type=\"email\" '+\n        'autocomplete=\"email\" inputmode=\"email\" placeholder=\"'+esc(t(\"f_email_ph\"))+'\" value=\"'+esc(stan.email)+'\"><\/label>'+\n      '<div class=\"pulapka\" aria-hidden=\"true\"><label>Strona<input type=\"text\" name=\"strona\" tabindex=\"-1\" autocomplete=\"off\"><\/label><\/div>'+\n      '<label class=\"zgoda\" for=\"bpz-zgoda\"><input id=\"bpz-zgoda\" name=\"zgoda\" type=\"checkbox\">'+\n        '<span>'+t(\"f_zgoda\")+' <a href=\"'+K.prywatnosc+'\" target=\"_blank\" rel=\"noopener\">'+\n        t(\"f_polityka\")+'<\/a>.<\/span><\/label>'+\n      '<p class=\"blad\" id=\"bpz-blad\" role=\"alert\"><\/p>'+\n      '<button class=\"btn\" type=\"submit\" id=\"bpz-wyslij\">'+t(\"f_btn\")+'<\/button>'+\n      '<p class=\"drobne\">'+t(\"f_regulamin\", {link:'<a href=\"'+K.regulamin+'\" target=\"_blank\" rel=\"noopener\">'+t(\"f_reg_link\")+'<\/a>'})+'<\/p>'+\n    '<\/form>'+\n    '<div class=\"pula\"><span class=\"cyfra\">'+K.pula+'<\/span>'+\n      '<span class=\"opis\"><b>'+t(\"pula_b\")+'<\/b> '+t(\"pula_o\")+'<\/span><\/div>'+\n    '<ol class=\"kroki\">'+\n      '<li><b>1<\/b><span>'+t(\"k1\")+'<small>'+t(\"k1o\")+'<\/small><\/span><\/li>'+\n      '<li><b>2<\/b><span>'+t(\"k2\")+'<small>'+t(\"k2o\")+'<\/small><\/span><\/li>'+\n      '<li><b>3<\/b><span>'+t(\"k3\")+'<small>'+t(\"k3o\", {data:t(\"data_maila\")})+'<\/small><\/span><\/li>'+\n    '<\/ol>';\n\n    var f = document.getElementById(\"bpz-f\");\n    f.addEventListener(\"submit\", function(e){\n      e.preventDefault();\n      var imie = f.imie.value.trim(), email = f.email.value.trim(), zgoda = f.zgoda.checked;\n      var b = document.getElementById(\"bpz-blad\");\n      f.imie.setAttribute(\"aria-invalid\",\"false\"); f.email.setAttribute(\"aria-invalid\",\"false\");\n      if (imie.length < 2){ b.textContent = t(\"e_imie\"); f.imie.setAttribute(\"aria-invalid\",\"true\"); f.imie.focus(); return; }\n      if (!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/.test(email)){ b.textContent = t(\"e_email\"); f.email.setAttribute(\"aria-invalid\",\"true\"); f.email.focus(); return; }\n      if (!zgoda){ b.textContent = t(\"e_zgoda\"); f.zgoda.focus(); return; }\n      b.textContent = \"\";\n      var btn = document.getElementById(\"bpz-wyslij\");\n      btn.disabled = true; btn.textContent = t(\"f_btn_czekaj\");\n      wyslij(\"\/zapis\", { imie:imie, email:email, zgoda:true, strona:f.strona.value, lang:K.lang })\n        .then(function(w){\n          if (!w.ok){ throw new Error(w.dane && w.dane.blad ? w.dane.blad : t(\"e_ogolny\")); }\n          stan.imie = w.dane.imie || imie; stan.email = email;\n          stan.token = w.dane.token; stan.etap = w.dane.etapy || 0;\n          stan.ekran = (stan.etap >= K.foto.length) ? \"gotowe\" : \"brama\";\n          render(); nagora();\n        })\n        .catch(function(err){\n          btn.disabled = false; btn.textContent = t(\"f_btn\");\n          b.textContent = err.message || t(\"e_ogolny\");\n        });\n    });\n  }\n\n  function pasekEtapow(){\n    return '<div class=\"postep\">'+ K.foto.map(function(f,i){\n      var klasa = i < stan.etap ? \"zrobione\" : (i === stan.etap ? \"teraz\" : \"\");\n      var txt   = i < stan.etap ? t(\"p_ulozone\") : (i === stan.etap ? t(\"p_ukladasz\") : t(\"p_czeka\"));\n      return '<div class=\"etap '+klasa+'\"><span class=\"foto\">'+\n             '<img decoding=\"async\" src=\"'+f.src+'\" alt=\"'+esc(f.alt)+'\" loading=\"lazy\">'+\n             '<span class=\"plakietka\">'+txt+'<\/span><\/span>'+\n             '<span class=\"podpis\">'+esc(f.krotka)+'<\/span><\/div>';\n    }).join(\"\") + '<\/div>';\n  }\n\n  function ekranBrama(){\n    var lista = K.foto.map(function(f){\n      return '<a href=\"'+f.url+'\" target=\"_blank\" rel=\"noopener\">'+esc(f.produkt)+'<\/a>'; }).join(\", \");\n    app.innerHTML =\n    '<div class=\"stack\">'+\n      '<p class=\"eyebrow\">'+t(\"b_eyebrow\")+'<\/p>'+\n      '<h2>'+t(\"b_h2\", {imie:esc(stan.imie)})+'<\/h2>'+\n      '<p class=\"lead\">'+t(\"b_lead\")+'<\/p>'+\n    '<\/div>'+\n    pasekEtapow()+\n    '<div class=\"karta\">'+\n      '<h3>'+t(\"b_jak\")+'<\/h3>'+\n      '<p style=\"font-size:15px\">'+t(\"b_jak_o\")+'<\/p>'+\n      '<hr><p class=\"drobne\">'+t(\"b_produkty\", {lista:lista})+'<\/p>'+\n    '<\/div>'+\n    '<button class=\"btn\" type=\"button\" id=\"bpz-dalej\">'+\n      (stan.etap ? t(\"b_wracam\", {n:stan.etap+1}) : t(\"b_start\"))+'<\/button>';\n    document.getElementById(\"bpz-dalej\").addEventListener(\"click\", function(){\n      stan.ekran = \"gra\"; render(); nagora();\n    });\n  }\n\n  var uklad = [], zablokowane = false, wybrany = -1;\n\n  function tasuj(n){\n    var a = [], i, j, k, x, proby = 0;\n    for (i = 0; i < n; i++) { a.push(i); }\n    do {\n      for (j = a.length - 1; j > 0; j--) { k = Math.floor(Math.random()*(j+1)); x = a[j]; a[j] = a[k]; a[k] = x; }\n      proby++;\n    } while (proby < 40 && a.filter(function(v,idx){ return v === idx; }).length > 2);\n    return a;\n  }\n\n  function tlo(el, idx, szer, wys){\n    var kol = idx % K.kol, wie = Math.floor(idx \/ K.kol);\n    el.style.backgroundImage = \"url('\"+K.foto[stan.etap].src+\"')\";\n    el.style.backgroundSize = (K.kol*100)+\"% \"+(K.wie*100)+\"%\";\n    el.style.backgroundPosition = (kol*(100\/(K.kol-1)))+\"% \"+(wie*(100\/(K.wie-1)))+\"%\";\n    if (szer) { el.style.width = szer+\"px\"; el.style.height = wys+\"px\"; }\n  }\n\n  function ekranGra(){\n    var n = K.kol*K.wie, f = K.foto[stan.etap], p;\n    uklad = tasuj(n); zablokowane = false; wybrany = -1;\n\n    app.innerHTML =\n    '<div class=\"stack\">'+\n      '<p class=\"eyebrow\">'+t(\"g_eyebrow\", {n:stan.etap+1, nazwa:esc(f.krotka)})+'<\/p>'+\n      '<h2>'+t(\"g_h2\")+'<\/h2>'+\n    '<\/div>'+\n    pasekEtapow()+\n    '<div class=\"gra\">'+\n      '<div class=\"pasek\"><button class=\"btn btn-ghost\" type=\"button\" id=\"bpz-podglad\">'+t(\"g_podglad\")+'<\/button><\/div>'+\n      '<div class=\"board\" id=\"bpz-board\" style=\"grid-template-columns:repeat('+K.kol+',1fr);grid-template-rows:repeat('+K.wie+',1fr)\">'+\n        '<div class=\"podglad\" id=\"bpz-warstwa\"><\/div><\/div>'+\n      '<p class=\"drobne\" id=\"bpz-komunikat\">'+t(\"g_zostalo\", {n:n})+'<\/p>'+\n      '<p class=\"produkt-linia\">'+t(\"g_na_zdjeciu\", {produkt:esc(f.produkt)})+' '+\n        '<a href=\"'+f.url+'\" target=\"_blank\" rel=\"noopener\">'+t(\"g_zobacz\")+'<\/a><\/p>'+\n    '<\/div>';\n\n    var board = document.getElementById(\"bpz-board\");\n    document.getElementById(\"bpz-warstwa\").style.backgroundImage = \"url('\"+f.src+\"')\";\n    for (p = 0; p < n; p++){\n      var el = document.createElement(\"div\");\n      el.className = \"p\"; el.dataset.poz = p; el.tabIndex = 0; el.setAttribute(\"role\",\"button\");\n      board.appendChild(el);\n    }\n    rysuj();\n    sterowanie(board);\n    var pod = document.getElementById(\"bpz-podglad\");\n    pod.addEventListener(\"pointerdown\", function(){ board.classList.add(\"podglad-on\"); });\n    [\"pointerup\",\"pointerleave\",\"pointercancel\",\"blur\"].forEach(function(e){\n      pod.addEventListener(e, function(){ board.classList.remove(\"podglad-on\"); });\n    });\n  }\n\n  function rysuj(){\n    var kafelki = app.querySelectorAll(\".p\");\n    Array.prototype.forEach.call(kafelki, function(el, poz){\n      tlo(el, uklad[poz]);\n      el.classList.toggle(\"wybrany\", poz === wybrany);\n    });\n    var zle = uklad.filter(function(v,i){ return v !== i; }).length;\n    var kom = document.getElementById(\"bpz-komunikat\");\n    if (kom && !zablokowane) { kom.textContent = zle === 0 ? t(\"g_gotowe\") : t(\"g_zostalo\", {n:zle}); }\n  }\n\n  function zamien(a,b){\n    if (a === b || zablokowane) { return; }\n    var x = uklad[a]; uklad[a] = uklad[b]; uklad[b] = x;\n    wybrany = -1;\n    rysuj();\n    sprawdz();\n  }\n\n  function sprawdz(){\n    for (var i = 0; i < uklad.length; i++){ if (uklad[i] !== i) { return; } }\n    zablokowane = true;\n    var board = document.getElementById(\"bpz-board\");\n    board.classList.add(\"ulozone\"); board.style.gap = \"0px\";\n    document.getElementById(\"bpz-komunikat\").textContent = t(\"g_ulozone\");\n    wyslij(\"\/etap\", { token: stan.token }).then(function(w){\n      if (w.ok && w.dane){ stan.etap = w.dane.etapy; K.uczestnicy = w.dane.uczestnicy; }\n      else { stan.etap = Math.min(K.foto.length, stan.etap + 1); }\n    }).catch(function(){\n      stan.etap = Math.min(K.foto.length, stan.etap + 1);\n    }).then(function(){\n      setTimeout(function(){\n        stan.ekran = (stan.etap >= K.foto.length) ? \"gotowe\" : \"miedzy\";\n        render(); nagora();\n      }, 900);\n    });\n  }\n\n  function sterowanie(board){\n    var duch = null, zrodlo = -1, ruszony = false, sx = 0, sy = 0, ostatni = null;\n    board.addEventListener(\"pointerdown\", function(e){\n      var el = e.target.closest(\".p\"); if (!el || zablokowane) { return; }\n      zrodlo = +el.dataset.poz; ruszony = false; sx = e.clientX; sy = e.clientY;\n      board.setPointerCapture(e.pointerId);\n    });\n    board.addEventListener(\"pointermove\", function(e){\n      if (zrodlo < 0) { return; }\n      if (!ruszony && Math.hypot(e.clientX - sx, e.clientY - sy) < 9) { return; }\n      if (!ruszony){\n        ruszony = true;\n        var el = board.querySelector('.p[data-poz=\"'+zrodlo+'\"]');\n        var r = el.getBoundingClientRect();\n        duch = document.createElement(\"div\");\n        duch.className = \"bpz-duch\";\n        tlo(duch, uklad[zrodlo], r.width, r.height);\n        duch.dataset.w = r.width; duch.dataset.h = r.height;\n        document.body.appendChild(duch);\n        el.classList.add(\"chwytany\");\n      }\n      duch.style.left = (e.clientX - duch.dataset.w\/2)+\"px\";\n      duch.style.top  = (e.clientY - duch.dataset.h\/2)+\"px\";\n      var podSpodem = document.elementFromPoint(e.clientX, e.clientY);\n      var cel = podSpodem && podSpodem.closest ? podSpodem.closest(\".p\") : null;\n      if (ostatni && ostatni !== cel) { ostatni.classList.remove(\"cel\"); }\n      if (cel && +cel.dataset.poz !== zrodlo){ cel.classList.add(\"cel\"); ostatni = cel; }\n    });\n    board.addEventListener(\"pointerup\", function(e){\n      if (zrodlo < 0) { return; }\n      var z = zrodlo; zrodlo = -1;\n      if (ostatni) { ostatni.classList.remove(\"cel\"); }\n      var el = board.querySelector('.p[data-poz=\"'+z+'\"]');\n      if (el) { el.classList.remove(\"chwytany\"); }\n      if (ruszony){\n        var podSpodem = document.elementFromPoint(e.clientX, e.clientY);\n        var cel = podSpodem && podSpodem.closest ? podSpodem.closest(\".p\") : null;\n        if (duch){ duch.remove(); duch = null; }\n        ostatni = null;\n        if (cel) { zamien(z, +cel.dataset.poz); } else { rysuj(); }\n      } else {\n        if (wybrany === -1){ wybrany = z; rysuj(); }\n        else if (wybrany === z){ wybrany = -1; rysuj(); }\n        else { zamien(wybrany, z); }\n      }\n    });\n    board.addEventListener(\"pointercancel\", function(){\n      if (duch){ duch.remove(); duch = null; }\n      if (ostatni){ ostatni.classList.remove(\"cel\"); ostatni = null; }\n      var el = board.querySelector(\".p.chwytany\"); if (el) { el.classList.remove(\"chwytany\"); }\n      zrodlo = -1;\n    });\n    board.addEventListener(\"keydown\", function(e){\n      var el = e.target.closest(\".p\"); if (!el || zablokowane) { return; }\n      if (e.key === \"Enter\" || e.key === \" \"){\n        e.preventDefault();\n        var p = +el.dataset.poz;\n        if (wybrany === -1){ wybrany = p; rysuj(); }\n        else if (wybrany === p){ wybrany = -1; rysuj(); }\n        else { zamien(wybrany, p); }\n      }\n    });\n  }\n\n  function ekranMiedzy(){\n    app.innerHTML =\n    '<div class=\"stack\">'+\n      '<p class=\"eyebrow\">'+t(\"m_eyebrow\", {n:stan.etap})+'<\/p>'+\n      '<h2>'+(stan.etap === 1 ? t(\"m_h2_1\") : t(\"m_h2_2\"))+'<\/h2>'+\n      '<p class=\"lead\">'+(stan.etap === 1 ? t(\"m_lead_1\") : t(\"m_lead_2\"))+'<\/p>'+\n    '<\/div>'+\n    pasekEtapow()+\n    '<button class=\"btn\" type=\"button\" id=\"bpz-dalej\">'+t(\"m_btn\", {n:stan.etap+1})+'<\/button>'+\n    '<p class=\"drobne\">'+t(\"m_uwaga\")+'<\/p>';\n    document.getElementById(\"bpz-dalej\").addEventListener(\"click\", function(){\n      stan.ekran = \"gra\"; render(); nagora();\n    });\n  }\n\n  function ekranGotowe(){\n    app.innerHTML =\n    '<div class=\"stack\">'+\n      '<p class=\"eyebrow\">'+t(\"w_eyebrow\")+'<\/p>'+\n      '<h1>'+t(\"w_h1\")+'<\/h1>'+\n    '<\/div>'+\n    pasekEtapow()+\n    '<div class=\"karta ok\">'+\n      '<p style=\"font-size:16px\">'+t(\"w_karta\", {email:esc(stan.email)})+'<\/p>'+\n      '<hr>'+\n      '<p style=\"font-size:15px\">'+t(\"w_mail\", {data:t(\"data_maila\"), pula:K.pula})+'<\/p>'+\n      '<p class=\"drobne\">'+t(\"w_spam\")+'<\/p>'+\n    '<\/div>'+\n    '<a class=\"btn\" href=\"'+K.sklep+'\">'+t(\"w_sklep\")+'<\/a>';\n  }\n\n  function ekranKod(){\n    var zostalo = Math.max(K.podloga, stan.pozostalo);\n    if (!stan.czynny){\n      app.innerHTML =\n      '<div class=\"stack\">'+\n        '<p class=\"eyebrow\">'+t(\"c_eyebrow\")+'<\/p>'+\n        '<h1>'+t(\"c_pusto_h1\")+'<\/h1>'+\n        '<p class=\"lead\">'+t(\"c_pusto_lead\", {pula:K.pula})+'<\/p>'+\n      '<\/div>'+\n      '<a class=\"btn btn-czarny\" href=\"'+K.sklepLista+'\">'+t(\"c_sklep\")+'<\/a>';\n      return;\n    }\n    app.innerHTML =\n    '<div class=\"stack\">'+\n      '<p class=\"eyebrow\">'+t(\"c_eyebrow\")+'<\/p>'+\n      '<h1>'+(stan.rabat ? t(\"c_h1\", {rabat:esc(stan.rabat), pula:K.pula}) : t(\"c_h1_bez\", {pula:K.pula}))+'<\/h1>'+\n      '<p class=\"lead\">'+t(\"c_lead\")+'<\/p>'+\n    '<\/div>'+\n    '<div class=\"karta\">'+\n      '<div class=\"kod\" id=\"bpz-kodtxt\">'+esc(K.kod)+'<\/div>'+\n      '<button class=\"btn\" type=\"button\" id=\"bpz-kopiuj\">'+t(\"c_kopiuj\")+'<\/button>'+\n      '<div>'+\n        '<div class=\"pasek-pula\"><i style=\"width:'+(zostalo\/K.pula*100)+'%\"><\/i><\/div>'+\n        '<p class=\"licznik-kod'+(stan.blysk ? ' blysk' : '')+'\">'+t(\"c_licznik\", {n:zostalo, pula:K.pula})+'<\/p>'+\n        '<p class=\"drobne\">'+t(\"c_odswiez\")+'<\/p>'+\n      '<\/div>'+\n      '<hr>'+\n      '<p class=\"drobne\">'+t(\"c_drobne\", {pula:K.pula})+' '+\n        '<a href=\"'+K.regulamin+'\" target=\"_blank\" rel=\"noopener\">'+t(\"c_reg\")+'<\/a>.<\/p>'+\n    '<\/div>'+\n    '<a class=\"btn btn-czarny\" href=\"'+K.sklepLista+'\">'+t(\"c_sklep\")+'<\/a>';\n\n    var kop = document.getElementById(\"bpz-kopiuj\");\n    kop.addEventListener(\"click\", function(){\n      navigator.clipboard.writeText(K.kod).then(function(){\n        kop.textContent = t(\"c_kopiuj_ok\");\n        setTimeout(function(){ kop.textContent = t(\"c_kopiuj\"); }, 1800);\n      }).catch(function(){\n        var r = document.createRange(); r.selectNode(document.getElementById(\"bpz-kodtxt\"));\n        window.getSelection().removeAllRanges(); window.getSelection().addRange(r);\n        kop.textContent = t(\"c_kopiuj_recz\");\n      });\n    });\n  }\n\n  \/** Czy ktos wlasnie wypelnia formularz \u2014 wtedy NIE przerysowujemy ekranu. *\/\n  function pisze(){\n    var f = document.getElementById(\"bpz-f\");\n    if (!f) { return false; }\n    if (f.contains(document.activeElement)) { return true; }\n    return !!(f.imie.value || f.email.value || f.zgoda.checked);\n  }\n\n  function odswiezStan(){\n    fetch(K.rest + \"\/stan\", { credentials:\"omit\" })\n      .then(function(r){ return r.json(); })\n      .then(function(d){\n        if (typeof d.pozostalo !== \"number\") { return; }\n        var zmiana = (d.pozostalo !== stan.pozostalo) || (d.czynny !== stan.czynny) || (d.rabat !== stan.rabat);\n        if (typeof d.uczestnicy === \"number\" && d.uczestnicy !== K.uczestnicy){\n          K.uczestnicy = d.uczestnicy; zmiana = true;\n        }\n        stan.pozostalo = d.pozostalo; stan.czynny = d.czynny; stan.rabat = d.rabat || \"\";\n        if (zmiana && !pisze()){\n          stan.blysk = true; render();\n          setTimeout(function(){ stan.blysk = false; }, 1300);\n        }\n      }).catch(function(){});\n  }\n\n  \/\/ Strona bywa serwowana z cache'u, wiec liczby wpieczone w konfig potrafia byc sprzed startu\n  \/\/ akcji (licznik uczestnikow pokazywal 0 przy 70 ulozonych). Prawdziwy stan dociagamy z REST\n  \/\/ po wczytaniu \u2014 na stronie kodu dodatkowo co 10 s.\n  odswiezStan();\n  if (K.tryb === \"kod\"){\n    setInterval(odswiezStan, 10000);\n  }\n\n  render();\n})();\n<\/script>\n\t\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":16308,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-98418","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/balotade.com\/hr\/wp-json\/wp\/v2\/pages\/98418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/balotade.com\/hr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/balotade.com\/hr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/balotade.com\/hr\/wp-json\/wp\/v2\/users\/16308"}],"replies":[{"embeddable":true,"href":"https:\/\/balotade.com\/hr\/wp-json\/wp\/v2\/comments?post=98418"}],"version-history":[{"count":1,"href":"https:\/\/balotade.com\/hr\/wp-json\/wp\/v2\/pages\/98418\/revisions"}],"predecessor-version":[{"id":98459,"href":"https:\/\/balotade.com\/hr\/wp-json\/wp\/v2\/pages\/98418\/revisions\/98459"}],"wp:attachment":[{"href":"https:\/\/balotade.com\/hr\/wp-json\/wp\/v2\/media?parent=98418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}