{"status":1,"view":"<div class=\"swiper-slide \">\n <a class=\"w-100\" href=\"\/echipamente\" title=\"Homepage banner\">\n <picture>\n <source srcset=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-jpg-1-jpeg_7KJDs_1776355688.webp\">\n <img class=\"w-100 h-auto\" src=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-jpg-1-jpeg_7KJDs_1776355688.jpeg\" alt=\"\" \/>\n <\/picture>\n <\/a>\n \n <\/div>\n <div class=\"swiper-slide \">\n <a class=\"w-100\" href=\"\/atv\" title=\"Homepage banner\">\n <picture>\n <source srcset=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-3-jpg_qLg9F_1776166128.webp\">\n <img class=\"w-100 h-auto\" src=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-3-jpg_qLg9F_1776166128.jpg\" alt=\"\" \/>\n <\/picture>\n <\/a>\n \n <\/div>\n <div class=\"swiper-slide \">\n <a class=\"w-100\" href=\"https:\/\/mt-challenge.cfmoto.ro\/\" title=\"Homepage banner\">\n <picture>\n <source srcset=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-jpg-jpeg_5VWqR_1772182839.webp\">\n <img class=\"w-100 h-auto\" src=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-jpg-jpeg_5VWqR_1772182839.jpeg\" alt=\"\" \/>\n <\/picture>\n <\/a>\n \n <\/div>\n <div class=\"swiper-slide \">\n <a class=\"w-100\" href=\"\/motociclete\" title=\"Homepage banner\">\n <picture>\n <source srcset=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-1-jpg_htowN_1774990823.webp\">\n <img class=\"w-100 h-auto\" src=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-1-jpg_htowN_1774990823.jpg\" alt=\"\" \/>\n <\/picture>\n <\/a>\n \n <\/div>\n <div class=\"swiper-slide \">\n <a class=\"w-100\" href=\"\/atv\" title=\"Homepage banner\">\n <picture>\n <source srcset=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-jpg_r8NfG_1775549016.webp\">\n <img class=\"w-100 h-auto\" src=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-jpg_r8NfG_1775549016.jpg\" alt=\"\" \/>\n <\/picture>\n <\/a>\n \n <\/div>\n <div class=\"swiper-slide \">\n <a class=\"w-100\" href=\"\/atv\/goes\/filter\/capacitate-intre-815-si-963-cmc\" title=\"Homepage banner\">\n <picture>\n <source srcset=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-atvrom-jpg_a5QGl_1771932653.webp\">\n <img class=\"w-100 h-auto\" src=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-atvrom-jpg_a5QGl_1771932653.jpg\" alt=\"\" \/>\n <\/picture>\n <\/a>\n \n <\/div>\n <div class=\"swiper-slide \">\n <a class=\"w-100\" href=\"\/atv\" title=\"Homepage banner\">\n <picture>\n <source srcset=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-atvrom-jpg_uXrh2_1773740342.webp\">\n <img class=\"w-100 h-auto\" src=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-atvrom-jpg_uXrh2_1773740342.jpg\" alt=\"\" \/>\n <\/picture>\n <\/a>\n \n <\/div>\n <div class=\"swiper-slide \">\n <a class=\"w-100\" href=\"\/motociclete\/cflite\" title=\"Homepage banner\">\n <picture>\n <source srcset=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-atvrom-cflite-j_aalqa_1771932654.webp\">\n <img class=\"w-100 h-auto\" src=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-atvrom-cflite-j_aalqa_1771932654.jpg\" alt=\"\" \/>\n <\/picture>\n <\/a>\n \n <\/div>\n <div class=\"swiper-slide \">\n <a class=\"w-100\" href=\"\/scutere\/silence\" title=\"Homepage banner\">\n <picture>\n <source srcset=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-atvrom-silence_XAmcN_1752853749.webp\">\n <img class=\"w-100 h-auto\" src=\"https:\/\/www.atvrom-oradea.ro\/storage\/banners\/home-atvrom-silence_XAmcN_1752853749.jpg\" alt=\"\" \/>\n <\/picture>\n <\/a>\n \n <\/div>\n \n <script>\n var swiper = new Swiper(\".home-swiper\", {\n slidesPerView: 1,\n spaceBetween: 30,\n loop: false,\n pagination: {\n el: \".home-swiper .swiper-pagination\",\n clickable: true,\n renderBullet: function (index, className) {\n return '<span class=\"' + className + ' swiper-line-pagination\"><\/span>';\n },\n },\n navigation: {\n nextEl: \".home-swiper .swiper-button-next\",\n prevEl: \".home-swiper .swiper-button-prev\",\n },\n on: {\n init: function () {\n initVideoControls();\n autoplayActiveVideo(this);\n },\n slideChange: function () {\n pauseAllVideos();\n autoplayActiveVideo(this);\n }\n },\n });\n\n function initVideoControls() {\n document.querySelectorAll('.video-banner-container').forEach(function(container) {\n const video = container.querySelector('.banner-video');\n const playPauseBtn = container.querySelector('.play-pause-btn');\n const muteBtn = container.querySelector('.mute-unmute-btn');\n \n if (!video) return;\n \n if (playPauseBtn) {\n playPauseBtn.addEventListener('click', function(e) {\n e.preventDefault();\n e.stopPropagation();\n \n const icon = this.querySelector('i');\n if (video.paused) {\n video.play();\n icon.classList.remove('fa-play');\n icon.classList.add('fa-pause');\n } else {\n video.pause();\n icon.classList.remove('fa-pause');\n icon.classList.add('fa-play');\n }\n });\n }\n \n if (muteBtn) {\n muteBtn.addEventListener('click', function(e) {\n e.preventDefault();\n e.stopPropagation();\n \n const icon = this.querySelector('i');\n video.muted = !video.muted;\n \n if (video.muted) {\n icon.classList.remove('fa-volume-up');\n icon.classList.add('fa-volume-mute');\n } else {\n icon.classList.remove('fa-volume-mute');\n icon.classList.add('fa-volume-up');\n }\n });\n }\n });\n }\n\n function pauseAllVideos() {\n document.querySelectorAll('.banner-video').forEach(function(video) {\n video.pause();\n const container = video.closest('.video-banner-container');\n const playPauseBtn = container?.querySelector('.play-pause-btn i');\n if (playPauseBtn) {\n playPauseBtn.classList.remove('fa-pause');\n playPauseBtn.classList.add('fa-play');\n }\n });\n }\n\n function autoplayActiveVideo(swiperInstance) {\n const activeSlide = swiperInstance.slides[swiperInstance.activeIndex];\n const activeVideo = activeSlide?.querySelector('.banner-video');\n \n if (activeVideo) {\n activeVideo.play().catch(function(error) {\n console.log('Autoplay prevented:', error);\n });\n \n const playPauseBtn = activeSlide.querySelector('.play-pause-btn i');\n if (playPauseBtn) {\n playPauseBtn.classList.remove('fa-play');\n playPauseBtn.classList.add('fa-pause');\n }\n }\n }\n <\/script>\n\n<style> \n .video-banner-container {\n position: relative;\n width: 100%;\n height: 100%;\n min-height: 400px;\n overflow: hidden;\n background: #000;\n }\n\n .banner-video {\n width: 100%;\n height: 100%;\n min-height: 400px;\n object-fit: cover;\n display: block;\n }\n \n .video-controls {\n position: absolute;\n bottom: 12px;\n right: 112px;\n display: flex;\n gap: 10px;\n z-index: 15;\n }\n\n .video-control-btn {\n background: rgba(0, 0, 0, 0.7);\n border: 2px solid rgba(255, 255, 255, 0.3);\n color: white;\n width: 45px;\n height: 45px;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.3s ease;\n backdrop-filter: blur(5px);\n }\n\n .video-control-btn:hover {\n background: rgba(255, 119, 0, 0.9);\n border-color: rgba(255, 119, 0, 1);\n transform: scale(1.1);\n }\n\n .video-control-btn:active {\n transform: scale(0.95);\n }\n\n .video-control-btn i {\n font-size: 18px;\n pointer-events: none;\n }\n\n .video-overlay-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 10;\n text-align: center;\n width: 100%;\n padding: 0 20px;\n }\n\n .video-overlay-content .heading-banner {\n font-size: 2.5rem;\n font-weight: bold;\n text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);\n margin-bottom: 20px;\n }\n\n .video-overlay-content .view-range {\n display: inline-block;\n padding: 12px 30px;\n background: rgba(255, 119, 0, 0.9);\n color: white;\n text-decoration: none;\n text-transform: uppercase;\n font-weight: bold;\n border-radius: 5px;\n transition: all 0.3s ease;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\n }\n\n .video-overlay-content .view-range:hover {\n background: rgba(255, 119, 0, 1);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);\n }\n\n @media (max-width: 768px) {\n .video-banner-container,\n .banner-video {\n min-height: 300px;\n }\n \n .video-controls {\n bottom: 15px;\n right: 15px;\n gap: 8px;\n }\n \n .video-control-btn {\n width: 40px;\n height: 40px;\n }\n \n .video-control-btn i {\n font-size: 16px;\n }\n \n .video-overlay-content .heading-banner {\n font-size: 1.8rem;\n }\n }\n\n @media (max-width: 480px) {\n .video-overlay-content .heading-banner {\n font-size: 1.4rem;\n }\n \n .video-overlay-content .view-range {\n padding: 10px 20px;\n font-size: 0.9rem;\n }\n }\n<\/style>\n\n"}