Hugging Face's logo

Spaces:
Judemon
/
ansteck
Running

App Files Community
Judemon commited on
Commit
eaaf0e4
路
verified 路
1 Parent(s): 689a18c

Create sample of Facebook replication with professional web developer touches - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +365 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ansteck
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: ansteck
3
+ emoji: 馃惓
4
+ colorFrom: gray
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,366 @@
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>SocialSphere | Connect with Friends</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
+ .custom-scrollbar::-webkit-scrollbar {
14
+ width: 6px;
15
+ }
16
+ .custom-scrollbar::-webkit-scrollbar-track {
17
+ background: #f1f1f1;
18
+ }
19
+ .custom-scrollbar::-webkit-scrollbar-thumb {
20
+ background: #888;
21
+ border-radius: 3px;
22
+ }
23
+ .custom-scrollbar::-webkit-scrollbar-thumb:hover {
24
+ background: #555;
25
+ }
26
+ .gradient-text {
27
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
28
+ -webkit-background-clip: text;
29
+ background-clip: text;
30
+ color: transparent;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-100 font-sans antialiased">
35
+ <!-- Navbar -->
36
+ <nav class="bg-white shadow-sm fixed w-full z-10">
37
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
38
+ <div class="flex justify-between h-16">
39
+ <div class="flex items-center">
40
+ <div class="flex-shrink-0 flex items-center">
41
+ <h1 class="text-xl font-bold gradient-text">SocialSphere</h1>
42
+ </div>
43
+ </div>
44
+ <div class="flex items-center">
45
+ <div class="hidden md:ml-6 md:flex md:space-x-8">
46
+ <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
47
+ <i data-feather="home" class="mr-1"></i> Home
48
+ </a>
49
+ <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">
50
+ <i data-feather="users" class="mr-1"></i> Friends
51
+ </a>
52
+ <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">
53
+ <i data-feather="bell" class="mr-1"></i> Notifications
54
+ </a>
55
+ </div>
56
+ </div>
57
+ <div class="flex items-center">
58
+ <div class="flex-shrink-0">
59
+ <div class="relative">
60
+ <input type="text" placeholder="Search SocialSphere" class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white w-64">
61
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500"></i>
62
+ </div>
63
+ </div>
64
+ <div class="ml-4 flex items-center md:ml-6">
65
+ <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
66
+ <i data-feather="message-circle"></i>
67
+ </button>
68
+ <div class="ml-3 relative">
69
+ <div>
70
+ <button type="button" class="max-w-xs bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" id="user-menu">
71
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile">
72
+ </button>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Main Content -->
82
+ <div class="max-w-7xl mx-auto pt-20 pb-10 px-4 sm:px-6 lg:px-8">
83
+ <div class="grid grid-cols-1 md:grid-cols-12 gap-6">
84
+ <!-- Left Sidebar -->
85
+ <div class="md:col-span-3">
86
+ <div class="bg-white rounded-lg shadow p-4 sticky top-24">
87
+ <div class="flex items-center mb-6">
88
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile">
89
+ <span class="ml-3 font-medium">John Doe</span>
90
+ </div>
91
+ <nav class="space-y-2">
92
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
93
+ <i data-feather="user" class="w-5 h-5"></i>
94
+ <span class="ml-3">Profile</span>
95
+ </a>
96
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
97
+ <i data-feather="users" class="w-5 h-5"></i>
98
+ <span class="ml-3">Friends</span>
99
+ </a>
100
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
101
+ <i data-feather="image" class="w-5 h-5"></i>
102
+ <span class="ml-3">Photos</span>
103
+ </a>
104
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
105
+ <i data-feather="calendar" class="w-5 h-5"></i>
106
+ <span class="ml-3">Events</span>
107
+ </a>
108
+ <a href="#" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
109
+ <i data-feather="bookmark" class="w-5 h-5"></i>
110
+ <span class="ml-3">Saved</span>
111
+ </a>
112
+ </nav>
113
+ </div>
114
+ </div>
115
+
116
+ <!-- Main Feed -->
117
+ <div class="md:col-span-6 space-y-4">
118
+ <!-- Create Post -->
119
+ <div class="bg-white rounded-lg shadow p-4">
120
+ <div class="flex items-start">
121
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile">
122
+ <input type="text" placeholder="What's on your mind?" class="ml-3 flex-1 bg-gray-100 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white">
123
+ </div>
124
+ <div class="flex justify-between mt-4 pt-4 border-t">
125
+ <button class="flex items-center text-gray-500 hover:bg-gray-100 px-4 py-2 rounded-lg">
126
+ <i data-feather="video" class="text-red-500 mr-2"></i> Live Video
127
+ </button>
128
+ <button class="flex items-center text-gray-500 hover:bg-gray-100 px-4 py-2 rounded-lg">
129
+ <i data-feather="image" class="text-green-500 mr-2"></i> Photo/Video
130
+ </button>
131
+ <button class="flex items-center text-gray-500 hover:bg-gray-100 px-4 py-2 rounded-lg">
132
+ <i data-feather="smile" class="text-yellow-500 mr-2"></i> Feeling/Activity
133
+ </button>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Stories -->
138
+ <div class="bg-white rounded-lg shadow p-4 overflow-hidden">
139
+ <div class="flex space-x-2 overflow-x-auto pb-2 custom-scrollbar">
140
+ <div class="flex-shrink-0 relative rounded-lg overflow-hidden w-32 h-48">
141
+ <img class="w-full h-full object-cover" src="http://static.photos/travel/320x240/1" alt="Story">
142
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
143
+ <div class="absolute top-2 left-2 border-4 border-blue-500 rounded-full">
144
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile">
145
+ </div>
146
+ <p class="text-white text-sm font-medium">Create Story</p>
147
+ </div>
148
+ </div>
149
+ <div class="flex-shrink-0 relative rounded-lg overflow-hidden w-32 h-48">
150
+ <img class="w-full h-full object-cover" src="http://static.photos/travel/320x240/2" alt="Story">
151
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
152
+ <div class="absolute top-2 left-2 border-4 border-blue-500 rounded-full">
153
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/43" alt="Profile">
154
+ </div>
155
+ <p class="text-white text-sm font-medium">Jane Smith</p>
156
+ </div>
157
+ </div>
158
+ <div class="flex-shrink-0 relative rounded-lg overflow-hidden w-32 h-48">
159
+ <img class="w-full h-full object-cover" src="http://static.photos/travel/320x240/3" alt="Story">
160
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
161
+ <div class="absolute top-2 left-2 border-4 border-blue-500 rounded-full">
162
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/44" alt="Profile">
163
+ </div>
164
+ <p class="text-white text-sm font-medium">Mike Johnson</p>
165
+ </div>
166
+ </div>
167
+ <div class="flex-shrink-0 relative rounded-lg overflow-hidden w-32 h-48">
168
+ <img class="w-full h-full object-cover" src="http://static.photos/travel/320x240/4" alt="Story">
169
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
170
+ <div class="absolute top-2 left-2 border-4 border-blue-500 rounded-full">
171
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/45" alt="Profile">
172
+ </div>
173
+ <p class="text-white text-sm font-medium">Sarah Williams</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <!-- Post -->
180
+ <div class="bg-white rounded-lg shadow" data-aos="fade-up">
181
+ <div class="p-4">
182
+ <div class="flex items-center justify-between">
183
+ <div class="flex items-center">
184
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/43" alt="Profile">
185
+ <div class="ml-3">
186
+ <p class="font-medium">Jane Smith</p>
187
+ <p class="text-gray-500 text-sm">2 hrs ago 路 <i data-feather="globe" class="w-3 h-3 inline"></i></p>
188
+ </div>
189
+ </div>
190
+ <button class="text-gray-500 hover:text-gray-700">
191
+ <i data-feather="more-horizontal"></i>
192
+ </button>
193
+ </div>
194
+ <p class="mt-3">Just visited this amazing place! The views were breathtaking. Can't wait to go back again soon!</p>
195
+ <img class="mt-3 w-full rounded-lg" src="http://static.photos/travel/640x360/5" alt="Post">
196
+ </div>
197
+ <div class="px-4 py-2 border-t border-b">
198
+ <div class="flex items-center justify-between text-gray-500">
199
+ <button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded">
200
+ <i data-feather="thumbs-up" class="w-4 h-4"></i>
201
+ <span>Like</span>
202
+ </button>
203
+ <button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded">
204
+ <i data-feather="message-square" class="w-4 h-4"></i>
205
+ <span>Comment</span>
206
+ </button>
207
+ <button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded">
208
+ <i data-feather="share-2" class="w-4 h-4"></i>
209
+ <span>Share</span>
210
+ </button>
211
+ </div>
212
+ </div>
213
+ <div class="p-4">
214
+ <div class="flex items-center">
215
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/44" alt="Profile">
216
+ <input type="text" placeholder="Write a comment..." class="ml-3 flex-1 bg-gray-100 rounded-full px-4 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white">
217
+ </div>
218
+ </div>
219
+ </div>
220
+
221
+ <!-- Post 2 -->
222
+ <div class="bg-white rounded-lg shadow" data-aos="fade-up">
223
+ <div class="p-4">
224
+ <div class="flex items-center justify-between">
225
+ <div class="flex items-center">
226
+ <img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/44" alt="Profile">
227
+ <div class="ml-3">
228
+ <p class="font-medium">Mike Johnson</p>
229
+ <p class="text-gray-500 text-sm">5 hrs ago 路 <i data-feather="users" class="w-3 h-3 inline"></i></p>
230
+ </div>
231
+ </div>
232
+ <button class="text-gray-500 hover:text-gray-700">
233
+ <i data-feather="more-horizontal"></i>
234
+ </button>
235
+ </div>
236
+ <p class="mt-3">Check out this new recipe I tried today! It turned out amazing and was super easy to make.</p>
237
+ <div class="mt-3 grid grid-cols-2 gap-2">
238
+ <img class="w-full rounded-lg" src="http://static.photos/food/320x240/6" alt="Food">
239
+ <img class="w-full rounded-lg" src="http://static.photos/food/320x240/7" alt="Food">
240
+ </div>
241
+ </div>
242
+ <div class="px-4 py-2 border-t border-b">
243
+ <div class="flex items-center justify-between text-gray-500">
244
+ <button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded">
245
+ <i data-feather="thumbs-up" class="w-4 h-4"></i>
246
+ <span>Like</span>
247
+ </button>
248
+ <button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded">
249
+ <i data-feather="message-square" class="w-4 h-4"></i>
250
+ <span>Comment</span>
251
+ </button>
252
+ <button class="flex items-center space-x-1 hover:bg-gray-100 px-2 py-1 rounded">
253
+ <i data-feather="share-2" class="w-4 h-4"></i>
254
+ <span>Share</span>
255
+ </button>
256
+ </div>
257
+ </div>
258
+ <div class="p-4">
259
+ <div class="flex items-center">
260
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/42" alt="Profile">
261
+ <input type="text" placeholder="Write a comment..." class="ml-3 flex-1 bg-gray-100 rounded-full px-4 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white">
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Right Sidebar -->
268
+ <div class="md:col-span-3 space-y-4">
269
+ <!-- Sponsored -->
270
+ <div class="bg-white rounded-lg shadow p-4">
271
+ <h3 class="font-medium text-gray-900 mb-3">Sponsored</h3>
272
+ <div class="space-y-3">
273
+ <a href="#" class="flex items-start">
274
+ <img class="h-20 w-20 rounded-lg object-cover" src="http://static.photos/retail/200x200/1" alt="Ad">
275
+ <div class="ml-3">
276
+ <p class="text-sm font-medium">Summer Sale - Up to 50% Off</p>
277
+ <p class="text-xs text-gray-500">example.com</p>
278
+ </div>
279
+ </a>
280
+ <a href="#" class="flex items-start">
281
+ <img class="h-20 w-20 rounded-lg object-cover" src="http://static.photos/retail/200x200/2" alt="Ad">
282
+ <div class="ml-3">
283
+ <p class="text-sm font-medium">New Collection Just Dropped</p>
284
+ <p class="text-xs text-gray-500">fashionbrand.com</p>
285
+ </div>
286
+ </a>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Birthdays -->
291
+ <div class="bg-white rounded-lg shadow p-4">
292
+ <h3 class="font-medium text-gray-900 mb-3">Birthdays</h3>
293
+ <div class="flex items-center">
294
+ <i data-feather="gift" class="text-pink-500 mr-2"></i>
295
+ <p class="text-sm"><span class="font-medium">Sarah Williams</span> and <span class="font-medium">2 others</span> have birthdays today.</p>
296
+ </div>
297
+ </div>
298
+
299
+ <!-- Contacts -->
300
+ <div class="bg-white rounded-lg shadow p-4">
301
+ <div class="flex items-center justify-between mb-3">
302
+ <h3 class="font-medium text-gray-900">Contacts</h3>
303
+ <div class="flex space-x-2">
304
+ <button class="text-gray-500 hover:text-gray-700">
305
+ <i data-feather="video" class="w-5 h-5"></i>
306
+ </button>
307
+ <button class="text-gray-500 hover:text-gray-700">
308
+ <i data-feather="search" class="w-5 h-5"></i>
309
+ </button>
310
+ <button class="text-gray-500 hover:text-gray-700">
311
+ <i data-feather="more-horizontal" class="w-5 h-5"></i>
312
+ </button>
313
+ </div>
314
+ </div>
315
+ <div class="space-y-3 max-h-96 overflow-y-auto custom-scrollbar">
316
+ <div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer">
317
+ <div class="relative">
318
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/45" alt="Profile">
319
+ <span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 border border-white"></span>
320
+ </div>
321
+ <span class="ml-3 text-sm">Sarah Williams</span>
322
+ </div>
323
+ <div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer">
324
+ <div class="relative">
325
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/46" alt="Profile">
326
+ <span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 border border-white"></span>
327
+ </div>
328
+ <span class="ml-3 text-sm">David Brown</span>
329
+ </div>
330
+ <div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer">
331
+ <div class="relative">
332
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/47" alt="Profile">
333
+ <span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-gray-500 border border-white"></span>
334
+ </div>
335
+ <span class="ml-3 text-sm">Emily Davis</span>
336
+ </div>
337
+ <div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer">
338
+ <div class="relative">
339
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/48" alt="Profile">
340
+ <span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 border border-white"></span>
341
+ </div>
342
+ <span class="ml-3 text-sm">Robert Wilson</span>
343
+ </div>
344
+ <div class="flex items-center hover:bg-gray-100 p-1 rounded-lg cursor-pointer">
345
+ <div class="relative">
346
+ <img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/49" alt="Profile">
347
+ <span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-gray-500 border border-white"></span>
348
+ </div>
349
+ <span class="ml-3 text-sm">Jennifer Lee</span>
350
+ </div>
351
+ </div>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <script>
358
+ AOS.init({
359
+ duration: 800,
360
+ easing: 'ease-in-out',
361
+ once: true
362
+ });
363
+ </script>
364
+ <script>feather.replace();</script>
365
+ </body>
366
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Create sample of Facebook replication with professional web developer touches