Hugging Face's logo

Spaces:
Abder004
/
smartfarming
Running

App Files Community
1
Abder004 commited on
Commit
1a4e327
·
verified ·
1 Parent(s): 558fb33

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +899 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Smartfarming
3
- emoji: 🚀
4
- colorFrom: yellow
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: smartfarming
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,899 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AgriChain | Smart Farming 4.0</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
13
+
14
+ :root {
15
+ --primary: #10b981;
16
+ --secondary: #3b82f6;
17
+ --dark: #1f2937;
18
+ --light: #f9fafb;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Poppins', sans-serif;
23
+ background-color: #f8fafc;
24
+ }
25
+
26
+ .dashboard-card {
27
+ transition: all 0.3s ease;
28
+ border-left: 4px solid var(--primary);
29
+ }
30
+
31
+ .dashboard-card:hover {
32
+ transform: translateY(-5px);
33
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
34
+ }
35
+
36
+ .iot-node {
37
+ animation: pulse 2s infinite;
38
+ }
39
+
40
+ @keyframes pulse {
41
+ 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
42
+ 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
43
+ 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
44
+ }
45
+
46
+ .blockchain-block {
47
+ border-top: 3px solid var(--primary);
48
+ transition: all 0.3s ease;
49
+ }
50
+
51
+ .blockchain-block:hover {
52
+ transform: scale(1.02);
53
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
54
+ }
55
+
56
+ .ai-prediction-card {
57
+ background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
58
+ }
59
+
60
+ .sensor-grid {
61
+ display: grid;
62
+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
63
+ gap: 1rem;
64
+ }
65
+
66
+ .protocol-badge {
67
+ font-size: 0.7rem;
68
+ padding: 0.2rem 0.5rem;
69
+ border-radius: 1rem;
70
+ }
71
+ </style>
72
+ </head>
73
+ <body>
74
+ <div class="min-h-screen bg-gray-50">
75
+ <!-- Navigation -->
76
+ <nav class="bg-white shadow-sm">
77
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
78
+ <div class="flex justify-between h-16">
79
+ <div class="flex items-center">
80
+ <div class="flex-shrink-0 flex items-center">
81
+ <i class="fas fa-leaf text-emerald-500 text-2xl mr-2"></i>
82
+ <span class="text-xl font-bold text-gray-800">AgriChain</span>
83
+ </div>
84
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
85
+ <a href="#" class="border-emerald-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Dashboard</a>
86
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">IoT Network</a>
87
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">AI Predictions</a>
88
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Blockchain</a>
89
+ <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Settings</a>
90
+ </div>
91
+ </div>
92
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
93
+ <div class="relative">
94
+ <div class="flex space-x-4">
95
+ <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 relative">
96
+ <i class="fas fa-network-wired h-6 w-6"></i>
97
+ <span class="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-green-500 animate-ping"></span>
98
+ <span class="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-green-500"></span>
99
+ </button>
100
+ <button class="bg-white p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 relative">
101
+ <i class="fas fa-bell h-6 w-6"></i>
102
+ <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-500 text-white text-xs flex items-center justify-center">3</span>
103
+ </button>
104
+ <div class="ml-3 relative">
105
+ <div>
106
+ <button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500" id="user-menu-button">
107
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
108
+ </button>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ <div class="-mr-2 flex items-center sm:hidden">
115
+ <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-emerald-500" id="mobile-menu-button">
116
+ <i class="fas fa-bars"></i>
117
+ </button>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Mobile menu -->
123
+ <div class="sm:hidden hidden" id="mobile-menu">
124
+ <div class="pt-2 pb-3 space-y-1">
125
+ <a href="#" class="bg-emerald-50 border-emerald-500 text-emerald-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Dashboard</a>
126
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">IoT Network</a>
127
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">AI Predictions</a>
128
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Blockchain</a>
129
+ <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Settings</a>
130
+ </div>
131
+ <div class="pt-4 pb-3 border-t border-gray-200">
132
+ <div class="flex items-center px-4">
133
+ <div class="flex-shrink-0">
134
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
135
+ </div>
136
+ <div class="ml-3">
137
+ <div class="text-base font-medium text-gray-800">John Farmer</div>
138
+ <div class="text-sm font-medium text-gray-500">john@example.com</div>
139
+ </div>
140
+ <button class="ml-auto bg-white flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 relative">
141
+ <i class="fas fa-bell h-6 w-6"></i>
142
+ <span class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-500 text-white text-xs flex items-center justify-center">3</span>
143
+ </button>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </nav>
148
+
149
+ <!-- Main Content -->
150
+ <main class="py-6 px-4 sm:px-6 lg:px-8">
151
+ <!-- Header -->
152
+ <div class="mb-6 flex justify-between items-center">
153
+ <div>
154
+ <h1 class="text-2xl font-bold text-gray-900">Smart Farming 4.0 Dashboard</h1>
155
+ <p class="mt-1 text-sm text-gray-500">Eco-efficient IoT networks with AI predictions and blockchain security</p>
156
+ </div>
157
+ <div class="flex space-x-3">
158
+ <button class="px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-md hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 flex items-center">
159
+ <i class="fas fa-sync-alt mr-2"></i> Refresh Data
160
+ </button>
161
+ <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 flex items-center">
162
+ <i class="fas fa-download mr-2"></i> Export
163
+ </button>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Farm Overview -->
168
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
169
+ <!-- IoT Network Status -->
170
+ <div class="bg-white rounded-lg shadow p-6">
171
+ <div class="flex justify-between items-center mb-4">
172
+ <h2 class="text-lg font-medium text-gray-900">IoT Network Status</h2>
173
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full flex items-center">
174
+ <span class="w-2 h-2 rounded-full bg-green-500 mr-1"></span> All Systems Operational
175
+ </span>
176
+ </div>
177
+ <div class="grid grid-cols-3 gap-4">
178
+ <div class="text-center">
179
+ <div class="mx-auto h-16 w-16 rounded-full bg-green-100 flex items-center justify-center mb-2">
180
+ <i class="fas fa-satellite-dish text-green-600 text-xl"></i>
181
+ </div>
182
+ <p class="text-sm text-gray-500">Nodes Online</p>
183
+ <p class="text-xl font-semibold text-gray-900">24/24</p>
184
+ </div>
185
+ <div class="text-center">
186
+ <div class="mx-auto h-16 w-16 rounded-full bg-blue-100 flex items-center justify-center mb-2">
187
+ <i class="fas fa-battery-three-quarters text-blue-600 text-xl"></i>
188
+ </div>
189
+ <p class="text-sm text-gray-500">Avg. Battery</p>
190
+ <p class="text-xl font-semibold text-gray-900">78%</p>
191
+ </div>
192
+ <div class="text-center">
193
+ <div class="mx-auto h-16 w-16 rounded-full bg-purple-100 flex items-center justify-center mb-2">
194
+ <i class="fas fa-signal text-purple-600 text-xl"></i>
195
+ </div>
196
+ <p class="text-sm text-gray-500">Signal Strength</p>
197
+ <p class="text-xl font-semibold text-gray-900">92%</p>
198
+ </div>
199
+ </div>
200
+ <div class="mt-4">
201
+ <div class="flex justify-between items-center mb-1">
202
+ <span class="text-sm font-medium text-gray-500">Data Transmission</span>
203
+ <span class="text-xs font-medium text-emerald-600">Eco Protocol v2.1</span>
204
+ </div>
205
+ <div class="w-full bg-gray-200 rounded-full h-2">
206
+ <div class="bg-emerald-500 h-2 rounded-full" style="width: 92%"></div>
207
+ </div>
208
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
209
+ <span>0.5 KB/day</span>
210
+ <span>Optimal</span>
211
+ <span>5 KB/day</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Blockchain Security -->
217
+ <div class="bg-white rounded-lg shadow p-6">
218
+ <div class="flex justify-between items-center mb-4">
219
+ <h2 class="text-lg font-medium text-gray-900">Blockchain Security</h2>
220
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full flex items-center">
221
+ <i class="fas fa-lock mr-1"></i> Secure
222
+ </span>
223
+ </div>
224
+ <div class="grid grid-cols-3 gap-4">
225
+ <div class="text-center">
226
+ <div class="mx-auto h-16 w-16 rounded-full bg-yellow-100 flex items-center justify-center mb-2">
227
+ <i class="fas fa-cube text-yellow-600 text-xl"></i>
228
+ </div>
229
+ <p class="text-sm text-gray-500">Blocks</p>
230
+ <p class="text-xl font-semibold text-gray-900">4,892</p>
231
+ </div>
232
+ <div class="text-center">
233
+ <div class="mx-auto h-16 w-16 rounded-full bg-indigo-100 flex items-center justify-center mb-2">
234
+ <i class="fas fa-link text-indigo-600 text-xl"></i>
235
+ </div>
236
+ <p class="text-sm text-gray-500">Last Hash</p>
237
+ <p class="text-xs font-mono text-gray-900 truncate">a3f8e2...</p>
238
+ </div>
239
+ <div class="text-center">
240
+ <div class="mx-auto h-16 w-16 rounded-full bg-red-100 flex items-center justify-center mb-2">
241
+ <i class="fas fa-shield-alt text-red-600 text-xl"></i>
242
+ </div>
243
+ <p class="text-sm text-gray-500">Integrity</p>
244
+ <p class="text-xl font-semibold text-gray-900">100%</p>
245
+ </div>
246
+ </div>
247
+ <div class="mt-4">
248
+ <div class="flex justify-between items-center mb-1">
249
+ <span class="text-sm font-medium text-gray-500">Data Encryption</span>
250
+ <span class="text-xs font-medium text-emerald-600">AES-256</span>
251
+ </div>
252
+ <div class="w-full bg-gray-200 rounded-full h-2">
253
+ <div class="bg-emerald-500 h-2 rounded-full" style="width: 100%"></div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+
258
+ <!-- AI Predictions -->
259
+ <div class="bg-white rounded-lg shadow p-6 ai-prediction-card">
260
+ <div class="flex justify-between items-center mb-4">
261
+ <h2 class="text-lg font-medium text-gray-900">AI Predictions</h2>
262
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full flex items-center">
263
+ <i class="fas fa-brain mr-1"></i> Active
264
+ </span>
265
+ </div>
266
+ <div class="space-y-3">
267
+ <div class="flex items-center">
268
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
269
+ <i class="fas fa-tint text-green-600"></i>
270
+ </div>
271
+ <div class="flex-1 min-w-0">
272
+ <p class="text-sm font-medium text-gray-900 truncate">Next Irrigation</p>
273
+ <p class="text-sm text-gray-500">Field A in 8 hours</p>
274
+ </div>
275
+ <div class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">92% accuracy</div>
276
+ </div>
277
+ <div class="flex items-center">
278
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3">
279
+ <i class="fas fa-bug text-yellow-600"></i>
280
+ </div>
281
+ <div class="flex-1 min-w-0">
282
+ <p class="text-sm font-medium text-gray-900 truncate">Pest Risk</p>
283
+ <p class="text-sm text-gray-500">Low (15%) in Field B</p>
284
+ </div>
285
+ <div class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">87% accuracy</div>
286
+ </div>
287
+ <div class="flex items-center">
288
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
289
+ <i class="fas fa-seedling text-purple-600"></i>
290
+ </div>
291
+ <div class="flex-1 min-w-0">
292
+ <p class="text-sm font-medium text-gray-900 truncate">Harvest Yield</p>
293
+ <p class="text-sm text-gray-500">+12% expected</p>
294
+ </div>
295
+ <div class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">85% accuracy</div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Detailed Sections -->
302
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
303
+ <!-- IoT Network Map -->
304
+ <div class="bg-white rounded-lg shadow p-6">
305
+ <div class="flex justify-between items-center mb-4">
306
+ <h2 class="text-lg font-medium text-gray-900">IoT Network Map</h2>
307
+ <div class="flex space-x-2">
308
+ <span class="protocol-badge bg-green-100 text-green-800">LoRaWAN</span>
309
+ <span class="protocol-badge bg-blue-100 text-blue-800">Zigbee</span>
310
+ <span class="protocol-badge bg-purple-100 text-purple-800">NB-IoT</span>
311
+ </div>
312
+ </div>
313
+ <div class="relative h-64 bg-gray-100 rounded-lg overflow-hidden mb-4">
314
+ <!-- Simulated farm map with IoT nodes -->
315
+ <div class="absolute inset-0 bg-gradient-to-br from-green-50 to-blue-50">
316
+ <!-- Fields -->
317
+ <div class="absolute top-10 left-10 w-24 h-32 bg-green-100 border-2 border-green-300 rounded-lg"></div>
318
+ <div class="absolute top-16 left-40 w-32 h-24 bg-green-100 border-2 border-green-300 rounded-lg"></div>
319
+ <div class="absolute bottom-16 right-20 w-28 h-20 bg-green-100 border-2 border-green-300 rounded-lg"></div>
320
+
321
+ <!-- IoT Nodes -->
322
+ <div class="iot-node absolute top-20 left-20 h-6 w-6 rounded-full bg-emerald-500 flex items-center justify-center text-white">
323
+ <i class="fas fa-water text-xs"></i>
324
+ </div>
325
+ <div class="iot-node absolute top-24 left-60 h-6 w-6 rounded-full bg-blue-500 flex items-center justify-center text-white">
326
+ <i class="fas fa-temperature-high text-xs"></i>
327
+ </div>
328
+ <div class="iot-node absolute bottom-24 right-32 h-6 w-6 rounded-full bg-purple-500 flex items-center justify-center text-white">
329
+ <i class="fas fa-wind text-xs"></i>
330
+ </div>
331
+ <div class="iot-node absolute bottom-32 left-32 h-6 w-6 rounded-full bg-yellow-500 flex items-center justify-center text-white">
332
+ <i class="fas fa-lightbulb text-xs"></i>
333
+ </div>
334
+
335
+ <!-- Gateway -->
336
+ <div class="absolute top-8 right-8 h-10 w-10 rounded-full bg-indigo-600 flex items-center justify-center text-white">
337
+ <i class="fas fa-wifi"></i>
338
+ </div>
339
+ </div>
340
+ </div>
341
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
342
+ <div class="text-center">
343
+ <span class="inline-block h-3 w-3 rounded-full bg-emerald-500"></span>
344
+ <span class="ml-1 text-xs text-gray-600">Moisture</span>
345
+ </div>
346
+ <div class="text-center">
347
+ <span class="inline-block h-3 w-3 rounded-full bg-blue-500"></span>
348
+ <span class="ml-1 text-xs text-gray-600">Temperature</span>
349
+ </div>
350
+ <div class="text-center">
351
+ <span class="inline-block h-3 w-3 rounded-full bg-purple-500"></span>
352
+ <span class="ml-1 text-xs text-gray-600">Humidity</span>
353
+ </div>
354
+ <div class="text-center">
355
+ <span class="inline-block h-3 w-3 rounded-full bg-yellow-500"></span>
356
+ <span class="ml-1 text-xs text-gray-600">Light</span>
357
+ </div>
358
+ </div>
359
+ <div class="mt-4">
360
+ <div class="flex justify-between items-center">
361
+ <span class="text-sm font-medium text-gray-600">Network Protocols Efficiency</span>
362
+ <span class="text-xs text-emerald-600">Eco Mode Active</span>
363
+ </div>
364
+ <div class="mt-2 space-y-2">
365
+ <div>
366
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
367
+ <span>LoRaWAN</span>
368
+ <span>0.8 KB/day</span>
369
+ </div>
370
+ <div class="w-full bg-gray-200 rounded-full h-2">
371
+ <div class="bg-green-500 h-2 rounded-full" style="width: 90%"></div>
372
+ </div>
373
+ </div>
374
+ <div>
375
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
376
+ <span>Zigbee</span>
377
+ <span>1.2 KB/day</span>
378
+ </div>
379
+ <div class="w-full bg-gray-200 rounded-full h-2">
380
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 85%"></div>
381
+ </div>
382
+ </div>
383
+ <div>
384
+ <div class="flex justify-between text-xs text-gray-500 mb-1">
385
+ <span>NB-IoT</span>
386
+ <span>0.5 KB/day</span>
387
+ </div>
388
+ <div class="w-full bg-gray-200 rounded-full h-2">
389
+ <div class="bg-purple-500 h-2 rounded-full" style="width: 95%"></div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- AI Prediction Analysis -->
397
+ <div class="bg-white rounded-lg shadow p-6">
398
+ <div class="flex justify-between items-center mb-4">
399
+ <h2 class="text-lg font-medium text-gray-900">AI Prediction Analysis</h2>
400
+ <div class="flex items-center">
401
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full mr-2">Model v3.2</span>
402
+ <button class="text-emerald-600 hover:text-emerald-800">
403
+ <i class="fas fa-cog"></i>
404
+ </button>
405
+ </div>
406
+ </div>
407
+ <div class="mb-4">
408
+ <div id="aiChart" class="h-48"></div>
409
+ </div>
410
+ <div class="space-y-3">
411
+ <div class="flex items-start">
412
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mr-3 mt-1">
413
+ <i class="fas fa-exclamation-triangle text-red-600"></i>
414
+ </div>
415
+ <div>
416
+ <p class="text-sm font-medium text-gray-900">Disease Detection</p>
417
+ <p class="text-sm text-gray-500">Early blight detected in 3 tomato plants with 89% confidence. Recommended treatment: Copper fungicide spray.</p>
418
+ </div>
419
+ </div>
420
+ <div class="flex items-start">
421
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1">
422
+ <i class="fas fa-tint text-blue-600"></i>
423
+ </div>
424
+ <div>
425
+ <p class="text-sm font-medium text-gray-900">Water Optimization</p>
426
+ <p class="text-sm text-gray-500">AI recommends reducing irrigation in Field B by 15% based on soil moisture forecasts.</p>
427
+ </div>
428
+ </div>
429
+ <div class="flex items-start">
430
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-yellow-100 flex items-center justify-center mr-3 mt-1">
431
+ <i class="fas fa-calendar-alt text-yellow-600"></i>
432
+ </div>
433
+ <div>
434
+ <p class="text-sm font-medium text-gray-900">Harvest Timing</p>
435
+ <p class="text-sm text-gray-500">Optimal harvest window predicted between July 15-18 for maximum yield and quality.</p>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- Blockchain Data Integrity -->
443
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
444
+ <div class="px-6 py-4 border-b border-gray-200">
445
+ <div class="flex justify-between items-center">
446
+ <h2 class="text-lg font-medium text-gray-900">Blockchain Data Integrity</h2>
447
+ <button class="px-3 py-1 text-xs bg-emerald-100 text-emerald-700 rounded-full flex items-center">
448
+ <i class="fas fa-plus mr-1"></i> New Block
449
+ </button>
450
+ </div>
451
+ </div>
452
+ <div class="divide-y divide-gray-200">
453
+ <div class="p-4 hover:bg-gray-50 blockchain-block">
454
+ <div class="flex items-center">
455
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
456
+ <i class="fas fa-cube text-indigo-600"></i>
457
+ </div>
458
+ <div class="flex-1 min-w-0">
459
+ <p class="text-sm font-medium text-gray-900 truncate">Block #4892</p>
460
+ <div class="flex items-center text-xs text-gray-500">
461
+ <span class="truncate mr-2">Hash: a3f8e2d4b5c71f9e8a0b6d5c4f3e2a1b</span>
462
+ <span class="flex-shrink-0">2 mins ago</span>
463
+ </div>
464
+ </div>
465
+ <div class="ml-4 flex-shrink-0">
466
+ <div class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Validated</div>
467
+ </div>
468
+ </div>
469
+ <div class="mt-2 ml-13 grid grid-cols-3 gap-2 text-xs">
470
+ <div class="bg-gray-100 p-1 rounded">
471
+ <p class="text-gray-500">Data Type</p>
472
+ <p class="font-medium">Soil Moisture</p>
473
+ </div>
474
+ <div class="bg-gray-100 p-1 rounded">
475
+ <p class="text-gray-500">Field</p>
476
+ <p class="font-medium">A</p>
477
+ </div>
478
+ <div class="bg-gray-100 p-1 rounded">
479
+ <p class="text-gray-500">Value</p>
480
+ <p class="font-medium">68%</p>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ <div class="p-4 hover:bg-gray-50 blockchain-block">
485
+ <div class="flex items-center">
486
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
487
+ <i class="fas fa-cube text-indigo-600"></i>
488
+ </div>
489
+ <div class="flex-1 min-w-0">
490
+ <p class="text-sm font-medium text-gray-900 truncate">Block #4891</p>
491
+ <div class="flex items-center text-xs text-gray-500">
492
+ <span class="truncate mr-2">Hash: b5c71f9e8a0b6d5c4f3e2a1ba3f8e2d</span>
493
+ <span class="flex-shrink-0">15 mins ago</span>
494
+ </div>
495
+ </div>
496
+ <div class="ml-4 flex-shrink-0">
497
+ <div class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Validated</div>
498
+ </div>
499
+ </div>
500
+ <div class="mt-2 ml-13 grid grid-cols-3 gap-2 text-xs">
501
+ <div class="bg-gray-100 p-1 rounded">
502
+ <p class="text-gray-500">Data Type</p>
503
+ <p class="font-medium">Temperature</p>
504
+ </div>
505
+ <div class="bg-gray-100 p-1 rounded">
506
+ <p class="text-gray-500">Field</p>
507
+ <p class="font-medium">B</p>
508
+ </div>
509
+ <div class="bg-gray-100 p-1 rounded">
510
+ <p class="text-gray-500">Value</p>
511
+ <p class="font-medium">24.5°C</p>
512
+ </div>
513
+ </div>
514
+ </div>
515
+ <div class="p-4 hover:bg-gray-50 blockchain-block">
516
+ <div class="flex items-center">
517
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
518
+ <i class="fas fa-cube text-indigo-600"></i>
519
+ </div>
520
+ <div class="flex-1 min-w-0">
521
+ <p class="text-sm font-medium text-gray-900 truncate">Block #4890</p>
522
+ <div class="flex items-center text-xs text-gray-500">
523
+ <span class="truncate mr-2">Hash: d4b5c71f9e8a0b6d5c4f3e2a1ba3f8e</span>
524
+ <span class="flex-shrink-0">32 mins ago</span>
525
+ </div>
526
+ </div>
527
+ <div class="ml-4 flex-shrink-0">
528
+ <div class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Validated</div>
529
+ </div>
530
+ </div>
531
+ <div class="mt-2 ml-13 grid grid-cols-3 gap-2 text-xs">
532
+ <div class="bg-gray-100 p-1 rounded">
533
+ <p class="text-gray-500">Data Type</p>
534
+ <p class="font-medium">Pest Alert</p>
535
+ </div>
536
+ <div class="bg-gray-100 p-1 rounded">
537
+ <p class="text-gray-500">Field</p>
538
+ <p class="font-medium">C</p>
539
+ </div>
540
+ <div class="bg-gray-100 p-1 rounded">
541
+ <p class="text-gray-500">Value</p>
542
+ <p class="font-medium">Corn Borer</p>
543
+ </div>
544
+ </div>
545
+ </div>
546
+ </div>
547
+ <div class="px-6 py-3 bg-gray-50 text-right">
548
+ <button class="text-sm font-medium text-emerald-600 hover:text-emerald-500">View all blocks</button>
549
+ </div>
550
+ </div>
551
+
552
+ <!-- Real-time Sensor Data -->
553
+ <div class="bg-white rounded-lg shadow p-6 mb-6">
554
+ <div class="flex justify-between items-center mb-4">
555
+ <h2 class="text-lg font-medium text-gray-900">Real-time Sensor Data</h2>
556
+ <div class="flex items-center">
557
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full mr-2">Live</span>
558
+ <span class="text-xs text-gray-500">Updated: <span id="updateTime">Just now</span></span>
559
+ </div>
560
+ </div>
561
+ <div class="sensor-grid">
562
+ <div class="bg-gray-50 p-3 rounded-lg">
563
+ <div class="flex justify-between items-start">
564
+ <div>
565
+ <p class="text-xs text-gray-500">Soil Moisture</p>
566
+ <p class="text-xl font-semibold"><span id="soilMoisture">72</span>%</p>
567
+ </div>
568
+ <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
569
+ <i class="fas fa-tint text-green-600 text-sm"></i>
570
+ </div>
571
+ </div>
572
+ <div class="mt-2">
573
+ <div class="w-full bg-gray-200 rounded-full h-1">
574
+ <div class="bg-green-500 h-1 rounded-full" style="width: 72%"></div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ <div class="bg-gray-50 p-3 rounded-lg">
579
+ <div class="flex justify-between items-start">
580
+ <div>
581
+ <p class="text-xs text-gray-500">Temperature</p>
582
+ <p class="text-xl font-semibold"><span id="temperature">24.5</span>°C</p>
583
+ </div>
584
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
585
+ <i class="fas fa-temperature-high text-blue-600 text-sm"></i>
586
+ </div>
587
+ </div>
588
+ <div class="mt-2">
589
+ <div class="w-full bg-gray-200 rounded-full h-1">
590
+ <div class="bg-blue-500 h-1 rounded-full" style="width: 65%"></div>
591
+ </div>
592
+ </div>
593
+ </div>
594
+ <div class="bg-gray-50 p-3 rounded-lg">
595
+ <div class="flex justify-between items-start">
596
+ <div>
597
+ <p class="text-xs text-gray-500">Humidity</p>
598
+ <p class="text-xl font-semibold"><span id="humidity">65</span>%</p>
599
+ </div>
600
+ <div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center">
601
+ <i class="fas fa-wind text-purple-600 text-sm"></i>
602
+ </div>
603
+ </div>
604
+ <div class="mt-2">
605
+ <div class="w-full bg-gray-200 rounded-full h-1">
606
+ <div class="bg-purple-500 h-1 rounded-full" style="width: 65%"></div>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ <div class="bg-gray-50 p-3 rounded-lg">
611
+ <div class="flex justify-between items-start">
612
+ <div>
613
+ <p class="text-xs text-gray-500">Light Intensity</p>
614
+ <p class="text-xl font-semibold"><span id="lightIntensity">850</span> lux</p>
615
+ </div>
616
+ <div class="h-8 w-8 rounded-full bg-yellow-100 flex items-center justify-center">
617
+ <i class="fas fa-sun text-yellow-600 text-sm"></i>
618
+ </div>
619
+ </div>
620
+ <div class="mt-2">
621
+ <div class="w-full bg-gray-200 rounded-full h-1">
622
+ <div class="bg-yellow-500 h-1 rounded-full" style="width: 75%"></div>
623
+ </div>
624
+ </div>
625
+ </div>
626
+ <div class="bg-gray-50 p-3 rounded-lg">
627
+ <div class="flex justify-between items-start">
628
+ <div>
629
+ <p class="text-xs text-gray-500">pH Level</p>
630
+ <p class="text-xl font-semibold"><span id="phLevel">6.8</span></p>
631
+ </div>
632
+ <div class="h-8 w-8 rounded-full bg-pink-100 flex items-center justify-center">
633
+ <i class="fas fa-flask text-pink-600 text-sm"></i>
634
+ </div>
635
+ </div>
636
+ <div class="mt-2">
637
+ <div class="w-full bg-gray-200 rounded-full h-1">
638
+ <div class="bg-pink-500 h-1 rounded-full" style="width: 80%"></div>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ <div class="bg-gray-50 p-3 rounded-lg">
643
+ <div class="flex justify-between items-start">
644
+ <div>
645
+ <p class="text-xs text-gray-500">CO2 Level</p>
646
+ <p class="text-xl font-semibold"><span id="co2Level">420</span> ppm</p>
647
+ </div>
648
+ <div class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center">
649
+ <i class="fas fa-cloud text-indigo-600 text-sm"></i>
650
+ </div>
651
+ </div>
652
+ <div class="mt-2">
653
+ <div class="w-full bg-gray-200 rounded-full h-1">
654
+ <div class="bg-indigo-500 h-1 rounded-full" style="width: 55%"></div>
655
+ </div>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+
661
+ <!-- Cloud Integration -->
662
+ <div class="bg-white rounded-lg shadow p-6">
663
+ <div class="flex justify-between items-center mb-4">
664
+ <h2 class="text-lg font-medium text-gray-900">Cloud Platform Integration</h2>
665
+ <div class="flex space-x-2">
666
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">AWS IoT</span>
667
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Azure</span>
668
+ <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded-full">Google Cloud</span>
669
+ </div>
670
+ </div>
671
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
672
+ <div class="bg-gray-50 p-4 rounded-lg">
673
+ <div class="flex items-center mb-3">
674
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
675
+ <i class="fab fa-aws text-blue-600"></i>
676
+ </div>
677
+ <div>
678
+ <p class="font-medium">AWS IoT Core</p>
679
+ <p class="text-xs text-gray-500">Connected</p>
680
+ </div>
681
+ </div>
682
+ <div class="text-xs space-y-2">
683
+ <div class="flex justify-between">
684
+ <span>Messages</span>
685
+ <span class="font-medium">1,248/day</span>
686
+ </div>
687
+ <div class="flex justify-between">
688
+ <span>Storage</span>
689
+ <span class="font-medium">2.8 GB</span>
690
+ </div>
691
+ <div class="flex justify-between">
692
+ <span>Rules Processed</span>
693
+ <span class="font-medium">56</span>
694
+ </div>
695
+ </div>
696
+ </div>
697
+ <div class="bg-gray-50 p-4 rounded-lg">
698
+ <div class="flex items-center mb-3">
699
+ <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
700
+ <i class="fas fa-database text-green-600"></i>
701
+ </div>
702
+ <div>
703
+ <p class="font-medium">Azure Data Lake</p>
704
+ <p class="text-xs text-gray-500">Syncing</p>
705
+ </div>
706
+ </div>
707
+ <div class="text-xs space-y-2">
708
+ <div class="flex justify-between">
709
+ <span>Data Stored</span>
710
+ <span class="font-medium">4.2 TB</span>
711
+ </div>
712
+ <div class="flex justify-between">
713
+ <span>Last Sync</span>
714
+ <span class="font-medium">2 mins ago</span>
715
+ </div>
716
+ <div class="flex justify-between">
717
+ <span>Analytics Jobs</span>
718
+ <span class="font-medium">12 active</span>
719
+ </div>
720
+ </div>
721
+ </div>
722
+ <div class="bg-gray-50 p-4 rounded-lg">
723
+ <div class="flex items-center mb-3">
724
+ <div class="h-10 w-10 rounded-full bg-red-100 flex items-center justify-center mr-3">
725
+ <i class="fab fa-google text-red-600"></i>
726
+ </div>
727
+ <div>
728
+ <p class="font-medium">BigQuery</p>
729
+ <p class="text-xs text-gray-500">Processing</p>
730
+ </div>
731
+ </div>
732
+ <div class="text-xs space-y-2">
733
+ <div class="flex justify-between">
734
+ <span>Queries</span>
735
+ <span class="font-medium">84/day</span>
736
+ </div>
737
+ <div class="flex justify-between">
738
+ <span>ML Models</span>
739
+ <span class="font-medium">3 active</span>
740
+ </div>
741
+ <div class="flex justify-between">
742
+ <span>Storage</span>
743
+ <span class="font-medium">1.5 TB</span>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ <div class="mt-4 pt-4 border-t border-gray-200">
749
+ <div class="flex justify-between items-center">
750
+ <p class="text-sm text-gray-600">Data interoperability across platforms with unified schema</p>
751
+ <button class="text-sm font-medium text-emerald-600 hover:text-emerald-500">View integration details</button>
752
+ </div>
753
+ </div>
754
+ </div>
755
+ </main>
756
+ </div>
757
+
758
+ <script>
759
+ // Mobile menu toggle
760
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
761
+ const mobileMenu = document.getElementById('mobile-menu');
762
+
763
+ mobileMenuButton.addEventListener('click', () => {
764
+ mobileMenu.classList.toggle('hidden');
765
+ });
766
+
767
+ // Initialize AI Prediction Chart
768
+ const aiChartOptions = {
769
+ series: [{
770
+ name: 'Irrigation Prediction',
771
+ data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
772
+ }, {
773
+ name: 'Actual Usage',
774
+ data: [35, 38, 33, 48, 52, 58, 65, 89, 120]
775
+ }],
776
+ chart: {
777
+ height: '100%',
778
+ type: 'line',
779
+ toolbar: {
780
+ show: false
781
+ }
782
+ },
783
+ colors: ['#10B981', '#3B82F6'],
784
+ dataLabels: {
785
+ enabled: false
786
+ },
787
+ stroke: {
788
+ curve: 'smooth',
789
+ width: [3, 3]
790
+ },
791
+ xaxis: {
792
+ categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
793
+ },
794
+ tooltip: {
795
+ y: {
796
+ formatter: function (val) {
797
+ return val + " liters"
798
+ }
799
+ }
800
+ },
801
+ legend: {
802
+ position: 'top'
803
+ }
804
+ };
805
+
806
+ const aiChart = new ApexCharts(document.querySelector("#aiChart"), aiChartOptions);
807
+ aiChart.render();
808
+
809
+ // Simulate real-time data updates
810
+ function updateSensorData() {
811
+ const now = new Date();
812
+ document.getElementById('updateTime').textContent = now.toLocaleTimeString();
813
+
814
+ // Update sensor values randomly for demo purposes
815
+ const sensors = {
816
+ soilMoisture: { min: 65, max: 75, unit: '%' },
817
+ temperature: { min: 22, max: 26, unit: '°C', decimals: 1 },
818
+ humidity: { min: 60, max: 70, unit: '%' },
819
+ lightIntensity: { min: 800, max: 900, unit: ' lux' },
820
+ phLevel: { min: 6.5, max: 7.0, unit: '', decimals: 1 },
821
+ co2Level: { min: 400, max: 450, unit: ' ppm' }
822
+ };
823
+
824
+ for (const [id, config] of Object.entries(sensors)) {
825
+ const element = document.getElementById(id);
826
+ const value = (Math.random() * (config.max - config.min) + config.min).toFixed(config.decimals || 0);
827
+ element.textContent = value;
828
+
829
+ // Update progress bar
830
+ const progress = ((value - config.min) / (config.max - config.min)) * 100;
831
+ const progressBar = element.closest('.bg-gray-50').querySelector('.bg-gray-200 div');
832
+ progressBar.style.width = `${progress}%`;
833
+ }
834
+ }
835
+
836
+ // Initial update
837
+ updateSensorData();
838
+
839
+ // Update every 5 seconds
840
+ setInterval(updateSensorData, 5000);
841
+
842
+ // Simulate blockchain updates
843
+ function addNewBlock() {
844
+ const blocksContainer = document.querySelector('.blockchain-block').parentNode;
845
+ const firstBlock = blocksContainer.firstElementChild;
846
+
847
+ const newBlock = firstBlock.cloneNode(true);
848
+
849
+ // Update block data
850
+ const blockNumber = newBlock.querySelector('.text-gray-900');
851
+ const blockHash = newBlock.querySelector('.text-gray-500 span');
852
+ const timeAgo = newBlock.querySelector('.text-gray-500 span:last-child');
853
+ const dataType = newBlock.querySelector('.grid div:nth-child(1) p:last-child');
854
+ const field = newBlock.querySelector('.grid div:nth-child(2) p:last-child');
855
+ const value = newBlock.querySelector('.grid div:nth-child(3) p:last-child');
856
+
857
+ const blockNum = parseInt(blockNumber.textContent.match(/\d+/)[0]) + 1;
858
+ blockNumber.textContent = `Block #${blockNum}`;
859
+
860
+ // Generate random hash
861
+ const hash = Math.random().toString(36).substring(2, 10) + Math.random().toString(36).substring(2, 10);
862
+ blockHash.textContent = `Hash: ${hash}...`;
863
+
864
+ timeAgo.textContent = 'Just now';
865
+
866
+ // Random data
867
+ const dataTypes = ['Soil Moisture', 'Temperature', 'Humidity', 'Light', 'pH Level', 'CO2 Level'];
868
+ const fields = ['A', 'B', 'C', 'Greenhouse'];
869
+ const values = {
870
+ 'Soil Moisture': { unit: '%', min: 60, max: 75 },
871
+ 'Temperature': { unit: '°C', min: 20, max: 28 },
872
+ 'Humidity': { unit: '%', min: 55, max: 75 },
873
+ 'Light': { unit: ' lux', min: 750, max: 900 },
874
+ 'pH Level': { unit: '', min: 6.5, max: 7.0, decimals: 1 },
875
+ 'CO2 Level': { unit: ' ppm', min: 400, max: 450 }
876
+ };
877
+
878
+ const randomType = dataTypes[Math.floor(Math.random() * dataTypes.length)];
879
+ const randomField = fields[Math.floor(Math.random() * fields.length)];
880
+ const randomValue = (Math.random() * (values[randomType].max - values[randomType].min) + values[randomType].min).toFixed(values[randomType].decimals || 0);
881
+
882
+ dataType.textContent = randomType;
883
+ field.textContent = randomField;
884
+ value.textContent = randomValue + values[randomType].unit;
885
+
886
+ // Insert at the top
887
+ blocksContainer.insertBefore(newBlock, firstBlock);
888
+
889
+ // Remove last block if more than 3
890
+ if (blocksContainer.children.length > 3) {
891
+ blocksContainer.removeChild(blocksContainer.lastElementChild);
892
+ }
893
+ }
894
+
895
+ // Add new block every 30 seconds
896
+ setInterval(addNewBlock, 30000);
897
+ </script>
898
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Abder004/smartfarming" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
899
+ </html>