Test \u015awiadomo\u015bci \u2014 Human Design Daria Mas\u0142owska<\/title>\n <style>\n \/* --- G\u0142\u00f3wne style (mo\u017cesz je nadpisa\u0107 w Elementorze) --- *\/\n :root{\n --accent:#E48C52;\n --btn:#FEE000;\n --bg:#F7F3EE;\n --card:#FFFFFF;\n --text:#3B2F2F;\n --muted:#9B8F7F;\n font-family: 'Lato', 'Montserrat', 'Raleway', sans-serif;\n }\n body{background:linear-gradient(180deg,#fff 0%, #FBF9F6 100%);color:var(--text);margin:0;padding:0}\n .container{max-width:1100px;margin:36px auto;padding:28px}\n\n .hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}\n .hero h1{color:var(--accent);font-size:34px;margin:0 0 10px}\n .hero p.lead{font-size:18px;margin:0 0 18px;color:var(--text)}\n\n .card{background:var(--card);border:1px solid #EDE0D4;border-radius:12px;padding:22px;box-shadow:0 6px 20px rgba(0,0,0,0.03)}\n\n .cta-row{display:flex;gap:12px;align-items:center}\n .btn-primary{background:var(--btn);border:none;padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer}\n .btn-primary:hover{background:var(--accent);color:#fff}\n\n .explain{margin-top:18px;line-height:1.5}\n\n \/* Formularz danych (kopiowalne, mo\u017cesz u\u017cy\u0107 swojego) *\/\n #hd-prod-widget{max-width:900px;margin:26px auto;background:var(--card);border:1px solid #EDE0D4;border-radius:12px;padding:28px}\n #hd-prod-widget h2{text-align:center;color:var(--accent);font-size:26px;margin-bottom:14px}\n #hd-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}\n #hd-form label{display:block;margin-bottom:6px;font-weight:600}\n #hd-form input,#hd-form select{width:100%;padding:10px;border-radius:8px;border:1px solid #EDE0D4;background:var(--bg)}\n #hd-form button{grid-column:1 \/ -1;justify-self:center;background:var(--btn);border:none;padding:12px 20px;border-radius:10px;font-weight:700;cursor:pointer}\n #hd-form button:hover{background:var(--accent);color:#fff}\n #hd_status{margin-top:12px;color:var(--muted);text-align:center}\n pre#hd_result{background:#f6f6f6;padding:10px;border-radius:8px;overflow:auto}\n\n \/* obszar wykresu *\/\n #hd-display-area{margin-top:18px}\n\n \/* responsywno\u015b\u0107 *\/\n @media (max-width:900px){.hero{grid-template-columns:1fr}}\n\n \/* miejsca na Twoje obrazy *\/\n .image-placeholder{width:100%;height:220px;border-radius:10px;background:linear-gradient(90deg,#fff,#F7F3EE);display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px dashed #EDE0D4}\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"hero\">\n <div>\n <h1>Test \u015awiadomo\u015bci \u2014 sprawd\u017a sw\u00f3j poziom \u015bwiadomo\u015bci (oparty o Tw\u00f3j Human Design)<\/h1>\n <p class=\"lead\">Ten test nie jest og\u00f3lnym quizem \u2014 jest zsynchronizowany z Twoim unikatowym wykresem Human Design. Otrzymasz pytania dopasowane do Twoich energetycznych przewag i wyzwa\u0144, a nie uniwersalny zestaw pyta\u0144 dla wszystkich.<\/p>\n\n <div class=\"card explain\">\n <p>Dlaczego warto? Bo ka\u017cdy z nas ma inne zasoby, inne archetypy i inn\u0105 konfiguracj\u0119 energetyczn\u0105 \u2014 ten test bierze to pod uwag\u0119. Dzi\u0119ki temu otrzymujesz konkretne wskaz\u00f3wki, kt\u00f3re s\u0105 <strong>skrojone na miar\u0119<\/strong> Twojego projektu.<\/p>\n\n <ul>\n <li>Test liczy 64 pyta\u0144 \u2014 ka\u017cde pytanie powi\u0105zane jest z jednym kluczem genowym (Gate).<\/li>\n <li>Po wpisaniu danych generujemy Tw\u00f3j wykres HD (w tle) \u2014 na jego podstawie wybieramy tylko te pytania, kt\u00f3re dotycz\u0105 Twojego wykresu.<\/li>\n <li>Wyniki mo\u017cesz zapisa\u0107, otrzyma\u0107 wykres w formie obrazu oraz pobra\u0107 raport.<\/li>\n <\/ul>\n\n <div style=\"margin-top:12px\" class=\"cta-row\">\n <button class=\"btn-primary\" id=\"scrollToForm\">Wype\u0142nij test teraz \u2014 sprawd\u017a sw\u00f3j poziom \u015bwiadomo\u015bci<\/button>\n <button class=\"btn-primary\" id=\"openTypeform\">Rozwi\u0105\u017c quiz (Typeform) \u2014 przyk\u0142ad<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div>\n \n <div class=\"image-placeholder card\">Tu mo\u017cesz wstawi\u0107 grafik\u0119 promocyjn\u0105<\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"hd-prod-widget\" class=\"card\" style=\"margin-top:28px\">\n <h2>Wygeneruj darmowy wykres Human Design i rozpocznij test<\/h2>\n\n <form id=\"hd-form\">\n <div>\n <label for=\"hd_name\">Imi\u0119<\/label>\n <input id=\"hd_name\" name=\"name\" placeholder=\"np. Daria\" required \/>\n <\/div>\n\n <div>\n <label for=\"hd_email\">E-mail<\/label>\n <input id=\"hd_email\" name=\"email\" type=\"email\" placeholder=\"np. daria@email.com\" required \/>\n <\/div>\n\n <div>\n <label for=\"hd_date\">Data urodzenia<\/label>\n <input id=\"hd_date\" name=\"date\" type=\"date\" required \/>\n <\/div>\n\n <div>\n <label for=\"hd_time\">Godzina urodzenia<\/label>\n <input id=\"hd_time\" name=\"time\" type=\"time\" required \/>\n <\/div>\n\n <div>\n <label for=\"hd_country\">Kraj<\/label>\n <select id=\"hd_country\" name=\"country\" required>\n <option value=\"\">-- Wybierz kraj --<\/option>\n <option value=\"Poland\">Polska<\/option>\n <option value=\"Germany\">Niemcy<\/option>\n <option value=\"France\">Francja<\/option>\n <option value=\"United Kingdom\">Wielka Brytania<\/option>\n <option value=\"United States\">Stany Zjednoczone<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label for=\"hd_city\">Miasto<\/label>\n <select id=\"hd_city\" name=\"city\" required>\n <option value=\"\">-- Wybierz kraj najpierw --<\/option>\n <\/select>\n <\/div>\n\n <button type=\"submit\">Generuj wykres i rozpocznij test<\/button>\n <\/form>\n\n <div id=\"hd_status\"><\/div>\n <pre id=\"hd_result\" style=\"display:none\"><\/pre>\n\n <div id=\"hd-display-area\"><\/div>\n <\/div>\n\n \n \n <div id=\"typeform-modal\" style=\"display:none\"><\/div>\n\n <\/div>\n\n <script>\n \/\/ --- Ustawienia (DOSTOSUJ) ---\n const WP_ENDPOINT = '\/wp-json\/hd-widget\/v1\/chart'; \/\/ adres Twojego endpointu (zmie\u0144 je\u015bli inny)\n const TYPEFORM_URL = 'https:\/\/form.typeform.com\/to\/rUGExqog'; \/\/ przyk\u0142adowy formularz Typeform (mo\u017cesz wstawi\u0107 sw\u00f3j)\n\n \/\/ --- miasta (jak w Twoim kodzie) ---\n const citiesByCountry = {\n \"Poland\": [\"Warszawa\", \"Krak\u00f3w\", \"Wroc\u0142aw\", \"Gda\u0144sk\", \"Pozna\u0144\", \"\u0141\u00f3d\u017a\"],\n \"Germany\": [\"Berlin\", \"Hamburg\", \"Monachium\", \"Kolonia\"],\n \"France\": [\"Pary\u017c\", \"Marsylia\", \"Lyon\", \"Nicea\"],\n \"United Kingdom\": [\"Londyn\", \"Manchester\", \"Liverpool\", \"Birmingham\"],\n \"United States\": [\"New York\", \"Los Angeles\", \"Chicago\", \"Miami\"]\n };\n\n \/\/ --- DOM refs ---\n const countrySelect = document.getElementById('hd_country');\n const citySelect = document.getElementById('hd_city');\n\n countrySelect.addEventListener('change', ()=>{\n const selected = countrySelect.value;\n citySelect.innerHTML = '<option value=\"\">-- Wybierz miasto --<\/option>';\n if(citiesByCountry[selected]) citiesByCountry[selected].forEach(c=>{\n const opt = document.createElement('option'); opt.value=c; opt.textContent=c; citySelect.appendChild(opt);\n });\n });\n\n document.getElementById('scrollToForm').addEventListener('click', ()=>{\n document.getElementById('hd-prod-widget').scrollIntoView({behavior:'smooth'});\n });\n\n \/\/ Otw\u00f3rz Typeform jako now\u0105 kart\u0119 z ukrytym polem genes (je\u015bli mamy list\u0119 geneKeys)\n function openTypeformWithGenes(geneKeys=[], extraHidden={}){\n \/\/ Typeform hidden fields: ?genes=1,2,3 OR individual keys like ?g1=... depending on your setup\n \/\/ Ustal w Typeform nazwy hidden fields \u2014 w tym przyk\u0142adzie u\u017cywamy `genes`\n const genesParam = encodeURIComponent(geneKeys.join(','));\n let url = TYPEFORM_URL + '?genes=' + genesParam;\n \/\/ dodatkowe hidden fields\n for(const k in extraHidden){ url += `&${encodeURIComponent(k)}=${encodeURIComponent(extraHidden[k])}`; }\n window.open(url, '_blank');\n }\n\n \/\/ --- Formularz submit: generujemy wykres (POST do WP_ENDPOINT) ---\n document.getElementById('hd-form').addEventListener('submit', async function(e){\n e.preventDefault();\n const name = document.getElementById('hd_name').value.trim();\n const email = document.getElementById('hd_email').value.trim();\n const date = document.getElementById('hd_date').value;\n const time = document.getElementById('hd_time').value;\n const country = document.getElementById('hd_country').value;\n const city = document.getElementById('hd_city').value;\n\n if(!name||!email||!date||!time||!city){ alert('Prosz\u0119 wype\u0142ni\u0107 wszystkie pola.'); return; }\n\n const payload = { name, email, date: `${date}T${time}:00`, location: `${city}, ${country}` };\n\n document.getElementById('hd_status').innerText = 'Generuj\u0119 wykres \u2014 prosz\u0119 chwil\u0119 poczeka\u0107...';\n\n try{\n const res = await fetch(WP_ENDPOINT, { method:'POST', headers:{'Content-Type':'application\/json'}, body:JSON.stringify(payload) });\n const json = await res.json();\n console.log('API response', json);\n\n if(!res.ok || !json){ document.getElementById('hd_status').innerText = '\u274c B\u0142\u0105d serwera \u2014 sprawd\u017a konsol\u0119.'; return; }\n\n \/\/ --- G\u0142\u00f3wna logika: oczekujemy, \u017ce endpoint zwr\u00f3ci list\u0119 kluczy genowych (np. geneKeys: [1,2,3]) ---\n \/\/ Dopasuj poni\u017csze zale\u017cnie od odpowiedzi Twojego endpointu.\n \/\/ Je\u015bli masz: json.body.gates albo json.data.gates lub json.file_url \u2014 sprawd\u017a i zmodyfikuj.\n\n let geneKeys = [];\n if(json.body && json.body.gates) geneKeys = json.body.gates; \/\/ najwygodniejsza struktura\n else if(json.gates) geneKeys = json.gates;\n else if(json.data && json.data.gates) geneKeys = json.data.gates;\n else if(json.body && json.body.keys) geneKeys = json.body.keys;\n\n \/\/ Je\u015bli endpoint zwraca plik\/URL wykresu \u2014 poka\u017c go\n const displayArea = document.getElementById('hd-display-area');\n displayArea.innerHTML = '';\n\n \/\/ obs\u0142uga chartUrl\/file_url\n const finalUrl = (json.body && (json.body.chartUrl || json.body.file_url || json.body.fileUrl)) || json.file_url || json.fileUrl || json.chartUrl || null;\n if(finalUrl){\n const ifr = document.createElement('iframe'); ifr.src = finalUrl; ifr.style.width='100%'; ifr.style.height='720px'; ifr.style.border='1px solid #ddd'; ifr.style.borderRadius='8px';\n displayArea.appendChild(ifr);\n }\n\n \/\/ Je\u015bli nie ma geneKeys \u2014 spr\u00f3buj wyci\u0105gn\u0105\u0107 z tekstu odpowiedzi (debug)\n if((!geneKeys || geneKeys.length===0) && json.body && json.body.raw_keys){\n \/\/ przyk\u0142adowo: \"1,2,3\" -> zamie\u0144 na tablic\u0119\n geneKeys = String(json.body.raw_keys).split(',').map(x=>x.trim()).filter(Boolean);\n }\n\n document.getElementById('hd_status').innerText = '\u2705 Wykres wygenerowany.';\n\n \/\/ --- je\u015bli mamy klucze genowe \u2014 otwieramy Typeform z hidden fields ---\n if(geneKeys && geneKeys.length>0){\n \/\/ poka\u017c ma\u0142e podsumowanie i przycisk do uruchomienia spersonalizowanego quizu\n const wrap = document.createElement('div');\n wrap.className = 'card'; wrap.style.marginTop='12px'; wrap.style.padding='12px';\n wrap.innerHTML = `<p style=\\\"margin:0 0 8px\\\"><strong>Wykryte klucze genowe:<\/strong> ${geneKeys.slice(0,20).join(', ')}${geneKeys.length>20? ' ...':''}<\/p>`+\n `<div style=\\\"display:flex;gap:8px;margin-top:8px\\\"><button id=\\\"start-personal-quiz\\\" class=\\\"btn-primary\\\">Rozwi\u0105\u017c spersonalizowany quiz<\/button><button id=\\\"start-generic-quiz\\\" class=\\\"btn-primary\\\">Rozwi\u0105\u017c przyk\u0142adowy quiz (Typeform)<\/button><\/div>`;\n displayArea.appendChild(wrap);\n\n document.getElementById('start-personal-quiz').addEventListener('click', ()=>{\n \/\/ otwieramy Typeform z hidden field `genes` \u2014 w Typeform skonfiguruj logic jumps, aby pyta\u0144 by\u0142o tylko tyle, ile odpowiada Twoim gates\n openTypeformWithGenes(geneKeys, {name: name, email: email});\n });\n document.getElementById('start-generic-quiz').addEventListener('click', ()=>{\n window.open(TYPEFORM_URL, '_blank');\n });\n } else {\n \/\/ brak kluczy -> po prostu otw\u00f3rz standardowy Typeform\n const wrap = document.createElement('div');\n wrap.className='card'; wrap.style.marginTop='12px'; wrap.style.padding='12px';\n wrap.innerHTML = `<p style=\\\"margin:0\\\">Nie wykryto kluczy genowych w odpowiedzi API. Mo\u017cesz spr\u00f3bowa\u0107 ponownie lub rozwi\u0105za\u0107 przyk\u0142adowy quiz.<\/p><div style=\\\"margin-top:8px\\\"><button id=\\\"start-generic2\\\" class=\\\"btn-primary\\\">Otw\u00f3rz quiz (Typeform)<\/button><\/div>`;\n displayArea.appendChild(wrap);\n document.getElementById('start-generic2').addEventListener('click', ()=>window.open(TYPEFORM_URL, '_blank'));\n }\n\n }catch(err){\n console.error(err); document.getElementById('hd_status').innerText = '\u274c B\u0142\u0105d \u2014 sprawd\u017a konsol\u0119.';\n }\n\n });\n\n \/\/ --- pomoc: przydatne notatki (nie wp\u0142ywa na dzia\u0142anie) ---\n \/*\n WA\u017bNE wskaz\u00f3wki integracyjne:\n 1) Typeform: skonfiguruj w swoim formularzu hidden field o nazwie \"genes\". Mo\u017cesz te\u017c u\u017cy\u0107 wielu hidden fields (np. g1,g2...).\n Gdy otworzysz Typeform z ?genes=1,2,3 \u2014 w polu hidden zawrzysz list\u0119 kluczy. Wykorzystaj Logic Jumps w Typeform,\n aby pokazywa\u0107 tylko te pytania, kt\u00f3re odpowiadaj\u0105 tym kluczom (np. je\u017celi genes zawiera 12 -> poka\u017c pytanie X).\n\n 2) Je\u015bli chcesz wi\u0119kszej kontroli (np. wczytywa\u0107 64 pytania i filtrowa\u0107 je dynamicznie po stronie serwera) \u2014 rekomenduj\u0119\n alternatyw\u0119: prosty backend + front (React) z w\u0142asn\u0105 baz\u0105 pyta\u0144. To daje pe\u0142en kontrol\u0119 nad UI\/UX, kolejno\u015bci\u0105, zapisem wynik\u00f3w.\n\n 3) Snapshot\/PNG wykresu: je\u015bli wykres \u0142adowany w iframe pochodzi z innej domeny (cross-origin), nie b\u0119dzie mo\u017cliwe wykonanie\n zrzutu HTML2Canvas z powodu polityki same-origin. W takim wypadku lepiej, aby endpoint zwraca\u0142 bezpo\u015bredni plik PNG lub PDF\n (link do pliku), kt\u00f3ry mo\u017cna pobra\u0107 bezpo\u015brednio.\n\n 4) Endpoint WP: upewnij si\u0119, \u017ce Twoja odpowied\u017a JSON zawiera jasno nazwane pola (np. { success:true, body:{ gates:[1,2,3], chartUrl: 'https:\/\/...' } })\n \u2014 powy\u017cszy kod stosuje kilka wariant\u00f3w (json.body.gates, json.gates, json.data.gates).\n\n 5) Bezpiecze\u0144stwo: je\u015bli Tw\u00f3j endpoint wymaga secret, dodaj go w nag\u0142\u00f3wkach lub body (np. Authorization) i nie ujawniaj go w publicznym JS.\n *\/\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sprawd\u017a Tw\u00f3j Poziom \u015awiadomo\u015bci skorelowany z Twoim projektem Human Design<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":16,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/318"}],"wp:attachment":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t

\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t

\n\t\t\t\t\t\t\t

\n\n\n \n \n Test \u015awiadomo\u015bci \u2014 Human Design Daria Mas\u0142owska<\/title>\n <style>\n \/* --- G\u0142\u00f3wne style (mo\u017cesz je nadpisa\u0107 w Elementorze) --- *\/\n :root{\n --accent:#E48C52;\n --btn:#FEE000;\n --bg:#F7F3EE;\n --card:#FFFFFF;\n --text:#3B2F2F;\n --muted:#9B8F7F;\n font-family: 'Lato', 'Montserrat', 'Raleway', sans-serif;\n }\n body{background:linear-gradient(180deg,#fff 0%, #FBF9F6 100%);color:var(--text);margin:0;padding:0}\n .container{max-width:1100px;margin:36px auto;padding:28px}\n\n .hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center}\n .hero h1{color:var(--accent);font-size:34px;margin:0 0 10px}\n .hero p.lead{font-size:18px;margin:0 0 18px;color:var(--text)}\n\n .card{background:var(--card);border:1px solid #EDE0D4;border-radius:12px;padding:22px;box-shadow:0 6px 20px rgba(0,0,0,0.03)}\n\n .cta-row{display:flex;gap:12px;align-items:center}\n .btn-primary{background:var(--btn);border:none;padding:12px 18px;border-radius:10px;font-weight:700;cursor:pointer}\n .btn-primary:hover{background:var(--accent);color:#fff}\n\n .explain{margin-top:18px;line-height:1.5}\n\n \/* Formularz danych (kopiowalne, mo\u017cesz u\u017cy\u0107 swojego) *\/\n #hd-prod-widget{max-width:900px;margin:26px auto;background:var(--card);border:1px solid #EDE0D4;border-radius:12px;padding:28px}\n #hd-prod-widget h2{text-align:center;color:var(--accent);font-size:26px;margin-bottom:14px}\n #hd-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}\n #hd-form label{display:block;margin-bottom:6px;font-weight:600}\n #hd-form input,#hd-form select{width:100%;padding:10px;border-radius:8px;border:1px solid #EDE0D4;background:var(--bg)}\n #hd-form button{grid-column:1 \/ -1;justify-self:center;background:var(--btn);border:none;padding:12px 20px;border-radius:10px;font-weight:700;cursor:pointer}\n #hd-form button:hover{background:var(--accent);color:#fff}\n #hd_status{margin-top:12px;color:var(--muted);text-align:center}\n pre#hd_result{background:#f6f6f6;padding:10px;border-radius:8px;overflow:auto}\n\n \/* obszar wykresu *\/\n #hd-display-area{margin-top:18px}\n\n \/* responsywno\u015b\u0107 *\/\n @media (max-width:900px){.hero{grid-template-columns:1fr}}\n\n \/* miejsca na Twoje obrazy *\/\n .image-placeholder{width:100%;height:220px;border-radius:10px;background:linear-gradient(90deg,#fff,#F7F3EE);display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px dashed #EDE0D4}\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"hero\">\n <div>\n <h1>Test \u015awiadomo\u015bci \u2014 sprawd\u017a sw\u00f3j poziom \u015bwiadomo\u015bci (oparty o Tw\u00f3j Human Design)<\/h1>\n <p class=\"lead\">Ten test nie jest og\u00f3lnym quizem \u2014 jest zsynchronizowany z Twoim unikatowym wykresem Human Design. Otrzymasz pytania dopasowane do Twoich energetycznych przewag i wyzwa\u0144, a nie uniwersalny zestaw pyta\u0144 dla wszystkich.<\/p>\n\n <div class=\"card explain\">\n <p>Dlaczego warto? Bo ka\u017cdy z nas ma inne zasoby, inne archetypy i inn\u0105 konfiguracj\u0119 energetyczn\u0105 \u2014 ten test bierze to pod uwag\u0119. Dzi\u0119ki temu otrzymujesz konkretne wskaz\u00f3wki, kt\u00f3re s\u0105 <strong>skrojone na miar\u0119<\/strong> Twojego projektu.<\/p>\n\n <ul>\n <li>Test liczy 64 pyta\u0144 \u2014 ka\u017cde pytanie powi\u0105zane jest z jednym kluczem genowym (Gate).<\/li>\n <li>Po wpisaniu danych generujemy Tw\u00f3j wykres HD (w tle) \u2014 na jego podstawie wybieramy tylko te pytania, kt\u00f3re dotycz\u0105 Twojego wykresu.<\/li>\n <li>Wyniki mo\u017cesz zapisa\u0107, otrzyma\u0107 wykres w formie obrazu oraz pobra\u0107 raport.<\/li>\n <\/ul>\n\n <div style=\"margin-top:12px\" class=\"cta-row\">\n <button class=\"btn-primary\" id=\"scrollToForm\">Wype\u0142nij test teraz \u2014 sprawd\u017a sw\u00f3j poziom \u015bwiadomo\u015bci<\/button>\n <button class=\"btn-primary\" id=\"openTypeform\">Rozwi\u0105\u017c quiz (Typeform) \u2014 przyk\u0142ad<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n\n <div>\n \n <div class=\"image-placeholder card\">Tu mo\u017cesz wstawi\u0107 grafik\u0119 promocyjn\u0105<\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"hd-prod-widget\" class=\"card\" style=\"margin-top:28px\">\n <h2>Wygeneruj darmowy wykres Human Design i rozpocznij test<\/h2>\n\n <form id=\"hd-form\">\n <div>\n <label for=\"hd_name\">Imi\u0119<\/label>\n <input id=\"hd_name\" name=\"name\" placeholder=\"np. Daria\" required \/>\n <\/div>\n\n <div>\n <label for=\"hd_email\">E-mail<\/label>\n <input id=\"hd_email\" name=\"email\" type=\"email\" placeholder=\"np. daria@email.com\" required \/>\n <\/div>\n\n <div>\n <label for=\"hd_date\">Data urodzenia<\/label>\n <input id=\"hd_date\" name=\"date\" type=\"date\" required \/>\n <\/div>\n\n <div>\n <label for=\"hd_time\">Godzina urodzenia<\/label>\n <input id=\"hd_time\" name=\"time\" type=\"time\" required \/>\n <\/div>\n\n <div>\n <label for=\"hd_country\">Kraj<\/label>\n <select id=\"hd_country\" name=\"country\" required>\n <option value=\"\">-- Wybierz kraj --<\/option>\n <option value=\"Poland\">Polska<\/option>\n <option value=\"Germany\">Niemcy<\/option>\n <option value=\"France\">Francja<\/option>\n <option value=\"United Kingdom\">Wielka Brytania<\/option>\n <option value=\"United States\">Stany Zjednoczone<\/option>\n <\/select>\n <\/div>\n\n <div>\n <label for=\"hd_city\">Miasto<\/label>\n <select id=\"hd_city\" name=\"city\" required>\n <option value=\"\">-- Wybierz kraj najpierw --<\/option>\n <\/select>\n <\/div>\n\n <button type=\"submit\">Generuj wykres i rozpocznij test<\/button>\n <\/form>\n\n <div id=\"hd_status\"><\/div>\n <pre id=\"hd_result\" style=\"display:none\"><\/pre>\n\n <div id=\"hd-display-area\"><\/div>\n <\/div>\n\n \n \n <div id=\"typeform-modal\" style=\"display:none\"><\/div>\n\n <\/div>\n\n <script>\n \/\/ --- Ustawienia (DOSTOSUJ) ---\n const WP_ENDPOINT = '\/wp-json\/hd-widget\/v1\/chart'; \/\/ adres Twojego endpointu (zmie\u0144 je\u015bli inny)\n const TYPEFORM_URL = 'https:\/\/form.typeform.com\/to\/rUGExqog'; \/\/ przyk\u0142adowy formularz Typeform (mo\u017cesz wstawi\u0107 sw\u00f3j)\n\n \/\/ --- miasta (jak w Twoim kodzie) ---\n const citiesByCountry = {\n \"Poland\": [\"Warszawa\", \"Krak\u00f3w\", \"Wroc\u0142aw\", \"Gda\u0144sk\", \"Pozna\u0144\", \"\u0141\u00f3d\u017a\"],\n \"Germany\": [\"Berlin\", \"Hamburg\", \"Monachium\", \"Kolonia\"],\n \"France\": [\"Pary\u017c\", \"Marsylia\", \"Lyon\", \"Nicea\"],\n \"United Kingdom\": [\"Londyn\", \"Manchester\", \"Liverpool\", \"Birmingham\"],\n \"United States\": [\"New York\", \"Los Angeles\", \"Chicago\", \"Miami\"]\n };\n\n \/\/ --- DOM refs ---\n const countrySelect = document.getElementById('hd_country');\n const citySelect = document.getElementById('hd_city');\n\n countrySelect.addEventListener('change', ()=>{\n const selected = countrySelect.value;\n citySelect.innerHTML = '<option value=\"\">-- Wybierz miasto --<\/option>';\n if(citiesByCountry[selected]) citiesByCountry[selected].forEach(c=>{\n const opt = document.createElement('option'); opt.value=c; opt.textContent=c; citySelect.appendChild(opt);\n });\n });\n\n document.getElementById('scrollToForm').addEventListener('click', ()=>{\n document.getElementById('hd-prod-widget').scrollIntoView({behavior:'smooth'});\n });\n\n \/\/ Otw\u00f3rz Typeform jako now\u0105 kart\u0119 z ukrytym polem genes (je\u015bli mamy list\u0119 geneKeys)\n function openTypeformWithGenes(geneKeys=[], extraHidden={}){\n \/\/ Typeform hidden fields: ?genes=1,2,3 OR individual keys like ?g1=... depending on your setup\n \/\/ Ustal w Typeform nazwy hidden fields \u2014 w tym przyk\u0142adzie u\u017cywamy `genes`\n const genesParam = encodeURIComponent(geneKeys.join(','));\n let url = TYPEFORM_URL + '?genes=' + genesParam;\n \/\/ dodatkowe hidden fields\n for(const k in extraHidden){ url += `&${encodeURIComponent(k)}=${encodeURIComponent(extraHidden[k])}`; }\n window.open(url, '_blank');\n }\n\n \/\/ --- Formularz submit: generujemy wykres (POST do WP_ENDPOINT) ---\n document.getElementById('hd-form').addEventListener('submit', async function(e){\n e.preventDefault();\n const name = document.getElementById('hd_name').value.trim();\n const email = document.getElementById('hd_email').value.trim();\n const date = document.getElementById('hd_date').value;\n const time = document.getElementById('hd_time').value;\n const country = document.getElementById('hd_country').value;\n const city = document.getElementById('hd_city').value;\n\n if(!name||!email||!date||!time||!city){ alert('Prosz\u0119 wype\u0142ni\u0107 wszystkie pola.'); return; }\n\n const payload = { name, email, date: `${date}T${time}:00`, location: `${city}, ${country}` };\n\n document.getElementById('hd_status').innerText = 'Generuj\u0119 wykres \u2014 prosz\u0119 chwil\u0119 poczeka\u0107...';\n\n try{\n const res = await fetch(WP_ENDPOINT, { method:'POST', headers:{'Content-Type':'application\/json'}, body:JSON.stringify(payload) });\n const json = await res.json();\n console.log('API response', json);\n\n if(!res.ok || !json){ document.getElementById('hd_status').innerText = '\u274c B\u0142\u0105d serwera \u2014 sprawd\u017a konsol\u0119.'; return; }\n\n \/\/ --- G\u0142\u00f3wna logika: oczekujemy, \u017ce endpoint zwr\u00f3ci list\u0119 kluczy genowych (np. geneKeys: [1,2,3]) ---\n \/\/ Dopasuj poni\u017csze zale\u017cnie od odpowiedzi Twojego endpointu.\n \/\/ Je\u015bli masz: json.body.gates albo json.data.gates lub json.file_url \u2014 sprawd\u017a i zmodyfikuj.\n\n let geneKeys = [];\n if(json.body && json.body.gates) geneKeys = json.body.gates; \/\/ najwygodniejsza struktura\n else if(json.gates) geneKeys = json.gates;\n else if(json.data && json.data.gates) geneKeys = json.data.gates;\n else if(json.body && json.body.keys) geneKeys = json.body.keys;\n\n \/\/ Je\u015bli endpoint zwraca plik\/URL wykresu \u2014 poka\u017c go\n const displayArea = document.getElementById('hd-display-area');\n displayArea.innerHTML = '';\n\n \/\/ obs\u0142uga chartUrl\/file_url\n const finalUrl = (json.body && (json.body.chartUrl || json.body.file_url || json.body.fileUrl)) || json.file_url || json.fileUrl || json.chartUrl || null;\n if(finalUrl){\n const ifr = document.createElement('iframe'); ifr.src = finalUrl; ifr.style.width='100%'; ifr.style.height='720px'; ifr.style.border='1px solid #ddd'; ifr.style.borderRadius='8px';\n displayArea.appendChild(ifr);\n }\n\n \/\/ Je\u015bli nie ma geneKeys \u2014 spr\u00f3buj wyci\u0105gn\u0105\u0107 z tekstu odpowiedzi (debug)\n if((!geneKeys || geneKeys.length===0) && json.body && json.body.raw_keys){\n \/\/ przyk\u0142adowo: \"1,2,3\" -> zamie\u0144 na tablic\u0119\n geneKeys = String(json.body.raw_keys).split(',').map(x=>x.trim()).filter(Boolean);\n }\n\n document.getElementById('hd_status').innerText = '\u2705 Wykres wygenerowany.';\n\n \/\/ --- je\u015bli mamy klucze genowe \u2014 otwieramy Typeform z hidden fields ---\n if(geneKeys && geneKeys.length>0){\n \/\/ poka\u017c ma\u0142e podsumowanie i przycisk do uruchomienia spersonalizowanego quizu\n const wrap = document.createElement('div');\n wrap.className = 'card'; wrap.style.marginTop='12px'; wrap.style.padding='12px';\n wrap.innerHTML = `<p style=\\\"margin:0 0 8px\\\"><strong>Wykryte klucze genowe:<\/strong> ${geneKeys.slice(0,20).join(', ')}${geneKeys.length>20? ' ...':''}<\/p>`+\n `<div style=\\\"display:flex;gap:8px;margin-top:8px\\\"><button id=\\\"start-personal-quiz\\\" class=\\\"btn-primary\\\">Rozwi\u0105\u017c spersonalizowany quiz<\/button><button id=\\\"start-generic-quiz\\\" class=\\\"btn-primary\\\">Rozwi\u0105\u017c przyk\u0142adowy quiz (Typeform)<\/button><\/div>`;\n displayArea.appendChild(wrap);\n\n document.getElementById('start-personal-quiz').addEventListener('click', ()=>{\n \/\/ otwieramy Typeform z hidden field `genes` \u2014 w Typeform skonfiguruj logic jumps, aby pyta\u0144 by\u0142o tylko tyle, ile odpowiada Twoim gates\n openTypeformWithGenes(geneKeys, {name: name, email: email});\n });\n document.getElementById('start-generic-quiz').addEventListener('click', ()=>{\n window.open(TYPEFORM_URL, '_blank');\n });\n } else {\n \/\/ brak kluczy -> po prostu otw\u00f3rz standardowy Typeform\n const wrap = document.createElement('div');\n wrap.className='card'; wrap.style.marginTop='12px'; wrap.style.padding='12px';\n wrap.innerHTML = `<p style=\\\"margin:0\\\">Nie wykryto kluczy genowych w odpowiedzi API. Mo\u017cesz spr\u00f3bowa\u0107 ponownie lub rozwi\u0105za\u0107 przyk\u0142adowy quiz.<\/p><div style=\\\"margin-top:8px\\\"><button id=\\\"start-generic2\\\" class=\\\"btn-primary\\\">Otw\u00f3rz quiz (Typeform)<\/button><\/div>`;\n displayArea.appendChild(wrap);\n document.getElementById('start-generic2').addEventListener('click', ()=>window.open(TYPEFORM_URL, '_blank'));\n }\n\n }catch(err){\n console.error(err); document.getElementById('hd_status').innerText = '\u274c B\u0142\u0105d \u2014 sprawd\u017a konsol\u0119.';\n }\n\n });\n\n \/\/ --- pomoc: przydatne notatki (nie wp\u0142ywa na dzia\u0142anie) ---\n \/*\n WA\u017bNE wskaz\u00f3wki integracyjne:\n 1) Typeform: skonfiguruj w swoim formularzu hidden field o nazwie \"genes\". Mo\u017cesz te\u017c u\u017cy\u0107 wielu hidden fields (np. g1,g2...).\n Gdy otworzysz Typeform z ?genes=1,2,3 \u2014 w polu hidden zawrzysz list\u0119 kluczy. Wykorzystaj Logic Jumps w Typeform,\n aby pokazywa\u0107 tylko te pytania, kt\u00f3re odpowiadaj\u0105 tym kluczom (np. je\u017celi genes zawiera 12 -> poka\u017c pytanie X).\n\n 2) Je\u015bli chcesz wi\u0119kszej kontroli (np. wczytywa\u0107 64 pytania i filtrowa\u0107 je dynamicznie po stronie serwera) \u2014 rekomenduj\u0119\n alternatyw\u0119: prosty backend + front (React) z w\u0142asn\u0105 baz\u0105 pyta\u0144. To daje pe\u0142en kontrol\u0119 nad UI\/UX, kolejno\u015bci\u0105, zapisem wynik\u00f3w.\n\n 3) Snapshot\/PNG wykresu: je\u015bli wykres \u0142adowany w iframe pochodzi z innej domeny (cross-origin), nie b\u0119dzie mo\u017cliwe wykonanie\n zrzutu HTML2Canvas z powodu polityki same-origin. W takim wypadku lepiej, aby endpoint zwraca\u0142 bezpo\u015bredni plik PNG lub PDF\n (link do pliku), kt\u00f3ry mo\u017cna pobra\u0107 bezpo\u015brednio.\n\n 4) Endpoint WP: upewnij si\u0119, \u017ce Twoja odpowied\u017a JSON zawiera jasno nazwane pola (np. { success:true, body:{ gates:[1,2,3], chartUrl: 'https:\/\/...' } })\n \u2014 powy\u017cszy kod stosuje kilka wariant\u00f3w (json.body.gates, json.gates, json.data.gates).\n\n 5) Bezpiecze\u0144stwo: je\u015bli Tw\u00f3j endpoint wymaga secret, dodaj go w nag\u0142\u00f3wkach lub body (np. Authorization) i nie ujawniaj go w publicznym JS.\n *\/\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Sprawd\u017a Tw\u00f3j Poziom \u015awiadomo\u015bci skorelowany z Twoim projektem Human Design<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":16,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":318,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/318"}],"wp:attachment":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}