update, text, response

2025-11-02 11:09:14 +01:00
parent 14776c86b0
commit eed8a4ddcf
2794 changed files with 156786 additions and 129204 deletions
--- a/tab/test.php
+++ b/tab/test.php
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Clamp()-Berechner PRO+</title>
+<style>
+  body {
+    font-family: "Segoe UI", Roboto, sans-serif;
+    background: linear-gradient(180deg, #f9fafc 0%, #eef2f7 100%);
+    color: #333;
+    max-width: 720px;
+    margin: 2rem auto;
+    padding: 1.5rem;
+    border-radius: 1rem;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+  }
+  h1 {
+    text-align: center;
+    color: #b22222;
+    margin-bottom: 1.5rem;
+  }
+  label {
+    display: block;
+    margin-top: 1rem;
+    font-weight: 600;
+  }
+  input, select {
+    width: 100%;
+    padding: 0.5rem 0.7rem;
+    margin-top: 0.3rem;
+    font-size: 1rem;
+    border: 1px solid #ccc;
+    border-radius: 0.5rem;
+  }
+  .output {
+    margin-top: 1.5rem;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-radius: 0.7rem;
+    padding: 1rem;
+    font-family: monospace;
+    word-break: break-all;
+  }
+  .preview-box {
+    margin: 2rem auto 1rem;
+    height: 120px;
+    background: #ffeaea;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #333;
+    font-weight: bold;
+    border: 2px solid #b22222;
+    border-radius: 0.5rem;
+    transition: all 0.3s ease;
+  }
+  small {
+    display: block;
+    text-align: center;
+    margin-top: 0.5rem;
+    color: #777;
+  }
+</style>
+</head>
+<body>
+
+<h1>🎯 Clamp()-Berechner PRO+</h1>
+
+<label>⚙️ CSS-Eigenschaft:</label>
+<select id="property">
+  <option value="width">Breite (width)</option>
+  <option value="height">Höhe (height)</option>
+  <option value="font-size">Schriftgröße (font-size)</option>
+  <option value="padding">Innenabstand (padding)</option>
+  <option value="margin">Außenabstand (margin)</option>
+</select>
+
+<label>📱 Minimaler Viewport (z. B. 320):</label>
+<input type="number" id="vwMin" value="320">
+
+<label>🖥️ Maximaler Viewport (z. B. 1200):</label>
+<input type="number" id="vwMax" value="1200">
+
+<label>📏 Einheit:</label>
+<select id="unit">
+  <option value="percent">Prozent (%) vom Viewport</option>
+  <option value="px">Pixel (px)</option>
+  <option value="rem">REM (1rem = 16px)</option>
+</select>
+
+<label>🔹 Minimaler Wert:</label>
+<input type="number" id="valueMin" value="40">
+
+<label>🔹 Maximaler Wert:</label>
+<input type="number" id="valueMax" value="35">
+
+<div class="output" id="result">Gib Werte ein, um den CSS-Code zu sehen…</div>
+
+<div class="preview-box" id="previewBox">Vorschau</div>
+<small>🔍 Ändere die Fensterbreite, um die Skalierung live zu testen</small>
+
+<script>
+function updateClamp() {
+  const vwMin = parseFloat(document.getElementById('vwMin').value);
+  const vwMax = parseFloat(document.getElementById('vwMax').value);
+  const valueMin = parseFloat(document.getElementById('valueMin').value);
+  const valueMax = parseFloat(document.getElementById('valueMax').value);
+  const unit = document.getElementById('unit').value;
+  const property = document.getElementById('property').value;
+
+  if (isNaN(vwMin) || isNaN(vwMax) || isNaN(valueMin) || isNaN(valueMax)) return;
+
+  let minVal, maxVal, fluidPart;
+
+  if (unit === "percent") {
+    minVal = (valueMin / 100) * vwMin;
+    maxVal = (valueMax / 100) * vwMax;
+    fluidPart = `${valueMax.toFixed(1)}vw`;
+  } else if (unit === "px") {
+    minVal = valueMin;
+    maxVal = valueMax;
+    const vwRange = ((maxVal - minVal) / (vwMax - vwMin)) * 100;
+    fluidPart = `${vwRange.toFixed(2)}vw + ${minVal.toFixed(0)}px`;
+  } else if (unit === "rem") {
+    const minPx = valueMin * 16;
+    const maxPx = valueMax * 16;
+    const vwRange = ((maxPx - minPx) / (vwMax - vwMin)) * 100;
+    minVal = valueMin;
+    maxVal = valueMax;
+    fluidPart = `${vwRange.toFixed(2)}vw + ${minVal.toFixed(2)}rem`;
+  }
+
+  const suffix = (unit === 'rem' ? 'rem' : 'px');
+  const clampValue = `clamp(${minVal}${suffix}, ${fluidPart}, ${maxVal}${suffix})`;
+
+  document.getElementById('result').textContent =
+    `${property}: ${clampValue};`;
+
+  const preview = document.getElementById('previewBox');
+  preview.style.width = "";
+  preview.style.height = "";
+  preview.style.fontSize = "";
+  preview.style.padding = "";
+  preview.style.margin = "";
+
+  preview.style[property] = clampValue;
+  preview.textContent = `${property}: ${minVal}${suffix}–${maxVal}${suffix}`;
+}
+
+document.querySelectorAll('input, select').forEach(el =>
+  el.addEventListener('input', updateClamp)
+);
+updateClamp();
+</script>
+
+</body>
+</html>