DZIYŃ ŚLŌNSKIJ FANY - 26.07.2026 r.<style type="text/css">/* Kontener główny - izoluje style od reszty portalu */
.fana-container {
max-width: 800px;
margin: 20px auto;
padding: 25px;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
color: #333333;
line-height: 1.6;
}
/* Nagłówek H2 - brak H1 z racji CMS H1 Trap */
.fana-main-title {
color: #002672; /* Miejski granat */
font-size: 1.8rem;
font-weight: 800;
border-bottom: 4px solid #f8ce00; /* Regionalny żółty */
padding-bottom: 12px;
margin-top: 0;
margin-bottom: 20px;
}
.fana-lead-text {
font-size: 1.15rem;
font-weight: bold;
color: #111;
margin-bottom: 15px;
}
/* Karta wydarzenia - kolory regionalne jako ozdobne obramowanie */
.fana-event-card {
background-color: #f8fafc;
border-left: 6px solid #047cc1; /* Regionalny błękit */
border-right: 6px solid #f8ce00; /* Regionalny żółty */
padding: 25px;
border-radius: 8px;
margin: 30px 0;
}
/* Neutralizacja pustych akapitów dodawanych przez CKEditor */
.fana-event-card p:empty {
display: none !important;
}
.fana-event-title {
color: #002672;
font-size: 1.4rem;
font-weight: 700;
margin-top: 0;
margin-bottom: 15px;
}
/* Estetyczne pudełko na czas wydarzenia */
p.fana-time-badge {
display: inline-block;
background-color: #002672;
color: #ffffff;
padding: 6px 16px;
border-radius: 20px;
font-weight: bold;
font-size: 0.95rem;
margin-top: 0 !important;
margin-bottom: 12px !important;
}
/* --- ZAPOWIEDŹ ODLICZANIA (POZA RAMKĄ) --- */
p.fana-countdown-lead {
font-size: 1.05rem;
font-weight: 700;
color: #002672;
text-align: center;
margin-top: 0 !important;
margin-bottom: 8px !important;
}
/* --- SEKCJA ODLICZANIA (RAMKA Z SAMYMI CYFRAMI) --- */
.fana-countdown-wrapper {
margin-top: 0 !important;
margin-bottom: 15px !important;
background-color: #ffffff;
border: 2px dashed #047cc1;
border-radius: 10px;
padding: 12px 10px; /* Zwarte dopasowanie ramki do cyfr */
text-align: center;
}
.fana-countdown-wrapper p {
margin: 0 !important;
padding: 0 !important;
}
.fana-countdown-grid {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
}
.fana-countdown-box {
background-color: #002672;
color: #ffffff;
border-bottom: 3px solid #f8ce00; /* Żółty akcent Śląska */
border-radius: 8px;
padding: 10px 12px;
min-width: 65px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.fana-countdown-number {
font-size: 1.7rem;
font-weight: 800;
line-height: 1;
color: #ffffff;
}
.fana-countdown-label {
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 5px;
color: #f8ce00;
}
.fana-countdown-finished {
display: none;
font-size: 1.2rem;
font-weight: bold;
color: #f20000;
padding: 10px;
}
/* --- POJEDYNCZY PRZYCISK KALENDARZA --- */
.fana-calendar-wrapper {
margin: 15px 0 25px 0;
display: flex;
justify-content: center;
}
.fana-cal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 22px;
background-color: #002672; /* Granat miejski */
color: #ffffff !important;
text-decoration: none !important;
border-radius: 6px;
font-weight: 700;
font-size: 0.95rem;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease-in-out;
}
.fana-cal-btn svg {
width: 20px;
height: 20px;
fill: currentColor;
flex-shrink: 0;
}
.fana-cal-btn:hover,
.fana-cal-btn:focus {
background-color: #f20000; /* Miejska czerwień */
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 5px 12px rgba(242, 0, 0, 0.3);
}
/* Dostępność dla czytników ekranu (WCAG) - zerowanie wysokości bloku */
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
}
/* Lista emoji */
.fana-emoji-list {
list-style: none;
padding-left: 0;
margin: 15px 0;
}
.fana-emoji-list li {
position: relative;
padding-left: 32px;
margin-bottom: 12px;
font-size: 1.05rem;
}
.fana-emoji-list li .fana-emoji {
position: absolute;
left: 0;
top: 2px;
font-size: 1.1rem;
}
/* Link z miejskim hoverem */
.fana-link {
color: #047cc1;
text-decoration: underline;
font-weight: bold;
transition: color 0.2s ease-in-out;
}
.fana-link:hover,
.fana-link:focus {
color: #f20000;
text-decoration: none;
}
/* Plakat */
.fana-poster {
display: block;
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
margin: 30px auto 10px auto;
}
/* --- OPTYMALIZACJA MOBILNA (RWD) --- */
@media (max-width: 600px) {
.fana-container {
padding: 15px 12px;
margin: 10px auto;
}
.fana-event-card {
padding: 18px 12px;
border-left-width: 4px;
border-right-width: 4px;
margin: 20px 0;
}
.fana-event-title {
font-size: 1.2rem;
}
.fana-countdown-wrapper {
padding: 10px 4px;
}
.fana-countdown-grid {
gap: 6px;
}
.fana-countdown-box {
min-width: 52px;
padding: 8px 4px;
}
.fana-countdown-number {
font-size: 1.3rem;
}
.fana-countdown-label {
font-size: 0.6rem;
}
.fana-cal-btn {
width: 100%;
padding: 14px 16px;
}
}
</style>
<div class="fana-container">
<h2 class="fana-main-title">💛💙 Dzisiej Chorzōw zajś łyskŏ sie żōłto-modrymi farbami! 💛💙</h2>
<p class="fana-lead-text">Fajrujymy Dziyń Ślōnskij Fany. Na tã przileżytość winszujymy wszyjskim Pōmiyszkańcōm Chorzowa i cołkigo Ślōnska, coby żōłto-modre farby zŏwdy spōminały ô naszym sztamie, spōlnocie i siyle lokalnych tradycyji. 💛💙</p>
<p>Ôbwieście dzisiej ślōnskõ fanã na swojich domach, balkōnach a ôknach - podźcie pokŏżymy cuzamyn, iże Ślōnsk je bliski naszym sercōm!</p>
<p> </p>
<div class="fana-event-card">
<h3 class="fana-event-title">🎉 A już w niydzielã - 26 lipnia, Szymon Michałek - Prezydent Chorzowa zaprŏszŏ na DZIYŃ ŚLŌNSKIJ FANY na Rynku w Chorzowie!</h3>
<!-- Plakietka z czasem -->
<p class="fana-time-badge">🕒 15:00–20:00</p>
<!-- Zapowiedź odliczania wyciągnięta przed ramkę -->
<p class="fana-countdown-lead">⏳ Startujymy już za:</p>
<!-- RAMKA LICZNIKA (zawiera wyłącznie cyfry) -->
<div class="fana-countdown-wrapper" id="fanaCountdownContainer"><span class="sr-only">Odliczanie do rozpoczęcia wydarzenia: 26 lipca 2026 roku o godzinie 15:00</span>
<div aria-hidden="true" class="fana-countdown-grid" id="fanaCdGrid">
<div class="fana-countdown-box">
<div class="fana-countdown-number" id="fanaDays">00</div>
<div class="fana-countdown-label">Dni</div>
</div>
<!-- / .fana-countdown-box -->
<div class="fana-countdown-box">
<div class="fana-countdown-number" id="fanaHours">00</div>
<div class="fana-countdown-label">Godzin</div>
</div>
<!-- / .fana-countdown-box -->
<div class="fana-countdown-box">
<div class="fana-countdown-number" id="fanaMinutes">00</div>
<div class="fana-countdown-label">Minut</div>
</div>
<!-- / .fana-countdown-box -->
<div class="fana-countdown-box">
<div class="fana-countdown-number" id="fanaSeconds">00</div>
<div class="fana-countdown-label">Sekund</div>
</div>
<!-- / .fana-countdown-box --></div>
<!-- / .fana-countdown-grid -->
<div class="fana-countdown-finished" id="fanaCdFinished" role="status">🎉 Wydarzenie za nami!</div>
<!-- / .fana-countdown-finished --></div>
<!-- / .fana-countdown-wrapper --><!-- JEDEN UNIWERSALNY PRZYCISK KALENDARZA -->
<div class="fana-calendar-wrapper"><a class="fana-cal-btn" href="#" id="fanaSmartCalBtn" rel="noopener noreferrer"><svg aria-hidden="true" fill="currentColor" focusable="false" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2zm-7 5h5v5h-5z"></path></svg> Dodaj do kalendarza </a></div>
<!-- / .fana-calendar-wrapper -->
<p><strong>Czekać bydōm na Wŏs:</strong></p>
<ul class="fana-emoji-list">
<li><span class="fana-emoji">🌭</span> gyszeft z wusztym i inkszymi maszketami,</li>
<li><span class="fana-emoji">🎶</span> blank dobry szpas i kōncerty,</li>
<li><span class="fana-emoji">🎈</span> familijnŏ launa i atrakcyje dlŏ bajtli.</li>
</ul>
<p> </p>
<p><strong>Na binie wystōmpiōm:</strong></p>
<ul class="fana-emoji-list">
<li><span class="fana-emoji">🎤</span> ex Blue Party</li>
<li><span class="fana-emoji">🎤</span> Pan Babcia & Antyki</li>
<li><span class="fana-emoji">🎤</span> Michalina Starosta</li>
</ul>
<p> </p>
<p>Przitrefiynie bydōm kludzić Marcin Janota i Michalina Starosta.</p>
</div>
<!-- / .fana-event-card -->
<p> </p>
<p>📍 <strong>Zabiercie familijõ, kamratōw i przidźcie fajrować spōlnie Dziyń Ślōnskij Fany na chorzowskim Rynku!</strong></p>
<p><strong>Chowcie sie! 💛💙</strong></p>
<img alt="Plakat promujący wydarzenie Dziyń Ślōnskij Fany na Rynku w Chorzowie" class="fana-poster" height="1131" loading="lazy" src="https://chorzow.eu/download/cmVzb3VyY2VzL2ZpbGVzLzk4LzFfNmE1NzM5MWE5NDhlNC5qcGc%3D" width="800" /></div>
<!-- / .fana-container --><script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
// 1. Logika odliczania czasu (ISO 8601)
var targetDate = new Date('2026-07-26T15:00:00').getTime();
var daysEl = document.getElementById('fanaDays');
var hoursEl = document.getElementById('fanaHours');
var minutesEl = document.getElementById('fanaMinutes');
var secondsEl = document.getElementById('fanaSeconds');
var gridEl = document.getElementById('fanaCdGrid');
var finishedEl = document.getElementById('fanaCdFinished');
function padZero(num) {
return String(num).padStart(2, '0');
}
function updateFanaCountdown() {
var now = new Date().getTime();
var distance = targetDate - now;
if (distance <= 0) {
if (typeof fanaInterval !== 'undefined') {
clearInterval(fanaInterval);
}
if (gridEl) gridEl.style.display = 'none';
if (finishedEl) finishedEl.style.display = 'block';
return;
}
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (daysEl) daysEl.textContent = padZero(days);
if (hoursEl) hoursEl.textContent = padZero(hours);
if (minutesEl) minutesEl.textContent = padZero(minutes);
if (secondsEl) secondsEl.textContent = padZero(seconds);
}
// Natychmiastowe pierwsze wywołanie
updateFanaCountdown();
var fanaInterval = setInterval(updateFanaCountdown, 1000);
// 2. Inteligentny Przycisk Kalendarza (Smart Calendar Button)
var eventTitle = "Dziyń Ślōnskij Fany na Rynku w Chorzowie";
var eventDescription = "Szymon Michałek - Prezydent Chorzowa zaprasza na Dziyń Ślōnskij Fany na Rynku w Chorzowie. W programie: koncerty, gastronomia i atrakcje dla dzieci.";
var eventLocation = "Rynek, Chorzów";
var smartBtn = document.getElementById('fanaSmartCalBtn');
if (smartBtn) {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
var isAndroid = /android/i.test(userAgent);
if (isAndroid) {
// Link Google Calendar dla Androida
var googleUrl = "https://calendar.google.com/calendar/render?action=TEMPLATE" +
"&text=" + encodeURIComponent(eventTitle) +
"&dates=20260726T130000Z/20260726T180000Z" +
"&details=" + encodeURIComponent(eventDescription) +
"&location=" + encodeURIComponent(eventLocation);
smartBtn.href = googleUrl;
smartBtn.target = "_blank";
} else {
// Generowanie uniwersalnego pliku .ics ze strefą Europe/Warsaw
var icsData = [
"BEGIN:VCALENDAR",
"VERSION:2.0",
"PRODID:-//Miasto Chorzow//NONSGML Event//PL",
"CALSCALE:GREGORIAN",
"BEGIN:VTIMEZONE",
"TZID:Europe/Warsaw",
"BEGIN:DAYLIGHT",
"TZOFFSETFROM:+0100",
"TZOFFSETTO:+0200",
"TZNAME:CEST",
"DTSTART:19700329T020000",
"RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=-1SU",
"END:DAYLIGHT",
"BEGIN:STANDARD",
"TZOFFSETFROM:+0200",
"TZOFFSETTO:+0100",
"TZNAME:CET",
"DTSTART:19701025T030000",
"RRULE:FREQ=YEARLY;BYMONTH=10;BYDAY=-1SU",
"END:STANDARD",
"END:VTIMEZONE",
"BEGIN:VEVENT",
"SUMMARY:" + eventTitle,
"DESCRIPTION:" + eventDescription,
"LOCATION:" + eventLocation,
"DTSTART;TZID=Europe/Warsaw:20260726T150000",
"DTEND;TZID=Europe/Warsaw:20260726T200000",
"STATUS:CONFIRMED",
"END:VEVENT",
"END:VCALENDAR"
].join("\r\n");
var calendarBlob = new Blob([icsData], { type: 'text/calendar;charset=utf-8' });
var calendarUrl = URL.createObjectURL(calendarBlob);
smartBtn.href = calendarUrl;
smartBtn.setAttribute('download', 'Dziyn_Slonskij_Fany_Chorzow.ics');
}
}
});
</script>2026-07-27 14:20:322026-07-27 14:20:32