Calculadora de Diluição de Cannabis Medicinal

HTML

<div class="container">
        <h1>Calculadora de Diluição de Cannabis Medicinal</h1>
        <p>Bem-vindo à calculadora de diluição de óleo de cannabis medicinal! Escolha o modo de cálculo que você deseja realizar:</p>

        <div class="mode-selector">
            <button class="mode-btn" onclick="showCalculatorMode('diluir')">Quantidade de Extrato</button>
            <button class="mode-btn" onclick="showCalculatorMode('preparar')">Volume Determinado</button>
        </div>

        <hr>

        <div id="situacao1" class="section">
            <h3>Diluir Extrato Existente para uma Concentração Desejada</h3>
            <p>Nesta seção, você calculará a quantidade de **óleo transportador** que precisa adicionar ao seu extrato existente.</p>

            <div class="form-group">
                <label for="extratoVolume">Quantidade de Extrato Concentrado (g):</label>
                <input type="number" id="extratoVolume" placeholder="Ex: 10" min="0" step="0.1">
            </div>
            <div class="form-group">
                <label for="extratoConcentracaoEst">Concentração Estimada do Extrato (% de canabinoides):</label>
                <input type="number" id="extratoConcentracaoEst" value="60" placeholder="Padrão: 60%" min="0" max="100" step="0.1">
                <small><em>Dica: Se você não tem certeza, 60% é uma estimativa comum.</em></small>
            </div>
            <div class="form-group">
                <label for="concentracaoDesejada1">Concentração Desejada do Óleo Final (% de canabinoides):</label>
                <input type="number" id="concentracaoDesejada1" placeholder="Ex: 5" min="0" max="100" step="0.1">
            </div>
            <button class="btn" onclick="calcularDiluicaoExistente()">Calcular Diluição</button>
            <div id="resultadoDiluicaoExistente" class="result" style="display:none;"></div>
        </div>

        <div id="situacao2" class="section">
            <h3>Preparar...

CSS

body {
  font-family: Arial, sans-serif;
  margin: 20px;
  background-color: #f4f4f4;
  color: #333;
}
.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1,
h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 20px;
}
.section {
  margin-bottom: 40px;
  padding: 20px;
  background-color: #e8f5e9;
  border-radius: 5px;
  border-left: 5px solid #4caf50;
}
.section h3 {
  color: #388e3c;
  margin-top: 0;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
.form-group input[type="number"] {
  width: calc(100% - 22px);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
.form-group input[type="number"]:focus {
  border-color: #4caf50;
  outline: none;
}
.btn {
  background-color: #4caf50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  width: 100%;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #45a049;
}
.result {
  margin-top: 25px;
  padding: 15px;
  background-color: #dcedc8;
  border: 1px solid #aed581;
  border-radius: 5px;
  font-size: 1.1em;
  color: #33691e;
  text-align: center;
  font-weight: bold;
}
.disclaimer {
  margin-top: 30px;
  padding: 15px;
  background-color: #ffe0b2;
  border-left: 5px solid #fb8c00;
  border-radius: 5px;
  font-size: 0.9em;
  color: #e65100;
}
body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px...

JavaScript

function calcularDiluicaoExistente() {
    const extratoVolume = parseFloat(document.getElementById('extratoVolume').value);
    const extratoConcentracaoEst = parseFloat(document.getElementById('extratoConcentracaoEst').value);
    const concentracaoDesejada1 = parseFloat(document.getElementById('concentracaoDesejada1').value);
    const resultadoDiv = document.getElementById('resultadoDiluicaoExistente');

    if (isNaN(extratoVolume) || isNaN(extratoConcentracaoEst) || isNaN(concentracaoDesejada1) || extratoVolume <= 0 || extratoConcentracaoEst <= 0 || concentracaoDesejada1 <= 0) {
        resultadoDiv.style.display = 'block';
        resultadoDiv.textContent = 'Por favor, preencha todos os campos com valores válidos e positivos.';
        resultadoDiv.style.backgroundColor = '#ffcdd2';
        resultadoDiv.style.borderColor = '#ef9a9a';
        resultadoDiv.style.color = '#c62828';
        return;
    }

    if (concentracaoDesejada1 > extratoConcentracaoEst) {
        resultadoDiv.style.display = 'block';
        resultadoDiv.textContent = 'A concentração desejada não pode ser maior que a concentração estimada do extrato.';
        resultadoDiv.style.backgroundColor = '#ffcdd2';
        resultadoDiv.style.borderColor = '#ef9a9a';
        resultadoDiv.style.color = '#c62828';
        return;
    }

    // Quantidade total de canabinoides no extrato (mg)
    const canabinoidesMg = (extratoVolume * extratoConcentracaoEst * 1000) / 100;

    // Volume final de óleo (mL) para atingir a concentração desejada
    const volumeFinalMl = (canabinoidesMg / concentracaoDesejada1) * 100 / 1000;

    // Quantidade de Óleo Transportador a Adicionar (mL)
    const oleoTransportadorMl = volumeFinalMl - extratoVolume;

    resultadoDiv.style.display = 'block';
    resultadoDiv.style.backgroundColor = '#dcedc8';
    resultadoDiv.style.borderColor = '#aed581';
    resultadoDiv.style.color = '#33691e';
    resultadoDiv.innerHTML = `Para...