Untitled

<div class="ecom-code-container">
  <h2>CannaFuse Potency Calculator</h2>

  <!-- Step 1: Calculate Infusion Potency -->
  <div id="oilCalculator">
    <h2>Step 1: Calculate Infusion Potency</h2>

    <label for="flowerWeight">Flower Weight (grams):</label>
    <input placeholder="Enter flower weight in grams" id="flowerWeight" type="number">

    <label for="thcPercentage">THC Percentage (%):</label>
    <input placeholder="Enter THC percentage" id="thcPercentage" type="number">

    <label for="cbdPercentage">CBD Percentage (%):</label>
    <input placeholder="Enter CBD percentage" id="cbdPercentage" type="number">

    <label for="medium">Select Medium:</label>
    <select id="medium">
      <option value="oil">Oil</option>
      <option value="fat">Fat</option>
      <option value="alcohol">Alcohol</option>
      <option value="vinegar">Vinegar</option>
    </select>

    <label for="mediumVolume">Medium Volume (cups):</label>
    <input placeholder="Enter medium volume in cups" id="mediumVolume" type="number">

    <button type="button" onclick="calculatePotency()">Calculate Potency</button>
  </div>

  <div id="potencyResult" class="result"></div>

  <!-- Step 2: Create Recipe Servings -->
  <div id="servingCalculator">
    <h2>Step 2: Create Recipe Servings</h2>

    <label for="totalMedium">Total Infusion Used:</label>
    <input placeholder="Enter infused medium used" id="totalMedium" type="number">

    <label for="mediumUnit">Select Unit:</label>
    <select id="mediumUnit">
      <option value="ml">Milliliters (ml)</option>
      <option value="tsp">Teaspoons (tsp)</option>
    </select>

    <label for="servings">Number of Servings:</label>
    <input placeholder="Enter number of servings" id="servings" type="number">

    <button type="button" onclick="calculateServings()">Calculate Servings</button>
  </div>

  <div id="servingResult" class="result"></div>
</div>

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #EDEEE7;
    color: #333;
  }

  .ecom-code-container {
    max-width: 600px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
  }

  label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
  }

  input, select, button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

  button {
    background-color: #909E8A;
    color: white;
    border: none;
    cursor: pointer;
  }

  button:hover {
    background-color: #6A7368;
  }

  .result {
    margin-top: 20px;
    font-size: 1.1em;
  }
</style>

<script>
  function calculatePotency() {
    const flowerWeight = parseFloat(document.getElementById("flowerWeight").value);
    const thcPercentage = parseFloat(document.getElementById("thcPercentage").value);
    const cbdPercentage = parseFloat(document.getElementById("cbdPercentage").value);
    const mediumVolumeCups = parseFloat(document.getElementById("mediumVolume").value);
    const medium = document.getElementById("medium").value;

    if (!flowerWeight || !thcPercentage || !cbdPercentage || !mediumVolumeCups) {
      alert("Please fill out all fields correctly.");
      return;
    }

    const mediumVolumeMl = mediumVolumeCups * 236.588;
    const totalTHC = (flowerWeight * (thcPercentage / 100)) * 1000;
    const totalCBD = (flowerWeight * (cbdPercentage / 100)) * 1000;
    const thcPerMl = totalTHC / mediumVolumeMl;
    const cbdPerMl = totalCBD / mediumVolumeMl;

    const resultDiv = document.getElementById("potencyResult");
    resultDiv.dataset.thcPerMl = thcPerMl;
    resultDiv.dataset.cbdPerMl = cbdPerMl;

    resultDiv.innerHTML = `
      <strong>Medium:</strong> ${medium}<br>
      <strong>Total THC:</strong> ${totalTHC.toFixed(2)} mg<br>
      <strong>Total CBD:</strong> ${totalCBD.toFixed(2)} mg<br>
      <strong>Potency per ml:</strong> THC - ${thcPerMl.toFixed(2)} mg/ml, CBD - ${cbdPerMl.toFixed(2)} mg/ml
    `;
  }

  function calculateServings() {
    const totalMedium = parseFloat(document.getElementById("totalMedium").value);
    const mediumUnit = document.getElementById("mediumUnit").value;
    const servings = parseInt(document.getElementById("servings").value);

    if (!totalMedium || !servings || servings <= 0) {
      alert("Please fill out all fields correctly.");
      return;
    }

    const mediumVolumeMl = mediumUnit === "ml" ? totalMedium : totalMedium * 4.92892;
    const thcPerMl = parseFloat(document.getElementById("potencyResult").dataset.thcPerMl) || 0;
    const cbdPerMl = parseFloat(document.getElementById("potencyResult").dataset.cbdPerMl) || 0;
    const totalTHC = thcPerMl * mediumVolumeMl;
    const totalCBD = cbdPerMl * mediumVolumeMl;
    const thcPerServing = totalTHC / servings;
    const cbdPerServing = totalCBD / servings;

    document.getElementById("servingResult").innerHTML = `
      <strong>Total THC in Recipe:</strong> ${totalTHC.toFixed(2)} mg<br>
      <strong>Total CBD in Recipe:</strong> ${totalCBD.toFixed(2)} mg<br>
      <strong>Per Serving:</strong> THC - ${thcPerServing.toFixed(2)} mg, CBD - ${cbdPerServing.toFixed(2)} mg
    `;
  }
</script>