1 <html lang="hu"> 2 3 <head> 4 <link rel="stylesheet" 5 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 6 <meta charset="UTF-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 8 <title>Tematikus műsorcsoportok | Magyar Katolikus Rádió</title> 9 <link rel="icon" type="image/png" href="/img/favicon.png"> 10 11
11<script src="https://cdn.tailwindcss.com"></script>
11 12
12<script> 13 window.FontAwesomeConfig = { 14 autoReplaceSvg: 'nest' 15 }; 16 </script>
16 17 <style> 18 /* 1. Alpine.js ugrálásgátló (ez kötelezŠaz x-cloak működéséhez!) */ 19 [x-cloak] { 20 display: none !important; 21 } 22 23 /* 2. Oldal elrejtése az indulás pillanatában */ 24 html { 25 visibility: hidden; 26 opacity: 0; 27 } 28 29 /* 3. Finom áttűnés, amikor minden betöltött */ 30 html.ready { 31 visibility: visible; 32 opacity: 1; 33 transition: opacity 0.3s ease-in; 34 } 35 </style> 36 37
37<script> 38 // Amikor a böngészÅ/Turbo végzett az aktuális oldal DOM-cseréjével, 39 // megjelenÃtjük az oldalt. iOS Safari alatt a DOMContentLoaded nem fut le 40 // Turbo navigációnál vagy bfcache visszaállÃtásnál, ezért minden releváns 41 // lifecycle eseményre idempotensen rátesszük a ready osztályt. 42 (function() { 43 function markDocumentReady() { 44 document.documentElement.classList.add('ready'); 45 } 46 47 if (document.readyState === 'loading') { 48 document.addEventListener('DOMContentLoaded', markDocumentReady, { once: true }); 49 } else { 50 markDocumentReady(); 51 } 52 window.addEventListener('pageshow', markDocumentReady); 53 document.addEventListener('turbo:load', markDocumentReady); 54 document.addEventListener('turbo:render', markDocumentReady); 55 })(); 56 </script>
56 57
57<script 58 src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" 59 crossorigin="anonymous" referrerpolicy="no-referrer"></script>
59 60 <link rel="preconnect" href="https://fonts.googleapis.com"> 61 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> 62 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 63
63<script type="module" src="https://cdn.jsdelivr.net/npm/@hotwired/[email protected]/dist/turbo.es2017-esm.js"></script>
63 64 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
vendor: 68 bytes, lines 64-66
64 65 66 <script src="https://www.google.com/recaptcha/api.js?render=
666Lcu2I8sAAAAADr7sn9X5zMdJMIEcGYmRQVn3TTn
vendor: 19 bytes, lines 66-68
66"></script> 67 68
68<link 69 href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&display=swap" 70 rel="stylesheet"> 71
71<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
71 72 <style> 73 body { 74 font-family: 'DM Sans', sans-serif; 75 } 76 77 .page-content-gutter-compact { 78 padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important; 79 padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important; 80 } 81 82 .page-content-gutter-regular { 83 padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important; 84 padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important; 85 } 86 87 .page-content-gutter-roomy { 88 padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important; 89 padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important; 90 } 91 92 @media (min-width: 768px) { 93 .page-content-gutter-regular { 94 padding-left: max(2rem, env(safe-area-inset-left, 0px)) !important; 95 padding-right: max(2rem, env(safe-area-inset-right, 0px)) !important; 96 } 97 } 98 99 .input-icon-shell { 100 position: relative; 101 } 102 103 .input-inline-safe { 104 padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important; 105 padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important; 106 } 107 108 .input-inline-safe-relaxed { 109 padding-left: max(1rem, env(safe-area-inset-left, 0px)) !important; 110 padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important; 111 } 112 113 @media (min-width: 640px) { 114 .input-inline-safe-relaxed { 115 padding-left: max(1.5rem, env(safe-area-inset-left, 0px)) !important; 116 padding-right: max(1.5rem, env(safe-area-inset-right, 0px)) !important; 117 } 118 } 119 120 .input-inline-safe-leading { 121 padding-left: max(3rem, calc(env(safe-area-inset-left, 0px) + 3rem)) !important; 122 padding-right: max(1rem, env(safe-area-inset-right, 0px)) !important; 123 } 124 125 .input-inline-safe-leading-trailing { 126 padding-left: max(3rem, calc(env(safe-area-inset-left, 0px) + 3rem)) !important; 127 padding-right: max(3rem, calc(env(safe-area-inset-right, 0px) + 3rem)) !important; 128 } 129 130 .input-icon-leading { 131 position: absolute !important; 132 top: 0 !important; 133 bottom: 0 !important; 134 display: flex !important; 135 align-items: center !important; 136 left: env(safe-area-inset-left, 0px) !important; 137 padding-left: 1rem !important; 138 } 139 140 .input-icon-trailing { 141 position: absolute !important; 142 top: 0 !important; 143 bottom: 0 !important; 144 display: flex !important; 145 align-items: center !important; 146 right: env(safe-area-inset-right, 0px) !important; 147 padding-right: 1rem !important; 148 } 149 </style> 150
150<script> 151 tailwind.config = { 152 theme: { 153 extend: { 154 colors: { 155 'brand-green': '#98ca3c', 156 'brand-grey': '#F5F5F5', 157 'brand-dark': '#1A1A1A' 158 }, 159 fontFamily: { 160 'din': ['DM Sans', 'sans-serif'] 161 } 162 } 163 } 164 } 165 </script>
165 166 167 168 <style> 169 [x-cloak] { 170 display: none !important; 171 } 172 </style> 173 </head> 174 175 <body class="bg-white text-brand-dark font-din"> 176 177 178<header id="header" 179 x-data="{ 180 mobileMenuOpen: false, 181 searchOpen: false, 182 scrolled: false, 183 handleScroll() { 184 const y = window.pageYOffset; 185 if (!this.scrolled && y > 40) { 186 this.scrolled = true; 187 } else if (this.scrolled && y < 10) { 188 this.scrolled = false; 189 } 190 } 191 }" 192 @scroll.window="handleScroll()" 193 class="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm relative transition-all duration-300"> 194 195 <div class="max-w-[1440px] mx-auto px-4 md:px-6 lg:px-8 flex items-center justify-between transition-all duration-300" 196 :class="scrolled ? 'py-2' : 'py-4'"> 197 198 <div class="flex items-center shrink-0 mr-4"> 199 <a href="/" class="flex items-center"> 200 <div class="relative shrink-0 transition-all duration-300 z-50 rounded-full bg-white" 201 :class="scrolled 202 ? 'w-10 h-10 md:w-[50px] md:h-[50px] lg:w-[60px] lg:h-[60px] p-0 shadow-none' 203 : 'w-14 h-14 -mb-4 md:w-[90px] md:h-[90px] md:-mb-8 lg:w-[150px] lg:h-[150px] lg:-mb-[75px] lg:p-1.5 lg:shadow-xl'"> 204 <img src="/img/logo.png" 205 alt="Magyar Katolikus Rádió Logo" 206 class="w-full h-full object-cover rounded-full"> 207 </div> 208 <div class="ml-3 hidden sm:block relative z-10 transition-all duration-300" 209 :class="scrolled ? '' : 'lg:-mt-2'"> 210 <div class="font-bold text-brand-dark leading-tight transition-all duration-300" 211 :class="scrolled ? 'text-sm md:text-base lg:text-lg' : 'text-base md:text-lg lg:text-xl'">Magyar Katolikus Rádió</div> 212 <div class="text-gray-600 transition-all duration-300" 213 :class="scrolled ? 'text-[9px] md:text-[10px] lg:text-xs' : 'text-[10px] md:text-xs lg:text-sm'">ÃrömhÃr mindenkinek!</div> 214 </div> 215 </a> 216 </div> 217 218 <nav class="hidden lg:flex items-center space-x-4 xl:space-x-8 h-full relative z-10"> 219 <a href="/" class="text-sm xl:text-base font-bold transition-colors py-4 text-brand-dark hover:text-brand-green">KezdÅlap</a> 220 221 <div class="relative group h-full flex items-center" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false"> 222 <button type="button" @click="open = !open" class="text-sm xl:text-base font-bold transition-colors flex items-center gap-1.5 focus:outline-none py-4 text-brand-dark group-hover:text-brand-green"> 223 <span>Műsorok</span> 224 <span class="transition-transform duration-200 inline-flex items-center" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"> 225 <i class="fa-solid fa-chevron-down text-[10px] xl:text-xs"></i> 226 </span> 227 </button> 228 <div x-show="open" x-transition.opacity.duration.200ms class="absolute top-[100%] left-0 w-56 pt-1 z-50" style="display: none;" x-cloak> 229 <div class="bg-white border border-gray-100 rounded-xl shadow-lg py-2 overflow-hidden"> 230 <a href="/musoraink" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">MŰSORÃJSÃG és archÃvum</a> 231 <a href="/musorabc" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Műsoraink ABC-sorrendben</a> 232 <a href="/musorkategoriak" class="block px-4 py-2.5 text-sm font-bold text-brand-green bg-brand-green/5">Műsoraink kategóriák szerint</a> 233 <a href="/musorcsoportok" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Tematikus műsorcsoportok</a> 234 <a href="/podcastok" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Podcastok</a> 235 </div> 236 </div> 237 </div> 238 239 <div class="relative group h-full flex items-center" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false"> 240 <button type="button" @click="open = !open" class="text-sm xl:text-base font-bold transition-colors flex items-center gap-1.5 focus:outline-none py-4 text-brand-dark group-hover:text-brand-green">
241 <span>Lelkiség</span> 242 <span class="transition-transform duration-200 inline-flex items-center" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"> 243 <i class="fa-solid fa-chevron-down text-[10px] xl:text-xs"></i> 244 </span> 245 </button> 246 <div x-show="open" x-transition.opacity.duration.200ms class="absolute top-[100%] left-0 w-56 pt-1 z-50" style="display: none;" x-cloak> 247 <div class="bg-white border border-gray-100 rounded-xl shadow-lg py-2 overflow-hidden"> 248 <a href="/igenaptar" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Igenaptár</a> 249 <a href="/szentek" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Szentek Katalógusa</a> 250 </div> 251 </div> 252 </div> 253 254 <div class="relative group h-full flex items-center" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false"> 255 <button type="button" @click="open = !open" class="text-sm xl:text-base font-bold transition-colors flex items-center gap-1.5 focus:outline-none py-4 text-brand-dark group-hover:text-brand-green"> 256 <span>Tartalmak</span> 257 <span class="transition-transform duration-200 inline-flex items-center" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"> 258 <i class="fa-solid fa-chevron-down text-[10px] xl:text-xs"></i> 259 </span> 260 </button> 261 262 <div x-show="open" x-transition.opacity.duration.200ms class="absolute top-[100%] left-0 w-56 pt-1 z-50" style="display: none;" x-cloak> 263 <div class="bg-white border border-gray-100 rounded-xl shadow-lg py-2 overflow-hidden"> 264 <a href="/hireink" class="block px-4 py-2.5 text-sm border-b border-gray-50 font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">HÃrek</a> 265 <a href="/videoink" class="block px-4 py-2.5 text-sm border-b border-gray-50 font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Videók</a> 266 267 <a href="/oldal/letoltheto-anyagok" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green"> 268 LetölthetÅ anyagok </a> 269 <a href="/oldal/studioberles" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green"> 270 Stúdióbérlés </a> 271 </div> 272 </div> 273 </div> 274 275 <div class="relative group h-full flex items-center" x-data="{ open: false }" @mouseenter="open = true" @mouseleave="open = false" @click.outside="open = false"> 276 <button type="button" @click="open = !open" class="text-sm xl:text-base font-bold transition-colors flex items-center gap-1.5 focus:outline-none py-4 text-brand-dark group-hover:text-brand-green"> 277 <span>Rádió</span> 278 <span class="transition-transform duration-200 inline-flex items-center" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"> 279 <i class="fa-solid fa-chevron-down text-[10px] xl:text-xs"></i> 280 </span> 281 </button> 282 283 <div x-show="open" x-transition.opacity.duration.200ms class="absolute top-[100%] right-0 lg:left-0 lg:right-auto w-48 pt-1 z-50" style="display: none;" x-cloak> 284 <div class="bg-white border border-gray-100 rounded-xl shadow-lg py-2 overflow-hidden"> 285 <a href="/rolunk" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Rólunk</a> 286 <a href="/bemutatkozunk" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Kapcsolat</a> 287 <a href="/rolunk#frequencies" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Vételkörzetek</a> 288 <a href="/munkatarsaink" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Munkatársaink</a> 289 <a href="/tamogatas" class="block px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-brand-green/10 hover:text-brand-green">Támogatás</a> 290 </div> 291 </div> 292 </div> 293 </nav> 294 295 <div class="flex items-center space-x-2 xl:space-x-3 shrink-0 ml-4 z-10"> 296 <button type="button" @click="searchOpen = true; $nextTick(() => $refs.searchInput.focus())" class="w-10 h-10 flex items-center justify-center text-gray-600 hover:text-brand-green transition-colors rounded-full hover:bg-gray-100 relative z-50"> 297 <i class="fa-solid fa-search text-lg pointer-events-none"></i> 298 </button> 299 300 <a href="/#newsletter-section" class="hidden md:flex"> 301 <button type="button" class="flex items-center justify-center bg-brand-green hover:bg-[#85c000] text-white font-medium rounded-lg transition-colors md:w-10 md:h-10 xl:w-auto xl:px-4 xl:py-2.5 shadow-sm"> 302 <i class="fa-solid fa-envelope pointer-events-none"></i>
303 <span class="hidden xl:inline ml-2 text-sm pointer-events-none">HÃrlevél</span> 304 </button> 305 </a> 306 307 <a href="/app" rel="noopener noreferrer" class="hidden md:flex items-center justify-center bg-brand-dark hover:bg-gray-800 text-white font-medium rounded-lg transition-colors md:w-10 md:h-10 xl:w-auto xl:px-4 xl:py-2.5 shadow-sm"> 308 <i class="fa-solid fa-mobile-screen pointer-events-none"></i> 309 <span class="hidden xl:inline ml-2 text-sm pointer-events-none">App</span> 310 </a> 311 312 <a href="https://bolt.katolikusradio.hu/" target="_blank" rel="noopener noreferrer" class="hidden md:flex items-center justify-center bg-brand-dark hover:bg-gray-800 text-white font-medium rounded-lg transition-colors md:w-10 md:h-10 xl:w-auto xl:px-4 xl:py-2.5 shadow-sm"> 313 <i class="fa-solid fa-shopping-cart pointer-events-none"></i> 314 <span class="hidden xl:inline ml-2 text-sm pointer-events-none">Bolt</span> 315 </a> 316 317 <button type="button" @click="mobileMenuOpen = !mobileMenuOpen" 318 class="block lg:hidden w-10 h-10 flex items-center justify-center text-brand-dark focus:outline-none rounded-full hover:bg-gray-100 ml-2 relative z-50 cursor-pointer"> 319 <svg x-show="!mobileMenuOpen" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 320 <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" /> 321 </svg> 322 <svg x-show="mobileMenuOpen" style="display: none;" x-cloak xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 323 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> 324 </svg> 325 </button> 326 </div> 327 </div> 328 329 <div x-show="mobileMenuOpen" 330 x-transition:enter="transition ease-out duration-200" 331 x-transition:enter-start="opacity-0 -translate-y-4" 332 x-transition:enter-end="opacity-100 translate-y-0" 333 x-transition:leave="transition ease-in duration-150" 334 x-transition:leave-start="opacity-100 translate-y-0" 335 x-transition:leave-end="opacity-0 -translate-y-4" 336 class="block lg:hidden bg-white border-t border-gray-100 absolute w-full shadow-2xl z-40 left-0 top-full" 337 style="display: none;" x-cloak> 338 339 <nav class="flex flex-col p-4 space-y-1 max-h-[85vh] overflow-y-auto relative z-40"> 340 <a href="/" class="text-lg py-3 border-b border-gray-50 px-2 font-bold text-brand-dark hover:text-brand-green">KezdÅlap</a> 341 342 <div class="py-2 border-b border-gray-50" x-data="{ open: false }"> 343 <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-lg py-1 px-2 focus:outline-none font-bold text-brand-dark hover:text-brand-green"> 344 <span class="pointer-events-none">Műsorok</span> 345 <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"> 346 <i class="fa-solid fa-chevron-down text-sm"></i> 347 </span> 348 </button> 349 <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;"> 350 <a href="/musoraink" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">MŰSORÃJSÃG és archÃvum</a> 351 <a href="/musorabc" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Műsoraink ABC-sorrendben</a> 352 <a href="/musorkategoriak" class="block text-base py-1 font-bold text-brand-green">Műsoraink (Kategóriák szerint)</a> 353 <a href="/musorcsoportok" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Tematikus műsorcsoportok</a> 354 <a href="/podcastok" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Podcastok</a> 355 </div> 356 </div> 357 358 <div class="py-2 border-b border-gray-50" x-data="{ open: false }"> 359 <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-lg py-1 px-2 focus:outline-none font-bold text-brand-dark hover:text-brand-green">
360 <span class="pointer-events-none">Lelkiség</span> 361 <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"> 362 <i class="fa-solid fa-chevron-down text-sm"></i> 363 </span> 364 </button> 365 <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;"> 366 <a href="/igenaptar" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Igenaptár</a> 367 <a href="/szentek" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Szentek Katalógusa</a> 368 </div> 369 </div> 370 371 <div class="py-2 border-b border-gray-50" x-data="{ open: false }"> 372 <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-lg py-1 px-2 focus:outline-none font-bold text-brand-dark hover:text-brand-green"> 373 <span class="pointer-events-none">Tartalmak</span> 374 <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"> 375 <i class="fa-solid fa-chevron-down text-sm"></i> 376 </span> 377 </button> 378 <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;"> 379 <a href="/hireink" class="block text-base py-1 mb-1 font-medium text-gray-600 hover:text-brand-green">HÃrek</a> 380 <a href="/videoink" class="block text-base py-1 mb-1 font-medium text-gray-600 hover:text-brand-green">Videók</a> 381 382 <a href="/oldal/letoltheto-anyagok" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green"> 383 LetölthetÅ anyagok </a> 384 <a href="/oldal/studioberles" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green"> 385 Stúdióbérlés </a> 386 </div> 387 </div> 388 389 <div class="py-2 border-b border-gray-50" x-data="{ open: false }"> 390 <button type="button" @click="open = !open" class="flex items-center justify-between w-full text-lg py-1 px-2 focus:outline-none font-bold text-brand-dark hover:text-brand-green"> 391 <span class="pointer-events-none">Rádió</span> 392 <span class="transition-transform duration-200 inline-flex items-center justify-center pointer-events-none" :style="open ? 'transform: rotate(180deg);' : 'transform: rotate(0deg);'"> 393 <i class="fa-solid fa-chevron-down text-sm"></i> 394 </span> 395 </button> 396 <div x-show="open" class="pl-6 py-2 space-y-2" style="display: none;"> 397 <a href="/rolunk" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Rólunk</a> 398 <a href="/bemutatkozunk" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Kapcsolat</a> 399 <a href="/rolunk#frequencies" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Vételkörzetek</a> 400 <a href="/munkatarsaink" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Munkatársaink</a> 401 <a href="/tamogatas" class="block text-base py-1 font-medium text-gray-600 hover:text-brand-green">Támogatás</a> 402 </div> 403 </div> 404 405 <div class="flex flex-col gap-3 pt-6 md:hidden px-2 pb-4"> 406 <a href="/#newsletter-section" class="flex items-center justify-center space-x-2 bg-brand-green text-white font-bold py-3 rounded-lg w-full shadow-sm"> 407 <i class="fa-solid fa-envelope"></i><span>HÃrlevél</span> 408 </a> 409 <a href="/app" rel="noopener noreferrer" class="flex items-center justify-center space-x-2 bg-brand-dark text-white font-bold py-3 rounded-lg w-full shadow-sm"> 410 <i class="fa-solid fa-mobile-screen"></i><span>App Letöltése</span> 411 </a> 412 <a href="https://bolt.katolikusradio.hu/" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center space-x-2 bg-brand-dark text-white font-bold py-3 rounded-lg w-full shadow-sm"> 413 <i class="fa-solid fa-shopping-cart"></i><span>Webshop</span> 414 </a> 415 </div> 416 </nav> 417 </div> 418 419 <div x-show="searchOpen" 420 style="display: none;" 421 x-cloak 422 @keydown.window.escape="searchOpen = false" 423 class="fixed inset-0 z-[100] flex items-start justify-center pt-16 md:pt-24 page-content-gutter-compact bg-gray-900/60 backdrop-blur-sm"> 424 425 <div class="absolute inset-0 cursor-pointer" @click="searchOpen = false"></div> 426 427 <div x-show="searchOpen" 428 x-transition:enter="transition ease-out duration-300 transform" 429 x-transition:enter-start="opacity-0 -translate-y-12 scale-95" 430 x-transition:enter-end="opacity-100 translate-y-0 scale-100" 431 x-transition:leave="transition ease-in duration-200 transform" 432 x-transition:leave-start="opacity-100 translate-y-0 scale-100" 433 x-transition:leave-end="opacity-0 -translate-y-12 scale-95" 434 class="relative w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden ring-4 ring-white/20" 435 @click.stop> 436 437 <form action="/kereses" method="GET" class="flex items-center relative w-full"> 438 <div class="pl-6 text-brand-green hidden sm:block"> 439 <i class="fa-solid fa-search text-2xl"></i> 440 </div> 441 442 <input type="text" 443 name="kulcsszo" 444 x-ref="searchInput" 445 placeholder="Mit keres? (pl. Húsvét...)" 446 class="w-full py-5 sm:py-6 px-4 sm:px-6 text-lg sm:text-xl md:text-2xl text-brand-dark bg-transparent border-none focus:ring-0 outline-none placeholder-gray-400 input-inline-safe-relaxed" 447 autocomplete="off" 448 required> 449 450 <button type="submit" class="bg-brand-green hover:bg-[#85c000] text-white font-bold py-2.5 px-4 sm:py-3 sm:px-6 rounded-xl transition-colors shrink-0 mr-2 sm:mr-4 shadow-sm text-sm sm:text-base flex items-center gap-2">
451 <span class="hidden sm:inline">Keresés</span> 452 <i class="fa-solid fa-arrow-right sm:hidden"></i> 453 </button> 454 455 <button type="button" @click="searchOpen = false" class="pr-4 sm:pr-6 pl-2 sm:pl-4 text-gray-400 hover:text-red-500 transition-colors focus:outline-none border-l border-gray-100 h-10 sm:h-12 flex items-center justify-center shrink-0"> 456 <i class="fa-solid fa-times text-xl sm:text-2xl"></i> 457 </button> 458 </form> 459 </div> 460 </div> 461</header> 462 463 464 465<div class="bg-white min-h-screen py-12 lg:py-20" x-data='tematikusKereso([{"szoveg":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok","musorok":[{"id":791,"cim":"Egyh\u00e1zi lapszemle","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":16,"cim":"H\u00edrek","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":43,"cim":"H\u00edrt\u00fck\u00f6r","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":777,"cim":"Kereng\u0151","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/0EN7v7QCgrb6qJB2askwYi","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/kereng%C5%91-k%C3%B6z%C3%A9leti-besz%C3%A9lget%C3%A9sek\/id1563014434","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":373,"cim":"Kereszt\u00e9ny K\u00f6z\u00e9leti Akad\u00e9mia","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":786,"cim":"K\u00f6rk\u00e9p","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":143,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":658,"cim":"Nemzetk\u00f6zi lapszemle","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":378,"cim":"Pillanatfelv\u00e9tel","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":239,"cim":"Reggeli riport","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"},{"id":830,"cim":"Szentsz\u00e9ki percek","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"aktu\u00e1lis \u00e9s h\u00edrm\u0171sorok"}]},{"szoveg":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok","musorok":[{"id":739,"cim":"A l\u00e9lek titkai","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":731,"cim":"A m\u00e9diavil\u00e1g erk\u00f6lcs\u00e9r\u0151l","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":829,"cim":"Kamarai percek","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":688,"cim":"K\u00e9p a t\u00fck\u00f6rben","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1LweRsBXihJxjDFq6BYaPG","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/k\u00e9p-a-t\u00fck\u00f6rben\/id1618726091","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":725,"cim":"Kereng\u0151","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/0EN7v7QCgrb6qJB2askwYi","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/kereng%C5%91-k%C3%B6z%C3%A9leti-besz%C3%A9lget%C3%A9sek\/id1563014434","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":736,"cim":"Magyar t\u00e9ka","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":805,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":803,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":734,"cim":"Pesti mes\u00e9k","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":193,"cim":"Templom \u2013 t\u00e9r \u2013 k\u00e9p","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"},{"id":491,"cim":"Vil\u00e1g\u00fajs\u00e1g","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b k\u00f6z\u00e9leti m\u0171sorok"}]},{"szoveg":"egy\u00e9b kultur\u00e1lis m\u0171sorok","musorok":[{"id":823,"cim":"A katedra k\u00e9t oldala","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1YtGZJALDjENR2xcpUogsI","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/a-katedra-k\u00e9t-oldala\/id1880663941","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"},{"id":459,"cim":"Akvarell","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"},{"id":727,"cim":"\u00c9rt\u00e9kment\u0151","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"},{"id":810,"cim":"M\u0171v\u00e9szbej\u00e1r\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"}
465,{"id":809,"cim":"Olvas\u00f3pr\u00f3ba","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/71ZYUNW05CvLeBrhBzfOj7","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/olvas\u00f3pr\u00f3ba\/id1715657487","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"},{"id":118,"cim":"P\u00e1holy \u00e9s p\u00f3dium","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b kultur\u00e1lis m\u0171sorok"}]},{"szoveg":"egy\u00e9b m\u0171sorok","musorok":[{"id":684,"cim":"A f\u00f6ld s\u00f3ja","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":40,"cim":"Harangsz\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":753,"cim":"Hitvall\u00e1s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":804,"cim":"K\u00e1rp\u00e1ti apr\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":822,"cim":"Kult\u00farpal\u00e1nt\u00e1k","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1TRBhmhF6WdABvq1w2aDep","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/kult\u00farpal\u00e1nt\u00e1k\/id1878339550","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":798,"cim":"Mad\u00e1rv\u00e1rta","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/6GwZXmmx2xjfQnaabsvpPo","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/mad%C3%A1rv%C3%A1rta\/id1689030617","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":711,"cim":"Megk\u00e9rdezt\u00fck ...","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":756,"cim":"Mester-fog\u00e1s","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1wA0sAbeQBVifLBmnME6lS","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/mester-fog%C3%A1s\/id1556442817","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":754,"cim":"M\u00falt \u00e9s jelen","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":827,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":793,"cim":"M\u0171soraj\u00e1nl\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":782,"cim":"NEK riport","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":744,"cim":"Teljess\u00e9g\u00fcnk fel\u00e9","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":465,"cim":"T\u00e9ny-k\u00e9rd\u00e9s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":800,"cim":"Trezor","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":750,"cim":"T\u00fck\u00f6rk\u00e9p","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":517,"cim":"Vend\u00e9g-oldal","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"},{"id":746,"cim":"Vil\u00e1g-egyh\u00e1z","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"egy\u00e9b m\u0171sorok"}]},{"szoveg":"gyermek- \u00e9s ifj\u00fas\u00e1gi m\u0171sorok","musorok":[{"id":160,"cim":"Var\u00e1zsdoboz","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"gyermek- \u00e9s ifj\u00fas\u00e1gi m\u0171sorok"}]},{"szoveg":"irodalmi \u00e9s versm\u0171sorok","musorok":[{"id":771,"cim":"\u0022Itt az \u00edr\u00e1s, forgass\u00e1tok!\u0022","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":45,"cim":"\u0022Valaki \u00edr a kezeddel\u0022","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":773,"cim":"Legkedvesebb k\u00f6nyveim","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":627,"cim":"Mi\u00e9rt szeretem?","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":770,"cim":"Olvas\u00f3jegy","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":832,"cim":"Po\u00e9tikon","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"},{"id":89,"cim":"R\u00e1di\u00f3s reg\u00e9nyt\u00e1r","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"irodalmi \u00e9s versm\u0171sorok"}]},{"szoveg":"ismeretterjeszt\u0151 m\u0171sorok","musorok":[{"id":760,"cim":"Anzix","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":763,"cim":"Architek-t\u00fara","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/4FlcStdLUhNVwkAsuIQYV3","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/architek-t\u00fara\/id1554874477","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":765,"cim":"Blende","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":289,"cim":"M\u00faltid\u00e9z\u0151","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":769,"cim":"Pannon-panor\u00e1ma","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"},{"id":764,"cim":"Pereg m\u00e1r a film","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"ismeretterjeszt\u0151 m\u0171sorok"}]},{"szoveg":"mez\u0151gazdas\u00e1g \u00e9s k\u00f6rnyezetkult\u00fara","musorok":[{"id":320,"cim":"Agr\u00e1r-vil\u00e1g","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"mez\u0151gazdas\u00e1g \u00e9s k\u00f6rnyezetkult\u00fara"},{"id":683,"cim":"Vid\u00e9kj\u00e1r\u00f3 magazin","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"mez\u0151gazdas\u00e1g \u00e9s k\u00f6rnyezetkult\u00fara"}]},{"szoveg":"n\u00e9prajzi \u00e9s anyanyelvi m\u0171sorok","musorok":[{"id":46,"cim":"Nyelv\u00e9desany\u00e1nk","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"n\u00e9prajzi \u00e9s anyanyelvi m\u0171sorok"},{"id":766,"cim":"Sz\u00f3r\u00f3l \u2013 sz\u00f3val","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"n\u00e9prajzi \u00e9s anyanyelvi m\u0171sorok"},{"id":768,"cim":"\u00dczen\u0151f\u00fczet","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"n\u00e9prajzi \u00e9s anyanyelvi m\u0171sorok"}]},{"szoveg":"portr\u00e9- \u00e9s riportm\u0171sorok","musorok":[{"id":112,"cim":"A h\u00e9ten t\u00f6rt\u00e9nt","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":331,"cim":"Arcok \u00e9s sorsok","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/2m6eF8sj91aVE93DXev3Ws","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/arcok-%C3%A9s-sorsok\/id1556443179","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":32,"cim":"Asztali \u00e1ld\u00e1s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":821,"cim":"Dogma vagy axi\u00f3ma?","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/4F4wnHIg1xOAcTOgd6g10s","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/dogma-vagy-axi\u00f3ma\/id1876796763","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":825,"cim":"Embernek maradni","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/7n1uC3iDM7VtNwwRit0N5C","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/embernek-maradni\/id1878370829","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":707,"cim":"Ir\u00e1nyt\u0171","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/160wEf3bXXV3ankhDmD95i","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/ir\u00e1nyt\u0171\/id1851991694","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":747,"cim":"Koszor\u00fak","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":12,"cim":"Kvaterka","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/1E5HFgDJOugm164PYsnDeH","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/kvaterka\/id1699202973","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":790,"cim":"Magyar csillagok","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":831,"cim":"Mondd el te is!","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"},{"id":826,"cim":"Portr\u00e9 mikrofonnal","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/05DnYjkZEArjqgKVnTbb8L","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/portr\u00e9-mikrofonnal\/id1875972293","kategoria_nev":"portr\u00e9- \u00e9s riportm\u0171sorok"}]},{"szoveg":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok","musorok":[{"id":723,"cim":"H\u00e1zunk t\u00e1j\u00e1n","urlkod":"","pod_spoti":"http:\/\/open.spotify.com\/show\/3K8zeaDO7XRAxfz883kFoO","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/h%C3%A1zunk-t%C3%A1j%C3%A1n-csal%C3%A1di-magazin\/id1553439603","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"},{"id":712,"cim":"Messzel\u00e1t\u00f3","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/0NQ0RuiBbLULHTkUazg9AS","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/messzel\u00e1t\u00f3\/id1746679164","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"},{"id":806,"cim":"Sportkulissza","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"},{"id":819,"cim":"T\u00e1masz \u00e9s talpk\u0151","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/4fOAKycyVund5e6nBEyR3n","pod_apple":"https:\/\/podcasts.apple.com\/us\/podcast\/t\u00e1masz-\u00e9s-talpk\u0151\/id1829448454","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"},{"id":255,"cim":"Venite","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"szolg\u00e1ltat\u00f3 \u00e9s \u00e9letviteli m\u0171sorok"}]},{"szoveg":"vall\u00e1si m\u0171sorok","musorok":[{"id":6,"cim":"\u0022Isten, haz\u00e1nk\u00e9rt t\u00e9rdel\u00fcnk el\u0151dbe ...\u0022","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":828,"cim":"A l\u00e9lek hangja","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":807,"cim":"A l\u00e9lek szava","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":63,"cim":"A Vatik\u00e1ni R\u00e1di\u00f3 magyar m\u0171sora","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":694,"cim":"Bens\u0151 v\u00e9gtelen","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":724,"cim":"Magvet\u00e9s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":146,"cim":"Napi evang\u00e9lium","urlkod":"","pod_spoti":"https:\/\/open.spotify.com\/show\/5Y4CYXwVYGEUrl6lUCnO2E","pod_apple":"https:\/\/podcasts.apple.com\/hu\/podcast\/napi-evang%C3%A9lium\/id1573373045","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":799,"cim":"Perik\u00f3pa","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":693,"cim":"Reggeli ima","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"}
465,{"id":41,"cim":"R\u00f3zsaf\u00fcz\u00e9r-im\u00e1ds\u00e1g","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":28,"cim":"Szentmise","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"},{"id":31,"cim":"\u00darangyala-im\u00e1ds\u00e1g","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"vall\u00e1si m\u0171sorok"}]},{"szoveg":"zenei m\u0171sorok","musorok":[{"id":668,"cim":"Dallam\u00edv","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":198,"cim":"Egyh\u00e1zzenei \u00e1hitat","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":68,"cim":"Guzsalyas","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":680,"cim":"Hang\u00e1rium","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":788,"cim":"Hangol\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":801,"cim":"Hangol\u00f3","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":700,"cim":"H\u00e1zimuzsika a D\u00e9lib\u00e1b utc\u00e1ban","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":703,"cim":"Heti zene","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":592,"cim":"Inspir\u00e1ci\u00f3k","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":372,"cim":"Liturgikus \u00e9nekek","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":59,"cim":"OMCE magazin","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":812,"cim":"Sanzonpar\u00e1d\u00e9","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":679,"cim":"Zene-k\u00f6zelben","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":774,"cim":"Zenei barangol\u00e1s","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"},{"id":795,"cim":"Zenepavilon","urlkod":"","pod_spoti":"","pod_apple":"","kategoria_nev":"zenei m\u0171sorok"}]}])'> 466 <div class="max-w-4xl mx-auto w-full page-content-gutter-roomy"> 467 468 <header class="mb-10 border-b border-gray-100 pb-8"> 469 <h1 class="text-3xl lg:text-4xl font-bold text-brand-dark mb-3">Műsoraink kategóriák szerint</h1> 470 <p class="text-gray-500 text-lg mb-8">Fedezze fel műsorainkat kategóriák szerint rendezve!</p> 471 472 <!-- KeresÅmezÅ --> 473 <div class="relative max-w-xl input-icon-shell"> 474 <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none input-icon-leading"> 475 <i class="fa-solid fa-magnifying-glass text-gray-400 text-lg"></i> 476 </div> 477 <input 478 type="text" 479 x-model="searchQuery" 480 placeholder="Keress a műsorok között..." 481 class="w-full pl-12 pr-12 py-3.5 bg-gray-50 border border-gray-200 rounded-xl text-brand-dark focus:bg-white focus:ring-2 focus:ring-brand-green focus:border-brand-green outline-none transition-all text-base input-inline-safe-leading-trailing"> 482 <button 483 x-show="searchQuery.length > 0" 484 @click="searchQuery = ''" 485 class="absolute inset-y-0 right-0 pr-4 flex items-center text-gray-400 hover:text-gray-600 transition-colors input-icon-trailing" 486 x-cloak> 487 <i class="fa-solid fa-xmark text-lg"></i> 488 </button> 489 </div> 490 </header> 491 492 <!-- Nincs találat állapot --> 493 <div x-show="filteredCsoportok.length === 0" class="py-12 text-center" x-cloak> 494 <i class="fa-solid fa-microphone-lines-slash text-5xl text-gray-200 mb-4"></i> 495 <h3 class="text-xl font-bold text-brand-dark mb-2">Nincs találat</h3> 496 <p class="text-gray-500">Nincs olyan műsor ebben a nézetben, ami megfelel a keresésnek.</p> 497 </div> 498 499 <!-- Dinamikus lista --> 500 <div class="space-y-12"> 501 <template x-for="csoport in filteredCsoportok" :key="csoport.szoveg"> 502 <section> 503 <h2 class="text-2xl font-bold text-brand-dark tracking-tight mb-6 lowercase" x-text="csoport.szoveg"></h2> 504 505 <ul class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-3"> 506 <template x-for="musor in csoport.musorok" :key="musor.id"> 507 <li class="group flex items-center justify-between py-1 border-b border-transparent hover:border-gray-50 transition-all"> 508 <div class="flex items-center gap-3 min-w-0"> 509 <div class="w-1.5 h-1.5 rounded-full bg-brand-green shrink-0"></div> 510 <a :href="'/musoraink/' + (musor.urlkod ? musor.urlkod : musor.id)" 511 class="text-lg text-brand-green font-medium hover:text-brand-dark transition-colors truncate" 512 x-text="musor.cim"> 513 </a> 514 </div> 515 516 <div class="flex items-center gap-3 shrink-0 ml-4"> 517 <template x-if="musor.pod_spoti"> 518 <a :href="musor.pod_spoti" target="_blank" class="text-[#1DB954] hover:scale-110 transition-transform" title="Spotify"> 519 <i class="fa-brands fa-spotify text-xl"></i> 520 </a> 521 </template> 522 523 <template x-if="musor.pod_apple"> 524 <a :href="musor.pod_apple" target="_blank" class="text-[#872EC4] hover:scale-110 transition-transform" title="Ap
524ple Podcast"> 525 <i class="fa-solid fa-podcast text-xl"></i> 526 </a> 527 </template> 528 529 <template x-if="musor.pod_spoti || musor.pod_apple"> 530 <a :href="'https://www.katolikusradio.hu/podcast/rss/?musorid=' + musor.id" target="_blank" class="text-[#F26522] hover:scale-110 transition-transform" title="RSS"> 531 <i class="fa-solid fa-rss text-xl"></i> 532 </a> 533 </template> 534 </div> 535 </li> 536 </template> 537 </ul> 538 </section> 539 </template> 540 </div> 541 542 </div> 543</div> 544
545<script> 546 window.tematikusKereso = function(initialData) { 547 return { 548 csoportok: initialData || [], 549 searchQuery: '', 550 551 get filteredCsoportok() { 552 if (this.searchQuery.trim() === '') { 553 return this.csoportok; 554 } 555 556 // KeresÅszó ékezetmentesÃtése 557 const q = this.searchQuery.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); 558 559 // Dupla szűrés: ElÅször a műsorokat szűrjük a kategórián belül, 560 // aztán azokat a kategóriákat eldobjuk, amik kiürültek. 561 return this.csoportok.map(cs => { 562 const filteredMusorok = cs.musorok.filter(show => { 563 const cim = (show.cim || '').toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""); 564 return cim.includes(q); 565 }); 566 567 return { 568 ...cs, 569 musorok: filteredMusorok 570 }; 571 }).filter(cs => cs.musorok.length > 0); 572 } 573 }; 574 }; 575</script>
575 <!-- Az oldal tartalma --> 576 577 578 579 <footer id="footer" class="bg-brand-dark text-white py-12 lg:py-16"> 580 <div class="max-w-[1440px] mx-auto px-4 md:px-8"> 581 <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-12 mb-12"> 582 583 <div class="md:col-span-3 lg:col-span-2 space-y-6"> 584 <div class="flex items-center justify-center md:justify-start"> 585 <div class="w-14 h-14 lg:w-16 lg:h-16 rounded-full flex items-center justify-center overflow-hidden"> 586 <img src="/img/logo.png" 587 alt="Magyar Katolikus Rádió" class="w-full h-full object-cover"> 588 </div> 589 <div class="ml-4 text-left"> 590 <div class="text-lg lg:text-xl font-bold">Magyar Katolikus Rádió</div> 591 <div class="text-sm text-gray-400">ÃrömhÃr mindenkinek!</div> 592 </div> 593 </div> 594 <p class="text-gray-400 leading-relaxed text-sm lg:text-base text-center md:text-left max-w-md mx-auto md:mx-0"> 595 A Magyar Katolikus Rádió küldetése, hogy hiteles információkkal, értékközvetÃtÅ műsorokkal és lelki táplálékkal szolgálja hallgatóit. Minden nap, 24 órában. 596 </p> 597 <div class="flex items-center justify-center md:justify-start space-x-4"> 598 <a href="https://www.facebook.com/katradio/?locale=hu_HU" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-facebook-f"></i></a> 599 <a href="https://www.youtube.com/channel/UCgJyAWToXM6aHVic0CtIt4w" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-youtube"></i></a> 600 <a href="https://www.instagram.com/katolikusradio/" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-instagram"></i></a> 601 <a href="https://play.google.com/store/apps/details?id=hu.arteries.katolikusradio&hl=hu" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-google-play"></i></a> 602 <a href="https://apps.apple.com/hu/app/magyar-katolikus-r%C3%A1di%C3%B3/id1474931701?l=hu" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-brands fa-apple"></i></a> 603 <a href="https://bolt.katolikusradio.hu/" target="_blank" class="w-10 h-10 lg:w-12 lg:h-12 bg-white/10 hover:bg-brand-green rounded-full flex items-center justify-center transition-all hover:-translate-y-1"><i class="fa-solid fa-shopping-cart"></i></a> 604 </div> 605 </div> 606 607 608 <div class="text-center md:text-left"> 609 <h4 class="text-lg font-bold mb-4 lg:mb-6 border-b border-white/10 pb-2 md:border-0 md:pb-0">Műsorok</h4> 610 <ul class="space-y-2 lg:space-y-3"> 611 <li><a onclick="if(window.RadioPlayer) { window.RadioPlayer.setStream('https://katolikusradio.hu:8001/live_hi.mp3', 'ÃlÅ Adás', true, 0, true); window.RadioPlayer.expand(); }" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base cursor-pointer">ÃlÅ adás</a></li> 612 <li><a href="/musoraink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Műsorújság és archÃvum</a></li> 613 <li><a href="/podcastok" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Podcastok</a></li> 614 </ul> 615 </div> 616 617 <div class="text-center md:text-left"> 618 <h4 class="text-lg font-bold mb-4 lg:mb-6 border-b border-white/10 pb-2 md:border-0 md:pb-0">Tartalom</h4> 619 <ul class="space-y-2 lg:space-y-3"> 620 <li><a href="/hireink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">HÃrek</a></li> 621 <li><a href="/videoink" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Videók</a></li> 622 <li><a href="/igenaptar" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Igenaptár</a></li> 623 </ul> 624 </div> 625 626 <div class="text-center md:text-left"> 627 <h4 class="text-lg font-bold mb-4 lg:mb-6 border-b border-white/10 pb-2 md:border-0 md:pb-0">Információ</h4> 628 <ul class="space-y-2 lg:space-y-3"> 629 <li><a href="/rolunk" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Rólunk</a></li> 630 <li><a href="/bemutatkozunk" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Kapcsolat</a></li> 631 <li><a href="/tamogatas" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Támogatás</a></li> 632 <li><a href="/adatkezelesi-tajekoztato" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Adatkezelési tájékoztató</a></li> 633 <li><a href="/impresszum" class="text-gray-400 hover:text-brand-green transition-colors text-sm lg:text-base">Impresszum</a></li> 634 </ul> 635 </div> 636 </div> 637 638 <div class="border-t border-white/10 pt-10"> 639 <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 ga
639p-10 lg:gap-12 mb-12"> 640 641 <div class="md:col-span-3 lg:col-span-2 space-y-6"> 642 <h4 class="text-lg font-bold mb-4">Kapcsolat</h4> 643 <div class="space-y-3 text-gray-400 max-w-xs mx-auto md:mx-0"> 644 <div class="flex items-start justify-center md:justify-start"> 645 <i class="fa-solid fa-location-dot mt-1 mr-3 text-brand-green"></i> 646 <span class="text-sm">1062 Budapest, Délibáb u. 15.-17.</span> 647 </div> 648 <div class="flex items-center justify-center md:justify-start"> 649 <i class="fa-solid fa-phone mr-3 text-brand-green"></i> 650 <span class="text-sm">(+36 1) 255-3333</span> 651 </div> 652 <div class="flex items-center justify-center md:justify-start"> 653 <i class="fa-solid fa-envelope mr-3 text-brand-green"></i> 654 <span class="text-sm">[email protected]</span> 655 </div> 656 </div> 657 </div> 658 659 <div class="md:col-span-3 lg:col-span-2 space-y-6"> 660 <h4 class="text-lg font-bold mb-4">Támogatók</h4> 661 <div class="space-y-3 text-gray-400 max-w-md mx-auto md:mx-0"> 662 <div class="flex items-start justify-center md:justify-start"> 663 <span class="text-sm">A médiaszolgáltatási tevékenységet és a műszaki fejlesztést a Médiatanács a Médiatanács Támogatási Program keretében támogatja.</span> 664 </div> 665 </div> 666 </div> 667 668 <div class="text-center md:text-left"> 669 <div class="flex flex-col gap-4 max-w-[150px] w-full"> 670 <img src="/img/nmhh_logo-150px.jpg" alt="NMHH logó" class="w-full h-auto object-contain rounded shadow-sm"> 671 <img src="/img/nka_logo-150px.jpg" alt="NKA logó" class="w-full h-auto object-contain rounded shadow-sm"> 672 </div> 673 674 </div> 675 </div> 676 677 <div class="flex flex-col md:flex-row items-center justify-between pt-8 border-t border-white/5 gap-4 text-center md:text-left"> 678 <p class="text-gray-500 text-xs lg:text-sm"> 679 © 2026 Magyar Katolikus Rádió Zrt. Minden jog fenntartva. 680 </p> 681 <p class="text-gray-500 text-xs lg:text-sm"> 682 KészÃtette: <a href="https://novanow.hu" class="text-brand-green hover:underline">NovaNow</a> 683 </p> 684 </div> 685 </div> 686 </div> 687</footer> <style> 688 /* Alap padding az élÅ adáshoz (vagy becsukott állapothoz) */ 689 body { 690 padding-bottom: 72px; 691 transition: padding-bottom 0.3s ease; 692 } 693 694 /* Becsukva mindegy mi megy, kicsi a padding */ 695 body.player-minimized { 696 padding-bottom: 16px !important; 697 } 698 699 /* ArchÃv adásnál nagyobbnak kell lennie a paddingnak mobilon, mert két soros a lejátszó */ 700 @media (max-width: 767px) { 701 body.player-archive { 702 padding-bottom: 110px; 703 } 704 } 705 706 input[type="range"] { 707 accent-color: #85c000; 708 cursor: pointer; 709 } 710 711 input[type="range"]:disabled { 712 cursor: not-allowed; 713 accent-color: #6c757d; 714 } 715 716 .radio-pulse { 717 position: relative; 718 display: flex;
719 align-items: center; 720 justify-content: center; /* JAVÃTVA: justify-center -> justify-content */ 721 } 722 723 .radio-pulse.is-playing::before { 724 content: ""; 725 position: absolute; 726 overflow: hidden; 727 top: 50%; 728 left: 50%; 729 width: 100%; 730 height: 100%; 731 margin-top: -50%; 732 margin-left: -50%; 733 border-radius: 9999px; 734 background-color: #85c000; 735 opacity: 0.5; 736 animation: pulse-wave 2.5s infinite ease-out; 737 z-index: -1; 738 pointer-events: none; 739 } 740 741 @keyframes pulse-wave { 742 0% { transform: scale(1); opacity: 0.5; } 743 100% { transform: scale(2.4); opacity: 0; } 744 } 745</style> 746 747<div id="radio-player-global" data-turbo-permanent x-data="radioPlayer" x-init="init()" x-cloak> 748 <section 749 id="quick-listen-bar" 750 class="fixed bottom-0 left-0 right-0 z-[99999] bg-gray-900/95 backdrop-blur border-t border-white/10 flex flex-col justify-center transition-all duration-300" 751 :class="{ 'h-[72px]': isLiveStream || minimized, 'h-[110px] md:h-[72px]': !isLiveStream && !minimized }" 752 x-show="!minimized" 753 x-transition.opacity> 754 755 <div class="max-w-[1440px] w-full mx-auto px-4 md:px-6"> 756 <div class="flex items-center justify-between gap-2 md:gap-4 h-[56px] md:h-auto md:py-2"> 757 758 <div class="flex items-center gap-3 md:gap-4 min-w-[50%] md:min-w-[200px]"> 759 <button 760 type="button" 761 class="w-10 h-10 bg-[#85c000] hover:bg-[#96d100] rounded-full flex items-center justify-center transition-colors shrink-0" 762 @click="toggle()" 763 :aria-label="playing ? 'Szünet' : 'Lejátszás'"> 764 <i class="fa-solid fa-play text-white ml-1" x-show="!playing" x-cloak></i> 765 <i class="fa-solid fa-pause text-white" x-show="playing" x-cloak></i> 766 </button> 767 768 <div class="min-w-0 flex-1"> 769 <div class="text-white font-semibold text-sm leading-tight truncate" x-text="displayTitle"></div> 770 <div class="text-gray-400 text-xs leading-tight truncate" x-text="sourceLabel"></div> 771 </div> 772 </div> 773 774 <div class="hidden md:flex flex-1 items-center justify-center gap-3 px-4" x-show="!isLiveStream" x-cloak> 775 <span class="text-xs text-gray-400 font-mono w-12 text-right" x-text="formatTime(currentTime)"></span> 776 <input 777 type="range" 778 min="0" 779 :max="duration > 0 ? duration : 100" 780 step="1" 781 class="flex-1 max-w-[400px] h-1.5 bg-gray-600 rounded-lg appearance-none" 782 x-model="currentTime" 783 @input="seek()" /> 784 <span class="text-xs text-gray-400 font-mono w-12" x-text="formatTime(duration)"></span> 785 </div> 786 787 <div class="hidden md:block flex-1" x-show="isLiveStream" x-cloak></div> 788 789 <div class="flex items-center gap-2 md:gap-3 min-w-[80px] md:min-w-[180px] justify-end"> 790 791 <div class="hidden md:flex items-center gap-2 w-28"> 792 <i class="fa-solid fa-volume-high text-gray-400 text-sm"></i> 793 <input 794 type="range" min="0" max="1" step="0.01" 795 class="w-full h-1.5 bg-gray-600 rounded-lg appearance-none" 796 x-model.number="volume" 797 @input="applyVolume()" 798 aria-label="HangerÅ" /> 799 </div> 800 801 <button 802 type="button" 803 class="w-9 h-9 rounded-md hover:bg-white/10 text-gray-400 flex items-center justify-center transition-colors ml-1" 804 @click="minimize()" 805 aria-label="Becsukás" 806 title="Becsukás"> 807 <i class="fa-solid fa-chevron-down"></i> 808 </button> 809 </div> 810 811 </div> 812 813 <div class="flex md:hidden items-center justify-between gap-3 pb-3 px-1" x-show="!isLiveStream" x-cloak> 814 <span class="text-xs text-gray-400 font-mono w-10 text-left shrink-0" x-text="formatTime(currentTime)"></span> 815 <input 816 type="range" 817 min="0" 818 :max="duration > 0 ? duration : 100" 819 step="1" 820 class="flex-1 h-1.5 bg-gray-600 rounded-lg appearance-none w-full" 821 x-model="currentTime"
822 @input="seek()" /> 823 <span class="text-xs text-gray-400 font-mono w-10 text-right shrink-0" x-text="formatTime(duration)"></span> 824 </div> 825 826 </div> 827 828 <audio x-ref="audio" preload="none"></audio> 829 </section> 830 831 <button 832 type="button" 833 x-show="minimized" 834 @click="expand()" 835 :class="{ 'radio-pulse is-playing': playing, 'radio-pulse': !playing }" 836 style=" 837 position: fixed !important; 838 bottom: 32px !important; 839 right: 32px !important; 840 width: 64px !important; 841 height: 64px !important; 842 border-radius: 9999px !important; 843 background-color: #85c000 !important; 844 color: white !important; 845 display: flex !important; 846 align-items: center !important; 847 justify-content: center !important; 848 z-index: 999999 !important; 849 border: none !important; 850 box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important; 851 cursor: pointer !important; 852 " 853 x-transition:enter="transition ease-out duration-300" 854 x-transition:enter-start="opacity-0 scale-50 translate-x-10" 855 x-transition:enter-end="opacity-100 scale-100 translate-x-0"> 856 <i class="fa-solid fa-radio text-2xl"></i> 857 </button> 858 859
859<script> 860 document.addEventListener('alpine:init', () => { 861 Alpine.data('radioPlayer', () => ({ 862 defaultUrl: 'https://katolikusradio.hu:8001/live_hi.mp3', 863 defaultTitle: 'ÃlÅ adás', 864 865 streamUrl: null, 866 programTitle: null, 867 isLiveStream: true, 868 869 playing: false, 870 minimized: sessionStorage.getItem('radioMinimized') === 'true', 871 volume: 0.7, 872 873 currentTime: 0, 874 duration: 0, 875 targetStartTime: 0, 876 877 get displayTitle() { 878 return (this.programTitle && this.programTitle.trim()) ? this.programTitle : this.defaultTitle; 879 }, 880 get sourceLabel() { 881 return 'Magyar Katolikus Rádió'; 882 }, 883 884 persistPlaybackState(isPlaying) { 885 sessionStorage.setItem('radioWasPlaying', isPlaying ? 'true' : 'false'); 886 }, 887 888 syncPlaybackState(isPlaying = !this.$refs.audio.paused) { 889 this.playing = !!isPlaying; 890 this.persistPlaybackState(this.playing); 891 }, 892 893 syncProgressState() { 894 const audio = this.$refs.audio; 895 if (!this.isLiveStream) { 896 this.currentTime = audio.currentTime; 897 } 898 }, 899 900 syncMetadataState() { 901 const audio = this.$refs.audio; 902 this.duration = audio.duration === Infinity ? 0 : audio.duration; 903 904 if (this.targetStartTime > 0) { 905 audio.currentTime = this.targetStartTime; 906 this.targetStartTime = 0; 907 } 908 }, 909 910 syncFromAudioElement() { 911 const audio = this.$refs.audio; 912 this.syncPlaybackState(!audio.paused); 913 this.currentTime = audio.currentTime; 914 this.duration = audio.duration === Infinity ? 0 : audio.duration; 915 }, 916 917 init() { 918 const a = this.$refs.audio; 919 window.__mkrRadioPlayerInstance = this; 920 921 // Turbo permanent elemként a player DOM-ja oldalváltások között megmarad. 922 // iOS Safari érzékeny arra, ha ugyanarra az audio elemre többször tesszük fel 923 // ugyanazokat a listenereket, ezért az init idempotens. 924 if (a.dataset.radioPlayerListenersAttached !== 'true') { 925 a.dataset.radioPlayerListenersAttached = 'true'; 926 927 const getActivePlayer = () => window.__mkrRadioPlayerInstance; 928 929 a.addEventListener('play', () => { 930 getActivePlayer()?.syncPlaybackState(true); 931 }); 932 a.addEventListener('pause', () => { 933 getActivePlayer()?.syncPlaybackState(false); 934 }); 935 a.addEventListener('ended', () => { 936 getActivePlayer()?.syncPlaybackState(false); 937 }); 938 a.addEventListener('error', (e) => { 939 getActivePlayer()?.syncPlaybackState(false); 940 console.error('audio error', e); 941 }); 942 943 a.addEventListener('timeupdate', () => { 944 getActivePlayer()?.syncProgressState(); 945 }); 946 947 a.addEventListener('loadedmetadata', () => { 948 getActivePlayer()?.syncMetadataState(); 949 }); 950 } 951 952 a.volume = this.volume; 953 954 window.RadioPlayer = { 955 setStream: (url, title, isLive, startAt, forcePlay) => this.setStream(url, title, isLive, startAt, forcePlay), 956 play: () => this.play(), 957 pause: () => this.pause(), 958 toggle: () => this.toggle(), 959 minimize: () => this.minimize(), 960 expand: () => this.expand(), 961 applyBodyPadding: () => this.applyBodyPadding(), 962 }; 963 964 // Memória betöltés 965 if (!a.src || a.src === window.location.href || a.src === '') { 966 const params = new URLSearchParams(window.location.search); 967 const pStream = params.get('stream'); 968 const pTitle = params.get('title'); 969 970 if (pStream) this.setStream(pStream, pTitle); 971 else this.setStream(this.defaultUrl, null); 972 } else { 973 this.syncFromAudioElement(); 974 975 const savedState = JSON.parse(sessionStorage.getItem('radioState') || '{}'); 976 this.streamUrl = savedState.streamUrl || a.src; 977 this.programTitle = savedState.programTitle || ''; 978 this.isLiveStream = savedState.isLiveStream !== undefined ? savedState.isLiveStream : true; 979 } 980 981 this.syncFromAudioElement(); 982 983 this.applyBodyPadding(); 984 }, 985 986 formatTime(seconds) { 987 if (isNaN(seconds) || !isFinite(seconds)) return '00:00'; 988 const h = Math.floor(seconds / 3600); 989 const m = Math.floor((seconds % 3600) / 60); 990 const s = Math.floor(seconds % 60); 991 if (h > 0) { 992 return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; 993 } 994 return `${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`; 995 }, 996 997 seek() { 998 if (this.isLiveStream) return; 999 this.$refs.audio.currentTime = this.currentTime; 1000 }, 1001 1002 // Test Padding hozzáadása dinamikusan 1003 applyBodyPadding() { 1004 document.body.classList.toggle('player-minimized', !!this.minimized); 1005 1006 // Ha NYITVA van és ARCHÃV, akkor plusz osztály a mobilos kétsoros nézet miatt 1007 if (!this.minimized && !this.isLiveStream) { 1008 document.body.classList.add('player-archive'); 1009 } else { 1010 document.body.classList.remove('player-archive'); 1011 } 1012 }, 1013 1014 minimize() { 1015 this.minimized = true; 1016 sessionStorage.setItem('radioMinimized', 'true'); 1017 this.applyBodyPadding(); 1018 }, 1019 1020 expand() { 1021 this.minimized = false; 1022 sessionStorage.setItem('radioMinimized', 'false'); 1023 this.applyBodyPadding(); 1024 }, 1025 1026 ensureAudioSource() { 1027 const a = this.$refs.audio; 1028 if (this.streamUrl && a.src !== this.streamUrl) { 1029 a.src = this.streamUrl; 1030 a.load(); 1031 } 1032 }, 1033 1034 setStream(url, title = null, isLive = null, startAt = 0, forcePlay = false) { 1035 if (!url) return; 1036 const a = this.$refs.audio; 1037 const wasPlaying = !a.paused; 1038 const shouldStart = wasPlaying || forcePlay; 1039 1040 this.streamUrl = url; 1041 this.programTitle = title; 1042 this.isLiveStream = isLive !== null ? isLive : url.includes('live_hi'); 1043 1044 sessionStorage.setItem('radioState', JSON.stringify({ 1045 streamUrl: this.streamUrl, 1046 programTitle: this.programTitle, 1047 isLiveStream: this.isLiveStream 1048 })); 1049 1050 this.targetStartTime = startAt; 1051 this.currentTime = startAt; 1052 this.duration = 0; 1053 1054 if (shouldStart) { 1055 a.pause(); 1056 this.ensureAudioSource(); 1057 this.syncPlaybackState(false); 1058 } else if (this.isLiveStream) { 1059 // iOS Safari a live stream automatikus a.load()/src indÃtását a teljes 1060 // oldalbetöltés részének tekinti, ezért a progress bar félúton megállhat, 1061 // a Turbo/Alpine restore pedig félkész DOM-ot festhet. ÃlÅ adást csak 1062 // felhasználói play vagy explicit visszajátszás után nyitunk meg. 1063 a.pause(); 1064 a.removeAttribute('src'); 1065 a.load(); 1066 this.syncPlaybackState(false); 1067 } else if (a.src !== url) { 1068 a.pause(); 1069 this.ensureAudioSource(); 1070 this.syncPlaybackState(false); 1071 } 1072 1073 this.applyBodyPadding(); // FrissÃtjük a magasságot betöltéskor 1074 1075 if (shouldStart) setTimeout(() => this.play(), 50); 1076 }, 1077 1078 async play() { 1079 const a = this.$refs.audio; 1080 this.ensureAudioSource(); 1081 try { 1082 await a.play(); 1083 this.syncPlaybackState(true); 1084 } catch (e) { 1085 this.syncPlaybackState(false); 1086 console.error('play failed', e); 1087 } 1088 }, 1089 1090 pause() { 1091 this.$refs.audio.pause(); 1092 this.syncPlaybackState(false); 1093 }, 1094
1095 async toggle() { 1096 const a = this.$refs.audio; 1097 if (a.paused) await this.play(); 1098 else this.pause(); 1099 }, 1100 1101 applyVolume() { 1102 this.$refs.audio.volume = this.volume; 1103 }, 1104 })); 1105 }); 1106 </script>
1106 1107 1108
1108<script> 1109 if (!window.__mkrRadioTurboBridgeRegistered) { 1110 window.__mkrRadioTurboBridgeRegistered = true; 1111 let wasRadioPlaying = false; 1112 1113 document.addEventListener("turbo:before-render", () => { 1114 const audioEl = document.querySelector('#radio-player-global audio'); 1115 if (audioEl) { 1116 wasRadioPlaying = !audioEl.paused; 1117 sessionStorage.setItem('radioWasPlaying', wasRadioPlaying ? 'true' : 'false'); 1118 } 1119 }); 1120 1121 document.addEventListener("turbo:render", () => { 1122 if (wasRadioPlaying) { 1123 const audioEl = document.querySelector('#radio-player-global audio'); 1124 if (audioEl) { 1125 setTimeout(() => { 1126 if (window.RadioPlayer && typeof window.RadioPlayer.play === 'function') { 1127 window.RadioPlayer.play(); 1128 } else { 1129 audioEl.play().catch(e => console.log('Auto-play preventálva:', e)); 1130 } 1131 }, 50); 1132 } 1133 } 1134 1135 if (window.RadioPlayer && typeof window.RadioPlayer.applyBodyPadding === 'function') { 1136 window.RadioPlayer.applyBodyPadding(); 1137 } 1138 }); 1139 1140 window.addEventListener('pageshow', () => { 1141 const shouldResumePlayback = sessionStorage.getItem('radioWasPlaying') === 'true'; 1142 1143 if (shouldResumePlayback && window.RadioPlayer && typeof window.RadioPlayer.play === 'function') { 1144 window.RadioPlayer.play(); 1145 } 1146 1147 if (window.RadioPlayer && typeof window.RadioPlayer.applyBodyPadding === 'function') { 1148 window.RadioPlayer.applyBodyPadding(); 1149 } 1150 }); 1151 } 1152 </script>
1152 1153</div> 1154 1155 1156 </body> 1157 1158 </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.