Spaces:

CVNSS
/

Aqua_test

Running

File size: 16,426 Bytes

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <title>Bộ KIT [e-Sensor Aqua] IoT Aquaponics – Sản phẩm từ Đề tài NCKH Phân hiệu ĐHQG-HCM - Mã số: C2023-54-01</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:700,400&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Montserrat', Arial, sans-serif;
      background: linear-gradient(120deg, #e3f9f9 0%, #f5fff7 100%);
      margin: 0;
      color: #23374d;
    }
    header {
      background: linear-gradient(90deg, #0288d1 70%, #43e97b 100%);
      color: #fff;
      text-align: center;
      padding: 48px 16px 32px 16px;
      border-radius: 0 0 36px 36px;
      box-shadow: 0 2px 18px rgba(2,136,209,0.11);
    }
    header h1 {
      margin: 0 0 10px 0;
      font-size: 2.4rem;
      font-weight: 800;
      letter-spacing: 2px;
      text-shadow: 2px 2px 0 #19b3b333;
    }
    header .badge {
      display: inline-block;
      background: #fff;
      color: #0288d1;
      font-weight: 700;
      border-radius: 16px;
      padding: 6px 20px;
      font-size: 1.12rem;
      margin-top: 10px;
      box-shadow: 0 2px 8px rgba(2,136,209,0.10);
      letter-spacing: 1.1px;
      border: 2px solid #e3f2fd;
    }
    .container {
      max-width: 1200px;
      margin: 36px auto 0 auto;
      background: #fff;
      border-radius: 28px;
      box-shadow: 0 4px 22px rgba(44, 62, 80, 0.12);
      padding: 40px 32px 32px 32px;
    }
    .section-title {
      color: #0288d1;
      font-size: 1.65rem;
      margin: 32px 0 18px 0;
      letter-spacing: 1px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
      text-shadow: 1px 1px 0 #a7ffeb22;
    }
    .section-title i {
      font-size: 1.32rem;
    }
    .section-img-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: center;
      align-items: flex-end;
      margin: 24px 0 18px 0;
    }
    .img-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 290px;
      flex: 1 1 220px;
    }
    .img-card img {
      border-radius: 16px;
      max-width: 280px;
      height: 170px;
      object-fit: cover;
      box-shadow: 0 5px 32px rgba(44, 62, 80, 0.17);
      border: 2px solid #e0f2f1;
      transition: transform 0.23s, box-shadow 0.23s, border-color 0.16s;
      cursor: pointer;
    }
    .img-card img:hover {
      transform: scale(1.08) rotate(-2deg);
      box-shadow: 0 12px 46px #0288d121, 0 2px 8px #fff9c433;
      border-color: #00e3a3;
    }
    .img-caption {
      color: #0288d1;
      font-size: 1rem;
      margin: 7px 0 0 0;
      text-align: center;
      font-weight: 600;
      letter-spacing: .2px;
    }
    .note-box {
      background: linear-gradient(90deg,#fff3e0,#e0ffef 90%);
      border-left: 7px solid #ffb300;
      border-radius: 12px;
      padding: 18px 20px 14px 25px;
      margin: 32px 0;
      color: #7c4d00;
      font-size: 1.13rem;
      box-shadow: 0 2px 12px #ffd36f18;
    }
    ul.features, ul.apps {
      list-style: none;
      padding-left: 0;
      font-size: 1.16rem;
      line-height: 2.1;
      margin-bottom: 16px;
    }
    ul.features li::before {
      content: "✔️";
      color: #43e97b;
      margin-right: 10px;
      font-size: 1em;
    }
    .system-logic {
      margin: 28px 0 22px 0;
      background: #e3f2fd;
      border-radius: 15px;
      padding: 19px 20px;
      box-shadow: 0 2px 12px #0288d11a;
      font-size: 1.09rem;
    }
    .system-logic b { color: #0288d1;}
    .component-table, .kpi-table {
      width: 100%;
      border-collapse: collapse;
      margin: 24px 0 16px 0;
      border-radius: 12px;
      overflow: hidden;
      font-size: 1.12rem;
      box-shadow: 0 1px 9px #0288d11a;
    }
    .component-table th, .component-table td, .kpi-table th, .kpi-table td {
      padding: 11px 16px;
      text-align: left;
      border-bottom: 1px solid #bbdefb;
    }
    .component-table th, .kpi-table th {
      background: #0288d1;
      color: #fff;
      font-weight: bold;
      font-size: 1.07rem;
    }
    .component-table tr:last-child td, .kpi-table tr:last-child td {
      border-bottom: none;
    }
    .kpi-table {
      background: #f1f8e9;
      margin-top: 10px;
      margin-bottom: 18px;
    }
    .footer {
      text-align: center;
      padding: 24px 10px 20px 10px;
      background: #e3f2fd;
      border-radius: 28px 28px 0 0;
      font-size: 1.13rem;
      color: #0288d1;
      margin-top: 34px;
      letter-spacing: 1px;
    }
    .file-link {
      color: #0288d1;
      text-decoration: underline;
      font-weight: 700;
      cursor: pointer;
      transition: color 0.14s;
    }
    .file-link:hover { color: #00e676; }
    /* Popup giữ nguyên */
    .popup-bg { display: none; position: fixed; z-index: 1010; left: 0; top: 0; right: 0; bottom: 0; background: rgba(34, 49, 63, 0.32);}
    .popup-content { background: #fff; max-width: 740px; margin: 80px auto; padding: 30px 24px; border-radius: 18px; box-shadow: 0 6px 48px rgba(41,128,185,0.22); position: relative; text-align: left;}
    .close-btn { position: absolute; top: 12px; right: 16px; font-size: 1.2rem; background: #e3f2fd; border: none; color: #0288d1; border-radius: 10px; padding: 5px 12px; cursor: pointer; font-weight: 700; transition: background 0.12s;}
    .close-btn:hover { background: #b3e5fc;}
    @media (max-width: 700px) {
      .container, .popup-content { padding: 10px 1px 6px 1px; }
      header h1 { font-size: 1.15rem;}
      h2.section-title { font-size: 1.02rem;}
      .section-img-grid { flex-direction: column; }
      .img-card img { max-width: 100%; height: auto;}
    }
  </style>
</head>
<body>
<header>
  <h1>BỘ KIT [e-Sensor Aqu] IoT – AQUAPONICS - C2023-54-01</h1>
  <div class="badge">Sản phẩm từ Đề tài nghiên cứu KHCN – ThS. Ngô Hoàng Đại Long cùng các thành viên (thực hiện), 2025</div>
</header>
<div class="container">

  <h2 class="section-title"><i>🚀</i> Bộ KIT – Sản phẩm từ mô hình pilot, kết quả nghiên cứu thực tiễn</h2>
  <div>
    Bộ KIT (hệ thống e-Sensor Aqua) IoT Aquaponics là thành quả của đề tài khoa học tại Bến Tre, <b>ứng dụng công nghệ IoT và tự động hóa vào nông nghiệp tuần hoàn</b>, đặc biệt tối ưu cho các hệ Aquaponics hộ gia đình và trang trại nhỏ.<br>
    <span style="color:#1976d2;font-weight:bold;">Hệ thống đã kiểm nghiệm thực tế với nhiều mô hình pilot – minh họa bên dưới.</span>
  </div>

  <div class="section-img-grid">
    <div class="img-card">
      <img src="output (31).jpg" alt="Hệ Pilot - Aquaponics IBC">
      <div class="img-caption">Khảo sát nội nghiệp tài liệu, mô phỏng</div>
    </div>
    <div class="img-card">
      <img src="output (30).jpg" alt="Mô hình nuôi ếch có giám sát">
      <div class="img-caption">Khảo sát ngoại nghiệp, khảo sát thực địa</div>
    </div>
    <div class="img-card">
      <img src="output (32).png" alt="Pilot Mapping Node">
      <div class="img-caption">Thử áp dụng tại doanh nghiệp nông nghiệp thông minh</div>
    </div>
    <div class="img-card">
      <img src="output (33).jpg" alt="Aquaponics Mini Map">
      <div class="img-caption">Mô hình nhà màng tại Phân hiệu ĐHQG-HCM</div>
    </div>
  </div>

  <div class="note-box">
    <b>Lời ngỏ (Trích Sổ tay Aquaponics Bến Tre):</b>  
    <br>Kính gửi bà con nông dân, Bộ KIT và Sổ tay này là kết quả của quá trình triển khai thực tiễn, mang lại giải pháp trồng rau, nuôi cá sạch – tiết kiệm nước, dễ vận hành và bền vững cho mọi nhà.<br>
    <b>– ThS. Ngô Hoàng Đại Long, Phân hiệu ĐHQG-HCM tại Bến Tre</b>
  </div>

  <h2 class="section-title"><i>🔎</i> Tính năng nổi bật</h2>
  <ul class="features">
    <li>Kết nối đầy đủ cảm biến, hỗ trợ ESP32 Wi-Fi/Bluetooth, cấu hình qua Webserver</li>
    <li>Bộ KIT đi kèm tài liệu chi tiết, code mẫu, file 3D, PowerPoint nguyên lý, bảng hướng dẫn trực quan</li>
    <li>Tương thích học sinh – sinh viên – giảng viên – nông dân chuyển đổi số</li>
    <li>Triển khai đa dạng: tuần hoàn kín, bán tự động, thông minh IoT</li>
    <li>Mở rộng thành giải pháp tự động hóa trại cá – rau – cảnh báo từ xa (Blynk, server)</li>
  </ul>

  <div class="system-logic">
    <b>🌊 Sơ đồ hệ thống Aquaponics (logic luồng nước & dữ liệu):</b><br>
    <b>[BỂ CÁ]</b> &rarr; <b>[LỌC CƠ HỌC]</b> &rarr; <b>[BỂ VI SINH]</b> &rarr; <b>[MÁNG RAU]</b> &rarr; <b>[BỒN HỒI]</b> &rarr; <b>[BỂ CÁ]</b><br>
    <i>Các node cảm biến pH, nhiệt độ, DO, EC... lắp đặt tại các điểm then chốt, truyền dữ liệu về dashboard điều khiển IoT (giám sát – cảnh báo – tự động hóa)</i>
  </div>

  <h2 class="section-title"><i>🗺️</i> Mô hình thực tế – Layout Pilot & Mapping</h2>
  <div class="section-img-grid">
    <div class="img-card">
      <img src="output (35).png" alt="Mapping Node Sensors">
      <div class="img-caption">Mapping mô hình mạng cảm biến trong nhà màng</div>
    </div>
    <div class="img-card">
      <img src="output (37).jpg" alt="Layout mô phỏng Pilot">
      <div class="img-caption">Sơ đồ bố trí pilot trên máy tính vẽ trên AutoCAD</div>
    </div>
    <div class="img-card">
      <img src="output (38).jpg" alt="Pilot Layout 2">
      <div class="img-caption">Mô phỏng layout thực thực tế pilot 10-20m<sup>2</sup></div>
    </div>
    <div class="img-card">
      <img src="output (41).png" alt="Mini Aquaponics Map">
      <div class="img-caption">Mô phỏng mô hình hóa Aquaponics</div>
    </div>
  </div>

  <h2 class="section-title"><i>📊</i> Kết quả định lượng – So sánh KPI thực tế & quốc tế</h2>
  <div class="section-img-grid">
    <div class="img-card">
      <img src="output (44).png" alt="Biểu đồ đường-cột KPI">
      <div class="img-caption">So sánh hiệu quả sử dụng nước (KPI – cột & line)</div>
    </div>
    <div class="img-card">
      <img src="output (43).png" alt="Biểu đồ tròn KPI">
      <div class="img-caption">Tỷ lệ phân bổ sản lượng – Năng suất rau/cá</div>
    </div>
    <div class="img-card">
      <img src="output (42).png" alt="Radar KPI">
      <div class="img-caption">Biểu đồ radar đối sánh Aquaponics Bến Tre với quốc tế</div>
    </div>
  </div>
  <table class="kpi-table">
    <tr>
      <th>Tiêu chí</th>
      <th>Bến Tre (Pilot)</th>
      <th>Hệ Quốc tế</th>
    </tr>
    <tr>
      <td>Tiết kiệm nước</td>
      <td><b style="color:#0288d1">65–70%</b></td>
      <td>55–90%</td>
    </tr>
    <tr>
      <td>Năng suất rau</td>
      <td>22–25 kg/m²/năm</td>
      <td>18–25 kg/m²/năm</td>
    </tr>
    <tr>
      <td>Tự động hóa – IoT</td>
      <td>3/5</td>
      <td>4–5/5</td>
    </tr>
    <tr>
      <td>Khả năng vận hành</td>
      <td>60–70%</td>
      <td>70–80%</td>
    </tr>
    <tr>
      <td>Ứng dụng thực tế</td>
      <td>65–70%</td>
      <td>65–75%</td>
    </tr>
  </table>

  <h2 class="section-title"><i>📦</i> Thành phần Bộ KIT</h2>
  <table class="component-table">
    <tr>
      <th>STT</th><th>Tên Linh Kiện</th><th>SL</th>
    </tr>
    <tr><td>1</td><td>ESP32 IoT BLK Shield</td><td>1</td></tr>
    <tr><td>2</td><td>KIT Wi-Fi ESP-32 ESP-WROOM-32S</td><td>1</td></tr>
    <tr><td>3</td><td>Dây USB A-Micro 30cm</td><td>1</td></tr>
    <tr><td>4</td><td>Cảm biến độ ẩm đất (chống ăn mòn)</td><td>1</td></tr>
    <tr><td>5</td><td>Module DHT11</td><td>1</td></tr>
    <tr><td>6</td><td>Cảm biến siêu âm JSN-SR04T</td><td>1</td></tr>
    <tr><td>7</td><td>Relay mini 1 kênh 5V10A BLK</td><td>1</td></tr>
    <tr><td>8</td><td>Màn hình OLED 1.3&quot; 128x64 I2C</td><td>1</td></tr>
    <tr><td>9</td><td>Keypad 3x4 SMD</td><td>1</td></tr>
    <tr><td>10</td><td>Cảm biến bụi GP2Y1010AU0F</td><td>1</td></tr>
    <tr><td>11</td><td>Pin Lishen 2500mAh 5C</td><td>1</td></tr>
    <tr><td>12</td><td>Mạch nguồn UPS 5V1A tích hợp sạc pin</td><td>1</td></tr>
    <tr><td>13</td><td>Dây, jump, module Hall, phụ kiện...</td><td>...</td></tr>
  </table>

  <h2 class="section-title"><i>📂</i> Tài liệu & Demo (Click để xem)</h2>
  <ul class="features">
    <li><a class="file-link" onclick="openPopup('popup1')">Sổ tay hướng dẫn chi tiết (Aquaponics Bến Tre)</a></li>
    <li><a class="file-link" onclick="openPopup('popup2')">Sơ đồ mạch, layout đấu nối KIT</a></li>
    <li><a class="file-link" onclick="openPopup('popup3')">Thư viện & mã nguồn mẫu</a></li>
    <li><a class="file-link" onclick="openPopup('popup4')"> File in 3D mô hình, case thực tế </a></li>
    <li><a class="file-link" onclick="openPopup('popup5')">Slide PowerPoint, giải thích nguyên lý hoạt động & mở rộng IoT Aquaponics</a></li>
  </ul>

  <div class="note-box">
    <b>Liên hệ Chủ nhiệm Đề tài (trao đổi mô hình/đào tạo/hỗ trợ):</b><br>
    ThS. Ngô Hoàng Đại Long – Phân hiệu ĐHQG-HCM tại Bến Tre<br>
    Email: nhdlong@vnuhcm.edu.vn | ĐT: 0877 590 852
  </div>

</div>

<!-- POPUPS GIỮ NGUYÊN, CODE JS GIỮ NGUYÊN, FOOTER GIỮ NGUYÊN -->
<div id="popup1" class="popup-bg"><div class="popup-content"><button class="close-btn" onclick="closePopup('popup1')">Đóng</button>
    <h2>📘 Sổ tay hướng dẫn Aquaponics Bến Tre</h2>
    <p><b>File PDF/DOCX hướng dẫn chi tiết thực tế mô hình, vật tư, quy trình, lưu ý, kết quả pilot.</b><br>
      <i>(Bạn có thể gắn link download, chèn nội dung file hoặc hình ảnh trang sổ tay vào đây.)</i></p></div></div>
<div id="popup2" class="popup-bg"><div class="popup-content"><button class="close-btn" onclick="closePopup('popup2')">Đóng</button>
    <h2>🔌 Sơ đồ mạch – Layout KIT</h2>
    <p>Minh họa sơ đồ tổng thể: ESP32, cảm biến, OLED, relay, đấu nối thực tế.<br>
    <i>(Chèn ảnh sơ đồ Fritzing, SVG hoặc PDF wiring tại đây.)</i></p></div></div>
<div id="popup3" class="popup-bg"><div class="popup-content"><button class="close-btn" onclick="closePopup('popup3')">Đóng</button>
    <h2>💻 Thư viện – Mã nguồn mẫu</h2>
    <p>Chia sẻ file .zip/.ino, code demo: đọc cảm biến, gửi Blynk, điều khiển bơm, cấu hình webserver...<br>
    <i>(Gắn link code GitHub, hoặc hiển thị đoạn code mẫu tại đây.)</i></p></div></div>
<div id="popup4" class="popup-bg"><div class="popup-content"><button class="close-btn" onclick="closePopup('popup4')">Đóng</button>
    <h2>🖨️ File in 3D mô hình</h2>
    <p>File STL/OBJ cho vỏ hộp mạch, case bể mini, giá treo, layout pilot.<br>
    <i>(Gắn link https://huggingface.co/spaces/CVNSS/3DAqua hoặc ảnh mô hình in 3D thực tế.)</i></p></div></div>
<div id="popup5" class="popup-bg"><div class="popup-content"><button class="close-btn" onclick="closePopup('popup5')">Đóng</button>
    <h2>📑 Slide PowerPoint – Giải thích nguyên lý & mở rộng hệ IoT</h2>
    <p>Slide PDF/PPTX mô tả chi tiết block diagram, luồng tín hiệu, nguyên lý tuần hoàn nước, cảnh báo IoT, mở rộng kết nối Blynk/AI.<br>
    <i>(Nhúng slide trực tuyến hoặc chèn ảnh/đường link tại đây.)</i></p></div></div>
<script>
function openPopup(id) { document.getElementById(id).style.display = "block"; }
function closePopup(id) { document.getElementById(id).style.display = "none"; }
window.onclick = function(event) {
  document.querySelectorAll('.popup-bg').forEach(function(bg){
    if (event.target === bg) bg.style.display = 'none';
  });
}
</script>
<div class="footer">
  © 2025 – Sản phẩm đề tài KHCN cấp ĐHQG-HCM | Mã số: C2023-54-01 | Bộ KIT IoT Aquaponics | All rights reserved
</div>
</body>
</html>