{"id":35,"date":"2026-04-21T21:43:04","date_gmt":"2026-04-21T19:43:04","guid":{"rendered":"https:\/\/www.mikolajsome.pl\/?page_id=35"},"modified":"2026-04-21T21:44:31","modified_gmt":"2026-04-21T19:44:31","slug":"content-calendar","status":"publish","type":"page","link":"https:\/\/www.mikolajsome.pl\/?page_id=35","title":{"rendered":"content calendar"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\n\n\n\nGenerator Kalendarza Contentu<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --bg: #0a0a0f;\n --surface: #111118;\n --surface2: #18181f;\n --surface3: #1e1e28;\n --border: rgba(255,255,255,0.07);\n --border2: rgba(255,255,255,0.13);\n --accent: #0066ff;\n --accent2: #ff6b35;\n --green: #00c896;\n --gold: #f5a623;\n --text: #f0f0f5;\n --muted: #6b6b80;\n --glow: rgba(0,102,255,0.18);\n --glow-green: rgba(0,200,150,0.18);\n\n --p1: #0066ff; \/* filar 1 \u2014 niebieski *\/\n --p2: #b57aff; \/* filar 2 \u2014 fiolet *\/\n --p3: #ff6b35; \/* filar 3 \u2014 pomara\u0144cz *\/\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n body {\n background: var(--bg); color: var(--text);\n font-family: 'DM Sans', sans-serif; min-height: 100vh; overflow-x: hidden;\n }\n\n body::before {\n content: ''; position: fixed; inset: 0;\n background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'\/%3E%3C\/svg%3E\");\n opacity: 0.5; pointer-events: none; z-index: 0;\n }\n\n .container { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; padding: 40px 20px 80px; }\n\n \/* \u2500\u2500 HEADER \u2500\u2500 *\/\n .header { text-align: center; margin-bottom: 40px; }\n\n .badge {\n display: inline-flex; align-items: center; gap: 6px;\n background: var(--accent); color: #fff;\n font-size: 11px; font-weight: 700; letter-spacing: 0.12em;\n text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 20px;\n }\n .pulse { display: inline-block; width: 8px; height: 8px; background: #fff; border-radius: 50%; position: relative; }\n .pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(255,255,255,0.35); animation: pulseAnim 1.8s ease infinite; }\n @keyframes pulseAnim { 0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.8);opacity:0} }\n\n h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px,12vw,76px); line-height: 0.92; letter-spacing: 0.01em; color: var(--text); margin-bottom: 16px; }\n h1 span { color: var(--accent); display: block; }\n .header p { color: var(--muted); font-size: 15px; line-height: 1.6; font-weight: 300; max-width: 400px; margin: 0 auto; }\n\n \/* \u2500\u2500 CARD \u2500\u2500 *\/\n .card {\n background: var(--surface); border: 1px solid var(--border);\n border-radius: 20px; padding: 32px 28px; margin-bottom: 16px;\n position: relative; overflow: hidden;\n }\n .card::after {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\n background: linear-gradient(90deg, transparent, rgba(0,102,255,0.4), transparent);\n }\n\n .card-title {\n font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 0.08em;\n color: var(--text); margin-bottom: 20px;\n }\n .card-title span { color: var(--accent); }\n\n \/* \u2500\u2500 FIELDS \u2500\u2500 *\/\n .field { margin-bottom: 16px; }\n .field:last-of-type { margin-bottom: 0; }\n\n label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }\n\n input[type=\"text\"] {\n width: 100%; background: var(--surface2); border: 1.5px solid var(--border);\n border-radius: 12px; color: var(--text); font-family: 'DM Sans', sans-serif;\n font-size: 16px; font-weight: 500; padding: 14px 18px; outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n input[type=\"text\"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }\n input[type=\"text\"]::placeholder { color: var(--muted); font-weight: 300; }\n\n \/* PILLAR INPUTS *\/\n .pillar-field { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }\n .pillar-dot { width: 12px; height: 12px; min-width: 12px; border-radius: 50%; }\n .pillar-dot.p1 { background: var(--p1); box-shadow: 0 0 8px rgba(0,102,255,0.5); }\n .pillar-dot.p2 { background: var(--p2); box-shadow: 0 0 8px rgba(181,122,255,0.5); }\n .pillar-dot.p3 { background: var(--p3); box-shadow: 0 0 8px rgba(255,107,53,0.5); }\n\n .pillar-field input:focus { border-color: var(--accent); }\n .pillar-field:nth-child(1) input:focus { border-color: var(--p1); box-shadow: 0 0 0 3px rgba(0,102,255,0.15); }\n .pillar-field:nth-child(2) input:focus { border-color: var(--p2); box-shadow: 0 0 0 3px rgba(181,122,255,0.15); }\n .pillar-field:nth-child(3) input:focus { border-color: var(--p3); box-shadow: 0 0 0 3px rgba(255,107,53,0.15); }\n\n \/* SELECT *\/\n .select-wrap { position: relative; }\n .select-wrap::after { content: '\u25be'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 13px; }\n select {\n width: 100%; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px;\n color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 500;\n padding: 14px 18px; outline: none; cursor: pointer; appearance: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }\n\n \/* \u2500\u2500 GEN BUTTON \u2500\u2500 *\/\n .btn-gen {\n width: 100%; background: var(--accent); color: #fff; border: none; border-radius: 14px;\n font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 0.12em;\n padding: 22px; cursor: pointer; margin-top: 8px;\n transition: transform 0.15s, box-shadow 0.15s; position: relative; overflow: hidden;\n text-shadow: 0 1px 4px rgba(0,0,0,0.25);\n }\n .btn-gen::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.15); transform: translateX(-100%); transition: transform 0.4s; }\n .btn-gen:hover::before { transform: translateX(100%); }\n .btn-gen:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,102,255,0.45); }\n .btn-gen:active { transform: translateY(0); }\n\n .error { color: #ff6b6b; font-size: 13px; margin-top: 8px; display: none; }\n\n \/* \u2500\u2500 CALENDAR SECTION \u2500\u2500 *\/\n .cal-section { display: none; opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1); }\n .cal-section.visible { display: block; opacity: 1; transform: translateY(0); }\n\n .section-header {\n font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: 0.16em;\n color: var(--muted); text-transform: uppercase; margin-bottom: 20px;\n display: flex; align-items: center; gap: 10px;\n }\n .section-header::before, .section-header::after { content: ''; flex: 1; height: 1px; background: var(--border); }\n\n \/* LEGEND *\/\n .legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }\n .legend-item { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }\n .legend-dot { width: 10px; height: 10px; border-radius: 50%; }\n\n \/* MONTH CALENDAR GRID *\/\n .month-cal { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; margin-bottom: 16px; }\n\n .month-header {\n padding: 20px 24px 16px;\n border-bottom: 1px solid var(--border);\n display: flex; align-items: center; justify-content: space-between;\n }\n .month-name { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.06em; color: var(--text); }\n .month-year { font-size: 13px; color: var(--muted); }\n\n .weekdays-row {\n display: grid; grid-template-columns: repeat(7, 1fr);\n border-bottom: 1px solid var(--border);\n }\n .weekday-label {\n padding: 10px 0; text-align: center;\n font-size: 11px; font-weight: 600; letter-spacing: 0.08em;\n text-transform: uppercase; color: var(--muted);\n }\n\n .days-grid { display: grid; grid-template-columns: repeat(7, 1fr); }\n\n .day-cell {\n min-height: 88px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);\n padding: 8px; position: relative; vertical-align: top;\n transition: background 0.15s;\n }\n .day-cell:nth-child(7n) { border-right: none; }\n .day-cell.empty { background: rgba(0,0,0,0.15); }\n .day-cell.today .day-num { background: var(--accent); color: #fff; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }\n\n .day-num { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }\n .day-cell.empty .day-num { opacity: 0.3; }\n\n \/* POST CHIP *\/\n .post-chip {\n border-radius: 6px; padding: 4px 7px; margin-bottom: 4px; font-size: 11px;\n font-weight: 500; line-height: 1.3; cursor: pointer;\n border: 1px solid transparent; transition: opacity 0.15s, transform 0.1s;\n position: relative;\n }\n .post-chip:hover { opacity: 0.85; transform: translateY(-1px); }\n .post-chip.p1 { background: rgba(0,102,255,0.15); border-color: rgba(0,102,255,0.3); color: #7aadff; }\n .post-chip.p2 { background: rgba(181,122,255,0.15); border-color: rgba(181,122,255,0.3); color: #d4aaff; }\n .post-chip.p3 { background: rgba(255,107,53,0.15); border-color: rgba(255,107,53,0.3); color: #ffaa88; }\n .post-chip.custom { background: rgba(0,200,150,0.12); border-color: rgba(0,200,150,0.3); color: #5fffd8; }\n\n .add-btn {\n width: 100%; background: none; border: 1px dashed rgba(255,255,255,0.1); border-radius: 6px;\n color: var(--muted); font-size: 16px; padding: 2px; cursor: pointer;\n transition: border-color 0.2s, color 0.2s; line-height: 1;\n }\n .add-btn:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }\n\n \/* \u2500\u2500 EDIT PANEL \u2500\u2500 *\/\n .edit-panel {\n display: none; background: var(--surface2); border: 1px solid var(--border2);\n border-radius: 16px; padding: 20px 22px; margin-top: 12px;\n }\n .edit-panel.open { display: block; }\n\n .edit-panel-header {\n font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 0.08em;\n color: var(--text); margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between;\n }\n .edit-panel-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; transition: color 0.2s; }\n .edit-panel-close:hover { color: var(--text); }\n\n .edit-chip-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }\n\n .edit-chip-row {\n display: flex; align-items: center; gap: 10px;\n background: var(--surface3); border: 1px solid var(--border); border-radius: 10px;\n padding: 10px 14px;\n }\n .edit-chip-row .chip-dot { width: 8px; height: 8px; min-width: 8px; border-radius: 50%; }\n .edit-chip-row input {\n flex: 1; background: none; border: none; color: var(--text); font-family: 'DM Sans', sans-serif;\n font-size: 14px; font-weight: 500; outline: none; padding: 0;\n }\n .edit-chip-row input::placeholder { color: var(--muted); }\n .del-chip { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; padding: 0 2px; transition: color 0.2s; }\n .del-chip:hover { color: #ff6b6b; }\n\n .add-custom-row { display: flex; gap: 8px; }\n .add-custom-row input[type=\"text\"] { flex: 1; font-size: 14px; padding: 10px 14px; border-radius: 10px; }\n .btn-add-custom {\n background: rgba(0,200,150,0.12); border: 1px solid rgba(0,200,150,0.3);\n color: var(--green); border-radius: 10px; padding: 10px 16px;\n font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;\n cursor: pointer; white-space: nowrap; transition: background 0.15s;\n }\n .btn-add-custom:hover { background: rgba(0,200,150,0.2); }\n\n \/* \u2500\u2500 PDF ROW \u2500\u2500 *\/\n .pdf-row { display: flex; gap: 10px; align-items: stretch; }\n @media(max-width:480px) { .pdf-row { flex-direction: column; } }\n\n .btn-pdf {\n flex: 1; background: linear-gradient(135deg, var(--accent2), #ff9a6c);\n color: #fff; border: none; border-radius: 14px;\n font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 0.1em;\n padding: 20px; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;\n position: relative; overflow: hidden;\n }\n .btn-pdf:hover { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(255,107,53,0.35); }\n .btn-pdf:active { transform: translateY(0); }\n .btn-pdf.unlocked { background: linear-gradient(135deg, var(--green), #00e0b0); color: #0a0a0f; }\n .btn-pdf.unlocked:hover { box-shadow: 0 10px 36px rgba(0,200,150,0.35); }\n\n .btn-regen {\n background: var(--surface2); border: 1.5px solid var(--border);\n color: var(--text); border-radius: 14px; padding: 20px 22px;\n font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 0.08em;\n cursor: pointer; white-space: nowrap; transition: border-color 0.2s, transform 0.15s;\n }\n .btn-regen:hover { border-color: var(--border2); transform: translateY(-2px); }\n\n .unlock-note { font-size: 13px; color: var(--green); text-align: center; margin-top: 8px; display: none; }\n .unlock-note.show { display: block; }\n\n \/* \u2500\u2500 MODAL \u2500\u2500 *\/\n .modal-overlay {\n display: none; position: fixed; inset: 0; z-index: 1000;\n background: rgba(0,0,0,0.78); backdrop-filter: blur(6px);\n align-items: center; justify-content: center; padding: 20px;\n }\n .modal-overlay.open { display: flex; }\n\n .modal {\n background: var(--surface); border: 1px solid var(--border2);\n border-radius: 24px; padding: 40px 32px; width: 100%; max-width: 460px;\n position: relative; overflow: hidden;\n opacity: 0; transform: scale(0.94) translateY(16px);\n animation: modalIn 0.4s cubic-bezier(0.22,1,0.36,1) forwards;\n }\n @keyframes modalIn { to { opacity: 1; transform: scale(1) translateY(0); } }\n .modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,200,150,0.5), transparent); }\n\n .modal-close {\n position: absolute; top: 16px; right: 16px;\n background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;\n color: var(--muted); width: 32px; height: 32px;\n display: flex; align-items: center; justify-content: center;\n cursor: pointer; font-size: 16px; transition: color 0.2s, border-color 0.2s;\n }\n .modal-close:hover { color: var(--text); border-color: var(--border2); }\n\n .modal-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,200,150,0.1); color: var(--green); border: 1px solid rgba(0,200,150,0.25); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin-bottom: 18px; }\n\n .modal h2 { font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 0.02em; line-height: 1; margin-bottom: 8px; }\n .modal h2 span { color: var(--green); }\n .modal-sub { font-size: 14px; color: var(--muted); line-height: 1.6; font-weight: 300; margin-bottom: 24px; }\n .modal-sub strong { color: var(--text); font-weight: 500; }\n\n .modal .field { margin-bottom: 14px; }\n\n input[type=\"email\"] {\n width: 100%; background: var(--surface2); border: 1.5px solid var(--border);\n border-radius: 12px; color: var(--text); font-family: 'DM Sans', sans-serif;\n font-size: 18px; font-weight: 500; padding: 16px 20px; outline: none;\n transition: border-color 0.2s, box-shadow 0.2s;\n }\n input[type=\"email\"]:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--glow-green); }\n input[type=\"email\"]::placeholder { color: var(--muted); font-weight: 300; }\n\n .checkbox-wrap {\n display: flex; align-items: flex-start; gap: 12px; cursor: pointer;\n padding: 14px 16px; background: var(--surface2); border: 1.5px solid var(--border);\n border-radius: 12px; transition: border-color 0.2s; user-select: none;\n }\n .checkbox-wrap:hover { border-color: rgba(255,255,255,0.15); }\n .checkbox-wrap.checked { border-color: rgba(0,200,150,0.3); background: rgba(0,200,150,0.05); }\n .checkbox-wrap input[type=\"checkbox\"] { display: none; }\n .cb-box { width: 20px; height: 20px; min-width: 20px; background: var(--surface3); border: 1.5px solid var(--border2); border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 0.15s; margin-top: 1px; }\n .checkbox-wrap.checked .cb-box { background: var(--green); border-color: var(--green); }\n .cb-box::after { content: '\u2713'; color: #0a0a0f; font-size: 12px; font-weight: 700; opacity: 0; transform: scale(0.5); transition: all 0.15s; }\n .checkbox-wrap.checked .cb-box::after { opacity: 1; transform: scale(1); }\n .cb-text { font-size: 13px; color: var(--muted); line-height: 1.5; }\n .checkbox-wrap.checked .cb-text { color: rgba(240,240,245,0.8); }\n\n .btn-submit {\n width: 100%; background: var(--green); color: #0a0a0f; border: none; border-radius: 14px;\n font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.1em;\n padding: 20px; cursor: pointer; margin-top: 8px;\n transition: transform 0.15s, box-shadow 0.15s; position: relative; overflow: hidden;\n }\n .btn-submit::before { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.2); transform: translateX(-100%); transition: transform 0.4s; }\n .btn-submit:hover::before { transform: translateX(100%); }\n .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,200,150,0.4); }\n .btn-submit.loading { pointer-events: none; opacity: 0.8; }\n .modal-error { color: #ff6b6b; font-size: 13px; margin-top: 8px; display: none; }\n\n \/* \u2500\u2500 UTILS \u2500\u2500 *\/\n .divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }\n .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }\n .footer { text-align: center; margin-top: 48px; color: var(--muted); font-size: 12px; }\n\n @media(max-width:480px) {\n .day-cell { min-height: 64px; padding: 5px; }\n .post-chip { font-size: 10px; padding: 3px 5px; }\n .add-btn { font-size: 14px; }\n .card { padding: 24px 18px; }\n }\n<\/style>\n<\/head>\n<body>\n<div class=\"container\">\n\n <!-- HEADER -->\n <div class=\"header\">\n <div class=\"badge\"><span class=\"pulse\"><\/span>Content Calendar<\/div>\n <h1>Kalendarz<span>Contentu<\/span><\/h1>\n <p>Wpisz 3 filary swojego contentu \u2014 wygenerujesz gotowy kalendarz na ca\u0142y miesi\u0105c.<\/p>\n <\/div>\n\n <!-- STEP 1: FILARY -->\n <div class=\"card\">\n <div class=\"card-title\">Twoje <span>3 filary<\/span> contentu<\/div>\n\n <div class=\"pillar-field\">\n <div class=\"pillar-dot p1\"><\/div>\n <input type=\"text\" id=\"p1\" placeholder=\"np. Edukacja \u2014 jak montowa\u0107 rolki\">\n <\/div>\n <div class=\"pillar-field\">\n <div class=\"pillar-dot p2\"><\/div>\n <input type=\"text\" id=\"p2\" placeholder=\"np. Behind the scenes \u2014 m\u00f3j workflow\">\n <\/div>\n <div class=\"pillar-field\">\n <div class=\"pillar-dot p3\"><\/div>\n <input type=\"text\" id=\"p3\" placeholder=\"np. Sprzeda\u017c \u2014 kursy i us\u0142ugi\">\n <\/div>\n\n <div style=\"margin-top:20px;\">\n <label>Liczba post\u00f3w tygodniowo<\/label>\n <div class=\"select-wrap\">\n <select id=\"freq\">\n <option value=\"3\">3 posty \/ tydzie\u0144<\/option>\n <option value=\"5\" selected>5 post\u00f3w \/ tydzie\u0144<\/option>\n <option value=\"7\">7 post\u00f3w \/ tydzie\u0144<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <p class=\"error\" id=\"form-error\">Uzupe\u0142nij wszystkie 3 filary contentu.<\/p>\n <button class=\"btn-gen\" onclick=\"generate()\">Generuj kalendarz<\/button>\n <\/div>\n\n <!-- STEP 2: CALENDAR -->\n <div class=\"cal-section\" id=\"cal-section\">\n\n <div class=\"section-header\" id=\"cal-title\">Tw\u00f3j plan na miesi\u0105c<\/div>\n\n <!-- LEGEND -->\n <div class=\"legend\" id=\"legend\"><\/div>\n\n <!-- MONTH GRID -->\n <div class=\"month-cal\" id=\"month-cal\"><\/div>\n\n <!-- EDIT PANEL -->\n <div class=\"edit-panel\" id=\"edit-panel\">\n <div class=\"edit-panel-header\">\n <span id=\"edit-panel-title\">Edytuj dzie\u0144<\/span>\n <button class=\"edit-panel-close\" onclick=\"closeEditPanel()\">\u2715<\/button>\n <\/div>\n <div class=\"edit-chip-list\" id=\"edit-chip-list\"><\/div>\n <div class=\"add-custom-row\">\n <input type=\"text\" id=\"custom-input\" placeholder=\"Wpisz w\u0142asny temat\u2026\" onkeydown=\"if(event.key==='Enter')addCustomPost()\">\n <button class=\"btn-add-custom\" onclick=\"addCustomPost()\">+ Dodaj<\/button>\n <\/div>\n <\/div>\n\n <div class=\"divider\">Pobierz sw\u00f3j plan<\/div>\n\n <div class=\"pdf-row\">\n <button class=\"btn-pdf\" id=\"btn-pdf\" onclick=\"handlePdfClick()\">Pobierz PDF<\/button>\n <button class=\"btn-regen\" onclick=\"generate()\">\u21bb Nowy<\/button>\n <\/div>\n <div class=\"unlock-note\" id=\"unlock-note\">\u2713 Mo\u017cesz teraz pobra\u0107 PDF \u2014 pobieranie startuje automatycznie<\/div>\n <\/div>\n\n <div class=\"footer\">Kliknij na dowolny dzie\u0144, \u017ceby edytowa\u0107 tematy lub doda\u0107 w\u0142asne<\/div>\n<\/div>\n\n<!-- MODAL -->\n<div class=\"modal-overlay\" id=\"modal-overlay\" onclick=\"if(event.target===this)closeModal()\">\n <div class=\"modal\">\n <button class=\"modal-close\" onclick=\"closeModal()\">\u2715<\/button>\n <div class=\"modal-badge\">\ud83c\udf81 Bezp\u0142atnie<\/div>\n <h2>Jeden krok<span> do PDF<\/span><\/h2>\n <p class=\"modal-sub\">Wy\u015blemy Ci <strong>Tw\u00f3j kalendarz<\/strong> + dodatkowe materia\u0142y do monta\u017cu i contentu \u2014 prosto na maila.<\/p>\n\n <div class=\"field\">\n <label>Tw\u00f3j e-mail<\/label>\n <input type=\"email\" id=\"m-email\" placeholder=\"np. marek@firma.pl\" autocomplete=\"email\">\n <\/div>\n <div class=\"field\">\n <div class=\"checkbox-wrap\" id=\"cb-wrap\" onclick=\"toggleCb()\">\n <input type=\"checkbox\" id=\"m-consent\">\n <div class=\"cb-box\"><\/div>\n <span class=\"cb-text\">Wyra\u017cam zgod\u0119 na kontakt marketingowy i otrzymywanie materia\u0142\u00f3w edukacyjnych. Mo\u017cesz wypisa\u0107 si\u0119 w dowolnym momencie.<\/span>\n <\/div>\n <\/div>\n\n <p class=\"modal-error\" id=\"m-error\"><\/p>\n <button class=\"btn-submit\" id=\"btn-submit\" onclick=\"submitEmail()\">Wy\u015blij m\u00f3j plan<\/button>\n <div style=\"text-align:center;margin-top:12px;font-size:12px;color:var(--muted);\">\ud83d\udd12 Bez spamu. Mo\u017cesz wypisa\u0107 si\u0119 kiedy chcesz.<\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ \u2550\u2550 CONFIG \u2550\u2550\n const GR_API_KEY = 'YOUR_API_KEY';\n const GR_CAMPAIGN_ID = 'YOUR_CAMPAIGN_ID';\n\n \/\/ \u2550\u2550 STATE \u2550\u2550\n const PILLAR_CLASS = ['p1','p2','p3'];\n const PILLAR_COLORS = ['var(--p1)','var(--p2)','var(--p3)'];\n let pillars = ['','',''];\n let calData = {}; \/\/ { 'YYYY-MM-DD': [{label, pillar, text},...] }\n let editingDate = null;\n let pdfUnlocked = !!localStorage.getItem('gr_email');\n\n const DAYS_SHORT = ['Pon','Wt','\u015ar','Czw','Pt','Sob','Nd'];\n const MONTHS_PL = ['Stycze\u0144','Luty','Marzec','Kwiecie\u0144','Maj','Czerwiec','Lipiec','Sierpie\u0144','Wrzesie\u0144','Pa\u017adziernik','Listopad','Grudzie\u0144'];\n\n \/\/ \u2550\u2550 GENERATE \u2550\u2550\n function generate() {\n const p1 = document.getElementById('p1').value.trim();\n const p2 = document.getElementById('p2').value.trim();\n const p3 = document.getElementById('p3').value.trim();\n const err = document.getElementById('form-error');\n if (!p1 || !p2 || !p3) { err.style.display = 'block'; return; }\n err.style.display = 'none';\n\n pillars = [p1, p2, p3];\n const freq = parseInt(document.getElementById('freq').value);\n\n \/\/ Build calendar for current month\n const now = new Date();\n const year = now.getFullYear();\n const month = now.getMonth();\n\n calData = buildMonthData(year, month, freq);\n\n renderLegend();\n renderMonth(year, month);\n\n const sec = document.getElementById('cal-section');\n sec.style.display = 'block';\n requestAnimationFrame(() => requestAnimationFrame(() => {\n sec.classList.add('visible');\n sec.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n }));\n\n updatePdfBtn();\n }\n\n function buildMonthData(year, month, freq) {\n const data = {};\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n const firstDay = (new Date(year, month, 1).getDay() + 6) % 7; \/\/ Mon=0\n\n \/\/ Collect all valid dates\n const allDates = [];\n for (let d = 1; d <= daysInMonth; d++) {\n allDates.push(new Date(year, month, d));\n }\n\n \/\/ Distribute posts: freq per week, spread evenly Mon\u2013Sun\n const postDates = [];\n let weekDays = [];\n allDates.forEach((date, i) => {\n const dow = (date.getDay() + 6) % 7;\n weekDays.push(date);\n if (dow === 6 || i === allDates.length - 1) {\n \/\/ End of week \u2014 pick `freq` days from this week\n const picked = shuffle([...weekDays]).slice(0, Math.min(freq, weekDays.length));\n picked.sort((a,b) => a-b);\n postDates.push(...picked);\n weekDays = [];\n }\n });\n\n \/\/ Assign pillars round-robin\n postDates.forEach((date, i) => {\n const key = dateKey(date);\n const pillarIdx = i % 3;\n if (!data[key]) data[key] = [];\n data[key].push({ pillar: pillarIdx, text: pillars[pillarIdx] });\n });\n\n return data;\n }\n\n function dateKey(d) {\n return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;\n }\n\n function shuffle(arr) { return [...arr].sort(() => Math.random() - 0.5); }\n\n \/\/ \u2550\u2550 RENDER LEGEND \u2550\u2550\n function renderLegend() {\n const el = document.getElementById('legend');\n el.innerHTML = pillars.map((p,i) => `\n <div class=\"legend-item\">\n <div class=\"legend-dot\" style=\"background:${PILLAR_COLORS[i]}\"><\/div>\n ${p}\n <\/div>\n `).join('') + `\n <div class=\"legend-item\">\n <div class=\"legend-dot\" style=\"background:var(--green)\"><\/div>\n W\u0142asny temat\n <\/div>\n `;\n }\n\n \/\/ \u2550\u2550 RENDER MONTH \u2550\u2550\n function renderMonth(year, month) {\n const daysInMonth = new Date(year, month + 1, 0).getDate();\n const firstDow = (new Date(year, month, 1).getDay() + 6) % 7;\n const todayKey = dateKey(new Date());\n\n document.getElementById('cal-title').textContent = `${MONTHS_PL[month]} ${year}`;\n\n let html = `\n <div class=\"month-header\">\n <div>\n <div class=\"month-name\">${MONTHS_PL[month]}<\/div>\n <div class=\"month-year\">${year}<\/div>\n <\/div>\n <\/div>\n <div class=\"weekdays-row\">\n ${DAYS_SHORT.map(d => `<div class=\"weekday-label\">${d}<\/div>`).join('')}\n <\/div>\n <div class=\"days-grid\">\n `;\n\n \/\/ Empty cells before first day\n for (let e = 0; e < firstDow; e++) {\n html += `<div class=\"day-cell empty\"><div class=\"day-num\"><\/div><\/div>`;\n }\n\n for (let d = 1; d <= daysInMonth; d++) {\n const date = new Date(year, month, d);\n const key = dateKey(date);\n const isToday = key === todayKey;\n const posts = calData[key] || [];\n\n const chipsHtml = posts.map((p, pi) => {\n const cls = p.custom ? 'custom' : PILLAR_CLASS[p.pillar];\n const short = p.text.length > 22 ? p.text.slice(0,20)+'\u2026' : p.text;\n return `<div class=\"post-chip ${cls}\" title=\"${p.text}\" onclick=\"openEditPanel('${key}',event)\">${short}<\/div>`;\n }).join('');\n\n html += `\n <div class=\"day-cell${isToday ? ' today' : ''}\" id=\"cell-${key}\">\n <div class=\"day-num\">${d}<\/div>\n ${chipsHtml}\n <button class=\"add-btn\" onclick=\"openEditPanel('${key}',event)\" title=\"Dodaj temat\">+<\/button>\n <\/div>\n `;\n }\n\n \/\/ Fill remaining row\n const total = firstDow + daysInMonth;\n const remaining = (7 - (total % 7)) % 7;\n for (let e = 0; e < remaining; e++) {\n html += `<div class=\"day-cell empty\"><div class=\"day-num\"><\/div><\/div>`;\n }\n\n html += `<\/div>`;\n document.getElementById('month-cal').innerHTML = html;\n }\n\n \/\/ \u2550\u2550 EDIT PANEL \u2550\u2550\n function openEditPanel(key, e) {\n e.stopPropagation();\n editingDate = key;\n\n const [y, m, d] = key.split('-');\n const dow = (new Date(+y, +m-1, +d).getDay() + 6) % 7;\n document.getElementById('edit-panel-title').textContent = `${DAYS_SHORT[dow]}, ${+d} ${MONTHS_PL[+m-1]}`;\n\n renderEditPanel();\n const panel = document.getElementById('edit-panel');\n panel.classList.add('open');\n panel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n document.getElementById('custom-input').value = '';\n }\n\n function renderEditPanel() {\n const posts = calData[editingDate] || [];\n const el = document.getElementById('edit-chip-list');\n\n if (posts.length === 0) {\n el.innerHTML = '<div style=\"font-size:13px;color:var(--muted);padding:4px 0;\">Brak temat\u00f3w na ten dzie\u0144. Dodaj sw\u00f3j w\u0142asny!<\/div>';\n return;\n }\n\n el.innerHTML = posts.map((p, i) => {\n const cls = p.custom ? 'custom' : PILLAR_CLASS[p.pillar];\n const color = p.custom ? 'var(--green)' : PILLAR_COLORS[p.pillar];\n return `\n <div class=\"edit-chip-row\">\n <div class=\"chip-dot\" style=\"background:${color}\"><\/div>\n <input type=\"text\" value=\"${escHtml(p.text)}\" placeholder=\"Temat\u2026\"\n onchange=\"updatePost(${i}, this.value)\" onblur=\"updatePost(${i}, this.value)\">\n <button class=\"del-chip\" onclick=\"deletePost(${i})\" title=\"Usu\u0144\">\u00d7<\/button>\n <\/div>\n `;\n }).join('');\n }\n\n function updatePost(idx, val) {\n if (calData[editingDate] && calData[editingDate][idx]) {\n calData[editingDate][idx].text = val;\n refreshCell(editingDate);\n }\n }\n\n function deletePost(idx) {\n if (calData[editingDate]) {\n calData[editingDate].splice(idx, 1);\n refreshCell(editingDate);\n renderEditPanel();\n }\n }\n\n function addCustomPost() {\n const input = document.getElementById('custom-input');\n const text = input.value.trim();\n if (!text) return;\n\n if (!calData[editingDate]) calData[editingDate] = [];\n calData[editingDate].push({ pillar: 0, custom: true, text });\n input.value = '';\n refreshCell(editingDate);\n renderEditPanel();\n }\n\n function closeEditPanel() {\n document.getElementById('edit-panel').classList.remove('open');\n editingDate = null;\n }\n\n function refreshCell(key) {\n const cell = document.getElementById(`cell-${key}`);\n if (!cell) return;\n const posts = calData[key] || [];\n const [y, m, d] = key.split('-');\n const todayKey = dateKey(new Date());\n const isToday = key === todayKey;\n\n const chipsHtml = posts.map((p, pi) => {\n const cls = p.custom ? 'custom' : PILLAR_CLASS[p.pillar];\n const short = p.text.length > 22 ? p.text.slice(0,20)+'\u2026' : p.text;\n return `<div class=\"post-chip ${cls}\" title=\"${p.text}\" onclick=\"openEditPanel('${key}',event)\">${short}<\/div>`;\n }).join('');\n\n cell.innerHTML = `\n <div class=\"day-num\">${+d}<\/div>\n ${chipsHtml}\n <button class=\"add-btn\" onclick=\"openEditPanel('${key}',event)\">+<\/button>\n `;\n if (isToday) cell.classList.add('today');\n }\n\n \/\/ \u2550\u2550 PDF FLOW \u2550\u2550\n function handlePdfClick() {\n if (pdfUnlocked) { downloadPDF(); return; }\n openModal();\n }\n\n function updatePdfBtn() {\n const btn = document.getElementById('btn-pdf');\n const note = document.getElementById('unlock-note');\n if (pdfUnlocked) {\n btn.classList.add('unlocked');\n btn.textContent = '\u2193 Pobierz PDF';\n note.classList.add('show');\n }\n }\n\n \/\/ \u2550\u2550 MODAL \u2550\u2550\n function openModal() {\n document.getElementById('modal-overlay').classList.add('open');\n document.body.style.overflow = 'hidden';\n const saved = localStorage.getItem('gr_email');\n if (saved) document.getElementById('m-email').value = saved;\n }\n\n function closeModal() {\n document.getElementById('modal-overlay').classList.remove('open');\n document.body.style.overflow = '';\n }\n\n function toggleCb() {\n const cb = document.getElementById('m-consent');\n const wrap = document.getElementById('cb-wrap');\n cb.checked = !cb.checked;\n wrap.classList.toggle('checked', cb.checked);\n }\n\n document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });\n\n async function submitEmail() {\n const email = document.getElementById('m-email').value.trim();\n const consent = document.getElementById('m-consent').checked;\n const errEl = document.getElementById('m-error');\n const btn = document.getElementById('btn-submit');\n\n const emailRx = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n if (!email || !emailRx.test(email)) {\n errEl.textContent = 'Wpisz poprawny adres e-mail.';\n errEl.style.display = 'block'; return;\n }\n if (!consent) {\n errEl.textContent = 'Zaznacz zgod\u0119 marketingow\u0105, aby kontynuowa\u0107.';\n errEl.style.display = 'block'; return;\n }\n errEl.style.display = 'none';\n\n btn.classList.add('loading');\n btn.textContent = 'Wysy\u0142am\u2026';\n\n localStorage.setItem('gr_email', email);\n\n try {\n await fetch('https:\/\/api.getresponse.com\/v3\/contacts', {\n method: 'POST',\n headers: { 'Content-Type': 'application\/json', 'X-Auth-Token': `api-key ${GR_API_KEY}` },\n body: JSON.stringify({ email, campaign: { campaignId: GR_CAMPAIGN_ID } })\n });\n } catch(e) { \/* fail-safe *\/ }\n\n btn.classList.remove('loading');\n btn.textContent = 'Wy\u015blij m\u00f3j plan';\n\n pdfUnlocked = true;\n closeModal();\n updatePdfBtn();\n setTimeout(downloadPDF, 500);\n }\n\n \/\/ \u2550\u2550 PDF DOWNLOAD \u2550\u2550\n function downloadPDF() {\n const now = new Date();\n const year = now.getFullYear();\n const month = now.getMonth();\n\n const rows = Object.entries(calData).sort(([a],[b]) => a.localeCompare(b)).flatMap(([key, posts]) => {\n const [y, m, d] = key.split('-');\n const dow = (new Date(+y, +m-1, +d).getDay() + 6) % 7;\n return posts.map(p => {\n const pillarLabel = p.custom ? '\u2b50 W\u0142asny' : `Filar ${p.pillar + 1}: ${pillars[p.pillar]}`;\n const color = p.custom ? '#00c896' : ['#0066ff','#b57aff','#ff6b35'][p.pillar];\n return `<tr>\n <td>${DAYS_SHORT[dow]}, ${+d} ${MONTHS_PL[+m-1]}<\/td>\n <td style=\"color:${color};font-weight:600\">${pillarLabel}<\/td>\n <td>${escHtml(p.text)}<\/td>\n <\/tr>`;\n });\n }).join('');\n\n const legendRows = pillars.map((p,i) => {\n const colors = ['#0066ff','#b57aff','#ff6b35'];\n return `<li><span style=\"color:${colors[i]};font-weight:700\">Filar ${i+1}:<\/span> ${p}<\/li>`;\n }).join('');\n\n const html = `<!DOCTYPE html><html><head><meta charset=\"UTF-8\">\n<title>Kalendarz Contentu \u2014 ${MONTHS_PL[month]} ${year}<\/title>\n<style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:wght@400;500;700&display=swap');\n *{box-sizing:border-box;margin:0;padding:0}\n body{font-family:'DM Sans',sans-serif;padding:32px;color:#111;font-size:13px}\n h1{font-size:26px;font-weight:700;margin-bottom:6px}\n .sub{color:#555;font-size:13px;margin-bottom:20px}\n .legend{background:#f5f5f5;border-radius:8px;padding:14px 18px;margin-bottom:24px}\n .legend h3{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:#888;margin-bottom:10px}\n .legend ul{list-style:none;display:flex;gap:20px;flex-wrap:wrap}\n .legend li{font-size:13px}\n table{width:100%;border-collapse:collapse}\n th{background:#0a0a0f;color:#fff;padding:10px 14px;text-align:left;font-size:11px;letter-spacing:0.08em;text-transform:uppercase}\n td{padding:10px 14px;border-bottom:1px solid #eee;vertical-align:top}\n tr:nth-child(even) td{background:#fafafa}\n @media print{body{padding:16px}}\n<\/style><\/head><body>\n <h1>\ud83d\udcc5 Kalendarz Contentu<\/h1>\n <p class=\"sub\">${MONTHS_PL[month]} ${year} \u00b7 Wygenerowano ${new Date().toLocaleDateString('pl-PL')}<\/p>\n <div class=\"legend\">\n <h3>Filary contentu<\/h3>\n <ul>${legendRows}<li><span style=\"color:#00c896;font-weight:700\">\u2b50<\/span> W\u0142asny temat<\/li><\/ul>\n <\/div>\n <table>\n <thead><tr><th>Data<\/th><th>Filar<\/th><th>Temat<\/th><\/tr><\/thead>\n <tbody>${rows || '<tr><td colspan=\"3\" style=\"color:#999;text-align:center;padding:20px\">Brak wpis\u00f3w<\/td><\/tr>'}<\/tbody>\n <\/table>\n <p style=\"margin-top:24px;color:#bbb;font-size:11px\">Wygenerowano przez Generator Kalendarza Contentu<\/p>\n<\/body><\/html>`;\n\n const win = window.open('', '_blank');\n if (!win) { alert('Zezw\u00f3l na wyskakuj\u0105ce okienka, aby pobra\u0107 PDF.'); return; }\n win.document.write(html);\n win.document.close();\n win.focus();\n setTimeout(() => win.print(), 600);\n }\n\n function escHtml(s) {\n return String(s).replace(\/&\/g,'&').replace(\/<\/g,'<').replace(\/>\/g,'>').replace(\/\"\/g,'"');\n }\n<\/script>\n<\/body>\n<\/html><\/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>Generator Kalendarza Contentu Content Calendar KalendarzContentu Wpisz 3 filary swojego contentu \u2014 wygenerujesz gotowy kalendarz na ca\u0142y miesi\u0105c. Twoje 3 filary contentu Liczba post\u00f3w tygodniowo 3 posty \/ tydzie\u01445 post\u00f3w \/ tydzie\u01447 post\u00f3w \/ tydzie\u0144 Uzupe\u0142nij wszystkie 3 filary contentu. Generuj kalendarz Tw\u00f3j plan na miesi\u0105c Edytuj dzie\u0144 \u2715 + Dodaj Pobierz sw\u00f3j plan Pobierz […]<\/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-35","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=35"}],"version-history":[{"count":4,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=\/wp\/v2\/pages\/35\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/www.mikolajsome.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}