Hugging Face's logo

Spaces:
shivansh123
/
vibe-code
Running

App Files Community
shivansh123 commited on
Commit
7eb96d9
·
verified ·
1 Parent(s): 7b7aed8

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +329 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vibe Code
3
- emoji: 🔥
4
- colorFrom: gray
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: vibe-code
3
+ emoji: 🐳
4
+ colorFrom: red
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,329 @@
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>Ansh Seth - Professional Unemployed</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
+ @keyframes trashFloat {
11
+ 0% { transform: translateY(0) rotate(0deg); }
12
+ 50% { transform: translateY(-20px) rotate(10deg); }
13
+ 100% { transform: translateY(0) rotate(0deg); }
14
+ }
15
+ @keyframes shake {
16
+ 0% { transform: translateX(0); }
17
+ 25% { transform: translateX(-5px); }
18
+ 50% { transform: translateX(5px); }
19
+ 75% { transform: translateX(-5px); }
20
+ 100% { transform: translateX(0); }
21
+ }
22
+ .trash-float {
23
+ animation: trashFloat 3s ease-in-out infinite;
24
+ }
25
+ .trash-bg {
26
+ background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="10" height="10" fill="%23333" opacity="0.1"/></svg>');
27
+ background-size: 20px 20px;
28
+ }
29
+ .fly {
30
+ position: absolute;
31
+ width: 8px;
32
+ height: 8px;
33
+ background-color: #000;
34
+ border-radius: 50%;
35
+ pointer-events: none;
36
+ }
37
+ .job-rejection {
38
+ background: repeating-linear-gradient(
39
+ 45deg,
40
+ #f0f0f0,
41
+ #f0f0f0 10px,
42
+ #e0e0e0 10px,
43
+ #e0e0e0 20px
44
+ );
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-200 min-h-screen overflow-x-hidden trash-bg">
49
+ <div class="container mx-auto px-4 py-8">
50
+ <!-- Flies floating around -->
51
+ <div id="flyContainer"></div>
52
+
53
+ <!-- Header -->
54
+ <header class="text-center mb-12 relative">
55
+ <div class="absolute -top-10 left-1/2 transform -translate-x-1/2">
56
+ <i class="fas fa-crow text-gray-700 text-4xl"></i>
57
+ </div>
58
+ <h1 class="text-5xl md:text-7xl font-bold text-gray-800 mb-2">
59
+ <span class="text-yellow-600">Ansh</span>
60
+ <span class="text-gray-600">Seth</span>
61
+ </h1>
62
+ <p class="text-xl text-gray-600">
63
+ <i class="fas fa-trash-alt mr-2"></i> Professional Unemployed
64
+ <i class="fas fa-trash-alt ml-2"></i>
65
+ </p>
66
+ <div class="mt-4">
67
+ <span class="inline-block bg-yellow-500 text-yellow-900 px-3 py-1 rounded-full text-sm font-semibold">
68
+ <i class="fas fa-skull-crossbones mr-1"></i> Currently Accepting Rejections
69
+ </span>
70
+ </div>
71
+ </header>
72
+
73
+ <!-- Main Content -->
74
+ <div class="flex flex-col lg:flex-row items-start justify-center gap-8 mb-12">
75
+ <!-- Profile Section -->
76
+ <div class="w-full lg:w-1/3 bg-gray-300 rounded-xl shadow-lg p-6 border-2 border-gray-400 relative overflow-hidden">
77
+ <div class="absolute top-0 right-0 bg-red-500 text-white px-3 py-1 text-xs font-bold transform rotate-12 translate-x-2 -translate-y-2">
78
+ TRASH TIER
79
+ </div>
80
+ <div class="text-center">
81
+ <div class="trash-float inline-block mb-4">
82
+ <img src="https://cdn-icons-png.flaticon.com/512/1141/1141119.png"
83
+ alt="Trash Can Ansh" class="w-32 h-32">
84
+ </div>
85
+ <h3 class="text-2xl font-bold text-gray-800 mb-2">Ansh "The Trash" Seth</h3>
86
+ <p class="text-gray-700 mb-4">
87
+ <i class="fas fa-map-marker-alt mr-2"></i> Mom's Basement, Unemploymentville
88
+ </p>
89
+ <div class="bg-gray-200 rounded-lg p-3 mb-4">
90
+ <p class="text-gray-800 font-semibold">
91
+ <i class="fas fa-quote-left text-gray-500 mr-1"></i>
92
+ "Why work when you can scroll?"
93
+ <i class="fas fa-quote-right text-gray-500 ml-1"></i>
94
+ </p>
95
+ </div>
96
+ <div class="flex justify-center space-x-4">
97
+ <a href="#" class="text-gray-700 hover:text-blue-500">
98
+ <i class="fab fa-linkedin text-2xl"></i>
99
+ </a>
100
+ <a href="#" class="text-gray-700 hover:text-pink-500">
101
+ <i class="fab fa-instagram text-2xl"></i>
102
+ </a>
103
+ <a href="#" class="text-gray-700 hover:text-blue-400">
104
+ <i class="fab fa-twitter text-2xl"></i>
105
+ </a>
106
+ </div>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Skills & Experience -->
111
+ <div class="w-full lg:w-2/3 space-y-6">
112
+ <!-- Unemployment Stats -->
113
+ <div class="bg-gray-300 rounded-xl shadow-lg p-6 border-2 border-gray-400">
114
+ <h3 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
115
+ <i class="fas fa-chart-line mr-2"></i> Unemployment Stats
116
+ </h3>
117
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
118
+ <div class="bg-gray-200 rounded-lg p-3 text-center">
119
+ <p class="text-3xl font-bold text-yellow-600">427</p>
120
+ <p class="text-gray-700 text-sm">Days Unemployed</p>
121
+ </div>
122
+ <div class="bg-gray-200 rounded-lg p-3 text-center">
123
+ <p class="text-3xl font-bold text-red-500">112</p>
124
+ <p class="text-gray-700 text-sm">Job Rejections</p>
125
+ </div>
126
+ <div class="bg-gray-200 rounded-lg p-3 text-center">
127
+ <p class="text-3xl font-bold text-green-600">3</p>
128
+ <p class="text-gray-700 text-sm">Interviews</p>
129
+ </div>
130
+ <div class="bg-gray-200 rounded-lg p-3 text-center">
131
+ <p class="text-3xl font-bold text-blue-500">∞</p>
132
+ <p class="text-gray-700 text-sm">Netflix Hours</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Special Skills -->
138
+ <div class="bg-gray-300 rounded-xl shadow-lg p-6 border-2 border-gray-400">
139
+ <h3 class="text-2xl font-bold text-gray-800 mb-4 flex items-center">
140
+ <i class="fas fa-star mr-2"></i> Special Skills
141
+ </h3>
142
+ <div class="space-y-3">
143
+ <div class="flex items-center">
144
+ <div class="bg-yellow-500 p-2 rounded-full mr-3">
145
+ <i class="fas fa-bed text-white"></i>
146
+ </div>
147
+ <div>
148
+ <h4 class="font-bold text-gray-800">Professional Napping</h4>
149
+ <p class="text-gray-700 text-sm">Can sleep through multiple alarms</p>
150
+ </div>
151
+ </div>
152
+ <div class="flex items-center">
153
+ <div class="bg-red-500 p-2 rounded-full mr-3">
154
+ <i class="fas fa-hamburger text-white"></i>
155
+ </div>
156
+ <div>
157
+ <h4 class="font-bold text-gray-800">Snack Consumption</h4>
158
+ <p class="text-gray-700 text-sm">Can finish family-size chips in one sitting</p>
159
+ </div>
160
+ </div>
161
+ <div class="flex items-center">
162
+ <div class="bg-blue-500 p-2 rounded-full mr-3">
163
+ <i class="fas fa-scroll text-white"></i>
164
+ </div>
165
+ <div>
166
+ <h4 class="font-bold text-gray-800">Excuse Generation</h4>
167
+ <p class="text-gray-700 text-sm">Creative reasons for not applying to jobs</p>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <!-- Job Rejection Wall -->
176
+ <div class="bg-white rounded-xl shadow-xl p-6 mb-12 job-rejection border-2 border-gray-300">
177
+ <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
178
+ <i class="fas fa-times-circle text-red-500 mr-2"></i> Wall of Rejections
179
+ </h3>
180
+ <div class="space-y-4">
181
+ <div class="flex items-start">
182
+ <div class="bg-red-100 p-3 rounded-full mr-3">
183
+ <i class="fas fa-times text-red-500"></i>
184
+ </div>
185
+ <div>
186
+ <h4 class="font-bold text-gray-800">Google - Janitorial Position</h4>
187
+ <p class="text-gray-700">"Overqualified for mopping floors"</p>
188
+ <p class="text-gray-500 text-sm">April 15, 2023</p>
189
+ </div>
190
+ </div>
191
+ <div class="flex items-start">
192
+ <div class="bg-red-100 p-3 rounded-full mr-3">
193
+ <i class="fas fa-times text-red-500"></i>
194
+ </div>
195
+ <div>
196
+ <h4 class="font-bold text-gray-800">McDonald's - Fry Cook</h4>
197
+ <p class="text-gray-700">"Lack of enthusiasm for french fries"</p>
198
+ <p class="text-gray-500 text-sm">March 3, 2023</p>
199
+ </div>
200
+ </div>
201
+ <div class="flex items-start">
202
+ <div class="bg-red-100 p-3 rounded-full mr-3">
203
+ <i class="fas fa-times text-red-500"></i>
204
+ </div>
205
+ <div>
206
+ <h4 class="font-bold text-gray-800">Local Library - Book Shelver</h4>
207
+ <p class="text-gray-700">"Too much napping in the aisles during interview"</p>
208
+ <p class="text-gray-500 text-sm">February 28, 2023</p>
209
+ </div>
210
+ </div>
211
+ <div class="text-center mt-4">
212
+ <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg inline-flex items-center">
213
+ <i class="fas fa-plus-circle mr-2"></i> Add Another Rejection
214
+ </button>
215
+ </div>
216
+ </div>
217
+ </div>
218
+
219
+ <!-- Daily Routine -->
220
+ <div class="bg-yellow-50 rounded-xl shadow-xl p-6 mb-12 border-2 border-yellow-300">
221
+ <h3 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
222
+ <i class="fas fa-calendar-day text-yellow-600 mr-2"></i> Daily Routine
223
+ </h3>
224
+ <div class="grid md:grid-cols-4 gap-4">
225
+ <div class="bg-white p-4 rounded-lg shadow border border-yellow-200">
226
+ <div class="text-yellow-600 mb-2">
227
+ <i class="fas fa-sun text-2xl"></i>
228
+ </div>
229
+ <h4 class="font-bold text-gray-800 mb-1">Morning</h4>
230
+ <p class="text-gray-700 text-sm">Wake up at noon, contemplate life choices</p>
231
+ </div>
232
+ <div class="bg-white p-4 rounded-lg shadow border border-yellow-200">
233
+ <div class="text-yellow-600 mb-2">
234
+ <i class="fas fa-hamburger text-2xl"></i>
235
+ </div>
236
+ <h4 class="font-bold text-gray-800 mb-1">Afternoon</h4>
237
+ <p class="text-gray-700 text-sm">Microwave lunch, watch YouTube</p>
238
+ </div>
239
+ <div class="bg-white p-4 rounded-lg shadow border border-yellow-200">
240
+ <div class="text-yellow-600 mb-2">
241
+ <i class="fas fa-couch text-2xl"></i>
242
+ </div>
243
+ <h4 class="font-bold text-gray-800 mb-1">Evening</h4>
244
+ <p class="text-gray-700 text-sm">Lie on couch, apply to 0 jobs</p>
245
+ </div>
246
+ <div class="bg-white p-4 rounded-lg shadow border border-yellow-200">
247
+ <div class="text-yellow-600 mb-2">
248
+ <i class="fas fa-moon text-2xl"></i>
249
+ </div>
250
+ <h4 class="font-bold text-gray-800 mb-1">Night</h4>
251
+ <p class="text-gray-700 text-sm">Stay up late gaming, regret next morning</p>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Footer -->
257
+ <footer class="text-center text-gray-600 bg-gray-300 p-4 rounded-lg">
258
+ <p>© 2023 Ansh Seth - Professional Unemployed Person</p>
259
+ <p class="mt-2 text-sm">
260
+ <i class="fas fa-trash-alt mr-1"></i>
261
+ This website is as useless as my job prospects
262
+ <i class="fas fa-trash-alt ml-1"></i>
263
+ </p>
264
+ <div class="mt-4">
265
+ <button id="complainBtn" class="bg-gray-400 hover:bg-gray-500 text-gray-800 font-bold py-2 px-4 rounded-lg inline-flex items-center">
266
+ <i class="fas fa-comment-dots mr-2"></i> Complain About Unemployment
267
+ </button>
268
+ </div>
269
+ </footer>
270
+ </div>
271
+
272
+ <script>
273
+ // Create floating flies
274
+ function createFlies() {
275
+ const container = document.getElementById('flyContainer');
276
+ const flyCount = 5;
277
+
278
+ for (let i = 0; i < flyCount; i++) {
279
+ const fly = document.createElement('div');
280
+ fly.className = 'fly';
281
+
282
+ // Random position
283
+ const left = Math.random() * 100;
284
+ const top = Math.random() * 100;
285
+ fly.style.left = `${left}%`;
286
+ fly.style.top = `${top}%`;
287
+
288
+ // Random animation
289
+ const duration = Math.random() * 5 + 3;
290
+ const delay = Math.random() * 5;
291
+ fly.style.animation = `flyMove ${duration}s linear ${delay}s infinite`;
292
+
293
+ container.appendChild(fly);
294
+ }
295
+ }
296
+
297
+ // Fly movement animation
298
+ const style = document.createElement('style');
299
+ style.innerHTML = `
300
+ @keyframes flyMove {
301
+ 0% { transform: translate(0, 0); }
302
+ 25% { transform: translate(${Math.random() * 100}px, ${Math.random() * 100}px); }
303
+ 50% { transform: translate(${Math.random() * 100}px, ${Math.random() * 100}px); }
304
+ 75% { transform: translate(${Math.random() * 100}px, ${Math.random() * 100}px); }
305
+ 100% { transform: translate(0, 0); }
306
+ }
307
+ `;
308
+ document.head.appendChild(style);
309
+
310
+ // Complain button effect
311
+ document.getElementById('complainBtn').addEventListener('click', function() {
312
+ this.classList.add('animate-pulse');
313
+ this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Complaining...';
314
+
315
+ setTimeout(() => {
316
+ this.classList.remove('animate-pulse');
317
+ this.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Complaint Ignored!';
318
+
319
+ setTimeout(() => {
320
+ this.innerHTML = '<i class="fas fa-comment-dots mr-2"></i> Complain About Unemployment';
321
+ }, 2000);
322
+ }, 1500);
323
+ });
324
+
325
+ // Initialize
326
+ createFlies();
327
+ </script>
328
+ <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=shivansh123/vibe-code" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
329
+ </html>