<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>과산화초산 희석 계산기 (비중 적용)</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f7f6;
color: #333;
padding: 20px;
}
.calculator {
background-color: #ffffff;
padding: 30px 40px;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 500px;
box-sizing: border-box;
}
h1 {
text-align: center;
color: #0056b3;
margin-bottom: 25px;
font-size: 1.6rem;
}
.input-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
label {
margin-bottom: 8px;
font-weight: bold;
color: #555;
}
.input-wrapper {
display: flex;
align-items: center;
}
input[type="number"] {
flex: 1;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 16px;
}
input[type="number"]:focus {
border-color: #0056b3;
outline: none;
box-shadow: 0 0 5px rgba(0, 86, 179, 0.2);
}
input[type="number"]::placeholder {
color: #ccc;
opacity: 0.6;
}
.unit {
margin-left: 8px;
font-weight: bold;
color: #777;
width: 50px;
text-align: center;
}
.reset-button {
width: 100%;
padding: 12px;
background-color: #6c757d;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s;
}
.reset-button:hover {
background-color: #5a6268;
}
.reset-button:active {
background-color: #545b62;
}
.result {
margin-top: 25px;
padding: 20px;
background-color: #e9f5ff;
border-left: 5px solid #007bff;
border-radius: 8px;
font-size: 18px;
line-height: 1.6;
display: none;
}
.result strong {
color: #d9534f;
}
@media (max-width: 600px) {
body {
height: auto;
}
.calculator {
padding: 20px;
border-radius: 10px;
}
h1 {
font-size: 1.4rem;
}
input[type="number"] {
padding: 10px;
font-size: 16px;
}
.result {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="calculator">
<h1>🧪 과산화초산 희석 계산기</h1>
<div class="input-group">
<label for="stock-concentration">1. 원액 농도</label>
<div class="input-wrapper">
<input type="number" id="stock-concentration" placeholder="예: 15" inputmode="decimal">
<span class="unit">%</span>
</div>
</div>
<div class="input-group">
<label for="target-ppm">2. 목표 농도</label>
<div class="input-wrapper">
<input type="number" id="target-ppm" placeholder="예: 200" inputmode="decimal">
<span class="unit">ppm</span>
</div>
</div>
<div class="input-group">
<label for="water-volume">3. 물 양</label>
<div class="input-wrapper">
<input type="number" id="water-volume" placeholder="예: 10" inputmode="decimal">
<span class="unit">L</span>
</div>
</div>
<div class="input-group">
<label for="density">4. 원액 비중 (선택, 미입력시 1)</label>
<div class="input-wrapper">
<input type="number" step="0.01" id="density" placeholder="예: 1.05" inputmode="decimal">
<span class="unit">g/mL</span>
</div>
</div>
<button class="reset-button" onclick="resetCalculator()">🔄 초기화</button>
<div id="result" class="result"></div>
</div>
<script>
const inputs = document.querySelectorAll('input');
const resultDiv = document.getElementById('result');
function calculate() {
const stockConcentration = parseFloat(document.getElementById('stock-concentration').value);
const targetPpm = parseFloat(document.getElementById('target-ppm').value);
const waterVolumeL = parseFloat(document.getElementById('water-volume').value);
let density = parseFloat(document.getElementById('density').value);
if (isNaN(density) || density <= 0) density = 1.0; // 기본값 1
if (isNaN(stockConcentration) || isNaN(targetPpm) || isNaN(waterVolumeL) ||
stockConcentration <= 0 || targetPpm <= 0 || waterVolumeL <= 0) {
resultDiv.style.display = 'block';
resultDiv.innerHTML = "⚠️ 원액 농도, 목표 농도, 물 양을 모두 입력하세요.";
return;
}
const stockPpm = stockConcentration * 10000 * density; // 비중 적용
const requiredStockL = (targetPpm * waterVolumeL) / (stockPpm - targetPpm);
const requiredStockMl = requiredStockL * 1000;
const finalVolumeL = waterVolumeL + requiredStockL;
if (requiredStockL > finalVolumeL) {
resultDiv.style.display = 'block';
resultDiv.innerHTML = "⚠️ 목표 농도가 원액보다 높습니다. 계산 불가!";
return;
}
resultDiv.style.display = 'block';
resultDiv.innerHTML = `
<b>결과:</b><br>
필요한 <strong>원액</strong>의 양: <strong>${requiredStockMl.toFixed(2)} mL (${requiredStockL.toFixed(3)} L)</strong><br>
최종 희석액 부피: <strong>${finalVolumeL.toFixed(3)} L</strong><br><br>
<small>물 ${waterVolumeL.toFixed(3)}L에 원액 ${requiredStockMl.toFixed(2)}mL (${requiredStockL.toFixed(3)}L)를 넣으면<br>
총 ${finalVolumeL.toFixed(3)}L의 ${targetPpm} ppm 희석액이 됩니다.<br>
(비중 ${density.toFixed(2)} 적용)</small>
`;
}
inputs.forEach(input => input.addEventListener('input', calculate));
function resetCalculator() {
document.getElementById('stock-concentration').value = '';
document.getElementById('target-ppm').value = '';
document.getElementById('water-volume').value = '';
document.getElementById('density').value = '';
resultDiv.style.display = 'none';
resultDiv.innerHTML = '';
}
</script>
</body>
</html>