Initial commit
This commit is contained in:
@@ -0,0 +1,6 @@
|
|||||||
|
# Sekrety formularzy - klucz API i sekret podpisu tokenów.
|
||||||
|
# Na produkcji te wartości siedzą w /etc/hydronexis/config.php.
|
||||||
|
api/config.local.php
|
||||||
|
|
||||||
|
# Dane robocze send.php: zużyte tokeny, liczniki IP, log wysyłek.
|
||||||
|
api/storage/
|
||||||
@@ -0,0 +1,128 @@
|
|||||||
|
# CLAUDE.md
|
||||||
|
|
||||||
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Project status
|
||||||
|
|
||||||
|
The site is **built and live in this repo** as static HTML/CSS: [index.html](index.html), [szkolenia.html](szkolenia.html), [konsulting.html](konsulting.html), [index-en.html](index-en.html), sharing [assets/styles.css](assets/styles.css).
|
||||||
|
|
||||||
|
There is no build system, package manager, test suite, or linter — edit the HTML/CSS directly. The repo lives under an XAMPP `htdocs` directory, so preview by opening the files or via `http://localhost/softspm_page_2026/`.
|
||||||
|
|
||||||
|
To check a change visually, headless Edge works:
|
||||||
|
`"/c/Program Files (x86)/Microsoft/Edge/Application/msedge.exe" --headless --disable-gpu --hide-scrollbars --window-size=1400,2000 --screenshot=out.png --virtual-time-budget=8000 "file:///C:/Programy/xampp/htdocs/softspm_page_2026/index.html"`
|
||||||
|
Note it lays out narrow windows at a 481px minimum, so a 390px shot is cropped, not overflowing — verify real overflow by comparing `documentElement.scrollWidth` with `clientWidth`.
|
||||||
|
|
||||||
|
## What the site is
|
||||||
|
|
||||||
|
SoftSPM is a Polish software house (**25+ years in IT**) that has served the water & sewage (`wod-kan`) sector since 2014. The site sells **turnkey applications, consulting, training and webinars** - in that order of prominence (owner brief, 2026-09-01).
|
||||||
|
|
||||||
|
**Two timelines, do not conflate them:** 25+ years of IT experience, and wod-kan specialisation since 2014. The hero and the numbers sheet both carry the pair.
|
||||||
|
|
||||||
|
**The pump-control heritage is deliberately out of scope.** On the owner's instruction (2026-08-31) all pump diagnostics, SCADA/IoT, energy-optimisation and telemetry content was removed. Do not reintroduce it — no pumps, wells, SUW energy audits, sensors, or failure prediction. Course topics are now regulatory and organisational: water law and tariff applications, utility management, public procurement, customer service and billing, digitisation.
|
||||||
|
|
||||||
|
- Primary CTAs: enroll in training / book a consultation / describe your project.
|
||||||
|
- **Turnkey software is a first-class offering** (owner brief, 2026-09-01), not an afterthought: custom web systems and **mobile apps** (Android/iOS), built to the client's requirements, delivered end to end without subcontractors, with source code and docs handed to the client. It also covers **advisory on large integrated-system rollouts** (ERP, GIS, billing) - always on the buyer's side, never the vendor's. Carried by `index.html#aplikacje` (section 06 + sheet 03), the `02.1` offer card, and area `02.5` on the consulting page. The course platform, Wodociagowiec and Gielda Komunalna are cited as our own builds - the proof.
|
||||||
|
- **Offer card order is fixed**: aplikacje pod klucz, konsulting, szkolenia, webinaria.
|
||||||
|
- The **ecosystem is a headline theme**, not a footnote. `index.html#ekosystem` carries it with a diagram and three "loop" cards.
|
||||||
|
- **[wodociagowiec.pl](https://wodociagowiec.pl/)** - trade portal: articles, cases, regulatory analysis, reader Q&A. Reader questions become webinar topics.
|
||||||
|
- **[gieldakomunalna.pl](https://gieldakomunalna.pl/)** - a **new, free marketplace** for the municipal sector (owner brief, 2026-08-31). Two jobs, and copy must reflect both: (1) users **list, buy, sell and swap free of charge** the stock **sitting idle in their warehouses** - project surplus, equipment replaced in upgrades, spares for discontinued machines; (2) it **brings together manufacturers and contractors** in a genuinely **niche, specialist** trade where there may be only a handful nationwide. It is **not** a tender/RFQ portal - do not describe it as "zapytania ofertowe", "miejsce wymiany ofert" or a procurement channel.
|
||||||
|
- Content language is **Polish**, plus an English mirror of the homepage.
|
||||||
|
|
||||||
|
## Authoritative source of truth
|
||||||
|
|
||||||
|
[doc/SoftSPM_projekt.doc](doc/SoftSPM_projekt.doc) — "SoftSPM — projekt nowej strony internetowej", spec v1.0, August 2026. Despite the `.doc` extension it is plain HTML (Word-flavored, **CP1250-encoded**); read it with an explicit encoding, not as UTF-8. This document defines the site structure, the design system, and the open questions. **When any other file in `doc/` contradicts it, this spec wins.**
|
||||||
|
|
||||||
|
## Site structure (as built)
|
||||||
|
|
||||||
|
| Page | Sections |
|
||||||
|
|---|---|
|
||||||
|
| [index.html](index.html) | Hero · By the numbers (spec sheet) · Offer · Subject tracks · Upcoming dates · Course platform · **Ecosystem** · Testimonial · Newsletter |
|
||||||
|
| [szkolenia.html](szkolenia.html) | Hero · Training format (spec sheet) · Course catalogue (tracks 01-08 with prices, plus an RFQ workshop) · Schedule · Annual webinar package · Signup form |
|
||||||
|
| [konsulting.html](konsulting.html) | Hero · 7 service areas (02.7 is `.cell-span` full-width) · 3-step process · Deliverables + projects (spec sheet) · Team · Testimonial · Contact form |
|
||||||
|
| [index-en.html](index-en.html) | English mirror of the homepage - same eight tracks, same ecosystem loop cards; keep it in step when the Polish homepage changes |
|
||||||
|
|
||||||
|
The **eight** subject tracks on `index.html#tematy`, in fixed order: 01 water law & tariff applications, 02 utility management, 03 public procurement, 04 customer service/contracts/billing, then the technical block - 05 SCADA management & network monitoring, 06 security audits & NIS2 compliance, 07 integration with ERP/CRM/tax systems - and 08 digitisation last, framed as the track that ties the others together. Tracks 07 and 08 use a wide `.course` card with a `.split` inside (graphic on opposite sides, mirrored). `szkolenia.html` mirrors the same eight tracks and numbering (ids `sciezka-01`..`sciezka-08`, plus `sciezka-rfq` for the workshop, which sits last and carries no track number). Consulting areas 02.6 (security/NIS2) and 02.7 (integrations) are the advisory counterparts of tracks 06 and 07.
|
||||||
|
|
||||||
|
## Design system — "Industry" / HydroNexis
|
||||||
|
|
||||||
|
A **light wireframe/blueprint** aesthetic: light technical ground, a single steel-blue accent, square corners with registration-cross ("+") marks, cards drawn as line art with no fill, photos duotoned in the accent. Numbers and parameters are presented as **technical spec sheets** — a table with a title block carrying a drawing code, revision, and sheet number.
|
||||||
|
|
||||||
|
Rule: **one accent color only.** No extra decorative colors; hover/pressed states come from the tonal 100–900 ramp.
|
||||||
|
|
||||||
|
| Role | Value |
|
||||||
|
|---|---|
|
||||||
|
| Background | `#f2f2f3` |
|
||||||
|
| Text | `#1d1f20` |
|
||||||
|
| Accent (steel) | `#5980a6` |
|
||||||
|
| Accent for paragraph-size text / pressed | `--color-accent-700` (`#416180`) |
|
||||||
|
|
||||||
|
Typography: **Barlow Condensed** (600) for headings, uppercase in section and table titles; **Barlow** for body. Vertical rhythm is a **24px leading unit** with a 12px half-step — line heights and block margins are multiples of it. Icons: Lucide, stroke 1.5.
|
||||||
|
|
||||||
|
Components per spec: primary button is the only fully-filled object (accent fill, square corners, corner marks); ghost buttons are outlined. Offer cards are a hairline frame plus 4 corner crosses, no background. The dates table uses tabular figures, Barlow Condensed topics, Szkolenie/Webinar tags, and a "Zapisz się →" link — rows collapse into cards on mobile.
|
||||||
|
|
||||||
|
The tokens and components above are implemented in [assets/styles.css](assets/styles.css) — the single stylesheet all four pages share. Key classes: `.plate` + `.title-block` (technical sheet), `.corner` (registration crosses, four spans per framed object), `.cell-frame` (line-art card), `.course` (course card with cover), `.kicker` + `.caption-rule` (numbered section label), `.table.spec` / `.table.sched` (both collapse to cards under 760px), `.checks`, `.steps`, `.eco-item`, `.cta-band`.
|
||||||
|
|
||||||
|
### Imagery — custom SVG line art
|
||||||
|
|
||||||
|
Photographs were dropped along with the pump content. All illustrations are **hand-authored SVGs in [assets/img/](assets/img/)**, drawn in the accent colour on a blueprint grid: `szkolenia`, `webinaria`, `konsulting`, `platforma`, `ekosystem` (the ecosystem loop diagram), plus six 480×270 course covers (`kurs-*.svg`). They are already in the system palette, so they use `.plot`, **not** `.duotone`.
|
||||||
|
|
||||||
|
**The English page has its own copies.** [assets/img/en/](assets/img/en/) holds the fourteen graphics `index-en.html` uses — same filenames, same geometry, English labels and `<title>`. Polish pages read from `assets/img/`, `index-en.html` reads only from `assets/img/en/`. Edit a drawing's geometry and you must edit both copies; `konsulting.svg` and `webinaria.svg` have no English twin because no English page uses them.
|
||||||
|
|
||||||
|
Labels use `textLength` + `lengthAdjust="spacingAndGlyphs"` so a string fits its slot whatever the loaded font — keep that attribute when translating, and set the width from the slot, not the word. Too tight a `textLength` swallows the spaces between words (`FIELD CREWAPP`); check the render, not just the markup. Watch for text overflowing its frame and for labels colliding with the corner marks — both bit during the build.
|
||||||
|
|
||||||
|
### The reference mockup
|
||||||
|
|
||||||
|
[doc/SoftSPM_makieta.html](doc/SoftSPM_makieta.html) is the approved homepage mockup and the best guide to markup, section order, and Polish copy. It is a **self-extracting bundle**: the real page lives in a JSON string inside `<script type="__bundler/template">`, with assets base64'd in `__bundler/manifest` and the design system (`_ds_bundle.js`, `styles.css`) in `__bundler/ext_resources`. To read the actual markup, parse out the template script and JSON-decode it rather than reading the file top-down.
|
||||||
|
|
||||||
|
`styles.css` in that bundle is the token/component source of truth for the system — it defines `--color-*` ramps, `--font-*`, `--space-*`, `--radius-*`, `--shadow-*`, and classes including `.btn`/`.btn-primary`/`.btn-ghost`, `.card`, `.table`, `.tag`, `.input`, `.field`, `.nav`, `.dialog`, `.blueprint`, `.duotone`. The extracted template carries only page-level scaffolding (`--leading`, `--half`, `--edge`, `--measure`, `.wrap`, `.hero`, `.plate`, `.kicker`) and pulls everything visual from those tokens. Preserve that split when building real pages: layout in the page, look in the shared stylesheet.
|
||||||
|
|
||||||
|
The mockup also uses an `<image-slot>` custom element for photos and supports a baseline-grid overlay (append `?baselines` to the URL, or press `B`).
|
||||||
|
|
||||||
|
## The competing dark design (do not build from it by default)
|
||||||
|
|
||||||
|
[doc/stitch_softspm_academy_consulting/](doc/stitch_softspm_academy_consulting/) holds four Google Stitch mockups — homepage, training catalog, consulting, and a student dashboard (`panel_kursanta`) — with `screen.png` renders beside each `code.html`. These use a **completely different direction**: dark "Hydro-Tech" theme on `#101415`, Space Grotesk + Hanken Grotesk, Tailwind CDN with an inline `tailwind.config`, and Material Symbols icons. Its tokens are documented in [DESIGN.md](doc/stitch_softspm_academy_consulting/hydro_tech_intelligence/DESIGN.md).
|
||||||
|
|
||||||
|
This contradicts the approved spec. Treat these as exploratory alternatives and as a **content/IA source** — particularly the training catalog and student dashboard, which have no counterpart in the makieta. If a task seems to call for the dark theme, confirm with the user first. Note their copy mixes Polish and English and their dates say 2024 while the spec is 2026.
|
||||||
|
|
||||||
|
## Content that is deliberately placeholder
|
||||||
|
|
||||||
|
The spec lists these as unconfirmed — do not present them as fact, and flag them when touching:
|
||||||
|
|
||||||
|
- Stats in "Doświadczenie w liczbach" (480+ trained, 24 webinars/year, 60+ advisory projects) — sample values.
|
||||||
|
- Testimonials and quotes — samples, to be replaced with real references.
|
||||||
|
- Course platform name and URL (the "Przejdź do platformy" links point at `#`).
|
||||||
|
- Course prices and the annual webinar package price.
|
||||||
|
- **Training dates are deliberately absent.** The schedule tables carry a `.tag-soon` "Wkrótce" / "Soon" chip instead of a date, and the CTA is "Powiadom mnie" / "Notify me" — the site collects interest rather than taking bookings. Do not reintroduce concrete dates until real ones are confirmed; if they are, restore the `Data`/`Date` column heading and the "Zapisz się" CTAs together with them.
|
||||||
|
- Team member names — the consulting page lists teams, not people, pending real bios.
|
||||||
|
- Nothing else. The forms are live — see **Forms** below.
|
||||||
|
|
||||||
|
Every such block already carries a visible caveat (`.sheet-note` or `.form-note`) in the built pages — keep it when editing values.
|
||||||
|
|
||||||
|
Known real details: SoftSPM · Ławy, 97-400 Bełchatów · info@softspm.com.
|
||||||
|
|
||||||
|
## Logos and images
|
||||||
|
|
||||||
|
[images/](images/) holds the brand assets: `spm_logo_new.png` is the **full lockup used in every nav and footer**, `softspm_large.png` / `softspm_small.png` are the drop mark alone, `softspm_full.png` an older lockup, and `favicon.ico` the tab icon. The logo's steel-blue drop matches the `#5980a6` accent, which is why the palette works with it.
|
||||||
|
|
||||||
|
The folder also holds AI-generated photos from the previous direction (SCADA, control rooms, dashboards, blog imagery). **The built pages no longer reference any of them** — they belong to the dropped pump/monitoring theme. [images/README.md](images/README.md) is inherited from an even earlier "AquaNexis" branding and is stale; verify a file exists before referencing it.
|
||||||
|
|
||||||
|
## Forms
|
||||||
|
|
||||||
|
All four forms — newsletter (`index.html`), contact (`index-en.html`), training signup (`szkolenia.html`), consulting (`konsulting.html`) — post JSON to [api/send.php](api/send.php), which relays to `api.softspm.pl/send_email_api.php` ([doc/manual_send_email.html](doc/manual_send_email.html)). **Never call that API from the browser**: it authenticates with a Bearer key, and a key in client-side JS is a public key. The proxy keeps it server-side and pins the recipient to server config, so the endpoint cannot be used to mail arbitrary addresses.
|
||||||
|
|
||||||
|
Setup, the exact entry for `/etc/hydronexis/config.php`, the anti-bot layers and post-deploy tests live in [api/README.md](api/README.md). Needs PHP 7.4+.
|
||||||
|
|
||||||
|
**Message bodies are plain text, never HTML.** The remote API sanitises the body before dropping it into its own template, so any markup arrives in the mailbox as visible `<p style="...">`. This bit once, in production. The layout also survives a template that does not turn `\n` into `<br>`: one `Label: value` per line, readable even when collapsed into a paragraph.
|
||||||
|
|
||||||
|
Front-end is [assets/forms.js](assets/forms.js) plus the `.verify`, `.consent`, `.hp` and `.form-status` blocks in the stylesheet. Every form carries, in this order: fields, a **required** marketing-consent checkbox (`data-consent`, its text stored with the message as proof of what was agreed), a slider (`data-verify`), the submit button, a `data-form-status` live region, and a `<noscript>` fallback pointing at info@softspm.com.
|
||||||
|
|
||||||
|
Adding a form means adding it in **three** places: the markup, the `spm_forms()` whitelist in `api/send.php` (fields, labels, limits, subject line — the server ignores anything not listed), and nothing else. Field `name` attributes must match the whitelist keys. Keep `firma_www` as the honeypot name.
|
||||||
|
|
||||||
|
## Conventions
|
||||||
|
|
||||||
|
- Polish content needs correct diacritics and `<html lang="pl">` (`lang="en"` on `index-en.html`); always write files as UTF-8.
|
||||||
|
- **Never use an em dash (`—`) in user-visible copy.** The owner asked for a plain hyphen (`-`) throughout: `Uczymy tego, co sami robimy - a tematy bierzemy z rynku.` This covers page text, SVG `<title>` elements, and CSS comments. The en dash (`–`) survives only in numeric ranges such as `8–16 h`.
|
||||||
|
- Keep the numbering grammar of the section kickers (`02 · Oferta`, `03 · Ścieżki tematyczne`, …) — sections read as numbered notes around the drawn spec sheets. Renumber consistently when inserting a section.
|
||||||
|
- Every framed object (`.plate`, `.cell-frame`, `.course`, `.figure`, `.cta-band`, `.eco-item`) needs its four `<span class="corner tl/tr/bl/br">` children — that is the system's card grammar, not decoration.
|
||||||
|
- Spec sheets carry a title block with a drawing code, revision and sheet number (`Arkusz NN z 06`); keep the sequence unique across pages - index 01-03, szkolenia 04-05, konsulting 06. `index-en.html` mirrors sheets 01-03 as `Sheet NN of 06`. Update the denominator on every sheet when adding one.
|
||||||
|
- The nav collapses under 900px to logo + `.nav-keep` items (EN switch and the CTA); mark anything that must survive on mobile with `nav-keep`.
|
||||||
+195
@@ -0,0 +1,195 @@
|
|||||||
|
# Formularze SoftSPM - konfiguracja i uruchomienie
|
||||||
|
|
||||||
|
Wszystkie formularze strony (newsletter PL, kontakt EN, zgłoszenie na szkolenie,
|
||||||
|
rozmowa konsultingowa) wysyłają dane przez [send.php](send.php), który dopiero
|
||||||
|
woła `https://api.softspm.pl/send_email_api.php` zgodnie z
|
||||||
|
[doc/manual_send_email.html](../doc/manual_send_email.html).
|
||||||
|
|
||||||
|
**Dlaczego przez pośrednika, a nie prosto z przeglądarki:** endpoint autoryzuje
|
||||||
|
się kluczem API w nagłówku `Authorization`. Klucz wysłany z JavaScriptu byłby
|
||||||
|
widoczny w źródle strony dla każdego, kto naciśnie Ctrl+U - i każdy mógłby nim
|
||||||
|
wysyłać maile na dowolny adres. Klucz zostaje na serwerze; przeglądarka rozmawia
|
||||||
|
wyłącznie z `send.php`.
|
||||||
|
|
||||||
|
Wymagania: **PHP 7.4 lub nowszy**, rozszerzenie `curl` (jest fallback na
|
||||||
|
`file_get_contents`, ale cURL jest zalecany).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Co dopisać w `/etc/hydronexis/config.php`
|
||||||
|
|
||||||
|
`api/config.php` czyta ten plik automatycznie. Obsługiwane są dwa zapisy -
|
||||||
|
wybierz ten, który pasuje do tego, co już masz w pliku.
|
||||||
|
|
||||||
|
### Wariant A - plik definiuje stałe (najczęstszy)
|
||||||
|
|
||||||
|
```php
|
||||||
|
// --- formularze softspm.com -------------------------------------------
|
||||||
|
define('SOFTSPM_MAIL_API_KEY', 'tutaj_klucz_do_send_email_api');
|
||||||
|
define('SOFTSPM_FORM_SECRET', 'tutaj_losowy_ciag_min_32_znaki');
|
||||||
|
define('SOFTSPM_FORM_RECIPIENT', 'pzators@go2.pl');
|
||||||
|
```
|
||||||
|
|
||||||
|
### Wariant B - plik zwraca tablicę (`return [...]`)
|
||||||
|
|
||||||
|
```php
|
||||||
|
return [
|
||||||
|
// ... to, co już tam jest ...
|
||||||
|
|
||||||
|
// --- formularze softspm.com ---------------------------------------
|
||||||
|
'softspm_mail_api_key' => 'tutaj_klucz_do_send_email_api',
|
||||||
|
'softspm_form_secret' => 'tutaj_losowy_ciag_min_32_znaki',
|
||||||
|
'softspm_form_recipient' => 'pzators@go2.pl',
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
### Wpisy opcjonalne
|
||||||
|
|
||||||
|
```php
|
||||||
|
// Domeny, z których wolno wysyłać formularze. Bez tego wpisu obowiązuje
|
||||||
|
// lista z api/config.php (softspm.com, www.softspm.com, localhost).
|
||||||
|
define('SOFTSPM_FORM_HOSTS', ['softspm.com', 'www.softspm.com']);
|
||||||
|
|
||||||
|
// Osobna skrzynka dla wybranego formularza. Identyfikatory formularzy:
|
||||||
|
// newsletter, newsletter-en, szkolenia, konsulting
|
||||||
|
define('SOFTSPM_FORM_RECIPIENTS', ['szkolenia' => 'szkolenia@softspm.com']);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Skąd wziąć `SOFTSPM_FORM_SECRET`
|
||||||
|
|
||||||
|
To nie jest klucz do niczego zewnętrznego - to sekret, którym `send.php`
|
||||||
|
podpisuje własne tokeny antybotowe. Wygeneruj dowolny losowy ciąg:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
php -r "echo bin2hex(random_bytes(32)), PHP_EOL;"
|
||||||
|
```
|
||||||
|
|
||||||
|
Zmiana tej wartości unieważnia formularze otwarte w tej chwili w
|
||||||
|
przeglądarkach; nic poza tym się nie dzieje.
|
||||||
|
|
||||||
|
### Uwagi
|
||||||
|
|
||||||
|
- Plik musi być czytelny dla użytkownika, na którym działa PHP (zwykle
|
||||||
|
`www-data`), i **nieczytelny dla świata**: `chmod 640`, właściciel
|
||||||
|
`root:www-data`.
|
||||||
|
- `api/config.php` robi na tym pliku `require`, więc plik musi być poprawnym
|
||||||
|
PHP. Jeśli wykonuje jakieś operacje przy dołączeniu (łączenie z bazą i tym
|
||||||
|
podobne), wykonają się także przy wysyłce formularza.
|
||||||
|
- Ścieżkę można zmienić zmienną środowiskową `SOFTSPM_SHARED_CONFIG`.
|
||||||
|
|
||||||
|
## 2. Kolejność szukania ustawień
|
||||||
|
|
||||||
|
Wygrywa pierwsze znalezione:
|
||||||
|
|
||||||
|
1. zmienne środowiskowe `SOFTSPM_MAIL_API_KEY`, `SOFTSPM_FORM_SECRET`
|
||||||
|
2. `/etc/hydronexis/config.php` (stałe albo klucze tablicy - patrz wyżej)
|
||||||
|
3. `api/config.local.php` - tylko do pracy lokalnej, wzór w
|
||||||
|
[config.local.sample.php](config.local.sample.php)
|
||||||
|
|
||||||
|
Adresat (`recipient`) i lista domen działają tak samo, z tym że wartość
|
||||||
|
z `/etc/hydronexis/config.php` nadpisuje domyślną z `api/config.php`.
|
||||||
|
|
||||||
|
## 3. Katalog roboczy
|
||||||
|
|
||||||
|
`send.php` zakłada przy pierwszym uruchomieniu `api/storage/` na zużyte tokeny,
|
||||||
|
liczniki adresów IP i log. Katalog dostaje `.htaccess` z `Require all denied`.
|
||||||
|
Na serwerze innym niż Apache **zablokuj ten katalog samodzielnie** - nie
|
||||||
|
powinien być dostępny z zewnątrz. Musi być zapisywalny dla PHP:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
mkdir -p /sciezka/do/strony/api/storage
|
||||||
|
chown www-data:www-data /sciezka/do/strony/api/storage
|
||||||
|
chmod 750 /sciezka/do/strony/api/storage
|
||||||
|
```
|
||||||
|
|
||||||
|
W logu (`api/storage/log/RRRR-MM.log`) zapisujemy tylko fakt wysyłki, nazwę
|
||||||
|
formularza i skrót adresu IP - bez treści zgłoszeń i bez danych osobowych.
|
||||||
|
|
||||||
|
## 4. Format wiadomości: czysty tekst, nie HTML
|
||||||
|
|
||||||
|
`send_email_api.php` **sanityzuje treść** przed osadzeniem jej we własnym
|
||||||
|
szablonie (manual, punkt 7). Znaczniki wysłane z `send.php` docierają więc do
|
||||||
|
skrzynki jako widoczny tekst `<p style="...">`. Dlatego wiadomości budujemy
|
||||||
|
z czystego tekstu i **nie wolno tu wstawiać HTML-a**.
|
||||||
|
|
||||||
|
Układ jest odporny na to, czy szablon po drugiej stronie zamienia znaki nowej
|
||||||
|
linii na `<br>`, czy nie: każda pozycja to osobna linia `Etykieta: wartość`,
|
||||||
|
która zostaje czytelna nawet po sklejeniu w jeden akapit.
|
||||||
|
|
||||||
|
```
|
||||||
|
Nowe zgłoszenie ze strony softspm.com
|
||||||
|
Formularz: Zgłoszenie - szkolenia i webinaria
|
||||||
|
Odpowiedz na: jan.kowalski@pwik.example.pl
|
||||||
|
|
||||||
|
--- DANE Z FORMULARZA ---
|
||||||
|
Imię i nazwisko: Jan Kowalski
|
||||||
|
Przedsiębiorstwo: PWiK Testowo
|
||||||
|
E-mail: jan.kowalski@pwik.example.pl
|
||||||
|
Telefon: 600 100 200
|
||||||
|
Interesujący temat: Prawo wodne i wniosek taryfowy
|
||||||
|
Wiadomość:
|
||||||
|
Sześć osób z działu rozliczeń.
|
||||||
|
Najlepiej pierwszy kwartał.
|
||||||
|
|
||||||
|
--- ZGODA UDZIELONA PRZY WYSYŁCE ---
|
||||||
|
Wyrażam zgodę na przetwarzanie moich danych osobowych przez SoftSPM (...)
|
||||||
|
|
||||||
|
--- METRYKA ---
|
||||||
|
Strona: https://softspm.com/szkolenia.html#zgloszenie
|
||||||
|
Data (UTC): 2026-09-01 09:12:33
|
||||||
|
Adres IP: 203.0.113.7
|
||||||
|
```
|
||||||
|
|
||||||
|
Jeśli w otrzymanym mailu linie nadal są sklejone w jeden akapit, znaczy to, że
|
||||||
|
szablon endpointu nie zamienia `\n` na `<br>`. `send_email_api.php` jest wasz,
|
||||||
|
więc najczystszą poprawką jest tam jedno `nl2br()` na sanityzowanej treści -
|
||||||
|
nic po stronie tej strony nie wymaga wtedy zmian.
|
||||||
|
|
||||||
|
## 5. Zabezpieczenia przed botami
|
||||||
|
|
||||||
|
Suwak sam z siebie niczego nie gwarantuje - jest elementem interfejsu, a nie
|
||||||
|
kryptografią. Blokady, które faktycznie odsiewają automaty, działają na
|
||||||
|
serwerze i składają się na całość:
|
||||||
|
|
||||||
|
| Warstwa | Co robi |
|
||||||
|
|---|---|
|
||||||
|
| Token podpisany HMAC | Wysyłka wymaga tokenu wydanego wcześniej przez `send.php`. Skrypt musi wykonać dwa dodatkowe żądania, nie jeden POST. |
|
||||||
|
| Potwierdzenie suwakiem | Osobne, podpisane potwierdzenie wydawane dopiero po przesunięciu suwaka; musi mieć ten sam identyfikator co token. |
|
||||||
|
| Jednorazowość | Każdy token przechodzi raz. Powtórka tego samego żądania dostaje HTTP 409. |
|
||||||
|
| Bramka czasowa | Minimum 3 sekundy między pierwszym dotknięciem formularza a wysyłką (`min_fill_seconds`). Automat robi to w ułamku sekundy. |
|
||||||
|
| Pole-pułapka | Ukryte pole `firma_www`. Wypełnione = bot. Odpowiadamy sukcesem, żeby nie podpowiadać, co go zdradziło. |
|
||||||
|
| Kontrola pochodzenia | `Origin`/`Referer` musi wskazywać na domenę z listy. |
|
||||||
|
| Limit adresu IP | 5 zgłoszeń na godzinę, 20 na dobę (`rate_limit` w `config.php`). |
|
||||||
|
| Stały adresat | Adres odbiorcy pochodzi wyłącznie z konfiguracji serwera, nigdy z formularza - endpoint nie jest przekaźnikiem spamu. |
|
||||||
|
|
||||||
|
Jeśli mimo to zacznie przechodzić spam, następnym krokiem jest Cloudflare
|
||||||
|
Turnstile albo hCaptcha - obie działają na tej samej zasadzie co obecny token,
|
||||||
|
więc podmiana dotknie tylko `send.php` i `assets/forms.js`.
|
||||||
|
|
||||||
|
## 6. Test po wdrożeniu
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Token - powinien zwrócić {"ok":true,"token":"t.szkolenia...."}
|
||||||
|
curl -s -H "Referer: https://softspm.com/szkolenia.html" \
|
||||||
|
"https://softspm.com/api/send.php?action=token&form=szkolenia"
|
||||||
|
|
||||||
|
# 2. Bez nagłówka Referer/Origin - powinno być HTTP 403
|
||||||
|
curl -s -o /dev/null -w '%{http_code}\n' \
|
||||||
|
"https://softspm.com/api/send.php?action=token&form=szkolenia"
|
||||||
|
|
||||||
|
# 3. GET na nieznany formularz - HTTP 400
|
||||||
|
curl -s -o /dev/null -w '%{http_code}\n' -H "Referer: https://softspm.com/" \
|
||||||
|
"https://softspm.com/api/send.php?action=token&form=cokolwiek"
|
||||||
|
|
||||||
|
# 4. POST bez tokenu - HTTP 400 (bad_token)
|
||||||
|
curl -s -H "Content-Type: application/json" -H "Origin: https://softspm.com" \
|
||||||
|
-d '{"form":"szkolenia","zgoda":true,"imie":"Test"}' \
|
||||||
|
"https://softspm.com/api/send.php"
|
||||||
|
```
|
||||||
|
|
||||||
|
Jeśli krok 1 zwraca `{"error":"not_configured"}`, PHP nie widzi klucza albo
|
||||||
|
sekretu - sprawdź uprawnienia `/etc/hydronexis/config.php`.
|
||||||
|
|
||||||
|
Test całości: otwórz formularz w przeglądarce, wypełnij, przesuń suwak,
|
||||||
|
zaznacz zgodę i wyślij. Wiadomość powinna dojść na adres z
|
||||||
|
`SOFTSPM_FORM_RECIPIENT`, a w `api/storage/log/` pojawi się wpis `sent`.
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* WZÓR pliku z sekretami - do pracy lokalnej (XAMPP, dev).
|
||||||
|
*
|
||||||
|
* NA PRODUKCJI TEN PLIK NIE JEST POTRZEBNY. Tam klucze bierzemy
|
||||||
|
* z /etc/hydronexis/config.php - patrz komentarz w config.php.
|
||||||
|
*
|
||||||
|
* 1. Skopiuj ten plik jako config.local.php (w tym samym katalogu).
|
||||||
|
* 2. Wpisz klucz API otrzymany do send_email_api.php.
|
||||||
|
* 3. Wygeneruj losowy token_secret, np.:
|
||||||
|
* php -r "echo bin2hex(random_bytes(32)), PHP_EOL;"
|
||||||
|
* 4. Nie dodawaj config.local.php do repozytorium ani do backupu publicznego.
|
||||||
|
*/
|
||||||
|
|
||||||
|
return [
|
||||||
|
'api_key' => 'TUTAJ_KLUCZ_API',
|
||||||
|
'token_secret' => 'TUTAJ_LOSOWY_CIAG_MIN_32_ZNAKI',
|
||||||
|
|
||||||
|
// Adresat zgłoszeń ze wszystkich formularzy
|
||||||
|
'recipient' => 'pzators@go2.pl',
|
||||||
|
|
||||||
|
// Opcjonalnie: osobna skrzynka dla wybranego formularza
|
||||||
|
// Identyfikatory: newsletter, newsletter-en, szkolenia, konsulting
|
||||||
|
// 'recipients' => ['szkolenia' => 'szkolenia@softspm.com'],
|
||||||
|
|
||||||
|
// Domeny, z których wolno wysyłać formularze
|
||||||
|
// 'allowed_hosts' => ['softspm.com', 'www.softspm.com', 'localhost'],
|
||||||
|
];
|
||||||
+164
@@ -0,0 +1,164 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Ustawienia integracji formularzy z api.softspm.pl/send_email_api.php
|
||||||
|
*
|
||||||
|
* Sekretów NIE trzymamy w tym pliku ani nigdzie w katalogu strony.
|
||||||
|
* Kolejność szukania klucza API i sekretu podpisu (wygrywa pierwsze znalezione):
|
||||||
|
*
|
||||||
|
* 1. zmienne środowiskowe SOFTSPM_MAIL_API_KEY i SOFTSPM_FORM_SECRET
|
||||||
|
* 2. wspólna konfiguracja serwera: /etc/hydronexis/config.php
|
||||||
|
* - stałe SOFTSPM_MAIL_API_KEY / SOFTSPM_FORM_SECRET, albo
|
||||||
|
* - klucze softspm_mail_api_key / softspm_form_secret w zwracanej tablicy
|
||||||
|
* 3. api/config.local.php (wzór: config.local.sample.php) - na potrzeby dev
|
||||||
|
*
|
||||||
|
* Ścieżkę wspólnej konfiguracji można zmienić zmienną SOFTSPM_SHARED_CONFIG.
|
||||||
|
*/
|
||||||
|
|
||||||
|
$config = [
|
||||||
|
// --- API wysyłki (patrz doc/manual_send_email.html) ---------------------
|
||||||
|
'api_url' => 'https://api.softspm.pl/send_email_api.php',
|
||||||
|
'api_key' => '',
|
||||||
|
'timeout' => 15,
|
||||||
|
|
||||||
|
// --- Sekret do podpisywania tokenów antybotowych (HMAC-SHA256) ---------
|
||||||
|
// Dowolny losowy ciąg, min. 32 znaki. Zmiana unieważnia otwarte formularze.
|
||||||
|
'token_secret' => '',
|
||||||
|
|
||||||
|
// --- Adresat zgłoszeń --------------------------------------------------
|
||||||
|
// Ustawiany wyłącznie po stronie serwera. Nigdy nie pochodzi z formularza -
|
||||||
|
// inaczej endpoint stałby się otwartym przekaźnikiem spamu.
|
||||||
|
// Wartość domyślna; produkcja nadpisuje ją z /etc/hydronexis/config.php.
|
||||||
|
'recipient' => 'pzators@go2.pl',
|
||||||
|
// Opcjonalnie: inny adres dla wybranego formularza, np.
|
||||||
|
// 'recipients' => ['szkolenia' => 'szkolenia@softspm.com'],
|
||||||
|
'recipients' => [],
|
||||||
|
'subject_prefix' => '[softspm.com]',
|
||||||
|
|
||||||
|
// --- Skąd wolno wysyłać (nagłówek Origin / Referer) --------------------
|
||||||
|
'allowed_hosts' => [
|
||||||
|
'softspm.com',
|
||||||
|
'www.softspm.com',
|
||||||
|
'localhost',
|
||||||
|
'127.0.0.1',
|
||||||
|
],
|
||||||
|
|
||||||
|
// --- Zabezpieczenia ----------------------------------------------------
|
||||||
|
// Minimalny czas od pierwszej interakcji z formularzem do wysyłki.
|
||||||
|
// Człowiek czyta, pisze i przesuwa suwak; skrypt robi wszystko w jednej serii.
|
||||||
|
'min_fill_seconds' => 3,
|
||||||
|
// Minimalny odstęp między pobraniem tokenu a potwierdzeniem suwakiem.
|
||||||
|
// 0 = wyłączone. Podnoś ostrożnie: ktoś, kto od razu chwyta suwak, robi
|
||||||
|
// obie rzeczy w tej samej sekundzie i zostałby odrzucony niesłusznie.
|
||||||
|
'min_slide_seconds' => 0,
|
||||||
|
// Po tylu sekundach token formularza wygasa (otwarta karta w tle).
|
||||||
|
'max_token_age' => 7200,
|
||||||
|
// Po tylu sekundach wygasa samo potwierdzenie suwakiem.
|
||||||
|
'max_proof_age' => 1800,
|
||||||
|
// Limit zgłoszeń z jednego adresu IP.
|
||||||
|
'rate_limit' => [
|
||||||
|
'per_hour' => 5,
|
||||||
|
'per_day' => 20,
|
||||||
|
],
|
||||||
|
|
||||||
|
// --- Dane robocze (zużyte tokeny, liczniki, log) ------------------------
|
||||||
|
'storage_dir' => __DIR__ . '/storage',
|
||||||
|
];
|
||||||
|
|
||||||
|
// --- 1. Zmienne środowiskowe ------------------------------------------------
|
||||||
|
$fromEnv = [
|
||||||
|
'api_key' => getenv('SOFTSPM_MAIL_API_KEY'),
|
||||||
|
'token_secret' => getenv('SOFTSPM_FORM_SECRET'),
|
||||||
|
];
|
||||||
|
foreach ($fromEnv as $key => $value) {
|
||||||
|
if (is_string($value) && $value !== '') {
|
||||||
|
$config[$key] = $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 2. Wspólna konfiguracja serwera ---------------------------------------
|
||||||
|
$sharedPath = getenv('SOFTSPM_SHARED_CONFIG');
|
||||||
|
if (!is_string($sharedPath) || $sharedPath === '') {
|
||||||
|
$sharedPath = '/etc/hydronexis/config.php';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (is_file($sharedPath) && is_readable($sharedPath)) {
|
||||||
|
// Plik wczytujemy w osobnym zasięgu, żeby nie mieszał w zmiennych tego pliku.
|
||||||
|
$shared = (static function (string $file) {
|
||||||
|
/** @psalm-suppress UnresolvableInclude */
|
||||||
|
return require $file;
|
||||||
|
})($sharedPath);
|
||||||
|
|
||||||
|
if (!is_array($shared)) {
|
||||||
|
$shared = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Jedna wartość może przyjść na dwa sposoby: jako stała zdefiniowana
|
||||||
|
* w /etc/hydronexis/config.php albo jako klucz w tablicy zwracanej przez
|
||||||
|
* ten plik. Zmienna środowiskowa ustawiona wcześniej ma pierwszeństwo.
|
||||||
|
*/
|
||||||
|
$pick = static function (string $constant, string $key) use ($shared) {
|
||||||
|
if (defined($constant)) {
|
||||||
|
$value = constant($constant);
|
||||||
|
if (is_string($value) && $value !== '') {
|
||||||
|
return $value;
|
||||||
|
}
|
||||||
|
if (is_array($value) && $value !== []) {
|
||||||
|
return $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (isset($shared[$key]) && (is_string($shared[$key]) || is_array($shared[$key])) && $shared[$key] !== '') {
|
||||||
|
return $shared[$key];
|
||||||
|
}
|
||||||
|
if (isset($shared[$constant]) && (is_string($shared[$constant]) || is_array($shared[$constant])) && $shared[$constant] !== '') {
|
||||||
|
return $shared[$constant];
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Sekrety - tylko jeśli nie przyszły ze zmiennych środowiskowych.
|
||||||
|
if ($config['api_key'] === '') {
|
||||||
|
$value = $pick('SOFTSPM_MAIL_API_KEY', 'softspm_mail_api_key');
|
||||||
|
if (is_string($value)) {
|
||||||
|
$config['api_key'] = $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ($config['token_secret'] === '') {
|
||||||
|
$value = $pick('SOFTSPM_FORM_SECRET', 'softspm_form_secret');
|
||||||
|
if (is_string($value)) {
|
||||||
|
$config['token_secret'] = $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adresat zgłoszeń - jeden dla wszystkich formularzy.
|
||||||
|
$value = $pick('SOFTSPM_FORM_RECIPIENT', 'softspm_form_recipient');
|
||||||
|
if (is_string($value)) {
|
||||||
|
$config['recipient'] = $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Opcjonalnie: adresaci per formularz, tablica id_formularza => adres.
|
||||||
|
$value = $pick('SOFTSPM_FORM_RECIPIENTS', 'softspm_form_recipients');
|
||||||
|
if (is_array($value)) {
|
||||||
|
$config['recipients'] = $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Opcjonalnie: domeny, z których wolno wysyłać.
|
||||||
|
$value = $pick('SOFTSPM_FORM_HOSTS', 'softspm_form_hosts');
|
||||||
|
if (is_array($value) && $value !== []) {
|
||||||
|
$config['allowed_hosts'] = $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 3. Konfiguracja lokalna (dev) ------------------------------------------
|
||||||
|
$local = __DIR__ . '/config.local.php';
|
||||||
|
if (is_file($local)) {
|
||||||
|
$override = require $local;
|
||||||
|
if (is_array($override)) {
|
||||||
|
$config = array_replace($config, $override);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $config;
|
||||||
+632
@@ -0,0 +1,632 @@
|
|||||||
|
<?php
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* SoftSPM - obsługa formularzy strony.
|
||||||
|
*
|
||||||
|
* Pośrednik między formularzami a api.softspm.pl/send_email_api.php.
|
||||||
|
* Klucz API zostaje na serwerze; przeglądarka nigdy go nie widzi. Adresat
|
||||||
|
* jest stały (config.php), więc endpointu nie da się użyć do wysyłki
|
||||||
|
* dowolnej wiadomości pod dowolny adres.
|
||||||
|
*
|
||||||
|
* Tryby pracy:
|
||||||
|
* GET ?action=token&form=<id> -> wydaje podpisany token formularza
|
||||||
|
* GET ?action=confirm&form=<id>&token=.. -> potwierdza przesunięcie suwaka
|
||||||
|
* POST (JSON) -> waliduje i wysyła zgłoszenie
|
||||||
|
*/
|
||||||
|
|
||||||
|
$config = require __DIR__ . '/config.php';
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
header('X-Content-Type-Options: nosniff');
|
||||||
|
header('Cache-Control: no-store');
|
||||||
|
header('Referrer-Policy: same-origin');
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Definicje formularzy. Serwer przyjmuje wyłącznie te pola - cokolwiek innego
|
||||||
|
// przyjdzie w JSON-ie, jest ignorowane.
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function spm_forms(): array
|
||||||
|
{
|
||||||
|
return [
|
||||||
|
'newsletter' => [
|
||||||
|
'lang' => 'pl',
|
||||||
|
'label' => 'Newsletter',
|
||||||
|
'subject' => 'Zapis do newslettera',
|
||||||
|
'fields' => [
|
||||||
|
'email' => ['label' => 'E-mail', 'type' => 'email', 'required' => true, 'max' => 190],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
'newsletter-en' => [
|
||||||
|
'lang' => 'en',
|
||||||
|
'label' => 'Newsletter (EN)',
|
||||||
|
'subject' => 'Kontakt z wersji angielskiej',
|
||||||
|
'fields' => [
|
||||||
|
'email' => ['label' => 'E-mail', 'type' => 'email', 'required' => true, 'max' => 190],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
'szkolenia' => [
|
||||||
|
'lang' => 'pl',
|
||||||
|
'label' => 'Zgłoszenie - szkolenia i webinaria',
|
||||||
|
'subject' => 'Zapytanie o szkolenie',
|
||||||
|
'fields' => [
|
||||||
|
'imie' => ['label' => 'Imię i nazwisko', 'type' => 'text', 'required' => true, 'max' => 120],
|
||||||
|
'firma' => ['label' => 'Przedsiębiorstwo', 'type' => 'text', 'required' => true, 'max' => 160],
|
||||||
|
'email' => ['label' => 'E-mail', 'type' => 'email', 'required' => true, 'max' => 190],
|
||||||
|
'telefon' => ['label' => 'Telefon', 'type' => 'text', 'required' => false, 'max' => 40],
|
||||||
|
'temat' => ['label' => 'Interesujący temat', 'type' => 'text', 'required' => false, 'max' => 160],
|
||||||
|
'wiadomosc' => ['label' => 'Wiadomość', 'type' => 'textarea', 'required' => false, 'max' => 4000],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
'konsulting' => [
|
||||||
|
'lang' => 'pl',
|
||||||
|
'label' => 'Zgłoszenie - konsulting',
|
||||||
|
'subject' => 'Prośba o rozmowę wstępną',
|
||||||
|
'fields' => [
|
||||||
|
'imie' => ['label' => 'Imię i nazwisko', 'type' => 'text', 'required' => true, 'max' => 120],
|
||||||
|
'firma' => ['label' => 'Przedsiębiorstwo', 'type' => 'text', 'required' => true, 'max' => 160],
|
||||||
|
'email' => ['label' => 'E-mail', 'type' => 'email', 'required' => true, 'max' => 190],
|
||||||
|
'telefon' => ['label' => 'Telefon', 'type' => 'text', 'required' => false, 'max' => 40],
|
||||||
|
'zakres' => ['label' => 'Interesujący zakres', 'type' => 'text', 'required' => false, 'max' => 160],
|
||||||
|
'wiadomosc' => ['label' => 'Opis sytuacji', 'type' => 'textarea', 'required' => false, 'max' => 4000],
|
||||||
|
],
|
||||||
|
],
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Treść zgody utrwalana razem ze zgłoszeniem - dowód, na co konkretnie
|
||||||
|
// zgodził się nadawca w dniu wysyłki.
|
||||||
|
function spm_consent_text(string $lang): string
|
||||||
|
{
|
||||||
|
if ($lang === 'en') {
|
||||||
|
return 'I consent to SoftSPM processing my personal data in order to be contacted '
|
||||||
|
. 'about commercial and marketing matters, including offers of training, '
|
||||||
|
. 'consulting and software. I may withdraw this consent at any time '
|
||||||
|
. 'by writing to info@softspm.com.';
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'Wyrażam zgodę na przetwarzanie moich danych osobowych przez SoftSPM w celu '
|
||||||
|
. 'kontaktu handlowego i marketingowego, w tym przedstawienia oferty szkoleń, '
|
||||||
|
. 'konsultingu i aplikacji. Zgodę mogę wycofać w każdej chwili, pisząc na '
|
||||||
|
. 'info@softspm.com.';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Narzędzia
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
function spm_respond(int $status, array $payload): void
|
||||||
|
{
|
||||||
|
http_response_code($status);
|
||||||
|
echo json_encode($payload, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
function spm_fail(int $status, string $code, string $message): void
|
||||||
|
{
|
||||||
|
spm_respond($status, ['ok' => false, 'error' => $code, 'message' => $message]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function spm_b64u(string $bin): string
|
||||||
|
{
|
||||||
|
return rtrim(strtr(base64_encode($bin), '+/', '-_'), '=');
|
||||||
|
}
|
||||||
|
|
||||||
|
function spm_sign(string $payload, string $secret): string
|
||||||
|
{
|
||||||
|
return spm_b64u(hash_hmac('sha256', $payload, $secret, true));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Token ma postać: rodzaj.formularz.nonce.czas.podpis */
|
||||||
|
function spm_issue_token(string $kind, string $form, string $nonce, string $secret): string
|
||||||
|
{
|
||||||
|
$payload = $kind . '.' . $form . '.' . $nonce . '.' . time();
|
||||||
|
|
||||||
|
return $payload . '.' . spm_sign($payload, $secret);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @return array{nonce:string, ts:int}|null */
|
||||||
|
function spm_read_token(string $token, string $kind, string $form, string $secret): ?array
|
||||||
|
{
|
||||||
|
$parts = explode('.', $token);
|
||||||
|
if (count($parts) !== 5) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
[$gotKind, $gotForm, $nonce, $ts, $sig] = $parts;
|
||||||
|
if ($gotKind !== $kind || $gotForm !== $form || !ctype_digit($ts)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (preg_match('/^[A-Za-z0-9_-]{8,64}$/', $nonce) !== 1) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
$payload = $gotKind . '.' . $gotForm . '.' . $nonce . '.' . $ts;
|
||||||
|
if (!hash_equals(spm_sign($payload, $secret), $sig)) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return ['nonce' => $nonce, 'ts' => (int) $ts];
|
||||||
|
}
|
||||||
|
|
||||||
|
function spm_storage(array $config, string $sub): string
|
||||||
|
{
|
||||||
|
$dir = rtrim($config['storage_dir'], '/\\') . '/' . $sub;
|
||||||
|
if (!is_dir($dir)) {
|
||||||
|
@mkdir($dir, 0770, true);
|
||||||
|
}
|
||||||
|
// Katalog roboczy nie ma prawa być czytany przez przeglądarkę.
|
||||||
|
$guard = rtrim($config['storage_dir'], '/\\') . '/.htaccess';
|
||||||
|
if (!is_file($guard)) {
|
||||||
|
@file_put_contents($guard, "Require all denied\n<IfModule !mod_authz_core.c>\nDeny from all\n</IfModule>\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
return $dir;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Jednorazowość tokenu: nonce raz zużyty nie przechodzi drugi raz. */
|
||||||
|
function spm_nonce_used(array $config, string $nonce): bool
|
||||||
|
{
|
||||||
|
$dir = spm_storage($config, 'nonce');
|
||||||
|
$file = $dir . '/' . hash('sha256', $nonce) . '.used';
|
||||||
|
if (is_file($file)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
@file_put_contents($file, (string) time());
|
||||||
|
|
||||||
|
// Sprzątanie: co jakiś czas kasujemy wpisy starsze niż czas życia tokenu.
|
||||||
|
if (random_int(1, 25) === 1) {
|
||||||
|
$limit = time() - (int) $config['max_token_age'] - 3600;
|
||||||
|
foreach ((glob($dir . '/*.used') ?: []) as $old) {
|
||||||
|
if (@filemtime($old) < $limit) {
|
||||||
|
@unlink($old);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function spm_client_ip(): string
|
||||||
|
{
|
||||||
|
$ip = $_SERVER['REMOTE_ADDR'] ?? '0.0.0.0';
|
||||||
|
|
||||||
|
return is_string($ip) ? $ip : '0.0.0.0';
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Limit zgłoszeń z jednego adresu IP - godzinowy i dobowy. */
|
||||||
|
function spm_rate_limited(array $config, string $ip): bool
|
||||||
|
{
|
||||||
|
$dir = spm_storage($config, 'rate');
|
||||||
|
$file = $dir . '/' . hash('sha256', $ip . '|' . $config['token_secret']) . '.json';
|
||||||
|
$now = time();
|
||||||
|
|
||||||
|
$stamps = [];
|
||||||
|
if (is_file($file)) {
|
||||||
|
$raw = @file_get_contents($file);
|
||||||
|
if (is_string($raw) && $raw !== '') {
|
||||||
|
$decoded = json_decode($raw, true);
|
||||||
|
if (is_array($decoded)) {
|
||||||
|
$stamps = array_values(array_filter($decoded, static fn($t) => is_int($t) && $t > $now - 86400));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$lastHour = count(array_filter($stamps, static fn(int $t) => $t > $now - 3600));
|
||||||
|
if ($lastHour >= (int) $config['rate_limit']['per_hour'] || count($stamps) >= (int) $config['rate_limit']['per_day']) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
$stamps[] = $now;
|
||||||
|
@file_put_contents($file, json_encode($stamps), LOCK_EX);
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Zgłoszenie musi pochodzić ze strony SoftSPM, nie z obcego skryptu. */
|
||||||
|
function spm_origin_ok(array $config): bool
|
||||||
|
{
|
||||||
|
$candidates = [];
|
||||||
|
foreach (['HTTP_ORIGIN', 'HTTP_REFERER'] as $header) {
|
||||||
|
if (!empty($_SERVER[$header]) && is_string($_SERVER[$header])) {
|
||||||
|
$host = parse_url($_SERVER[$header], PHP_URL_HOST);
|
||||||
|
if (is_string($host) && $host !== '') {
|
||||||
|
$candidates[] = strtolower($host);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ($candidates === []) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
$allowed = array_map('strtolower', (array) $config['allowed_hosts']);
|
||||||
|
foreach ($candidates as $host) {
|
||||||
|
if (in_array($host, $allowed, true)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function spm_log(array $config, string $line): void
|
||||||
|
{
|
||||||
|
$dir = spm_storage($config, 'log');
|
||||||
|
@file_put_contents(
|
||||||
|
$dir . '/' . gmdate('Y-m') . '.log',
|
||||||
|
gmdate('c') . ' ' . $line . "\n",
|
||||||
|
FILE_APPEND | LOCK_EX
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Pojedyncza linia tekstu: bez znaków sterujących, bez łamania wiersza. */
|
||||||
|
function spm_clean_line(string $value): string
|
||||||
|
{
|
||||||
|
$value = str_replace(["\r", "\n", "\t"], ' ', $value);
|
||||||
|
$value = preg_replace('/[\x00-\x1F\x7F]/u', '', $value) ?? '';
|
||||||
|
|
||||||
|
return trim(preg_replace('/\s{2,}/u', ' ', $value) ?? '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function spm_clean_text(string $value): string
|
||||||
|
{
|
||||||
|
$value = str_replace("\r\n", "\n", $value);
|
||||||
|
$value = preg_replace('/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/u', '', $value) ?? '';
|
||||||
|
|
||||||
|
return trim($value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
// Start obsługi żądania
|
||||||
|
// ---------------------------------------------------------------------------
|
||||||
|
$method = strtoupper($_SERVER['REQUEST_METHOD'] ?? 'GET');
|
||||||
|
|
||||||
|
if ($method === 'OPTIONS') {
|
||||||
|
http_response_code(204);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($config['token_secret'] === '' || $config['api_key'] === '') {
|
||||||
|
spm_log($config, 'config-missing');
|
||||||
|
spm_fail(503, 'not_configured', 'Formularz nie jest jeszcze skonfigurowany. Napisz na info@softspm.com.');
|
||||||
|
}
|
||||||
|
|
||||||
|
$forms = spm_forms();
|
||||||
|
|
||||||
|
// --- GET: wydanie tokenu i potwierdzenie suwaka ----------------------------
|
||||||
|
if ($method === 'GET') {
|
||||||
|
$action = isset($_GET['action']) && is_string($_GET['action']) ? $_GET['action'] : '';
|
||||||
|
$form = isset($_GET['form']) && is_string($_GET['form']) ? $_GET['form'] : '';
|
||||||
|
|
||||||
|
if (!isset($forms[$form])) {
|
||||||
|
spm_fail(400, 'unknown_form', 'Nieznany formularz.');
|
||||||
|
}
|
||||||
|
if (!spm_origin_ok($config)) {
|
||||||
|
spm_fail(403, 'bad_origin', 'Żądanie spoza strony SoftSPM.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($action === 'token') {
|
||||||
|
$nonce = spm_b64u(random_bytes(12));
|
||||||
|
spm_respond(200, [
|
||||||
|
'ok' => true,
|
||||||
|
'token' => spm_issue_token('t', $form, $nonce, $config['token_secret']),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($action === 'confirm') {
|
||||||
|
$token = isset($_GET['token']) && is_string($_GET['token']) ? $_GET['token'] : '';
|
||||||
|
$data = spm_read_token($token, 't', $form, $config['token_secret']);
|
||||||
|
if ($data === null) {
|
||||||
|
spm_fail(400, 'bad_token', 'Token formularza jest nieprawidłowy. Odśwież stronę.');
|
||||||
|
}
|
||||||
|
if (time() - $data['ts'] > (int) $config['max_token_age']) {
|
||||||
|
spm_fail(400, 'expired', 'Formularz był otwarty zbyt długo. Odśwież stronę.');
|
||||||
|
}
|
||||||
|
spm_respond(200, [
|
||||||
|
'ok' => true,
|
||||||
|
'proof' => spm_issue_token('c', $form, $data['nonce'], $config['token_secret']),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
spm_fail(400, 'bad_action', 'Nieznana operacja.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($method !== 'POST') {
|
||||||
|
spm_fail(405, 'method_not_allowed', 'Dozwolone są wyłącznie żądania POST.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- POST: właściwa wysyłka -------------------------------------------------
|
||||||
|
|
||||||
|
// Formularz wysłany bez JavaScriptu leci tu jako zwykły POST przeglądarki.
|
||||||
|
// Zamiast JSON-a z błędem pokazujemy stronę, którą da się przeczytać.
|
||||||
|
$contentType = strtolower((string) ($_SERVER['CONTENT_TYPE'] ?? ''));
|
||||||
|
if (strpos($contentType, 'application/json') === false) {
|
||||||
|
http_response_code(400);
|
||||||
|
header('Content-Type: text/html; charset=utf-8');
|
||||||
|
echo '<!doctype html><html lang="pl"><head><meta charset="utf-8">'
|
||||||
|
. '<title>Formularz SoftSPM</title></head><body style="font:16px/1.5 system-ui,sans-serif;padding:2rem;max-width:40rem">'
|
||||||
|
. '<h1 style="font-size:1.25rem">Formularz wymaga włączonego JavaScriptu</h1>'
|
||||||
|
. '<p>Napisz do nas bezpośrednio na <a href="mailto:info@softspm.com">info@softspm.com</a>. '
|
||||||
|
. 'Przepraszamy za kłopot.</p>'
|
||||||
|
. '<p><a href="javascript:history.back()">Wróć do formularza</a></p>'
|
||||||
|
. '</body></html>';
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
$raw = file_get_contents('php://input');
|
||||||
|
if (!is_string($raw) || trim($raw) === '') {
|
||||||
|
spm_fail(400, 'empty_payload', 'Puste żądanie.');
|
||||||
|
}
|
||||||
|
|
||||||
|
$input = json_decode($raw, true);
|
||||||
|
if (!is_array($input)) {
|
||||||
|
spm_fail(400, 'invalid_json', 'Nieprawidłowy format danych.');
|
||||||
|
}
|
||||||
|
|
||||||
|
$form = isset($input['form']) && is_string($input['form']) ? $input['form'] : '';
|
||||||
|
if (!isset($forms[$form])) {
|
||||||
|
spm_fail(400, 'unknown_form', 'Nieznany formularz.');
|
||||||
|
}
|
||||||
|
$def = $forms[$form];
|
||||||
|
$lang = $def['lang'];
|
||||||
|
$isEn = $lang === 'en';
|
||||||
|
|
||||||
|
if (!spm_origin_ok($config)) {
|
||||||
|
spm_log($config, 'reject origin form=' . $form);
|
||||||
|
spm_fail(403, 'bad_origin', $isEn ? 'Request did not come from the SoftSPM site.' : 'Żądanie spoza strony SoftSPM.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pułapka na boty: pole ukryte przed człowiekiem. Wypełnione = automat.
|
||||||
|
// Odpowiadamy sukcesem, żeby nie podpowiadać botowi, co go zdradziło.
|
||||||
|
$trap = isset($input['firma_www']) && is_string($input['firma_www']) ? trim($input['firma_www']) : '';
|
||||||
|
if ($trap !== '') {
|
||||||
|
spm_log($config, 'trap form=' . $form . ' ip=' . hash('sha256', spm_client_ip()));
|
||||||
|
spm_respond(200, ['ok' => true, 'message' => $isEn ? 'Message sent.' : 'Wiadomość wysłana.']);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Token formularza + potwierdzenie suwakiem.
|
||||||
|
$token = isset($input['token']) && is_string($input['token']) ? $input['token'] : '';
|
||||||
|
$proof = isset($input['proof']) && is_string($input['proof']) ? $input['proof'] : '';
|
||||||
|
$tokenData = spm_read_token($token, 't', $form, $config['token_secret']);
|
||||||
|
$proofData = spm_read_token($proof, 'c', $form, $config['token_secret']);
|
||||||
|
|
||||||
|
if ($tokenData === null || $proofData === null || !hash_equals($tokenData['nonce'], $proofData['nonce'])) {
|
||||||
|
spm_log($config, 'reject token form=' . $form);
|
||||||
|
spm_fail(400, 'bad_token', $isEn
|
||||||
|
? 'Verification failed. Refresh the page and slide the control again.'
|
||||||
|
: 'Weryfikacja nie powiodła się. Odśwież stronę i przesuń suwak ponownie.');
|
||||||
|
}
|
||||||
|
|
||||||
|
$now = time();
|
||||||
|
if ($now - $tokenData['ts'] > (int) $config['max_token_age'] || $now - $proofData['ts'] > (int) $config['max_proof_age']) {
|
||||||
|
spm_fail(400, 'expired', $isEn
|
||||||
|
? 'The form has expired. Refresh the page and try again.'
|
||||||
|
: 'Formularz stracił ważność. Odśwież stronę i spróbuj ponownie.');
|
||||||
|
}
|
||||||
|
$minSlide = (int) $config['min_slide_seconds'];
|
||||||
|
if ($now - $tokenData['ts'] < (int) $config['min_fill_seconds']
|
||||||
|
|| $proofData['ts'] < $tokenData['ts']
|
||||||
|
|| ($minSlide > 0 && $proofData['ts'] - $tokenData['ts'] < $minSlide)) {
|
||||||
|
spm_log($config, 'reject speed form=' . $form);
|
||||||
|
spm_fail(429, 'too_fast', $isEn
|
||||||
|
? 'That was too quick. Try again in a moment.'
|
||||||
|
: 'Zgłoszenie wysłano zbyt szybko. Spróbuj ponownie za chwilę.');
|
||||||
|
}
|
||||||
|
if (spm_nonce_used($config, $tokenData['nonce'])) {
|
||||||
|
spm_fail(409, 'already_sent', $isEn
|
||||||
|
? 'This form has already been sent. Refresh the page to send another message.'
|
||||||
|
: 'To zgłoszenie zostało już wysłane. Odśwież stronę, aby wysłać kolejne.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Zgoda marketingowa - wymagana, sprawdzana także po stronie serwera.
|
||||||
|
$consent = $input['zgoda'] ?? false;
|
||||||
|
if ($consent !== true && $consent !== 'true' && $consent !== 1 && $consent !== '1' && $consent !== 'on') {
|
||||||
|
spm_fail(400, 'consent_required', $isEn
|
||||||
|
? 'Consent to be contacted is required.'
|
||||||
|
: 'Zgoda na kontakt jest wymagana.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (spm_rate_limited($config, spm_client_ip())) {
|
||||||
|
spm_log($config, 'reject rate form=' . $form . ' ip=' . hash('sha256', spm_client_ip()));
|
||||||
|
spm_fail(429, 'rate_limited', $isEn
|
||||||
|
? 'Too many messages from this address. Please write to info@softspm.com.'
|
||||||
|
: 'Zbyt wiele zgłoszeń z tego adresu. Napisz na info@softspm.com.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Walidacja pól ----------------------------------------------------------
|
||||||
|
$values = [];
|
||||||
|
$replyTo = '';
|
||||||
|
foreach ($def['fields'] as $name => $rule) {
|
||||||
|
$value = $input[$name] ?? '';
|
||||||
|
if (!is_string($value)) {
|
||||||
|
$value = '';
|
||||||
|
}
|
||||||
|
$value = $rule['type'] === 'textarea' ? spm_clean_text($value) : spm_clean_line($value);
|
||||||
|
|
||||||
|
if ($value === '') {
|
||||||
|
if (!empty($rule['required'])) {
|
||||||
|
spm_fail(400, 'missing_field', $isEn
|
||||||
|
? sprintf('Field "%s" is required.', $rule['label'])
|
||||||
|
: sprintf('Pole „%s" jest wymagane.', $rule['label']));
|
||||||
|
}
|
||||||
|
$values[$name] = '';
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (mb_strlen($value) > (int) $rule['max']) {
|
||||||
|
spm_fail(400, 'field_too_long', $isEn
|
||||||
|
? sprintf('Field "%s" is too long.', $rule['label'])
|
||||||
|
: sprintf('Pole „%s" jest za długie.', $rule['label']));
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($rule['type'] === 'email') {
|
||||||
|
if (filter_var($value, FILTER_VALIDATE_EMAIL) === false) {
|
||||||
|
spm_fail(400, 'invalid_email', $isEn
|
||||||
|
? 'The e-mail address is not valid.'
|
||||||
|
: 'Adres e-mail jest nieprawidłowy.');
|
||||||
|
}
|
||||||
|
$replyTo = $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
$values[$name] = $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Budowa wiadomości ------------------------------------------------------
|
||||||
|
// UWAGA: send_email_api.php sanityzuje treść przed osadzeniem jej we własnym
|
||||||
|
// szablonie HTML (manual, punkt 7). Znaczniki wysłane stąd dotarłyby do skrzynki
|
||||||
|
// jako widoczny tekst "<p style=...>", więc wysyłamy czysty tekst.
|
||||||
|
//
|
||||||
|
// Nie wiemy, czy szablon po drugiej stronie zamienia znaki nowej linii na <br>,
|
||||||
|
// dlatego układ jest odporny na oba warianty: każda pozycja to osobna linia
|
||||||
|
// "Etykieta: wartość", która pozostaje czytelna nawet po sklejeniu w akapit.
|
||||||
|
$topic = '';
|
||||||
|
foreach (['temat', 'zakres'] as $key) {
|
||||||
|
if (!empty($values[$key])) {
|
||||||
|
$topic = $values[$key];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$subject = trim($config['subject_prefix'] . ' ' . $def['subject']);
|
||||||
|
if ($topic !== '') {
|
||||||
|
$subject .= ' - ' . $topic;
|
||||||
|
}
|
||||||
|
if (mb_strlen($subject) > 250) {
|
||||||
|
$subject = mb_substr($subject, 0, 247) . '...';
|
||||||
|
}
|
||||||
|
|
||||||
|
$lines = [];
|
||||||
|
$lines[] = $isEn ? 'New message from softspm.com' : 'Nowe zgłoszenie ze strony softspm.com';
|
||||||
|
$lines[] = ($isEn ? 'Form: ' : 'Formularz: ') . $def['label'];
|
||||||
|
if ($replyTo !== '') {
|
||||||
|
$lines[] = ($isEn ? 'Reply to: ' : 'Odpowiedz na: ') . $replyTo;
|
||||||
|
}
|
||||||
|
$lines[] = '';
|
||||||
|
$lines[] = $isEn ? '--- DETAILS ---' : '--- DANE Z FORMULARZA ---';
|
||||||
|
|
||||||
|
foreach ($def['fields'] as $name => $rule) {
|
||||||
|
$value = $values[$name] ?? '';
|
||||||
|
if ($value === '') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if ($rule['type'] === 'textarea') {
|
||||||
|
// Treść wieloliniowa dostaje własny blok, każdy wiersz z wcięciem,
|
||||||
|
// żeby po sklejeniu akapitu dało się odróżnić ją od pozostałych pól.
|
||||||
|
$lines[] = $rule['label'] . ':';
|
||||||
|
foreach (explode("\n", $value) as $row) {
|
||||||
|
$lines[] = ' ' . $row;
|
||||||
|
}
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
$lines[] = $rule['label'] . ': ' . $value;
|
||||||
|
}
|
||||||
|
|
||||||
|
$lines[] = '';
|
||||||
|
$lines[] = $isEn ? '--- CONSENT GIVEN ON SUBMISSION ---' : '--- ZGODA UDZIELONA PRZY WYSYŁCE ---';
|
||||||
|
$lines[] = spm_consent_text($lang);
|
||||||
|
|
||||||
|
$lines[] = '';
|
||||||
|
$lines[] = $isEn ? '--- METADATA ---' : '--- METRYKA ---';
|
||||||
|
$lines[] = ($isEn ? 'Page: ' : 'Strona: ')
|
||||||
|
. (isset($input['page']) && is_string($input['page']) ? spm_clean_line(mb_substr($input['page'], 0, 300)) : '-');
|
||||||
|
$lines[] = ($isEn ? 'Date (UTC): ' : 'Data (UTC): ') . gmdate('Y-m-d H:i:s');
|
||||||
|
$lines[] = ($isEn ? 'IP address: ' : 'Adres IP: ') . spm_client_ip();
|
||||||
|
|
||||||
|
$message = implode("\n", $lines);
|
||||||
|
|
||||||
|
// Zostawiamy zapas na szablon po stronie API (limit endpointu to 20000 znaków).
|
||||||
|
if (mb_strlen($message) > 15000) {
|
||||||
|
$message = mb_substr($message, 0, 15000) . "\n[...]";
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Wysyłka przez api.softspm.pl ------------------------------------------
|
||||||
|
// Adresat pochodzi wyłącznie z konfiguracji serwera. Formularz może mieć
|
||||||
|
// własną skrzynkę (config['recipients']), inaczej idzie na adres domyślny.
|
||||||
|
$recipient = (string) $config['recipient'];
|
||||||
|
if (isset($config['recipients'][$form]) && is_string($config['recipients'][$form]) && $config['recipients'][$form] !== '') {
|
||||||
|
$recipient = $config['recipients'][$form];
|
||||||
|
}
|
||||||
|
if (filter_var($recipient, FILTER_VALIDATE_EMAIL) === false) {
|
||||||
|
spm_log($config, 'config-bad-recipient form=' . $form);
|
||||||
|
spm_fail(503, 'not_configured', $isEn
|
||||||
|
? 'The form is not configured yet. Please write to info@softspm.com.'
|
||||||
|
: 'Formularz nie jest jeszcze skonfigurowany. Napisz na info@softspm.com.');
|
||||||
|
}
|
||||||
|
|
||||||
|
$payload = json_encode([
|
||||||
|
'to' => $recipient,
|
||||||
|
'subject' => $subject,
|
||||||
|
'message' => $message,
|
||||||
|
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
|
||||||
|
|
||||||
|
if ($payload === false) {
|
||||||
|
spm_fail(500, 'encode_failed', $isEn ? 'Could not prepare the message.' : 'Nie udało się przygotować wiadomości.');
|
||||||
|
}
|
||||||
|
|
||||||
|
$headers = [
|
||||||
|
'Content-Type: application/json',
|
||||||
|
'Authorization: Bearer ' . $config['api_key'],
|
||||||
|
];
|
||||||
|
|
||||||
|
$status = 0;
|
||||||
|
$response = '';
|
||||||
|
$netError = '';
|
||||||
|
|
||||||
|
if (function_exists('curl_init')) {
|
||||||
|
$ch = curl_init($config['api_url']);
|
||||||
|
curl_setopt_array($ch, [
|
||||||
|
CURLOPT_POST => true,
|
||||||
|
CURLOPT_POSTFIELDS => $payload,
|
||||||
|
CURLOPT_HTTPHEADER => $headers,
|
||||||
|
CURLOPT_RETURNTRANSFER => true,
|
||||||
|
CURLOPT_CONNECTTIMEOUT => 8,
|
||||||
|
CURLOPT_TIMEOUT => (int) $config['timeout'],
|
||||||
|
]);
|
||||||
|
$body = curl_exec($ch);
|
||||||
|
if ($body === false) {
|
||||||
|
$netError = curl_error($ch);
|
||||||
|
} else {
|
||||||
|
$response = (string) $body;
|
||||||
|
}
|
||||||
|
$status = (int) curl_getinfo($ch, CURLINFO_RESPONSE_CODE);
|
||||||
|
curl_close($ch);
|
||||||
|
} else {
|
||||||
|
$context = stream_context_create([
|
||||||
|
'http' => [
|
||||||
|
'method' => 'POST',
|
||||||
|
'header' => implode("\r\n", $headers),
|
||||||
|
'content' => $payload,
|
||||||
|
'timeout' => (int) $config['timeout'],
|
||||||
|
'ignore_errors' => true,
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
$body = @file_get_contents($config['api_url'], false, $context);
|
||||||
|
if ($body === false) {
|
||||||
|
$netError = 'stream request failed';
|
||||||
|
} else {
|
||||||
|
$response = (string) $body;
|
||||||
|
foreach ($http_response_header ?? [] as $line) {
|
||||||
|
if (preg_match('#^HTTP/\S+\s+(\d{3})#', $line, $m) === 1) {
|
||||||
|
$status = (int) $m[1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($status !== 200) {
|
||||||
|
// Szczegóły zostają w logu serwera, klient dostaje komunikat bez detali.
|
||||||
|
spm_log($config, sprintf(
|
||||||
|
'send-failed form=%s http=%d err=%s resp=%s',
|
||||||
|
$form,
|
||||||
|
$status,
|
||||||
|
$netError !== '' ? $netError : '-',
|
||||||
|
substr($response, 0, 300)
|
||||||
|
));
|
||||||
|
spm_fail(502, 'send_failed', $isEn
|
||||||
|
? 'The message could not be sent. Please write to info@softspm.com.'
|
||||||
|
: 'Nie udało się wysłać wiadomości. Napisz na info@softspm.com.');
|
||||||
|
}
|
||||||
|
|
||||||
|
spm_log($config, 'sent form=' . $form . ' ip=' . hash('sha256', spm_client_ip()));
|
||||||
|
spm_respond(200, [
|
||||||
|
'ok' => true,
|
||||||
|
'message' => $isEn
|
||||||
|
? 'Thank you - your message has been sent. We reply within one working day.'
|
||||||
|
: 'Dziękujemy - wiadomość została wysłana. Odpowiadamy w ciągu jednego dnia roboczego.',
|
||||||
|
]);
|
||||||
+309
@@ -0,0 +1,309 @@
|
|||||||
|
/* ============================================================================
|
||||||
|
SoftSPM - obsługa formularzy
|
||||||
|
Suwak antybotowy, zgoda marketingowa i wysyłka przez api/send.php.
|
||||||
|
Czysty JavaScript, bez zależności.
|
||||||
|
========================================================================= */
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var DICT = {
|
||||||
|
pl: {
|
||||||
|
slide: 'Przesuń, aby zweryfikować',
|
||||||
|
verified: 'Zweryfikowano',
|
||||||
|
checking: 'Sprawdzanie...',
|
||||||
|
needSlider: 'Najpierw przesuń suwak, aby potwierdzić, że nie jesteś robotem.',
|
||||||
|
needConsent: 'Zaznacz zgodę na kontakt, aby wysłać zgłoszenie.',
|
||||||
|
sending: 'Wysyłanie...',
|
||||||
|
sendLabel: 'Wyślij',
|
||||||
|
tokenError: 'Nie udało się przygotować formularza. Odśwież stronę.',
|
||||||
|
network: 'Brak połączenia z serwerem. Spróbuj ponownie lub napisz na info@softspm.com.',
|
||||||
|
generic: 'Nie udało się wysłać wiadomości. Napisz na info@softspm.com.',
|
||||||
|
handleLabel: 'Przesuń suwak w prawo, aby potwierdzić, że nie jesteś robotem'
|
||||||
|
},
|
||||||
|
en: {
|
||||||
|
slide: 'Slide to verify',
|
||||||
|
verified: 'Verified',
|
||||||
|
checking: 'Checking...',
|
||||||
|
needSlider: 'Please slide the control first to confirm you are not a robot.',
|
||||||
|
needConsent: 'Please tick the consent box to send the message.',
|
||||||
|
sending: 'Sending...',
|
||||||
|
sendLabel: 'Send',
|
||||||
|
tokenError: 'The form could not be prepared. Please refresh the page.',
|
||||||
|
network: 'No connection to the server. Try again or write to info@softspm.com.',
|
||||||
|
generic: 'The message could not be sent. Please write to info@softspm.com.',
|
||||||
|
handleLabel: 'Slide the control to the right to confirm you are not a robot'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var lang = (document.documentElement.getAttribute('lang') || 'pl').slice(0, 2).toLowerCase();
|
||||||
|
var t = DICT[lang] || DICT.pl;
|
||||||
|
|
||||||
|
/* -- suwak weryfikacyjny -------------------------------------------------- */
|
||||||
|
function Slider(root, onVerified) {
|
||||||
|
var track = root.querySelector('[data-verify-track]');
|
||||||
|
var fill = root.querySelector('[data-verify-fill]');
|
||||||
|
var handle = root.querySelector('[data-verify-handle]');
|
||||||
|
var hint = root.querySelector('[data-verify-hint]');
|
||||||
|
if (!track || !handle) { return null; }
|
||||||
|
|
||||||
|
var pos = 0;
|
||||||
|
var done = false;
|
||||||
|
var busy = false;
|
||||||
|
var pointerId = null;
|
||||||
|
|
||||||
|
handle.setAttribute('aria-label', t.handleLabel);
|
||||||
|
|
||||||
|
function limit() {
|
||||||
|
return Math.max(0, track.clientWidth - handle.offsetWidth);
|
||||||
|
}
|
||||||
|
|
||||||
|
function place(x) {
|
||||||
|
var max = limit();
|
||||||
|
pos = Math.max(0, Math.min(max, x));
|
||||||
|
handle.style.left = pos + 'px';
|
||||||
|
if (fill) { fill.style.width = (pos + handle.offsetWidth) + 'px'; }
|
||||||
|
handle.setAttribute('aria-valuenow', max > 0 ? String(Math.round((pos / max) * 100)) : '0');
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
done = false;
|
||||||
|
busy = false;
|
||||||
|
root.classList.remove('is-verified');
|
||||||
|
handle.setAttribute('aria-valuetext', t.slide);
|
||||||
|
if (hint) { hint.textContent = t.slide; }
|
||||||
|
place(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function complete() {
|
||||||
|
if (done || busy) { return; }
|
||||||
|
busy = true;
|
||||||
|
place(limit());
|
||||||
|
if (hint) { hint.textContent = t.checking; }
|
||||||
|
onVerified(function (ok) {
|
||||||
|
busy = false;
|
||||||
|
if (ok) {
|
||||||
|
done = true;
|
||||||
|
root.classList.add('is-verified');
|
||||||
|
handle.setAttribute('aria-valuetext', t.verified);
|
||||||
|
if (hint) { hint.textContent = t.verified; }
|
||||||
|
} else {
|
||||||
|
reset();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
handle.addEventListener('pointerdown', function (event) {
|
||||||
|
if (done || busy) { return; }
|
||||||
|
pointerId = event.pointerId;
|
||||||
|
handle.setPointerCapture(pointerId);
|
||||||
|
root.classList.add('is-dragging');
|
||||||
|
var offset = event.clientX - handle.getBoundingClientRect().left;
|
||||||
|
|
||||||
|
function move(moveEvent) {
|
||||||
|
place(moveEvent.clientX - track.getBoundingClientRect().left - offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
function up() {
|
||||||
|
handle.removeEventListener('pointermove', move);
|
||||||
|
handle.removeEventListener('pointerup', up);
|
||||||
|
handle.removeEventListener('pointercancel', up);
|
||||||
|
root.classList.remove('is-dragging');
|
||||||
|
if (pointerId !== null && handle.hasPointerCapture && handle.hasPointerCapture(pointerId)) {
|
||||||
|
handle.releasePointerCapture(pointerId);
|
||||||
|
}
|
||||||
|
pointerId = null;
|
||||||
|
if (pos >= limit() - 2) { complete(); } else { place(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
handle.addEventListener('pointermove', move);
|
||||||
|
handle.addEventListener('pointerup', up);
|
||||||
|
handle.addEventListener('pointercancel', up);
|
||||||
|
event.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Obsługa klawiaturą - strzałkami do końca albo klawiszem End.
|
||||||
|
handle.addEventListener('keydown', function (event) {
|
||||||
|
if (done || busy) { return; }
|
||||||
|
var step = limit() / 4;
|
||||||
|
var key = event.key;
|
||||||
|
if (key === 'ArrowRight' || key === 'ArrowUp') { place(pos + step); }
|
||||||
|
else if (key === 'ArrowLeft' || key === 'ArrowDown') { place(pos - step); }
|
||||||
|
else if (key === 'End') { place(limit()); }
|
||||||
|
else if (key === 'Home') { place(0); }
|
||||||
|
else { return; }
|
||||||
|
event.preventDefault();
|
||||||
|
if (pos >= limit() - 1) { complete(); }
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
place(done ? limit() : pos);
|
||||||
|
});
|
||||||
|
|
||||||
|
reset();
|
||||||
|
|
||||||
|
return {
|
||||||
|
isVerified: function () { return done; },
|
||||||
|
focus: function () { handle.focus(); },
|
||||||
|
reset: reset
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- pojedynczy formularz ------------------------------------------------- */
|
||||||
|
function initForm(form) {
|
||||||
|
var id = form.getAttribute('data-form');
|
||||||
|
var endpoint = form.getAttribute('data-endpoint') || 'api/send.php';
|
||||||
|
var status = form.querySelector('[data-form-status]');
|
||||||
|
var button = form.querySelector('button[type="submit"]');
|
||||||
|
var consent = form.querySelector('[data-consent]');
|
||||||
|
var verifyRoot = form.querySelector('[data-verify]');
|
||||||
|
var buttonLabel = button ? button.textContent : t.sendLabel;
|
||||||
|
|
||||||
|
var token = null;
|
||||||
|
var proof = null;
|
||||||
|
var sending = false;
|
||||||
|
|
||||||
|
function setStatus(text, kind) {
|
||||||
|
if (!status) { return; }
|
||||||
|
status.textContent = text || '';
|
||||||
|
status.className = 'form-status' + (kind ? ' is-' + kind : '');
|
||||||
|
}
|
||||||
|
|
||||||
|
function request(params, done) {
|
||||||
|
var url = endpoint + '?' + params;
|
||||||
|
var xhrDone = false;
|
||||||
|
fetch(url, { credentials: 'same-origin', headers: { 'Accept': 'application/json' } })
|
||||||
|
.then(function (response) { return response.json().catch(function () { return {}; }); })
|
||||||
|
.then(function (data) { xhrDone = true; done(data && data.ok ? data : null); })
|
||||||
|
.catch(function () { if (!xhrDone) { done(null); } });
|
||||||
|
}
|
||||||
|
|
||||||
|
// Token pobieramy dopiero, gdy ktoś zacznie korzystać z formularza.
|
||||||
|
// Dzięki temu serwer mierzy realny czas wypełniania.
|
||||||
|
//
|
||||||
|
// Kolejka pending jest istotna: zdarzenie na suwaku potrafi zawołać tę
|
||||||
|
// funkcję dwa razy w tej samej chwili. Bez niej powstałyby dwa tokeny,
|
||||||
|
// a potwierdzenie dotyczyłoby innego niż ten wysłany razem z formularzem.
|
||||||
|
var pending = null;
|
||||||
|
|
||||||
|
function ensureToken(done) {
|
||||||
|
if (token) { done(true); return; }
|
||||||
|
if (pending) { pending.push(done); return; }
|
||||||
|
pending = [done];
|
||||||
|
request('action=token&form=' + encodeURIComponent(id), function (data) {
|
||||||
|
var queue = pending;
|
||||||
|
pending = null;
|
||||||
|
if (data && data.token) { token = data.token; }
|
||||||
|
for (var i = 0; i < queue.length; i++) { queue[i](!!token); }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var slider = verifyRoot ? Slider(verifyRoot, function (finish) {
|
||||||
|
ensureToken(function (ok) {
|
||||||
|
if (!ok) { setStatus(t.tokenError, 'error'); finish(false); return; }
|
||||||
|
request('action=confirm&form=' + encodeURIComponent(id) + '&token=' + encodeURIComponent(token), function (data) {
|
||||||
|
if (data && data.proof) {
|
||||||
|
proof = data.proof;
|
||||||
|
setStatus('', null);
|
||||||
|
finish(true);
|
||||||
|
} else {
|
||||||
|
setStatus(t.tokenError, 'error');
|
||||||
|
finish(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}) : null;
|
||||||
|
|
||||||
|
// Token bierzemy przy pierwszym dotknięciu formularza - wtedy serwer mierzy
|
||||||
|
// realny czas wypełniania, a nie moment przesunięcia suwaka.
|
||||||
|
var wake = function () { ensureToken(function () {}); };
|
||||||
|
form.addEventListener('focusin', wake);
|
||||||
|
if (verifyRoot) {
|
||||||
|
verifyRoot.addEventListener('pointerdown', wake);
|
||||||
|
verifyRoot.addEventListener('keydown', wake);
|
||||||
|
}
|
||||||
|
|
||||||
|
form.addEventListener('submit', function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
if (sending) { return; }
|
||||||
|
|
||||||
|
if (slider && !slider.isVerified()) {
|
||||||
|
setStatus(t.needSlider, 'error');
|
||||||
|
slider.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (consent && !consent.checked) {
|
||||||
|
setStatus(t.needConsent, 'error');
|
||||||
|
consent.focus();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!token || !proof) {
|
||||||
|
setStatus(t.tokenError, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var payload = {
|
||||||
|
form: id,
|
||||||
|
token: token,
|
||||||
|
proof: proof,
|
||||||
|
zgoda: true,
|
||||||
|
page: window.location.href
|
||||||
|
};
|
||||||
|
var fields = form.querySelectorAll('input[name], select[name], textarea[name]');
|
||||||
|
for (var i = 0; i < fields.length; i++) {
|
||||||
|
var field = fields[i];
|
||||||
|
if (field.type === 'checkbox' || field.type === 'radio' || field.type === 'submit') { continue; }
|
||||||
|
payload[field.name] = field.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
sending = true;
|
||||||
|
setStatus(t.sending, 'busy');
|
||||||
|
if (button) { button.disabled = true; button.textContent = t.sending; }
|
||||||
|
|
||||||
|
fetch(endpoint, {
|
||||||
|
method: 'POST',
|
||||||
|
credentials: 'same-origin',
|
||||||
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||||
|
body: JSON.stringify(payload)
|
||||||
|
})
|
||||||
|
.then(function (response) {
|
||||||
|
return response.json()
|
||||||
|
.catch(function () { return { ok: false }; })
|
||||||
|
.then(function (data) { return { status: response.status, data: data }; });
|
||||||
|
})
|
||||||
|
.then(function (result) {
|
||||||
|
sending = false;
|
||||||
|
if (button) { button.disabled = false; button.textContent = buttonLabel; }
|
||||||
|
if (result.data && result.data.ok) {
|
||||||
|
form.reset();
|
||||||
|
token = null;
|
||||||
|
proof = null;
|
||||||
|
if (slider) { slider.reset(); }
|
||||||
|
setStatus(result.data.message || '', 'ok');
|
||||||
|
} else {
|
||||||
|
setStatus((result.data && result.data.message) || t.generic, 'error');
|
||||||
|
// Token jest jednorazowy i serwer mógł go już zużyć, więc po każdym
|
||||||
|
// błędzie bierzemy nowy i prosimy o ponowne przesunięcie suwaka.
|
||||||
|
token = null;
|
||||||
|
proof = null;
|
||||||
|
if (slider) { slider.reset(); }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
sending = false;
|
||||||
|
if (button) { button.disabled = false; button.textContent = buttonLabel; }
|
||||||
|
setStatus(t.network, 'error');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function boot() {
|
||||||
|
var forms = document.querySelectorAll('form[data-form]');
|
||||||
|
for (var i = 0; i < forms.length; i++) { initForm(forms[i]); }
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.readyState === 'loading') {
|
||||||
|
document.addEventListener('DOMContentLoaded', boot);
|
||||||
|
} else {
|
||||||
|
boot();
|
||||||
|
}
|
||||||
|
})();
|
||||||
@@ -0,0 +1,101 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-app">
|
||||||
|
<title id="t-app">Aplikacje pod klucz - wymagania klienta zamieniane w system webowy i aplikację brygady na telefon</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="app-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
<marker id="app-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
<rect width="640" height="360" fill="#eaeef2"/>
|
||||||
|
<rect width="640" height="360" fill="url(#app-grid)"/>
|
||||||
|
|
||||||
|
<!-- ── wymagania klienta: kartka ze specyfikacją ────────────────────── -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M42 70h96l26 26v138H42z" fill="#f2f2f3"/>
|
||||||
|
<path d="M138 70v26h26"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="m58 122 6 6 11-12"/><path d="m58 150 6 6 11-12"/><path d="m58 178 6 6 11-12"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="84" y="120" width="62" height="7"/>
|
||||||
|
<rect x="84" y="148" width="52" height="7"/>
|
||||||
|
<rect x="84" y="176" width="66" height="7"/>
|
||||||
|
</g>
|
||||||
|
<text x="42" y="256" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="122" lengthAdjust="spacingAndGlyphs" opacity=".75">WYMAGANIA KLIENTA</text>
|
||||||
|
|
||||||
|
<!-- strzałka: wymagania -> wdrożenie -->
|
||||||
|
<path d="M198 148 H244" stroke="#5980a6" stroke-width="1.8" fill="none" marker-end="url(#app-arr)"/>
|
||||||
|
|
||||||
|
<!-- ── aplikacja webowa: okno przeglądarki ─────────────────────────── -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="262" y="62" width="212" height="152" fill="#f2f2f3"/>
|
||||||
|
<path d="M262 88h212"/>
|
||||||
|
</g>
|
||||||
|
<rect x="262" y="62" width="212" height="26" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<g fill="#416180" opacity=".45">
|
||||||
|
<circle cx="276" cy="75" r="3.5"/><circle cx="288" cy="75" r="3.5"/><circle cx="300" cy="75" r="3.5"/>
|
||||||
|
</g>
|
||||||
|
<!-- panel boczny + treść -->
|
||||||
|
<path d="M300 88v126" stroke="#416180" stroke-width="1.5" fill="none"/>
|
||||||
|
<g fill="#5980a6" opacity=".35">
|
||||||
|
<rect x="272" y="100" width="20" height="6"/><rect x="272" y="114" width="20" height="6"/>
|
||||||
|
<rect x="272" y="128" width="20" height="6"/>
|
||||||
|
</g>
|
||||||
|
<rect x="272" y="100" width="20" height="6" fill="#5980a6" opacity=".75"/>
|
||||||
|
<!-- wykres w aplikacji -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.6" fill="none">
|
||||||
|
<path d="M314 176 344 152 368 162 396 128 424 140 458 112"/>
|
||||||
|
<path d="M314 190h144" stroke-opacity=".45"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="314" y="100" width="72" height="7"/>
|
||||||
|
<rect x="314" y="114" width="104" height="6"/>
|
||||||
|
</g>
|
||||||
|
<text x="262" y="238" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="96" lengthAdjust="spacingAndGlyphs" opacity=".75">SYSTEM WEBOWY</text>
|
||||||
|
|
||||||
|
<!-- ── aplikacja mobilna: telefon ──────────────────────────────────── -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="512" y="62" width="86" height="152" rx="9" fill="#f2f2f3"/>
|
||||||
|
<path d="M512 84h86M512 196h86"/>
|
||||||
|
<path d="M544 73h22"/>
|
||||||
|
</g>
|
||||||
|
<rect x="512" y="84" width="86" height="112" fill="#5980a6" fill-opacity=".12"/>
|
||||||
|
<g fill="#5980a6" opacity=".5">
|
||||||
|
<rect x="524" y="96" width="42" height="7"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="524" y="112" width="62" height="26"/>
|
||||||
|
<rect x="524" y="146" width="62" height="26"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".35">
|
||||||
|
<rect x="532" y="120" width="30" height="5"/><rect x="532" y="129" width="42" height="4"/>
|
||||||
|
<rect x="532" y="154" width="38" height="5"/><rect x="532" y="163" width="26" height="4"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="555" cy="205" r="4.5" fill="none" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<text x="512" y="238" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="86" lengthAdjust="spacingAndGlyphs" opacity=".75">APLIKACJA BRYGADY</text>
|
||||||
|
|
||||||
|
<!-- ── pasek: etapy realizacji pod klucz ───────────────────────────── -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M42 296h556"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6">
|
||||||
|
<circle cx="82" cy="296" r="5"/><circle cx="220" cy="296" r="5"/>
|
||||||
|
<circle cx="358" cy="296" r="5"/><circle cx="496" cy="296" r="5"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="580" cy="296" r="7" fill="#1d2d3d"/>
|
||||||
|
<path d="m576 296 3 3 6-7" stroke="#f2f2f3" stroke-width="1.8" fill="none"/>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="11"
|
||||||
|
text-anchor="middle" opacity=".75">
|
||||||
|
<text x="82" y="322" textLength="46" lengthAdjust="spacingAndGlyphs">ANALIZA</text>
|
||||||
|
<text x="220" y="322" textLength="46" lengthAdjust="spacingAndGlyphs">PROJEKT</text>
|
||||||
|
<text x="358" y="322" textLength="62" lengthAdjust="spacingAndGlyphs">PROGRAMOWANIE</text>
|
||||||
|
<text x="496" y="322" textLength="46" lengthAdjust="spacingAndGlyphs">TESTY</text>
|
||||||
|
<text x="580" y="322" textLength="60" lengthAdjust="spacingAndGlyphs">WDROŻENIE</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,101 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 400" role="img" aria-labelledby="t-eko">
|
||||||
|
<title id="t-eko">Schemat ekosystemu SoftSPM - portal Wodociągowiec i marketplace Giełda Komunalna wymieniają tematy, praktyków i ogłoszenia z platformą kursową w centrum</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="eko-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
<marker id="eko-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
<rect width="720" height="400" fill="#eaeef2"/>
|
||||||
|
<rect width="720" height="400" fill="url(#eko-grid)"/>
|
||||||
|
|
||||||
|
<!-- ── połączenia ──────────────────────────────────────────────────────
|
||||||
|
Linie przerwane w miejscu etykiety (luka w stroke-dasharray), więc
|
||||||
|
tekst nie leży na kresce i nie potrzebuje tła. Strzałki wchodzą
|
||||||
|
w krawędzie kartonów, nie w narożniki. -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<!-- poziomo: portal <-> giełda; dł. 184, luka 100 pod etykietą -->
|
||||||
|
<path d="M268 98 H452" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||||
|
stroke-dasharray="42 100 42"/>
|
||||||
|
<!-- ukośnie: portal <-> platforma; dł. 145, luka 91 pod etykietą -->
|
||||||
|
<path d="M190 162 L310 244" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||||
|
stroke-dasharray="27 91 27"/>
|
||||||
|
<!-- ukośnie: giełda <-> platforma -->
|
||||||
|
<path d="M530 162 L410 244" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||||
|
stroke-dasharray="27 91 27"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── etykiety przepływów (w lukach linii) ─────────────────────────
|
||||||
|
textLength wymusza szerokość napisu niezależnie od tego, czy Barlow
|
||||||
|
Condensed się załadował - bez tego zastępczy font rozpycha tekst. -->
|
||||||
|
<g font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="12.5"
|
||||||
|
fill="#416180" text-anchor="middle">
|
||||||
|
<text x="360" y="102" textLength="88" lengthAdjust="spacingAndGlyphs">TEMATY Z RYNKU</text>
|
||||||
|
<text x="250" y="203" textLength="58" lengthAdjust="spacingAndGlyphs"
|
||||||
|
transform="rotate(34.3 250 203)">PRAKTYCY</text>
|
||||||
|
<text x="470" y="203" textLength="62" lengthAdjust="spacingAndGlyphs"
|
||||||
|
transform="rotate(-34.3 470 203)">OGŁOSZENIA</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── Wodociągowiec.pl ─────────────────────────────────────────────
|
||||||
|
Karton 180 px, wcięcie 14 px z każdej strony -> 152 px na tekst. -->
|
||||||
|
<g>
|
||||||
|
<rect x="88" y="52" width="180" height="110" fill="#f2f2f3" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="88" y="52" width="180" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="102" y="72" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="14" font-weight="600"
|
||||||
|
textLength="120" lengthAdjust="spacingAndGlyphs">WODOCIĄGOWIEC.PL</text>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="102" y="94" width="40" height="34"/>
|
||||||
|
<path d="M154 100h100M154 111h76M154 122h100"/>
|
||||||
|
</g>
|
||||||
|
<text x="102" y="150" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" opacity=".72"
|
||||||
|
textLength="150" lengthAdjust="spacingAndGlyphs">PORTAL BRANŻOWY · WIEDZA</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── Giełda Komunalna ────────────────────────────────────────────── -->
|
||||||
|
<g>
|
||||||
|
<rect x="452" y="52" width="180" height="110" fill="#f2f2f3" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="452" y="52" width="180" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="466" y="72" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="14" font-weight="600"
|
||||||
|
textLength="134" lengthAdjust="spacingAndGlyphs">GIEŁDAKOMUNALNA.PL</text>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="466" y="94" width="32" height="34"/>
|
||||||
|
<rect x="506" y="94" width="32" height="34"/>
|
||||||
|
<rect x="546" y="94" width="32" height="34"/>
|
||||||
|
<rect x="586" y="94" width="18" height="34"/>
|
||||||
|
</g>
|
||||||
|
<text x="466" y="150" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" opacity=".72"
|
||||||
|
textLength="134" lengthAdjust="spacingAndGlyphs">MARKETPLACE · WYSTAW ZA 0 ZŁ</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── Platforma kursowa (centrum) ─────────────────────────────────── -->
|
||||||
|
<g>
|
||||||
|
<rect x="248" y="244" width="224" height="120" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="248" y="244" width="224" height="32" fill="#1d2d3d"/>
|
||||||
|
<text x="360" y="266" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="15" font-weight="600" text-anchor="middle"
|
||||||
|
textLength="140" lengthAdjust="spacingAndGlyphs">PLATFORMA KURSOWA</text>
|
||||||
|
<g stroke="#f2f2f3" stroke-width="1.6" fill="none">
|
||||||
|
<rect x="266" y="290" width="56" height="38"/>
|
||||||
|
<path d="M336 298h118M336 309h92M336 320h118"/>
|
||||||
|
</g>
|
||||||
|
<path d="m287 303 13 6-13 6z" fill="#f2f2f3"/>
|
||||||
|
<text x="360" y="350" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" text-anchor="middle" opacity=".9"
|
||||||
|
textLength="192" lengthAdjust="spacingAndGlyphs">WEBINARIA · E-LEARNING · CERTYFIKATY</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── krzyżyki rejestracyjne wokół centrum ────────────────────────── -->
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".45">
|
||||||
|
<path d="M241 237v13M235 243h13"/>
|
||||||
|
<path d="M479 237v13M473 243h13"/>
|
||||||
|
<path d="M241 359v13M235 365h13"/>
|
||||||
|
<path d="M479 359v13M473 365h13"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,101 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-app">
|
||||||
|
<title id="t-app">Turnkey software - client requirements turned into a web system and a field crew app</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="app-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
<marker id="app-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
<rect width="640" height="360" fill="#eaeef2"/>
|
||||||
|
<rect width="640" height="360" fill="url(#app-grid)"/>
|
||||||
|
|
||||||
|
<!-- ── wymagania klienta: kartka ze specyfikacją ────────────────────── -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M42 70h96l26 26v138H42z" fill="#f2f2f3"/>
|
||||||
|
<path d="M138 70v26h26"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="m58 122 6 6 11-12"/><path d="m58 150 6 6 11-12"/><path d="m58 178 6 6 11-12"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="84" y="120" width="62" height="7"/>
|
||||||
|
<rect x="84" y="148" width="52" height="7"/>
|
||||||
|
<rect x="84" y="176" width="66" height="7"/>
|
||||||
|
</g>
|
||||||
|
<text x="42" y="256" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="130" lengthAdjust="spacingAndGlyphs" opacity=".75">CLIENT REQUIREMENTS</text>
|
||||||
|
|
||||||
|
<!-- strzałka: wymagania -> wdrożenie -->
|
||||||
|
<path d="M198 148 H244" stroke="#5980a6" stroke-width="1.8" fill="none" marker-end="url(#app-arr)"/>
|
||||||
|
|
||||||
|
<!-- ── aplikacja webowa: okno przeglądarki ─────────────────────────── -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="262" y="62" width="212" height="152" fill="#f2f2f3"/>
|
||||||
|
<path d="M262 88h212"/>
|
||||||
|
</g>
|
||||||
|
<rect x="262" y="62" width="212" height="26" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<g fill="#416180" opacity=".45">
|
||||||
|
<circle cx="276" cy="75" r="3.5"/><circle cx="288" cy="75" r="3.5"/><circle cx="300" cy="75" r="3.5"/>
|
||||||
|
</g>
|
||||||
|
<!-- panel boczny + treść -->
|
||||||
|
<path d="M300 88v126" stroke="#416180" stroke-width="1.5" fill="none"/>
|
||||||
|
<g fill="#5980a6" opacity=".35">
|
||||||
|
<rect x="272" y="100" width="20" height="6"/><rect x="272" y="114" width="20" height="6"/>
|
||||||
|
<rect x="272" y="128" width="20" height="6"/>
|
||||||
|
</g>
|
||||||
|
<rect x="272" y="100" width="20" height="6" fill="#5980a6" opacity=".75"/>
|
||||||
|
<!-- wykres w aplikacji -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.6" fill="none">
|
||||||
|
<path d="M314 176 344 152 368 162 396 128 424 140 458 112"/>
|
||||||
|
<path d="M314 190h144" stroke-opacity=".45"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="314" y="100" width="72" height="7"/>
|
||||||
|
<rect x="314" y="114" width="104" height="6"/>
|
||||||
|
</g>
|
||||||
|
<text x="262" y="238" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="80" lengthAdjust="spacingAndGlyphs" opacity=".75">WEB SYSTEM</text>
|
||||||
|
|
||||||
|
<!-- ── aplikacja mobilna: telefon ──────────────────────────────────── -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="512" y="62" width="86" height="152" rx="9" fill="#f2f2f3"/>
|
||||||
|
<path d="M512 84h86M512 196h86"/>
|
||||||
|
<path d="M544 73h22"/>
|
||||||
|
</g>
|
||||||
|
<rect x="512" y="84" width="86" height="112" fill="#5980a6" fill-opacity=".12"/>
|
||||||
|
<g fill="#5980a6" opacity=".5">
|
||||||
|
<rect x="524" y="96" width="42" height="7"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="524" y="112" width="62" height="26"/>
|
||||||
|
<rect x="524" y="146" width="62" height="26"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".35">
|
||||||
|
<rect x="532" y="120" width="30" height="5"/><rect x="532" y="129" width="42" height="4"/>
|
||||||
|
<rect x="532" y="154" width="38" height="5"/><rect x="532" y="163" width="26" height="4"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="555" cy="205" r="4.5" fill="none" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<text x="512" y="238" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="106" lengthAdjust="spacingAndGlyphs" opacity=".75">FIELD CREW APP</text>
|
||||||
|
|
||||||
|
<!-- ── pasek: etapy realizacji pod klucz ───────────────────────────── -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M42 296h556"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6">
|
||||||
|
<circle cx="82" cy="296" r="5"/><circle cx="220" cy="296" r="5"/>
|
||||||
|
<circle cx="358" cy="296" r="5"/><circle cx="496" cy="296" r="5"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="580" cy="296" r="7" fill="#1d2d3d"/>
|
||||||
|
<path d="m576 296 3 3 6-7" stroke="#f2f2f3" stroke-width="1.8" fill="none"/>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="11"
|
||||||
|
text-anchor="middle" opacity=".75">
|
||||||
|
<text x="82" y="322" textLength="48" lengthAdjust="spacingAndGlyphs">ANALYSIS</text>
|
||||||
|
<text x="220" y="322" textLength="44" lengthAdjust="spacingAndGlyphs">DESIGN</text>
|
||||||
|
<text x="358" y="322" textLength="66" lengthAdjust="spacingAndGlyphs">DEVELOPMENT</text>
|
||||||
|
<text x="496" y="322" textLength="44" lengthAdjust="spacingAndGlyphs">TESTING</text>
|
||||||
|
<text x="580" y="322" textLength="46" lengthAdjust="spacingAndGlyphs">ROLLOUT</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,101 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 400" role="img" aria-labelledby="t-eko">
|
||||||
|
<title id="t-eko">SoftSPM ecosystem diagram - the Wodociagowiec portal and the Gielda Komunalna marketplace exchange topics, practitioners and listings with the course platform at the centre</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="eko-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
<marker id="eko-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/>
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
<rect width="720" height="400" fill="#eaeef2"/>
|
||||||
|
<rect width="720" height="400" fill="url(#eko-grid)"/>
|
||||||
|
|
||||||
|
<!-- ── połączenia ──────────────────────────────────────────────────────
|
||||||
|
Linie przerwane w miejscu etykiety (luka w stroke-dasharray), więc
|
||||||
|
tekst nie leży na kresce i nie potrzebuje tła. Strzałki wchodzą
|
||||||
|
w krawędzie kartonów, nie w narożniki. -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<!-- poziomo: portal <-> giełda; dł. 184, luka 100 pod etykietą -->
|
||||||
|
<path d="M268 98 H452" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||||
|
stroke-dasharray="42 100 42"/>
|
||||||
|
<!-- ukośnie: portal <-> platforma; dł. 145, luka 91 pod etykietą -->
|
||||||
|
<path d="M190 162 L310 244" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||||
|
stroke-dasharray="27 91 27"/>
|
||||||
|
<!-- ukośnie: giełda <-> platforma -->
|
||||||
|
<path d="M530 162 L410 244" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||||
|
stroke-dasharray="27 91 27"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── etykiety przepływów (w lukach linii) ─────────────────────────
|
||||||
|
textLength wymusza szerokość napisu niezależnie od tego, czy Barlow
|
||||||
|
Condensed się załadował - bez tego zastępczy font rozpycha tekst. -->
|
||||||
|
<g font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="12.5"
|
||||||
|
fill="#416180" text-anchor="middle">
|
||||||
|
<text x="360" y="102" textLength="88" lengthAdjust="spacingAndGlyphs">MARKET TOPICS</text>
|
||||||
|
<text x="250" y="203" textLength="58" lengthAdjust="spacingAndGlyphs"
|
||||||
|
transform="rotate(34.3 250 203)">EXPERTS</text>
|
||||||
|
<text x="470" y="203" textLength="62" lengthAdjust="spacingAndGlyphs"
|
||||||
|
transform="rotate(-34.3 470 203)">LISTINGS</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── Wodociągowiec.pl ─────────────────────────────────────────────
|
||||||
|
Karton 180 px, wcięcie 14 px z każdej strony -> 152 px na tekst. -->
|
||||||
|
<g>
|
||||||
|
<rect x="88" y="52" width="180" height="110" fill="#f2f2f3" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="88" y="52" width="180" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="102" y="72" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="14" font-weight="600"
|
||||||
|
textLength="120" lengthAdjust="spacingAndGlyphs">WODOCIAGOWIEC.PL</text>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="102" y="94" width="40" height="34"/>
|
||||||
|
<path d="M154 100h100M154 111h76M154 122h100"/>
|
||||||
|
</g>
|
||||||
|
<text x="102" y="150" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" opacity=".72"
|
||||||
|
textLength="150" lengthAdjust="spacingAndGlyphs">TRADE PORTAL · KNOWLEDGE</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── Giełda Komunalna ────────────────────────────────────────────── -->
|
||||||
|
<g>
|
||||||
|
<rect x="452" y="52" width="180" height="110" fill="#f2f2f3" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="452" y="52" width="180" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="466" y="72" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="14" font-weight="600"
|
||||||
|
textLength="134" lengthAdjust="spacingAndGlyphs">GIELDAKOMUNALNA.PL</text>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="466" y="94" width="32" height="34"/>
|
||||||
|
<rect x="506" y="94" width="32" height="34"/>
|
||||||
|
<rect x="546" y="94" width="32" height="34"/>
|
||||||
|
<rect x="586" y="94" width="18" height="34"/>
|
||||||
|
</g>
|
||||||
|
<text x="466" y="150" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" opacity=".72"
|
||||||
|
textLength="134" lengthAdjust="spacingAndGlyphs">MARKETPLACE · FREE TO LIST</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── Platforma kursowa (centrum) ─────────────────────────────────── -->
|
||||||
|
<g>
|
||||||
|
<rect x="248" y="244" width="224" height="120" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="248" y="244" width="224" height="32" fill="#1d2d3d"/>
|
||||||
|
<text x="360" y="266" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="15" font-weight="600" text-anchor="middle"
|
||||||
|
textLength="140" lengthAdjust="spacingAndGlyphs">COURSE PLATFORM</text>
|
||||||
|
<g stroke="#f2f2f3" stroke-width="1.6" fill="none">
|
||||||
|
<rect x="266" y="290" width="56" height="38"/>
|
||||||
|
<path d="M336 298h118M336 309h92M336 320h118"/>
|
||||||
|
</g>
|
||||||
|
<path d="m287 303 13 6-13 6z" fill="#f2f2f3"/>
|
||||||
|
<text x="360" y="350" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" text-anchor="middle" opacity=".9"
|
||||||
|
textLength="192" lengthAdjust="spacingAndGlyphs">WEBINARS · E-LEARNING · CERTIFICATES</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- ── krzyżyki rejestracyjne wokół centrum ────────────────────────── -->
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".45">
|
||||||
|
<path d="M241 237v13M235 243h13"/>
|
||||||
|
<path d="M479 237v13M473 243h13"/>
|
||||||
|
<path d="M241 359v13M235 365h13"/>
|
||||||
|
<path d="M479 359v13M473 365h13"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,54 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-audyt">
|
||||||
|
<title id="t-audyt">Security audit - review of system layers, a vulnerability list and NIS2 compliance</title>
|
||||||
|
<defs><pattern id="g-audyt" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-audyt)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="180" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · SECURITY AUDIT</text>
|
||||||
|
|
||||||
|
<!-- tarcza -->
|
||||||
|
<g stroke="#416180" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M108 56 52 78v50c0 40 28 68 56 74 28-6 56-34 56-74V78z" fill="#f2f2f3"/>
|
||||||
|
</g>
|
||||||
|
<path d="M108 56 52 78v50c0 40 28 68 56 74z" fill="#5980a6" fill-opacity=".18"/>
|
||||||
|
<g stroke="#5980a6" stroke-width="2.6" fill="none">
|
||||||
|
<path d="m84 122 16 16 30-34"/>
|
||||||
|
</g>
|
||||||
|
<text x="60" y="224" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" textLength="102" lengthAdjust="spacingAndGlyphs" opacity=".72">NIS2 COMPLIANCE</text>
|
||||||
|
|
||||||
|
<!-- raport z podatnosciami -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="204" y="52" width="228" height="150" fill="#f2f2f3"/>
|
||||||
|
<path d="M204 76h228"/>
|
||||||
|
</g>
|
||||||
|
<rect x="204" y="52" width="228" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="216" y="69" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="124" lengthAdjust="spacingAndGlyphs">VULNERABILITY LIST</text>
|
||||||
|
|
||||||
|
<!-- pozycje: poziom ryzyka + opis -->
|
||||||
|
<g>
|
||||||
|
<rect x="216" y="88" width="30" height="12" fill="#1d2d3d"/>
|
||||||
|
<rect x="216" y="112" width="30" height="12" fill="#5980a6"/>
|
||||||
|
<rect x="216" y="136" width="30" height="12" fill="#5980a6" fill-opacity=".55"/>
|
||||||
|
<rect x="216" y="160" width="30" height="12" fill="#5980a6" fill-opacity=".3"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="256" y="90" width="150" height="7"/>
|
||||||
|
<rect x="256" y="114" width="124" height="7"/>
|
||||||
|
<rect x="256" y="138" width="142" height="7"/>
|
||||||
|
<rect x="256" y="162" width="110" height="7"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="8.5"
|
||||||
|
text-anchor="middle" opacity=".9">
|
||||||
|
<text x="231" y="97" fill="#f2f2f3" textLength="22" lengthAdjust="spacingAndGlyphs">CRIT.</text>
|
||||||
|
<text x="231" y="121" fill="#f2f2f3" textLength="22" lengthAdjust="spacingAndGlyphs">HIGH</text>
|
||||||
|
</g>
|
||||||
|
<text x="204" y="224" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" textLength="164" lengthAdjust="spacingAndGlyphs" opacity=".72">RECOMMENDATIONS BY PRIORITY</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,78 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-cyfr">
|
||||||
|
<title id="t-cyfr">Digitising a utility - paper documentation turned into a system with a phased rollout plan</title>
|
||||||
|
<defs><pattern id="g-cyfr" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||||
|
<marker id="cy-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6.5" markerHeight="6.5" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker>
|
||||||
|
</defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-cyfr)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="150" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · DIGITISATION</text>
|
||||||
|
|
||||||
|
<!-- stos papierowych teczek: stan wyjściowy -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||||
|
<path d="M44 148h84v52H44z"/>
|
||||||
|
<path d="M50 136h84v52H50z"/>
|
||||||
|
<path d="M56 124h84v52H56z"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".38">
|
||||||
|
<rect x="66" y="138" width="52" height="6"/>
|
||||||
|
<rect x="66" y="150" width="38" height="5"/>
|
||||||
|
<rect x="66" y="160" width="46" height="5"/>
|
||||||
|
</g>
|
||||||
|
<text x="44" y="220" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" textLength="94" lengthAdjust="spacingAndGlyphs" opacity=".72">PAPER AND SHEETS</text>
|
||||||
|
|
||||||
|
<!-- strzałka przejścia -->
|
||||||
|
<path d="M156 152 H206" stroke="#5980a6" stroke-width="1.8" fill="none" marker-end="url(#cy-arr)"/>
|
||||||
|
|
||||||
|
<!-- system docelowy: ekran z modułami -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="224" y="60" width="212" height="128" fill="#f2f2f3"/>
|
||||||
|
<path d="M224 84h212"/>
|
||||||
|
</g>
|
||||||
|
<rect x="224" y="60" width="212" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="236" y="77" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="104" lengthAdjust="spacingAndGlyphs">CENTRAL SYSTEM</text>
|
||||||
|
|
||||||
|
<!-- moduły w systemie -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.4" fill="none">
|
||||||
|
<rect x="238" y="96" width="58" height="34"/>
|
||||||
|
<rect x="306" y="96" width="58" height="34"/>
|
||||||
|
<rect x="374" y="96" width="48" height="34"/>
|
||||||
|
<rect x="238" y="140" width="58" height="34"/>
|
||||||
|
<rect x="306" y="140" width="116" height="34"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".3">
|
||||||
|
<rect x="238" y="96" width="58" height="34"/>
|
||||||
|
<rect x="306" y="140" width="116" height="34"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9"
|
||||||
|
text-anchor="middle" opacity=".85">
|
||||||
|
<text x="267" y="117" textLength="40" lengthAdjust="spacingAndGlyphs">ASSETS</text>
|
||||||
|
<text x="335" y="117" textLength="48" lengthAdjust="spacingAndGlyphs">WORK ORDERS</text>
|
||||||
|
<text x="398" y="117" textLength="40" lengthAdjust="spacingAndGlyphs">READINGS</text>
|
||||||
|
<text x="267" y="161" textLength="40" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||||
|
<text x="364" y="161" textLength="58" lengthAdjust="spacingAndGlyphs">REPORTING</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- etapowy plan wdrożenia -->
|
||||||
|
<g stroke="#416180" stroke-width="1.4" fill="none" opacity=".8">
|
||||||
|
<path d="M224 208h212"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6">
|
||||||
|
<circle cx="252" cy="208" r="4.5"/>
|
||||||
|
<circle cx="330" cy="208" r="4.5"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="408" cy="208" r="4.5" fill="none" stroke="#416180" stroke-width="1.4"/>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9.5"
|
||||||
|
text-anchor="middle" opacity=".75">
|
||||||
|
<text x="252" y="226" textLength="38" lengthAdjust="spacingAndGlyphs">PHASE I</text>
|
||||||
|
<text x="330" y="226" textLength="42" lengthAdjust="spacingAndGlyphs">PHASE II</text>
|
||||||
|
<text x="408" y="226" textLength="46" lengthAdjust="spacingAndGlyphs">PHASE III</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,68 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-gielda">
|
||||||
|
<title id="t-gielda">Gielda Komunalna - a free marketplace: warehouse surplus listed for manufacturers and contractors in the trade</title>
|
||||||
|
<defs><pattern id="g-gielda" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||||
|
<marker id="gl-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6.5" markerHeight="6.5" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker>
|
||||||
|
</defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-gielda)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="168" lengthAdjust="spacingAndGlyphs" opacity=".7">ECOSYSTEM · GIELDA KOMUNALNA</text>
|
||||||
|
|
||||||
|
<!-- magazyn: nadwyżki, które gdzieś leżą -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M38 104 78 88l40 16"/>
|
||||||
|
<path d="M46 104v66h64v-66"/>
|
||||||
|
<path d="M46 116h64"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".3" stroke="#416180" stroke-width="1.3">
|
||||||
|
<rect x="58" y="126" width="18" height="18"/>
|
||||||
|
<rect x="80" y="126" width="18" height="18"/>
|
||||||
|
<rect x="58" y="148" width="18" height="18"/>
|
||||||
|
<rect x="80" y="148" width="18" height="18"/>
|
||||||
|
</g>
|
||||||
|
<text x="40" y="192" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="92" lengthAdjust="spacingAndGlyphs" opacity=".72">SITTING IN STORAGE</text>
|
||||||
|
|
||||||
|
<!-- ogłoszenie: wystawiasz za darmo -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="182" y="86" width="116" height="84" fill="#f2f2f3"/>
|
||||||
|
<path d="M182 108h116"/>
|
||||||
|
</g>
|
||||||
|
<rect x="182" y="86" width="116" height="22" fill="#5980a6" fill-opacity=".22"/>
|
||||||
|
<text x="194" y="102" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="60" lengthAdjust="spacingAndGlyphs">LISTING</text>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="194" y="118" width="60" height="7"/>
|
||||||
|
<rect x="194" y="130" width="88" height="6"/>
|
||||||
|
</g>
|
||||||
|
<!-- znacznik ceny wystawienia -->
|
||||||
|
<rect x="194" y="144" width="46" height="18" fill="#5980a6"/>
|
||||||
|
<text x="217" y="157" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" font-weight="600" text-anchor="middle"
|
||||||
|
textLength="30" lengthAdjust="spacingAndGlyphs">FREE</text>
|
||||||
|
<text x="246" y="157" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" textLength="44" lengthAdjust="spacingAndGlyphs" opacity=".75">TO LIST</text>
|
||||||
|
|
||||||
|
<!-- strzałki: magazyn -> ogłoszenie -> odbiorcy (w drugą stronę też: wymiana) -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M124 128 H172" marker-end="url(#gl-arr)"/>
|
||||||
|
<path d="M308 128 H352" marker-start="url(#gl-arr)" marker-end="url(#gl-arr)"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- odbiorcy: producenci i wykonawcy z branży -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<circle cx="386" cy="98" r="11"/><path d="M370 128v-12a16 16 0 0 1 32 0v12"/>
|
||||||
|
<circle cx="428" cy="98" r="11"/><path d="M412 128v-12a16 16 0 0 1 32 0v12"/>
|
||||||
|
<circle cx="407" cy="150" r="11"/><path d="M391 180v-12a16 16 0 0 1 32 0v12"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".22">
|
||||||
|
<circle cx="386" cy="98" r="11"/><circle cx="428" cy="98" r="11"/><circle cx="407" cy="150" r="11"/>
|
||||||
|
</g>
|
||||||
|
<text x="356" y="204" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="98" lengthAdjust="spacingAndGlyphs" opacity=".72">MAKERS · CONTRACTORS</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,59 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-integr">
|
||||||
|
<title id="t-integr">Integration with ERP, CRM and tax systems - the data exchange bus</title>
|
||||||
|
<defs><pattern id="g-integr" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||||
|
<marker id="in-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-integr)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="180" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · SYSTEM INTEGRATION</text>
|
||||||
|
|
||||||
|
<!-- systemy zrodlowe (gora) -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||||
|
<rect x="40" y="48" width="86" height="34"/>
|
||||||
|
<rect x="146" y="48" width="86" height="34"/>
|
||||||
|
<rect x="252" y="48" width="86" height="34"/>
|
||||||
|
<rect x="358" y="48" width="82" height="34"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="12"
|
||||||
|
text-anchor="middle" font-weight="600">
|
||||||
|
<text x="83" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">ERP</text>
|
||||||
|
<text x="189" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">CRM</text>
|
||||||
|
<text x="295" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">TAX</text>
|
||||||
|
<text x="399" y="70" textLength="52" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- strzalki dwukierunkowe do magistrali -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M83 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||||
|
<path d="M189 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||||
|
<path d="M295 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||||
|
<path d="M399 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- magistrala integracyjna -->
|
||||||
|
<rect x="40" y="124" width="400" height="34" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<text x="240" y="146" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="13" font-weight="600" text-anchor="middle"
|
||||||
|
textLength="150" lengthAdjust="spacingAndGlyphs">DATA EXCHANGE BUS</text>
|
||||||
|
|
||||||
|
<!-- odbiorcy danych (dol) -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M136 164 V190" marker-end="url(#in-arr)"/>
|
||||||
|
<path d="M344 164 V190" marker-end="url(#in-arr)"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||||
|
<rect x="88" y="194" width="96" height="30"/>
|
||||||
|
<rect x="296" y="194" width="96" height="30"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="10.5"
|
||||||
|
text-anchor="middle" opacity=".85">
|
||||||
|
<text x="136" y="213" textLength="72" lengthAdjust="spacingAndGlyphs">REPORTING</text>
|
||||||
|
<text x="344" y="213" textLength="78" lengthAdjust="spacingAndGlyphs">WEB APPLICATIONS</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,34 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-klient">
|
||||||
|
<title id="t-klient">Customer service and billing - customer request, invoice and communication</title>
|
||||||
|
<defs><pattern id="g-klient" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-klient)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="186" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · CUSTOMER SERVICE</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="52" y="58" width="146" height="112"/><path d="M52 86h146"/>
|
||||||
|
</g>
|
||||||
|
<rect x="52" y="58" width="146" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="66" y="77" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="74" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".85">
|
||||||
|
<path d="M68 102h114M68 118h92M68 134h114"/>
|
||||||
|
</g>
|
||||||
|
<rect x="68" y="148" width="58" height="12" fill="#5980a6" fill-opacity=".5"/>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M238 88h94a10 10 0 0 1 10 10v42a10 10 0 0 1-10 10h-56l-22 20v-20h-16a10 10 0 0 1-10-10V98a10 10 0 0 1 10-10z"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".42"><rect x="252" y="106" width="64" height="6"/><rect x="252" y="120" width="48" height="6"/><rect x="252" y="134" width="58" height="6"/></g>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<circle cx="404" cy="102" r="18"/><path d="M378 170v-24a26 26 0 0 1 52 0v24"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="404" cy="102" r="18" fill="#5980a6" fill-opacity=".28"/>
|
||||||
|
<text x="234" y="196" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="140" lengthAdjust="spacingAndGlyphs" opacity=".7">REQUEST · INVOICE</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,35 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-portal">
|
||||||
|
<title id="t-portal">Wodociagowiec.pl - trade articles, operational cases and reader comments</title>
|
||||||
|
<defs><pattern id="g-portal" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-portal)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="196" lengthAdjust="spacingAndGlyphs" opacity=".7">ECOSYSTEM · WODOCIAGOWIEC.PL</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="52" y="50" width="226" height="162"/><path d="M52 80h226"/>
|
||||||
|
</g>
|
||||||
|
<rect x="52" y="50" width="226" height="30" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="68" y="70" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="13" textLength="124" lengthAdjust="spacingAndGlyphs">TRADE ARTICLE</text>
|
||||||
|
<rect x="68" y="96" width="84" height="60" fill="#5980a6" fill-opacity=".3" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none"><path d="m76 144 18-16 14 12 16-20 18 24"/></g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="166" y="98" width="94" height="7"/><rect x="166" y="112" width="78" height="6"/>
|
||||||
|
<rect x="166" y="126" width="94" height="6"/><rect x="166" y="140" width="66" height="6"/>
|
||||||
|
<rect x="68" y="172" width="192" height="6"/><rect x="68" y="186" width="146" height="6"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M308 70h82a10 10 0 0 1 10 10v38a10 10 0 0 1-10 10h-50l-20 18v-18h-12a10 10 0 0 1-10-10V80a10 10 0 0 1 10-10z"/>
|
||||||
|
<path d="M322 124h82a10 10 0 0 1 10 10v38a10 10 0 0 1-10 10h-62l-20 18v-18a10 10 0 0 1-10-10v-38a10 10 0 0 1 10-10z" fill="#eaeef2"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="322" y="86" width="56" height="6"/><rect x="322" y="100" width="42" height="6"/>
|
||||||
|
<rect x="336" y="140" width="56" height="6"/><rect x="336" y="154" width="44" height="6"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,31 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-prawo">
|
||||||
|
<title id="t-prawo">Water law and tariffs - tariff document, statutory symbol and approval stamp</title>
|
||||||
|
<defs><pattern id="g-prawo" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-prawo)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="168" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · LAW AND TARIFFS</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M84 46h128l30 30v140H84z"/><path d="M212 46v30h30"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="104" y="94" width="92" height="7"/><rect x="104" y="110" width="118" height="6"/>
|
||||||
|
<rect x="104" y="124" width="104" height="6"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".85">
|
||||||
|
<rect x="104" y="144" width="118" height="52"/><path d="M104 162h118M163 144v52"/>
|
||||||
|
</g>
|
||||||
|
<rect x="104" y="144" width="118" height="18" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<g stroke="#416180" stroke-width="2.2" fill="none">
|
||||||
|
<circle cx="340" cy="122" r="46"/>
|
||||||
|
<path d="M334 100c-10 0-16 6-16 14s6 12 14 12 14 4 14 12-6 14-16 14M340 90v64"/>
|
||||||
|
</g>
|
||||||
|
<text x="292" y="196" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="118" lengthAdjust="spacingAndGlyphs" opacity=".7">TARIFF APPLICATION</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,64 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-scada">
|
||||||
|
<title id="t-scada">Network monitoring and SCADA - control room desk with assets, a trend and an alarm</title>
|
||||||
|
<defs><pattern id="g-scada" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||||
|
<marker id="sc-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-scada)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="196" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · SCADA AND MONITORING</text>
|
||||||
|
|
||||||
|
<!-- pulpit dyspozytorski -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="40" y="46" width="400" height="150" fill="#f2f2f3"/>
|
||||||
|
<path d="M40 70h400"/>
|
||||||
|
</g>
|
||||||
|
<rect x="40" y="46" width="400" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="52" y="63" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="88" lengthAdjust="spacingAndGlyphs">NETWORK DESK</text>
|
||||||
|
<!-- wskaznik ALARM -->
|
||||||
|
<rect x="376" y="52" width="52" height="14" fill="#1d2d3d"/>
|
||||||
|
<circle cx="386" cy="59" r="3" fill="#f2f2f3"/>
|
||||||
|
<text x="394" y="63" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="9.5" textLength="28" lengthAdjust="spacingAndGlyphs">ALARM</text>
|
||||||
|
|
||||||
|
<!-- schemat sieci: obiekty polaczone rurociagiem -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M74 118 H150" marker-end="url(#sc-arr)"/>
|
||||||
|
<path d="M186 118 H262" marker-end="url(#sc-arr)"/>
|
||||||
|
<path d="M298 118 H374" marker-end="url(#sc-arr)"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||||
|
<rect x="52" y="102" width="26" height="32"/>
|
||||||
|
<rect x="160" y="102" width="26" height="32"/>
|
||||||
|
<rect x="272" y="102" width="26" height="32"/>
|
||||||
|
<rect x="384" y="102" width="26" height="32"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".45">
|
||||||
|
<rect x="57" y="107" width="16" height="22"/>
|
||||||
|
<rect x="165" y="107" width="16" height="22"/>
|
||||||
|
<rect x="277" y="107" width="16" height="22"/>
|
||||||
|
</g>
|
||||||
|
<!-- obiekt w stanie alarmowym -->
|
||||||
|
<rect x="389" y="107" width="16" height="22" fill="#1d2d3d"/>
|
||||||
|
|
||||||
|
<!-- trend pomiarowy pod schematem -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.6" fill="none">
|
||||||
|
<path d="M56 178 96 160 130 168 168 148 206 156 244 138 282 150 320 132 358 142 400 124"/>
|
||||||
|
</g>
|
||||||
|
<path d="M56 186h348" stroke="#416180" stroke-width="1.2" stroke-opacity=".45" fill="none"/>
|
||||||
|
|
||||||
|
<!-- podpisy obiektow -->
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9.5"
|
||||||
|
text-anchor="middle" opacity=".7">
|
||||||
|
<text x="65" y="214" textLength="30" lengthAdjust="spacingAndGlyphs">INTAKE</text>
|
||||||
|
<text x="173" y="214" textLength="24" lengthAdjust="spacingAndGlyphs">WTP</text>
|
||||||
|
<text x="285" y="214" textLength="38" lengthAdjust="spacingAndGlyphs">RESERVOIR</text>
|
||||||
|
<text x="397" y="214" textLength="32" lengthAdjust="spacingAndGlyphs">NETWORK</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,35 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-zam">
|
||||||
|
<title id="t-zam">Public procurement - comparing tenders against award criteria</title>
|
||||||
|
<defs><pattern id="g-zam" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-zam)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="198" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · PUBLIC PROCUREMENT</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="48" y="60" width="88" height="122"/><rect x="152" y="60" width="88" height="122"/><rect x="256" y="60" width="88" height="122"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".2"><rect x="48" y="60" width="88" height="24"/><rect x="152" y="60" width="88" height="24"/><rect x="256" y="60" width="88" height="24"/></g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="62" y="98" width="56" height="6"/><rect x="62" y="112" width="44" height="6"/><rect x="62" y="126" width="60" height="6"/>
|
||||||
|
<rect x="166" y="98" width="56" height="6"/><rect x="166" y="112" width="44" height="6"/><rect x="166" y="126" width="60" height="6"/>
|
||||||
|
<rect x="270" y="98" width="56" height="6"/><rect x="270" y="112" width="44" height="6"/><rect x="270" y="126" width="60" height="6"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="13" text-anchor="middle">
|
||||||
|
<text x="92" y="77" textLength="52" lengthAdjust="spacingAndGlyphs">TENDER A</text>
|
||||||
|
<text x="196" y="77" textLength="52" lengthAdjust="spacingAndGlyphs">TENDER B</text>
|
||||||
|
<text x="300" y="77" textLength="52" lengthAdjust="spacingAndGlyphs">TENDER C</text>
|
||||||
|
</g>
|
||||||
|
<g stroke="#5980a6" stroke-width="2.4" fill="none"><path d="m174 154 8 9 18-20"/></g>
|
||||||
|
<rect x="152" y="60" width="88" height="122" fill="none" stroke="#416180" stroke-width="2.5"/>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M410 70v100M386 94h48M394 94l-12 30h24zM426 94l-12 30h24zM392 170h36"/>
|
||||||
|
</g>
|
||||||
|
<text x="370" y="196" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="60" lengthAdjust="spacingAndGlyphs" opacity=".7">CRITERIA</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,32 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-zarz">
|
||||||
|
<title id="t-zarz">Running a utility - financial indicators and cost structure</title>
|
||||||
|
<defs><pattern id="g-zarz" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-zarz)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="150" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · MANAGEMENT</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none"><rect x="52" y="54" width="196" height="144"/><path d="M52 82h196"/></g>
|
||||||
|
<rect x="52" y="54" width="196" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="66" y="73" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="108" lengthAdjust="spacingAndGlyphs">COST / REVENUE</text>
|
||||||
|
<g>
|
||||||
|
<rect x="74" y="136" width="26" height="44" fill="#5980a6" fill-opacity=".35" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="114" y="120" width="26" height="60" fill="#5980a6" fill-opacity=".55" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="154" y="108" width="26" height="72" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="194" y="98" width="26" height="82" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
</g>
|
||||||
|
<path d="M64 180h172" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<circle cx="356" cy="124" r="52"/>
|
||||||
|
</g>
|
||||||
|
<path d="M356 124 L356 72 A52 52 0 0 1 394 160 Z" fill="#5980a6" fill-opacity=".45"/>
|
||||||
|
<path d="M356 72v52l38 36" stroke="#416180" stroke-width="1.5" fill="none"/>
|
||||||
|
<text x="308" y="200" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="124" lengthAdjust="spacingAndGlyphs" opacity=".7">COST STRUCTURE</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,81 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-plat">
|
||||||
|
<title id="t-plat">Student dashboard on the platform - course progress, upcoming webinars and a certificate</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="plat-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="640" height="360" fill="#eaeef2"/>
|
||||||
|
<rect width="640" height="360" fill="url(#plat-grid)"/>
|
||||||
|
|
||||||
|
<!-- okno aplikacji -->
|
||||||
|
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||||
|
<rect x="40" y="34" width="560" height="292"/>
|
||||||
|
<path d="M40 66h560M172 66v260"/>
|
||||||
|
</g>
|
||||||
|
<rect x="40" y="34" width="560" height="32" fill="#5980a6" fill-opacity=".18"/>
|
||||||
|
<g fill="#416180" opacity=".45">
|
||||||
|
<circle cx="58" cy="50" r="4"/><circle cx="72" cy="50" r="4"/><circle cx="86" cy="50" r="4"/>
|
||||||
|
</g>
|
||||||
|
<text x="108" y="55" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="118" lengthAdjust="spacingAndGlyphs">STUDENT DASHBOARD</text>
|
||||||
|
|
||||||
|
<!-- menu boczne -->
|
||||||
|
<g fill="#5980a6">
|
||||||
|
<rect x="40" y="82" width="132" height="26" fill-opacity=".28"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".45">
|
||||||
|
<rect x="58" y="91" width="72" height="8"/>
|
||||||
|
<rect x="58" y="126" width="86" height="8"/>
|
||||||
|
<rect x="58" y="156" width="64" height="8"/>
|
||||||
|
<rect x="58" y="186" width="80" height="8"/>
|
||||||
|
<rect x="58" y="216" width="70" height="8"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- karty postępu kursów -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="192" y="88" width="184" height="76"/>
|
||||||
|
<rect x="396" y="88" width="184" height="76"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".45">
|
||||||
|
<rect x="206" y="102" width="104" height="8"/>
|
||||||
|
<rect x="410" y="102" width="120" height="8"/>
|
||||||
|
</g>
|
||||||
|
<!-- paski postępu -->
|
||||||
|
<g>
|
||||||
|
<rect x="206" y="130" width="156" height="8" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<rect x="206" y="130" width="102" height="8" fill="#5980a6"/>
|
||||||
|
<rect x="410" y="130" width="156" height="8" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<rect x="410" y="130" width="48" height="8" fill="#5980a6"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="11" opacity=".7">
|
||||||
|
<text x="206" y="156" textLength="76" lengthAdjust="spacingAndGlyphs">PROGRESS 65%</text>
|
||||||
|
<text x="410" y="156" textLength="76" lengthAdjust="spacingAndGlyphs">PROGRESS 30%</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- agenda webinariów -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="192" y="184" width="388" height="122"/>
|
||||||
|
<path d="M192 210h388"/>
|
||||||
|
</g>
|
||||||
|
<rect x="192" y="184" width="388" height="26" fill="#5980a6" fill-opacity=".12"/>
|
||||||
|
<text x="206" y="202" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="12" textLength="150" lengthAdjust="spacingAndGlyphs">UPCOMING WEBINARS</text>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none" opacity=".85">
|
||||||
|
<rect x="206" y="222" width="38" height="34"/>
|
||||||
|
<rect x="206" y="264" width="38" height="34"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="13" text-anchor="middle" opacity=".8">
|
||||||
|
<text x="225" y="236">15</text><text x="225" y="250" font-size="10">NOV</text>
|
||||||
|
<text x="225" y="278">22</text><text x="225" y="292" font-size="10">NOV</text>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="258" y="228" width="180" height="7"/>
|
||||||
|
<rect x="258" y="242" width="120" height="6"/>
|
||||||
|
<rect x="258" y="270" width="204" height="7"/>
|
||||||
|
<rect x="258" y="284" width="136" height="6"/>
|
||||||
|
</g>
|
||||||
|
<!-- znacznik LIVE -->
|
||||||
|
<rect x="500" y="224" width="46" height="17" fill="#1d2d3d"/>
|
||||||
|
<text x="509" y="237" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="10" letter-spacing="1.3">LIVE</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,72 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-szk">
|
||||||
|
<title id="t-szk">Training room - instructor, a data screen and participants at workstations</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="szk-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="640" height="360" fill="#eaeef2"/>
|
||||||
|
<rect width="640" height="360" fill="url(#szk-grid)"/>
|
||||||
|
|
||||||
|
<!-- ekran prezentacyjny -->
|
||||||
|
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||||
|
<rect x="188" y="40" width="264" height="146"/>
|
||||||
|
<path d="M320 186v18"/>
|
||||||
|
</g>
|
||||||
|
<rect x="188" y="40" width="264" height="20" fill="#5980a6" fill-opacity=".18"/>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".9">
|
||||||
|
<!-- wykres na ekranie -->
|
||||||
|
<path d="M208 160 250 132 286 142 322 104 358 118 396 86 432 96"/>
|
||||||
|
<path d="M208 172h224" stroke-opacity=".5"/>
|
||||||
|
<path d="M208 76v96" stroke-opacity=".5"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".55">
|
||||||
|
<circle cx="250" cy="132" r="3"/><circle cx="322" cy="104" r="3"/><circle cx="396" cy="86" r="3"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" opacity=".5">
|
||||||
|
<rect x="198" y="46" width="46" height="8"/><rect x="252" y="46" width="30" height="8"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- prowadzący -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<circle cx="122" cy="120" r="14"/>
|
||||||
|
<path d="M104 186v-32a18 18 0 0 1 36 0v32"/>
|
||||||
|
<path d="M140 160l30-14"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- stanowiska uczestników -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<g>
|
||||||
|
<rect x="70" y="248" width="120" height="8"/>
|
||||||
|
<path d="M96 256v40M164 256v40"/>
|
||||||
|
<rect x="96" y="222" width="42" height="26"/>
|
||||||
|
<circle cx="160" cy="212" r="11"/>
|
||||||
|
<path d="M146 248v-14a14 14 0 0 1 28 0v14"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<rect x="260" y="248" width="120" height="8"/>
|
||||||
|
<path d="M286 256v40M354 256v40"/>
|
||||||
|
<rect x="286" y="222" width="42" height="26"/>
|
||||||
|
<circle cx="350" cy="212" r="11"/>
|
||||||
|
<path d="M336 248v-14a14 14 0 0 1 28 0v14"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<rect x="450" y="248" width="120" height="8"/>
|
||||||
|
<path d="M476 256v40M544 256v40"/>
|
||||||
|
<rect x="476" y="222" width="42" height="26"/>
|
||||||
|
<circle cx="540" cy="212" r="11"/>
|
||||||
|
<path d="M526 248v-14a14 14 0 0 1 28 0v14"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".22">
|
||||||
|
<rect x="96" y="222" width="42" height="26"/>
|
||||||
|
<rect x="286" y="222" width="42" height="26"/>
|
||||||
|
<rect x="476" y="222" width="42" height="26"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- oznaczenia techniczne (pod rysunkiem, poza strefa postaci) -->
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.2" opacity=".65">
|
||||||
|
<text x="70" y="334">MAX. 12</text>
|
||||||
|
<text x="570" y="334" text-anchor="end">2 × 8 H</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,68 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-kon">
|
||||||
|
<title id="t-kon">Konsulting - analiza danych przedsiębiorstwa, raport i rekomendacje</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="kon-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="640" height="360" fill="#eaeef2"/>
|
||||||
|
<rect width="640" height="360" fill="url(#kon-grid)"/>
|
||||||
|
|
||||||
|
<!-- dokument raportu -->
|
||||||
|
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||||
|
<path d="M60 40h180l40 40v240H60z"/>
|
||||||
|
<path d="M240 40v40h40"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="84" y="112" width="132" height="8"/>
|
||||||
|
<rect x="84" y="130" width="172" height="6"/>
|
||||||
|
<rect x="84" y="144" width="150" height="6"/>
|
||||||
|
</g>
|
||||||
|
<!-- tabela w raporcie -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".8">
|
||||||
|
<rect x="84" y="170" width="172" height="76"/>
|
||||||
|
<path d="M84 192h172M84 210h172M84 228h172M140 170v76M200 170v76"/>
|
||||||
|
</g>
|
||||||
|
<rect x="84" y="170" width="172" height="22" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<g fill="#416180" opacity=".45">
|
||||||
|
<rect x="84" y="264" width="110" height="6"/>
|
||||||
|
<rect x="84" y="278" width="140" height="6"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- strzałka analizy -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M300 180h44"/><path d="m336 172 10 8-10 8"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- panel wyników -->
|
||||||
|
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||||
|
<rect x="366" y="46" width="214" height="120"/>
|
||||||
|
<path d="M366 74h214"/>
|
||||||
|
</g>
|
||||||
|
<rect x="366" y="46" width="214" height="28" fill="#5980a6" fill-opacity=".18"/>
|
||||||
|
<text x="380" y="65" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11.5" letter-spacing=".8">WARIANTY · KOSZT I EFEKT</text>
|
||||||
|
<!-- słupki -->
|
||||||
|
<g>
|
||||||
|
<rect x="392" y="98" width="30" height="52" fill="#5980a6" fill-opacity=".35" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="440" y="112" width="30" height="38" fill="#5980a6" fill-opacity=".55" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="488" y="122" width="30" height="28" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="536" y="128" width="30" height="22" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
</g>
|
||||||
|
<path d="M380 150h192" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
|
||||||
|
<!-- lista rekomendacji -->
|
||||||
|
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||||
|
<rect x="366" y="190" width="214" height="130"/>
|
||||||
|
<path d="M366 218h214"/>
|
||||||
|
</g>
|
||||||
|
<rect x="366" y="190" width="214" height="28" fill="#5980a6" fill-opacity=".12"/>
|
||||||
|
<text x="380" y="209" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.3">LISTA DECYZJI</text>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="m382 240 5 5 9-10"/><path d="m382 268 5 5 9-10"/><path d="m382 296 5 5 9-10"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="406" y="238" width="150" height="7"/>
|
||||||
|
<rect x="406" y="266" width="126" height="7"/>
|
||||||
|
<rect x="406" y="294" width="142" height="7"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,54 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-audyt">
|
||||||
|
<title id="t-audyt">Audyt bezpieczeństwa - przegląd warstw systemu, lista podatności i zgodność z NIS2</title>
|
||||||
|
<defs><pattern id="g-audyt" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-audyt)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="210" lengthAdjust="spacingAndGlyphs" opacity=".7">ŚCIEŻKA · AUDYT BEZPIECZEŃSTWA</text>
|
||||||
|
|
||||||
|
<!-- tarcza -->
|
||||||
|
<g stroke="#416180" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M108 56 52 78v50c0 40 28 68 56 74 28-6 56-34 56-74V78z" fill="#f2f2f3"/>
|
||||||
|
</g>
|
||||||
|
<path d="M108 56 52 78v50c0 40 28 68 56 74z" fill="#5980a6" fill-opacity=".18"/>
|
||||||
|
<g stroke="#5980a6" stroke-width="2.6" fill="none">
|
||||||
|
<path d="m84 122 16 16 30-34"/>
|
||||||
|
</g>
|
||||||
|
<text x="60" y="224" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" textLength="96" lengthAdjust="spacingAndGlyphs" opacity=".72">ZGODNOŚĆ NIS2</text>
|
||||||
|
|
||||||
|
<!-- raport z podatnosciami -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="204" y="52" width="228" height="150" fill="#f2f2f3"/>
|
||||||
|
<path d="M204 76h228"/>
|
||||||
|
</g>
|
||||||
|
<rect x="204" y="52" width="228" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="216" y="69" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="124" lengthAdjust="spacingAndGlyphs">LISTA PODATNOŚCI</text>
|
||||||
|
|
||||||
|
<!-- pozycje: poziom ryzyka + opis -->
|
||||||
|
<g>
|
||||||
|
<rect x="216" y="88" width="30" height="12" fill="#1d2d3d"/>
|
||||||
|
<rect x="216" y="112" width="30" height="12" fill="#5980a6"/>
|
||||||
|
<rect x="216" y="136" width="30" height="12" fill="#5980a6" fill-opacity=".55"/>
|
||||||
|
<rect x="216" y="160" width="30" height="12" fill="#5980a6" fill-opacity=".3"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="256" y="90" width="150" height="7"/>
|
||||||
|
<rect x="256" y="114" width="124" height="7"/>
|
||||||
|
<rect x="256" y="138" width="142" height="7"/>
|
||||||
|
<rect x="256" y="162" width="110" height="7"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="8.5"
|
||||||
|
text-anchor="middle" opacity=".9">
|
||||||
|
<text x="231" y="97" fill="#f2f2f3" textLength="22" lengthAdjust="spacingAndGlyphs">KRYT.</text>
|
||||||
|
<text x="231" y="121" fill="#f2f2f3" textLength="22" lengthAdjust="spacingAndGlyphs">WYS.</text>
|
||||||
|
</g>
|
||||||
|
<text x="204" y="224" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" textLength="150" lengthAdjust="spacingAndGlyphs" opacity=".72">REKOMENDACJE I PRIORYTETY</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,78 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-cyfr">
|
||||||
|
<title id="t-cyfr">Cyfryzacja przedsiębiorstwa - papierowa dokumentacja zamieniana w system z etapowym planem wdrożenia</title>
|
||||||
|
<defs><pattern id="g-cyfr" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||||
|
<marker id="cy-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6.5" markerHeight="6.5" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker>
|
||||||
|
</defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-cyfr)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="150" lengthAdjust="spacingAndGlyphs" opacity=".7">ŚCIEŻKA · CYFRYZACJA</text>
|
||||||
|
|
||||||
|
<!-- stos papierowych teczek: stan wyjściowy -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||||
|
<path d="M44 148h84v52H44z"/>
|
||||||
|
<path d="M50 136h84v52H50z"/>
|
||||||
|
<path d="M56 124h84v52H56z"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".38">
|
||||||
|
<rect x="66" y="138" width="52" height="6"/>
|
||||||
|
<rect x="66" y="150" width="38" height="5"/>
|
||||||
|
<rect x="66" y="160" width="46" height="5"/>
|
||||||
|
</g>
|
||||||
|
<text x="44" y="220" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" textLength="86" lengthAdjust="spacingAndGlyphs" opacity=".72">PAPIER I ARKUSZE</text>
|
||||||
|
|
||||||
|
<!-- strzałka przejścia -->
|
||||||
|
<path d="M156 152 H206" stroke="#5980a6" stroke-width="1.8" fill="none" marker-end="url(#cy-arr)"/>
|
||||||
|
|
||||||
|
<!-- system docelowy: ekran z modułami -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="224" y="60" width="212" height="128" fill="#f2f2f3"/>
|
||||||
|
<path d="M224 84h212"/>
|
||||||
|
</g>
|
||||||
|
<rect x="224" y="60" width="212" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="236" y="77" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="104" lengthAdjust="spacingAndGlyphs">SYSTEM CENTRALNY</text>
|
||||||
|
|
||||||
|
<!-- moduły w systemie -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.4" fill="none">
|
||||||
|
<rect x="238" y="96" width="58" height="34"/>
|
||||||
|
<rect x="306" y="96" width="58" height="34"/>
|
||||||
|
<rect x="374" y="96" width="48" height="34"/>
|
||||||
|
<rect x="238" y="140" width="58" height="34"/>
|
||||||
|
<rect x="306" y="140" width="116" height="34"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".3">
|
||||||
|
<rect x="238" y="96" width="58" height="34"/>
|
||||||
|
<rect x="306" y="140" width="116" height="34"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9"
|
||||||
|
text-anchor="middle" opacity=".85">
|
||||||
|
<text x="267" y="117" textLength="44" lengthAdjust="spacingAndGlyphs">MAJĄTEK</text>
|
||||||
|
<text x="335" y="117" textLength="44" lengthAdjust="spacingAndGlyphs">ZLECENIA</text>
|
||||||
|
<text x="398" y="117" textLength="36" lengthAdjust="spacingAndGlyphs">ODCZYTY</text>
|
||||||
|
<text x="267" y="161" textLength="44" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||||
|
<text x="364" y="161" textLength="70" lengthAdjust="spacingAndGlyphs">RAPORTOWANIE</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- etapowy plan wdrożenia -->
|
||||||
|
<g stroke="#416180" stroke-width="1.4" fill="none" opacity=".8">
|
||||||
|
<path d="M224 208h212"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6">
|
||||||
|
<circle cx="252" cy="208" r="4.5"/>
|
||||||
|
<circle cx="330" cy="208" r="4.5"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="408" cy="208" r="4.5" fill="none" stroke="#416180" stroke-width="1.4"/>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9.5"
|
||||||
|
text-anchor="middle" opacity=".75">
|
||||||
|
<text x="252" y="226" textLength="34" lengthAdjust="spacingAndGlyphs">ETAP I</text>
|
||||||
|
<text x="330" y="226" textLength="38" lengthAdjust="spacingAndGlyphs">ETAP II</text>
|
||||||
|
<text x="408" y="226" textLength="40" lengthAdjust="spacingAndGlyphs">ETAP III</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,68 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-gielda">
|
||||||
|
<title id="t-gielda">Giełda Komunalna - bezpłatny marketplace: nadwyżki magazynowe trafiają jako ogłoszenia do producentów i wykonawców z branży</title>
|
||||||
|
<defs><pattern id="g-gielda" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||||
|
<marker id="gl-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6.5" markerHeight="6.5" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker>
|
||||||
|
</defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-gielda)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="168" lengthAdjust="spacingAndGlyphs" opacity=".7">EKOSYSTEM · GIEŁDA KOMUNALNA</text>
|
||||||
|
|
||||||
|
<!-- magazyn: nadwyżki, które gdzieś leżą -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M38 104 78 88l40 16"/>
|
||||||
|
<path d="M46 104v66h64v-66"/>
|
||||||
|
<path d="M46 116h64"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".3" stroke="#416180" stroke-width="1.3">
|
||||||
|
<rect x="58" y="126" width="18" height="18"/>
|
||||||
|
<rect x="80" y="126" width="18" height="18"/>
|
||||||
|
<rect x="58" y="148" width="18" height="18"/>
|
||||||
|
<rect x="80" y="148" width="18" height="18"/>
|
||||||
|
</g>
|
||||||
|
<text x="40" y="192" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="84" lengthAdjust="spacingAndGlyphs" opacity=".72">ZALEGA W MAGAZYNIE</text>
|
||||||
|
|
||||||
|
<!-- ogłoszenie: wystawiasz za darmo -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="182" y="86" width="116" height="84" fill="#f2f2f3"/>
|
||||||
|
<path d="M182 108h116"/>
|
||||||
|
</g>
|
||||||
|
<rect x="182" y="86" width="116" height="22" fill="#5980a6" fill-opacity=".22"/>
|
||||||
|
<text x="194" y="102" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="70" lengthAdjust="spacingAndGlyphs">OGŁOSZENIE</text>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="194" y="118" width="60" height="7"/>
|
||||||
|
<rect x="194" y="130" width="88" height="6"/>
|
||||||
|
</g>
|
||||||
|
<!-- znacznik ceny wystawienia -->
|
||||||
|
<rect x="194" y="144" width="46" height="18" fill="#5980a6"/>
|
||||||
|
<text x="217" y="157" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" font-weight="600" text-anchor="middle"
|
||||||
|
textLength="30" lengthAdjust="spacingAndGlyphs">0 ZŁ</text>
|
||||||
|
<text x="246" y="157" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="10.5" textLength="48" lengthAdjust="spacingAndGlyphs" opacity=".75">ZA WYSTAWIENIE</text>
|
||||||
|
|
||||||
|
<!-- strzałki: magazyn -> ogłoszenie -> odbiorcy (w drugą stronę też: wymiana) -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M124 128 H172" marker-end="url(#gl-arr)"/>
|
||||||
|
<path d="M308 128 H352" marker-start="url(#gl-arr)" marker-end="url(#gl-arr)"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- odbiorcy: producenci i wykonawcy z branży -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<circle cx="386" cy="98" r="11"/><path d="M370 128v-12a16 16 0 0 1 32 0v12"/>
|
||||||
|
<circle cx="428" cy="98" r="11"/><path d="M412 128v-12a16 16 0 0 1 32 0v12"/>
|
||||||
|
<circle cx="407" cy="150" r="11"/><path d="M391 180v-12a16 16 0 0 1 32 0v12"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".22">
|
||||||
|
<circle cx="386" cy="98" r="11"/><circle cx="428" cy="98" r="11"/><circle cx="407" cy="150" r="11"/>
|
||||||
|
</g>
|
||||||
|
<text x="356" y="204" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="92" lengthAdjust="spacingAndGlyphs" opacity=".72">PRODUCENCI · WYKONAWCY</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,59 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-integr">
|
||||||
|
<title id="t-integr">Integracje z systemami ERP, CRM i podatkowymi - magistrala wymiany danych</title>
|
||||||
|
<defs><pattern id="g-integr" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||||
|
<marker id="in-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-integr)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="180" lengthAdjust="spacingAndGlyphs" opacity=".7">ŚCIEŻKA · INTEGRACJE SYSTEMÓW</text>
|
||||||
|
|
||||||
|
<!-- systemy zrodlowe (gora) -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||||
|
<rect x="40" y="48" width="86" height="34"/>
|
||||||
|
<rect x="146" y="48" width="86" height="34"/>
|
||||||
|
<rect x="252" y="48" width="86" height="34"/>
|
||||||
|
<rect x="358" y="48" width="82" height="34"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="12"
|
||||||
|
text-anchor="middle" font-weight="600">
|
||||||
|
<text x="83" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">ERP</text>
|
||||||
|
<text x="189" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">CRM</text>
|
||||||
|
<text x="295" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">TAX</text>
|
||||||
|
<text x="399" y="70" textLength="52" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- strzalki dwukierunkowe do magistrali -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M83 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||||
|
<path d="M189 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||||
|
<path d="M295 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||||
|
<path d="M399 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- magistrala integracyjna -->
|
||||||
|
<rect x="40" y="124" width="400" height="34" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<text x="240" y="146" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="13" font-weight="600" text-anchor="middle"
|
||||||
|
textLength="150" lengthAdjust="spacingAndGlyphs">MAGISTRALA DANYCH</text>
|
||||||
|
|
||||||
|
<!-- odbiorcy danych (dol) -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M136 164 V190" marker-end="url(#in-arr)"/>
|
||||||
|
<path d="M344 164 V190" marker-end="url(#in-arr)"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||||
|
<rect x="88" y="194" width="96" height="30"/>
|
||||||
|
<rect x="296" y="194" width="96" height="30"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="10.5"
|
||||||
|
text-anchor="middle" opacity=".85">
|
||||||
|
<text x="136" y="213" textLength="72" lengthAdjust="spacingAndGlyphs">RAPORTOWANIE</text>
|
||||||
|
<text x="344" y="213" textLength="72" lengthAdjust="spacingAndGlyphs">APLIKACJE WWW</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,31 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-klient">
|
||||||
|
<title id="t-klient">Obsługa odbiorcy i billing - zgłoszenie, rozliczenie i komunikacja</title>
|
||||||
|
<defs><pattern id="g-klient" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-klient)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">ŚCIEŻKA · OBSŁUGA KLIENTA</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="52" y="58" width="146" height="112"/><path d="M52 86h146"/>
|
||||||
|
</g>
|
||||||
|
<rect x="52" y="58" width="146" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="66" y="77" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">ROZLICZENIE</text>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".85">
|
||||||
|
<path d="M68 102h114M68 118h92M68 134h114"/>
|
||||||
|
</g>
|
||||||
|
<rect x="68" y="148" width="58" height="12" fill="#5980a6" fill-opacity=".5"/>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M238 88h94a10 10 0 0 1 10 10v42a10 10 0 0 1-10 10h-56l-22 20v-20h-16a10 10 0 0 1-10-10V98a10 10 0 0 1 10-10z"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".42"><rect x="252" y="106" width="64" height="6"/><rect x="252" y="120" width="48" height="6"/><rect x="252" y="134" width="58" height="6"/></g>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<circle cx="404" cy="102" r="18"/><path d="M378 170v-24a26 26 0 0 1 52 0v24"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="404" cy="102" r="18" fill="#5980a6" fill-opacity=".28"/>
|
||||||
|
<text x="234" y="196" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".7">ZGŁOSZENIE · FAKTURA</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,33 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-portal">
|
||||||
|
<title id="t-portal">Wodociągowiec.pl - artykuły branżowe, przypadki z eksploatacji i komentarze</title>
|
||||||
|
<defs><pattern id="g-portal" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-portal)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">EKOSYSTEM · WODOCIĄGOWIEC.PL</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="52" y="50" width="226" height="162"/><path d="M52 80h226"/>
|
||||||
|
</g>
|
||||||
|
<rect x="52" y="50" width="226" height="30" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="68" y="70" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="13" letter-spacing="1.2">ARTYKUŁ BRANŻOWY</text>
|
||||||
|
<rect x="68" y="96" width="84" height="60" fill="#5980a6" fill-opacity=".3" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none"><path d="m76 144 18-16 14 12 16-20 18 24"/></g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="166" y="98" width="94" height="7"/><rect x="166" y="112" width="78" height="6"/>
|
||||||
|
<rect x="166" y="126" width="94" height="6"/><rect x="166" y="140" width="66" height="6"/>
|
||||||
|
<rect x="68" y="172" width="192" height="6"/><rect x="68" y="186" width="146" height="6"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M308 70h82a10 10 0 0 1 10 10v38a10 10 0 0 1-10 10h-50l-20 18v-18h-12a10 10 0 0 1-10-10V80a10 10 0 0 1 10-10z"/>
|
||||||
|
<path d="M322 124h82a10 10 0 0 1 10 10v38a10 10 0 0 1-10 10h-62l-20 18v-18a10 10 0 0 1-10-10v-38a10 10 0 0 1 10-10z" fill="#eaeef2"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="322" y="86" width="56" height="6"/><rect x="322" y="100" width="42" height="6"/>
|
||||||
|
<rect x="336" y="140" width="56" height="6"/><rect x="336" y="154" width="44" height="6"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,29 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-prawo">
|
||||||
|
<title id="t-prawo">Prawo i taryfy - dokument taryfowy, paragraf i pieczęć zatwierdzenia</title>
|
||||||
|
<defs><pattern id="g-prawo" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-prawo)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">ŚCIEŻKA · PRAWO I TARYFY</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M84 46h128l30 30v140H84z"/><path d="M212 46v30h30"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".4">
|
||||||
|
<rect x="104" y="94" width="92" height="7"/><rect x="104" y="110" width="118" height="6"/>
|
||||||
|
<rect x="104" y="124" width="104" height="6"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".85">
|
||||||
|
<rect x="104" y="144" width="118" height="52"/><path d="M104 162h118M163 144v52"/>
|
||||||
|
</g>
|
||||||
|
<rect x="104" y="144" width="118" height="18" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<g stroke="#416180" stroke-width="2.2" fill="none">
|
||||||
|
<circle cx="340" cy="122" r="46"/>
|
||||||
|
<path d="M334 100c-10 0-16 6-16 14s6 12 14 12 14 4 14 12-6 14-16 14M340 90v64"/>
|
||||||
|
</g>
|
||||||
|
<text x="292" y="196" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".7">WNIOSEK TARYFOWY</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,64 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-scada">
|
||||||
|
<title id="t-scada">Monitoring sieci i SCADA - pulpit dyspozytorski z obiektami, trendem i alarmem</title>
|
||||||
|
<defs><pattern id="g-scada" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||||
|
<marker id="sc-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||||
|
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-scada)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="196" lengthAdjust="spacingAndGlyphs" opacity=".7">ŚCIEŻKA · SCADA I MONITORING</text>
|
||||||
|
|
||||||
|
<!-- pulpit dyspozytorski -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="40" y="46" width="400" height="150" fill="#f2f2f3"/>
|
||||||
|
<path d="M40 70h400"/>
|
||||||
|
</g>
|
||||||
|
<rect x="40" y="46" width="400" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="52" y="63" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="11" textLength="88" lengthAdjust="spacingAndGlyphs">PULPIT SIECI</text>
|
||||||
|
<!-- wskaznik ALARM -->
|
||||||
|
<rect x="376" y="52" width="52" height="14" fill="#1d2d3d"/>
|
||||||
|
<circle cx="386" cy="59" r="3" fill="#f2f2f3"/>
|
||||||
|
<text x="394" y="63" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||||
|
font-size="9.5" textLength="28" lengthAdjust="spacingAndGlyphs">ALARM</text>
|
||||||
|
|
||||||
|
<!-- schemat sieci: obiekty polaczone rurociagiem -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||||
|
<path d="M74 118 H150" marker-end="url(#sc-arr)"/>
|
||||||
|
<path d="M186 118 H262" marker-end="url(#sc-arr)"/>
|
||||||
|
<path d="M298 118 H374" marker-end="url(#sc-arr)"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||||
|
<rect x="52" y="102" width="26" height="32"/>
|
||||||
|
<rect x="160" y="102" width="26" height="32"/>
|
||||||
|
<rect x="272" y="102" width="26" height="32"/>
|
||||||
|
<rect x="384" y="102" width="26" height="32"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".45">
|
||||||
|
<rect x="57" y="107" width="16" height="22"/>
|
||||||
|
<rect x="165" y="107" width="16" height="22"/>
|
||||||
|
<rect x="277" y="107" width="16" height="22"/>
|
||||||
|
</g>
|
||||||
|
<!-- obiekt w stanie alarmowym -->
|
||||||
|
<rect x="389" y="107" width="16" height="22" fill="#1d2d3d"/>
|
||||||
|
|
||||||
|
<!-- trend pomiarowy pod schematem -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.6" fill="none">
|
||||||
|
<path d="M56 178 96 160 130 168 168 148 206 156 244 138 282 150 320 132 358 142 400 124"/>
|
||||||
|
</g>
|
||||||
|
<path d="M56 186h348" stroke="#416180" stroke-width="1.2" stroke-opacity=".45" fill="none"/>
|
||||||
|
|
||||||
|
<!-- podpisy obiektow -->
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9.5"
|
||||||
|
text-anchor="middle" opacity=".7">
|
||||||
|
<text x="65" y="214" textLength="30" lengthAdjust="spacingAndGlyphs">UJĘCIE</text>
|
||||||
|
<text x="173" y="214" textLength="24" lengthAdjust="spacingAndGlyphs">SUW</text>
|
||||||
|
<text x="285" y="214" textLength="34" lengthAdjust="spacingAndGlyphs">ZBIORNIK</text>
|
||||||
|
<text x="397" y="214" textLength="30" lengthAdjust="spacingAndGlyphs">SIEĆ</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,31 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-zam">
|
||||||
|
<title id="t-zam">Zamówienia publiczne - porównanie ofert i kryteria oceny</title>
|
||||||
|
<defs><pattern id="g-zam" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-zam)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">ŚCIEŻKA · ZAMÓWIENIA PUBLICZNE</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="48" y="60" width="88" height="122"/><rect x="152" y="60" width="88" height="122"/><rect x="256" y="60" width="88" height="122"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".2"><rect x="48" y="60" width="88" height="24"/><rect x="152" y="60" width="88" height="24"/><rect x="256" y="60" width="88" height="24"/></g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="62" y="98" width="56" height="6"/><rect x="62" y="112" width="44" height="6"/><rect x="62" y="126" width="60" height="6"/>
|
||||||
|
<rect x="166" y="98" width="56" height="6"/><rect x="166" y="112" width="44" height="6"/><rect x="166" y="126" width="60" height="6"/>
|
||||||
|
<rect x="270" y="98" width="56" height="6"/><rect x="270" y="112" width="44" height="6"/><rect x="270" y="126" width="60" height="6"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="13" text-anchor="middle">
|
||||||
|
<text x="92" y="77">OFERTA A</text><text x="196" y="77">OFERTA B</text><text x="300" y="77">OFERTA C</text>
|
||||||
|
</g>
|
||||||
|
<g stroke="#5980a6" stroke-width="2.4" fill="none"><path d="m174 154 8 9 18-20"/></g>
|
||||||
|
<rect x="152" y="60" width="88" height="122" fill="none" stroke="#416180" stroke-width="2.5"/>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<path d="M410 70v100M386 94h48M394 94l-12 30h24zM426 94l-12 30h24zM392 170h36"/>
|
||||||
|
</g>
|
||||||
|
<text x="370" y="196" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".7">KRYTERIA</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,29 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-zarz">
|
||||||
|
<title id="t-zarz">Zarządzanie przedsiębiorstwem - wskaźniki finansowe i struktura kosztów</title>
|
||||||
|
<defs><pattern id="g-zarz" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||||
|
<rect width="480" height="270" fill="#eaeef2"/>
|
||||||
|
<rect width="480" height="270" fill="url(#g-zarz)"/>
|
||||||
|
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||||
|
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||||
|
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||||
|
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">ŚCIEŻKA · ZARZĄDZANIE</text>
|
||||||
|
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none"><rect x="52" y="54" width="196" height="144"/><path d="M52 82h196"/></g>
|
||||||
|
<rect x="52" y="54" width="196" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<text x="66" y="73" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">KOSZT / PRZYCHÓD</text>
|
||||||
|
<g>
|
||||||
|
<rect x="74" y="136" width="26" height="44" fill="#5980a6" fill-opacity=".35" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="114" y="120" width="26" height="60" fill="#5980a6" fill-opacity=".55" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="154" y="108" width="26" height="72" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<rect x="194" y="98" width="26" height="82" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
</g>
|
||||||
|
<path d="M64 180h172" stroke="#416180" stroke-width="1.5"/>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<circle cx="356" cy="124" r="52"/>
|
||||||
|
</g>
|
||||||
|
<path d="M356 124 L356 72 A52 52 0 0 1 394 160 Z" fill="#5980a6" fill-opacity=".45"/>
|
||||||
|
<path d="M356 72v52l38 36" stroke="#416180" stroke-width="1.5" fill="none"/>
|
||||||
|
<text x="308" y="200" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".7">STRUKTURA KOSZTÓW</text>
|
||||||
|
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,79 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-plat">
|
||||||
|
<title id="t-plat">Panel kursanta na platformie - postęp kursów, nadchodzące webinaria i certyfikat</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="plat-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="640" height="360" fill="#eaeef2"/>
|
||||||
|
<rect width="640" height="360" fill="url(#plat-grid)"/>
|
||||||
|
|
||||||
|
<!-- okno aplikacji -->
|
||||||
|
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||||
|
<rect x="40" y="34" width="560" height="292"/>
|
||||||
|
<path d="M40 66h560M172 66v260"/>
|
||||||
|
</g>
|
||||||
|
<rect x="40" y="34" width="560" height="32" fill="#5980a6" fill-opacity=".18"/>
|
||||||
|
<g fill="#416180" opacity=".45">
|
||||||
|
<circle cx="58" cy="50" r="4"/><circle cx="72" cy="50" r="4"/><circle cx="86" cy="50" r="4"/>
|
||||||
|
</g>
|
||||||
|
<text x="108" y="55" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">PANEL KURSANTA</text>
|
||||||
|
|
||||||
|
<!-- menu boczne -->
|
||||||
|
<g fill="#5980a6">
|
||||||
|
<rect x="40" y="82" width="132" height="26" fill-opacity=".28"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".45">
|
||||||
|
<rect x="58" y="91" width="72" height="8"/>
|
||||||
|
<rect x="58" y="126" width="86" height="8"/>
|
||||||
|
<rect x="58" y="156" width="64" height="8"/>
|
||||||
|
<rect x="58" y="186" width="80" height="8"/>
|
||||||
|
<rect x="58" y="216" width="70" height="8"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- karty postępu kursów -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="192" y="88" width="184" height="76"/>
|
||||||
|
<rect x="396" y="88" width="184" height="76"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".45">
|
||||||
|
<rect x="206" y="102" width="104" height="8"/>
|
||||||
|
<rect x="410" y="102" width="120" height="8"/>
|
||||||
|
</g>
|
||||||
|
<!-- paski postępu -->
|
||||||
|
<g>
|
||||||
|
<rect x="206" y="130" width="156" height="8" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<rect x="206" y="130" width="102" height="8" fill="#5980a6"/>
|
||||||
|
<rect x="410" y="130" width="156" height="8" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
<rect x="410" y="130" width="48" height="8" fill="#5980a6"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1" opacity=".7">
|
||||||
|
<text x="206" y="156">POSTĘP 65%</text>
|
||||||
|
<text x="410" y="156">POSTĘP 30%</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- agenda webinariów -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="192" y="184" width="388" height="122"/>
|
||||||
|
<path d="M192 210h388"/>
|
||||||
|
</g>
|
||||||
|
<rect x="192" y="184" width="388" height="26" fill="#5980a6" fill-opacity=".12"/>
|
||||||
|
<text x="206" y="202" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">NADCHODZĄCE WEBINARIA</text>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none" opacity=".85">
|
||||||
|
<rect x="206" y="222" width="38" height="34"/>
|
||||||
|
<rect x="206" y="264" width="38" height="34"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="13" text-anchor="middle" opacity=".8">
|
||||||
|
<text x="225" y="236">15</text><text x="225" y="250" font-size="10">LIS</text>
|
||||||
|
<text x="225" y="278">22</text><text x="225" y="292" font-size="10">LIS</text>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".42">
|
||||||
|
<rect x="258" y="228" width="180" height="7"/>
|
||||||
|
<rect x="258" y="242" width="120" height="6"/>
|
||||||
|
<rect x="258" y="270" width="204" height="7"/>
|
||||||
|
<rect x="258" y="284" width="136" height="6"/>
|
||||||
|
</g>
|
||||||
|
<!-- znacznik LIVE -->
|
||||||
|
<rect x="500" y="224" width="46" height="17" fill="#1d2d3d"/>
|
||||||
|
<text x="509" y="237" fill="#f2f2f3" font-family="'Barlow Condensed',sans-serif" font-size="10" letter-spacing="1.3">LIVE</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,72 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-szk">
|
||||||
|
<title id="t-szk">Sala szkoleniowa - prowadzący, ekran z danymi i uczestnicy przy stanowiskach</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="szk-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="640" height="360" fill="#eaeef2"/>
|
||||||
|
<rect width="640" height="360" fill="url(#szk-grid)"/>
|
||||||
|
|
||||||
|
<!-- ekran prezentacyjny -->
|
||||||
|
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||||
|
<rect x="188" y="40" width="264" height="146"/>
|
||||||
|
<path d="M320 186v18"/>
|
||||||
|
</g>
|
||||||
|
<rect x="188" y="40" width="264" height="20" fill="#5980a6" fill-opacity=".18"/>
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".9">
|
||||||
|
<!-- wykres na ekranie -->
|
||||||
|
<path d="M208 160 250 132 286 142 322 104 358 118 396 86 432 96"/>
|
||||||
|
<path d="M208 172h224" stroke-opacity=".5"/>
|
||||||
|
<path d="M208 76v96" stroke-opacity=".5"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".55">
|
||||||
|
<circle cx="250" cy="132" r="3"/><circle cx="322" cy="104" r="3"/><circle cx="396" cy="86" r="3"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#416180" opacity=".5">
|
||||||
|
<rect x="198" y="46" width="46" height="8"/><rect x="252" y="46" width="30" height="8"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- prowadzący -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<circle cx="122" cy="120" r="14"/>
|
||||||
|
<path d="M104 186v-32a18 18 0 0 1 36 0v32"/>
|
||||||
|
<path d="M140 160l30-14"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- stanowiska uczestników -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<g>
|
||||||
|
<rect x="70" y="248" width="120" height="8"/>
|
||||||
|
<path d="M96 256v40M164 256v40"/>
|
||||||
|
<rect x="96" y="222" width="42" height="26"/>
|
||||||
|
<circle cx="160" cy="212" r="11"/>
|
||||||
|
<path d="M146 248v-14a14 14 0 0 1 28 0v14"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<rect x="260" y="248" width="120" height="8"/>
|
||||||
|
<path d="M286 256v40M354 256v40"/>
|
||||||
|
<rect x="286" y="222" width="42" height="26"/>
|
||||||
|
<circle cx="350" cy="212" r="11"/>
|
||||||
|
<path d="M336 248v-14a14 14 0 0 1 28 0v14"/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<rect x="450" y="248" width="120" height="8"/>
|
||||||
|
<path d="M476 256v40M544 256v40"/>
|
||||||
|
<rect x="476" y="222" width="42" height="26"/>
|
||||||
|
<circle cx="540" cy="212" r="11"/>
|
||||||
|
<path d="M526 248v-14a14 14 0 0 1 28 0v14"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" fill-opacity=".22">
|
||||||
|
<rect x="96" y="222" width="42" height="26"/>
|
||||||
|
<rect x="286" y="222" width="42" height="26"/>
|
||||||
|
<rect x="476" y="222" width="42" height="26"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- oznaczenia techniczne (pod rysunkiem, poza strefa postaci) -->
|
||||||
|
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.2" opacity=".65">
|
||||||
|
<text x="70" y="334">MAX. 12</text>
|
||||||
|
<text x="570" y="334" text-anchor="end">2 × 8 H</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,69 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-web">
|
||||||
|
<title id="t-web">Webinarium na żywo - okno prowadzącego, uczestnicy i panel czatu</title>
|
||||||
|
<defs>
|
||||||
|
<pattern id="web-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||||
|
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||||
|
</pattern>
|
||||||
|
</defs>
|
||||||
|
<rect width="640" height="360" fill="#eaeef2"/>
|
||||||
|
<rect width="640" height="360" fill="url(#web-grid)"/>
|
||||||
|
|
||||||
|
<!-- główne okno transmisji -->
|
||||||
|
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||||
|
<rect x="44" y="46" width="380" height="234"/>
|
||||||
|
<path d="M44 76h380"/>
|
||||||
|
</g>
|
||||||
|
<rect x="44" y="46" width="380" height="30" fill="#5980a6" fill-opacity=".18"/>
|
||||||
|
<g fill="#416180" opacity=".45">
|
||||||
|
<circle cx="60" cy="61" r="4"/><circle cx="74" cy="61" r="4"/><circle cx="88" cy="61" r="4"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- znacznik LIVE -->
|
||||||
|
<rect x="360" y="52" width="52" height="18" fill="#1d2d3d"/>
|
||||||
|
<circle cx="371" cy="61" r="3.5" fill="#f2f2f3"/>
|
||||||
|
<text x="380" y="65" fill="#f2f2f3" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.4">LIVE</text>
|
||||||
|
|
||||||
|
<!-- prowadzący w kadrze -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||||
|
<circle cx="150" cy="150" r="26"/>
|
||||||
|
<path d="M112 246v-42a38 38 0 0 1 76 0v42"/>
|
||||||
|
</g>
|
||||||
|
<circle cx="150" cy="150" r="26" fill="#5980a6" fill-opacity=".2"/>
|
||||||
|
|
||||||
|
<!-- udostępniony slajd -->
|
||||||
|
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||||
|
<rect x="232" y="112" width="164" height="112"/>
|
||||||
|
<path d="M244 200l30-26 26 14 30-38 28 22" />
|
||||||
|
<path d="M244 210h140" stroke-opacity=".5"/>
|
||||||
|
</g>
|
||||||
|
<g fill="#5980a6" opacity=".45">
|
||||||
|
<rect x="244" y="124" width="60" height="7"/>
|
||||||
|
<rect x="244" y="138" width="94" height="5"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- panel czatu -->
|
||||||
|
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||||
|
<rect x="444" y="46" width="152" height="234"/>
|
||||||
|
<path d="M444 76h152"/>
|
||||||
|
</g>
|
||||||
|
<rect x="444" y="46" width="152" height="30" fill="#5980a6" fill-opacity=".12"/>
|
||||||
|
<text x="456" y="66" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">PYTANIA · 24</text>
|
||||||
|
<g fill="#5980a6" opacity=".38">
|
||||||
|
<rect x="456" y="92" width="80" height="6"/><rect x="456" y="104" width="118" height="6"/>
|
||||||
|
<rect x="456" y="128" width="96" height="6"/><rect x="456" y="140" width="70" height="6"/>
|
||||||
|
<rect x="456" y="164" width="112" height="6"/><rect x="456" y="176" width="58" height="6"/>
|
||||||
|
<rect x="456" y="200" width="88" height="6"/><rect x="456" y="212" width="104" height="6"/>
|
||||||
|
</g>
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none" opacity=".7">
|
||||||
|
<rect x="456" y="244" width="128" height="22"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- uczestnicy -->
|
||||||
|
<g stroke="#416180" stroke-width="1.5" fill="none" opacity=".8">
|
||||||
|
<g><circle cx="80" cy="312" r="10"/><path d="M66 340v-10a14 14 0 0 1 28 0v10"/></g>
|
||||||
|
<g><circle cx="140" cy="312" r="10"/><path d="M126 340v-10a14 14 0 0 1 28 0v10"/></g>
|
||||||
|
<g><circle cx="200" cy="312" r="10"/><path d="M186 340v-10a14 14 0 0 1 28 0v10"/></g>
|
||||||
|
<g><circle cx="260" cy="312" r="10"/><path d="M246 340v-10a14 14 0 0 1 28 0v10"/></g>
|
||||||
|
</g>
|
||||||
|
<text x="300" y="336" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".65">+ 118 UCZESTNIKÓW ONLINE</text>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,629 @@
|
|||||||
|
/* ============================================================================
|
||||||
|
SoftSPM - system "Industry" / HydroNexis
|
||||||
|
Tokeny i komponenty wg doc/SoftSPM_projekt.doc v1.0. Jasny grunt techniczny,
|
||||||
|
jedna barwa akcentu (stalowa), rysunek liniowy, krzyzyki rejestracyjne.
|
||||||
|
Czysty CSS, bez build stepu.
|
||||||
|
========================================================================= */
|
||||||
|
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@500;600;700&display=swap");
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--color-bg: #f2f2f3;
|
||||||
|
--color-surface: #e9e9ea;
|
||||||
|
--color-text: #1d1f20;
|
||||||
|
--color-accent: #5980a6;
|
||||||
|
--color-accent-2: #728fab;
|
||||||
|
--color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
|
||||||
|
|
||||||
|
/* Rampy tonalne - jedna wspolna skala jasnosci OKLCH */
|
||||||
|
--color-neutral-100: #f5f5f8;
|
||||||
|
--color-neutral-200: #e7e7ea;
|
||||||
|
--color-neutral-300: #d4d4d7;
|
||||||
|
--color-neutral-400: #b7b7ba;
|
||||||
|
--color-neutral-500: #98989b;
|
||||||
|
--color-neutral-600: #7a7a7d;
|
||||||
|
--color-neutral-700: #5d5d60;
|
||||||
|
--color-neutral-800: #424244;
|
||||||
|
--color-neutral-900: #2b2b2d;
|
||||||
|
|
||||||
|
--color-accent-100: #eef6ff;
|
||||||
|
--color-accent-200: #d6ebff;
|
||||||
|
--color-accent-300: #b5d9fd;
|
||||||
|
--color-accent-400: #94bce3;
|
||||||
|
--color-accent-500: #749dc4;
|
||||||
|
--color-accent-600: #597ea3;
|
||||||
|
--color-accent-700: #416180;
|
||||||
|
--color-accent-800: #2c455d;
|
||||||
|
--color-accent-900: #1d2d3d;
|
||||||
|
|
||||||
|
--font-heading: "Barlow Condensed", system-ui, sans-serif;
|
||||||
|
--font-heading-weight: 600;
|
||||||
|
--font-body: "Barlow", system-ui, sans-serif;
|
||||||
|
|
||||||
|
--space-1: 3.4px;
|
||||||
|
--space-2: 6.8px;
|
||||||
|
--space-3: 10.2px;
|
||||||
|
--space-4: 13.6px;
|
||||||
|
--space-6: 20.4px;
|
||||||
|
--space-8: 27.2px;
|
||||||
|
|
||||||
|
--radius-sm: 2px;
|
||||||
|
--radius-md: 4px;
|
||||||
|
--radius-lg: 7px;
|
||||||
|
|
||||||
|
--shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
|
||||||
|
--shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
|
||||||
|
--shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
|
||||||
|
|
||||||
|
/* Rytm strony - jednostka wiodaca 24px, polkrok 12px */
|
||||||
|
--leading: 24px;
|
||||||
|
--half: 12px;
|
||||||
|
--edge: clamp(20px, 5vw, 72px);
|
||||||
|
--measure: 62ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
*, *::before, *::after { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--color-bg);
|
||||||
|
color: var(--color-text);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-wrap: pretty;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
/* dlugie slowa i adresy nie rozpychaja ukladu na waskich ekranach */
|
||||||
|
p, li, h1, h2, h3, h4, td, th, blockquote, figcaption { overflow-wrap: break-word; }
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
font-family: var(--font-heading);
|
||||||
|
font-weight: var(--font-heading-weight);
|
||||||
|
line-height: 1.12;
|
||||||
|
letter-spacing: -0.015em;
|
||||||
|
margin: 0 0 var(--space-2);
|
||||||
|
}
|
||||||
|
h1 { font-size: 42px; }
|
||||||
|
h2 { font-size: 32px; }
|
||||||
|
h3 { font-size: 25px; }
|
||||||
|
h4 { font-size: 20px; }
|
||||||
|
h5 { font-size: 16px; }
|
||||||
|
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
|
||||||
|
|
||||||
|
p { margin: 0 0 var(--space-3); }
|
||||||
|
a { color: var(--color-accent-700); text-underline-offset: 3px; }
|
||||||
|
img { display: block; max-width: 100%; }
|
||||||
|
|
||||||
|
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
|
||||||
|
.text-muted { color: color-mix(in srgb, var(--color-text) 62%, transparent); }
|
||||||
|
.lead { font-size: 17.5px; line-height: var(--leading); max-width: var(--measure); }
|
||||||
|
.visually-hidden {
|
||||||
|
position: absolute; width: 1px; height: 1px; overflow: hidden;
|
||||||
|
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- nawigacja ---------------------------------------------------------- */
|
||||||
|
.nav {
|
||||||
|
position: sticky; top: 0; z-index: 50;
|
||||||
|
display: flex; align-items: center; gap: var(--space-4);
|
||||||
|
min-height: 62px;
|
||||||
|
padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
|
||||||
|
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border-bottom: 1px solid var(--color-divider);
|
||||||
|
}
|
||||||
|
.nav-brand {
|
||||||
|
display: inline-flex; align-items: center;
|
||||||
|
margin-right: var(--space-2); text-decoration: none;
|
||||||
|
}
|
||||||
|
.nav-brand img { height: 30px; width: auto; }
|
||||||
|
@media (max-width: 420px) { .nav-brand img { height: 26px; } }
|
||||||
|
.nav-links { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
|
||||||
|
.nav a {
|
||||||
|
font-size: 14px; white-space: nowrap; text-decoration: none;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 78%, transparent);
|
||||||
|
}
|
||||||
|
.nav a:hover { color: var(--color-accent-700); }
|
||||||
|
.nav a[aria-current] { color: var(--color-accent-700); font-weight: 500; }
|
||||||
|
.nav .btn { margin-left: var(--space-2); }
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.nav-links a:not(.nav-keep) { display: none; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- linijki podpisowe: etykieta NAD kreska, tresc pod nia -------------- */
|
||||||
|
.kicker {
|
||||||
|
display: block; font-size: 13px; line-height: var(--half);
|
||||||
|
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
|
||||||
|
color: var(--color-accent-700);
|
||||||
|
font-feature-settings: "tnum" 1;
|
||||||
|
margin: 0 0 var(--half);
|
||||||
|
}
|
||||||
|
.caption-rule {
|
||||||
|
height: 1px; border: 0; background: var(--color-divider);
|
||||||
|
margin: 0 0 calc(var(--leading) - var(--half));
|
||||||
|
}
|
||||||
|
.section-intro { max-width: var(--measure); margin-bottom: calc(1.5 * var(--leading)); }
|
||||||
|
.section-intro h2 { text-transform: uppercase; font-size: clamp(28px, 3.4vw, 40px); }
|
||||||
|
|
||||||
|
/* -- krzyzyki rejestracyjne -------------------------------------------- */
|
||||||
|
.corner {
|
||||||
|
position: absolute; width: 13px; height: 13px;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.corner::before, .corner::after { content: ""; position: absolute; background: currentColor; }
|
||||||
|
.corner::before { left: 6px; top: 0; width: 1px; height: 100%; }
|
||||||
|
.corner::after { top: 6px; left: 0; width: 100%; height: 1px; }
|
||||||
|
.corner.tl { top: -7px; left: -7px; }
|
||||||
|
.corner.tr { top: -7px; right: -7px; }
|
||||||
|
.corner.bl { bottom: -7px; left: -7px; }
|
||||||
|
.corner.br { bottom: -7px; right: -7px; }
|
||||||
|
|
||||||
|
/* -- przyciski ---------------------------------------------------------- */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
||||||
|
cursor: pointer; text-decoration: none;
|
||||||
|
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
|
||||||
|
font-size: 15px; line-height: 1.2; color: var(--color-text);
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid var(--color-divider); border-radius: 0;
|
||||||
|
padding: 9px 16px;
|
||||||
|
}
|
||||||
|
.btn svg { display: block; }
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--color-accent); color: var(--color-bg);
|
||||||
|
border-color: var(--color-accent);
|
||||||
|
}
|
||||||
|
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
|
||||||
|
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
|
||||||
|
.btn-ghost { color: var(--color-accent-700); border-color: var(--color-divider); }
|
||||||
|
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
|
||||||
|
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
|
||||||
|
.btn-lg { padding: 12px 22px; font-size: 17px; }
|
||||||
|
.btn-block { width: 100%; }
|
||||||
|
.btn:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
|
||||||
|
|
||||||
|
/* -- tagi --------------------------------------------------------------- */
|
||||||
|
.tag {
|
||||||
|
display: inline-flex; align-items: center; gap: 5px;
|
||||||
|
padding: 2px 8px; border-radius: 0;
|
||||||
|
font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
|
||||||
|
border: 1px solid var(--color-divider); white-space: nowrap;
|
||||||
|
}
|
||||||
|
.tag-accent { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
|
||||||
|
.tag-outline { color: var(--color-accent-700); border-color: var(--color-accent-400); }
|
||||||
|
.tag-neutral { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
|
||||||
|
.tag-live { background: var(--color-accent-900); color: var(--color-bg); border-color: var(--color-accent-900); }
|
||||||
|
/* status zamiast daty - termin jeszcze nieustalony */
|
||||||
|
.tag-soon {
|
||||||
|
color: var(--color-accent-700);
|
||||||
|
border-style: dashed; border-color: var(--color-accent-400);
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- formularze --------------------------------------------------------- */
|
||||||
|
.field { margin-bottom: var(--space-3); }
|
||||||
|
.field > label {
|
||||||
|
display: block; font-size: 12px; margin-bottom: 5px;
|
||||||
|
letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 70%, transparent);
|
||||||
|
}
|
||||||
|
.input {
|
||||||
|
width: 100%; min-height: 40px; padding: 8px 11px;
|
||||||
|
font: inherit; font-size: 15px;
|
||||||
|
color: var(--color-text); caret-color: var(--color-accent);
|
||||||
|
background: color-mix(in srgb, var(--color-bg) 60%, #fff);
|
||||||
|
border: 1px solid var(--color-divider); border-radius: 0;
|
||||||
|
}
|
||||||
|
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
|
||||||
|
.input:focus-visible { border-color: var(--color-accent); outline: 1px solid var(--color-accent); outline-offset: 0; }
|
||||||
|
textarea.input { min-height: 110px; resize: vertical; }
|
||||||
|
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
|
||||||
|
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
|
||||||
|
.form-note { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
|
||||||
|
|
||||||
|
/* -- ramka blueprint / plyta arkusza ----------------------------------- */
|
||||||
|
.plate { position: relative; border: 1px solid var(--color-divider); background: transparent; }
|
||||||
|
|
||||||
|
.title-block {
|
||||||
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4);
|
||||||
|
padding: var(--half) var(--space-4);
|
||||||
|
border-bottom: 1px solid var(--color-divider);
|
||||||
|
background: color-mix(in srgb, var(--color-accent) 7%, transparent);
|
||||||
|
}
|
||||||
|
.tb-title {
|
||||||
|
font-family: var(--font-heading); font-weight: 600;
|
||||||
|
font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.tb-cell {
|
||||||
|
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||||
|
font-feature-settings: "tnum" 1;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 62%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- tabele ------------------------------------------------------------- */
|
||||||
|
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
|
||||||
|
.table th {
|
||||||
|
text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 60%, transparent);
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
border-bottom: 1px solid var(--color-divider);
|
||||||
|
}
|
||||||
|
.table td {
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.table tbody tr:last-child td { border-bottom: 0; }
|
||||||
|
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
|
||||||
|
|
||||||
|
.s-num, .s-val, .s-date { font-feature-settings: "tnum" 1; }
|
||||||
|
.s-num { color: color-mix(in srgb, var(--color-text) 55%, transparent); width: 3rem; }
|
||||||
|
.s-val {
|
||||||
|
font-family: var(--font-heading); font-weight: 700; font-size: 21px;
|
||||||
|
color: var(--color-accent-800); white-space: nowrap;
|
||||||
|
}
|
||||||
|
.s-prop { font-weight: 500; }
|
||||||
|
.s-rem { font-size: 14px; color: color-mix(in srgb, var(--color-text) 68%, transparent); }
|
||||||
|
.s-date { white-space: nowrap; font-weight: 500; width: 1%; }
|
||||||
|
.s-topic { font-family: var(--font-heading); font-weight: 600; font-size: 18px; }
|
||||||
|
.s-act { text-align: right; white-space: nowrap; }
|
||||||
|
.sign {
|
||||||
|
font-family: var(--font-heading); font-weight: 600; font-size: 15px;
|
||||||
|
color: var(--color-accent-700); text-decoration: none;
|
||||||
|
}
|
||||||
|
.sign:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
.sheet-note {
|
||||||
|
margin: 0; padding: var(--half) var(--space-4);
|
||||||
|
border-top: 1px solid var(--color-divider);
|
||||||
|
font-size: 12px; letter-spacing: 0.03em;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- zdjecia: duotone w ramce blueprint -------------------------------- */
|
||||||
|
.duotone { position: relative; overflow: hidden; background: var(--color-accent-900); }
|
||||||
|
.duotone img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.04); }
|
||||||
|
.duotone::after {
|
||||||
|
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||||||
|
background: var(--color-accent); mix-blend-mode: screen; opacity: 0.62;
|
||||||
|
}
|
||||||
|
.figure { position: relative; border: 1px solid var(--color-divider); }
|
||||||
|
.figure .duotone { aspect-ratio: 4 / 3; }
|
||||||
|
/* rysunki wlasne (SVG) - juz sa w kolorystyce systemu, bez duotone */
|
||||||
|
.plot { display: block; width: 100%; background: #eaeef2; }
|
||||||
|
.figure .plot { border-bottom: 1px solid var(--color-divider); }
|
||||||
|
.figure figcaption {
|
||||||
|
padding: var(--half) var(--space-4);
|
||||||
|
border-top: 1px solid var(--color-divider);
|
||||||
|
font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 58%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- ikony -------------------------------------------------------------- */
|
||||||
|
.ico { width: 28px; height: 28px; stroke: var(--color-accent); stroke-width: 1.5; fill: none;
|
||||||
|
stroke-linecap: round; stroke-linejoin: round; }
|
||||||
|
.ico-sm { width: 16px; height: 16px; stroke-width: 1.5; }
|
||||||
|
|
||||||
|
/* -- sekcje ------------------------------------------------------------- */
|
||||||
|
.section { padding: calc(3 * var(--leading)) 0; }
|
||||||
|
.section-tight { padding: calc(2 * var(--leading)) 0; }
|
||||||
|
|
||||||
|
/* -- hero --------------------------------------------------------------- */
|
||||||
|
.hero { padding: calc(3.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
|
||||||
|
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(2 * var(--leading)); align-items: center; }
|
||||||
|
.display {
|
||||||
|
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
|
||||||
|
/* skalowanie wzgledem szerokosci kolumny hero, zeby dluzsza linia
|
||||||
|
("W PRAKTYCE OD 2014.") miescila sie bez lamania w srodku slowa */
|
||||||
|
font-size: clamp(40px, 5.1cqi, 82px);
|
||||||
|
line-height: 1.04;
|
||||||
|
letter-spacing: 0.01em; text-transform: uppercase; margin: 0;
|
||||||
|
margin-left: -0.052em;
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
.display .line { display: block; }
|
||||||
|
.hero-grid > div:first-child { container-type: inline-size; }
|
||||||
|
@supports not (font-size: 1cqi) {
|
||||||
|
.display { font-size: clamp(40px, 5.6vw, 82px); }
|
||||||
|
}
|
||||||
|
.hero .sub {
|
||||||
|
font-size: 17px; line-height: var(--leading); max-width: var(--measure);
|
||||||
|
margin: var(--leading) 0 0;
|
||||||
|
}
|
||||||
|
.hero .row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
|
||||||
|
.hero-marks {
|
||||||
|
display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
|
||||||
|
margin-top: calc(1.5 * var(--leading)); padding-top: var(--half);
|
||||||
|
border-top: 1px solid var(--color-divider);
|
||||||
|
font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 58%, transparent);
|
||||||
|
}
|
||||||
|
.page-hero { padding: calc(2.5 * var(--leading)) 0 calc(1.5 * var(--leading)); }
|
||||||
|
.page-hero h1 { font-size: clamp(40px, 5.4vw, 68px); text-transform: uppercase; margin-left: -0.052em; }
|
||||||
|
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .hero-figure { display: none; } }
|
||||||
|
|
||||||
|
/* -- siatka komorek (karty jako rysunki liniowe) ----------------------- */
|
||||||
|
.cells { display: grid; gap: calc(1.5 * var(--leading)); }
|
||||||
|
.cells-2 { grid-template-columns: repeat(2, 1fr); }
|
||||||
|
.cells-3 { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
.cells-4 { grid-template-columns: repeat(4, 1fr); }
|
||||||
|
@media (max-width: 980px) { .cells-3, .cells-4 { grid-template-columns: repeat(2, 1fr); } }
|
||||||
|
@media (max-width: 640px) { .cells-2, .cells-3, .cells-4 { grid-template-columns: 1fr; } }
|
||||||
|
|
||||||
|
.cell-frame {
|
||||||
|
position: relative; display: flex; flex-direction: column;
|
||||||
|
padding: var(--space-6);
|
||||||
|
border: 1px solid var(--color-divider); background: transparent;
|
||||||
|
}
|
||||||
|
.cell-frame h2, .cell-frame h3 { font-size: 25px; margin-bottom: var(--half); }
|
||||||
|
.cell-frame p { font-size: 15px; flex: 1; margin-bottom: var(--space-4); }
|
||||||
|
.cell-frame .ico { margin-bottom: var(--space-3); }
|
||||||
|
.cell-link {
|
||||||
|
font-family: var(--font-heading); font-weight: 600; font-size: 15px;
|
||||||
|
color: var(--color-accent-700); text-decoration: none; margin-top: auto;
|
||||||
|
}
|
||||||
|
.cell-link:hover { text-decoration: underline; }
|
||||||
|
.cell-span { grid-column: 1 / -1; }
|
||||||
|
.cell-num {
|
||||||
|
position: absolute; top: var(--space-3); right: var(--space-4);
|
||||||
|
font-size: 12px; letter-spacing: 0.08em;
|
||||||
|
font-feature-settings: "tnum" 1;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 35%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- karta kursu -------------------------------------------------------- */
|
||||||
|
.course {
|
||||||
|
position: relative; display: flex; flex-direction: column;
|
||||||
|
border: 1px solid var(--color-divider);
|
||||||
|
}
|
||||||
|
.course .duotone { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--color-divider); }
|
||||||
|
.course .plot { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--color-divider); }
|
||||||
|
.expert .plot { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--color-divider); }
|
||||||
|
.course-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
|
||||||
|
.course-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
|
||||||
|
.course h3 { font-size: 22px; margin-bottom: var(--half); }
|
||||||
|
.course p { font-size: 14.5px; flex: 1; }
|
||||||
|
.course-meta {
|
||||||
|
display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
|
||||||
|
padding-top: var(--half); margin-bottom: var(--space-4);
|
||||||
|
border-top: 1px solid var(--color-divider);
|
||||||
|
font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent);
|
||||||
|
}
|
||||||
|
.course-meta span { display: inline-flex; align-items: center; gap: 5px; }
|
||||||
|
.course-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||||
|
.price {
|
||||||
|
font-family: var(--font-heading); font-weight: 700; font-size: 24px;
|
||||||
|
color: var(--color-accent-800); font-feature-settings: "tnum" 1; line-height: 1.1;
|
||||||
|
}
|
||||||
|
.price small { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 55%, transparent); display: block; }
|
||||||
|
|
||||||
|
/* -- uklad dwudzielny --------------------------------------------------- */
|
||||||
|
.split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2 * var(--leading)); align-items: center; }
|
||||||
|
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split-media { order: 2; } }
|
||||||
|
.split-title { font-size: clamp(30px, 3.6vw, 42px); text-transform: uppercase; margin-bottom: var(--space-4); }
|
||||||
|
|
||||||
|
/* -- lista kontrolna ---------------------------------------------------- */
|
||||||
|
.checks { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
|
||||||
|
.checks li {
|
||||||
|
position: relative; padding-left: 26px; margin-bottom: var(--half);
|
||||||
|
font-size: 15.5px;
|
||||||
|
}
|
||||||
|
.checks li::before {
|
||||||
|
content: ""; position: absolute; left: 0; top: 7px;
|
||||||
|
width: 11px; height: 6px;
|
||||||
|
border-left: 1.5px solid var(--color-accent); border-bottom: 1.5px solid var(--color-accent);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- kroki procesu ------------------------------------------------------ */
|
||||||
|
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.5 * var(--leading)); }
|
||||||
|
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }
|
||||||
|
.step { position: relative; padding-top: var(--space-6); border-top: 2px solid var(--color-accent); }
|
||||||
|
.step-num {
|
||||||
|
font-family: var(--font-heading); font-weight: 700; font-size: 44px; line-height: 1;
|
||||||
|
color: color-mix(in srgb, var(--color-accent) 42%, transparent);
|
||||||
|
font-feature-settings: "tnum" 1; display: block; margin-bottom: var(--space-3);
|
||||||
|
}
|
||||||
|
.step h3 { font-size: 22px; }
|
||||||
|
.step p { font-size: 15px; margin-bottom: 0; }
|
||||||
|
|
||||||
|
/* -- eksperci ----------------------------------------------------------- */
|
||||||
|
.expert { position: relative; border: 1px solid var(--color-divider); display: flex; flex-direction: column; }
|
||||||
|
.expert .duotone { aspect-ratio: 1 / 1; border-bottom: 1px solid var(--color-divider); }
|
||||||
|
.expert-body { padding: var(--space-6); }
|
||||||
|
.expert h3 { font-size: 21px; margin-bottom: 2px; }
|
||||||
|
.expert .role {
|
||||||
|
font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
|
||||||
|
color: var(--color-accent-700); margin-bottom: var(--space-3);
|
||||||
|
}
|
||||||
|
.expert p { font-size: 14.5px; margin-bottom: 0; }
|
||||||
|
|
||||||
|
/* -- cytat -------------------------------------------------------------- */
|
||||||
|
.quote { padding: calc(2.5 * var(--leading)) 0; }
|
||||||
|
.quote blockquote {
|
||||||
|
margin: 0; font-family: var(--font-heading); font-weight: 600;
|
||||||
|
font-size: clamp(24px, 3.1vw, 36px); line-height: 1.24;
|
||||||
|
max-width: 28ch; margin-left: -0.316em;
|
||||||
|
}
|
||||||
|
.quote figcaption {
|
||||||
|
margin-top: var(--leading); font-size: 14px;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 62%, transparent);
|
||||||
|
margin-left: -0.885em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- pasek ekosystemu --------------------------------------------------- */
|
||||||
|
.eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.5 * var(--leading)); }
|
||||||
|
@media (max-width: 780px) { .eco { grid-template-columns: 1fr; } }
|
||||||
|
.eco-item {
|
||||||
|
position: relative; padding: var(--space-6);
|
||||||
|
border: 1px solid var(--color-divider);
|
||||||
|
text-decoration: none; color: inherit; display: block;
|
||||||
|
}
|
||||||
|
.eco-item:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
|
||||||
|
.eco-item h3 { font-size: 21px; margin-bottom: var(--space-2); }
|
||||||
|
.eco-item p { font-size: 14.5px; margin-bottom: var(--space-2); }
|
||||||
|
.eco-url {
|
||||||
|
font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
|
||||||
|
color: var(--color-accent-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- newsletter / CTA --------------------------------------------------- */
|
||||||
|
.cta-band {
|
||||||
|
position: relative; padding: calc(2 * var(--leading)) var(--space-8);
|
||||||
|
border: 1px solid var(--color-divider);
|
||||||
|
background: color-mix(in srgb, var(--color-accent) 7%, transparent);
|
||||||
|
}
|
||||||
|
.form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; max-width: 560px; }
|
||||||
|
.form-row .input { flex: 1 1 240px; }
|
||||||
|
|
||||||
|
/* -- zgoda na kontakt --------------------------------------------------- */
|
||||||
|
.consent {
|
||||||
|
display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
|
||||||
|
align-items: start; max-width: var(--measure);
|
||||||
|
margin: var(--leading) 0 var(--space-4);
|
||||||
|
font-size: 13.5px; line-height: calc(var(--leading) - 3px);
|
||||||
|
color: color-mix(in srgb, var(--color-text) 78%, transparent);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.consent input[type="checkbox"] {
|
||||||
|
appearance: none; -webkit-appearance: none;
|
||||||
|
width: 18px; height: 18px; margin: 2px 0 0; flex: none;
|
||||||
|
border: 1px solid color-mix(in srgb, var(--color-text) 38%, transparent);
|
||||||
|
background: var(--color-bg); cursor: pointer;
|
||||||
|
display: grid; place-content: center;
|
||||||
|
}
|
||||||
|
.consent input[type="checkbox"]::before {
|
||||||
|
content: ""; width: 10px; height: 10px; transform: scale(0);
|
||||||
|
background: var(--color-bg);
|
||||||
|
clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 20%, 86% 8%, 38% 72%);
|
||||||
|
}
|
||||||
|
.consent input[type="checkbox"]:checked {
|
||||||
|
background: var(--color-accent); border-color: var(--color-accent);
|
||||||
|
}
|
||||||
|
.consent input[type="checkbox"]:checked::before { transform: scale(1); }
|
||||||
|
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
|
||||||
|
.consent .req { color: var(--color-accent-700); font-weight: 500; }
|
||||||
|
|
||||||
|
/* -- suwak antybotowy --------------------------------------------------- */
|
||||||
|
.verify { max-width: 420px; margin: var(--leading) 0; }
|
||||||
|
.verify-label {
|
||||||
|
display: block; margin-bottom: var(--space-2);
|
||||||
|
font-family: var(--font-heading); font-weight: 600;
|
||||||
|
font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 62%, transparent);
|
||||||
|
}
|
||||||
|
.verify-track {
|
||||||
|
position: relative; height: 46px; overflow: hidden;
|
||||||
|
border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
|
||||||
|
background: var(--color-bg); touch-action: none; user-select: none;
|
||||||
|
}
|
||||||
|
.verify-fill {
|
||||||
|
position: absolute; inset: 0 auto 0 0; width: 0;
|
||||||
|
background: color-mix(in srgb, var(--color-accent) 16%, transparent);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.verify-hint {
|
||||||
|
position: absolute; inset: 0; display: grid; place-content: center;
|
||||||
|
padding-left: 44px; pointer-events: none;
|
||||||
|
font-size: 14px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||||
|
}
|
||||||
|
.verify-handle {
|
||||||
|
position: absolute; top: -1px; left: 0; width: 60px; height: 46px;
|
||||||
|
display: grid; place-content: center; cursor: grab;
|
||||||
|
border: 1px solid var(--color-accent); background: var(--color-accent);
|
||||||
|
color: var(--color-bg); transition: left .18s ease;
|
||||||
|
}
|
||||||
|
.verify-handle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; }
|
||||||
|
.verify-handle:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
|
||||||
|
.verify.is-dragging .verify-handle { cursor: grabbing; transition: none; }
|
||||||
|
.verify.is-verified .verify-track { border-color: var(--color-accent); }
|
||||||
|
.verify.is-verified .verify-handle { background: var(--color-accent-700); border-color: var(--color-accent-700); cursor: default; }
|
||||||
|
.verify.is-verified .verify-hint { color: var(--color-accent-700); font-weight: 500; }
|
||||||
|
.verify-check { display: none; }
|
||||||
|
.verify.is-verified .verify-chevrons { display: none; }
|
||||||
|
.verify.is-verified .verify-check { display: block; }
|
||||||
|
@media (prefers-reduced-motion: reduce) { .verify-handle { transition: none; } }
|
||||||
|
|
||||||
|
/* -- pole-pułapka: widoczne wyłącznie dla automatów --------------------- */
|
||||||
|
.hp {
|
||||||
|
position: absolute; left: -9999px; top: auto;
|
||||||
|
width: 1px; height: 1px; overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- komunikat po wysłaniu formularza ----------------------------------- */
|
||||||
|
.form-status {
|
||||||
|
margin: var(--space-3) 0 0; min-height: var(--leading);
|
||||||
|
font-size: 14px; line-height: var(--leading);
|
||||||
|
}
|
||||||
|
.form-status:empty { margin: 0; min-height: 0; }
|
||||||
|
.form-status.is-ok { color: var(--color-accent-700); font-weight: 500; padding-left: var(--space-3); border-left: 2px solid var(--color-accent); }
|
||||||
|
/* System dopuszcza jedną barwę akcentu - błąd odróżniamy tonem i wypełnieniem,
|
||||||
|
nie nowym kolorem. Sam komunikat i tak mówi wprost, co się stało. */
|
||||||
|
.form-status.is-error {
|
||||||
|
color: var(--color-accent-900); font-weight: 500;
|
||||||
|
padding: var(--space-2) var(--space-3);
|
||||||
|
border-left: 2px solid var(--color-accent-900);
|
||||||
|
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||||
|
}
|
||||||
|
.form-status.is-busy { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
|
||||||
|
|
||||||
|
/* -- stopka ------------------------------------------------------------- */
|
||||||
|
.foot {
|
||||||
|
margin-top: calc(2 * var(--leading));
|
||||||
|
border-top: 1px solid var(--color-divider);
|
||||||
|
padding: calc(2 * var(--leading)) 0 calc(1.5 * var(--leading));
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: calc(1.5 * var(--leading)); }
|
||||||
|
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
|
||||||
|
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
|
||||||
|
.foot-logo { height: 42px; width: auto; margin-bottom: var(--space-4); }
|
||||||
|
.foot h4 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||||
|
color: color-mix(in srgb, var(--color-text) 58%, transparent); margin-bottom: var(--space-3); }
|
||||||
|
.foot ul { list-style: none; margin: 0; padding: 0; }
|
||||||
|
.foot li { margin-bottom: var(--space-2); }
|
||||||
|
.foot a { text-decoration: none; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
|
||||||
|
.foot a:hover { color: var(--color-accent-700); text-decoration: underline; }
|
||||||
|
.foot-bar {
|
||||||
|
margin-top: calc(1.5 * var(--leading)); padding-top: var(--half);
|
||||||
|
border-top: 1px solid var(--color-divider);
|
||||||
|
display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
|
||||||
|
font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* -- responsywne tabele: wiersze skladaja sie do kart ------------------- */
|
||||||
|
@media (max-width: 760px) {
|
||||||
|
.table.sched thead { display: none; }
|
||||||
|
.table.sched tbody tr {
|
||||||
|
display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-3);
|
||||||
|
padding: var(--space-4); border-bottom: 1px solid var(--color-divider);
|
||||||
|
}
|
||||||
|
.table.sched td { border: 0; padding: 0; }
|
||||||
|
.table.sched .s-date { order: 1; font-size: 14px; color: var(--color-accent-700); }
|
||||||
|
.table.sched .s-form { order: 2; text-align: right; }
|
||||||
|
.table.sched .s-topic { grid-column: 1 / -1; order: 3; }
|
||||||
|
.table.sched .s-place { order: 4; font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
|
||||||
|
.table.sched .s-act { order: 5; text-align: right; }
|
||||||
|
|
||||||
|
.table.spec thead { display: none; }
|
||||||
|
.table.spec tbody tr {
|
||||||
|
display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3);
|
||||||
|
padding: var(--space-4); border-bottom: 1px solid var(--color-divider);
|
||||||
|
}
|
||||||
|
.table.spec td { border: 0; padding: 0; }
|
||||||
|
.table.spec .s-val { grid-column: 2; }
|
||||||
|
.table.spec .s-rem { grid-column: 2; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
.nav, .btn { display: none; }
|
||||||
|
body { background: #fff; }
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,93 @@
|
|||||||
|
<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
|
||||||
|
<head><meta charset="utf-8"><title>SoftSPM — projekt nowej strony</title>
|
||||||
|
<!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom></w:WordDocument></xml><![endif]-->
|
||||||
|
<style>
|
||||||
|
body{font-family:Calibri,Arial,sans-serif;font-size:11pt;color:#1d1f20;line-height:1.5;}
|
||||||
|
h1{font-size:22pt;color:#5980a6;border-bottom:2pt solid #5980a6;padding-bottom:6pt;}
|
||||||
|
h2{font-size:15pt;color:#39536e;margin-top:18pt;}
|
||||||
|
h3{font-size:12pt;color:#1d1f20;margin-top:12pt;}
|
||||||
|
table{border-collapse:collapse;width:100%;margin:8pt 0;}
|
||||||
|
th,td{border:0.5pt solid #9fb3c8;padding:4pt 8pt;font-size:10pt;text-align:left;vertical-align:top;}
|
||||||
|
th{background:#e3eaf2;color:#39536e;}
|
||||||
|
.swatch{font-family:Consolas,monospace;font-size:10pt;}
|
||||||
|
.meta{color:#666;font-size:10pt;}
|
||||||
|
</style></head><body>
|
||||||
|
|
||||||
|
<h1>SoftSPM — projekt nowej strony internetowej</h1>
|
||||||
|
<p class="meta">Dokumentacja projektowa · wersja 1.0 · sierpień 2026 · makieta: SoftSPM_makieta.html</p>
|
||||||
|
|
||||||
|
<h2>1. Cel i założenia</h2>
|
||||||
|
<p>Nowa strona SoftSPM zachowuje dotychczasowy charakter i zakres firmy (system sterowania pompami głębinowymi), ale przenosi ciężar komunikacji na nowe produkty: <b>szkolenia, konsulting i webinaria</b> dla branży wodociągowo-kanalizacyjnej. Główny przekaz: <b>wiedza i doświadczenie praktyków od 2014 roku</b> — programy budowane na rzeczywistych wdrożeniach, nie na slajdach.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Główne CTA: zapis na szkolenie / umówienie konsultacji.</li>
|
||||||
|
<li>System SoftSPM prezentowany jako źródło wiedzy — sekcja pod koniec strony.</li>
|
||||||
|
<li>Ekosystem (wodociagowiec.pl, gieldakomunalna.pl, platforma kursowa) — wzmianka w stopce.</li>
|
||||||
|
<li>Języki: polski + wersja angielska strony głównej.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>2. Struktura serwisu</h2>
|
||||||
|
<table>
|
||||||
|
<tr><th>Strona</th><th>Plik</th><th>Zawartość</th></tr>
|
||||||
|
<tr><td>Strona główna (PL)</td><td>index.html</td><td>Hero · Doświadczenie w liczbach (arkusz techniczny) · Oferta (szkolenia / konsulting / webinaria) · Najbliższe terminy · Platforma kursowa · System SoftSPM · Opinia · Newsletter · Stopka z ekosystemem</td></tr>
|
||||||
|
<tr><td>Szkolenia / Webinaria</td><td>szkolenia.html</td><td>Hero · 5 ścieżek tematycznych · Format szkolenia (arkusz) · Terminy · Webinaria + pakiet roczny · Zgłoszenie</td></tr>
|
||||||
|
<tr><td>Konsulting</td><td>konsulting.html</td><td>Hero · Zakres usług (audyt, dobór pomp, SCADA, cyfryzacja) · Przebieg współpracy w 3 krokach · Opinia · Bezpłatna rozmowa wstępna</td></tr>
|
||||||
|
<tr><td>Strona główna (EN)</td><td>index-en.html</td><td>Angielskie lustro strony głównej</td></tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h2>3. Ścieżki tematyczne szkoleń</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Eksploatacja i diagnostyka pomp głębinowych</li>
|
||||||
|
<li>Optymalizacja energetyczna SUW</li>
|
||||||
|
<li>Monitoring i SCADA / IoT — predykcja awarii</li>
|
||||||
|
<li>Cyfryzacja przedsiębiorstw wod-kan</li>
|
||||||
|
<li>Prawo i taryfy (cykl webinariów)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>4. Design — system „Industry" (HydroNexis)</h2>
|
||||||
|
<p>Strona konsekwentnie stosuje styl wireframe/blueprint: jasne techniczne tło, stalowo-niebieski akcent, kwadratowe narożniki z krzyżykami rejestracyjnymi („+"), karty jako rysunki liniowe bez wypełnienia, zdjęcia w duotonie akcentu. Liczby i parametry prezentowane jako arkusze techniczne (tabela spec z nagłówkiem rewizji).</p>
|
||||||
|
|
||||||
|
<h3>4.1. Kolorystyka</h3>
|
||||||
|
<table>
|
||||||
|
<tr><th>Rola</th><th>Wartość</th><th>Zastosowanie</th></tr>
|
||||||
|
<tr><td>Tło</td><td class="swatch">#f2f2f3</td><td>Jasny techniczny grunt całej strony</td></tr>
|
||||||
|
<tr><td>Tekst</td><td class="swatch">#1d1f20</td><td>Treść, nagłówki</td></tr>
|
||||||
|
<tr><td>Akcent (stalowy)</td><td class="swatch">#5980a6</td><td>Przyciski primary, tagi, linki, duotone zdjęć</td></tr>
|
||||||
|
<tr><td>Akcent ciemny (700–900)</td><td class="swatch">ramp OKLCH</td><td>Tekst akcentowy w rozmiarze akapitu, stany pressed</td></tr>
|
||||||
|
</table>
|
||||||
|
<p>Zasada: jedna barwa akcentu, bez dodatkowych kolorów dekoracyjnych. Tinty i stany hover z tonalnej skali 100–900.</p>
|
||||||
|
|
||||||
|
<h3>4.2. Typografia</h3>
|
||||||
|
<table>
|
||||||
|
<tr><th>Rola</th><th>Krój</th><th>Charakter</th></tr>
|
||||||
|
<tr><td>Nagłówki</td><td>Barlow Condensed</td><td>Skondensowane, wersaliki w tytułach sekcji i tabel</td></tr>
|
||||||
|
<tr><td>Tekst</td><td>Barlow</td><td>Czytelny grotesk, interlinia rytmu 24px</td></tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h3>4.3. Komponenty</h3>
|
||||||
|
<ul>
|
||||||
|
<li><b>Przyciski:</b> primary — jedyny pełny obiekt (wypełnienie akcentem, kwadratowe rogi, znaczniki narożne); ghost — obrys.</li>
|
||||||
|
<li><b>Karty ofertowe:</b> ramka włoskowa + 4 krzyżyki narożne, bez tła.</li>
|
||||||
|
<li><b>Arkusz techniczny („plate"):</b> tabela spec z paskiem tytułowym (kod, rewizja, numer arkusza) — nośnik liczb i parametrów.</li>
|
||||||
|
<li><b>Tabela terminów:</b> data tabelaryczna, temat w Barlow Condensed, tagi Szkolenie/Webinar, link „Zapisz się →"; na mobile wiersze składają się do kart.</li>
|
||||||
|
<li><b>Zdjęcia:</b> zawsze w duotonie akcentu, w ramce blueprint.</li>
|
||||||
|
<li><b>Ikony:</b> Lucide, stroke 1.5.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>5. Treści do potwierdzenia przed publikacją</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Liczby w sekcji „Doświadczenie w liczbach" (480+ przeszkolonych, 24 webinaria/rok, 60+ wdrożeń) — wartości przykładowe.</li>
|
||||||
|
<li>Referencje/cytaty — przykładowe, do zastąpienia prawdziwymi.</li>
|
||||||
|
<li>Nazwa i adres platformy kursowej (linki „Przejdź do platformy").</li>
|
||||||
|
<li>Terminy szkoleń i cennik pakietu rocznego webinariów.</li>
|
||||||
|
<li>Zdjęcia z obiektów (obecnie placeholder w duotonie).</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>6. Następne kroki</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Akceptacja struktury i treści makiety.</li>
|
||||||
|
<li>Podpięcie formularzy (zapisy, newsletter) do systemu mailingowego.</li>
|
||||||
|
<li>Integracja kalendarza terminów z platformą kursową.</li>
|
||||||
|
<li>Sesja zdjęciowa na obiektach lub wybór zdjęć archiwalnych.</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</body></html>
|
||||||
@@ -0,0 +1,227 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Manual API - send_email_api.php</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #f4f7fb;
|
||||||
|
--card: #ffffff;
|
||||||
|
--text: #122033;
|
||||||
|
--muted: #4f6277;
|
||||||
|
--border: #d7e0ea;
|
||||||
|
--accent: #0b66c3;
|
||||||
|
--ok: #1f8b4c;
|
||||||
|
--err: #b02a37;
|
||||||
|
--code-bg: #0f1b2a;
|
||||||
|
--code-text: #e5f0ff;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
.container { max-width: 1100px; margin: 0 auto; padding: 28px 16px 48px; }
|
||||||
|
.header {
|
||||||
|
background: linear-gradient(120deg, #d9ecff 0%, #f7fbff 60%, #ffffff 100%);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
h1, h2, h3 { margin: 0 0 10px; }
|
||||||
|
h1 { font-size: 1.7rem; }
|
||||||
|
h2 { font-size: 1.25rem; margin-top: 20px; }
|
||||||
|
h3 { font-size: 1.05rem; margin-top: 16px; }
|
||||||
|
.card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 18px;
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
.muted { color: var(--muted); }
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 9px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: #fff;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.badge.post { border-color: #9ac6f2; color: #084f97; }
|
||||||
|
.badge.json { border-color: #98d7ad; color: #166838; }
|
||||||
|
.badge.auth { border-color: #f4c28b; color: #8a4b00; }
|
||||||
|
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
||||||
|
th, td {
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
padding: 9px 7px;
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
th { background: #f7fafe; font-weight: 600; }
|
||||||
|
code {
|
||||||
|
background: #eef4fb;
|
||||||
|
border: 1px solid #dbe8f5;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 1px 6px;
|
||||||
|
font-family: Consolas, "Courier New", monospace;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
margin: 10px 0 0;
|
||||||
|
background: var(--code-bg);
|
||||||
|
color: var(--code-text);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 14px;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.ok { color: var(--ok); font-weight: 600; }
|
||||||
|
.err { color: var(--err); font-weight: 600; }
|
||||||
|
ul { margin-top: 8px; }
|
||||||
|
li { margin-bottom: 6px; }
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
h1 { font-size: 1.35rem; }
|
||||||
|
th, td { font-size: 0.9rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<section class="header">
|
||||||
|
<h1>Manual programisty: send_email_api.php</h1>
|
||||||
|
<p class="muted">Dokumentacja endpointu do wysyłki e-mail przez SMTP (PHPMailer).</p>
|
||||||
|
<span class="badge post">POST</span>
|
||||||
|
<span class="badge json">application/json</span>
|
||||||
|
<span class="badge auth">Auth: Bearer token w Authorization</span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>1. Endpoint</h2>
|
||||||
|
<table>
|
||||||
|
<tr><th>Adres</th><td><code>https://api.softspm.pl/send_email_api.php</code></td></tr>
|
||||||
|
<tr><th>Metoda HTTP</th><td><code>POST</code></td></tr>
|
||||||
|
<tr><th>Preflight</th><td><code>OPTIONS</code> zwraca <code>204</code></td></tr>
|
||||||
|
<tr><th>Content-Type</th><td><code>application/json</code></td></tr>
|
||||||
|
<tr><th>Kodowanie</th><td>UTF-8</td></tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>2. Autoryzacja</h2>
|
||||||
|
<p>Klucz API należy przekazać w nagłówku <code>Authorization</code> jako Bearer token:</p>
|
||||||
|
<pre>Authorization: Bearer TWÓJ_KLUCZ_API</pre>
|
||||||
|
<p class="muted">Uwaga: token musi znajdować się na liście kluczy <code>API_KEYS['send_email_api.php']</code> po stronie serwera.</p>
|
||||||
|
<p class="muted">Brak nagłówka lub błędny token zwraca HTTP 401.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>3. Parametry wejściowe (JSON body)</h2>
|
||||||
|
<table>
|
||||||
|
<thead><tr><th>Parametr</th><th>Typ</th><th>Wymagany</th><th>Opis</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td><code>to</code></td><td>string</td><td>tak</td><td>Adres e-mail odbiorcy. Musi przejść walidację <code>FILTER_VALIDATE_EMAIL</code>.</td></tr>
|
||||||
|
<tr><td><code>subject</code> lub <code>title</code> lub <code>tytul</code></td><td>string</td><td>tak</td><td>Tytuł wiadomości. Max 255 znaków.</td></tr>
|
||||||
|
<tr><td><code>message</code> lub <code>body</code> lub <code>content</code> lub <code>tresc</code></td><td>string</td><td>tak</td><td>Treść wiadomości. Max 20000 znaków.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<h3>Przykładowe body</h3>
|
||||||
|
<pre>{
|
||||||
|
"to": "jan.kowalski@example.com",
|
||||||
|
"title": "Przypomnienie",
|
||||||
|
"body": "Wydarzenie odbędzie się jutro o 10:00."
|
||||||
|
}</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>4. Przykład request (cURL)</h2>
|
||||||
|
<pre>curl -X POST "https://api.softspm.pl/send_email_api.php" \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-H "Authorization: Bearer TWÓJ_KLUCZ_API" \
|
||||||
|
-d '{
|
||||||
|
"to":"jan.kowalski@example.com",
|
||||||
|
"tytul":"Test API mail",
|
||||||
|
"tresc":"To jest test wiadomości e-mail"
|
||||||
|
}'</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>5. Przykład request (JavaScript / fetch)</h2>
|
||||||
|
<pre>const response = await fetch("https://api.softspm.pl/send_email_api.php", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
"Authorization": "Bearer TWÓJ_KLUCZ_API"
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
to: "jan.kowalski@example.com",
|
||||||
|
title: "Powiadomienie",
|
||||||
|
content: "Treść wiadomości"
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
console.log(response.status, data);</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>6. Odpowiedzi API</h2>
|
||||||
|
|
||||||
|
<h3 class="ok">6.1 Sukces (HTTP 200)</h3>
|
||||||
|
<pre>{
|
||||||
|
"success": "Message has been sent"
|
||||||
|
}</pre>
|
||||||
|
|
||||||
|
<h3 class="err">6.2 Błędy</h3>
|
||||||
|
<table>
|
||||||
|
<thead><tr><th>HTTP</th><th>Komunikat</th><th>Znaczenie</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td>400</td><td><code>Empty JSON payload.</code></td><td>Puste body.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Invalid JSON payload.</code></td><td>Niepoprawna składnia JSON.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Missing required fields: to, subject/title/tytul, message/body/content/tresc</code></td><td>Brak wymaganych pól.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Invalid recipient e-mail address.</code></td><td>Niepoprawny adres e-mail odbiorcy.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Subject is too long.</code></td><td>Przekroczono limit 255 znaków.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Message is too long.</code></td><td>Przekroczono limit 20000 znaków.</td></tr>
|
||||||
|
<tr><td>401</td><td><code>Unauthorized - Invalid or missing API key.</code></td><td>Brak lub błędny Bearer token.</td></tr>
|
||||||
|
<tr><td>405</td><td><code>Only POST requests are allowed.</code></td><td>Użyto innej metody HTTP niż POST.</td></tr>
|
||||||
|
<tr><td>500</td><td><code>Mailer Error: message could not be sent.</code></td><td>Błąd SMTP/PHPMailer po stronie serwera.</td></tr>
|
||||||
|
<tr><td>204</td><td>(pusta odpowiedź)</td><td>Poprawny preflight <code>OPTIONS</code>.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>7. Uwagi implementacyjne</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Endpoint ustawia nagłówki CORS: <code>Access-Control-Allow-Origin: *</code>, <code>Allow-Methods: POST, OPTIONS</code>, <code>Allow-Headers: Content-Type, Authorization</code>.</li>
|
||||||
|
<li>Wiadomość jest wysyłana jako HTML oraz alternatywnie jako plain text (<code>AltBody</code>).</li>
|
||||||
|
<li>Tytuł i treść są sanityzowane przed osadzeniem w szablonie HTML.</li>
|
||||||
|
<li>Szczegóły błędów SMTP są logowane po stronie serwera (nie są zwracane klientowi).</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>8. Checklista testów integracyjnych</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Poprawny request z Bearer tokenem zwraca HTTP 200.</li>
|
||||||
|
<li>Brak <code>Authorization</code> zwraca HTTP 401.</li>
|
||||||
|
<li>Błędny token zwraca HTTP 401.</li>
|
||||||
|
<li>Brak pola <code>to</code>, tytułu (<code>subject/title/tytul</code>) lub treści (<code>message/body/content/tresc</code>) zwraca HTTP 400.</li>
|
||||||
|
<li>Niepoprawny e-mail odbiorcy zwraca HTTP 400.</li>
|
||||||
|
<li>Za długie <code>subject</code>/<code>message</code> zwracają HTTP 400.</li>
|
||||||
|
<li>Żądanie metodą GET zwraca HTTP 405.</li>
|
||||||
|
<li>Żądanie OPTIONS zwraca HTTP 204.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,223 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Manual API - send_sms_api.php</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #f4f7fb;
|
||||||
|
--card: #ffffff;
|
||||||
|
--text: #122033;
|
||||||
|
--muted: #4f6277;
|
||||||
|
--border: #d7e0ea;
|
||||||
|
--accent: #0b66c3;
|
||||||
|
--ok: #1f8b4c;
|
||||||
|
--err: #b02a37;
|
||||||
|
--code-bg: #0f1b2a;
|
||||||
|
--code-text: #e5f0ff;
|
||||||
|
}
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||||
|
line-height: 1.55;
|
||||||
|
}
|
||||||
|
.container { max-width: 1100px; margin: 0 auto; padding: 28px 16px 48px; }
|
||||||
|
.header {
|
||||||
|
background: linear-gradient(120deg, #d9ecff 0%, #f7fbff 60%, #ffffff 100%);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 20px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
h1, h2, h3 { margin: 0 0 10px; }
|
||||||
|
h1 { font-size: 1.7rem; }
|
||||||
|
h2 { font-size: 1.25rem; margin-top: 20px; }
|
||||||
|
h3 { font-size: 1.05rem; margin-top: 16px; }
|
||||||
|
.card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 18px;
|
||||||
|
margin-top: 14px;
|
||||||
|
}
|
||||||
|
.muted { color: var(--muted); }
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px 9px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 600;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: #fff;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.badge.post { border-color: #9ac6f2; color: #084f97; }
|
||||||
|
.badge.json { border-color: #98d7ad; color: #166838; }
|
||||||
|
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
||||||
|
th, td {
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
padding: 9px 7px;
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
th { background: #f7fafe; font-weight: 600; }
|
||||||
|
code {
|
||||||
|
background: #eef4fb;
|
||||||
|
border: 1px solid #dbe8f5;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 1px 6px;
|
||||||
|
font-family: Consolas, "Courier New", monospace;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
margin: 10px 0 0;
|
||||||
|
background: var(--code-bg);
|
||||||
|
color: var(--code-text);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 14px;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
.ok { color: var(--ok); font-weight: 600; }
|
||||||
|
.err { color: var(--err); font-weight: 600; }
|
||||||
|
ul { margin-top: 8px; }
|
||||||
|
li { margin-bottom: 6px; }
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
h1 { font-size: 1.35rem; }
|
||||||
|
th, td { font-size: 0.9rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<section class="header">
|
||||||
|
<h1>Manual programisty: send_sms_api.php</h1>
|
||||||
|
<p class="muted">Dokumentacja endpointu do dodawania wiadomości SMS do kolejki wysyłkowej (tabela outbox).</p>
|
||||||
|
<span class="badge post">POST</span>
|
||||||
|
<span class="badge json">application/json</span>
|
||||||
|
<span class="badge">Auth: api_key w body JSON</span>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>1. Endpoint</h2>
|
||||||
|
<table>
|
||||||
|
<tr><th>Adres</th><td><code>https://api.softspm.pl/send_sms_api.php</code></td></tr>
|
||||||
|
<tr><th>Metoda HTTP</th><td><code>POST</code></td></tr>
|
||||||
|
<tr><th>Content-Type</th><td><code>application/json</code></td></tr>
|
||||||
|
<tr><th>Kodowanie</th><td>UTF-8</td></tr>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>2. Autoryzacja</h2>
|
||||||
|
<p>Klucz API należy wysłać w polu <code>api_key</code> w treści JSON.</p>
|
||||||
|
<p class="muted">Uwaga: klucz musi znajdować się na liście <code>API_KEYS['send_sms_api.php']</code> po stronie serwera.</p>
|
||||||
|
<pre>{
|
||||||
|
"api_key": "TWÓJ_KLUCZ_API",
|
||||||
|
"to": "+48XXXYYYZZZ",
|
||||||
|
"message": "Treść SMS",
|
||||||
|
"creator": "CRM"
|
||||||
|
}</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>3. Parametry wejściowe</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr><th>Parametr</th><th>Typ</th><th>Wymagany</th><th>Opis</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td><code>api_key</code></td><td>string</td><td>tak</td><td>Klucz API.</td></tr>
|
||||||
|
<tr><td><code>to</code></td><td>string</td><td>tak</td><td>Numer odbiorcy. Dozwolone znaki: cyfry, <code>+</code>, spacje, myślniki, nawiasy. Max 30 znaków.</td></tr>
|
||||||
|
<tr><td><code>message</code></td><td>string</td><td>tak</td><td>Treść SMS. Max 1530 znaków.</td></tr>
|
||||||
|
<tr><td><code>creator</code></td><td>string</td><td>nie</td><td>Źródło wiadomości. Domyślnie <code>API</code>. Max 50 znaków.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>4. Przykład request (cURL)</h2>
|
||||||
|
<pre>curl -X POST "https://api.softspm.pl/send_sms_api.php" \
|
||||||
|
-H "Content-Type: application/json" \
|
||||||
|
-d '{
|
||||||
|
"api_key":"TWÓJ_KLUCZ_API",
|
||||||
|
"to":"+48XXXYYYZZZ",
|
||||||
|
"message":"Przypomnienie o wydarzeniu jutro o 10:00",
|
||||||
|
"creator":"HydroNexis"
|
||||||
|
}'</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>5. Przykład request (JavaScript / fetch)</h2>
|
||||||
|
<pre>const response = await fetch("https://api.softspm.pl/send_sms_api.php", {
|
||||||
|
method: "POST",
|
||||||
|
headers: { "Content-Type": "application/json" },
|
||||||
|
body: JSON.stringify({
|
||||||
|
api_key: "TWÓJ_KLUCZ_API",
|
||||||
|
to: "+48XXXYYYZZZ",
|
||||||
|
message: "Test API SMS",
|
||||||
|
creator: "Panel"
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
console.log(response.status, data);</pre>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>6. Odpowiedzi API</h2>
|
||||||
|
|
||||||
|
<h3 class="ok">6.1 Sukces (HTTP 200)</h3>
|
||||||
|
<pre>{
|
||||||
|
"status": "success",
|
||||||
|
"message": "SMS dodany do kolejki."
|
||||||
|
}</pre>
|
||||||
|
|
||||||
|
<h3 class="err">6.2 Błędy</h3>
|
||||||
|
<table>
|
||||||
|
<thead><tr><th>HTTP</th><th>Komunikat</th><th>Znaczenie</th></tr></thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td>400</td><td><code>Brak danych JSON w żądaniu.</code></td><td>Puste body.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Niepoprawny JSON.</code></td><td>Niepoprawna składnia JSON.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Brakuje pola 'to' lub 'message'.</code></td><td>Brak wymaganych pól.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Pole to ma nieprawidłowy format.</code></td><td>Nieprawidłowy numer telefonu.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Wiadomość jest zbyt długa.</code></td><td>Przekroczono limit długości <code>message</code>.</td></tr>
|
||||||
|
<tr><td>400</td><td><code>Pole creator jest zbyt długie.</code></td><td>Przekroczono limit długości <code>creator</code>.</td></tr>
|
||||||
|
<tr><td>401</td><td><code>Nieautoryzowany dostęp.</code></td><td>Błędny lub pusty klucz API.</td></tr>
|
||||||
|
<tr><td>405</td><td><code>Dozwolona jest tylko metoda POST.</code></td><td>Użyto innej metody HTTP.</td></tr>
|
||||||
|
<tr><td>500</td><td><code>Błąd połączenia z bazą danych.</code></td><td>Problem z połączeniem do DB.</td></tr>
|
||||||
|
<tr><td>500</td><td><code>Nie udało się dodać SMS-a.</code></td><td>Błąd przygotowania/wykonania zapytania SQL.</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>7. Dobre praktyki po stronie klienta</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Wysyłaj requesty wyłącznie przez HTTPS.</li>
|
||||||
|
<li>Maskuj <code>api_key</code> w logach aplikacyjnych.</li>
|
||||||
|
<li>Waliduj numer telefonu przed wysłaniem żądania.</li>
|
||||||
|
<li>Przy błędach HTTP 400 nie ponawiaj automatycznie bez korekty danych.</li>
|
||||||
|
<li>Przy błędach HTTP 500 wdroż retry z limitem i backoff.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="card">
|
||||||
|
<h2>8. Checklista testów integracyjnych</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Poprawny request zwraca HTTP 200 i status <code>success</code>.</li>
|
||||||
|
<li>Brak pola <code>to</code> lub <code>message</code> zwraca HTTP 400.</li>
|
||||||
|
<li>Niepoprawny numer <code>to</code> zwraca HTTP 400.</li>
|
||||||
|
<li>Za długi <code>message</code> zwraca HTTP 400.</li>
|
||||||
|
<li>Niepoprawny <code>api_key</code> zwraca HTTP 401.</li>
|
||||||
|
<li>Żądanie metodą GET zwraca HTTP 405.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
---
|
||||||
|
name: Hydro-Tech Intelligence
|
||||||
|
colors:
|
||||||
|
surface: '#101415'
|
||||||
|
surface-dim: '#101415'
|
||||||
|
surface-bright: '#363a3b'
|
||||||
|
surface-container-lowest: '#0b0f10'
|
||||||
|
surface-container-low: '#191c1e'
|
||||||
|
surface-container: '#1d2022'
|
||||||
|
surface-container-high: '#272a2c'
|
||||||
|
surface-container-highest: '#323537'
|
||||||
|
on-surface: '#e0e3e5'
|
||||||
|
on-surface-variant: '#c2c6d6'
|
||||||
|
inverse-surface: '#e0e3e5'
|
||||||
|
inverse-on-surface: '#2d3133'
|
||||||
|
outline: '#8c909f'
|
||||||
|
outline-variant: '#424654'
|
||||||
|
surface-tint: '#b1c5ff'
|
||||||
|
primary: '#b1c5ff'
|
||||||
|
on-primary: '#002c70'
|
||||||
|
primary-container: '#0057cd'
|
||||||
|
on-primary-container: '#cbd8ff'
|
||||||
|
inverse-primary: '#0057cd'
|
||||||
|
secondary: '#4fdbc8'
|
||||||
|
on-secondary: '#003731'
|
||||||
|
secondary-container: '#04b4a2'
|
||||||
|
on-secondary-container: '#003f38'
|
||||||
|
tertiary: '#bec6e0'
|
||||||
|
on-tertiary: '#283044'
|
||||||
|
tertiary-container: '#565e74'
|
||||||
|
on-tertiary-container: '#d0d8f2'
|
||||||
|
error: '#ffb4ab'
|
||||||
|
on-error: '#690005'
|
||||||
|
error-container: '#93000a'
|
||||||
|
on-error-container: '#ffdad6'
|
||||||
|
primary-fixed: '#d9e2ff'
|
||||||
|
primary-fixed-dim: '#b1c5ff'
|
||||||
|
on-primary-fixed: '#001946'
|
||||||
|
on-primary-fixed-variant: '#00419d'
|
||||||
|
secondary-fixed: '#71f8e4'
|
||||||
|
secondary-fixed-dim: '#4fdbc8'
|
||||||
|
on-secondary-fixed: '#00201c'
|
||||||
|
on-secondary-fixed-variant: '#005048'
|
||||||
|
tertiary-fixed: '#dae2fd'
|
||||||
|
tertiary-fixed-dim: '#bec6e0'
|
||||||
|
on-tertiary-fixed: '#131b2e'
|
||||||
|
on-tertiary-fixed-variant: '#3f465c'
|
||||||
|
background: '#101415'
|
||||||
|
on-background: '#e0e3e5'
|
||||||
|
surface-variant: '#323537'
|
||||||
|
deep-ocean: '#0B1E3B'
|
||||||
|
electric-teal: '#2DD4BF'
|
||||||
|
warning-red: '#B91830'
|
||||||
|
surface-dark: '#020617'
|
||||||
|
typography:
|
||||||
|
display-lg:
|
||||||
|
fontFamily: Space Grotesk
|
||||||
|
fontSize: 48px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: '1.1'
|
||||||
|
letterSpacing: -0.02em
|
||||||
|
display-lg-mobile:
|
||||||
|
fontFamily: Space Grotesk
|
||||||
|
fontSize: 36px
|
||||||
|
fontWeight: '700'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
headline-lg:
|
||||||
|
fontFamily: Space Grotesk
|
||||||
|
fontSize: 32px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
headline-md:
|
||||||
|
fontFamily: Space Grotesk
|
||||||
|
fontSize: 24px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.3'
|
||||||
|
body-lg:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 18px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.6'
|
||||||
|
body-md:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 16px
|
||||||
|
fontWeight: '400'
|
||||||
|
lineHeight: '1.5'
|
||||||
|
label-sm:
|
||||||
|
fontFamily: Hanken Grotesk
|
||||||
|
fontSize: 12px
|
||||||
|
fontWeight: '600'
|
||||||
|
lineHeight: '1.2'
|
||||||
|
letterSpacing: 0.05em
|
||||||
|
rounded:
|
||||||
|
sm: 0.25rem
|
||||||
|
DEFAULT: 0.5rem
|
||||||
|
md: 0.75rem
|
||||||
|
lg: 1rem
|
||||||
|
xl: 1.5rem
|
||||||
|
full: 9999px
|
||||||
|
spacing:
|
||||||
|
unit: 8px
|
||||||
|
container-max: 1280px
|
||||||
|
gutter: 24px
|
||||||
|
margin-mobile: 16px
|
||||||
|
margin-desktop: 40px
|
||||||
|
stack-sm: 12px
|
||||||
|
stack-md: 24px
|
||||||
|
stack-lg: 48px
|
||||||
|
---
|
||||||
|
|
||||||
|
## Brand & Style
|
||||||
|
|
||||||
|
The visual identity of the design system is rooted in the "Hydro-Tech" aesthetic—a sophisticated blend of deep-sea professionality and high-tech innovation. It is designed to serve as an authoritative portal for the municipal water industry, balancing the reliability of institutional knowledge with the forward-thinking nature of modern consulting.
|
||||||
|
|
||||||
|
The design style is **Corporate Modern with Experimental Accents**. It utilizes a dark, data-centric interface that mimics a high-end control center or command dashboard. By moving away from standard light-mode "document" styles, the design system positions the platform as a high-value intelligence tool. The emotional response should be one of "Trusted Innovation"—feeling as established as a 2014 industry leader while appearing technologically superior to legacy competitors. Expect structured layouts, precision-engineered components, and a focus on content hierarchy that makes dense technical information (webinars, courses, consulting reports) easy to digest.
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
|
||||||
|
The palette is anchored by **#0057CD**, a deep, vibrant blue that signals trust and industry authority. This is complemented by **Electric Teal**, used sparingly as an "Experimental" accent to represent flow, clean water, and digital innovation.
|
||||||
|
|
||||||
|
- **Primary Blue:** Used for key actions, brand moments, and critical navigation.
|
||||||
|
- **Electric Teal:** Reserved for innovation highlights, active states, and "Live" indicators for webinars.
|
||||||
|
- **Neutrals:** The background is a sophisticated `surface-dark` (#020617) to provide a high-contrast environment for white text and blue components.
|
||||||
|
- **Success/Warning:** Red is strictly reserved for urgent municipal alerts or critical data errors, ensuring its impact is never diluted.
|
||||||
|
|
||||||
|
## Typography
|
||||||
|
|
||||||
|
This design system employs a dual-sans-serif approach to distinguish between "Technical Data" and "Human Knowledge."
|
||||||
|
|
||||||
|
**Space Grotesk** is used for all headlines and display elements. Its geometric, slightly eccentric letterforms evoke a sense of future-proofing and engineering precision. It is the voice of the platform's technological edge.
|
||||||
|
|
||||||
|
**Hanken Grotesk** serves as the workhorse for body copy and data labels. It offers exceptional legibility in dark mode and maintains a professional, neutral tone that doesn't fatigue the eye during long-form reading of consulting reports or course materials.
|
||||||
|
|
||||||
|
- **Scale:** Large display sizes use tight tracking to maintain a "journalistic" authority.
|
||||||
|
- **Hierarchy:** Use labels in uppercase with generous tracking to categorize content types (e.g., WEBINAR, ARTICLE, CONSULTING).
|
||||||
|
|
||||||
|
## Layout & Spacing
|
||||||
|
|
||||||
|
The layout philosophy follows a **Structured Fluid Grid**. It is designed to handle high-density information without feeling cluttered.
|
||||||
|
|
||||||
|
- **Grid System:** A 12-column grid for desktop with 24px gutters. Elements should align strictly to this grid to reinforce the "engineered" feel of the platform.
|
||||||
|
- **Vertical Rhythm:** Spacing is strictly based on 8px increments. Use `stack-lg` for section breaks and `stack-sm` for related content within cards.
|
||||||
|
- **Content Density:** In data-rich views (like industry portals), use the 8px unit to create tight, information-dense components. In educational/marketing views (webinar landing pages), increase padding to 1.5x the standard unit to create "breathing room."
|
||||||
|
|
||||||
|
## Elevation & Depth
|
||||||
|
|
||||||
|
This design system avoids traditional heavy drop shadows, opting instead for **Tonal Layering and Inner Glows** to create depth within a dark environment.
|
||||||
|
|
||||||
|
1. **Base Layer:** The deepest background (#020617).
|
||||||
|
2. **Surface Layer:** Cards and containers use #0F172A. These are differentiated from the base by a subtle 1px stroke (opacity 10%) using the Primary Blue.
|
||||||
|
3. **Active Elevation:** When an element is hovered or focused, it does not "rise" with a shadow. Instead, it gains a subtle teal inner-glow or an increased stroke opacity.
|
||||||
|
4. **Glassmorphism:** Use backdrop-blur (12px) for sticky navigation bars and floating action menus to maintain a sense of context and "fluidity."
|
||||||
|
|
||||||
|
## Shapes
|
||||||
|
|
||||||
|
The shape language is **Technical and Balanced**. Using a `roundedness` level of **2** (0.5rem base) provides enough softness to feel modern and accessible, without appearing "consumer-grade" or overly casual.
|
||||||
|
|
||||||
|
- **Standard Radius:** 8px for buttons and input fields.
|
||||||
|
- **Container Radius:** 16px (rounded-lg) for cards and modular blocks.
|
||||||
|
- **Accent Shapes:** Use 45-degree clipped corners on decorative elements or specific "Experimental" UI callouts to mimic architectural or hydrodynamic blueprints.
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
- **Buttons:** Primary buttons use a solid #0057CD fill with white text. Secondary buttons are "Ghost" style with a teal border. Buttons should feel tactile and solid.
|
||||||
|
- **Cards:** Industry news and course cards use the surface-layer color with a top-accent border in Teal or Blue depending on the category. Use high-contrast headings within cards.
|
||||||
|
- **Input Fields:** Dark-themed inputs with 1px borders. On focus, the border transitions to Primary Blue with a subtle outer glow (glow color: primary color at 20% opacity).
|
||||||
|
- **Chips/Badges:** Small, high-contrast badges for "New," "Live," or "Pro." Use #14B8A6 for educational status and #0057CD for consulting-related tags.
|
||||||
|
- **Lists:** Use "Zebra" striping with very subtle color shifts for data-heavy portals to maintain line-tracking legibility.
|
||||||
|
- **Progress Indicators:** For courses and webinars, use a "thin-line" progress bar in Electric Teal, contrasting sharply against the dark background.
|
||||||
@@ -0,0 +1,331 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="dark" lang="pl"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>SoftSPM Consulting - Municipal Water Solutions</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Hanken+Grotesk:wght@400;600&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-secondary-fixed-variant": "#005048",
|
||||||
|
"background": "#101415",
|
||||||
|
"deep-ocean": "#0B1E3B",
|
||||||
|
"surface-tint": "#b1c5ff",
|
||||||
|
"tertiary-container": "#565e74",
|
||||||
|
"on-error-container": "#ffdad6",
|
||||||
|
"warning-red": "#B91830",
|
||||||
|
"primary-fixed": "#d9e2ff",
|
||||||
|
"secondary": "#4fdbc8",
|
||||||
|
"on-primary-fixed": "#001946",
|
||||||
|
"surface": "#101415",
|
||||||
|
"surface-container-lowest": "#0b0f10",
|
||||||
|
"tertiary-fixed": "#dae2fd",
|
||||||
|
"on-background": "#e0e3e5",
|
||||||
|
"on-error": "#690005",
|
||||||
|
"surface-container-low": "#191c1e",
|
||||||
|
"inverse-primary": "#0057cd",
|
||||||
|
"on-primary-fixed-variant": "#00419d",
|
||||||
|
"surface-dim": "#101415",
|
||||||
|
"tertiary-fixed-dim": "#bec6e0",
|
||||||
|
"on-primary-container": "#cbd8ff",
|
||||||
|
"surface-container": "#1d2022",
|
||||||
|
"error": "#ffb4ab",
|
||||||
|
"on-tertiary-fixed": "#131b2e",
|
||||||
|
"on-secondary-container": "#003f38",
|
||||||
|
"outline-variant": "#424654",
|
||||||
|
"on-primary": "#002c70",
|
||||||
|
"electric-teal": "#2DD4BF",
|
||||||
|
"secondary-container": "#04b4a2",
|
||||||
|
"tertiary": "#bec6e0",
|
||||||
|
"surface-container-high": "#272a2c",
|
||||||
|
"secondary-fixed-dim": "#4fdbc8",
|
||||||
|
"inverse-surface": "#e0e3e5",
|
||||||
|
"surface-bright": "#363a3b",
|
||||||
|
"surface-container-highest": "#323537",
|
||||||
|
"outline": "#8c909f",
|
||||||
|
"surface-variant": "#323537",
|
||||||
|
"error-container": "#93000a",
|
||||||
|
"on-tertiary": "#283044",
|
||||||
|
"surface-dark": "#020617",
|
||||||
|
"primary": "#b1c5ff",
|
||||||
|
"on-secondary": "#003731",
|
||||||
|
"on-secondary-fixed": "#00201c",
|
||||||
|
"primary-container": "#0057cd",
|
||||||
|
"primary-fixed-dim": "#b1c5ff",
|
||||||
|
"on-surface-variant": "#c2c6d6",
|
||||||
|
"secondary-fixed": "#71f8e4",
|
||||||
|
"inverse-on-surface": "#2d3133",
|
||||||
|
"on-surface": "#e0e3e5",
|
||||||
|
"on-tertiary-container": "#d0d8f2",
|
||||||
|
"on-tertiary-fixed-variant": "#3f465c"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.25rem",
|
||||||
|
"lg": "0.5rem",
|
||||||
|
"xl": "0.75rem",
|
||||||
|
"full": "9999px"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-max": "1280px",
|
||||||
|
"stack-md": "24px",
|
||||||
|
"gutter": "24px",
|
||||||
|
"stack-sm": "12px",
|
||||||
|
"margin-desktop": "40px",
|
||||||
|
"stack-lg": "48px",
|
||||||
|
"margin-mobile": "16px",
|
||||||
|
"unit": "8px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg-mobile": ["Space Grotesk"],
|
||||||
|
"label-sm": ["Hanken Grotesk"],
|
||||||
|
"body-lg": ["Hanken Grotesk"],
|
||||||
|
"headline-md": ["Space Grotesk"],
|
||||||
|
"headline-lg": ["Space Grotesk"],
|
||||||
|
"display-lg": ["Space Grotesk"],
|
||||||
|
"body-md": ["Hanken Grotesk"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"display-lg-mobile": ["36px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
||||||
|
"label-sm": ["12px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600" }],
|
||||||
|
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||||
|
"headline-md": ["24px", { "lineHeight": "1.3", "fontWeight": "600" }],
|
||||||
|
"headline-lg": ["32px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
||||||
|
"display-lg": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
||||||
|
"body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.glass-panel {
|
||||||
|
background: rgba(15, 23, 42, 0.6);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
border: 1px solid rgba(177, 197, 255, 0.1);
|
||||||
|
}
|
||||||
|
.glow-hover:hover {
|
||||||
|
box-shadow: inset 0 0 20px rgba(45, 212, 191, 0.1);
|
||||||
|
border-color: rgba(45, 212, 191, 0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-dark text-on-surface font-body-md antialiased min-h-screen flex flex-col">
|
||||||
|
<!-- TopNavBar (Consulting) -->
|
||||||
|
<nav class="bg-background/80 backdrop-blur-xl fixed top-0 w-full z-50 border-b border-outline-variant/10">
|
||||||
|
<div class="flex justify-between items-center h-20 px-margin-desktop max-w-container-max mx-auto">
|
||||||
|
<div class="font-display-lg text-display-lg text-primary tracking-tight">SoftSPM</div>
|
||||||
|
<div class="hidden md:flex items-center gap-gutter">
|
||||||
|
<a class="text-electric-teal font-bold border-b-2 border-electric-teal pb-1 cursor-pointer active:scale-95 font-body-md text-body-md" href="#">Consulting</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95 font-body-md text-body-md" href="#">Training</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95 font-body-md text-body-md" href="#">Webinars</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95 font-body-md text-body-md" href="#">E-learning</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-stack-sm">
|
||||||
|
<button class="font-body-md text-body-md px-4 py-2 text-primary border border-primary/30 rounded-DEFAULT hover:border-electric-teal transition-colors duration-200">Contact Us</button>
|
||||||
|
<button class="font-body-md text-body-md px-4 py-2 bg-primary-container text-white rounded-DEFAULT hover:bg-primary-container/90 transition-colors duration-200">Sign In</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="flex-grow pt-[100px] px-margin-desktop max-w-container-max mx-auto w-full flex flex-col gap-stack-lg pb-stack-lg">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="glass-panel rounded-xl p-stack-lg flex flex-col md:flex-row gap-gutter items-center relative overflow-hidden">
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-br from-deep-ocean/50 to-transparent z-0"></div>
|
||||||
|
<div class="flex-1 z-10 flex flex-col gap-stack-sm">
|
||||||
|
<span class="font-label-sm text-label-sm text-electric-teal uppercase tracking-widest border border-electric-teal/30 px-3 py-1 rounded-full w-max">Hydro-Tech Advisory</span>
|
||||||
|
<h1 class="font-display-lg text-display-lg text-primary">Intelligent Water Infrastructure Consulting</h1>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">
|
||||||
|
Empowering municipal water utilities since 2014. We combine deep institutional knowledge with advanced data analytics to optimize operations, ensure compliance, and drive sustainable growth in the water sector.
|
||||||
|
</p>
|
||||||
|
<div class="flex gap-stack-sm mt-4">
|
||||||
|
<button class="bg-primary-container text-white font-label-sm text-label-sm px-6 py-3 rounded-DEFAULT hover:bg-primary-container/90 transition-colors">Umów Konsultację</button>
|
||||||
|
<button class="border border-electric-teal text-electric-teal font-label-sm text-label-sm px-6 py-3 rounded-DEFAULT hover:bg-electric-teal/10 transition-colors flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">download</span>
|
||||||
|
Pobierz Portfolio
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 z-10 w-full h-[400px] relative rounded-lg overflow-hidden border border-outline-variant/20">
|
||||||
|
<img class="absolute inset-0 w-full h-full object-cover mix-blend-luminosity opacity-80" data-alt="A highly detailed, cinematic shot of a modern, high-tech water treatment facility control room. The scene is illuminated by glowing blue and teal digital interfaces displaying complex fluid dynamics data. The aesthetic is corporate modern 'Hydro-Tech', emphasizing precision, innovation, and established professionality. Deep navy backgrounds contrast with sharp electric-teal highlights. Professional lighting, 4k resolution." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAe5eYXceQ6Ywul2pFsCanVFxhO0iSmdVj5HCitoZcTMpQR7OWelw67q7ranf50w0j7E4GFq58Wxyng7AVRcyCAxh0B8TeGq-8kERx7HtH4oTjHqtG_Nr-kVLN90Wqr70fYFMr6jm4pd82mj6-AwqCZA0qL7wPSGExFj4rJfmU_7tCamwrH5w3ovVy1t1O0UYYHzq7hFy8oOr2DVsLm_Td9Z1uxGQwUxn7KYq4OokPule2KddkfAn_GVw"/>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-surface-dark via-transparent to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Services Bento Grid -->
|
||||||
|
<section class="flex flex-col gap-stack-md">
|
||||||
|
<div class="flex items-center gap-3 border-b border-outline-variant/20 pb-2">
|
||||||
|
<span class="material-symbols-outlined text-electric-teal">water_drop</span>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">Obszary Doradztwa</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Service 1 -->
|
||||||
|
<div class="glass-panel rounded-lg p-stack-md glow-hover transition-all duration-300 flex flex-col gap-4 border-t-2 border-t-electric-teal">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<span class="material-symbols-outlined text-4xl text-primary" style="font-variation-settings: 'FILL' 1;">analytics</span>
|
||||||
|
<span class="font-label-sm text-label-sm bg-surface-container text-on-surface-variant px-2 py-1 rounded">Data-Driven</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface">Audyty Operacyjne</h3>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">Kompleksowa analiza wydajności sieci wodociągowych z wykorzystaniem zaawansowanej telemetrii i modelowania hydraulicznego.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Service 2 -->
|
||||||
|
<div class="glass-panel rounded-lg p-stack-md glow-hover transition-all duration-300 flex flex-col gap-4 border-t-2 border-t-primary-container">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<span class="material-symbols-outlined text-4xl text-primary" style="font-variation-settings: 'FILL' 1;">gavel</span>
|
||||||
|
<span class="font-label-sm text-label-sm bg-surface-container text-on-surface-variant px-2 py-1 rounded">Compliance</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface">Zgodność Regulacyjna</h3>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">Doradztwo prawne i techniczne w zakresie nowych dyrektyw unijnych dotyczących jakości wody i odprowadzania ścieków.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Service 3 -->
|
||||||
|
<div class="glass-panel rounded-lg p-stack-md glow-hover transition-all duration-300 flex flex-col gap-4 border-t-2 border-t-secondary-container">
|
||||||
|
<div class="flex justify-between items-start">
|
||||||
|
<span class="material-symbols-outlined text-4xl text-primary" style="font-variation-settings: 'FILL' 1;">eco</span>
|
||||||
|
<span class="font-label-sm text-label-sm bg-surface-container text-on-surface-variant px-2 py-1 rounded">Sustainability</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface">Strategie Zrównoważone</h3>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">Opracowywanie wieloletnich planów inwestycyjnych redukujących ślad węglowy i optymalizujących zużycie energii w procesach uzdatniania.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Experts Section -->
|
||||||
|
<section class="flex flex-col gap-stack-md">
|
||||||
|
<div class="flex items-center gap-3 border-b border-outline-variant/20 pb-2">
|
||||||
|
<span class="material-symbols-outlined text-electric-teal">group</span>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">Nasi Eksperci</h2>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-gutter">
|
||||||
|
<!-- Expert 1 -->
|
||||||
|
<div class="glass-panel rounded-lg overflow-hidden group">
|
||||||
|
<div class="h-48 w-full relative overflow-hidden bg-surface-container">
|
||||||
|
<img class="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105 filter grayscale hover:grayscale-0" data-alt="Professional corporate headshot of a female principal engineer in her 40s. She is wearing a dark navy blazer over a crisp white shirt. The background is a subtly blurred modern high-tech control room with faint teal and blue glows. Lighting is dramatic yet professional, emphasizing intelligence and authority. 'Hydro-Tech' aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB0WtfI5ylno7e8XaIV-BgoJNapHUbH9NxKXSXGnKJbdOSScTi1e936jmQnINXNdSo2W89AF3SXzLPatNInmTXvA9LIK7T9KXPA8CLx6YssKZA-h8py4z5Rw6cpnLjiLGdnsPOwpzj3lccO9hnHtuE26b106hPyNeT4QgZaHt6kzmnYxJ33uP1X_RNZmeAASksFw4IUDitfheYYtRmMvj3wh47Pnk8lxLf42Tyy2gWqL0iy2qReBchH5A"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-sm flex flex-col gap-2">
|
||||||
|
<h4 class="font-headline-md text-headline-md text-primary">Dr inż. Anna Kowalska</h4>
|
||||||
|
<span class="font-label-sm text-label-sm text-electric-teal">Główny Inżynier Procesu</span>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant text-sm mt-2">15 lat doświadczenia w optymalizacji stacji uzdatniania wody. Autorka licznych publikacji branżowych.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Expert 2 -->
|
||||||
|
<div class="glass-panel rounded-lg overflow-hidden group">
|
||||||
|
<div class="h-48 w-full relative overflow-hidden bg-surface-container">
|
||||||
|
<img class="w-full h-full object-cover object-top transition-transform duration-500 group-hover:scale-105 filter grayscale hover:grayscale-0" data-alt="Professional corporate headshot of a male data scientist in his 30s. He has short hair and wears modern smart-casual attire in dark tones. The background features abstract, subtle digital data visualizations in deep blue and electric teal. The lighting is cinematic, projecting a sense of innovation and precision. 'Hydro-Tech' aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBh5RFO9VT0ums-HNz9E3SMJmcHSfTRF1qgI_f0Uj31LtQ5kmsldh4cIzXP7Wjstso6yu9Z2WcecCTk_YIMnmNYClcSnVYJwAkB-CVucDLCXQMGc83fxSU8D5igyH6WirBlPrYU5p-YgS3Dsr9cL7NNwZbFhPbumQSRxfNrYRBthu4htYocY0U0IJkEt9iMeSk7fJKx9PQXSuXdfxcLq0dVQVR2MrbImPfARZYcVmuwxkaGzDoqhmSHGA"/>
|
||||||
|
</div>
|
||||||
|
<div class="p-stack-sm flex flex-col gap-2">
|
||||||
|
<h4 class="font-headline-md text-headline-md text-primary">Michał Nowak</h4>
|
||||||
|
<span class="font-label-sm text-label-sm text-electric-teal">Dyrektor ds. Analizy Danych</span>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant text-sm mt-2">Ekspert w zakresie machine learningu stosowanego w detekcji wycieków i predykcji awarii sieci.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Case Studies (List View) -->
|
||||||
|
<section class="flex flex-col gap-stack-md">
|
||||||
|
<div class="flex items-center gap-3 border-b border-outline-variant/20 pb-2">
|
||||||
|
<span class="material-symbols-outlined text-electric-teal">history_edu</span>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">Wybrane Realizacje (od 2014)</h2>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<!-- Row 1 -->
|
||||||
|
<div class="flex items-center justify-between p-stack-sm bg-surface-container-low hover:bg-surface-container transition-colors border-l-4 border-electric-teal rounded-r">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="font-headline-md text-headline-md text-primary">Wodociągi Metropolitalne</span>
|
||||||
|
<span class="font-body-md text-body-md text-on-surface-variant">Modernizacja systemu SCADA dla ujęcia powierzchniowego</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="font-label-sm text-label-sm text-outline px-2 py-1 bg-surface-dark rounded">2023</span>
|
||||||
|
<span class="material-symbols-outlined text-outline hover:text-electric-teal cursor-pointer">arrow_forward</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Row 2 -->
|
||||||
|
<div class="flex items-center justify-between p-stack-sm bg-surface-container-lowest hover:bg-surface-container transition-colors border-l-4 border-primary-container rounded-r">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="font-headline-md text-headline-md text-primary">ZWiK Północ</span>
|
||||||
|
<span class="font-body-md text-body-md text-on-surface-variant">Audyt energetyczny procesów napowietrzania osadu czynnego</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="font-label-sm text-label-sm text-outline px-2 py-1 bg-surface-dark rounded">2021</span>
|
||||||
|
<span class="material-symbols-outlined text-outline hover:text-electric-teal cursor-pointer">arrow_forward</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Row 3 -->
|
||||||
|
<div class="flex items-center justify-between p-stack-sm bg-surface-container-low hover:bg-surface-container transition-colors border-l-4 border-outline rounded-r">
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<span class="font-headline-md text-headline-md text-primary">Regionalny Zakład Gospodarki Wodnej</span>
|
||||||
|
<span class="font-body-md text-body-md text-on-surface-variant">Wdrożenie strategii zarządzania ryzykiem zgodnie z normą ISO 31000</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<span class="font-label-sm text-label-sm text-outline px-2 py-1 bg-surface-dark rounded">2018</span>
|
||||||
|
<span class="material-symbols-outlined text-outline hover:text-electric-teal cursor-pointer">arrow_forward</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Contact Form -->
|
||||||
|
<section class="glass-panel rounded-xl p-stack-lg border border-outline-variant/30 flex flex-col md:flex-row gap-stack-lg">
|
||||||
|
<div class="flex-1 flex flex-col gap-4">
|
||||||
|
<h2 class="font-display-lg text-display-lg text-primary">Umów bezpłatną konsultację</h2>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant">Porozmawiajmy o wyzwaniach Twojego przedsiębiorstwa wodociągowego. Nasi inżynierowie są gotowi przeprowadzić wstępną analizę.</p>
|
||||||
|
<div class="mt-8 flex flex-col gap-4">
|
||||||
|
<div class="flex items-center gap-3 text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-electric-teal">mail</span>
|
||||||
|
<span class="font-body-md">consulting@softspm.com</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-3 text-on-surface-variant">
|
||||||
|
<span class="material-symbols-outlined text-electric-teal">phone</span>
|
||||||
|
<span class="font-body-md">+48 22 123 45 67</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1">
|
||||||
|
<form class="flex flex-col gap-stack-sm bg-surface-dark p-stack-md rounded-lg border border-outline-variant/20">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<label class="font-label-sm text-label-sm text-on-surface-variant">Imię i Nazwisko</label>
|
||||||
|
<input class="bg-surface-container border border-outline-variant/50 rounded p-2 text-on-surface focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all font-body-md" placeholder="Jan Kowalski" type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<label class="font-label-sm text-label-sm text-on-surface-variant">Firma / Instytucja</label>
|
||||||
|
<input class="bg-surface-container border border-outline-variant/50 rounded p-2 text-on-surface focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all font-body-md" placeholder="ZWiK Sp. z o.o." type="text"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<label class="font-label-sm text-label-sm text-on-surface-variant">Służbowy Email</label>
|
||||||
|
<input class="bg-surface-container border border-outline-variant/50 rounded p-2 text-on-surface focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all font-body-md" placeholder="jan.kowalski@zwik.pl" type="email"/>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<label class="font-label-sm text-label-sm text-on-surface-variant">Temat konsultacji</label>
|
||||||
|
<select class="bg-surface-container border border-outline-variant/50 rounded p-2 text-on-surface focus:border-primary focus:ring-1 focus:ring-primary/20 transition-all font-body-md">
|
||||||
|
<option>Audyt operacyjny</option>
|
||||||
|
<option>Cyfryzacja i SCADA</option>
|
||||||
|
<option>Zarządzanie stratami wody</option>
|
||||||
|
<option>Inne</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button class="mt-4 bg-primary-container text-white font-label-sm text-label-sm px-4 py-3 rounded-DEFAULT hover:bg-primary-container/90 transition-colors w-full" type="button">Wyślij Zapytanie</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-surface-container-low w-full py-stack-lg border-t border-outline-variant/20 mt-auto">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter px-margin-desktop max-w-container-max mx-auto">
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<span class="font-headline-md text-headline-md text-on-surface">SoftSPM</span>
|
||||||
|
<span class="font-body-md text-body-md text-on-surface-variant">© 2024 SoftSPM. Established 2014. Professional Water Solutions.</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col gap-2 md:col-span-3 items-end justify-end flex-wrap">
|
||||||
|
<div class="flex gap-gutter">
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Terms of Service</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Cookie Policy</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Accessibility</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body></html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 470 KiB |
@@ -0,0 +1,332 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="dark" lang="pl"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Dashboard - SoftSPM</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
"on-secondary-fixed-variant": "#005048",
|
||||||
|
"background": "#101415",
|
||||||
|
"deep-ocean": "#0B1E3B",
|
||||||
|
"surface-tint": "#b1c5ff",
|
||||||
|
"tertiary-container": "#565e74",
|
||||||
|
"on-error-container": "#ffdad6",
|
||||||
|
"warning-red": "#B91830",
|
||||||
|
"primary-fixed": "#d9e2ff",
|
||||||
|
"secondary": "#4fdbc8",
|
||||||
|
"on-primary-fixed": "#001946",
|
||||||
|
"surface": "#101415",
|
||||||
|
"surface-container-lowest": "#0b0f10",
|
||||||
|
"tertiary-fixed": "#dae2fd",
|
||||||
|
"on-background": "#e0e3e5",
|
||||||
|
"on-error": "#690005",
|
||||||
|
"surface-container-low": "#191c1e",
|
||||||
|
"inverse-primary": "#0057cd",
|
||||||
|
"on-primary-fixed-variant": "#00419d",
|
||||||
|
"surface-dim": "#101415",
|
||||||
|
"tertiary-fixed-dim": "#bec6e0",
|
||||||
|
"on-primary-container": "#cbd8ff",
|
||||||
|
"surface-container": "#1d2022",
|
||||||
|
"error": "#ffb4ab",
|
||||||
|
"on-tertiary-fixed": "#131b2e",
|
||||||
|
"on-secondary-container": "#003f38",
|
||||||
|
"outline-variant": "#424654",
|
||||||
|
"on-primary": "#002c70",
|
||||||
|
"electric-teal": "#2DD4BF",
|
||||||
|
"secondary-container": "#04b4a2",
|
||||||
|
"tertiary": "#bec6e0",
|
||||||
|
"surface-container-high": "#272a2c",
|
||||||
|
"secondary-fixed-dim": "#4fdbc8",
|
||||||
|
"inverse-surface": "#e0e3e5",
|
||||||
|
"surface-bright": "#363a3b",
|
||||||
|
"surface-container-highest": "#323537",
|
||||||
|
"outline": "#8c909f",
|
||||||
|
"surface-variant": "#323537",
|
||||||
|
"error-container": "#93000a",
|
||||||
|
"on-tertiary": "#283044",
|
||||||
|
"surface-dark": "#020617",
|
||||||
|
"primary": "#b1c5ff",
|
||||||
|
"on-secondary": "#003731",
|
||||||
|
"on-secondary-fixed": "#00201c",
|
||||||
|
"primary-container": "#0057cd",
|
||||||
|
"primary-fixed-dim": "#b1c5ff",
|
||||||
|
"on-surface-variant": "#c2c6d6",
|
||||||
|
"secondary-fixed": "#71f8e4",
|
||||||
|
"inverse-on-surface": "#2d3133",
|
||||||
|
"on-surface": "#e0e3e5",
|
||||||
|
"on-tertiary-container": "#d0d8f2",
|
||||||
|
"on-tertiary-fixed-variant": "#3f465c"
|
||||||
|
},
|
||||||
|
borderRadius: {
|
||||||
|
DEFAULT: "0.25rem",
|
||||||
|
lg: "0.5rem",
|
||||||
|
xl: "0.75rem",
|
||||||
|
full: "9999px"
|
||||||
|
},
|
||||||
|
spacing: {
|
||||||
|
"container-max": "1280px",
|
||||||
|
"stack-md": "24px",
|
||||||
|
"gutter": "24px",
|
||||||
|
"stack-sm": "12px",
|
||||||
|
"margin-desktop": "40px",
|
||||||
|
"stack-lg": "48px",
|
||||||
|
"margin-mobile": "16px",
|
||||||
|
"unit": "8px"
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
"display-lg-mobile": ["Space Grotesk"],
|
||||||
|
"label-sm": ["Hanken Grotesk"],
|
||||||
|
"body-lg": ["Hanken Grotesk"],
|
||||||
|
"headline-md": ["Space Grotesk"],
|
||||||
|
"headline-lg": ["Space Grotesk"],
|
||||||
|
"display-lg": ["Space Grotesk"],
|
||||||
|
"body-md": ["Hanken Grotesk"]
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
"display-lg-mobile": ["36px", { lineHeight: "1.2", fontWeight: "700" }],
|
||||||
|
"label-sm": ["12px", { lineHeight: "1.2", letterSpacing: "0.05em", fontWeight: "600" }],
|
||||||
|
"body-lg": ["18px", { lineHeight: "1.6", fontWeight: "400" }],
|
||||||
|
"headline-md": ["24px", { lineHeight: "1.3", fontWeight: "600" }],
|
||||||
|
"headline-lg": ["32px", { lineHeight: "1.2", fontWeight: "600" }],
|
||||||
|
"display-lg": ["48px", { lineHeight: "1.1", letterSpacing: "-0.02em", fontWeight: "700" }],
|
||||||
|
"body-md": ["16px", { lineHeight: "1.5", fontWeight: "400" }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
.glass-card {
|
||||||
|
background: rgba(15, 23, 42, 0.7);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
border-top: 1px solid rgba(45, 212, 191, 0.3);
|
||||||
|
border-bottom: 1px solid rgba(0, 87, 205, 0.1);
|
||||||
|
border-left: 1px solid rgba(0, 87, 205, 0.1);
|
||||||
|
border-right: 1px solid rgba(0, 87, 205, 0.1);
|
||||||
|
}
|
||||||
|
.progress-thin {
|
||||||
|
height: 2px;
|
||||||
|
background-color: rgba(45, 212, 191, 0.2);
|
||||||
|
}
|
||||||
|
.progress-thin-fill {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #2DD4BF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-dark text-on-surface font-body-md min-h-screen flex">
|
||||||
|
<!-- SideNavBar -->
|
||||||
|
<nav class="hidden lg:flex flex-col py-6 bg-surface-container-lowest h-screen w-64 fixed left-0 top-0 border-r border-outline-variant/10 shadow-sm z-40">
|
||||||
|
<div class="px-6 mb-8 flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center shrink-0">
|
||||||
|
<span class="material-symbols-outlined text-on-primary" data-icon="water_drop">water_drop</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 class="font-label-sm text-label-sm text-primary uppercase tracking-widest">SoftSPM Portal</h1>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant font-normal opacity-70">Municipal Water Solutions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 px-4 space-y-2">
|
||||||
|
<a class="bg-secondary-container text-on-secondary-container rounded-lg px-4 py-2 flex items-center gap-3 transition-transform duration-200" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||||
|
<span class="font-label-sm text-label-sm">Dashboard</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer active:scale-95" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="groups">groups</span>
|
||||||
|
<span class="font-label-sm text-label-sm">Expert Network</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer active:scale-95" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="library_books">library_books</span>
|
||||||
|
<span class="font-label-sm text-label-sm">Course Library</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer active:scale-95" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="live_tv">live_tv</span>
|
||||||
|
<span class="font-label-sm text-label-sm">Live Webinars</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer active:scale-95" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="business_center">business_center</span>
|
||||||
|
<span class="font-label-sm text-label-sm">Consulting Portal</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="px-4 mt-auto mb-6">
|
||||||
|
<div class="bg-surface-container p-4 rounded-xl border border-outline-variant/20 mb-4">
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface mb-2">Pro Plan Active</p>
|
||||||
|
<div class="w-full bg-background rounded-full h-1 mb-2">
|
||||||
|
<div class="bg-electric-teal h-1 rounded-full" style="width: 70%"></div>
|
||||||
|
</div>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant opacity-70 mb-3">21 days remaining</p>
|
||||||
|
<button class="w-full bg-primary-container text-on-primary rounded-lg py-2 font-label-sm text-label-sm hover:brightness-110 transition-all cursor-pointer">Upgrade to Pro</button>
|
||||||
|
</div>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||||
|
<span class="font-label-sm text-label-sm">Settings</span>
|
||||||
|
</a>
|
||||||
|
<a class="text-on-surface-variant hover:bg-surface-container-high px-4 py-2 flex items-center gap-3 rounded-lg transition-all duration-200 cursor-pointer" href="#">
|
||||||
|
<span class="material-symbols-outlined" data-icon="help">help</span>
|
||||||
|
<span class="font-label-sm text-label-sm">Support</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<!-- Main Content Canvas -->
|
||||||
|
<main class="flex-1 lg:ml-64 p-margin-mobile md:p-margin-desktop w-full max-w-container-max mx-auto overflow-y-auto">
|
||||||
|
<!-- Header Section -->
|
||||||
|
<header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-stack-lg gap-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg text-on-surface tracking-tight mb-2">Welcome back, Engineer</h2>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">Here is your daily municipal intelligence summary.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="relative">
|
||||||
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant" data-icon="search">search</span>
|
||||||
|
<input class="bg-surface-container-lowest border border-outline-variant/30 text-on-surface rounded-full pl-10 pr-4 py-2 focus:border-primary focus:ring-1 focus:ring-primary outline-none transition-all w-64 text-sm" placeholder="Search resources..." type="text"/>
|
||||||
|
</div>
|
||||||
|
<button class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center border border-outline-variant/30 hover:bg-surface-container-high transition-colors relative">
|
||||||
|
<span class="material-symbols-outlined text-on-surface" data-icon="notifications">notifications</span>
|
||||||
|
<span class="absolute top-2 right-2 w-2 h-2 bg-electric-teal rounded-full"></span>
|
||||||
|
</button>
|
||||||
|
<div class="w-10 h-10 rounded-full bg-deep-ocean border border-primary/30 flex items-center justify-center overflow-hidden">
|
||||||
|
<img alt="User Profile" class="w-full h-full object-cover" data-alt="A futuristic, hyper-realistic macro shot of a single water droplet resting on a dark brushed metal surface. The droplet refracts a bright cyan glowing light from an unseen display, creating a sense of advanced technology. The overall lighting is moody, cinematic, and dark, with a high-contrast aesthetic suitable for a high-end SaaS platform." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRMNoOUAnDW4YZWPcCX0P00wGTqsKh-2Fq6jKfB64jGE8OPkutw0XR7oDdMZWktXx1dzWJyxroUXDBpObYTqpo-5lOgKDq0PqGL9xs1u5eAjPPZleHobc1H0lVctG0DB5OPN_k2E7dIqMv0KsqUXoLnUCHcy1w7V-8ROzny9oLuMngutt7O6Mel8HbxMjvqaewPrXGX8LwwMMvzZEp2vohN-R4Sd7myLlbiRXB-arCfFQpI6qlx7JnYg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<!-- Bento Grid Layout -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-gutter">
|
||||||
|
<!-- Active Courses (Spans 8 cols) -->
|
||||||
|
<section class="md:col-span-8 space-y-4">
|
||||||
|
<div class="flex justify-between items-center mb-stack-sm">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface">Active Training Modules</h3>
|
||||||
|
<a class="text-electric-teal font-label-sm text-label-sm hover:underline flex items-center gap-1" href="#">View All <span class="material-symbols-outlined text-[16px]" data-icon="arrow_forward">arrow_forward</span></a>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<!-- Course Card 1 -->
|
||||||
|
<div class="glass-card rounded-xl p-6 flex flex-col hover:bg-surface-container-lowest/50 transition-colors cursor-pointer group">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="bg-primary/10 text-primary px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider">Advanced</span>
|
||||||
|
<span class="material-symbols-outlined text-outline-variant group-hover:text-electric-teal transition-colors" data-icon="water_damage">water_damage</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-body-lg text-body-lg font-semibold text-on-surface mb-2">Urban Flood Mitigation Systems</h4>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant opacity-80 mb-6 flex-1">Module 4: Predictive modeling using IoT sensor data.</p>
|
||||||
|
<div class="w-full">
|
||||||
|
<div class="flex justify-between text-[11px] text-on-surface-variant mb-2">
|
||||||
|
<span>Progress</span>
|
||||||
|
<span>65%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-thin w-full rounded-full overflow-hidden">
|
||||||
|
<div class="progress-thin-fill w-[65%] shadow-[0_0_8px_rgba(45,212,191,0.6)]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Course Card 2 -->
|
||||||
|
<div class="glass-card rounded-xl p-6 flex flex-col hover:bg-surface-container-lowest/50 transition-colors cursor-pointer group">
|
||||||
|
<div class="flex justify-between items-start mb-4">
|
||||||
|
<span class="bg-electric-teal/10 text-electric-teal px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider">Core</span>
|
||||||
|
<span class="material-symbols-outlined text-outline-variant group-hover:text-electric-teal transition-colors" data-icon="architecture">architecture</span>
|
||||||
|
</div>
|
||||||
|
<h4 class="font-body-lg text-body-lg font-semibold text-on-surface mb-2">Smart Grid Water Distribution</h4>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant opacity-80 mb-6 flex-1">Module 2: Analyzing pressure zones and reducing non-revenue water.</p>
|
||||||
|
<div class="w-full">
|
||||||
|
<div class="flex justify-between text-[11px] text-on-surface-variant mb-2">
|
||||||
|
<span>Progress</span>
|
||||||
|
<span>30%</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-thin w-full rounded-full overflow-hidden">
|
||||||
|
<div class="progress-thin-fill w-[30%] shadow-[0_0_8px_rgba(45,212,191,0.6)]"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Upcoming Webinars (Spans 4 cols) -->
|
||||||
|
<section class="md:col-span-4 space-y-4">
|
||||||
|
<div class="flex justify-between items-center mb-stack-sm">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface">Live Agenda</h3>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-container-lowest border border-outline-variant/10 rounded-xl p-6 h-full flex flex-col">
|
||||||
|
<div class="space-y-4 flex-1">
|
||||||
|
<!-- Webinar Item 1 -->
|
||||||
|
<div class="flex gap-4 items-start p-3 rounded-lg hover:bg-surface-container transition-colors cursor-pointer group">
|
||||||
|
<div class="bg-surface-container-high rounded-md p-2 text-center min-w-[50px] border border-outline-variant/20 group-hover:border-electric-teal/30">
|
||||||
|
<div class="text-[10px] text-electric-teal font-bold uppercase">OCT</div>
|
||||||
|
<div class="font-headline-md text-on-surface">24</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="font-body-md text-body-md font-semibold text-on-surface mb-1 leading-tight group-hover:text-electric-teal transition-colors">Future of Desalination Tech</h5>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[14px]" data-icon="schedule">schedule</span> 14:00 GMT</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Webinar Item 2 -->
|
||||||
|
<div class="flex gap-4 items-start p-3 rounded-lg hover:bg-surface-container transition-colors cursor-pointer group">
|
||||||
|
<div class="bg-surface-container-high rounded-md p-2 text-center min-w-[50px] border border-outline-variant/20 group-hover:border-electric-teal/30">
|
||||||
|
<div class="text-[10px] text-on-surface-variant font-bold uppercase">OCT</div>
|
||||||
|
<div class="font-headline-md text-on-surface">28</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="font-body-md text-body-md font-semibold text-on-surface mb-1 leading-tight group-hover:text-electric-teal transition-colors">Regulatory Compliance 2025</h5>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[14px]" data-icon="schedule">schedule</span> 10:00 GMT</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Webinar Item 3 -->
|
||||||
|
<div class="flex gap-4 items-start p-3 rounded-lg hover:bg-surface-container transition-colors cursor-pointer group">
|
||||||
|
<div class="bg-surface-container-high rounded-md p-2 text-center min-w-[50px] border border-outline-variant/20 group-hover:border-electric-teal/30">
|
||||||
|
<div class="text-[10px] text-on-surface-variant font-bold uppercase">NOV</div>
|
||||||
|
<div class="font-headline-md text-on-surface">02</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="font-body-md text-body-md font-semibold text-on-surface mb-1 leading-tight group-hover:text-electric-teal transition-colors">Q&A: Infrastructure Funding</h5>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant flex items-center gap-1"><span class="material-symbols-outlined text-[14px]" data-icon="schedule">schedule</span> 16:30 GMT</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full mt-4 py-2 border border-outline-variant/30 rounded-lg text-on-surface font-label-sm hover:bg-surface-container transition-colors flex items-center justify-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px]" data-icon="calendar_month">calendar_month</span> Full Calendar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Quick Access Materials (Spans 12 cols) -->
|
||||||
|
<section class="md:col-span-12 mt-stack-md">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-stack-sm">Recent Intelligence Reports</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||||
|
<!-- Material 1 -->
|
||||||
|
<div class="group relative overflow-hidden rounded-xl border border-outline-variant/20 bg-surface-container-lowest cursor-pointer">
|
||||||
|
<div class="h-32 w-full bg-surface-container relative overflow-hidden">
|
||||||
|
<div class="bg-cover bg-center w-full h-full opacity-60 group-hover:opacity-100 transition-opacity duration-300" data-alt="A highly structured, dark-mode abstract visualization of data networks resembling flowing water through digital pipes. Electric teal and deep ocean blue neon lines intersect on a pitch-black background, conveying a sense of engineered intelligence and modern municipal infrastructure analytics." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBRpOlz5pzIxuXtQi6aW9OqQHlXoE53BjFSAF1CKryNC5XbQkHZ3Mpb7zr177cLggVr5FV34tfr8SHkrl_iwf4f_Tpl9U1lVFfvbhPGTUCIlyXPa4ZBj43bJNovfeSHjEG9WEs2NHuK1lhJp5C8pOevhD50qWCwI6F604bz4ZYOd_7uFRUeJtR5BMgagSRHKGLkkOZRsTcrxTj-VwG8ZppGOWGPoJ7GJjQlh3JuBzRSGL4Sujp-JX5uHA')"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest to-transparent"></div>
|
||||||
|
<span class="absolute bottom-2 left-4 text-[10px] font-bold tracking-wider text-electric-teal uppercase bg-background/80 px-2 py-1 rounded backdrop-blur-sm">PDF Report</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<h4 class="font-body-md text-body-md font-semibold text-on-surface mb-1 group-hover:text-electric-teal transition-colors">Q3 Water Quality Index</h4>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant">Comprehensive analysis of municipal testing data across 50 key metropolitan areas.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Material 2 -->
|
||||||
|
<div class="group relative overflow-hidden rounded-xl border border-outline-variant/20 bg-surface-container-lowest cursor-pointer">
|
||||||
|
<div class="h-32 w-full bg-surface-container relative overflow-hidden">
|
||||||
|
<div class="bg-cover bg-center w-full h-full opacity-60 group-hover:opacity-100 transition-opacity duration-300" data-alt="A sleek, dark schematic diagram of a water treatment facility overlaying a deep navy blueprint background. Subtle glowing teal indicators highlight specific filtration nodes, representing high-tech professional consulting in the water management sector." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCKLYRZHDuW2XMtQIExNmZyXPvL7Y1-4-89kmMD0NYBWfoPaxpeglswZKzxAf2UvS74cqbXfXgx0Y6FgDz17OTZuNQIOVm1jeuoXabEoDQLgH246g1BAqKPttqNNkkosr6HaGTwspjco6eP4PUmbvRBxqtMudLVUDNq3XyXVbl72d4gr6XsolzQOl26MHsMo-Ad545hr6giNEFiu_GIusFNaBxaW0iygylC5ZwpLQS8p_wFMf_B_Fapkg')"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest to-transparent"></div>
|
||||||
|
<span class="absolute bottom-2 left-4 text-[10px] font-bold tracking-wider text-primary uppercase bg-background/80 px-2 py-1 rounded backdrop-blur-sm">Case Study</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4">
|
||||||
|
<h4 class="font-body-md text-body-md font-semibold text-on-surface mb-1 group-hover:text-primary transition-colors">Desalination Efficiency</h4>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant">Review of energy consumption metrics in the new coastal facility implementations.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Material 3 -->
|
||||||
|
<div class="group relative overflow-hidden rounded-xl border border-outline-variant/20 bg-surface-container-lowest cursor-pointer flex flex-col justify-center items-center bg-gradient-to-br from-surface-container to-surface-container-lowest hover:from-surface-container-high transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-4xl text-outline-variant mb-2 group-hover:text-electric-teal transition-colors" data-icon="folder_open">folder_open</span>
|
||||||
|
<span class="font-body-md font-semibold text-on-surface">Browse All Documents</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body></html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 523 KiB |
@@ -0,0 +1,311 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="dark" lang="pl"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>SoftSPM - Ekspercka wiedza dla branży wodociągowej</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Hanken+Grotesk:wght@400;600&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<style>
|
||||||
|
.material-symbols-outlined {
|
||||||
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||||
|
}
|
||||||
|
.material-symbols-outlined.fill {
|
||||||
|
font-variation-settings: 'FILL' 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-secondary-fixed-variant": "#005048",
|
||||||
|
"background": "#101415",
|
||||||
|
"deep-ocean": "#0B1E3B",
|
||||||
|
"surface-tint": "#b1c5ff",
|
||||||
|
"tertiary-container": "#565e74",
|
||||||
|
"on-error-container": "#ffdad6",
|
||||||
|
"warning-red": "#B91830",
|
||||||
|
"primary-fixed": "#d9e2ff",
|
||||||
|
"secondary": "#4fdbc8",
|
||||||
|
"on-primary-fixed": "#001946",
|
||||||
|
"surface": "#101415",
|
||||||
|
"surface-container-lowest": "#0b0f10",
|
||||||
|
"tertiary-fixed": "#dae2fd",
|
||||||
|
"on-background": "#e0e3e5",
|
||||||
|
"on-error": "#690005",
|
||||||
|
"surface-container-low": "#191c1e",
|
||||||
|
"inverse-primary": "#0057cd",
|
||||||
|
"on-primary-fixed-variant": "#00419d",
|
||||||
|
"surface-dim": "#101415",
|
||||||
|
"tertiary-fixed-dim": "#bec6e0",
|
||||||
|
"on-primary-container": "#cbd8ff",
|
||||||
|
"surface-container": "#1d2022",
|
||||||
|
"error": "#ffb4ab",
|
||||||
|
"on-tertiary-fixed": "#131b2e",
|
||||||
|
"on-secondary-container": "#003f38",
|
||||||
|
"outline-variant": "#424654",
|
||||||
|
"on-primary": "#002c70",
|
||||||
|
"electric-teal": "#2DD4BF",
|
||||||
|
"secondary-container": "#04b4a2",
|
||||||
|
"tertiary": "#bec6e0",
|
||||||
|
"surface-container-high": "#272a2c",
|
||||||
|
"secondary-fixed-dim": "#4fdbc8",
|
||||||
|
"inverse-surface": "#e0e3e5",
|
||||||
|
"surface-bright": "#363a3b",
|
||||||
|
"surface-container-highest": "#323537",
|
||||||
|
"outline": "#8c909f",
|
||||||
|
"surface-variant": "#323537",
|
||||||
|
"error-container": "#93000a",
|
||||||
|
"on-tertiary": "#283044",
|
||||||
|
"surface-dark": "#020617",
|
||||||
|
"primary": "#b1c5ff",
|
||||||
|
"on-secondary": "#003731",
|
||||||
|
"on-secondary-fixed": "#00201c",
|
||||||
|
"primary-container": "#0057cd",
|
||||||
|
"primary-fixed-dim": "#b1c5ff",
|
||||||
|
"on-surface-variant": "#c2c6d6",
|
||||||
|
"secondary-fixed": "#71f8e4",
|
||||||
|
"inverse-on-surface": "#2d3133",
|
||||||
|
"on-surface": "#e0e3e5",
|
||||||
|
"on-tertiary-container": "#d0d8f2",
|
||||||
|
"on-tertiary-fixed-variant": "#3f465c"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.25rem",
|
||||||
|
"lg": "0.5rem",
|
||||||
|
"xl": "0.75rem",
|
||||||
|
"full": "9999px"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-max": "1280px",
|
||||||
|
"stack-md": "24px",
|
||||||
|
"gutter": "24px",
|
||||||
|
"stack-sm": "12px",
|
||||||
|
"margin-desktop": "40px",
|
||||||
|
"stack-lg": "48px",
|
||||||
|
"margin-mobile": "16px",
|
||||||
|
"unit": "8px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg-mobile": ["Space Grotesk"],
|
||||||
|
"label-sm": ["Hanken Grotesk"],
|
||||||
|
"body-lg": ["Hanken Grotesk"],
|
||||||
|
"headline-md": ["Space Grotesk"],
|
||||||
|
"headline-lg": ["Space Grotesk"],
|
||||||
|
"display-lg": ["Space Grotesk"],
|
||||||
|
"body-md": ["Hanken Grotesk"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"display-lg-mobile": ["36px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
||||||
|
"label-sm": ["12px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
||||||
|
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
|
||||||
|
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "600"}],
|
||||||
|
"headline-lg": ["32px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
||||||
|
"display-lg": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||||
|
"body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="bg-surface-dark text-on-surface font-body-md antialiased overflow-x-hidden pt-20">
|
||||||
|
<!-- TopNavBar (Shared Component) -->
|
||||||
|
<nav class="bg-background/80 backdrop-blur-xl border-b border-outline-variant/10 fixed top-0 w-full z-50">
|
||||||
|
<div class="flex justify-between items-center h-20 px-margin-desktop max-w-container-max mx-auto">
|
||||||
|
<div class="font-display-lg text-display-lg text-primary tracking-tight">SoftSPM</div>
|
||||||
|
<div class="hidden md:flex gap-8 items-center">
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95" href="#">Consulting</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95" href="#">Training</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95" href="#">Webinars</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95" href="#">E-learning</a>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<button class="font-label-sm text-label-sm text-electric-teal border border-electric-teal rounded px-4 py-2 hover:bg-electric-teal/10 transition-colors">Contact Us</button>
|
||||||
|
<button class="font-label-sm text-label-sm bg-inverse-primary text-white rounded px-4 py-2 hover:bg-inverse-primary/90 transition-colors">Sign In</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main class="max-w-container-max mx-auto px-margin-mobile md:px-margin-desktop w-full space-y-stack-lg pb-stack-lg pt-stack-md">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="relative w-full rounded-xl overflow-hidden min-h-[600px] flex items-center border border-primary/10">
|
||||||
|
<div class="absolute inset-0 bg-surface-container-lowest z-0">
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-luminosity" data-alt="A highly sophisticated, cinematic view of a modern municipal water treatment facility control room. The scene is illuminated by glowing holographic data displays in vibrant electric-teal and deep oceanic blues, contrasting against a pitch-black, high-tech industrial environment. The mood is authoritative, innovative, and deeply technical, reflecting a cutting-edge hydro-tech aesthetic." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuB5bSw-npWUD7wJ7JF9mt98jW25-HLUJFj4jn3U6xMXhXUTO6RWFIh33ZSQI1BKpF6kOYI_zMKlb4EkvyKOk4dMzvLCQRBOqfZwb-MV4StvSxSVGa30JXBcJVE9DueuxGluU_7k3Ii_RlG72OA52d4oQFshxsAijY2NpOar1pM55cCQM6uePMx42lwpzdz9lGXoXMly1PsAIXBwdgINa_zBwzai9FgZFer5UxcnnxT6XPmTIDwWBq3svg')"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-r from-surface-dark via-surface-dark/80 to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
<div class="relative z-10 w-full max-w-3xl pl-8 md:pl-16 space-y-stack-md">
|
||||||
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-electric-teal/10 border border-electric-teal/20 text-electric-teal font-label-sm text-label-sm">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">verified</span>
|
||||||
|
Liderzy branży od 2014
|
||||||
|
</div>
|
||||||
|
<h1 class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-on-surface">
|
||||||
|
Ekspercka wiedza dla branży <span class="text-primary">wodociągowej</span>.
|
||||||
|
</h1>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-xl">
|
||||||
|
Dostarczamy zaawansowane analizy, szkolenia i nowoczesne rozwiązania konsultingowe dla przedsiębiorstw komunalnych i inżynierów środowiska.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap gap-4 pt-4">
|
||||||
|
<button class="bg-inverse-primary text-white font-label-sm text-label-sm px-6 py-3 rounded hover:bg-inverse-primary/90 transition-all flex items-center gap-2 shadow-[0_0_15px_rgba(0,87,205,0.3)]">
|
||||||
|
Zapisz się na szkolenia
|
||||||
|
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
<button class="bg-surface/50 backdrop-blur-md border border-outline-variant text-on-surface font-label-sm text-label-sm px-6 py-3 rounded hover:border-primary/50 transition-all">
|
||||||
|
Poznaj portal
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Consulting Areas (Bento Grid) -->
|
||||||
|
<section class="space-y-stack-md">
|
||||||
|
<div class="flex items-end justify-between border-b border-outline-variant/20 pb-4">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-lg text-headline-lg text-on-surface">Obszary Konsultingu</h2>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant mt-2">Kompleksowe wsparcie strategiczne i operacyjne.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-unit*3 lg:gap-gutter">
|
||||||
|
<!-- Bento Item 1 -->
|
||||||
|
<div class="col-span-1 md:col-span-2 bg-surface-container border border-primary/10 rounded-lg p-6 relative overflow-hidden group hover:border-primary/30 transition-colors">
|
||||||
|
<div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-2xl -mr-10 -mt-10 group-hover:bg-primary/10 transition-colors"></div>
|
||||||
|
<span class="material-symbols-outlined text-4xl text-primary mb-4">water_drop</span>
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Zarządzanie Zapasami Wody</h3>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-md">Optymalizacja procesów dystrybucji i redukcja strat w sieciach przesyłowych przy użyciu zaawansowanych modeli matematycznych.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Bento Item 2 -->
|
||||||
|
<div class="col-span-1 bg-surface-container border border-electric-teal/10 rounded-lg p-6 relative overflow-hidden group hover:border-electric-teal/30 transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-4xl text-electric-teal mb-4">analytics</span>
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Audyty Sieci</h3>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">Szczegółowe analizy wydajności infrastruktury podziemnej.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Bento Item 3 -->
|
||||||
|
<div class="col-span-1 bg-surface-container border border-primary/10 rounded-lg p-6 group hover:border-primary/30 transition-colors">
|
||||||
|
<span class="material-symbols-outlined text-4xl text-primary mb-4">engineering</span>
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Modernizacja Stacji</h3>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">Projekty modernizacji SUW z naciskiem na automatyzację.</p>
|
||||||
|
</div>
|
||||||
|
<!-- Bento Item 4 -->
|
||||||
|
<div class="col-span-1 md:col-span-2 bg-surface-container border border-primary/10 rounded-lg p-6 flex items-center justify-between group hover:border-primary/30 transition-colors">
|
||||||
|
<div>
|
||||||
|
<span class="material-symbols-outlined text-4xl text-primary mb-4">eco</span>
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-2">Rozwiązania Zrównoważone</h3>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant">Wdrażanie technologii proekologicznych w gospodarce wod-kan.</p>
|
||||||
|
</div>
|
||||||
|
<button class="hidden md:flex h-12 w-12 rounded-full border border-outline-variant items-center justify-center group-hover:bg-primary/10 group-hover:text-primary transition-all">
|
||||||
|
<span class="material-symbols-outlined">arrow_forward</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Upcoming Webinars & Courses Grid -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
|
||||||
|
<!-- Nadchodzące Webinaria -->
|
||||||
|
<section class="lg:col-span-4 space-y-stack-sm">
|
||||||
|
<div class="border-b border-outline-variant/20 pb-4 mb-6">
|
||||||
|
<h2 class="font-headline-md text-headline-md text-on-surface">Nadchodzące Webinaria</h2>
|
||||||
|
</div>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Webinar Card -->
|
||||||
|
<div class="bg-surface-container-low border border-outline-variant/20 rounded-lg p-4 flex gap-4 hover:bg-surface-container transition-colors cursor-pointer group">
|
||||||
|
<div class="flex flex-col items-center justify-center min-w-[60px] border-r border-outline-variant/20 pr-4">
|
||||||
|
<span class="font-headline-md text-headline-md text-electric-teal">15</span>
|
||||||
|
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase">Lis</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div class="inline-block px-2 py-0.5 rounded bg-electric-teal/20 text-electric-teal font-label-sm text-[10px] mb-1">LIVE</div>
|
||||||
|
<h4 class="font-body-md text-body-md text-on-surface font-semibold group-hover:text-primary transition-colors">Detekcja Wycieków: Nowe Technologie</h4>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1">10:00 - 11:30 | Prowadzący: Dr. A. Nowak</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Webinar Card -->
|
||||||
|
<div class="bg-surface-container-low border border-outline-variant/20 rounded-lg p-4 flex gap-4 hover:bg-surface-container transition-colors cursor-pointer group">
|
||||||
|
<div class="flex flex-col items-center justify-center min-w-[60px] border-r border-outline-variant/20 pr-4">
|
||||||
|
<span class="font-headline-md text-headline-md text-primary">22</span>
|
||||||
|
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase">Lis</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-body-md text-body-md text-on-surface font-semibold group-hover:text-primary transition-colors">Prawne Aspekty Zrzutów Ścieków</h4>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1">13:00 - 15:00 | Prowadzący: Mec. K. Wiśniewski</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="w-full py-3 mt-4 border border-outline-variant rounded text-on-surface font-label-sm text-label-sm hover:bg-surface-container-high transition-colors">
|
||||||
|
Pełny harmonogram
|
||||||
|
</button>
|
||||||
|
</section>
|
||||||
|
<!-- Nowe Kursy E-learningowe -->
|
||||||
|
<section class="lg:col-span-8 space-y-stack-sm">
|
||||||
|
<div class="border-b border-outline-variant/20 pb-4 mb-6 flex justify-between items-end">
|
||||||
|
<h2 class="font-headline-md text-headline-md text-on-surface">Nowe Kursy E-learningowe</h2>
|
||||||
|
<a class="font-label-sm text-label-sm text-primary hover:text-primary-fixed transition-colors flex items-center gap-1" href="#">Zobacz wszystkie <span class="material-symbols-outlined text-[16px]">arrow_forward</span></a>
|
||||||
|
</div>
|
||||||
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||||
|
<!-- Course Card -->
|
||||||
|
<div class="bg-surface-container-lowest border-t-2 border-t-electric-teal border border-outline-variant/20 rounded-lg overflow-hidden group">
|
||||||
|
<div class="h-32 bg-surface-container-high relative">
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center opacity-60" data-alt="A highly detailed, schematic architectural rendering of a modern water pumping station, depicted in a dark-mode technical blueprint style with glowing cyan and electric-teal geometric lines on a deep navy background. High-tech and engineered aesthetic." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD2ua3ZVJr-Wi5hZX4ygaWPg9mIkgOC7ztbcFFDVJYOwgAypg6Z8DYgSJgE7wENVmTgEZvMXmwrpGzIaBw9vG-c5vkjqhXuw5BFUWGit8W9HoewIHkJox67dp7O3DrUl9S6xX2MmvG753QzLWwTC74GbFoT4R9GLtTbH3ym3OOjarW-RpWp1MS-hNNC7pcipk-1oThQUXIeqLULoPkGW1I21u3BNteByFRVYHJDKA-QIMf24XaPtLIR4g')"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest to-transparent"></div>
|
||||||
|
<div class="absolute bottom-2 left-4 px-2 py-1 bg-surface-dark/80 backdrop-blur rounded font-label-sm text-[10px] text-electric-teal border border-electric-teal/30">Nowość</div>
|
||||||
|
</div>
|
||||||
|
<div class="p-5">
|
||||||
|
<h3 class="font-body-lg text-body-lg text-on-surface font-semibold mb-2 line-clamp-2">Hydraulika Sieci Wodociągowych w Praktyce</h3>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant mb-4 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">schedule</span> 12h materiałów
|
||||||
|
<span class="material-symbols-outlined text-[16px] ml-2">school</span> Poziom: Średni
|
||||||
|
</p>
|
||||||
|
<!-- Thin line progress concept -->
|
||||||
|
<div class="w-full h-[2px] bg-outline-variant/30 mt-4">
|
||||||
|
<div class="w-0 h-full bg-electric-teal group-hover:w-full transition-all duration-700 ease-in-out"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Course Card -->
|
||||||
|
<div class="bg-surface-container-lowest border-t-2 border-t-primary border border-outline-variant/20 rounded-lg overflow-hidden group">
|
||||||
|
<div class="h-32 bg-surface-container-high relative">
|
||||||
|
<div class="absolute inset-0 bg-cover bg-center opacity-60" data-alt="A complex data visualization dashboard showing water quality metrics, rendered in dark mode with glowing blue and white graphs, charts, and digital readouts on a sleek black monitor screen. Corporate modern aesthetic." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBMPq3LwMTHMI38XhY9GO3EVZ4IPbqy6xujc-SAVjBQ0YKdB8fZf67gu_73dl2uNKk3c8qbStMkLak4yE5-jPdJntcQgzqMpJFlUeDF16Uyozg6RbGP5S8ErRI82Qby8O0qqp22mP0bugsP7tjOiW2borybEugsVhPwOg1F0hkCSuWvOcxRWw4XuXjML05zX2mDS1fQgtPO4tW-d77MP89zuaK0AR6sqAhb1CMZm2JyhBRY4DU74RqEbw')"></div>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-t from-surface-container-lowest to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
<div class="p-5">
|
||||||
|
<h3 class="font-body-lg text-body-lg text-on-surface font-semibold mb-2 line-clamp-2">Analiza Danych Jakości Wody (SCADA)</h3>
|
||||||
|
<p class="font-label-sm text-label-sm text-on-surface-variant mb-4 flex items-center gap-2">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">schedule</span> 8h materiałów
|
||||||
|
<span class="material-symbols-outlined text-[16px] ml-2">school</span> Poziom: Zaawansowany
|
||||||
|
</p>
|
||||||
|
<div class="w-full h-[2px] bg-outline-variant/30 mt-4">
|
||||||
|
<div class="w-0 h-full bg-primary group-hover:w-full transition-all duration-700 ease-in-out"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<!-- Footer (Shared Component) -->
|
||||||
|
<footer class="bg-surface-container-low w-full py-stack-lg border-t border-outline-variant/20 mt-stack-lg">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter px-margin-desktop max-w-container-max mx-auto">
|
||||||
|
<div class="col-span-1 md:col-span-2 space-y-4">
|
||||||
|
<div class="font-headline-md text-headline-md text-on-surface">SoftSPM</div>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant max-w-sm">
|
||||||
|
© 2024 SoftSPM. Established 2014. Professional Water Solutions.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 space-y-4">
|
||||||
|
<h4 class="font-label-sm text-label-sm text-on-surface uppercase tracking-wider">Platforma</h4>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Terms of Service</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 space-y-4">
|
||||||
|
<h4 class="font-label-sm text-label-sm text-on-surface uppercase tracking-wider">Informacje</h4>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Cookie Policy</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Accessibility</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body></html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 541 KiB |
@@ -0,0 +1,255 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html class="dark" lang="pl"><head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
|
<title>Katalog Szkoleń - SoftSPM</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||||
|
<script id="tailwind-config">
|
||||||
|
tailwind.config = {
|
||||||
|
darkMode: "class",
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
"colors": {
|
||||||
|
"on-secondary-fixed-variant": "#005048",
|
||||||
|
"background": "#101415",
|
||||||
|
"deep-ocean": "#0B1E3B",
|
||||||
|
"surface-tint": "#b1c5ff",
|
||||||
|
"tertiary-container": "#565e74",
|
||||||
|
"on-error-container": "#ffdad6",
|
||||||
|
"warning-red": "#B91830",
|
||||||
|
"primary-fixed": "#d9e2ff",
|
||||||
|
"secondary": "#4fdbc8",
|
||||||
|
"on-primary-fixed": "#001946",
|
||||||
|
"surface": "#101415",
|
||||||
|
"surface-container-lowest": "#0b0f10",
|
||||||
|
"tertiary-fixed": "#dae2fd",
|
||||||
|
"on-background": "#e0e3e5",
|
||||||
|
"on-error": "#690005",
|
||||||
|
"surface-container-low": "#191c1e",
|
||||||
|
"inverse-primary": "#0057cd",
|
||||||
|
"on-primary-fixed-variant": "#00419d",
|
||||||
|
"surface-dim": "#101415",
|
||||||
|
"tertiary-fixed-dim": "#bec6e0",
|
||||||
|
"on-primary-container": "#cbd8ff",
|
||||||
|
"surface-container": "#1d2022",
|
||||||
|
"error": "#ffb4ab",
|
||||||
|
"on-tertiary-fixed": "#131b2e",
|
||||||
|
"on-secondary-container": "#003f38",
|
||||||
|
"outline-variant": "#424654",
|
||||||
|
"on-primary": "#002c70",
|
||||||
|
"electric-teal": "#2DD4BF",
|
||||||
|
"secondary-container": "#04b4a2",
|
||||||
|
"tertiary": "#bec6e0",
|
||||||
|
"surface-container-high": "#272a2c",
|
||||||
|
"secondary-fixed-dim": "#4fdbc8",
|
||||||
|
"inverse-surface": "#e0e3e5",
|
||||||
|
"surface-bright": "#363a3b",
|
||||||
|
"surface-container-highest": "#323537",
|
||||||
|
"outline": "#8c909f",
|
||||||
|
"surface-variant": "#323537",
|
||||||
|
"error-container": "#93000a",
|
||||||
|
"on-tertiary": "#283044",
|
||||||
|
"surface-dark": "#020617",
|
||||||
|
"primary": "#b1c5ff",
|
||||||
|
"on-secondary": "#003731",
|
||||||
|
"on-secondary-fixed": "#00201c",
|
||||||
|
"primary-container": "#0057cd",
|
||||||
|
"primary-fixed-dim": "#b1c5ff",
|
||||||
|
"on-surface-variant": "#c2c6d6",
|
||||||
|
"secondary-fixed": "#71f8e4",
|
||||||
|
"inverse-on-surface": "#2d3133",
|
||||||
|
"on-surface": "#e0e3e5",
|
||||||
|
"on-tertiary-container": "#d0d8f2",
|
||||||
|
"on-tertiary-fixed-variant": "#3f465c"
|
||||||
|
},
|
||||||
|
"borderRadius": {
|
||||||
|
"DEFAULT": "0.25rem",
|
||||||
|
"lg": "0.5rem",
|
||||||
|
"xl": "0.75rem",
|
||||||
|
"full": "9999px"
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"container-max": "1280px",
|
||||||
|
"stack-md": "24px",
|
||||||
|
"gutter": "24px",
|
||||||
|
"stack-sm": "12px",
|
||||||
|
"margin-desktop": "40px",
|
||||||
|
"stack-lg": "48px",
|
||||||
|
"margin-mobile": "16px",
|
||||||
|
"unit": "8px"
|
||||||
|
},
|
||||||
|
"fontFamily": {
|
||||||
|
"display-lg-mobile": ["Space Grotesk"],
|
||||||
|
"label-sm": ["Hanken Grotesk"],
|
||||||
|
"body-lg": ["Hanken Grotesk"],
|
||||||
|
"headline-md": ["Space Grotesk"],
|
||||||
|
"headline-lg": ["Space Grotesk"],
|
||||||
|
"display-lg": ["Space Grotesk"],
|
||||||
|
"body-md": ["Hanken Grotesk"]
|
||||||
|
},
|
||||||
|
"fontSize": {
|
||||||
|
"display-lg-mobile": ["36px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
||||||
|
"label-sm": ["12px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600" }],
|
||||||
|
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
|
||||||
|
"headline-md": ["24px", { "lineHeight": "1.3", "fontWeight": "600" }],
|
||||||
|
"headline-lg": ["32px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
||||||
|
"display-lg": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
|
||||||
|
"body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
body { background-color: theme('colors.background'); color: theme('colors.on-background'); }
|
||||||
|
.glass-panel { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(177, 197, 255, 0.1); }
|
||||||
|
.glow-hover:hover { box-shadow: inset 0 0 15px rgba(45, 212, 191, 0.2); border-color: rgba(45, 212, 191, 0.5); }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="font-body-md min-h-screen flex flex-col antialiased">
|
||||||
|
<!-- TopNavBar -->
|
||||||
|
<header class="bg-background/80 backdrop-blur-xl border-b border-outline-variant/10 fixed top-0 w-full z-50">
|
||||||
|
<div class="flex justify-between items-center h-20 px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto">
|
||||||
|
<div class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-primary tracking-tight">SoftSPM</div>
|
||||||
|
<nav class="hidden md:flex gap-8">
|
||||||
|
<a class="text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95 font-body-md text-body-md" href="#">Consulting</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95 font-body-md text-body-md" href="#">Training</a>
|
||||||
|
<a class="text-on-surface-variant hover:text-electric-teal transition-colors duration-200 cursor-pointer active:scale-95 font-body-md text-body-md" href="#">Webinars</a>
|
||||||
|
<a class="text-electric-teal font-bold border-b-2 border-electric-teal pb-1 cursor-pointer active:scale-95 font-body-md text-body-md" href="#">E-learning</a>
|
||||||
|
</nav>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<button class="font-label-sm text-label-sm text-primary hover:text-electric-teal transition-colors hidden sm:block">Contact Us</button>
|
||||||
|
<button class="bg-primary-container text-white px-4 py-2 rounded font-label-sm text-label-sm hover:bg-inverse-primary transition-colors">Sign In</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main class="flex-grow pt-32 pb-stack-lg px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto w-full">
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="mb-stack-lg">
|
||||||
|
<h1 class="font-display-lg-mobile md:font-display-lg text-display-lg-mobile md:text-display-lg text-primary mb-unit">Katalog Szkoleń</h1>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl">Zdobądź specjalistyczną wiedzę z zakresu gospodarki wodnej. Wybierz spośród certyfikowanych kursów stworzonych przez ekspertów branżowych.</p>
|
||||||
|
</section>
|
||||||
|
<!-- Main Content Grid -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-gutter">
|
||||||
|
<!-- Sidebar / Filters -->
|
||||||
|
<aside class="lg:col-span-1 space-y-stack-sm">
|
||||||
|
<div class="glass-panel rounded-lg p-4">
|
||||||
|
<h3 class="font-headline-md text-headline-md text-on-surface mb-4">Kategorie</h3>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
<li>
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer group">
|
||||||
|
<input class="form-checkbox bg-surface-dark border-outline rounded text-electric-teal focus:ring-electric-teal focus:ring-offset-background" type="checkbox"/>
|
||||||
|
<span class="font-body-md text-body-md text-on-surface-variant group-hover:text-primary transition-colors">Technologia</span>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer group">
|
||||||
|
<input checked="" class="form-checkbox bg-surface-dark border-outline rounded text-electric-teal focus:ring-electric-teal focus:ring-offset-background" type="checkbox"/>
|
||||||
|
<span class="font-body-md text-body-md text-on-surface-variant group-hover:text-primary transition-colors">Prawo</span>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<label class="flex items-center gap-2 cursor-pointer group">
|
||||||
|
<input class="form-checkbox bg-surface-dark border-outline rounded text-electric-teal focus:ring-electric-teal focus:ring-offset-background" type="checkbox"/>
|
||||||
|
<span class="font-body-md text-body-md text-on-surface-variant group-hover:text-primary transition-colors">Zarządzanie</span>
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
<!-- Course Grid -->
|
||||||
|
<div class="lg:col-span-3 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-gutter">
|
||||||
|
<!-- Course Card 1 -->
|
||||||
|
<article class="glass-panel rounded-lg overflow-hidden flex flex-col group glow-hover transition-all duration-300">
|
||||||
|
<div class="h-40 bg-surface-dark relative border-b border-primary/10" data-alt="A dark, high-tech interface showing complex water flow diagrams and data visualizations. The aesthetic is deep-sea corporate modern, with deep blues and crisp electric teal accents. Technical UI elements overlay a subtle blueprint of a water treatment facility. Professional, sleek, and highly detailed." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCqql9Z-Jyk--N8XdXMtWBn_iJNouLxBGATTC-6LgyNzRABKQcmGz08NTftb5hKLn5eE4n-MMh3MRE-HlAhwZ4aX5-gXyYL-KtqFgKUMocF7ppMOHlgcbEbYeNPs_0-jSW7U-3xjGSI4nL2zrd0kIe9dk7_92FKde2sOUl4-MEIeQ95tYRfCoxJm7-g3usVLPKKKzVa-Ta1QJWNFOm2VVKPlnUq7RDH3I6NbLqf8YMVwhK81KGTUgWsuQ')">
|
||||||
|
<span class="absolute top-2 left-2 bg-secondary-container/20 text-electric-teal px-2 py-1 rounded font-label-sm text-label-sm backdrop-blur-sm border border-electric-teal/30">Prawo</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex flex-col flex-grow">
|
||||||
|
<h4 class="font-headline-md text-headline-md text-primary mb-2 line-clamp-2">Nowe Regulacje Wodno-Prawne 2024</h4>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant mb-4 flex-grow line-clamp-3">Kompleksowe omówienie zmian w ustawie Prawo wodne oraz ich wpływu na działalność przedsiębiorstw wod-kan.</p>
|
||||||
|
<div class="flex items-center justify-between text-on-surface-variant mb-4 pt-4 border-t border-outline-variant/20">
|
||||||
|
<div class="flex items-center gap-1 font-label-sm text-label-sm">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">schedule</span>
|
||||||
|
16 godzin
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1 font-label-sm text-label-sm">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">signal_cellular_alt</span>
|
||||||
|
Średni
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between mt-auto">
|
||||||
|
<span class="font-headline-md text-headline-md text-on-surface">1200 PLN</span>
|
||||||
|
<button class="border border-electric-teal text-electric-teal hover:bg-electric-teal hover:text-surface-dark px-4 py-2 rounded font-label-sm text-label-sm transition-colors">Zapisz się</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<!-- Course Card 2 -->
|
||||||
|
<article class="glass-panel rounded-lg overflow-hidden flex flex-col group glow-hover transition-all duration-300">
|
||||||
|
<div class="h-40 bg-surface-dark relative border-b border-primary/10" data-alt="Abstract representation of digital water management. Glowing data streams converging in a central node, symbolizing smart city technology. The color palette is strictly deep space black (#020617) with vibrant primary blue (#0057CD) and electric teal (#2DD4BF) highlights. Corporate and futuristic." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD04i3ML2mmXRLlhdiy-iu-lDZwaOevSOm7rzobawQg-P-R_eRdWvUm9zRhlX86Su_itNk0TM5aouLtAxLCzEApvinhYWDPVzQ8-W1IWbxMB_AOPia9eANDFJpm4AlhSLXe2G5CNagPzBZvd0kRsQPuf7DuUp7Olj_oAgPC2XBV7EpaKSMWxFw4pwljosILiDWjvU4Pk2qDeZPCvsfEnReW6-pXytguRuzxQBvgyb0LgVxftVElkWtREw')">
|
||||||
|
<span class="absolute top-2 left-2 bg-primary-container/20 text-primary px-2 py-1 rounded font-label-sm text-label-sm backdrop-blur-sm border border-primary/30">Technologia</span>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 flex flex-col flex-grow">
|
||||||
|
<h4 class="font-headline-md text-headline-md text-primary mb-2 line-clamp-2">Systemy SCADA w Oczyszczalniach</h4>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant mb-4 flex-grow line-clamp-3">Zaawansowany kurs z zakresu monitorowania i sterowania procesami w nowoczesnych oczyszczalniach ścieków.</p>
|
||||||
|
<div class="flex items-center justify-between text-on-surface-variant mb-4 pt-4 border-t border-outline-variant/20">
|
||||||
|
<div class="flex items-center gap-1 font-label-sm text-label-sm">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">schedule</span>
|
||||||
|
24 godziny
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-1 font-label-sm text-label-sm text-electric-teal">
|
||||||
|
<span class="material-symbols-outlined text-[16px]">signal_cellular_alt</span>
|
||||||
|
Zaawansowany
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center justify-between mt-auto">
|
||||||
|
<span class="font-headline-md text-headline-md text-on-surface">2400 PLN</span>
|
||||||
|
<button class="border border-electric-teal text-electric-teal hover:bg-electric-teal hover:text-surface-dark px-4 py-2 rounded font-label-sm text-label-sm transition-colors">Zapisz się</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Why Us Section -->
|
||||||
|
<section class="mt-stack-lg glass-panel rounded-xl p-stack-md lg:p-stack-lg border-t-4 border-t-electric-teal">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="font-headline-lg-mobile md:font-headline-lg text-headline-lg-mobile md:text-headline-lg text-primary mb-4">Dlaczego my?</h2>
|
||||||
|
<p class="font-body-lg text-body-lg text-on-surface-variant mb-6">Od 2014 roku SoftSPM dostarcza innowacyjne rozwiązania i specjalistyczną wiedzę dla sektora komunalnego. Nasze doświadczenie przekłada się na jakość szkoleń, które przygotowują do realnych wyzwań branży.</p>
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<div class="bg-surface-dark border border-outline-variant/30 p-4 rounded-lg flex flex-col items-center justify-center min-w-[120px]">
|
||||||
|
<span class="font-display-lg-mobile text-display-lg-mobile text-electric-teal">10+</span>
|
||||||
|
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">Lat na rynku</span>
|
||||||
|
</div>
|
||||||
|
<div class="bg-surface-dark border border-outline-variant/30 p-4 rounded-lg flex flex-col items-center justify-center min-w-[120px]">
|
||||||
|
<span class="font-display-lg-mobile text-display-lg-mobile text-primary">5k+</span>
|
||||||
|
<span class="font-label-sm text-label-sm text-on-surface-variant uppercase tracking-wider">Absolwentów</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="h-64 rounded-lg bg-surface-dark relative overflow-hidden">
|
||||||
|
<img class="absolute inset-0 w-full h-full object-cover opacity-50 mix-blend-luminosity" data-alt="A modern, dark-themed corporate training room seen through a glass wall. High-tech screens display water management dashboards in neon blues and teals. The setting is sleek, professional, and slightly futuristic, emphasizing the 'Hydro-Tech' aesthetic with deep blacks and sharp technological accents." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDxh8rrC2bO5_vADJfK4OGvK3ebq88Wvu584-ITwsne9yQUfwbITTv4BvRac17254w8K8l5hzTBPl7Krjfe92XmD2LWAF-AFByQEToyOF99oLPHGwSnpT28lnZj5qH_SBB0oZj1CVKFrQy-dRS7oeqEm9yeX3VR-H_eZKgyWgCNrmTKPrb7LHnQ3ljMqrAJBevcip5bLhuELFtAaebTjpINzwvU-gRzD0leeelNX6GaI1Zjo8D4q99hMA"/>
|
||||||
|
<div class="absolute inset-0 bg-gradient-to-tr from-background via-transparent to-transparent"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<!-- Footer -->
|
||||||
|
<footer class="bg-surface-container-low w-full py-stack-lg border-t border-outline-variant/20 mt-auto">
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter px-margin-mobile md:px-margin-desktop max-w-container-max mx-auto">
|
||||||
|
<div class="md:col-span-1">
|
||||||
|
<div class="font-headline-md text-headline-md text-on-surface mb-2">SoftSPM</div>
|
||||||
|
<p class="font-body-md text-body-md text-on-surface-variant text-sm">© 2024 SoftSPM. Established 2014. Professional Water Solutions.</p>
|
||||||
|
</div>
|
||||||
|
<div class="md:col-span-3 flex flex-wrap gap-4 md:justify-end">
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Privacy Policy</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Terms of Service</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Cookie Policy</a>
|
||||||
|
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#">Accessibility</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body></html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 591 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
@@ -0,0 +1,25 @@
|
|||||||
|
# Folder obrazów dla strony AquaNexis
|
||||||
|
|
||||||
|
Ten folder zawiera wszystkie obrazy wykorzystywane na stronie internetowej AquaNexis.
|
||||||
|
|
||||||
|
## Wymagane obrazy:
|
||||||
|
|
||||||
|
1. **dashboard-mockup.png** - Obraz przedstawiający panel sterowania systemu IT bazując na https://scada.softspm.com/?page=operation&subpage=well&id=100
|
||||||
|
2. **benefits.png** - Obraz ilustrujący korzyści z systemu
|
||||||
|
3. **company1.png** - Logo Przedsiębiorstwa Wodociągów i Kanalizacji w Krakowie
|
||||||
|
4. **company2.png** - Logo Zakładu Wodociągów i Kanalizacji w Poznaniu
|
||||||
|
5. **company3.png** - Logo Zakładu Gospodarki Wodnej w Gdańsku
|
||||||
|
6. **tech-diagram.png** - Schemat pokazujący komponenty technologiczne systemu AquaNexis
|
||||||
|
7. **system-architecture.png** - Szczegółowy diagram architektury systemu
|
||||||
|
|
||||||
|
Zaleca się, aby wszystkie obrazy:
|
||||||
|
- Były w wysokiej rozdzielczości (minimum 1200px szerokości dla obrazów pełnoekranowych)
|
||||||
|
- Miały przezroczyste tło dla logo (format PNG)
|
||||||
|
- Były zoptymalizowane pod kątem szybkiego ładowania strony
|
||||||
|
|
||||||
|
## Propozycje dla nowych obrazów:
|
||||||
|
|
||||||
|
### tech-diagram.pngs
|
||||||
|
Diagram powinien przedstawiać kluczowe elementy systemu: czujniki w pompach, jednostki przetwarzające dane, chmurę i interfejs użytkownika. Najlepiej w nowoczesnym, schematycznym stylu z wykorzystaniem kolorów firmowych (niebieski, turkus).
|
||||||
|
|
||||||
|
**WYGENEROWANO:** Nowoczesny diagram techniczny systemu AquaNexis, przedstawiający system centralny połączony za pomocą GSM i łączności satelitarnej z oddalonymi obiektami takimi jak studnie głębinowe i zbiorniki retencyjne. Diagram używa gradientów w kolorystyce niebiesko-turkusowej, z czytelnym oznaczeniem przepływu danych i elementami zabezpieczeń.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 268 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 395 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 697 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 768 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 209 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
+513
@@ -0,0 +1,513 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>SoftSPM - training, consulting and custom software for the water sector</title>
|
||||||
|
<meta name="description" content="Training, webinars, consulting and turnkey software for municipal water and wastewater utilities. 25+ years in IT, in the water sector since 2014. Web and mobile applications, our own course platform, the Wodociagowiec.pl portal and the Gielda Komunalna marketplace.">
|
||||||
|
<link rel="icon" href="images/favicon.ico" sizes="any">
|
||||||
|
<link rel="stylesheet" href="assets/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<a class="nav-brand" href="index-en.html"><img src="images/spm_logo_new.png" alt="SoftSPM"></a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="#offer">Offer</a>
|
||||||
|
<a href="#topics">Topics</a>
|
||||||
|
<a href="#dates">Dates</a>
|
||||||
|
<a href="#platform">Platform</a>
|
||||||
|
<a href="#software">Software</a>
|
||||||
|
<a href="#ecosystem">Ecosystem</a>
|
||||||
|
<a class="nav-keep" href="index.html" title="Wersja polska">PL</a>
|
||||||
|
<a class="btn btn-primary nav-keep" href="#contact">Get in touch</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="wrap">
|
||||||
|
|
||||||
|
<!-- ── Hero ─────────────────────────────────────────────────────────── -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div>
|
||||||
|
<h1 class="display"><span class="line">Water sector</span> <span class="line">know-how since 2014.</span></h1>
|
||||||
|
<p class="sub">Training, webinars, consulting and <strong>turnkey software</strong> for municipal water and wastewater utilities. We teach what we do ourselves - we have been building software for over 25 years, and doing it for the water sector since 2014. We run the <strong>Wodociagowiec.pl</strong> portal and <strong>Gielda Komunalna</strong>, a free marketplace where the sector buys, sells and swaps equipment.</p>
|
||||||
|
<div class="row">
|
||||||
|
<a class="btn btn-primary btn-lg" href="#dates">See the programme</a>
|
||||||
|
<a class="btn btn-ghost btn-lg" href="#contact">Book a consultation</a>
|
||||||
|
</div>
|
||||||
|
<div class="hero-marks">
|
||||||
|
<span>25+ years in IT</span>
|
||||||
|
<span>In wod-kan since 2014</span>
|
||||||
|
<span>480+ people trained</span>
|
||||||
|
<span>Rollouts in PL and abroad</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<figure class="figure hero-figure" style="margin:0">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/szkolenia.svg" alt="Training room: instructor at a data screen with participants at workstations" width="640" height="360">
|
||||||
|
<figcaption>Fig. 01 - Groups of up to 12, exercises on real documents and data</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 01 · By the numbers ──────────────────────────────────────────── -->
|
||||||
|
<section class="section-tight" id="numbers" aria-label="SoftSPM by the numbers">
|
||||||
|
<div class="plate">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<header class="title-block">
|
||||||
|
<span class="tb-title">SoftSPM - by the numbers</span>
|
||||||
|
<span class="tb-cell">SPM-2026</span>
|
||||||
|
<span class="tb-cell">Rev A</span>
|
||||||
|
<span class="tb-cell">Sheet 01 of 06</span>
|
||||||
|
</header>
|
||||||
|
<table class="table spec">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">No.</th><th scope="col">Item</th><th scope="col">Value</th><th scope="col">Notes</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="s-num">01</td><td class="s-prop">Experience in IT</td><td class="s-val">25+ years</td><td class="s-rem">From desktop systems to mobile applications</td></tr>
|
||||||
|
<tr><td class="s-num">02</td><td class="s-prop">In the water sector</td><td class="s-val">since 2014</td><td class="s-rem">12 years working with municipal utilities</td></tr>
|
||||||
|
<tr><td class="s-num">03</td><td class="s-prop">Specialists trained</td><td class="s-val">480+</td><td class="s-rem">Classroom and online</td></tr>
|
||||||
|
<tr><td class="s-num">04</td><td class="s-prop">Webinars per year</td><td class="s-val">24</td><td class="s-rem">On our own course platform</td></tr>
|
||||||
|
<tr><td class="s-num">05</td><td class="s-prop">Advisory projects</td><td class="s-val">60+</td><td class="s-rem">Tariffs, organisation, procurement, digitisation</td></tr>
|
||||||
|
<tr><td class="s-num">06</td><td class="s-prop">Ecosystem reach</td><td class="s-val">2 services</td><td class="s-rem">Wodociagowiec.pl trade portal and Gielda Komunalna marketplace</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p class="sheet-note">Sample figures - to be confirmed before publication.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 02 · Offer ───────────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="offer">
|
||||||
|
<span class="kicker">02 · Offer</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Four ways to draw on our experience</h2>
|
||||||
|
<p class="text-muted">From an application built to order down to a single two-hour webinar. The same people deliver all of it - what comes up in a client rollout ends up in the next training session.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cells cells-4">
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.1</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 6-6 6 6 6M16 6l6 6-6 6M14 4l-4 16"/></svg>
|
||||||
|
<h2>Turnkey software</h2>
|
||||||
|
<p>We build software to order: web systems and mobile applications shaped by the client's requirements. We also advise on large integrated system rollouts. Over 25 years in IT, with rollouts in Poland and abroad.</p>
|
||||||
|
<a class="cell-link" href="#software">See how we work →</a>
|
||||||
|
</div>
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.2</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 3v18h18"/><path d="m7 15 4-5 3 3 5-7"/></svg>
|
||||||
|
<h2>Consulting</h2>
|
||||||
|
<p>Support with tariff applications, organisational reviews, procurement preparation and digitisation planning. The report ends with a list of decisions carrying costs and deadlines, not a set of generalities.</p>
|
||||||
|
<a class="cell-link" href="#contact">Ask about consulting →</a>
|
||||||
|
</div>
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.3</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 10 12 5 2 10l10 5 10-5Z"/><path d="M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/></svg>
|
||||||
|
<h2>Training</h2>
|
||||||
|
<p>Classroom and online, in groups of up to 12. Regulation and tariffs, utility management, public procurement, customer service, digitisation. Exercises on real documents and data, not a slide deck.</p>
|
||||||
|
<a class="cell-link" href="#contact">Ask about the catalogue →</a>
|
||||||
|
</div>
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.4</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="14" height="14" rx="1"/><path d="m16 10 6-4v12l-6-4"/></svg>
|
||||||
|
<h2>Webinars</h2>
|
||||||
|
<p>Two sessions a month, two hours each: regulatory changes, cases from the sector, questions from participants. Live with a Q&A, then available as a recording on the course platform.</p>
|
||||||
|
<a class="cell-link" href="#platform">See the platform →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 03 · Topics ──────────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="topics">
|
||||||
|
<span class="kicker">03 · Subject tracks</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Eight areas the sector asks about most</h2>
|
||||||
|
<p class="text-muted">We build the programme from what actually reaches the Wodociagowiec editorial desk and from what the sector is looking for on Gielda Komunalna. The first four tracks cover regulation and organisation, the next three cover the systems you run all of it on, and the last one ties the two together into a digitisation plan. If a question keeps coming back, it becomes a course.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cells cells-2">
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/kurs-prawo.svg" alt="Tariff document, statutory symbol and approval stamp" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Track 01</span><span class="tag tag-outline">Regulation</span></div>
|
||||||
|
<h3>Water law and the tariff application</h3>
|
||||||
|
<p>Regulatory changes and their operational consequences, calculating necessary revenue, preparing and defending the tariff application before the regulator, reporting duties and water quality obligations.</p>
|
||||||
|
<div class="course-meta"><span>2 days · 16 h</span><span>Classroom / online</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/kurs-zarzadzanie.svg" alt="Financial indicators and cost structure" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Track 02</span><span class="tag tag-outline">Management</span></div>
|
||||||
|
<h3>Running a water utility</h3>
|
||||||
|
<p>Cost accounting and the real price per m³, efficiency indicators and benchmarking, multi-year development plans, making the case for investment to the board and the municipal owner.</p>
|
||||||
|
<div class="course-meta"><span>2 days · 16 h</span><span>Classroom / online</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/kurs-zamowienia.svg" alt="Comparing tenders against award criteria" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Track 03</span><span class="tag tag-outline">Procurement</span></div>
|
||||||
|
<h3>Public procurement in practice</h3>
|
||||||
|
<p>Writing a specification that does not end in a variation order, non-price criteria and life-cycle cost, evaluating tenders, and the appeal grounds that come up most often - and how to avoid them.</p>
|
||||||
|
<div class="course-meta"><span>2 days · 16 h</span><span>Classroom / online</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/kurs-klient.svg" alt="Customer request, billing and communication" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Track 04</span><span class="tag tag-outline">Customer service</span></div>
|
||||||
|
<h3>Customer service, contracts and billing</h3>
|
||||||
|
<p>Customer contracts and enforcement, complaints and difficult conversations, debt recovery step by step, billing with remote meter reading, and communication during outages.</p>
|
||||||
|
<div class="course-meta"><span>1 day · 8 h</span><span>Classroom / online</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cells cells-2" style="margin-top: calc(1.5 * var(--leading))">
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/kurs-scada.svg" alt="Control room desk: network assets, a measurement trend and an alarm indicator" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Track 05</span><span class="tag tag-outline">SCADA</span></div>
|
||||||
|
<h3>Managing and monitoring SCADA systems</h3>
|
||||||
|
<p>How to read a control room desk without drowning in alarms: thresholds and hysteresis instead of false reports, event priorities, on-call and escalation procedures, measurement archiving, and board reports built from the same data the operator works on.</p>
|
||||||
|
<div class="course-meta"><span>2 days · 16 h</span><span>Classroom / online</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/kurs-audyt.svg" alt="Security audit: NIS2 compliance shield and a list of vulnerabilities by risk level" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Track 06</span><span class="tag tag-outline">Security</span></div>
|
||||||
|
<h3>Security audits and NIS2 compliance</h3>
|
||||||
|
<p>Water utilities are critical infrastructure, so NIS2 obliges rather than suggests. Inventory of systems and access rights, separating the office network from the technology network, backups that can actually be restored, an incident response plan and reporting duties.</p>
|
||||||
|
<div class="course-meta"><span>2 days · 16 h</span><span>Classroom / online</span></div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: calc(1.5 * var(--leading))">
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<div class="split" style="gap: 0; align-items: stretch">
|
||||||
|
<img class="plot" src="assets/img/en/kurs-integracje.svg" alt="A data bus linking ERP, CRM, TAX and billing to reporting and applications" width="480" height="270" style="height:100%">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Track 07</span><span class="tag tag-outline">Integration</span></div>
|
||||||
|
<h3>Integration with ERP, CRM and tax systems</h3>
|
||||||
|
<p>The most common digitisation problem is not “which system should we buy”, it is “why do these figures disagree”. We teach how to plan data exchange between ERP, CRM, tax systems and billing: which source owns which piece of information, how to reconcile balances and customer records, how batch integration differs from an API, how to write integration requirements into a tender, and how to test acceptance.</p>
|
||||||
|
<div class="course-meta"><span>2 days · 16 h</span><span>Classroom / online</span><span>Level: advanced</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: calc(1.5 * var(--leading))">
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<div class="split" style="gap: 0; align-items: stretch">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Track 08</span><span class="tag tag-outline">Digitisation</span></div>
|
||||||
|
<h3>Digitising a water utility</h3>
|
||||||
|
<p>The track that closes the other seven: it turns knowledge of regulation, organisation and systems into a single plan of action. From paper to system - asset inventory, work-order and document flow, integrating billing with meter readings, selecting a supplier and writing requirements, and a realistic rollout plan split across budget years. For the people who have to plan it and defend the plan to the board.</p>
|
||||||
|
<div class="course-meta"><span>2 days · 16 h</span><span>Classroom / online</span><span>Level: intermediate</span></div>
|
||||||
|
</div>
|
||||||
|
<img class="plot" src="assets/img/en/kurs-cyfryzacja.svg" alt="From paper documentation to a central system with modules and a phased rollout plan" width="480" height="270" style="height:100%">
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 04 · Dates ───────────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="dates">
|
||||||
|
<span class="kicker">04 · Schedule</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Dates for the next edition are being finalised</h2>
|
||||||
|
<p class="text-muted">These are the topics entering the programme first. We publish dates once the room and the trainers are confirmed - usually six weeks ahead. Leave your details against a topic and we will come back to you before we announce it publicly.</p>
|
||||||
|
</div>
|
||||||
|
<div class="plate">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<header class="title-block">
|
||||||
|
<span class="tb-title">Topics in preparation</span>
|
||||||
|
<span class="tb-cell">SPM-2026</span>
|
||||||
|
<span class="tb-cell">Rev A</span>
|
||||||
|
<span class="tb-cell">Sheet 02 of 06</span>
|
||||||
|
</header>
|
||||||
|
<table class="table sched">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">Timing</th><th scope="col">Topic</th><th scope="col">Format</th><th scope="col">Location</th><th scope="col"><span class="visually-hidden">Registration</span></th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Soon</span></td><td class="s-topic">Tariff application - preparing and defending it</td><td class="s-form"><span class="tag tag-accent">Training</span></td><td class="s-place">Bełchatów</td><td class="s-act"><a class="sign" href="#contact">Notify me →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Soon</span></td><td class="s-topic">Water law changes - what affects utilities</td><td class="s-form"><span class="tag tag-outline">Webinar</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#contact">Notify me →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Soon</span></td><td class="s-topic">Non-price award criteria - workshop</td><td class="s-form"><span class="tag tag-outline">Webinar</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#contact">Notify me →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Soon</span></td><td class="s-topic">Digitising a water utility</td><td class="s-form"><span class="tag tag-accent">Training</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#contact">Notify me →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Soon</span></td><td class="s-topic">Tariffs 2027 - calculation and common errors</td><td class="s-form"><span class="tag tag-outline">Webinar</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#contact">Notify me →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Soon</span></td><td class="s-topic">Debt recovery and the difficult customer</td><td class="s-form"><span class="tag tag-accent">Training</span></td><td class="s-place">Bełchatów</td><td class="s-act"><a class="sign" href="#contact">Notify me →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Soon</span></td><td class="s-topic">Security audit of your systems - where to start</td><td class="s-form"><span class="tag tag-accent">Training</span></td><td class="s-place">Bełchatów</td><td class="s-act"><a class="sign" href="#contact">Notify me →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Soon</span></td><td class="s-topic">NIS2 and critical infrastructure - what utilities must do</td><td class="s-form"><span class="tag tag-outline">Webinar</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#contact">Notify me →</a></td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p class="sheet-note">Dates for the next edition are being finalised. Leave your details against a topic and we will let you know as soon as registration opens.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 05 · Platform ────────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="platform">
|
||||||
|
<span class="kicker">05 · Course platform</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="split">
|
||||||
|
<div>
|
||||||
|
<h2 class="split-title">Webinars and e-learning in one place</h2>
|
||||||
|
<p class="lead">Our own platform for running courses: live webinars, on-demand courses, tests and certificates. The material stays with you - come back to the recordings and documents whenever you need them.</p>
|
||||||
|
<ul class="checks">
|
||||||
|
<li>Live webinars with chat and a Q&A session</li>
|
||||||
|
<li>Recordings available indefinitely with your access</li>
|
||||||
|
<li>Downloadable materials: document templates, spreadsheets, checklists</li>
|
||||||
|
<li>Assessment tests and a completion certificate for your employer</li>
|
||||||
|
<li>Learner dashboard with progress and your team's training history</li>
|
||||||
|
<li>Company account - one subscription for many employees</li>
|
||||||
|
</ul>
|
||||||
|
<a class="btn btn-primary" href="#">Go to the platform</a>
|
||||||
|
</div>
|
||||||
|
<figure class="figure split-media" style="margin:0">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/platforma.svg" alt="Learner dashboard: course progress, webinar agenda and a live indicator" width="640" height="360">
|
||||||
|
<figcaption>Fig. 02 - Learner dashboard: progress and upcoming webinars</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 06 · Turnkey software ────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="software">
|
||||||
|
<span class="kicker">06 · Turnkey software</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>We build software to order</h2>
|
||||||
|
<p class="text-muted">The course platform we run our webinars on, the Wodociagowiec portal and Gielda Komunalna are all our own builds. We do the same work for clients: analyse the need, design it, write it and hand over a working system. Turnkey, with no subcontractors. We also advise on large integrated system rollouts - on the buyer's side of the table, not the vendor's.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="split" style="margin-bottom: calc(1.5 * var(--leading))">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: clamp(24px, 2.6vw, 32px); text-transform: uppercase; margin-bottom: var(--space-4)">Over 25 years in IT</h3>
|
||||||
|
<p class="lead">We started before “app” meant something on a phone. Since 2014 we have combined that with hands-on knowledge of the water sector, so nobody has to explain what a tariff, a meter reading or a service order is. We understand the domain and we write the code - a rare combination.</p>
|
||||||
|
<ul class="checks">
|
||||||
|
<li>Web systems: dashboards, registers, document workflows, reporting</li>
|
||||||
|
<li>Mobile apps for Android and iOS - a field crew app for work on site, offline too</li>
|
||||||
|
<li>Integration with what you already run - billing, GIS, the electronic operations logbook, accounting, well and pump operation, and network-wide monitoring</li>
|
||||||
|
<li>Data migration from legacy systems and spreadsheets</li>
|
||||||
|
<li>Advisory on large integrated system rollouts - ERP, GIS, billing</li>
|
||||||
|
<li>Rollout, user training and support after go-live</li>
|
||||||
|
<li>Code and documentation stay with the client - no vendor lock-in</li>
|
||||||
|
<li>Knowledge and experience backed by rollouts in Poland and abroad</li>
|
||||||
|
</ul>
|
||||||
|
<a class="btn btn-primary" href="#contact">Tell us about your project</a>
|
||||||
|
</div>
|
||||||
|
<figure class="figure split-media" style="margin:0">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/aplikacje.svg" alt="From client requirements to a web system and a field crew app: analysis, design, development, testing, rollout" width="640" height="360">
|
||||||
|
<figcaption>Fig. 03 - From requirements to rollout: web system and field crew app</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="plate">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<header class="title-block">
|
||||||
|
<span class="tb-title">Turnkey delivery - scope and terms</span>
|
||||||
|
<span class="tb-cell">SPM-2026</span>
|
||||||
|
<span class="tb-cell">Rev A</span>
|
||||||
|
<span class="tb-cell">Sheet 03 of 06</span>
|
||||||
|
</header>
|
||||||
|
<table class="table spec">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">No.</th><th scope="col">Item</th><th scope="col">Value</th><th scope="col">Notes</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="s-num">01</td><td class="s-prop">Experience in IT</td><td class="s-val">25+ years</td><td class="s-rem">From desktop systems to mobile applications</td></tr>
|
||||||
|
<tr><td class="s-num">02</td><td class="s-prop">Engagement model</td><td class="s-val">turnkey</td><td class="s-rem">Analysis, design, code, testing, rollout and support</td></tr>
|
||||||
|
<tr><td class="s-num">03</td><td class="s-prop">Platforms</td><td class="s-val">web + mobile</td><td class="s-rem">Browser, Android, iOS - one shared data set</td></tr>
|
||||||
|
<tr><td class="s-num">04</td><td class="s-prop">Quote and schedule</td><td class="s-val">up front</td><td class="s-rem">Fixed scope and deadline agreed in the contract</td></tr>
|
||||||
|
<tr><td class="s-num">05</td><td class="s-prop">Rights to the code</td><td class="s-val">client</td><td class="s-rem">Source code and documentation handed over in full</td></tr>
|
||||||
|
<tr><td class="s-num">06</td><td class="s-prop">Advisory role</td><td class="s-val">client side</td><td class="s-rem">Oversight of large integrated system rollouts</td></tr>
|
||||||
|
<tr><td class="s-num">07</td><td class="s-prop">Rollout reach</td><td class="s-val">PL and abroad</td><td class="s-rem">Well and pump operation systems, network monitoring</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p class="sheet-note">Scope is agreed case by case - the terms above are our standard way of working.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 07 · Ecosystem ───────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="ecosystem">
|
||||||
|
<span class="kicker">07 · Ecosystem</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>A trade portal, a marketplace and a course platform - one loop</h2>
|
||||||
|
<p class="text-muted">We do not start from a blank page. We run two services the Polish water sector uses daily, and they tell us what to teach. Readers' questions become webinar topics, listings on the marketplace show what the sector actually needs, and course participants meet the manufacturers and contractors they used to hunt for through word of mouth.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<figure class="figure" style="margin: 0 0 calc(1.5 * var(--leading))">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/ekosystem.svg" alt="Diagram: the Wodociagowiec.pl portal and the Gielda Komunalna marketplace exchange topics, practitioners and listings with the course platform at the centre" width="720" height="400">
|
||||||
|
<figcaption>Diagram 01 - The knowledge loop: the portal and the marketplace feed the platform, graduates return to the market</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="cells cells-2" style="margin-bottom: calc(1.5 * var(--leading))">
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/kurs-portal.svg" alt="Industry article with a chart and reader comments" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Portal</span><span class="tag tag-outline">Knowledge</span></div>
|
||||||
|
<h3>Wodociagowiec.pl</h3>
|
||||||
|
<p>An industry portal for water professionals: technical and legal articles, operational cases, analysis of regulatory change, reader questions and expert answers. This is where we see which topics keep coming back - and build the webinar programme from them.</p>
|
||||||
|
<div class="course-meta"><span>Articles and analysis</span><span>Reader discussion</span></div>
|
||||||
|
<a class="cell-link" href="https://wodociagowiec.pl/" target="_blank" rel="noopener">Go to wodociagowiec.pl →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/en/kurs-gielda.svg" alt="Marketplace: surplus stock listed free of charge and matched with manufacturers and contractors" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Marketplace</span><span class="tag tag-outline">New</span></div>
|
||||||
|
<h3>Gielda Komunalna</h3>
|
||||||
|
<p>A new marketplace for the municipal sector. List, sell, buy or swap what is sitting in your warehouse - free of charge: surplus from completed projects, equipment replaced during upgrades, spare parts for machines nobody manufactures any more. It also brings together the manufacturers and contractors of a genuinely niche, specialist trade.</p>
|
||||||
|
<div class="course-meta"><span>Free to list</span><span>Buy · sell · swap</span></div>
|
||||||
|
<a class="cell-link" href="https://gieldakomunalna.pl/" target="_blank" rel="noopener">Go to gieldakomunalna.pl →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eco">
|
||||||
|
<div class="eco-item">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h3>Topics from the market</h3>
|
||||||
|
<p>A question that comes back on the portal for the third time in a month goes into the programme of the next webinar. We do not guess what the sector needs - we see it in the readership figures and in the questions.</p>
|
||||||
|
<span class="eco-url">Portal → Platform</span>
|
||||||
|
</div>
|
||||||
|
<div class="eco-item">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h3>A trade that knows itself</h3>
|
||||||
|
<p>Water and wastewater is a niche market: there is a handful of specialist manufacturers and contractors nationwide, each in a different region. The marketplace gathers them in one place, so nobody has to ask around.</p>
|
||||||
|
<span class="eco-url">Marketplace → Manufacturers and contractors</span>
|
||||||
|
</div>
|
||||||
|
<div class="eco-item">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h3>Warehouse, not scrap</h3>
|
||||||
|
<p>Surplus from a project two years ago sits there because throwing it out feels wrong and there is nobody to give it to. Someone a hundred kilometres away is looking for exactly that. The marketplace matches the two - no commission, no listing fee.</p>
|
||||||
|
<span class="eco-url">Warehouse → Second life</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── Quote ────────────────────────────────────────────────────────── -->
|
||||||
|
<section class="quote">
|
||||||
|
<figure style="margin:0">
|
||||||
|
<blockquote>“We came for tariff training and left with a work plan for the whole application.”</blockquote>
|
||||||
|
<figcaption>- head of finance, municipal water utility (sample reference)</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 08 · Contact ─────────────────────────────────────────────────── -->
|
||||||
|
<section class="section-tight" id="contact">
|
||||||
|
<span class="kicker">08 · Contact</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="cta-band">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h2 style="text-transform:uppercase">Tell us what you need</h2>
|
||||||
|
<p class="lead">Training runs in Polish by default; English-language sessions and materials are available for closed courses on request. Write to us and we will come back within one working day.</p>
|
||||||
|
<form data-form="newsletter-en" action="api/send.php" method="post">
|
||||||
|
<div class="form-row">
|
||||||
|
<label class="visually-hidden" for="en-email">Email address</label>
|
||||||
|
<input class="input" id="en-email" type="email" name="email" placeholder="name.surname@utility.com" autocomplete="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="hp" aria-hidden="true">
|
||||||
|
<label for="en-www">Leave this field empty</label>
|
||||||
|
<input id="en-www" type="text" name="firma_www" tabindex="-1" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<label class="consent">
|
||||||
|
<input type="checkbox" name="zgoda" data-consent required>
|
||||||
|
<span>I consent to SoftSPM processing my personal data in order to be contacted about commercial and marketing matters, including offers of training, consulting and software. I may withdraw this consent at any time by writing to info@softspm.com. <span class="req">Consent required.</span></span>
|
||||||
|
</label>
|
||||||
|
<div class="verify" data-verify>
|
||||||
|
<span class="verify-label">Confirm you are not a robot</span>
|
||||||
|
<div class="verify-track" data-verify-track>
|
||||||
|
<span class="verify-fill" data-verify-fill></span>
|
||||||
|
<span class="verify-hint" data-verify-hint>Slide to verify</span>
|
||||||
|
<span class="verify-handle" data-verify-handle role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
||||||
|
<svg class="verify-chevrons" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 5 7 7-7 7M14 5l5 7-5 7"/></svg>
|
||||||
|
<svg class="verify-check" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 12 5 6 11-13"/></svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary" type="submit">Get in touch</button>
|
||||||
|
<p class="form-status" data-form-status role="status" aria-live="polite"></p>
|
||||||
|
<p class="form-note" style="margin-top: var(--space-3)">You can also write to us directly at <a href="mailto:info@softspm.com">info@softspm.com</a>.</p>
|
||||||
|
<noscript><p class="form-note">This form needs JavaScript enabled. Please write to <a href="mailto:info@softspm.com">info@softspm.com</a>.</p></noscript>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="foot">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="foot-grid">
|
||||||
|
<div>
|
||||||
|
<img class="foot-logo" src="images/spm_logo_new.png" alt="SoftSPM">
|
||||||
|
<p class="text-muted">Training, webinars, consulting and custom software for the water and wastewater sector. 25+ years in IT, in wod-kan since 2014.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Offer</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="szkolenia.html">Training (PL)</a></li>
|
||||||
|
<li><a href="szkolenia.html#webinaria">Webinars (PL)</a></li>
|
||||||
|
<li><a href="konsulting.html">Consulting (PL)</a></li>
|
||||||
|
<li><a href="#software">Custom software</a></li>
|
||||||
|
<li><a href="#platform">Course platform</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Ecosystem</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://wodociagowiec.pl/" target="_blank" rel="noopener">wodociagowiec.pl</a></li>
|
||||||
|
<li><a href="https://gieldakomunalna.pl/" target="_blank" rel="noopener">gieldakomunalna.pl</a></li>
|
||||||
|
<li><a href="#ecosystem">How it fits together</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Contact</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Ławy<br>97-400 Bełchatów, Poland</li>
|
||||||
|
<li><a href="mailto:info@softspm.com">info@softspm.com</a></li>
|
||||||
|
<li><a href="index.html">Wersja polska</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="foot-bar">
|
||||||
|
<span>SoftSPM · serving the water sector since 2014</span>
|
||||||
|
<span>Ecosystem: wodociagowiec.pl · gieldakomunalna.pl · course platform</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="assets/forms.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+573
@@ -0,0 +1,573 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>SoftSPM - szkolenia, konsulting i aplikacje dla branży wod-kan</title>
|
||||||
|
<meta name="description" content="Szkolenia, webinaria, konsulting i aplikacje pod klucz dla przedsiębiorstw wodociągowych i komunalnych. Ponad 25 lat w IT, od 2014 w branży wod-kan. Systemy webowe i mobilne, platforma kursowa, portal Wodociągowiec.pl i Giełda Komunalna.">
|
||||||
|
<link rel="icon" href="images/favicon.ico" sizes="any">
|
||||||
|
<link rel="stylesheet" href="assets/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<a class="nav-brand" href="index.html"><img src="images/spm_logo_new.png" alt="SoftSPM - systemy informatyczne"></a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="#oferta">Oferta</a>
|
||||||
|
<a href="#tematy">Tematy</a>
|
||||||
|
<a href="#terminy">Terminy</a>
|
||||||
|
<a href="#platforma">Platforma</a>
|
||||||
|
<a href="#aplikacje">Aplikacje</a>
|
||||||
|
<a href="#ekosystem">Ekosystem</a>
|
||||||
|
<a href="szkolenia.html">Szkolenia</a>
|
||||||
|
<a href="konsulting.html">Konsulting</a>
|
||||||
|
<a class="nav-keep" href="index-en.html" title="English version">EN</a>
|
||||||
|
<a class="btn btn-primary nav-keep" href="szkolenia.html#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="wrap">
|
||||||
|
|
||||||
|
<!-- ── Hero ─────────────────────────────────────────────────────────── -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-grid">
|
||||||
|
<div>
|
||||||
|
<h1 class="display"><span class="line">Wiedza wod-kan.</span> <span class="line">W praktyce od 2014.</span></h1>
|
||||||
|
<p class="sub">Szkolenia, webinaria, konsulting i <strong>aplikacje pod klucz</strong> dla przedsiębiorstw wodociągowych i komunalnych. Uczymy tego, co sami robimy - bo od ponad 25 lat piszemy oprogramowanie, a od 2014 roku robimy to dla branży wod-kan. Prowadzimy portal <strong>Wodociągowiec.pl</strong> oraz <strong>Giełdę Komunalną</strong> - bezpłatny marketplace, na którym branża kupuje, sprzedaje i wymienia sprzęt.</p>
|
||||||
|
<div class="row">
|
||||||
|
<a class="btn btn-primary btn-lg" href="#terminy">Zobacz program szkoleń</a>
|
||||||
|
<a class="btn btn-ghost btn-lg" href="konsulting.html#kontakt">Umów konsultację</a>
|
||||||
|
</div>
|
||||||
|
<div class="hero-marks">
|
||||||
|
<span>25+ lat w IT</span>
|
||||||
|
<span>Od 2014 w wod-kan</span>
|
||||||
|
<span>480+ przeszkolonych</span>
|
||||||
|
<span>Wdrożenia w PL i za granicą</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<figure class="figure hero-figure" style="margin:0">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/szkolenia.svg" alt="Sala szkoleniowa: prowadzący przy ekranie z danymi i uczestnicy przy stanowiskach" width="640" height="360">
|
||||||
|
<figcaption>Rys. 01 - Szkolenie w grupie do 12 osób, ćwiczenia na realnych danych</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 01 · Doświadczenie w liczbach ────────────────────────────────── -->
|
||||||
|
<section class="section-tight" id="liczby" aria-label="SoftSPM - doświadczenie w liczbach">
|
||||||
|
<div class="plate">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<header class="title-block">
|
||||||
|
<span class="tb-title">SoftSPM - doświadczenie w liczbach</span>
|
||||||
|
<span class="tb-cell">SPM-2026</span>
|
||||||
|
<span class="tb-cell">Rev A</span>
|
||||||
|
<span class="tb-cell">Arkusz 01 z 06</span>
|
||||||
|
</header>
|
||||||
|
<table class="table spec">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">Nr</th><th scope="col">Pozycja</th><th scope="col">Wartość</th><th scope="col">Uwagi</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="s-num">01</td><td class="s-prop">Doświadczenie w IT</td><td class="s-val">25+ lat</td><td class="s-rem">Od systemów desktopowych po aplikacje mobilne</td></tr>
|
||||||
|
<tr><td class="s-num">02</td><td class="s-prop">Na rynku wod-kan</td><td class="s-val">od 2014</td><td class="s-rem">12 lat pracy z przedsiębiorstwami komunalnymi</td></tr>
|
||||||
|
<tr><td class="s-num">03</td><td class="s-prop">Przeszkoleni specjaliści</td><td class="s-val">480+</td><td class="s-rem">Szkolenia stacjonarne i online</td></tr>
|
||||||
|
<tr><td class="s-num">04</td><td class="s-prop">Webinariów rocznie</td><td class="s-val">24</td><td class="s-rem">Na własnej platformie kursowej</td></tr>
|
||||||
|
<tr><td class="s-num">05</td><td class="s-prop">Projekty doradcze</td><td class="s-val">60+</td><td class="s-rem">Organizacja, taryfy, cyfryzacja, zamówienia</td></tr>
|
||||||
|
<tr><td class="s-num">06</td><td class="s-prop">Zasięg ekosystemu</td><td class="s-val">2 serwisy</td><td class="s-rem">Portal Wodociągowiec.pl i marketplace Giełda Komunalna</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p class="sheet-note">Wartości przykładowe - do potwierdzenia przed publikacją.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 02 · Oferta ──────────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="oferta">
|
||||||
|
<span class="kicker">02 · Oferta</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Cztery sposoby, żeby skorzystać z naszego doświadczenia</h2>
|
||||||
|
<p class="text-muted">Od aplikacji pisanej na zamówienie po pojedynczy webinar. Wszystko robią ci sami ludzie - to, co pojawia się we wdrożeniu u klienta, trafia potem na szkolenie.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cells cells-4">
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.1</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="m8 6-6 6 6 6M16 6l6 6-6 6M14 4l-4 16"/></svg>
|
||||||
|
<h2>Aplikacje pod klucz</h2>
|
||||||
|
<p>Piszemy oprogramowanie na zamówienie: systemy webowe i aplikacje mobilne budowane pod wymagania klienta. Doradzamy też przy wdrożeniach dużych systemów zintegrowanych. Ponad 25 lat w IT, wdrożenia w kraju i za granicą.</p>
|
||||||
|
<a class="cell-link" href="#aplikacje">Zobacz, jak pracujemy →</a>
|
||||||
|
</div>
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.2</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 3v18h18"/><path d="m7 15 4-5 3 3 5-7"/></svg>
|
||||||
|
<h2>Konsulting</h2>
|
||||||
|
<p>Wsparcie przy wniosku taryfowym, przeglądzie organizacji, przygotowaniu postępowania i planie cyfryzacji. Raport kończy się listą decyzji z kosztami i terminami, nie zbiorem ogólników.</p>
|
||||||
|
<a class="cell-link" href="konsulting.html">Zakres konsultingu →</a>
|
||||||
|
</div>
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.3</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 10 12 5 2 10l10 5 10-5Z"/><path d="M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/></svg>
|
||||||
|
<h2>Szkolenia</h2>
|
||||||
|
<p>Stacjonarne i online, w grupach do 12 osób. Prawo i taryfy, zarządzanie przedsiębiorstwem, zamówienia publiczne, obsługa odbiorcy, cyfryzacja. Ćwiczenia na dokumentach i danych, nie wykład z prezentacji.</p>
|
||||||
|
<a class="cell-link" href="szkolenia.html">Katalog szkoleń →</a>
|
||||||
|
</div>
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.4</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="14" height="14" rx="1"/><path d="m16 10 6-4v12l-6-4"/></svg>
|
||||||
|
<h2>Webinaria</h2>
|
||||||
|
<p>Dwa spotkania w miesiącu, po dwie godziny: zmiany w przepisach, przypadki z branży, pytania od uczestników. Na żywo z sesją Q&A, potem jako nagranie na platformie kursowej.</p>
|
||||||
|
<a class="cell-link" href="szkolenia.html#webinaria">Kalendarz webinariów →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 03 · Tematy ──────────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="tematy">
|
||||||
|
<span class="kicker">03 · Ścieżki tematyczne</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Osiem obszarów, w których branża najczęściej pyta</h2>
|
||||||
|
<p class="text-muted">Program układamy z tego, co realnie spływa do redakcji Wodociągowca i z tego, czego branża szuka na Giełdzie Komunalnej. Pierwsze cztery ścieżki dotyczą prawa i organizacji, trzy kolejne - systemów, którymi to wszystko obsługujecie, a ostatnia spina jedno z drugim w plan cyfryzacji. Jeśli temat wraca co tydzień, trafia do katalogu szkoleń.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cells cells-2">
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-prawo.svg" alt="Dokument taryfowy, paragraf i pieczęć zatwierdzenia" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 01</span><span class="tag tag-outline">Prawo i taryfy</span></div>
|
||||||
|
<h3>Prawo wodne i wniosek taryfowy</h3>
|
||||||
|
<p>Zmiany w przepisach i ich skutki operacyjne, przygotowanie i obrona wniosku taryfowego przed Wodami Polskimi, kalkulacja niezbędnych przychodów, sprawozdawczość i jakość wody.</p>
|
||||||
|
<div class="course-meta"><span>2 dni · 16 h</span><span>Stacjonarnie / online</span></div>
|
||||||
|
<a class="cell-link" href="szkolenia.html#sciezka-01">Zobacz program →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-zarzadzanie.svg" alt="Wskaźniki finansowe i struktura kosztów przedsiębiorstwa" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 02</span><span class="tag tag-outline">Zarządzanie</span></div>
|
||||||
|
<h3>Zarządzanie przedsiębiorstwem wod-kan</h3>
|
||||||
|
<p>Rachunek kosztów i kalkulacja ceny m³, wskaźniki efektywności, plan wieloletni i uzasadnianie inwestycji przed radą, komunikacja z właścicielem samorządowym i mieszkańcami.</p>
|
||||||
|
<div class="course-meta"><span>2 dni · 16 h</span><span>Stacjonarnie / online</span></div>
|
||||||
|
<a class="cell-link" href="szkolenia.html#sciezka-02">Zobacz program →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-zamowienia.svg" alt="Porównanie ofert i kryteria oceny w postępowaniu" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 03</span><span class="tag tag-outline">Zamówienia</span></div>
|
||||||
|
<h3>Zamówienia publiczne w praktyce</h3>
|
||||||
|
<p>Opis przedmiotu zamówienia, który nie kończy się aneksem, kryteria pozacenowe i koszt cyklu życia, ocena ofert, najczęstsze zarzuty odwoławcze i jak ich uniknąć.</p>
|
||||||
|
<div class="course-meta"><span>2 dni · 16 h</span><span>Stacjonarnie / online</span></div>
|
||||||
|
<a class="cell-link" href="szkolenia.html#sciezka-03">Zobacz program →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-klient.svg" alt="Zgłoszenie odbiorcy, rozliczenie i komunikacja" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 04</span><span class="tag tag-outline">Obsługa klienta</span></div>
|
||||||
|
<h3>Obsługa odbiorcy, umowy i billing</h3>
|
||||||
|
<p>Umowy z odbiorcami i ich egzekwowanie, reklamacje i trudne rozmowy, windykacja należności, odczyty zdalne i rozliczenia, standardy obsługi w biurze i w terenie.</p>
|
||||||
|
<div class="course-meta"><span>1 dzień · 8 h</span><span>Stacjonarnie / online</span></div>
|
||||||
|
<a class="cell-link" href="szkolenia.html#sciezka-04">Zobacz program →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="cells cells-2" style="margin-top: calc(1.5 * var(--leading))">
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-scada.svg" alt="Pulpit dyspozytorski: obiekty sieci, trend pomiarowy i sygnalizacja alarmu" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 05</span><span class="tag tag-outline">SCADA</span></div>
|
||||||
|
<h3>Zarządzanie i monitoring systemów SCADA</h3>
|
||||||
|
<p>Jak czytać pulpit dyspozytorski i nie utonąć w alarmach: progi i histereza zamiast fałszywych zgłoszeń, priorytety zdarzeń, dyżury i eskalacja, archiwizacja pomiarów, raporty dla zarządu z tych samych danych, na których pracuje dyspozytor.</p>
|
||||||
|
<div class="course-meta"><span>2 dni · 16 h</span><span>Stacjonarnie / online</span></div>
|
||||||
|
<a class="cell-link" href="szkolenia.html#sciezka-05">Zobacz program →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-audyt.svg" alt="Audyt bezpieczeństwa: tarcza zgodności NIS2 i lista podatności z poziomami ryzyka" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 06</span><span class="tag tag-outline">Bezpieczeństwo</span></div>
|
||||||
|
<h3>Audyty bezpieczeństwa i zgodność NIS2</h3>
|
||||||
|
<p>Sektor wodociągowy to infrastruktura krytyczna, więc NIS2 obowiązuje, a nie sugeruje. Inwentaryzacja systemów i dostępów, segmentacja sieci biurowej od technologicznej, kopie zapasowe, które da się odtworzyć, plan reakcji na incydent i obowiązki zgłoszeniowe.</p>
|
||||||
|
<div class="course-meta"><span>2 dni · 16 h</span><span>Stacjonarnie / online</span></div>
|
||||||
|
<a class="cell-link" href="szkolenia.html#sciezka-06">Zobacz program →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: calc(1.5 * var(--leading))">
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<div class="split" style="gap: 0; align-items: stretch">
|
||||||
|
<img class="plot" src="assets/img/kurs-integracje.svg" alt="Magistrala danych łącząca ERP, CRM, TAX i billing z raportowaniem oraz aplikacjami" width="480" height="270" style="height:100%">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 07</span><span class="tag tag-outline">Integracje</span></div>
|
||||||
|
<h3>Integracja z systemami klasy ERP, CRM i podatkowymi</h3>
|
||||||
|
<p>Najczęstszy problem cyfryzacji nie brzmi „którego systemu użyć”, tylko „dlaczego te dane się nie zgadzają”. Uczymy, jak zaplanować wymianę danych między ERP, CRM, systemami podatkowymi i billingiem: co jest źródłem prawdy dla której informacji, jak uzgadniać salda i kartoteki, czym różni się integracja wsadowa od API, jak opisać wymagania integracyjne w postępowaniu i jak testować odbiór.</p>
|
||||||
|
<div class="course-meta"><span>2 dni · 16 h</span><span>Stacjonarnie / online</span><span>Poziom: zaawansowany</span></div>
|
||||||
|
<a class="cell-link" href="szkolenia.html#sciezka-07">Zobacz program →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: calc(1.5 * var(--leading))">
|
||||||
|
<article class="course" id="sciezka-cyfryzacja">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<div class="split" style="gap: 0; align-items: stretch">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 08</span><span class="tag tag-outline">Cyfryzacja</span></div>
|
||||||
|
<h3>Cyfryzacja przedsiębiorstwa wod-kan</h3>
|
||||||
|
<p>Ścieżka domykająca pozostałe: przekłada wiedzę z prawa, organizacji i systemów na jeden plan działania. Od papieru do systemu - inwentaryzacja majątku, obieg zleceń i dokumentów, integracja billingu z odczytami, dobór dostawcy i pisanie wymagań, realny harmonogram rozłożony na etapy budżetowe. Dla kadry, która ma to zaplanować i obronić przed zarządem.</p>
|
||||||
|
<div class="course-meta"><span>2 dni · 16 h</span><span>Stacjonarnie / online</span><span>Poziom: średni</span></div>
|
||||||
|
<a class="cell-link" href="szkolenia.html#sciezka-08">Zobacz program →</a>
|
||||||
|
</div>
|
||||||
|
<img class="plot" src="assets/img/kurs-cyfryzacja.svg" alt="Od papierowej dokumentacji do systemu centralnego z modułami i etapowym planem wdrożenia" width="480" height="270" style="height:100%">
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 04 · Najbliższe terminy ──────────────────────────────────────── -->
|
||||||
|
<section class="section" id="terminy">
|
||||||
|
<span class="kicker">04 · Harmonogram</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Terminy najbliższej edycji ustalamy</h2>
|
||||||
|
<p class="text-muted">Poniżej tematy, które wchodzą do programu jako pierwsze. Daty podajemy, gdy domkniemy salę i skład prowadzących - zwykle z sześciotygodniowym wyprzedzeniem.</p>
|
||||||
|
</div>
|
||||||
|
<div class="plate">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<header class="title-block">
|
||||||
|
<span class="tb-title">Tematy w przygotowaniu</span>
|
||||||
|
<span class="tb-cell">SPM-2026</span>
|
||||||
|
<span class="tb-cell">Rev A</span>
|
||||||
|
<span class="tb-cell">Arkusz 02 z 06</span>
|
||||||
|
</header>
|
||||||
|
<table class="table sched">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">Termin</th><th scope="col">Temat</th><th scope="col">Forma</th><th scope="col">Miejsce</th><th scope="col"><span class="visually-hidden">Zapisy</span></th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class="s-date"><span class="tag tag-soon">Wkrótce</span></td>
|
||||||
|
<td class="s-topic">Wniosek taryfowy - przygotowanie i obrona</td>
|
||||||
|
<td class="s-form"><span class="tag tag-accent">Szkolenie</span></td>
|
||||||
|
<td class="s-place">Bełchatów</td>
|
||||||
|
<td class="s-act"><a class="sign" href="szkolenia.html#zgloszenie">Powiadom mnie →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="s-date"><span class="tag tag-soon">Wkrótce</span></td>
|
||||||
|
<td class="s-topic">Zmiany w Prawie wodnym - co dotyczy przedsiębiorstw</td>
|
||||||
|
<td class="s-form"><span class="tag tag-outline">Webinar</span></td>
|
||||||
|
<td class="s-place">Online</td>
|
||||||
|
<td class="s-act"><a class="sign" href="szkolenia.html#zgloszenie">Powiadom mnie →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="s-date"><span class="tag tag-soon">Wkrótce</span></td>
|
||||||
|
<td class="s-topic">Kryteria pozacenowe w postępowaniu - warsztat</td>
|
||||||
|
<td class="s-form"><span class="tag tag-outline">Webinar</span></td>
|
||||||
|
<td class="s-place">Online</td>
|
||||||
|
<td class="s-act"><a class="sign" href="szkolenia.html#zgloszenie">Powiadom mnie →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="s-date"><span class="tag tag-soon">Wkrótce</span></td>
|
||||||
|
<td class="s-topic">Cyfryzacja przedsiębiorstwa wod-kan</td>
|
||||||
|
<td class="s-form"><span class="tag tag-accent">Szkolenie</span></td>
|
||||||
|
<td class="s-place">Online</td>
|
||||||
|
<td class="s-act"><a class="sign" href="szkolenia.html#zgloszenie">Powiadom mnie →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="s-date"><span class="tag tag-soon">Wkrótce</span></td>
|
||||||
|
<td class="s-topic">Taryfy 2027 - kalkulacja i najczęstsze błędy</td>
|
||||||
|
<td class="s-form"><span class="tag tag-outline">Webinar</span></td>
|
||||||
|
<td class="s-place">Online</td>
|
||||||
|
<td class="s-act"><a class="sign" href="szkolenia.html#zgloszenie">Powiadom mnie →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="s-date"><span class="tag tag-soon">Wkrótce</span></td>
|
||||||
|
<td class="s-topic">Windykacja i trudny odbiorca - warsztat</td>
|
||||||
|
<td class="s-form"><span class="tag tag-accent">Szkolenie</span></td>
|
||||||
|
<td class="s-place">Bełchatów</td>
|
||||||
|
<td class="s-act"><a class="sign" href="szkolenia.html#zgloszenie">Powiadom mnie →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="s-date"><span class="tag tag-soon">Wkrótce</span></td>
|
||||||
|
<td class="s-topic">Audyt bezpieczeństwa systemów - od czego zacząć</td>
|
||||||
|
<td class="s-form"><span class="tag tag-accent">Szkolenie</span></td>
|
||||||
|
<td class="s-place">Bełchatów</td>
|
||||||
|
<td class="s-act"><a class="sign" href="szkolenia.html#zgloszenie">Powiadom mnie →</a></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="s-date"><span class="tag tag-soon">Wkrótce</span></td>
|
||||||
|
<td class="s-topic">NIS2 i infrastruktura krytyczna - obowiązki przedsiębiorstwa</td>
|
||||||
|
<td class="s-form"><span class="tag tag-outline">Webinar</span></td>
|
||||||
|
<td class="s-place">Online</td>
|
||||||
|
<td class="s-act"><a class="sign" href="szkolenia.html#zgloszenie">Powiadom mnie →</a></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p class="sheet-note">Ustalamy terminy najbliższej edycji. Zostaw kontakt przy wybranym temacie na stronie <a href="szkolenia.html#terminy">Szkolenia i webinaria</a> - odezwiemy się, gdy otworzymy zapisy.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 05 · Platforma kursowa ───────────────────────────────────────── -->
|
||||||
|
<section class="section" id="platforma">
|
||||||
|
<span class="kicker">05 · Platforma kursowa</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="split">
|
||||||
|
<div>
|
||||||
|
<h2 class="split-title">Webinary i e-learning w jednym miejscu</h2>
|
||||||
|
<p class="lead">Nasza własna platforma do prowadzenia kursów: webinaria na żywo, kursy on-demand, testy i certyfikaty. Materiał zostaje z Tobą - wracasz do nagrań i dokumentów, kiedy ich potrzebujesz.</p>
|
||||||
|
<ul class="checks">
|
||||||
|
<li>Webinaria na żywo z czatem i sesją pytań do prowadzącego</li>
|
||||||
|
<li>Nagrania dostępne bezterminowo w ramach wykupionego dostępu</li>
|
||||||
|
<li>Materiały do pobrania: wzory pism, arkusze kalkulacyjne, listy kontrolne</li>
|
||||||
|
<li>Testy sprawdzające i certyfikat ukończenia dla pracodawcy</li>
|
||||||
|
<li>Panel kursanta z postępem nauki i historią szkoleń całego zespołu</li>
|
||||||
|
<li>Konto firmowe - jeden dostęp dla wielu pracowników</li>
|
||||||
|
</ul>
|
||||||
|
<a class="btn btn-primary" href="#">Przejdź do platformy</a>
|
||||||
|
</div>
|
||||||
|
<figure class="figure split-media" style="margin:0">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/platforma.svg" alt="Panel kursanta: postęp kursów, agenda webinariów i znacznik transmisji na żywo" width="640" height="360">
|
||||||
|
<figcaption>Rys. 02 - Panel kursanta: postęp nauki i nadchodzące webinaria</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 06 · Aplikacje pod klucz ─────────────────────────────────────── -->
|
||||||
|
<section class="section" id="aplikacje">
|
||||||
|
<span class="kicker">06 · Aplikacje pod klucz</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Budujemy oprogramowanie na zamówienie</h2>
|
||||||
|
<p class="text-muted">Platforma kursowa, na której prowadzimy webinaria, portal Wodociągowiec i Giełda Komunalna - to nasze własne wdrożenia. Tę samą robotę wykonujemy dla klientów: analizujemy potrzebę, projektujemy, programujemy i oddajemy działający system. Pod klucz, bez podwykonawców. Doradzamy również przy wdrożeniach dużych systemów zintegrowanych - stojąc po stronie zamawiającego, nie dostawcy.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="split" style="margin-bottom: calc(1.5 * var(--leading))">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: clamp(24px, 2.6vw, 32px); text-transform: uppercase; margin-bottom: var(--space-4)">Ponad 25 lat w IT</h3>
|
||||||
|
<p class="lead">Zaczynaliśmy, zanim „aplikacja” znaczyła coś w telefonie. Od 2014 roku łączymy to z praktyczną znajomością branży wod-kan, więc nie trzeba nam tłumaczyć, czym jest taryfa, odczyt czy zlecenie serwisowe. Rozumiemy dziedzinę i piszemy kod - to rzadkie połączenie.</p>
|
||||||
|
<ul class="checks">
|
||||||
|
<li>Systemy webowe: panele, ewidencje, obiegi dokumentów, raportowanie</li>
|
||||||
|
<li>Aplikacje mobilne na Androida i iOS - aplikacja brygady do pracy w terenie, także offline</li>
|
||||||
|
<li>Integracje z systemami, które już u Was działają - billing, GIS, elektroniczna książka eksploatacji, księgowość, eksploatacja ujęć i pomp oraz monitoring całej sieci</li>
|
||||||
|
<li>Migracja danych ze starych systemów i arkuszy kalkulacyjnych</li>
|
||||||
|
<li>Doradztwo przy wdrożeniach dużych systemów zintegrowanych - ERP, GIS, billing</li>
|
||||||
|
<li>Wdrożenie, szkolenie użytkowników i opieka serwisowa po starcie</li>
|
||||||
|
<li>Kod i dokumentacja zostają u klienta - bez uzależnienia od dostawcy</li>
|
||||||
|
<li>Wiedza i doświadczenie poparte wdrożeniami w Polsce i poza granicami</li>
|
||||||
|
</ul>
|
||||||
|
<a class="btn btn-primary" href="konsulting.html#kontakt">Opisz swój projekt</a>
|
||||||
|
</div>
|
||||||
|
<figure class="figure split-media" style="margin:0">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/aplikacje.svg" alt="Od wymagań klienta do systemu webowego i aplikacji brygady: analiza, projekt, programowanie, testy, wdrożenie" width="640" height="360">
|
||||||
|
<figcaption>Rys. 03 - Od wymagań do wdrożenia: system webowy i aplikacja brygady</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="plate">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<header class="title-block">
|
||||||
|
<span class="tb-title">Realizacja pod klucz - zakres i warunki</span>
|
||||||
|
<span class="tb-cell">SPM-2026</span>
|
||||||
|
<span class="tb-cell">Rev A</span>
|
||||||
|
<span class="tb-cell">Arkusz 03 z 06</span>
|
||||||
|
</header>
|
||||||
|
<table class="table spec">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">Nr</th><th scope="col">Pozycja</th><th scope="col">Wartość</th><th scope="col">Uwagi</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="s-num">01</td><td class="s-prop">Doświadczenie w IT</td><td class="s-val">25+ lat</td><td class="s-rem">Od systemów desktopowych po aplikacje mobilne</td></tr>
|
||||||
|
<tr><td class="s-num">02</td><td class="s-prop">Model współpracy</td><td class="s-val">pod klucz</td><td class="s-rem">Analiza, projekt, kod, testy, wdrożenie i serwis</td></tr>
|
||||||
|
<tr><td class="s-num">03</td><td class="s-prop">Platformy</td><td class="s-val">web + mobile</td><td class="s-rem">Przeglądarka, Android, iOS - wspólne dane</td></tr>
|
||||||
|
<tr><td class="s-num">04</td><td class="s-prop">Wycena i harmonogram</td><td class="s-val">przed startem</td><td class="s-rem">Stały zakres i termin uzgodnione w umowie</td></tr>
|
||||||
|
<tr><td class="s-num">05</td><td class="s-prop">Prawa do kodu</td><td class="s-val">klient</td><td class="s-rem">Kod źródłowy i dokumentacja przekazywane w komplecie</td></tr>
|
||||||
|
<tr><td class="s-num">06</td><td class="s-prop">Rola doradcza</td><td class="s-val">po stronie klienta</td><td class="s-rem">Nadzór nad wdrożeniem dużego systemu zintegrowanego</td></tr>
|
||||||
|
<tr><td class="s-num">07</td><td class="s-prop">Zasięg wdrożeń</td><td class="s-val">PL i zagranica</td><td class="s-rem">Systemy eksploatacji ujęć, pomp i monitoringu sieci</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p class="sheet-note">Zakres ustalamy indywidualnie - powyższe warunki to nasz standard współpracy.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 07 · Ekosystem ───────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="ekosystem">
|
||||||
|
<span class="kicker">07 · Ekosystem</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Portal, marketplace i platforma kursowa - jeden obieg</h2>
|
||||||
|
<p class="text-muted">Nie zaczynamy od pustej kartki. Prowadzimy dwa serwisy, z których branża wod-kan korzysta na co dzień - i to one podpowiadają nam, czego uczyć. Pytania czytelników portalu stają się tematami webinariów, ogłoszenia na giełdzie pokazują, czego rynkowi realnie brakuje, a uczestnicy szkoleń poznają tam producentów i wykonawców, których wcześniej szukali po znajomych.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<figure class="figure" style="margin: 0 0 calc(1.5 * var(--leading))">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/ekosystem.svg" alt="Schemat: portal Wodociągowiec.pl i marketplace Giełda Komunalna wymieniają tematy, praktyków i ogłoszenia z platformą kursową w centrum" width="720" height="400">
|
||||||
|
<figcaption>Schemat 01 - Obieg wiedzy: portal i marketplace zasilają platformę kursową, absolwenci wracają na rynek</figcaption>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="cells cells-2" style="margin-bottom: calc(1.5 * var(--leading))">
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-portal.svg" alt="Artykuł branżowy z wykresem i komentarzami czytelników" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Portal</span><span class="tag tag-outline">Wiedza</span></div>
|
||||||
|
<h3>Wodociągowiec.pl</h3>
|
||||||
|
<p>Portal branżowy dla wodociągowców: artykuły techniczne i prawne, przypadki z eksploatacji, omówienia zmian w przepisach, pytania czytelników i odpowiedzi ekspertów. Stąd bierzemy tematy, które wracają najczęściej - i z nich układamy program webinariów.</p>
|
||||||
|
<div class="course-meta"><span>Artykuły i analizy</span><span>Komentarze branży</span></div>
|
||||||
|
<a class="cell-link" href="https://wodociagowiec.pl/" target="_blank" rel="noopener">Przejdź do wodociagowiec.pl →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-gielda.svg" alt="Marketplace: ogłoszenia sprzedaży i poszukiwane, kojarzenie stron" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Marketplace</span><span class="tag tag-outline">Nowość</span></div>
|
||||||
|
<h3>Giełda Komunalna</h3>
|
||||||
|
<p>Nowy marketplace dla branży komunalnej. Bezpłatnie wystawisz, sprzedasz, kupisz albo wymienisz to, co zalega w magazynie: nadwyżki z inwestycji, sprzęt po modernizacji, części do urządzeń, których nikt już nie produkuje. Rzecz leżąca u Ciebie bezużytecznie bywa dokładnie tym, czego ktoś szuka od pół roku.</p>
|
||||||
|
<div class="course-meta"><span>Wystawianie za darmo</span><span>Kupno · sprzedaż · wymiana</span></div>
|
||||||
|
<a class="cell-link" href="https://gieldakomunalna.pl/" target="_blank" rel="noopener">Wystaw za darmo na gieldakomunalna.pl →</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="eco">
|
||||||
|
<div class="eco-item">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h3>Tematy z rynku</h3>
|
||||||
|
<p>Pytanie, które wraca na portalu trzeci raz w miesiącu, trafia do programu najbliższego webinaru. Nie zgadujemy, czego branża potrzebuje - widzimy to w statystykach czytelnictwa i w zapytaniach.</p>
|
||||||
|
<span class="eco-url">Portal → Platforma</span>
|
||||||
|
</div>
|
||||||
|
<div class="eco-item">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h3>Branża, która się zna</h3>
|
||||||
|
<p>Wod-kan to rynek niszowy: producentów specjalistycznego osprzętu i wykonawców jest garstka, a każdy siedzi w innym województwie. Giełda zrzesza ich w jednym miejscu, żeby nie trzeba było szukać po znajomych.</p>
|
||||||
|
<span class="eco-url">Giełda → Producenci i wykonawcy</span>
|
||||||
|
</div>
|
||||||
|
<div class="eco-item">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h3>Magazyn zamiast złomu</h3>
|
||||||
|
<p>Nadwyżka z inwestycji sprzed dwóch lat leży, bo szkoda wyrzucić, a nie ma komu oddać. Ktoś sto kilometrów dalej szuka dokładnie tego. Giełda kojarzy obie strony - bez prowizji i bez opłat za wystawienie.</p>
|
||||||
|
<span class="eco-url">Magazyn → Drugie życie</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── Opinia ───────────────────────────────────────────────────────── -->
|
||||||
|
<section class="quote">
|
||||||
|
<figure style="margin:0">
|
||||||
|
<blockquote>„Przyszliśmy po szkolenie z taryf, a wyszliśmy z gotowym harmonogramem prac na cały wniosek.”</blockquote>
|
||||||
|
<figcaption>- kierownik działu ekonomicznego, PWiK (referencja przykładowa)</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 08 · Newsletter ──────────────────────────────────────────────── -->
|
||||||
|
<section class="section-tight" id="newsletter">
|
||||||
|
<span class="kicker">08 · Newsletter</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="cta-band">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h2 style="text-transform:uppercase">Raz w miesiącu, konkretnie</h2>
|
||||||
|
<p class="lead">Terminy szkoleń i webinariów, krótkie omówienie zmian w przepisach i jedna rzecz z praktyki, którą warto sprawdzić u siebie. Bez spamu - branża nie jest impulsywna.</p>
|
||||||
|
<form data-form="newsletter" action="api/send.php" method="post">
|
||||||
|
<div class="form-row">
|
||||||
|
<label class="visually-hidden" for="nl-email">Adres e-mail</label>
|
||||||
|
<input class="input" id="nl-email" type="email" name="email" placeholder="imie.nazwisko@przedsiebiorstwo.pl" autocomplete="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="hp" aria-hidden="true">
|
||||||
|
<label for="nl-www">Nie wypełniaj tego pola</label>
|
||||||
|
<input id="nl-www" type="text" name="firma_www" tabindex="-1" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<label class="consent">
|
||||||
|
<input type="checkbox" name="zgoda" data-consent required>
|
||||||
|
<span>Wyrażam zgodę na przetwarzanie moich danych osobowych przez SoftSPM w celu kontaktu handlowego i marketingowego, w tym przedstawienia oferty szkoleń, konsultingu i aplikacji. Zgodę mogę wycofać w każdej chwili, pisząc na info@softspm.com. <span class="req">Zgoda wymagana.</span></span>
|
||||||
|
</label>
|
||||||
|
<div class="verify" data-verify>
|
||||||
|
<span class="verify-label">Potwierdź, że nie jesteś robotem</span>
|
||||||
|
<div class="verify-track" data-verify-track>
|
||||||
|
<span class="verify-fill" data-verify-fill></span>
|
||||||
|
<span class="verify-hint" data-verify-hint>Przesuń, aby zweryfikować</span>
|
||||||
|
<span class="verify-handle" data-verify-handle role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
||||||
|
<svg class="verify-chevrons" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 5 7 7-7 7M14 5l5 7-5 7"/></svg>
|
||||||
|
<svg class="verify-check" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 12 5 6 11-13"/></svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary" type="submit">Zapisz się</button>
|
||||||
|
<p class="form-status" data-form-status role="status" aria-live="polite"></p>
|
||||||
|
<p class="form-note" style="margin-top: var(--space-3)">Raz w miesiącu, bez spamu. Rezygnacja w każdej chwili.</p>
|
||||||
|
<noscript><p class="form-note">Formularz wymaga włączonego JavaScriptu. Zapisy przyjmujemy też na <a href="mailto:info@softspm.com">info@softspm.com</a>.</p></noscript>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ── Stopka ─────────────────────────────────────────────────────────── -->
|
||||||
|
<footer class="foot">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="foot-grid">
|
||||||
|
<div>
|
||||||
|
<img class="foot-logo" src="images/spm_logo_new.png" alt="SoftSPM - systemy informatyczne">
|
||||||
|
<p class="text-muted">Szkolenia, webinaria, konsulting i aplikacje pod klucz dla branży wodociągowo-kanalizacyjnej. Ponad 25 lat w IT, od 2014 roku w wod-kan.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Oferta</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="szkolenia.html">Szkolenia i kursy</a></li>
|
||||||
|
<li><a href="szkolenia.html#webinaria">Webinaria</a></li>
|
||||||
|
<li><a href="konsulting.html">Konsulting</a></li>
|
||||||
|
<li><a href="#aplikacje">Aplikacje pod klucz</a></li>
|
||||||
|
<li><a href="#platforma">Platforma kursowa</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Ekosystem</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://wodociagowiec.pl/" target="_blank" rel="noopener">wodociagowiec.pl</a></li>
|
||||||
|
<li><a href="https://gieldakomunalna.pl/" target="_blank" rel="noopener">gieldakomunalna.pl</a></li>
|
||||||
|
<li><a href="#ekosystem">Jak to działa razem</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Kontakt</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Ławy<br>97-400 Bełchatów</li>
|
||||||
|
<li><a href="mailto:info@softspm.com">info@softspm.com</a></li>
|
||||||
|
<li><a href="index-en.html">English version</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="foot-bar">
|
||||||
|
<span>SoftSPM · od 2014 dla branży wod-kan</span>
|
||||||
|
<span>Ekosystem: wodociagowiec.pl · gieldakomunalna.pl · platforma kursowa</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="assets/forms.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+358
@@ -0,0 +1,358 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Konsulting dla przedsiębiorstw wod-kan - SoftSPM</title>
|
||||||
|
<meta name="description" content="Doradztwo dla przedsiębiorstw wodociągowych: wniosek taryfowy, organizacja i wskaźniki, przygotowanie postępowania, plan cyfryzacji, nadzór nad wdrożeniem systemów zintegrowanych, audyt bezpieczeństwa i NIS2, integracje ERP/CRM. Raport kończy się listą decyzji.">
|
||||||
|
<link rel="icon" href="images/favicon.ico" sizes="any">
|
||||||
|
<link rel="stylesheet" href="assets/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<a class="nav-brand" href="index.html"><img src="images/spm_logo_new.png" alt="SoftSPM - systemy informatyczne"></a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="index.html#oferta">Oferta</a>
|
||||||
|
<a href="#zakres">Zakres</a>
|
||||||
|
<a href="#przebieg">Przebieg</a>
|
||||||
|
<a href="#zespol">Zespół</a>
|
||||||
|
<a href="szkolenia.html">Szkolenia</a>
|
||||||
|
<a href="konsulting.html" aria-current="page">Konsulting</a>
|
||||||
|
<a class="nav-keep" href="index-en.html" title="English version">EN</a>
|
||||||
|
<a class="btn btn-primary nav-keep" href="#kontakt">Umów rozmowę</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="wrap">
|
||||||
|
|
||||||
|
<!-- ── Hero ─────────────────────────────────────────────────────────── -->
|
||||||
|
<section class="page-hero">
|
||||||
|
<span class="kicker">01 · Konsulting</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<h1>Doradztwo, które kończy się decyzją</h1>
|
||||||
|
<p class="lead">Wspieramy przedsiębiorstwa wodociągowe i komunalne tam, gdzie sprawa jest zbyt duża na szkolenie: wniosek taryfowy, przegląd organizacji, przygotowanie postępowania, plan cyfryzacji, nadzór nad wdrożeniem dużego systemu, audyt bezpieczeństwa i uporządkowanie integracji. Raport zamykamy listą decyzji z kosztami i terminami - nie zbiorem rekomendacji do rozważenia.</p>
|
||||||
|
<div class="row" style="display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top: calc(1.5 * var(--leading))">
|
||||||
|
<a class="btn btn-primary btn-lg" href="#kontakt">Umów bezpłatną rozmowę</a>
|
||||||
|
<a class="btn btn-ghost btn-lg" href="#zakres">Zobacz zakres usług</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 02 · Zakres usług ────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="zakres">
|
||||||
|
<span class="kicker">02 · Zakres usług</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Siedem obszarów doradztwa</h2>
|
||||||
|
<p class="text-muted">Każdy projekt zaczynamy od przeglądu dokumentów i rozmów z ludźmi, którzy wykonują pracę. Dopiero potem proponujemy rozwiązanie - także wtedy, gdy propozycją jest niezmienianie niczego. Cztery pierwsze obszary dotyczą organizacji i finansów, trzy kolejne - systemów, w których ta organizacja pracuje.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cells cells-2">
|
||||||
|
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.1</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"/><path d="M14 2v6h6M8 13h8M8 17h5"/></svg>
|
||||||
|
<h3>Wniosek taryfowy - wsparcie i weryfikacja</h3>
|
||||||
|
<p>Przegląd kalkulacji niezbędnych przychodów, spójność założeń z planem inwestycyjnym, kompletność uzasadnienia, przygotowanie na wezwania do uzupełnień. Prowadzimy też przez cały proces od zera, jeśli robicie to pierwszy raz w nowym składzie.</p>
|
||||||
|
<a class="cell-link" href="#kontakt">Zapytaj o wsparcie →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.2</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M3 3v18h18"/><rect x="7" y="12" width="3" height="6"/><rect x="12" y="8" width="3" height="10"/><rect x="17" y="5" width="3" height="13"/></svg>
|
||||||
|
<h3>Przegląd organizacji i wskaźników</h3>
|
||||||
|
<p>Gdzie w przedsiębiorstwie powstają koszty, których nikt nie przypisuje, kto dubluje czyjąś pracę, jakie wskaźniki naprawdę warto raportować zarządowi. Wynik: obraz sytuacji na jednej stronie plus lista zmian uszeregowana według efektu i trudności.</p>
|
||||||
|
<a class="cell-link" href="#kontakt">Zapytaj o przegląd →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.3</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3 4 7v6c0 5 3.4 8.4 8 9 4.6-.6 8-4 8-9V7Z"/><path d="m9 12 2 2 4-4"/></svg>
|
||||||
|
<h3>Przygotowanie postępowania</h3>
|
||||||
|
<p>Opis przedmiotu zamówienia napisany tak, żeby oferty dało się porównać, kryteria pozacenowe odporne na odwołania, warunki udziału proporcjonalne do zamówienia. Wsparcie przy ocenie ofert i odpowiedziach na pytania wykonawców.</p>
|
||||||
|
<a class="cell-link" href="#kontakt">Zapytaj o postępowanie →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.4</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4M6 8h4M6 12h8"/></svg>
|
||||||
|
<h3>Plan cyfryzacji</h3>
|
||||||
|
<p>Mapa obiegu informacji: gdzie dane powstają, gdzie giną, co jest przepisywane ręcznie po raz trzeci. Dobór systemów docelowych, kolejność wdrożeń, realny harmonogram i budżet, opis przedmiotu zamówienia oraz wsparcie przy ocenie ofert dostawców.</p>
|
||||||
|
<a class="cell-link" href="#kontakt">Zapytaj o cyfryzację →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.5</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><path d="M10 6.5h4M6.5 10v4M17.5 10v4M10 17.5h4"/></svg>
|
||||||
|
<h3>Wdrożenie dużego systemu zintegrowanego</h3>
|
||||||
|
<p>Stoimy po stronie zamawiającego przy wdrożeniach ERP, GIS, billingu i systemów obiegu dokumentów. Weryfikujemy analizę przedwdrożeniową i harmonogram dostawcy, pilnujemy zakresu i odbiorów, wyłapujemy ryzyka migracji danych i integracji, zanim staną się aneksem. Ponad 25 lat w IT po to, żeby wiedzieć, o co pytać.</p>
|
||||||
|
<a class="cell-link" href="#kontakt">Zapytaj o nadzór →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell-frame">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.6</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 4 6v6c0 5 3.4 9.4 8 10 4.6-.6 8-5 8-10V6Z"/><path d="m9 12 2 2 4-4"/></svg>
|
||||||
|
<h3>Audyt bezpieczeństwa i przygotowanie do NIS2</h3>
|
||||||
|
<p>Przegląd systemów, kont i dostępów, ocena segmentacji sieci biurowej i technologicznej, sprawdzenie, czy kopie zapasowe da się realnie odtworzyć. Wynik: lista podatności uszeregowana według ryzyka, plan reakcji na incydent i dokumentacja pod obowiązki sprawozdawcze wynikające z NIS2.</p>
|
||||||
|
<a class="cell-link" href="#kontakt">Zapytaj o audyt →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cell-frame cell-span">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<span class="cell-num">02.7</span>
|
||||||
|
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7" height="5"/><rect x="14" y="3" width="7" height="5"/><rect x="8" y="16" width="8" height="5"/><path d="M6.5 8v4h11V8M12 12v4"/></svg>
|
||||||
|
<h3>Integracje i spójność danych</h3>
|
||||||
|
<p>Gdy ERP pokazuje co innego niż billing, a CRM co innego niż obie te rzeczy. Ustalamy, które źródło jest nadrzędne dla której informacji, projektujemy wymianę danych, opisujemy wymagania integracyjne do postępowania i przygotowujemy testy odbiorowe, które wykryją rozjazd, zanim zrobi się z niego problem księgowy.</p>
|
||||||
|
<a class="cell-link" href="#kontakt">Zapytaj o integracje →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 03 · Przebieg współpracy ─────────────────────────────────────── -->
|
||||||
|
<section class="section" id="przebieg">
|
||||||
|
<span class="kicker">03 · Przebieg współpracy</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Trzy kroki, jasny wynik</h2>
|
||||||
|
<p class="text-muted">Nie sprzedajemy abonamentu na doradztwo. Każdy projekt ma określony zakres, termin i produkt końcowy uzgodnione przed rozpoczęciem prac.</p>
|
||||||
|
</div>
|
||||||
|
<div class="steps">
|
||||||
|
<div class="step">
|
||||||
|
<span class="step-num">01</span>
|
||||||
|
<h3>Rozmowa wstępna</h3>
|
||||||
|
<p>Bezpłatnie, około godziny, zdalnie lub u Was. Ustalamy, co dokładnie boli: presja taryfowa, spór z organem, chaos w dokumentach, planowana inwestycja. Kończymy jasną informacją, czy możemy pomóc i jakim nakładem - także wtedy, gdy odpowiedź brzmi „tego nie potrzebujecie”.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<span class="step-num">02</span>
|
||||||
|
<h3>Przegląd i rozmowy</h3>
|
||||||
|
<p>Analiza dokumentów, danych i procedur oraz rozmowy z osobami, które wykonują pracę - od biura obsługi po dział techniczny. Szukamy różnicy między tym, co jest w regulaminie, a tym, co dzieje się naprawdę.</p>
|
||||||
|
</div>
|
||||||
|
<div class="step">
|
||||||
|
<span class="step-num">03</span>
|
||||||
|
<h3>Raport i decyzje</h3>
|
||||||
|
<p>Dokument z ustaleniami, wariantami rozwiązań i wyliczonym efektem każdego z nich. Prezentacja dla zarządu lub rady nadzorczej w cenie. Po wdrożeniu wracamy i sprawdzamy, czy zmiana faktycznie zadziałała.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 04 · Realizacje ──────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="realizacje">
|
||||||
|
<span class="kicker">04 · Wybrane realizacje</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="split" style="margin-bottom: calc(1.5 * var(--leading))">
|
||||||
|
<figure class="figure split-media" style="margin:0">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/konsulting.svg" alt="Raport doradczy: analiza danych, porównanie wariantów i lista decyzji" width="640" height="360">
|
||||||
|
<figcaption>Rys. 04 - Od przeglądu dokumentów do listy decyzji z wyliczonym efektem</figcaption>
|
||||||
|
</figure>
|
||||||
|
<div>
|
||||||
|
<h2 class="split-title">Co dostajecie na koniec</h2>
|
||||||
|
<ul class="checks">
|
||||||
|
<li>Raport z ustaleniami i wskazaniem źródeł każdego wniosku</li>
|
||||||
|
<li>Warianty rozwiązań z kosztem, czasem i ryzykiem każdego z nich</li>
|
||||||
|
<li>Lista decyzji uszeregowana według efektu, nie według łatwości</li>
|
||||||
|
<li>Gotowe wzory dokumentów, jeśli zakres tego wymaga</li>
|
||||||
|
<li>Prezentacja dla zarządu lub rady nadzorczej w cenie projektu</li>
|
||||||
|
<li>Kontrolne spotkanie po wdrożeniu - sprawdzamy, czy zadziałało</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="plate">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<header class="title-block">
|
||||||
|
<span class="tb-title">Projekty doradcze - przekrój</span>
|
||||||
|
<span class="tb-cell">SPM-2026</span>
|
||||||
|
<span class="tb-cell">Rev A</span>
|
||||||
|
<span class="tb-cell">Arkusz 06 z 06</span>
|
||||||
|
</header>
|
||||||
|
<table class="table spec">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">Nr</th><th scope="col">Zakres</th><th scope="col">Efekt</th><th scope="col">Uwagi</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="s-num">01</td><td class="s-prop">Wsparcie przy wniosku taryfowym</td><td class="s-val">14 dni</td><td class="s-rem">Skrócenie czasu odpowiedzi na wezwanie organu</td></tr>
|
||||||
|
<tr><td class="s-num">02</td><td class="s-prop">Przegląd organizacji i wskaźników</td><td class="s-val">9 zmian</td><td class="s-rem">Lista decyzji przyjęta uchwałą zarządu</td></tr>
|
||||||
|
<tr><td class="s-num">03</td><td class="s-prop">Przygotowanie postępowania</td><td class="s-val">4 oferty</td><td class="s-rem">Porównywalne oferty zamiast jednej ważnej</td></tr>
|
||||||
|
<tr><td class="s-num">04</td><td class="s-prop">Plan cyfryzacji przedsiębiorstwa</td><td class="s-val">3 etapy</td><td class="s-rem">Wdrożenie rozłożone na 3 lata budżetowe</td></tr>
|
||||||
|
<tr><td class="s-num">05</td><td class="s-prop">Nadzór nad wdrożeniem systemu</td><td class="s-val">0 aneksów</td><td class="s-rem">Zakres i harmonogram utrzymane do odbioru końcowego</td></tr>
|
||||||
|
<tr><td class="s-num">06</td><td class="s-prop">Audyt bezpieczeństwa</td><td class="s-val">NIS2</td><td class="s-rem">Lista podatności wg ryzyka i plan reakcji na incydent</td></tr>
|
||||||
|
<tr><td class="s-num">07</td><td class="s-prop">Uporządkowanie integracji</td><td class="s-val">1 źródło prawdy</td><td class="s-rem">Koniec rozjazdu danych między ERP, billingiem i CRM</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p class="sheet-note">Wartości przykładowe - do potwierdzenia przed publikacją.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 05 · Zespół ──────────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="zespol">
|
||||||
|
<span class="kicker">05 · Zespół</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Prowadzą praktycy</h2>
|
||||||
|
<p class="text-muted">Ci sami ludzie, którzy prowadzą projekty doradcze, prowadzą też szkolenia i piszą na Wodociągowcu. Materiał na zajęcia bierze się z zeszłotygodniowego projektu, nie z podręcznika.</p>
|
||||||
|
</div>
|
||||||
|
<div class="cells cells-3">
|
||||||
|
<article class="expert">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-prawo.svg" alt="Dokumenty taryfowe i regulacyjne" width="480" height="270">
|
||||||
|
<div class="expert-body">
|
||||||
|
<h3>Zespół prawno-taryfowy</h3>
|
||||||
|
<p class="role">Prawo wodne · taryfy</p>
|
||||||
|
<p>Wnioski taryfowe i postępowania przed organem regulacyjnym, sprawozdawczość, regulaminy dostarczania wody, umowy z odbiorcami. Autorzy analiz prawnych publikowanych na Wodociągowcu.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="expert">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-zarzadzanie.svg" alt="Wskaźniki i struktura kosztów" width="480" height="270">
|
||||||
|
<div class="expert-body">
|
||||||
|
<h3>Zespół ekonomiczny</h3>
|
||||||
|
<p class="role">Koszty · wskaźniki · plany</p>
|
||||||
|
<p>Rachunek kosztów i kalkulacja ceny m³, wieloletnie plany rozwoju i modernizacji, uzasadnienia inwestycyjne dla zarządów i rad nadzorczych, benchmarking między przedsiębiorstwami.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="expert">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-zamowienia.svg" alt="Porównanie ofert w postępowaniu" width="480" height="270">
|
||||||
|
<div class="expert-body">
|
||||||
|
<h3>Zespół zamówień i wdrożeń</h3>
|
||||||
|
<p class="role">Postępowania · cyfryzacja</p>
|
||||||
|
<p>Opisy przedmiotu zamówienia, kryteria oceny ofert, wsparcie komisji przetargowych, plany cyfryzacji i nadzór nad wdrożeniami systemów po stronie zamawiającego. Ci sami ludzie prowadzą audyty bezpieczeństwa i projektują integracje - bo na co dzień piszą oprogramowanie.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<p class="form-note" style="margin-top: var(--leading)">Skład i sylwetki ekspertów - do uzupełnienia danymi osobowymi przed publikacją.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── Opinia ───────────────────────────────────────────────────────── -->
|
||||||
|
<section class="quote">
|
||||||
|
<figure style="margin:0">
|
||||||
|
<blockquote>„Raport dostaliśmy w trzy tygodnie. Zarząd przyjął listę decyzji bez jednej poprawki.”</blockquote>
|
||||||
|
<figcaption>- prezes zarządu, przedsiębiorstwo wodociągowe (referencja przykładowa)</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 06 · Kontakt ─────────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="kontakt">
|
||||||
|
<span class="kicker">06 · Bezpłatna rozmowa wstępna</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="cta-band">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h2 style="text-transform:uppercase">Opisz sytuację - oddzwonimy</h2>
|
||||||
|
<p class="lead">Godzina rozmowy bez zobowiązań. Jeśli po niej uznamy, że nie jesteśmy właściwym wykonawcą, powiemy to wprost i wskażemy, czego szukać.</p>
|
||||||
|
<form data-form="konsulting" action="api/send.php" method="post" style="max-width: 720px; margin-top: var(--leading)">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="field">
|
||||||
|
<label for="k-imie">Imię i nazwisko</label>
|
||||||
|
<input class="input" id="k-imie" name="imie" type="text" autocomplete="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="k-firma">Przedsiębiorstwo</label>
|
||||||
|
<input class="input" id="k-firma" name="firma" type="text" autocomplete="organization" required>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="k-email">E-mail</label>
|
||||||
|
<input class="input" id="k-email" name="email" type="email" autocomplete="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="k-tel">Telefon</label>
|
||||||
|
<input class="input" id="k-tel" name="telefon" type="tel" autocomplete="tel">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="k-zakres">Interesujący zakres</label>
|
||||||
|
<select class="input" id="k-zakres" name="zakres">
|
||||||
|
<option>Wniosek taryfowy - wsparcie i weryfikacja</option>
|
||||||
|
<option>Przegląd organizacji i wskaźników</option>
|
||||||
|
<option>Przygotowanie postępowania</option>
|
||||||
|
<option>Plan cyfryzacji</option>
|
||||||
|
<option>Wdrożenie dużego systemu zintegrowanego</option>
|
||||||
|
<option>Audyt bezpieczeństwa i przygotowanie do NIS2</option>
|
||||||
|
<option>Integracje i spójność danych</option>
|
||||||
|
<option>Aplikacja na zamówienie (web / mobile)</option>
|
||||||
|
<option>Szkolenie zamknięte dla zespołu</option>
|
||||||
|
<option>Inne - opiszę w wiadomości</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="k-wiad">Opis sytuacji</label>
|
||||||
|
<textarea class="input" id="k-wiad" name="wiadomosc" placeholder="Wielkość przedsiębiorstwa, główny problem, planowany termin."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="hp" aria-hidden="true">
|
||||||
|
<label for="k-www">Nie wypełniaj tego pola</label>
|
||||||
|
<input id="k-www" type="text" name="firma_www" tabindex="-1" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<label class="consent">
|
||||||
|
<input type="checkbox" name="zgoda" data-consent required>
|
||||||
|
<span>Wyrażam zgodę na przetwarzanie moich danych osobowych przez SoftSPM w celu kontaktu handlowego i marketingowego, w tym przedstawienia oferty szkoleń, konsultingu i aplikacji. Zgodę mogę wycofać w każdej chwili, pisząc na info@softspm.com. <span class="req">Zgoda wymagana.</span></span>
|
||||||
|
</label>
|
||||||
|
<div class="verify" data-verify>
|
||||||
|
<span class="verify-label">Potwierdź, że nie jesteś robotem</span>
|
||||||
|
<div class="verify-track" data-verify-track>
|
||||||
|
<span class="verify-fill" data-verify-fill></span>
|
||||||
|
<span class="verify-hint" data-verify-hint>Przesuń, aby zweryfikować</span>
|
||||||
|
<span class="verify-handle" data-verify-handle role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
||||||
|
<svg class="verify-chevrons" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 5 7 7-7 7M14 5l5 7-5 7"/></svg>
|
||||||
|
<svg class="verify-check" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 12 5 6 11-13"/></svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary btn-lg" type="submit">Umów rozmowę</button>
|
||||||
|
<p class="form-status" data-form-status role="status" aria-live="polite"></p>
|
||||||
|
<p class="form-note" style="margin-top: var(--space-3)">Zgłoszenia możesz też wysłać bezpośrednio na <a href="mailto:info@softspm.com">info@softspm.com</a>.</p>
|
||||||
|
<noscript><p class="form-note">Formularz wymaga włączonego JavaScriptu. Napisz na <a href="mailto:info@softspm.com">info@softspm.com</a>.</p></noscript>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="foot">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="foot-grid">
|
||||||
|
<div>
|
||||||
|
<img class="foot-logo" src="images/spm_logo_new.png" alt="SoftSPM - systemy informatyczne">
|
||||||
|
<p class="text-muted">Szkolenia, webinaria, konsulting i aplikacje pod klucz dla branży wodociągowo-kanalizacyjnej. Ponad 25 lat w IT, od 2014 roku w wod-kan.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Oferta</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="szkolenia.html">Szkolenia i kursy</a></li>
|
||||||
|
<li><a href="szkolenia.html#webinaria">Webinaria</a></li>
|
||||||
|
<li><a href="konsulting.html">Konsulting</a></li>
|
||||||
|
<li><a href="index.html#aplikacje">Aplikacje pod klucz</a></li>
|
||||||
|
<li><a href="index.html#platforma">Platforma kursowa</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Ekosystem</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://wodociagowiec.pl/" target="_blank" rel="noopener">wodociagowiec.pl</a></li>
|
||||||
|
<li><a href="https://gieldakomunalna.pl/" target="_blank" rel="noopener">gieldakomunalna.pl</a></li>
|
||||||
|
<li><a href="index.html#ekosystem">Jak to działa razem</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Kontakt</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Ławy<br>97-400 Bełchatów</li>
|
||||||
|
<li><a href="mailto:info@softspm.com">info@softspm.com</a></li>
|
||||||
|
<li><a href="index-en.html">English version</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="foot-bar">
|
||||||
|
<span>SoftSPM · od 2014 dla branży wod-kan</span>
|
||||||
|
<span>Ekosystem: wodociagowiec.pl · gieldakomunalna.pl · platforma kursowa</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="assets/forms.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"folders": [
|
||||||
|
{
|
||||||
|
"path": "."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"settings": {}
|
||||||
|
}
|
||||||
+427
@@ -0,0 +1,427 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pl">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Szkolenia i webinaria dla wod-kan - SoftSPM</title>
|
||||||
|
<meta name="description" content="Katalog szkoleń i webinariów dla przedsiębiorstw wodociągowych: prawo i taryfy, zarządzanie, zamówienia publiczne, obsługa odbiorcy, SCADA i monitoring, audyty bezpieczeństwa i NIS2, integracje ERP/CRM, cyfryzacja. Certyfikat i materiały bezterminowo.">
|
||||||
|
<link rel="icon" href="images/favicon.ico" sizes="any">
|
||||||
|
<link rel="stylesheet" href="assets/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<a class="nav-brand" href="index.html"><img src="images/spm_logo_new.png" alt="SoftSPM - systemy informatyczne"></a>
|
||||||
|
<div class="nav-links">
|
||||||
|
<a href="index.html#oferta">Oferta</a>
|
||||||
|
<a href="#katalog">Katalog</a>
|
||||||
|
<a href="#terminy">Terminy</a>
|
||||||
|
<a href="#webinaria">Webinaria</a>
|
||||||
|
<a href="szkolenia.html" aria-current="page">Szkolenia</a>
|
||||||
|
<a href="konsulting.html">Konsulting</a>
|
||||||
|
<a class="nav-keep" href="index-en.html" title="English version">EN</a>
|
||||||
|
<a class="btn btn-primary nav-keep" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="wrap">
|
||||||
|
|
||||||
|
<!-- ── Hero ─────────────────────────────────────────────────────────── -->
|
||||||
|
<section class="page-hero">
|
||||||
|
<span class="kicker">01 · Szkolenia i webinaria</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<h1>Szkolenia z tego, o co branża pyta najczęściej</h1>
|
||||||
|
<p class="lead">Program układamy z pytań, które spływają do redakcji <a href="https://wodociagowiec.pl/" target="_blank" rel="noopener">Wodociągowca</a> i z tego, czego branża szuka na <a href="https://gieldakomunalna.pl/" target="_blank" rel="noopener">Giełdzie Komunalnej</a>. Uczymy prawa i organizacji, ale też systemów: SCADA, bezpieczeństwa i integracji - bo od ponad 25 lat sami je budujemy. Małe grupy, praca na dokumentach i danych, prowadzący z praktyki.</p>
|
||||||
|
<div class="hero-marks">
|
||||||
|
<span>Grupy do 12 osób</span>
|
||||||
|
<span>Certyfikat ukończenia</span>
|
||||||
|
<span>Materiały bezterminowo</span>
|
||||||
|
<span>Wersja zamknięta dla firm</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 02 · Format ──────────────────────────────────────────────────── -->
|
||||||
|
<section class="section-tight" id="format">
|
||||||
|
<span class="kicker">02 · Format szkolenia</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="plate">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<header class="title-block">
|
||||||
|
<span class="tb-title">Format i warunki uczestnictwa</span>
|
||||||
|
<span class="tb-cell">SPM-2026</span>
|
||||||
|
<span class="tb-cell">Rev A</span>
|
||||||
|
<span class="tb-cell">Arkusz 04 z 06</span>
|
||||||
|
</header>
|
||||||
|
<table class="table spec">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">Nr</th><th scope="col">Pozycja</th><th scope="col">Wartość</th><th scope="col">Uwagi</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="s-num">01</td><td class="s-prop">Wielkość grupy</td><td class="s-val">do 12</td><td class="s-rem">Każdy pracuje na dokumentach swojego przedsiębiorstwa</td></tr>
|
||||||
|
<tr><td class="s-num">02</td><td class="s-prop">Czas trwania</td><td class="s-val">8–16 h</td><td class="s-rem">1–2 dni, zależnie od ścieżki tematycznej</td></tr>
|
||||||
|
<tr><td class="s-num">03</td><td class="s-prop">Forma</td><td class="s-val">Hybryda</td><td class="s-rem">Stacjonarnie w Bełchatowie lub online na platformie</td></tr>
|
||||||
|
<tr><td class="s-num">04</td><td class="s-prop">Dostęp do materiałów</td><td class="s-val">bezterminowo</td><td class="s-rem">Nagrania, wzory pism i arkusze na platformie kursowej</td></tr>
|
||||||
|
<tr><td class="s-num">05</td><td class="s-prop">Szkolenia zamknięte</td><td class="s-val">od 6 osób</td><td class="s-rem">Program dopasowany do sytuacji zamawiającego</td></tr>
|
||||||
|
<tr><td class="s-num">06</td><td class="s-prop">Certyfikat</td><td class="s-val">tak</td><td class="s-rem">Po zaliczeniu testu sprawdzającego</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p class="sheet-note">Warunki przykładowe - do potwierdzenia przed publikacją.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 03 · Katalog szkoleń ─────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="katalog">
|
||||||
|
<span class="kicker">03 · Katalog szkoleń</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Osiem ścieżek tematycznych</h2>
|
||||||
|
<p class="text-muted">Ścieżki można przechodzić pojedynczo albo jako komplet. Kolejność jest przemyślana: od otoczenia prawnego, przez ekonomikę, zakupy i relację z odbiorcą, po systemy, którymi to wszystko obsługujecie - a na końcu cyfryzacja, która spina jedno z drugim.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cells cells-2">
|
||||||
|
|
||||||
|
<article class="course" id="sciezka-01">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-prawo.svg" alt="Dokument taryfowy, paragraf i pieczęć zatwierdzenia" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 01</span><span class="tag tag-outline">Prawo i taryfy</span><span class="tag tag-neutral">Średni</span></div>
|
||||||
|
<h3>Prawo wodne i wniosek taryfowy</h3>
|
||||||
|
<p>Najczęściej zamawiane szkolenie w naszym katalogu. Zmiany w Prawie wodnym i ich skutki operacyjne, kalkulacja niezbędnych przychodów, budowa i uzasadnienie wniosku taryfowego, przebieg postępowania przed Wodami Polskimi, odpowiedzi na wezwania do uzupełnień, sprawozdawczość i obowiązki w zakresie jakości wody.</p>
|
||||||
|
<div class="course-meta">
|
||||||
|
<span>2 dni · 16 h</span><span>Bełchatów / online</span><span>Poziom: średni</span>
|
||||||
|
</div>
|
||||||
|
<div class="course-foot">
|
||||||
|
<span class="price">1 400 PLN<small>netto / os.</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course" id="sciezka-02">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-zarzadzanie.svg" alt="Wskaźniki finansowe i struktura kosztów przedsiębiorstwa" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 02</span><span class="tag tag-outline">Zarządzanie</span><span class="tag tag-neutral">Średni</span></div>
|
||||||
|
<h3>Zarządzanie przedsiębiorstwem wod-kan</h3>
|
||||||
|
<p>Dla kadry kierowniczej i osób przygotowujących materiały dla zarządu. Rachunek kosztów i realna kalkulacja ceny m³, wskaźniki efektywności i benchmarking, wieloletni plan rozwoju i modernizacji, uzasadnianie inwestycji przed radą nadzorczą i właścicielem samorządowym, komunikacja podwyżek taryf.</p>
|
||||||
|
<div class="course-meta">
|
||||||
|
<span>2 dni · 16 h</span><span>Bełchatów / online</span><span>Poziom: średni</span>
|
||||||
|
</div>
|
||||||
|
<div class="course-foot">
|
||||||
|
<span class="price">1 600 PLN<small>netto / os.</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course" id="sciezka-03">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-zamowienia.svg" alt="Porównanie ofert i kryteria oceny w postępowaniu" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 03</span><span class="tag tag-outline">Zamówienia</span><span class="tag tag-neutral">Zaawansowany</span></div>
|
||||||
|
<h3>Zamówienia publiczne w praktyce wod-kan</h3>
|
||||||
|
<p>Warsztat na realnych dokumentach postępowań. Opis przedmiotu zamówienia, który nie kończy się aneksem, kryteria pozacenowe i koszt cyklu życia zamiast najniższej ceny, warunki udziału proporcjonalne do zamówienia, ocena i odrzucanie ofert, najczęstsze zarzuty odwoławcze i sposoby ich uniknięcia.</p>
|
||||||
|
<div class="course-meta">
|
||||||
|
<span>2 dni · 16 h</span><span>Bełchatów / online</span><span>Poziom: zaawansowany</span>
|
||||||
|
</div>
|
||||||
|
<div class="course-foot">
|
||||||
|
<span class="price">1 800 PLN<small>netto / os.</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course" id="sciezka-04">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-klient.svg" alt="Zgłoszenie odbiorcy, rozliczenie i komunikacja" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 04</span><span class="tag tag-outline">Obsługa klienta</span><span class="tag tag-neutral">Podstawowy</span></div>
|
||||||
|
<h3>Obsługa odbiorcy, umowy i billing</h3>
|
||||||
|
<p>Dla biura obsługi klienta i działu rozliczeń. Umowy z odbiorcami i ich egzekwowanie, reklamacje i trudne rozmowy przy ladzie i przez telefon, windykacja należności krok po kroku, rozliczenia przy odczytach zdalnych, standardy obsługi i komunikacja przy awariach oraz przerwach w dostawie.</p>
|
||||||
|
<div class="course-meta">
|
||||||
|
<span>1 dzień · 8 h</span><span>Bełchatów / online</span><span>Poziom: podstawowy</span>
|
||||||
|
</div>
|
||||||
|
<div class="course-foot">
|
||||||
|
<span class="price">900 PLN<small>netto / os.</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course" id="sciezka-05">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-scada.svg" alt="Pulpit dyspozytorski: obiekty sieci, trend pomiarowy i sygnalizacja alarmu" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 05</span><span class="tag tag-outline">SCADA</span><span class="tag tag-neutral">Średni</span></div>
|
||||||
|
<h3>Zarządzanie i monitoring systemów SCADA</h3>
|
||||||
|
<p>Dla dyspozytorów, automatyków i kierowników ruchu. Jak czytać pulpit i nie utonąć w alarmach: progi i histereza zamiast fałszywych zgłoszeń, priorytety zdarzeń, procedury dyżuru i eskalacji, archiwizacja i retencja pomiarów, wskaźniki dostępności obiektów, raporty dla zarządu budowane z tych samych danych, na których pracuje dyspozytor.</p>
|
||||||
|
<div class="course-meta">
|
||||||
|
<span>2 dni · 16 h</span><span>Bełchatów / online</span><span>Poziom: średni</span>
|
||||||
|
</div>
|
||||||
|
<div class="course-foot">
|
||||||
|
<span class="price">1 800 PLN<small>netto / os.</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course" id="sciezka-06">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-audyt.svg" alt="Audyt bezpieczeństwa: tarcza zgodności NIS2 i lista podatności z poziomami ryzyka" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 06</span><span class="tag tag-outline">Bezpieczeństwo</span><span class="tag tag-neutral">Zaawansowany</span></div>
|
||||||
|
<h3>Audyty bezpieczeństwa i zgodność NIS2</h3>
|
||||||
|
<p>Sektor wodociągowy to infrastruktura krytyczna, więc dyrektywa NIS2 obowiązuje, a nie sugeruje. Inwentaryzacja systemów, kont i dostępów, segmentacja sieci biurowej od technologicznej, kopie zapasowe, które da się realnie odtworzyć, polityka haseł i uwierzytelnianie, plan reakcji na incydent, obowiązki zgłoszeniowe i dokumentacja na wypadek kontroli.</p>
|
||||||
|
<div class="course-meta">
|
||||||
|
<span>2 dni · 16 h</span><span>Bełchatów / online</span><span>Poziom: zaawansowany</span>
|
||||||
|
</div>
|
||||||
|
<div class="course-foot">
|
||||||
|
<span class="price">2 200 PLN<small>netto / os.</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course" id="sciezka-07">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-integracje.svg" alt="Magistrala danych łącząca ERP, CRM, TAX i billing z raportowaniem oraz aplikacjami" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 07</span><span class="tag tag-outline">Integracje</span><span class="tag tag-neutral">Zaawansowany</span></div>
|
||||||
|
<h3>Integracja z systemami klasy ERP, CRM i podatkowymi</h3>
|
||||||
|
<p>Najczęstszy problem cyfryzacji nie brzmi „którego systemu użyć”, tylko „dlaczego te dane się nie zgadzają”. Które źródło jest nadrzędne dla której informacji, uzgadnianie sald i kartotek, integracja wsadowa a API, obsługa błędów i ponowień, wymagania integracyjne w opisie zamówienia oraz testy odbiorowe, które faktycznie wykryją rozjazd danych.</p>
|
||||||
|
<div class="course-meta">
|
||||||
|
<span>2 dni · 16 h</span><span>Bełchatów / online</span><span>Poziom: zaawansowany</span>
|
||||||
|
</div>
|
||||||
|
<div class="course-foot">
|
||||||
|
<span class="price">2 200 PLN<small>netto / os.</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course" id="sciezka-08">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-cyfryzacja.svg" alt="Od papierowej dokumentacji do systemu centralnego z modułami i etapowym planem wdrożenia" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Ścieżka 08</span><span class="tag tag-outline">Cyfryzacja</span><span class="tag tag-neutral">Średni</span></div>
|
||||||
|
<h3>Cyfryzacja przedsiębiorstwa wod-kan</h3>
|
||||||
|
<p>Ścieżka domykająca pozostałe - przekłada wiedzę z prawa, organizacji i systemów na jeden plan działania. Dla osób, które mają zaplanować przejście z papieru na system i obronić ten plan przed zarządem. Przegląd obiegu informacji, inwentaryzacja majątku, obieg zleceń i dokumentów, integracja billingu z odczytami, dobór dostawcy i pisanie wymagań, realny harmonogram wdrożenia rozłożony na etapy budżetowe.</p>
|
||||||
|
<div class="course-meta">
|
||||||
|
<span>2 dni · 16 h</span><span>Bełchatów / online</span><span>Poziom: średni</span>
|
||||||
|
</div>
|
||||||
|
<div class="course-foot">
|
||||||
|
<span class="price">1 600 PLN<small>netto / os.</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="course" id="sciezka-rfq">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/kurs-gielda.svg" alt="Marketplace: nadwyżki z magazynu trafiają jako bezpłatne ogłoszenia do producentów i wykonawców" width="480" height="270">
|
||||||
|
<div class="course-body">
|
||||||
|
<div class="course-tags"><span class="tag tag-accent">Warsztat</span><span class="tag tag-outline">Rynek</span><span class="tag tag-neutral">Podstawowy</span></div>
|
||||||
|
<h3>Skuteczne zapytanie ofertowe i wybór wykonawcy</h3>
|
||||||
|
<p>Warsztat prowadzony na realnych ogłoszeniach z Giełdy Komunalnej. Jak opisać potrzebę, żeby dostać porównywalne oferty, jak czytać ofertę wykonawcy i wyłapać braki, gdzie szukać dostawcy w niszy, w której jest ich pięciu w kraju, jak upłynnić nadwyżki magazynowe zamiast spisywać je na straty.</p>
|
||||||
|
<div class="course-meta">
|
||||||
|
<span>1 dzień · 8 h</span><span>Online</span><span>Poziom: podstawowy</span>
|
||||||
|
</div>
|
||||||
|
<div class="course-foot">
|
||||||
|
<span class="price">900 PLN<small>netto / os.</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zapytaj o termin</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<p class="form-note" style="margin-top: var(--leading)">Ceny przykładowe - do potwierdzenia przed publikacją. Dla zespołów od 3 osób oraz dla uczestników kolejnych ścieżek przewidziane są rabaty.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 04 · Terminy ─────────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="terminy">
|
||||||
|
<span class="kicker">04 · Harmonogram</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="section-intro">
|
||||||
|
<h2>Terminy najbliższej edycji ustalamy</h2>
|
||||||
|
<p class="text-muted">Poniżej tematy, które wchodzą do programu jako pierwsze. Daty podamy, gdy domkniemy salę i skład prowadzących - zwykle z sześciotygodniowym wyprzedzeniem. Zostaw kontakt przy interesującym Cię temacie, a odezwiemy się z terminem, zanim ogłosimy go publicznie.</p>
|
||||||
|
</div>
|
||||||
|
<div class="plate">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<header class="title-block">
|
||||||
|
<span class="tb-title">Tematy w przygotowaniu</span>
|
||||||
|
<span class="tb-cell">SPM-2026</span>
|
||||||
|
<span class="tb-cell">Rev A</span>
|
||||||
|
<span class="tb-cell">Arkusz 05 z 06</span>
|
||||||
|
</header>
|
||||||
|
<table class="table sched">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">Termin</th><th scope="col">Temat</th><th scope="col">Forma</th><th scope="col">Miejsce</th><th scope="col"><span class="visually-hidden">Zapisy</span></th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Wniosek taryfowy - przygotowanie i obrona</td><td class="s-form"><span class="tag tag-accent">Szkolenie</span></td><td class="s-place">Bełchatów</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Zmiany w Prawie wodnym - co dotyczy przedsiębiorstw</td><td class="s-form"><span class="tag tag-outline">Webinar</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Skuteczne zapytanie ofertowe - warsztat</td><td class="s-form"><span class="tag tag-accent">Szkolenie</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Kryteria pozacenowe w postępowaniu</td><td class="s-form"><span class="tag tag-outline">Webinar</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Zarządzanie przedsiębiorstwem - wskaźniki i plan</td><td class="s-form"><span class="tag tag-accent">Szkolenie</span></td><td class="s-place">Bełchatów</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Cyfryzacja przedsiębiorstwa wod-kan</td><td class="s-form"><span class="tag tag-accent">Szkolenie</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Taryfy - kalkulacja i najczęstsze błędy</td><td class="s-form"><span class="tag tag-outline">Webinar</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Windykacja i trudny odbiorca - warsztat</td><td class="s-form"><span class="tag tag-accent">Szkolenie</span></td><td class="s-place">Bełchatów</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Sprawozdawczość roczna - checklista</td><td class="s-form"><span class="tag tag-outline">Webinar</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">Audyt bezpieczeństwa systemów - od czego zacząć</td><td class="s-form"><span class="tag tag-accent">Szkolenie</span></td><td class="s-place">Bełchatów</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
<tr><td class="s-date"><span class="tag tag-soon">Wkrótce</span></td><td class="s-topic">NIS2 i infrastruktura krytyczna - obowiązki przedsiębiorstwa</td><td class="s-form"><span class="tag tag-outline">Webinar</span></td><td class="s-place">Online</td><td class="s-act"><a class="sign" href="#zgloszenie">Powiadom mnie →</a></td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p class="sheet-note">Ustalamy terminy najbliższej edycji. Zostaw kontakt przy wybranym temacie - poinformujemy Cię, gdy tylko otworzymy zapisy.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 05 · Webinaria i pakiet roczny ───────────────────────────────── -->
|
||||||
|
<section class="section" id="webinaria">
|
||||||
|
<span class="kicker">05 · Webinaria</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="split">
|
||||||
|
<div>
|
||||||
|
<h2 class="split-title">Pakiet roczny webinariów</h2>
|
||||||
|
<p class="lead">Dwadzieścia cztery spotkania w roku - dwa w miesiącu, po dwie godziny. Jedno o przepisach i taryfach, jedno o organizacji i rynku. Jedna opłata dla całego przedsiębiorstwa, bez limitu uczestników.</p>
|
||||||
|
<ul class="checks">
|
||||||
|
<li>24 webinaria rocznie na żywo, z sesją pytań do prowadzącego</li>
|
||||||
|
<li>Nagrania i materiały dostępne bezterminowo na platformie kursowej</li>
|
||||||
|
<li>Bez limitu uczestników z jednego przedsiębiorstwa</li>
|
||||||
|
<li>Archiwum wcześniejszych spotkań w cenie pakietu</li>
|
||||||
|
<li>Możliwość zgłoszenia tematu do programu na kolejny kwartał</li>
|
||||||
|
<li>Powiadomienia o zmianach w przepisach między spotkaniami</li>
|
||||||
|
</ul>
|
||||||
|
<div class="course-foot" style="max-width: 440px">
|
||||||
|
<span class="price">4 800 PLN<small>netto / rok / przedsiębiorstwo</small></span>
|
||||||
|
<a class="btn btn-primary" href="#zgloszenie">Zamów pakiet</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<figure class="figure split-media" style="margin:0">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<img class="plot" src="assets/img/webinaria.svg" alt="Webinarium na żywo: okno prowadzącego, udostępniony slajd i panel pytań uczestników" width="640" height="360">
|
||||||
|
<figcaption>Rys. 03 - Webinarium na żywo z sesją pytań uczestników</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ── 06 · Zgłoszenie ──────────────────────────────────────────────── -->
|
||||||
|
<section class="section" id="zgloszenie">
|
||||||
|
<span class="kicker">06 · Zgłoszenie</span>
|
||||||
|
<hr class="caption-rule">
|
||||||
|
<div class="cta-band">
|
||||||
|
<span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span>
|
||||||
|
<h2 style="text-transform:uppercase">Zapytaj o termin lub szkolenie zamknięte</h2>
|
||||||
|
<p class="lead">Zapisy na najbliższą edycję jeszcze nie są otwarte - zostaw kontakt, a odezwiemy się z terminem, zanim ogłosimy go publicznie. Odpowiadamy w ciągu jednego dnia roboczego. Jeśli szukasz programu pod konkretną sytuację, napisz, z czym macie problem; przygotujemy propozycję zakresu i wycenę.</p>
|
||||||
|
<form data-form="szkolenia" action="api/send.php" method="post" style="max-width: 720px; margin-top: var(--leading)">
|
||||||
|
<div class="form-grid">
|
||||||
|
<div class="field">
|
||||||
|
<label for="z-imie">Imię i nazwisko</label>
|
||||||
|
<input class="input" id="z-imie" name="imie" type="text" autocomplete="name" required>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="z-firma">Przedsiębiorstwo</label>
|
||||||
|
<input class="input" id="z-firma" name="firma" type="text" autocomplete="organization" required>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="z-email">E-mail</label>
|
||||||
|
<input class="input" id="z-email" name="email" type="email" autocomplete="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="z-tel">Telefon</label>
|
||||||
|
<input class="input" id="z-tel" name="telefon" type="tel" autocomplete="tel">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="z-temat">Interesujący temat</label>
|
||||||
|
<select class="input" id="z-temat" name="temat">
|
||||||
|
<option>Prawo wodne i wniosek taryfowy</option>
|
||||||
|
<option>Zarządzanie przedsiębiorstwem wod-kan</option>
|
||||||
|
<option>Zamówienia publiczne w praktyce wod-kan</option>
|
||||||
|
<option>Obsługa odbiorcy, umowy i billing</option>
|
||||||
|
<option>Zarządzanie i monitoring systemów SCADA</option>
|
||||||
|
<option>Audyty bezpieczeństwa i zgodność NIS2</option>
|
||||||
|
<option>Integracja z systemami klasy ERP, CRM i podatkowymi</option>
|
||||||
|
<option>Cyfryzacja przedsiębiorstwa wod-kan</option>
|
||||||
|
<option>Skuteczne zapytanie ofertowe i wybór wykonawcy</option>
|
||||||
|
<option>Pakiet roczny webinariów</option>
|
||||||
|
<option>Szkolenie zamknięte - proszę o kontakt</option>
|
||||||
|
<option>Jeszcze nie wiem - proszę o rozmowę</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="field">
|
||||||
|
<label for="z-wiad">Wiadomość</label>
|
||||||
|
<textarea class="input" id="z-wiad" name="wiadomosc" placeholder="Liczba uczestników, preferowany kwartał lub miesiąc, sytuacja której dotyczy temat."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="hp" aria-hidden="true">
|
||||||
|
<label for="z-www">Nie wypełniaj tego pola</label>
|
||||||
|
<input id="z-www" type="text" name="firma_www" tabindex="-1" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<label class="consent">
|
||||||
|
<input type="checkbox" name="zgoda" data-consent required>
|
||||||
|
<span>Wyrażam zgodę na przetwarzanie moich danych osobowych przez SoftSPM w celu kontaktu handlowego i marketingowego, w tym przedstawienia oferty szkoleń, konsultingu i aplikacji. Zgodę mogę wycofać w każdej chwili, pisząc na info@softspm.com. <span class="req">Zgoda wymagana.</span></span>
|
||||||
|
</label>
|
||||||
|
<div class="verify" data-verify>
|
||||||
|
<span class="verify-label">Potwierdź, że nie jesteś robotem</span>
|
||||||
|
<div class="verify-track" data-verify-track>
|
||||||
|
<span class="verify-fill" data-verify-fill></span>
|
||||||
|
<span class="verify-hint" data-verify-hint>Przesuń, aby zweryfikować</span>
|
||||||
|
<span class="verify-handle" data-verify-handle role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
|
||||||
|
<svg class="verify-chevrons" viewBox="0 0 24 24" aria-hidden="true"><path d="m7 5 7 7-7 7M14 5l5 7-5 7"/></svg>
|
||||||
|
<svg class="verify-check" viewBox="0 0 24 24" aria-hidden="true"><path d="m4 12 5 6 11-13"/></svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-primary btn-lg" type="submit">Wyślij zapytanie</button>
|
||||||
|
<p class="form-status" data-form-status role="status" aria-live="polite"></p>
|
||||||
|
<p class="form-note" style="margin-top: var(--space-3)">Zapytania możesz też wysłać bezpośrednio na <a href="mailto:info@softspm.com">info@softspm.com</a>.</p>
|
||||||
|
<noscript><p class="form-note">Formularz wymaga włączonego JavaScriptu. Napisz na <a href="mailto:info@softspm.com">info@softspm.com</a>.</p></noscript>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="foot">
|
||||||
|
<div class="wrap">
|
||||||
|
<div class="foot-grid">
|
||||||
|
<div>
|
||||||
|
<img class="foot-logo" src="images/spm_logo_new.png" alt="SoftSPM - systemy informatyczne">
|
||||||
|
<p class="text-muted">Szkolenia, webinaria, konsulting i aplikacje pod klucz dla branży wodociągowo-kanalizacyjnej. Ponad 25 lat w IT, od 2014 roku w wod-kan.</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Oferta</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="szkolenia.html">Szkolenia i kursy</a></li>
|
||||||
|
<li><a href="#webinaria">Webinaria</a></li>
|
||||||
|
<li><a href="konsulting.html">Konsulting</a></li>
|
||||||
|
<li><a href="index.html#aplikacje">Aplikacje pod klucz</a></li>
|
||||||
|
<li><a href="index.html#platforma">Platforma kursowa</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Ekosystem</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://wodociagowiec.pl/" target="_blank" rel="noopener">wodociagowiec.pl</a></li>
|
||||||
|
<li><a href="https://gieldakomunalna.pl/" target="_blank" rel="noopener">gieldakomunalna.pl</a></li>
|
||||||
|
<li><a href="index.html#ekosystem">Jak to działa razem</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4>Kontakt</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Ławy<br>97-400 Bełchatów</li>
|
||||||
|
<li><a href="mailto:info@softspm.com">info@softspm.com</a></li>
|
||||||
|
<li><a href="index-en.html">English version</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="foot-bar">
|
||||||
|
<span>SoftSPM · od 2014 dla branży wod-kan</span>
|
||||||
|
<span>Ekosystem: wodociagowiec.pl · gieldakomunalna.pl · platforma kursowa</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="assets/forms.js" defer></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user