DARMOWE NARZĘDZIE

Konwerter słów do HTML

Zamien specjalne znaki tekstu na bezpieczne encje HTML. Unikaj XSS i problemow z renderowaniem. Bezpłatnie. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Keep formatting

Convert headings

Format wyjściowy

Wrap in article

Docx

Plik zostanie użyty tylko podczas przetwarzania.

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Konwerter tekstu do bezpiecznych encji HTML online

Wklejanie nieprzefiltrowanego tekstu do HTML moze powodowac bledy renderowania lub XSS. Konwerter zamienia < > & i " na encje HTML: < > & "

konwerter HTML entities escape HTML XSS zapobieganie encje HTML

Znaki specjalne HTML

< → < (less than). > → > (greater than). & → & (ampersand). " → " (double quote). ' (single quote, HTML5). Brak escapowania = bledy parsowania lub XSS.

XSS i bezpieczenstwo

Cross-Site Scripting: atakujacy wstrzykuje w nieescapowane pole. Escape HTML po stronie serwera (nie tylko JS) blokuje ten typ ataku.

Najczęstsze pytania

Czy encje HTML dzialaja w atrybutach?

W atrybutach cudzyslow tez wymaga escapowania: class="<value>". Encje numeryczne < sa rowniez poprawne.

Jaka roznica miedzy a spacja?

= non-breaking space – przegladarka nie zlamie linii przy tym znaku. Zwykla spacja pozwala na zalamanie linii.

Gdzie nie trzeba escapowac HTML?

W blokach (wartosci jako tekst, nie markup). W atrybutach onclick/onload trzeba dodatkowo escapowac JavaScript.</p></details><p>Inne narzedzia webdev: konwerter slow do ODT i generator HTML.</p></div> </div> </div> </div> </div> </section> </div> </div> </div> </div>  </div>  <footer id="saas-footer" class="mt-auto"> <style> /* === GLOBAL FOOTER RESET === */ #saas-footer { position: relative; background-color: #f8fafc; padding-top: 5rem; padding-bottom: 2rem; color: #64748b; /* Slate 500 */ font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 0.95rem; overflow: hidden; border-top: 0; } /* 1. TECHNICZNE TŁO (GRID) */ #saas-footer::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(15, 23, 42, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.03) 1px, transparent 1px); background-size: 40px 40px; z-index: 0; pointer-events: none; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,1)); } /* 2. GRADIENTOWA LINIA NA GÓRZE */ #saas-footer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.3) 20%, #2563eb 50%, rgba(37, 99, 235, 0.3) 80%, transparent 100%); box-shadow: 0 1px 10px rgba(37, 99, 235, 0.2); z-index: 1; } .footer-content { position: relative; z-index: 2; } /* === 3. BRANDING SECTION (LOGO + SLOGAN) === */ .footer-brand-section { text-align: center; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(226, 232, 240, 0.6); } .footer-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none !important; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .footer-logo:hover { transform: scale(1.05); } .footer-logo-text { font-size: 1.75rem; font-weight: 800; color: #0f172a; letter-spacing: -0.03em; line-height: 1; } .footer-tagline { margin-top: 1rem; font-size: 1.05rem; color: #64748b; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.6; } /* === 4. SOCIAL ICONS === */ .social-section { text-align: center; margin-bottom: 3.5rem; } .social-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: #94a3b8; margin-bottom: 1rem; display: block; } .social-grid { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .social-btn { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #fff; color: #64748b; border: 1px solid #e2e8f0; transition: all 0.3s; text-decoration: none !important; box-shadow: 0 2px 5px rgba(0,0,0,0.03); } .social-btn:hover { transform: translateY(-4px); border-color: #2563eb; color: #2563eb; box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.2); } /* === 5. WIDGETS (LINKI) === */ .footer-widget-area { margin-top: 2rem; } /* Resetowanie nagłówków z CMS */ .footer-widget-area h1, .footer-widget-area h2, .footer-widget-area h3, .footer-widget-area h4, .footer-widget-area h5, .footer-widget-area strong { color: #0f172a; font-weight: 700; font-size: 0.95rem; margin-bottom: 1.2rem; display: block; letter-spacing: -0.01em; } .footer-widget-area ul { list-style: none; padding: 0; margin: 0; } .footer-widget-area li { margin-bottom: 0.7rem; } .footer-widget-area a { color: #64748b; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; font-size: 0.9rem; } .footer-widget-area a:hover { color: #2563eb; transform: translateX(3px); } /* === 6. COPYRIGHT === */ .footer-copyright { border-top: 1px solid rgba(226, 232, 240, 0.8); margin-top: 4rem; padding: 2rem 0; text-align: center; font-size: 0.85rem; color: #94a3b8; background: rgba(255,255,255,0.4); } .footer-copyright p { margin: 0; } .footer-copyright a { color: inherit; text-decoration: none; } </style> <div class="footer-content container"> <div class="footer-brand-section"> <a href="https://webp.pl" class="footer-logo"> <svg width="42" height="42" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="footerLogoGradient" x1="0" y1="0" x2="32" y2="32" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="#2563eb" /> <stop offset="100%" stop-color="#7c3aed" /> </linearGradient> </defs> <rect x="0" y="0" width="32" height="32" rx="8" fill="url(#footerLogoGradient)" opacity="0.1" /> <path d="M8 10C8 8.89543 8.89543 8 10 8H16C17.1046 8 18 8.89543 18 10V16C18 17.1046 17.1046 18 16 18H10C8.89543 18 8 17.1046 8 16V10Z" fill="url(#footerLogoGradient)" /> <path d="M14 14C14 12.8954 14.8954 12 16 12H22C23.1046 12 24 12.8954 24 14V20C24 21.1046 23.1046 22 22 22H16C14.8954 22 14 21.1046 14 20V14Z" fill="url(#footerLogoGradient)" fill-opacity="0.6" /> </svg> <span class="footer-logo-text">WebP<span style="color: #2563eb">.pl</span></span> </a> <p class="footer-tagline"> Szybkie narzędzia online do pracy, nauki i plików.<br> Działa w przeglądarce, bez rejestracji. </p> </div> <div class="row footer-widget-area justify-content-center"> <div class="col-12 text-center"> <div > <div ><a href="https://webp.pl/o-nas" rel="noopener noreferrer"> O nas </a> <span >|</span> <a href="https://webp.pl/o-stronie" rel="noopener noreferrer"> O stronie </a> <span >|</span> <a href="https://webp.pl/polityka-prywatnosci" rel="noopener noreferrer"> Polityka prywatności </a> <span >|</span> <a href="https://webp.pl/regulamin-serwisu" rel="noopener noreferrer"> Regulamin serwisu </a></div> </div> </div> </div> </div> <div class="footer-copyright"> <div class="container"> <div id="content-skin-tex"><footer class="footer"> <div class="footer-inner"><nav class="footer-nav"></nav> <div class="footer-line"> </div> <p class="footer-copy">© 2026 WebP.pl — wszystkie prawa zastrzeżone.</p> </div> </footer></div> </div> </div> </footer>  <script src="https://webp.pl/assets/js/main.min.js" defer></script> <script> document.addEventListener('DOMContentLoaded', function() { (function( $ ) { "use strict"; if (jQuery('.navbar').hasClass('sticky-top')) { jQuery('.sidebars .sticky-top').css('top','70px'); } })( window.jQuery ); }); </script> </div> <script src="https://webp.pl/vendor/livewire/livewire.js?id=de3fca26689cb5a39af4" data-turbo-eval="false" data-turbolinks-eval="false" ></script><script data-turbo-eval="false" data-turbolinks-eval="false" >window.livewire = new Livewire({"defer":true});window.Livewire = window.livewire;window.livewire_app_url = 'https://webp.pl';window.livewire_token = 'e6WUgFssGgH6N7iQeQHN3XFvsK29v1tx23aVryfu';window.deferLoadingAlpine = function (callback) {window.addEventListener('livewire:load', function () {callback();});};let started = false;window.addEventListener('alpine:initializing', function () {if (! started) {window.livewire.start();started = true;}});document.addEventListener("DOMContentLoaded", function () {if (! started) {window.livewire.start();started = true;}});</script> <style id="nav-menu-overrides"> :root{ --nav-ink:#0f172a; --nav-muted:#64748b; --nav-p1: var(--tblr-primary, #3b82f6); --nav-p2: var(--tblr-info, #06b6d4); --nav-br: color-mix(in oklab, var(--tblr-border-color,#e5e7eb) 75%, transparent); } /* pasek */ body header.navbar.d-print-none{ position:sticky; top:0; backdrop-filter: blur(10px); background: rgba(255,255,255,.78) !important; border-bottom: 1px solid var(--nav-br); transition: box-shadow .25s ease, background-color .25s ease, border-color .25s ease; z-index: 1030; isolation:isolate; } body header.navbar.d-print-none.is-scrolled{ background: rgba(255,255,255,.92) !important; box-shadow: 0 10px 30px rgba(16,24,40,.10); border-color: color-mix(in oklab, var(--tblr-border-color,#e5e7eb) 85%, transparent); } /* pasek postępu przewijania */ body header.navbar.d-print-none::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width: var(--scrollx, 0%); background: linear-gradient(90deg, var(--nav-p1), var(--nav-p2)); box-shadow: 0 0 12px color-mix(in oklab, var(--nav-p1) 60%, transparent); transition: width .1s linear; } /* linki główne */ body .navbar .nav-link{ position:relative; padding:.6rem .8rem; color:var(--nav-ink) !important; border-radius:.6rem; transition: color .15s ease, background-color .15s ease, transform .15s ease; } body .navbar .nav-link:hover{ color:var(--nav-p1) !important; background:rgba(2,132,199,.06) !important; transform:translateY(-1px); } body .navbar .nav-link.active, body .navbar .dropdown.show > .nav-link{ color:#0b5ed7 !important; background:rgba(59,130,246,.10) !important; } body .navbar .nav-link::after{ content:""; position:absolute; left:.8rem; right:.8rem; bottom:.35rem; height:2px; background: linear-gradient(90deg, var(--nav-p1), var(--nav-p2)); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; border-radius:2px; } body .navbar .nav-link:hover::after, body .navbar .nav-link.active::after, body .navbar .dropdown.show > .nav-link::after{ transform: scaleX(1); } /* PRZYCISKI W MENU – ujednolicone */ body .navbar .btn, body .navbar .btn-default, body .navbar .btn-primary{ --btn-bg: linear-gradient(92deg, var(--nav-p1), var(--nav-p2)); background: var(--btn-bg) !important; color:#fff !important; border:0 !important; border-radius:.7rem; padding:.5rem .9rem; line-height:1.2; box-shadow:0 10px 22px rgba(59,130,246,.25); transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; } body .navbar .btn:hover{ filter:saturate(1.05) brightness(.98); transform: translateY(-1px); } body .navbar .btn:active{ transform: translateY(0); box-shadow:0 6px 16px rgba(59,130,246,.25); } /* warianty outline w pasku – robią się „szklane” */ body .navbar .btn-outline, body .navbar .btn-outline-primary, body .navbar .btn-default.border-0.shadow-none{ background: color-mix(in oklab, #fff 70%, transparent) !important; color: var(--nav-p1) !important; border:1px solid color-mix(in oklab, var(--nav-p1) 40%, #c7d2fe) !important; box-shadow:0 6px 16px rgba(2,132,199,.12); } body .navbar .btn-outline:hover{ background: color-mix(in oklab, var(--nav-p1) 8%, #fff) !important; } /* dropdowny 1–2 poziom */ body .dropdown-menu{ background: rgba(255,255,255,.98) !important; border:1px solid color-mix(in oklab, var(--tblr-border-color,#e5e7eb) 80%, transparent) !important; box-shadow: 0 18px 42px rgba(16,24,40,.14) !important; border-radius:.9rem !important; padding:.5rem !important; min-width:14rem; transform-origin: top left; animation: dmFade .15s ease-out; } @keyframes dmFade{ from{opacity:0; transform: translateY(6px) scale(.98)} to{opacity:1; transform: translateY(0) scale(1)} } body .dropdown-menu::before{ content:""; display:block; height:3px; margin:-.5rem -.5rem .35rem; background: linear-gradient(90deg, var(--nav-p1), var(--nav-p2)); border-top-left-radius:.9rem; border-top-right-radius:.9rem; opacity:.15; } body .dropdown-item{ color:var(--nav-ink) !important; border-radius:.5rem !important; padding:.55rem .8rem !important; transition: background-color .12s ease, transform .12s ease; } body .dropdown-item:hover{ background: color-mix(in oklab, var(--tblr-primary-lt,#dbeafe) 42%, #fff) !important; transform: translateX(1px); } body .dropdown-item.active{ color:#0b5ed7 !important; background: color-mix(in oklab, var(--tblr-primary-lt,#dbeafe) 55%, #fff) !important; } body .dropdown-item i{ opacity:.9 } /* strzałka w pozycji submenu */ body .dropdown-item.dropdown-toggle::after{ content:"›"; border:0; margin-left:.5rem; float:right; transform:translateX(.15rem); } /* dropend (submenu na prawo) – desktop hover */ @media (min-width: 992px){ body .dropend:hover > .dropdown-menu{ display:block; position:absolute; top:0; left:100%; margin-left:.35rem; margin-top:0; } } /* focus ring dla klawiatury */ body .navbar a:focus, body .dropdown-item:focus{ outline:0; box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--nav-p1) 22%, transparent); } /* toggler */ body .navbar-toggler{ border:1px solid var(--nav-br) !important; border-radius:.6rem; padding:.35rem .5rem; background: rgba(255,255,255,.65); } body .navbar-toggler:focus{ box-shadow:0 0 0 .2rem color-mix(in oklab, var(--nav-p1) 18%, transparent) !important; } body .navbar-toggler-icon{ background-image:none !important; width:1.25rem; height:1.25rem; position:relative; display:inline-block; } body .navbar-toggler-icon::before, body .navbar-toggler-icon::after{ content:""; position:absolute; left:0; right:0; height:2px; background:#0f172a; border-radius:2px; } body .navbar-toggler-icon::before{ top:4px } body .navbar-toggler-icon::after{ bottom:4px } /* DARK MODE (oba warianty klas) */ body.theme-dark header.navbar.d-print-none, body[data-bs-theme="dark"] header.navbar.d-print-none{ background: rgba(15,23,42,.72) !important; border-color: rgba(148,163,184,.25); } body.theme-dark header.navbar.d-print-none.is-scrolled, body[data-bs-theme="dark"] header.navbar.d-print-none.is-scrolled{ background: rgba(15,23,42,.88) !important; box-shadow: 0 10px 30px rgba(0,0,0,.35); } body.theme-dark .navbar .nav-link, body[data-bs-theme="dark"] .navbar .nav-link{ color:#e2e8f0 !important; } body.theme-dark .navbar .nav-link:hover, body[data-bs-theme="dark"] .navbar .nav-link:hover{ background: rgba(2,132,199,.12) !important; } body.theme-dark .dropdown-menu, body[data-bs-theme="dark"] .dropdown-menu{ background: rgba(2,6,23,.98) !important; border-color: rgba(148,163,184,.22) !important; } body.theme-dark .dropdown-item, body[data-bs-theme="dark"] .dropdown-item{ color:#e2e8f0 !important; } body.theme-dark .dropdown-item:hover, body[data-bs-theme="dark"] .dropdown-item:hover{ background: rgba(59,130,246,.18) !important; } /* redukcja ruchu */ @media (prefers-reduced-motion: reduce){ body *{ transition:none !important; animation:none !important } } </style> <script> // cień po scrollu + pasek postępu w headerze (function(){ var el = document.querySelector('header.navbar.d-print-none'); if(!el) return; function onScroll(){ if(window.scrollY > 6){ el.classList.add('is-scrolled'); } else { el.classList.remove('is-scrolled'); } var h = document.documentElement; var t = h.scrollTop || document.body.scrollTop; var b = (h.scrollHeight - h.clientHeight) || 1; var p = Math.max(0, Math.min(1, t / b)) * 100; el.style.setProperty('--scrollx', p + '%'); } onScroll(); window.addEventListener('scroll', onScroll, {passive:true}); window.addEventListener('resize', onScroll); })(); </script> <script> // Usuń 'active' z linków zewnętrznych (CMS może je dodać) (function(){ var host = location.host; document.querySelectorAll('.navbar .nav-link.active, .dropdown-item.active').forEach(function(el){ var href = el.getAttribute('href') || ''; try{ var u = new URL(href, location.href); if(u.host && u.host !== host){ el.classList.remove('active'); } }catch(e){} }); })(); </script> <style id="modern-upgrades"> /* 1) Płynna typografia i odstępy */ :root{ --fs-xxl: clamp(2rem, 1.1rem + 3vw, 3.25rem); --fs-xl: clamp(1.5rem, 1rem + 2vw, 2.25rem); --fs-lg: clamp(1.125rem, .95rem + .6vw, 1.25rem); --rad: 16px; --rad-lg: 22px; --rad-xl: 28px; --gap: clamp(.75rem, .5rem + .8vw, 1.25rem); } h1,h2{ letter-spacing:-.02em } /* 2) Karty narzędzi – gradient border + glow */ #tools-box .card{ border-radius: var(--rad-lg); border:1px solid color-mix(in oklab, var(--tblr-border-color) 75%, transparent); position:relative; overflow:hidden; } #tools-box .card::before{ content:""; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(120deg, color-mix(in oklab, var(--tblr-primary) 40%, transparent), color-mix(in oklab, var(--tblr-info) 40%, transparent)); opacity:.18; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); padding:1px; -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } #tools-box .item-box{ border-radius: var(--rad); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; background: color-mix(in oklab, #fff 90%, transparent); } #tools-box .item-box:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,24,40,.10); background: color-mix(in oklab, var(--tblr-primary-lt) 18%, #fff); } /* 3) FAQ (details/summary) – eleganckie */ #content-skin-tex details{ border:1px solid color-mix(in oklab, var(--tblr-border-color) 80%, transparent); border-radius: var(--rad); padding:.6rem .9rem; background: rgba(255,255,255,.6); margin-bottom:.75rem; } #content-skin-tex details[open]{ background: color-mix(in oklab, var(--tblr-primary-lt) 22%, #fff) } #content-skin-tex summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:.5rem } #content-skin-tex summary::before{ content:"▸"; transition: transform .15s ease; opacity:.7; } #content-skin-tex details[open] summary::before{ transform: rotate(90deg) } /* 4) Płynne przewijanie i offset dla kotwic */ html{ scroll-behavior:smooth } :target{ scroll-margin-top: 96px } /* 5) Przycisk „do góry” */ .to-top{ position:fixed; right:16px; bottom:16px; z-index:1040; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background: linear-gradient(135deg, var(--tblr-primary), var(--tblr-info)); color:#fff; box-shadow:0 10px 24px rgba(59,130,246,.25); opacity:0; transform: translateY(10px); pointer-events:none; transition: opacity .2s ease, transform .2s ease, filter .15s ease; } .to-top.show{ opacity:1; transform: translateY(0); pointer-events:auto } .to-top:hover{ filter: brightness(.98) saturate(1.05) } /* 6) Skeleton loader – użyj .skeleton gdzie trzeba */ .skeleton{ position:relative; overflow:hidden; background: color-mix(in oklab, #e5e7eb 70%, #fff); border-radius:12px; min-height: 12px; } .skeleton::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-100%); animation: sk 1.2s infinite; } @keyframes sk{ to{ transform: translateX(100%) } } /* 7) Lepsze „details” w #faq sekcji narzędzi */ #tool-box #faq .card{ border-radius: var(--rad-lg); overflow:hidden } #tool-box #faq .card-header{ background: linear-gradient(90deg, var(--tblr-primary-lt), var(--tblr-info-lt)); } /* 8) „hash link” do nagłówków w content-skin */ #content-skin-tex h2[id], #content-skin-tex h3[id]{ position:relative; scroll-margin-top:96px } #content-skin-tex h2[id] a.anchor, #content-skin-tex h3[id] a.anchor{ position:absolute; left:-1.2ch; opacity:0; text-decoration:none; } #content-skin-tex h2[id]:hover a.anchor, #content-skin-tex h3[id]:hover a.anchor{ opacity:.6 } /* 9) Tryb ciemny – delikatne dopasowania */ body.theme-dark #tools-box .item-box{ background: rgba(2,6,23,.6) } body.theme-dark #tools-box .item-box:hover{ background: rgba(30,58,138,.25) } body.theme-dark #content-skin-tex details{ background: rgba(2,6,23,.6) } body.theme-dark #content-skin-tex details[open]{ background: rgba(59,130,246,.12) } /* 10) Redukcja ruchu */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } } /* 11) Typografia i design pod SEO / UX (Faza 7) */ .article-typography-enhancement { font-size: 1.05rem; line-height: 1.75; color: var(--text-main, #0f172a); } .article-typography-enhancement h2, .article-typography-enhancement h3 { font-weight: 800; line-height: 1.3; margin-top: 2.5rem; margin-bottom: 1rem; scroll-margin-top: 100px; } .article-typography-enhancement p { margin-bottom: 1.25rem; } .toc-box { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; padding: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); } .toc-title { font-size: 0.95rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--primary, #2563eb); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 8px; } .toc-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .toc-link { font-size: 0.9rem; color: var(--text-main, #0f172a); text-decoration: none; display: block; padding: 4px 8px; border-radius: 6px; transition: all 0.2s; border-left: 2px solid transparent; } .toc-link:hover, .toc-link.active { background: var(--primary-soft, #eff6ff); color: var(--primary, #2563eb); border-left-color: var(--primary, #2563eb); } .toc-link.h3-link { padding-left: 20px; font-size: 0.85rem; color: var(--text-muted, #64748b); } /* PWA Banner */ .pwa-bottom-banner { position: fixed; bottom: -150px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 400px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border: 1px solid var(--border-color, #e2e8f0); border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.2); padding: 16px; display: flex; align-items: center; gap: 12px; z-index: 9999; transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .pwa-bottom-banner.show { bottom: 24px; } .pwa-icon { width: 48px; height: 48px; background: var(--primary-soft, #eff6ff); color: var(--primary, #2563eb); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pwa-content-text { flex-grow: 1; font-size: 0.9rem; line-height: 1.3; color: #0f172a; } .pwa-content-text strong { display: block; font-weight: 700; } .btn-install-pwa { background: var(--primary, #2563eb); color: white; border: none; padding: 8px 16px; border-radius: 8px; font-weight: bold; font-size: 0.85rem; cursor: pointer; } .share-btn { transition: transform 0.2s; } .share-btn:hover { transform: translateY(-2px); } </style> <script> // przycisk „do góry” + wstrzyknięcie do DOM (function(){ var b=document.createElement('a'); b.href="#top"; b.className='to-top'; b.setAttribute('aria-label','Do góry'); b.innerHTML='↑'; document.body.appendChild(b); function t(){ var y=window.scrollY||document.documentElement.scrollTop; b.classList.toggle('show', y>400); } t(); window.addEventListener('scroll', t, {passive:true}); })(); // TOC, Reading Time i anchor linki document.addEventListener('DOMContentLoaded', function() { var article = document.getElementById('article-body'); if (!article) return; // --- 1) Anchor do nagłówków (usuwamy stary kod) // --- 2) Czytanie tekstu (Time to read) --- var textContent = article.innerText || ''; if (textContent.trim().length > 200) { var wordCount = textContent.split(/\s+/).length; var readingTime = Math.ceil(wordCount / 200); // 200 słów/min var rTimeEl = document.getElementById('reading-time-text'); var rTimeBox = document.getElementById('reading-time-indicator'); if (rTimeEl && rTimeBox) { rTimeEl.innerText = "Czas czytania: ok. " + readingTime + " min"; rTimeBox.classList.remove('d-none'); } } // --- 3) Table of Contents (Spis Treści) --- var headings = article.querySelectorAll('h2, h3'); if (headings.length < 2) return; var masterToc = document.getElementById('master-toc-container'); var tocHtml = '<div class="toc-box"><div class="toc-title"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"><path d="M4 6h16M4 12h16M4 18h16"/></svg> Spis Treści</div><ul class="toc-list">'; headings.forEach(function(h, index) { if (!h.id) { var safeId = h.innerText.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)+/g, ''); if(!safeId) safeId = 'heading-' + index; h.id = safeId; } if (!h.querySelector('a.anchor')) { var anchor = document.createElement('a'); anchor.href = '#' + h.id; anchor.className = 'anchor'; anchor.textContent = '#'; h.prepend(anchor); } var isH3 = h.tagName.toLowerCase() === 'h3'; tocHtml += '<li><a href="#' + h.id + '" class="toc-link ' + (isH3 ? 'h3-link' : 'h2-link') + '">' + h.innerText.replace(/^#\s*/,'') + '</a></li>'; }); tocHtml += '</ul></div>'; if (masterToc) { masterToc.innerHTML = tocHtml; } // --- 4) Highlighting TOC podczas scrolla --- var tocLinks = document.querySelectorAll('.toc-link'); window.addEventListener('scroll', function() { var current = ''; headings.forEach(function(h) { var top = h.getBoundingClientRect().top; if (top < 150) current = h.id; }); tocLinks.forEach(function(a) { a.classList.remove('active'); if (a.getAttribute('href') === '#' + current) a.classList.add('active'); }); }, {passive:true}); }); // PWA Logic Re-init document.addEventListener('DOMContentLoaded', function() { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js'); } function showBanner() { var pwaBanner = document.getElementById('pwa-install-banner'); if(pwaBanner) pwaBanner.classList.add('show'); } // Check test mode or captured prompt const urlParams = new URLSearchParams(window.location.search); if (urlParams.has('pwa_test')) { showBanner(); } else if (window.deferredPrompt && !localStorage.getItem('pwa_dismissed')) { setTimeout(showBanner, 3000); } // Re-capture prompt if fired before DOM window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); window.deferredPrompt = e; if(!localStorage.getItem('pwa_dismissed')) setTimeout(showBanner, 3000); }); var installBtn = document.getElementById('pwa-install-btn'); if(installBtn) { installBtn.addEventListener('click', () => { if(window.deferredPrompt) { document.getElementById('pwa-install-banner').classList.remove('show'); window.deferredPrompt.prompt(); window.deferredPrompt.userChoice.then((choiceResult) => { if (choiceResult.outcome === 'accepted') { console.log('User accepted the A2HS prompt'); } window.deferredPrompt = null; }); } else { // Fallback dla przeglądarek lub trybu testowego alert('Twoja przeglądarka nie jest jeszcze gotowa na auto-instalację. Użyj menu przeglądarki (Dodaj do ekranu głównego) lub odczekaj chwilę na stronie.'); document.getElementById('pwa-install-banner').classList.remove('show'); } }); } var dismissBtn = document.getElementById('pwa-dismiss-btn'); if(dismissBtn) { dismissBtn.addEventListener('click', () => { document.getElementById('pwa-install-banner').classList.remove('show'); localStorage.setItem('pwa_dismissed', '1'); }); } }); </script>  <div id="pwa-install-banner" class="pwa-bottom-banner"> <div class="pwa-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect><line x1="12" y1="18" x2="12.01" y2="18"></line></svg> </div> <div class="pwa-content-text"> <strong>Zainstaluj Webp.pl</strong> Miej narzędzia we własnej kieszeni! </div> <button id="pwa-install-btn" class="btn-install-pwa">Instaluj</button> <button id="pwa-dismiss-btn" style="background: none; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; padding: 0 4px;">×</button> </div> </body> </html>