index.html

<!doctype html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <meta name="description" content="Niezależne polskie wydanie HowToLiveBetter. Porady o bezpieczeństwie, profilaktyce zdrowotnej, ruchu i żywieniu, energii, czasie, pieniądzach i ochronie kont, ze źródłami i ograniczeniami.">
  <title>Jak żyć lepiej — Praktyczny poradnik oparty na dowodach</title>
  <style>
    :root { color-scheme: light; font: 1rem/1.65 system-ui, sans-serif; color: #203431; background: #f4f6f2; }
    * { box-sizing: border-box; }
    body { margin: 0; }
    a { color: #175a4a; text-underline-offset: .2em; }
    a:hover { text-decoration-thickness: .16em; }
    :focus-visible { outline: 3px solid #8c4205; outline-offset: 4px; }
    .skip { position: absolute; left: 1rem; top: -5rem; background: white; padding: .7rem; z-index: 2; }
    .skip:focus { top: .5rem; }
    header, .layout, footer { max-width: 76rem; margin: auto; padding: 2rem clamp(1rem, 4vw, 3rem); }
    header { padding-bottom: 1rem; }
    .edition { font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: #405a53; }
    h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1.15; margin: .6rem 0; }
    .subtitle { font-size: 1.2rem; margin-top: 0; }
    .intro { max-width: 65ch; }
    .controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; padding: 1.2rem; margin-top: 1.5rem; border: 1px solid #c5d3cc; border-radius: .7rem; background: #fff; }
    .controls > div { max-width: 100%; min-width: 0; }
    label { display: block; font-weight: 650; }
    .search-control { flex: 1 1 20rem; min-width: 0; }
    input, select, button { font: inherit; padding: .6rem .7rem; border: 1px solid #71887f; border-radius: .35rem; min-height: 2.75rem; }
    input { width: 100%; }
    select { max-width: 100%; background: white; }
    button { cursor: pointer; background: #175a4a; color: #fff; border-color: #175a4a; }
    #status { margin: 1rem 0 0; }
    .layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 2rem; padding-top: 1rem; }
    .navigation { align-self: start; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; }
    section { scroll-margin-top: 1rem; }
    nav h2 { font-size: 1rem; margin: 0 0 .5rem; }
    nav details { margin: 0; border: 0; padding: 0; }
    nav ul { padding-left: 1.3rem; margin: .5rem 0 0; }
    nav li { margin: .4rem 0; }
    nav a { display: block; padding: .25rem 0; }
    nav a[aria-current] { font-weight: 750; text-decoration-thickness: .15em; }
    .permalink { display: inline-block; min-height: 2.75rem; padding: .5rem 0; font-size: .9rem; }
    main { min-width: 0; }
    article { background: white; border: 1px solid #c5d3cc; border-radius: .7rem; padding: clamp(1rem, 3vw, 1.8rem); margin-bottom: 1.4rem; scroll-margin-top: 1rem; overflow-wrap: anywhere; }
    article:target { border-color: #175a4a; box-shadow: 0 0 0 2px #175a4a; }
    article h3 { font-size: 1.3rem; line-height: 1.4; margin: .5rem 0 1rem; }
    .badge { display: inline-block; background: #e5eee8; padding: .1rem .6rem; border-radius: 1rem; font-size: .85rem; }
    .practical { font-size: 1.08rem; }
    dt { font-weight: 700; margin-top: 1rem; }
    dd { margin: .25rem 0 0; }
    details { margin-top: 1.2rem; border-top: 1px solid #c5d3cc; padding-top: 1rem; }
    summary { cursor: pointer; font-weight: 650; min-height: 2.75rem; }
    footer { border-top: 1px solid #c5d3cc; font-size: .9rem; }
    [hidden] { display: none !important; }
    @media (max-width: 48rem) { .layout { display: block; } .navigation { position: static; max-height: none; overflow: visible; margin-bottom: 1.5rem; } nav ul { columns: 2; column-width: 13rem; } }
    @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  </style>
</head>
<body>
  <a class="skip" href="#porady">Przejdź do porad</a>
  <header>
    <p class="edition">Wydanie polskie · porady ze źródłami i ograniczeniami</p>
    <h1>Jak żyć lepiej</h1>
    <p class="subtitle">Praktyczny poradnik oparty na dowodach</p>
    <p class="intro">Nie musisz robić wszystkiego. Wybierz jedną zmianę, sprawdź jej koszt i zobacz, co naprawdę wynika z badań. Przy każdej poradzie znajdziesz źródła i ograniczenia.</p>
    <p class="intro">Informacje zdrowotne i prawne są ogólne. Nie zastępują diagnozy, leczenia ani oceny indywidualnej sprawy. Sprawdź zakres i ograniczenia przy wybranej poradzie.</p>
    <p class="intro" id="review-notice">Porady są sprawdzane ze źródłami maszynowo, a przegląd trwa. Nie zatwierdził ich lekarz ani prawnik.</p>
    <p><a href="https://github.com/mikomiel/HowToLiveBetter-PL/blob/main/README.md">O wydaniu i metodzie</a> · <a href="https://github.com/mikomiel/HowToLiveBetter-PL/tree/main/book/pl">Polskie rozdziały w Markdown</a> · <a href="https://github.com/mikomiel/HowToLiveBetter-PL/issues">Zgłoś błąd</a> · <a href="#publikacja">Wydanie, kontakt i prywatność</a></p>
    <form class="controls" role="search" aria-label="Wyszukiwanie porad">
      <div class="search-control"><label for="search">Szukaj w polskich poradach</label><input id="search" type="search" placeholder="Np. sen, spotkanie, konto" aria-describedby="search-help" disabled></div>
      <div><label for="chapter">Rozdział</label><select id="chapter" disabled><option value="">Wszystkie rozdziały</option></select></div>
      <div><label for="grade">Ocena dowodów</label><select id="grade" aria-describedby="search-help" disabled><option value="">Wszystkie oceny</option><option value="A">A — synteza ilościowa</option><option value="B">B — badania i wytyczne</option><option value="C">C — normy i zalecenia</option></select></div>
      <button id="reset" type="button" disabled>Wyczyść filtry</button>
    </form>
    <p id="search-help">Możesz szukać bez polskich znaków. Litera opisuje rodzaj źródła, nie gwarantuje prawdziwości ani opłacalności porady. <a href="https://github.com/mikomiel/HowToLiveBetter-PL/blob/main/README.md#jak-czytac-dowody">Jak czytać oceny A, B i C</a>.</p>
    <p id="status" role="status" aria-live="polite">Nie uruchomiono czytnika. Włącz JavaScript i odśwież stronę. Użyj lokalnego serwera HTTP, jeśli otwierasz plik z dysku (instrukcja w README na GitHubie). Jeśli komunikat nie znika, odśwież stronę albo zgłoś błąd w repozytorium (odnośnik „Zgłoś błąd” powyżej).</p>
    <button id="retry" type="button" hidden>Spróbuj wczytać ponownie</button>
    <noscript><p>Włącz JavaScript, aby użyć wyszukiwania, lub otwórz rozdział w Markdown. Nie wczytano żadnych porad.</p></noscript>
  </header>
  <div class="layout">
    <aside class="navigation">
      <nav aria-label="Rozdziały"><h2>Rozdziały</h2><ul id="chapters"></ul></nav>
      <nav aria-label="Spis polskich porad"><details id="nav-list" open><summary>Spis porad</summary><ul id="toc"></ul></details></nav>
    </aside>
    <main id="porady" tabindex="-1" aria-label="Polskie porady ze źródłami"></main>
  </div>
  <footer>
    <p>Niezależna polska adaptacja HowToLiveBetter autorstwa <a href="https://github.com/eternity4719/HowToLiveBetter">eternity4719</a>. To wybór rozdziałów, nie tłumaczenie całej książki. Tylko treść o stanie verified jest publikowana w tym czytniku.</p>
    <p>Tekst: <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a> (<a href="LICENSE">pełna licencja</a>). Kod: <a href="LICENSE-CODE">MIT</a>, Copyright (c) 2026 eternity4719. Zmiany i weryfikację opisano przy każdej poradzie. Brak gwarancji poprawności; sprawdzaj ograniczenia i źródła.</p>
    <section id="publikacja" aria-labelledby="publikacja-tytul">
      <h2 id="publikacja-tytul">Wydanie, kontakt i prywatność</h2>
      <p><strong>Opiekun niezależnej polskiej adaptacji:</strong> <a href="https://github.com/mikomiel">mikomiel</a>. To nie jest oficjalne wydanie autora.</p>
      <p><strong>Kontakt do korekt:</strong> <a href="https://github.com/mikomiel/HowToLiveBetter-PL/issues">GitHub Issues</a>. Podaj numer porady, kwestionowane zdanie i źródło. Zgłoszenia i komentarze są publiczne. Nie przesyłaj danych zdrowotnych, haseł, danych innych osób ani dokumentów indywidualnej sprawy.</p>
      <p>Przy redakcji treści i opracowaniu publicznych zgłoszeń używamy też generatywnej AI. Nie jest to indywidualna konsultacja medyczna ani prawna.</p>
      <p><strong>Działanie czytnika:</strong> wyszukiwanie i filtrowanie odbywa się w przeglądarce. Kod czytnika nie wysyła wpisanej frazy do serwera i nie zapisuje jej w cookies, localStorage ani sessionStorage. Nie dodajemy własnej analityki, reklam ani kont czytelnika. Przeglądarka może przechowywać pobrane pliki w pamięci podręcznej.</p>
      <p><strong>Hosting i zewnętrzne serwisy:</strong> stronę udostępnia GitHub Pages. Według <a href="https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#data-collection">dokumentacji hostingu</a> GitHub zapisuje adresy IP odwiedzających w celach bezpieczeństwa, również bez logowania. Brak własnej analityki nie oznacza braku przetwarzania danych przez GitHub. Po otwarciu zgłoszeń lub zewnętrznych źródeł korzystasz z tych serwisów według ich zasad; zobacz <a href="https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement">informację o prywatności GitHuba</a>.</p>
      <p>Opis dotyczy działania tego czytnika i publicznego kanału korekt. Nie jest deklaracją pełnej zgodności prawnej publikacji ani zastępstwem zasad hostingu.</p>
    </section>
  </footer>
  <script type="module" src="reader.mjs"></script>
</body>
</html>