flask_inference_api_g

Sleeping

App Files Files Community

DmitrMakeev commited on Mar 14

Commit

cfca93e

verified ·

1 Parent(s): fb7a8dd

Update calculate.html

Browse files

Files changed (1) hide show

calculate.html +839 -605

calculate.html CHANGED Viewed

@@ -1,628 +1,862 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <title>Fertilizer Calculator</title>
-  <!-- Example using Google Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap"
-    rel="stylesheet"
-  />
-  <style>
-    /* Base styling */
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-      font-family: 'Open Sans', sans-serif;
-    }
-    body {
-      background: linear-gradient(to top right, #e0f7fa 0%, #e1f5fe 100%);
-      color: #333;
-      padding: 2rem;
-    }
-    h1, h2, h3 {
-      margin-bottom: 0.5rem;
-    }
-    h1 {
-      font-weight: 600;
-      text-align: center;
-      margin-bottom: 1.5rem;
-    }
-    /* Container */
-    .container {
-      max-width: 900px;
-      margin: 0 auto;
-      background: #fff;
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-      padding: 2rem;
-    }
-    /* Section title */
-    .section-title {
-      margin-top: 2rem;
-      margin-bottom: 1rem;
-      font-size: 1.1rem;
-      font-weight: 600;
-      color: #444;
-      border-bottom: 2px solid #ddd;
-      padding-bottom: 0.5rem;
-    }
-    /* Form styling */
-    form {
-      display: flex;
-      flex-direction: column;
-    }
-    .form-group {
-      margin-bottom: 1rem;
-    }
-    .label-row {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-items: baseline;
-      margin-bottom: 0.3rem;
-    }
-    .label-row label {
-      font-weight: 600;
-      margin-right: 0.5rem;
-    }
-    .label-row .param-note {
-      font-size: 0.85rem;
-      color: #777;
-      flex: 1 0 auto;
-      margin-left: 0.5rem;
-    }
-    input[type="number"] {
-      width: 100%;
-      max-width: 300px;
-      padding: 0.5rem;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      font-size: 1rem;
-    }
-    input[type="number"]:focus {
-      outline: none;
-      border-color: #007BFF;
-    }
-    .description {
-      font-size: 0.85rem;
-      color: #555;
-      margin-top: 0.3rem;
-      line-height: 1.4;
-    }
-    /* Buttons */
-    .btn-container {
-      margin-top: 1.5rem;
-    }
-    .btn {
-      display: inline-block;
-      background: #007BFF;
-      color: #fff;
-      text-decoration: none;
-      padding: 0.6rem 1rem;
-      border-radius: 4px;
-      font-size: 1rem;
-      border: none;
-      cursor: pointer;
-      margin-right: 1rem;
-      transition: background 0.2s ease-in-out;
-    }
-    .btn:hover {
-      background: #0056b3;
-    }
-    .btn.reset {
-      background: #6c757d;
-    }
-    .btn.reset:hover {
-      background: #565e64;
-    }
-    /* Error messages */
-    .error {
-      color: #dc3545;
-      font-size: 0.85rem;
-      margin-top: 0.25rem;
-      display: none;
-    }
-    .error.show {
-      display: block;
-    }
-    /* Results area */
-    .results {
-      margin-top: 2rem;
-      padding: 1.5rem;
-      background: #fafafa;
-      border-left: 4px solid #007BFF;
-      display: none;
-      border-radius: 4px;
-    }
-    .results p {
-      margin: 0.5rem 0;
-      font-size: 1rem;
-    }
-    .results strong {
-      color: #007BFF;
-    }
-  </style>
-</head>
-<body>
-  <h1>Fertilizer Calculator</h1>
-  <div class="container">
-    <form id="fertilizerForm">
-      <!-- General Inputs -->
-      <div class="section-title">General Inputs</div>
-      <!-- Target Yield (Y) -->
-      <div class="form-group">
-        <div class="label-row">
-          <label for="yield">Target Yield (Y):</label>
-          <span class="param-note">(e.g., 50)</span>
-        </div>
-        <input
-          type="number"
-          id="yield"
-          name="yield"
-          step="0.01"
-          min="0"
-          placeholder="Enter target yield in kg/ha"
-          required
-        />
-        <div class="description">
-          The target yield (Y) is your desired crop yield in kg/ha (or another standard unit).
-        </div>
-        <div class="error" id="yieldError">
-          Please enter a realistic yield &gt; 0 (e.g., 10 to 200).
-        </div>
-      </div>
-      <!-- Nitrogen (N) Inputs -->
-      <div class="section-title">Nitrogen (N) Parameters</div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="nrN">N Required Ratio (NR<sub>N</sub>):</label>
-          <span class="param-note">(e.g., 2)</span>
-        </div>
-        <input
-          type="number"
-          id="nrN"
-          name="nrN"
-          step="0.01"
-          min="0"
-          placeholder="N ratio for target yield"
-          required
-        />
-        <div class="description">
-          NR<sub>N</sub> represents how much nitrogen is typically required per unit of yield. Ranges often fall between 0.5 – 3.0 depending on the crop.
-        </div>
-        <div class="error" id="nrNError">
-          Please enter a realistic value &gt; 0 (e.g., between 0.1 and 5).
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="efN">N Efficiency Factor (E<sub>fN</sub>):</label>
-          <span class="param-note">(0 &lt;= E<sub>fN</sub> &lt;= 1)</span>
-        </div>
-        <input
-          type="number"
-          id="efN"
-          name="efN"
-          step="0.01"
-          min="0"
-          max="1"
-          placeholder="Between 0 and 1"
-          required
-        />
-        <div class="description">
-          E<sub>fN</sub> indicates the efficiency of nitrogen uptake, influenced by soil conditions, climate, etc.
-        </div>
-        <div class="error" id="efNError">
-          N Efficiency Factor must be between 0 and 1 (e.g., 0.3, 0.45, 0.8).
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="esN">Soil Contribution Factor (E<sub>sN</sub>):</label>
-          <span class="param-note">(0 &lt;= E<sub>sN</sub> &lt;= 1)</span>
-        </div>
-        <input
-          type="number"
-          id="esN"
-          name="esN"
-          step="0.01"
-          min="0"
-          max="1"
-          placeholder="Between 0 and 1"
-          required
-        />
-        <div class="description">
-          E<sub>sN</sub> is how much your soil naturally contributes to nitrogen availability (e.g., 0.2).
-        </div>
-        <div class="error" id="esNError">
-          Soil Contribution Factor must be between 0 and 1.
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="snN">N Soil Test Value (SN<sub>N</sub>):</label>
-          <span class="param-note">(e.g., 20)</span>
-        </div>
-        <input
-          type="number"
-          id="snN"
-          name="snN"
-          step="0.01"
-          min="0"
-          placeholder="N soil test value"
-          required
-        />
-        <div class="description">
-          SN<sub>N</sub> is your nitrogen soil test result (e.g., 15 – 40). It helps determine how much N is already available.
-        </div>
-        <div class="error" id="snNError">
-          Please enter a realistic soil test value &ge; 0.
         </div>
-      </div>
-      <!-- Phosphorus (P) Inputs -->
-      <div class="section-title">Phosphorus (P) Parameters</div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="nrP">P Required Ratio (NR<sub>P</sub>):</label>
-          <span class="param-note">(e.g., 0.6)</span>
-        </div>
-        <input
-          type="number"
-          id="nrP"
-          name="nrP"
-          step="0.01"
-          min="0"
-          placeholder="P ratio for target yield"
-          required
-        />
-        <div class="description">
-          NR<sub>P</sub> is the phosphorus ratio per yield unit, typically ranges from 0.1 – 1.0 depending on crop demands.
-        </div>
-        <div class="error" id="nrPError">
-          Please enter a realistic value &gt; 0 (e.g., 0.1 to 2).
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="efP">P Efficiency Factor (E<sub>fP</sub>):</label>
-          <span class="param-note">(0 &lt;= E<sub>fP</sub> &lt;= 1)</span>
-        </div>
-        <input
-          type="number"
-          id="efP"
-          name="efP"
-          step="0.01"
-          min="0"
-          max="1"
-          placeholder="Between 0 and 1"
-          required
-        />
-        <div class="description">
-          E<sub>fP</sub> indicates how effectively phosphorus is taken up by crops under your conditions.
-        </div>
-        <div class="error" id="efPError">
-          P Efficiency Factor must be between 0 and 1.
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="esP">Soil Contribution Factor (E<sub>sP</sub>):</label>
-          <span class="param-note">(0 &lt;= E<sub>sP</sub> &lt;= 1)</span>
-        </div>
-        <input
-          type="number"
-          id="esP"
-          name="esP"
-          step="0.01"
-          min="0"
-          max="1"
-          placeholder="Between 0 and 1"
-          required
-        />
-        <div class="description">
-          E<sub>sP</sub> is how much phosphorus your soil can naturally supply.
-        </div>
-        <div class="error" id="esPError">
-          Soil Contribution Factor must be between 0 and 1.
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="snP">P Soil Test Value (SN<sub>P</sub>):</label>
-          <span class="param-note">(e.g., 15)</span>
-        </div>
-        <input
-          type="number"
-          id="snP"
-          name="snP"
-          step="0.01"
-          min="0"
-          placeholder="P soil test value"
-          required
-        />
-        <div class="description">
-          SN<sub>P</sub> is your soil test reading for phosphorus (e.g., 5 – 30), guiding how much P is already present.
-        </div>
-        <div class="error" id="snPError">
-          Please enter a realistic soil test value &ge; 0.
-        </div>
-      </div>
-      <!-- Potassium (K) Inputs -->
-      <div class="section-title">Potassium (K) Parameters</div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="nrK">K Required Ratio (NR<sub>K</sub>):</label>
-          <span class="param-note">(e.g., 1)</span>
-        </div>
-        <input
-          type="number"
-          id="nrK"
-          name="nrK"
-          step="0.01"
-          min="0"
-          placeholder="K ratio for target yield"
-          required
-        />
-        <div class="description">
-          NR<sub>K</sub> is the potassium ratio per yield unit, which could be from 0.3 – 2.0 for many crops.
-        </div>
-        <div class="error" id="nrKError">
-          Please enter a realistic value &gt; 0 (e.g., 0.3 to 5).
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="efK">K Efficiency Factor (E<sub>fK</sub>):</label>
-          <span class="param-note">(0 &lt;= E<sub>fK</sub> &lt;= 1)</span>
-        </div>
-        <input
-          type="number"
-          id="efK"
-          name="efK"
-          step="0.01"
-          min="0"
-          max="1"
-          placeholder="Between 0 and 1"
-          required
-        />
-        <div class="description">
-          E<sub>fK</sub> indicates how efficiently potassium is used by your crops under local conditions.
-        </div>
-        <div class="error" id="efKError">
-          K Efficiency Factor must be between 0 and 1.
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="esK">Soil Contribution Factor (E<sub>sK</sub>):</label>
-          <span class="param-note">(0 &lt;= E<sub>sK</sub> &lt;= 1)</span>
-        </div>
-        <input
-          type="number"
-          id="esK"
-          name="esK"
-          step="0.01"
-          min="0"
-          max="1"
-          placeholder="Between 0 and 1"
-          required
-        />
-        <div class="description">
-          E<sub>sK</sub> is the natural potassium supply capacity of your soil.
-        </div>
-        <div class="error" id="esKError">
-          Soil Contribution Factor must be between 0 and 1.
-        </div>
-      </div>
-      <div class="form-group">
-        <div class="label-row">
-          <label for="snK">K Soil Test Value (SN<sub>K</sub>):</label>
-          <span class="param-note">(e.g., 40)</span>
-        </div>
-        <input
-          type="number"
-          id="snK"
-          name="snK"
-          step="0.01"
-          min="0"
-          placeholder="K soil test value"
-          required
-        />
-        <div class="description">
-          SN<sub>K</sub> is your soil test reading for potassium (e.g., 30 – 100).
-        </div>
-        <div class="error" id="snKError">
-          Please enter a realistic soil test value &ge; 0.
-        </div>
-      </div>
-      <div class="btn-container">
-        <button type="button" class="btn" id="calculateBtn">Calculate</button>
-        <button type="reset" class="btn reset" id="resetBtn">Reset</button>
-      </div>
-    </form>
-    <div class="results" id="resultsBox">
-      <h2>Calculation Results</h2>
-      <p><strong>Nitrogen (N) Fertilizer Needed:</strong> <span id="nResult"></span> kg/ha</p>
-      <p><strong>Phosphorus (P) Fertilizer Needed:</strong> <span id="pResult"></span> kg/ha</p>
-      <p><strong>Potassium (K) Fertilizer Needed:</strong> <span id="kResult"></span> kg/ha</p>
-    </div>
-  </div>
-  <script>
-    // Grab elements
-    const form = document.getElementById('fertilizerForm');
-    const calculateBtn = document.getElementById('calculateBtn');
-    const resultsBox = document.getElementById('resultsBox');
-    // General
-    const yieldInput = document.getElementById('yield');
-    const yieldError = document.getElementById('yieldError');
-    // Nitrogen
-    const nrN = document.getElementById('nrN');
-    const nrNError = document.getElementById('nrNError');
-    const efN = document.getElementById('efN');
-    const efNError = document.getElementById('efNError');
-    const esN = document.getElementById('esN');
-    const esNError = document.getElementById('esNError');
-    const snN = document.getElementById('snN');
-    const snNError = document.getElementById('snNError');
-    // Phosphorus
-    const nrP = document.getElementById('nrP');
-    const nrPError = document.getElementById('nrPError');
-    const efP = document.getElementById('efP');
-    const efPError = document.getElementById('efPError');
-    const esP = document.getElementById('esP');
-    const esPError = document.getElementById('esPError');
-    const snP = document.getElementById('snP');
-    const snPError = document.getElementById('snPError');
-    // Potassium
-    const nrK = document.getElementById('nrK');
-    const nrKError = document.getElementById('nrKError');
-    const efK = document.getElementById('efK');
-    const efKError = document.getElementById('efKError');
-    const esK = document.getElementById('esK');
-    const esKError = document.getElementById('esKError');
-    const snK = document.getElementById('snK');
-    const snKError = document.getElementById('snKError');
-    // Results
-    const nResult = document.getElementById('nResult');
-    const pResult = document.getElementById('pResult');
-    const kResult = document.getElementById('kResult');
-    // Basic front-end validations
-    function validateInputs() {
-      let valid = true;
-      // A function to show/hide error
-      const showError = (input, errorEl, condition) => {
-        if (condition) {
-          errorEl.classList.add('show');
-          valid = false;
-        } else {
-          errorEl.classList.remove('show');
-        }
-      };
-      // Typical yield range check (example: 1–300)
-      const yVal = Number(yieldInput.value);
-      showError(yieldInput, yieldError, (yVal <= 0 || yVal > 300));
-      // N checks
-      const nrNVal = Number(nrN.value);
-      showError(nrN, nrNError, (nrNVal <= 0 || nrNVal > 5));
-      const efNVal = Number(efN.value);
-      showError(efN, efNError, (efNVal < 0 || efNVal > 1));
-      const esNVal = Number(esN.value);
-      showError(esN, esNError, (esNVal < 0 || esNVal > 1));
-      const snNVal = Number(snN.value);
-      showError(snN, snNError, (snNVal < 0 || snNVal > 500)); // example soil test upper limit
-      // P checks
-      const nrPVal = Number(nrP.value);
-      showError(nrP, nrPError, (nrPVal <= 0 || nrPVal > 2));
-      const efPVal = Number(efP.value);
-      showError(efP, efPError, (efPVal < 0 || efPVal > 1));
-      const esPVal = Number(esP.value);
-      showError(esP, esPError, (esPVal < 0 || esPVal > 1));
-      const snPVal = Number(snP.value);
-      showError(snP, snPError, (snPVal < 0 || snPVal > 500));
-      // K checks
-      const nrKVal = Number(nrK.value);
-      showError(nrK, nrKError, (nrKVal <= 0 || nrKVal > 5));
-      const efKVal = Number(efK.value);
-      showError(efK, efKError, (efKVal < 0 || efKVal > 1));
-      const esKVal = Number(esK.value);
-      showError(esK, esKError, (esKVal < 0 || esKVal > 1));
-      const snKVal = Number(snK.value);
-      showError(snK, snKError, (snKVal < 0 || snKVal > 1000)); // example upper limit
-      return valid;
-    }
-    // Example formula usage (client-side for demo):
-    // F_N = (NR_N / E_fN) * Y - (E_sN / E_fN) * SN_N
-    // Similarly for P, K with their respective parameters.
-    function calculateFertilizer() {
-      // Convert to numeric
-      const Y = Number(yieldInput.value);
-      // N
-      const NR_N = Number(nrN.value);
-      const EfN = Number(efN.value);
-      const EsN = Number(esN.value);
-      const SN_N = Number(snN.value);
-      const F_N = (NR_N / EfN) * Y - (EsN / EfN) * SN_N;
-      // P
-      const NR_P = Number(nrP.value);
-      const EfP = Number(efP.value);
-      const EsP = Number(esP.value);
-      const SN_P = Number(snP.value);
-      const F_P = (NR_P / EfP) * Y - (EsP / EfP) * SN_P;
-      // K
-      const NR_K = Number(nrK.value);
-      const EfK = Number(efK.value);
-      const EsK = Number(esK.value);
-      const SN_K = Number(snK.value);
-      const F_K = (NR_K / EfK) * Y - (EsK / EfK) * SN_K;
-      // Display results
-      nResult.textContent = F_N.toFixed(2);
-      pResult.textContent = F_P.toFixed(2);
-      kResult.textContent = F_K.toFixed(2);
-      resultsBox.style.display = 'block';
-    }
-    calculateBtn.addEventListener('click', () => {
-      // Validate inputs before calculation
-      if (!validateInputs()) {
-        return;
-      }
-      // In production, you'd do a backend call here. We'll do client-side for demonstration.
-      calculateFertilizer();
-    });
-    // Optionally hide results on reset
-    document.getElementById('resetBtn').addEventListener('click', () => {
-      resultsBox.style.display = 'none';
-    });
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="zh-TW">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>營養液成分計算機</title>
+    <style>
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .fertilizer-list {
+            margin-top: 20px;
+            border: 1px solid #e0e0e0;
+            padding: 20px;
+            border-radius: 12px;
+            background-color: #ffffff;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+        }
+        .fertilizer-list h2 {
+            margin-top: 0;
+            color: #2c3e50;
+            border-bottom: 2px solid #eef2f7;
+            padding-bottom: 12px;
+            margin-bottom: 20px;
+            font-size: 1.4em;
+        }
+        .fertilizer-list ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+        }
+        .fertilizer-list li {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 16px;
+            margin-bottom: 10px;
+            background-color: #f8fafc;
+            border: 1px solid #edf2f7;
+            border-radius: 8px;
+            transition: all 0.2s ease;
+        }
+        .fertilizer-list li:hover {
+            background-color: #edf2f7;
+            transform: translateX(2px);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+        }
+        .fertilizer-list .fertilizer-info {
+            flex-grow: 1;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding-right: 24px;
+            min-width: 0;
+            gap: 16px;
+        }
+        .fertilizer-list .formula {
+            font-weight: 500;
+            color: #2d3748;
+            flex: 1;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            font-size: 0.95em;
+        }
+        .fertilizer-list .amount {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            min-width: 120px;
+            justify-content: flex-end;
+        }
+        .fertilizer-list .amount-display {
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            background-color: #edf2f7;
+            color: #4a5568;
+            font-family: monospace;
+            transition: all 0.2s ease;
+        }
+        .fertilizer-list .amount-display:hover {
+            background-color: #e2e8f0;
+        }
+        .fertilizer-list .amount-input {
+            width: 100px;
+            padding: 4px 8px;
+            border: 1px solid #cbd5e0;
+            border-radius: 4px;
+            text-align: right;
+            font-family: monospace;
+        }
+        .fertilizer-list .edit-controls {
+            display: flex;
+            gap: 4px;
+        }
+        .fertilizer-list .edit-btn {
+            padding: 4px 8px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: all 0.2s ease;
+        }
+        .fertilizer-list .save-btn {
+            background-color: #48bb78;
+            color: white;
+        }
+        .fertilizer-list .save-btn:hover {
+            background-color: #38a169;
+        }
+        .fertilizer-list .cancel-btn {
+            background-color: #a0aec0;
+            color: white;
+        }
+        .fertilizer-list .cancel-btn:hover {
+            background-color: #718096;
+        }
+        .fertilizer-list .remove-btn {
+            background-color: #fc8181;
+            color: white;
+            border: none;
+            padding: 6px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-size: 0.9em;
+        }
+        .fertilizer-list .remove-btn:hover {
+            background-color: #f56565;
+        }
+        .no-fertilizers {
+            text-align: center;
+            color: #718096;
+            font-style: italic;
+            padding: 24px;
+            background-color: #f7fafc;
+            border-radius: 8px;
+            border: 1px dashed #cbd5e0;
+        }
+        .result-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        .result-table th, .result-table td {
+            border: 1px solid #ccc;
+            padding: 8px;
+            text-align: center;
+        }
+        .fertilizer-selector select {
+            width: 100%;
+            margin: 10px 0;
+            max-height: 200px;
+        }
+        #fertilizer-search {
+            width: 100%;
+            padding: 8px;
+            margin-bottom: 5px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        .test-btn {
+            background-color: #3498db;
+            color: white;
+            border: none;
+            padding: 8px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-bottom: 10px;
+            transition: background-color 0.2s;
+            position: relative;
+        }
+        .test-btn:hover {
+            background-color: #2980b9;
+        }
+        .test-btn .tooltip {
+            visibility: hidden;
+            width: 120px;
+            background-color: #555;
+            color: #fff;
+            text-align: center;
+            border-radius: 6px;
+            padding: 5px 0;
+            position: absolute;
+            z-index: 1;
+            bottom: 125%; /* Position the tooltip above the button */
+            left: 50%;
+            margin-left: -60px;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .test-btn .tooltip::after {
+            content: "";
+            position: absolute;
+            top: 100%; /* At the bottom of the tooltip */
+            left: 50%;
+            margin-left: -5px;
+            border-width: 5px;
+            border-style: solid;
+            border-color: #555 transparent transparent transparent;
+        }
+        .test-btn:hover .tooltip {
+            visibility: visible;
+            opacity: 1;
+        }
+        /* 添加導航按鈕樣式 */
+        .nav-button {
+            display: none;
+            padding: 8px 16px;
+            background-color: #4299e1;
+            color: white;
+            text-decoration: none;
+            border-radius: 6px;
+            transition: all 0.2s ease;
+        }
+        .nav-button:hover {
+            background-color: #3182ce;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .clear-btn {
+            background-color: #e53e3e;
+            color: white;
+            border: none;
+            padding: 8px 15px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin-bottom: 10px;
+            transition: background-color 0.2s;
+        }
+        .clear-btn:hover {
+            background-color: #c53030;
+        }
+        #export-container {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: white;
+            border: 1px solid #ccc;
+            padding: 20px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            z-index: 1000;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>營養液成分計算機</h1>
+        <!-- 隱藏導航按鈕，但保留功能 -->
+        <a href="reverse-calculator.html" class="nav-button" style="display: none;">反向計算機</a>
+        <!-- 肥料選擇區域 -->
+        <div class="fertilizer-selector">
+            <h2>選擇肥料</h2>
+            <button id="preset-button-1" onclick="loadPreset1()" class="test-btn">
+                預設配方 1
+                <span class="tooltip">台中農改場萵苣配方</span>
+            </button>
+            <button id="preset-button-2" onclick="loadPreset2()" class="test-btn">
+                預設配方 2
+                <span class="tooltip">現代田園與養液栽培 p526 葉菜通用基本養液</span>
+            </button>
+            <button id="preset-button-3" onclick="loadPreset3()" class="test-btn">
+                預設配方 3
+                <span class="tooltip">Hoagland Solution</span>
+            </button>
+            <button id="clear-button" onclick="clearFormula()" class="clear-btn">清空配方</button>
+            <button id="export-button" onclick="exportFormula()" class="test-btn">匯出配方</button>
+            <div id="export-container" style="display: none;">
+                <textarea id="export-textarea" readonly style="width: 100%; height: 100px; margin-top: 10px;"></textarea>
+                <button onclick="copyToClipboard()" class="test-btn">一鍵複製</button>
+            </div>
+            <input type="text" id="fertilizer-search" placeholder="輸入肥料名稱或分子式搜尋...">
+            <select id="fertilizer-select" size="5">
+                <option value="">請選擇肥料...</option>
+            </select>
+            <input type="number" id="amount" placeholder="輸入用量(mg/L)" step="0.1">
+            <button onclick="addFertilizer()">添加</button>
+        </div>
+        <!-- 已選擇肥料清單 -->
+        <div class="fertilizer-list">
+            <h2>已選擇的肥料</h2>
+            <ul id="selected-fertilizers"></ul>
+        </div>
+        <!-- 計算結果 -->
+        <div class="calculation-results">
+            <h2>養分含量</h2>
+            <table class="result-table">
+                <tr>
+                    <th>元素</th>
+                    <th>ppm</th>
+                    <th>meq/L</th>
+                    <th>mmol/L</th>
+                </tr>
+                <tbody id="results-body">
+                    <!-- 結果將由JavaScript動態填充 -->
+                </tbody>
+            </table>
         </div>
+    </div>
+    <script>
+        // 添加名稱對應表
+        const fertilizerAliases = {
+            'Fe-EDTA·3H2O': 'C10H12FeN2NaO8·3H2O',
+            '螯合鐵': 'C10H12FeN2NaO8·3H2O',
+            '酒石酸鐵': 'C12H12Fe2O18',
+        };
+        // 分子量對照表
+        const molecularWeights = {
+            // 化合物
+            'Ca(NO3)2·4H2O': 236.149920,    // 40.078 + 2(14.0067 + 3*15.999) + 4(18.015340)
+            'KNO3': 101.102530,             // 39.0983 + 14.0067 + 3*15.999
+            'MgSO4·7H2O': 246.474780,       // 24.305 + 32.065 + 4*15.999 + 7(18.015340)
+            'NH4H2PO4': 115.025738,         // 14.0067 + 4*1.007940 + 30.973762 + 4*15.999
+            'Ca(H2PO4)2·H2O': 252.082802,   // 40.078 + 2(2*1.007940 + 30.973762 + 4*15.999) + 18.015340
+            'C10H12FeN2NaO8·3H2O': 412.147420,  // Fe-EDTA·3H2O: 10*12.0107 + 12*1.007940 + 55.845 + 2*14.0067 + 22.989770 + 8*15.999 + 3(18.015340)
+            'C12H12Fe2O18': 555.895680,        // 12*12.0107 + 12*1.007940 + 2*55.845 + 18*15.999
+            'H3BO3': 61.833220,             // 3*1.007940 + 10.811 + 3*15.999
+            'MnCl2·4H2O': 197.905360,       // 54.938045 + 2*35.453 + 4(18.015340)
+            'ZnSO4·7H2O': 287.539780,       // 65.38 + 32.065 + 4*15.999 + 7(18.015340)
+            'CuSO4·5H2O': 249.685700,       // 63.546 + 32.065 + 4*15.999 + 5(18.015340)
+            'Na2MoO4·2H2O': 241.950680,     // 2*22.989770 + 95.96 + 4*15.999 + 2(18.015340)
+            'KH2PO4': 136.085838,           // 39.0983 + 2*1.007940 + 30.973762 + 4*15.999
+            'Ca(NO3)2': 164.088400,         // 40.078 + 2(14.0067 + 3*15.999)
+            'MgSO4': 120.366000,            // 24.305 + 32.065 + 4*15.999
+            '(NH4)6Mo7O24·4H2O': 1235.86,    // 6(14.0067 + 4*1.007940) + 7*95.96 + 24*15.999 + 4(2*1.007940 + 15.999)
+            '(NH4)2MoO4': 196.0354,  // (2 * (14.0067 + 4 * 1.00794)) + 95.96 + (4 * 15.999)
+            'H2MoO4·H2O': 178.95068, // 2*1.00794 + 95.96 + 4*15.999 + 18.01534
+            // 元素
+            'N': 14.006700,
+            'P': 30.973762,
+            'K': 39.098300,
+            'Ca': 40.078000,
+            'Mg': 24.305000,
+            'S': 32.065000,
+            'Fe': 55.845000,
+            'Mn': 54.938045,
+            'Zn': 65.380000,
+            'Cu': 63.546000,
+            'B': 10.811000,
+            'Mo': 95.960000,
+            'Cl': 35.453000,
+            // 常用計算值
+            'H': 1.007940,
+            'O': 15.999000,
+            'Na': 22.989770,
+            'C': 12.010700,
+            'H2O': 18.015340    // 2*1.007940 + 15.999
+        };
+        // 肥料成分對照表（以重量比例表示）
+        const fertilizerComposition = {
+            // 大量元素肥料
+            'Ca(NO3)2·4H2O': {
+                'Ca': 0.169715,  // 40.078 / 236.149920 = 16.97% Ca
+                'N': 0.118721    // (2 * 14.0067) / 236.149920 = 11.87% N
+            },
+            'KNO3': {
+                'K': 0.386716,   // 39.0983 / 101.102530 = 38.67% K
+                'N': 0.138486    // 14.0067 / 101.102530 = 13.85% N
+            },
+            'MgSO4·7H2O': {
+                'Mg': 0.098611,  // 24.305 / 246.474780 = 9.86% Mg
+                'S': 0.130095    // 32.065 / 246.474780 = 13.01% S
+            },
+            'NH4H2PO4': {
+                'N': 0.121773,   // 14.0067 / 115.025738 = 12.18% N
+                'P': 0.269278,   // 30.973762 / 115.025738 = 26.93% P
+                'H': 0.035023    // (4 * 1.007940) / 115.025738 = 3.50% H
+            },
+            'Ca(H2PO4)2·H2O': {
+                'Ca': 0.158987,  // 40.078 / 252.082802 = 15.90% Ca
+                'P': 0.245848,   // (2 * 30.973762) / 252.082802 = 24.58% P
+                'H': 0.008000    // (4 * 1.007940) / 252.082802 = 0.80% H
+            },
+            'KH2PO4': {
+                'K': 0.287305,   // 39.0983 / 136.085838 = 28.73% K
+                'P': 0.227605,   // 30.973762 / 136.085838 = 22.76% P
+                'H': 0.014819    // (2 * 1.007940) / 136.085838 = 1.48% H
+            },
+            'Ca(NO3)2': {
+                'Ca': 0.244497,  // 40.078 / 164.088400 = 24.45% Ca
+                'N': 0.170744    // (2 * 14.0067) / 164.088400 = 17.07% N
+            },
+            'MgSO4': {
+                'Mg': 0.201927,  // 24.305 / 120.366000 = 20.19% Mg
+                'S': 0.266393    // 32.065 / 120.366000 = 26.64% S
+            },
+            // 微量元素肥料
+            'C10H12FeN2NaO8·3H2O': {
+                'Fe': 0.135498   // 55.845 / 412.147420 = 13.55% Fe
+            },
+            'C12H12Fe2O18': {
+                'Fe': 0.200919   // (2 * 55.845) / 555.895680 = 20.09% Fe
+            },
+            'H3BO3': {
+                'B': 0.174842    // 10.811 / 61.833220 = 17.48% B
+            },
+            'MnCl2·4H2O': {
+                'Mn': 0.277595,  // 54.938045 / 197.905360 = 27.76% Mn
+                'Cl': 0.358521   // (2 * 35.453) / 197.905360 = 35.85% Cl
+            },
+            'ZnSO4·7H2O': {
+                'Zn': 0.227379,  // 65.38 / 287.539780 = 22.74% Zn
+                'S': 0.111515    // 32.065 / 287.539780 = 11.15% S
+            },
+            'CuSO4·5H2O': {
+                'Cu': 0.254504,  // 63.546 / 249.685700 = 25.45% Cu
+                'S': 0.128421    // 32.065 / 249.685700 = 12.84% S
+            },
+            'Na2MoO4·2H2O': {
+                'Mo': 0.396610,   // 95.96 / 241.950680 = 39.66% Mo
+                'Na': 0.190037    // 2*22.989770 / 241.950680 = 19.00% Na
+            },
+            '(NH4)6Mo7O24·4H2O': {
+                'N': 0.068033,   // (6 * 14.0067) / 1235.86 = 6.80% N
+                'Mo': 0.543754   // (7 * 95.96) / 1235.86 = 54.38% Mo
+            },
+            '(NH4)2MoO4': {
+                'N': 0.142935,   // (2 * 14.0067) / 196.0354 = 14.29% N
+                'Mo': 0.489497   // (1 * 95.96) / 196.0354 = 48.95% Mo
+            },
+            'H2MoO4·H2O': {
+                'Mo': 0.536, // 95.96 / 178.95068 = 53.6% Mo
+            }
+        };
+        // 離子價數對照表（用於 meq 計算）
+        const ionicCharges = {
+            'N': -1,    // NO3- 形式
+            'P': -1,    // H2PO4- 形式
+            'K': +1,    // K+ 形式
+            'Ca': +2,   // Ca2+ 形式
+            'Mg': +2,   // Mg2+ 形式
+            'S': -2,    // SO4-2 形式
+            'Fe': +2,   // Fe2+ 形式
+            'Mn': +2,   // Mn2+ 形式
+            'Zn': +2,   // Zn2+ 形式
+            'Cu': +2,   // Cu2+ 形式
+            'B': +3,    // B3+ 形式
+            'Mo': -2,   // MoO4-2 形式
+            'Cl': -1,    // Cl- 形式
+            'Na': +1    // Na+ 形式
+        };
+        const selectedFertilizers = [];
+        // 定義肥料清單
+        const fertilizerList = [
+            { value: 'Ca(NO3)2·4H2O', label: '硝酸鈣（四水） Ca(NO3)2·4H2O' },
+            { value: 'NH4H2PO4', label: '磷酸一銨 NH4H2PO4' },
+            { value: 'MgSO4·7H2O', label: '硫酸鎂（七水） MgSO4·7H2O' },
+            { value: 'Ca(H2PO4)2·H2O', label: '磷酸一鈣（一水） Ca(H2PO4)2·H2O' },
+            { value: 'Ca(NO3)2', label: '硝酸鈣 Ca(NO3)2' },
+            { value: 'KNO3', label: '硝酸鉀 KNO3' },
+            { value: 'MgSO4', label: '硫酸鎂 MgSO4' },
+            { value: 'KH2PO4', label: '磷酸二氫鉀 KH2PO4' },
+            { value: 'Fe-EDTA·3H2O', label: '螯合鐵（Fe-EDTA·3H2O）' },
+            { value: 'C12H12Fe2O18', label: '酒石酸鐵（C12H12Fe2O18）' },
+            { value: 'H3BO3', label: '硼酸 H3BO3' },
+            { value: 'MnCl2·4H2O', label: '氯化錳（四水） MnCl2·4H2O' },
+            { value: 'ZnSO4·7H2O', label: '硫酸鋅（七水） ZnSO4·7H2O' },
+            { value: 'CuSO4·5H2O', label: '硫酸銅（五水） CuSO4·5H2O' },
+            { value: 'Na2MoO4·2H2O', label: '鉬酸鈉（二水） Na2MoO4·2H2O' },
+            { value: '(NH4)6Mo7O24·4H2O', label: '仲鉬酸銨（四水） (NH4)6Mo7O24·4H2O' },
+            { value: '(NH4)2MoO4', label: '鉬酸銨 (NH4)2MoO4' },
+            { value: 'H2MoO4·H2O', label: '鉬酸（一水） H2MoO4·H2O' }
+        ];
+        // 初始化肥料選單
+        function initializeFertilizerSelect() {
+            const select = document.getElementById('fertilizer-select');
+            updateFertilizerOptions(fertilizerList);
+        }
+        // 更新肥料選項
+        function updateFertilizerOptions(options) {
+            const select = document.getElementById('fertilizer-select');
+            select.innerHTML = '<option value="">請選擇肥料...</option>';
+            options.forEach(option => {
+                const optElement = document.createElement('option');
+                optElement.value = option.value;
+                optElement.textContent = option.label;
+                select.appendChild(optElement);
+            });
+        }
+        // 搜尋肥料
+        function searchFertilizers(searchText) {
+            const filteredList = fertilizerList.filter(fertilizer => {
+                const searchLower = searchText.toLowerCase();
+                return fertilizer.label.toLowerCase().includes(searchLower) ||
+                       fertilizer.value.toLowerCase().includes(searchLower);
+            });
+            updateFertilizerOptions(filteredList);
+        }
+        // 添加事件監聽器
+        document.addEventListener('DOMContentLoaded', function() {
+            initializeFertilizerSelect();
+            const searchInput = document.getElementById('fertilizer-search');
+            searchInput.addEventListener('input', function(e) {
+                searchFertilizers(e.target.value);
+            });
+            // 添加鍵盤快捷鍵支援
+            const select = document.getElementById('fertilizer-select');
+            searchInput.addEventListener('keydown', function(e) {
+                if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    select.focus();
+                    if (select.options.length > 0) {
+                        select.selectedIndex = 0;
+                    }
+                }
+            });
+            // 添加 Enter 鍵支援
+            const amountInput = document.getElementById('amount');
+            amountInput.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter') {
+                    addFertilizer();
+                }
+            });
+        });
+        function addFertilizer() {
+            const select = document.getElementById('fertilizer-select');
+            const amount = document.getElementById('amount').value;
+            if (select.value && amount) {
+                const existingIndex = selectedFertilizers.findIndex(f => f.formula === select.value);
+                if (existingIndex !== -1) {
+                    // 如果存在，加上新的數量
+                    selectedFertilizers[existingIndex].amount = roundNumber(
+                        selectedFertilizers[existingIndex].amount + parseFloat(amount)
+                    );
+                } else {
+                    // 如果不存在，新增一條
+                    selectedFertilizers.push({
+                        formula: select.value,
+                        amount: roundNumber(parseFloat(amount))
+                    });
+                }
+                document.getElementById('amount').value = '';
+                updateFertilizerList();
+                calculateNutrients();
+            }
+        }
+        function updateFertilizerList() {
+            const list = document.getElementById('selected-fertilizers');
+            list.innerHTML = '';
+            if (selectedFertilizers.length === 0) {
+                const emptyMessage = document.createElement('div');
+                emptyMessage.className = 'no-fertilizers';
+                emptyMessage.textContent = '尚未添加任何肥料';
+                list.appendChild(emptyMessage);
+                return;
+            }
+            selectedFertilizers.forEach((fert, index) => {
+                const li = document.createElement('li');
+                const infoDiv = document.createElement('div');
+                infoDiv.className = 'fertilizer-info';
+                // 查找肥料的中文名稱
+                const fertilizerInfo = fertilizerList.find(f => f.value === fert.formula);
+                const displayName = fertilizerInfo ? fertilizerInfo.label : fert.formula;
+                const formula = document.createElement('span');
+                formula.className = 'formula';
+                formula.textContent = displayName;  // 使用中文名稱
+                const amountContainer = document.createElement('div');
+                amountContainer.className = 'amount';
+                // 顯示用量的元素
+                const amountDisplay = document.createElement('span');
+                amountDisplay.className = 'amount-display';
+                amountDisplay.textContent = `${formatNumber(fert.amount)} mg/L`;
+                amountDisplay.onclick = () => startEditing(amountContainer, fert, index);
+                amountContainer.appendChild(amountDisplay);
+                infoDiv.appendChild(formula);
+                infoDiv.appendChild(amountContainer);
+                const removeBtn = document.createElement('button');
+                removeBtn.className = 'remove-btn';
+                removeBtn.textContent = '移除';
+                removeBtn.onclick = () => {
+                    selectedFertilizers.splice(index, 1);
+                    updateFertilizerList();
+                    calculateNutrients();
+                };
+                li.appendChild(infoDiv);
+                li.appendChild(removeBtn);
+                list.appendChild(li);
+            });
+        }
+        function startEditing(container, fert, index) {
+            // 清空容器
+            container.innerHTML = '';
+            // 創建輸入框
+            const input = document.createElement('input');
+            input.type = 'number';
+            input.className = 'amount-input';
+            input.value = fert.amount;
+            input.step = '0.001';
+            // 創建按鈕容器
+            const buttonContainer = document.createElement('div');
+            buttonContainer.className = 'edit-controls';
+            // 創建保存按鈕
+            const saveBtn = document.createElement('button');
+            saveBtn.className = 'edit-btn save-btn';
+            saveBtn.textContent = '✓';
+            saveBtn.onclick = () => {
+                const newAmount = roundNumber(parseFloat(input.value));
+                if (newAmount > 0) {
+                    selectedFertilizers[index].amount = newAmount;
+                    updateFertilizerList();
+                    calculateNutrients();
+                }
+            };
+            // 創建取消按鈕
+            const cancelBtn = document.createElement('button');
+            cancelBtn.className = 'edit-btn cancel-btn';
+            cancelBtn.textContent = '✕';
+            cancelBtn.onclick = () => {
+                updateFertilizerList();
+            };
+            // 添加到容器
+            buttonContainer.appendChild(saveBtn);
+            buttonContainer.appendChild(cancelBtn);
+            container.appendChild(input);
+            container.appendChild(buttonContainer);
+            // 聚焦到輸入框
+            input.focus();
+            input.select();
+            // 添加鍵盤事件處理
+            input.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter') {
+                    saveBtn.click();
+                } else if (e.key === 'Escape') {
+                    cancelBtn.click();
+                }
+            });
+        }
+        function calculateNutrients() {
+            const results = {
+                'N': { ppm: 0, meq: 0, mmol: 0 },
+                'P': { ppm: 0, meq: 0, mmol: 0 },
+                'K': { ppm: 0, meq: 0, mmol: 0 },
+                'Ca': { ppm: 0, meq: 0, mmol: 0 },
+                'Mg': { ppm: 0, meq: 0, mmol: 0 },
+                'S': { ppm: 0, meq: 0, mmol: 0 },
+                'Fe': { ppm: 0, meq: 0, mmol: 0 },
+                'Mn': { ppm: 0, meq: 0, mmol: 0 },
+                'Zn': { ppm: 0, meq: 0, mmol: 0 },
+                'Cu': { ppm: 0, meq: 0, mmol: 0 },
+                'B': { ppm: 0, meq: 0, mmol: 0 },
+                'Mo': { ppm: 0, meq: 0, mmol: 0 },
+                'Cl': { ppm: 0, meq: 0, mmol: 0 },
+                'Na': { ppm: 0, meq: 0, mmol: 0 }
+            };
+            selectedFertilizers.forEach(fert => {
+                // 使用實際的化學式進行查找
+                const actualFormula = fertilizerAliases[fert.formula] || fert.formula;
+                const composition = fertilizerComposition[actualFormula];
+                if (composition) {
+                    for (let element in composition) {
+                        if (results[element]) {
+                            // 計算 ppm (mg/L)
+                            const ppm = roundNumber(fert.amount * composition[element], 4);
+                            results[element].ppm += ppm;
+                            // 計算 mmol/L
+                            const mmol = roundNumber(ppm / molecularWeights[element], 6);
+                            results[element].mmol += mmol;
+                            // 計算 meq/L
+                            const meq = roundNumber(mmol * Math.abs(ionicCharges[element]), 6);
+                            results[element].meq += meq;
+                        }
+                    }
+                }
+            });
+            // 更新結果表格
+            const tbody = document.getElementById('results-body');
+            tbody.innerHTML = '';
+            Object.entries(results).forEach(([element, values]) => {
+                const tr = document.createElement('tr');
+                // 在元素符號後添加離子電荷標示
+                const chargeSymbol = ionicCharges[element] > 0 ?
+                    `<sup>${ionicCharges[element]}+</sup>` :
+                    `<sup>${Math.abs(ionicCharges[element])}-</sup>`;
+                tr.innerHTML = `
+                    <td>${element}${chargeSymbol}</td>
+                    <td>${formatNumber(values.ppm, 4)}</td>
+                    <td>${formatNumber(values.meq, 6)}</td>
+                    <td>${formatNumber(values.mmol, 6)}</td>
+                `;
+                tbody.appendChild(tr);
+            });
+        }
+        function loadPreset1() {
+            selectedFertilizers.length = 0;
+            const preset1 = [
+                { formula: 'Ca(NO3)2·4H2O', amount: 94.0 },
+                { formula: 'KNO3', amount: 484.0 },
+                { formula: 'NH4H2PO4', amount: 62.0 },
+                { formula: 'MgSO4·7H2O', amount: 394.0 },
+                { formula: 'Ca(H2PO4)2·H2O', amount: 67.0 },
+                { formula: 'Fe-EDTA·3H2O', amount: 20.0 },
+                { formula: 'H3BO3', amount: 1.2 },
+                { formula: 'MnCl2·4H2O', amount: 0.72 },
+                { formula: 'ZnSO4·7H2O', amount: 0.09 },
+                { formula: 'CuSO4·5H2O', amount: 0.04 },
+                { formula: 'Na2MoO4·2H2O', amount: 0.01 }
+            ];
+            selectedFertilizers.push(...preset1);
+            updateFertilizerList();
+            calculateNutrients();
+        }
+        function loadPreset2() {
+            selectedFertilizers.length = 0;
+            const preset2 = [
+                { formula: 'Ca(NO3)2·4H2O', amount: 950.0 },
+                { formula: 'KNO3', amount: 800.0 },
+                { formula: 'NH4H2PO4', amount: 150.0 },
+                { formula: 'MgSO4·7H2O', amount: 500.0 },
+                { formula: 'Fe-EDTA·3H2O', amount: 16.0 },
+                { formula: 'H3BO3', amount: 1.2 },
+                { formula: 'MnCl2·4H2O', amount: 0.72 },
+                { formula: 'ZnSO4·7H2O', amount: 0.09 },
+                { formula: 'CuSO4·5H2O', amount: 0.04 },
+                { formula: '(NH4)2MoO4', amount: 0.01 }
+            ];
+            selectedFertilizers.push(...preset2);
+            updateFertilizerList();
+            calculateNutrients();
+        }
+        function loadPreset3() {
+            selectedFertilizers.length = 0;
+            const preset3 = [
+                { formula: 'KNO3', amount: 505.0 },
+                { formula: 'Ca(NO3)2·4H2O', amount: 1180.0 },
+                { formula: 'MgSO4·7H2O', amount: 493.0 },
+                { formula: 'KH2PO4', amount: 136.0 },
+                { formula: 'H3BO3', amount: 2.86 },
+                { formula: 'MnCl2·4H2O', amount: 1.81 },
+                { formula: 'ZnSO4·7H2O', amount: 0.22 },
+                { formula: 'CuSO4·5H2O', amount: 0.08 },
+                { formula: 'Na2MoO4·2H2O', amount: 0.12 },
+                { formula: 'C12H12Fe2O18', amount: 5.0 }
+            ];
+            selectedFertilizers.push(...preset3);
+            updateFertilizerList();
+            calculateNutrients();
+        }
+        function clearFormula() {
+            selectedFertilizers.length = 0;
+            updateFertilizerList();
+            calculateNutrients();
+        }
+        // 精度處理工具函數
+        function roundNumber(value, precision = 3) {
+            if (typeof value !== 'number' || isNaN(value)) return 0;
+            const multiplier = Math.pow(10, precision);
+            // 使用四捨六入五成雙規則
+            const roundedValue = Math.round(value * multiplier) / multiplier;
+            return roundedValue;
+        }
+        // 格式化顯示數值
+        function formatNumber(value, precision = 3) {
+            const roundedValue = roundNumber(value, precision);
+            // 確保顯示指定的小數位數
+            return roundedValue.toFixed(precision);
+        }
+        function exportFormula() {
+            const exportContainer = document.getElementById('export-container');
+            const exportTextarea = document.getElementById('export-textarea');
+            const formulaJson = JSON.stringify(selectedFertilizers, null, 2);
+            exportTextarea.value = formulaJson;
+            exportContainer.style.display = 'block';
+            // Add event listener to hide the export container when clicking outside
+            document.addEventListener('click', handleClickOutside, true);
+        }
+        function copyToClipboard() {
+            const exportTextarea = document.getElementById('export-textarea');
+            exportTextarea.select();
+            document.execCommand('copy');
+            alert('配方已複製到剪貼簿');
+        }
+        function handleClickOutside(event) {
+            const exportContainer = document.getElementById('export-container');
+            if (!exportContainer.contains(event.target)) {
+                exportContainer.style.display = 'none';
+                document.removeEventListener('click', handleClickOutside, true);
+            }
+        }
+    </script>
 </body>
 </html>