1<!DOCTYPE html> 2<html lang="pl"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 7 <title>AutoZen â deska rozdzielcza i nawigacja samochodowa na Androida</title> 8 9 <!-- Primary SEO Meta Tags --> 10 <meta name="description" content="ZmieÅ telefon z Androidem w inteligentnÄ deskÄ rozdzielczÄ : nawigacja GPS zakrÄt po zakrÄcie, ostrzeżenia o fotoradarach, muzyka, poÅÄ czenia i asystent gÅosowy AI â bez użycia rÄ k. Za darmo, ponad 1 mln pobraÅ."> 11 <meta name="keywords" content="nawigacja samochodowa, alternatywa android auto, launcher samochodowy, nawigacja gps, deska rozdzielcza, ostrzeżenia o fotoradarach, ruch na żywo, tryb gÅoÅnomówiÄ cy"> 12 <meta name="author" content="Zenthek"> 13 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> 14 15 <!-- Canonical URL --> 16 <link rel="canonical" href="https://autozenapp.com/pl/"> 17 18 <!-- Hreflang for International SEO --> 19 <link rel="alternate" hreflang="en" href="https://autozenapp.com/"> 20 <link rel="alternate" hreflang="es" href="https://autozenapp.com/es/"> 21 <link rel="alternate" hreflang="de" href="https://autozenapp.com/de/"> 22 <link rel="alternate" hreflang="pl" href="https://autozenapp.com/pl/"> 23 <link rel="alternate" hreflang="x-default" href="https://autozenapp.com/"> 24 25 <!-- Open Graph --> 26 <meta property="og:type" content="website"> 27 <meta property="og:title" content="AutoZen â deska rozdzielcza i nawigacja samochodowa na Androida"> 28 <meta property="og:description" content="Zaawansowana nawigacja zakrÄt po zakrÄcie, ostrzeżenia o fotoradarach, muzyka, poÅÄ czenia i asystent gÅosowy AI. Twój towarzysz jazdy bez użycia rÄ k â ponad 1 mln pobraÅ."> 29 <meta property="og:locale" content="pl_PL"> 30 <meta property="og:url" content="https://autozenapp.com/pl/"> 31 <meta property="og:site_name" content="AutoZen"> 32 <meta property="og:image" content="https://autozenapp.com/assets/og-image.jpg"> 33 <meta property="og:image:secure_url" content="https://autozenapp.com/assets/og-image.jpg"> 34 <meta property="og:image:width" content="1200"> 35 <meta property="og:image:height" content="630"> 36 <meta property="og:image:type" content="image/jpeg"> 37 <meta property="og:image:alt" content="Deska rozdzielcza AutoZen z prÄdkoÅciomierzem, pogodÄ , muzykÄ i nawigacjÄ "> 38 39 <!-- App-specific Open Graph --> 40 <meta property="al:android:package" content="com.zenthek.autozen"> 41 <meta property="al:android:url" content="autozen://app"> 42 <meta property="al:android:app_name" content="AutoZen"> 43 44 <!-- Twitter Card --> 45 <meta name="twitter:card" content="summary_large_image"> 46 <meta name="twitter:site" content="@autozen_app"> 47 <meta name="twitter:creator" content="@autozen_app"> 48 <meta name="twitter:title" content="AutoZen â deska rozdzielcza i nawigacja samochodowa na Androida"> 49 <meta name="twitter:description" content="Zaawansowana nawigacja zakrÄt po zakrÄcie, ostrzeżenia o fotoradarach, muzyka, poÅÄ czenia i asystent gÅosowy AI â bez użycia rÄ k. Ponad 1 mln pobraÅ."> 50 <meta name="twitter:image" content="https://autozenapp.com/assets/og-image.jpg"> 51 <meta name="twitter:image:alt" content="Deska rozdzielcza AutoZen z prÄdkoÅciomierzem, pogodÄ , muzykÄ i nawigacjÄ "> 52 <meta name="twitter:app:name:googleplay" content="AutoZen"> 53 <meta name="twitter:app:id:googleplay" content="com.zenthek.autozen"> 54 <meta name="twitter:app:url:googleplay" content="https://play.google.com/store/apps/details?id=com.zenthek.autozen"> 55 56 <!-- Verification --> 57 <meta name="yandex-verification" content="71ab4e7ce591d010"> 58 <meta name="google-play-app" content="app-id=com.zenthek.autozen"> 59 60 <!-- Theme --> 61 <meta name="theme-color" content="#06080f"> 62 63 <!-- Favicons and App Icons --> 64 <link rel="icon" href="/assets/favicon.png" type="image/png"> 65 <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"> 66 <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png"> 67 <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png"> 68 <link rel="manifest" href="/manifest.json"> 69 70 <!-- Structured Data --> 71
71<script type="application/ld+json"> 72 { 73 "@context": "https://schema.org", 74 "@type": "MobileApplication", 75 "name": "AutoZen â Car Dashboard & Launcher", 76 "alternateName": "AutoZen", 77 "description": "Deska rozdzielcza, nawigacja i launcher do samochodu. Nawigacja GPS zakrÄt po zakrÄcie, ruch na żywo, ostrzeżenia o fotoradarach, muzyka, poÅÄ czenia, wiadomoÅci i asystent gÅosowy AI â bez użycia rÄ k.", 78 "url": "https://autozenapp.com/", 79 "applicationCategory": "NavigationApplication", 80 "operatingSystem": "Android", 81 "contentRating": "PEGI 3", 82 "offers": { 83 "@type": "Offer", 84 "price": "0", 85 "priceCurrency": "USD" 86 }, 87 "downloadUrl": "https://play.google.com/store/apps/details?id=com.zenthek.autozen", 88 "installUrl": "https://play.google.com/store/apps/details?id=com.zenthek.autozen", 89 "screenshot": [ 90 "https://autozenapp.com/assets/ps/card-01.webp", 91 "https://autozenapp.com/assets/ps/card-02.webp", 92 "https://autozenapp.com/assets/ps/showcase-2000.webp", 93 "https://autozenapp.com/assets/ps/search-map.webp" 94 ], 95 "aggregateRating": { 96 "@type": "AggregateRating", 97 "ratingValue": "4.1", 98 "ratingCount": "5892", 99 "bestRating": "5", 100 "worstRating": "1" 101 }, 102 "author": { 103 "@type": "Organization", 104 "name": "Zenthek", 105 "url": "https://autozenapp.com/" 106 }, 107 "publisher": { 108 "@type": "Organization", 109 "name": "Zenthek", 110 "logo": { 111 "@type": "ImageObject", 112 "url": "https://autozenapp.com/assets/logo-c.svg" 113 } 114 }, 115 "featureList": [ 116 "Nawigacja zakrÄt po zakrÄcie", 117 "Ruch drogowy na żywo", 118 "Ostrzeżenia o fotoradarach", 119 "Asystent gÅosowy AI", 120 "Integracja z muzykÄ ", 121 "PoÅÄ czenia bez użycia rÄ k", 122 "Odczytywanie i gÅosowe odpowiadanie na wiadomoÅci", 123 "Informacje o pogodzie", 124 "Tryb launchera z widżetami", 125 "Podzielony ekran" 126 ], 127 "sameAs": [ 128 "https://www.instagram.com/autozen_app/", 129 "https://www.youtube.com/@autozenApp", 130 "https://x.com/autozen_app", 131 "https://play.google.com/store/apps/details?id=com.zenthek.autozen" 132 ] 133 } 134 </script>
134 135
135<script type="application/ld+json"> 136 { 137 "@context": "https://schema.org", 138 "@type": "VideoObject", 139 "name": "Prezentacja aplikacji AutoZen", 140 "description": "Zobacz AutoZen w akcji: zaawansowane trasy, dokÅadne czasy przejazdu i intuicyjne wskazówki zakrÄt po zakrÄcie.", 141 "thumbnailUrl": "https://autozenapp.com/assets/preview-web.png", 142 "uploadDate": "2024-01-15", 143 "contentUrl": "https://autozenapp.com/assets/video.mp4" 144 } 145 </script>
145 146 147 <!-- Performance --> 148 <link rel="preconnect" href="https://fonts.googleapis.com"> 149 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 150 <link rel="dns-prefetch" href="//play.google.com"> 151 <link rel="preload" as="image" href="/assets/ps/card-01.webp"> 152 153 <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'"> 154 <noscript><link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"></noscript> 155 156 <style> 157 :root { 158 --bg: #06080f; 159 --bg-2: #0a0e1a; 160 --panel: #0d1322; 161 --panel-2: #111a30; 162 --line: rgba(146, 163, 205, .14); 163 --line-strong: rgba(146, 163, 205, .26); 164 --text: #eef2fb; 165 --muted: #98a5c1; 166 --accent: #4f7df9; 167 --accent-2: #38c6ff; 168 --violet: #7c6bff; 169 --grad: linear-gradient(92deg, #6b9aff 0%, #38c6ff 55%, #8f7bff 100%); 170 --radius: 18px; 171 --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif; 172 --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; 173 --header-h: 72px; 174 } 175 176 * { margin: 0; padding: 0; box-sizing: border-box; } 177 178 html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); } 179 180 body { 181 background: var(--bg); 182 color: var(--text); 183 font-family: var(--font-body); 184 font-size: 16px; 185 line-height: 1.6; 186 -webkit-font-smoothing: antialiased; 187 overflow-x: hidden; 188 } 189 190 img { max-width: 100%; height: auto; display: block; } 191 a { color: inherit; text-decoration: none; } 192 button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } 193 194 ::selection { background: rgba(79, 125, 249, .45); } 195 196 .sr-only { 197 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; 198 overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; 199 } 200 201 .skip-link { 202 position: fixed; top: -60px; left: 16px; z-index: 200; 203 background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 10px; 204 transition: top .2s; 205 } 206 .skip-link:focus { top: 12px; } 207 208 .wrap { width: min(1180px, 92%); margin-inline: auto; } 209 210 /* ---------- Ambient background ---------- */ 211 .ambient { 212 position: fixed; inset: 0; z-index: -2; pointer-events: none; 213 background: 214 radial-gradient(52% 44% at 82% -6%, rgba(79, 125, 249, .28) 0%, transparent 62%), 215 radial-gradient(44% 38% at 4% 16%, rgba(124, 107, 255, .16) 0%, transparent 60%), 216 radial-gradient(36% 30% at 68% 68%, rgba(56, 198, 255, .07) 0%, transparent 60%), 217 var(--bg); 218 } 219 .ambient::after { 220 content: ""; position: absolute; inset: 0; 221 background-image: 222 linear-gradient(rgba(148, 163, 205, .05) 1px, transparent 1px), 223 linear-gradient(90deg, rgba(148, 163, 205, .05) 1px, transparent 1px); 224 background-size: 56px 56px; 225 mask-image: radial-gradient(60% 46% at 50% 6%, rgba(0,0,0,.9), transparent 78%); 226 -webkit-mask-image: radial-gradient(60% 46% at 50% 6%, rgba(0,0,0,.9), transparent 78%); 227 } 228 229 /* ---------- Header ---------- */ 230 .site-header { 231 position: fixed; top: 0; left: 0; right: 0; z-index: 100; 232 height: var(--header-h); 233 display: flex; align-items: center; 234 transition: background .3s, border-color .3s, backdrop-filter .3s; 235 border-bottom: 1px solid transparent; 236 } 237 .site-header.scrolled { 238 background: rgba(7, 10, 18, .78); 239 -webkit-backdrop-filter: saturate(140%) blur(14px); 240 backdrop-filter: saturate(140%) blur(14px); 241 border-bottom-color: var(--line); 242 } 243 .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } 244 245 .brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: .2px; } 246 .brand img { width: 38px; height: 38px; } 247 248 .main-nav ul { display: flex; align-items: center; gap: 6px; list-style: none; } 249 .main-nav a { 250 display: block; padding: 9px 15px; border-radius: 10px; 251 font-size: 14.5px; font-weight: 500; color: var(--muted); 252 transition: color .2s, background .2s; 253 } 254 .main-nav a:hover, .main-nav a:focus-visible { color: var(--text); background: rgba(148, 163, 205, .1); } 255 256 .header-cta { 257 display: inline-flex; align-items: center; gap: 8px; 258 padding: 10px 18px; border-radius: 12px; 259 background: var(--accent); color: #fff; font-weight: 600; font-size: 14.5px; 260 box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 8px 24px rgba(79,125,249,.35); 261 transition: transform .2s, box-shadow .2s, background .2s; 262 } 263 .header-cta:hover { background: #618cff; transform: translateY(-1px); } 264 .header-cta svg { width: 15px; height: 15px; } 265 266 .lang-switch { 267 display: flex; align-items: center; gap: 2px; 268 border: 1px solid var(--line); border-radius: 999px; padding: 3px; 269 background: rgba(13, 19, 34, .5); 270 } 271 .lang-switch a { 272 padding: 5px 10px; border-radius: 999px; 273 font-size: 12.5px; font-weight: 600; letter-spacing: .4px; 274 color: var(--muted); transition: color .2s, background .2s; 275 } 276 .lang-switch a:hover { color: var(--text); } 277 .lang-switch a.active { background: rgba(79, 125, 249, .3); color: #fff; } 278 .main-nav .lang-switch { display: none; } 279 280 .nav-toggle { display: none; width: 44px; height: 44px; border-radius: 10px; align-items: center; justify-content: center; } 281 .nav-toggle:hover { background: rgba(148,163,205,.12); } 282 .nav-toggle svg { width: 26px;
282 height: 26px; } 283 .nav-close { display: none; } 284 285 /* ---------- Hero ---------- */ 286 .hero { padding: calc(var(--header-h) + 64px) 0 40px; position: relative; } 287 .hero-grid { 288 display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); 289 gap: 48px; align-items: center; 290 } 291 292 .rating-chip { 293 display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; 294 padding: 7px 14px; border-radius: 999px; 295 border: 1px solid var(--line-strong); 296 background: rgba(15, 22, 40, .6); 297 font-size: 13px; font-weight: 500; color: var(--muted); 298 margin-bottom: 26px; 299 } 300 .rating-chip .star { color: #ffc83d; } 301 .rating-chip b { color: var(--text); font-weight: 600; } 302 .rating-chip .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); } 303 304 h1 { 305 font-family: var(--font-display); 306 font-size: clamp(38px, 5.2vw, 62px); 307 line-height: 1.06; letter-spacing: -1.2px; font-weight: 700; 308 margin-bottom: 22px; text-wrap: balance; 309 } 310 h1 .grad { 311 background: var(--grad); 312 -webkit-background-clip: text; background-clip: text; 313 -webkit-text-fill-color: transparent; color: transparent; 314 } 315 316 .hero-sub { font-size: clamp(16px, 1.6vw, 18.5px); color: var(--muted); max-width: 54ch; margin-bottom: 34px; } 317 318 .hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } 319 320 .btn-play { 321 display: inline-flex; align-items: center; gap: 13px; 322 padding: 13px 24px 13px 18px; border-radius: 14px; 323 background: #fff; color: #0b0e17; 324 box-shadow: 0 10px 34px rgba(107, 154, 255, .3); 325 transition: transform .2s, box-shadow .2s; 326 } 327 .btn-play:hover { transform: translateY(-2px); box-shadow: 0 16px 44px rgba(107, 154, 255, .42); } 328 .btn-play img { width: 30px; height: 32px; } 329 .btn-play .txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; } 330 .btn-play .txt small { font-size: 11px; font-weight: 600; letter-spacing: .8px; opacity: .65; text-transform: uppercase; } 331 .btn-play .txt strong { font-size: 18px; font-weight: 700; font-family: var(--font-display); } 332 333 .btn-ghost { 334 display: inline-flex; align-items: center; gap: 10px; 335 padding: 14px 22px; border-radius: 14px; 336 border: 1px solid var(--line-strong); 337 background: rgba(15, 22, 40, .5); 338 font-weight: 600; font-size: 15px; 339 transition: border-color .2s, background .2s, transform .2s; 340 } 341 .btn-ghost:hover { border-color: rgba(146,163,205,.5); background: rgba(24, 33, 58, .7); transform: translateY(-2px); } 342 .btn-ghost svg { width: 17px; height: 17px; color: var(--accent-2); } 343 344 /* ---------- Stacked-card carousel ---------- */ 345 .hero-copy { position: relative; z-index: 6; } 346 .hero-carousel { position: relative; } 347 .carousel-stage { 348 position: relative; height: clamp(420px, 46vw, 560px); 349 display: flex; align-items: center; justify-content: center; 350 perspective: 1300px; 351 touch-action: pan-y; 352 mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); 353 -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); 354 } 355 .hero-card { 356 position: absolute; 357 width: clamp(210px, 22vw, 280px); 358 aspect-ratio: 720 / 1281; 359 border-radius: 22px; overflow: hidden; 360 border: 1px solid rgba(255, 255, 255, .14); 361 background: var(--panel); 362 box-shadow: 0 24px 70px rgba(3, 6, 14, .6); 363 transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .6s, filter .6s, box-shadow .6s; 364 will-change: transform; 365 padding: 0; 366 } 367 .hero-card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } 368 .hero-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; } 369 370 .hero-card[data-pos="0"] { 371 transform: translateX(0) scale(1);
371 z-index: 5; opacity: 1; cursor: default; 372 box-shadow: 0 10px 30px rgba(3,6,14,.5), 0 34px 90px rgba(79, 125, 249, .28); 373 } 374 .hero-card[data-pos="1"] { transform: translateX(58%) rotateY(-9deg) scale(.86); z-index: 4; opacity: .85; filter: brightness(.62); } 375 .hero-card[data-pos="-1"] { transform: translateX(-58%) rotateY(9deg) scale(.86); z-index: 4; opacity: .85; filter: brightness(.62); } 376 .hero-card[data-pos="2"] { transform: translateX(96%) rotateY(-13deg) scale(.72); z-index: 3; opacity: .4; filter: brightness(.4); } 377 .hero-card[data-pos="-2"] { transform: translateX(-96%) rotateY(13deg) scale(.72); z-index: 3; opacity: .4; filter: brightness(.4); } 378 379 .carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; } 380 .car-btn { 381 width: 44px; height: 44px; border-radius: 50%; 382 border: 1px solid var(--line-strong); 383 background: rgba(15, 22, 40, .6); 384 display: inline-flex; align-items: center; justify-content: center; 385 transition: background .2s, border-color .2s, transform .2s; 386 } 387 .car-btn:hover { background: rgba(31, 44, 78, .8); border-color: rgba(146,163,205,.5); transform: translateY(-1px); } 388 .car-btn svg { width: 18px; height: 18px; } 389 390 .carousel-dots { display: flex; gap: 8px; } 391 .carousel-dots button { 392 width: 8px; height: 8px; border-radius: 999px; padding: 0; 393 background: rgba(148, 163, 205, .3); 394 transition: background .25s, width .25s; 395 } 396 .carousel-dots button[aria-current="true"] { width: 24px; background: var(--accent-2); } 397 398 /* ---------- Showcase band ---------- */ 399 .showcase { padding: 72px 0 30px; } 400 .showcase-frame { 401 position: relative; border-radius: 26px; overflow: hidden; 402 border: 1px solid rgba(255, 255, 255, .12); 403 background: #05070d; 404 box-shadow: 0 40px 120px rgba(3, 6, 14, .7), 0 0 90px rgba(79, 125, 249, .13); 405 } 406 .showcase-frame::before { 407 content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; 408 background: linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 14%); 409 } 410 .showcase-frame img { width: 100%; } 411 .showcase-caption { text-align: center; color: var(--muted); font-size: 14.5px; margin-top: 18px; } 412 .showcase-caption b { color: var(--text); font-weight: 600; } 413 414 /* ---------- Section scaffolding ---------- */ 415 section { position: relative; } 416 .section-head { text-align: center; max-width: 760px; margin: 0 auto 64px; } 417 .kicker { 418 display: inline-flex; align-items: center; gap: 8px; 419 font-size: 12.5px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; 420 color: var(--accent-2); margin-bottom: 16px; 421 } 422 .kicker::before { content: ""; width: 22px; height: 2px; background: var(--grad); border-radius: 2px; } 423 .kicker.center::before { display: none; } 424 h2 { 425 font-family: var(--font-display); 426 font-size: clamp(28px, 3.6vw, 42px); 427 line-height: 1.12; letter-spacing: -.8px; font-weight: 700; 428 text-wrap: balance; 429 } 430 .section-head p { color: var(--muted); margin-top: 18px; font-size: 16.5px; } 431 432 /* ---------- Discover rows ---------- */ 433 .discover { padding: 90px 0 30px; } 434 .feature-row { 435 display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 76px); 436 align-items: center; padding: 46px 0; 437 } 438 .feature-row .txt h2 { font-size: clamp(24px, 2.7vw, 33px); margin-bottom: 16px; } 439 .feature-row .txt h2 strong { 440 background: var(--grad); 441 -webkit-background-clip: text; background-clip: text; 442 -webkit-text-fill-color: transparent; color: transparent; 443 } 444 .feature-row .txt p { color: var(--muted); max-width: 50ch; } 445 .feature-icon { 446 width: 52px; height: 52px; border-radius: 14px; 447 display: flex; align-items: center; justify-content: center; 448 background: linear-gradient(145deg, rgba(79,125,249,.2), rgba(56,198,255,.08)); 449 border: 1px solid rgba(79, 125, 249, .3); 450 margin-bottom: 20px; 451 } 452 .feature-icon img { width: 28px; height: 28px; } 453 454 .device-card { 455 border-radius: 22px; overflow: hidden; 456 border: 1px solid var(--line); 457 background: linear-gradient(160deg, var(--panel-2), var(--panel)); 458 padding: 14px; 459 box-shadow: 0 30px 80px rgba(3, 6, 14, .55); 460 } 461 .device-card img { border-radius: 12px; width: 100%; } 462 .feature-row:nth-child(even) .txt { order: 1; } 463 .feature-row:nth-child(even) .vis { order: 0; } 464 465 /* ---------- Features tabs ---------- */ 466 .features { padding: 100px 0 40px; } 467 .tabs-bar { 468 display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; 469 margin-bottom: 40px; 470 } 471 .tab-btn { 472 display: inline-flex; align-items: center; gap: 9px; 473 padding: 11px 19px; border-radius: 999px; 474 border: 1px solid var(--line); 475 background: rgba(13, 19, 34, .6); 476 color: var(--muted); font-weight: 600; font-size: 14px; 477 transition: all .25s; 478 } 479 .tab-btn svg { width: 17px; height: 17px; } 480 .tab-btn:hover { color: var(--text); border-color: var(--line-strong); } 481 .tab-btn[aria-selected="true"] { 482 color: #fff; border-color: transparent; 483 background: linear-gradient(120deg, #4f7df9, #3d6cf0); 484 box-shadow: 0 10px 30px rgba(79, 125, 249, .35); 485 } 486 487 .tab-panel { 488 display: none; 489 grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); 490 gap: clamp(32px, 4.5vw, 64px); align-items: center; 491 border: 1px solid var(--line); 492 border-radius: 26px; 493 background: linear-gradient(165deg, rgba(17, 26, 48, .75), rgba(10, 14, 26, .9)); 494 padding: clamp(26px, 4vw, 52px); 495 } 496 .tab-panel.active { display: grid; animation: panelIn .5s cubic-bezier(.22,.61,.36,1); } 497 @keyframes panelIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } 498 499 .tab-panel figure {
500 display: flex; align-items: center; justify-content: center; 501 max-height: 520px; 502 } 503 .tab-panel figure img { 504 max-height: 500px; width: auto; max-width: 100%; 505 border-radius: 16px; 506 box-shadow: 0 26px 70px rgba(3, 6, 14, .6); 507 } 508 .tab-panel h3 { 509 font-family: var(--font-display); 510 font-size: clamp(22px, 2.4vw, 30px); line-height: 1.18; 511 letter-spacing: -.5px; margin-bottom: 14px; text-wrap: balance; 512 } 513 .tab-panel .panel-txt p { color: var(--muted); max-width: 48ch; } 514 515 /* ---------- CTA band ---------- */ 516 .cta { padding: 110px 0; } 517 .cta-band { 518 position: relative; overflow: hidden; 519 border-radius: 30px; text-align: center; 520 padding: clamp(56px, 7vw, 88px) 24px; 521 background: 522 radial-gradient(70% 120% at 50% -20%, rgba(56, 198, 255, .35) 0%, transparent 60%), 523 radial-gradient(90% 150% at 80% 120%, rgba(124, 107, 255, .4) 0%, transparent 55%), 524 linear-gradient(140deg, #16255c 0%, #101a3f 55%, #0c1128 100%); 525 border: 1px solid rgba(120, 150, 255, .3); 526 } 527 .cta-band::before { 528 content: ""; position: absolute; inset: 0; pointer-events: none; 529 background-image: 530 linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), 531 linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); 532 background-size: 44px 44px; 533 mask-image: radial-gradient(70% 90% at 50% 0%, rgba(0,0,0,.8), transparent 80%); 534 -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, rgba(0,0,0,.8), transparent 80%); 535 } 536 .cta-band h2 { margin-bottom: 16px; } 537 .cta-band p { color: rgba(226, 233, 250, .78); max-width: 56ch; margin: 0 auto 34px; } 538 .cta-band .btn-play { box-shadow: 0 14px 44px rgba(4, 8, 20, .5); } 539 .cta-rating { margin-top: 22px; font-size: 13.5px; color: rgba(226, 233, 250, .6); } 540 .cta-rating .star { color: #ffc83d; } 541 542 /* ---------- Footer ---------- */ 543 .site-footer { border-top: 1px solid var(--line); padding: 44px 0 52px; background: rgba(6, 9, 16, .8); } 544 .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } 545 .footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 18px; } 546 .footer-brand img { width: 30px; height: 30px; } 547 .footer-links { display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--muted); } 548 .footer-links a:hover { color: var(--text); } 549 .footer-social { display: flex; align-items: center; gap: 8px; } 550 .footer-social a { 551 width: 40px; height: 40px; border-radius: 11px; 552 display: inline-flex; align-items: center; justify-content: center; 553 border: 1px solid var(--line); color: var(--muted); 554 transition: all .2s; 555 } 556 .footer-social a:hover { color: var(--text); border-color: var(--line-strong); background: rgba(148,163,205,.08); transform: translateY(-2px); } 557 .footer-social svg { width: 18px; height: 18px; } 558 .footer-copy { width: 100%; margin-top: 10px; font-size: 13px; color: rgba(152, 165, 193, .55); } 559 560 /* ---------- Video modal ---------- */ 561 dialog.video-modal { 562 border: 1px solid var(--line-strong); border-radius: 20px; padding: 0; 563 background: #05070d; color: var(--text); 564 width: min(960px, 94vw); 565 box-shadow: 0 50px 140px rgba(0, 0, 0, .8); 566 } 567 dialog.video-modal::backdrop { background: rgba(3, 5, 10, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } 568 .video-shell { position: relative; } 569 .video-shell video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 20px; } 570 .video-close { 571 position: absolute; top: -14px; right: -14px; z-index: 2; 572 width: 40px; height: 40px; border-radius: 50%; 573 background: #fff; color: #0b0e17; 574 display: flex; align-items: center; justify-content: center; 575 box-shadow: 0 8px 24px rgba(0,0,0,.5); 576 } 577 .video-close svg { width: 16px; height: 16px; } 578 579 /* ---------- Reveal animations ---------- */ 580 .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); } 581 .reveal.in { opacity: 1; transform: none; } 582 583 @media (prefers-reduced-motion: reduce) { 584 html { scroll-behavior: auto; } 585 *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } 586 .reveal { opacity: 1; transform: none; } 587 } 588 589 /* ---------- Responsive ---------- */ 590 @media (max-width: 1024px) { 591 .hero-grid { grid-template-columns: 1fr; gap: 26px; } 592 .hero { text-align: center; padding-top: calc(var(--header-h) + 44px); } 593 .hero-sub { margin-inline: auto; } 594 .hero-ctas { justify-content: center; } 595 .carousel-stage { height: clamp(400px, 62vw, 520px); } 596 .hero-card { width: clamp(190px, 26vw, 250px); } 597 .feature-row { grid-template-columns: 1fr; gap: 30px; padding: 36px 0; } 598 .feature-row:nth-child(even) .vis { order: 1; } 599 .feature-row .txt { text-align: center; } 600 .feature-row .txt p { margin-inline: auto; } 601 .feature-icon { margin-inline: auto; } 602 .tab-panel { grid-template-columns: 1fr; text-align: center; } 603 .tab-panel .panel-txt p { margin-inline: auto; } 604 .tab-panel figure img { max-height: 420px; } 605 } 606 607 @media (max-width: 760px) { 608 .main-nav { 609 position: fixed; inset: 0; z-index: 150; 610 background: rgba(4, 6, 12, .99); 611 -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); 612 display: flex; align-items: center; justify-content: center; 613 opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; 614 } 615 .main-nav.open { opacity: 1; visibility: visible; } 616 .main-nav ul { flex-direction: column; gap: 10px; text-align: center; } 617 .main-nav a { font-size: 22px; font-family: var(--font-display); font-weight: 600; color: var(--text); padding: 12px 26px; } 618 .nav-close { 619 display: flex; position: absolute; top: 18px; right: 18px; 620 width: 44px; height: 44px; border-radius: 12px; 621 align-items: center; justify-content: center; 622 border: 1px solid var(--line-strong); 623 }
624 .nav-close svg { width: 20px; height: 20px; } 625 .nav-toggle { display: inline-flex; } 626 .header-cta { display: none; } 627 .header-lang { display: none; } 628 .main-nav .lang-switch { 629 display: flex; position: absolute; bottom: 44px; left: 50%; 630 transform: translateX(-50%); 631 } 632 .main-nav .lang-switch a { font-size: 14px; padding: 7px 14px; } 633 .hero-card { width: clamp(180px, 52vw, 230px); } 634 .hero-card[data-pos="1"], .hero-card[data-pos="-1"] { opacity: .55; } 635 .hero-card[data-pos="2"], .hero-card[data-pos="-2"] { opacity: 0; pointer-events: none; } 636 .showcase { padding-top: 46px; } 637 .showcase-frame { border-radius: 16px; } 638 .cta { padding: 70px 0; } 639 .footer-inner { flex-direction: column; text-align: center; } 640 .footer-copy { margin-top: 4px; } 641 } 642 </style> 643</head> 644<body> 645 <a class="skip-link" href="#home">Przejdź do treÅci</a> 646 <div class="ambient" aria-hidden="true"></div> 647 648 <header class="site-header" id="siteHeader"> 649 <div class="wrap header-inner"> 650 <a class="brand" href="#home" aria-label="Strona gÅówna AutoZen"> 651 <img src="/assets/logo-c.svg" alt="" width="38" height="38"> 652 <span>AutoZen</span> 653 </a> 654 655 <nav class="main-nav" id="mainNav" aria-label="Nawigacja gÅówna"> 656 <ul> 657 <li><a href="#home" class="nav-link">Start</a></li> 658 <li><a href="#discover" class="nav-link">Odkrywaj</a></li> 659 <li><a href="#features" class="nav-link">Funkcje</a></li> 660 <li><a href="https://autozenapp.com/forum/" target="_blank" rel="noopener">Forum</a></li> 661 <li><a href="#download" class="nav-link">Zaczynamy!</a></li> 662 </ul> 663 <button class="nav-close" id="navClose" aria-label="Zamknij menu"> 664 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg> 665 </button> 666 <div class="lang-switch" aria-label="Language"> 667 <a href="/" lang="en" hreflang="en">EN</a> 668 <a href="/es/" lang="es" hreflang="es">ES</a> 669 <a href="/de/" lang="de" hreflang="de">DE</a> 670 <a href="/pl/" class="active" lang="pl" hreflang="pl">PL</a> 671 </div> 672 </nav> 673 674 <div style="display:flex; align-items:center; gap:10px;"> 675 <div class="lang-switch header-lang" aria-label="Language"> 676 <a href="/" lang="en" hreflang="en">EN</a> 677 <a href="/es/" lang="es" hreflang="es">ES</a> 678 <a href="/de/" lang="de" hreflang="de">DE</a> 679 <a href="/pl/" class="active" lang="pl" hreflang="pl">PL</a> 680 </div> 681 <a class="header-cta" href="https://play.google.com/store/apps/details?id=com.zenthek.autozen" target="_blank" rel="noopener"> 682 Pobierz aplikacjÄ 683 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg> 684 </a> 685 <button class="nav-toggle" id="navToggle" aria-label="Otwórz menu" aria-expanded="false" aria-controls="mainNav"> 686 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg> 687 </button> 688 </div> 689 </div> 690 </header> 691 692 <main> 693 <!-- ============ HERO ============ --> 694 <section class="hero" id="home"> 695 <div class="wrap"> 696 <div class="hero-grid"> 697 <div class="hero-copy"> 698 <p class="rating-chip"> 699 <span><span class="star" aria-hidden="true">â </span> <b>4,1</b> w Google Play</span>
700 <span class="dot" aria-hidden="true"></span> 701 <span><b>1 mln+</b> pobraÅ</span> 702 <span class="dot" aria-hidden="true"></span> 703 <span>Za darmo</span> 704 </p> 705 706 <h1>Zaawansowana <span class="grad">nawigacja</span> zakrÄt po zakrÄcie dla Twojego auta</h1> 707 708 <p class="hero-sub">Korzystaj z zaawansowanych tras i dokÅadnych czasów przejazdu z intuicyjnymi wskazówkami zakrÄt po zakrÄcie. Muzyka, poÅÄ czenia i wiadomoÅci â wszystko bez użycia rÄ k, z oczami na drodze.</p> 709 710 <div class="hero-ctas"> 711 <a href="https://play.google.com/store/apps/details?id=com.zenthek.autozen" target="_blank" rel="noopener" class="btn-play" aria-label="Pobierz AutoZen z Google Play"> 712 <svg viewBox="0 0 512 512" width="30" height="32" aria-hidden="true"><path fill="#00d7fe" d="M48 32c-8 5-13 14-13 25v398c0 11 5 20 13 25l224-224L48 32z"/><path fill="#00f076" d="M48 32c6-4 15-5 24 0l276 157-76 76L48 32z"/><path fill="#ffce00" d="M348 189l67 38c22 13 22 45 0 58l-67 38-82-67 82-67z"/><path fill="#ff3a44" d="M48 480c6 4 15 5 24 0l276-157-76-76L48 480z"/></svg> 713 <span class="txt"><small>Pobierz z</small><strong>Google Play</strong></span> 714 </a> 715 <button class="btn-ghost" id="watchDemo"> 716 <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13l11-6.5-11-6.5z"/></svg> 717 Zobacz demo 718 </button> 719 </div> 720 </div> 721 722 <div class="hero-carousel"> 723 <div class="carousel-stage" id="carouselStage" aria-roledescription="carousel" aria-label="Zrzuty ekranu AutoZen"> 724 <button class="hero-card" data-i="0" data-pos="0"><img src="/assets/ps/card-01.webp" alt="Ekran nawigacji zakrÄt po zakrÄcie w AutoZen" width="720" height="1281" fetchpriority="high"></button> 725 <button class="hero-card" data-i="1" data-pos="1"><img src="/assets/ps/card-02.webp" alt="Nawigacja HERE Maps z budynkami 3D w AutoZen" width="720" height="1281"></button> 726 <button class="hero-card" data-i="2" data-pos="2"><img src="/assets/ps/card-05.webp" alt="Jasny i ciemny tryb mapy w AutoZen" width="720" height="1281" loading="lazy"></button> 727 <button class="hero-card" data-i="3" data-pos="-2"><img src="/assets/ps/card-06.webp" alt="Tryb launchera AutoZen z prÄdkoÅciomierzem i widżetami" width="720" height="1281" loading="lazy"></button> 728 <button class="hero-card" data-i="4" data-pos="-1"><img src="/assets/ps/card-07.webp" alt="Konfigurowalne pulpity AutoZen" width="720" height="1281" loading="lazy"></button> 729 </div> 730 731 <div class="carousel-controls"> 732 <button class="car-btn" id="carPrev" aria-label="Poprzedni zrzut ekranu"> 733 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg> 734 </button> 735 <div class="carousel-dots" id="carDots" role="group" aria-label="Wybierz zrzut ekranu"></div> 736 <button class="car-btn" id="carNext" aria-label="NastÄpny zrzut ekranu"> 737 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/></svg> 738 </button> 739 </div> 740 </div> 741 </div> 742 743 <div class="showcase reveal"> 744 <div class="showcase-frame"> 745 <img src="/assets/ps/showcase-1100.webp" 746 srcset="/assets/ps/showcase-1100.webp 1100w, /assets/ps/showcase-2000.webp 2000w" 747 sizes="(max-width: 1240px) 92vw, 1180px" 748 alt="Tryb launchera AutoZen: pogoda, muzyka, prÄdkoÅciomierz, ograniczenie prÄdkoÅci i skróty aplikacji na jednym pulpicie" 749 width="2000" height="925" loading="lazy"> 750 </div> 751 <p class="showcase-caption"><b>Tryb launchera</b> â kompletny pulpit stworzony do jazdy: prÄdkoÅÄ, pogoda, muzyka i Twoje aplikacje w zasiÄgu wzroku.</p> 752 </div> 753 </div> 754 </section> 755 756 <!-- ============ DISCOVER ============ --> 757 <section class="discover" id="discover"> 758 <div class="wrap"> 759 <div class="section-head reveal"> 760 <p class="kicker center">Odkrywaj</p> 761 <h2>Wszystko, czego potrzebujesz w drodze</h2> 762 </div> 763 764 <div class="feature-row reveal"> 765 <div class="txt"> 766 <div class="feature-icon"><img src="/assets/icon-caracteristica-1.svg" alt="" width="28" height="28"></div> 767 <h2>Wyszukuj <strong>ciekawe miejsca</strong> bez wysiÅku</h2> 768 <p>Nawiguj z ÅatwoÅciÄ dziÄki wyszukiwarce miejsc AutoZen â odkrywaj cele podróży i ciekawe miejsca (POI) dla pÅynnej, bezstresowej jazdy.</p> 769 </div> 770 <div class="vis"> 771 <div class="device-card"><img src="/assets/ps/feature-1.webp" alt="Animowane demo: wyszukiwanie miejsc i punktów POI w AutoZen" width="720" height="551" loading="lazy"></div> 772 </div> 773 </div> 774 775 <div class="feature-row reveal"> 776 <div class="txt"> 777 <div class="feature-icon"><img src="/assets/icon-caracteristica-2.svg" alt="" width="28" height="28"></div> 778 <h2>BÄ dź o krok do przodu, <strong>jedź mÄ drze</strong></h2> 779 <p>Ostrzeżenia o fotoradarach w AutoZen informujÄ CiÄ na bieÅ¼Ä co o zbliżajÄ cych siÄ fotoradarach â Twój najlepszy towarzysz bezpiecznej i bezstresowej jazdy.</p> 780 </div> 781 <div class="vis"> 782 <div class="device-card"><img src="/assets/ps/feature-2.webp" alt="Animowane demo: ostrzeżenia o fotoradarach w czasie rzeczywistym" width="640" height="489" loading="lazy"></div> 783 </div> 784 </div> 785 786 <div class="feature-row reveal"> 787 <div class="txt"> 788 <div class="feature-icon"><img src="/assets/icon-caracteristica-3.svg" alt="" width="28" height="28"></div> 789 <h2><strong>Pogoda</strong> w czasie rzeczywistym</h2> 790 <p>
790BÄ dź na bieÅ¼Ä co z informacjami i alertami pogodowymi w czasie rzeczywistym podczas podróży.</p> 791 </div> 792 <div class="vis"> 793 <div class="device-card"><img src="/assets/ps/feature-3.webp" alt="Animowane demo: informacje o pogodzie w AutoZen" width="720" height="551" loading="lazy"></div> 794 </div> 795 </div> 796 797 <div class="feature-row reveal"> 798 <div class="txt"> 799 <div class="feature-icon"><img src="/assets/icon-caracteristica-4.svg" alt="" width="28" height="28"></div> 800 <h2><strong>Asystent gÅosowy AI</strong>, który podróżuje z TobÄ </h2> 801 <p>PoproÅ AutoZen o wyszukanie celu, sterowanie nawigacjÄ , odtwarzanie utworów z serwisów muzycznych, sprawdzenie pogody, zadzwonienie do kontaktu i wiÄcej.</p> 802 </div> 803 <div class="vis"> 804 <div class="device-card"><img src="/assets/ps/feature-4.webp" alt="Animowane demo: asystent gÅosowy AI steruje nawigacjÄ i muzykÄ " width="640" height="489" loading="lazy"></div> 805 </div> 806 </div> 807 </div> 808 </section> 809 810 <!-- ============ FEATURES ============ --> 811 <section class="features" id="features"> 812 <div class="wrap"> 813 <div class="section-head reveal"> 814 <p class="kicker center">Funkcje</p> 815 <h2>PorzuÄ rozpraszacze, jedź mÄ drzej</h2> 816 <p>AutoZen przenosi Twoje ulubione aplikacje na Twoje urzÄ dzenie. Nawiguj, rozmawiaj i sÅuchaj muzyki â wszystko bez użycia rÄ k, z oczami na drodze. Nawigacja, muzyka, wiadomoÅci, telefon, kontakty, fotoradary: wszystko w jednym miejscu.</p> 817 </div> 818 819 <div class="tabs-bar reveal" role="tablist" aria-label="NarzÄdzia AutoZen"> 820 <button class="tab-btn" role="tab" id="tab-music" aria-controls="panel-music" aria-selected="true"> 821 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> 822 Muzyka 823 </button> 824 <button class="tab-btn" role="tab" id="tab-calls" aria-controls="panel-calls" aria-selected="false"> 825 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg> 826 PoÅÄ czenia 827 </button> 828 <button class="tab-btn" role="tab" id="tab-messages" aria-controls="panel-messages" aria-selected="false"> 829 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> 830 WiadomoÅci 831 </button> 832 <button class="tab-btn" role="tab" id="tab-design" aria-controls="panel-design" aria-selected="false"> 833 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r="2.5"/><path d="M12 2a10 10 0 1 0 10 10c0-1.38-1.12-2.5-2.5-2.5H17a2 2 0 0 1-2-2c0-.5.2-.97.5-1.32.3-.36.5-.82.5-1.31A2.87 2.87 0 0 0 13.13 2H12z"/></svg> 834 WyglÄ d 835 </button> 836 <button class="tab-btn" role="tab" id="tab-functionality" aria-controls="panel-functionality" aria-selected="false"> 837 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 3v18"/></svg> 838 FunkcjonalnoÅÄ 839 </button> 840 <button class="tab-btn" role="tab" id="tab-widgets" aria-controls="panel-widgets" aria-selected="false"> 841 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg> 842 Widżety 843 </button> 844 </div> 845 846 <div class="tab-panel active" id="panel-music" role="tabpanel" aria-labelledby="tab-music"> 847 <figure><img src="/assets/ps/tab-04.webp" alt="Odtwarzacz muzyki AutoZen sterujÄ cy Spotify" width="800" height="1186" loading="lazy"></figure> 848 <div class="panel-txt"> 849 <h3>Twoja ulubiona muzyka w drodze!</h3> 850 <p>PodkrÄÄ zabawÄ i steruj ulubionym odtwarzaczem muzyki jednym dotkniÄciem lub gestem.</p> 851 </div> 852 </div> 853 854 <div class="tab-panel" id="panel-calls" role="tabpanel" aria-labelledby="tab-calls" hidden> 855 <figure><img src="/assets/img-o-caracteristicas-2.webp" alt="Dialer AutoZen z integracjÄ kontaktów" width="850" height="450" loading="lazy"></figure> 856 <div class="panel-txt"> 857 <h3>DzwoÅ bez wysiÅku</h3> 858 <p>AutoZen integruje kontakty â dzwoÅ bezpoÅrednio z listy ostatnich poÅÄ czeÅ lub kontaktów.</p> 859 </div> 860 </div> 861 862 <div class="tab-panel" id="panel-messages" role="tabpanel" aria-labelledby="tab-messages" hidden> 863 <figure><img src="/assets/ps/tab-03.webp" alt="Powiadomienia AutoZen z gÅosowymi odpowiedziami" width="800" height="1170" loading="lazy"></figure> 864 <div class="panel-txt"> 865 <h3>WiadomoÅci bez rozpraszania</h3> 866 <p>OdsÅuchuj przychodzÄ ce wiadomoÅci i odpowiadaj gÅosowo na SMS, WhatsApp, Signal, Facebook Messenger i inne.</p> 867 </div> 868 </div> 869 870 <div class="tab-panel" id="panel-design" role="tabpanel" aria-labelledby="tab-design" hidden> 871 <figure><img src="/assets/ps/tab-07.webp" alt="Konfigurowalne pulpity AutoZen" width="800" height="1194" loading="lazy"></figure> 872 <div class="panel-txt"> 873 <h3>Tryb launchera to nowy wymiar pulpitu</h3> 874 <p>Ulepsz swojÄ jazdÄ, wybierajÄ c spoÅród pulpitów takich jak Cockpit, Coolwalk, Mapa, PrÄdkoÅciomierze i inne. Dodaj widżety, aby nadaÄ im osobisty charakter.</p> 875 </div> 876 </div> 877 878 <div class="tab-panel" id="panel-functionality" role="tabpanel" aria-labelledby="tab-functionality" hidden> 879 <figure><img src="/assets/img-o-caracteristicas-5.webp" alt="Tryb Coolwalk z mapÄ i multimediami na podzielonym ekranie" width="850" height="450" loading="lazy"></figure> 880 <div class="panel-txt"> 881 <h3>Zobacz wiÄcej dziÄki podzielonemu ekranowi</h3> 882 <p>Miej peÅny obraz na każdym ekranie â tryb launchera Coolwalk pokazuje wiÄcej informacji podczas jazdy.</p> 883 </div> 884 </div> 885 886 <div class="tab-panel" id="panel-widgets" role="tabpanel" aria-labelledby="tab-widgets" hidden> 887 <figure><img src="/assets/ps/tab-06.webp" alt="Launcher AutoZen z widżetami pogody, muzyki i mapy" width="800" height="1289" loading="lazy"></figure> 888 <div class="panel-txt"> 889 <h3>
889Dodaj ulubione widżety do launchera</h3> 890 <p>Wybieraj miÄdzy widżetami AutoZen a natywnymi widżetami Androida, jak Google Maps, aby ulepszyÄ swój launcher.</p> 891 </div> 892 </div> 893 </div> 894 </section> 895 896 <!-- ============ CTA ============ --> 897 <section class="cta" id="download"> 898 <div class="wrap"> 899 <div class="cta-band reveal"> 900 <h2>Gotowy, by zaczÄ Ä?</h2> 901 <p>Od autostrady po boczne drogi â z AutoZen zrobisz wiÄcej podczas jazdy. Podróż bez zakÅóceÅ. Pobierz AutoZen już teraz.</p> 902 <a href="https://play.google.com/store/apps/details?id=com.zenthek.autozen" target="_blank" rel="noopener" class="btn-play" aria-label="Pobierz AutoZen z Google Play"> 903 <svg viewBox="0 0 512 512" width="30" height="32" aria-hidden="true"><path fill="#00d7fe" d="M48 32c-8 5-13 14-13 25v398c0 11 5 20 13 25l224-224L48 32z"/><path fill="#00f076" d="M48 32c6-4 15-5 24 0l276 157-76 76L48 32z"/><path fill="#ffce00" d="M348 189l67 38c22 13 22 45 0 58l-67 38-82-67 82-67z"/><path fill="#ff3a44" d="M48 480c6 4 15 5 24 0l276-157-76-76L48 480z"/></svg> 904 <span class="txt"><small>Pobierz z</small><strong>Google Play</strong></span> 905 </a> 906 <p class="cta-rating"><span class="star" aria-hidden="true">â </span> Ocena 4,1 · 5892 opinie · 1 mln+ pobraŠ· Za darmo</p> 907 </div> 908 </div> 909 </section> 910 </main> 911 912 <footer class="site-footer"> 913 <div class="wrap footer-inner"> 914 <div class="footer-brand"> 915 <img src="/assets/logo-c.svg" alt="" width="30" height="30"> 916 <span>AutoZen</span> 917 </div> 918 919 <nav class="footer-links" aria-label="Stopka"> 920 <a href="https://autozenapp.com/forum/" target="_blank" rel="noopener">Forum</a> 921 <a href="/privacy-policy.html">Polityka prywatnoÅci</a> 922 <a href="/terms.html">Warunki korzystania</a> 923 </nav> 924 925 <div class="footer-social"> 926 <a href="https://play.google.com/store/apps/details?id=com.zenthek.autozen" target="_blank" rel="noopener" aria-label="AutoZen w Google Play"> 927 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M3.6 1.8c-.4.2-.6.6-.6 1.1v18.2c0 .5.2.9.6 1.1l10-10.2L3.6 1.8zm11.1 9.1l2.8-2.8-11.3-6.5 8.5 9.3zm0 2.2l-8.5 9.3 11.3-6.5-2.8-2.8zm4.7-3.5l-2.6 1.5 2.9 2.9 1.7-1c1-.6 1-2.1 0-2.7l-2-.7z"/></svg> 928 </a> 929 <a href="https://www.instagram.com/autozen_app/" target="_blank" rel="noopener" aria-label="AutoZen na Instagramie"> 930 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4.2"/><circle cx="17.4" cy="6.6" r="1.1" fill="currentColor" stroke="none"/></svg> 931 </a> 932 <a href="https://www.youtube.com/@autozenApp" target="_blank" rel="noopener" aria-label="AutoZen na YouTube"> 933 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 7.2a3 3 0 0 0-2.1-2.2C19.5 4.5 12 4.5 12 4.5s-7.5 0-9.4.5A3 3 0 0 0 .5 7.2 31.6 31.6 0 0 0 0 12c0 1.6.2 3.2.5 4.8a3 3 0 0 0 2.1 2.2c1.9.5 9.4.5 9.4.5s7.5 0 9.4-.5a3 3 0 0 0 2.1-2.2c.3-1.6.5-3.2.5-4.8s-.2-3.2-.5-4.8zM9.6 15.6V8.4L15.8 12l-6.2 3.6z"/></svg> 934 </a> 935 <a href="https://x.com/autozen_app" target="_blank" rel="noopener" aria-label="AutoZen na X (Twitter)"> 936 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 1.2h3.7l-8.1 9.3L24 22.8h-7.5l-5.9-7.7-6.7 7.7H.2l8.7-9.9L0 1.2h7.7l5.3 7 5.9-7zm-1.3 19.4h2L6.6 3.3h-2.2l13.2 17.3z"/></svg> 937 </a> 938 </div> 939 940 <p class="footer-copy">© <span id="year">2026</span> Zenthek · AutoZen na Androida</p> 941 </div> 942 </footer> 943 944 <dialog class="video-modal" id="demoDialog" aria-label="Wideo demonstracyjne AutoZen"> 945 <div class="video-shell"> 946 <button class="video-close" id="demoClose" aria-label="Zamknij wideo"> 947 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg> 948 </button> 949 <video controls playsinline preload="none" poster="/assets/preview-web.png" id="demoVideo"> 950 <source src="/assets/video.mp4" type="video/mp4"> 951 </video> 952 </div> 953 </dialog> 954 955
955<script> 956 (function () { 957 "use strict"; 958 var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; 959 960 /* Header state */ 961 var header = document.getElementById("siteHeader"); 962 function onScroll() { header.classList.toggle("scrolled", window.scrollY > 8); } 963 window.addEventListener("scroll", onScroll, { passive: true }); 964 onScroll(); 965 966 /* Mobile nav */ 967 var nav = document.getElementById("mainNav"); 968 var navToggle = document.getElementById("navToggle"); 969 function setNav(open) { 970 nav.classList.toggle("open", open); 971 navToggle.setAttribute("aria-expanded", String(open)); 972 document.body.style.overflow = open ? "hidden" : ""; 973 } 974 navToggle.addEventListener("click", function () { setNav(!nav.classList.contains("open")); }); 975 document.getElementById("navClose").addEventListener("click", function () { setNav(false); }); 976 nav.querySelectorAll("a").forEach(function (a) { a.addEventListener("click", function () { setNav(false); }); }); 977 978 /* Stacked-card carousel */ 979 var cards = Array.prototype.slice.call(document.querySelectorAll(".hero-card")); 980 var N = cards.length; 981 var active = 0; 982 var dotsWrap = document.getElementById("carDots"); 983 var stage = document.getElementById("carouselStage"); 984 985 cards.forEach(function (c, i) { 986 var d = document.createElement("button"); 987 d.setAttribute("aria-label", "Przejdź do zrzutu " + (i + 1)); 988 d.addEventListener("click", function () { goTo(i); restart(); }); 989 dotsWrap.appendChild(d); 990 }); 991 var dots = Array.prototype.slice.call(dotsWrap.children); 992 993 function render() { 994 cards.forEach(function (c, i) { 995 var off = (i - active + N) % N; /* 0..N-1 */ 996 if (off > N / 2) off -= N; /* -2..2 for N=5 */ 997 c.setAttribute("data-pos", String(off)); 998 c.setAttribute("aria-hidden", off === 0 ? "false" : "true"); 999 c.tabIndex = off === 0 ? -1 : 0; 1000 var lbl = off === 0 ? "BieÅ¼Ä cy zrzut ekranu" : "Pokaż zrzut " + (i + 1); 1001 c.setAttribute("aria-label", lbl); 1002 }); 1003 dots.forEach(function (d, i) { d.setAttribute("aria-current", i === active ? "true" : "false"); }); 1004 } 1005 function goTo(i) { active = (i + N) % N; render(); } 1006 function next() { goTo(active + 1); } 1007 function prev() { goTo(active - 1); } 1008 1009 cards.forEach(function (c, i) { c.addEventListener("click", function () { if (i !== active) { goTo(i); restart(); } }); }); 1010 document.getElementById("carNext").addEventListener("click", function () { next(); restart(); }); 1011 document.getElementById("carPrev").addEventListener("click", function () { prev(); restart(); }); 1012 1013 /* Swipe */ 1014 var px = null; 1015 stage.addEventListener("pointerdown", function (e) { px = e.clientX; }, { passive: true }); 1016 stage.addEventListener("pointerup", function (e) { 1017 if (px === null) return; 1018 var dx = e.clientX - px; px = null; 1019 if (Math.abs(dx) > 42) { dx < 0 ? next() : prev(); restart(); } 1020 }); 1021 1022 /* Auto-advance */ 1023 var timer = null; 1024 function start() { if (!reduceMotion) timer = setInterval(next, 6000); } 1025 function stop() { if (timer) { clearInterval(timer); timer = null; } } 1026 function restart() { stop(); start(); } 1027 stage.addEventListener("pointerenter", stop); 1028 stage.addEventListener("pointerleave", start); 1029 document.addEventListener("visibilitychange", function () { document.hidden ? stop() : start(); }); 1030 render(); start(); 1031 1032 /* Tabs */ 1033 var tabs = Array.prototype.slice.call(document.querySelectorAll(".tab-btn")); 1034 var panels = Array.prototype.slice.call(document.querySelectorAll(".tab-panel"));
1035 tabs.forEach(function (t) { 1036 t.addEventListener("click", function () { 1037 tabs.forEach(function (o) { o.setAttribute("aria-selected", "false"); }); 1038 panels.forEach(function (p) { p.classList.remove("active"); p.hidden = true; }); 1039 t.setAttribute("aria-selected", "true"); 1040 var panel = document.getElementById(t.getAttribute("aria-controls")); 1041 panel.hidden = false; 1042 panel.classList.add("active"); 1043 }); 1044 }); 1045 1046 /* Video modal */ 1047 var dialog = document.getElementById("demoDialog"); 1048 var video = document.getElementById("demoVideo"); 1049 document.getElementById("watchDemo").addEventListener("click", function () { dialog.showModal(); }); 1050 function closeDemo() { video.pause(); dialog.close(); } 1051 document.getElementById("demoClose").addEventListener("click", closeDemo); 1052 dialog.addEventListener("click", function (e) { if (e.target === dialog) closeDemo(); }); 1053 dialog.addEventListener("cancel", function () { video.pause(); }); 1054 1055 /* Reveal on scroll */ 1056 var revealEls = Array.prototype.slice.call(document.querySelectorAll(".reveal")); 1057 if (!("IntersectionObserver" in window) || reduceMotion) { 1058 revealEls.forEach(function (el) { el.classList.add("in"); }); 1059 } else { 1060 var io = new IntersectionObserver(function (entries) { 1061 entries.forEach(function (en) { 1062 if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } 1063 }); 1064 }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" }); 1065 revealEls.forEach(function (el) { io.observe(el); }); 1066 } 1067 1068 document.getElementById("year").textContent = String(new Date().getFullYear()); 1069 })(); 1070 </script>
vendor: 1 bytes, line 1070
1070
1071<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"95515ee44af04e9cb96f75ffda20ec32","r":1,"spa":2}' crossorigin="anonymous"></script>
1071 1072</body> 1073</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.