Hugging Face's logo

Spaces:
Tame342
/
let-see
Running

App Files Community
Tame342 commited on
Commit
9691370
·
verified ·
1 Parent(s): b2da3e0

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +655 -38
  2. prompts.txt +1 -0
index.html CHANGED
@@ -1,41 +1,658 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <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=Tame342/let-see" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </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>Livestock Weather Optimization System</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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#4F6F52',
15
+ secondary: '#739072',
16
+ accent: '#86A789',
17
+ light: '#D2E3C8',
18
+ dark: '#3A4D39'
19
+ }
20
+ }
21
+ }
22
+ }
23
+ </script>
24
  <style>
25
+ .weather-card {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .weather-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
31
+ }
32
+ .livestock-health {
33
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
34
+ }
35
+ .dashboard-header {
36
+ background: linear-gradient(to right, #4F6F52, #739072);
37
+ }
38
+ .gauge-container {
39
+ position: relative;
40
+ width: 100%;
41
+ height: 120px;
42
+ margin: 20px 0;
43
+ }
44
+ .gauge {
45
+ position: absolute;
46
+ top: 0;
47
+ left: 0;
48
+ width: 100%;
49
+ height: 100%;
50
+ border-radius: 50% 50% 0 0 / 100% 100% 0 0;
51
+ overflow: hidden;
52
+ }
53
+ .gauge::before {
54
+ content: '';
55
+ position: absolute;
56
+ left: 0;
57
+ top: 100%;
58
+ width: 100%;
59
+ height: 100%;
60
+ background: #f0f0f0;
61
+ transform-origin: center top;
62
+ transform: rotate(0.5turn);
63
+ transition: transform 1s ease-out;
64
+ }
65
+ .gauge-value {
66
+ position: absolute;
67
+ bottom: 0;
68
+ left: 0;
69
+ width: 100%;
70
+ text-align: center;
71
+ font-weight: bold;
72
+ font-size: 1.5rem;
73
+ color: #3A4D39;
74
+ }
75
+ @keyframes pulse {
76
+ 0% { transform: scale(1); }
77
+ 50% { transform: scale(1.05); }
78
+ 100% { transform: scale(1); }
79
+ }
80
+ .alert-pulse {
81
+ animation: pulse 2s infinite;
82
+ }
83
  </style>
84
+ </head>
85
+ <body class="bg-gray-50 font-sans">
86
+ <div class="min-h-screen flex flex-col">
87
+ <!-- Header -->
88
+ <header class="dashboard-header text-white shadow-lg">
89
+ <div class="container mx-auto px-4 py-6">
90
+ <div class="flex justify-between items-center">
91
+ <div class="flex items-center space-x-4">
92
+ <i class="fas fa-cloud-sun fa-2x"></i>
93
+ <h1 class="text-2xl font-bold">Livestock Weather Optimizer</h1>
94
+ </div>
95
+ <div class="flex items-center space-x-4">
96
+ <div class="relative">
97
+ <select class="bg-secondary border-0 rounded-full px-4 py-2 appearance-none focus:outline-none focus:ring-2 focus:ring-accent">
98
+ <option>My Farm</option>
99
+ <option>North Pasture</option>
100
+ <option>South Pasture</option>
101
+ <option>Barn Area</option>
102
+ </select>
103
+ <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
104
+ <i class="fas fa-chevron-down"></i>
105
+ </div>
106
+ </div>
107
+ <button class="bg-accent hover:bg-opacity-90 px-4 py-2 rounded-full flex items-center space-x-2">
108
+ <i class="fas fa-user"></i>
109
+ <span>Farmer John</span>
110
+ </button>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </header>
115
+
116
+ <!-- Main Content -->
117
+ <main class="flex-grow container mx-auto px-4 py-8">
118
+ <!-- Weather Overview -->
119
+ <section class="mb-12">
120
+ <div class="flex justify-between items-center mb-6">
121
+ <h2 class="text-2xl font-semibold text-dark">Weather Forecast & Livestock Impact</h2>
122
+ <div class="flex items-center space-x-2 text-sm">
123
+ <span class="text-gray-600">Last updated: <span id="update-time">Just now</span></span>
124
+ <button id="refresh-btn" class="bg-light text-primary p-2 rounded-full hover:bg-accent hover:text-white transition">
125
+ <i class="fas fa-sync-alt"></i>
126
+ </button>
127
+ </div>
128
+ </div>
129
+
130
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
131
+ <!-- Today's Weather -->
132
+ <div class="weather-card bg-white rounded-xl shadow-md overflow-hidden">
133
+ <div class="bg-primary text-white px-4 py-3">
134
+ <h3 class="font-bold">Today</h3>
135
+ </div>
136
+ <div class="p-4">
137
+ <div class="flex justify-between items-center mb-4">
138
+ <div>
139
+ <div class="text-4xl font-bold text-dark">24°C</div>
140
+ <div class="text-gray-600">Partly Cloudy</div>
141
+ </div>
142
+ <div class="text-4xl text-accent">
143
+ <i class="fas fa-cloud-sun"></i>
144
+ </div>
145
+ </div>
146
+ <div class="space-y-3">
147
+ <div class="flex justify-between text-sm">
148
+ <span class="text-gray-600">Humidity</span>
149
+ <span class="font-medium">65%</span>
150
+ </div>
151
+ <div class="flex justify-between text-sm">
152
+ <span class="text-gray-600">Wind</span>
153
+ <span class="font-medium">12 km/h</span>
154
+ </div>
155
+ <div class="flex justify-between text-sm">
156
+ <span class="text-gray-600">Rain</span>
157
+ <span class="font-medium">10%</span>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ <div class="px-4 py-3 bg-light">
162
+ <div class="text-sm font-medium text-dark">
163
+ <i class="fas fa-info-circle mr-2"></i>
164
+ <span>Good grazing conditions today</span>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Tomorrow's Weather -->
170
+ <div class="weather-card bg-white rounded-xl shadow-md overflow-hidden">
171
+ <div class="bg-secondary text-white px-4 py-3">
172
+ <h3 class="font-bold">Tomorrow</h3>
173
+ </div>
174
+ <div class="p-4">
175
+ <div class="flex justify-between items-center mb-4">
176
+ <div>
177
+ <div class="text-4xl font-bold text-dark">28°C</div>
178
+ <div class="text-gray-600">Sunny</div>
179
+ </div>
180
+ <div class="text-4xl text-yellow-500">
181
+ <i class="fas fa-sun"></i>
182
+ </div>
183
+ </div>
184
+ <div class="space-y-3">
185
+ <div class="flex justify-between text-sm">
186
+ <span class="text-gray-600">Humidity</span>
187
+ <span class="font-medium">45%</span>
188
+ </div>
189
+ <div class="flex justify-between text-sm">
190
+ <span class="text-gray-600">Wind</span>
191
+ <span class="font-medium">8 km/h</span>
192
+ </div>
193
+ <div class="flex justify-between text-sm">
194
+ <span class="text-gray-600">Rain</span>
195
+ <span class="font-medium">0%</span>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ <div class="px-4 py-3 bg-yellow-50">
200
+ <div class="text-sm font-medium text-dark">
201
+ <i class="fas fa-exclamation-triangle mr-2 text-yellow-600"></i>
202
+ <span>Provide extra shade & water</span>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Day 3 Weather -->
208
+ <div class="weather-card bg-white rounded-xl shadow-md overflow-hidden">
209
+ <div class="bg-accent text-white px-4 py-3">
210
+ <h3 class="font-bold">Day 3</h3>
211
+ </div>
212
+ <div class="p-4">
213
+ <div class="flex justify-between items-center mb-4">
214
+ <div>
215
+ <div class="text-4xl font-bold text-dark">18°C</div>
216
+ <div class="text-gray-600">Rainy</div>
217
+ </div>
218
+ <div class="text-4xl text-blue-500">
219
+ <i class="fas fa-cloud-rain"></i>
220
+ </div>
221
+ </div>
222
+ <div class="space-y-3">
223
+ <div class="flex justify-between text-sm">
224
+ <span class="text-gray-600">Humidity</span>
225
+ <span class="font-medium">85%</span>
226
+ </div>
227
+ <div class="flex justify-between text-sm">
228
+ <span class="text-gray-600">Wind</span>
229
+ <span class="font-medium">20 km/h</span>
230
+ </div>
231
+ <div class="flex justify-between text-sm">
232
+ <span class="text-gray-600">Rain</span>
233
+ <span class="font-medium">90%</span>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ <div class="px-4 py-3 bg-blue-50">
238
+ <div class="text-sm font-medium text-dark">
239
+ <i class="fas fa-umbrella mr-2 text-blue-600"></i>
240
+ <span>Prepare indoor shelter</span>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Day 4 Weather -->
246
+ <div class="weather-card bg-white rounded-xl shadow-md overflow-hidden">
247
+ <div class="bg-dark text-white px-4 py-3">
248
+ <h3 class="font-bold">Day 4</h3>
249
+ </div>
250
+ <div class="p-4">
251
+ <div class="flex justify-between items-center mb-4">
252
+ <div>
253
+ <div class="text-4xl font-bold text-dark">12°C</div>
254
+ <div class="text-gray-600">Stormy</div>
255
+ </div>
256
+ <div class="text-4xl text-purple-500">
257
+ <i class="fas fa-bolt"></i>
258
+ </div>
259
+ </div>
260
+ <div class="space-y-3">
261
+ <div class="flex justify-between text-sm">
262
+ <span class="text-gray-600">Humidity</span>
263
+ <span class="font-medium">75%</span>
264
+ </div>
265
+ <div class="flex justify-between text-sm">
266
+ <span class="text-gray-600">Wind</span>
267
+ <span class="font-medium">35 km/h</span>
268
+ </div>
269
+ <div class="flex justify-between text-sm">
270
+ <span class="text-gray-600">Rain</span>
271
+ <span class="font-medium">100%</span>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ <div class="px-4 py-3 bg-red-50 alert-pulse">
276
+ <div class="text-sm font-medium text-dark">
277
+ <i class="fas fa-exclamation-circle mr-2 text-red-600"></i>
278
+ <span>Move livestock to shelter</span>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </section>
284
+
285
+ <!-- Livestock Health Dashboard -->
286
+ <section class="mb-12">
287
+ <h2 class="text-2xl font-semibold text-dark mb-6">Livestock Health Monitoring</h2>
288
+
289
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
290
+ <!-- Cattle Health -->
291
+ <div class="livestock-health rounded-xl shadow-md overflow-hidden">
292
+ <div class="bg-primary text-white px-4 py-3 flex justify-between items-center">
293
+ <h3 class="font-bold">Cattle</h3>
294
+ <span class="text-sm bg-white text-primary px-2 py-1 rounded-full">120 heads</span>
295
+ </div>
296
+ <div class="p-4">
297
+ <div class="gauge-container">
298
+ <div class="gauge" id="cattle-gauge"></div>
299
+ <div class="gauge-value">78%</div>
300
+ </div>
301
+ <div class="space-y-3">
302
+ <div class="flex justify-between text-sm">
303
+ <span class="text-gray-600">Average Weight</span>
304
+ <span class="font-medium">520 kg</span>
305
+ </div>
306
+ <div class="flex justify-between text-sm">
307
+ <span class="text-gray-600">Milk Production</span>
308
+ <span class="font-medium">22 L/day</span>
309
+ </div>
310
+ <div class="flex justify-between text-sm">
311
+ <span class="text-gray-600">Stress Level</span>
312
+ <span class="font-medium text-green-600">Low</span>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ <div class="px-4 py-3 bg-light">
317
+ <div class="text-sm font-medium text-dark">
318
+ <i class="fas fa-check-circle mr-2 text-green-600"></i>
319
+ <span>Health status optimal</span>
320
+ </div>
321
+ </div>
322
+ </div>
323
+
324
+ <!-- Sheep Health -->
325
+ <div class="livestock-health rounded-xl shadow-md overflow-hidden">
326
+ <div class="bg-secondary text-white px-4 py-3 flex justify-between items-center">
327
+ <h3 class="font-bold">Sheep</h3>
328
+ <span class="text-sm bg-white text-secondary px-2 py-1 rounded-full">85 heads</span>
329
+ </div>
330
+ <div class="p-4">
331
+ <div class="gauge-container">
332
+ <div class="gauge" id="sheep-gauge"></div>
333
+ <div class="gauge-value">65%</div>
334
+ </div>
335
+ <div class="space-y-3">
336
+ <div class="flex justify-between text-sm">
337
+ <span class="text-gray-600">Average Weight</span>
338
+ <span class="font-medium">45 kg</span>
339
+ </div>
340
+ <div class="flex justify-between text-sm">
341
+ <span class="text-gray-600">Wool Growth</span>
342
+ <span class="font-medium">1.2 cm/month</span>
343
+ </div>
344
+ <div class="flex justify-between text-sm">
345
+ <span class="text-gray-600">Stress Level</span>
346
+ <span class="font-medium text-yellow-600">Medium</span>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ <div class="px-4 py-3 bg-yellow-50">
351
+ <div class="text-sm font-medium text-dark">
352
+ <i class="fas fa-exclamation-triangle mr-2 text-yellow-600"></i>
353
+ <span>Monitor for heat stress</span>
354
+ </div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Poultry Health -->
359
+ <div class="livestock-health rounded-xl shadow-md overflow-hidden">
360
+ <div class="bg-accent text-white px-4 py-3 flex justify-between items-center">
361
+ <h3 class="font-bold">Poultry</h3>
362
+ <span class="text-sm bg-white text-accent px-2 py-1 rounded-full">500 birds</span>
363
+ </div>
364
+ <div class="p-4">
365
+ <div class="gauge-container">
366
+ <div class="gauge" id="poultry-gauge"></div>
367
+ <div class="gauge-value">82%</div>
368
+ </div>
369
+ <div class="space-y-3">
370
+ <div class="flex justify-between text-sm">
371
+ <span class="text-gray-600">Egg Production</span>
372
+ <span class="font-medium">420 eggs/day</span>
373
+ </div>
374
+ <div class="flex justify-between text-sm">
375
+ <span class="text-gray-600">Feed Conversion</span>
376
+ <span class="font-medium">2.1:1</span>
377
+ </div>
378
+ <div class="flex justify-between text-sm">
379
+ <span class="text-gray-600">Stress Level</span>
380
+ <span class="font-medium text-green-600">Low</span>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ <div class="px-4 py-3 bg-light">
385
+ <div class="text-sm font-medium text-dark">
386
+ <i class="fas fa-check-circle mr-2 text-green-600"></i>
387
+ <span>Excellent production levels</span>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </section>
393
+
394
+ <!-- Feed & Water Optimization -->
395
+ <section class="mb-12">
396
+ <h2 class="text-2xl font-semibold text-dark mb-6">Feed & Water Optimization</h2>
397
+
398
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
399
+ <!-- Feed Recommendations -->
400
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
401
+ <div class="bg-primary text-white px-4 py-3">
402
+ <h3 class="font-bold">Feed Recommendations</h3>
403
+ </div>
404
+ <div class="p-4">
405
+ <div class="mb-4">
406
+ <h4 class="font-medium text-dark mb-2">Today's Adjustment</h4>
407
+ <div class="bg-green-50 border-l-4 border-green-500 p-3">
408
+ <div class="flex items-start">
409
+ <div class="flex-shrink-0 text-green-500">
410
+ <i class="fas fa-check-circle"></i>
411
+ </div>
412
+ <div class="ml-3">
413
+ <p class="text-sm text-green-700">
414
+ Based on current weather and pasture conditions, you can reduce supplemental feed by 15%.
415
+ </p>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </div>
420
+
421
+ <div class="space-y-4">
422
+ <div class="flex items-start">
423
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-primary">
424
+ <i class="fas fa-haykal"></i>
425
+ </div>
426
+ <div class="ml-4">
427
+ <h4 class="text-sm font-medium text-dark">Pasture Quality</h4>
428
+ <p class="text-sm text-gray-600">High (NDVI: 0.78) - Excellent grazing available</p>
429
+ </div>
430
+ </div>
431
+
432
+ <div class="flex items-start">
433
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-primary">
434
+ <i class="fas fa-seedling"></i>
435
+ </div>
436
+ <div class="ml-4">
437
+ <h4 class="text-sm font-medium text-dark">Supplemental Feed</h4>
438
+ <p class="text-sm text-gray-600">Recommended: 2.5 kg/head/day (reduced from 3.0 kg)</p>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="flex items-start">
443
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-primary">
444
+ <i class="fas fa-pills"></i>
445
+ </div>
446
+ <div class="ml-4">
447
+ <h4 class="text-sm font-medium text-dark">Mineral Supplement</h4>
448
+ <p class="text-sm text-gray-600">Increase salt blocks by 20% due to heat</p>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <!-- Water Management -->
456
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
457
+ <div class="bg-secondary text-white px-4 py-3">
458
+ <h3 class="font-bold">Water Management</h3>
459
+ </div>
460
+ <div class="p-4">
461
+ <div class="mb-4">
462
+ <h4 class="font-medium text-dark mb-2">Critical Alert</h4>
463
+ <div class="bg-red-50 border-l-4 border-red-500 p-3">
464
+ <div class="flex items-start">
465
+ <div class="flex-shrink-0 text-red-500">
466
+ <i class="fas fa-exclamation-triangle"></i>
467
+ </div>
468
+ <div class="ml-3">
469
+ <p class="text-sm text-red-700">
470
+ Tomorrow's forecast predicts 28°C. Increase water supply by 30% to prevent dehydration.
471
+ </p>
472
+ </div>
473
+ </div>
474
+ </div>
475
+ </div>
476
+
477
+ <div class="space-y-4">
478
+ <div class="flex items-start">
479
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-secondary">
480
+ <i class="fas fa-tint"></i>
481
+ </div>
482
+ <div class="ml-4">
483
+ <h4 class="text-sm font-medium text-dark">Current Consumption</h4>
484
+ <p class="text-sm text-gray-600">Cattle: 45 L/head/day | Sheep: 5 L/head/day</p>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="flex items-start">
489
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-secondary">
490
+ <i class="fas fa-thermometer-half"></i>
491
+ </div>
492
+ <div class="ml-4">
493
+ <h4 class="text-sm font-medium text-dark">Temperature Impact</h4>
494
+ <p class="text-sm text-gray-600">Water needs increase by 1.5% per degree above 25°C</p>
495
+ </div>
496
+ </div>
497
+
498
+ <div class="flex items-start">
499
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-light flex items-center justify-center text-secondary">
500
+ <i class="fas fa-water"></i>
501
+ </div>
502
+ <div class="ml-4">
503
+ <h4 class="text-sm font-medium text-dark">Trough Check</h4>
504
+ <p class="text-sm text-gray-600">Clean all water troughs today to prevent algae growth</p>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </section>
512
+
513
+ <!-- Historical Trends -->
514
+ <section>
515
+ <h2 class="text-2xl font-semibold text-dark mb-6">Historical Trends & Predictions</h2>
516
+
517
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
518
+ <div class="bg-dark text-white px-4 py-3">
519
+ <h3 class="font-bold">Weather Impact on Livestock Performance</h3>
520
+ </div>
521
+ <div class="p-4">
522
+ <div class="flex flex-col md:flex-row">
523
+ <div class="w-full md:w-1/2 p-4">
524
+ <h4 class="font-medium text-dark mb-4">Temperature vs. Milk Production</h4>
525
+ <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
526
+ <img src="https://via.placeholder.com/300x200?text=Temperature+vs+Milk+Production" alt="Temperature vs Milk Production Chart" class="w-full h-auto rounded">
527
+ </div>
528
+ <p class="text-sm text-gray-600 mt-2">
529
+ Historical data shows milk production drops by 0.5% per degree above 25°C.
530
+ </p>
531
+ </div>
532
+ <div class="w-full md:w-1/2 p-4">
533
+ <h4 class="font-medium text-dark mb-4">Rainfall vs. Weight Gain</h4>
534
+ <div class="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
535
+ <img src="https://via.placeholder.com/300x200?text=Rainfall+vs+Weight+Gain" alt="Rainfall vs Weight Gain Chart" class="w-full h-auto rounded">
536
+ </div>
537
+ <p class="text-sm text-gray-600 mt-2">
538
+ Optimal weight gain occurs with 5-10mm rainfall per week during grazing season.
539
+ </p>
540
+ </div>
541
+ </div>
542
+
543
+ <div class="mt-6 p-4 bg-light rounded-lg">
544
+ <h4 class="font-medium text-dark mb-2">30-Day Prediction</h4>
545
+ <p class="text-sm text-gray-700">
546
+ Based on weather forecasts and historical patterns, we predict a 12% increase in feed efficiency over the next month due to favorable grazing conditions. However, prepare for potential heat stress in week 3.
547
+ </p>
548
+ <div class="mt-4 flex justify-center">
549
+ <button class="bg-primary hover:bg-opacity-90 text-white px-4 py-2 rounded-full flex items-center space-x-2">
550
+ <i class="fas fa-download"></i>
551
+ <span>Download Full Report</span>
552
+ </button>
553
+ </div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+ </section>
558
+ </main>
559
+
560
+ <!-- Footer -->
561
+ <footer class="bg-dark text-white py-6">
562
+ <div class="container mx-auto px-4">
563
+ <div class="flex flex-col md:flex-row justify-between items-center">
564
+ <div class="mb-4 md:mb-0">
565
+ <h3 class="text-xl font-bold flex items-center">
566
+ <i class="fas fa-cloud-sun mr-2"></i>
567
+ Livestock Weather Optimizer
568
+ </h3>
569
+ <p class="text-sm text-gray-300 mt-1">Helping farmers make data-driven decisions since 2023</p>
570
+ </div>
571
+ <div class="flex space-x-4">
572
+ <a href="#" class="text-gray-300 hover:text-white">
573
+ <i class="fab fa-facebook-f"></i>
574
+ </a>
575
+ <a href="#" class="text-gray-300 hover:text-white">
576
+ <i class="fab fa-twitter"></i>
577
+ </a>
578
+ <a href="#" class="text-gray-300 hover:text-white">
579
+ <i class="fab fa-instagram"></i>
580
+ </a>
581
+ <a href="#" class="text-gray-300 hover:text-white">
582
+ <i class="fas fa-envelope"></i>
583
+ </a>
584
+ </div>
585
+ </div>
586
+ <div class="mt-6 pt-6 border-t border-gray-700 text-sm text-gray-300 text-center">
587
+ <p>© 2023 Livestock Weather Optimizer. All rights reserved.</p>
588
+ </div>
589
+ </div>
590
+ </footer>
591
+ </div>
592
+
593
+ <script>
594
+ // Initialize gauge animations
595
+ document.addEventListener('DOMContentLoaded', function() {
596
+ // Set gauge values
597
+ setGauge('cattle-gauge', 0.78);
598
+ setGauge('sheep-gauge', 0.65);
599
+ setGauge('poultry-gauge', 0.82);
600
+
601
+ // Refresh button functionality
602
+ document.getElementById('refresh-btn').addEventListener('click', function() {
603
+ // Simulate refresh
604
+ this.classList.add('animate-spin');
605
+ setTimeout(() => {
606
+ this.classList.remove('animate-spin');
607
+ document.getElementById('update-time').textContent = new Date().toLocaleTimeString();
608
+
609
+ // Show notification
610
+ showNotification('Data refreshed successfully!', 'success');
611
+ }, 1000);
612
+ });
613
+
614
+ // Simulate real-time updates
615
+ setInterval(() => {
616
+ // Randomly update some values to simulate real-time data
617
+ const randomTemp = Math.floor(Math.random() * 5) + 22;
618
+ document.querySelector('.weather-card:nth-child(1) .text-4xl').textContent = randomTemp + '°C';
619
+
620
+ const randomHealth = (Math.random() * 0.1) + 0.75;
621
+ setGauge('cattle-gauge', randomHealth);
622
+ document.querySelector('#cattle-gauge + .gauge-value').textContent = Math.round(randomHealth * 100) + '%';
623
+ }, 10000);
624
+ });
625
+
626
+ function setGauge(id, percent) {
627
+ const gauge = document.getElementById(id);
628
+ const rotation = percent * 180;
629
+ gauge.style.transform = `rotate(${rotation}deg)`;
630
+
631
+ // Set color based on value
632
+ if (percent > 0.7) {
633
+ gauge.style.backgroundColor = '#86A789'; // Green
634
+ } else if (percent > 0.4) {
635
+ gauge.style.backgroundColor = '#FFC107'; // Yellow
636
+ } else {
637
+ gauge.style.backgroundColor = '#F44336'; // Red
638
+ }
639
+ }
640
+
641
+ function showNotification(message, type) {
642
+ const notification = document.createElement('div');
643
+ notification.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg text-white ${
644
+ type === 'success' ? 'bg-green-500' : 'bg-red-500'
645
+ }`;
646
+ notification.textContent = message;
647
+ document.body.appendChild(notification);
648
+
649
+ setTimeout(() => {
650
+ notification.classList.add('opacity-0', 'transition-opacity', 'duration-500');
651
+ setTimeout(() => {
652
+ notification.remove();
653
+ }, 500);
654
+ }, 3000);
655
+ }
656
+ </script>
657
+ <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=Tame342/let-see" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
658
+ </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ Generate a weather-based predictive system for livestock optimization for farmers