农产品质量评估工具 - 快速评估农产品等级 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>农产品质量评估工具 - 快速评估农产品等级</title>
  <meta name="description" content="在线农产品质量评估工具，帮助您快速评估农产品等级。填写产品名称、收获日期和质量评级，即可获得评估结果。简单易用，方便快捷！">
  <meta name="keywords" content="农产品, 质量评估, 等级评定, 在线工具, 农业">
  <link href='materialize.min.css' rel='stylesheet'>
  <style>
    body {
      background-color: #f5f5f5;
      font-family: Arial, sans-serif;
    }
<pre><code>.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: #26a69a;
  text-align: center;
  margin-bottom: 30px;
}

.btn {
  background-color: #26a69a;
}

.btn:hover {
  background-color: #009688;
}

.card-panel {
  padding: 20px;
  margin-top: 20px;
}

.card-panel h3 {
  font-size: 24px;
  margin-top: 0;
}

.center-align {
  text-align: center;
}

.red-text {
  color: red;
}
</code></pre>
  </style>
</head>
<body>
  <div class='container'>
    <h1>农产品质量评估</h1>
<pre><code>&lt;form id='assessment-form'&gt;
  &lt;div class='row'&gt;
    &lt;div class='input-field col s12 m6'&gt;
      &lt;input id='product-name' type='text' class='validate' required&gt;
      &lt;label for='product-name'&gt;产品名称&lt;/label&gt;
      &lt;span class='helper-text' data-error='请输入产品名称' data-success=''&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class='input-field col s12 m6'&gt;
      &lt;input id='harvest-date' type='text' class='datepicker validate' required&gt;
      &lt;label for='harvest-date'&gt;收获日期&lt;/label&gt;
      &lt;span class='helper-text' data-error='请选择收获日期' data-success=''&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class='row'&gt;
    &lt;div class='col s12'&gt;
      &lt;p&gt;请选择产品质量评级：&lt;/p&gt;
      &lt;p&gt;
        &lt;label&gt;
          &lt;input class='with-gap' name='quality-level' type='radio' value='excellent' required&gt;
          &lt;span&gt;优秀&lt;/span&gt;
        &lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;label&gt;
          &lt;input class='with-gap' name='quality-level' type='radio' value='good' required&gt;
          &lt;span&gt;良好&lt;/span&gt;
        &lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;label&gt;
          &lt;input class='with-gap' name='quality-level' type='radio' value='average' required&gt;
          &lt;span&gt;一般&lt;/span&gt;
        &lt;/label&gt;
      &lt;/p&gt;
      &lt;span class='helper-text red-text' data-error='请选择产品质量评级' data-success=''&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class='row'&gt;
    &lt;div class='col s12'&gt;
      &lt;button id='submitBtn' class='btn waves-effect waves-light' type='submit' name='action'&gt;提交评估
        &lt;i class='material-icons right'&gt;send&lt;/i&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;

&lt;div id='assessment-result' class='card-panel teal lighten-2 white-text mt-4 hidden'&gt;
  &lt;h3 class='center-align'&gt;评估结果&lt;/h3&gt;
  &lt;p id='product-name-result' class='center-align'&gt;&lt;/p&gt;
  &lt;p id='harvest-date-result' class='center-align'&gt;&lt;/p&gt;
  &lt;p id='quality-level-result' class='center-align'&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
  </div>
  <script src='materialize.min.js'></script>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const elems = document.querySelectorAll('.datepicker');
      M.Datepicker.init(elems, {
        format: 'yyyy-mm-dd'
      });
    });

    const form = document.getElementById('assessment-form');
    const submitBtn = document.getElementById('submitBtn');

    form.addEventListener('submit', function (event) {
      event.preventDefault();

      const productName = document.getElementById('product-name').value;
      const harvestDate = document.getElementById('harvest-date').value;
      const qualityLevel = document.querySelector('input[name="quality-level"]:checked');

      const productNameHelper = document.querySelector('label[for="product-name"] + .helper-text');
      const qualityLevelHelper = document.querySelector('label[for="product-name"] + .helper-text');

      if (!productName || !harvestDate || !qualityLevel) {
        if (!productName) {
          productNameHelper.setAttribute('data-error', '请输入产品名称');
          productNameHelper.classList.add('red-text');
        } else {
          productNameHelper.removeAttribute('data-error');
          productNameHelper.classList.remove('red-text');
        }

        if (!harvestDate) {
          M.toast({ html: '请选择收获日期' });
        }

        if (!qualityLevel) {
          qualityLevelHelper.setAttribute('data-error', '请选择产品质量评级');
          qualityLevelHelper.classList.add('red-text');
        } else {
          qualityLevelHelper.removeAttribute('data-error');
          qualityLevelHelper.classList.remove('red-text');
        }

        return;
      }

      document.getElementById('product-name-result').innerText = `产品名称：${productName}`;
      document.getElementById('harvest-date-result').innerText = `收获日期：${harvestDate}`;
      document.getElementById('quality-level-result').innerText = `产品质量评级：${qualityLevel.value}`;

      const resultSection = document.getElementById('assessment-result');
      resultSection.classList.remove('hidden');

      M.toast({ html: '评估提交成功！' });
    });
  </script>
</body>
</html>