Aplikacja Cyfrowy Chorzów<style type="text/css">/* --- KONTENER GŁÓWNY --- */
.app-landing-wrapper {
max-width: 900px;
margin: 0 auto;
font-family: system-ui, -apple-system, sans-serif;
color: #333333;
line-height: 1.6;
}
/* Nagłówek sekcji (zgodność z WCAG - start od H2) */
.app-landing-wrapper h2.app-main-title {
font-size: 24px;
font-weight: 700;
text-align: center;
color: #002672; /* Granat Chorzowa */
margin-top: 0;
margin-bottom: 10px;
}
.app-subtitle {
text-align: center;
font-size: 16px;
color: #555555;
margin-bottom: 25px;
}
/* --- PRZYCISKI POBIERANIA (HERO CTA - AKTYWNE DLA UŻYTKOWNIKA) --- */
.app-download-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 35px;
}
.app-store-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 12px 24px;
background-color: #002672;
color: #ffffff !important;
text-decoration: none !important;
border-radius: 8px;
font-weight: 600;
font-size: 15px;
box-shadow: 0 4px 8px rgba(0, 38, 114, 0.15);
transition: all 0.3s ease;
}
.app-store-btn svg {
width: 24px;
height: 24px;
fill: currentColor;
flex-shrink: 0;
}
.app-store-btn:hover,
.app-store-btn:focus {
background-color: #f20000; /* Czerwień Chorzowa */
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(242, 0, 0, 0.25);
color: #ffffff !important;
}
/* --- SIATKA FUNKCJI APLIKACJI (GRID - KAFELKI INFORMACYJNE, STATYCZNE) --- */
.app-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.app-feature-card {
background-color: #f8f9fa;
border: 1px solid #e2e8f0;
border-radius: 10px;
padding: 20px;
}
/* Wyróżnienie głównej funkcji: Karty Mieszkańca */
.app-feature-card.featured {
background-color: #002672;
color: #ffffff;
border-color: #002672;
grid-column: 1 / -1; /* Rozciągnięcie na pełną szerokość w siatce */
display: flex;
flex-direction: column;
gap: 20px;
}
.app-featured-header {
display: flex;
align-items: center;
gap: 20px;
}
.app-feature-card.featured h3 {
color: #ffffff;
margin-top: 0;
margin-bottom: 5px;
font-size: 20px;
}
.app-feature-card.featured p {
margin: 0;
color: #e0e8ff;
}
.app-feature-card.featured .feature-icon-wrapper {
background-color: #f20000;
color: #ffffff;
}
/* Podgląd zdjęcia karty */
.app-card-image-wrapper {
width: 100%;
text-align: center;
overflow: hidden;
border-radius: 8px;
}
.app-card-image-wrapper img {
max-width: 100%;
max-height: 380px;
height: auto;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
display: block;
margin: 0 auto;
}
/* Pasek z linkiem do uzyskania karty (AKTYWNY DLA UŻYTKOWNIKA) */
.app-karta-info-banner {
background-color: rgba(255, 255, 255, 0.12);
border-left: 4px solid #f20000;
padding: 12px 16px;
border-radius: 4px;
font-size: 14px;
color: #ffffff;
}
.app-karta-info-banner a {
color: #ffffff !important;
font-weight: 700;
text-decoration: underline !important;
transition: opacity 0.2s ease;
}
.app-karta-info-banner a:hover,
.app-karta-info-banner a:focus {
opacity: 0.85;
text-decoration: none !important;
}
/* Kafelki standardowe */
.app-feature-card h3 {
font-size: 17px;
color: #002672;
margin-top: 15px;
margin-bottom: 8px;
}
.app-feature-card p {
font-size: 14px;
color: #555555;
margin: 0;
line-height: 1.5;
}
.feature-icon-wrapper {
width: 48px;
height: 48px;
border-radius: 8px;
background-color: rgba(0, 38, 114, 0.08);
color: #002672;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feature-icon-wrapper svg {
width: 26px;
height: 26px;
fill: currentColor;
}
/* Responsywność dla kafelka wyróżnionego na telefonach */
@media (max-width: 600px) {
.app-featured-header {
flex-direction: column;
text-align: center;
align-items: center;
}
}
</style>
<div class="app-landing-wrapper">
<h2 class="app-main-title">Aplikacja Cyfrowy Chorzów</h2>
<p class="app-subtitle">Wszystkie usługi miejskie, Chorzowska Karta Mieszkańca, aktualności i zniżki w Twoim telefonie.</p>
<!-- Przyciski Pobierania -->
<div class="app-download-buttons"><a class="app-store-btn" href="https://play.google.com/store/apps/details?id=eu.chorzow.coteroz&pcampaignid=web_share" rel="noopener noreferrer" target="_blank"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3.609 1.814L13.792 12 3.61 22.186a2.372 2.372 0 0 1-.61-.137 2.22 2.22 0 0 1-1.222-1.992V3.943c0-.853.473-1.63 1.222-1.992.193-.093.398-.137.609-.137zm11.3 11.3l2.392 2.392-11.89 6.862 9.498-9.254zm0-2.228L5.41 1.632l11.89 6.862-2.391 2.392zm1.888 1.114l3.87 2.235c.828.478.828 1.688 0 2.166l-3.87 2.235-2.2-2.2 2.2-2.436z"></path></svg> Pobierz z Google Play </a> <a class="app-store-btn" href="https://apps.apple.com/pl/app/cyfrowy-chorz%C3%B3w/id1486228139" rel="noopener noreferrer" target="_blank"> <svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.97 6.85c.66-.8 1.11-1.92.99-3.04-.96.04-2.12.64-2.81 1.44-.61.71-1.14 1.85-.99 2.95 1.07.08 2.15-.55 2.81-1.35z"></path></svg> Pobierz z App Store </a></div>
<!-- / .app-download-buttons -->
<p> </p>
<!-- Siatka Funkcji -->
<div class="app-features-grid"><!-- Karta Mieszkańca (Wyróżniona) -->
<div class="app-feature-card featured">
<div class="app-featured-header">
<div class="feature-icon-wrapper"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2zM6 15h3v2H6zm5 0h8v2h-8z"></path></svg></div>
<div>
<h3>Chorzowska Karta Mieszkańca</h3>
<p>Główna funkcja aplikacji. Zyskaj cyfrowy dostęp do swojej karty mieszkańca bezpośrednio w telefonie bez konieczności noszenia plastikowej wersji.</p>
</div>
</div>
<!-- / .app-featured-header --><!-- Zdjęcie zaprezentowania karty -->
<div class="app-card-image-wrapper"><img alt="Dłoń trzymająca fizyczną Chorzowską Kartę Mieszkańca" src="https://chorzow.eu/download/cmVzb3VyY2VzL2ZpbGVzLzk4LzIwMjUwNjA5LURTQzAwMzk5LW1uaWVqc3p5XzZhNWU2ZjMxNzBjNTguanBn" /></div>
<!-- / .app-card-image-wrapper --><!-- Baner informacyjny z linkiem -->
<div class="app-karta-info-banner">Jak uzyskać Chorzowską Kartę Mieszkańca? <a href="https://mieszkamwchorzowie.pl/uzyskaj-karte/" rel="noopener noreferrer" target="_blank">Przeczytaj więcej tutaj</a></div>
<!-- / .app-karta-info-banner --></div>
<!-- / .app-feature-card.featured --><!-- Kupony Zniżkowe -->
<div class="app-feature-card">
<div class="feature-icon-wrapper"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"></path></svg></div>
<h3>Kupony zniżkowe</h3>
<p>Korzystaj ze specjalnych rabatów i ofert przygotowanych przez partnerów programu dla mieszkańców Chorzowa.</p>
</div>
<!-- / .app-feature-card --><!-- Powiadomienia PUSH -->
<div class="app-feature-card">
<div class="feature-icon-wrapper"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path></svg></div>
<h3>Powiadomienia PUSH</h3>
<p>Otrzymuj natychmiastowe alerty o najważniejszych wydarzeniach, utrudnieniach i sprawach miejskich.</p>
</div>
<!-- / .app-feature-card --><!-- Kalendarz Wydarzeń -->
<div class="app-feature-card">
<div class="feature-icon-wrapper"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"></path></svg></div>
<h3>Kalendarz wydarzeń</h3>
<p>Śledź na bieżąco imprezy kulturalne, sportowe i rekreacyjne odbywające się na terenie miasta.</p>
</div>
<!-- / .app-feature-card --><!-- Aktualności -->
<div class="app-feature-card">
<div class="feature-icon-wrapper"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 5H7V7h10v1zm0 3H7v-1h10v1zm0 3H7v-1h10v1z"></path></svg></div>
<h3>Aktualności</h3>
<p>Dostęp do najświeższych wiadomości ze wszystkich dzielnic miasta bezpośrednio z oficjalnego źródła.</p>
</div>
<!-- / .app-feature-card --><!-- Dostęp do wydawnictw -->
<div class="app-feature-card">
<div class="feature-icon-wrapper"><svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H8V4h12v12z"></path></svg></div>
<h3>Wydawnictwa miejskie</h3>
<p>Przeglądaj oficjalne gazetki miejskie, informatory oraz publikacje w formie cyfrowej.</p>
</div>
<!-- / .app-feature-card --></div>
<!-- / .app-features-grid --></div>
<!-- / .app-landing-wrapper -->2026-07-20 21:17:022026-07-20 21:17:02