Spaces:

roshnn24
/

Smart-AI-Agri-System

Sleeping

App Files Files Community

roshnn24 commited on Nov 5, 2024

Commit

14b6dbb

verified ·

1 Parent(s): 6d3ecaa

Upload 5 files

Browse files

Files changed (5) hide show

templates/activity-log.html +147 -0
templates/index.html +387 -0
templates/notification.html +0 -0
templates/sensors.html +159 -0
templates/zones.html +282 -0

templates/activity-log.html ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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/notification.html ADDED Viewed

The diff for this file is too large to render. See raw diff

templates/sensors.html ADDED Viewed

	@@ -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 ADDED Viewed

	@@ -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>