Hugging Face's logo

Spaces:
marioummm
/
greenthumb-snap-scan
Running

App Files Community
marioummm commited on
Commit
b9072f9
·
verified ·
1 Parent(s): 4cdc258

okay you remember that?

Browse files

i wanna make a vibe for the plant app that take a pic or vedio that can detect the name and the health of plant and all information about plant
apply that on it

Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +325 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Greenthumb Snap Scan
3
- emoji: 👀
4
- colorFrom: blue
5
- colorTo: green
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: GreenThumb Snap & Scan 🌱
3
+ colorFrom: purple
4
+ colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,326 @@
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>GreenThumb Snap & Scan</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ }
17
+ .card-hover {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .card-hover:hover {
21
+ transform: translateY(-5px);
22
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
23
+ }
24
+ .pulse-animation {
25
+ animation: pulse 2s infinite;
26
+ }
27
+ @keyframes pulse {
28
+ 0% {
29
+ transform: scale(1);
30
+ box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
31
+ }
32
+ 70% {
33
+ transform: scale(1.02);
34
+ box-shadow: 0 0 0 10px rgba(74, 222, 128, 0);
35
+ }
36
+ 100% {
37
+ transform: scale(1);
38
+ box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
39
+ }
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-gray-50">
44
+ <div id="vanta-bg" class="fixed inset-0 -z-10"></div>
45
+
46
+ <!-- Navigation -->
47
+ <nav class="bg-white bg-opacity-80 backdrop-blur-md shadow-sm fixed w-full z-50">
48
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
49
+ <div class="flex justify-between h-16">
50
+ <div class="flex items-center">
51
+ <div class="flex-shrink-0 flex items-center">
52
+ <i data-feather="leaf" class="text-green-500 h-8 w-8"></i>
53
+ <span class="ml-2 text-xl font-bold text-gray-800">GreenThumb</span>
54
+ </div>
55
+ </div>
56
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
57
+ <a href="#" class="text-green-600 border-b-2 border-green-500 px-3 py-2 text-sm font-medium">Home</a>
58
+ <a href="#" class="text-gray-600 hover:text-green-600 px-3 py-2 text-sm font-medium">My Plants</a>
59
+ <a href="#" class="text-gray-600 hover:text-green-600 px-3 py-2 text-sm font-medium">Identify</a>
60
+ <a href="#" class="text-gray-600 hover:text-green-600 px-3 py-2 text-sm font-medium">Care Tips</a>
61
+ </div>
62
+ <div class="flex items-center">
63
+ <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-full text-sm font-medium flex items-center">
64
+ <i data-feather="user" class="mr-1 h-4 w-4"></i> Sign In
65
+ </button>
66
+ </div>
67
+ </div>
68
+ </div>
69
+ </nav>
70
+
71
+ <!-- Hero Section -->
72
+ <div class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
73
+ <div class="text-center">
74
+ <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6">
75
+ Discover Your <span class="text-green-500">Plant's</span> Secrets
76
+ </h1>
77
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
78
+ Snap a photo and instantly identify plants, diagnose health issues, and get expert care advice.
79
+ </p>
80
+
81
+ <!-- Upload Card -->
82
+ <div class="mt-12 max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl card-hover pulse-animation">
83
+ <div class="p-8">
84
+ <div class="flex flex-col items-center">
85
+ <div class="rounded-full bg-green-100 p-6 mb-4">
86
+ <i data-feather="camera" class="text-green-500 h-12 w-12"></i>
87
+ </div>
88
+ <h2 class="text-2xl font-bold text-gray-800 mb-2">Upload Plant Image</h2>
89
+ <p class="text-gray-600 mb-6 text-center">Take a photo or upload from your gallery</p>
90
+
91
+ <div class="w-full">
92
+ <label class="flex flex-col items-center px-4 py-6 bg-white rounded-lg border-2 border-dashed border-green-300 cursor-pointer hover:bg-green-50">
93
+ <div class="flex flex-col items-center justify-center pt-5 pb-6">
94
+ <i data-feather="upload" class="text-green-500 h-8 w-8 mb-2"></i>
95
+ <p class="mb-2 text-sm text-gray-600"><span class="font-semibold">Click to upload</span> or drag and drop</p>
96
+ <p class="text-xs text-gray-500">JPG, PNG up to 5MB</p>
97
+ </div>
98
+ <input type="file" class="hidden" accept="image/*" />
99
+ </label>
100
+ </div>
101
+
102
+ <button class="mt-6 bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-8 rounded-full flex items-center">
103
+ <i data-feather="search" class="mr-2 h-4 w-4"></i> Identify Plant
104
+ </button>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="mt-8 flex justify-center space-x-4">
110
+ <div class="flex items-center text-gray-600">
111
+ <i data-feather="check-circle" class="text-green-500 mr-2 h-4 w-4"></i>
112
+ <span>Instant identification</span>
113
+ </div>
114
+ <div class="flex items-center text-gray-600">
115
+ <i data-feather="check-circle" class="text-green-500 mr-2 h-4 w-4"></i>
116
+ <span>Health diagnosis</span>
117
+ </div>
118
+ <div class="flex items-center text-gray-600">
119
+ <i data-feather="check-circle" class="text-green-500 mr-2 h-4 w-4"></i>
120
+ <span>Care recommendations</span>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Features Section -->
127
+ <div class="py-16 bg-white bg-opacity-80 backdrop-blur-sm">
128
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
129
+ <div class="text-center mb-16">
130
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">How It Works</h2>
131
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
132
+ Three simple steps to become a plant care expert
133
+ </p>
134
+ </div>
135
+
136
+ <div class="grid md:grid-cols-3 gap-8">
137
+ <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
138
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
139
+ <span class="text-green-500 text-xl font-bold">1</span>
140
+ </div>
141
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-3">Snap a Photo</h3>
142
+ <p class="text-gray-600 text-center">
143
+ Take a clear picture of your plant's leaves, flowers, or the entire plant.
144
+ </p>
145
+ </div>
146
+
147
+ <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
148
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
149
+ <span class="text-green-500 text-xl font-bold">2</span>
150
+ </div>
151
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-3">Upload & Analyze</h3>
152
+ <p class="text-gray-600 text-center">
153
+ Our AI will identify the plant species and check for any health issues.
154
+ </p>
155
+ </div>
156
+
157
+ <div class="bg-white p-8 rounded-xl shadow-sm card-hover">
158
+ <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
159
+ <span class="text-green-500 text-xl font-bold">3</span>
160
+ </div>
161
+ <h3 class="text-xl font-bold text-center text-gray-800 mb-3">Get Expert Advice</h3>
162
+ <p class="text-gray-600 text-center">
163
+ Receive personalized care tips and treatment recommendations.
164
+ </p>
165
+ </div>
166
+ </div>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- Example Results -->
171
+ <div class="py-16 bg-gray-50">
172
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
173
+ <div class="text-center mb-16">
174
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">What You'll Discover</h2>
175
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
176
+ Detailed insights about your green friends
177
+ </p>
178
+ </div>
179
+
180
+ <div class="bg-white rounded-xl shadow-md overflow-hidden md:max-w-4xl mx-auto card-hover">
181
+ <div class="md:flex">
182
+ <div class="md:flex-shrink-0">
183
+ <img class="h-48 w-full object-cover md:w-48 md:h-full" src="http://static.photos/nature/640x360/42" alt="Plant example">
184
+ </div>
185
+ <div class="p-8">
186
+ <div class="uppercase tracking-wide text-sm text-green-500 font-semibold">Monstera Deliciosa</div>
187
+ <div class="flex items-center mt-1 mb-4">
188
+ <div class="flex items-center text-yellow-400">
189
+ <i data-feather="star" class="h-4 w-4 fill-current"></i>
190
+ <i data-feather="star" class="h-4 w-4 fill-current"></i>
191
+ <i data-feather="star" class="h-4 w-4 fill-current"></i>
192
+ <i data-feather="star" class="h-4 w-4 fill-current"></i>
193
+ <i data-feather="star" class="h-4 w-4 fill-current"></i>
194
+ </div>
195
+ <span class="ml-2 text-sm text-gray-600">Very Healthy (95%)</span>
196
+ </div>
197
+
198
+ <div class="mt-4">
199
+ <h4 class="text-sm font-medium text-gray-900">Care Recommendations:</h4>
200
+ <ul class="mt-2 space-y-2">
201
+ <li class="flex items-start">
202
+ <i data-feather="sun" class="text-green-500 mr-2 h-4 w-4 mt-0.5"></i>
203
+ <span class="text-sm text-gray-600">Bright, indirect light (6-8 hours/day)</span>
204
+ </li>
205
+ <li class="flex items-start">
206
+ <i data-feather="droplet" class="text-green-500 mr-2 h-4 w-4 mt-0.5"></i>
207
+ <span class="text-sm text-gray-600">Water when top 2 inches of soil are dry</span>
208
+ </li>
209
+ <li class="flex items-start">
210
+ <i data-feather="thermometer" class="text-green-500 mr-2 h-4 w-4 mt-0.5"></i>
211
+ <span class="text-sm text-gray-600">Prefers 65-85°F (18-29°C)</span>
212
+ </li>
213
+ </ul>
214
+ </div>
215
+
216
+ <div class="mt-6">
217
+ <button class="text-green-500 hover:text-green-600 text-sm font-medium flex items-center">
218
+ View full plant profile <i data-feather="arrow-right" class="ml-1 h-4 w-4"></i>
219
+ </button>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- CTA Section -->
228
+ <div class="py-16 bg-green-600 text-white">
229
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
230
+ <h2 class="text-3xl font-bold mb-6">Ready to become a plant expert?</h2>
231
+ <p class="text-xl mb-8 max-w-3xl mx-auto opacity-90">
232
+ Join thousands of plant lovers who keep their greens thriving with GreenThumb.
233
+ </p>
234
+ <button class="bg-white text-green-600 hover:bg-gray-100 font-medium py-3 px-8 rounded-full flex items-center mx-auto">
235
+ <i data-feather="download" class="mr-2 h-4 w-4"></i> Download the App
236
+ </button>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Footer -->
241
+ <footer class="bg-gray-800 text-white py-12">
242
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
243
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
244
+ <div>
245
+ <h3 class="text-sm font-semibold uppercase tracking-wider">GreenThumb</h3>
246
+ <ul class="mt-4 space-y-2">
247
+ <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
248
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
249
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
250
+ </ul>
251
+ </div>
252
+ <div>
253
+ <h3 class="text-sm font-semibold uppercase tracking-wider">Features</h3>
254
+ <ul class="mt-4 space-y-2">
255
+ <li><a href="#" class="text-gray-400 hover:text-white">Plant ID</a></li>
256
+ <li><a href="#" class="text-gray-400 hover:text-white">Disease Detection</a></li>
257
+ <li><a href="#" class="text-gray-400 hover:text-white">Care Planner</a></li>
258
+ </ul>
259
+ </div>
260
+ <div>
261
+ <h3 class="text-sm font-semibold uppercase tracking-wider">Support</h3>
262
+ <ul class="mt-4 space-y-2">
263
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
264
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
265
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
266
+ </ul>
267
+ </div>
268
+ <div>
269
+ <h3 class="text-sm font-semibold uppercase tracking-wider">Connect</h3>
270
+ <div class="mt-4 flex space-x-4">
271
+ <a href="#" class="text-gray-400 hover:text-white">
272
+ <i data-feather="facebook" class="h-5 w-5"></i>
273
+ </a>
274
+ <a href="#" class="text-gray-400 hover:text-white">
275
+ <i data-feather="twitter" class="h-5 w-5"></i>
276
+ </a>
277
+ <a href="#" class="text-gray-400 hover:text-white">
278
+ <i data-feather="instagram" class="h-5 w-5"></i>
279
+ </a>
280
+ </div>
281
+ <div class="mt-6">
282
+ <p class="text-xs text-gray-400">
283
+ © 2023 GreenThumb Snap & Scan. All rights reserved.
284
+ </p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </footer>
290
+
291
+ <script>
292
+ // Initialize Vanta.js background
293
+ VANTA.NET({
294
+ el: "#vanta-bg",
295
+ mouseControls: true,
296
+ touchControls: true,
297
+ gyroControls: false,
298
+ minHeight: 200.00,
299
+ minWidth: 200.00,
300
+ scale: 1.00,
301
+ scaleMobile: 1.00,
302
+ color: 0x4ade80,
303
+ backgroundColor: 0xf8fafc,
304
+ points: 10.00,
305
+ maxDistance: 22.00,
306
+ spacing: 18.00
307
+ });
308
+
309
+ // Initialize feather icons
310
+ feather.replace();
311
+
312
+ // Animation for upload card
313
+ document.addEventListener('DOMContentLoaded', function() {
314
+ const uploadCard = document.querySelector('.pulse-animation');
315
+
316
+ uploadCard.addEventListener('mouseenter', function() {
317
+ this.classList.remove('pulse-animation');
318
+ });
319
+
320
+ uploadCard.addEventListener('mouseleave', function() {
321
+ this.classList.add('pulse-animation');
322
+ });
323
+ });
324
+ </script>
325
+ </body>
326
  </html>