Hugging Face's logo

Spaces:
acidsound
/
snapfind-front
Running

App Files Community
acidsound commited on
Commit
690f6a4
·
verified ·
1 Parent(s): 1a9da6a

- Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +294 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Snapfind Front
3
- emoji: 💻
4
- colorFrom: indigo
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: snapfind-front
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,294 @@
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>SnapFind - Organize Your Belongings</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
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6B73FF 0%, #000DFF 50%, #00D4FF 100%);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .feature-icon {
18
+ width: 60px;
19
+ height: 60px;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ border-radius: 18px;
24
+ }
25
+ .search-input {
26
+ transition: all 0.3s ease;
27
+ }
28
+ .search-input:focus {
29
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="font-sans antialiased bg-gray-50">
34
+ <!-- Navigation -->
35
+ <nav class="bg-white shadow-sm">
36
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
37
+ <div class="flex justify-between h-16">
38
+ <div class="flex items-center">
39
+ <div class="flex-shrink-0 flex items-center">
40
+ <i class="fas fa-camera-retro text-blue-600 text-2xl mr-2"></i>
41
+ <span class="text-xl font-bold text-gray-900">SnapFind</span>
42
+ </div>
43
+ </div>
44
+ <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-8">
45
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Features</a>
46
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">Pricing</a>
47
+ <a href="#" class="text-gray-500 hover:text-gray-700 px-3 py-2 text-sm font-medium">About</a>
48
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
49
+ Get Started
50
+ </button>
51
+ </div>
52
+ <div class="-mr-2 flex items-center sm:hidden">
53
+ <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-blue-500" aria-controls="mobile-menu" aria-expanded="false">
54
+ <span class="sr-only">Open main menu</span>
55
+ <i class="fas fa-bars"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <!-- Hero Section -->
63
+ <div class="gradient-bg text-white">
64
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
65
+ <div class="text-center">
66
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
67
+ Never Lose Track of Your Belongings Again
68
+ </h1>
69
+ <p class="mt-6 max-w-2xl mx-auto text-xl opacity-90">
70
+ Easily catalog, organize, and find your physical items with AI-powered SnapFind.
71
+ </p>
72
+ <div class="mt-10 flex justify-center space-x-4">
73
+ <button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg text-base font-semibold shadow-md transition duration-150 ease-in-out">
74
+ <i class="fas fa-play mr-2"></i> Watch Demo
75
+ </button>
76
+ <button class="bg-blue-800 hover:bg-blue-900 text-white px-6 py-3 rounded-lg text-base font-semibold shadow-md transition duration-150 ease-in-out">
77
+ <i class="fas fa-download mr-2"></i> Download App
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </div>
83
+
84
+ <!-- Search Section -->
85
+ <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10 relative z-10">
86
+ <div class="bg-white rounded-xl shadow-xl p-6">
87
+ <div class="flex">
88
+ <div class="relative flex-grow">
89
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
90
+ <i class="fas fa-search text-gray-400"></i>
91
+ </div>
92
+ <input type="text" class="search-input block w-full pl-10 pr-12 py-4 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="Search your items...">
93
+ <div class="absolute inset-y-0 right-0 flex items-center pr-3">
94
+ <button class="p-1 rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
95
+ <i class="fas fa-camera"></i>
96
+ </button>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ <div class="mt-4 flex flex-wrap gap-2">
101
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
102
+ <i class="fas fa-laptop mr-1"></i> Electronics
103
+ </span>
104
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
105
+ <i class="fas fa-book mr-1"></i> Documents
106
+ </span>
107
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">
108
+ <i class="fas fa-tshirt mr-1"></i> Clothing
109
+ </span>
110
+ <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800">
111
+ <i class="fas fa-key mr-1"></i> Keys
112
+ </span>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Features Section -->
118
+ <div class="py-16 bg-white">
119
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
120
+ <div class="lg:text-center">
121
+ <h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Features</h2>
122
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
123
+ How SnapFind Works
124
+ </p>
125
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
126
+ A smarter way to keep track of everything you own
127
+ </p>
128
+ </div>
129
+
130
+ <div class="mt-20">
131
+ <div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-2">
132
+ <!-- Add Items Feature -->
133
+ <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300 ease-in-out">
134
+ <div class="feature-icon bg-blue-100 text-blue-600 mb-6">
135
+ <i class="fas fa-plus text-2xl"></i>
136
+ </div>
137
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Add Your Items</h3>
138
+ <p class="text-gray-600 mb-4">
139
+ Click the button below to get started. Snap a photo, add a description and location. AI can even suggest descriptions and tags for you!
140
+ </p>
141
+ <button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
142
+ <i class="fas fa-plus mr-2"></i> Add Item
143
+ </button>
144
+ </div>
145
+
146
+ <!-- Find Items Feature -->
147
+ <div class="bg-gray-50 p-8 rounded-xl card-hover transition duration-300 ease-in-out">
148
+ <div class="feature-icon bg-green-100 text-green-600 mb-6">
149
+ <i class="fas fa-search text-2xl"></i>
150
+ </div>
151
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Find Them Easily</h3>
152
+ <p class="text-gray-600 mb-4">
153
+ Once you've added items, use the button to search by text or even by uploading an image. Our AI will help locate your items instantly.
154
+ </p>
155
+ <button class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
156
+ <i class="fas fa-search mr-2"></i> Search Items
157
+ </button>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- Stats Section -->
165
+ <div class="bg-gray-100 py-16">
166
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
167
+ <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
168
+ <div class="text-center bg-white p-8 rounded-xl shadow-sm">
169
+ <div class="text-4xl font-bold text-blue-600">10,000+</div>
170
+ <div class="mt-2 text-lg font-medium text-gray-900">Items Cataloged</div>
171
+ <div class="mt-1 text-gray-500">By our happy users</div>
172
+ </div>
173
+ <div class="text-center bg-white p-8 rounded-xl shadow-sm">
174
+ <div class="text-4xl font-bold text-green-600">98%</div>
175
+ <div class="mt-2 text-lg font-medium text-gray-900">Search Accuracy</div>
176
+ <div class="mt-1 text-gray-500">Find what you need instantly</div>
177
+ </div>
178
+ <div class="text-center bg-white p-8 rounded-xl shadow-sm">
179
+ <div class="text-4xl font-bold text-purple-600">24/7</div>
180
+ <div class="mt-2 text-lg font-medium text-gray-900">Access Anywhere</div>
181
+ <div class="mt-1 text-gray-500">Cloud sync across all devices</div>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <!-- CTA Section -->
188
+ <div class="bg-blue-700">
189
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
190
+ <h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
191
+ <span class="block">Ready to get organized?</span>
192
+ <span class="block text-blue-200">Start using SnapFind today.</span>
193
+ </h2>
194
+ <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
195
+ <div class="inline-flex rounded-md shadow">
196
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50">
197
+ <i class="fas fa-user-plus mr-2"></i> Sign up for free
198
+ </a>
199
+ </div>
200
+ <div class="ml-3 inline-flex rounded-md shadow">
201
+ <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-900">
202
+ <i class="fas fa-info-circle mr-2"></i> Learn more
203
+ </a>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <!-- Footer -->
210
+ <footer class="bg-gray-800">
211
+ <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
212
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
213
+ <div>
214
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Product</h3>
215
+ <ul class="mt-4 space-y-4">
216
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Features</a></li>
217
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Pricing</a></li>
218
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">API</a></li>
219
+ </ul>
220
+ </div>
221
+ <div>
222
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
223
+ <ul class="mt-4 space-y-4">
224
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">About</a></li>
225
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Blog</a></li>
226
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Jobs</a></li>
227
+ </ul>
228
+ </div>
229
+ <div>
230
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Legal</h3>
231
+ <ul class="mt-4 space-y-4">
232
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy</a></li>
233
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Terms</a></li>
234
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">Cookie Policy</a></li>
235
+ </ul>
236
+ </div>
237
+ <div>
238
+ <h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
239
+ <ul class="mt-4 space-y-4">
240
+ <li class="flex">
241
+ <a href="#" class="text-gray-300 hover:text-white">
242
+ <i class="fab fa-facebook-f"></i>
243
+ </a>
244
+ <a href="#" class="ml-6 text-gray-300 hover:text-white">
245
+ <i class="fab fa-twitter"></i>
246
+ </a>
247
+ <a href="#" class="ml-6 text-gray-300 hover:text-white">
248
+ <i class="fab fa-instagram"></i>
249
+ </a>
250
+ </li>
251
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">support@snapfind.com</a></li>
252
+ <li><a href="#" class="text-base text-gray-300 hover:text-white">+1 (555) 123-4567</a></li>
253
+ </ul>
254
+ </div>
255
+ </div>
256
+ <div class="mt-12 border-t border-gray-700 pt-8">
257
+ <p class="text-base text-gray-400 text-center">
258
+ &copy; 2023 SnapFind, Inc. All rights reserved.
259
+ </p>
260
+ </div>
261
+ </div>
262
+ </footer>
263
+
264
+ <script>
265
+ // Mobile menu toggle functionality
266
+ document.addEventListener('DOMContentLoaded', function() {
267
+ const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]');
268
+ mobileMenuButton.addEventListener('click', function() {
269
+ const expanded = this.getAttribute('aria-expanded') === 'true';
270
+ this.setAttribute('aria-expanded', !expanded);
271
+ // Here you would toggle your mobile menu visibility
272
+ console.log('Mobile menu toggled');
273
+ });
274
+
275
+ // Animation for feature cards on scroll
276
+ const observerOptions = {
277
+ threshold: 0.1
278
+ };
279
+
280
+ const observer = new IntersectionObserver((entries) => {
281
+ entries.forEach(entry => {
282
+ if (entry.isIntersecting) {
283
+ entry.target.classList.add('animate-fadeInUp');
284
+ }
285
+ });
286
+ }, observerOptions);
287
+
288
+ document.querySelectorAll('.card-hover').forEach(card => {
289
+ observer.observe(card);
290
+ });
291
+ });
292
+ </script>
293
+ <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=acidsound/snapfind-front" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
294
+ </html>