update, text, response

main/overlayDebug.js

@@ -0,0 +1,53 @@
+<script>
+(function() {
+  const overlay = document.createElement("div");
+  overlay.id = "debug-overlay";
+  Object.assign(overlay.style, {
+    position: "fixed",
+    bottom: "10px",
+    left: "10px",
+    background: "rgba(0,0,0,0.7)",
+    color: "white",
+    fontSize: "12px",
+    fontFamily: "monospace",
+    padding: "8px 10px",
+    borderRadius: "8px",
+    zIndex: "9999",
+    lineHeight: "1.4",
+    pointerEvents: "none",
+    whiteSpace: "nowrap"
+  });
+  document.body.appendChild(overlay);
+
+  function getSample() {
+    // 🎯 Bevorzugt den Textbereich mit ID "txt", sonst das erste <p>
+    return document.querySelector("#txt") || document.querySelector("p");
+  }
+
+  function updateInfo() {
+    const sample = getSample();
+    const computed = sample ? getComputedStyle(sample) : {};
+    const fontSize = computed.fontSize || "unknown";
+    const fontFamily = computed.fontFamily || "unknown";
+    const transform = computed.transform || "none";
+    const transformOrigin = computed.transformOrigin || "center";
+    const metrics = sample ? sample.getBoundingClientRect() : { height: 0 };
+
+    overlay.innerHTML = `
+      <b>📏 Debug Info</b><br>
+      Viewport: ${window.innerWidth}px × ${window.innerHeight}px<br>
+      devicePixelRatio: ${window.devicePixelRatio}<br>
+      Font size (CSS): ${fontSize}<br>
+      Rendered height: ${metrics.height.toFixed(2)}px<br>
+      Font family: ${fontFamily}<br>
+      Transform: <span style="color:${transform !== "none" ? "orange" : "lime"};">${transform}</span><br>
+      Origin: ${transformOrigin}<br>
+      Zoom (approx): ${(100 / window.devicePixelRatio).toFixed(1)}%
+    `;
+  }
+
+  updateInfo();
+  window.addEventListener("resize", updateInfo);
+  window.addEventListener("scroll", updateInfo);
+})();
+</script>