Elementy, z których zbudowane są strony serwisu: kolory, kroje, 22 ikon marki i kafle. Każdy komponent ma tu działający przykład i kod do skopiowania. Arkusz: gw3.css.
KoloryZmienne CSS z gw3.css. Czerwony tylko dla zagrożenia i alarmu, niebieski dla zgłoszeń, linków i zaznaczenia.
#016fa6niebieski marki: linki, zgłoszenia, zaznaczenie#00507aniebieski po najechaniu#e3f0f7tło zaznaczenia#e51937czerwony marki: alarm, 112#b8102aczerwony po najechaniu#202020tekst, linia ikon#4b4f55tekst pomocniczy#5b6066podpisy, źródła#dcdcdclinie, odstępy między kaflami#f3f3f3tło strony#1e6b3astan dobry: brak ostrzeżeń, rozstrzygnięte#e8ebeetor paska wartości, tło mapy#a35a12ocena „suchy” w skali opadu#fbf0e3tło oceny „suchy”KrojeDwa kroje bezszeryfowe z Google Fonts.
Ikony22 ikon: 7 dotychczasowych ikon marki i 15 dorysowanych w tym samym stylu. Czarna linia 2 px bez wypełnień i dwa odłamki marki w przeciwległych rogach, czerwony i niebieski. Każdy plik ma pole 64 × 64, a rysunek liniowy ma w nim tę samą wielkość, więc ikony stoją w kaflach równo. Na stronie zawsze jako <img class="ic"> z pustym alt, bo obok jest tytuł.
ico/opad.svgpomiary opadu, stacje, sumy doboweikona marki
ico/pomiary.svgwykresy, analizy, archiwum danychikona marki
ico/mapa.svgmapa, położenie, plan miastaikona marki
ico/obiekty.svgzbiorniki, fontanny i inne obiekty spółkiikona marki
ico/retencja.svgdeszczówka, ogród deszczowy, kalkulatorikona marki
ico/wytyczne.svguzgodnienia, warunki techniczneikona marki
ico/dokumenty.svgdokumenty do pobrania, przetargiikona marki
ico/adres.svgwyszukiwarka adresu, Twoja okolicanowa, 01.11.2026
ico/powodz.svgzalanie, przygotowanie do powodzinowa, 01.11.2026
ico/alarm.svg112, zagrożenie życianowa, 01.11.2026
ico/kratka.svgzgłoszenie kratki, studzienki, wody na ulicynowa, 01.11.2026
ico/worki.svgpunkty z workaminowa, 01.11.2026
ico/sms.svgpowiadomienia SMS i e-mail miastanowa, 01.11.2026
ico/spolka.svgsprawy do Gdańskich Wód, sekretariatnowa, 01.11.2026
ico/zbiornik.svgkarty i lista zbiornikównowa, 01.11.2026
ico/potok.svgkarty i lista ciekównowa, 01.11.2026
ico/wal.svgkarty i lista wałównowa, 01.11.2026
ico/fontanna.svgkarty i lista fontannnowa, 01.11.2026
ico/dom-parterowy.svgkalkulator: dach 10 × 12 mnowa, 01.11.2026
ico/dom-pietrowy.svgkalkulator: dach 9 × 10 mnowa, 01.11.2026
ico/auto.svgkalkulator: 2,5 × 5 mnowa, 01.11.2026
ico/podjazd.svgkalkulator: 5 × 5 mnowa, 01.11.2026KomponentyKafle stoją w siatce z odstępem 2 px na tle linii, mają równą wysokość w rzędzie i ikonę w tym samym miejscu.
Trzy rozmiary: .ic.s 40 px w listach, .ic 56 px w kaflach, .ic.l 72 px w katalogu.
<div class="ds-row" style="align-items:end">
<img class="ic s" src="ico/opad.svg" alt="" />
<img class="ic" src="ico/opad.svg" alt="" />
<img class="ic l" src="ico/opad.svg" alt="" />
</div>Sytuacja i jeden kanał: numer albo adres. Pasek .r czerwony dla zagrożenia, .b niebieski dla zgłoszenia, bez klasy czarny. Siatka .zgs ma 4 kolumny, .zgs.k3 ma 3.
Dołącz zdjęcie i dokładne miejsce.
zglos.gdansk.plalbo Gdańskie Centrum Kontaktu 58 52 44 500<div class="zgs k3">
<div class="zg r"><img class="ic" src="ico/alarm.svg" alt="" /><h3>Zagrożenie życia</h3><p>Woda w budynku, osoba w zalanym miejscu.</p><a class="num" href="tel:112">112</a><small>numer alarmowy</small></div>
<div class="zg b"><img class="ic" src="ico/kratka.svg" alt="" /><h3>Zapchana kratka, woda na ulicy</h3><p>Dołącz zdjęcie i dokładne miejsce.</p><a class="num" href="https://zglos.gdansk.pl">zglos.gdansk.pl</a><small>albo Gdańskie Centrum Kontaktu <a href="tel:+48585244500">58 52 44 500</a></small></div>
<div class="zg"><img class="ic" src="ico/worki.svg" alt="" /><h3>Potrzebuję worków z piaskiem</h3><p>Samoobsługowe punkty w 10 dzielnicach.</p><a class="num" href="powodz.html#worki">11 punktów</a><small>mapa i najbliższy punkt</small></div>
</div>Przejście do innej części serwisu. Cały kafel jest linkiem, po najechaniu robi się niebieski, a ikona biała.
<div class="next">
<a href="index.html#adres"><img class="ic" src="ico/adres.svg" alt="" /><h3>Sprawdź swój adres</h3><p>Opad na najbliższej stacji, worki z piaskiem i gdzie zgłosić problem.</p></a>
<a href="pomiary.html"><img class="ic" src="ico/opad.svg" alt="" /><h3>Opad na 24 stacjach</h3><p>Sumy dobowe z ostatnich trzech dni i analizy miesięczne.</p></a>
<a href="powodz.html"><img class="ic" src="ico/powodz.svg" alt="" /><h3>Ulewa i powódź</h3><p>Co zrobić przed, w trakcie i po.</p></a>
</div>Przycisk z wartością, na przykład gotowe wymiary w kalkulatorze. Zaznaczony (aria-pressed: true) ma niebieski pasek u góry i niebieską wartość.
<div class="pres">
<button type="button" class="pre" aria-pressed="true"><img class="ic" src="ico/dom-parterowy.svg" alt="" /><i>120 m²</i><b>Dom parterowy</b><span>dach 10 × 12 m</span></button>
<button type="button" class="pre" aria-pressed="false"><img class="ic" src="ico/auto.svg" alt="" /><i>12,5 m²</i><b>Miejsce postojowe</b><span>1 samochód, 2,5 × 5 m</span></button>
</div>Kafel zdjęcia z podpisem i źródłem; kliknięcie otwiera przeglądarkę: licznik, strzałki, miniatury, klawisze ← → i Esc, przesuwanie palcem. Link a[data-lb] z atrybutami data-podpis, data-autor, data-zrodlo, data-url; grupa to element z data-lb-grupa. Autor tylko wtedy, gdy jest znany.
<div class="gal" data-lb-grupa style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px">
<figure style="margin:0;background:#fff"><a href="img/ob/fontanna-neptuna.jpg" data-lb data-podpis="Fontanna Neptuna" data-zrodlo="Fontanna Neptuna" data-url="https://www.gdmel.pl/fontanny/61-fontanna-neptuna"><img src="img/ob/fontanna-neptuna.jpg" alt="Fontanna Neptuna" style="width:100%;aspect-ratio:3/2;object-fit:cover" /></a><figcaption style="padding:12px 14px;border-top:4px solid var(--blue)"><b><a href="fontanna-neptuna.html">Fontanna Neptuna</a></b><br /><small>Z artykułu „Fontanny”</small></figcaption></figure>
<figure style="margin:0;background:#fff"><a href="img/ob/fontanna-szeroka.jpg" data-lb data-podpis="Fontanna Szeroka" data-zrodlo="Fontanna Szeroka" data-url="https://www.gdmel.pl/fontanny/62-fontanna-szeroka"><img src="img/ob/fontanna-szeroka.jpg" alt="Fontanna Szeroka" style="width:100%;aspect-ratio:3/2;object-fit:cover" /></a><figcaption style="padding:12px 14px;border-top:4px solid var(--blue)"><b><a href="fontanna-szeroka.html">Fontanna Szeroka</a></b><br /><small>Z artykułu „Fontanny”</small></figcaption></figure>
<figure style="margin:0;background:#fff"><a href="img/ob/fontanna-grassowska.jpg" data-lb data-podpis="Fontanna Grassowska" data-zrodlo="Fontanna Grassowska" data-url="https://www.gdmel.pl/fontanny/64-fontanna-grassowska"><img src="img/ob/fontanna-grassowska.jpg" alt="Fontanna Grassowska" style="width:100%;aspect-ratio:3/2;object-fit:cover" /></a><figcaption style="padding:12px 14px;border-top:4px solid var(--blue)"><b><a href="fontanna-grassowska.html">Fontanna Grassowska</a></b><br /><small>Z artykułu „Fontanny”</small></figcaption></figure>
</div>Krój nagłówków, wielkie litery, wysokość 54 px. Czerwony .btn.red tylko dla numeru alarmowego.
<div class="ds-row">
<a class="btn" href="index.html#zglos">Zgłoś problem</a>
<a class="btn red" href="tel:112">112</a>
</div>Materiały do pobrania: .gal-pob z ikoną strzałki i atrybutem download prowadzi do oryginału; pod spodem .gal-m z wymiarami, rozmiarem, formatem i danymi EXIF (aparat, data), gdy plik je ma.
<div class="ds-row"><a class="gal-pob" href="img/ob/fontanna-neptuna.jpg" download><svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M12 4v11m-5-5 5 5 5-5M5 19h14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>Pobierz</a>
<small class="gal-m" style="font-size:12.5px;color:var(--ink-3)">1920 × 1280 px · 293 kB · JPG<br>Canon EOS 5D Mark IV · wykonano 29.06.2022</small></div>Wieloetapowe narzędzia (Ogród deszczowy w 5 krokach). Przyklejony u góry ekranu; .on to krok widoczny na ekranie, .zr kroki za nami. Numer w kółku, ikona marki, nazwa kroku.
<div class="og"><nav class="og-nav" style="position:static" aria-label="Przykład paska kroków"><ol style="grid-template-columns:repeat(3,minmax(0,1fr))">
<li><a href="#komponenty" class="zr"><span class="nr">1</span><img class="ic" src="ico/opad.svg" alt="" /><b>Policz wodę</b></a></li>
<li><a href="#komponenty" class="on"><span class="nr">2</span><img class="ic" src="ico/adres.svg" alt="" /><b>Sprawdź grunt</b></a></li>
<li><a href="#komponenty"><span class="nr">3</span><img class="ic" src="ico/retencja.svg" alt="" /><b>Dobierz rośliny</b></a></li>
</ol></nav></div>Pytanie z kilkoma odpowiedziami: label z ukrytym radio, mała ikona liniowa 44 px, nazwa i podpowiedź. Zaznaczona karta ma niebieską ramkę i tło. Karty mają co najmniej 232 px, więc tekst zawsze się mieści.
<div class="og"><form class="wyb" onsubmit="return false"><fieldset><legend>Jaki masz grunt?</legend><div class="op">
<label><input type="radio" name="ds-gr" checked /><svg class="mi" viewBox="0 0 44 44" width="44" height="44" aria-hidden="true"><path class="l" d="M4 16H40"/><path class="l c" d="M10 24h0M18 28h0M28 23h0M34 30h0M14 34h0M24 36h0M32 38h0"/><path class="l b" d="M22 4V30M16 24l6 6 6-6"/></svg><span><b>Przepuszczalny</b><small>woda wsiąka</small></span></label>
<label><input type="radio" name="ds-gr" /><svg class="mi" viewBox="0 0 44 44" width="44" height="44" aria-hidden="true"><path class="l" d="M4 16H40"/><path class="l c" d="M6 23H38M6 29H38M6 35H38"/><path class="l b" d="M22 2V12M16 7l6 6 6-6"/><path class="oc" d="M30 4l8-2-2 8z"/></svg><span><b>Nieprzepuszczalny</b><small>np. glina</small></span></label>
<label><input type="radio" name="ds-gr" /><svg class="mi" viewBox="0 0 44 44" width="44" height="44" aria-hidden="true"><circle class="l" cx="22" cy="22" r="17"/><path class="l" d="M16 17a6 6 0 1 1 8 5.6c-1.4.6-2 1.6-2 3V28M22 33v.5"/></svg><span><b>Nie wiem</b><small>sprawdzę</small></span></label>
</div></fieldset></form></div>Przełączanie wariantów (typy ogrodu, strefy roślin): .tt z przyciskami role=tab; wybrany wariant ma niebieskie tło i białą ikonę.
<div class="og"><div class="tt" role="tablist" aria-label="Przykład zakładek">
<button type="button" role="tab" aria-selected="true"><svg class="mi" viewBox="0 0 44 44" width="44" height="44" aria-hidden="true"><path class="l" d="M4 16H40"/><path class="l c" d="M10 24h0M18 28h0M28 23h0M34 30h0M14 34h0M24 36h0M32 38h0"/><path class="l b" d="M22 4V30M16 24l6 6 6-6"/></svg><span><b>Ogród suchy</b><small>w gruncie przepuszczalnym</small></span></button>
<button type="button" role="tab" aria-selected="false"><svg class="mi" viewBox="0 0 44 44" width="44" height="44" aria-hidden="true"><path class="l" d="M4 16H40"/><path class="l c" d="M6 23H38M6 29H38M6 35H38"/><path class="l b" d="M22 2V12M16 7l6 6 6-6"/><path class="oc" d="M30 4l8-2-2 8z"/></svg><span><b>Ogród mokry</b><small>szczelny, w gruncie</small></span></button>
</div></div>Wynik doboru albo obliczenia: niebieskie tło, krój nagłówków, odłamek marki w rogu i jeden przycisk do następnego kroku.
Woda wsiąknie w grunt. W sprzyjających warunkach nie potrzeba przelewu awaryjnego.
Zobacz przekrój i warstwy →<div class="og"><div class="k2-r" style="position:relative;top:0;min-height:0"><small>Twój ogród</small><b>Ogród suchy</b><p>Woda wsiąknie w grunt. W sprzyjających warunkach nie potrzeba przelewu awaryjnego.</p><a href="ogrod-deszczowy.html#krok4">Zobacz przekrój i warstwy →</a></div></div>Kafle wartości .kpi: liczba krojem nagłówków (.num, wariant .b niebieski, .r czerwony, .t dla tekstu), opis pod spodem. Jednostka zawsze w liczbie: .num .u („193 000 l”, „45,8 mm”), nigdy na początku podpisu; page() przenosi ją z podpisu sama, skrypty wpisują ją w .u. Siatka dobiera liczbę kolumn sama; .k1/.k2/.k3 wymusza układ.
<div class="kpi"><div><span class="num b">45,8<span class="u">mm</span></span><small>średnio, 24 stacje</small></div><div><span class="num">64<span class="u">mm</span></span><small>najwięcej, Wyspa Sobieszewska</small></div><div><span class="num">193 000<span class="u">l</span></span><small>wody naraz: pojemność 193 m³</small></div></div>Stan danych na żywo pod nagłówkiem strony (.kpi.st): ikona marki 32 px po lewej, liczby jednej wielkości w jednej linii, podpisy na tej samej wysokości.
brak ostrzeżeńOstrzeżenia IMGW dla Gdańska0,1mmOpad dziś do 18:30, średnio ze stacjiOsowa, 0,2mmNajwięcej dziś do 18:3002.11, 18:30Stan danych ze stacji Gdańskich Wód<div class="kpi st" style="grid-template-columns:repeat(2,minmax(0,1fr))"><div><img class="ic" src="ico/alarm.svg" alt="" /><span class="num" style="color:var(--ok)">brak ostrzeżeń</span><small>Ostrzeżenia IMGW dla Gdańska</small></div><div><img class="ic" src="ico/opad.svg" alt="" /><span class="num">0,1<span class="u">mm</span></span><small>Opad dziś do 18:30, średnio ze stacji</small></div><div><img class="ic" src="ico/mapa.svg" alt="" /><span class="num">Osowa, 0,2<span class="u">mm</span></span><small>Najwięcej dziś do 18:30</small></div><div><img class="ic" src="ico/pomiary.svg" alt="" /><span class="num">02.11, 18:30</span><small>Stan danych ze stacji Gdańskich Wód</small></div></div>Czerwony pas .alarm nad treścią strony głównej: tylko przy ostrzeżeniu IMGW dla Gdańska albo opadzie dziś od 10 mm na którejś stacji (home.js, alarm). Trzy działania: worki, zgłoszenie, 112.
<section class="alarm" role="alert"><div class="wrap" style="padding-left:24px;padding-right:24px"><img class="ic" src="ico/alarm.svg" alt="" /><div class="alarm-t"><b>Intensywne opady deszczu</b><span>Ostrzeżenie IMGW dla Gdańska, stopień 2, do 03.11, 06:00.</span></div><div class="alarm-a"><a class="btn s w" href="powodz.html#worki">Najbliższe worki z piaskiem</a><a class="btn s" href="https://zglos.gdansk.pl">Zgłoś podtopienie</a><a class="btn s" href="tel:112">Zagrożenie życia: 112</a></div></div></section>Program wsparcia (.zgs.wsp): ikona, nazwa, kwota albo rodzaj (.num), warunki, link do źródła na dole kafla. Kwoty z aktualnej uchwały, z datą sprawdzenia pod siatką.
80% kosztów. Wspólnoty i spółdzielnie do 10 000 zł.
warunki i wniosek<div class="zgs k3 wsp"><div class="zg"><img class="ic s" src="ico/retencja.svg" alt="" /><h3>Dotacja na ogród deszczowy</h3><span class="num">do 5 000 zł</span><p>80% kosztów. Wspólnoty i spółdzielnie do 10 000 zł.</p><small><a href="mala-retencja.html#wsparcie">warunki i wniosek</a></small></div><div class="zg"><img class="ic s" src="ico/zbiornik.svg" alt="" /><h3>Dotacja na deszczówkę</h3><span class="num">do 4 000 zł</span><p>100% kosztów zatrzymania wody na działce.</p><small><a href="mala-retencja.html#wsparcie">warunki i wniosek</a></small></div><div class="zg"><img class="ic s" src="ico/dokumenty.svg" alt="" /><h3>Błękitna karta obiektu</h3><span class="num">formularz</span><p>Ewidencja gotowego obiektu małej retencji.</p><small><a href="mala-retencja.html#wsparcie">pobierz kartę</a></small></div></div>Ciemny wariant .kpi.pas — tylko na kartach zbiorników, potoków, wałów i fontann (decyzja D3).
<div class="kpi pas"><div><span class="num">5 715</span><small>m³ pojemności retencyjnej</small></div><div><span class="num">18 800</span><small>m² powierzchni</small></div><div><span class="num">3 z 8</span><small>miejsce pod względem pojemności</small></div></div>table.tb: nagłówek z sortowaniem (gw.js dokłada przyciski do każdego th), od 16 wierszy wyszukiwarka nad tabelą; kolumny liczbowe .l, wartość skrajna .mx. Z klasą .karty i atrybutami data-l na telefonie wiersz staje się kartą.
| Stacja | Część miasta | Suma opadu [mm] |
|---|---|---|
| Chełm (Dragana) | strefa krawędziowa | 43,8 |
| Oliwa (IBW-PAN) | strefa krawędziowa | 41,2 |
| Krakowiec-Górki Zachodnie | pas nadmorski | 29,2 |
<table class="tb karty"><thead><tr><th>Stacja</th><th>Część miasta</th><th class="l">Suma opadu [mm]</th></tr></thead><tbody>
<tr><td data-l="Stacja">Chełm (Dragana)</td><td data-l="Część miasta">strefa krawędziowa</td><td class="l" data-l="Suma">43,8</td></tr>
<tr><td data-l="Stacja">Oliwa (IBW-PAN)</td><td data-l="Część miasta">strefa krawędziowa</td><td class="l" data-l="Suma">41,2</td></tr>
<tr><td data-l="Stacja">Krakowiec-Górki Zachodnie</td><td data-l="Część miasta">pas nadmorski</td><td class="l mx" data-l="Suma">29,2</td></tr></tbody></table>Przyciski .fl z licznikiem w b; zaznaczony (aria-pressed) ma czarne tło. Kropka i w kolorze serii, gdy filtr jest też legendą mapy. Pole .pole: 48 px, ramka 1,5 px.
<div class="fl"><button type="button" aria-pressed="true">Wszystkie<b>142</b></button><button type="button" aria-pressed="false">Aktualności<b>101</b></button><button type="button" aria-pressed="false"><i style="background:var(--blue)"></i>Zbiorniki<b>54</b></button><input class="pole" type="search" placeholder="Szukaj" aria-label="Szukaj" /></div>Stan, parametr albo ocena: .tag z wariantami .b, .ok, .r oraz skalą oceny miesiąca .s1–.s3, .n, .w1–.w3. Pod tytułem strony w .tags (pierwsza .tag.f).
<div class="ds-row"><span class="tag">ogłoszone</span><span class="tag b">w toku</span><span class="tag ok">rozstrzygnięte</span><span class="tag r">unieważnione</span><span class="tag s1">suchy</span><span class="tag n">normalny</span><span class="tag w2">bardzo wilgotny</span></div>Lista porównawcza ul.bar: nazwa, pasek na torze --track, wartość. Bieżący obiekt albo skrajna wartość: li.on (czerwony).
<ul class="bar"><li><span>Zbiornik Łabędzia</span><i><i style="width:100%"></i></i><b>14 440 m³</b></li><li class="on"><span>Zbiornik Jabłoniowa</span><i><i style="width:40%"></i></i><b>5 715 m³</b></li><li><span>Staw Cyganka</span><i><i style="width:2%"></i></i><b>311 m³</b></li></ul>Biała ramka .box z tytułem i listą definicji dl.dl; uwaga .box.uw z niebieskim paskiem (.box.uw.r — czerwonym).
Dane obiektu<div class="box"><h2>Dane obiektu</h2><dl class="dl"><dt>Zlewnia</dt><dd>Potok Siedlicki</dd><dt>Pojemność retencyjna</dt><dd>5 715 m³</dd></dl></div><div class="box uw" style="margin-top:12px">Uwaga: wartość z mapy małej retencji, stan na 01.11.2026.</div>details.ak: tytuł w summary, znak + / − po prawej.
Zbiornik nr 1 Jelitkowska, nr 2 Orłowska, nr 3 Chłopska…
Zbiornik Wileńska, Kilińskiego…
<details class="ak"><summary>Potok Oliwski — 13 zbiorników</summary><p>Zbiornik nr 1 Jelitkowska, nr 2 Orłowska, nr 3 Chłopska…</p></details><details class="ak"><summary>Potok Strzyża — 9 zbiorników</summary><p>Zbiornik Wileńska, Kilińskiego…</p></details>ol.kroki: numerowane etapy w kaflach 2 px na tle linii.
Wniosek o warunki przyłączenia do kanalizacji deszczowej.
Projekt zgodny z wytycznymi spółki.
Przekazanie sieci do eksploatacji.
<ol class="kroki"><li><h3>Warunki techniczne</h3><p>Wniosek o warunki przyłączenia do kanalizacji deszczowej.</p></li><li><h3>Uzgodnienie projektu</h3><p>Projekt zgodny z wytycznymi spółki.</p></li><li><h3>Odbiór</h3><p>Przekazanie sieci do eksploatacji.</p></li></ol>ol.kroki.ik: ikona marki w rogu, niebieski pasek u góry, strzałka do następnego kroku (od 1080 px), na dole link i etykieta z liczbą druków.
Przed projektem. Ile wody zatrzymać na działce.
Projekt zgodny z warunkami technicznymi.
Częściowy, techniczny i końcowy.
<ol class="kroki ik"><li><img class="ic" src="ico/wytyczne.svg" alt="" /><h3>Warunki techniczne</h3><p>Przed projektem. Ile wody zatrzymać na działce.</p><div class="kr-d"><a href="inwestorzy.html#krok-w">Wniosek i druki</a><span class="tag b">6 druków</span></div></li><li><img class="ic" src="ico/dokumenty.svg" alt="" /><h3>Uzgodnienie</h3><p>Projekt zgodny z warunkami technicznymi.</p><div class="kr-d"><a href="inwestorzy.html#krok-u">Co złożyć</a><span class="tag b">6 druków</span></div></li><li><img class="ic" src="ico/retencja.svg" alt="" /><h3>Odbiory</h3><p>Częściowy, techniczny i końcowy.</p><div class="kr-d"><a href="inwestorzy.html#krok-o">Protokoły odbioru</a><span class="tag b">11 druków</span></div></li></ol>Znacznik stacji na mapie opadu (.kr w L.divIcon, klasa krm): wielkość i kolor według sumy mm, liczba w środku; .z dla 0 mm. Odtwarzanie dób zmienia rozmiar płynnie (bez animacji przy prefers-reduced-motion).
<div style="display:flex;gap:18px;align-items:center;padding:12px;background:var(--track)"><span class="kr z" style="width:22px;height:22px;--kol:#fff"><i></i><b>0</b></span><span class="kr" style="width:29px;height:29px;--kol:#7fb6d6"><i></i><b>0,4</b></span><span class="kr" style="width:38px;height:38px;--kol:#3d8fc0"><i></i><b>3</b></span><span class="kr" style="width:47px;height:47px;--kol:#016fa6"><i></i><b>8</b></span><span class="kr" style="width:55px;height:55px;--kol:#00507a"><i></i><b>15</b></span><span class="kr" style="width:64px;height:64px;--kol:#e51937"><i></i><b>32</b></span></div>Ilustracja .sc w stylu ikon marki: deszcz (gęstość według mm, .mocno dla ulewy), rynna z płynącą wodą (.pada), ogród deszczowy o pojemności ulewy raz na 10 lat napełniany do poziomu spływ / pojemność (home.js, scena).
<svg class="sc pada" viewBox="0 0 600 330" aria-hidden="true"><defs><clipPath id="k-cl"><polygon points="330,252 362,304 528,304 560,252" /></clipPath><clipPath id="k-niebo"><rect x="0" y="0" width="600" height="252" /></clipPath></defs><g id="k-dsz" clip-path="url(#k-niebo)"><line class="kd" x1="20" y1="-20" x2="16" y2="-6" style="animation-delay:-0.00s" /><line class="kd" x1="177" y1="33" x2="173" y2="47" style="animation-delay:-0.14s" /><line class="kd" x1="334" y1="86" x2="330" y2="100" style="animation-delay:-0.27s" /><line class="kd" x1="491" y1="19" x2="487" y2="33" style="animation-delay:-0.41s" /><line class="kd" x1="88" y1="72" x2="84" y2="86" style="animation-delay:-0.55s" /><line class="kd" x1="245" y1="5" x2="241" y2="19" style="animation-delay:-0.69s" /><line class="kd" x1="402" y1="58" x2="398" y2="72" style="animation-delay:-0.82s" /><line class="kd" x1="559" y1="-9" x2="555" y2="5" style="animation-delay:-0.96s" /><line class="kd" x1="156" y1="44" x2="152" y2="58" style="animation-delay:-1.10s" /><line class="kd" x1="313" y1="97" x2="309" y2="111" style="animation-delay:-0.13s" /><line class="kd" x1="470" y1="30" x2="466" y2="44" style="animation-delay:-0.27s" /><line class="kd" x1="67" y1="83" x2="63" y2="97" style="animation-delay:-0.41s" /><line class="kd" x1="224" y1="16" x2="220" y2="30" style="animation-delay:-0.54s" /><line class="kd" x1="381" y1="69" x2="377" y2="83" style="animation-delay:-0.68s" /><line class="kd" x1="538" y1="2" x2="534" y2="16" style="animation-delay:-0.82s" /><line class="kd" x1="135" y1="55" x2="131" y2="69" style="animation-delay:-0.96s" /><line class="kd" x1="292" y1="-12" x2="288" y2="2" style="animation-delay:-1.09s" /><line class="kd" x1="449" y1="41" x2="445" y2="55" style="animation-delay:-0.13s" /><line class="kd" x1="46" y1="94" x2="42" y2="108" style="animation-delay:-0.27s" /><line class="kd" x1="203" y1="27" x2="199" y2="41" style="animation-delay:-0.40s" /><line class="kd" x1="360" y1="80" x2="356" y2="94" style="animation-delay:-0.54s" /><line class="kd" x1="517" y1="13" x2="513" y2="27" style="animation-delay:-0.68s" /><line class="kd" x1="114" y1="66" x2="110" y2="80" style="animation-delay:-0.81s" /><line class="kd" x1="271" y1="-1" x2="267" y2="13" style="animation-delay:-0.95s" /><line class="kd" x1="428" y1="52" x2="424" y2="66" style="animation-delay:-1.09s" /><line class="kd" x1="25" y1="-15" x2="21" y2="-1" style="animation-delay:-0.12s" /><line class="kd" x1="182" y1="38" x2="178" y2="52" style="animation-delay:-0.26s" /><line class="kd" x1="339" y1="91" x2="335" y2="105" style="animation-delay:-0.40s" /><line class="kd" x1="496" y1="24" x2="492" y2="38" style="animation-delay:-0.54s" /><line class="kd" x1="93" y1="77" x2="89" y2="91" style="animation-delay:-0.67s" /><line class="kd" x1="250" y1="10" x2="246" y2="24" style="animation-delay:-0.81s" /><line class="kd" x1="407" y1="63" x2="403" y2="77" style="animation-delay:-0.95s" /><line class="kd" x1="564" y1="-4" x2="560" y2="10" style="animation-delay:-1.08s" /><line class="kd" x1="161" y1="49" x2="157" y2="63" style="animation-delay:-0.12s" /><line class="kd" x1="318" y1="-18" x2="314" y2="-4" style="animation-delay:-0.26s" /><line class="kd" x1="475" y1="35" x2="471" y2="49" style="animation-delay:-0.39s" /><line class="kd" x1="72" y1="88" x2="68" y2="102" style="animation-delay:-0.53s" /><line class="kd" x1="229" y1="21" x2="225" y2="35" style="animation-delay:-0.67s" /><line class="kd" x1="386" y1="74" x2="382" y2="88" style="animation-delay:-0.81s" /><line class="kd" x1="543" y1="7" x2="539" y2="21" style="animation-delay:-0.94s" /></g><path class="ln wh" d="M118,58 a22,22 0 0 1 40,-14 a28,28 0 0 1 52,6 a18,18 0 0 1 4,36 H124 a18,18 0 0 1 -6,-28Z" /><path class="zm" d="M0,252 H330 L362,304 H528 L560,252 H600 V330 H0Z" /><rect id="k-woda-p" class="wd" style="transform:scaleY(.4)" x="330" y="252" width="230" height="52" clip-path="url(#k-cl)" /><path class="rs" d="M378,302 L371,266 M378,302 L378,258 M378,302 L385,266" /><path class="rs" d="M418,302 L411,266 M418,302 L418,258 M418,302 L425,266" /><path class="rs" d="M458,302 L451,266 M458,302 L458,258 M458,302 L465,266" /><path class="rs" d="M498,302 L491,266 M498,302 L498,258 M498,302 L505,266" /><path class="ln" d="M0,252 H330 L362,304 H528 L560,252 H600" /><polygon class="ln wh" points="62,154 170,74 278,154" /><rect class="ln wh" x="88" y="154" width="164" height="98" /><rect class="ln" x="152" y="196" width="36" height="56" /><rect class="ln" x="106" y="172" width="30" height="24" /><rect class="ln" x="204" y="172" width="30" height="24" /><path class="ln" d="M266,154 V246 H334" /><path class="pl" id="k-pl" d="M266,158 V246 H338" /><path class="sh r" d="M52,58 L84,66 L62,92Z" /><path class="sh b" d="M556,272 L584,264 L578,294Z" /><text class="tx" id="k-sc-og" x="445" y="324" text-anchor="middle">ogród deszczowy</text><text class="tx b" id="k-sc-pr-p" x="445" y="244" text-anchor="middle">1 440 l z 3 600 l</text></svg>Realizacje: .gal.g5 (5 zdjęć) i .gal.g3 (3 zdjęcia) — pierwsze zdjęcie 2 × 2, siatka domyka się bez dziur; przy innej liczbie zwykła .gal.
<div class="gal g5" data-lb-grupa><figure><a href="img/tr/14ee8b5a2948.jpg" data-lb data-podpis="Ogród deszczowy przy ul. Lastadia, zdjęcie 1 z 5"><img src="img/tr/859c3c0384ad.jpg" alt="" loading="lazy" /><span class="gal-n">1</span></a></figure><figure><a href="img/tr/655710f7bb03.jpg" data-lb data-podpis="Ogród deszczowy przy ul. Lastadia, zdjęcie 2 z 5"><img src="img/tr/be1036592e47.jpg" alt="" loading="lazy" /><span class="gal-n">2</span></a></figure><figure><a href="img/tr/1ec60b6aed1d.jpg" data-lb data-podpis="Ogród deszczowy przy ul. Lastadia, zdjęcie 3 z 5"><img src="img/tr/97b6057f63c3.jpg" alt="" loading="lazy" /><span class="gal-n">3</span></a></figure><figure><a href="img/tr/04febe8bb3f1.jpg" data-lb data-podpis="Ogród deszczowy przy ul. Lastadia, zdjęcie 4 z 5"><img src="img/tr/545b5bfdcf49.jpg" alt="" loading="lazy" /><span class="gal-n">4</span></a></figure><figure><a href="img/tr/f34020b4b607.jpg" data-lb data-podpis="Ogród deszczowy przy ul. Lastadia, zdjęcie 5 z 5"><img src="img/tr/36241fb17da7.jpg" alt="" loading="lazy" /><span class="gal-n">5</span></a></figure></div>Kolor serii albo skala ciągła (.sk z gradientem).
<div class="leg"><span><i style="background:var(--blue)"></i>ogród deszczowy</span><span><i style="background:var(--red)"></i>zbiornik retencyjny</span><span><i class="sk" style="background:linear-gradient(90deg,#e8f2f8,#00395a)"></i></span></div>Roślina z poradnika: nazwa, nazwa łacińska, ikony wystawy (słońce, półcień, cień), gęstość sadzenia i liczba sadzonek; przycisk dodaje roślinę do planu.
roślina użytkowa i lecznicza
<div class="og"><div class="rk" style="grid-template-columns:minmax(0,320px)"><article><h4>Mięta wodna</h4><i class="la">Mentha aquatica</i><span class="ow" title="słońce, półcień, cień"><i title="słońce"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="4.5" class="wf"/><path class="wl" d="M10 1v3M10 16v3M1 10h3M16 10h3M3.6 3.6l2 2M14.4 14.4l2 2M3.6 16.4l2-2M14.4 5.6l2-2"/></svg></i><i title="półcień"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7" class="wl"/><path class="wf" d="M10 3a7 7 0 0 0 0 14Z"/></svg></i><i title="cień"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="10" cy="10" r="7" class="wc"/></svg></i><small>słońce, półcień, cień</small></span><p>roślina użytkowa i lecznicza</p>
<div class="rk-s"><span>6–8 szt./m²</span><b>42–56</b><small>sadzonek na cały ogród</small></div><button type="button" class="rk-d" aria-pressed="true"><span>✓ W planie</span></button></article></div></div>Ta sama na każdej stronie (src/wspolne.py, FOOTER). U góry trzy pilne kanały w układzie kafla kanału: 112 z czerwonym paskiem, zgłoszenie z niebieskim, Gdańskie Centrum Kontaktu z czarnym. Niżej cztery działy w kaflach z odstępem 2 px na tle linii: logo i dane spółki, Mieszkańcy, Dane, Spółka ze źródłami danych; przy nazwie działu ikona marki 32 px. Numery telefonów nie łamią się w wierszu. Na dole logotypy funduszy, prawa autorskie i informacja o wersji demonstracyjnej.
Pierwszy rząd stopki; na wąskim ekranie kanały stoją jeden pod drugim.
<div class="ftr" style="margin:0;padding-top:0;border:0"><div class="ftr-pilne" style="margin:0">
<a class="r" href="tel:112"><img class="ic s" src="ico/alarm.svg" alt="" /><span><small>Zagrożenie życia</small><b>112</b></span></a>
<a class="b" href="https://zglos.gdansk.pl"><img class="ic s" src="ico/kratka.svg" alt="" /><span><small>Zapchana kratka, woda na ulicy</small><b>zglos.gdansk.pl</b></span></a>
<a href="tel:+48585244500"><img class="ic s" src="ico/spolka.svg" alt="" /><span><small>Gdańskie Centrum Kontaktu</small><b>58 52 44 500</b></span></a>
</div></div>