Initial commit

This commit is contained in:
2026-09-03 10:39:26 +02:00
commit 496e8bdb27
85 changed files with 8134 additions and 0 deletions
File diff suppressed because one or more lines are too long
+93
View File
@@ -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>
+227
View File
@@ -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>
+223
View File
@@ -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&amp;family=Hanken+Grotesk:wght@400;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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&amp;family=Space+Grotesk:wght@600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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&amp;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&amp;family=Hanken+Grotesk:wght@400;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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&amp;family=Space+Grotesk:wght@600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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