maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(pej): use YouTube thumbnails and local infographics
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
Details
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
Details
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
Details
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Details

Browse Source 
YouTube iframes blocked by CSP, pej.pl blocks hotlinking.
Videos now show as clickable thumbnail cards with play button.
Infographics downloaded to static/images/pej/.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-16 21:19:55 +01:00
parent 95a3feaa3f
commit ea2a5e0939
3 changed files with 39 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/pej/elementy-bloku-ej.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
static/images/pej/harmonogram-budowy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

50
templates/pej/index.html
View File

@ -112,16 +112,30 @@
.pej-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); }
@media (max-width: 768px) { .pej-media-grid { grid-template-columns: 1fr; } }
.pej-video-wrap {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
border-radius: var(--radius); border: 1px solid var(--border);
.pej-video-card {
display: block; text-decoration: none; border-radius: var(--radius);
border: 1px solid var(--border); overflow: hidden; transition: var(--transition);
}
.pej-video-wrap iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
.pej-video-card:hover { border-color: #7c3aed; box-shadow: 0 2px 8px rgba(124,58,237,0.1); }
.pej-video-thumb {
position: relative; padding-bottom: 56.25%; background: #000;
}
.pej-video-thumb img {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}
.pej-video-play {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 60px; height: 60px; background: rgba(124,58,237,0.9); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
}
.pej-video-play::after {
content: ''; width: 0; height: 0;
border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent;
margin-left: 4px;
}
.pej-video-title {
font-size: var(--font-size-sm); font-weight: 500; margin-top: var(--spacing-sm);
color: var(--text-primary);
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-sm); font-weight: 500; color: var(--text-primary);
}
.pej-infographic {
border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
@ -228,29 +242,35 @@
<div class="pej-section-title">Multimedia</div>
<div class="pej-media-grid">
<div>
<div class="pej-video-wrap">
<iframe src="https://www.youtube.com/embed/Ne7Nwo3sGSg" allowfullscreen loading="lazy" title="Wirtualny spacer po elektrowni jądrowej"></iframe>
<a href="https://www.youtube.com/watch?v=Ne7Nwo3sGSg" target="_blank" rel="noopener" class="pej-video-card">
<div class="pej-video-thumb">
<img src="https://img.youtube.com/vi/Ne7Nwo3sGSg/hqdefault.jpg" alt="Wirtualny spacer po elektrowni jądrowej" loading="lazy">
<div class="pej-video-play"></div>
</div>
<div class="pej-video-title">Wirtualny spacer po elektrowni jądrowej z perspektywy dozoru</div>
</a>
</div>
<div>
<div class="pej-video-wrap">
<iframe src="https://www.youtube.com/embed/VnNmsntBHsg" allowfullscreen loading="lazy" title="Elektrownia jądrowa Lubiatowo-Kopalino"></iframe>
<a href="https://www.youtube.com/watch?v=VnNmsntBHsg" target="_blank" rel="noopener" class="pej-video-card">
<div class="pej-video-thumb">
<img src="https://img.youtube.com/vi/VnNmsntBHsg/hqdefault.jpg" alt="Elektrownia jądrowa Lubiatowo-Kopalino" loading="lazy">
<div class="pej-video-play"></div>
</div>
<div class="pej-video-title">Elektrownia jądrowa Lubiatowo-Kopalino</div>
</a>
</div>
<div>
<div class="pej-infographic">
<a href="https://pej.pl/wp-content/uploads/2025/06/Elementy-bloku-EJ-PL-1024x669.png" target="_blank" rel="noopener">
<img src="https://pej.pl/wp-content/uploads/2025/06/Elementy-bloku-EJ-PL-1024x669.png" alt="Elementy bloku elektrowni jądrowej" loading="lazy">
<a href="{{ url_for('static', filename='images/pej/elementy-bloku-ej.png') }}" target="_blank" rel="noopener">
<img src="{{ url_for('static', filename='images/pej/elementy-bloku-ej.png') }}" alt="Elementy bloku elektrowni jądrowej" loading="lazy">
</a>
<div class="pej-infographic-caption">Elementy bloku elektrowni jądrowej AP1000</div>
</div>
</div>
<div>
<div class="pej-infographic">
<a href="https://pej.pl/wp-content/uploads/2026/02/harmonogram_PL_18022026.png" target="_blank" rel="noopener">
<img src="https://pej.pl/wp-content/uploads/2026/02/harmonogram_PL_18022026.png" alt="Harmonogram budowy elektrowni jądrowej" loading="lazy">
<a href="{{ url_for('static', filename='images/pej/harmonogram-budowy.png') }}" target="_blank" rel="noopener">
<img src="{{ url_for('static', filename='images/pej/harmonogram-budowy.png') }}" alt="Harmonogram budowy elektrowni jądrowej" loading="lazy">
</a>
<div class="pej-infographic-caption">Harmonogram budowy elektrowni jądrowej (luty 2026)</div>
</div>