feat: move build files to docs folder

.github/workflows/main.yml

@@ -1,51 +0,0 @@
-# Simple workflow for deploying static content to GitHub Pages
-name: Deploy static content to Pages
-
-on:
-  # Runs on pushes targeting the default branch
-  push:
-    branches: ['main']
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow one concurrent deployment
-concurrency:
-  group: 'pages'
-  cancel-in-progress: true
-
-jobs:
-  # Single deploy job since we're just deploying
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Set up Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: lts/*
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
-      - name: Build
-        run: npm run build
-      - name: Setup Pages
-        uses: actions/configure-pages@v5
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          # Upload dist folder
-          path: './dist'
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

.gitignore

@@ -1,4 +1,3 @@
 .idea
 .cache
-dist
 node_modules

.pugrc

@@ -2,16 +2,16 @@
 	"locals": {
 		"t": {
 			"meta": {
-				"title": "HTML Fundamentals: Building with Native HTML",
+				"title": "Web Platform Fundamentals: Building with Native HTML",
 				"description": "Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."
 			},
 			"hero": {
-				"title": "🚀 HTML Fundamentals",
+				"title": "🚀 Web Platform Fundamentals",
 				"subtitle": "Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."
 			},
 			"sections": {
 				"disclosure": {
-					"title": "🎯 Details/Summary Patterns",
+					"title": "🎯 Progressive Disclosure Patterns",
 					"js_title": "JavaScript-Dependent Implementation",
 					"js_badge": "COMPLEX",
 					"js_warning": "Implementation Overhead: Manual ARIA state management, keyboard event handling, focus management, and screen reader compatibility.",
@@ -189,7 +189,7 @@
 				}
 			},
 			"summary": {
-				"title": "HTML-First Development",
+				"title": "Platform-First Development",
 				"content": "Native HTML elements represent years of browser engineering, accessibility research, and web standards evolution. They provide robust functionality with minimal implementation overhead and maximum compatibility.",
 				"approach_title": "The Progressive Enhancement Approach:",
 				"approach_items": [

docs/index.html

@@ -0,0 +1,4 @@
+<!DOCTYPE html><html lang="en" dir="ltr"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Web Platform Fundamentals: Building with Native HTML</title><meta name="description" content="Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."><link rel="stylesheet" href="/html-over-js/main.612a6b84.css"></head><body class="search_plugin_added"><div class="hero"><h1>🚀 Web Platform Fundamentals</h1><p class="subtitle">Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases.</p></div><div class="section"><h2 class="section-title">🎯 Progressive Disclosure Patterns</h2><div class="comparison-grid"><div class="column bad"><h3>JavaScript-Dependent Implementation <span class="perf-indicator perf-slow">COMPLEX</span></h3><div class="accessibility-note"><strong>⚠️ Implementation Overhead: Manual ARIA state management, keyboard event handling, focus management, and screen reader compatibility.</strong></div><div class="js-wrapper"><div class="js-content" id="content1">Custom collapsible implementations require comprehensive event handling, state synchronization across components, and careful attention to accessibility requirements including proper ARIA attributes and keyboard navigation patterns.</div><button class="js-collapsible" onclick="toggleContent('content1')">Custom Collapsible Architecture</button></div><div class="js-wrapper"><div class="js-content" id="content2">Managing state across multiple collapsible sections introduces complexity in event coordination, memory management, and performance optimization, particularly when dealing with dynamic content loading.</div><button class="js-collapsible" onclick="toggleContent('content2')">State Management Challenges</button></div><div class="pros-cons"><h4 class="cons">❌ Architecture Complexity:</h4><ul><li>Event delegation and memory leak prevention</li><li>ARIA state synchronization and keyboard trap management</li><li>Cross-browser compatibility and polyfill requirements</li></ul></div></div><div class="column good"><h3>Native Details/Summary Elements <span class="perf-indicator perf-fast">ZERO-JS</span></h3><div class="accessibility-note"><strong>🎯 Platform Integration: Built-in ARIA semantics, keyboard navigation, screen reader support, and browser-optimized animations.</strong></div><details name="architecture"><summary>Semantic HTML Architecture</summary><div>The HTML5 details/summary pattern provides declarative progressive disclosure without JavaScript dependencies. Browser engines handle state management, accessibility, and user interaction patterns according to platform conventions.</div></details><details name="architecture"><summary>Progressive Enhancement Benefits</summary><div>Starting with functional HTML ensures graceful degradation across all environments. CSS and JavaScript become enhancement layers rather than functional requirements, improving reliability and reducing technical debt.</div></details><details name="architecture"><summary>Performance Characteristics</summary><div>Native elements eliminate bundle size overhead, reduce runtime memory consumption, and leverage browser optimizations unavailable to custom implementations. Hardware acceleration and efficient event handling come built-in.</div></details><div class="pros-cons"><h4 class="pros">✅ Platform Advantages:</h4><ul><li>Zero JavaScript footprint with full accessibility compliance</li><li>Browser-native performance optimizations and hardware acceleration</li><li>Consistent cross-platform behavior with no maintenance overhead</li></ul></div></div></div></div><div class="section"><h2 class="section-title">🪟 Modal Dialog Patterns</h2><div class="comparison-grid"><div class="column bad"><h3>Custom Modal Implementation <span class="perf-indicator perf-slow">BRITTLE</span></h3><div class="accessibility-note"><strong>⚠️ Critical Requirements: Focus trapping, inert background content, ESC key handling, backdrop click management, and ARIA modal semantics.</strong></div><button onclick="openJSModal()">Launch Custom Modal</button><div class="js-modal-overlay" id="jsModal"><div class="js-modal-content"><h4>Custom Modal Architecture</h4><p>This approach requires managing the modal stack, preventing background interaction, coordinating focus management, and ensuring proper cleanup to avoid memory leaks and accessibility violations.</p><p><strong>Critical Issue: Background content remains accessible to screen readers and keyboard navigation without explicit inert management.</strong></p><button onclick="closeJSModal()">Close Modal</button></div></div><div class="pros-cons"><h4 class="cons">❌ ImplemenLine truncated
+Requires: Date manipulation library, internationalization,
+keyboard navigation, mobile gesture handling,
+timezone calculations, accessibility compliance.</p></div></div><div class="pros-cons"><h4 class="cons">❌ Implementation Overhead:</h4><ul><li>Large JavaScript libraries and complex calendar logic</li><li>Mobile UX inconsistency with platform date pickers</li><li>Internationalization complexity and timezone edge cases</li></ul></div></div><div class="column good"><h3>Native Temporal Inputs <span class="perf-indicator perf-fast">PLATFORM-NATIVE</span></h3><div class="accessibility-note"><strong>🎯 OS Integration: Platform-consistent UI, automatic keyboard navigation, built-in validation, and internationalization support.</strong></div><div class="form-group"><label>Release Date</label><input id="native-date" name="date" type="date" value="2024-12-15" min="2024-01-01" max="2025-12-31"></div><div class="form-group"><label>Build Timestamp</label><input id="native-datetime" name="datetime" type="datetime-local" step="1"></div><div class="form-group"><label>Deployment Window</label><input id="native-time" name="time" type="time" min="02:00" max="18:00" step="900"></div><div class="pros-cons"><h4 class="pros">✅ Platform Integration:</h4><ul><li>Zero-bundle impact with native OS picker integration</li><li>Automatic validation and internationalization support</li><li>Consistent UX aligned with platform conventions</li></ul></div></div></div></div><div class="section"><h2 class="section-title">🔍 Autocomplete Patterns</h2><div class="comparison-grid"><div class="column bad"><h3>Custom Autocomplete <span class="perf-indicator perf-slow">INTERACTION-HEAVY</span></h3><div class="accessibility-note"><strong>⚠️ Interaction Complexity: Dropdown positioning, keyboard navigation, ARIA combobox implementation, and mobile touch handling.</strong></div><div class="form-group"><label>Framework Search (Custom)</label><input id="js-search" type="text" placeholder="Type framework name..." autocomplete="off" onkeyup="filterFrameworks(this.value)"><div id="js-results" style="display: none; position: absolute; background: var(--color-card); border: 1px solid var(--color-border); max-height: 200px; overflow-y: auto; z-index: 100"></div></div><div class="pros-cons"><h4 class="cons">❌ Interaction Management:</h4><ul><li>Complex ARIA combobox implementation and state management</li><li>Dropdown positioning and viewport collision detection</li><li>Mobile keyboard optimization and touch event handling</li></ul></div></div><div class="column good"><h3>Native Datalist Element <span class="perf-indicator perf-fast">ZERO-CONFIG</span></h3><div class="accessibility-note"><strong>🎯 Native Combobox: Built-in ARIA combobox semantics, keyboard navigation, and platform-consistent interaction patterns.</strong></div><div class="form-group"><label>JavaScript Framework</label><input id="native-framework" type="text" list="frameworks" placeholder="Select or type framework..."><datalist id="frameworks"><option value="React">React - Component-based library</option><option value="Vue.js">Vue.js - Progressive framework</option><option value="Angular">Angular - Full platform</option><option value="Svelte">Svelte - Compile-time framework</option><option value="Solid">Solid - Fine-grained reactivity</option><option value="Alpine.js">Alpine.js - Minimal framework</option><option value="Lit">Lit - Web Components library</option><option value="Preact">Preact - Lightweight React alternative</option></datalist></div><div class="form-group"><label>Programming Language</label><input id="native-language" type="text" list="languages" placeholder="Choose language..."><datalist id="languages"><option value="JavaScript" label="JavaScript - Dynamic scripting"></option><option value="TypeScript" label="TypeScript - Typed JavaScript"></option><option value="Python" label="Python - General purpose"></option><option value="Rust" label="Rust - Systems programming"></option><option value="Go" label="Go - Concurrent systems"></option><option value="WebAssembly" label="WebAssembly - High-performance web"></option><option value="C" label="C - Low-level systems"></option><option value="C++" label="C++ - High-performance systems"></option><option value="C#" label="C# - .NET ecosystem"></option><option value="Java" label="Java - Cross-platform enterprise"></option><option value="Kotlin" label="Kotlin - Modern JVM language"></option><option value="Swift" label="Swift - iOS and macOS"></option><option value="Ruby" label="Ruby - Web development (Rails)"></option><option value="PHP" label="PHP - Server-side scripting"></option><option value="Perl" label="Perl - Text processing"></option><option value="Haskell" label="Haskell - Functional programming"></option><option value="Elixir" label="Elixir - Scalable applications"></option><option value="Dart" label="Dart - Web and mobile apps"></option><option value="Scala" label="Scala - Functional JVM language"></option><option value="Lua" label="Lua - Lightweight scripting"></option><option value="R" label="R - Statistical compuLine truncated

docs/main.082e2b9e.js

@@ -0,0 +1,188 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"HJDO":[function(require,module,exports) {
+// JavaScript functions from original HTML
+var frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];
+function filterFrameworks(value) {
+  var results = document.getElementById('js-results');
+  if (!value) {
+    results.style.display = 'none';
+    return;
+  }
+  var filtered = frameworks.filter(function (fw) {
+    return fw.toLowerCase().includes(value.toLowerCase());
+  });
+  results.innerHTML = filtered.map(function (fw) {
+    return "<div style=\"padding:8px; cursor:pointer;\" onclick=\"selectFramework('".concat(fw, "')\">").concat(fw, "</div>");
+  }).join('');
+  results.style.display = filtered.length ? 'block' : 'none';
+}
+function selectFramework(fw) {
+  document.getElementById('js-search').value = fw;
+  document.getElementById('js-results').style.display = 'none';
+}
+function startNativeProgress() {
+  var progress = document.getElementById('nativeProgress');
+  var text = document.getElementById('nativeProgressText');
+  var value = 0;
+  var interval = setInterval(function () {
+    value += Math.random() * 15;
+    if (value >= 100) {
+      value = 100;
+      clearInterval(interval);
+    }
+    progress.value = value;
+    text.textContent = Math.round(value) + '%';
+  }, 200);
+}
+function toggleContent(id) {
+  document.getElementById(id).classList.toggle("active");
+}
+function openJSModal() {
+  document.getElementById('jsModal').style.display = 'flex';
+}
+function closeJSModal() {
+  document.getElementById('jsModal').style.display = 'none';
+}
+function validateJSForm(event) {
+  event.preventDefault();
+  alert('Custom validation would run here');
+  return false;
+}
+function startJSProgress() {
+  var bar = document.getElementById('jsProgress');
+  var text = document.getElementById('jsProgressText');
+  var width = 0;
+  var interval = setInterval(function () {
+    width += Math.random() * 15;
+    if (width >= 100) {
+      width = 100;
+      clearInterval(interval);
+    }
+    bar.style.width = width + '%';
+    text.textContent = Math.round(width) + '%';
+  }, 200);
+}
+function openDatePicker() {
+  var picker = document.getElementById('datePicker');
+  picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
+}
+},{}]},{},["HJDO"], null)
+//# sourceMappingURL=/html-over-js/main.082e2b9e.js.map

docs/main.082e2b9e.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/main.js"],"names":["frameworks","filterFrameworks","value","results","document","getElementById","style","display","filtered","filter","fw","toLowerCase","includes","innerHTML","map","concat","join","length","selectFramework","startNativeProgress","progress","text","interval","setInterval","Math","random","clearInterval","textContent","round","toggleContent","id","classList","toggle","openJSModal","closeJSModal","validateJSForm","event","preventDefault","alert","startJSProgress","bar","width","openDatePicker","picker"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA,IAAMA,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,CAAC;AAE7I,SAASC,gBAAgBA,CAACC,KAAK,EAAE;EAC/B,IAAMC,OAAO,GAAGC,QAAQ,CAACC,cAAc,CAAC,YAAY,CAAC;EACrD,IAAI,CAACH,KAAK,EAAE;IACVC,OAAO,CAACG,KAAK,CAACC,OAAO,GAAG,MAAM;IAC9B;EACF;EACA,IAAMC,QAAQ,GAAGR,UAAU,CAACS,MAAM,CAAC,UAAAC,EAAE;IAAA,OAAIA,EAAE,CAACC,WAAW,CAAC,CAAC,CAACC,QAAQ,CAACV,KAAK,CAACS,WAAW,CAAC,CAAC,CAAC;EAAA,EAAC;EACxFR,OAAO,CAACU,SAAS,GAAGL,QAAQ,CAACM,GAAG,CAAC,UAAAJ,EAAE;IAAA,iFAAAK,MAAA,CAA2EL,EAAE,WAAAK,MAAA,CAAOL,EAAE;EAAA,CAAQ,CAAC,CAACM,IAAI,CAAC,EAAE,CAAC;EAC3Ib,OAAO,CAACG,KAAK,CAACC,OAAO,GAAGC,QAAQ,CAACS,MAAM,GAAG,OAAO,GAAG,MAAM;AAC5D;AAEA,SAASC,eAAeA,CAACR,EAAE,EAAE;EAC3BN,QAAQ,CAACC,cAAc,CAAC,WAAW,CAAC,CAACH,KAAK,GAAGQ,EAAE;EAC/CN,QAAQ,CAACC,cAAc,CAAC,YAAY,CAAC,CAACC,KAAK,CAACC,OAAO,GAAG,MAAM;AAC9D;AAEA,SAASY,mBAAmBA,CAAA,EAAG;EAC7B,IAAMC,QAAQ,GAAGhB,QAAQ,CAACC,cAAc,CAAC,gBAAgB,CAAC;EAC1D,IAAMgB,IAAI,GAAGjB,QAAQ,CAACC,cAAc,CAAC,oBAAoB,CAAC;EAC1D,IAAIH,KAAK,GAAG,CAAC;EACb,IAAMoB,QAAQ,GAAGC,WAAW,CAAC,YAAM;IACjCrB,KAAK,IAAIsB,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,EAAE;IAC3B,IAAIvB,KAAK,IAAI,GAAG,EAAE;MAChBA,KAAK,GAAG,GAAG;MACXwB,aAAa,CAACJ,QAAQ,CAAC;IACzB;IACAF,QAAQ,CAAClB,KAAK,GAAGA,KAAK;IACtBmB,IAAI,CAACM,WAAW,GAAGH,IAAI,CAACI,KAAK,CAAC1B,KAAK,CAAC,GAAG,GAAG;EAC5C,CAAC,EAAE,GAAG,CAAC;AACT;AAEA,SAAS2B,aAAaA,CAACC,EAAE,EAAE;EACzB1B,QAAQ,CAACC,cAAc,CAACyB,EAAE,CAAC,CAACC,SAAS,CAACC,MAAM,CAAC,QAAQ,CAAC;AACxD;AAEA,SAASC,WAAWA,CAAA,EAAG;EACrB7B,QAAQ,CAACC,cAAc,CAAC,SAAS,CAAC,CAACC,KAAK,CAACC,OAAO,GAAG,MAAM;AAC3D;AAEA,SAAS2B,YAAYA,CAAA,EAAG;EACtB9B,QAAQ,CAACC,cAAc,CAAC,SAAS,CAAC,CAACC,KAAK,CAACC,OAAO,GAAG,MAAM;AAC3D;AAEA,SAAS4B,cAAcA,CAACC,KAAK,EAAE;EAC7BA,KAAK,CAACC,cAAc,CAAC,CAAC;EACtBC,KAAK,CAAC,kCAAkC,CAAC;EACzC,OAAO,KAAK;AACd;AAEA,SAASC,eAAeA,CAAA,EAAG;EACzB,IAAMC,GAAG,GAAGpC,QAAQ,CAACC,cAAc,CAAC,YAAY,CAAC;EACjD,IAAMgB,IAAI,GAAGjB,QAAQ,CAACC,cAAc,CAAC,gBAAgB,CAAC;EACtD,IAAIoC,KAAK,GAAG,CAAC;EACb,IAAMnB,QAAQ,GAAGC,WAAW,CAAC,YAAM;IACjCkB,KAAK,IAAIjB,IAAI,CAACC,MAAM,CAAC,CAAC,GAAG,EAAE;IAC3B,IAAIgB,KAAK,IAAI,GAAG,EAAE;MAChBA,KAAK,GAAG,GAAG;MACXf,aAAa,CAACJ,QAAQ,CAAC;IACzB;IACAkB,GAAG,CAAClC,KAAK,CAACmC,KAAK,GAAGA,KAAK,GAAG,GAAG;IAC7BpB,IAAI,CAACM,WAAW,GAAGH,IAAI,CAACI,KAAK,CAACa,KAAK,CAAC,GAAG,GAAG;EAC5C,CAAC,EAAE,GAAG,CAAC;AACT;AAEA,SAASC,cAAcA,CAAA,EAAG;EACxB,IAAMC,MAAM,GAAGvC,QAAQ,CAACC,cAAc,CAAC,YAAY,CAAC;EACpDsC,MAAM,CAACrC,KAAK,CAACC,OAAO,GAAGoC,MAAM,CAACrC,KAAK,CAACC,OAAO,KAAK,MAAM,GAAG,OAAO,GAAG,MAAM;AAC3E","file":"main.082e2b9e.js","sourceRoot":"..","sourcesContent":["// JavaScript functions from original HTML\nconst frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];\n\nfunction filterFrameworks(value) {\n  const results = document.getElementById('js-results');\n  if (!value) {\n    results.style.display = 'none';\n    return;\n  }\n  const filtered = frameworks.filter(fw => fw.toLowerCase().includes(value.toLowerCase()));\n  results.innerHTML = filtered.map(fw => `<div style=\"padding:8px; cursor:pointer;\" onclick=\"selectFramework('${fw}')\">${fw}</div>`).join('');\n  results.style.display = filtered.length ? 'block' : 'none';\n}\n\nfunction selectFramework(fw) {\n  document.getElementById('js-search').value = fw;\n  document.getElementById('js-results').style.display = 'none';\n}\n\nfunction startNativeProgress() {\n  const progress = document.getElementById('nativeProgress');\n  const text = document.getElementById('nativeProgressText');\n  let value = 0;\n  const interval = setInterval(() => {\n    value += Math.random() * 15;\n    if (value >= 100) {\n      value = 100;\n      clearInterval(interval);\n    }\n    progress.value = value;\n    text.textContent = Math.round(value) + '%';\n  }, 200);\n}\n\nfunction toggleContent(id) {\n  document.getElementById(id).classList.toggle(\"active\");\n}\n\nfunction openJSModal() {\n  document.getElementById('jsModal').style.display = 'flex';\n}\n\nfunction closeJSModal() {\n  document.getElementById('jsModal').style.display = 'none';\n}\n\nfunction validateJSForm(event) {\n  event.preventDefault();\n  alert('Custom validation would run here');\n  return false;\n}\n\nfunction startJSProgress() {\n  const bar = document.getElementById('jsProgreLine truncated

docs/main.612a6b84.css

@@ -0,0 +1,644 @@
+:root {
+    --color-bg: #ffffff;
+    --color-card: #f8f9fa;
+    --color-primary: #0066cc;
+    --color-primary-hover: #0052a3;
+    --color-danger: #dc3545;
+    --color-warning: #856404;
+    --color-warning-bg: #fff3cd;
+    --color-content-bg: #f1f3f4;
+    --color-border: #dee2e6;
+    --color-text: #212529;
+    --color-text-muted: #6c757d;
+    --color-code-bg: #f8f9fa;
+    --color-code-text: #0066cc;
+    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    --radius: 8px;
+    --focus-outline: 2px solid #0066cc;
+    --focus-outline-danger: 2px solid #dc3545;
+    --focus-offset: 2px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    background: var(--color-bg);
+    color: var(--color-text);
+    min-height: 100vh;
+}
+
+.hero {
+    text-align: center;
+    margin-bottom: 4rem;
+    padding: 3rem;
+    background: var(--color-card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--color-border);
+}
+
+.hero:focus-within {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+.hero h1 {
+    font-size: clamp(2rem, 5vw, 3.5rem);
+    margin-bottom: 1.5rem;
+    color: var(--color-primary);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.hero .subtitle {
+    font-size: 1.125rem;
+    color: var(--color-text-muted);
+    max-width: 700px;
+    margin: 0 auto;
+    line-height: 1.5;
+}
+
+.comparison-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin: 2rem 0;
+}
+
+.section {
+    margin: 4rem 0;
+}
+
+.section-title {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+    padding: 1.5rem 0;
+    text-align: center;
+    color: var(--color-primary);
+    position: relative;
+    font-weight: 600;
+}
+
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60px;
+    height: 2px;
+    background: var(--color-primary);
+}
+
+.column {
+    background: var(--color-card);
+    padding: 2rem;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--color-border);
+    transition: box-shadow 0.2s ease;
+    position: relative;
+}
+
+.column:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.column:focus-within {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+.column.bad:focus-within {
+    outline: var(--focus-outline-danger);
+}
+
+.column h3 {
+    color: var(--color-text);
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: 1rem;
+    margin-bottom: 2rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+
+.bad {
+    border-left: 3px solid var(--color-danger);
+}
+
+.bad h3::before {
+    content: '⚠️ ';
+}
+
+.bad button {
+    background: var(--color-danger);
+}
+
+.bad button:hover {
+    background: var(--color-danger);
+}
+
+.bad button:focus {
+    outline: var(--focus-outline-danger);
+    outline-offset: var(--focus-offset);
+}
+
+.good {
+    border-left: 3px solid var(--color-primary);
+}
+
+.good h3::before {
+    content: '✅ ';
+}
+
+.accessibility-note {
+    background: var(--color-warning-bg);
+    border: 1px solid #ffc107;
+    color: var(--color-warning);
+    padding: 1rem;
+    border-radius: var(--radius);
+    margin: 1.5rem 0;
+    font-size: 0.875rem;
+}
+
+.code-block {
+    /*display: none;*/
+    background: var(--color-code-bg);
+    color: var(--color-code-text);
+    padding: 2rem 1.5rem 1rem;
+    border-radius: var(--radius);
+    overflow-x: auto;
+    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+    font-size: 0.875rem;
+    margin: 1.5rem 0;
+    border: 1px solid var(--color-border);
+    position: relative;
+}
+
+.code-block:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+.code-block::before {
+    content: 'CODE';
+    position: absolute;
+    top: -6px;
+    right: 15px;
+    background: var(--color-primary);
+    color: white;
+    padding: 10px 8px 0;
+    font-size: 0.7rem;
+    border-radius: 4px;
+    font-weight: 600;
+}
+
+.pros-cons {
+    margin: 1.5rem 0;
+}
+
+.pros-cons h4 {
+    margin-bottom: 1rem;
+    color: var(--color-text);
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.pros-cons ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+.pros-cons li {
+    padding: 0.5rem 0;
+    padding-left: 1.5rem;
+    position: relative;
+}
+
+.pros li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: var(--color-primary);
+    font-weight: bold;
+}
+
+.cons li::before {
+    content: '✗';
+    position: absolute;
+    left: 0;
+    color: var(--color-danger);
+    font-weight: bold;
+}
+
+/* Interactive Elements */
+.js-collapsible {
+    color: white;
+    cursor: pointer;
+    padding: 12px 16px;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 1rem;
+    border-radius: var(--radius);
+    margin-bottom: 1rem;
+    width: 100%;
+    font-family: inherit;
+    font-weight: 500;
+}
+
+.js-wrapper {
+    display: flex;
+    flex-direction: column-reverse;
+}
+
+.js-content {
+    display: none;
+    background: var(--color-content-bg);
+    border: 1px solid var(--color-border);
+    border-radius: 0 0 var(--radius) var(--radius);
+    margin-bottom: 1rem;
+}
+
+.js-content.active {
+    display: block;
+    padding: 0.5rem;
+}
+
+.js-content.active + .js-collapsible {
+    border-radius: var(--radius) var(--radius) 0 0;
+    margin-bottom: 0;
+}
+
+details {
+    background: var(--color-card);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    margin-bottom: 1rem;
+    overflow: hidden;
+}
+
+details:focus-within {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+summary {
+    background: var(--color-primary);
+    color: white;
+    padding: 12px 16px;
+    cursor: pointer;
+    font-size: 1rem;
+    list-style: none;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+summary:hover {
+    background: var(--color-primary-hover);
+}
+
+summary:focus {
+    outline: var(--focus-outline);
+    outline-offset: -2px;
+}
+
+summary::-webkit-details-marker {
+    display: none;
+}
+
+summary::before {
+    content: '▶';
+    margin-right: 8px;
+    transition: transform 0.2s ease;
+    display: inline-block;
+}
+
+details[open] summary::before {
+    transform: rotate(90deg);
+}
+
+details > div {
+    padding: 16px;
+    background: var(--color-content-bg);
+}
+
+/* Modal Styles */
+.js-modal-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 1000;
+}
+
+.js-modal-overlay.active {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.js-modal-content {
+    margin: auto;
+    background: var(--color-bg);
+    padding: 2rem;
+    border-radius: var(--radius);
+    max-width: 500px;
+    width: 90%;
+    border: 1px solid var(--color-border);
+    box-shadow: var(--shadow);
+}
+
+.js-modal-content:focus {
+    outline: var(--focus-outline-danger);
+    outline-offset: var(--focus-offset);
+}
+
+dialog {
+    margin: auto;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    padding: 2rem;
+    background: var(--color-bg);
+    color: var(--color-text);
+    box-shadow: var(--shadow);
+    max-width: 500px;
+    width: 90vw;
+}
+
+dialog:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+dialog::backdrop {
+    background: rgba(0, 0, 0, 0.6);
+}
+
+/* Form Styles */
+.form-group {
+    margin-bottom: 1.5rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--color-text);
+}
+
+.form-group input, .form-group textarea, .form-group select {
+    width: 100%;
+    padding: 10px 12px;
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius);
+    font-size: 1rem;
+    background: var(--color-bg);
+    color: var(--color-text);
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
+    outline: var(--focus-outline);
+    outline-offset: 2px;
+    border-color: var(--color-border);
+}
+
+.form-group input:invalid {
+    border-color: var(--color-danger);
+}
+
+.form-group input:valid {
+    border-color: var(--color-primary);
+}
+
+.js-error {
+    color: var(--color-danger);
+    font-size: 0.875rem;
+    margin-top: 0.5rem;
+    display: none;
+}
+
+.js-error.active {
+    display: block;
+}
+
+/* Progress Styles */
+.js-progress-container {
+    width: 100%;
+    background: var(--color-border);
+    border-radius: 4px;
+    height: 20px;
+    margin: 1.5rem 0;
+    overflow: hidden;
+}
+
+.js-progress-bar {
+    height: 100%;
+    background: var(--color-danger);
+    width: 0;
+    transition: width 0.3s ease;
+    border-radius: 4px;
+}
+
+progress {
+    width: 100%;
+    height: 20px;
+    margin: 1.5rem 0;
+    border-radius: 4px;
+    border: none;
+    background: var(--color-border);
+}
+
+progress:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+progress::-webkit-progress-bar {
+    background-color: var(--color-border);
+    border-radius: 4px;
+}
+
+progress::-webkit-progress-value {
+    background: var(--color-primary);
+    border-radius: 4px;
+}
+
+progress::-moz-progress-bar {
+    background: var(--color-primary);
+    border-radius: 4px;
+}
+
+/* Button Styles */
+button {
+    background: var(--color-primary);
+    color: white;
+    border: none;
+    padding: 10px 16px;
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-size: 1rem;
+    margin: 0.5rem 0.5rem 0.5rem 0;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+button:hover {
+    background: var(--color-primary-hover);
+    transform: translateY(-1px);
+}
+
+button:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+button:disabled {
+    background: var(--color-text-muted);
+    cursor: not-allowed;
+    transform: none;
+}
+
+/* Component Styles */
+.datalist-container {
+    position: relative;
+}
+
+input[list] {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 12px center;
+    background-repeat: no-repeat;
+    background-size: 16px;
+    padding-right: 36px;
+}
+
+.slider-container {
+    margin: 2rem 0;
+}
+
+input[type="range"] {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: var(--color-border);
+    outline: none;
+    -webkit-appearance: none;
+}
+
+input[type="range"]:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    cursor: pointer;
+    border: none;
+}
+
+.color-input {
+    width: 50px;
+    height: 32px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+    cursor: pointer;
+}
+
+.color-input:focus {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-offset);
+}
+
+.summary-box {
+    margin-top: 4rem;
+    padding: 2rem;
+    background: var(--color-card);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow);
+    border: 1px solid var(--color-border);
+    text-align: center;
+}
+
+.summary-box h3 {
+    font-size: 1.5rem;
+    margin-bottom: 1rem;
+    color: var(--color-primary);
+    font-weight: 600;
+}
+
+.zen-quote {
+    font-style: italic;
+    color: var(--color-text-muted);
+    font-size: 1rem;
+    margin-top: 1.5rem;
+    border-left: 3px solid var(--color-primary);
+    padding-left: 1rem;
+}
+
+@media (max-width: 768px) {
+    .comparison-grid {
+        grid-template-columns: 1fr;
+    }
+
+    body {
+        padding: 1rem;
+    }
+
+    .hero {
+        padding: 2rem;
+    }
+
+    .section-title {
+        font-size: 1.75rem;
+    }
+}
+
+/* Performance indicators */
+.perf-indicator {
+    display: inline-block;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-left: 8px;
+}
+
+.perf-fast {
+    background: rgba(0, 102, 204, 0.1);
+    color: var(--color-primary);
+}
+
+.perf-slow {
+    background: rgba(220, 53, 69, 0.1);
+    color: var(--color-danger);
+}
+
+
+/*# sourceMappingURL=/html-over-js/main.612a6b84.css.map */

docs/main.612a6b84.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["src/main.css"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"main.612a6b84.css","sourceRoot":"..","sourcesContent":[":root {\n    --color-bg: #ffffff;\n    --color-card: #f8f9fa;\n    --color-primary: #0066cc;\n    --color-primary-hover: #0052a3;\n    --color-danger: #dc3545;\n    --color-warning: #856404;\n    --color-warning-bg: #fff3cd;\n    --color-content-bg: #f1f3f4;\n    --color-border: #dee2e6;\n    --color-text: #212529;\n    --color-text-muted: #6c757d;\n    --color-code-bg: #f8f9fa;\n    --color-code-text: #0066cc;\n    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    --radius: 8px;\n    --focus-outline: 2px solid #0066cc;\n    --focus-outline-danger: 2px solid #dc3545;\n    --focus-offset: 2px;\n}\n\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n    line-height: 1.6;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 2rem;\n    background: var(--color-bg);\n    color: var(--color-text);\n    min-height: 100vh;\n}\n\n.hero {\n    text-align: center;\n    margin-bottom: 4rem;\n    padding: 3rem;\n    background: var(--color-card);\n    border-radius: var(--radius);\n    box-shadow: var(--shadow);\n    border: 1px solid var(--color-border);\n}\n\n.hero:focus-within {\n    outline: var(--focus-outline);\n    outline-offset: var(--focus-offset);\n}\n\n.hero h1 {\n    font-size: clamp(2rem, 5vw, 3.5rem);\n    margin-bottom: 1.5rem;\n    color: var(--color-primary);\n    font-weight: 700;\n    letter-spacing: -0.02em;\n}\n\n.hero .subtitle {\n    font-size: 1.125rem;\n    color: var(--color-text-muted);\n    max-width: 700px;\n    margin: 0 auto;\n    line-height: 1.5;\n}\n\n.comparison-grid {\n    display: gridLine truncated

high.pugrc

@@ -1,207 +0,0 @@
-{
-  "locals": {
-    "t": {
-      "meta": {
-        "title": "HTML-Grundlagen: Webentwicklung mit nativen Browser-Features",
-        "description": "Lerne native HTML-Capabilities und Progressive Enhancement Patterns. Diese Anleitung zeigt, wie eingebaute Browser-Features Komplexität reduzieren, Performance verbessern und wartbareren Code schaffen."
-      },
-      "hero": {
-        "title": "🚀 HTML-Grundlagen",
-        "subtitle": "Lerne native HTML-Capabilities und Progressive Enhancement Patterns. Diese Anleitung zeigt, wie eingebaute Browser-Features Komplexität reduzieren, Performance verbessern und wartbareren Code schaffen."
-      },
-      "sections": {
-        "disclosure": {
-          "title": "🎯 Aufklappbare Bereiche (Details/Summary)",
-          "js_title": "JavaScript-Implementierung",
-          "js_badge": "KOMPLEX",
-          "js_warning": "Aufwand: Manuelle ARIA-Verwaltung, Tastatur-Events, Fokus-Management und Screen Reader Kompatibilität erforderlich.",
-          "js_content1": "Custom Aufklapp-Implementierungen erfordern umfassendes Event-Handling, State-Synchronisation zwischen Komponenten und sorgfältige Beachtung von Accessibility-Anforderungen inklusive ARIA-Attributen und Tastatur-Navigation.",
-          "js_content2": "State-Management über mehrere aufklappbare Bereiche führt zu Komplexität in Event-Koordination, Memory-Management und Performance-Optimierung, besonders bei dynamischem Content-Loading.",
-          "js_cons_title": "❌ Architektur-Komplexität:",
-          "js_cons": [
-            "Event-Delegation und Memory-Leak-Prävention",
-            "ARIA State-Synchronisation und Keyboard-Trap-Management",
-            "Cross-Browser-Kompatibilität und Polyfill-Anforderungen"
-          ],
-          "native_title": "Native Details/Summary Elemente",
-          "native_badge": "ZERO-JS",
-          "native_note": "Plattform-Integration: Eingebaute ARIA-Semantik, Tastatur-Navigation, Screen Reader Support und browser-optimierte Animationen.",
-          "native_semantic_title": "Semantische HTML-Architektur",
-          "native_semantic_content": "Das HTML5 details/summary Pattern bietet deklarative Progressive Disclosure ohne JavaScript-Dependencies. Browser-Engines handhaben State-Management, Accessibility und User-Interaction nach Plattform-Konventionen.",
-          "native_enhancement_title": "Progressive Enhancement Vorteile",
-          "native_enhancement_content": "Start mit funktionalem HTML sorgt für graceful degradation in allen Umgebungen. CSS und JavaScript werden zu Enhancement-Layern statt funktionalen Anforderungen - verbessert Zuverlässigkeit und reduziert Technical Debt.",
-          "native_performance_title": "Performance-Charakteristika",
-          "native_performance_content": "Native Elemente eliminieren Bundle-Size-Overhead, reduzieren Runtime-Memory-Consumption und nutzen Browser-Optimierungen, die Custom Implementations nicht verfügbar sind. Hardware-Acceleration und effizientes Event-Handling sind eingebaut.",
-          "native_pros_title": "✅ Plattform-Vorteile:",
-          "native_pros": [
-            "Zero JavaScript Footprint mit voller Accessibility-Compliance",
-            "Browser-native Performance-Optimierungen und Hardware-Acceleration",
-            "Konsistentes Cross-Platform-Verhalten ohne Maintenance-Overhead"
-          ]
-        },
-        "modals": {
-          "title": "🪟 Modal Dialog Patterns",
-          "js_title": "Custom Modal Implementierung",
-          "js_badge": "BRÜCHIG",
-          "js_warning": "Kritische Anforderungen: Focus-Trapping, inerte Hintergrund-Inhalte, ESC-Key-Handling, Backdrop-Click-Management und ARIA Modal-Semantik.",
-          "js_button": "Custom Modal starten",
-          "js_modal_title": "Custom Modal Architektur",
-          "js_modal_content": "Dieser Ansatz erfordert Modal-Stack-Management, Verhinderung von Hintergrund-Interaktion, Koordination von Focus-Management und ordnungsgemäßes Cleanup zur Vermeidung von Memory-Leaks und Accessibility-Verletzungen.",
-          "js_modal_issue": "Kritisches Problem: Hintergrund-Content bleibt für Screen Reader und Tastatur-Navigation ohne explizites Inert-Management zugänglich.",
-          "js_modal_close": "Modal schließen",
-          "js_cons_title": "❌ Implementierungs-Herausforderungen:",
-          "js_cons": [
-            "Focus-Trap-Implementierung und Wiederherstellungs-Komplexität",
-            "Modal-Stack-Management und Z-Index-Koordination",
-            "Event-Cleanup und Memory-Leak-Prävention"
-          ],
-          "native_title": "Native Dialog Element",
-          "native_badge": "ROBUST",
-          "native_note": "Eingebaute Capabilities: Automatisches Focus-Trapping, Inert-Background-Management, ESC-Key-Support und ordnungsgemäße Modal-Semantik.",
-          "native_button": "Native Dialog starten",
-          "native_dialog_title": "Native Dialog Element",
-          "native_dialog_content": "Das HTML5 Dialog-Element bietet robuste Modal-Funktionalität mit automatischem Focus-Management, Backdrop-Interaction-Handling und ordnungsgemäßer Accessibility-Semantik in der Browser-Engine.",
-          "native_dialog_advantage": "Schlüssel-Vorteil: Hintergrund-Content wird automatisch inert, verhindert Interaktion und Screen Reader Zugriff ohne zusätzliche Implementierung.",
-          "native_dialog_close": "Dialog schließen",
-          "native_pros_title": "✅ Engine-Level Features:",
-          "native_pros": [
-            "Automatisches Focus-Trapping mit ordnungsgemäßer Wiederherstellung",
-            "Eingebautes ESC-Key-Handling und Backdrop-Click-Support",
-            "Modal-Semantik und Inert-Background-Management"
-          ]
-        },
-        "validation": {
-          "title": "📝 Constraint Validation Patterns",
-          "js_title": "Custom Validierungs-Logik",
-          "js_badge": "FRAGIL",
-          "js_warning": "Validierungs-Komplexität: Custom Error-Messaging, Timing-Koordination, Accessibility-Announcements und Server-Client-Synchronisation.",
-          "js_email_label": "E-Mail-Validierung",
-          "js_email_error": "Ungültiges E-Mail-Format erkannt",
-          "js_regex_label": "Pattern-Matching (UUID)",
-          "js_regex_error": "UUID-Format erforderlich: 8-4-4-4-12 Hex-Ziffern",
-          "js_submit": "Formular validieren",
-          "js_cons_title": "❌ Validierungs-Brüchigkeit:",
-          "js_cons": [
-            "Regex-Patterns verpassen Edge Cases und Internationalisierung",
-            "Error-Timing und Accessibility-Announcement-Koordination",
-            "Client-Server-Validierungs-Drift und Synchronisations-Issues"
-          ],
-          "native_title": "Constraint Validation API",
-          "native_badge": "SPEC-KONFORM",
-          "native_note": "Standards-basiert: Automatische Error-Announcements, internationalisierte Messages und CSS-Pseudo-Class-Integration.",
-          "native_email_label": "E-Mail-Validierung",
-          "native_email_placeholder": "entwickler@beispiel.org",
-          "native_uuid_label": "UUID Pattern",
-          "native_uuid_placeholder": "550e8400-e29b-41d4-a716-446655440000",
-          "native_uuid_title": "Gib ein gültiges UUID-Format ein (z.B. 550e8400-e29b-41d4-a716-446655440000)",
-          "native_api_label": "API Endpoint URL",
-          "native_api_placeholder": "https://api.beispiel.org/v1",
-          "native_submit": "Formular absenden",
-          "native_pros_title": "✅ Spezifikations-Konformität:",
-          "native_pros": [
-            "RFC-konforme Validierungs-Pattern mit Internationalisierung",
-            "Automatische Error-Messages in der bevorzugten Sprache des Users",
-            "CSS-Pseudo-Classes (:valid, :invalid) für Styling-Integration"
-          ]
-        },
-        "progress": {
-          "title": "📊 Progress Indication Patterns",
-          "js_title": "Custom Progress Implementierung",
-          "js_badge": "SEMANTIK-LEER",
-          "js_warning": "Accessibility-Gap: Keine semantische Bedeutung ohne explizite ARIA-Implementierung und Screen Reader Progress-Announcements.",
-          "js_text": "Build-Progress:",
-          "js_button": "Build-Prozess starten",
-          "js_cons_title": "❌ Semantische Limitierungen:",
-          "js_cons": [
-            "Keine inhärente semantische Bedeutung für Assistive Technologies",
-            "Manuelles ARIA Live-Region-Management für Progress-Updates",
-            "Custom Animation-Performance und Value-Interpolation"
-          ],
-          "native_title": "Native Progress Element",
-          "native_badge": "SEMANTISCH",
-          "native_note": "Semantische Integration: Eingebaute Progress-Role, automatische ARIA-Value-Announcements und Indeterminate-State-Support.",
-          "native_compilation": "Kompilierungs-Progress",
-          "native_compilation_text": "75% vollständig",
-          "native_indeterminate": "Unbestimmte Operation (wird verarbeitet)",
-          "native_indeterminate_text": "Verarbeite Dependencies...",
-          "native_dynamic": "Dynamischer Progress:",
-          "native_button": "Prozess starten",
-          "native_pros_title": "✅ Semantische Vorteile:",
-          "native_pros": [
-            "Eingebaute Progress-Role mit automatischen Value-Announcements",
-            "Indeterminate-State-Support für Operations unbekannter Dauer",
-            "Plattform-optimiertes Rendering und Animation-Performance"
-          ]
-        },
-        "temporal": {
-          "title": "📅 Temporal Input Patterns",
-          "js_title": "Custom Date Picker",
-          "js_badge": "SCHWERGEWICHTIG",
-          "js_warning": "Implementierungs-Umfang: Kalender-Widget-Architektur, Tastatur-Navigation, Internationalisierung, Timezone-Handling und Mobile-Touch-Optimierung.",
-          "js_label": "Deployment-Datum (Custom)",
-          "js_placeholder": "JJJJ-MM-TT",
-          "js_picker_content": "[Kalender-Widget-Implementierung]\nBenötigt: Date-Manipulation-Library, Internationalisierung,\nTastatur-Navigation, Mobile-Gesture-Handling,\nTimezone-Berechnungen, Accessibility-Compliance.",
-          "js_cons_title": "❌ Implementierungs-Overhead:",
-          "js_cons": [
-            "Große JavaScript-Libraries und komplexe Kalender-Logik",
-            "Mobile-UX-Inkonsistenz mit Plattform-Date-Pickern",
-            "Internationalisierungs-Komplexität und Timezone-Edge-Cases"
-          ],
-          "native_title": "Native Temporal Inputs",
-          "native_badge": "PLATTFORM-NATIV",
-          "native_note": "OS-Integration: Plattform-konsistente UI, automatische Tastatur-Navigation, eingebaute Validierung und Internationalisierungs-Support.",
-          "native_release_label": "Release-Datum",
-          "native_timestamp_label": "Build-Timestamp",
-          "native_window_label": "Deployment-Fenster",
-          "native_pros_title": "✅ Plattform-Integration:",
-          "native_pros": [
-            "Zero-Bundle-Impact mit nativer OS-Picker-Integration",
-            "Automatische Validierung und Internationalisierungs-Support",
-            "Konsistente UX entsprechend Plattform-Konventionen"
-          ]
-        },
-        "autocomplete": {
-          "title": "🔍 Autocomplete Patterns",
-          "js_title": "Custom Autocomplete",
-          "js_badge": "INTERAKTIONS-SCHWER",
-          "js_warning": "Interaktions-Komplexität: Dropdown-Positionierung, Tastatur-Navigation, ARIA-Combobox-Implementierung und Mobile-Touch-Handling.",
-          "js_label": "Framework-Suche (Custom)",
-          "js_placeholder": "Framework-Name eingeben...",
-          "js_cons_title": "❌ Interaktions-Management:",
-          "js_cons": [
-            "Komplexe ARIA-Combobox-Implementierung und State-Management",
-            "Dropdown-Positionierung und Viewport-Kollisions-Erkennung",
-            "Mobile-Keyboard-Optimierung und Touch-Event-Handling"
-          ],
-          "native_title": "Native Datalist Element",
-          "native_badge": "ZERO-CONFIG",
-          "native_note": "Native Combobox: Eingebaute ARIA-Combobox-Semantik, Tastatur-Navigation und plattform-konsistente Interaktions-Pattern.",
-          "native_framework_label": "JavaScript Framework",
-          "native_framework_placeholder": "Framework auswählen oder eingeben...",
-          "native_language_label": "Programmiersprache",
-          "native_language_placeholder": "Sprache auswählen...",
-          "native_pros_title": "✅ Zero-Configuration Vorteile:",
-          "native_pros": [
-            "Native Combobox-Semantik mit automatischem ARIA-Support",
-            "Plattform-konsistente Tastatur- und Interaktions-Pattern",
-            "Formular-Validierungs-Integration und graceful Degradation"
-          ]
-        }
-      },
-      "summary": {
-        "title": "HTML-First Development",
-        "content": "Native HTML-Elemente repräsentieren Jahre von Browser-Engineering, Accessibility-Forschung und Web-Standards-Evolution. Sie bieten robuste Funktionalität mit minimalem Implementierungs-Overhead und maximaler Kompatibilität.",
-        "approach_title": "Der Progressive Enhancement Ansatz:",
-        "approach_items": [
-          "Baue mit semantischem HTML, das universell funktioniert",
-          "Verbessere das visuelle Design durch CSS ohne Funktionalitäts-Brüche",
-          "Schichte JavaScript für komplexe Interaktionen, wo native Capabilities unzureichend sind"
-        ],
-        "closing": "Nutze Browser-Engines statt ihre Funktionalität zu reimplementieren. Deine Codebase wird wartbarer, deine User haben bessere Experiences.",
-        "quote": "Die anspruchsvollste Architektur ist oft die, die existierende, gut getestete Komponenten nutzt. Native HTML-Elemente bieten Jahrzehnte von Optimierung und Accessibility-Engineering—baue auf diesem Fundament auf, nicht darum herum."
-      }
-    },
-    "lang": "de",
-    "dir": "ltr"
-  }
-}

index.pug

@@ -9,7 +9,7 @@ html(lang=lang, dir=dir)
 		meta(name="description", content=t.meta.description)
 		link(rel="stylesheet", href="src/main.css")
 
-	body
+	body.search_plugin_added
 		//- Hero Section
 		.hero
 			h1= t.hero.title
@@ -225,75 +225,4 @@ html(lang=lang, dir=dir)
 
 			.zen-quote= t.summary.quote
 
-		script.
+		script(src="src/main.js")
-			// JavaScript functions from original HTML
-			const frameworks = ['React', 'Vue.js', 'Angular', 'Svelte', 'Solid', 'Alpine.js', 'Lit', 'Preact', 'Qwik', 'SvelteKit', 'Next.js', 'Nuxt.js'];
-
-			function filterFrameworks(value) {
-				const results = document.getElementById('js-results');
-				if (!value) {
-					results.style.display = 'none';
-					return;
-				}
-				const filtered = frameworks.filter(fw => fw.toLowerCase().includes(value.toLowerCase()));
-				results.innerHTML = filtered.map(fw => `<div style="padding:8px; cursor:pointer;" onclick="selectFramework('${fw}')">${fw}</div>`).join('');
-				results.style.display = filtered.length ? 'block' : 'none';
-			}
-
-			function selectFramework(fw) {
-				document.getElementById('js-search').value = fw;
-				document.getElementById('js-results').style.display = 'none';
-			}
-
-			function startNativeProgress() {
-				const progress = document.getElementById('nativeProgress');
-				const text = document.getElementById('nativeProgressText');
-				let value = 0;
-				const interval = setInterval(() => {
-					value += Math.random() * 15;
-					if (value >= 100) {
-						value = 100;
-						clearInterval(interval);
-					}
-					progress.value = value;
-					text.textContent = Math.round(value) + '%';
-				}, 200);
-			}
-
-			function toggleContent(id) {
-				document.getElementById(id).classList.toggle("active");
-			}
-
-			function openJSModal() {
-				document.getElementById('jsModal').style.display = 'flex';
-			}
-
-			function closeJSModal() {
-				document.getElementById('jsModal').style.display = 'none';
-			}
-
-			function validateJSForm(event) {
-				event.preventDefault();
-				alert('Custom validation would run here');
-				return false;
-			}
-
-			function startJSProgress() {
-				const bar = document.getElementById('jsProgress');
-				const text = document.getElementById('jsProgressText');
-				let width = 0;
-				const interval = setInterval(() => {
-					width += Math.random() * 15;
-					if (width >= 100) {
-						width = 100;
-						clearInterval(interval);
-					}
-					bar.style.width = width + '%';
-					text.textContent = Math.round(width) + '%';
-				}, 200);
-			}
-
-			function openDatePicker() {
-				const picker = document.getElementById('datePicker');
-				picker.style.display = picker.style.display === 'none' ? 'block' : 'none';
-			}

low.pugrc

@@ -1,207 +0,0 @@
-{
-  "locals": {
-    "t": {
-      "meta": {
-        "title": "HTML-Grundlagen für Einsteiger: Browser können schon alles",
-        "description": "Entdecke, warum Browser bereits fertige Lösungen für deine Web-Projekte haben. Lerne, wie du mit einfachem HTML professionelle Websites baust, ohne komplizierte Programmierung."
-      },
-      "hero": {
-        "title": "🌐 HTML für Einsteiger",
-        "subtitle": "Entdecke, warum Browser bereits fertige Lösungen für deine Web-Projekte haben. Lerne, wie du mit einfachem HTML professionelle Websites baust, ohne komplizierte Programmierung."
-      },
-      "sections": {
-        "disclosure": {
-          "title": "📖 Aufklappbare Texte",
-          "js_title": "Komplizierte Lösung",
-          "js_badge": "SCHWIERIG",
-          "js_warning": "Problem: Du musst viel Programmieren und an viele Dinge denken - Tastatur-Bedienung, Hilfen für Menschen mit Behinderungen, verschiedene Browser.",
-          "js_content1": "Wenn du selbst aufklappbare Bereiche programmierst, musst du daran denken: Wie reagiert es auf Klicks? Wie bedient man es mit der Tastatur? Können blinde Menschen es benutzen? Das ist sehr viel Arbeit.",
-          "js_content2": "Und wenn du mehrere aufklappbare Bereiche hast, wird es noch komplizierter. Du musst aufpassen, dass sie sich nicht gegenseitig stören.",
-          "js_cons_title": "❌ Warum das schwierig ist:",
-          "js_cons": [
-            "Du musst viel programmieren und testen",
-            "Funktioniert nicht in allen Browsern gleich",
-            "Menschen mit Behinderungen können es nicht benutzen"
-          ],
-          "native_title": "Einfache Browser-Lösung",
-          "native_badge": "FERTIG",
-          "native_note": "Gut zu wissen: Browser haben das schon eingebaut. Funktioniert überall, für alle Menschen, ohne Programmierung.",
-          "native_semantic_title": "So einfach geht's",
-          "native_semantic_content": "Mit HTML-Tags `<details>` und `<summary>` machst du aufklappbare Bereiche. Der Browser macht alles automatisch: Klick-Verhalten, Tastatur-Bedienung, Hilfen für Screen Reader.",
-          "native_enhancement_title": "Warum das clever ist",
-          "native_enhancement_content": "Deine Website funktioniert immer - auch wenn JavaScript ausgeschaltet ist oder langsam lädt. Das ist wie ein Auto mit Reserverad: Du kommst immer ans Ziel.",
-          "native_performance_title": "Schneller und sparsamer",
-          "native_performance_content": "Browser-eigene Lösungen sind optimiert und schnell. Deine Website lädt schneller und braucht weniger Speicher. Das ist gut für langsamere Geräte und schont den Akku.",
-          "native_pros_title": "✅ Vorteile der Browser-Lösung:",
-          "native_pros": [
-            "Funktioniert sofort, ohne Programmierung",
-            "Ist für alle Menschen zugänglich",
-            "Läuft schnell und zuverlässig"
-          ]
-        },
-        "modals": {
-          "title": "💬 Pop-up Fenster",
-          "js_title": "Selbst gebaute Pop-ups",
-          "js_badge": "FEHLERANFÄLLIG",
-          "js_warning": "Achtung: Pop-ups richtig zu machen ist schwer - du musst den Hintergrund blockieren, die Tastatur-Bedienung programmieren und an Barrierefreiheit denken.",
-          "js_button": "Eigenes Pop-up öffnen",
-          "js_modal_title": "Selbstgebautes Pop-up",
-          "js_modal_content": "Dieses Pop-up wurde selbst programmiert. Das bedeutet: Jemand musste dafür sorgen, dass der Hintergrund nicht mehr bedienbar ist, dass man es mit ESC schließen kann, und dass Screen Reader es richtig vorlesen.",
-          "js_modal_issue": "Problem: Oft vergisst man wichtige Details, und dann können manche Menschen das Pop-up nicht richtig benutzen.",
-          "js_modal_close": "Schließen",
-          "js_cons_title": "❌ Probleme bei eigenen Pop-ups:",
-          "js_cons": [
-            "Man kann aus Versehen noch den Hintergrund bedienen",
-            "Komplizierte Programmierung für Tastatur-Navigation",
-            "Funktioniert oft nicht für Menschen mit Behinderungen"
-          ],
-          "native_title": "Browser-eigene Dialoge",
-          "native_badge": "SICHER",
-          "native_note": "Besser so: Browser haben eingebaute Dialog-Fenster, die automatisch alles richtig machen - Hintergrund blockieren, ESC-Taste, Accessibility.",
-          "native_button": "Browser-Dialog öffnen",
-          "native_dialog_title": "Browser-eigener Dialog",
-          "native_dialog_content": "Dieser Dialog nutzt die eingebaute Browser-Funktionalität. Der Browser sorgt automatisch dafür, dass alles korrekt funktioniert - auch für Menschen, die das Internet anders nutzen.",
-          "native_dialog_advantage": "Der große Vorteil: Du musst nichts programmieren, und es funktioniert trotzdem perfekt für alle.",
-          "native_dialog_close": "Dialog schließen",
-          "native_pros_title": "✅ Browser-Dialog Vorteile:",
-          "native_pros": [
-            "Hintergrund wird automatisch blockiert",
-            "ESC-Taste funktioniert von selbst",
-            "Perfekt für alle Menschen zugänglich"
-          ]
-        },
-        "validation": {
-          "title": "✅ Eingabe-Prüfung",
-          "js_title": "Selbst programmierte Prüfung",
-          "js_badge": "FEHLERTRÄCHTIG",
-          "js_warning": "Schwierigkeit: Eingaben zu prüfen ist kompliziert - du musst alle möglichen Fehler bedenken und Fehlermeldungen in verschiedenen Sprachen schreiben.",
-          "js_email_label": "E-Mail prüfen (selbst gemacht)",
-          "js_email_error": "Diese E-Mail-Adresse ist falsch",
-          "js_regex_label": "Spezielle Codes prüfen",
-          "js_regex_error": "Der Code muss das Format haben: 8-4-4-4-12 Zeichen",
-          "js_submit": "Eingabe prüfen",
-          "js_cons_title": "❌ Probleme bei eigener Prüfung:",
-          "js_cons": [
-            "Du vergisst oft seltene, aber gültige Eingaben",
-            "Fehlermeldungen sind nur auf Deutsch",
-            "Unterschiede zwischen dem, was deine Website und der Server als richtig ansehen"
-          ],
-          "native_title": "Browser-eigene Prüfung",
-          "native_badge": "INTERNATIONAL",
-          "native_note": "Cleverer: Browser kennen die offiziellen Regeln für E-Mails, Daten etc. und prüfen automatisch in der Sprache des Benutzers.",
-          "native_email_label": "E-Mail-Adresse",
-          "native_email_placeholder": "name@beispiel.de",
-          "native_uuid_label": "System-Code",
-          "native_uuid_placeholder": "550e8400-e29b-41d4-a716-446655440000",
-          "native_uuid_title": "Gib einen gültigen System-Code ein (Format: 550e8400-e29b-41d4-a716-446655440000)",
-          "native_api_label": "Website-Adresse",
-          "native_api_placeholder": "https://meine-website.de",
-          "native_submit": "Absenden",
-          "native_pros_title": "✅ Browser-Prüfung Vorteile:",
-          "native_pros": [
-            "Kennt internationale Standards und seltene Fälle",
-            "Fehlermeldungen in der Sprache des Benutzers",
-            "Funktioniert auch ohne Internet-Verbindung"
-          ]
-        },
-        "progress": {
-          "title": "📈 Fortschritts-Anzeigen",
-          "js_title": "Selbst gebaute Anzeige",
-          "js_badge": "STUMM",
-          "js_warning": "Problem: Selbstgemachte Fortschritts-Balken sind für Screen Reader unsichtbar - blinde Menschen wissen nicht, was passiert.",
-          "js_text": "Fortschritt:",
-          "js_button": "Prozess starten",
-          "js_cons_title": "❌ Probleme eigener Anzeigen:",
-          "js_cons": [
-            "Screen Reader können den Fortschritt nicht vorlesen",
-            "Du musst selbst dafür sorgen, dass Updates angesagt werden",
-            "Sieht in jedem Browser anders aus"
-          ],
-          "native_title": "Browser-eigene Fortschritts-Anzeige",
-          "native_badge": "SPRECHEND",
-          "native_note": "Besser: Browser haben eingebaute Fortschritts-Elemente, die automatisch den aktuellen Stand ansagen und für alle sichtbar sind.",
-          "native_compilation": "Website wird erstellt",
-          "native_compilation_text": "75% fertig",
-          "native_indeterminate": "Unbestimmter Vorgang",
-          "native_indeterminate_text": "Daten werden verarbeitet...",
-          "native_dynamic": "Dynamischer Fortschritt:",
-          "native_button": "Vorgang starten",
-          "native_pros_title": "✅ Browser-Anzeige Vorteile:",
-          "native_pros": [
-            "Screen Reader sagen automatisch den Fortschritt an",
-            "Funktioniert auch bei unbekannter Dauer",
-            "Sieht auf jedem Gerät richtig aus"
-          ]
-        },
-        "temporal": {
-          "title": "📅 Datum und Zeit eingeben",
-          "js_title": "Selbst gebauter Kalender",
-          "js_badge": "RIESIG",
-          "js_warning": "Aufwand: Einen Kalender zu programmieren ist sehr viel Arbeit - verschiedene Sprachen, Zeitzonen, Touch-Bedienung, und das alles für alle Geräte.",
-          "js_label": "Datum auswählen (selbst gemacht)",
-          "js_placeholder": "TT.MM.JJJJ",
-          "js_picker_content": "[Hier wäre ein selbstgebauter Kalender]\nBraucht: Programmierung für Kalender-Ansicht,\nTouch-Bedienung, verschiedene Sprachen,\nZeitzonen, verschiedene Handys und Tablets.",
-          "js_cons_title": "❌ Probleme eigener Kalender:",
-          "js_cons": [
-            "Sehr viel Programmier-Aufwand und große Dateien",
-            "Sieht auf Handys anders aus als gewohnt",
-            "Schwierig für verschiedene Länder und Zeitzonen"
-          ],
-          "native_title": "System-eigene Datum-Auswahl",
-          "native_badge": "GEWOHNT",
-          "native_note": "Einfacher: Jedes Gerät hat schon Datum-Picker eingebaut. Die kennen die Nutzer schon und sind in ihrer Sprache.",
-          "native_release_label": "Veröffentlichungs-Datum",
-          "native_timestamp_label": "Zeitstempel",
-          "native_window_label": "Zeitraum",
-          "native_pros_title": "✅ System-Picker Vorteile:",
-          "native_pros": [
-            "Keine zusätzlichen Downloads nötig",
-            "Sieht aus wie gewohnt auf jedem Gerät",
-            "Automatisch in der richtigen Sprache und Zeitzone"
-          ]
-        },
-        "autocomplete": {
-          "title": "🔍 Auto-Vervollständigung",
-          "js_title": "Selbst programmierte Vorschläge",
-          "js_badge": "KOMPLIZIERT",
-          "js_warning": "Herausforderung: Dropdown-Listen mit Vorschlägen zu bauen ist schwer - Positionierung, Tastatur-Navigation, Touch-Bedienung auf Handys.",
-          "js_label": "Suche (selbst gemacht)",
-          "js_placeholder": "Tippe um zu suchen...",
-          "js_cons_title": "❌ Schwierigkeiten eigener Vorschläge:",
-          "js_cons": [
-            "Komplizierte Programmierung für Tastatur-Bedienung",
-            "Dropdown muss richtig positioniert werden",
-            "Schwierig auf Touch-Geräten zu bedienen"
-          ],
-          "native_title": "Browser-eigene Vorschläge",
-          "native_badge": "EINFACH",
-          "native_note": "Praktisch: Browser haben eingebaute Vorschlag-Listen, die automatisch richtig funktionieren - auch mit Tastatur und auf Touch-Geräten.",
-          "native_framework_label": "Website-Framework",
-          "native_framework_placeholder": "Wähle oder tippe...",
-          "native_language_label": "Programmier-Sprache",
-          "native_language_placeholder": "Sprache auswählen...",
-          "native_pros_title": "✅ Browser-Vorschläge Vorteile:",
-          "native_pros": [
-            "Funktioniert automatisch mit Tastatur und Touch",
-            "Sieht aus wie andere bekannte Eingabe-Felder",
-            "Arbeitet gut mit Formular-Prüfung zusammen"
-          ]
-        }
-      },
-      "summary": {
-        "title": "Browser sind deine Freunde",
-        "content": "Browser sind wie gut ausgestattete Werkzeugkästen. Sie enthalten bereits Lösungen für die meisten Aufgaben beim Website-Bau. Diese Lösungen sind getestet, funktionieren überall und sind für alle Menschen zugänglich.",
-        "approach_title": "So baust du clevere Websites:",
-        "approach_items": [
-          "Nutze zuerst, was der Browser schon kann",
-          "Mache es hübsch mit Design (CSS)",
-          "Füge nur bei Bedarf eigene Programmierung hinzu"
-        ],
-        "closing": "Warum das Rad neu erfinden? Browser-Entwickler haben Jahre daran gearbeitet, dass alles perfekt funktioniert. Nutze diese Arbeit für deine Projekte.",
-        "quote": "Die beste Lösung ist oft die einfachste. Browser bieten jahrelang erprobte Funktionen - baue darauf auf, statt alles selbst zu machen."
-      }
-    },
-    "lang": "de",
-    "dir": "ltr"
-  }
-}

original.pugrc

@@ -1,207 +0,0 @@
-{
-	"locals": {
-		"t": {
-			"meta": {
-				"title": "HTML Fundamentals: Building with Native HTML",
-				"description": "Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."
-			},
-			"hero": {
-				"title": "🚀 HTML Fundamentals",
-				"subtitle": "Master native HTML capabilities and progressive enhancement patterns. This guide demonstrates how leveraging built-in browser features reduces complexity, improves performance, and creates more maintainable codebases."
-			},
-			"sections": {
-				"disclosure": {
-					"title": "🎯 Details/Summary Patterns",
-					"js_title": "JavaScript-Dependent Implementation",
-					"js_badge": "COMPLEX",
-					"js_warning": "Implementation Overhead: Manual ARIA state management, keyboard event handling, focus management, and screen reader compatibility.",
-					"js_content1": "Custom collapsible implementations require comprehensive event handling, state synchronization across components, and careful attention to accessibility requirements including proper ARIA attributes and keyboard navigation patterns.",
-					"js_content2": "Managing state across multiple collapsible sections introduces complexity in event coordination, memory management, and performance optimization, particularly when dealing with dynamic content loading.",
-					"js_cons_title": "❌ Architecture Complexity:",
-					"js_cons": [
-						"Event delegation and memory leak prevention",
-						"ARIA state synchronization and keyboard trap management",
-						"Cross-browser compatibility and polyfill requirements"
-					],
-					"native_title": "Native Details/Summary Elements",
-					"native_badge": "ZERO-JS",
-					"native_note": "Platform Integration: Built-in ARIA semantics, keyboard navigation, screen reader support, and browser-optimized animations.",
-					"native_semantic_title": "Semantic HTML Architecture",
-					"native_semantic_content": "The HTML5 details/summary pattern provides declarative progressive disclosure without JavaScript dependencies. Browser engines handle state management, accessibility, and user interaction patterns according to platform conventions.",
-					"native_enhancement_title": "Progressive Enhancement Benefits",
-					"native_enhancement_content": "Starting with functional HTML ensures graceful degradation across all environments. CSS and JavaScript become enhancement layers rather than functional requirements, improving reliability and reducing technical debt.",
-					"native_performance_title": "Performance Characteristics",
-					"native_performance_content": "Native elements eliminate bundle size overhead, reduce runtime memory consumption, and leverage browser optimizations unavailable to custom implementations. Hardware acceleration and efficient event handling come built-in.",
-					"native_pros_title": "✅ Platform Advantages:",
-					"native_pros": [
-						"Zero JavaScript footprint with full accessibility compliance",
-						"Browser-native performance optimizations and hardware acceleration",
-						"Consistent cross-platform behavior with no maintenance overhead"
-					]
-				},
-				"modals": {
-					"title": "🪟 Modal Dialog Patterns",
-					"js_title": "Custom Modal Implementation",
-					"js_badge": "BRITTLE",
-					"js_warning": "Critical Requirements: Focus trapping, inert background content, ESC key handling, backdrop click management, and ARIA modal semantics.",
-					"js_button": "Launch Custom Modal",
-					"js_modal_title": "Custom Modal Architecture",
-					"js_modal_content": "This approach requires managing the modal stack, preventing background interaction, coordinating focus management, and ensuring proper cleanup to avoid memory leaks and accessibility violations.",
-					"js_modal_issue": "Critical Issue: Background content remains accessible to screen readers and keyboard navigation without explicit inert management.",
-					"js_modal_close": "Close Modal",
-					"js_cons_title": "❌ Implementation Challenges:",
-					"js_cons": [
-						"Focus trap implementation and restoration complexity",
-						"Modal stack management and z-index coordination",
-						"Event cleanup and memory leak prevention"
-					],
-					"native_title": "Native Dialog Element",
-					"native_badge": "ROBUST",
-					"native_note": "Built-in Capabilities: Automatic focus trapping, inert background management, ESC key support, and proper modal semantics.",
-					"native_button": "Launch Native Dialog",
-					"native_dialog_title": "Native Dialog Element",
-					"native_dialog_content": "The HTML5 dialog element provides robust modal functionality with automatic focus management, backdrop interaction handling, and proper accessibility semantics built into the browser engine.",
-					"native_dialog_advantage": "Key Advantage: Background content becomes automatically inert, preventing interaction and screen reader access without additional implementation.",
-					"native_dialog_close": "Close Dialog",
-					"native_pros_title": "✅ Engine-Level Features:",
-					"native_pros": [
-						"Automatic focus trapping with proper restoration",
-						"Built-in ESC key handling and backdrop click support",
-						"Modal semantics and inert background management"
-					]
-				},
-				"validation": {
-					"title": "📝 Constraint Validation Patterns",
-					"js_title": "Custom Validation Logic",
-					"js_badge": "FRAGILE",
-					"js_warning": "Validation Complexity: Custom error messaging, timing coordination, accessibility announcements, and server-client synchronization.",
-					"js_email_label": "Email Validation",
-					"js_email_error": "Invalid email format detected",
-					"js_regex_label": "Pattern Matching (UUID)",
-					"js_regex_error": "UUID format required: 8-4-4-4-12 hex digits",
-					"js_submit": "Validate Form",
-					"js_cons_title": "❌ Validation Brittleness:",
-					"js_cons": [
-						"Regex patterns miss edge cases and internationalization",
-						"Error timing and accessibility announcement coordination",
-						"Client-server validation drift and synchronization issues"
-					],
-					"native_title": "Constraint Validation API",
-					"native_badge": "SPEC-COMPLIANT",
-					"native_note": "Standards-Based: Automatic error announcements, internationalized messages, and CSS pseudo-class integration.",
-					"native_email_label": "Email Validation",
-					"native_email_placeholder": "developer@example.org",
-					"native_uuid_label": "UUID Pattern",
-					"native_uuid_placeholder": "550e8400-e29b-41d4-a716-446655440000",
-					"native_uuid_title": "Enter a valid UUID format (e.g., 550e8400-e29b-41d4-a716-446655440000)",
-					"native_api_label": "API Endpoint URL",
-					"native_api_placeholder": "https://api.example.org/v1",
-					"native_submit": "Submit Form",
-					"native_pros_title": "✅ Specification Compliance:",
-					"native_pros": [
-						"RFC-compliant validation patterns with internationalization",
-						"Automatic error messaging in user's preferred language",
-						"CSS pseudo-classes (:valid, :invalid) for styling integration"
-					]
-				},
-				"progress": {
-					"title": "📊 Progress Indication Patterns",
-					"js_title": "Custom Progress Implementation",
-					"js_badge": "SEMANTIC-VOID",
-					"js_warning": "Accessibility Gap: No semantic meaning without explicit ARIA implementation and screen reader progress announcements.",
-					"js_text": "Build Progress:",
-					"js_button": "Start Build Process",
-					"js_cons_title": "❌ Semantic Limitations:",
-					"js_cons": [
-						"No inherent semantic meaning for assistive technologies",
-						"Manual ARIA live region management for progress updates",
-						"Custom animation performance and value interpolation"
-					],
-					"native_title": "Native Progress Element",
-					"native_badge": "SEMANTIC",
-					"native_note": "Semantic Integration: Built-in progress role, automatic ARIA value announcements, and indeterminate state support.",
-					"native_compilation": "Compilation Progress",
-					"native_compilation_text": "75% complete",
-					"native_indeterminate": "Indeterminate Operation (processing)",
-					"native_indeterminate_text": "Processing dependencies...",
-					"native_dynamic": "Dynamic Progress:",
-					"native_button": "Start Process",
-					"native_pros_title": "✅ Semantic Advantages:",
-					"native_pros": [
-						"Built-in progress role with automatic value announcements",
-						"Indeterminate state support for unknown duration operations",
-						"Platform-optimized rendering and animation performance"
-					]
-				},
-				"temporal": {
-					"title": "📅 Temporal Input Patterns",
-					"js_title": "Custom Date Picker",
-					"js_badge": "HEAVYWEIGHT",
-					"js_warning": "Implementation Scope: Calendar widget architecture, keyboard navigation, internationalization, timezone handling, and mobile touch optimization.",
-					"js_label": "Deployment Date (Custom)",
-					"js_placeholder": "YYYY-MM-DD",
-					"js_picker_content": "[Calendar widget implementation]\nRequires: Date manipulation library, internationalization,\nkeyboard navigation, mobile gesture handling,\ntimezone calculations, accessibility compliance.",
-					"js_cons_title": "❌ Implementation Overhead:",
-					"js_cons": [
-						"Large JavaScript libraries and complex calendar logic",
-						"Mobile UX inconsistency with platform date pickers",
-						"Internationalization complexity and timezone edge cases"
-					],
-					"native_title": "Native Temporal Inputs",
-					"native_badge": "PLATFORM-NATIVE",
-					"native_note": "OS Integration: Platform-consistent UI, automatic keyboard navigation, built-in validation, and internationalization support.",
-					"native_release_label": "Release Date",
-					"native_timestamp_label": "Build Timestamp",
-					"native_window_label": "Deployment Window",
-					"native_pros_title": "✅ Platform Integration:",
-					"native_pros": [
-						"Zero-bundle impact with native OS picker integration",
-						"Automatic validation and internationalization support",
-						"Consistent UX aligned with platform conventions"
-					]
-				},
-				"autocomplete": {
-					"title": "🔍 Autocomplete Patterns",
-					"js_title": "Custom Autocomplete",
-					"js_badge": "INTERACTION-HEAVY",
-					"js_warning": "Interaction Complexity: Dropdown positioning, keyboard navigation, ARIA combobox implementation, and mobile touch handling.",
-					"js_label": "Framework Search (Custom)",
-					"js_placeholder": "Type framework name...",
-					"js_cons_title": "❌ Interaction Management:",
-					"js_cons": [
-						"Complex ARIA combobox implementation and state management",
-						"Dropdown positioning and viewport collision detection",
-						"Mobile keyboard optimization and touch event handling"
-					],
-					"native_title": "Native Datalist Element",
-					"native_badge": "ZERO-CONFIG",
-					"native_note": "Native Combobox: Built-in ARIA combobox semantics, keyboard navigation, and platform-consistent interaction patterns.",
-					"native_framework_label": "JavaScript Framework",
-					"native_framework_placeholder": "Select or type framework...",
-					"native_language_label": "Programming Language",
-					"native_language_placeholder": "Choose language...",
-					"native_pros_title": "✅ Zero-Configuration Benefits:",
-					"native_pros": [
-						"Native combobox semantics with automatic ARIA support",
-						"Platform-consistent keyboard and interaction patterns",
-						"Form validation integration and graceful degradation"
-					]
-				}
-			},
-			"summary": {
-				"title": "HTML-First Development",
-				"content": "Native HTML elements represent years of browser engineering, accessibility research, and web standards evolution. They provide robust functionality with minimal implementation overhead and maximum compatibility.",
-				"approach_title": "The Progressive Enhancement Approach:",
-				"approach_items": [
-					"Build with semantic HTML that functions universally",
-					"Enhance visual design through CSS without breaking functionality",
-					"Layer JavaScript for complex interactions where native capabilities are insufficient"
-				],
-				"closing": "Leverage browser engines rather than reimplementing their functionality. Your codebase will be more maintainable, your users will have better experiences.",
-				"quote": "The most sophisticated architecture is often the one that uses existing, well-tested components. Native HTML elements provide decades of optimization and accessibility engineering—build upon this foundation rather than around it."
-			}
-		},
-		"lang": "en",
-		"dir": "ltr"
-	}
-}

package.json

@@ -6,7 +6,7 @@
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"start": "parcel --port 1312 --public-url / index.pug --open",
-		"build": "parcel build index.pug --out-dir dist --public-url /html-over-js --no-minify",
+		"build": "parcel build index.pug --out-dir docs --public-url /html-over-js --no-minify",
 		"format": "prettier --write src/**/*.pug index.pug package.json && prettier --write --parser json .pugrc"
 	},
 	"author": "Michael Werner Czechowski <mail@dailysh.it>",