Upload 30 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+static/backgrnd.jpg filter=lfs diff=lfs merge=lfs -text

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

.idea/misc.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Black">
+    <option name="sdkName" value="Python 3.11 (pythonProject)" />
+  </component>
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.11 (pythonProject)" project-jdk-type="Python SDK" />
+  <component name="PyCharmProfessionalAdvertiser">
+    <option name="shown" value="true" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/pythonProject.iml" filepath="$PROJECT_DIR$/.idea/pythonProject.iml" />
+    </modules>
+  </component>
+</project>

.idea/pythonProject.iml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/venv" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/workspace.xml

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AutoImportSettings">
+    <option name="autoReloadType" value="SELECTIVE" />
+  </component>
+  <component name="ChangeListManager">
+    <list default="true" id="493841b9-08f3-4b64-b579-c7b98f001729" name="Changes" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="HTML File" />
+      </list>
+    </option>
+  </component>
+  <component name="ProjectColorInfo">{
+  &quot;associatedIndex&quot;: 3
+}</component>
+  <component name="ProjectId" id="2dIWWOAevy1AZn7m9dCU83K4U4H" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">{
+  &quot;keyToString&quot;: {
+    &quot;DefaultHtmlFileTemplate&quot;: &quot;HTML File&quot;,
+    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
+    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
+    &quot;last_opened_file_path&quot;: &quot;C:/Users/roshn/PycharmProjects/pythonProject/templates&quot;
+  }
+}</component>
+  <component name="RecentsManager">
+    <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\roshn\PycharmProjects\pythonProject\templates" />
+      <recent name="C:\Users\roshn\PycharmProjects\pythonProject\static" />
+      <recent name="C:\Users\roshn\PycharmProjects\pythonProject" />
+    </key>
+  </component>
+  <component name="RunManager">
+    <configuration name="app" type="PythonConfigurationType" factoryName="Python" nameIsGenerated="true">
+      <module name="pythonProject" />
+      <option name="INTERPRETER_OPTIONS" value="" />
+      <option name="PARENT_ENVS" value="true" />
+      <envs>
+        <env name="PYTHONUNBUFFERED" value="1" />
+      </envs>
+      <option name="SDK_HOME" value="" />
+      <option name="WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+      <option name="IS_MODULE_SDK" value="true" />
+      <option name="ADD_CONTENT_ROOTS" value="true" />
+      <option name="ADD_SOURCE_ROOTS" value="true" />
+      <option name="SCRIPT_NAME" value="C:\Users\roshn\PycharmProjects\pythonProject\app.py" />
+      <option name="PARAMETERS" value="" />
+      <option name="SHOW_COMMAND_LINE" value="false" />
+      <option name="EMULATE_TERMINAL" value="false" />
+      <option name="MODULE_MODE" value="false" />
+      <option name="REDIRECT_INPUT" value="false" />
+      <option name="INPUT_FILE" value="" />
+      <method v="2" />
+    </configuration>
+  </component>
+  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="493841b9-08f3-4b64-b579-c7b98f001729" name="Changes" comment="" />
+      <created>1709696103263</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1709696103263</updated>
+    </task>
+    <servers />
+  </component>
+</project>

app.py

@@ -0,0 +1,171 @@
+from flask import Flask, render_template, request, jsonify, send_from_directory
+import pymysql
+import matplotlib.pyplot as plt
+import io
+import base64
+from gtts import gTTS
+import os
+import random
+from ai71 import AI71
+
+app = Flask(__name__)
+db = pymysql.connect(host="localhost", user="root", password="1234", database="tea_farm")
+cursor = db.cursor()
+
+UPLOAD_FOLDER = 'uploads'
+OUTPUT_DIRECTORY = 'audio'
+if not os.path.exists(UPLOAD_FOLDER):
+    os.makedirs(UPLOAD_FOLDER)
+if not os.path.exists(OUTPUT_DIRECTORY):
+    os.makedirs(OUTPUT_DIRECTORY)
+
+# Text for pest and disease
+pest_text = '''tea mosquito bugs,to get rid,spray with neem oil and garlic,use sticky traps, and trap crops like castor . Expect results in 2 to 4 weeks.চা মশার বাগ, পরিত্রাণ পেতে, নিম তেল এবং রসুন দিয়ে স্প্রে করুন, আঠালো ফাঁদ ব্যবহার করুন এবং ক্যাস্টরের মতো ফসল ফাঁদ করুন। 2-4 সপ্তাহের মধ্যে ফলাফল আশা করুন।'''
+disease_text = '''Detected Disease: Brown Blight is a fungal disease To treat it spray a mix of baking soda, water and apply organic mulch to keep soil healthy.ব্রাউন ব্লাইট একটি ছত্রাকজনিত রোগের চিকিৎসার জন্য বেকিং সোডা, পানির মিশ্রণ স্প্রে করুন এবং মাটি সুস্থ রাখতে জৈব মালচ প্রয়োগ করুন'''
+
+@app.route('/home')
+def home():
+    return render_template('index.html')
+
+@app.route('/notification')
+def notification():
+    return render_template('notification.html')
+
+@app.route('/', methods=['GET', 'POST'])
+def upload_file():
+    pest_filename = None
+    disease_filename = None
+    pest_audio_file = "pest.mp3"
+    disease_audio_file = "disease.mp3"
+
+    if request.method == 'POST':
+        if 'pest_file' in request.files:
+            pest_file = request.files['pest_file']
+            if pest_file.filename != '':
+                pest_filename = pest_file.filename
+                pest_file.save(os.path.join(UPLOAD_FOLDER, pest_filename))
+                tts_pest = gTTS(text=pest_text, lang='en', slow=False)
+                tts_pest.save(os.path.join(OUTPUT_DIRECTORY, pest_audio_file))
+
+        if 'disease_file' in request.files:
+            disease_file = request.files['disease_file']
+            if disease_file.filename != '':
+                disease_filename = disease_file.filename
+                disease_file.save(os.path.join(UPLOAD_FOLDER, disease_filename))
+                tts_disease = gTTS(text=disease_text, lang='en', slow=False)
+                tts_disease.save(os.path.join(OUTPUT_DIRECTORY, disease_audio_file))
+
+    return render_template('index.html', pest_filename=pest_filename, disease_filename=disease_filename,
+                           pest_audio_file=pest_audio_file, disease_audio_file=disease_audio_file)
+
+AI71_API_KEY = "api71-api-20725a9d-46d6-4baf-9e26-abfca35ab242"
+@app.route('/chat', methods=['POST'])
+def chat():
+    message = request.json['message']
+    ai71 = AI71(AI71_API_KEY)
+    response = ""
+    for chunk in ai71.chat.completions.create(
+        model="tiiuae/falcon-180b-chat",
+        messages=[
+            {"role": "system", "content": "You are a helpful assistant for a farming system.Guide the user properly to increase the yield."},
+            {"role": "user", "content": message},
+        ],
+        stream=True,
+    ):
+        if chunk.choices[0].delta.content:
+            response += chunk.choices[0].delta.content
+    return jsonify({'response': response.replace('\n','<br>')})
+@app.route('/uploads/<filename>')
+def uploaded_file(filename):
+    return send_from_directory(UPLOAD_FOLDER, filename)
+
+@app.route('/audio/<filename>')
+def audio_file(filename):
+    return send_from_directory(OUTPUT_DIRECTORY, filename)
+
+@app.route('/sensors')
+def sensors():
+    # Fetch a random row from the database
+    cursor.execute("SELECT * FROM sensor_data ORDER BY RAND() LIMIT 1")
+    sensor_data = cursor.fetchone()
+
+    if sensor_data:
+        sensor_dict = {
+            'id': sensor_data[0],
+            'temperature': sensor_data[1],
+            'humidity': sensor_data[2],
+            'irValue': sensor_data[3],
+            'distance': sensor_data[4],
+            'timestamp': sensor_data[5]
+        }
+    else:
+        sensor_dict = {
+            'temperature': None,
+            'humidity': None,
+            'irValue': None,
+            'distance': None,
+            'timestamp': None
+        }
+
+    return render_template('sensors.html', sensor_data=sensor_dict)
+
+@app.route('/zones')
+def zones():
+    return render_template('zones.html')
+
+@app.route('/activity-log')
+def activity_log():
+
+    # Fetch data for IR value distribution plot
+    cursor.execute("SELECT ir_value FROM sensor_data")
+    ir_values = cursor.fetchall()
+    count_0 = ir_values.count((0,))
+    count_1 = ir_values.count((1,))
+    labels = ['Pest Swarm Detected', 'No Pest Swarm Detected']
+    sizes = [count_0, count_1]
+    plt.figure(figsize=(6, 6))
+    plt.pie(sizes, labels=labels, autopct='%1.1f%%')
+    plt.title('IR Value Distribution')
+    plt.axis('equal')
+    ir_buffer = io.BytesIO()
+    plt.savefig(ir_buffer, format='png')
+    ir_buffer.seek(0)
+    ir_plot_data = base64.b64encode(ir_buffer.getvalue()).decode('utf-8')
+    plt.close()
+
+    # Fetch data for average closeness of pests plot
+    cursor.execute("SELECT timestamp, distance FROM sensor_data WHERE distance < 500")
+    data = cursor.fetchall()
+    timestamps = [row[0] for row in data]
+    distances = [row[1] for row in data]
+    average_distance = sum(distances) / len(distances)
+    plt.figure(figsize=(10, 6))
+    plt.plot(timestamps, distances, marker='o', linestyle='-')
+    plt.xlabel('Timestamp')
+    plt.ylabel('Distance (cm)')
+    plt.title('Average Closeness of Pests over Time')
+    plt.xticks(rotation=45)
+    plt.grid(True)
+    distance_buffer = io.BytesIO()
+    plt.savefig(distance_buffer, format='png')
+    distance_buffer.seek(0)
+    distance_plot_data = base64.b64encode(distance_buffer.getvalue()).decode('utf-8')
+    plt.close()
+
+    return render_template('activity-log.html', ir_plot_data=ir_plot_data, distance_plot_data=distance_plot_data)
+
+@app.route('/sensor-data', methods=['POST'])
+def update_sensor_data():
+    data = request.get_json()
+    temperature = data.get('temperature')
+    humidity = data.get('humidity')
+    ir_value = data.get('irValue')
+    distance = data.get('distance')
+    sql = "INSERT INTO sensor_data (temperature, humidity, ir_value, distance) VALUES (%s, %s, %s, %s)"
+    val = (temperature, humidity, ir_value, distance)
+    cursor.execute(sql, val)
+    db.commit()
+    return jsonify(success=True)
+
+if __name__ == '__main__':
+    app.run(debug=True, host='0.0.0.0', port=5000)

code_flow

@@ -0,0 +1,15 @@
+digraph {
+	node [fillcolor=lightblue shape=box style=filled]
+	line0 [label="def example_function(x):"]
+	line1 [label="if x < 0:"]
+	line1 -> line2 [label=True]
+	line2 [label="return 'Negative'" shape=oval]
+	line2 -> line3
+	line3 [label="elif x == 0:"]
+	line3 -> line4 [label=True]
+	line4 [label="return 'Zero'" shape=oval]
+	line4 -> line5
+	line5 [label="else:"]
+	line5 -> line6 [label=True]
+	line6 [label="return 'Positive'" shape=oval]
+}

prasunethon.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Resource Consumption Monitor</title>
+  <style>
+    body {
+      font-family: 'Arial', sans-serif;
+      background-color: #f7f7f7;
+      margin: 0;
+      padding: 20px;
+      color: #333;
+    }
+    h1 {
+      text-align: center;
+      color: #4CAF50;
+      margin-bottom: 40px;
+    }
+    .resource-card {
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      transition: transform 0.2s ease;
+    }
+    .resource-card:hover {
+      transform: translateY(-5px);
+    }
+    .resource-card img {
+      width: 60px;
+      height: 60px;
+      margin-right: 20px;
+    }
+    .card-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    .card-title {
+      font-weight: bold;
+      font-size: 1.2em;
+      color: #333;
+      margin-bottom: 5px;
+    }
+    .data-value {
+      font-size: 1em;
+      color: #777;
+    }
+    .chart-container {
+      width: 50%;
+      max-width: 300px;
+    }
+  </style>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+</head>
+<body>
+  <h1>Resource Consumption</h1>
+  <div id="resource-cards"></div>
+
+  <script>
+    function fetchData() {
+      const resources = [
+        { name: "Electricity", icon: "path/to/electricity.png", yesterday: 20, predicted: 710, unit: "MU(Million Units)", data: [21,24,25,22.5,27,22, 33] },
+        { name: "Water", icon: "path/to/water.png", yesterday: 192, predicted: 3698, unit: "Million Liters", data: [198,193,215,206,214,200,219]},
+        { name: "Gas", icon: "path/to/gas.png", yesterday: 179, predicted: 4982, unit: "kilo m³", data: [175,176,174,177,175,147,190] },
+        { name: "Internet", icon: "path/to/internet.png", yesterday: 1.38, predicted: 34.9, unit: "PB", data: [1.22,1.38,1.24,1.24,1.36,1.35,2.78] },
+        { name: "Waste", icon: "path/to/waste.png", yesterday: 864, predicted: 21850, unit: "metric tons", data: [874,859,847,841,853,864,845] },
+        // Add more resources here with their details
+      ];
+
+      const resourceCards = document.getElementById("resource-cards");
+
+      resources.forEach((resource, index) => {
+        const card = document.createElement("div");
+        card.classList.add("resource-card");
+
+        const img = document.createElement("img");
+        img.src = resource.icon;
+        card.appendChild(img);
+
+        const cardContent = document.createElement("div");
+        cardContent.classList.add("card-content");
+
+        const title = document.createElement("h3");
+        title.classList.add("card-title");
+        title.textContent = resource.name;
+        cardContent.appendChild(title);
+
+        const yesterdayData = document.createElement("p");
+        yesterdayData.textContent = Yesterday: ${resource.yesterday} ${resource.unit};
+        cardContent.appendChild(yesterdayData);
+
+        const predictedData = document.createElement("p");
+        predictedData.textContent = Predicted (Next Month(July)): ${resource.predicted} ${resource.unit};
+        predictedData.classList.add("data-value");
+        cardContent.appendChild(predictedData);
+
+        card.appendChild(cardContent);
+
+        const chartContainer = document.createElement("div");
+        chartContainer.classList.add("chart-container");
+        const canvas = document.createElement("canvas");
+        canvas.id = chart-${index};
+        chartContainer.appendChild(canvas);
+        card.appendChild(chartContainer);
+
+        resourceCards.appendChild(card);
+
+        // Initialize the chart
+        const ctx = canvas.getContext('2d');
+        new Chart(ctx, {
+          type: 'line',
+          data: {
+            labels: ['Monday', 'Tuesday', 'wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+            datasets: [{
+              label: resource.name,
+              data: resource.data,
+              backgroundColor: 'rgba(75, 192, 192, 0.2)',
+              borderColor: 'rgba(75, 192, 192, 1)',
+              borderWidth: 1,
+              fill: true
+            }]
+          },
+          options: {
+            scales: {
+              y: {
+                beginAtZero: false
+              }
+            }
+          }
+        });
+      });
+    }
+
+    fetchData();
+  </script>
+</body>
+</html>

static/styles.css

@@ -0,0 +1,294 @@
+/* Farm Tech System */
+
+    *{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+
+      }
+
+      .body{
+        width: 100%;
+        padding: 50px;
+        background-image: url('tea-estate.jpg');
+      }
+
+
+      body {
+        background-image: url('tea-estate.jpg');
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        font-weight: bolder;
+        font-size: x-large;
+        height: 100vh;
+        color: #123C69;
+      }
+
+      header {
+        color: white;
+        padding: 8px ;
+        text-align: center;
+      }
+
+      .logo {
+        font-family: 'Poppins';
+        font-size: 24px;
+        text-align: center;
+      }
+
+      .navbar {
+        margin-top: 20px;
+      }
+
+      .nav-links {
+        list-style: none;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+      }
+
+      .nav-links li {
+        margin: 0 15px;
+      }
+
+      .nav-links a {
+        color:#AC3B61  ;
+        font-weight: bolder;
+        font-size: larger;
+        text-decoration: none;
+      }
+
+
+      h2 {
+        font-size: 24px;
+        margin-bottom: 10px;
+      }
+
+      p {
+        line-height: 1.6;
+
+      }
+
+
+
+
+      .nav-links li:hover a
+      {
+        background: rgb(255, 255, 255);
+        color: black;
+        padding: .25rem .5rem;
+        transition: all ease-in 300ms;
+        border-radius: 25px;
+
+      }
+
+      .animate-charcter
+      {
+        text-align: right;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-image: linear-gradient(
+          -225deg,
+          #231557 0%,
+          #44107a 29%,
+          #ff1361 67%,
+          #fff800 100%
+        );
+
+        background-size: auto auto;
+        background-clip: border-box;
+        background-size: 200% auto;
+        color: #AC3B61;
+        background-clip: text;
+        text-justify: transparent;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        animation: textclip 2s linear infinite;
+        display: inline-block ;
+            font-size: 80px;
+            font-family: Georgia, 'Times New Roman', Times, serif;
+            font-weight: bold;
+
+      }
+
+      @keyframes textclip {
+        to {
+          background-position: center;
+        }
+      };
+
+
+      *{
+        background-color: #eee2dc;
+        margin-bottom: 20px;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body{
+        align-items: center;
+        justify-content: center;
+      }
+
+      @keyframes scroll{
+        0%{
+            transform: translateX(0);
+        }
+        100%{
+            transform: translateX(calc(-250px * 7));
+        }
+      }
+
+      .slider{
+        height: 200px;
+        margin: auto;
+        overflow: hidden;
+        position: relative;
+        width: auto;
+        padding: 0 30px;
+      }
+
+      /* .slider::before, .slider::after {
+        content: '';
+        width: calc(50vw - 125px); /* Adjust the width for the desired padding */
+
+
+      *{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        font-family: Verdana, Geneva, Tahoma, sans-serif;
+      }
+
+      .container{
+         display: flex;
+         /* flex-direction: column; */
+         justify-content: center;
+         align-items: center;
+         text-align: center;
+         font-weight: bolder;
+         margin: 20px 20px 0 20px;
+         padding-top: 10%;
+      }
+
+      .container .heading{
+        width: 50%;
+        padding-bottom: 50px;
+      }
+
+      .container .heading h3{
+        font-size: 3em;
+        font-weight: bolder;
+        padding-bottom: 10px;
+        border-bottom: 3px solid #222;
+      }
+
+      .container .heading h3 span{
+        font-weight: 50;
+      }
+
+      .container .box{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .container .box .dream{
+        display: flex;
+        flex-direction: column;
+        width: 32.5%;
+      }
+
+      .container .box .dream img{
+        width: 100%;
+        padding-bottom: 15px;
+
+      }
+
+      /* @media only screen and (max-width: 769px){
+        .container .box{
+            flex-direction: column;
+        }
+      }
+
+      .container .box .dream{
+        width: 100%;
+      } */
+
+
+      /* Default styles for all devices */
+      .body {
+        font-size: 16px;
+      }
+
+      /* Tablet styles */
+      @media (max-width: 1024px) {
+        body {
+            font-size: 14px;
+        }
+      }
+
+      /* Mobile styles */
+      @media (max-width: 768px) {
+        body {
+            font-size: 12px;
+        }
+      }
+
+      /* Adjust the footer for mobile and tablet views */
+      @media only screen and (max-width: 768px) {
+        .footer {
+          width: 125%;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .contact {
+          text-align: left;
+          text-indent: 0;
+          margin: 10px 0;
+          font-size: x-small;
+        }
+
+        .contact h2{
+          text-align: left;
+          text-indent: 0;
+          margin: 10px 0;
+          font-size: x-small;
+
+        }
+
+        .iframe
+      {
+        width: 100%;
+        padding: 10px;
+      }
+
+        .contact p:first-child{
+
+          text-align: left;
+          text-indent: 0;
+          margin: 10px 0;
+          font-size: x-small;
+
+        }
+
+      .contact p:last-child{
+
+        text-align: left;
+          text-indent: 0;
+          margin: 10px 0;
+          font-size: x-small;
+      }
+
+        .developer {
+          text-align: right;
+          text-indent: 0;
+          margin: 10px 0;
+          font-size: x-small;
+        }
+
+        .footer {
+          width: 100vw !important;
+        }
+      }

templates/activity-log.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href='https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap' rel='stylesheet'>
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <title>Farm Tech System - Activity Log</title>
+  <style>
+    :root {
+      --primary-color: #2C5F2D;
+      --secondary-color: #97BC62;
+      --text-color: #333;
+      --background-color: rgba(255, 255, 255, 0.9);
+    }
+
+    body {
+      font-family: 'Poppins', sans-serif;
+      background-image: url('https://media.istockphoto.com/id/136546538/photo/tea-plantation.jpg?s=612x612&w=0&k=20&c=CMMc6rLPJTvuhwYhj2Q7XjNT4acTi5iUiAGnHsgOPkw=');
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-attachment: fixed;
+      color: var(--text-color);
+      margin: 0;
+      padding: 0;
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+      background-color: var(--background-color);
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+      border-radius: 10px;
+    }
+
+    .animate-charcter {
+      text-align: center;
+      background-image: linear-gradient(
+        -225deg,
+        #231557 0%,
+        #44107a 29%,
+        #ff1361 67%,
+        #fff800 100%
+      );
+      background-size: 200% auto;
+      color: #AC3B61;
+      background-clip: text;
+      text-fill-color: transparent;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: textclip 2s linear infinite;
+      font-size: 48px;
+      font-weight: bold;
+      margin-bottom: 20px;
+    }
+
+    @keyframes textclip {
+      to {
+        background-position: 200% center;
+      }
+    }
+
+    .navbar {
+      background-color: var(--primary-color);
+      padding: 10px 0;
+      margin-bottom: 20px;
+    }
+
+    .nav-links {
+      list-style: none;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+    }
+
+    .nav-links li {
+      margin: 0 15px;
+    }
+
+    .nav-links a {
+      color: white;
+      font-weight: bold;
+      font-size: 18px;
+      text-decoration: none;
+      transition: all 0.3s ease;
+    }
+
+    .nav-links li:hover a {
+      background: white;
+      color: var(--primary-color);
+      padding: 5px 10px;
+      border-radius: 25px;
+    }
+
+    h2 {
+      color: var(--primary-color);
+      font-size: 28px;
+      margin-top: 30px;
+      margin-bottom: 20px;
+    }
+
+    #welcome-section img {
+      max-width: 100%;
+      height: auto;
+      margin-bottom: 30px;
+      border-radius: 10px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    footer {
+      background-color: var(--primary-color);
+      color: white;
+      text-align: center;
+      padding: 20px 0;
+      margin-top: 40px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1 class="animate-charcter">Farm Tech System - Activity Log</h1>
+      <nav class="navbar">
+        <ul class="nav-links">
+          <li><a href="{{ url_for('home') }}"><i class="fas fa-home"></i> Dashboard</a></li>
+          <li><a href="sensors"><i class="fas fa-cogs"></i> Sensors</a></li>
+          <li><a href="zones"><i class="fas fa-envelope"></i> Zones</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <section id="welcome-section">
+      <h2>IR Value Distribution</h2>
+      <img src="data:image/png;base64,{{ ir_plot_data }}" alt="IR Value Distribution">
+
+      <h2>Average Closeness of Pests over Time</h2>
+      <img src="data:image/png;base64,{{ distance_plot_data }}" alt="Average Closeness of Pests over Time">
+    </section>
+  </div>
+
+  <footer>
+    <p>&copy; 2024 Farm Tech System. All rights reserved.</p>
+  </footer>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,387 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
+  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <title>Farm Tech System</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+    }
+    .container {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 20px;
+      text-align: center;
+    }
+    .column {
+      flex: 0 0 48%;
+      padding: 30px;
+      border: 1px solid #ccc;
+      box-shadow: 2px 2px 12px #aaa;
+      background-color: rgba(240, 240, 240, 0.7);
+    }
+    .attention {
+      background-color: #ffcccc;
+      padding: 10px;
+      border: 1px solid #ff6666;
+      margin-bottom: -200px;
+      text-align: center;
+      width: 48%;
+      box-sizing: border-box;
+      animation: blink 1s infinite;
+    }
+    @keyframes blink {
+      0% { background-color: #ffcccc; }
+      50% { background-color: #ff9999; }
+      100% { background-color: #ffcccc; }
+    }
+    @keyframes pulsate {
+      0% { opacity: 1; }
+      50% { opacity: 0.5; }
+      100% { opacity: 1; }
+    }
+    .attention p {
+      font-weight: bold;
+      color: #cc0000;
+      margin: 0;
+    }
+    .attention span {
+      color: blue;
+    }
+    .attention-left {
+      margin-right: 10px;
+    }
+    .attention-right {
+      margin-left: auto;
+    }
+    .live {
+      animation: pulsate 1s infinite;
+      color: red;
+      font-weight: bold;
+    }
+    .chatbot-icon, .voice-icon {
+      position: fixed;
+      bottom: 30px;
+      background-color: #AC3B61;
+      color: #fff;
+      border-radius: 50%;
+      width: 70px;
+      height: 70px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: transform 0.3s;
+      font-size: 24px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    }
+    .chatbot-icon {
+      right: 30px;
+    }
+    .voice-icon {
+      right: 110px;
+    }
+    .voice-active {
+      animation: pulse 1s infinite;
+    }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); }
+    }
+    .chatbox {
+      position: fixed;
+      bottom: 120px;
+      right: 30px;
+      width: 400px;
+      max-width: 90%;
+      height: 600px;
+      max-height: 80vh;
+      background: #fff;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+      border-radius: 20px;
+      display: none;
+      flex-direction: column;
+      overflow: hidden;
+    }
+    .chatbox-header {
+      padding: 15px;
+      font-size: 20px;
+      background: linear-gradient(45deg, #AC3B61, #8E2D4E);
+      color: white;
+      border-top-left-radius: 20px;
+      border-top-right-radius: 20px;
+    }
+    .chatbox-body {
+      height: calc(100% - 130px);
+      padding: 20px;
+      overflow-y: auto;
+      background-color: #f7f7f7;
+    }
+    .chatbox-footer {
+      padding: 15px;
+      background-color: white;
+      border-bottom-left-radius: 20px;
+      border-bottom-right-radius: 20px;
+      display: flex;
+      align-items: center;
+    }
+    .chatbox-footer input {
+      flex: 1;
+      padding: 12px;
+      border: 1px solid #ddd;
+      border-radius: 25px;
+      font-size: 16px;
+      margin-right: 10px;
+    }
+    .chatbox-footer button {
+      padding: 12px 20px;
+      background: linear-gradient(45deg, #AC3B61, #8E2D4E);
+      color: white;
+      border: none;
+      border-radius: 25px;
+      font-size: 16px;
+      cursor: pointer;
+      transition: background 0.3s ease;
+    }
+    .chatbox-footer button:hover {
+      background: linear-gradient(45deg, #8E2D4E, #AC3B61);
+    }
+    .message {
+      margin-bottom: 12px;
+      padding: 8px 12px;
+      border-radius: 16px;
+      max-width: 80%;
+      word-wrap: break-word;
+      animation: fadeIn 0.3s ease;
+      font-size: 14px; /* Reduced font size for chat messages */
+    }
+
+    .user-message {
+      background-color: #E1F5FE;
+      color: #0277BD;
+      margin-left: auto;
+    }
+    .bot-message {
+      background-color: #FFF3E0;
+      color: #E65100;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .typing-indicator {
+      display: inline-block;
+    }
+    .typing-indicator span {
+      display: inline-block;
+      animation: blink 1.4s infinite both;
+    }
+    .typing-indicator span:nth-child(2) {
+      animation-delay: .2s;
+    }
+    .typing-indicator span:nth-child(3) {
+      animation-delay: .4s;
+    }
+  </style>
+</head>
+<body>
+  <div class="body">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-12 text-center">
+          <h1 class="animate-charcter">Farm Tech System-Home</h1>
+        </div>
+      </div>
+    </div>
+    <header>
+      <nav class="navbar">
+        <ul class="nav-links">
+          <li><a href="sensors"><i class="fas fa-home"></i> Sensors</a></li>
+          <li><a href="zones"><i class="fas fa-cogs"></i> Zones</a></li>
+          <li><a href="activity-log"><i class="fas fa-envelope"></i> Activity Log</a></li>
+          <li><a href="notification"><i class="fas fa-bell"></i> Notifications</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <h1 style="text-align: center; color: white;">Test your crop health!!!</h1>
+
+      <p style="font-size: 20px; text-align: center; color: white;">
+        Temperature: 32°C, Humidity: 95%, Moisture: High (<span class="live">live</span>)
+      </p>
+
+      <div class="container">
+        <div class="attention attention-left">
+          <p>
+            Attention: This weather condition may lead to outbreak of <span>Tea mosquito bug</span> (Action Needed)
+          </p>
+        </div>
+        <div class="attention attention-right">
+          <p>
+            Attention: This weather condition may lead to outbreak of <span>Blister blight disease</span> (Action Needed)
+          </p>
+        </div>
+      </div>
+
+      <div class="container">
+        <div class="column">
+          <h2>Tea Crop Pest Detection</h2>
+          <form method="post" enctype="multipart/form-data">
+            <input type="file" name="pest_file" accept="image/*" required>
+            <br><br>
+            <input type="submit" value="Upload">
+          </form>
+          {% if pest_filename %}
+            <h3>Uploaded Photo:</h3>
+            <img src="{{ url_for('uploaded_file', filename=pest_filename) }}" alt="Uploaded Photo" style="max-width: 100%; height: auto;">
+            <h3>Detected Pest: <span>Tea mosquito bug</span></h3>
+            <p>Remedy:</p>
+            <ul>
+              <li>Spray neem oil on the affected areas.</li>
+              <li>Use yellow sticky traps to catch the bugs.</li>
+              <li>Plant trap crops like castor or sunflower to divert them away from tea plants.</li>
+            </ul>
+            <audio id="pest_audio" src="{{ url_for('audio_file', filename=pest_audio_file) }}" controls autoplay></audio>
+          {% endif %}
+        </div>
+        <div class="column">
+          <h2>Tea Crop Disease Detection</h2>
+          <form method="post" enctype="multipart/form-data">
+            <input type="file" name="disease_file" accept="image/*" required>
+            <br><br>
+            <input type="submit" value="Upload">
+          </form>
+          {% if disease_filename %}
+            <h3>Uploaded Photo:</h3>
+            <img src="{{ url_for('uploaded_file', filename=disease_filename) }}" alt="Uploaded Photo" style="max-width: 100%; height: auto;">
+            <h3>Detected Disease: <span>Brown Blight disease</span></h3>
+            <p>Remedy:</p>
+            <ul>
+              <li>Remove and destroy infected leaves.</li>
+              <li>Apply copper-based fungicides.</li>
+              <li>Ensure proper air circulation around the plants.</li>
+            </ul>
+            <audio id="disease_audio" src="{{ url_for('audio_file', filename=disease_audio_file) }}" controls autoplay></audio>
+          {% endif %}
+        </div>
+      </div>
+    </main>
+  </div>
+
+  <!-- Chatbot Icon -->
+  <div class="chatbot-icon" id="chatbotIcon">
+    <i class="fas fa-comments"></i>
+  </div>
+
+  <!-- Voice Icon -->
+  <div class="voice-icon" id="voiceIcon">
+    <i class="fas fa-microphone"></i>
+  </div>
+
+  <!-- Chatbox -->
+  <div class="chatbox" id="chatbox">
+    <div class="chatbox-header">Chat with AI</div>
+    <div class="chatbox-body" id="chatBody">
+      <!-- Chat content goes here -->
+    </div>
+    <div class="chatbox-footer">
+      <input type="text" placeholder="Type your message here..." id="chatInput">
+      <button id="sendButton">Send</button>
+    </div>
+  </div>
+
+  <script>
+    // JavaScript to handle the chatbot toggle
+    document.getElementById('chatbotIcon').addEventListener('click', function() {
+      var chatbox = document.getElementById('chatbox');
+      if (chatbox.style.display === 'none' || chatbox.style.display === '') {
+        chatbox.style.display = 'flex';
+      } else {
+        chatbox.style.display = 'none';
+      }
+    });
+
+    // JavaScript for voice recognition
+    var recognition;
+    if ('webkitSpeechRecognition' in window) {
+      recognition = new webkitSpeechRecognition();
+    } else if ('SpeechRecognition' in window) {
+      recognition = new SpeechRecognition();
+    } else {
+      alert('Your browser does not support speech recognition.');
+    }
+
+    if (recognition) {
+      recognition.continuous = false;
+      recognition.interimResults = false;
+
+      recognition.onstart = function() {
+        document.getElementById('voiceIcon').classList.add('voice-active');
+      };
+
+      recognition.onend = function() {
+        document.getElementById('voiceIcon').classList.remove('voice-active');
+      };
+
+      recognition.onresult = function(event) {
+        var transcript = event.results[0][0].transcript;
+        document.getElementById('chatInput').value = transcript;
+      };
+
+      document.getElementById('voiceIcon').addEventListener('click', function() {
+        recognition.start();
+      });
+    }
+
+    // Chat functionality
+    $(document).ready(function() {
+      $('#sendButton').click(sendMessage);
+      $('#chatInput').keypress(function(e) {
+        if (e.which == 13) {
+          sendMessage();
+        }
+      });
+
+      function sendMessage() {
+        var message = $('#chatInput').val();
+        if (message.trim() !== '') {
+          appendMessage('user', message);
+          $('#chatInput').val('');
+
+          // Show a typing indicator
+          appendMessage('bot', '<div class="typing-indicator">Typing<span>.</span><span>.</span><span>.</span></div>');
+
+          $.ajax({
+            url: '/chat',
+            method: 'POST',
+            contentType: 'application/json',
+            data: JSON.stringify({message: message}),
+            success: function(response) {
+              // Remove the typing indicator
+              $('.typing-indicator').parent().remove();
+              appendMessage('bot', response.response);
+            },
+            error: function() {
+              // Remove the typing indicator
+              $('.typing-indicator').parent().remove();
+              appendMessage('bot', 'Sorry, there was an error processing your request.');
+            }
+          });
+        }
+      }
+
+      function appendMessage(sender, message) {
+        var messageClass = sender === 'user' ? 'user-message' : 'bot-message';
+        $('#chatBody').append('<div class="message ' + messageClass + '">' + message + '</div>');
+        $('#chatBody').scrollTop($('#chatBody')[0].scrollHeight);
+      }
+    });
+  </script>
+</body>
+</html>

templates/sensors.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Farm Tech System - Sensors</title>
+  <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <style>
+    :root {
+      --dark-green: #2C5F2D;
+      --light-green: #97BC62;
+      --brown: #6A4028;
+      --cream: #F2E8CF;
+    }
+
+    body {
+      font-family: 'Open Sans', sans-serif;
+      background-color: var(--cream);
+      color: var(--brown);
+      margin: 0;
+      padding: 0;
+    }
+
+    .navbar {
+      background-color: var(--dark-green);
+      padding: 1rem;
+      position: fixed;
+      width: 100%;
+      top: 0;
+      z-index: 1000;
+    }
+
+    .nav-links {
+      list-style: none;
+      display: flex;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+    }
+
+    .nav-links li {
+      margin: 0 15px;
+    }
+
+    .nav-links a {
+      color: var(--cream);
+      text-decoration: none;
+      font-weight: bold;
+      transition: color 0.3s ease;
+    }
+
+    .nav-links a:hover {
+      color: var(--light-green);
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 80px auto 0;
+      padding: 2rem;
+    }
+
+    h1, h2, h3 {
+      font-family: 'Merriweather', serif;
+      color: var(--dark-green);
+    }
+
+    .sensor-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 2rem;
+      margin-top: 2rem;
+    }
+
+    .sensor-card {
+      background-color: white;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      padding: 1.5rem;
+      text-align: center;
+      transition: transform 0.3s ease;
+    }
+
+    .sensor-card:hover {
+      transform: translateY(-5px);
+    }
+
+    .sensor-icon {
+      font-size: 3rem;
+      color: var(--dark-green);
+      margin-bottom: 1rem;
+    }
+
+    .sensor-name {
+      font-weight: bold;
+      margin-bottom: 0.5rem;
+    }
+
+    .sensor-data {
+      font-size: 1.2rem;
+      color: var(--brown);
+    }
+
+    .timestamp {
+      text-align: center;
+      margin-top: 2rem;
+      font-style: italic;
+      color: var(--brown);
+    }
+  </style>
+</head>
+<body>
+    <!-- Navigation menu -->
+    <nav class="navbar">
+      <ul class="nav-links">
+        <li><a href="{{ url_for('home') }}"><i class="fas fa-home"></i> Dashboard</a></li>
+        <li><a href="{{ url_for('zones') }}"><i class="fas fa-cogs"></i> Zones</a></li>
+        <li><a href="{{ url_for('activity_log') }}"><i class="fas fa-envelope"></i> Activity Log</a></li>
+      </ul>
+    </nav>
+
+  <div class="container">
+    <h1>Farm Tech System - Sensors</h1>
+
+    <div class="sensor-grid">
+      <div class="sensor-card">
+        <i class="fas fa-wave-square sensor-icon"></i>
+        <p class="sensor-name">Ultrasonic Transducer</p>
+        <p class="sensor-data">Distance: {{ sensor_data.distance }} cm</p>
+      </div>
+      <div class="sensor-card">
+        <i class="fas fa-bug sensor-icon"></i>
+        <p class="sensor-name">IR Sensor</p>
+        <p class="sensor-data">Pest Swarm: {{ 'Detected' if sensor_data.irValue == 0 else 'Not Detected' }}</p>
+      </div>
+      <div class="sensor-card">
+        <i class="fas fa-thermometer-half sensor-icon"></i>
+        <p class="sensor-name">Environmental Sensor</p>
+        <p class="sensor-data">Temperature: {{ sensor_data.temperature }} &#8451;</p>
+        <p class="sensor-data">Humidity: {{ sensor_data.humidity }}%</p>
+      </div>
+      <div class="sensor-card">
+        <i class="fas fa-running sensor-icon"></i>
+        <p class="sensor-name">PIR Sensor</p>
+        <p class="sensor-data">Motion: {{ 'Detected' if sensor_data.irValue == 0 else 'Not Detected' }}</p>
+      </div>
+      <div class="sensor-card">
+        <i class="fas fa-lightbulb sensor-icon"></i>
+        <p class="sensor-name">UV Light (Sticky Trap)</p>
+        <p class="sensor-data">Status: Normal</p>
+      </div>
+    </div>
+
+    <div class="timestamp">
+      <p>Last updated: {{ sensor_data.timestamp }}</p>
+    </div>
+  </div>
+</body>
+</html>

templates/zones.html

@@ -0,0 +1,282 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Farm Tech System - Zones</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+  <style>
+    /* Added CSS styles */
+    .animate-charcter {
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-image: linear-gradient(
+        -225deg,
+        #231557 0%,
+        #44107a 29%,
+        #ff1361 67%,
+        #fff800 100%
+      );
+      background-size: auto auto;
+      background-clip: border-box;
+      background-size: 200% auto;
+      color: #AC3B61;
+      background-clip: text;
+      text-justify: transparent;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: textclip 2s linear infinite;
+      display: inline-block;
+      font-size: 80px;
+      font-family: Georgia, 'Times New Roman', Times, serif;
+      font-weight: bold;
+    }
+
+    @keyframes textclip {
+      to {
+        background-position: center;
+      }
+    }
+
+    * {
+      margin-bottom: 20px;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      align-items: center;
+      justify-content: center;
+      background: url('{{ url_for('static', filename='backgrnd.jpg') }}') no-repeat center center fixed;
+      background-size: cover;
+      color: #fff; /* Ensuring the text is readable on a dark background */
+    }
+
+    @keyframes scroll {
+      0% {
+        transform: translateX(0);
+      }
+      100% {
+        transform: translateX(calc(-250px * 7));
+      }
+    }
+
+    .slider {
+      height: 200px;
+      margin: auto;
+      overflow: hidden;
+      position: relative;
+      width: auto;
+      padding: 0 30px;
+    }
+
+    .logo {
+      font-family: 'Poppins';
+      font-size: 24px;
+      text-align: center;
+    }
+
+    .navbar {
+      margin-top: 20px;
+    }
+
+    .nav-links {
+      list-style: none;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+    }
+
+    .nav-links li {
+      margin: 0 15px;
+    }
+
+    .nav-links a {
+      color: #AC3B61;
+      font-weight: bolder;
+      font-size: larger;
+      text-decoration: none;
+    }
+
+    h2 {
+      font-size: 24px;
+      margin-bottom: 10px;
+    }
+
+    p {
+      line-height: 1.6;
+    }
+
+    .nav-links li:hover a {
+      background: rgb(255, 255, 255);
+      color: black;
+      padding: .25rem .5rem;
+      transition: all ease-in 300ms;
+      border-radius: 25px;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .box {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .dream {
+      text-align: center;
+    }
+
+    .dream .item {
+      margin: 10px;
+    }
+
+    .dream img {
+      display: block;
+      margin: 0 auto;
+    }
+
+    .dream .item p {
+      font-size: 20px; /* Increased font size */
+      color: red; /* Changed text color to red */
+      margin-top: 10px;
+    }
+
+    #map, #zoneMap {
+      height: 500px;
+      width: 80%;
+      margin: 20px auto;
+    }
+
+  </style>
+</head>
+<body>
+  <header>
+    <h1 class="animate-charcter">Farm Tech System - Zones</h1>
+    <!-- Navigation menu -->
+    <nav class="navbar">
+        <ul class="nav-links">
+          <li><a href="home"><i class="fas fa-home"></i> Home</a></li>
+          <li><a href="sensors"><i class="fas fa-sensors"></i> Sensors</a></li>
+          <li><a href="activity-log"><i class="fas fa-envelope"></i> Activity Log</a></li>
+
+        </ul>
+      </nav>
+  </header>
+
+  <!-- Zones content -->
+  <section>
+    <div id="map"></div>
+    <div id="zoneMap"></div>
+  </section>
+
+  <!-- Footer -->
+  <footer>
+    <!-- Footer content -->
+  </footer>
+
+  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+  <script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>
+  <script>
+    var map = L.map('map').setView([10.3269, 76.9512], 16); // Increased zoom level for closer view
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+
+    // Add a marker for the tea estate
+    L.marker([10.3269, 76.9512]).addTo(map)
+      .bindPopup('Tea Estate in Valparai Hills')
+      .openPopup();
+
+    // Define the coordinates of the boundary of the tea estate
+    var estateBoundary = [
+      [10.3275, 76.9500],
+      [10.3272, 76.9510],
+      [10.3270, 76.9520],
+      [10.3268, 76.9525],
+      [10.3265, 76.9527],
+      [10.3260, 76.9525],
+      [10.3255, 76.9520],
+      [10.3252, 76.9515],
+      [10.3250, 76.9510],
+      [10.3252, 76.9505],
+      [10.3255, 76.9500],
+      [10.3260, 76.9495],
+      [10.3265, 76.9492],
+      [10.3270, 76.9495]
+    ];
+
+    // Add the boundary as a polygon
+    L.polygon(estateBoundary, {color: 'red'}).addTo(map)
+      .bindPopup('Tea Estate Boundary');
+
+    // Add a heatmap layer
+    var heat = L.heatLayer([
+      [10.3269, 76.9512, 0.5],  // Example coordinates with intensity
+      [10.3270, 76.9520, 0.6],
+      [10.3280, 76.9530, 0.7]
+    ], {radius: 25}).addTo(map);
+
+    // Additional map for zones
+    var zoneMap = L.map('zoneMap').setView([10.3269, 76.9512], 16);
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(zoneMap);
+
+    // Define coordinates for zone boundaries
+    var zone1 = [
+      [10.3280, 76.9500],
+      [10.3280, 76.9515],
+      [10.3270, 76.9515],
+      [10.3270, 76.9500]
+    ];
+
+    var zone2 = [
+      [10.3280, 76.9515],
+      [10.3280, 76.9530],
+      [10.3270, 76.9530],
+      [10.3270, 76.9515]
+    ];
+
+    var zone3 = [
+      [10.3270, 76.9500],
+      [10.3270, 76.9515],
+      [10.3260, 76.9515],
+      [10.3260, 76.9500]
+    ];
+
+    var zone4 = [
+      [10.3270, 76.9515],
+      [10.3270, 76.9530],
+      [10.3260, 76.9530],
+      [10.3260, 76.9515]
+    ];
+
+    // Add zones as polygons
+    L.polygon(zone1, {color: 'blue'}).addTo(zoneMap).bindPopup('Zone 1');
+    L.polygon(zone2, {color: 'green'}).addTo(zoneMap).bindPopup('Zone 2');
+    L.polygon(zone3, {color: 'yellow'}).addTo(zoneMap).bindPopup('Zone 3');
+    L.polygon(zone4, {color: 'orange'}).addTo(zoneMap).bindPopup('Zone 4');
+
+    // Add heatmap layers for zones
+    var zoneHeatData = [
+      // Example heat data for each zone
+      [10.3275, 76.9505, 0.5],  // Zone 1
+      [10.3275, 76.9525, 0.6],  // Zone 2
+      [10.3265, 76.9505, 0.7],  // Zone 3
+      [10.3265, 76.9525, 0.8]   // Zone 4
+    ];
+
+    L.heatLayer(zoneHeatData, {radius: 25}).addTo(zoneMap);
+
+  </script>
+</body>
+</html>