Hugging Face's logo

Spaces:
W3cgymnott
/
nothing
Running

App Files Community
W3cgymnott commited on
Commit
d7d3e9e
·
verified ·
1 Parent(s): 69349b2

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +329 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nothing
3
- emoji: 😻
4
- colorFrom: purple
5
- colorTo: gray
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: nothing
3
+ emoji: 🐳
4
+ colorFrom: pink
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,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>NOTHING™ - The Art of Boredom</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 fadePulse {
11
+ 0%, 100% { opacity: 0.3; }
12
+ 50% { opacity: 0.7; }
13
+ }
14
+ .empty-box {
15
+ position: relative;
16
+ overflow: hidden;
17
+ }
18
+ .empty-box::after {
19
+ content: "";
20
+ position: absolute;
21
+ top: 0;
22
+ left: 0;
23
+ right: 0;
24
+ bottom: 0;
25
+ background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.15) 100%);
26
+ animation: fadePulse 8s infinite ease-in-out;
27
+ }
28
+ .cursor-trail {
29
+ position: fixed;
30
+ width: 20px;
31
+ height: 20px;
32
+ border-radius: 50%;
33
+ background: rgba(255,255,255,0.2);
34
+ pointer-events: none;
35
+ transform: translate(-50%, -50%);
36
+ z-index: 9999;
37
+ mix-blend-mode: overlay;
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="bg-black text-white font-mono min-h-screen overflow-x-hidden">
42
+ <!-- Cursor trail elements -->
43
+ <div id="cursor-trail-container"></div>
44
+
45
+ <!-- Header -->
46
+ <header class="border-b border-gray-800 py-6 px-8 flex justify-between items-center">
47
+ <div class="text-2xl font-bold tracking-widest">
48
+ <span class="text-gray-400">NOTHING</span><span class="text-white">™</span>
49
+ </div>
50
+ <nav class="hidden md:flex space-x-8">
51
+ <a href="#" class="hover:text-gray-400 transition">VOID</a>
52
+ <a href="#" class="hover:text-gray-400 transition">EMPTINESS</a>
53
+ <a href="#" class="hover:text-gray-400 transition">BOREDOM</a>
54
+ <a href="#" class="hover:text-gray-400 transition">FAQ</a>
55
+ </nav>
56
+ <div class="flex items-center space-x-4">
57
+ <button class="hover:text-gray-400 transition">
58
+ <i class="fas fa-shopping-bag"></i>
59
+ </button>
60
+ <button class="md:hidden hover:text-gray-400 transition">
61
+ <i class="fas fa-bars"></i>
62
+ </button>
63
+ </div>
64
+ </header>
65
+
66
+ <!-- Hero Section -->
67
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
68
+ <div class="absolute inset-0 flex items-center justify-center">
69
+ <div class="empty-box w-full h-full max-w-4xl mx-auto flex items-center justify-center">
70
+ <div class="text-center px-4">
71
+ <h1 class="text-6xl md:text-8xl font-thin mb-6 tracking-tighter">NOTHING™</h1>
72
+ <p class="text-gray-400 mb-8 text-lg md:text-xl max-w-2xl mx-auto">
73
+ The world's first store dedicated to selling pure, unadulterated boredom.
74
+ Experience the void like never before.
75
+ </p>
76
+ <button class="border border-gray-600 px-8 py-3 hover:bg-white hover:text-black transition duration-500">
77
+ EXPLORE THE VOID
78
+ </button>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <div class="absolute bottom-8 left-0 right-0 text-center animate-bounce">
83
+ <i class="fas fa-chevron-down text-gray-500"></i>
84
+ </div>
85
+ </section>
86
+
87
+ <!-- Products Section -->
88
+ <section class="py-20 px-8">
89
+ <h2 class="text-3xl text-center mb-16 tracking-widest">OUR COLLECTION OF NOTHING</h2>
90
+
91
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
92
+ <!-- Product 1 -->
93
+ <div class="empty-box border border-gray-800 p-8 hover:border-gray-600 transition duration-500">
94
+ <div class="h-64 mb-6 flex items-center justify-center">
95
+ <i class="fas fa-box-open text-6xl text-gray-600"></i>
96
+ </div>
97
+ <h3 class="text-xl mb-2">BASIC NOTHING</h3>
98
+ <p class="text-gray-400 mb-4">A starter pack of pure emptiness. Perfect for beginners.</p>
99
+ <div class="flex justify-between items-center">
100
+ <span class="text-2xl">$19.99</span>
101
+ <button class="border border-gray-600 px-4 py-1 hover:bg-white hover:text-black transition">
102
+ ADD TO VOID
103
+ </button>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Product 2 -->
108
+ <div class="empty-box border border-gray-800 p-8 hover:border-gray-600 transition duration-500">
109
+ <div class="h-64 mb-6 flex items-center justify-center">
110
+ <i class="fas fa-wind text-6xl text-gray-600"></i>
111
+ </div>
112
+ <h3 class="text-xl mb-2">PREMIUM NOTHING</h3>
113
+ <p class="text-gray-400 mb-4">Our best-selling package of absolute nothingness.</p>
114
+ <div class="flex justify-between items-center">
115
+ <span class="text-2xl">$49.99</span>
116
+ <button class="border border-gray-600 px-4 py-1 hover:bg-white hover:text-black transition">
117
+ ADD TO VOID
118
+ </button>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Product 3 -->
123
+ <div class="empty-box border border-gray-800 p-8 hover:border-gray-600 transition duration-500">
124
+ <div class="h-64 mb-6 flex items-center justify-center">
125
+ <i class="fas fa-infinity text-6xl text-gray-600"></i>
126
+ </div>
127
+ <h3 class="text-xl mb-2">INFINITE NOTHING</h3>
128
+ <p class="text-gray-400 mb-4">A lifetime supply of complete and utter boredom.</p>
129
+ <div class="flex justify-between items-center">
130
+ <span class="text-2xl">$999.99</span>
131
+ <button class="border border-gray-600 px-4 py-1 hover:bg-white hover:text-black transition">
132
+ ADD TO VOID
133
+ </button>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </section>
138
+
139
+ <!-- Features Section -->
140
+ <section class="py-20 px-8 bg-gray-900">
141
+ <div class="max-w-6xl mx-auto">
142
+ <h2 class="text-3xl text-center mb-16 tracking-widest">WHY CHOOSE NOTHING?</h2>
143
+
144
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
145
+ <div class="text-center">
146
+ <div class="empty-box w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center border border-gray-700">
147
+ <i class="fas fa-clock text-2xl text-gray-400"></i>
148
+ </div>
149
+ <h3 class="text-xl mb-3">TIMELESS DESIGN</h3>
150
+ <p class="text-gray-400">
151
+ Our nothing never goes out of style because it never had any style to begin with.
152
+ </p>
153
+ </div>
154
+
155
+ <div class="text-center">
156
+ <div class="empty-box w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center border border-gray-700">
157
+ <i class="fas fa-leaf text-2xl text-gray-400"></i>
158
+ </div>
159
+ <h3 class="text-xl mb-3">ECO-FRIENDLY</h3>
160
+ <p class="text-gray-400">
161
+ Zero materials used means zero environmental impact. The ultimate in sustainability.
162
+ </p>
163
+ </div>
164
+
165
+ <div class="text-center">
166
+ <div class="empty-box w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center border border-gray-700">
167
+ <i class="fas fa-heart text-2xl text-gray-400"></i>
168
+ </div>
169
+ <h3 class="text-xl mb-3">UNIVERSAL FIT</h3>
170
+ <p class="text-gray-400">
171
+ Our nothing fits everyone perfectly because it doesn't exist in physical space.
172
+ </p>
173
+ </div>
174
+ </div>
175
+ </div>
176
+ </section>
177
+
178
+ <!-- Testimonials -->
179
+ <section class="py-20 px-8">
180
+ <div class="max-w-4xl mx-auto">
181
+ <h2 class="text-3xl text-center mb-16 tracking-widest">VOID REVIEWS</h2>
182
+
183
+ <div class="empty-box border border-gray-800 p-8 mb-8">
184
+ <div class="flex items-start mb-4">
185
+ <div class="text-gray-400 mr-4">★★★★★</div>
186
+ <div>
187
+ <h3 class="font-bold">Life-Changing Emptiness</h3>
188
+ <p class="text-sm text-gray-400">Verified Nothing™ Owner</p>
189
+ </div>
190
+ </div>
191
+ <p class="text-gray-300">
192
+ "I purchased the Infinite Nothing package and my life has never been the same.
193
+ Or rather, it's exactly the same, but now I have official documentation proving
194
+ that nothing matters. Worth every penny of non-existent currency."
195
+ </p>
196
+ </div>
197
+
198
+ <div class="empty-box border border-gray-800 p-8">
199
+ <div class="flex items-start mb-4">
200
+ <div class="text-gray-400 mr-4">★★★★☆</div>
201
+ <div>
202
+ <h3 class="font-bold">Almost Perfect Nothingness</h3>
203
+ <p class="text-sm text-gray-400">Basic Nothing™ User</p>
204
+ </div>
205
+ </div>
206
+ <p class="text-gray-300">
207
+ "The Basic Nothing is great, but I could still sense a faint hint of meaning
208
+ when I first opened the package. Customer service assured me this was just
209
+ my imagination and refunded me 0% of my purchase price."
210
+ </p>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- Newsletter -->
216
+ <section class="py-16 px-8 bg-gray-900">
217
+ <div class="max-w-2xl mx-auto text-center">
218
+ <h2 class="text-2xl mb-4">SUBSCRIBE TO OUR NOTHINGSLETTER</h2>
219
+ <p class="text-gray-400 mb-8">
220
+ Receive absolutely nothing in your inbox on a regular basis.
221
+ We promise not to send you anything of value.
222
+ </p>
223
+ <div class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
224
+ <input
225
+ type="email"
226
+ placeholder="your@email.nothing"
227
+ class="flex-grow bg-black border border-gray-700 px-4 py-2 focus:outline-none focus:border-gray-500"
228
+ >
229
+ <button class="border border-gray-600 px-6 py-2 hover:bg-white hover:text-black transition">
230
+ SUBSCRIBE
231
+ </button>
232
+ </div>
233
+ </div>
234
+ </section>
235
+
236
+ <!-- Footer -->
237
+ <footer class="border-t border-gray-800 py-12 px-8">
238
+ <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
239
+ <div>
240
+ <h3 class="text-xl mb-4">NOTHING™</h3>
241
+ <p class="text-gray-400">
242
+ The premier destination for high-quality nothingness since never.
243
+ </p>
244
+ </div>
245
+ <div>
246
+ <h3 class="text-gray-400 mb-4">SHOP</h3>
247
+ <ul class="space-y-2">
248
+ <li><a href="#" class="hover:text-gray-400 transition">All Products</a></li>
249
+ <li><a href="#" class="hover:text-gray-400 transition">New Nothing</a></li>
250
+ <li><a href="#" class="hover:text-gray-400 transition">Best Sellers</a></li>
251
+ <li><a href="#" class="hover:text-gray-400 transition">Limited Edition Void</a></li>
252
+ </ul>
253
+ </div>
254
+ <div>
255
+ <h3 class="text-gray-400 mb-4">ABOUT</h3>
256
+ <ul class="space-y-2">
257
+ <li><a href="#" class="hover:text-gray-400 transition">Our Story</a></li>
258
+ <li><a href="#" class="hover:text-gray-400 transition">Philosophy</a></li>
259
+ <li><a href="#" class="hover:text-gray-400 transition">Careers (Just Kidding)</a></li>
260
+ <li><a href="#" class="hover:text-gray-400 transition">Press (Silence)</a></li>
261
+ </ul>
262
+ </div>
263
+ <div>
264
+ <h3 class="text-gray-400 mb-4">CONNECT</h3>
265
+ <div class="flex space-x-4 mb-4">
266
+ <a href="#" class="hover:text-gray-400 transition"><i class="fab fa-twitter"></i></a>
267
+ <a href="#" class="hover:text-gray-400 transition"><i class="fab fa-instagram"></i></a>
268
+ <a href="#" class="hover:text-gray-400 transition"><i class="fab fa-tiktok"></i></a>
269
+ <a href="#" class="hover:text-gray-400 transition"><i class="fab fa-discord"></i></a>
270
+ </div>
271
+ <p class="text-gray-400 text-sm">
272
+ © 2023 NOTHING™. All rights unreserved.<br>
273
+ Void where prohibited. Or even where not prohibited.
274
+ </p>
275
+ </div>
276
+ </div>
277
+ </footer>
278
+
279
+ <!-- Cursor trail effect -->
280
+ <script>
281
+ document.addEventListener('DOMContentLoaded', () => {
282
+ const container = document.getElementById('cursor-trail-container');
283
+ const trails = 10; // Number of trailing elements
284
+ const trailElements = [];
285
+
286
+ // Create trail elements
287
+ for (let i = 0; i < trails; i++) {
288
+ const trail = document.createElement('div');
289
+ trail.className = 'cursor-trail';
290
+ trail.style.width = `${20 - (i * 1.5)}px`;
291
+ trail.style.height = `${20 - (i * 1.5)}px`;
292
+ trail.style.opacity = `${1 - (i * 0.09)}`;
293
+ container.appendChild(trail);
294
+ trailElements.push(trail);
295
+ }
296
+
297
+ // Track mouse position
298
+ let mouseX = 0;
299
+ let mouseY = 0;
300
+ const posX = new Array(trails).fill(0);
301
+ const posY = new Array(trails).fill(0);
302
+
303
+ document.addEventListener('mousemove', (e) => {
304
+ mouseX = e.clientX;
305
+ mouseY = e.clientY;
306
+ });
307
+
308
+ // Animate trail elements
309
+ function updateTrails() {
310
+ for (let i = 0; i < trails; i++) {
311
+ const nextIndex = i === 0 ? 0 : i - 1;
312
+ posX[i] += (posX[nextIndex] - posX[i]) * 0.3;
313
+ posY[i] += (posY[nextIndex] - posY[i]) * 0.3;
314
+
315
+ trailElements[i].style.left = `${posX[i]}px`;
316
+ trailElements[i].style.top = `${posY[i]}px`;
317
+ }
318
+
319
+ posX[0] = mouseX;
320
+ posY[0] = mouseY;
321
+
322
+ requestAnimationFrame(updateTrails);
323
+ }
324
+
325
+ updateTrails();
326
+ });
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=W3cgymnott/nothing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
329
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ create a futuristic "nothing store" that sells boredom