Post_harvest-storage_management_system

Sleeping

File size: 18,202 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Agricultural Storage Management System</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  <style>
    :root {
      --farm-primary: #5cb85c;
      --farm-primary-dark: #2d5016;
      --farm-primary-light: #c6e6a8;
      --farm-secondary: #f0f9e8;
      --farm-accent: #8cc152;
    }

    body {
      background-color: #f7f9f4;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .bg-farm { background-color: var(--farm-secondary); }
    .text-farm-dark { color: var(--farm-primary-dark); }
    .bg-farm-dark { background-color: var(--farm-primary-dark); }
    .bg-farm-light { background-color: var(--farm-primary-light); }
    .border-farm { border-color: var(--farm-accent); }

    .card {
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }

    .btn-farm {
      background-color: var(--farm-primary);
      color: white;
      border-radius: 8px;
      padding: 12px 24px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .btn-farm:hover {
      background-color: #4cae4c;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .form-control, .form-select {
      border-radius: 8px;
      padding: 10px 16px;
      border: 1px solid #ddd;
    }

    .form-control:focus, .form-select:focus {
      border-color: var(--farm-primary);
      box-shadow: 0 0 0 0.25rem rgba(92, 184, 92, 0.25);
    }

    .crop-entry {
      border-radius: 16px;
      border-left: 5px solid var(--farm-primary);
      transition: all 0.3s ease;
    }

    .crop-entry:hover {
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    .section-title {
      position: relative;
      padding-left: 20px;
    }

    .section-title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      height: 30px;
      background-color: var(--farm-primary);
      border-radius: 4px;
    }

    .analysis-container {
      background-color: white;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .analysis-content table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      margin: 20px 0;
      border-radius: 8px;
      overflow: hidden;
    }

    .analysis-content table th {
      background-color: var(--farm-primary);
      color: white;
      padding: 12px 15px;
      text-align: left;
    }

    .analysis-content table td {
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
    }

    .analysis-content table tr:nth-child(even) {
      background-color: #f9fcf7;
    }

    .loader {
      border: 5px solid #f3f3f3;
      border-top: 5px solid var(--farm-primary);
      border-radius: 50%;
      width: 60px;
      height: 60px;
      animation: spin 2s linear infinite;
      margin: 30px auto;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Card styles for analysis results */
    .crop-card {
      border-radius: 12px;
      border-left: 5px solid var(--farm-primary);
      margin-bottom: 20px;
      padding: 15px;
      background-color: white;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .crop-card h3 {
      color: var(--farm-primary-dark);
      border-bottom: 2px solid var(--farm-primary-light);
      padding-bottom: 8px;
      margin-bottom: 12px;
    }

    /* Custom table styles for analysis results */
    .info-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      border-radius: 8px;
      overflow: hidden;
    }

    .info-table th,
    .info-table td {
      padding: 10px;
      text-align: left;
    }

    .info-table th {
      background-color: var(--farm-primary-light);
      color: var(--farm-primary-dark);
    }

    .info-table tr:nth-child(even) {
      background-color: #f9fcf7;
    }
  </style>
</head>
<body>
  <div class="container mx-auto px-4 py-8">
    <header class="text-center mb-8 animate_animated animate_fadeIn">
      <div class="inline-block rounded-full bg-farm-light p-3 mb-4">
        <i class="fas fa-seedling text-farm-dark text-3xl"></i>
      </div>
      <h1 class="text-4xl font-bold text-farm-dark mb-2">Post Harvest Storage Management System</h1>
      <p class="text-xl text-gray-600">Optimize your post-harvest storage with AI-powered recommendations</p>
    </header>

    <div class="bg-white rounded-lg shadow-lg p-6 mb-8 animate_animated animate_fadeIn">
      <h2 class="text-2xl font-semibold text-farm-dark mb-6 section-title">
        <i class="fas fa-leaf mr-2"></i>Enter Your Crop Details
      </h2>

      <form id="storageForm" class="space-y-6">
        <div id="crops-container">
          <div class="crop-entry bg-farm-light p-4 rounded-lg mb-4">
            <div class="text-right mb-2">
              <span class="bg-white text-farm-dark px-3 py-1 rounded-full text-sm font-semibold">Crop #1</span>
            </div>
            <div class="row">
              <div class="col-md-3 mb-3">
                <label class="form-label font-semibold">Crop Name</label>
                <div class="input-group">
                  <span class="input-group-text"><i class="fas fa-seedling"></i></span>
                  <input type="text" class="form-control" name="crop_name_1" placeholder="e.g. Rice, Wheat" required>
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <label class="form-label font-semibold">Quantity</label>
                <div class="input-group">
                  <span class="input-group-text"><i class="fas fa-weight"></i></span>
                  <input type="number" class="form-control" name="crop_quantity_1" placeholder="Amount" required>
                </div>
              </div>
              <div class="col-md-2 mb-3">
                <label class="form-label font-semibold">Unit</label>
                <select class="form-select" name="crop_unit_1">
                  <option value="kg">Kilograms (kg)</option>
                  <option value="ton">Metric Tons</option>
                  <option value="bags">Bags</option>
                  <option value="crates">Crates</option>
                </select>
              </div>
              <div class="col-md-4 mb-3">
                <label class="form-label font-semibold">Harvest Date</label>
                <div class="input-group">
                  <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                  <input type="date" class="form-control" name="harvest_date_1" required>
                </div>
              </div>
            </div>
          </div>
        </div>

        <input type="hidden" id="crop_count" name="crop_count" value="1">

        <div class="text-center">
          <button type="button" id="addCropBtn" class="btn btn-outline-success">
            <i class="fas fa-plus-circle mr-1"></i> Add Another Crop
          </button>
        </div>

        <div class="border-t border-gray-300 my-6 pt-6">
          <h3 class="text-xl font-semibold text-farm-dark mb-4 section-title">
            <i class="fas fa-warehouse mr-2"></i>Warehouse Information
          </h3>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label font-semibold">Warehouse Size</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fas fa-ruler-combined"></i></span>
                <input type="number" class="form-control" name="warehouse_size" placeholder="Enter size" required>
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label font-semibold">Unit</label>
              <select class="form-select" name="warehouse_unit">
                <option value="sq_m">Square Meters</option>
                <option value="sq_ft">Square Feet</option>
                <option value="cubic_m">Cubic Meters</option>
                <option value="cubic_ft">Cubic Feet</option>
              </select>
            </div>
          </div>
        </div>

        <div class="border-t border-gray-300 my-6 pt-6">
          <h3 class="text-xl font-semibold text-farm-dark mb-4 section-title">
            <i class="fas fa-language mr-2"></i>Select Language
          </h3>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label font-semibold">Language</label>
              <select class="form-select" name="language">
                <option value="English">English</option>
                <option value="Hindi">Hindi</option>
                <option value="Marathi">Marathi</option>
                <option value="Telugu">Telugu</option>
                <option value="Urdu">Urdu</option>
                <option value="Malayalam">Malayalam</option>
              </select>
            </div>
          </div>
        </div>

        <div class="text-center">
          <button type="submit" class="btn btn-farm btn-lg px-6">
            <i class="fas fa-magic mr-2"></i>Generate Storage Plan
          </button>
        </div>
      </form>
    </div>

    <div id="analysis-section" class="bg-white rounded-lg shadow-lg p-6 mb-8 hidden">
      <h2 class="text-2xl font-semibold text-farm-dark mb-4 section-title">
        <i class="fas fa-chart-bar mr-2"></i>Your Storage Plan
      </h2>

      <div id="loader" class="loader"></div>

      <div id="analysis-content" class="analysis-container p-4 rounded hidden">
        <!-- Analysis content will be inserted here -->
      </div>
    </div>
  </div>

  <footer class="bg-farm-dark text-white py-4 text-center">
    <p>© 2025 Agricultural Storage Management System | Powered by Gemini AI</p>
  </footer>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
  <script>
    $(document).ready(function() {
      let cropCount = 1;

      // Add more crop inputs
      $("#addCropBtn").click(function() {
        cropCount++;
        $("#crop_count").val(cropCount);

        const newCrop = `
        <div class="crop-entry bg-farm-light p-4 rounded-lg mb-4 animate_animated animate_fadeIn">
          <div class="text-right mb-2">
            <span class="bg-white text-farm-dark px-3 py-1 rounded-full text-sm font-semibold">Crop #${cropCount}</span>
          </div>
          <div class="row">
            <div class="col-md-3 mb-3">
              <label class="form-label font-semibold">Crop Name</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fas fa-seedling"></i></span>
                <input type="text" class="form-control" name="crop_name_${cropCount}" placeholder="e.g. Rice, Wheat" required>
              </div>
            </div>
            <div class="col-md-3 mb-3">
              <label class="form-label font-semibold">Quantity</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fas fa-weight"></i></span>
                <input type="number" class="form-control" name="crop_quantity_${cropCount}" placeholder="Amount" required>
              </div>
            </div>
            <div class="col-md-2 mb-3">
              <label class="form-label font-semibold">Unit</label>
              <select class="form-select" name="crop_unit_${cropCount}">
                <option value="kg">Kilograms (kg)</option>
                <option value="ton">Metric Tons</option>
                <option value="bags">Bags</option>
                <option value="crates">Crates</option>
              </select>
            </div>
            <div class="col-md-4 mb-3">
              <label class="form-label font-semibold">Harvest Date</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                <input type="date" class="form-control" name="harvest_date_${cropCount}" required>
              </div>
            </div>
          </div>
          <button type="button" class="btn btn-outline-danger btn-sm mt-2 remove-crop">
            <i class="fas fa-trash mr-1"></i> Remove
          </button>
        </div>`;
        $("#crops-container").append(newCrop);
      });

      // Remove crop entry
      $(document).on("click", ".remove-crop", function() {
        $(this).closest(".crop-entry").remove();
        cropCount = $(".crop-entry").length;
        $("#crop_count").val(cropCount);
      });

      // Form submission
      $("#storageForm").submit(function(e) {
        e.preventDefault();

        $("#analysis-section").removeClass("hidden");
        $("#loader").show();
        $("#analysis-content").addClass("hidden");

        $('html, body').animate({
          scrollTop: $("#analysis-section").offset().top - 50
        }, 500);

        $.ajax({
          url: "/analyze",
          type: "POST",
          data: $(this).serialize(),
          success: function(response) {
            $("#loader").hide();
            if (response.success) {
              // Use marked.js to convert markdown to HTML
              const htmlContent = marked.parse(response.analysis);
              $("#analysis-content").html(htmlContent);
              $("#analysis-content").removeClass("hidden").addClass("animate_animated animate_fadeIn");

              // Apply custom formatting to generated content elements
              // Tables
              $("#analysis-content table").addClass("info-table my-4");

              // Headings
              $("#analysis-content h1").addClass("text-3xl text-farm-dark font-bold my-4");
              $("#analysis-content h2").addClass("text-2xl text-farm-dark font-bold my-3");
              $("#analysis-content h3").addClass("text-xl text-farm-dark font-semibold my-2");

              // Lists
              $("#analysis-content ul, #analysis-content ol").addClass("list-disc pl-6 my-3");

              // Blockquotes
              $("#analysis-content blockquote").addClass("border-l-4 border-farm pl-4 italic my-4 py-2");

              // Format any sections that look like cards
              $("#analysis-content h3").each(function() {
                // If this heading looks like a crop name, convert its containing section to a card
                const $heading = $(this);
                const $section = $('<div class="crop-card"></div>');

                // Collect all elements until the next h3
                let $content = $heading.nextUntil('h3');

                // Wrap the heading and content in the card
                $heading.wrap($section);
                if ($content.length) {
                  $heading.parent().append($content);
                }
              });

              // Add crop icons based on crop names
              $("#analysis-content .crop-card h3").each(function() {
                const cropName = $(this).text().toLowerCase();
                let icon = "🌾"; // Default icon

                // Assign specific icons based on common crop names
                if (cropName.includes("rice")) icon = "🌾";
                else if (cropName.includes("wheat")) icon = "🌾";
                else if (cropName.includes("corn") || cropName.includes("maize")) icon = "🌽";
                else if (cropName.includes("potato")) icon = "🥔";
                else if (cropName.includes("tomato")) icon = "🍅";
                else if (cropName.includes("onion")) icon = "🧅";
                else if (cropName.includes("garlic")) icon = "🧄";
                else if (cropName.includes("chili") || cropName.includes("pepper")) icon = "🌶";
                else if (cropName.includes("carrot")) icon = "🥕";
                else if (cropName.includes("bean")) icon = "🫘";
                else if (cropName.includes("apple")) icon = "🍎";
                else if (cropName.includes("banana")) icon = "🍌";
                else if (cropName.includes("orange") || cropName.includes("citrus")) icon = "🍊";
                else if (cropName.includes("grape")) icon = "🍇";
                else if (cropName.includes("strawberry")) icon = "🍓";
                else if (cropName.includes("watermelon")) icon = "🍉";
                else if (cropName.includes("pineapple")) icon = "🍍";
                else if (cropName.includes("coconut")) icon = "🥥";

                $(this).prepend(icon + " ");
              });

            } else {
              $("#analysis-content").html(`<div class="alert alert-danger p-4 rounded-lg">
                <i class="fas fa-exclamation-triangle mr-2"></i> Error: ${response.error}
              </div>`);
              $("#analysis-content").removeClass("hidden");
            }
          },
          error: function() {
            $("#loader").hide();
            $("#analysis-content").html(`<div class="alert alert-danger p-4 rounded-lg">
              <i class="fas fa-exclamation-triangle mr-2"></i> An error occurred while communicating with the server. Please try again.
            </div>`);
            $("#analysis-content").removeClass("hidden");
          }
        });
      });
    });
  </script>
</body>
</html>