eyesss commited on
Commit
0bc4955
·
verified ·
1 Parent(s): 6ba7702

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +403 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Space
3
- emoji:
4
- colorFrom: green
5
  colorTo: yellow
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: space
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: yellow
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,403 @@
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>Outfit Manager | Daily Style Dashboard</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
+ .outfit-card:hover .outfit-actions {
11
+ opacity: 1;
12
+ }
13
+ .weather-icon {
14
+ filter: drop-shadow(0 0 2px rgba(255,255,255,0.7));
15
+ }
16
+ .clothing-item {
17
+ transition: all 0.3s ease;
18
+ }
19
+ .clothing-item:hover {
20
+ transform: scale(1.05);
21
+ z-index: 10;
22
+ }
23
+ .calendar-day.active {
24
+ background-color: #6366f1;
25
+ color: white;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="bg-gray-50 font-sans">
30
+ <div class="min-h-screen flex">
31
+ <!-- Sidebar -->
32
+ <div class="w-64 bg-indigo-800 text-white p-4 hidden md:block">
33
+ <div class="flex items-center space-x-2 mb-8">
34
+ <i class="fas fa-tshirt text-2xl text-indigo-300"></i>
35
+ <h1 class="text-xl font-bold">Outfit Manager</h1>
36
+ </div>
37
+ <nav>
38
+ <ul class="space-y-2">
39
+ <li>
40
+ <a href="#" class="flex items-center space-x-2 p-2 rounded bg-indigo-700">
41
+ <i class="fas fa-calendar-day w-5"></i>
42
+ <span>Today's Outfit</span>
43
+ </a>
44
+ </li>
45
+ <li>
46
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-700">
47
+ <i class="fas fa-archive w-5"></i>
48
+ <span>Wardrobe</span>
49
+ </a>
50
+ </li>
51
+ <li>
52
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-700">
53
+ <i class="fas fa-calendar-alt w-5"></i>
54
+ <span>Outfit Planner</span>
55
+ </a>
56
+ </li>
57
+ <li>
58
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-700">
59
+ <i class="fas fa-chart-line w-5"></i>
60
+ <span>Statistics</span>
61
+ </a>
62
+ </li>
63
+ <li>
64
+ <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-indigo-700">
65
+ <i class="fas fa-cog w-5"></i>
66
+ <span>Settings</span>
67
+ </a>
68
+ </li>
69
+ </ul>
70
+ </nav>
71
+ <div class="mt-auto pt-8">
72
+ <div class="bg-indigo-900 p-4 rounded-lg">
73
+ <h3 class="font-medium mb-2">Outfit Inspiration</h3>
74
+ <p class="text-sm text-indigo-300">"A great outfit is like a good day - it starts with the right foundation."</p>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <!-- Main Content -->
80
+ <div class="flex-1 p-6 overflow-auto">
81
+ <!-- Header -->
82
+ <header class="flex justify-between items-center mb-8">
83
+ <div class="md:hidden">
84
+ <button class="text-gray-600">
85
+ <i class="fas fa-bars text-2xl"></i>
86
+ </button>
87
+ </div>
88
+ <h1 class="text-2xl font-bold text-gray-800">Today's Outfit</h1>
89
+ <div class="flex items-center space-x-4">
90
+ <div class="relative">
91
+ <i class="fas fa-bell text-gray-500 text-xl"></i>
92
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
93
+ </div>
94
+ <div class="flex items-center space-x-2">
95
+ <div class="h-8 w-8 rounded-full bg-indigo-600 flex items-center justify-center text-white font-medium">JD</div>
96
+ <span class="hidden md:inline">Jane Doe</span>
97
+ </div>
98
+ </div>
99
+ </header>
100
+
101
+ <!-- Weather and Date Info -->
102
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
103
+ <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between">
104
+ <div>
105
+ <h3 class="text-gray-500 text-sm">Today</h3>
106
+ <p class="text-2xl font-bold text-gray-800">June 14, 2023</p>
107
+ </div>
108
+ <div class="text-4xl">
109
+ <i class="fas fa-calendar-alt text-indigo-500"></i>
110
+ </div>
111
+ </div>
112
+ <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between">
113
+ <div>
114
+ <h3 class="text-gray-500 text-sm">Weather</h3>
115
+ <p class="text-2xl font-bold text-gray-800">Sunny, 24°C</p>
116
+ </div>
117
+ <div class="text-4xl weather-icon">
118
+ <i class="fas fa-sun text-yellow-400"></i>
119
+ </div>
120
+ </div>
121
+ <div class="bg-white rounded-xl shadow p-6 flex items-center justify-between">
122
+ <div>
123
+ <h3 class="text-gray-500 text-sm">Occasion</h3>
124
+ <p class="text-2xl font-bold text-gray-800">Work Day</p>
125
+ </div>
126
+ <div class="text-4xl">
127
+ <i class="fas fa-briefcase text-indigo-500"></i>
128
+ </div>
129
+ </div>
130
+ </div>
131
+
132
+ <!-- Main Outfit Display -->
133
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
134
+ <!-- Selected Outfit -->
135
+ <div class="lg:col-span-2 bg-white rounded-xl shadow overflow-hidden">
136
+ <div class="p-4 border-b border-gray-100 flex justify-between items-center">
137
+ <h2 class="text-lg font-semibold text-gray-800">Your Outfit for Today</h2>
138
+ <button class="text-indigo-600 hover:text-indigo-800">
139
+ <i class="fas fa-random"></i> Shuffle
140
+ </button>
141
+ </div>
142
+ <div class="p-6">
143
+ <div class="relative bg-gray-100 rounded-lg h-64 flex items-center justify-center">
144
+ <div class="absolute inset-0 flex items-center justify-center">
145
+ <div class="text-gray-300 text-6xl">
146
+ <i class="fas fa-user"></i>
147
+ </div>
148
+ </div>
149
+ <div class="relative z-10 grid grid-cols-3 gap-4 w-full max-w-md">
150
+ <!-- Top -->
151
+ <div class="col-span-3 flex justify-center">
152
+ <div class="clothing-item bg-white p-3 rounded-lg shadow-md border border-indigo-200 transform hover:scale-105">
153
+ <div class="h-24 w-24 bg-indigo-100 rounded flex items-center justify-center">
154
+ <i class="fas fa-tshirt text-indigo-500 text-3xl"></i>
155
+ </div>
156
+ <p class="text-xs text-center mt-1">Silk Blouse</p>
157
+ </div>
158
+ </div>
159
+ <!-- Bottom -->
160
+ <div class="col-start-2 flex justify-center">
161
+ <div class="clothing-item bg-white p-3 rounded-lg shadow-md border border-indigo-200 transform hover:scale-105">
162
+ <div class="h-24 w-24 bg-indigo-100 rounded flex items-center justify-center">
163
+ <i class="fas fa-vest text-indigo-500 text-3xl"></i>
164
+ </div>
165
+ <p class="text-xs text-center mt-1">Tailored Pants</p>
166
+ </div>
167
+ </div>
168
+ <!-- Shoes -->
169
+ <div class="col-span-3 flex justify-center">
170
+ <div class="clothing-item bg-white p-3 rounded-lg shadow-md border border-indigo-200 transform hover:scale-105">
171
+ <div class="h-24 w-24 bg-indigo-100 rounded flex items-center justify-center">
172
+ <i class="fas fa-shoe-prints text-indigo-500 text-3xl"></i>
173
+ </div>
174
+ <p class="text-xs text-center mt-1">Leather Loafers</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ <div class="mt-4 flex justify-between items-center">
180
+ <div>
181
+ <span class="inline-block px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">Professional</span>
182
+ <span class="inline-block px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Comfortable</span>
183
+ </div>
184
+ <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2">
185
+ <i class="fas fa-check"></i>
186
+ <span>Confirm Outfit</span>
187
+ </button>
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <!-- Outfit Suggestions -->
193
+ <div class="bg-white rounded-xl shadow overflow-hidden">
194
+ <div class="p-4 border-b border-gray-100">
195
+ <h2 class="text-lg font-semibold text-gray-800">Suggested Outfits</h2>
196
+ </div>
197
+ <div class="p-4 space-y-4">
198
+ <div class="outfit-card relative bg-gray-50 rounded-lg p-3 border border-gray-200 hover:border-indigo-300">
199
+ <div class="flex space-x-3">
200
+ <div class="flex-shrink-0">
201
+ <div class="h-12 w-12 bg-indigo-100 rounded flex items-center justify-center">
202
+ <i class="fas fa-tshirt text-indigo-500"></i>
203
+ </div>
204
+ </div>
205
+ <div class="flex-1 min-w-0">
206
+ <p class="text-sm font-medium text-gray-900">Casual Friday</p>
207
+ <p class="text-xs text-gray-500">Jeans + Blouse + Sneakers</p>
208
+ </div>
209
+ </div>
210
+ <div class="outfit-actions absolute top-2 right-2 opacity-0 transition-opacity duration-200 flex space-x-1">
211
+ <button class="p-1 text-indigo-600 hover:text-indigo-800">
212
+ <i class="fas fa-eye text-xs"></i>
213
+ </button>
214
+ <button class="p-1 text-indigo-600 hover:text-indigo-800">
215
+ <i class="fas fa-check text-xs"></i>
216
+ </button>
217
+ </div>
218
+ </div>
219
+ <div class="outfit-card relative bg-gray-50 rounded-lg p-3 border border-gray-200 hover:border-indigo-300">
220
+ <div class="flex space-x-3">
221
+ <div class="flex-shrink-0">
222
+ <div class="h-12 w-12 bg-indigo-100 rounded flex items-center justify-center">
223
+ <i class="fas fa-tshirt text-indigo-500"></i>
224
+ </div>
225
+ </div>
226
+ <div class="flex-1 min-w-0">
227
+ <p class="text-sm font-medium text-gray-900">Business Formal</p>
228
+ <p class="text-xs text-gray-500">Blazer + Dress + Heels</p>
229
+ </div>
230
+ </div>
231
+ <div class="outfit-actions absolute top-2 right-2 opacity-0 transition-opacity duration-200 flex space-x-1">
232
+ <button class="p-1 text-indigo-600 hover:text-indigo-800">
233
+ <i class="fas fa-eye text-xs"></i>
234
+ </button>
235
+ <button class="p-1 text-indigo-600 hover:text-indigo-800">
236
+ <i class="fas fa-check text-xs"></i>
237
+ </button>
238
+ </div>
239
+ </div>
240
+ <div class="outfit-card relative bg-gray-50 rounded-lg p-3 border border-gray-200 hover:border-indigo-300">
241
+ <div class="flex space-x-3">
242
+ <div class="flex-shrink-0">
243
+ <div class="h-12 w-12 bg-indigo-100 rounded flex items-center justify-center">
244
+ <i class="fas fa-tshirt text-indigo-500"></i>
245
+ </div>
246
+ </div>
247
+ <div class="flex-1 min-w-0">
248
+ <p class="text-sm font-medium text-gray-900">Smart Casual</p>
249
+ <p class="text-xs text-gray-500">Shirt + Chinos + Loafers</p>
250
+ </div>
251
+ </div>
252
+ <div class="outfit-actions absolute top-2 right-2 opacity-0 transition-opacity duration-200 flex space-x-1">
253
+ <button class="p-1 text-indigo-600 hover:text-indigo-800">
254
+ <i class="fas fa-eye text-xs"></i>
255
+ </button>
256
+ <button class="p-1 text-indigo-600 hover:text-indigo-800">
257
+ <i class="fas fa-check text-xs"></i>
258
+ </button>
259
+ </div>
260
+ </div>
261
+ <button class="w-full py-2 border-2 border-dashed border-gray-300 rounded-lg text-gray-500 hover:text-indigo-600 hover:border-indigo-300 flex items-center justify-center space-x-2">
262
+ <i class="fas fa-plus"></i>
263
+ <span>Generate More</span>
264
+ </button>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Weekly Planner -->
270
+ <div class="bg-white rounded-xl shadow overflow-hidden mb-8">
271
+ <div class="p-4 border-b border-gray-100 flex justify-between items-center">
272
+ <h2 class="text-lg font-semibold text-gray-800">Weekly Outfit Planner</h2>
273
+ <button class="text-indigo-600 hover:text-indigo-800 flex items-center space-x-1">
274
+ <i class="fas fa-plus"></i>
275
+ <span>Add Event</span>
276
+ </button>
277
+ </div>
278
+ <div class="p-6">
279
+ <div class="grid grid-cols-7 gap-2 mb-4">
280
+ <div class="text-center font-medium text-gray-500 text-sm">Sun</div>
281
+ <div class="text-center font-medium text-gray-500 text-sm">Mon</div>
282
+ <div class="text-center font-medium text-gray-500 text-sm">Tue</div>
283
+ <div class="text-center font-medium text-gray-500 text-sm">Wed</div>
284
+ <div class="text-center font-medium text-gray-500 text-sm">Thu</div>
285
+ <div class="text-center font-medium text-gray-500 text-sm">Fri</div>
286
+ <div class="text-center font-medium text-gray-500 text-sm">Sat</div>
287
+ </div>
288
+ <div class="grid grid-cols-7 gap-2">
289
+ <div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50">
290
+ <div class="text-xs font-medium">11</div>
291
+ </div>
292
+ <div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50">
293
+ <div class="text-xs font-medium">12</div>
294
+ </div>
295
+ <div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50">
296
+ <div class="text-xs font-medium">13</div>
297
+ </div>
298
+ <div class="calendar-day active h-24 p-2 rounded-lg border border-indigo-300 text-center cursor-pointer bg-indigo-100">
299
+ <div class="text-xs font-medium">14</div>
300
+ <div class="mt-1 text-xs bg-white rounded p-1 truncate">Work Day</div>
301
+ </div>
302
+ <div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50">
303
+ <div class="text-xs font-medium">15</div>
304
+ <div class="mt-1 text-xs bg-indigo-100 rounded p-1 truncate">Meeting</div>
305
+ </div>
306
+ <div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50">
307
+ <div class="text-xs font-medium">16</div>
308
+ <div class="mt-1 text-xs bg-green-100 rounded p-1 truncate">Casual Friday</div>
309
+ </div>
310
+ <div class="calendar-day h-24 p-2 rounded-lg border border-gray-200 text-center cursor-pointer hover:bg-gray-50">
311
+ <div class="text-xs font-medium">17</div>
312
+ <div class="mt-1 text-xs bg-yellow-100 rounded p-1 truncate">Weekend</div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Recent Activity -->
319
+ <div class="bg-white rounded-xl shadow overflow-hidden">
320
+ <div class="p-4 border-b border-gray-100">
321
+ <h2 class="text-lg font-semibold text-gray-800">Recent Activity</h2>
322
+ </div>
323
+ <div class="divide-y divide-gray-200">
324
+ <div class="p-4 flex space-x-4">
325
+ <div class="flex-shrink-0">
326
+ <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
327
+ <i class="fas fa-tshirt text-indigo-500"></i>
328
+ </div>
329
+ </div>
330
+ <div class="flex-1">
331
+ <p class="text-sm font-medium text-gray-900">Added new item</p>
332
+ <p class="text-sm text-gray-500">Silk blouse added to wardrobe</p>
333
+ <p class="text-xs text-gray-400 mt-1">2 hours ago</p>
334
+ </div>
335
+ </div>
336
+ <div class="p-4 flex space-x-4">
337
+ <div class="flex-shrink-0">
338
+ <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
339
+ <i class="fas fa-calendar-check text-green-500"></i>
340
+ </div>
341
+ </div>
342
+ <div class="flex-1">
343
+ <p class="text-sm font-medium text-gray-900">Outfit planned</p>
344
+ <p class="text-sm text-gray-500">Business casual for Thursday</p>
345
+ <p class="text-xs text-gray-400 mt-1">Yesterday</p>
346
+ </div>
347
+ </div>
348
+ <div class="p-4 flex space-x-4">
349
+ <div class="flex-shrink-0">
350
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
351
+ <i class="fas fa-cloud-sun text-blue-500"></i>
352
+ </div>
353
+ </div>
354
+ <div class="flex-1">
355
+ <p class="text-sm font-medium text-gray-900">Weather update</p>
356
+ <p class="text-sm text-gray-500">Forecast changed to sunny for Friday</p>
357
+ <p class="text-xs text-gray-400 mt-1">2 days ago</p>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <script>
366
+ // Simple interactivity
367
+ document.addEventListener('DOMContentLoaded', function() {
368
+ // Calendar day selection
369
+ const calendarDays = document.querySelectorAll('.calendar-day');
370
+ calendarDays.forEach(day => {
371
+ day.addEventListener('click', function() {
372
+ calendarDays.forEach(d => d.classList.remove('active', 'bg-indigo-100', 'border-indigo-300'));
373
+ this.classList.add('active', 'bg-indigo-100', 'border-indigo-300');
374
+ });
375
+ });
376
+
377
+ // Outfit card hover actions
378
+ const outfitCards = document.querySelectorAll('.outfit-card');
379
+ outfitCards.forEach(card => {
380
+ card.addEventListener('mouseenter', function() {
381
+ this.querySelector('.outfit-actions').style.opacity = '1';
382
+ });
383
+ card.addEventListener('mouseleave', function() {
384
+ this.querySelector('.outfit-actions').style.opacity = '0';
385
+ });
386
+ });
387
+
388
+ // Clothing item hover effect
389
+ const clothingItems = document.querySelectorAll('.clothing-item');
390
+ clothingItems.forEach(item => {
391
+ item.addEventListener('mouseenter', function() {
392
+ this.style.transform = 'scale(1.05)';
393
+ this.style.zIndex = '10';
394
+ });
395
+ item.addEventListener('mouseleave', function() {
396
+ this.style.transform = 'scale(1)';
397
+ this.style.zIndex = '1';
398
+ });
399
+ });
400
+ });
401
+ </script>
402
+ <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=eyesss/space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
403
+ </html>
prompts.txt ADDED
File without changes