Hugging Face's logo

Spaces:
syd24
/
sey
Running

App Files Community
syd24 commited on
Commit
736021a
·
verified ·
1 Parent(s): 8c0a814

انشى تطبيق مثل facecheck.id - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +292 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sey
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: indigo
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: sey
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
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,293 @@
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" dir="rtl">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FaceCheck - AI Facial Recognition</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ .hero-gradient {
14
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
15
+ }
16
+ .camera-container {
17
+ position: relative;
18
+ width: 100%;
19
+ max-width: 500px;
20
+ margin: 0 auto;
21
+ border-radius: 16px;
22
+ overflow: hidden;
23
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
24
+ }
25
+ .camera-placeholder {
26
+ width: 100%;
27
+ padding-bottom: 75%;
28
+ background-color: #f3f4f6;
29
+ position: relative;
30
+ }
31
+ .camera-button {
32
+ position: absolute;
33
+ bottom: 20px;
34
+ left: 50%;
35
+ transform: translateX(-50%);
36
+ width: 60px;
37
+ height: 60px;
38
+ border-radius: 50%;
39
+ background-color: white;
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
44
+ cursor: pointer;
45
+ transition: all 0.3s ease;
46
+ }
47
+ .camera-button:hover {
48
+ transform: translateX(-50%) scale(1.05);
49
+ }
50
+ .result-card {
51
+ transition: all 0.3s ease;
52
+ }
53
+ .result-card:hover {
54
+ transform: translateY(-5px);
55
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
56
+ }
57
+ </style>
58
+ </head>
59
+ <body class="bg-gray-50 font-sans">
60
+ <!-- Navigation -->
61
+ <nav class="bg-white shadow-sm">
62
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
63
+ <div class="flex justify-between h-16">
64
+ <div class="flex items-center">
65
+ <div class="flex-shrink-0 flex items-center">
66
+ <i data-feather="eye" class="text-indigo-600 h-8 w-8"></i>
67
+ <span class="ml-2 text-xl font-bold text-gray-900">FaceCheck</span>
68
+ </div>
69
+ </div>
70
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
71
+ <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
72
+ <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">How it works</a>
73
+ <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">Pricing</a>
74
+ <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">About</a>
75
+ </div>
76
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
77
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</button>
78
+ </div>
79
+ <div class="-mr-2 flex items-center sm:hidden">
80
+ <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-indigo-500">
81
+ <i data-feather="menu" class="block h-6 w-6"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ </nav>
87
+
88
+ <!-- Hero Section -->
89
+ <div class="hero-gradient text-white">
90
+ <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
91
+ <div class="text-center">
92
+ <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl" data-aos="fade-down">
93
+ AI-Powered Facial Recognition
94
+ </h1>
95
+ <p class="mt-6 max-w-lg mx-auto text-xl" data-aos="fade-up" data-aos-delay="100">
96
+ Upload a photo or use your camera to find matches across the web with our advanced facial recognition technology.
97
+ </p>
98
+ <div class="mt-10" data-aos="fade-up" data-aos-delay="200">
99
+ <div class="camera-container">
100
+ <div class="camera-placeholder">
101
+ <div class="absolute inset-0 flex items-center justify-center">
102
+ <i data-feather="camera" class="h-16 w-16 text-gray-400"></i>
103
+ </div>
104
+ <div class="camera-button">
105
+ <i data-feather="camera" class="h-6 w-6 text-indigo-600"></i>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ <div class="mt-8 flex justify-center" data-aos="fade-up" data-aos-delay="300">
111
+ <button class="bg-white text-indigo-600 px-6 py-3 rounded-md font-medium mr-4 flex items-center">
112
+ <i data-feather="upload" class="mr-2"></i> Upload Photo
113
+ </button>
114
+ <button class="bg-indigo-700 hover:bg-indigo-800 text-white px-6 py-3 rounded-md font-medium flex items-center">
115
+ <i data-feather="camera" class="mr-2"></i> Use Camera
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- How It Works -->
123
+ <div class="py-16 bg-white">
124
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
125
+ <div class="lg:text-center">
126
+ <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase" data-aos="fade-down">How it works</h2>
127
+ <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl" data-aos="fade-down" data-aos-delay="100">
128
+ Simple and Powerful Facial Recognition
129
+ </p>
130
+ </div>
131
+
132
+ <div class="mt-10">
133
+ <div class="space-y-10 md:space-y-0 md:grid md:grid-cols-3 md:gap-x-8 md:gap-y-10">
134
+ <div class="relative" data-aos="fade-up" data-aos-delay="100">
135
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
136
+ <i data-feather="upload"></i>
137
+ </div>
138
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">1. Upload a photo</p>
139
+ <p class="mt-2 ml-16 text-base text-gray-500">
140
+ Upload a clear photo of a face you want to search for matches across the web.
141
+ </p>
142
+ </div>
143
+
144
+ <div class="relative" data-aos="fade-up" data-aos-delay="200">
145
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
146
+ <i data-feather="cpu"></i>
147
+ </div>
148
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">2. AI Processing</p>
149
+ <p class="mt-2 ml-16 text-base text-gray-500">
150
+ Our advanced AI analyzes facial features and searches through millions of images.
151
+ </p>
152
+ </div>
153
+
154
+ <div class="relative" data-aos="fade-up" data-aos-delay="300">
155
+ <div class="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
156
+ <i data-feather="list"></i>
157
+ </div>
158
+ <p class="ml-16 text-lg leading-6 font-medium text-gray-900">3. Get Results</p>
159
+ <p class="mt-2 ml-16 text-base text-gray-500">
160
+ Receive a detailed report with potential matches and where they appear online.
161
+ </p>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <!-- Results Preview -->
169
+ <div class="py-16 bg-gray-50">
170
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
171
+ <div class="text-center">
172
+ <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl" data-aos="fade-down">
173
+ See FaceCheck in Action
174
+ </h2>
175
+ <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto" data-aos="fade-down" data-aos-delay="100">
176
+ Our technology finds matches across social media, news sites, and public databases.
177
+ </p>
178
+ </div>
179
+
180
+ <div class="mt-12 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
181
+ <div class="result-card bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="100">
182
+ <img class="w-full h-48 object-cover" src="http://static.photos/people/640x360/1" alt="Sample result">
183
+ <div class="p-6">
184
+ <div class="flex items-center">
185
+ <span class="inline-block px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded-full">85% Match</span>
186
+ <span class="ml-2 text-xs text-gray-500">Social Media</span>
187
+ </div>
188
+ <h3 class="mt-2 text-lg font-medium text-gray-900">John Doe</h3>
189
+ <p class="mt-1 text-sm text-gray-500">Found on 3 social media profiles</p>
190
+ <div class="mt-4 flex justify-between items-center">
191
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">View Details</button>
192
+ <span class="text-xs text-gray-500">2 days ago</span>
193
+ </div>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="result-card bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="200">
198
+ <img class="w-full h-48 object-cover" src="http://static.photos/people/640x360/2" alt="Sample result">
199
+ <div class="p-6">
200
+ <div class="flex items-center">
201
+ <span class="inline-block px-2 py-1 text-xs font-semibold text-yellow-800 bg-yellow-100 rounded-full">72% Match</span>
202
+ <span class="ml-2 text-xs text-gray-500">News Article</span>
203
+ </div>
204
+ <h3 class="mt-2 text-lg font-medium text-gray-900">Jane Smith</h3>
205
+ <p class="mt-1 text-sm text-gray-500">Mentioned in local news</p>
206
+ <div class="mt-4 flex justify-between items-center">
207
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">View Details</button>
208
+ <span class="text-xs text-gray-500">1 week ago</span>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <div class="result-card bg-white rounded-lg shadow-md overflow-hidden" data-aos="fade-up" data-aos-delay="300">
214
+ <img class="w-full h-48 object-cover" src="http://static.photos/people/640x360/3" alt="Sample result">
215
+ <div class="p-6">
216
+ <div class="flex items-center">
217
+ <span class="inline-block px-2 py-1 text-xs font-semibold text-blue-800 bg-blue-100 rounded-full">91% Match</span>
218
+ <span class="ml-2 text-xs text-gray-500">Professional Site</span>
219
+ </div>
220
+ <h3 class="mt-2 text-lg font-medium text-gray-900">Robert Johnson</h3>
221
+ <p class="mt-1 text-sm text-gray-500">Company profile found</p>
222
+ <div class="mt-4 flex justify-between items-center">
223
+ <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium">View Details</button>
224
+ <span class="text-xs text-gray-500">3 months ago</span>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- CTA Section -->
233
+ <div class="bg-indigo-700">
234
+ <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
235
+ <h2 class="text-3xl font-extrabold text-white sm:text-4xl" data-aos="fade-down">
236
+ <span class="block">Ready to find matches?</span>
237
+ <span class="block">Start using FaceCheck today.</span>
238
+ </h2>
239
+ <p class="mt-4 text-lg leading-6 text-indigo-200" data-aos="fade-up" data-aos-delay="100">
240
+ Our advanced facial recognition technology helps you find matches across the web in seconds.
241
+ </p>
242
+ <button class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto" data-aos="fade-up" data-aos-delay="200">
243
+ Get Started - It's Free
244
+ </button>
245
+ </div>
246
+ </div>
247
+
248
+ <!-- Footer -->
249
+ <footer class="bg-white">
250
+ <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
251
+ <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
252
+ <div class="px-5 py-2">
253
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">About</a>
254
+ </div>
255
+ <div class="px-5 py-2">
256
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">Privacy</a>
257
+ </div>
258
+ <div class="px-5 py-2">
259
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">Terms</a>
260
+ </div>
261
+ <div class="px-5 py-2">
262
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">FAQ</a>
263
+ </div>
264
+ <div class="px-5 py-2">
265
+ <a href="#" class="text-base text-gray-500 hover:text-gray-900">Contact</a>
266
+ </div>
267
+ </nav>
268
+ <div class="mt-8 flex justify-center space-x-6">
269
+ <a href="#" class="text-gray-400 hover:text-gray-500">
270
+ <i data-feather="twitter" class="h-6 w-6"></i>
271
+ </a>
272
+ <a href="#" class="text-gray-400 hover:text-gray-500">
273
+ <i data-feather="facebook" class="h-6 w-6"></i>
274
+ </a>
275
+ <a href="#" class="text-gray-400 hover:text-gray-500">
276
+ <i data-feather="instagram" class="h-6 w-6"></i>
277
+ </a>
278
+ <a href="#" class="text-gray-400 hover:text-gray-500">
279
+ <i data-feather="github" class="h-6 w-6"></i>
280
+ </a>
281
+ </div>
282
+ <p class="mt-8 text-center text-base text-gray-400">
283
+ &copy; 2023 FaceCheck. All rights reserved.
284
+ </p>
285
+ </div>
286
+ </footer>
287
+
288
+ <script>
289
+ AOS.init();
290
+ feather.replace();
291
+ </script>
292
+ </body>
293
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ انشى تطبيق مثل facecheck.id