Reduce CLS and optimize portrait image

assets/js/main.js

@@ -67,6 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
             const total = slides.length;
             let slideInterval;
             const autoPlayDelay = 5000;
+            let userHasInteracted = false;
 
             const showSlide = (index) => {
                 if (slides.length === 0) return;
@@ -80,29 +81,32 @@ document.addEventListener('DOMContentLoaded', () => {
             const pauseSlider = () => clearInterval(slideInterval);
 
             const startSlider = () => {
+                if (!userHasInteracted || slides.length <= 1) return;
                 pauseSlider();
-                if (slides.length > 1) {
-                    slideInterval = setInterval(nextSlide, autoPlayDelay);
-                }
+                slideInterval = setInterval(nextSlide, autoPlayDelay);
             };
-            
+
             if (prevBtn && nextBtn) {
                 prevBtn.addEventListener("click", () => {
+                    userHasInteracted = true;
                     prevSlide();
                     startSlider();
                 });
-    
+
                 nextBtn.addEventListener("click", () => {
+                    userHasInteracted = true;
                     nextSlide();
                     startSlider();
                 });
             }
             
             sliderElement.addEventListener('mouseenter', pauseSlider);
-            sliderElement.addEventListener('mouseleave', startSlider);
+            sliderElement.addEventListener('mouseleave', () => {
+                if (userHasInteracted) {
+                    startSlider();
+                }
+            });
             sliderElement.addEventListener('touchstart', pauseSlider, { passive: true });
-
-            startSlider();
         }
 
         // =================================================================
@@ -290,4 +294,4 @@ document.addEventListener('DOMContentLoaded', () => {
     setCurrentYear();
     setActiveNavLink();
     initializeApp();
-});
+});

assets/js/main.min.js

@@ -1,6 +1,6 @@
 document.addEventListener('DOMContentLoaded',()=>{const loadComponent=(componentPath,placeholderId)=>{return fetch(componentPath).then(response=>{if(!response.ok){throw new Error(`Napaka pri nalaganju komponente:${componentPath}`);}
-return response.text();}).then(data=>{const placeholder=document.getElementById(placeholderId);if(placeholder){placeholder.innerHTML=data;}}).catch(error=>console.error(error));};const setCurrentYear=()=>{const yearSpan=document.getElementById('current-year');if(yearSpan){yearSpan.textContent=new Date().getFullYear();}};const setActiveNavLink=()=>{const navLinks=document.querySelectorAll('.main-nav a');const currentPagePath=window.location.pathname;navLinks.forEach(link=>{const linkPath=new URL(link.href).pathname.replace(/\/$/,"");const currentPath=currentPagePath.replace(/\/$/,"");if(linkPath===""&&currentPath===""){link.classList.add('active');}else if(linkPath!==""&&currentPath.startsWith(linkPath)){link.classList.add('active');}});};const initializeApp=()=>{const sliderElement=document.getElementById("slider");if(sliderElement){const slides=sliderElement.querySelectorAll(".slide");const prevBtn=document.getElementById("prevBtn");const nextBtn=document.getElementById("nextBtn");let current=0;const total=slides.length;let slideInterval;const autoPlayDelay=5000;const showSlide=(index)=>{if(slides.length===0)return;slides[current].classList.remove("active");current=(index+total)%total;slides[current].classList.add("active");};const nextSlide=()=>showSlide(current+1);const prevSlide=()=>showSlide(current-1);const pauseSlider=()=>clearInterval(slideInterval);const startSlider=()=>{pauseSlider();if(slides.length>1){slideInterval=setInterval(nextSlide,autoPlayDelay);}};if(prevBtn&&nextBtn){prevBtn.addEventListener("click",()=>{prevSlide();startSlider();});nextBtn.addEventListener("click",()=>{nextSlide();startSlider();});}
-sliderElement.addEventListener('mouseenter',pauseSlider);sliderElement.addEventListener('mouseleave',startSlider);sliderElement.addEventListener('touchstart',pauseSlider,{passive:true});startSlider();}
+return response.text();}).then(data=>{const placeholder=document.getElementById(placeholderId);if(placeholder){placeholder.innerHTML=data;}}).catch(error=>console.error(error));};const setCurrentYear=()=>{const yearSpan=document.getElementById('current-year');if(yearSpan){yearSpan.textContent=new Date().getFullYear();}};const setActiveNavLink=()=>{const navLinks=document.querySelectorAll('.main-nav a');const currentPagePath=window.location.pathname;navLinks.forEach(link=>{const linkPath=new URL(link.href).pathname.replace(/\/$/,"");const currentPath=currentPagePath.replace(/\/$/,"");if(linkPath===""&&currentPath===""){link.classList.add('active');}else if(linkPath!==""&&currentPath.startsWith(linkPath)){link.classList.add('active');}});};const initializeApp=()=>{const sliderElement=document.getElementById("slider");if(sliderElement){const slides=sliderElement.querySelectorAll(".slide");const prevBtn=document.getElementById("prevBtn");const nextBtn=document.getElementById("nextBtn");let current=0;const total=slides.length;let slideInterval;const autoPlayDelay=5000;let userHasInteracted=false;const showSlide=(index)=>{if(slides.length===0)return;slides[current].classList.remove("active");current=(index+total)%total;slides[current].classList.add("active");};const nextSlide=()=>showSlide(current+1);const prevSlide=()=>showSlide(current-1);const pauseSlider=()=>clearInterval(slideInterval);const startSlider=()=>{if(!userHasInteracted||slides.length<=1)return;pauseSlider();slideInterval=setInterval(nextSlide,autoPlayDelay);};if(prevBtn&&nextBtn){prevBtn.addEventListener("click",()=>{userHasInteracted=true;prevSlide();startSlider();});nextBtn.addEventListener("click",()=>{userHasInteracted=true;nextSlide();startSlider();});}
+sliderElement.addEventListener('mouseenter',pauseSlider);sliderElement.addEventListener('mouseleave',()=>{if(userHasInteracted){startSlider();}});sliderElement.addEventListener('touchstart',pauseSlider,{passive:true});}
 const mobileNavToggle=document.querySelector('.mobile-nav-toggle');const mainNav=document.querySelector('.main-nav');if(mobileNavToggle&&mainNav){mobileNavToggle.addEventListener('click',()=>{const isExpanded=mobileNavToggle.getAttribute('aria-expanded')==='true';mobileNavToggle.setAttribute('aria-expanded',!isExpanded);mobileNavToggle.classList.toggle('open');mainNav.classList.toggle('open');});const navLinks=mainNav.querySelectorAll('a');navLinks.forEach(link=>{link.addEventListener('click',()=>{if(mainNav.classList.contains('open')){mainNav.classList.remove('open');mobileNavToggle.classList.remove('open');mobileNavToggle.setAttribute('aria-expanded','false');}});});}
 const observer=new IntersectionObserver((entries,observer)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.classList.add('is-visible');observer.unobserve(entry.target);}});},{threshold:0});document.querySelectorAll('.animate-on-scroll').forEach(el=>{observer.observe(el);});document.querySelectorAll('.accordion-item').forEach(item=>{const header=item.querySelector('.accordion-header');const content=item.querySelector('.accordion-content');if(header&&content){header.addEventListener('click',()=>{const isActive=item.classList.toggle('active');content.style.maxHeight=isActive?content.scrollHeight+'px':null;});if(item.classList.contains('active')){content.style.maxHeight=content.scrollHeight+'px';}}});const contactForm=document.getElementById('contact-form');if(contactForm){let formMessageElement=contactForm.querySelector('.form-message');if(!formMessageElement){formMessageElement=document.createElement('div');formMessageElement.className='form-message';formMessageElement.setAttribute('aria-live','polite');const submitButton=contactForm.querySelector('button[type="submit"]');if(submitButton){submitButton.parentElement.insertAdjacentElement('beforebegin',formMessageElement);}else{contactForm.appendChild(formMessageElement);}}
 contactForm.addEventListener('submit',function(e){e.preventDefault();const submitButton=contactForm.querySelector('button[type="submit"]');const originalButtonText=submitButton.textContent;const formData={name:document.getElementById('name').value,email:document.getElementById('email').value,message:document.getElementById('message').value};if(formData.name.trim()===''||formData.email.trim()===''||formData.message.trim()===''){formMessageElement.textContent='Prosimo, izpolnite vsa polja.';formMessageElement.className='form-message error visible';return;}

index.html

@@ -55,7 +55,7 @@
 <div class="slide-text">
 <!-- === PORTRET === -->
 <figure class="slide-portrait">
-<img alt="Portret mag. Hermine Merc" decoding="async" height="400" loading="lazy" src="/assets/images/portret-small.webp" width="400"/>
+<img alt="Portret mag. Hermine Merc" decoding="async" height="250" loading="lazy" sizes="(max-width: 768px) 200px, 250px" src="/assets/images/portret-small.webp" srcset="/assets/images/portret-small.webp 250w, /assets/images/portret-small@2x.webp 500w" width="250"/>
 </figure>
 <h2>PSIHOTERAPEVT, VRHUNSKI STROKOVNJAK</h2>
 <!-- === SPREMEMBA: Dodan razred za stil besedila === -->

kontakt/index.html

@@ -65,7 +65,7 @@
 <!-- Leva stran: Podatki in zemljevid -->
 <div class="contact-details animate-on-scroll">
 <h2 class="section-title">Informacije za naročanje</h2>
-<img alt="Portret Hermina Merc" class="contact-portrait" decoding="async" height="400" loading="lazy" src="/assets/images/portret-small.webp" width="400"/>
+<img alt="Portret Hermina Merc" class="contact-portrait" decoding="async" height="250" loading="lazy" sizes="(max-width: 768px) 200px, 250px" src="/assets/images/portret-small.webp" srcset="/assets/images/portret-small.webp 250w, /assets/images/portret-small@2x.webp 500w" width="250"/>
 <div class="contact-info-item">
 <p class="info-data"><strong>Mag. HERMINA MERC</strong><br/>Psihoterapevt Specialist Klinični Psiholog</p>
 </div>