es
/
aspectratio


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<?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>