f495ee23c2
- Fix color contrast: change #179e83 to #148069 for WCAG AA compliance - Add ARIA attributes to mobile nav toggle (aria-expanded, aria-controls) - Implement focus trap on mobile menu with Escape key support - Add aria-hidden to decorative hero SVG - Add ARIA validation to contact form (aria-invalid, aria-describedby) - Fix touch target sizes (notification close button 48x48px) - Fix form session expiration by relaxing timestamp validation - Add cache busting (v1.1.0) to JS/CSS files - Update service worker cache version to force refresh Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 line
16 KiB
JavaScript
1 line
16 KiB
JavaScript
document.addEventListener("DOMContentLoaded",(function(){const e=document.getElementById("rotating-text"),t=document.getElementById("hero-subtitle");if(e&&t){const C=[{title:"Voted UK's No.1 Web Scraping Service",subtitle:"We are experts in web scraping, data analysis and competitor price monitoring."},{title:"UK-based Team",subtitle:"Our team is based in the UK for a clearer, faster response."},{title:"Professional Price Monitoring",subtitle:"Let us monitor your competitor's pricing and product ranges."},{title:"Bespoke Software Solutions",subtitle:"Let our experts build your ideal scraping solution."}];let T=0;function n(){e.style.opacity="0",t.style.opacity="0",setTimeout((()=>{e.textContent=C[T].title,t.textContent=C[T].subtitle,e.style.opacity="1",t.style.opacity="1",T=(T+1)%C.length}),500)}e.style.transition="opacity 0.5s ease-in-out",t.style.transition="opacity 0.5s ease-in-out",setTimeout((()=>{n(),setInterval(n,4e3)}),2e3),console.log("Hero text rotation initialized")}else console.log("Rotating text elements not found");const o=document.getElementById("nav-toggle"),a=document.getElementById("nav-menu");if(o&&a){const P=()=>a.querySelectorAll("a[href], button:not([disabled])"),B=e=>{if(!a.classList.contains("active"))return;const t=P(),n=t[0],o=t[t.length-1];"Tab"===e.key&&(e.shiftKey&&document.activeElement===n?(e.preventDefault(),o.focus()):e.shiftKey||document.activeElement!==o||(e.preventDefault(),n.focus())),"Escape"===e.key&&D()},M=()=>{a.classList.add("active"),o.classList.add("active"),o.setAttribute("aria-expanded","true"),document.addEventListener("keydown",B);const e=P()[0];e&&setTimeout((()=>e.focus()),100)},D=()=>{a.classList.remove("active"),o.classList.remove("active"),o.setAttribute("aria-expanded","false"),document.removeEventListener("keydown",B),o.focus()};o.addEventListener("click",(function(){"true"===o.getAttribute("aria-expanded")?D():M()}));document.querySelectorAll(".nav-link").forEach((e=>{e.addEventListener("click",(()=>{D()}))})),document.addEventListener("click",(e=>{!a.classList.contains("active")||a.contains(e.target)||o.contains(e.target)||D()}))}const s=document.getElementById("navbar");function i(){window.scrollY>50?s.classList.add("scrolled"):s.classList.remove("scrolled")}window.addEventListener("scroll",i);document.querySelectorAll('a[href^="#"]').forEach((e=>{e.addEventListener("click",(function(e){e.preventDefault();const t=this.getAttribute("href"),n=document.querySelector(t);if(n){const e=80,t=n.getBoundingClientRect().top+window.pageYOffset-e;window.scrollTo({top:t,behavior:"smooth"})}}))}));const r=document.querySelectorAll(".animate-on-scroll, .service-card, .feature, .step"),c=new IntersectionObserver((function(e){e.forEach((e=>{e.isIntersecting&&(e.target.classList.add("animated"),e.target.style.opacity="1",e.target.style.transform="translateY(0)",c.unobserve(e.target))}))}),{threshold:.1,rootMargin:"0px 0px -50px 0px"});r.forEach(((e,t)=>{e.style.opacity="0",e.style.transform="translateY(30px)",e.style.transition=`opacity 0.8s ease-out ${.1*t}s, transform 0.8s ease-out ${.1*t}s`,c.observe(e)}));document.querySelectorAll(".service-card").forEach((e=>{e.addEventListener("mouseenter",(function(){this.style.transform="translateY(-10px) scale(1.02)",this.style.boxShadow="0 20px 40px rgba(0, 0, 0, 0.15)"})),e.addEventListener("mouseleave",(function(){this.style.transform="translateY(0) scale(1)",this.style.boxShadow="0 4px 20px rgba(0, 0, 0, 0.08)"}))}));document.querySelectorAll(".btn-primary").forEach((e=>{e.addEventListener("mouseenter",(function(){this.style.animation="pulse 0.5s ease-in-out"})),e.addEventListener("mouseleave",(function(){this.style.animation="none"}))})),console.log("Enhanced animations initialized");let l=0,d=Date.now();document.addEventListener("mousemove",(()=>l+=1)),document.addEventListener("keydown",(()=>l+=2)),document.addEventListener("click",(()=>l+=3));const u=document.getElementById("form_timestamp");u&&(u.value=d);const m=document.querySelector(".contact-form form");function p(e,t){const n=document.getElementById(e),o=document.getElementById(e+"-error");n&&o&&(n.setAttribute("aria-invalid","true"),o.textContent=t)}function y(e){const t=document.getElementById(e),n=document.getElementById(e+"-error");t&&n&&(t.setAttribute("aria-invalid","false"),n.textContent="")}if(m){function g(e){const t=e.value.trim(),n=e.id;return"name"===n&&t.length<2?(p(n,"Please enter a valid name (at least 2 characters)"),!1):"email"!==n||f(t)?"company"===n&&t.length<2?(p(n,"Please enter your organisation name"),!1):"message"===n&&t.length<10?(p(n,"Please provide more details (at least 10 characters)"),!1):(y(n),!0):(p(n,"Please enter a valid email address"),!1)}m.querySelectorAll("[required]").forEach((e=>{e.addEventListener("blur",(function(){g(this)})),e.addEventListener("input",(function(){"true"===this.getAttribute("aria-invalid")&&g(this)}))})),m.addEventListener("submit",(function(e){e.preventDefault(),["name","email","company","message"].forEach(y);const t=new FormData(this),n=t.get("name"),o=t.get("email"),a=t.get("company"),s=t.get("message");let i=!0,r=null;if((!n||n.trim().length<2)&&(p("name","Please enter a valid name (at least 2 characters)"),i=!1,r||(r=document.getElementById("name"))),o&&f(o)||(p("email","Please enter a valid email address"),i=!1,r||(r=document.getElementById("email"))),(!a||a.trim().length<2)&&(p("company","Please enter your organisation name"),i=!1,r||(r=document.getElementById("company"))),(!s||s.trim().length<10)&&(p("message","Please provide more details (at least 10 characters)"),i=!1,r||(r=document.getElementById("message"))),i||!r)if(i){const e=this.querySelector('button[type="submit"]'),t=e.textContent;e.textContent="Sending...",e.disabled=!0;const n=document.getElementById("form_timestamp");n&&(n.value=Date.now());const o=new FormData(this);"undefined"!=typeof grecaptcha?grecaptcha.ready((()=>{grecaptcha.execute(window.recaptchaSiteKey,{action:"contact_form"}).then((n=>{o.set("recaptcha_response",n),o.set("interaction_token",btoa(JSON.stringify({score:Math.min(l,100),time:Date.now()-d}))),fetch("contact-handler.php",{method:"POST",headers:{"X-Requested-With":"XMLHttpRequest"},body:o}).then((e=>e.json())).then((e=>{e.success?(h("Message sent successfully! We'll get back to you soon.","success"),this.reset()):h(e.message||"There was an error sending your message. Please try again.","error")})).catch((e=>{console.error("Error:",e),h("There was an error sending your message. Please try again.","error")})).finally((()=>{e.textContent=t,e.disabled=!1}))}))})):(h("Security verification not available. Please refresh the page.","error"),e.textContent=t,e.disabled=!1)}else h(errors.join("<br>"),"error");else r.focus()}))}function f(e){return/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)}function h(e,t="info"){const n=document.querySelector(".notification");n&&n.remove();const o=document.createElement("div");o.className=`notification notification-${t}`,o.innerHTML=`\n <div class="notification-content">\n <span class="notification-message">${e}</span>\n <button class="notification-close">×</button>\n </div>\n `,o.style.cssText=`\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 10000;\n background: ${"success"===t?"#10b981":"error"===t?"#ef4444":"#3b82f6"};\n color: white;\n padding: 16px 20px;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n max-width: 400px;\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n opacity: 0;\n transform: translateX(100%);\n transition: all 0.3s ease;\n `,o.querySelector(".notification-content").style.cssText="\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n ",o.querySelector(".notification-close").style.cssText="\n background: none;\n border: none;\n color: white;\n font-size: 18px;\n cursor: pointer;\n padding: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n ",document.body.appendChild(o),setTimeout((()=>{o.style.opacity="1",o.style.transform="translateX(0)"}),100),o.querySelector(".notification-close").addEventListener("click",(()=>{v(o)})),setTimeout((()=>{document.body.contains(o)&&v(o)}),5e3)}function v(e){e.style.opacity="0",e.style.transform="translateX(100%)",setTimeout((()=>{document.body.contains(e)&&e.remove()}),300)}const b=document.querySelectorAll(".stat-number");function w(){b.forEach((e=>{const t=e.textContent.trim();if(console.log("Animating stat:",t),!t.includes("£2.5M+"))if(t.includes("99.8%"))!function(e,t,n,o=""){let a=t;const s=(n-t)/60,i=setInterval((()=>{a+=s,a>=n&&(a=n,clearInterval(i)),e.textContent=a.toFixed(1)+o}),50)}(e,0,99.8,"%");else if(t.includes("ISO 27001"))return}))}const x=document.querySelector(".hero-stats");if(x){const z=new IntersectionObserver((function(e){e.forEach((e=>{e.isIntersecting&&(console.log("Stats section is visible, starting animation"),setTimeout((()=>{w()}),500),z.unobserve(e.target))}))}),{threshold:.3});z.observe(x)}else console.log("Stats section not found");const E=document.querySelectorAll('img[loading="lazy"]');function L(){const e=document.createElement("canvas");return e.width=1,e.height=1,-1!==e.toDataURL("image/webp").indexOf("webp")}if("IntersectionObserver"in window){const O=new IntersectionObserver((function(e){e.forEach((e=>{if(e.isIntersecting){const t=e.target;t.dataset.src&&(t.src=t.dataset.src),t.dataset.webp&&L()&&(t.src=t.dataset.webp),t.classList.add("loaded"),t.style.opacity="1",O.unobserve(t)}}))}),{rootMargin:"50px 0px",threshold:.1});E.forEach((e=>{"lazy"===e.loading&&(e.style.opacity="0",e.style.transition="opacity 0.3s ease"),O.observe(e)}))}const S=document.createElement("button");function A(){window.scrollY>500?(S.style.opacity="1",S.style.visibility="visible"):(S.style.opacity="0",S.style.visibility="hidden")}let I;S.innerHTML="↑",S.className="scroll-top-btn",S.style.cssText="\n position: fixed;\n bottom: 30px;\n right: 30px;\n width: 50px;\n height: 50px;\n border: none;\n border-radius: 50%;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n font-size: 20px;\n cursor: pointer;\n opacity: 0;\n visibility: hidden;\n transition: all 0.3s ease;\n z-index: 1000;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n ",document.body.appendChild(S),S.addEventListener("click",(()=>{window.scrollTo({top:0,behavior:"smooth"})})),window.addEventListener("scroll",A);const k=[i,A];function q(e,t="image",n=null){const o=document.createElement("link");o.rel="preload",o.href=e,o.as=t,n&&(o.type=n),document.head.appendChild(o)}window.removeEventListener("scroll",i),window.removeEventListener("scroll",A),window.addEventListener("scroll",(function(){I||(I=setTimeout((()=>{k.forEach((e=>e())),I=null}),16))})),["assets/images/ukds-main-logo.png","assets/images/hero-data-analytics.svg"].forEach((e=>{L()?q(e.replace(/\.(jpg|jpeg|png)$/i,".webp"),"image","image/webp"):q(e,"image")}));document.querySelectorAll("[data-tooltip]").forEach((e=>{e.addEventListener("mouseenter",(function(){const e=this.getAttribute("data-tooltip"),t=document.createElement("div");t.className="tooltip",t.textContent=e,t.style.cssText="\n position: absolute;\n background: #1a1a1a;\n color: white;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 14px;\n white-space: nowrap;\n z-index: 10000;\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n ",document.body.appendChild(t);const n=this.getBoundingClientRect();t.style.left=n.left+n.width/2-t.offsetWidth/2+"px",t.style.top=n.top-t.offsetHeight-10+"px",setTimeout((()=>{t.style.opacity="1"}),100),this.addEventListener("mouseleave",(function(){t.style.opacity="0",setTimeout((()=>{document.body.contains(t)&&t.remove()}),300)}),{once:!0})}))})),"serviceWorker"in navigator&&window.addEventListener("load",(()=>{navigator.serviceWorker.register("/sw.js").then((e=>{console.log("SW registered: ",e)})).catch((e=>{console.log("SW registration failed: ",e)}))})),"performance"in window&&window.addEventListener("load",(function(){setTimeout((()=>{const e=performance.getEntriesByType("navigation")[0];e&&console.log("Page Load Performance:",{"DNS Lookup":Math.round(e.domainLookupEnd-e.domainLookupStart),"TCP Connection":Math.round(e.connectEnd-e.connectStart),"Request/Response":Math.round(e.responseEnd-e.requestStart),"DOM Processing":Math.round(e.domComplete-e.domLoading),"Total Load Time":Math.round(e.loadEventEnd-e.navigationStart)})}),0)})),console.log("UK Data Services website initialized successfully"),console.log("Performance optimizations: Lazy loading, WebP support, and preloading enabled"),function(){const e=document.querySelector(".blog-pagination"),t=document.querySelector(".articles-grid");if(!e||!t)return;const n=e.querySelector("button:first-child"),o=e.querySelector("button:last-child"),a=e.querySelector(".pagination-info");if(!n||!o||!a)return;const s=new URLSearchParams(window.location.search);let i=parseInt(s.get("page"))||1;const r=Array.from(t.querySelectorAll(".article-card")),c=Math.ceil(r.length/6);if(c<=1)return void(e.style.display="none");function l(e,s=!1){r.forEach((e=>{e.style.display="none"}));const i=6*(e-1),l=i+6;for(let e=i;e<l&&e<r.length;e++)r[e].style.display="block",r[e].style.animation="fadeInUp 0.6s ease forwards";a.textContent=`Page ${e} of ${c}`,n.disabled=e<=1,o.disabled=e>=c;const d=new URL(window.location);e>1?d.searchParams.set("page",e):d.searchParams.delete("page"),window.history.replaceState({},"",d),s&&t.scrollIntoView({behavior:"smooth",block:"start"})}n.addEventListener("click",(function(e){e.preventDefault(),i>1&&(i--,l(i,!0))})),o.addEventListener("click",(function(e){e.preventDefault(),i<c&&(i++,l(i,!0))})),l(i,!1);const d=document.createElement("style");d.textContent='\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n \n .article-card {\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n \n .article-card[style*="display: none"] {\n opacity: 0;\n transform: translateY(20px);\n }\n ',document.head.appendChild(d),console.log(`Blog pagination initialized: ${c} pages, ${r.length} articles`)}(),function(){const e=new IntersectionObserver(((e,t)=>{e.forEach((e=>{if(e.isIntersecting){const n=e.target;n.dataset.src&&(n.src=n.dataset.src,n.removeAttribute("data-src")),n.dataset.webp&&new Promise((e=>{const t=new Image;t.onload=t.onerror=()=>e(2===t.height),t.src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"}))&&(n.src=n.dataset.webp),t.unobserve(n)}}))}),{rootMargin:"50px 0px",threshold:.01});document.querySelectorAll("img[data-src]").forEach((t=>{e.observe(t)}))}(),"ontouchstart"in window&&(document.querySelectorAll('button, .btn, a[role="button"]').forEach((e=>{const t=e.getBoundingClientRect();(t.width<44||t.height<44)&&(e.style.minWidth="44px",e.style.minHeight="44px",e.style.display="inline-flex",e.style.alignItems="center",e.style.justifyContent="center")})),document.querySelectorAll(".nav-menu a, .social-links a").forEach((e=>{e.style.padding="12px 16px",e.style.margin="4px"})))})); |