Date:
wt., gru 30, 2025
IEC 81355 kod
<!-- Dependencies -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
/* Scoping all styles to the app container to prevent OpenCMS layout breaks */
#iec-navigator-app {
font-family: 'Inter', sans-serif;
background-color: #f8fafc;
color: #334155;
line-height: 1.5;
position: relative;
z-index: 1;
}
#iec-navigator-app .font-mono {
font-family: 'JetBrains Mono', monospace;
}
#iec-navigator-app .flow-node {
transition: all 0.3s ease;
cursor: pointer;
pointer-events: auto;
}
#iec-navigator-app .flow-node:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
#iec-navigator-app .iec-nav-btn {
pointer-events: auto;
cursor: pointer;
}
#iec-navigator-app .tab-content {
display: none;
animation: iec_fadeIn 0.4s ease-in-out;
}
#iec-navigator-app .tab-content.active {
display: block;
}
@keyframes iec_fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Custom Scrollbar for the filter list */
#iec-navigator-app .custom-scrollbar::-webkit-scrollbar {
width: 5px;
}
#iec-navigator-app .custom-scrollbar::-webkit-scrollbar-track {
background: #f1f5f9;
}
#iec-navigator-app .custom-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
</style>
<div id="iec-navigator-app" class="rounded-xl border border-slate-200 overflow-hidden my-8 shadow-sm">
<!-- Header -->
<header class="bg-white border-b border-slate-200 sticky top-0 z-20">
<div class="max-w-7xl mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center py-4 gap-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center text-white font-bold shadow-blue-200 shadow-lg">81</div>
<div>
<h1 class="text-xl font-bold text-slate-900 tracking-tight m-0">EN IEC 81355-1 <span class="text-blue-600">Nawigator</span></h1>
<p class="text-xs text-slate-500 m-0">Zarządzanie informacją techniczną (Edycja 2025)</p>
</div>
</div>
<nav class="flex flex-wrap justify-center gap-1">
<button class="iec-nav-btn px-4 py-2 rounded-lg text-sm font-semibold text-blue-600 bg-blue-50 transition-colors" data-target="dashboard">
<i class="fas fa-th-large mr-2"></i>Koncepcje
</button>
<button class="iec-nav-btn px-4 py-2 rounded-lg text-sm font-semibold text-slate-600 hover:text-slate-900 hover:bg-slate-50 transition-colors" data-target="explorer">
<i class="fas fa-search mr-2"></i>Przeglądarka ICC
</button>
<button class="iec-nav-btn px-4 py-2 rounded-lg text-sm font-semibold text-slate-600 hover:text-slate-900 hover:bg-slate-50 transition-colors" data-target="builder">
<i class="fas fa-tools mr-2"></i>Generator
</button>
<button class="iec-nav-btn px-4 py-2 rounded-lg text-sm font-semibold text-slate-600 hover:text-slate-900 hover:bg-slate-50 transition-colors" data-target="migration">
<i class="fas fa-exchange-alt mr-2"></i>Migracja
</button>
</nav>
</div>
</div>
</header>
<main class="p-4 md:p-8 bg-slate-50/50">
<!-- DASHBOARD SECTION -->
<section id="dashboard" class="tab-content active">
<div class="mb-10">
<h2 class="text-3xl font-extrabold text-slate-900 mb-3">Fundamenty EN IEC 81355-1</h2>
<p class="text-lg text-slate-600 max-w-4xl">
Norma definiuje klasy informacji w oparciu o ich **treść merytoryczną** (Inherent Content).
Poniżej znajdują się kluczowe pojęcia i zasady nowej klasyfikacji ICC.
</p>
</div>
<!-- Summary Metrics -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4">
<div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center text-xl"><i class="fas fa-layer-group"></i></div>
<div>
<div class="text-2xl font-black text-slate-900 leading-none">12</div>
<div class="text-xs text-slate-500 uppercase font-bold mt-1 tracking-wider">Domen L1</div>
</div>
</div>
<div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4">
<div class="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-xl flex items-center justify-center text-xl"><i class="fas fa-database"></i></div>
<div>
<div class="text-2xl font-black text-slate-900 leading-none">80+</div>
<div class="text-xs text-slate-500 uppercase font-bold mt-1 tracking-wider">Kodów L2</div>
</div>
</div>
<div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4">
<div class="w-12 h-12 bg-amber-100 text-amber-600 rounded-xl flex items-center justify-center text-xl"><i class="fas fa-code"></i></div>
<div>
<div class="text-2xl font-black text-slate-900 leading-none">&L1L2</div>
<div class="text-xs text-slate-500 uppercase font-bold mt-1 tracking-wider">Składnia</div>
</div>
</div>
<div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex items-center gap-4">
<div class="w-12 h-12 bg-indigo-100 text-indigo-600 rounded-xl flex items-center justify-center text-xl"><i class="fas fa-check-circle"></i></div>
<div>
<div class="text-2xl font-black text-slate-900 leading-none">2025</div>
<div class="text-xs text-slate-500 uppercase font-bold mt-1 tracking-wider">Standard</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
<!-- Concept Map -->
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
<h3 class="text-lg font-bold mb-6 flex items-center gap-2">
<i class="fas fa-project-diagram text-blue-500"></i> Model Pojęciowy
</h3>
<div class="relative bg-slate-50 rounded-2xl p-6 h-80 flex flex-col items-center justify-center border border-slate-100 overflow-hidden">
<div class="flow-node bg-amber-50 border-2 border-amber-200 text-amber-900 px-5 py-2.5 rounded-xl shadow-sm w-36 text-center font-bold text-sm mb-4" data-def="object">OBIEKT</div>
<div class="h-6 w-px bg-slate-200"></div>
<div class="flex items-center gap-4">
<div class="flow-node bg-blue-50 border-2 border-blue-200 text-blue-900 px-5 py-2.5 rounded-xl shadow-sm w-36 text-center font-bold text-sm" data-def="info">INFORMACJA</div>
<i class="fas fa-link text-slate-300"></i>
<div class="flow-node bg-emerald-50 border-2 border-emerald-200 text-emerald-900 px-5 py-2.5 rounded-xl shadow-sm w-36 text-center font-bold text-sm" data-def="container">KONTENER</div>
</div>
<div class="h-6 w-px bg-slate-200 mt-4"></div>
<div class="flow-node bg-indigo-50 border-2 border-indigo-200 text-indigo-900 px-5 py-2.5 rounded-xl shadow-sm w-36 text-center font-bold text-sm" data-def="doc">DOKUMENT</div>
</div>
</div>
<!-- Definition Sidebar -->
<div class="bg-slate-800 text-white p-8 rounded-2xl shadow-xl border border-slate-700 flex flex-col justify-center">
<div id="iec-def-title" class="text-xs uppercase tracking-widest text-blue-400 font-black mb-3">Słownik Normy</div>
<h4 id="iec-def-header" class="text-2xl font-bold mb-4 text-white">Wybierz element schematu</h4>
<p id="iec-def-body" class="text-slate-300 leading-relaxed text-sm">
Kliknij blok na modelu relacji po lewej stronie, aby wyświetlić definicję zgodną z EN IEC 81355-1.
</p>
</div>
</div>
<div class="bg-blue-600 rounded-2xl p-8 text-white shadow-lg shadow-blue-200 flex flex-col md:flex-row items-center justify-between gap-6">
<div class="max-w-xl">
<h3 class="text-xl font-bold mb-2">Gotowy do klasyfikacji?</h3>
<p class="text-blue-100 text-sm">Przejdź do przeglądarki kodów, aby znaleźć odpowiednią klasę ICC dla Twojego kontenera informacyjnego lub skorzystaj z generatora oznaczeń.</p>
</div>
<div class="flex gap-3 shrink-0">
<button onclick="iec_switchTab('explorer')" class="px-5 py-2.5 bg-white text-blue-600 font-bold rounded-xl text-sm hover:bg-blue-50 transition-colors">Baza Kodów</button>
<button onclick="iec_switchTab('builder')" class="px-5 py-2.5 bg-blue-700 text-white font-bold rounded-xl text-sm hover:bg-blue-800 transition-colors">Generator</button>
</div>
</div>
</section>
<!-- EXPLORER SECTION -->
<section id="explorer" class="tab-content">
<div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-6">
<div>
<h2 class="text-2xl font-bold text-slate-900">Baza Danych Klasyfikacji ICC</h2>
<p class="text-slate-500">Przeglądaj kody klasyfikacji dla poszczególnych rodzajów informacji.</p>
</div>
<div class="relative group">
<input type="text" id="iec-searchInput" placeholder="Szukaj (np. Schemat, Lista)..."
class="pl-11 pr-4 py-3 border border-slate-200 rounded-xl w-full md:w-80 shadow-sm focus:ring-2 focus:ring-blue-500 transition-all outline-none">
<i class="fas fa-search absolute left-4 top-4 text-slate-400 group-focus-within:text-blue-500 transition-colors"></i>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
<div class="lg:col-span-1">
<div class="bg-white p-4 rounded-xl border border-slate-200 sticky top-24">
<div class="text-xs font-black text-slate-400 uppercase tracking-widest mb-3 px-2">Kategorie L1</div>
<div id="iec-l1-filters" class="flex flex-col gap-1 max-h-[60vh] overflow-y-auto pr-2 custom-scrollbar"></div>
</div>
</div>
<div class="lg:col-span-3">
<div class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
<table class="w-full text-left text-sm">
<thead class="bg-slate-50 border-b border-slate-200">
<tr>
<th class="p-4 font-bold text-slate-600 w-24">Kod</th>
<th class="p-4 font-bold text-slate-600 w-48">Klasa (L2)</th>
<th class="p-4 font-bold text-slate-600">Opis i Przykłady</th>
</tr>
</thead>
<tbody id="iec-table-body" class="divide-y divide-slate-100"></tbody>
</table>
<div id="iec-no-results" class="hidden p-12 text-center text-slate-400 italic">
Nie znaleziono pasujących kodów.
</div>
</div>
</div>
</div>
</section>
<!-- BUILDER SECTION -->
<section id="builder" class="tab-content">
<div class="max-w-3xl mx-auto py-8">
<div class="text-center mb-10">
<h2 class="text-3xl font-bold text-slate-900 mb-2">Generator Oznaczeń</h2>
<p class="text-slate-500">Twórz poprawne identyfikatory kontenerów informacyjnych.</p>
</div>
<div class="bg-white rounded-3xl shadow-xl border border-slate-200 overflow-hidden">
<div class="bg-slate-900 text-white p-10 text-center relative overflow-hidden">
<div class="font-mono text-5xl md:text-7xl font-bold tracking-widest mb-4 inline-flex items-center" id="iec-live-code">
<span class="text-slate-600 mr-2 opacity-50">&</span>
<span class="text-blue-400" id="iec-prev-l1">?</span>
<span class="text-emerald-400" id="iec-prev-l2">?</span>
<span id="iec-prev-n" class="text-white">1</span>
<span class="text-amber-400 ml-2 text-3xl" id="iec-prev-fmt"></span>
</div>
<div class="text-xs text-blue-300 font-bold uppercase tracking-[0.3em]" id="iec-code-desc">Ustaw parametry oznaczenia</div>
</div>
<div class="p-8 md:p-12 grid grid-cols-1 md:grid-cols-2 gap-8 bg-white">
<div class="space-y-6">
<div>
<label class="block text-xs font-black text-slate-400 uppercase mb-2 ml-1">Domena Główna (L1)</label>
<select id="iec-b-l1" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 transition-all outline-none"></select>
</div>
<div>
<label class="block text-xs font-black text-slate-400 uppercase mb-2 ml-1">Rodzaj Informacji (L2)</label>
<select id="iec-b-l2" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 transition-all outline-none disabled:opacity-50" disabled></select>
</div>
</div>
<div class="space-y-6">
<div>
<label class="block text-xs font-black text-slate-400 uppercase mb-2 ml-1">Numer Kontenera (N)</label>
<input type="number" id="iec-b-n" value="1" min="1" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 transition-all outline-none">
</div>
<div>
<label class="block text-xs font-black text-slate-400 uppercase mb-2 ml-1">Prezentacja (Format)</label>
<select id="iec-b-fmt" class="w-full p-3 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 transition-all outline-none">
<option value="">Standard (brak)</option>
<option value="(C)">C - Wykres</option>
<option value="(D)">D - Diagram</option>
<option value="(L)">L - Rysunek</option>
<option value="(T)">T - Tabela</option>
<option value="(X)">X - Tekst</option>
</select>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- MIGRATION -->
<section id="migration" class="tab-content">
<div class="max-w-4xl mx-auto">
<div class="mb-8">
<h2 class="text-2xl font-bold text-slate-900">Migracja DCC → ICC</h2>
<p class="text-slate-500">Zestawienie zmian między normą z 2008 a 2025 rokiem.</p>
</div>
<div class="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
<table class="w-full text-sm text-left">
<thead class="bg-slate-50 border-b border-slate-200">
<tr>
<th class="p-4 font-bold text-slate-600">Stary Kod (DCC)</th>
<th class="p-4 font-bold text-slate-600">Nowy Kod (ICC)</th>
<th class="p-4 font-bold text-slate-600">Opis zmiany</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="p-4 font-mono font-bold text-red-500">QA</td>
<td class="p-4 font-mono font-bold text-emerald-600">BQ</td>
<td class="p-4 text-slate-500 text-xs">Jakość zarządzana (B).</td>
</tr>
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="p-4 font-mono font-bold text-red-500">QB</td>
<td class="p-4 font-mono font-bold text-emerald-600">RA</td>
<td class="p-4 text-slate-500 text-xs">Nowa domena Bezpieczeństwo (R).</td>
</tr>
<tr class="hover:bg-blue-50/30 transition-colors">
<td class="p-4 font-mono font-bold text-red-500">E</td>
<td class="p-4 font-mono font-bold text-emerald-600">DB / DC</td>
<td class="p-4 text-slate-500 text-xs">Specyfikacje przeniesione do domeny D.</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</main>
</div>
<script>
(function() {
const root = document.getElementById('iec-navigator-app');
if (!root) return;
const definitions = {
'object': { title: '3.2 OBIEKT', text: 'Byt abstrakcyjny lub fizyczny, reprezentujący system lub jego część.', ref: 'IEC 81346-1' },
'info': { title: '3.1 INFORMACJA', text: 'Wiedza zdolna do reprezentowania w formie odpowiedniej do komunikacji.', ref: 'IEC 60050' },
'container': { title: '3.10 KONTENER', text: 'Zbiór informacji możliwy do odzyskania z pliku lub bazy danych.', ref: 'ISO 19650-1' },
'doc': { title: '3.12 DOKUMENT', text: 'Kontener informacyjny przedstawiony w formacie statycznym dla ludzi.', ref: 'IEC 81355-1' }
};
const iccData = [
{ l1: 'A', name: 'Meta-informacja', color: '#94a3b8', l2: [{code: 'AA', name: 'Identyfikacja', desc: 'Metadane'}, {code: 'AB', name: 'Referencja', desc: 'Spis treści'}] },
{ l1: 'B', name: 'Zarządzanie', color: '#64748b', l2: [{code: 'BD', name: 'Nadzór', desc: 'Harmonogramy'}, {code: 'BQ', name: 'Jakość', desc: 'Plan audytu'}] },
{ l1: 'C', name: 'Kontraktowa', color: '#475569', l2: [{code: 'CA', name: 'Oferty', desc: 'Zapytania'}, {code: 'CC', name: 'Umowy', desc: 'Kontrakty'}] },
{ l1: 'D', name: 'Właściwości', color: '#f59e0b', l2: [{code: 'DA', name: 'Dane techn.', desc: 'Data Sheets'}, {code: 'DC', name: 'Instrukcje', desc: 'Manual'}] },
{ l1: 'F', name: 'Funkcja', color: '#3b82f6', l2: [{code: 'FS', name: 'Obwody', desc: 'Schematy'}, {code: 'FB', name: 'Przepływy', desc: 'P&ID'}] },
{ l1: 'L', name: 'Układ', color: '#f97316', l2: [{code: 'LH', name: 'Rozmieszczenie', desc: 'Layout'}] },
{ l1: 'M', name: 'Interfejsy', color: '#06b6d4', l2: [{code: 'MA', name: 'Zakończenia', desc: 'Terminal Diagrams'}] },
{ l1: 'P', name: 'Wyliczenie', color: '#8b5cf6', l2: [{code: 'PA', name: 'Materiały', desc: 'BOM'}] },
{ l1: 'Q', name: 'Jakość', color: '#10b981', l2: [{code: 'QC', name: 'Walidacja', desc: 'Testy'}] },
{ l1: 'R', name: 'Bezpieczeństwo', color: '#ef4444', l2: [{code: 'RA', name: 'BHP', desc: 'Ocena ryzyka'}] },
{ l1: 'T', name: 'Geometria', color: '#6366f1', l2: [{code: 'TB', name: 'Detale', desc: 'Rysunki warsztatowe'}] },
{ l1: 'W', name: 'Operacyjne', color: '#14b8a6', l2: [{code: 'WT', name: 'Rejestry', desc: 'Dzienniki'}] }
];
window.iec_switchTab = (tabId) => {
root.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
const target = root.querySelector('#' + tabId);
if (target) target.classList.add('active');
root.querySelectorAll('.iec-nav-btn').forEach(b => {
if(b.dataset.target === tabId) {
b.classList.add('text-blue-600', 'bg-blue-50', 'shadow-sm');
b.classList.remove('text-slate-600');
} else {
b.classList.remove('text-blue-600', 'bg-blue-50', 'shadow-sm');
b.classList.add('text-slate-600');
}
});
};
const updatePreview = () => {
const l1 = root.querySelector('#iec-b-l1').value;
const l2 = root.querySelector('#iec-b-l2').value;
const n = root.querySelector('#iec-b-n').value;
const fmt = root.querySelector('#iec-b-fmt').value;
root.querySelector('#iec-prev-l1').textContent = l1 || '?';
root.querySelector('#iec-prev-l2').textContent = l2 ? l2.charAt(1) : '?';
root.querySelector('#iec-prev-n').textContent = n;
root.querySelector('#iec-prev-fmt').textContent = fmt;
};
const updateL2 = () => {
const val = root.querySelector('#iec-b-l1').value;
const s2 = root.querySelector('#iec-b-l2');
s2.innerHTML = '<option value="">-- Wybierz --</option>';
s2.disabled = !val;
if(val) {
const cat = iccData.find(c => c.l1 === val);
cat.l2.forEach(sub => {
let o = document.createElement('option');
o.value = sub.code; o.textContent = `${sub.code} - ${sub.name}`;
s2.appendChild(o);
});
}
updatePreview();
};
const renderTable = (filter = null) => {
const tbody = root.querySelector('#iec-table-body');
tbody.innerHTML = '';
iccData.forEach(c => {
if(filter && c.l1 !== filter) return;
c.l2.forEach(s => {
let r = tbody.insertRow();
r.innerHTML = `<td class="p-4 font-mono font-bold text-blue-600">${s.code}</td><td class="p-4 font-bold text-slate-800">${s.name}</td><td class="p-4 text-slate-500 text-xs">${s.desc}</td>`;
});
});
};
function init() {
// Events
root.querySelectorAll('.iec-nav-btn').forEach(btn => btn.addEventListener('click', () => iec_switchTab(btn.dataset.target)));
root.querySelectorAll('.flow-node').forEach(node => {
node.addEventListener('click', () => {
const d = definitions[node.dataset.def];
if (d) {
root.querySelector('#iec-def-header').textContent = d.title;
root.querySelector('#iec-def-body').textContent = d.text;
root.querySelector('#iec-def-title').textContent = "Źródło: " + d.ref;
}
});
});
// Filters
const filterBox = root.querySelector('#iec-l1-filters');
iccData.forEach(c => {
let b = document.createElement('button');
b.className = "text-left px-3 py-2 text-xs hover:bg-slate-100 rounded-lg transition-colors border-l-2 border-transparent hover:border-blue-500";
b.innerHTML = `<span class="font-mono font-bold mr-2 text-slate-400">${c.l1}</span> ${c.name}`;
b.addEventListener('click', () => renderTable(c.l1));
filterBox.appendChild(b);
});
// Builder
const b_l1 = root.querySelector('#iec-b-l1');
b_l1.innerHTML = '<option value="">-- Wybierz --</option>';
iccData.forEach(c => {
let o = document.createElement('option');
o.value = c.l1; o.textContent = `${c.l1} - ${c.name}`;
b_l1.appendChild(o);
});
b_l1.addEventListener('change', updateL2);
root.querySelector('#iec-b-l2').addEventListener('change', updatePreview);
root.querySelector('#iec-b-n').addEventListener('input', updatePreview);
root.querySelector('#iec-b-fmt').addEventListener('change', updatePreview);
// Search
root.querySelector('#iec-searchInput').addEventListener('input', (e) => {
const term = e.target.value.toLowerCase();
const tbody = root.querySelector('#iec-table-body');
tbody.innerHTML = '';
let found = false;
iccData.forEach(c => {
c.l2.forEach(s => {
if(s.code.toLowerCase().includes(term) || s.name.toLowerCase().includes(term)) {
let r = tbody.insertRow();
r.innerHTML = `<td class="p-4 font-mono font-bold text-blue-600">${s.code}</td><td class="p-4 font-bold text-slate-800">${s.name}</td><td class="p-4 text-slate-500 text-xs">${s.desc}</td>`;
found = true;
}
});
});
root.querySelector('#iec-no-results').classList.toggle('hidden', found);
});
renderTable();
}
setTimeout(init, 300);
})();
</script>