84 lines
3.1 KiB
HTML
84 lines
3.1 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Exposure Match Calculator (ISO / Aperture / Shutter)</title>
|
||
<link rel="stylesheet" href="app.css" />
|
||
<link rel="icon" href="favicon.ico" />
|
||
</head>
|
||
|
||
<body>
|
||
<div class="wrap">
|
||
<h1>Exposure Match Calculator</h1>
|
||
<p class="subtitle">
|
||
Enter a full reference exposure (Camera A). For Camera B, fill
|
||
exactly <strong>two</strong> fields and leave
|
||
<strong>one empty</strong>. The empty field is calculated for
|
||
equal exposure.
|
||
</p>
|
||
|
||
<div class="grid">
|
||
<section class="card">
|
||
<h2>Camera A (Reference: all required)</h2>
|
||
<div class="field">
|
||
<label for="isoA">ISO</label>
|
||
<input id="isoA" type="number" min="1" step="1" value="100" />
|
||
</div>
|
||
<div class="field">
|
||
<label for="fA">F-Stop (aperture N)</label>
|
||
<input id="fA" type="number" min="0.1" step="0.1" value="2.0" />
|
||
</div>
|
||
<div class="field">
|
||
<label for="tA">Shutter Speed</label>
|
||
<input id="tA" type="text" value="1/1000" />
|
||
<div class="hint">Examples: 1/250, 0.004, 2</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="card">
|
||
<h2>Camera B (Target: leave one empty)</h2>
|
||
<div class="field">
|
||
<label for="isoB">ISO (leave empty to calculate ISO)</label>
|
||
<input id="isoB" type="text" />
|
||
</div>
|
||
<div class="field">
|
||
<label for="fB">F-Stop (leave empty to calculate aperture)</label>
|
||
<input id="fB" type="text" />
|
||
</div>
|
||
<div class="field">
|
||
<label for="tB">Shutter (leave empty to calculate shutter)</label>
|
||
<input id="tB" type="text" />
|
||
<div class="hint">Examples: 1/125, 0.008, 1.5</div>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<button id="calcBtn">Calculate Missing Value</button>
|
||
<button id="resetBtn" type="button">Reset</button>
|
||
</div>
|
||
|
||
<div class="result" id="result">
|
||
Result will appear here.
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<div class="formula">
|
||
Exposure equivalence model (same scene brightness):<br />
|
||
<code>(N² / t) × (100 / ISO)</code> is constant, or
|
||
equivalently<br />
|
||
<code>t₂ = t₁ × (N₂² / N₁²) × (ISO₁ / ISO₂)</code>
|
||
</div>
|
||
<div class="small">
|
||
Note: This is a technical equivalence calculator (ignores
|
||
artistic/real-world differences like sensor noise, transmission
|
||
losses, etc.).
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
|
||
</html>
|