|
@@ -0,0 +1,117 @@
|
|
|
|
|
+<?php
|
|
|
|
|
+/* screen-calculator.php – korrigierte ASCII‑Art */
|
|
|
|
|
+?>
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="de">
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <title>Bildschirm‑Rechner</title>
|
|
|
|
|
+ <style>
|
|
|
|
|
+ body {font-family:Arial, sans-serif; margin:24px; color:#111; background:#fafafa;}
|
|
|
|
|
+ .card {max-width:760px; margin:auto; padding:18px; border:1px solid #ddd;
|
|
|
|
|
+ border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.03); background:#fff;}
|
|
|
|
|
+ h1 {font-size:20px; margin-bottom:8px;}
|
|
|
|
|
+ .control {margin:14px 0;}
|
|
|
|
|
+ label {display:block; font-size:13px; margin-bottom:6px; color:#333;}
|
|
|
|
|
+ select, input[type="range"] {width:100%;}
|
|
|
|
|
+ .muted {color:#666; font-size:13px;}
|
|
|
|
|
+ .value {font-weight:700; margin-left:6px;}
|
|
|
|
|
+ .results {margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
|
|
|
|
|
+ .result {padding:12px; border-radius:6px; background:#f9f9f9; border:1px solid #eee;}
|
|
|
|
|
+ .footer {margin-top:14px; font-size:13px; color:#444;}
|
|
|
|
|
+ @media (max-width:600px){ .results{grid-template-columns:1fr;} }
|
|
|
|
|
+ #ascii {font-family:"Courier New",Courier,monospace; white-space:pre; line-height:1;}
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+
|
|
|
|
|
+<div class="card">
|
|
|
|
|
+ <h1>Bildschirm‑Rechner</h1>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="control">
|
|
|
|
|
+ <label for="ratio">Seitenverhältnis</label>
|
|
|
|
|
+ <select id="ratio">
|
|
|
|
|
+ <option value="1/1">1:1</option>
|
|
|
|
|
+ <option value="3/2">3:2</option>
|
|
|
|
|
+ <option value="3/4">3:4</option>
|
|
|
|
|
+ <option value="4/3">4:3</option>
|
|
|
|
|
+ <option value="5/4">5:4</option>
|
|
|
|
|
+ <option value="15/9">15:9</option>
|
|
|
|
|
+ <option value="16/10">16:10</option>
|
|
|
|
|
+ <option value="16/9" selected>16:9</option>
|
|
|
|
|
+ <option value="17/9">17:9</option>
|
|
|
|
|
+ <option value="21/9">21:9</option>
|
|
|
|
|
+ <option value="24/10">24:10</option>
|
|
|
|
|
+ <option value="32/9">32:9</option>
|
|
|
|
|
+ </select>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="control">
|
|
|
|
|
+ <label for="diag">Diagonale (Zoll)</label>
|
|
|
|
|
+ <input type="range" id="diag" min="4" max="100" step="1" value="16">
|
|
|
|
|
+ <div class="muted">Auswahl: <span id="diagVal" class="value">16 ″ / 40.64 cm</span></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="results">
|
|
|
|
|
+ <div class="result"><pre id="ascii"></pre></div>
|
|
|
|
|
+ <div class="result">
|
|
|
|
|
+ <div>Höhe: <span id="height" class="value"></span> cm / <span id="heightIn" class="value"></span> ″</div>
|
|
|
|
|
+ <div>Breite: <span id="width" class="value"></span> cm / <span id="widthIn" class="value"></span> ″</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="footer">
|
|
|
|
|
+ Hinweis: Die Werte basieren ausschließlich auf den eingegebenen Parametern.
|
|
|
|
|
+ Tatsächliche Bildschirme können abweichen.
|
|
|
|
|
+ </div>
|
|
|
|
|
+</div>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+const ratioSelect = document.getElementById('ratio');
|
|
|
|
|
+const diagSlider = document.getElementById('diag');
|
|
|
|
|
+const diagValSpan = document.getElementById('diagVal');
|
|
|
|
|
+const asciiBox = document.getElementById('ascii');
|
|
|
|
|
+const heightSpan = document.getElementById('height');
|
|
|
|
|
+const heightInSpan = document.getElementById('heightIn');
|
|
|
|
|
+const widthSpan = document.getElementById('width');
|
|
|
|
|
+const widthInSpan = document.getElementById('widthIn');
|
|
|
|
|
+
|
|
|
|
|
+function calc() {
|
|
|
|
|
+ const [a, b] = ratioSelect.value.split('/').map(Number);
|
|
|
|
|
+ const ratioText = `${a}:${b}`;
|
|
|
|
|
+ const dIn = parseInt(diagSlider.value, 10); // ganzzahliges Zoll
|
|
|
|
|
+ const dCm = dIn * 2.54;
|
|
|
|
|
+
|
|
|
|
|
+ const factor = Math.sqrt(a*a + b*b);
|
|
|
|
|
+ const widthCm = dCm * a / factor;
|
|
|
|
|
+ const heightCm = dCm * b / factor;
|
|
|
|
|
+ const widthIn = widthCm / 2.54;
|
|
|
|
|
+ const heightIn = heightCm / 2.54;
|
|
|
|
|
+
|
|
|
|
|
+ diagValSpan.textContent = `${dIn} ″ / ${dCm.toFixed(2)} cm`;
|
|
|
|
|
+ heightSpan.textContent = heightCm.toFixed(2);
|
|
|
|
|
+ heightInSpan.textContent = heightIn.toFixed(2);
|
|
|
|
|
+ widthSpan.textContent = widthCm.toFixed(2);
|
|
|
|
|
+ widthInSpan.textContent = widthIn.toFixed(2);
|
|
|
|
|
+
|
|
|
|
|
+// ASCII‑Art (10 Zeilen, Breite proportional)
|
|
|
|
|
+ const rows = 10;
|
|
|
|
|
+ const cols = Math.max(4, Math.round((widthCm/heightCm) * rows));
|
|
|
|
|
+ let art = '';
|
|
|
|
|
+ for (let r = 0; r < rows; r++) {
|
|
|
|
|
+ for (let c = 0; c < cols; c++) {
|
|
|
|
|
+ art += (r===0 || r===rows-1 || c===0 || c===cols-1) ? '#' : ' ';
|
|
|
|
|
+ }
|
|
|
|
|
+ art += '\n';
|
|
|
|
|
+ }
|
|
|
|
|
+ asciiBox.textContent = art;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// initial
|
|
|
|
|
+calc();
|
|
|
|
|
+ratioSelect.addEventListener('change', calc);
|
|
|
|
|
+diagSlider.addEventListener('input', calc);
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|
