TheCodeAtlas – Projects & Products

Reading Mode PRO is a modern, universal reading-mode add-on for websites, blogs, CMS systems, shops, and frameworks. With a single click, any page is transformed into a clean, distraction-free, perfectly legible e-reader layout — optimized for accessibility, readability and professional presentation. Main Features ✔ One-click reader mode ✔ Optimized reading column (max 700px) ✔ Large, comfortable typography ✔ Increased line-height (1.8) ✔ E-reader background (light/dark automatic) ✔ Auto dark reading mode ✔ Cleaner image presentation ✔ Header/nav/footer hidden ✔ Serif font for better reading ✔ Pure CSS/JS toggle — no layout damage ✔ Local storage saves user preference ✔ Fully reversible Compatibility HTML / PHP WordPress Joomla Typo3 Shopify WooCommerce Shopware Laravel / Symfony / Blade Twig / Smarty Static websites HuMo-Genealogy (optional color fix) Accessibility & UX ideal for senior readers improved readability increases engagement time reduces distractions improves SEO metrics fits legal accessibility requirements Integration Just add CSS + JS: <link rel="stylesheet" href="/reading-mode/reading-mode.css"> <script src="/reading-mode/reading-mode.js" defer></script> before </body> — done. No setup. No configuration. Instant functionality. Branding “Powered by TheCodeAtlas – Reading Mode PRO” must remain visible as part of the license. Click the round blue button with the book icon at the bottom right to try the Reading Mode instantly.

The A11y Suite – Universal Edition is the powerful accessibility tool for modern websites, CMS, shops, blogs and frameworks. It was developed to function completely system-independently - regardless of whether it is a classic PHP website, WordPress, Joomla, Typo3, Laravel, HuMo-Genealogy or a static HTML one-pager. With an elegant, compact interface, the A11y Suite provides essential accessibility features that make access to your website much easier for people with visual and reading difficulties: increased font sizes increased line spacing high contrast mode Dark Mode (Theme Switching) Link highlighting Dyslexia font (OpenDyslexic) reduced animations Local storage of all settings (LocalStorage) Thanks to the Universal Engine, the A11y Suite works stably even when other widgets fail: compatible with all systems Compatibility mode for difficult environments (high power) Hard-Compat Engine for older CMS/Themes automatic application in iframes (if allowed) Protection against double initialization complete reversibility of all settings no CSS conflicts, no inline styling chaos 🔧 Easy integration Installation is extremely straightforward: Default: Simply add the two lines of code before the closing </body> - done. If there is no central footer: Paste the code into any frontend page you want. No plugins, dependencies or external resources necessary. 🎁 Bonus included: The A11y Scanner The Universal Edition also includes an integrated A11y scanner that analyzes any URL and automatically returns the following values: Accessibility Score (0–100) Common accessibility issues including: missing ALT texts missing headings Forms without labels weak contrasts structural clues Ideal for quality control, WCAG optimizations, SEO and agencies. ✅ Main Features Accessibility at the click of a button Text Size: Normal / Large / Extra Large Line spacing: Standard / Large / Extra Large High contrast mode Dark mode Link highlighting (dashed outline) Dyslexia font (OpenDyslexic) Disable animations Reset & persistent storage Modern universal technology works reliably with every system compatible with SPA, AJAX & dynamic content automatic application in iframes Hard-Compat Engine for older and CSS-heavy systems High-power mode to ensure maximum compatibility Error-resistant (try/catch mechanism) User-friendly & GDPR compliant no cookies no external data processing whatsoever only LocalStorage maintenance free 🧩 Compatibility System/CMS compatible HTML/PHP ✔ 100% WordPress ✔ Joomla ✔ Typo3 ✔ Contao ✔ Drupal ✔ WooCommerce / Shopware ✔ Laravel / Symfony / Blade ✔ Twig / Smarty Templates ✔ HuMo-Genealogy ✔ (optimized by Hard-Compat Engine) Static websites ✔ 🛠️ Technical information CSS: ~4KB JS: ~12-15KB (Universal Engine) no dependencies no external fonts or frameworks Editor-friendly & easily customizable 💼 Perfect for: Company pages Stores Authorities & public institutions Bloggers & Creators Clubs & organizations Portfolio pages Genealogy projects Developers & Agencies 🎯 Call to action Make your website more inclusive with just a few clicks - without conversion, without plugins, without risks. Save now, insert and use immediately. 🔗 Branding (mandatory component) The integrated note “Powered by TheCodeAtlas – A11y Suite Premium” is an integral part of the license and must remain visible. Removing, hiding or manipulating branding is not permitted.

The Smart Focus Highlighter (Premium) is a modern accessibility add-on that automatically creates visible focus frames for links, buttons, forms and navigation elements - fully WCAG compliant and without changes to the HTML code. Many modern websites have invisible or difficult to see focus states. This leads to operating problems for users with keyboards, poor eyesight or motor limitations. The Smart Focus Highlighter solves this problem immediately and without any effort. ⭐ Main Features ✔ Visible focus on all important elements Left Buttons Forms Inputs Navigation Menus Tables Icons / SVG links The focus is displayed as a clearly visible, yet elegant frame. ✔ WCAG-compliant interaction behavior The highlighter works exactly according to the requirements of accessibility: 1. Interaction → Focus becomes visible 2. Interaction → Action is carried out This prevents users from unintentionally opening links or triggering buttons. This two-stage behavior is standard and recommended in the international accessibility regulations. ✔ Zero setup – ready to use straight away no HTML customization do not set any IDs don't change classes do not modify templates no CMS plugin necessary Simply add two lines of code to the footer and you’re done. ✔ Universally compatible Works with all systems: PHP/HTML WordPress Joomla Typo3 Contao Drupal WooCommerce Shopware Laravel/Symfony HuMo Genealogy Static pages ✔ Elegant design The focus frame is modern, subtle but clearly visible without destroying the layout. ✔ GDPR compliant no cookies no external sources no data transfer purely client-side 🎁 Bonus Included in the package: Smart Focus Debug Mode → Displays all elements that can be focused at the touch of a button (developer tool). 💼 Ideal for: Company websites Blogs Online shops Authorities & municipalities Clubs & social projects Developers & Agencies Accessible mandatory pages 🎯 Product CTA Make your website more accessible immediately – with just a single integration and without any changes to the existing design. 🔗 Branding notice The integrated note “Powered by TheCodeAtlas – Smart Focus Highlighter” is an integral part of the license and may not be removed or obscured.

The A11y Form Checker is a powerful tool for analyzing and optimizing the accessibility of forms. It automatically detects problems with input fields, labels, buttons, mandatory fields, contrast, ARIA attributes and form structures - and makes them visible directly in the document. With just one click you get: a complete form accessibility check an A11y score (0-100) a clear list of all errors & notes Markings directly in the form Navigation to the problem area with a click No server installation, no backend, no dependencies – the A11y Form Checker runs in: ✔ HTML/PHP ✔ WordPress ✔ Joomla ✔ Typo3 ✔ Contao ✔ Drupal ✔ Shopware / WooCommerce ✔ Laravel, Symfony, Blade ✔ Twig/Smarty ✔ HuMo Genealogy ✔ even in iframes (if permitted) Simply integrate – and scan directly. ✅ Main Features 🔍 Automatic form analysis missing labels Placeholder instead of label Mandatory fields without aria-required Buttons without text / without aria label Fields without ID or with duplicate ID poor contrast values Forms without a submit button Structural errors (fieldset, legend, grouping) Tab order/focus issues (heuristic) 🧭 Interactive error list Errors (red), notes (yellow), information (blue) Click opens the affected field Affected elements are visually highlighted Flash effect for quick location 📊 A11y Form Score (0-100) Automatic evaluation: -5 points per mistake -2 points per clue minimum 0 points shows quality and need for optimization 💡Universal Engine works on all websites doesn't need a framework robust through try/catch safe from browser restrictions also works in dynamic pages (AJAX / SPA) Error resistant 🎁 Bonus: A11y Structure Scan The tool also recognizes typical structural stumbling blocks: duplicate IDs missing submit elements missing groupings (fieldset/legend) Buttons without meaningful labeling autocomplete hints Perfect for developers, agencies and quality control. 🧩 Compatibility System/CMS compatible HTML/PHP ✔ 100% WordPress ✔ Typo3 ✔ Joomla ✔ Contao ✔ Drupal ✔ Shopware / WooCommerce ✔ Laravel / Symfony / Blade ✔ Twig / Smarty Templates ✔ HuMo Genealogy ✔ (automatic) Static websites ✔ 🔧 Technical information CSS: ~4KB JS: ~16KB no cookies no external fonts GDPR compliant LocalStorage optional (only the UI state) 📦 Installation Just add two lines before </body>: <link rel="stylesheet" href="/a11y-form-checker/form-checker.css"> <script src="/a11y-form-checker/form-checker.js" defer></script> Done. A “FC” button appears at the bottom right → click → start scanner. 🔗 Branding (license requirement) The note: “Powered by TheCodeAtlas – A11y Form Checker” is an integral part of the license/terms of use. ➡ Removing, hiding or tampering is NOT permitted. It must remain visible, regardless of the system. 💼 Ideal for Company Authorities & public institutions Developers & Agencies Shops + e-commerce Blogs private websites Accessibility audits SEO and quality checks Customer contact forms

The modern GDPR notice for websites without cookies – light, elegant & 100% compliant. Many websites do not set tracking cookies or only use technically necessary functions. Nevertheless, the current legal situation requires visitors to be transparently informed about this. Normal cookie banners are oversized - they are annoying, worsen the UX and are often legally incorrect. The solution: 💙 TheCodeAtlas Privacy Overlay – Cookie-Free Edition An ultra-light, subtle notice overlay specifically for websites, shops or CMS that do not use marketing technologies. 💡 What does the privacy overlay do? ✔ displays an elegant, modern GDPR notice ✔ declares that no tracking cookies are used ✔ Automatically hides when scrolling or clicking ✔ only appears once per session (not at every page change) ✔ purely informative → no consent required ✔ completely cookie-free ✔ very light (< 5 KB total) Ideal for webmasters who need a discreet, professional data protection notice - without banner monsters, without consent plugins. 🎯 Functions at a glance 🧩 Elegant GDPR overlay modern light/dark style Text fully customizable multilingual (DE/EN automatically) 🧠 Smart Behavior only once per visit closes on scroll (80 px) or click Animations subtle & clean 🛡 100% data protection compliant no cookie no external services just a sessionStorage flag (legally uncritical) completely local, no data transfer ⚙️ Universal compatibility Runs stably with: ✔ HTML/PHP ✔ WordPress ✔ Joomla ✔ Typo3 ✔ Drupal ✔ Shopware / WooCommerce ✔ Laravel/Symfony ✔ HuMo Genealogy ✔ Page builder (Elementor, WPBakery etc.) Simply add it before </body> – done. 🎁 Bonus (included) The package also includes: Version with delay (3 seconds) Version with 24-hour suppression This allows you to perfectly adapt your overlay to any page. 💼 Ideal for Company pages Shops without tracking Blogs & Portfolios Clubs Authorities & communities GDPR sensitive projects Agencies & Developers