Initial commit
This commit is contained in:
+309
@@ -0,0 +1,309 @@
|
||||
/* ============================================================================
|
||||
SoftSPM - obsługa formularzy
|
||||
Suwak antybotowy, zgoda marketingowa i wysyłka przez api/send.php.
|
||||
Czysty JavaScript, bez zależności.
|
||||
========================================================================= */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var DICT = {
|
||||
pl: {
|
||||
slide: 'Przesuń, aby zweryfikować',
|
||||
verified: 'Zweryfikowano',
|
||||
checking: 'Sprawdzanie...',
|
||||
needSlider: 'Najpierw przesuń suwak, aby potwierdzić, że nie jesteś robotem.',
|
||||
needConsent: 'Zaznacz zgodę na kontakt, aby wysłać zgłoszenie.',
|
||||
sending: 'Wysyłanie...',
|
||||
sendLabel: 'Wyślij',
|
||||
tokenError: 'Nie udało się przygotować formularza. Odśwież stronę.',
|
||||
network: 'Brak połączenia z serwerem. Spróbuj ponownie lub napisz na info@softspm.com.',
|
||||
generic: 'Nie udało się wysłać wiadomości. Napisz na info@softspm.com.',
|
||||
handleLabel: 'Przesuń suwak w prawo, aby potwierdzić, że nie jesteś robotem'
|
||||
},
|
||||
en: {
|
||||
slide: 'Slide to verify',
|
||||
verified: 'Verified',
|
||||
checking: 'Checking...',
|
||||
needSlider: 'Please slide the control first to confirm you are not a robot.',
|
||||
needConsent: 'Please tick the consent box to send the message.',
|
||||
sending: 'Sending...',
|
||||
sendLabel: 'Send',
|
||||
tokenError: 'The form could not be prepared. Please refresh the page.',
|
||||
network: 'No connection to the server. Try again or write to info@softspm.com.',
|
||||
generic: 'The message could not be sent. Please write to info@softspm.com.',
|
||||
handleLabel: 'Slide the control to the right to confirm you are not a robot'
|
||||
}
|
||||
};
|
||||
|
||||
var lang = (document.documentElement.getAttribute('lang') || 'pl').slice(0, 2).toLowerCase();
|
||||
var t = DICT[lang] || DICT.pl;
|
||||
|
||||
/* -- suwak weryfikacyjny -------------------------------------------------- */
|
||||
function Slider(root, onVerified) {
|
||||
var track = root.querySelector('[data-verify-track]');
|
||||
var fill = root.querySelector('[data-verify-fill]');
|
||||
var handle = root.querySelector('[data-verify-handle]');
|
||||
var hint = root.querySelector('[data-verify-hint]');
|
||||
if (!track || !handle) { return null; }
|
||||
|
||||
var pos = 0;
|
||||
var done = false;
|
||||
var busy = false;
|
||||
var pointerId = null;
|
||||
|
||||
handle.setAttribute('aria-label', t.handleLabel);
|
||||
|
||||
function limit() {
|
||||
return Math.max(0, track.clientWidth - handle.offsetWidth);
|
||||
}
|
||||
|
||||
function place(x) {
|
||||
var max = limit();
|
||||
pos = Math.max(0, Math.min(max, x));
|
||||
handle.style.left = pos + 'px';
|
||||
if (fill) { fill.style.width = (pos + handle.offsetWidth) + 'px'; }
|
||||
handle.setAttribute('aria-valuenow', max > 0 ? String(Math.round((pos / max) * 100)) : '0');
|
||||
}
|
||||
|
||||
function reset() {
|
||||
done = false;
|
||||
busy = false;
|
||||
root.classList.remove('is-verified');
|
||||
handle.setAttribute('aria-valuetext', t.slide);
|
||||
if (hint) { hint.textContent = t.slide; }
|
||||
place(0);
|
||||
}
|
||||
|
||||
function complete() {
|
||||
if (done || busy) { return; }
|
||||
busy = true;
|
||||
place(limit());
|
||||
if (hint) { hint.textContent = t.checking; }
|
||||
onVerified(function (ok) {
|
||||
busy = false;
|
||||
if (ok) {
|
||||
done = true;
|
||||
root.classList.add('is-verified');
|
||||
handle.setAttribute('aria-valuetext', t.verified);
|
||||
if (hint) { hint.textContent = t.verified; }
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
handle.addEventListener('pointerdown', function (event) {
|
||||
if (done || busy) { return; }
|
||||
pointerId = event.pointerId;
|
||||
handle.setPointerCapture(pointerId);
|
||||
root.classList.add('is-dragging');
|
||||
var offset = event.clientX - handle.getBoundingClientRect().left;
|
||||
|
||||
function move(moveEvent) {
|
||||
place(moveEvent.clientX - track.getBoundingClientRect().left - offset);
|
||||
}
|
||||
|
||||
function up() {
|
||||
handle.removeEventListener('pointermove', move);
|
||||
handle.removeEventListener('pointerup', up);
|
||||
handle.removeEventListener('pointercancel', up);
|
||||
root.classList.remove('is-dragging');
|
||||
if (pointerId !== null && handle.hasPointerCapture && handle.hasPointerCapture(pointerId)) {
|
||||
handle.releasePointerCapture(pointerId);
|
||||
}
|
||||
pointerId = null;
|
||||
if (pos >= limit() - 2) { complete(); } else { place(0); }
|
||||
}
|
||||
|
||||
handle.addEventListener('pointermove', move);
|
||||
handle.addEventListener('pointerup', up);
|
||||
handle.addEventListener('pointercancel', up);
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// Obsługa klawiaturą - strzałkami do końca albo klawiszem End.
|
||||
handle.addEventListener('keydown', function (event) {
|
||||
if (done || busy) { return; }
|
||||
var step = limit() / 4;
|
||||
var key = event.key;
|
||||
if (key === 'ArrowRight' || key === 'ArrowUp') { place(pos + step); }
|
||||
else if (key === 'ArrowLeft' || key === 'ArrowDown') { place(pos - step); }
|
||||
else if (key === 'End') { place(limit()); }
|
||||
else if (key === 'Home') { place(0); }
|
||||
else { return; }
|
||||
event.preventDefault();
|
||||
if (pos >= limit() - 1) { complete(); }
|
||||
});
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
place(done ? limit() : pos);
|
||||
});
|
||||
|
||||
reset();
|
||||
|
||||
return {
|
||||
isVerified: function () { return done; },
|
||||
focus: function () { handle.focus(); },
|
||||
reset: reset
|
||||
};
|
||||
}
|
||||
|
||||
/* -- pojedynczy formularz ------------------------------------------------- */
|
||||
function initForm(form) {
|
||||
var id = form.getAttribute('data-form');
|
||||
var endpoint = form.getAttribute('data-endpoint') || 'api/send.php';
|
||||
var status = form.querySelector('[data-form-status]');
|
||||
var button = form.querySelector('button[type="submit"]');
|
||||
var consent = form.querySelector('[data-consent]');
|
||||
var verifyRoot = form.querySelector('[data-verify]');
|
||||
var buttonLabel = button ? button.textContent : t.sendLabel;
|
||||
|
||||
var token = null;
|
||||
var proof = null;
|
||||
var sending = false;
|
||||
|
||||
function setStatus(text, kind) {
|
||||
if (!status) { return; }
|
||||
status.textContent = text || '';
|
||||
status.className = 'form-status' + (kind ? ' is-' + kind : '');
|
||||
}
|
||||
|
||||
function request(params, done) {
|
||||
var url = endpoint + '?' + params;
|
||||
var xhrDone = false;
|
||||
fetch(url, { credentials: 'same-origin', headers: { 'Accept': 'application/json' } })
|
||||
.then(function (response) { return response.json().catch(function () { return {}; }); })
|
||||
.then(function (data) { xhrDone = true; done(data && data.ok ? data : null); })
|
||||
.catch(function () { if (!xhrDone) { done(null); } });
|
||||
}
|
||||
|
||||
// Token pobieramy dopiero, gdy ktoś zacznie korzystać z formularza.
|
||||
// Dzięki temu serwer mierzy realny czas wypełniania.
|
||||
//
|
||||
// Kolejka pending jest istotna: zdarzenie na suwaku potrafi zawołać tę
|
||||
// funkcję dwa razy w tej samej chwili. Bez niej powstałyby dwa tokeny,
|
||||
// a potwierdzenie dotyczyłoby innego niż ten wysłany razem z formularzem.
|
||||
var pending = null;
|
||||
|
||||
function ensureToken(done) {
|
||||
if (token) { done(true); return; }
|
||||
if (pending) { pending.push(done); return; }
|
||||
pending = [done];
|
||||
request('action=token&form=' + encodeURIComponent(id), function (data) {
|
||||
var queue = pending;
|
||||
pending = null;
|
||||
if (data && data.token) { token = data.token; }
|
||||
for (var i = 0; i < queue.length; i++) { queue[i](!!token); }
|
||||
});
|
||||
}
|
||||
|
||||
var slider = verifyRoot ? Slider(verifyRoot, function (finish) {
|
||||
ensureToken(function (ok) {
|
||||
if (!ok) { setStatus(t.tokenError, 'error'); finish(false); return; }
|
||||
request('action=confirm&form=' + encodeURIComponent(id) + '&token=' + encodeURIComponent(token), function (data) {
|
||||
if (data && data.proof) {
|
||||
proof = data.proof;
|
||||
setStatus('', null);
|
||||
finish(true);
|
||||
} else {
|
||||
setStatus(t.tokenError, 'error');
|
||||
finish(false);
|
||||
}
|
||||
});
|
||||
});
|
||||
}) : null;
|
||||
|
||||
// Token bierzemy przy pierwszym dotknięciu formularza - wtedy serwer mierzy
|
||||
// realny czas wypełniania, a nie moment przesunięcia suwaka.
|
||||
var wake = function () { ensureToken(function () {}); };
|
||||
form.addEventListener('focusin', wake);
|
||||
if (verifyRoot) {
|
||||
verifyRoot.addEventListener('pointerdown', wake);
|
||||
verifyRoot.addEventListener('keydown', wake);
|
||||
}
|
||||
|
||||
form.addEventListener('submit', function (event) {
|
||||
event.preventDefault();
|
||||
if (sending) { return; }
|
||||
|
||||
if (slider && !slider.isVerified()) {
|
||||
setStatus(t.needSlider, 'error');
|
||||
slider.focus();
|
||||
return;
|
||||
}
|
||||
if (consent && !consent.checked) {
|
||||
setStatus(t.needConsent, 'error');
|
||||
consent.focus();
|
||||
return;
|
||||
}
|
||||
if (!token || !proof) {
|
||||
setStatus(t.tokenError, 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
var payload = {
|
||||
form: id,
|
||||
token: token,
|
||||
proof: proof,
|
||||
zgoda: true,
|
||||
page: window.location.href
|
||||
};
|
||||
var fields = form.querySelectorAll('input[name], select[name], textarea[name]');
|
||||
for (var i = 0; i < fields.length; i++) {
|
||||
var field = fields[i];
|
||||
if (field.type === 'checkbox' || field.type === 'radio' || field.type === 'submit') { continue; }
|
||||
payload[field.name] = field.value;
|
||||
}
|
||||
|
||||
sending = true;
|
||||
setStatus(t.sending, 'busy');
|
||||
if (button) { button.disabled = true; button.textContent = t.sending; }
|
||||
|
||||
fetch(endpoint, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
})
|
||||
.then(function (response) {
|
||||
return response.json()
|
||||
.catch(function () { return { ok: false }; })
|
||||
.then(function (data) { return { status: response.status, data: data }; });
|
||||
})
|
||||
.then(function (result) {
|
||||
sending = false;
|
||||
if (button) { button.disabled = false; button.textContent = buttonLabel; }
|
||||
if (result.data && result.data.ok) {
|
||||
form.reset();
|
||||
token = null;
|
||||
proof = null;
|
||||
if (slider) { slider.reset(); }
|
||||
setStatus(result.data.message || '', 'ok');
|
||||
} else {
|
||||
setStatus((result.data && result.data.message) || t.generic, 'error');
|
||||
// Token jest jednorazowy i serwer mógł go już zużyć, więc po każdym
|
||||
// błędzie bierzemy nowy i prosimy o ponowne przesunięcie suwaka.
|
||||
token = null;
|
||||
proof = null;
|
||||
if (slider) { slider.reset(); }
|
||||
}
|
||||
})
|
||||
.catch(function () {
|
||||
sending = false;
|
||||
if (button) { button.disabled = false; button.textContent = buttonLabel; }
|
||||
setStatus(t.network, 'error');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function boot() {
|
||||
var forms = document.querySelectorAll('form[data-form]');
|
||||
for (var i = 0; i < forms.length; i++) { initForm(forms[i]); }
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', boot);
|
||||
} else {
|
||||
boot();
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,101 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-app">
|
||||
<title id="t-app">Aplikacje pod klucz - wymagania klienta zamieniane w system webowy i aplikację brygady na telefon</title>
|
||||
<defs>
|
||||
<pattern id="app-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||
</pattern>
|
||||
<marker id="app-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<rect width="640" height="360" fill="#eaeef2"/>
|
||||
<rect width="640" height="360" fill="url(#app-grid)"/>
|
||||
|
||||
<!-- ── wymagania klienta: kartka ze specyfikacją ────────────────────── -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M42 70h96l26 26v138H42z" fill="#f2f2f3"/>
|
||||
<path d="M138 70v26h26"/>
|
||||
</g>
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="m58 122 6 6 11-12"/><path d="m58 150 6 6 11-12"/><path d="m58 178 6 6 11-12"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="84" y="120" width="62" height="7"/>
|
||||
<rect x="84" y="148" width="52" height="7"/>
|
||||
<rect x="84" y="176" width="66" height="7"/>
|
||||
</g>
|
||||
<text x="42" y="256" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="122" lengthAdjust="spacingAndGlyphs" opacity=".75">WYMAGANIA KLIENTA</text>
|
||||
|
||||
<!-- strzałka: wymagania -> wdrożenie -->
|
||||
<path d="M198 148 H244" stroke="#5980a6" stroke-width="1.8" fill="none" marker-end="url(#app-arr)"/>
|
||||
|
||||
<!-- ── aplikacja webowa: okno przeglądarki ─────────────────────────── -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="262" y="62" width="212" height="152" fill="#f2f2f3"/>
|
||||
<path d="M262 88h212"/>
|
||||
</g>
|
||||
<rect x="262" y="62" width="212" height="26" fill="#5980a6" fill-opacity=".2"/>
|
||||
<g fill="#416180" opacity=".45">
|
||||
<circle cx="276" cy="75" r="3.5"/><circle cx="288" cy="75" r="3.5"/><circle cx="300" cy="75" r="3.5"/>
|
||||
</g>
|
||||
<!-- panel boczny + treść -->
|
||||
<path d="M300 88v126" stroke="#416180" stroke-width="1.5" fill="none"/>
|
||||
<g fill="#5980a6" opacity=".35">
|
||||
<rect x="272" y="100" width="20" height="6"/><rect x="272" y="114" width="20" height="6"/>
|
||||
<rect x="272" y="128" width="20" height="6"/>
|
||||
</g>
|
||||
<rect x="272" y="100" width="20" height="6" fill="#5980a6" opacity=".75"/>
|
||||
<!-- wykres w aplikacji -->
|
||||
<g stroke="#5980a6" stroke-width="1.6" fill="none">
|
||||
<path d="M314 176 344 152 368 162 396 128 424 140 458 112"/>
|
||||
<path d="M314 190h144" stroke-opacity=".45"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="314" y="100" width="72" height="7"/>
|
||||
<rect x="314" y="114" width="104" height="6"/>
|
||||
</g>
|
||||
<text x="262" y="238" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="96" lengthAdjust="spacingAndGlyphs" opacity=".75">SYSTEM WEBOWY</text>
|
||||
|
||||
<!-- ── aplikacja mobilna: telefon ──────────────────────────────────── -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="512" y="62" width="86" height="152" rx="9" fill="#f2f2f3"/>
|
||||
<path d="M512 84h86M512 196h86"/>
|
||||
<path d="M544 73h22"/>
|
||||
</g>
|
||||
<rect x="512" y="84" width="86" height="112" fill="#5980a6" fill-opacity=".12"/>
|
||||
<g fill="#5980a6" opacity=".5">
|
||||
<rect x="524" y="96" width="42" height="7"/>
|
||||
</g>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||
<rect x="524" y="112" width="62" height="26"/>
|
||||
<rect x="524" y="146" width="62" height="26"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".35">
|
||||
<rect x="532" y="120" width="30" height="5"/><rect x="532" y="129" width="42" height="4"/>
|
||||
<rect x="532" y="154" width="38" height="5"/><rect x="532" y="163" width="26" height="4"/>
|
||||
</g>
|
||||
<circle cx="555" cy="205" r="4.5" fill="none" stroke="#416180" stroke-width="1.5"/>
|
||||
<text x="512" y="238" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="86" lengthAdjust="spacingAndGlyphs" opacity=".75">APLIKACJA BRYGADY</text>
|
||||
|
||||
<!-- ── pasek: etapy realizacji pod klucz ───────────────────────────── -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M42 296h556"/>
|
||||
</g>
|
||||
<g fill="#5980a6">
|
||||
<circle cx="82" cy="296" r="5"/><circle cx="220" cy="296" r="5"/>
|
||||
<circle cx="358" cy="296" r="5"/><circle cx="496" cy="296" r="5"/>
|
||||
</g>
|
||||
<circle cx="580" cy="296" r="7" fill="#1d2d3d"/>
|
||||
<path d="m576 296 3 3 6-7" stroke="#f2f2f3" stroke-width="1.8" fill="none"/>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="11"
|
||||
text-anchor="middle" opacity=".75">
|
||||
<text x="82" y="322" textLength="46" lengthAdjust="spacingAndGlyphs">ANALIZA</text>
|
||||
<text x="220" y="322" textLength="46" lengthAdjust="spacingAndGlyphs">PROJEKT</text>
|
||||
<text x="358" y="322" textLength="62" lengthAdjust="spacingAndGlyphs">PROGRAMOWANIE</text>
|
||||
<text x="496" y="322" textLength="46" lengthAdjust="spacingAndGlyphs">TESTY</text>
|
||||
<text x="580" y="322" textLength="60" lengthAdjust="spacingAndGlyphs">WDROŻENIE</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,101 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 400" role="img" aria-labelledby="t-eko">
|
||||
<title id="t-eko">Schemat ekosystemu SoftSPM - portal Wodociągowiec i marketplace Giełda Komunalna wymieniają tematy, praktyków i ogłoszenia z platformą kursową w centrum</title>
|
||||
<defs>
|
||||
<pattern id="eko-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/>
|
||||
</pattern>
|
||||
<marker id="eko-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<rect width="720" height="400" fill="#eaeef2"/>
|
||||
<rect width="720" height="400" fill="url(#eko-grid)"/>
|
||||
|
||||
<!-- ── połączenia ──────────────────────────────────────────────────────
|
||||
Linie przerwane w miejscu etykiety (luka w stroke-dasharray), więc
|
||||
tekst nie leży na kresce i nie potrzebuje tła. Strzałki wchodzą
|
||||
w krawędzie kartonów, nie w narożniki. -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<!-- poziomo: portal <-> giełda; dł. 184, luka 100 pod etykietą -->
|
||||
<path d="M268 98 H452" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||
stroke-dasharray="42 100 42"/>
|
||||
<!-- ukośnie: portal <-> platforma; dł. 145, luka 91 pod etykietą -->
|
||||
<path d="M190 162 L310 244" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||
stroke-dasharray="27 91 27"/>
|
||||
<!-- ukośnie: giełda <-> platforma -->
|
||||
<path d="M530 162 L410 244" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||
stroke-dasharray="27 91 27"/>
|
||||
</g>
|
||||
|
||||
<!-- ── etykiety przepływów (w lukach linii) ─────────────────────────
|
||||
textLength wymusza szerokość napisu niezależnie od tego, czy Barlow
|
||||
Condensed się załadował - bez tego zastępczy font rozpycha tekst. -->
|
||||
<g font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="12.5"
|
||||
fill="#416180" text-anchor="middle">
|
||||
<text x="360" y="102" textLength="88" lengthAdjust="spacingAndGlyphs">TEMATY Z RYNKU</text>
|
||||
<text x="250" y="203" textLength="58" lengthAdjust="spacingAndGlyphs"
|
||||
transform="rotate(34.3 250 203)">PRAKTYCY</text>
|
||||
<text x="470" y="203" textLength="62" lengthAdjust="spacingAndGlyphs"
|
||||
transform="rotate(-34.3 470 203)">OGŁOSZENIA</text>
|
||||
</g>
|
||||
|
||||
<!-- ── Wodociągowiec.pl ─────────────────────────────────────────────
|
||||
Karton 180 px, wcięcie 14 px z każdej strony -> 152 px na tekst. -->
|
||||
<g>
|
||||
<rect x="88" y="52" width="180" height="110" fill="#f2f2f3" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="88" y="52" width="180" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="102" y="72" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="14" font-weight="600"
|
||||
textLength="120" lengthAdjust="spacingAndGlyphs">WODOCIĄGOWIEC.PL</text>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||
<rect x="102" y="94" width="40" height="34"/>
|
||||
<path d="M154 100h100M154 111h76M154 122h100"/>
|
||||
</g>
|
||||
<text x="102" y="150" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" opacity=".72"
|
||||
textLength="150" lengthAdjust="spacingAndGlyphs">PORTAL BRANŻOWY · WIEDZA</text>
|
||||
</g>
|
||||
|
||||
<!-- ── Giełda Komunalna ────────────────────────────────────────────── -->
|
||||
<g>
|
||||
<rect x="452" y="52" width="180" height="110" fill="#f2f2f3" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="452" y="52" width="180" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="466" y="72" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="14" font-weight="600"
|
||||
textLength="134" lengthAdjust="spacingAndGlyphs">GIEŁDAKOMUNALNA.PL</text>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||
<rect x="466" y="94" width="32" height="34"/>
|
||||
<rect x="506" y="94" width="32" height="34"/>
|
||||
<rect x="546" y="94" width="32" height="34"/>
|
||||
<rect x="586" y="94" width="18" height="34"/>
|
||||
</g>
|
||||
<text x="466" y="150" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" opacity=".72"
|
||||
textLength="134" lengthAdjust="spacingAndGlyphs">MARKETPLACE · WYSTAW ZA 0 ZŁ</text>
|
||||
</g>
|
||||
|
||||
<!-- ── Platforma kursowa (centrum) ─────────────────────────────────── -->
|
||||
<g>
|
||||
<rect x="248" y="244" width="224" height="120" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="248" y="244" width="224" height="32" fill="#1d2d3d"/>
|
||||
<text x="360" y="266" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="15" font-weight="600" text-anchor="middle"
|
||||
textLength="140" lengthAdjust="spacingAndGlyphs">PLATFORMA KURSOWA</text>
|
||||
<g stroke="#f2f2f3" stroke-width="1.6" fill="none">
|
||||
<rect x="266" y="290" width="56" height="38"/>
|
||||
<path d="M336 298h118M336 309h92M336 320h118"/>
|
||||
</g>
|
||||
<path d="m287 303 13 6-13 6z" fill="#f2f2f3"/>
|
||||
<text x="360" y="350" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" text-anchor="middle" opacity=".9"
|
||||
textLength="192" lengthAdjust="spacingAndGlyphs">WEBINARIA · E-LEARNING · CERTYFIKATY</text>
|
||||
</g>
|
||||
|
||||
<!-- ── krzyżyki rejestracyjne wokół centrum ────────────────────────── -->
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".45">
|
||||
<path d="M241 237v13M235 243h13"/>
|
||||
<path d="M479 237v13M473 243h13"/>
|
||||
<path d="M241 359v13M235 365h13"/>
|
||||
<path d="M479 359v13M473 365h13"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,101 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-app">
|
||||
<title id="t-app">Turnkey software - client requirements turned into a web system and a field crew app</title>
|
||||
<defs>
|
||||
<pattern id="app-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||
</pattern>
|
||||
<marker id="app-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<rect width="640" height="360" fill="#eaeef2"/>
|
||||
<rect width="640" height="360" fill="url(#app-grid)"/>
|
||||
|
||||
<!-- ── wymagania klienta: kartka ze specyfikacją ────────────────────── -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M42 70h96l26 26v138H42z" fill="#f2f2f3"/>
|
||||
<path d="M138 70v26h26"/>
|
||||
</g>
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="m58 122 6 6 11-12"/><path d="m58 150 6 6 11-12"/><path d="m58 178 6 6 11-12"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="84" y="120" width="62" height="7"/>
|
||||
<rect x="84" y="148" width="52" height="7"/>
|
||||
<rect x="84" y="176" width="66" height="7"/>
|
||||
</g>
|
||||
<text x="42" y="256" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="130" lengthAdjust="spacingAndGlyphs" opacity=".75">CLIENT REQUIREMENTS</text>
|
||||
|
||||
<!-- strzałka: wymagania -> wdrożenie -->
|
||||
<path d="M198 148 H244" stroke="#5980a6" stroke-width="1.8" fill="none" marker-end="url(#app-arr)"/>
|
||||
|
||||
<!-- ── aplikacja webowa: okno przeglądarki ─────────────────────────── -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="262" y="62" width="212" height="152" fill="#f2f2f3"/>
|
||||
<path d="M262 88h212"/>
|
||||
</g>
|
||||
<rect x="262" y="62" width="212" height="26" fill="#5980a6" fill-opacity=".2"/>
|
||||
<g fill="#416180" opacity=".45">
|
||||
<circle cx="276" cy="75" r="3.5"/><circle cx="288" cy="75" r="3.5"/><circle cx="300" cy="75" r="3.5"/>
|
||||
</g>
|
||||
<!-- panel boczny + treść -->
|
||||
<path d="M300 88v126" stroke="#416180" stroke-width="1.5" fill="none"/>
|
||||
<g fill="#5980a6" opacity=".35">
|
||||
<rect x="272" y="100" width="20" height="6"/><rect x="272" y="114" width="20" height="6"/>
|
||||
<rect x="272" y="128" width="20" height="6"/>
|
||||
</g>
|
||||
<rect x="272" y="100" width="20" height="6" fill="#5980a6" opacity=".75"/>
|
||||
<!-- wykres w aplikacji -->
|
||||
<g stroke="#5980a6" stroke-width="1.6" fill="none">
|
||||
<path d="M314 176 344 152 368 162 396 128 424 140 458 112"/>
|
||||
<path d="M314 190h144" stroke-opacity=".45"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="314" y="100" width="72" height="7"/>
|
||||
<rect x="314" y="114" width="104" height="6"/>
|
||||
</g>
|
||||
<text x="262" y="238" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="80" lengthAdjust="spacingAndGlyphs" opacity=".75">WEB SYSTEM</text>
|
||||
|
||||
<!-- ── aplikacja mobilna: telefon ──────────────────────────────────── -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="512" y="62" width="86" height="152" rx="9" fill="#f2f2f3"/>
|
||||
<path d="M512 84h86M512 196h86"/>
|
||||
<path d="M544 73h22"/>
|
||||
</g>
|
||||
<rect x="512" y="84" width="86" height="112" fill="#5980a6" fill-opacity=".12"/>
|
||||
<g fill="#5980a6" opacity=".5">
|
||||
<rect x="524" y="96" width="42" height="7"/>
|
||||
</g>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||
<rect x="524" y="112" width="62" height="26"/>
|
||||
<rect x="524" y="146" width="62" height="26"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".35">
|
||||
<rect x="532" y="120" width="30" height="5"/><rect x="532" y="129" width="42" height="4"/>
|
||||
<rect x="532" y="154" width="38" height="5"/><rect x="532" y="163" width="26" height="4"/>
|
||||
</g>
|
||||
<circle cx="555" cy="205" r="4.5" fill="none" stroke="#416180" stroke-width="1.5"/>
|
||||
<text x="512" y="238" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="106" lengthAdjust="spacingAndGlyphs" opacity=".75">FIELD CREW APP</text>
|
||||
|
||||
<!-- ── pasek: etapy realizacji pod klucz ───────────────────────────── -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M42 296h556"/>
|
||||
</g>
|
||||
<g fill="#5980a6">
|
||||
<circle cx="82" cy="296" r="5"/><circle cx="220" cy="296" r="5"/>
|
||||
<circle cx="358" cy="296" r="5"/><circle cx="496" cy="296" r="5"/>
|
||||
</g>
|
||||
<circle cx="580" cy="296" r="7" fill="#1d2d3d"/>
|
||||
<path d="m576 296 3 3 6-7" stroke="#f2f2f3" stroke-width="1.8" fill="none"/>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="11"
|
||||
text-anchor="middle" opacity=".75">
|
||||
<text x="82" y="322" textLength="48" lengthAdjust="spacingAndGlyphs">ANALYSIS</text>
|
||||
<text x="220" y="322" textLength="44" lengthAdjust="spacingAndGlyphs">DESIGN</text>
|
||||
<text x="358" y="322" textLength="66" lengthAdjust="spacingAndGlyphs">DEVELOPMENT</text>
|
||||
<text x="496" y="322" textLength="44" lengthAdjust="spacingAndGlyphs">TESTING</text>
|
||||
<text x="580" y="322" textLength="46" lengthAdjust="spacingAndGlyphs">ROLLOUT</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.2 KiB |
@@ -0,0 +1,101 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 400" role="img" aria-labelledby="t-eko">
|
||||
<title id="t-eko">SoftSPM ecosystem diagram - the Wodociagowiec portal and the Gielda Komunalna marketplace exchange topics, practitioners and listings with the course platform at the centre</title>
|
||||
<defs>
|
||||
<pattern id="eko-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/>
|
||||
</pattern>
|
||||
<marker id="eko-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/>
|
||||
</marker>
|
||||
</defs>
|
||||
<rect width="720" height="400" fill="#eaeef2"/>
|
||||
<rect width="720" height="400" fill="url(#eko-grid)"/>
|
||||
|
||||
<!-- ── połączenia ──────────────────────────────────────────────────────
|
||||
Linie przerwane w miejscu etykiety (luka w stroke-dasharray), więc
|
||||
tekst nie leży na kresce i nie potrzebuje tła. Strzałki wchodzą
|
||||
w krawędzie kartonów, nie w narożniki. -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<!-- poziomo: portal <-> giełda; dł. 184, luka 100 pod etykietą -->
|
||||
<path d="M268 98 H452" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||
stroke-dasharray="42 100 42"/>
|
||||
<!-- ukośnie: portal <-> platforma; dł. 145, luka 91 pod etykietą -->
|
||||
<path d="M190 162 L310 244" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||
stroke-dasharray="27 91 27"/>
|
||||
<!-- ukośnie: giełda <-> platforma -->
|
||||
<path d="M530 162 L410 244" marker-start="url(#eko-arrow)" marker-end="url(#eko-arrow)"
|
||||
stroke-dasharray="27 91 27"/>
|
||||
</g>
|
||||
|
||||
<!-- ── etykiety przepływów (w lukach linii) ─────────────────────────
|
||||
textLength wymusza szerokość napisu niezależnie od tego, czy Barlow
|
||||
Condensed się załadował - bez tego zastępczy font rozpycha tekst. -->
|
||||
<g font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="12.5"
|
||||
fill="#416180" text-anchor="middle">
|
||||
<text x="360" y="102" textLength="88" lengthAdjust="spacingAndGlyphs">MARKET TOPICS</text>
|
||||
<text x="250" y="203" textLength="58" lengthAdjust="spacingAndGlyphs"
|
||||
transform="rotate(34.3 250 203)">EXPERTS</text>
|
||||
<text x="470" y="203" textLength="62" lengthAdjust="spacingAndGlyphs"
|
||||
transform="rotate(-34.3 470 203)">LISTINGS</text>
|
||||
</g>
|
||||
|
||||
<!-- ── Wodociągowiec.pl ─────────────────────────────────────────────
|
||||
Karton 180 px, wcięcie 14 px z każdej strony -> 152 px na tekst. -->
|
||||
<g>
|
||||
<rect x="88" y="52" width="180" height="110" fill="#f2f2f3" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="88" y="52" width="180" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="102" y="72" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="14" font-weight="600"
|
||||
textLength="120" lengthAdjust="spacingAndGlyphs">WODOCIAGOWIEC.PL</text>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||
<rect x="102" y="94" width="40" height="34"/>
|
||||
<path d="M154 100h100M154 111h76M154 122h100"/>
|
||||
</g>
|
||||
<text x="102" y="150" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" opacity=".72"
|
||||
textLength="150" lengthAdjust="spacingAndGlyphs">TRADE PORTAL · KNOWLEDGE</text>
|
||||
</g>
|
||||
|
||||
<!-- ── Giełda Komunalna ────────────────────────────────────────────── -->
|
||||
<g>
|
||||
<rect x="452" y="52" width="180" height="110" fill="#f2f2f3" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="452" y="52" width="180" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="466" y="72" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="14" font-weight="600"
|
||||
textLength="134" lengthAdjust="spacingAndGlyphs">GIELDAKOMUNALNA.PL</text>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||
<rect x="466" y="94" width="32" height="34"/>
|
||||
<rect x="506" y="94" width="32" height="34"/>
|
||||
<rect x="546" y="94" width="32" height="34"/>
|
||||
<rect x="586" y="94" width="18" height="34"/>
|
||||
</g>
|
||||
<text x="466" y="150" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" opacity=".72"
|
||||
textLength="134" lengthAdjust="spacingAndGlyphs">MARKETPLACE · FREE TO LIST</text>
|
||||
</g>
|
||||
|
||||
<!-- ── Platforma kursowa (centrum) ─────────────────────────────────── -->
|
||||
<g>
|
||||
<rect x="248" y="244" width="224" height="120" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="248" y="244" width="224" height="32" fill="#1d2d3d"/>
|
||||
<text x="360" y="266" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="15" font-weight="600" text-anchor="middle"
|
||||
textLength="140" lengthAdjust="spacingAndGlyphs">COURSE PLATFORM</text>
|
||||
<g stroke="#f2f2f3" stroke-width="1.6" fill="none">
|
||||
<rect x="266" y="290" width="56" height="38"/>
|
||||
<path d="M336 298h118M336 309h92M336 320h118"/>
|
||||
</g>
|
||||
<path d="m287 303 13 6-13 6z" fill="#f2f2f3"/>
|
||||
<text x="360" y="350" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" text-anchor="middle" opacity=".9"
|
||||
textLength="192" lengthAdjust="spacingAndGlyphs">WEBINARS · E-LEARNING · CERTIFICATES</text>
|
||||
</g>
|
||||
|
||||
<!-- ── krzyżyki rejestracyjne wokół centrum ────────────────────────── -->
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".45">
|
||||
<path d="M241 237v13M235 243h13"/>
|
||||
<path d="M479 237v13M473 243h13"/>
|
||||
<path d="M241 359v13M235 365h13"/>
|
||||
<path d="M479 359v13M473 365h13"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
@@ -0,0 +1,54 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-audyt">
|
||||
<title id="t-audyt">Security audit - review of system layers, a vulnerability list and NIS2 compliance</title>
|
||||
<defs><pattern id="g-audyt" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-audyt)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="180" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · SECURITY AUDIT</text>
|
||||
|
||||
<!-- tarcza -->
|
||||
<g stroke="#416180" stroke-width="1.8" fill="none">
|
||||
<path d="M108 56 52 78v50c0 40 28 68 56 74 28-6 56-34 56-74V78z" fill="#f2f2f3"/>
|
||||
</g>
|
||||
<path d="M108 56 52 78v50c0 40 28 68 56 74z" fill="#5980a6" fill-opacity=".18"/>
|
||||
<g stroke="#5980a6" stroke-width="2.6" fill="none">
|
||||
<path d="m84 122 16 16 30-34"/>
|
||||
</g>
|
||||
<text x="60" y="224" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" textLength="102" lengthAdjust="spacingAndGlyphs" opacity=".72">NIS2 COMPLIANCE</text>
|
||||
|
||||
<!-- raport z podatnosciami -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="204" y="52" width="228" height="150" fill="#f2f2f3"/>
|
||||
<path d="M204 76h228"/>
|
||||
</g>
|
||||
<rect x="204" y="52" width="228" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="216" y="69" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="124" lengthAdjust="spacingAndGlyphs">VULNERABILITY LIST</text>
|
||||
|
||||
<!-- pozycje: poziom ryzyka + opis -->
|
||||
<g>
|
||||
<rect x="216" y="88" width="30" height="12" fill="#1d2d3d"/>
|
||||
<rect x="216" y="112" width="30" height="12" fill="#5980a6"/>
|
||||
<rect x="216" y="136" width="30" height="12" fill="#5980a6" fill-opacity=".55"/>
|
||||
<rect x="216" y="160" width="30" height="12" fill="#5980a6" fill-opacity=".3"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="256" y="90" width="150" height="7"/>
|
||||
<rect x="256" y="114" width="124" height="7"/>
|
||||
<rect x="256" y="138" width="142" height="7"/>
|
||||
<rect x="256" y="162" width="110" height="7"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="8.5"
|
||||
text-anchor="middle" opacity=".9">
|
||||
<text x="231" y="97" fill="#f2f2f3" textLength="22" lengthAdjust="spacingAndGlyphs">CRIT.</text>
|
||||
<text x="231" y="121" fill="#f2f2f3" textLength="22" lengthAdjust="spacingAndGlyphs">HIGH</text>
|
||||
</g>
|
||||
<text x="204" y="224" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" textLength="164" lengthAdjust="spacingAndGlyphs" opacity=".72">RECOMMENDATIONS BY PRIORITY</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -0,0 +1,78 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-cyfr">
|
||||
<title id="t-cyfr">Digitising a utility - paper documentation turned into a system with a phased rollout plan</title>
|
||||
<defs><pattern id="g-cyfr" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||
<marker id="cy-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6.5" markerHeight="6.5" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker>
|
||||
</defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-cyfr)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="150" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · DIGITISATION</text>
|
||||
|
||||
<!-- stos papierowych teczek: stan wyjściowy -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||
<path d="M44 148h84v52H44z"/>
|
||||
<path d="M50 136h84v52H50z"/>
|
||||
<path d="M56 124h84v52H56z"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".38">
|
||||
<rect x="66" y="138" width="52" height="6"/>
|
||||
<rect x="66" y="150" width="38" height="5"/>
|
||||
<rect x="66" y="160" width="46" height="5"/>
|
||||
</g>
|
||||
<text x="44" y="220" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" textLength="94" lengthAdjust="spacingAndGlyphs" opacity=".72">PAPER AND SHEETS</text>
|
||||
|
||||
<!-- strzałka przejścia -->
|
||||
<path d="M156 152 H206" stroke="#5980a6" stroke-width="1.8" fill="none" marker-end="url(#cy-arr)"/>
|
||||
|
||||
<!-- system docelowy: ekran z modułami -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="224" y="60" width="212" height="128" fill="#f2f2f3"/>
|
||||
<path d="M224 84h212"/>
|
||||
</g>
|
||||
<rect x="224" y="60" width="212" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="236" y="77" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="104" lengthAdjust="spacingAndGlyphs">CENTRAL SYSTEM</text>
|
||||
|
||||
<!-- moduły w systemie -->
|
||||
<g stroke="#5980a6" stroke-width="1.4" fill="none">
|
||||
<rect x="238" y="96" width="58" height="34"/>
|
||||
<rect x="306" y="96" width="58" height="34"/>
|
||||
<rect x="374" y="96" width="48" height="34"/>
|
||||
<rect x="238" y="140" width="58" height="34"/>
|
||||
<rect x="306" y="140" width="116" height="34"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".3">
|
||||
<rect x="238" y="96" width="58" height="34"/>
|
||||
<rect x="306" y="140" width="116" height="34"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9"
|
||||
text-anchor="middle" opacity=".85">
|
||||
<text x="267" y="117" textLength="40" lengthAdjust="spacingAndGlyphs">ASSETS</text>
|
||||
<text x="335" y="117" textLength="48" lengthAdjust="spacingAndGlyphs">WORK ORDERS</text>
|
||||
<text x="398" y="117" textLength="40" lengthAdjust="spacingAndGlyphs">READINGS</text>
|
||||
<text x="267" y="161" textLength="40" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||
<text x="364" y="161" textLength="58" lengthAdjust="spacingAndGlyphs">REPORTING</text>
|
||||
</g>
|
||||
|
||||
<!-- etapowy plan wdrożenia -->
|
||||
<g stroke="#416180" stroke-width="1.4" fill="none" opacity=".8">
|
||||
<path d="M224 208h212"/>
|
||||
</g>
|
||||
<g fill="#5980a6">
|
||||
<circle cx="252" cy="208" r="4.5"/>
|
||||
<circle cx="330" cy="208" r="4.5"/>
|
||||
</g>
|
||||
<circle cx="408" cy="208" r="4.5" fill="none" stroke="#416180" stroke-width="1.4"/>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9.5"
|
||||
text-anchor="middle" opacity=".75">
|
||||
<text x="252" y="226" textLength="38" lengthAdjust="spacingAndGlyphs">PHASE I</text>
|
||||
<text x="330" y="226" textLength="42" lengthAdjust="spacingAndGlyphs">PHASE II</text>
|
||||
<text x="408" y="226" textLength="46" lengthAdjust="spacingAndGlyphs">PHASE III</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,68 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-gielda">
|
||||
<title id="t-gielda">Gielda Komunalna - a free marketplace: warehouse surplus listed for manufacturers and contractors in the trade</title>
|
||||
<defs><pattern id="g-gielda" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||
<marker id="gl-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6.5" markerHeight="6.5" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker>
|
||||
</defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-gielda)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="168" lengthAdjust="spacingAndGlyphs" opacity=".7">ECOSYSTEM · GIELDA KOMUNALNA</text>
|
||||
|
||||
<!-- magazyn: nadwyżki, które gdzieś leżą -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M38 104 78 88l40 16"/>
|
||||
<path d="M46 104v66h64v-66"/>
|
||||
<path d="M46 116h64"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".3" stroke="#416180" stroke-width="1.3">
|
||||
<rect x="58" y="126" width="18" height="18"/>
|
||||
<rect x="80" y="126" width="18" height="18"/>
|
||||
<rect x="58" y="148" width="18" height="18"/>
|
||||
<rect x="80" y="148" width="18" height="18"/>
|
||||
</g>
|
||||
<text x="40" y="192" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="92" lengthAdjust="spacingAndGlyphs" opacity=".72">SITTING IN STORAGE</text>
|
||||
|
||||
<!-- ogłoszenie: wystawiasz za darmo -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="182" y="86" width="116" height="84" fill="#f2f2f3"/>
|
||||
<path d="M182 108h116"/>
|
||||
</g>
|
||||
<rect x="182" y="86" width="116" height="22" fill="#5980a6" fill-opacity=".22"/>
|
||||
<text x="194" y="102" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="60" lengthAdjust="spacingAndGlyphs">LISTING</text>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="194" y="118" width="60" height="7"/>
|
||||
<rect x="194" y="130" width="88" height="6"/>
|
||||
</g>
|
||||
<!-- znacznik ceny wystawienia -->
|
||||
<rect x="194" y="144" width="46" height="18" fill="#5980a6"/>
|
||||
<text x="217" y="157" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" font-weight="600" text-anchor="middle"
|
||||
textLength="30" lengthAdjust="spacingAndGlyphs">FREE</text>
|
||||
<text x="246" y="157" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" textLength="44" lengthAdjust="spacingAndGlyphs" opacity=".75">TO LIST</text>
|
||||
|
||||
<!-- strzałki: magazyn -> ogłoszenie -> odbiorcy (w drugą stronę też: wymiana) -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="M124 128 H172" marker-end="url(#gl-arr)"/>
|
||||
<path d="M308 128 H352" marker-start="url(#gl-arr)" marker-end="url(#gl-arr)"/>
|
||||
</g>
|
||||
|
||||
<!-- odbiorcy: producenci i wykonawcy z branży -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<circle cx="386" cy="98" r="11"/><path d="M370 128v-12a16 16 0 0 1 32 0v12"/>
|
||||
<circle cx="428" cy="98" r="11"/><path d="M412 128v-12a16 16 0 0 1 32 0v12"/>
|
||||
<circle cx="407" cy="150" r="11"/><path d="M391 180v-12a16 16 0 0 1 32 0v12"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".22">
|
||||
<circle cx="386" cy="98" r="11"/><circle cx="428" cy="98" r="11"/><circle cx="407" cy="150" r="11"/>
|
||||
</g>
|
||||
<text x="356" y="204" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="98" lengthAdjust="spacingAndGlyphs" opacity=".72">MAKERS · CONTRACTORS</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,59 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-integr">
|
||||
<title id="t-integr">Integration with ERP, CRM and tax systems - the data exchange bus</title>
|
||||
<defs><pattern id="g-integr" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||
<marker id="in-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-integr)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="180" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · SYSTEM INTEGRATION</text>
|
||||
|
||||
<!-- systemy zrodlowe (gora) -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||
<rect x="40" y="48" width="86" height="34"/>
|
||||
<rect x="146" y="48" width="86" height="34"/>
|
||||
<rect x="252" y="48" width="86" height="34"/>
|
||||
<rect x="358" y="48" width="82" height="34"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="12"
|
||||
text-anchor="middle" font-weight="600">
|
||||
<text x="83" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">ERP</text>
|
||||
<text x="189" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">CRM</text>
|
||||
<text x="295" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">TAX</text>
|
||||
<text x="399" y="70" textLength="52" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||
</g>
|
||||
|
||||
<!-- strzalki dwukierunkowe do magistrali -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="M83 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||
<path d="M189 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||
<path d="M295 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||
<path d="M399 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||
</g>
|
||||
|
||||
<!-- magistrala integracyjna -->
|
||||
<rect x="40" y="124" width="400" height="34" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
<text x="240" y="146" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="13" font-weight="600" text-anchor="middle"
|
||||
textLength="150" lengthAdjust="spacingAndGlyphs">DATA EXCHANGE BUS</text>
|
||||
|
||||
<!-- odbiorcy danych (dol) -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="M136 164 V190" marker-end="url(#in-arr)"/>
|
||||
<path d="M344 164 V190" marker-end="url(#in-arr)"/>
|
||||
</g>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||
<rect x="88" y="194" width="96" height="30"/>
|
||||
<rect x="296" y="194" width="96" height="30"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="10.5"
|
||||
text-anchor="middle" opacity=".85">
|
||||
<text x="136" y="213" textLength="72" lengthAdjust="spacingAndGlyphs">REPORTING</text>
|
||||
<text x="344" y="213" textLength="78" lengthAdjust="spacingAndGlyphs">WEB APPLICATIONS</text>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,34 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-klient">
|
||||
<title id="t-klient">Customer service and billing - customer request, invoice and communication</title>
|
||||
<defs><pattern id="g-klient" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-klient)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="186" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · CUSTOMER SERVICE</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="52" y="58" width="146" height="112"/><path d="M52 86h146"/>
|
||||
</g>
|
||||
<rect x="52" y="58" width="146" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="66" y="77" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="74" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".85">
|
||||
<path d="M68 102h114M68 118h92M68 134h114"/>
|
||||
</g>
|
||||
<rect x="68" y="148" width="58" height="12" fill="#5980a6" fill-opacity=".5"/>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M238 88h94a10 10 0 0 1 10 10v42a10 10 0 0 1-10 10h-56l-22 20v-20h-16a10 10 0 0 1-10-10V98a10 10 0 0 1 10-10z"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".42"><rect x="252" y="106" width="64" height="6"/><rect x="252" y="120" width="48" height="6"/><rect x="252" y="134" width="58" height="6"/></g>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<circle cx="404" cy="102" r="18"/><path d="M378 170v-24a26 26 0 0 1 52 0v24"/>
|
||||
</g>
|
||||
<circle cx="404" cy="102" r="18" fill="#5980a6" fill-opacity=".28"/>
|
||||
<text x="234" y="196" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="140" lengthAdjust="spacingAndGlyphs" opacity=".7">REQUEST · INVOICE</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,35 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-portal">
|
||||
<title id="t-portal">Wodociagowiec.pl - trade articles, operational cases and reader comments</title>
|
||||
<defs><pattern id="g-portal" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-portal)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="196" lengthAdjust="spacingAndGlyphs" opacity=".7">ECOSYSTEM · WODOCIAGOWIEC.PL</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="52" y="50" width="226" height="162"/><path d="M52 80h226"/>
|
||||
</g>
|
||||
<rect x="52" y="50" width="226" height="30" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="68" y="70" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="13" textLength="124" lengthAdjust="spacingAndGlyphs">TRADE ARTICLE</text>
|
||||
<rect x="68" y="96" width="84" height="60" fill="#5980a6" fill-opacity=".3" stroke="#416180" stroke-width="1.5"/>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none"><path d="m76 144 18-16 14 12 16-20 18 24"/></g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="166" y="98" width="94" height="7"/><rect x="166" y="112" width="78" height="6"/>
|
||||
<rect x="166" y="126" width="94" height="6"/><rect x="166" y="140" width="66" height="6"/>
|
||||
<rect x="68" y="172" width="192" height="6"/><rect x="68" y="186" width="146" height="6"/>
|
||||
</g>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M308 70h82a10 10 0 0 1 10 10v38a10 10 0 0 1-10 10h-50l-20 18v-18h-12a10 10 0 0 1-10-10V80a10 10 0 0 1 10-10z"/>
|
||||
<path d="M322 124h82a10 10 0 0 1 10 10v38a10 10 0 0 1-10 10h-62l-20 18v-18a10 10 0 0 1-10-10v-38a10 10 0 0 1 10-10z" fill="#eaeef2"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="322" y="86" width="56" height="6"/><rect x="322" y="100" width="42" height="6"/>
|
||||
<rect x="336" y="140" width="56" height="6"/><rect x="336" y="154" width="44" height="6"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-prawo">
|
||||
<title id="t-prawo">Water law and tariffs - tariff document, statutory symbol and approval stamp</title>
|
||||
<defs><pattern id="g-prawo" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-prawo)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="168" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · LAW AND TARIFFS</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M84 46h128l30 30v140H84z"/><path d="M212 46v30h30"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="104" y="94" width="92" height="7"/><rect x="104" y="110" width="118" height="6"/>
|
||||
<rect x="104" y="124" width="104" height="6"/>
|
||||
</g>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".85">
|
||||
<rect x="104" y="144" width="118" height="52"/><path d="M104 162h118M163 144v52"/>
|
||||
</g>
|
||||
<rect x="104" y="144" width="118" height="18" fill="#5980a6" fill-opacity=".2"/>
|
||||
<g stroke="#416180" stroke-width="2.2" fill="none">
|
||||
<circle cx="340" cy="122" r="46"/>
|
||||
<path d="M334 100c-10 0-16 6-16 14s6 12 14 12 14 4 14 12-6 14-16 14M340 90v64"/>
|
||||
</g>
|
||||
<text x="292" y="196" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="118" lengthAdjust="spacingAndGlyphs" opacity=".7">TARIFF APPLICATION</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,64 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-scada">
|
||||
<title id="t-scada">Network monitoring and SCADA - control room desk with assets, a trend and an alarm</title>
|
||||
<defs><pattern id="g-scada" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||
<marker id="sc-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-scada)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="196" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · SCADA AND MONITORING</text>
|
||||
|
||||
<!-- pulpit dyspozytorski -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="40" y="46" width="400" height="150" fill="#f2f2f3"/>
|
||||
<path d="M40 70h400"/>
|
||||
</g>
|
||||
<rect x="40" y="46" width="400" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="52" y="63" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="88" lengthAdjust="spacingAndGlyphs">NETWORK DESK</text>
|
||||
<!-- wskaznik ALARM -->
|
||||
<rect x="376" y="52" width="52" height="14" fill="#1d2d3d"/>
|
||||
<circle cx="386" cy="59" r="3" fill="#f2f2f3"/>
|
||||
<text x="394" y="63" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="9.5" textLength="28" lengthAdjust="spacingAndGlyphs">ALARM</text>
|
||||
|
||||
<!-- schemat sieci: obiekty polaczone rurociagiem -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="M74 118 H150" marker-end="url(#sc-arr)"/>
|
||||
<path d="M186 118 H262" marker-end="url(#sc-arr)"/>
|
||||
<path d="M298 118 H374" marker-end="url(#sc-arr)"/>
|
||||
</g>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||
<rect x="52" y="102" width="26" height="32"/>
|
||||
<rect x="160" y="102" width="26" height="32"/>
|
||||
<rect x="272" y="102" width="26" height="32"/>
|
||||
<rect x="384" y="102" width="26" height="32"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".45">
|
||||
<rect x="57" y="107" width="16" height="22"/>
|
||||
<rect x="165" y="107" width="16" height="22"/>
|
||||
<rect x="277" y="107" width="16" height="22"/>
|
||||
</g>
|
||||
<!-- obiekt w stanie alarmowym -->
|
||||
<rect x="389" y="107" width="16" height="22" fill="#1d2d3d"/>
|
||||
|
||||
<!-- trend pomiarowy pod schematem -->
|
||||
<g stroke="#5980a6" stroke-width="1.6" fill="none">
|
||||
<path d="M56 178 96 160 130 168 168 148 206 156 244 138 282 150 320 132 358 142 400 124"/>
|
||||
</g>
|
||||
<path d="M56 186h348" stroke="#416180" stroke-width="1.2" stroke-opacity=".45" fill="none"/>
|
||||
|
||||
<!-- podpisy obiektow -->
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9.5"
|
||||
text-anchor="middle" opacity=".7">
|
||||
<text x="65" y="214" textLength="30" lengthAdjust="spacingAndGlyphs">INTAKE</text>
|
||||
<text x="173" y="214" textLength="24" lengthAdjust="spacingAndGlyphs">WTP</text>
|
||||
<text x="285" y="214" textLength="38" lengthAdjust="spacingAndGlyphs">RESERVOIR</text>
|
||||
<text x="397" y="214" textLength="32" lengthAdjust="spacingAndGlyphs">NETWORK</text>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,35 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-zam">
|
||||
<title id="t-zam">Public procurement - comparing tenders against award criteria</title>
|
||||
<defs><pattern id="g-zam" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-zam)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="198" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · PUBLIC PROCUREMENT</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="48" y="60" width="88" height="122"/><rect x="152" y="60" width="88" height="122"/><rect x="256" y="60" width="88" height="122"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".2"><rect x="48" y="60" width="88" height="24"/><rect x="152" y="60" width="88" height="24"/><rect x="256" y="60" width="88" height="24"/></g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="62" y="98" width="56" height="6"/><rect x="62" y="112" width="44" height="6"/><rect x="62" y="126" width="60" height="6"/>
|
||||
<rect x="166" y="98" width="56" height="6"/><rect x="166" y="112" width="44" height="6"/><rect x="166" y="126" width="60" height="6"/>
|
||||
<rect x="270" y="98" width="56" height="6"/><rect x="270" y="112" width="44" height="6"/><rect x="270" y="126" width="60" height="6"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="13" text-anchor="middle">
|
||||
<text x="92" y="77" textLength="52" lengthAdjust="spacingAndGlyphs">TENDER A</text>
|
||||
<text x="196" y="77" textLength="52" lengthAdjust="spacingAndGlyphs">TENDER B</text>
|
||||
<text x="300" y="77" textLength="52" lengthAdjust="spacingAndGlyphs">TENDER C</text>
|
||||
</g>
|
||||
<g stroke="#5980a6" stroke-width="2.4" fill="none"><path d="m174 154 8 9 18-20"/></g>
|
||||
<rect x="152" y="60" width="88" height="122" fill="none" stroke="#416180" stroke-width="2.5"/>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M410 70v100M386 94h48M394 94l-12 30h24zM426 94l-12 30h24zM392 170h36"/>
|
||||
</g>
|
||||
<text x="370" y="196" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="60" lengthAdjust="spacingAndGlyphs" opacity=".7">CRITERIA</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1,32 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-zarz">
|
||||
<title id="t-zarz">Running a utility - financial indicators and cost structure</title>
|
||||
<defs><pattern id="g-zarz" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-zarz)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="150" lengthAdjust="spacingAndGlyphs" opacity=".7">TRACK · MANAGEMENT</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none"><rect x="52" y="54" width="196" height="144"/><path d="M52 82h196"/></g>
|
||||
<rect x="52" y="54" width="196" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="66" y="73" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="108" lengthAdjust="spacingAndGlyphs">COST / REVENUE</text>
|
||||
<g>
|
||||
<rect x="74" y="136" width="26" height="44" fill="#5980a6" fill-opacity=".35" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="114" y="120" width="26" height="60" fill="#5980a6" fill-opacity=".55" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="154" y="108" width="26" height="72" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="194" y="98" width="26" height="82" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
</g>
|
||||
<path d="M64 180h172" stroke="#416180" stroke-width="1.5"/>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<circle cx="356" cy="124" r="52"/>
|
||||
</g>
|
||||
<path d="M356 124 L356 72 A52 52 0 0 1 394 160 Z" fill="#5980a6" fill-opacity=".45"/>
|
||||
<path d="M356 72v52l38 36" stroke="#416180" stroke-width="1.5" fill="none"/>
|
||||
<text x="308" y="200" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="124" lengthAdjust="spacingAndGlyphs" opacity=".7">COST STRUCTURE</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,81 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-plat">
|
||||
<title id="t-plat">Student dashboard on the platform - course progress, upcoming webinars and a certificate</title>
|
||||
<defs>
|
||||
<pattern id="plat-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="640" height="360" fill="#eaeef2"/>
|
||||
<rect width="640" height="360" fill="url(#plat-grid)"/>
|
||||
|
||||
<!-- okno aplikacji -->
|
||||
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||
<rect x="40" y="34" width="560" height="292"/>
|
||||
<path d="M40 66h560M172 66v260"/>
|
||||
</g>
|
||||
<rect x="40" y="34" width="560" height="32" fill="#5980a6" fill-opacity=".18"/>
|
||||
<g fill="#416180" opacity=".45">
|
||||
<circle cx="58" cy="50" r="4"/><circle cx="72" cy="50" r="4"/><circle cx="86" cy="50" r="4"/>
|
||||
</g>
|
||||
<text x="108" y="55" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="118" lengthAdjust="spacingAndGlyphs">STUDENT DASHBOARD</text>
|
||||
|
||||
<!-- menu boczne -->
|
||||
<g fill="#5980a6">
|
||||
<rect x="40" y="82" width="132" height="26" fill-opacity=".28"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".45">
|
||||
<rect x="58" y="91" width="72" height="8"/>
|
||||
<rect x="58" y="126" width="86" height="8"/>
|
||||
<rect x="58" y="156" width="64" height="8"/>
|
||||
<rect x="58" y="186" width="80" height="8"/>
|
||||
<rect x="58" y="216" width="70" height="8"/>
|
||||
</g>
|
||||
|
||||
<!-- karty postępu kursów -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="192" y="88" width="184" height="76"/>
|
||||
<rect x="396" y="88" width="184" height="76"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".45">
|
||||
<rect x="206" y="102" width="104" height="8"/>
|
||||
<rect x="410" y="102" width="120" height="8"/>
|
||||
</g>
|
||||
<!-- paski postępu -->
|
||||
<g>
|
||||
<rect x="206" y="130" width="156" height="8" fill="#5980a6" fill-opacity=".2"/>
|
||||
<rect x="206" y="130" width="102" height="8" fill="#5980a6"/>
|
||||
<rect x="410" y="130" width="156" height="8" fill="#5980a6" fill-opacity=".2"/>
|
||||
<rect x="410" y="130" width="48" height="8" fill="#5980a6"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="11" opacity=".7">
|
||||
<text x="206" y="156" textLength="76" lengthAdjust="spacingAndGlyphs">PROGRESS 65%</text>
|
||||
<text x="410" y="156" textLength="76" lengthAdjust="spacingAndGlyphs">PROGRESS 30%</text>
|
||||
</g>
|
||||
|
||||
<!-- agenda webinariów -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="192" y="184" width="388" height="122"/>
|
||||
<path d="M192 210h388"/>
|
||||
</g>
|
||||
<rect x="192" y="184" width="388" height="26" fill="#5980a6" fill-opacity=".12"/>
|
||||
<text x="206" y="202" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="12" textLength="150" lengthAdjust="spacingAndGlyphs">UPCOMING WEBINARS</text>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none" opacity=".85">
|
||||
<rect x="206" y="222" width="38" height="34"/>
|
||||
<rect x="206" y="264" width="38" height="34"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="13" text-anchor="middle" opacity=".8">
|
||||
<text x="225" y="236">15</text><text x="225" y="250" font-size="10">NOV</text>
|
||||
<text x="225" y="278">22</text><text x="225" y="292" font-size="10">NOV</text>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="258" y="228" width="180" height="7"/>
|
||||
<rect x="258" y="242" width="120" height="6"/>
|
||||
<rect x="258" y="270" width="204" height="7"/>
|
||||
<rect x="258" y="284" width="136" height="6"/>
|
||||
</g>
|
||||
<!-- znacznik LIVE -->
|
||||
<rect x="500" y="224" width="46" height="17" fill="#1d2d3d"/>
|
||||
<text x="509" y="237" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="10" letter-spacing="1.3">LIVE</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,72 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-szk">
|
||||
<title id="t-szk">Training room - instructor, a data screen and participants at workstations</title>
|
||||
<defs>
|
||||
<pattern id="szk-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="640" height="360" fill="#eaeef2"/>
|
||||
<rect width="640" height="360" fill="url(#szk-grid)"/>
|
||||
|
||||
<!-- ekran prezentacyjny -->
|
||||
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||
<rect x="188" y="40" width="264" height="146"/>
|
||||
<path d="M320 186v18"/>
|
||||
</g>
|
||||
<rect x="188" y="40" width="264" height="20" fill="#5980a6" fill-opacity=".18"/>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".9">
|
||||
<!-- wykres na ekranie -->
|
||||
<path d="M208 160 250 132 286 142 322 104 358 118 396 86 432 96"/>
|
||||
<path d="M208 172h224" stroke-opacity=".5"/>
|
||||
<path d="M208 76v96" stroke-opacity=".5"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".55">
|
||||
<circle cx="250" cy="132" r="3"/><circle cx="322" cy="104" r="3"/><circle cx="396" cy="86" r="3"/>
|
||||
</g>
|
||||
<g fill="#416180" opacity=".5">
|
||||
<rect x="198" y="46" width="46" height="8"/><rect x="252" y="46" width="30" height="8"/>
|
||||
</g>
|
||||
|
||||
<!-- prowadzący -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<circle cx="122" cy="120" r="14"/>
|
||||
<path d="M104 186v-32a18 18 0 0 1 36 0v32"/>
|
||||
<path d="M140 160l30-14"/>
|
||||
</g>
|
||||
|
||||
<!-- stanowiska uczestników -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<g>
|
||||
<rect x="70" y="248" width="120" height="8"/>
|
||||
<path d="M96 256v40M164 256v40"/>
|
||||
<rect x="96" y="222" width="42" height="26"/>
|
||||
<circle cx="160" cy="212" r="11"/>
|
||||
<path d="M146 248v-14a14 14 0 0 1 28 0v14"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="260" y="248" width="120" height="8"/>
|
||||
<path d="M286 256v40M354 256v40"/>
|
||||
<rect x="286" y="222" width="42" height="26"/>
|
||||
<circle cx="350" cy="212" r="11"/>
|
||||
<path d="M336 248v-14a14 14 0 0 1 28 0v14"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="450" y="248" width="120" height="8"/>
|
||||
<path d="M476 256v40M544 256v40"/>
|
||||
<rect x="476" y="222" width="42" height="26"/>
|
||||
<circle cx="540" cy="212" r="11"/>
|
||||
<path d="M526 248v-14a14 14 0 0 1 28 0v14"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".22">
|
||||
<rect x="96" y="222" width="42" height="26"/>
|
||||
<rect x="286" y="222" width="42" height="26"/>
|
||||
<rect x="476" y="222" width="42" height="26"/>
|
||||
</g>
|
||||
|
||||
<!-- oznaczenia techniczne (pod rysunkiem, poza strefa postaci) -->
|
||||
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.2" opacity=".65">
|
||||
<text x="70" y="334">MAX. 12</text>
|
||||
<text x="570" y="334" text-anchor="end">2 × 8 H</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,68 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-kon">
|
||||
<title id="t-kon">Konsulting - analiza danych przedsiębiorstwa, raport i rekomendacje</title>
|
||||
<defs>
|
||||
<pattern id="kon-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="640" height="360" fill="#eaeef2"/>
|
||||
<rect width="640" height="360" fill="url(#kon-grid)"/>
|
||||
|
||||
<!-- dokument raportu -->
|
||||
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||
<path d="M60 40h180l40 40v240H60z"/>
|
||||
<path d="M240 40v40h40"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="84" y="112" width="132" height="8"/>
|
||||
<rect x="84" y="130" width="172" height="6"/>
|
||||
<rect x="84" y="144" width="150" height="6"/>
|
||||
</g>
|
||||
<!-- tabela w raporcie -->
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".8">
|
||||
<rect x="84" y="170" width="172" height="76"/>
|
||||
<path d="M84 192h172M84 210h172M84 228h172M140 170v76M200 170v76"/>
|
||||
</g>
|
||||
<rect x="84" y="170" width="172" height="22" fill="#5980a6" fill-opacity=".2"/>
|
||||
<g fill="#416180" opacity=".45">
|
||||
<rect x="84" y="264" width="110" height="6"/>
|
||||
<rect x="84" y="278" width="140" height="6"/>
|
||||
</g>
|
||||
|
||||
<!-- strzałka analizy -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M300 180h44"/><path d="m336 172 10 8-10 8"/>
|
||||
</g>
|
||||
|
||||
<!-- panel wyników -->
|
||||
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||
<rect x="366" y="46" width="214" height="120"/>
|
||||
<path d="M366 74h214"/>
|
||||
</g>
|
||||
<rect x="366" y="46" width="214" height="28" fill="#5980a6" fill-opacity=".18"/>
|
||||
<text x="380" y="65" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11.5" letter-spacing=".8">WARIANTY · KOSZT I EFEKT</text>
|
||||
<!-- słupki -->
|
||||
<g>
|
||||
<rect x="392" y="98" width="30" height="52" fill="#5980a6" fill-opacity=".35" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="440" y="112" width="30" height="38" fill="#5980a6" fill-opacity=".55" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="488" y="122" width="30" height="28" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="536" y="128" width="30" height="22" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
</g>
|
||||
<path d="M380 150h192" stroke="#416180" stroke-width="1.5"/>
|
||||
|
||||
<!-- lista rekomendacji -->
|
||||
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||
<rect x="366" y="190" width="214" height="130"/>
|
||||
<path d="M366 218h214"/>
|
||||
</g>
|
||||
<rect x="366" y="190" width="214" height="28" fill="#5980a6" fill-opacity=".12"/>
|
||||
<text x="380" y="209" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.3">LISTA DECYZJI</text>
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="m382 240 5 5 9-10"/><path d="m382 268 5 5 9-10"/><path d="m382 296 5 5 9-10"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="406" y="238" width="150" height="7"/>
|
||||
<rect x="406" y="266" width="126" height="7"/>
|
||||
<rect x="406" y="294" width="142" height="7"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,54 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-audyt">
|
||||
<title id="t-audyt">Audyt bezpieczeństwa - przegląd warstw systemu, lista podatności i zgodność z NIS2</title>
|
||||
<defs><pattern id="g-audyt" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-audyt)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="210" lengthAdjust="spacingAndGlyphs" opacity=".7">ŚCIEŻKA · AUDYT BEZPIECZEŃSTWA</text>
|
||||
|
||||
<!-- tarcza -->
|
||||
<g stroke="#416180" stroke-width="1.8" fill="none">
|
||||
<path d="M108 56 52 78v50c0 40 28 68 56 74 28-6 56-34 56-74V78z" fill="#f2f2f3"/>
|
||||
</g>
|
||||
<path d="M108 56 52 78v50c0 40 28 68 56 74z" fill="#5980a6" fill-opacity=".18"/>
|
||||
<g stroke="#5980a6" stroke-width="2.6" fill="none">
|
||||
<path d="m84 122 16 16 30-34"/>
|
||||
</g>
|
||||
<text x="60" y="224" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" textLength="96" lengthAdjust="spacingAndGlyphs" opacity=".72">ZGODNOŚĆ NIS2</text>
|
||||
|
||||
<!-- raport z podatnosciami -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="204" y="52" width="228" height="150" fill="#f2f2f3"/>
|
||||
<path d="M204 76h228"/>
|
||||
</g>
|
||||
<rect x="204" y="52" width="228" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="216" y="69" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="124" lengthAdjust="spacingAndGlyphs">LISTA PODATNOŚCI</text>
|
||||
|
||||
<!-- pozycje: poziom ryzyka + opis -->
|
||||
<g>
|
||||
<rect x="216" y="88" width="30" height="12" fill="#1d2d3d"/>
|
||||
<rect x="216" y="112" width="30" height="12" fill="#5980a6"/>
|
||||
<rect x="216" y="136" width="30" height="12" fill="#5980a6" fill-opacity=".55"/>
|
||||
<rect x="216" y="160" width="30" height="12" fill="#5980a6" fill-opacity=".3"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="256" y="90" width="150" height="7"/>
|
||||
<rect x="256" y="114" width="124" height="7"/>
|
||||
<rect x="256" y="138" width="142" height="7"/>
|
||||
<rect x="256" y="162" width="110" height="7"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="8.5"
|
||||
text-anchor="middle" opacity=".9">
|
||||
<text x="231" y="97" fill="#f2f2f3" textLength="22" lengthAdjust="spacingAndGlyphs">KRYT.</text>
|
||||
<text x="231" y="121" fill="#f2f2f3" textLength="22" lengthAdjust="spacingAndGlyphs">WYS.</text>
|
||||
</g>
|
||||
<text x="204" y="224" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" textLength="150" lengthAdjust="spacingAndGlyphs" opacity=".72">REKOMENDACJE I PRIORYTETY</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
@@ -0,0 +1,78 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-cyfr">
|
||||
<title id="t-cyfr">Cyfryzacja przedsiębiorstwa - papierowa dokumentacja zamieniana w system z etapowym planem wdrożenia</title>
|
||||
<defs><pattern id="g-cyfr" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||
<marker id="cy-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6.5" markerHeight="6.5" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker>
|
||||
</defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-cyfr)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="150" lengthAdjust="spacingAndGlyphs" opacity=".7">ŚCIEŻKA · CYFRYZACJA</text>
|
||||
|
||||
<!-- stos papierowych teczek: stan wyjściowy -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||
<path d="M44 148h84v52H44z"/>
|
||||
<path d="M50 136h84v52H50z"/>
|
||||
<path d="M56 124h84v52H56z"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".38">
|
||||
<rect x="66" y="138" width="52" height="6"/>
|
||||
<rect x="66" y="150" width="38" height="5"/>
|
||||
<rect x="66" y="160" width="46" height="5"/>
|
||||
</g>
|
||||
<text x="44" y="220" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" textLength="86" lengthAdjust="spacingAndGlyphs" opacity=".72">PAPIER I ARKUSZE</text>
|
||||
|
||||
<!-- strzałka przejścia -->
|
||||
<path d="M156 152 H206" stroke="#5980a6" stroke-width="1.8" fill="none" marker-end="url(#cy-arr)"/>
|
||||
|
||||
<!-- system docelowy: ekran z modułami -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="224" y="60" width="212" height="128" fill="#f2f2f3"/>
|
||||
<path d="M224 84h212"/>
|
||||
</g>
|
||||
<rect x="224" y="60" width="212" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="236" y="77" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="104" lengthAdjust="spacingAndGlyphs">SYSTEM CENTRALNY</text>
|
||||
|
||||
<!-- moduły w systemie -->
|
||||
<g stroke="#5980a6" stroke-width="1.4" fill="none">
|
||||
<rect x="238" y="96" width="58" height="34"/>
|
||||
<rect x="306" y="96" width="58" height="34"/>
|
||||
<rect x="374" y="96" width="48" height="34"/>
|
||||
<rect x="238" y="140" width="58" height="34"/>
|
||||
<rect x="306" y="140" width="116" height="34"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".3">
|
||||
<rect x="238" y="96" width="58" height="34"/>
|
||||
<rect x="306" y="140" width="116" height="34"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9"
|
||||
text-anchor="middle" opacity=".85">
|
||||
<text x="267" y="117" textLength="44" lengthAdjust="spacingAndGlyphs">MAJĄTEK</text>
|
||||
<text x="335" y="117" textLength="44" lengthAdjust="spacingAndGlyphs">ZLECENIA</text>
|
||||
<text x="398" y="117" textLength="36" lengthAdjust="spacingAndGlyphs">ODCZYTY</text>
|
||||
<text x="267" y="161" textLength="44" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||
<text x="364" y="161" textLength="70" lengthAdjust="spacingAndGlyphs">RAPORTOWANIE</text>
|
||||
</g>
|
||||
|
||||
<!-- etapowy plan wdrożenia -->
|
||||
<g stroke="#416180" stroke-width="1.4" fill="none" opacity=".8">
|
||||
<path d="M224 208h212"/>
|
||||
</g>
|
||||
<g fill="#5980a6">
|
||||
<circle cx="252" cy="208" r="4.5"/>
|
||||
<circle cx="330" cy="208" r="4.5"/>
|
||||
</g>
|
||||
<circle cx="408" cy="208" r="4.5" fill="none" stroke="#416180" stroke-width="1.4"/>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9.5"
|
||||
text-anchor="middle" opacity=".75">
|
||||
<text x="252" y="226" textLength="34" lengthAdjust="spacingAndGlyphs">ETAP I</text>
|
||||
<text x="330" y="226" textLength="38" lengthAdjust="spacingAndGlyphs">ETAP II</text>
|
||||
<text x="408" y="226" textLength="40" lengthAdjust="spacingAndGlyphs">ETAP III</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
@@ -0,0 +1,68 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-gielda">
|
||||
<title id="t-gielda">Giełda Komunalna - bezpłatny marketplace: nadwyżki magazynowe trafiają jako ogłoszenia do producentów i wykonawców z branży</title>
|
||||
<defs><pattern id="g-gielda" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||
<marker id="gl-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6.5" markerHeight="6.5" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker>
|
||||
</defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-gielda)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="168" lengthAdjust="spacingAndGlyphs" opacity=".7">EKOSYSTEM · GIEŁDA KOMUNALNA</text>
|
||||
|
||||
<!-- magazyn: nadwyżki, które gdzieś leżą -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M38 104 78 88l40 16"/>
|
||||
<path d="M46 104v66h64v-66"/>
|
||||
<path d="M46 116h64"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".3" stroke="#416180" stroke-width="1.3">
|
||||
<rect x="58" y="126" width="18" height="18"/>
|
||||
<rect x="80" y="126" width="18" height="18"/>
|
||||
<rect x="58" y="148" width="18" height="18"/>
|
||||
<rect x="80" y="148" width="18" height="18"/>
|
||||
</g>
|
||||
<text x="40" y="192" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="84" lengthAdjust="spacingAndGlyphs" opacity=".72">ZALEGA W MAGAZYNIE</text>
|
||||
|
||||
<!-- ogłoszenie: wystawiasz za darmo -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="182" y="86" width="116" height="84" fill="#f2f2f3"/>
|
||||
<path d="M182 108h116"/>
|
||||
</g>
|
||||
<rect x="182" y="86" width="116" height="22" fill="#5980a6" fill-opacity=".22"/>
|
||||
<text x="194" y="102" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="70" lengthAdjust="spacingAndGlyphs">OGŁOSZENIE</text>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="194" y="118" width="60" height="7"/>
|
||||
<rect x="194" y="130" width="88" height="6"/>
|
||||
</g>
|
||||
<!-- znacznik ceny wystawienia -->
|
||||
<rect x="194" y="144" width="46" height="18" fill="#5980a6"/>
|
||||
<text x="217" y="157" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" font-weight="600" text-anchor="middle"
|
||||
textLength="30" lengthAdjust="spacingAndGlyphs">0 ZŁ</text>
|
||||
<text x="246" y="157" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="10.5" textLength="48" lengthAdjust="spacingAndGlyphs" opacity=".75">ZA WYSTAWIENIE</text>
|
||||
|
||||
<!-- strzałki: magazyn -> ogłoszenie -> odbiorcy (w drugą stronę też: wymiana) -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="M124 128 H172" marker-end="url(#gl-arr)"/>
|
||||
<path d="M308 128 H352" marker-start="url(#gl-arr)" marker-end="url(#gl-arr)"/>
|
||||
</g>
|
||||
|
||||
<!-- odbiorcy: producenci i wykonawcy z branży -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<circle cx="386" cy="98" r="11"/><path d="M370 128v-12a16 16 0 0 1 32 0v12"/>
|
||||
<circle cx="428" cy="98" r="11"/><path d="M412 128v-12a16 16 0 0 1 32 0v12"/>
|
||||
<circle cx="407" cy="150" r="11"/><path d="M391 180v-12a16 16 0 0 1 32 0v12"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".22">
|
||||
<circle cx="386" cy="98" r="11"/><circle cx="428" cy="98" r="11"/><circle cx="407" cy="150" r="11"/>
|
||||
</g>
|
||||
<text x="356" y="204" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="92" lengthAdjust="spacingAndGlyphs" opacity=".72">PRODUCENCI · WYKONAWCY</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
@@ -0,0 +1,59 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-integr">
|
||||
<title id="t-integr">Integracje z systemami ERP, CRM i podatkowymi - magistrala wymiany danych</title>
|
||||
<defs><pattern id="g-integr" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||
<marker id="in-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-integr)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="180" lengthAdjust="spacingAndGlyphs" opacity=".7">ŚCIEŻKA · INTEGRACJE SYSTEMÓW</text>
|
||||
|
||||
<!-- systemy zrodlowe (gora) -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||
<rect x="40" y="48" width="86" height="34"/>
|
||||
<rect x="146" y="48" width="86" height="34"/>
|
||||
<rect x="252" y="48" width="86" height="34"/>
|
||||
<rect x="358" y="48" width="82" height="34"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="12"
|
||||
text-anchor="middle" font-weight="600">
|
||||
<text x="83" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">ERP</text>
|
||||
<text x="189" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">CRM</text>
|
||||
<text x="295" y="70" textLength="30" lengthAdjust="spacingAndGlyphs">TAX</text>
|
||||
<text x="399" y="70" textLength="52" lengthAdjust="spacingAndGlyphs">BILLING</text>
|
||||
</g>
|
||||
|
||||
<!-- strzalki dwukierunkowe do magistrali -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="M83 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||
<path d="M189 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||
<path d="M295 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||
<path d="M399 88 V118" marker-start="url(#in-arr)" marker-end="url(#in-arr)"/>
|
||||
</g>
|
||||
|
||||
<!-- magistrala integracyjna -->
|
||||
<rect x="40" y="124" width="400" height="34" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
<text x="240" y="146" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="13" font-weight="600" text-anchor="middle"
|
||||
textLength="150" lengthAdjust="spacingAndGlyphs">MAGISTRALA DANYCH</text>
|
||||
|
||||
<!-- odbiorcy danych (dol) -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="M136 164 V190" marker-end="url(#in-arr)"/>
|
||||
<path d="M344 164 V190" marker-end="url(#in-arr)"/>
|
||||
</g>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||
<rect x="88" y="194" width="96" height="30"/>
|
||||
<rect x="296" y="194" width="96" height="30"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="10.5"
|
||||
text-anchor="middle" opacity=".85">
|
||||
<text x="136" y="213" textLength="72" lengthAdjust="spacingAndGlyphs">RAPORTOWANIE</text>
|
||||
<text x="344" y="213" textLength="72" lengthAdjust="spacingAndGlyphs">APLIKACJE WWW</text>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-klient">
|
||||
<title id="t-klient">Obsługa odbiorcy i billing - zgłoszenie, rozliczenie i komunikacja</title>
|
||||
<defs><pattern id="g-klient" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-klient)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">ŚCIEŻKA · OBSŁUGA KLIENTA</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="52" y="58" width="146" height="112"/><path d="M52 86h146"/>
|
||||
</g>
|
||||
<rect x="52" y="58" width="146" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="66" y="77" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">ROZLICZENIE</text>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".85">
|
||||
<path d="M68 102h114M68 118h92M68 134h114"/>
|
||||
</g>
|
||||
<rect x="68" y="148" width="58" height="12" fill="#5980a6" fill-opacity=".5"/>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M238 88h94a10 10 0 0 1 10 10v42a10 10 0 0 1-10 10h-56l-22 20v-20h-16a10 10 0 0 1-10-10V98a10 10 0 0 1 10-10z"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".42"><rect x="252" y="106" width="64" height="6"/><rect x="252" y="120" width="48" height="6"/><rect x="252" y="134" width="58" height="6"/></g>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<circle cx="404" cy="102" r="18"/><path d="M378 170v-24a26 26 0 0 1 52 0v24"/>
|
||||
</g>
|
||||
<circle cx="404" cy="102" r="18" fill="#5980a6" fill-opacity=".28"/>
|
||||
<text x="234" y="196" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".7">ZGŁOSZENIE · FAKTURA</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,33 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-portal">
|
||||
<title id="t-portal">Wodociągowiec.pl - artykuły branżowe, przypadki z eksploatacji i komentarze</title>
|
||||
<defs><pattern id="g-portal" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-portal)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">EKOSYSTEM · WODOCIĄGOWIEC.PL</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="52" y="50" width="226" height="162"/><path d="M52 80h226"/>
|
||||
</g>
|
||||
<rect x="52" y="50" width="226" height="30" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="68" y="70" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="13" letter-spacing="1.2">ARTYKUŁ BRANŻOWY</text>
|
||||
<rect x="68" y="96" width="84" height="60" fill="#5980a6" fill-opacity=".3" stroke="#416180" stroke-width="1.5"/>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none"><path d="m76 144 18-16 14 12 16-20 18 24"/></g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="166" y="98" width="94" height="7"/><rect x="166" y="112" width="78" height="6"/>
|
||||
<rect x="166" y="126" width="94" height="6"/><rect x="166" y="140" width="66" height="6"/>
|
||||
<rect x="68" y="172" width="192" height="6"/><rect x="68" y="186" width="146" height="6"/>
|
||||
</g>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M308 70h82a10 10 0 0 1 10 10v38a10 10 0 0 1-10 10h-50l-20 18v-18h-12a10 10 0 0 1-10-10V80a10 10 0 0 1 10-10z"/>
|
||||
<path d="M322 124h82a10 10 0 0 1 10 10v38a10 10 0 0 1-10 10h-62l-20 18v-18a10 10 0 0 1-10-10v-38a10 10 0 0 1 10-10z" fill="#eaeef2"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="322" y="86" width="56" height="6"/><rect x="322" y="100" width="42" height="6"/>
|
||||
<rect x="336" y="140" width="56" height="6"/><rect x="336" y="154" width="44" height="6"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,29 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-prawo">
|
||||
<title id="t-prawo">Prawo i taryfy - dokument taryfowy, paragraf i pieczęć zatwierdzenia</title>
|
||||
<defs><pattern id="g-prawo" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-prawo)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">ŚCIEŻKA · PRAWO I TARYFY</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M84 46h128l30 30v140H84z"/><path d="M212 46v30h30"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".4">
|
||||
<rect x="104" y="94" width="92" height="7"/><rect x="104" y="110" width="118" height="6"/>
|
||||
<rect x="104" y="124" width="104" height="6"/>
|
||||
</g>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".85">
|
||||
<rect x="104" y="144" width="118" height="52"/><path d="M104 162h118M163 144v52"/>
|
||||
</g>
|
||||
<rect x="104" y="144" width="118" height="18" fill="#5980a6" fill-opacity=".2"/>
|
||||
<g stroke="#416180" stroke-width="2.2" fill="none">
|
||||
<circle cx="340" cy="122" r="46"/>
|
||||
<path d="M334 100c-10 0-16 6-16 14s6 12 14 12 14 4 14 12-6 14-16 14M340 90v64"/>
|
||||
</g>
|
||||
<text x="292" y="196" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".7">WNIOSEK TARYFOWY</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,64 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-scada">
|
||||
<title id="t-scada">Monitoring sieci i SCADA - pulpit dyspozytorski z obiektami, trendem i alarmem</title>
|
||||
<defs><pattern id="g-scada" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern>
|
||||
<marker id="sc-arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
|
||||
<path d="M0 0 10 5 0 10z" fill="#5980a6"/></marker></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-scada)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="196" lengthAdjust="spacingAndGlyphs" opacity=".7">ŚCIEŻKA · SCADA I MONITORING</text>
|
||||
|
||||
<!-- pulpit dyspozytorski -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="40" y="46" width="400" height="150" fill="#f2f2f3"/>
|
||||
<path d="M40 70h400"/>
|
||||
</g>
|
||||
<rect x="40" y="46" width="400" height="24" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="52" y="63" fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="11" textLength="88" lengthAdjust="spacingAndGlyphs">PULPIT SIECI</text>
|
||||
<!-- wskaznik ALARM -->
|
||||
<rect x="376" y="52" width="52" height="14" fill="#1d2d3d"/>
|
||||
<circle cx="386" cy="59" r="3" fill="#f2f2f3"/>
|
||||
<text x="394" y="63" fill="#f2f2f3" font-family="'Barlow Condensed','Arial Narrow',sans-serif"
|
||||
font-size="9.5" textLength="28" lengthAdjust="spacingAndGlyphs">ALARM</text>
|
||||
|
||||
<!-- schemat sieci: obiekty polaczone rurociagiem -->
|
||||
<g stroke="#5980a6" stroke-width="1.8" fill="none">
|
||||
<path d="M74 118 H150" marker-end="url(#sc-arr)"/>
|
||||
<path d="M186 118 H262" marker-end="url(#sc-arr)"/>
|
||||
<path d="M298 118 H374" marker-end="url(#sc-arr)"/>
|
||||
</g>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="#f2f2f3">
|
||||
<rect x="52" y="102" width="26" height="32"/>
|
||||
<rect x="160" y="102" width="26" height="32"/>
|
||||
<rect x="272" y="102" width="26" height="32"/>
|
||||
<rect x="384" y="102" width="26" height="32"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".45">
|
||||
<rect x="57" y="107" width="16" height="22"/>
|
||||
<rect x="165" y="107" width="16" height="22"/>
|
||||
<rect x="277" y="107" width="16" height="22"/>
|
||||
</g>
|
||||
<!-- obiekt w stanie alarmowym -->
|
||||
<rect x="389" y="107" width="16" height="22" fill="#1d2d3d"/>
|
||||
|
||||
<!-- trend pomiarowy pod schematem -->
|
||||
<g stroke="#5980a6" stroke-width="1.6" fill="none">
|
||||
<path d="M56 178 96 160 130 168 168 148 206 156 244 138 282 150 320 132 358 142 400 124"/>
|
||||
</g>
|
||||
<path d="M56 186h348" stroke="#416180" stroke-width="1.2" stroke-opacity=".45" fill="none"/>
|
||||
|
||||
<!-- podpisy obiektow -->
|
||||
<g fill="#416180" font-family="'Barlow Condensed','Arial Narrow',sans-serif" font-size="9.5"
|
||||
text-anchor="middle" opacity=".7">
|
||||
<text x="65" y="214" textLength="30" lengthAdjust="spacingAndGlyphs">UJĘCIE</text>
|
||||
<text x="173" y="214" textLength="24" lengthAdjust="spacingAndGlyphs">SUW</text>
|
||||
<text x="285" y="214" textLength="34" lengthAdjust="spacingAndGlyphs">ZBIORNIK</text>
|
||||
<text x="397" y="214" textLength="30" lengthAdjust="spacingAndGlyphs">SIEĆ</text>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,31 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-zam">
|
||||
<title id="t-zam">Zamówienia publiczne - porównanie ofert i kryteria oceny</title>
|
||||
<defs><pattern id="g-zam" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-zam)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">ŚCIEŻKA · ZAMÓWIENIA PUBLICZNE</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="48" y="60" width="88" height="122"/><rect x="152" y="60" width="88" height="122"/><rect x="256" y="60" width="88" height="122"/>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".2"><rect x="48" y="60" width="88" height="24"/><rect x="152" y="60" width="88" height="24"/><rect x="256" y="60" width="88" height="24"/></g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="62" y="98" width="56" height="6"/><rect x="62" y="112" width="44" height="6"/><rect x="62" y="126" width="60" height="6"/>
|
||||
<rect x="166" y="98" width="56" height="6"/><rect x="166" y="112" width="44" height="6"/><rect x="166" y="126" width="60" height="6"/>
|
||||
<rect x="270" y="98" width="56" height="6"/><rect x="270" y="112" width="44" height="6"/><rect x="270" y="126" width="60" height="6"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="13" text-anchor="middle">
|
||||
<text x="92" y="77">OFERTA A</text><text x="196" y="77">OFERTA B</text><text x="300" y="77">OFERTA C</text>
|
||||
</g>
|
||||
<g stroke="#5980a6" stroke-width="2.4" fill="none"><path d="m174 154 8 9 18-20"/></g>
|
||||
<rect x="152" y="60" width="88" height="122" fill="none" stroke="#416180" stroke-width="2.5"/>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<path d="M410 70v100M386 94h48M394 94l-12 30h24zM426 94l-12 30h24zM392 170h36"/>
|
||||
</g>
|
||||
<text x="370" y="196" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".7">KRYTERIA</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -0,0 +1,29 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 270" role="img" aria-labelledby="t-zarz">
|
||||
<title id="t-zarz">Zarządzanie przedsiębiorstwem - wskaźniki finansowe i struktura kosztów</title>
|
||||
<defs><pattern id="g-zarz" width="18" height="18" patternUnits="userSpaceOnUse">
|
||||
<path d="M18 0H0v18" fill="none" stroke="#5980a6" stroke-opacity=".13" stroke-width="1"/></pattern></defs>
|
||||
<rect width="480" height="270" fill="#eaeef2"/>
|
||||
<rect width="480" height="270" fill="url(#g-zarz)"/>
|
||||
<g stroke="#1d1f20" stroke-width="1" opacity=".4">
|
||||
<path d="M22 14v14M15 21h14"/><path d="M458 14v14M451 21h14"/>
|
||||
<path d="M22 242v14M15 249h14"/><path d="M458 242v14M451 249h14"/></g>
|
||||
<text x="44" y="252" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.3" opacity=".7">ŚCIEŻKA · ZARZĄDZANIE</text>
|
||||
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none"><rect x="52" y="54" width="196" height="144"/><path d="M52 82h196"/></g>
|
||||
<rect x="52" y="54" width="196" height="28" fill="#5980a6" fill-opacity=".2"/>
|
||||
<text x="66" y="73" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">KOSZT / PRZYCHÓD</text>
|
||||
<g>
|
||||
<rect x="74" y="136" width="26" height="44" fill="#5980a6" fill-opacity=".35" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="114" y="120" width="26" height="60" fill="#5980a6" fill-opacity=".55" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="154" y="108" width="26" height="72" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
<rect x="194" y="98" width="26" height="82" fill="#5980a6" stroke="#416180" stroke-width="1.5"/>
|
||||
</g>
|
||||
<path d="M64 180h172" stroke="#416180" stroke-width="1.5"/>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<circle cx="356" cy="124" r="52"/>
|
||||
</g>
|
||||
<path d="M356 124 L356 72 A52 52 0 0 1 394 160 Z" fill="#5980a6" fill-opacity=".45"/>
|
||||
<path d="M356 72v52l38 36" stroke="#416180" stroke-width="1.5" fill="none"/>
|
||||
<text x="308" y="200" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".7">STRUKTURA KOSZTÓW</text>
|
||||
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,79 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-plat">
|
||||
<title id="t-plat">Panel kursanta na platformie - postęp kursów, nadchodzące webinaria i certyfikat</title>
|
||||
<defs>
|
||||
<pattern id="plat-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="640" height="360" fill="#eaeef2"/>
|
||||
<rect width="640" height="360" fill="url(#plat-grid)"/>
|
||||
|
||||
<!-- okno aplikacji -->
|
||||
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||
<rect x="40" y="34" width="560" height="292"/>
|
||||
<path d="M40 66h560M172 66v260"/>
|
||||
</g>
|
||||
<rect x="40" y="34" width="560" height="32" fill="#5980a6" fill-opacity=".18"/>
|
||||
<g fill="#416180" opacity=".45">
|
||||
<circle cx="58" cy="50" r="4"/><circle cx="72" cy="50" r="4"/><circle cx="86" cy="50" r="4"/>
|
||||
</g>
|
||||
<text x="108" y="55" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">PANEL KURSANTA</text>
|
||||
|
||||
<!-- menu boczne -->
|
||||
<g fill="#5980a6">
|
||||
<rect x="40" y="82" width="132" height="26" fill-opacity=".28"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".45">
|
||||
<rect x="58" y="91" width="72" height="8"/>
|
||||
<rect x="58" y="126" width="86" height="8"/>
|
||||
<rect x="58" y="156" width="64" height="8"/>
|
||||
<rect x="58" y="186" width="80" height="8"/>
|
||||
<rect x="58" y="216" width="70" height="8"/>
|
||||
</g>
|
||||
|
||||
<!-- karty postępu kursów -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="192" y="88" width="184" height="76"/>
|
||||
<rect x="396" y="88" width="184" height="76"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".45">
|
||||
<rect x="206" y="102" width="104" height="8"/>
|
||||
<rect x="410" y="102" width="120" height="8"/>
|
||||
</g>
|
||||
<!-- paski postępu -->
|
||||
<g>
|
||||
<rect x="206" y="130" width="156" height="8" fill="#5980a6" fill-opacity=".2"/>
|
||||
<rect x="206" y="130" width="102" height="8" fill="#5980a6"/>
|
||||
<rect x="410" y="130" width="156" height="8" fill="#5980a6" fill-opacity=".2"/>
|
||||
<rect x="410" y="130" width="48" height="8" fill="#5980a6"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1" opacity=".7">
|
||||
<text x="206" y="156">POSTĘP 65%</text>
|
||||
<text x="410" y="156">POSTĘP 30%</text>
|
||||
</g>
|
||||
|
||||
<!-- agenda webinariów -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<rect x="192" y="184" width="388" height="122"/>
|
||||
<path d="M192 210h388"/>
|
||||
</g>
|
||||
<rect x="192" y="184" width="388" height="26" fill="#5980a6" fill-opacity=".12"/>
|
||||
<text x="206" y="202" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">NADCHODZĄCE WEBINARIA</text>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none" opacity=".85">
|
||||
<rect x="206" y="222" width="38" height="34"/>
|
||||
<rect x="206" y="264" width="38" height="34"/>
|
||||
</g>
|
||||
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="13" text-anchor="middle" opacity=".8">
|
||||
<text x="225" y="236">15</text><text x="225" y="250" font-size="10">LIS</text>
|
||||
<text x="225" y="278">22</text><text x="225" y="292" font-size="10">LIS</text>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".42">
|
||||
<rect x="258" y="228" width="180" height="7"/>
|
||||
<rect x="258" y="242" width="120" height="6"/>
|
||||
<rect x="258" y="270" width="204" height="7"/>
|
||||
<rect x="258" y="284" width="136" height="6"/>
|
||||
</g>
|
||||
<!-- znacznik LIVE -->
|
||||
<rect x="500" y="224" width="46" height="17" fill="#1d2d3d"/>
|
||||
<text x="509" y="237" fill="#f2f2f3" font-family="'Barlow Condensed',sans-serif" font-size="10" letter-spacing="1.3">LIVE</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@@ -0,0 +1,72 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-szk">
|
||||
<title id="t-szk">Sala szkoleniowa - prowadzący, ekran z danymi i uczestnicy przy stanowiskach</title>
|
||||
<defs>
|
||||
<pattern id="szk-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="640" height="360" fill="#eaeef2"/>
|
||||
<rect width="640" height="360" fill="url(#szk-grid)"/>
|
||||
|
||||
<!-- ekran prezentacyjny -->
|
||||
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||
<rect x="188" y="40" width="264" height="146"/>
|
||||
<path d="M320 186v18"/>
|
||||
</g>
|
||||
<rect x="188" y="40" width="264" height="20" fill="#5980a6" fill-opacity=".18"/>
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none" opacity=".9">
|
||||
<!-- wykres na ekranie -->
|
||||
<path d="M208 160 250 132 286 142 322 104 358 118 396 86 432 96"/>
|
||||
<path d="M208 172h224" stroke-opacity=".5"/>
|
||||
<path d="M208 76v96" stroke-opacity=".5"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".55">
|
||||
<circle cx="250" cy="132" r="3"/><circle cx="322" cy="104" r="3"/><circle cx="396" cy="86" r="3"/>
|
||||
</g>
|
||||
<g fill="#416180" opacity=".5">
|
||||
<rect x="198" y="46" width="46" height="8"/><rect x="252" y="46" width="30" height="8"/>
|
||||
</g>
|
||||
|
||||
<!-- prowadzący -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<circle cx="122" cy="120" r="14"/>
|
||||
<path d="M104 186v-32a18 18 0 0 1 36 0v32"/>
|
||||
<path d="M140 160l30-14"/>
|
||||
</g>
|
||||
|
||||
<!-- stanowiska uczestników -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<g>
|
||||
<rect x="70" y="248" width="120" height="8"/>
|
||||
<path d="M96 256v40M164 256v40"/>
|
||||
<rect x="96" y="222" width="42" height="26"/>
|
||||
<circle cx="160" cy="212" r="11"/>
|
||||
<path d="M146 248v-14a14 14 0 0 1 28 0v14"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="260" y="248" width="120" height="8"/>
|
||||
<path d="M286 256v40M354 256v40"/>
|
||||
<rect x="286" y="222" width="42" height="26"/>
|
||||
<circle cx="350" cy="212" r="11"/>
|
||||
<path d="M336 248v-14a14 14 0 0 1 28 0v14"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="450" y="248" width="120" height="8"/>
|
||||
<path d="M476 256v40M544 256v40"/>
|
||||
<rect x="476" y="222" width="42" height="26"/>
|
||||
<circle cx="540" cy="212" r="11"/>
|
||||
<path d="M526 248v-14a14 14 0 0 1 28 0v14"/>
|
||||
</g>
|
||||
</g>
|
||||
<g fill="#5980a6" fill-opacity=".22">
|
||||
<rect x="96" y="222" width="42" height="26"/>
|
||||
<rect x="286" y="222" width="42" height="26"/>
|
||||
<rect x="476" y="222" width="42" height="26"/>
|
||||
</g>
|
||||
|
||||
<!-- oznaczenia techniczne (pod rysunkiem, poza strefa postaci) -->
|
||||
<g fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.2" opacity=".65">
|
||||
<text x="70" y="334">MAX. 12</text>
|
||||
<text x="570" y="334" text-anchor="end">2 × 8 H</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,69 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" role="img" aria-labelledby="t-web">
|
||||
<title id="t-web">Webinarium na żywo - okno prowadzącego, uczestnicy i panel czatu</title>
|
||||
<defs>
|
||||
<pattern id="web-grid" width="20" height="20" patternUnits="userSpaceOnUse">
|
||||
<path d="M20 0H0v20" fill="none" stroke="#5980a6" stroke-opacity=".14" stroke-width="1"/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect width="640" height="360" fill="#eaeef2"/>
|
||||
<rect width="640" height="360" fill="url(#web-grid)"/>
|
||||
|
||||
<!-- główne okno transmisji -->
|
||||
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||
<rect x="44" y="46" width="380" height="234"/>
|
||||
<path d="M44 76h380"/>
|
||||
</g>
|
||||
<rect x="44" y="46" width="380" height="30" fill="#5980a6" fill-opacity=".18"/>
|
||||
<g fill="#416180" opacity=".45">
|
||||
<circle cx="60" cy="61" r="4"/><circle cx="74" cy="61" r="4"/><circle cx="88" cy="61" r="4"/>
|
||||
</g>
|
||||
|
||||
<!-- znacznik LIVE -->
|
||||
<rect x="360" y="52" width="52" height="18" fill="#1d2d3d"/>
|
||||
<circle cx="371" cy="61" r="3.5" fill="#f2f2f3"/>
|
||||
<text x="380" y="65" fill="#f2f2f3" font-family="'Barlow Condensed',sans-serif" font-size="11" letter-spacing="1.4">LIVE</text>
|
||||
|
||||
<!-- prowadzący w kadrze -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none">
|
||||
<circle cx="150" cy="150" r="26"/>
|
||||
<path d="M112 246v-42a38 38 0 0 1 76 0v42"/>
|
||||
</g>
|
||||
<circle cx="150" cy="150" r="26" fill="#5980a6" fill-opacity=".2"/>
|
||||
|
||||
<!-- udostępniony slajd -->
|
||||
<g stroke="#5980a6" stroke-width="1.5" fill="none">
|
||||
<rect x="232" y="112" width="164" height="112"/>
|
||||
<path d="M244 200l30-26 26 14 30-38 28 22" />
|
||||
<path d="M244 210h140" stroke-opacity=".5"/>
|
||||
</g>
|
||||
<g fill="#5980a6" opacity=".45">
|
||||
<rect x="244" y="124" width="60" height="7"/>
|
||||
<rect x="244" y="138" width="94" height="5"/>
|
||||
</g>
|
||||
|
||||
<!-- panel czatu -->
|
||||
<g stroke="#416180" fill="none" stroke-width="1.5">
|
||||
<rect x="444" y="46" width="152" height="234"/>
|
||||
<path d="M444 76h152"/>
|
||||
</g>
|
||||
<rect x="444" y="46" width="152" height="30" fill="#5980a6" fill-opacity=".12"/>
|
||||
<text x="456" y="66" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2">PYTANIA · 24</text>
|
||||
<g fill="#5980a6" opacity=".38">
|
||||
<rect x="456" y="92" width="80" height="6"/><rect x="456" y="104" width="118" height="6"/>
|
||||
<rect x="456" y="128" width="96" height="6"/><rect x="456" y="140" width="70" height="6"/>
|
||||
<rect x="456" y="164" width="112" height="6"/><rect x="456" y="176" width="58" height="6"/>
|
||||
<rect x="456" y="200" width="88" height="6"/><rect x="456" y="212" width="104" height="6"/>
|
||||
</g>
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none" opacity=".7">
|
||||
<rect x="456" y="244" width="128" height="22"/>
|
||||
</g>
|
||||
|
||||
<!-- uczestnicy -->
|
||||
<g stroke="#416180" stroke-width="1.5" fill="none" opacity=".8">
|
||||
<g><circle cx="80" cy="312" r="10"/><path d="M66 340v-10a14 14 0 0 1 28 0v10"/></g>
|
||||
<g><circle cx="140" cy="312" r="10"/><path d="M126 340v-10a14 14 0 0 1 28 0v10"/></g>
|
||||
<g><circle cx="200" cy="312" r="10"/><path d="M186 340v-10a14 14 0 0 1 28 0v10"/></g>
|
||||
<g><circle cx="260" cy="312" r="10"/><path d="M246 340v-10a14 14 0 0 1 28 0v10"/></g>
|
||||
</g>
|
||||
<text x="300" y="336" fill="#416180" font-family="'Barlow Condensed',sans-serif" font-size="12" letter-spacing="1.2" opacity=".65">+ 118 UCZESTNIKÓW ONLINE</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,629 @@
|
||||
/* ============================================================================
|
||||
SoftSPM - system "Industry" / HydroNexis
|
||||
Tokeny i komponenty wg doc/SoftSPM_projekt.doc v1.0. Jasny grunt techniczny,
|
||||
jedna barwa akcentu (stalowa), rysunek liniowy, krzyzyki rejestracyjne.
|
||||
Czysty CSS, bez build stepu.
|
||||
========================================================================= */
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@500;600;700&display=swap");
|
||||
|
||||
:root {
|
||||
--color-bg: #f2f2f3;
|
||||
--color-surface: #e9e9ea;
|
||||
--color-text: #1d1f20;
|
||||
--color-accent: #5980a6;
|
||||
--color-accent-2: #728fab;
|
||||
--color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
|
||||
|
||||
/* Rampy tonalne - jedna wspolna skala jasnosci OKLCH */
|
||||
--color-neutral-100: #f5f5f8;
|
||||
--color-neutral-200: #e7e7ea;
|
||||
--color-neutral-300: #d4d4d7;
|
||||
--color-neutral-400: #b7b7ba;
|
||||
--color-neutral-500: #98989b;
|
||||
--color-neutral-600: #7a7a7d;
|
||||
--color-neutral-700: #5d5d60;
|
||||
--color-neutral-800: #424244;
|
||||
--color-neutral-900: #2b2b2d;
|
||||
|
||||
--color-accent-100: #eef6ff;
|
||||
--color-accent-200: #d6ebff;
|
||||
--color-accent-300: #b5d9fd;
|
||||
--color-accent-400: #94bce3;
|
||||
--color-accent-500: #749dc4;
|
||||
--color-accent-600: #597ea3;
|
||||
--color-accent-700: #416180;
|
||||
--color-accent-800: #2c455d;
|
||||
--color-accent-900: #1d2d3d;
|
||||
|
||||
--font-heading: "Barlow Condensed", system-ui, sans-serif;
|
||||
--font-heading-weight: 600;
|
||||
--font-body: "Barlow", system-ui, sans-serif;
|
||||
|
||||
--space-1: 3.4px;
|
||||
--space-2: 6.8px;
|
||||
--space-3: 10.2px;
|
||||
--space-4: 13.6px;
|
||||
--space-6: 20.4px;
|
||||
--space-8: 27.2px;
|
||||
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 7px;
|
||||
|
||||
--shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
|
||||
--shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
|
||||
--shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
|
||||
|
||||
/* Rytm strony - jednostka wiodaca 24px, polkrok 12px */
|
||||
--leading: 24px;
|
||||
--half: 12px;
|
||||
--edge: clamp(20px, 5vw, 72px);
|
||||
--measure: 62ch;
|
||||
}
|
||||
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
text-wrap: pretty;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
/* dlugie slowa i adresy nie rozpychaja ukladu na waskich ekranach */
|
||||
p, li, h1, h2, h3, h4, td, th, blockquote, figcaption { overflow-wrap: break-word; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: var(--font-heading-weight);
|
||||
line-height: 1.12;
|
||||
letter-spacing: -0.015em;
|
||||
margin: 0 0 var(--space-2);
|
||||
}
|
||||
h1 { font-size: 42px; }
|
||||
h2 { font-size: 32px; }
|
||||
h3 { font-size: 25px; }
|
||||
h4 { font-size: 20px; }
|
||||
h5 { font-size: 16px; }
|
||||
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
|
||||
|
||||
p { margin: 0 0 var(--space-3); }
|
||||
a { color: var(--color-accent-700); text-underline-offset: 3px; }
|
||||
img { display: block; max-width: 100%; }
|
||||
|
||||
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--edge); }
|
||||
.text-muted { color: color-mix(in srgb, var(--color-text) 62%, transparent); }
|
||||
.lead { font-size: 17.5px; line-height: var(--leading); max-width: var(--measure); }
|
||||
.visually-hidden {
|
||||
position: absolute; width: 1px; height: 1px; overflow: hidden;
|
||||
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
|
||||
}
|
||||
|
||||
/* -- nawigacja ---------------------------------------------------------- */
|
||||
.nav {
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
display: flex; align-items: center; gap: var(--space-4);
|
||||
min-height: 62px;
|
||||
padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
|
||||
background: color-mix(in srgb, var(--color-bg) 88%, transparent);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
.nav-brand {
|
||||
display: inline-flex; align-items: center;
|
||||
margin-right: var(--space-2); text-decoration: none;
|
||||
}
|
||||
.nav-brand img { height: 30px; width: auto; }
|
||||
@media (max-width: 420px) { .nav-brand img { height: 26px; } }
|
||||
.nav-links { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
|
||||
.nav a {
|
||||
font-size: 14px; white-space: nowrap; text-decoration: none;
|
||||
color: color-mix(in srgb, var(--color-text) 78%, transparent);
|
||||
}
|
||||
.nav a:hover { color: var(--color-accent-700); }
|
||||
.nav a[aria-current] { color: var(--color-accent-700); font-weight: 500; }
|
||||
.nav .btn { margin-left: var(--space-2); }
|
||||
@media (max-width: 900px) {
|
||||
.nav-links a:not(.nav-keep) { display: none; }
|
||||
}
|
||||
|
||||
/* -- linijki podpisowe: etykieta NAD kreska, tresc pod nia -------------- */
|
||||
.kicker {
|
||||
display: block; font-size: 13px; line-height: var(--half);
|
||||
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
|
||||
color: var(--color-accent-700);
|
||||
font-feature-settings: "tnum" 1;
|
||||
margin: 0 0 var(--half);
|
||||
}
|
||||
.caption-rule {
|
||||
height: 1px; border: 0; background: var(--color-divider);
|
||||
margin: 0 0 calc(var(--leading) - var(--half));
|
||||
}
|
||||
.section-intro { max-width: var(--measure); margin-bottom: calc(1.5 * var(--leading)); }
|
||||
.section-intro h2 { text-transform: uppercase; font-size: clamp(28px, 3.4vw, 40px); }
|
||||
|
||||
/* -- krzyzyki rejestracyjne -------------------------------------------- */
|
||||
.corner {
|
||||
position: absolute; width: 13px; height: 13px;
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
.corner::before, .corner::after { content: ""; position: absolute; background: currentColor; }
|
||||
.corner::before { left: 6px; top: 0; width: 1px; height: 100%; }
|
||||
.corner::after { top: 6px; left: 0; width: 100%; height: 1px; }
|
||||
.corner.tl { top: -7px; left: -7px; }
|
||||
.corner.tr { top: -7px; right: -7px; }
|
||||
.corner.bl { bottom: -7px; left: -7px; }
|
||||
.corner.br { bottom: -7px; right: -7px; }
|
||||
|
||||
/* -- przyciski ---------------------------------------------------------- */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
|
||||
cursor: pointer; text-decoration: none;
|
||||
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
|
||||
font-size: 15px; line-height: 1.2; color: var(--color-text);
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-divider); border-radius: 0;
|
||||
padding: 9px 16px;
|
||||
}
|
||||
.btn svg { display: block; }
|
||||
.btn-primary {
|
||||
background: var(--color-accent); color: var(--color-bg);
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
|
||||
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
|
||||
.btn-ghost { color: var(--color-accent-700); border-color: var(--color-divider); }
|
||||
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
|
||||
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
|
||||
.btn-lg { padding: 12px 22px; font-size: 17px; }
|
||||
.btn-block { width: 100%; }
|
||||
.btn:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
|
||||
|
||||
/* -- tagi --------------------------------------------------------------- */
|
||||
.tag {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
padding: 2px 8px; border-radius: 0;
|
||||
font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
|
||||
border: 1px solid var(--color-divider); white-space: nowrap;
|
||||
}
|
||||
.tag-accent { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
|
||||
.tag-outline { color: var(--color-accent-700); border-color: var(--color-accent-400); }
|
||||
.tag-neutral { color: color-mix(in srgb, var(--color-text) 65%, transparent); }
|
||||
.tag-live { background: var(--color-accent-900); color: var(--color-bg); border-color: var(--color-accent-900); }
|
||||
/* status zamiast daty - termin jeszcze nieustalony */
|
||||
.tag-soon {
|
||||
color: var(--color-accent-700);
|
||||
border-style: dashed; border-color: var(--color-accent-400);
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
/* -- formularze --------------------------------------------------------- */
|
||||
.field { margin-bottom: var(--space-3); }
|
||||
.field > label {
|
||||
display: block; font-size: 12px; margin-bottom: 5px;
|
||||
letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
|
||||
color: color-mix(in srgb, var(--color-text) 70%, transparent);
|
||||
}
|
||||
.input {
|
||||
width: 100%; min-height: 40px; padding: 8px 11px;
|
||||
font: inherit; font-size: 15px;
|
||||
color: var(--color-text); caret-color: var(--color-accent);
|
||||
background: color-mix(in srgb, var(--color-bg) 60%, #fff);
|
||||
border: 1px solid var(--color-divider); border-radius: 0;
|
||||
}
|
||||
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
|
||||
.input:focus-visible { border-color: var(--color-accent); outline: 1px solid var(--color-accent); outline-offset: 0; }
|
||||
textarea.input { min-height: 110px; resize: vertical; }
|
||||
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
|
||||
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
|
||||
.form-note { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
|
||||
|
||||
/* -- ramka blueprint / plyta arkusza ----------------------------------- */
|
||||
.plate { position: relative; border: 1px solid var(--color-divider); background: transparent; }
|
||||
|
||||
.title-block {
|
||||
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-4);
|
||||
padding: var(--half) var(--space-4);
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
background: color-mix(in srgb, var(--color-accent) 7%, transparent);
|
||||
}
|
||||
.tb-title {
|
||||
font-family: var(--font-heading); font-weight: 600;
|
||||
font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
|
||||
margin-right: auto;
|
||||
}
|
||||
.tb-cell {
|
||||
font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||
font-feature-settings: "tnum" 1;
|
||||
color: color-mix(in srgb, var(--color-text) 62%, transparent);
|
||||
}
|
||||
|
||||
/* -- tabele ------------------------------------------------------------- */
|
||||
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
|
||||
.table th {
|
||||
text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: color-mix(in srgb, var(--color-text) 60%, transparent);
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
.table td {
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
|
||||
vertical-align: middle;
|
||||
}
|
||||
.table tbody tr:last-child td { border-bottom: 0; }
|
||||
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
|
||||
|
||||
.s-num, .s-val, .s-date { font-feature-settings: "tnum" 1; }
|
||||
.s-num { color: color-mix(in srgb, var(--color-text) 55%, transparent); width: 3rem; }
|
||||
.s-val {
|
||||
font-family: var(--font-heading); font-weight: 700; font-size: 21px;
|
||||
color: var(--color-accent-800); white-space: nowrap;
|
||||
}
|
||||
.s-prop { font-weight: 500; }
|
||||
.s-rem { font-size: 14px; color: color-mix(in srgb, var(--color-text) 68%, transparent); }
|
||||
.s-date { white-space: nowrap; font-weight: 500; width: 1%; }
|
||||
.s-topic { font-family: var(--font-heading); font-weight: 600; font-size: 18px; }
|
||||
.s-act { text-align: right; white-space: nowrap; }
|
||||
.sign {
|
||||
font-family: var(--font-heading); font-weight: 600; font-size: 15px;
|
||||
color: var(--color-accent-700); text-decoration: none;
|
||||
}
|
||||
.sign:hover { text-decoration: underline; }
|
||||
|
||||
.sheet-note {
|
||||
margin: 0; padding: var(--half) var(--space-4);
|
||||
border-top: 1px solid var(--color-divider);
|
||||
font-size: 12px; letter-spacing: 0.03em;
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
}
|
||||
|
||||
/* -- zdjecia: duotone w ramce blueprint -------------------------------- */
|
||||
.duotone { position: relative; overflow: hidden; background: var(--color-accent-900); }
|
||||
.duotone img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.04); }
|
||||
.duotone::after {
|
||||
content: ""; position: absolute; inset: 0; pointer-events: none;
|
||||
background: var(--color-accent); mix-blend-mode: screen; opacity: 0.62;
|
||||
}
|
||||
.figure { position: relative; border: 1px solid var(--color-divider); }
|
||||
.figure .duotone { aspect-ratio: 4 / 3; }
|
||||
/* rysunki wlasne (SVG) - juz sa w kolorystyce systemu, bez duotone */
|
||||
.plot { display: block; width: 100%; background: #eaeef2; }
|
||||
.figure .plot { border-bottom: 1px solid var(--color-divider); }
|
||||
.figure figcaption {
|
||||
padding: var(--half) var(--space-4);
|
||||
border-top: 1px solid var(--color-divider);
|
||||
font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--color-text) 58%, transparent);
|
||||
}
|
||||
|
||||
/* -- ikony -------------------------------------------------------------- */
|
||||
.ico { width: 28px; height: 28px; stroke: var(--color-accent); stroke-width: 1.5; fill: none;
|
||||
stroke-linecap: round; stroke-linejoin: round; }
|
||||
.ico-sm { width: 16px; height: 16px; stroke-width: 1.5; }
|
||||
|
||||
/* -- sekcje ------------------------------------------------------------- */
|
||||
.section { padding: calc(3 * var(--leading)) 0; }
|
||||
.section-tight { padding: calc(2 * var(--leading)) 0; }
|
||||
|
||||
/* -- hero --------------------------------------------------------------- */
|
||||
.hero { padding: calc(3.5 * var(--leading)) 0 calc(2.5 * var(--leading)); }
|
||||
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: calc(2 * var(--leading)); align-items: center; }
|
||||
.display {
|
||||
font-family: var(--font-heading); font-weight: var(--font-heading-weight);
|
||||
/* skalowanie wzgledem szerokosci kolumny hero, zeby dluzsza linia
|
||||
("W PRAKTYCE OD 2014.") miescila sie bez lamania w srodku slowa */
|
||||
font-size: clamp(40px, 5.1cqi, 82px);
|
||||
line-height: 1.04;
|
||||
letter-spacing: 0.01em; text-transform: uppercase; margin: 0;
|
||||
margin-left: -0.052em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.display .line { display: block; }
|
||||
.hero-grid > div:first-child { container-type: inline-size; }
|
||||
@supports not (font-size: 1cqi) {
|
||||
.display { font-size: clamp(40px, 5.6vw, 82px); }
|
||||
}
|
||||
.hero .sub {
|
||||
font-size: 17px; line-height: var(--leading); max-width: var(--measure);
|
||||
margin: var(--leading) 0 0;
|
||||
}
|
||||
.hero .row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: calc(1.5 * var(--leading)); }
|
||||
.hero-marks {
|
||||
display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
|
||||
margin-top: calc(1.5 * var(--leading)); padding-top: var(--half);
|
||||
border-top: 1px solid var(--color-divider);
|
||||
font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--color-text) 58%, transparent);
|
||||
}
|
||||
.page-hero { padding: calc(2.5 * var(--leading)) 0 calc(1.5 * var(--leading)); }
|
||||
.page-hero h1 { font-size: clamp(40px, 5.4vw, 68px); text-transform: uppercase; margin-left: -0.052em; }
|
||||
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .hero-figure { display: none; } }
|
||||
|
||||
/* -- siatka komorek (karty jako rysunki liniowe) ----------------------- */
|
||||
.cells { display: grid; gap: calc(1.5 * var(--leading)); }
|
||||
.cells-2 { grid-template-columns: repeat(2, 1fr); }
|
||||
.cells-3 { grid-template-columns: repeat(3, 1fr); }
|
||||
.cells-4 { grid-template-columns: repeat(4, 1fr); }
|
||||
@media (max-width: 980px) { .cells-3, .cells-4 { grid-template-columns: repeat(2, 1fr); } }
|
||||
@media (max-width: 640px) { .cells-2, .cells-3, .cells-4 { grid-template-columns: 1fr; } }
|
||||
|
||||
.cell-frame {
|
||||
position: relative; display: flex; flex-direction: column;
|
||||
padding: var(--space-6);
|
||||
border: 1px solid var(--color-divider); background: transparent;
|
||||
}
|
||||
.cell-frame h2, .cell-frame h3 { font-size: 25px; margin-bottom: var(--half); }
|
||||
.cell-frame p { font-size: 15px; flex: 1; margin-bottom: var(--space-4); }
|
||||
.cell-frame .ico { margin-bottom: var(--space-3); }
|
||||
.cell-link {
|
||||
font-family: var(--font-heading); font-weight: 600; font-size: 15px;
|
||||
color: var(--color-accent-700); text-decoration: none; margin-top: auto;
|
||||
}
|
||||
.cell-link:hover { text-decoration: underline; }
|
||||
.cell-span { grid-column: 1 / -1; }
|
||||
.cell-num {
|
||||
position: absolute; top: var(--space-3); right: var(--space-4);
|
||||
font-size: 12px; letter-spacing: 0.08em;
|
||||
font-feature-settings: "tnum" 1;
|
||||
color: color-mix(in srgb, var(--color-text) 35%, transparent);
|
||||
}
|
||||
|
||||
/* -- karta kursu -------------------------------------------------------- */
|
||||
.course {
|
||||
position: relative; display: flex; flex-direction: column;
|
||||
border: 1px solid var(--color-divider);
|
||||
}
|
||||
.course .duotone { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--color-divider); }
|
||||
.course .plot { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--color-divider); }
|
||||
.expert .plot { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--color-divider); }
|
||||
.course-body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
|
||||
.course-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
|
||||
.course h3 { font-size: 22px; margin-bottom: var(--half); }
|
||||
.course p { font-size: 14.5px; flex: 1; }
|
||||
.course-meta {
|
||||
display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
|
||||
padding-top: var(--half); margin-bottom: var(--space-4);
|
||||
border-top: 1px solid var(--color-divider);
|
||||
font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent);
|
||||
}
|
||||
.course-meta span { display: inline-flex; align-items: center; gap: 5px; }
|
||||
.course-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
|
||||
.price {
|
||||
font-family: var(--font-heading); font-weight: 700; font-size: 24px;
|
||||
color: var(--color-accent-800); font-feature-settings: "tnum" 1; line-height: 1.1;
|
||||
}
|
||||
.price small { font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em;
|
||||
color: color-mix(in srgb, var(--color-text) 55%, transparent); display: block; }
|
||||
|
||||
/* -- uklad dwudzielny --------------------------------------------------- */
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2 * var(--leading)); align-items: center; }
|
||||
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } .split-media { order: 2; } }
|
||||
.split-title { font-size: clamp(30px, 3.6vw, 42px); text-transform: uppercase; margin-bottom: var(--space-4); }
|
||||
|
||||
/* -- lista kontrolna ---------------------------------------------------- */
|
||||
.checks { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
|
||||
.checks li {
|
||||
position: relative; padding-left: 26px; margin-bottom: var(--half);
|
||||
font-size: 15.5px;
|
||||
}
|
||||
.checks li::before {
|
||||
content: ""; position: absolute; left: 0; top: 7px;
|
||||
width: 11px; height: 6px;
|
||||
border-left: 1.5px solid var(--color-accent); border-bottom: 1.5px solid var(--color-accent);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
/* -- kroki procesu ------------------------------------------------------ */
|
||||
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.5 * var(--leading)); }
|
||||
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }
|
||||
.step { position: relative; padding-top: var(--space-6); border-top: 2px solid var(--color-accent); }
|
||||
.step-num {
|
||||
font-family: var(--font-heading); font-weight: 700; font-size: 44px; line-height: 1;
|
||||
color: color-mix(in srgb, var(--color-accent) 42%, transparent);
|
||||
font-feature-settings: "tnum" 1; display: block; margin-bottom: var(--space-3);
|
||||
}
|
||||
.step h3 { font-size: 22px; }
|
||||
.step p { font-size: 15px; margin-bottom: 0; }
|
||||
|
||||
/* -- eksperci ----------------------------------------------------------- */
|
||||
.expert { position: relative; border: 1px solid var(--color-divider); display: flex; flex-direction: column; }
|
||||
.expert .duotone { aspect-ratio: 1 / 1; border-bottom: 1px solid var(--color-divider); }
|
||||
.expert-body { padding: var(--space-6); }
|
||||
.expert h3 { font-size: 21px; margin-bottom: 2px; }
|
||||
.expert .role {
|
||||
font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
|
||||
color: var(--color-accent-700); margin-bottom: var(--space-3);
|
||||
}
|
||||
.expert p { font-size: 14.5px; margin-bottom: 0; }
|
||||
|
||||
/* -- cytat -------------------------------------------------------------- */
|
||||
.quote { padding: calc(2.5 * var(--leading)) 0; }
|
||||
.quote blockquote {
|
||||
margin: 0; font-family: var(--font-heading); font-weight: 600;
|
||||
font-size: clamp(24px, 3.1vw, 36px); line-height: 1.24;
|
||||
max-width: 28ch; margin-left: -0.316em;
|
||||
}
|
||||
.quote figcaption {
|
||||
margin-top: var(--leading); font-size: 14px;
|
||||
color: color-mix(in srgb, var(--color-text) 62%, transparent);
|
||||
margin-left: -0.885em;
|
||||
}
|
||||
|
||||
/* -- pasek ekosystemu --------------------------------------------------- */
|
||||
.eco { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.5 * var(--leading)); }
|
||||
@media (max-width: 780px) { .eco { grid-template-columns: 1fr; } }
|
||||
.eco-item {
|
||||
position: relative; padding: var(--space-6);
|
||||
border: 1px solid var(--color-divider);
|
||||
text-decoration: none; color: inherit; display: block;
|
||||
}
|
||||
.eco-item:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
|
||||
.eco-item h3 { font-size: 21px; margin-bottom: var(--space-2); }
|
||||
.eco-item p { font-size: 14.5px; margin-bottom: var(--space-2); }
|
||||
.eco-url {
|
||||
font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
|
||||
color: var(--color-accent-700);
|
||||
}
|
||||
|
||||
/* -- newsletter / CTA --------------------------------------------------- */
|
||||
.cta-band {
|
||||
position: relative; padding: calc(2 * var(--leading)) var(--space-8);
|
||||
border: 1px solid var(--color-divider);
|
||||
background: color-mix(in srgb, var(--color-accent) 7%, transparent);
|
||||
}
|
||||
.form-row { display: flex; gap: var(--space-3); flex-wrap: wrap; max-width: 560px; }
|
||||
.form-row .input { flex: 1 1 240px; }
|
||||
|
||||
/* -- zgoda na kontakt --------------------------------------------------- */
|
||||
.consent {
|
||||
display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
|
||||
align-items: start; max-width: var(--measure);
|
||||
margin: var(--leading) 0 var(--space-4);
|
||||
font-size: 13.5px; line-height: calc(var(--leading) - 3px);
|
||||
color: color-mix(in srgb, var(--color-text) 78%, transparent);
|
||||
cursor: pointer;
|
||||
}
|
||||
.consent input[type="checkbox"] {
|
||||
appearance: none; -webkit-appearance: none;
|
||||
width: 18px; height: 18px; margin: 2px 0 0; flex: none;
|
||||
border: 1px solid color-mix(in srgb, var(--color-text) 38%, transparent);
|
||||
background: var(--color-bg); cursor: pointer;
|
||||
display: grid; place-content: center;
|
||||
}
|
||||
.consent input[type="checkbox"]::before {
|
||||
content: ""; width: 10px; height: 10px; transform: scale(0);
|
||||
background: var(--color-bg);
|
||||
clip-path: polygon(14% 46%, 0 60%, 40% 100%, 100% 20%, 86% 8%, 38% 72%);
|
||||
}
|
||||
.consent input[type="checkbox"]:checked {
|
||||
background: var(--color-accent); border-color: var(--color-accent);
|
||||
}
|
||||
.consent input[type="checkbox"]:checked::before { transform: scale(1); }
|
||||
.consent input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
|
||||
.consent .req { color: var(--color-accent-700); font-weight: 500; }
|
||||
|
||||
/* -- suwak antybotowy --------------------------------------------------- */
|
||||
.verify { max-width: 420px; margin: var(--leading) 0; }
|
||||
.verify-label {
|
||||
display: block; margin-bottom: var(--space-2);
|
||||
font-family: var(--font-heading); font-weight: 600;
|
||||
font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--color-text) 62%, transparent);
|
||||
}
|
||||
.verify-track {
|
||||
position: relative; height: 46px; overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
|
||||
background: var(--color-bg); touch-action: none; user-select: none;
|
||||
}
|
||||
.verify-fill {
|
||||
position: absolute; inset: 0 auto 0 0; width: 0;
|
||||
background: color-mix(in srgb, var(--color-accent) 16%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
.verify-hint {
|
||||
position: absolute; inset: 0; display: grid; place-content: center;
|
||||
padding-left: 44px; pointer-events: none;
|
||||
font-size: 14px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
}
|
||||
.verify-handle {
|
||||
position: absolute; top: -1px; left: 0; width: 60px; height: 46px;
|
||||
display: grid; place-content: center; cursor: grab;
|
||||
border: 1px solid var(--color-accent); background: var(--color-accent);
|
||||
color: var(--color-bg); transition: left .18s ease;
|
||||
}
|
||||
.verify-handle svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; }
|
||||
.verify-handle:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
|
||||
.verify.is-dragging .verify-handle { cursor: grabbing; transition: none; }
|
||||
.verify.is-verified .verify-track { border-color: var(--color-accent); }
|
||||
.verify.is-verified .verify-handle { background: var(--color-accent-700); border-color: var(--color-accent-700); cursor: default; }
|
||||
.verify.is-verified .verify-hint { color: var(--color-accent-700); font-weight: 500; }
|
||||
.verify-check { display: none; }
|
||||
.verify.is-verified .verify-chevrons { display: none; }
|
||||
.verify.is-verified .verify-check { display: block; }
|
||||
@media (prefers-reduced-motion: reduce) { .verify-handle { transition: none; } }
|
||||
|
||||
/* -- pole-pułapka: widoczne wyłącznie dla automatów --------------------- */
|
||||
.hp {
|
||||
position: absolute; left: -9999px; top: auto;
|
||||
width: 1px; height: 1px; overflow: hidden;
|
||||
}
|
||||
|
||||
/* -- komunikat po wysłaniu formularza ----------------------------------- */
|
||||
.form-status {
|
||||
margin: var(--space-3) 0 0; min-height: var(--leading);
|
||||
font-size: 14px; line-height: var(--leading);
|
||||
}
|
||||
.form-status:empty { margin: 0; min-height: 0; }
|
||||
.form-status.is-ok { color: var(--color-accent-700); font-weight: 500; padding-left: var(--space-3); border-left: 2px solid var(--color-accent); }
|
||||
/* System dopuszcza jedną barwę akcentu - błąd odróżniamy tonem i wypełnieniem,
|
||||
nie nowym kolorem. Sam komunikat i tak mówi wprost, co się stało. */
|
||||
.form-status.is-error {
|
||||
color: var(--color-accent-900); font-weight: 500;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-left: 2px solid var(--color-accent-900);
|
||||
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
||||
}
|
||||
.form-status.is-busy { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
|
||||
|
||||
/* -- stopka ------------------------------------------------------------- */
|
||||
.foot {
|
||||
margin-top: calc(2 * var(--leading));
|
||||
border-top: 1px solid var(--color-divider);
|
||||
padding: calc(2 * var(--leading)) 0 calc(1.5 * var(--leading));
|
||||
font-size: 14px;
|
||||
}
|
||||
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: calc(1.5 * var(--leading)); }
|
||||
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
|
||||
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
|
||||
.foot-logo { height: 42px; width: auto; margin-bottom: var(--space-4); }
|
||||
.foot h4 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
|
||||
color: color-mix(in srgb, var(--color-text) 58%, transparent); margin-bottom: var(--space-3); }
|
||||
.foot ul { list-style: none; margin: 0; padding: 0; }
|
||||
.foot li { margin-bottom: var(--space-2); }
|
||||
.foot a { text-decoration: none; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
|
||||
.foot a:hover { color: var(--color-accent-700); text-decoration: underline; }
|
||||
.foot-bar {
|
||||
margin-top: calc(1.5 * var(--leading)); padding-top: var(--half);
|
||||
border-top: 1px solid var(--color-divider);
|
||||
display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
|
||||
font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent);
|
||||
}
|
||||
|
||||
/* -- responsywne tabele: wiersze skladaja sie do kart ------------------- */
|
||||
@media (max-width: 760px) {
|
||||
.table.sched thead { display: none; }
|
||||
.table.sched tbody tr {
|
||||
display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-3);
|
||||
padding: var(--space-4); border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
.table.sched td { border: 0; padding: 0; }
|
||||
.table.sched .s-date { order: 1; font-size: 14px; color: var(--color-accent-700); }
|
||||
.table.sched .s-form { order: 2; text-align: right; }
|
||||
.table.sched .s-topic { grid-column: 1 / -1; order: 3; }
|
||||
.table.sched .s-place { order: 4; font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
|
||||
.table.sched .s-act { order: 5; text-align: right; }
|
||||
|
||||
.table.spec thead { display: none; }
|
||||
.table.spec tbody tr {
|
||||
display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-3);
|
||||
padding: var(--space-4); border-bottom: 1px solid var(--color-divider);
|
||||
}
|
||||
.table.spec td { border: 0; padding: 0; }
|
||||
.table.spec .s-val { grid-column: 2; }
|
||||
.table.spec .s-rem { grid-column: 2; }
|
||||
}
|
||||
|
||||
@media print {
|
||||
.nav, .btn { display: none; }
|
||||
body { background: #fff; }
|
||||
}
|
||||
Reference in New Issue
Block a user