158 lines
4.4 KiB
PHP
158 lines
4.4 KiB
PHP
<!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> |