1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5
5<script>
vendor: 441 bytes, lines 5-16
5(function (w, d, s, l, i) { 6 w[l] = w[l] || []; w[l].push({ 7 'gtm.start': 8 9 new Date().getTime(), event: 'gtm.js' 10 }); var f = d.getElementsByTagName(s)[0], 11 12 j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 13 14 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); 15 16 })(window, document, 'script', 'dataLayer', '
16GTM-NWDTM5KW
vendor: 3 bytes, line 16
16');
16</script>
16 17 <meta charset="UTF-8"> 18 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 19 <meta name="description" 20 content="NinjaScan.ai scans your website for accessibility and sustainability. Get instant WCAG 2.2 and eco-efficiency insights â make your site faster, inclusive, and planet-friendly."> 21 <link rel="icon" type="image/svg+xml" href="img/ninja-favicon.svg"> 22 <title>NinjaScan.ai</title> 23
23<script src="https://script.tapfiliate.com/tapfiliate.js" type="text/javascript" async></script>
23 24
24<script> 25 (function (t, a, p) { 26 t.TapfiliateObject = a; t[a] = t[a] || function () { 27 (t[a].q = t[a].q || []).push(arguments) 28 } 29 })(window, 'tap'); 30 31 tap('create', '60490-f5935f', { integration: 'stripe' }); 32 tap('detect'); 33 </script>
33 34 <!-- Tailwind CSS --> 35
35<script src="https://cdn.tailwindcss.com"></script>
35 36 <!-- Main CSS --> 37 <link rel="stylesheet" href="./css/style.css"> 38 39 <!-- Font Awesome --> 40 <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.5.1/css/all.css"> 41
41<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="e325721c-a92f-4b69-80b7-c8de3d151f30" 42 data-blockingmode="auto" type="text/javascript"></script>
42 43</head> 44 45<body class="bg-gray-200"> 46 <!-- Global accessibility live region --> 47 <div id="accessibility-announcer" aria-live="polite" aria-atomic="true" class="sr-only"></div> 48 <noscript><iframe src=https://www.googletagmanager.com/ns.html?id=GTM-NWDTM5KW height="0" width="0" 49 style="display:none;visibility:hidden"></iframe></noscript> 50 51 <!-- End Google Tag Manager (noscript) --> 52 <!-- Navbar --> 53 <!-- NAVIGATION --> 54 <nav class="border-gray-200 bg-[#EFEDFF] top-0 w-full z-50 fixed shadow-lg" role="navigation" 55 aria-label="Main navigation"> 56 <div class="flex flex-wrap items-center justify-between mx-auto py-4 px-6 md:px-16 lg:px-10 xl:px-8"> 57 58 <!-- Logo --> 59 <a href="/" class="flex items-center gap-2 underline"> 60 <img src="./img/logo/Capa_1.svg" alt="NinjaScan.ai logo" class="h-8 md:h-12 lg:h-16 w-auto"> 61 </a> 62 63 <!-- Toggle Button (for mobile) --> 64 <button id="menuToggle" class="xl:hidden group" aria-controls="mainMenu" 65 data-i18n-aria-label="nav.mobile.toggle.aria-lable" aria-expanded="false" aria-label="Toggle menu"> 66 <i class="fa-solid fa-bars text-3xl group-hover:text-gray-400 group-focus:text-black transition-colors"></i> 67 </button> 68 69 <!-- Menu --> 70 <div id="mainMenu" 71 class="hidden absolute top-full left-0 w-full bg-[#212b36] xl:static xl:bg-transparent flex-col xl:flex xl:flex-row xl:items-center xl:w-auto pb-8 xl:pb-0" 72 role="menubar"> 73 <ul class="font-medium flex flex-col xl:flex-row text-xl gap-2 xl:gap-0 py-4 w-full" id="menuItems"> 74 75 <!-- Standard Menu Items --> 76 <li><a href="/index.html" data-i18n="nav.home" role="menuitem" data-i18n-aria-label="nav.home.aria-label" 77 aria-label="Navigate to homepage" tabindex="0" 78 class="px-4 py-2 block underline rounded transition-all duration-200 hover:bg-gray-700 hover:underline focus:bg-gray-700 focus:underline focus:outline focus:outline-2 focus:outline-white focus:outline-offset-2">Home</a> 79 </li> 80 81 82 <li><a href="/about-us.html" role="menuitem" data-i18n="nav.about" data-i18n-aria-label="nav.about.aria-label" 83 aria-label="Learn more about us" tabindex="0" 84 class="px-4 py-2 block underline rounded transition-all duration-200 hover:bg-gray-700 hover:underline focus:bg-gray-700 focus:underline focus:outline focus:outline-2 focus:outline-white focus:outline-offset-2">About 85 Us</a></li> 86 87 <li><a href="/widget-integration-documentation.html" data-i18n="nav.docs" 88 data-i18n-aria-label="nav.docs.aria-label" role="menuitem" tabindex="0" aria-label="View Documentation" 89 class="px-4 py-2 block underline rounded transition-all duration-200 hover:bg-gray-700 hover:underline focus:bg-gray-700 focus:underline focus:outline focus:outline-2 focus:outline-white focus:outline-offset-2">Documentation</a> 90 </li> 91 92 93 <li><a href="support.html" data-i18n="nav.support" data-i18n-aria-label="nav.support.aria-label" 94 role="menuitem" tabindex="0" aria-label="Get help and support" 95 class="px-4 py-2 underline block rounded transition-all duration-200 hover:bg-gray-700 hover:underline focus:bg-gray-700 focus:underline focus:outline focus:outline-2 focus:outline-white focus:outline-offset-2">Support</a> 96 </li> 97 98 <li> 99 <a href="index.html#faq" data-i18n-aria-label="nav.faq.aria-label" data-i18n="nav.faqs" role="menuitem" 100 tabindex="0" aria-label="Jump to FAQ section" 101 class="px-4 py-2 block underline rounded transition-all duration-200 hover:bg-gray-700 hover:underline focus:bg-gray-700 focus:underline focus:outline focus:outline-2 focus:outline-white focus:outline-offset-2"> 102 FAQs 103 </a> 104 </li> 105 106 107 <li> 108 <a href="index.html#license" data-i18n-aria-label="nav.license.aria-label" data-i18n="nav.license" 109 role="menuitem" tabindex="0" aria-label="Jump to pricing and license options" 110 class="px-4 py-2 block rounded underline transition-all duration-200 hover:bg-gray-700 hover:underline focus:bg-gray-700 focus:underline focus:outline focus:outline-2 focus:outline-white focus:outline-offset-2"> 111 License 112 </a> 113 </li> 114 115 <!-- Language Switcher --> 116 <li class="flex items-center gap-2 px-4 py-2"> 117 <button 118 class="lang-btn !text-black underline hover:!text-black hover:underline focus:!text-black focus:underline focus:outline focus:outline-2 focus:outline-white focus:outline-offset-2" 119 data-lang="en" onclick="Translator.setLang('en')" data-i18n-aria-label="lang-btn.en.aria-label" 120 aria-label="Switch to English">EN</button>
121 <span class="!text-black" aria-hidden="true">|</span> 122 <button 123 class="lang-btn !text-black underline hover:!text-black hover:underline focus:!text-black focus:underline focus:outline focus:outline-2 focus:outline-white focus:outline-offset-2" 124 data-lang="de" onclick="Translator.setLang('de')" data-i18n-aria-label="lang-btn.de.aria-label" 125 aria-label="Switch to German">DE</button> 126 </li> 127 <li> 128 <a href="/login.html" data-i18n="nav.login" role="menuitem" data-i18n-aria-label="nav.login.aria-label" 129 tabindex="0" aria-label="Log in to your NinjaScan account" class="bg-[#624BFF] text-white px-4 py-2 block underline rounded-full font-semibold shadow-md transition duration-200 130 hover:bg-white hover:text-black hover:border hover:border-[#624BFF] 131 focus:outline focus:outline-2 focus:outline-white focus:outline-offset-2 text-center"> 132 Login 133 </a> 134 </li> 135 </ul> 136 </div> 137 </div> 138 </nav> 139 140 <!-- Accessibility Alert Countdown Bar --> 141 <div 142 class="Alertcountdown fixed top-0 w-full z-40 bg-red-700 text-white text-base sm:text-lg md:text-xl lg:text-lg xl:text-2xl font-semibold text-center py-2 px-4 shadow-md flex flex-wrap justify-center items-center gap-2"> 143 <span data-i18n="home.alert.accessibility"> 144 Accessibility compliance is now a legal requirement â Act now! 145 </span> 146 147 </div> 148 149 150 <!-- Hero Section --> 151 <section role="region" aria-labelledby="hero-heading" class="pt-0 xl:pt-10"> 152 <div class="min-h-[600px] sm:min-h-[700px] md:min-h-[500px] lg:min-h-[500px]"> 153 <div class="relative px-16 py-16 mt-16 min-h-[600px] sm:min-h-[700px] md:min-h-[500px] lg:min-h-[500px]" 154 aria-hidden="true"> 155 156 <!-- Background Overlay --> 157 <div class="absolute inset-0 z-0" style="background-size: cover; background-position: center;"> 158 <div class="absolute inset-0"></div> 159 </div> 160 161 <!-- Content Grid --> 162 <div class="relative z-10 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 items-start"> 163 164 <!-- Text & Seal of Excellence --> 165 <div class="md:col-span-1 lg:col-span-3 text-black"> 166 <div class="flex flex-col lg:flex-row lg:items-center gap-6"> 167 <!-- Text Block --> 168 <div> 169 <h1 class="py-4 font-bold text-xl lg:text-3xl xl:text-4xl leading-tight text-left text-[#624BFF]" data-i18n="about.hero.title"> 170 About Us â<br> Join the NinjaSCAN.ai Family 171 </h1> 172 173 <p 174 class="text-lg font-normal mt-4 text-[1.2rem] leading-[1.50] tracking-[0.08em] font-inter text-left text-black" data-i18n="about.hero.p1"> 175 At NinjaSCAN.ai, weâre on a mission to support and promote Eco-Friendly, EU Accessibility Act 176 compliant websites and digital 177 platforms. After all, our software was developed by 178 <strong>PixelFree Studio</strong> â a trusted name in front-end automation <strong>that has earned the 179 EU Seal of Excellence</strong>. 180 </p> 181 182 <p 183 class="text-lg font-normal mt-4 text-[1.2rem] leading-[1.50] tracking-[0.08em] font-inter text-left text-black" data-i18n="about.hero.p2"> 184 Get your free <strong>Accessibility Report</strong> â scan now! 185 </p> 186 </div> 187 188 <!-- Seal Image --> 189 <div class="flex-shrink-0"> 190 <img src="./img/Banner/eu-seal-of-excellence2.svg" alt="Image of EU Seal of Excellence" 191 class="w-[200px] h-auto mx-auto lg:mx-0"> 192 </div> 193 </div> 194 </div> 195 196 <!-- Award Image --> 197 <div class="md:col-span-1 lg:col-span-2 flex justify-center items-center mt-[15px] lg:ml-[40px]"> 198 <img src="./img/Banner/about-us-header.svg" alt="About us Header image" class="w-[443px] h-auto"> 199 </div> 200 201 <!-- Buttons --> 202 <div class="md:col-span-5 mt-6 flex flex-wrap justify-center lg:justify-start items-center gap-4 lg:gap-8"> 203 <button type="button" id="openModalBtn" class="openModalBtn group inline-flex items-center gap-2 px-6 py-3 text-lg font-semibold text-[#624BFF] bg-white border-2 border-[#624BFF] underline rounded-full shadow-sm 204 transition duration-200 hover:bg-[#624BFF] hover:text-white hover:underline 205 active:bg-[#624BFF] active:text-white active:border-[#624BFF] 206 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#624BFF]" aria-label="Test Your Website For Free" data-i18n-aria-label="home.button.request_report"> 207 208 <img src="./img/logo/ninjascan-logo-blue.svg" 209 class="w-10 filter transition duration-200 group-hover:brightness-0 group-hover:invert group-active:brightness-0 group-active:invert" 210 alt="NinjaScan.ai logo" role="presentation"> 211
212 <span data-i18n="home.button.request_test">Test Accessibility Now!</span> 213 </button> 214 215 <a href="https://pixelfreestudio.com/" class="group inline-flex items-center gap-2 px-6 py-3 text-lg font-semibold text-white bg-[#624BFF] underline rounded-full shadow-lg border border-transparent 216 transition duration-200 hover:bg-white hover:text-black hover:border-[#624BFF] 217 active:bg-white active:text-black active:border-[#624BFF] 218 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#624BFF]" role="button" 219 aria-label="Visit PixelFree Studio" data-i18n-aria-label="btn.nav.pixelfree.aria-label"> 220 <img src="./img/logo/pixelfree-logo-white.svg" 221 class="w-10 filter transition duration-200 group-hover:brightness-0 group-active:brightness-0" 222 alt="PixelFree Studio logo" role="presentation"> 223 <span data-i18n="about.hero.visit_pixel">Visit PixelFree Studio!</span> 224 </a> 225 </div> 226 227 </div> 228 </div> 229 </div> 230 </section> 231 232 <!-- About --> 233 <section role="region" aria-labelledby="how-it-works-heading" class="pt-0 xl:pt-0"> 234 <div class="bg-white px-16 py-9 rounded-lg shadow-md border border-gray-200 flex flex-col"> 235 <div class="font-normal text-[1.2rem] leading-[1.50] tracking-[0.01em] font-inter text-left"> 236 <h3 class="text-3xl font-bold text-[#624BFF] mb-6 mt-10" data-i18n="about.section.title">About Us</h3> 237 </div> 238 <div class="font-normal text-[1.2rem] leading-[1.50] tracking-[0.01em] font-inter text-left"> 239 <p data-i18n="about.section.p1">The European Accessibility Act (EAA), and the local laws of each EU member state became effective June 28, 240 2025, 241 mandating that <strong>all digital products and services within the EU be accessible to individuals with 242 disabilities.</strong> 243 <br>The consequences of non-compliance? Hefty fines (starting at â¬10,000), multi-country 244 enforcement, and even loss of access to the EU digital market. 245 </p><br> 246 <p data-i18n="about.section.p2">But compliance isnât just about avoiding penalties, itâs smart business. With 87 million people in the EU 247 (and over 1.3 billion worldwide) living with some form of disability, accessible design directly translates 248 to broader reach, stronger loyalty, and higher conversion.</p><br> 249 <p data-i18n="about.section.p3">Weâre also <strong>deeply committed to the environment</strong>. Accessible websites and platforms load 250 faster 251 and use considerably less energy. Moreover, they perform better in search and create smoother user experiences 252 across the board. NinjaSCAN.ai more than pays for itself in savings and improved results.</p><br> 253 <p data-i18n="about.section.p4">Importantly, NinjaSCAN.ai goes way beyond the competition, diving deep into the EAAâs <strong>EN 301 549 254 standard</strong>, automatically detecting and localizing over 160 types of accessibility issuesâright down 255 to the line of code.<br> Then, depending on your platform, many fixes are just a few clicks away. Others only 256 review for WCAG or ADA violations, potentially leaving their clients exposed to the EAAâs stricter standards. 257 </p><br> 258 <p data-i18n="about.section.p5">What shocked us most is that <strong>over 90% of the websites we review have excessive violations!</strong> 259 For example, WordPress, Shopify, Squarespace, and other builder platforms do not use semantic html and canât 260 be read by an eReader. <strong>NinjaSCAN.ai not only helps you identify problems, it provides 261 solutions</strong>. Even if the problem is your platform, we can help you fix your entire website using 262 trusted partners and PixlFree Studioâs front-end automation software. </p><br> 263 <p class="mb-12" data-i18n="about.section.p6"><strong>PixelFree Studio</strong> has always believed that automation should empower 264 creatorsânot limit them. With NinjaSCAN.ai, <br>we bring that same belief to the forefront of eco-friendliness 265 and 266 accessibility, helping businesses thrive in a green and inclusive digital future.</p> 267 </div> 268 </div> 269 </section> 270 271 272 <section class="bg-[#624BFF] pb-8 px-4 md:px-12 lg:px-24"> 273 <div class="flex flex-col sm:flex-row items-center justify-center text-white gap-4 sm:gap-8 text-left flex-wrap"> 274 <!-- Logos Group --> 275 <div class="flex items-center space-x-2 sm:space-x-4 mt-6">
276 <img src="/img/ninjascalogo_white.png" alt="NinjaSCAN.AI Logo" role="presentation" 277 class="h-12 sm:h-16 w-auto hidden sm:inline"> 278 <span class="text-2xl sm:text-4xl font-extrabold leading-none hidden sm:inline">Ã</span> 279 <img src="/img/PixelFree Studio logo-HD-white 1.png" alt="PixelFree Studio Logo" role="presentation" 280 class="h-14 sm:h-20 w-auto max-w-[140px]"> 281 </div> 282 <!-- Text Group --> 283 <div class="leading-snug text-xl lg:text-2xl mt-6 sm:mt-0 sm:ml-8"> 284 <p class="font-semibold m-0 p-0" data-i18n="home.pixelfree.product">"NinjaSCAN.AI is a product of PixelFree 285 Studio â</p> 286 <p class="m-0 p-0" data-i18n="home.pixelfree.slogan">developed for digital accessibility and sustainable web 287 performance."</p> 288 </div> 289 </div> 290 </section> 291 292 293 <!-- Pricing Section --> 294 <section role="region" id="license" aria-labelledby="pricing-heading" 295 class="bg-[#E5E7EB] mt-6 px-4 md:px-12 lg:px-12 xl:px-24 py-0"> 296 <div class="text-center pb-10"> 297 <h2 id="pricing-heading" class="text-3xl font-bold text-[#624BFF] mb-4" data-i18n="home.pricing.title">Choose Your Plan</h2> 298 <p class="text-lg text-gray-600"><strong><span data-i18n="home.pricing.subtitle">Transparent annual pricing. No surprises.</span></strong></p> 299 <p class="text-lg text-gray-600">â <span data-i18n="home.pricing.feature1">A detailed technical Accessibility Report</span></p> 300 <p class="text-lg text-gray-600">â <span data-i18n="home.pricing.feature2">Integrable Accessibility Widget</span></p> 301 <p class="text-lg text-gray-600">â <span data-i18n="home.pricing.feature3">Accessibility Statement Generator</span></p> 302 <p class="text-lg text-gray-600">â <span data-i18n="home.pricing.feature4">Full compliance with all legal accessibility standards</span></p> 303 <p class="text-lg text-gray-600">â <span data-i18n="home.pricing.feature5">Eco Scanner reduces your carbon footprint</span></p> 304 </div> 305 <!-- Microsoft Recommendation Badge --> 306 <div class="text-center mb-10"> 307 <img src="./img/recommended_by_microsoft2.png" alt="Recommended by Microsoft" 308 class="mx-auto h-24 lg:h-32 xl:h-40 w-auto"> 309 </div> 310 311 <!-- Toggle --> 312 <div class="flex items-center justify-center space-x-4 mb-12 text-lg lg:text-lg xl:text-xl"> 313 <span class="font-medium" data-i18n="home.pricing.toggle.monthly">Monthly</span> 314 315 <label class="inline-flex items-center cursor-pointer relative"> 316 <span id="billingToggleLabel" class="sr-only" data-i18n="home.pricing.toggle.label"> 317 Billing frequency: toggle between monthly and annual 318 </span> 319 320 <input type="checkbox" checked class="sr-only peer" id="billingToggle" role="switch" aria-checked="true" 321 aria-labelledby="billingToggleLabel"> 322 323 <div class="w-12 h-7 bg-gray-300 rounded-full peer peer-checked:bg-[#624BFF] transition duration-200"></div> 324 <div 325 class="absolute left-0 top-0 w-7 h-7 bg-white border border-gray-300 rounded-full shadow transform transition-transform duration-200 peer-checked:translate-x-5"> 326 </div> 327 </label> 328 <span class="font-medium text-black-600" data-i18n="home.pricing.toggle.annual"> 329 Annually 330 </span>
331 <span class="inline-block bg-green-100 text-black font-medium text-sm px-3 py-1 rounded-full"> 332 -20% 333 </span> 334 </div> 335 336 <!-- Plans --> 337 <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 lg:gap-6 text-lg lg:text-lg xl:text-xl"> 338 <!-- Pro --> 339 <div class="flex flex-col bg-white rounded-xl shadow-md overflow-hidden"> 340 <div class="bg-[#624BFF] text-white px-4 py-4 text-center"> 341 <h3 class="text-xl lg:text-xl xl:text-2xl font-bold" data-i18n="home.pricing.plan.pro">Pro</h3> 342 <p class="text-sm lg:text-sm xl:text-base" data-i18n="home.pricing.plan.pro.desc">Basic compliance for small 343 businesses</p> 344 </div> 345 <div class="bg-gray-100 py-5 text-center"> 346 <p class="line-through text-2xl text-gray-400 pl-3">â¬699</p> 347 <p class="price-actual text-2xl lg:text-3xl xl:text-4xl font-bold text-[#624BFF]" data-monthly="â¬49" 348 data-yearly="â¬490" aria-live="polite">â¬490 <span>/ Jahr</span></p> 349 <p class="subscription-period text-xs lg:text-sm xl:text-base text-gray-500 mt-1" 350 data-i18n="home.pricing.subscription.period" style="display: none;">12-month subscription</p> 351 <p class="text-sm lg:text-base xl:text-lg text-gray-600" data-i18n="home.pricing.plan.pro.limit">Up to 75,000 352 visitors / month</p> 353 </div> 354 <div class="p-4 lg:p-5 mt-auto flex justify-center"> 355 <a href="signup.html" onclick="selectPlan('pro')" 356 class="group inline-flex items-center justify-center gap-3 min-w-[220px] px-6 lg:px-7 xl:px-8 py-3 text-base lg:text-lg xl:text-xl font-semibold text-white bg-[#624BFF] underline rounded-full shadow-md transition hover:bg-white hover:text-black hover:border-[#624BFF] border border-transparent" 357 role="button" aria-label="Get Full Access Now"> 358 <img src="/img/logo/ninjascan-logo.svg" class="w-6 h-6 transition duration-200 group-hover:invert" alt="" 359 role="presentation"> 360 Subscribe Now 361 </a> 362 </div> 363 </div> 364 365 <!-- Pro Plus --> 366 <div 367 class="flex flex-col bg-white rounded-xl shadow-md overflow-hidden border border-[#624BFF] ring-2 ring-[#624BFF] relative"> 368 <span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full" 369 data-i18n="home.pricing.recommendation">Recommendation</span> 370 <div class="bg-[#624BFF] text-white px-4 py-4 text-center"> 371 <h3 class="text-xl lg:text-xl xl:text-2xl font-bold" data-i18n="home.pricing.plan.proplus">Pro Plus</h3> 372 <p class="text-sm lg:text-sm xl:text-base" data-i18n="home.pricing.plan.proplus.desc">Advanced compliance for 373 mid-sized companies</p> 374 </div> 375 <div class="bg-gray-100 py-5 text-center"> 376 <p class="line-through text-2xl text-gray-400">â¬1,699</p> 377 <p class="price-actual text-2xl lg:text-3xl xl:text-4xl font-bold text-[#624BFF]" data-monthly="â¬99" 378 data-yearly="â¬990" aria-live="polite">â¬990 <span>/ Jahr</span></p> 379 <p class="subscription-period text-xs lg:text-sm xl:text-base text-gray-500 mt-1" 380 data-i18n="home.pricing.subscription.period" aria-live="polite" style="display: none;" aria-live="polite"> 381 12-month subscription</p> 382 <p class="text-sm lg:text-base xl:text-lg text-gray-600" data-i18n="home.pricing.plan.proplus.limit">Up to 383 150,000 visitors / month</p> 384 </div> 385 <div class="p-4 lg:p-5 mt-auto flex justify-center"> 386 <a href="signup.html" onclick="selectPlan('proplus')" 387 class="group inline-flex items-center justify-center gap-3 min-w-[220px] px-6 lg:px-7 xl:px-8 py-3 text-base lg:text-lg xl:text-xl font-semibold text-white bg-[#624BFF] underline rounded-full shadow-md transition hover:bg-white hover:text-black hover:border-[#624BFF] border border-transparent" 388 role="button" aria-label="Get Full Access Now"> 389 <img src="/img/logo/ninjascan-logo.svg" class="w-6 h-6 transition duration-200 group-hover:invert" alt="" 390 role="presentation"> 391 Subscribe Now 392 </a> 393 </div> 394 </div> 395 396 <!-- Ultimate --> 397 <div class="flex flex-col bg-white rounded-xl shadow-md overflow-hidden"> 398 <div class="bg-[#624BFF] text-white px-4 py-4 text-center"> 399 <h3 class="text-xl lg:text-xl xl:text-2xl font-bold" data-i18n="home.pricing.plan.ultimate">Ultimate</h3> 400 <p class="text-sm lg:text-sm xl:text-base" data-i18n="home.pricing.plan.ultimate.desc">Full compliance for 401 large organizations</p> 402 </div> 403 <div class="bg-gray-100 py-5 text-center"> 404 <p class="line-through text-2xl text-gray-400 pl-3">â¬3,599</p> 405 <p class="price-actual text-2xl lg:text-3xl xl:text-4xl font-bold text-[#624BFF]" data-monthly="â¬199"
406 data-yearly="â¬1990" aria-live="polite">â¬1990 <span>/ Jahr</span></p> 407 <p class="subscription-period text-xs lg:text-sm xl:text-base text-gray-500 mt-1" 408 data-i18n="home.pricing.subscription.period" style="display: none;" aria-live="polite">12-month subscription 409 </p> 410 <p class="text-sm lg:text-base xl:text-lg text-gray-600" data-i18n="home.pricing.plan.ultimate.limit">Up to 411 500,000 visitors / month</p> 412 </div> 413 <div class="p-4 lg:p-5 mt-auto flex justify-center"> 414 <a href="signup.html" onclick="selectPlan('ultimate')" 415 class="group inline-flex items-center justify-center gap-3 min-w-[220px] px-6 lg:px-7 xl:px-8 py-3 text-base lg:text-lg xl:text-xl font-semibold text-white bg-[#624BFF] underline rounded-full shadow-md transition hover:bg-white hover:text-black hover:border-[#624BFF] border border-transparent" 416 role="button" aria-label="Get Full Access Now"> 417 <img src="/img/logo/ninjascan-logo.svg" class="w-6 h-6 transition duration-200 group-hover:invert" alt="" 418 role="presentation"> 419 Subscribe Now 420 </a> 421 </div> 422 </div> 423 </div> 424 <div class="text-black px-4 py-4 text-center"> 425 <p class="text-md lg:text-md xl:text-base"><strong>Enterprise Solution </strong>for tailored high-traffic needs 426 </p> 427 <p class="text-sm lg:text-sm xl:text-base">Over 500,000 visitors / Month</p> 428 </div> 429 430 <div class="p-4 lg:p-5 mt-auto flex justify-center"> 431 <a href="/support.html" class="group inline-flex items-center gap-2 px-6 py-3 text-lg font-semibold text-[#624BFF] bg-white border-2 border-[#624BFF] underline rounded-full shadow-sm 432 transition duration-200 hover:bg-[#624BFF] hover:text-white hover:underline 433 active:bg-[#624BFF] active:text-white active:border-[#624BFF] 434 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#624BFF]" role="button" 435 aria-label="Get Full Access Now"> 436 <img src="/img/logo/ninjascan-logo-blue.svg" 437 class="w-10 filter transition duration-200 group-hover:brightness-0 group-hover:invert group-active:brightness-0 group-active:invert" 438 alt="" role="presentation"> 439 Contact Sales 440 </a> 441 442 </div> 443 444 </section> 445 446<!-- 447 <section id="faq" role="region" aria-labelledby="faq-heading" class="px-4 md:px-12 lg:px-12 xl:px-24 py-2"> 448 <h2 id="faq-heading" class="text-2xl sm:text-3xl font-bold text-center text-[#624BFF] mb-4" 449 data-i18n="home.faq.title"> 450 451 </h2> 452 453 <div class="divide-y divide-gray-400 mt-16"> 454 <details class="group border-b border-gray-200 pb-6"> 455 <summary 456 class="flex justify-between items-center cursor-pointer list-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[#624BFF]"> 457 <span class="text-left text-lg sm:text-xl font-semibold text-gray-800" data-i18n="home.faq.q1.question">What 458 platforms does NinjaSCAN.ai support?</span> 459 <span class="text-[#624BFF] text-2xl transition-transform duration-300 group-open:rotate-180" 460 aria-hidden="true">+</span> 461 </summary> 462 <div class="mt-4 text-gray-800 text-xl"> 463 <p data-i18n="home.faq.q1.answer"> 464 We can audit any website. Just provide your name, email address, and URL. We'll perform a scan and send your 465 results. 466 With a subscription, you receive a full report including code-level remedies. 467 You'll also get a <strong>FREE Accessibility Report</strong> to include on your site while you're working on 468 fixes. 469 </p> 470 </div> 471 </details> 472 473 <details class="group border-b border-gray-200 pb-6"> 474 <summary 475 class="flex justify-between items-center cursor-pointer list-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[#624BFF]"> 476 <span class="text-left text-lg sm:text-xl font-semibold text-gray-800" data-i18n="home.faq.q2.question">
477 How does NinjaSCAN.AI support website accessibility requirements? 478 </span> 479 <span class="text-[#624BFF] text-2xl transition-transform duration-300 group-open:rotate-180" 480 aria-hidden="true">+</span> 481 </summary> 482 <div class="mt-4 text-gray-800 text-xl"> 483 <p data-i18n="home.faq.q2.answer"> 484 Our tool meets all the requirements of the BFSG and the European Web Accessibility Directive. This makes the accessibility check essential, especially for companies from June 2025 onwards. 485 </p> 486 </div> 487 </details> 488 489 <details class="group border-b border-gray-200 pb-6"> 490 <summary 491 class="flex justify-between items-center cursor-pointer list-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[#624BFF]"> 492 <span class="text-left text-lg sm:text-xl font-semibold text-gray-800" data-i18n="home.faq.q3.question"> 493 Do I need developers to implement the optimizations? 494 </span> 495 <span class="text-[#624BFF] text-2xl transition-transform duration-300 group-open:rotate-180" 496 aria-hidden="true">+</span> 497 </summary> 498 <div class="mt-4 text-gray-800 text-xl"> 499 <p data-i18n="home.faq.q3.answer"> 500 Not necessarily. Our system fixes many problems automatically. For more complex issues, we provide clear recommendations for action that you can implement internally or with agencies. 501 </p> 502 </div> 503 </details> 504 505 <details class="group border-b border-gray-200 pb-6"> 506 <summary class="flex justify-between items-center cursor-pointer list-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[#624BFF]"> 507 <span class="text-left text-lg sm:text-xl font-semibold text-gray-800" data-i18n="home.faq.q3.question">Do I still need developers to make changes?</span> 508 <span class="text-[#624BFF] text-2xl transition-transform duration-300 group-open:rotate-180" aria-hidden="true">+</span> 509 </summary> 510 <div class="mt-4 text-gray-700"> 511 <p data-i18n="home.faq.q3.answer"> 512 Our auto-fix system resolves most accessibility issues on its own. 513 For more complex updates, we offer clear recommendations that you or your dev team can easily apply. 514 </p> 515 </div> 516 </details> 517 518 <details class="group border-b border-gray-200 pb-6"> 519 <summary 520 class="flex justify-between items-center cursor-pointer list-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[#624BFF]"> 521 <span class="text-left text-lg sm:text-xl font-semibold text-gray-800" data-i18n="home.faq.q4.question">Is the accessibility report really free?</span> 522 <span class="text-[#624BFF] text-2xl transition-transform duration-300 group-open:rotate-180" 523 aria-hidden="true">+</span> 524 </summary> 525 <div class="mt-4 text-gray-800 text-xl"> 526 <p data-i18n="home.faq.q4.answer"> 527 Yes, every URL you enter in the scan is automatically checked â you receive a free summary report on your website's accessibility. If you need a comprehensive check of all details, you can easily choose the package that suits you best. 528 </p> 529 </div> 530 </details> 531 532 <details class="group border-b border-gray-200 pb-6"> 533 <summary 534 class="flex justify-between items-center cursor-pointer list-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[#624BFF]"> 535 <span class="text-left text-lg sm:text-xl font-semibold text-gray-800" data-i18n="home.faq.q5.question"> 536 Does NinjaSCAN.AI also evaluate energy consumption? 537 </span> 538 <span class="text-[#624BFF] text-2xl transition-transform duration-300 group-open:rotate-180" 539 aria-hidden="true">+</span> 540 </summary> 541 <div class="mt-4 text-gray-800 text-xl"> 542 <p data-i18n="home.faq.q5.answer"> 543 Yes â our Eco Mode analyzes your site's carbon footprint and provides specific optimization suggestions for reduction. This not only improves your environmental footprint, but also your performance and SEO. 544 </p> 545 </div> 546 </details> 547 548 <details class="group border-b border-gray-200 pb-6"> 549 <summary 550 class="flex justify-between items-center cursor-pointer list-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[#624BFF]">
551 <span class="text-left text-lg sm:text-xl font-semibold text-gray-800" data-i18n="home.faq.q6.question"> 552 Can I embed the accessibility test widget on any website? 553 </span> 554 <span class="text-[#624BFF] text-2xl transition-transform duration-300 group-open:rotate-180" 555 aria-hidden="true">+</span> 556 </summary> 557 <div class="mt-4 text-gray-800 text-xl"> 558 <p data-i18n="home.faq.q6.answer"> 559 Yes â our widget is lightweight, WCAG-compliant, and works independently of any system. 560 </p> 561 </div> 562 </details> 563 564 <details class="group border-b border-gray-200 pb-6"> 565 <summary 566 class="flex justify-between items-center cursor-pointer list-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[#624BFF]"> 567 <span class="text-left text-lg sm:text-xl font-semibold text-gray-800" data-i18n="home.faq.q7.question"> 568 Is NinjaSCAN.AI really WCAG 2.2 compliant? 569 </span> 570 <span class="text-[#624BFF] text-2xl transition-transform duration-300 group-open:rotate-180" 571 aria-hidden="true">+</span> 572 </summary> 573 <div class="mt-4 text-gray-800 text-xl"> 574 <p data-i18n="home.faq.q7.answer"> 575 Absolutely. Our scan module meets the technically requirements of WCAG 2.2, EN 301 549, and WSG 1.0 â and is continuously updated. 576 </p> 577 </div> 578 </details> 579 </div> 580 </section> 581--> 582 583 <div id="popupModal" 584 class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-start pt-[150px] z-50 hidden overflow-y-auto" 585 role="dialog" aria-modal="true" aria-labelledby="modalTitle"> 586 <div class="bg-white rounded-2xl p-8 max-w-xl w-full shadow-2xl relative max-h-[calc(100vh-80px)] overflow-y-auto" 587 role="document"> 588 <button type="button" class="absolute underline top-3 right-4 text-gray-500 hover:text-black text-xl" 589 id="closeModalBtn" data-i18n-aria-label="btn.closeDialog.aria-label" aria-label="Close dialog">×</button> 590 591 <!-- Loading Overlay --> 592 <div id="scanLoadingOverlay" 593 class="hidden absolute inset-0 bg-white bg-opacity-90 flex flex-col items-center justify-center rounded-2xl z-50"> 594 <div class="text-center"> 595 <h3 class="text-xl font-bold text-[#624BFF] mb-6"><span id="scanLoadingTitle">Scanning Your 596 Website</span></h3> 597 598 <!-- Spinner --> 599 <div class="relative mb-6"> 600 <div class="w-16 h-16 border-4 border-gray-200 border-t-[#624BFF] rounded-full animate-spin mx-auto"> 601 </div> 602 <div class="absolute inset-0 flex items-center justify-center"> 603 <div class="w-8 h-8 bg-[#624BFF] rounded-full opacity-20 animate-pulse"></div> 604 </div> 605 </div> 606 607 <p id="scanStatus" class="text-gray-700 text-lg font-medium transition-all duration-500 ease-in-out"> 608 Initializing scan...</p> 609 </div> 610 </div> 611 612 <p 613 class="text-base text-gray-700 font-medium mb-6 text-center leading-relaxed bg-[#f5f4ff] rounded-md px-4 py-3 border border-[#d6d4ff] shadow-sm"> 614 <span class="text-lg font-bold text-[#624BFF] block mb-1" data-i18n="home.modal.why">Why 615 NinjaSCAN.ai?</span> 616 <span data-i18n="home.modal.description"> We scan deeper than any other tools we know of â analyzing 617 <strong>structure</strong>, <strong>usability</strong>, <strong>contrast</strong>, and 618 <strong>interaction</strong>.<br><br> 619 Our reports include both <strong class="text-[#000]">WCAG 2.2</strong> and the <strong class="text-[#000]">EU 620 Accessibility Act (EAA)</strong> standard 621 <strong class="text-[#000]">EN 301 549</strong> â ensuring full legal compliance.</span> 622 </p> 623 624 <form id="popupForm" class="space-y-4"> 625 <div> 626 <label for="name" class="block font-semibold" data-i18n="home.form.label.name">Name</label> 627 <input type="text" id="name" name="name" required 628 class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:outline-2 focus:outline-[#00b894] focus:outline-offset-2 focus:bg-[#f0fdf4]" /> 629 </div> 630 <div> 631 <label for="email" class="block font-semibold" data-i18n="home.form.label.email">Email</label> 632 <input type="email" id="email" name="email" required 633 class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:outline-2 focus:outline-[#00b894] focus:outline-offset-2 focus:bg-[#f0fdf4]" /> 634 </div> 635 <div>
636 <label for="url" class="block font-semibold" data-i18n="home.form.label.website_url">Website 637 URL</label> 638 <input type="url" id="url" name="url" required placeholder="https://www.weather.com" 639 class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:outline-2 focus:outline-[#00b894] focus:outline-offset-2 focus:bg-[#f0fdf4]" /> 640 </div> 641 <button type="submit" 642 class="bg-[#624BFF] text-white w-full py-2 rounded hover:!bg-white hover:!text-black hover:!border hover:!border-[#624BFF] focus:!bg-white focus:!text-black focus:!border focus:!border-[#624BFF]" 643 data-i18n="home.form.button.submit"> 644 Test My Website Now 645 </button> 646 </form> 647 </div> 648 </div> 649 650 </div> 651 652 <!-- Footer Section --> 653 <footer role="contentinfo" 654 class="bg-[#EFEDFF] items-center px-20 p-8 flex flex-col lg:flex-row flex-wrap gap-4 lg:gap-1 justify-between text-white"> 655 656 <!-- Logo & Info --> 657 <div class="pr-4 text-center lg:text-left"> 658 <h2 class="text-lg flex gap-1 justify-center lg:justify-start items-center font-bold"> 659 <img src="./img/logo/Capa_1.svg" alt="NinjaScan.ai logo" class="w-36 h-auto"> 660 </h2> 661 <p class="text-xs mt-2 text-black "> 662 <span class="font-bold">NinjaSCAN.ai</span><br> 663 <span data-i18n="footer.info.by">By PixelFree Studio</span><br> 664 <span>KaiserstraÃe 26A</span><br> 665 <span>66111 Saarbrücken</span><br> 666 <span data-i18n="footer.address.country">Germany</span><br> 667 <span>[email protected]</span><br> 668 <span data-i18n="footer.copyright">© All Rights Reserved</span> 669 </p> 670 </div> 671 672 <!-- Footer Navigation --> 673 <nav data-i18n-aria-label="footer.nav.aria-label" aria-label="Footer Navigation" 674 class="self-start ml-8 flex flex-wrap gap-6 justify-center lg:justify-start items-center text-gray-400 text-sm self-center lg:self-start"> 675 676 <!-- Navigation Links --> 677 <ul class="flex flex-wrap gap-4" role="list"> 678 <li><a href="/index.html" data-i18n-aria-label="footer.home.aria-label" aria-label="Go to Home" 679 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors" 680 data-i18n="footer.nav.home"> 681 Home</a></li> 682 <li><a href="/AccessibilityStatement.html" data-i18n-aria-label="footer.accessibility.aria-label" 683 aria-label="Go to the Accessibility Statement" 684 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors"> 685 Accessibility Statement</a></li> 686 <li><a href="/support.html" data-i18n-aria-label="footer.support.aria-label" aria-label="Go to Support" 687 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors" 688 data-i18n="footer.nav.support"> 689 Support</a></li> 690 <li class="en-only"><a href="/privacy-policy.html" data-i18n-aria-label="footer.privacy.policy.aria-label" 691 aria-label="View Privacy Policy" 692 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors" 693 data-i18n="footer.nav.privacy"> 694 Privacy Policy</a></li> 695 <li class="en-only"><a href="/gdpr-privacy-policy.html" 696 data-i18n-aria-label="footer.gdpr.privacy.policy.aria-label" aria-label="View Privacy Policy" 697 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors"> 698 GDPR Privacy Policy</a></li> 699 <li class="en-only"><a href="/refund.html" data-i18n-aria-label="footer.refund.aria-label" 700 aria-label="View Refund Policy" 701 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors" 702 data-i18n="footer.nav.refund"> 703 Refund Policy</a></li> 704 <li class="en-only"><a href="/terms.html" data-i18n-aria-label="footer.terms.aria-label" 705 aria-label="View Terms of Service" 706 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors" 707 data-i18n="footer.nav.terms"> 708 Terms of Service</a></li> 709 <li class="de-only hidden"><a href="/agb.html" data-i18n-aria-label="footer.agb.aria-label" 710 aria-label="View AGB" 711 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors" 712 data-i18n="footer.nav.agb"> 713 AGB</a></li> 714 <li class="de-only hidden"><a href="/impressum.html" data-i18n-aria-label="footer.impressum.aria-label" 715 aria-label="View Impressum" 716 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors" 717 data-i18n="footer.nav.impressum"> 718 Impressum</a></li> 719 <li class="de-only hidden"><a href="/widerrufsbelehrung.html" 720 data-i18n-aria-label="footer.widerrufsbelehrung.aria-label" aria-label="View Widerrufsbelehrung" 721 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors" 722 data-i18n="footer.nav.widerruf"> 723 Widerrufsbelehrung</a></li> 724 <li class="de-only hidden"><a href="/online-shop-datenschutz.html" 725 data-i18n-aria-label="footer.datenschutz.aria-label" aria-label="View Datenschutz" 726 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors"> 727 Datenschutz</a></li> 728 <li class="de-only hidden"><a href="/apps-datenschutz.html" 729 data-i18n-aria-label="footer.datenschutz.software.aria-label" aria-label="View Datenschutz Software"
730 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors"> 731 Datenschutz Software</a></li> 732 <li><a href="/cookie-policy.html" data-i18n-aria-label="footer.cookie.policy.aria-label" 733 aria-label="View Cookie Policy" 734 class="text-black underline hover:text-gray-500 focus:!text-white focus:outline-none focus:ring-2 focus:ring-[#624BFF] focus:ring-offset-2 transition-colors" 735 data-i18n="footer.nav.cookie"> 736 Cookie Policy</a></li> 737 </ul> 738 739 </nav> 740 741 <!-- Social + CTA Button --> 742 <div class="py-5 flex flex-col lg:flex-row flex-wrap items-center gap-6 justify-center w-full"> 743 744 <!-- Social Icons --> 745 <!-- 746 <div class="text-gray-500 flex gap-6 items-center flex-wrap justify-center" aria-label="Follow us on social media"> 747 <span class="text-xs">Follow Us On</span> 748 <div class="flex gap-6 text-lg"> 749 <span aria-hidden="true" class="text-gray-400">â</span> 750 751 752 <a href="https://twitter.com" aria-label="NinjaScan.ai on Twitter" 753 class="hover:text-white underline focus:!text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 transition-colors"> 754 <i class="fa-brands fa-x-twitter"></i> 755 </a> 756 <a href="https://instagram.com" aria-label="NinjaScan.ai on Instagram" 757 class="hover:text-white underline focus:!text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 transition-colors"> 758 <i class="fa-brands fa-instagram"></i> 759 </a> 760 <a href="https://facebook.com" aria-label="NinjaScan.ai on Facebook" 761 class="hover:text-white underline focus:!text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 transition-colors"> 762 <i class="fa-brands fa-facebook-f"></i> 763 </a> 764 765 <span aria-hidden="true" class="text-gray-400">â</span> 766 </div> 767 </div> 768 --> 769 </div> 770 </footer> 771 772 773 774 775 776 777 778 <!-- Main JavaScript --> 779 <!--
779<script src="./js/accessibility.js"></script>
779--> 780
780<script src="./js/announcer.js"></script>
780 781
781<script src="./js/script.js"></script>
781 782
782<script src="./js/nav.js"></script>
782 783
783<script src="./js/scan-redirect.js"></script>
783 784
784<script src="./js/modal.js"></script>
784 785
785<script src="./js/translator.js"></script>
785 786
786<script> 787 Translator.init('/i18n/translations.json'); 788 789 </script>
789 790 791
791<script> 792 document.addEventListener("DOMContentLoaded", function () { 793 const toggle = document.getElementById("billingToggle"); 794 const prices = document.querySelectorAll(".price-actual"); 795 796 const updatePrices = (checked) => { 797 prices.forEach((el) => { 798 const monthly = el.dataset.monthly; 799 const yearly = el.dataset.yearly; 800 // pick the right translation key 801 const key = checked 802 ? 'home.toggle.pricing.yearly' 803 : 'home.toggle.pricing.monthly'; 804 const period = Translator.get(key); 805 el.textContent = `${checked ? yearly : monthly} ${period}`; 806 }); 807 808 // Update subscription period text 809 const subscriptionPeriods = document.querySelectorAll('.subscription-period'); 810 subscriptionPeriods.forEach((el) => { 811 if (checked) { 812 // Yearly mode - hide the subscription period text 813 el.style.display = 'none'; 814 } else { 815 // Monthly mode - show the subscription period text 816 el.style.display = 'block'; 817 // The translation system will handle the text automatically 818 } 819 }); 820 }; 821 822 updatePrices(toggle.checked); 823 824 toggle.addEventListener("change", function () { 825 updatePrices(this.checked); 826 }); 827 document.addEventListener("langchange", () => updatePrices(toggle.checked)); 828 }); 829 </script>
829 830 831
831<script> 832 (function placeAlertBelowNav(){ 833 const nav = document.querySelector('nav[role="navigation"]'); 834 const alertBar = document.querySelector('.Alertcountdown'); 835 if(!nav || !alertBar) return; 836 function setAlertTop(){ 837 const h = Math.ceil(nav.getBoundingClientRect().height); 838 alertBar.style.top = h + 'px'; 839 } 840 setAlertTop(); 841 window.addEventListener('resize', setAlertTop, { passive: true }); 842 if(window.ResizeObserver){ 843 const ro = new ResizeObserver(setAlertTop); 844 ro.observe(nav); 845 } 846 })(); 847 </script>
847 848 849</body> 850 851</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.