723 lines
27 KiB
HTML
723 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>NordaBiz UI Redesign - Porównanie zmian</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--old-primary: #2563eb;
|
|
--new-primary: #2E4872;
|
|
--old-bg: #f8fafc;
|
|
--new-bg: #EDF0F5;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background: #f5f5f5;
|
|
color: #1e293b;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
|
|
header {
|
|
background: linear-gradient(135deg, #1e3050 0%, #2E4872 100%);
|
|
color: white;
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
header p {
|
|
opacity: 0.9;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.sprint-section {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.sprint-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid #EDF0F5;
|
|
}
|
|
|
|
.sprint-badge {
|
|
background: linear-gradient(135deg, #1e3050 0%, #2E4872 100%);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 12px 4px 12px 4px;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.sprint-badge.before {
|
|
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
|
|
}
|
|
|
|
.sprint-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.commit-hash {
|
|
font-family: monospace;
|
|
background: #EDF0F5;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.85rem;
|
|
color: #64748b;
|
|
}
|
|
|
|
.changes-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.change-card {
|
|
background: #f8fafc;
|
|
border-radius: 8px;
|
|
padding: 1rem;
|
|
border-left: 4px solid var(--new-primary);
|
|
}
|
|
|
|
.change-card h4 {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--new-primary);
|
|
}
|
|
|
|
.change-value {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.old-value {
|
|
color: #ef4444;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.arrow {
|
|
color: #64748b;
|
|
}
|
|
|
|
.new-value {
|
|
color: #10b981;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.color-preview {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 4px;
|
|
vertical-align: middle;
|
|
border: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.files-changed {
|
|
background: #EDF0F5;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.files-changed h4 {
|
|
font-size: 0.9rem;
|
|
color: #64748b;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.files-changed code {
|
|
display: block;
|
|
font-family: monospace;
|
|
font-size: 0.85rem;
|
|
color: var(--new-primary);
|
|
padding: 0.25rem 0;
|
|
}
|
|
|
|
.screenshot-container {
|
|
margin-top: 1.5rem;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.screenshot-container img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.screenshot-label {
|
|
background: #EDF0F5;
|
|
padding: 0.75rem 1rem;
|
|
font-size: 0.85rem;
|
|
color: #64748b;
|
|
text-align: center;
|
|
}
|
|
|
|
.summary-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.summary-table th,
|
|
.summary-table td {
|
|
padding: 0.75rem 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.summary-table th {
|
|
background: #EDF0F5;
|
|
font-weight: 600;
|
|
color: var(--new-primary);
|
|
}
|
|
|
|
.summary-table tr:hover {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 2rem;
|
|
color: #64748b;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 1.75rem;
|
|
}
|
|
|
|
.changes-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>NordaBiz UI Redesign</h1>
|
|
<p>Dokumentacja zmian graficznych: norda-biznes.info → nordabiznes.pl</p>
|
|
<p style="margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.7;">Data: 30 stycznia 2026</p>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<!-- PRZED ZMIANAMI -->
|
|
<section class="sprint-section">
|
|
<div class="sprint-header">
|
|
<span class="sprint-badge before">PRZED</span>
|
|
<h2 class="sprint-title">Stan wyjściowy (Produkcja)</h2>
|
|
</div>
|
|
|
|
<div class="changes-grid">
|
|
<div class="change-card">
|
|
<h4>Czcionka</h4>
|
|
<div class="change-value">Inter (Google Fonts)</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Kolor primary</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #2563eb;"></span>
|
|
#2563eb (jasny niebieski)
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Tło strony</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #f8fafc;"></span>
|
|
#f8fafc
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Event banner</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #f59e0b;"></span>
|
|
#f59e0b (pomaranczowy)
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>NordaGPT banner</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #7c3aed;"></span>
|
|
#7c3aed (fioletowy)
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Przyciski border-radius</h4>
|
|
<div class="change-value">8px (symetryczny)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="screenshot-container">
|
|
<img src="screenshots/screenshot-0-PRZED.png" alt="Screenshot przed zmianami">
|
|
<div class="screenshot-label">Stan przed zmianami (commit d9f32b7)</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SPRINT 1 -->
|
|
<section class="sprint-section">
|
|
<div class="sprint-header">
|
|
<span class="sprint-badge">SPRINT 1</span>
|
|
<h2 class="sprint-title">Fundamenty</h2>
|
|
<span class="commit-hash">de46e12</span>
|
|
</div>
|
|
|
|
<div class="changes-grid">
|
|
<div class="change-card">
|
|
<h4>Czcionka</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">Inter</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">Poppins</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Kolor primary</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #2563eb;"></span>
|
|
<span class="arrow">→</span>
|
|
<span class="color-preview" style="background: #2E4872;"></span>
|
|
<span class="new-value">#2E4872</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Tło strony</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #f8fafc;"></span>
|
|
<span class="arrow">→</span>
|
|
<span class="color-preview" style="background: #EDF0F5;"></span>
|
|
<span class="new-value">#EDF0F5</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Border-radius przycisków</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">8px</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">12px 4px 12px 4px</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Header</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">border-bottom</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">subtelny cien</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Footer</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #1e293b;"></span>
|
|
<span class="arrow">→</span>
|
|
<span class="color-preview" style="background: #2E4872;"></span>
|
|
<span class="new-value">#2E4872</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="files-changed">
|
|
<h4>Zmienione pliki:</h4>
|
|
<code>templates/base.html</code>
|
|
</div>
|
|
|
|
<div class="screenshot-container">
|
|
<img src="screenshots/screenshot-1-sprint1.png" alt="Screenshot po Sprint 1">
|
|
<div class="screenshot-label">Po Sprint 1 (commit de46e12)</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SPRINT 2 -->
|
|
<section class="sprint-section">
|
|
<div class="sprint-header">
|
|
<span class="sprint-badge">SPRINT 2</span>
|
|
<h2 class="sprint-title">Bannery i karty firm</h2>
|
|
<span class="commit-hash">1da42f2</span>
|
|
</div>
|
|
|
|
<div class="changes-grid">
|
|
<div class="change-card">
|
|
<h4>Event banner</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #f59e0b;"></span>
|
|
<span class="arrow">→</span>
|
|
<span class="color-preview" style="background: #2E4872;"></span>
|
|
<span class="new-value">#2E4872</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>NordaGPT banner</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #7c3aed;"></span>
|
|
<span class="arrow">→</span>
|
|
<span class="color-preview" style="background: #2E4872;"></span>
|
|
<span class="new-value">#2E4872</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Karty firm - styl</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">box-shadow</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">border 1px solid</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Karty firm - hover</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">translateY(-2px)</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">border-color: primary</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Tagi kategorii</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">szare, male litery</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">UPPERCASE, primary</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Przyciski w bannerach</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">asymetryczny border-radius</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="files-changed">
|
|
<h4>Zmienione pliki:</h4>
|
|
<code>templates/index.html</code>
|
|
</div>
|
|
|
|
<div class="screenshot-container">
|
|
<img src="screenshots/screenshot-2-sprint2.png" alt="Screenshot po Sprint 2">
|
|
<div class="screenshot-label">Po Sprint 2 (commit 1da42f2)</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SPRINT 3 -->
|
|
<section class="sprint-section">
|
|
<div class="sprint-header">
|
|
<span class="sprint-badge">SPRINT 3</span>
|
|
<h2 class="sprint-title">Strona chatu NordaGPT</h2>
|
|
<span class="commit-hash">b680e3f</span>
|
|
</div>
|
|
|
|
<div class="changes-grid">
|
|
<div class="change-card">
|
|
<h4>Chat header</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #7c3aed;"></span>
|
|
<span class="arrow">→</span>
|
|
<span class="color-preview" style="background: #2E4872;"></span>
|
|
<span class="new-value">#2E4872</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Sidebar button</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">fioletowy</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">niebieski</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>AI Message avatar</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">fioletowy gradient</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">niebieski gradient</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Input focus</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">#7c3aed</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">#2E4872</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Send button</h4>
|
|
<div class="change-value">
|
|
<span class="old-value">fioletowy</span>
|
|
<span class="arrow">→</span>
|
|
<span class="new-value">niebieski</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Fluent CSS</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">wszystkie zmienne primary</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="files-changed">
|
|
<h4>Zmienione pliki:</h4>
|
|
<code>templates/chat.html</code>
|
|
<code>static/css/fluent-nordabiz.css</code>
|
|
</div>
|
|
|
|
<div class="screenshot-container">
|
|
<img src="screenshots/screenshot-3-sprint3.png" alt="Screenshot po Sprint 3 - strona główna">
|
|
<div class="screenshot-label">Po Sprint 3 - strona glowna (commit b680e3f)</div>
|
|
</div>
|
|
<div class="screenshot-container" style="margin-top: 1rem;">
|
|
<img src="screenshots/screenshot-4-chat.png" alt="Screenshot po Sprint 3 - strona chatu">
|
|
<div class="screenshot-label">Po Sprint 3 - strona /chat (commit b680e3f)</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SPRINT 4 -->
|
|
<section class="sprint-section">
|
|
<div class="sprint-header">
|
|
<span class="sprint-badge">SPRINT 4</span>
|
|
<h2 class="sprint-title">Animacje scroll</h2>
|
|
<span class="commit-hash">6e1c46e</span>
|
|
</div>
|
|
|
|
<div class="changes-grid">
|
|
<div class="change-card">
|
|
<h4>IntersectionObserver</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">Nowy plik scroll-animations.js</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>CSS Keyframes</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">fadeIn, fadeInUp, fadeInLeft, fadeInRight, scaleIn</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Event banner</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">data-animate="fadeIn"</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Chat banner</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">data-animate="fadeIn"</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Karty firm</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">data-animate="fadeInUp" + delay stagger</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Reduced motion</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">prefers-reduced-motion wsparcie</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="files-changed">
|
|
<h4>Zmienione pliki:</h4>
|
|
<code>templates/base.html</code>
|
|
<code>templates/index.html</code>
|
|
<code>static/js/scroll-animations.js (NOWY)</code>
|
|
</div>
|
|
|
|
<div class="screenshot-container">
|
|
<img src="screenshots/screenshot-before-sprint4.png" alt="Screenshot przed Sprint 4">
|
|
<div class="screenshot-label">Przed Sprint 4 (commit b680e3f)</div>
|
|
</div>
|
|
<div class="screenshot-container" style="margin-top: 1rem;">
|
|
<img src="screenshots/screenshot-4-sprint4.png" alt="Screenshot po Sprint 4">
|
|
<div class="screenshot-label">Po Sprint 4 (commit 6e1c46e)</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SPRINT 5 -->
|
|
<section class="sprint-section">
|
|
<div class="sprint-header">
|
|
<span class="sprint-badge">SPRINT 5</span>
|
|
<h2 class="sprint-title">Landing page</h2>
|
|
<span class="commit-hash">ede9d09</span>
|
|
</div>
|
|
|
|
<div class="changes-grid">
|
|
<div class="change-card">
|
|
<h4>Hero gradient</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: linear-gradient(90deg, #1e40af, #2563eb);"></span>
|
|
<span class="arrow">→</span>
|
|
<span class="color-preview" style="background: linear-gradient(90deg, #1e3050, #2E4872);"></span>
|
|
<span class="new-value">NordaBiz blue</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Accent color</h4>
|
|
<div class="change-value">
|
|
<span class="color-preview" style="background: #2563eb;"></span>
|
|
<span class="arrow">→</span>
|
|
<span class="color-preview" style="background: #2E4872;"></span>
|
|
<span class="new-value">#2E4872</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Hero section</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">data-animate="fadeIn"</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>Stats section</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">data-animate="fadeInUp"</span>
|
|
</div>
|
|
</div>
|
|
<div class="change-card">
|
|
<h4>CTA section</h4>
|
|
<div class="change-value">
|
|
<span class="new-value">data-animate="fadeInUp"</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="files-changed">
|
|
<h4>Zmienione pliki:</h4>
|
|
<code>templates/landing.html</code>
|
|
</div>
|
|
|
|
<div class="screenshot-container">
|
|
<img src="screenshots/screenshot-before-sprint5.png" alt="Screenshot przed Sprint 5">
|
|
<div class="screenshot-label">Przed Sprint 5 - landing page (commit 6e1c46e)</div>
|
|
</div>
|
|
<div class="screenshot-container" style="margin-top: 1rem;">
|
|
<img src="screenshots/screenshot-5-sprint5.png" alt="Screenshot po Sprint 5">
|
|
<div class="screenshot-label">Po Sprint 5 - landing page (commit ede9d09)</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PODSUMOWANIE -->
|
|
<section class="sprint-section">
|
|
<div class="sprint-header">
|
|
<span class="sprint-badge">PODSUMOWANIE</span>
|
|
<h2 class="sprint-title">Wszystkie zmiany</h2>
|
|
</div>
|
|
|
|
<table class="summary-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Element</th>
|
|
<th>PRZED</th>
|
|
<th>PO</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Czcionka</td>
|
|
<td>Inter</td>
|
|
<td><strong>Poppins</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Kolor primary</td>
|
|
<td><span class="color-preview" style="background: #2563eb;"></span> #2563eb</td>
|
|
<td><span class="color-preview" style="background: #2E4872;"></span> <strong>#2E4872</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tło strony</td>
|
|
<td><span class="color-preview" style="background: #f8fafc;"></span> #f8fafc</td>
|
|
<td><span class="color-preview" style="background: #EDF0F5;"></span> <strong>#EDF0F5</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Border-radius btn</td>
|
|
<td>8px</td>
|
|
<td><strong>12px 4px</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Event banner</td>
|
|
<td><span class="color-preview" style="background: #f59e0b;"></span> #f59e0b</td>
|
|
<td><span class="color-preview" style="background: #2E4872;"></span> <strong>#2E4872</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>NordaGPT</td>
|
|
<td><span class="color-preview" style="background: #7c3aed;"></span> #7c3aed</td>
|
|
<td><span class="color-preview" style="background: #2E4872;"></span> <strong>#2E4872</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Karty firm</td>
|
|
<td>box-shadow</td>
|
|
<td><strong>border</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tagi kategorii</td>
|
|
<td>szare, male</td>
|
|
<td><strong>UPPERCASE, primary</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Footer</td>
|
|
<td><span class="color-preview" style="background: #1e293b;"></span> #1e293b</td>
|
|
<td><span class="color-preview" style="background: #2E4872;"></span> <strong>#2E4872</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Animacje scroll</td>
|
|
<td>brak</td>
|
|
<td><strong>fadeIn + IntersectionObserver</strong></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Landing hero</td>
|
|
<td><span class="color-preview" style="background: linear-gradient(90deg, #1e40af, #2563eb);"></span> stary niebieski</td>
|
|
<td><span class="color-preview" style="background: linear-gradient(90deg, #1e3050, #2E4872);"></span> <strong>NordaBiz blue</strong></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>Dokumentacja wygenerowana automatycznie | NordaBiz UI Redesign | 30.01.2026</p>
|
|
<p style="margin-top: 0.5rem;">
|
|
<a href="https://nordabiznes.pl" target="_blank" style="color: #2E4872;">nordabiznes.pl</a> |
|
|
<a href="https://norda-biznes.info" target="_blank" style="color: #2E4872;">norda-biznes.info</a>
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|