{"id":90,"date":"2025-10-06T21:51:40","date_gmt":"2025-10-06T21:51:40","guid":{"rendered":"https:\/\/www.humandesigndariamaslowska.com\/?page_id=90"},"modified":"2025-11-04T11:30:11","modified_gmt":"2025-11-04T11:30:11","slug":"wygeneruj-swoj-darmowy-wykres-human-design","status":"publish","type":"page","link":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wygeneruj-swoj-darmowy-wykres-human-design\/","title":{"rendered":"GENERUJ WYKRES"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"90\" class=\"elementor elementor-90\">\n\t\t\t\t<div class=\"aux-parallax-section elementor-element elementor-element-dd05ad3 e-flex e-con-boxed e-con e-parent\" data-id=\"dd05ad3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4fe3f79 elementor-widget elementor-widget-shortcode\" data-id=\"4fe3f79\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n#hd-prod-widget {\n  max-width: 900px;\n  margin: 40px auto;\n  background: #FFFFFF;\n  border: 1px solid #EDE0D4;\n  border-radius: 12px;\n  padding: 40px 50px;\n  box-shadow: 0 4px 20px rgba(0,0,0,0.04);\n  font-family: 'Lato', 'Montserrat', 'Raleway', sans-serif;\n  color: #3B2F2F;\n}\n#hd-prod-widget h2 {\n  text-align: center;\n  color: #E48C52;\n  font-size: 28px;\n  font-weight: 600;\n  margin-bottom: 30px;\n}\n#hd-form {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 20px;\n}\n#hd-form input, #hd-form select {\n  width: 100%;\n  padding: 12px 14px;\n  border: 1px solid #EDE0D4;\n  border-radius: 8px;\n  font-size: 15px;\n  background-color: #F7F3EE;\n  color: #3B2F2F;\n}\n#hd-form input:focus, #hd-form select:focus {\n  border-color: #E48C52;\n  background-color: #fff;\n  outline: none;\n}\n#hd-form label {\n  font-size: 14px;\n  font-weight: 500;\n  color: #3B2F2F;\n  margin-bottom: 6px;\n  display: block;\n}\n#hd-form button {\n  grid-column: 1 \/ -1;\n  justify-self: center;\n  background-color: #FEE000;\n  color: #3B2F2F;\n  border: none;\n  padding: 14px 30px;\n  border-radius: 8px;\n  cursor: pointer;\n  font-size: 16px;\n  font-weight: 600;\n}\n#hd-form button:hover {\n  background-color: #E48C52;\n  color: #fff;\n}\n#hd_status {\n  text-align: center;\n  margin-top: 15px;\n  font-style: italic;\n  color: #9B8F7F;\n}\n<\/style>\n\n<div id=\"hd-prod-widget\">\n  <h2>Wygeneruj darmowy wykres Human Design<\/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<\/button>\n  <\/form>\n\n  <div id=\"hd_status\"><\/div>\n  <pre id=\"hd_result\" style=\"background:#f0f0f0;padding:10px;\"><\/pre>\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n\n  const WP_ENDPOINT = '\/wp-json\/hd-widget\/v1\/chart';\n\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  const countrySelect = document.getElementById(\"hd_country\");\n  const citySelect = document.getElementById(\"hd_city\");\n\n  countrySelect.addEventListener(\"change\", function() {\n    const selected = this.value;\n    citySelect.innerHTML = '<option value=\"\">-- Wybierz miasto --<\/option>';\n    if (citiesByCountry[selected]) {\n      citiesByCountry[selected].forEach(city => {\n        const opt = document.createElement(\"option\");\n        opt.value = city;\n        opt.textContent = city;\n        citySelect.appendChild(opt);\n      });\n    }\n  });\n\n  document.getElementById(\"hd-form\").addEventListener(\"submit\", async function(e){\n    e.preventDefault();\n\n    const name = document.getElementById(\"hd_name\").value;\n    const email = document.getElementById(\"hd_email\").value;\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) {\n      alert(\"Prosz\u0119 wype\u0142ni\u0107 wszystkie pola.\");\n      return;\n    }\n\nconst location = `${city}, ${country}`;\nconst payload = {\n  name,\n  email,\n  date: `${date}T${time}:00`,\n  location\n};\n\nconst res = await fetch(WP_ENDPOINT, {\n  method: 'POST',\n  headers: {'Content-Type': 'application\/json'},\n  body: JSON.stringify(payload)\n});\n\nconst json = await res.json();\ndocument.getElementById('hd_status').innerText = 'Otrzymano odpowied\u017a (debug):';\ndocument.getElementById('hd_result').innerText = JSON.stringify(json, null, 2);\nconsole.log('DEBUG endpoint response:', json);\n\nif (!res.ok || !json.success) {\n  document.getElementById(\"hd_status\").innerText = \"\u274c B\u0142\u0105d po\u0142\u0105czenia z API.\";\n  console.error(json);\n  return;\n}\n\n\/\/ \ud83e\udeb6 Je\u015bli API zwr\u00f3ci adres wykresu \u2014 poka\u017c go w iframe\nif (json.body && json.body.chartUrl) {\n  document.getElementById(\"hd_result\").innerHTML =\n    `<iframe src=\"${json.body.chartUrl}\" style=\"width:100%;height:700px;border:none;\"><\/iframe>`;\n}\n\ndocument.getElementById(\"hd_status\").innerText = \"\u2705 Wykres wygenerowany!\";\nconsole.log(json.data);\n\n  });\n});\n<\/script>\n<!-- Wklej to pod formularzem w Elementorze (HTML widget) -->\n<!-- Pobiera odpowied\u017a endpointu, tworzy iframe, konwertuje do obrazu i daje link do pobrania -->\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n<div id=\"hd-display-area\" style=\"margin-top:20px;\"><\/div>\n\n<script>\n(async function(){\n  \/\/ --- USTAWIENIA (je\u015bli chcesz zmieni\u0107 endpoint, zr\u00f3b to tutaj) ---\n  const WP_ENDPOINT = '\/wp-json\/hd-widget\/v1\/chart'; \/\/ Tw\u00f3j endpoint, nie zmieniamy formularza\n  const SECRET = 's8fj39sjGk2R8hD0vZ1kQ4z'; \/\/ je\u017celi endpoint wymaga secret w body, wpisz tu (opcjonalnie)\n\n  \/\/ helper: utworzy iframe i zwr\u00f3ci element iframe po za\u0142adowaniu\n  function createIframe(url){\n    const container = document.getElementById('hd-display-area');\n    container.innerHTML = `\n      <div id=\"hd-frame-wrap\" style=\"display:flex;gap:12px;flex-direction:column;\">\n        <div style=\"display:flex;gap:8px;align-items:center;\">\n          <button id=\"hd-btn-snapshot\" class=\"hd-btn\">Zapisz obraz (PNG)<\/button>\n          <button id=\"hd-btn-download-html\" class=\"hd-btn\">Pobierz HTML<\/button>\n          <button id=\"hd-btn-print\" class=\"hd-btn\">Pobierz PDF (drukuj)<\/button>\n          <span id=\"hd-msg\" style=\"margin-left:10px;color:#555\"><\/span>\n        <\/div>\n        <iframe id=\"hd-iframe\" src=\"${url}\" style=\"width:100%;height:720px;border:1px solid #ddd;border-radius:6px;\"><\/iframe>\n        <div id=\"hd-snapshot-result\" style=\"margin-top:10px;\"><\/div>\n      <\/div>\n    `;\n    return new Promise(resolve=>{\n      const ifr = document.getElementById('hd-iframe');\n      ifr.addEventListener('load', ()=>resolve(ifr));\n      \/\/ timeout fallback\n      setTimeout(()=>resolve(ifr), 4000);\n    });\n  }\n\n  \/\/ helper: pobierz HTML pliku (do pobrania jako .html)\n  function downloadFile(url, filename){\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = filename;\n    document.body.appendChild(a);\n    a.click();\n    a.remove();\n  }\n\n  \/\/ helper: snapshot iframe (same-origin required)\n  async function snapshotIframeToPNG(iframe){\n    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;\n    \/\/ OPCJONALNIE: wy\u0142\u0105cz elementy premium wewn\u0105trz iframe (overlay)\n    \/\/ tutaj mo\u017cesz dopasowa\u0107 selektory (przyk\u0142adowe): '.advanced, .premium-section'\n    const premiumSelectors = ['.advanced', '.paywall', '.premium', '.chart-info-advanced'];\n    \/\/ dodaj p\u00f3\u0142przezroczyst\u0105 nak\u0142adk\u0119 nad znalezionymi elementami:\n    premiumSelectors.forEach(sel=>{\n      iframeDoc.querySelectorAll(sel).forEach(el=>{\n        const overlay = iframeDoc.createElement('div');\n        overlay.className = 'hd-premium-overlay';\n        overlay.style.position = 'absolute';\n        const rect = el.getBoundingClientRect();\n        \/\/ do\u0142o\u017cymy overlay wewn\u0105trz el: w 100% rozmiaru\n        overlay.style.left = '0';\n        overlay.style.top = '0';\n        overlay.style.width = '100%';\n        overlay.style.height = '100%';\n        overlay.style.background = 'rgba(255,255,255,0.82)';\n        overlay.style.backdropFilter = 'grayscale(100%)';\n        overlay.style.display = 'flex';\n        overlay.style.alignItems = 'center';\n        overlay.style.justifyContent = 'center';\n        overlay.style.color = '#7a7a7a';\n        overlay.style.fontWeight = '700';\n        overlay.style.zIndex = '9999';\n        overlay.innerText = 'Sekcja zastrze\u017cona \u2014 wykup dost\u0119p';\n        el.style.position = el.style.position || 'relative';\n        el.appendChild(overlay);\n      });\n    });\n\n    \/\/ Je\u015bli chcesz wykadrowa\u0107 tylko lew\u0105 cz\u0119\u015b\u0107 z obrazem wykresu \u2014 mo\u017cesz targetowa\u0107 kontener wykresu\n    \/\/ domy\u015blnie zrobimy zrzut ca\u0142ego body strony w iframe:\n    const target = iframeDoc.body;\n\n    \/\/ use html2canvas on target\n    return html2canvas(target, {\n      useCORS: true,\n      logging: false,\n      scale: 2 \/\/ zwi\u0119ksza rozdzielczo\u015b\u0107 obrazu\n    });\n  }\n\n  \/\/ ---------- INTEGRACJA z Twoim istniej\u0105cym JS: ----------\n  \/\/ Zamiast zmienia\u0107 Tw\u00f3j formularz: podmienimy funkcj\u0119 fetch po submit \u2014 \n  \/\/ tu zrobimy prosty \"interceptor\": je\u015bli strona wysy\u0142a request do WP_ENDPOINT (fetch),\n  \/\/ naj\u0142atwiej jest: przerobi\u0107 obs\u0142ug\u0119 w istniej\u0105cym kodzie - ale \u017ceby nie rusza\u0107 formularza\n  \/\/ zaproponuj\u0119 dwie opcje: A (\u0142atwiejsza) -> w Twoim istniej\u0105cym kodzie po otrzymaniu json.success\n  \/\/ wywo\u0142aj poni\u017csze funkcje (kod od \"Gdy otrzymasz json\" ni\u017cej). \n  \/\/ Opcja B (je\u015bli nie chcesz modyfikowa\u0107 istniej\u0105cej logiki) -> wklej kod poni\u017cej jako samodzielny fetch,\n  \/\/ ale **lepiej** dopasowa\u0107 do Twojego flow. Poni\u017cej daj\u0119 przyk\u0142ad: w Twoim obecnym submit handlerze\n  \/\/ po linijce `const json = await res.json();` dopisz: `handleResult(json);`\n  \/\/ i wklej t\u0119 funkcj\u0119:\n\n  window.handleResult = async function(json){\n    const area = document.getElementById('hd-display-area');\n    if(!json) {\n      area.innerText = 'Brak odpowiedzi z API';\n      return;\n    }\n    \/\/ Je\u015bli endpoint zwraca chartUrl we use it. Je\u015bli zwraca file_url (jak Tw\u00f3j webhook) te\u017c.\n    const url = (json.body && json.body.chartUrl) || json.file_url || (json.body && (json.body.chartUrl || json.body.file_url)) || null;\n    \/\/ fallback: je\u015bli Tw\u00f3j endpoint zwraca bezpo\u015brednio 'file_url' lub 'chartUrl' w root\n    const rootUrl = json.chartUrl || json.file_url || json.fileUrl || null;\n    const finalUrl = url || rootUrl;\n\n    if(!finalUrl){\n      area.innerHTML = '<div style=\"color:#b00\">Nie znaleziono adresu wykresu w odpowiedzi API. Sprawd\u017a odpowied\u017a w konsoli.<\/div>';\n      console.log('Pe\u0142na odpowied\u017a API:', json);\n      return;\n    }\n\n    \/\/ stw\u00f3rz iframe\n    const iframe = await createIframe(finalUrl);\n\n    \/\/ przyciski\n    document.getElementById('hd-btn-snapshot').addEventListener('click', async function(){\n      const msg = document.getElementById('hd-msg');\n      msg.innerText = 'Tworz\u0119 obraz...';\n      try{\n        const canvas = await snapshotIframeToPNG(iframe);\n        const dataUrl = canvas.toDataURL('image\/png');\n        const wrap = document.getElementById('hd-snapshot-result');\n        wrap.innerHTML = `\n          <div style=\"display:flex;gap:12px;align-items:center;\">\n            <img decoding=\"async\" id=\"hd-snap-img\" src=\"${dataUrl}\" alt=\"Snapshot\" style=\"max-width:320px;border:1px solid #ccc;padding:6px;background:#fff;border-radius:6px;\"\/>\n            <div>\n              <p style=\"margin:0 0 6px 0\">Kliknij, aby pobra\u0107:<\/p>\n              <a id=\"hd-download-png\" href=\"${dataUrl}\" download=\"humandesign-${(json.name||'chart')}.png\" class=\"hd-btn\">Pobierz PNG<\/a>\n              <button id=\"hd-open-full\" class=\"hd-btn\" style=\"margin-left:8px\">Otw\u00f3rz obraz<\/button>\n            <\/div>\n          <\/div>\n        `;\n        document.getElementById('hd-open-full').addEventListener('click', ()=>window.open(dataUrl));\n        msg.innerText = 'Gotowe.';\n      }catch(err){\n        console.error(err);\n        msg.innerText = 'B\u0142\u0105d przy tworzeniu obrazu. Sprawd\u017a w konsoli.';\n      }\n    });\n\n    document.getElementById('hd-btn-download-html').addEventListener('click', function(){\n      downloadFile(finalUrl, 'humandesign-'+(json.name||'chart')+'.html');\n    });\n\n    document.getElementById('hd-btn-print').addEventListener('click', function(){\n      \/\/ otw\u00f3rz okno print iframe\n      const ifw = iframe.contentWindow;\n      ifw.focus();\n      ifw.print();\n    });\n\n    \/\/ DONE\n    document.getElementById('hd-msg').innerText = 'Wczytano wykres.';\n  };\n\n  \/\/ ---------- Je\u015bli chcesz, aby ten skrypt samodzielnie testowa\u0142 endpoint (opcjonalne) ----------\n  \/\/ Je\u015bli chcesz przetestowa\u0107 r\u0119cznie (bez zmiany istniej\u0105cego submit handlera), odkomentuj poni\u017csze i dostosuj payload:\n  \/*\n  const testPayload = {\n    secret: SECRET,\n    name: 'Test User',\n    email: 'test@example.com',\n    date: '1980-05-22T11:20:00',\n    location: 'Warszawa, Poland'\n  };\n  \/\/ const resp = await fetch(WP_ENDPOINT, {method:'POST', headers:{'Content-Type':'application\/json'}, body:JSON.stringify(testPayload)});\n  \/\/ const jr = await resp.json(); window.handleResult(jr);\n  *\/\n\n})(); \n<\/script>\n\n<style>\n.hd-btn{\n  background:#FEE000;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600;\n}\n.hd-btn:hover{background:#E48C52;color:#fff;}\n<\/style>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\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>Wygeneruj darmowy wykres Human Design Imi\u0119 E-mail Data urodzenia Godzina urodzenia Kraj &#8212; Wybierz kraj &#8212;PolskaNiemcyFrancjaWielka BrytaniaStany Zjednoczone Miasto &#8212; Wybierz kraj najpierw &#8212; Generuj wykres<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-90","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages\/90","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=90"}],"version-history":[{"count":40,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages\/90\/revisions"}],"predecessor-version":[{"id":315,"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/pages\/90\/revisions\/315"}],"wp:attachment":[{"href":"https:\/\/www.humandesigndariamaslowska.com\/index.php\/wp-json\/wp\/v2\/media?parent=90"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}