PageSourceSearch

https://ninjascan.ai/about-us.html

html ninjascan.ai collected 2026-10-05 12:19:22 UTC 49,781 bytes, 851 lines download raw bytes

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">&times;</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.