Hugging Face's logo

Spaces:
dmoedbeck
/
neontweet
Running

App Files Community
dmoedbeck commited on
Commit
c2c850a
路
verified 路
1 Parent(s): 6a41401

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +410 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Neontweet
3
- emoji: 馃樆
4
- colorFrom: red
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: neontweet
3
+ emoji: 馃惓
4
+ colorFrom: yellow
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,410 @@
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>NeonTweet - Twitter Style WebApp</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
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Orbitron', sans-serif;
14
+ background-color: #0a0a0a;
15
+ color: #e0e0e0;
16
+ }
17
+
18
+ .neon-green {
19
+ color: #00ff9d;
20
+ text-shadow: 0 0 5px #00ff9d, 0 0 10px #00ff9d;
21
+ }
22
+
23
+ .neon-blue {
24
+ color: #00e1ff;
25
+ text-shadow: 0 0 5px #00e1ff, 0 0 10px #00e1ff;
26
+ }
27
+
28
+ .neon-border-green {
29
+ border: 1px solid #00ff9d;
30
+ box-shadow: 0 0 10px #00ff9d, inset 0 0 10px #00ff9d;
31
+ }
32
+
33
+ .neon-border-blue {
34
+ border: 1px solid #00e1ff;
35
+ box-shadow: 0 0 10px #00e1ff, inset 0 0 10px #00e1ff;
36
+ }
37
+
38
+ .neon-bg-green {
39
+ background-color: rgba(0, 255, 157, 0.1);
40
+ }
41
+
42
+ .neon-bg-blue {
43
+ background-color: rgba(0, 225, 255, 0.1);
44
+ }
45
+
46
+ .neon-btn-green {
47
+ background-color: rgba(0, 255, 157, 0.2);
48
+ border: 1px solid #00ff9d;
49
+ color: #00ff9d;
50
+ transition: all 0.3s;
51
+ }
52
+
53
+ .neon-btn-green:hover {
54
+ background-color: rgba(0, 255, 157, 0.4);
55
+ box-shadow: 0 0 15px #00ff9d;
56
+ }
57
+
58
+ .neon-btn-blue {
59
+ background-color: rgba(0, 225, 255, 0.2);
60
+ border: 1px solid #00e1ff;
61
+ color: #00e1ff;
62
+ transition: all 0.3s;
63
+ }
64
+
65
+ .neon-btn-blue:hover {
66
+ background-color: rgba(0, 225, 255, 0.4);
67
+ box-shadow: 0 0 15px #00e1ff;
68
+ }
69
+
70
+ .neon-textarea {
71
+ background-color: rgba(20, 20, 20, 0.8);
72
+ border: 1px solid #00e1ff;
73
+ color: #e0e0e0;
74
+ transition: all 0.3s;
75
+ }
76
+
77
+ .neon-textarea:focus {
78
+ outline: none;
79
+ box-shadow: 0 0 10px #00e1ff;
80
+ }
81
+
82
+ .pulse {
83
+ animation: pulse 2s infinite;
84
+ }
85
+
86
+ @keyframes pulse {
87
+ 0% {
88
+ opacity: 0.7;
89
+ }
90
+ 50% {
91
+ opacity: 1;
92
+ }
93
+ 100% {
94
+ opacity: 0.7;
95
+ }
96
+ }
97
+
98
+ .glow {
99
+ animation: glow 3s infinite alternate;
100
+ }
101
+
102
+ @keyframes glow {
103
+ from {
104
+ text-shadow: 0 0 5px #00ff9d, 0 0 10px #00ff9d;
105
+ }
106
+ to {
107
+ text-shadow: 0 0 10px #00ff9d, 0 0 20px #00ff9d, 0 0 30px #00ff9d;
108
+ }
109
+ }
110
+ </style>
111
+ </head>
112
+ <body class="min-h-screen">
113
+ <div class="container mx-auto max-w-6xl">
114
+ <!-- Header -->
115
+ <header class="flex justify-between items-center p-4 neon-border-green rounded-lg mt-4 neon-bg-green">
116
+ <div class="flex items-center space-x-2">
117
+ <i class="fas fa-bolt neon-blue text-2xl"></i>
118
+ <h1 class="text-2xl font-bold neon-green glow">NeonTweet</h1>
119
+ </div>
120
+ <div class="flex items-center space-x-4">
121
+ <button class="px-4 py-2 rounded-full neon-btn-green">
122
+ <i class="fas fa-home mr-2"></i> Home
123
+ </button>
124
+ <button class="px-4 py-2 rounded-full neon-btn-blue">
125
+ <i class="fas fa-user mr-2"></i> Profile
126
+ </button>
127
+ <div class="relative">
128
+ <img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full neon-border-blue cursor-pointer">
129
+ <div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full pulse"></div>
130
+ </div>
131
+ </div>
132
+ </header>
133
+
134
+ <!-- Main Content -->
135
+ <div class="flex mt-6 space-x-6">
136
+ <!-- Left Sidebar -->
137
+ <div class="w-1/4 neon-bg-blue neon-border-blue rounded-lg p-4 h-fit">
138
+ <div class="flex items-center space-x-3 mb-6">
139
+ <img src="https://via.placeholder.com/60" alt="Profile" class="w-12 h-12 rounded-full neon-border-green">
140
+ <div>
141
+ <h3 class="font-bold neon-green">NeonUser</h3>
142
+ <p class="text-xs text-gray-400">@neonuser</p>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="space-y-4">
147
+ <div class="flex items-center space-x-3 neon-btn-blue p-2 rounded-lg cursor-pointer">
148
+ <i class="fas fa-hashtag"></i>
149
+ <span>Explore</span>
150
+ </div>
151
+ <div class="flex items-center space-x-3 neon-btn-green p-2 rounded-lg cursor-pointer">
152
+ <i class="fas fa-bell"></i>
153
+ <span>Notifications</span>
154
+ </div>
155
+ <div class="flex items-center space-x-3 neon-btn-blue p-2 rounded-lg cursor-pointer">
156
+ <i class="fas fa-envelope"></i>
157
+ <span>Messages</span>
158
+ </div>
159
+ <div class="flex items-center space-x-3 neon-btn-green p-2 rounded-lg cursor-pointer">
160
+ <i class="fas fa-bookmark"></i>
161
+ <span>Bookmarks</span>
162
+ </div>
163
+ <div class="flex items-center space-x-3 neon-btn-blue p-2 rounded-lg cursor-pointer">
164
+ <i class="fas fa-list"></i>
165
+ <span>Lists</span>
166
+ </div>
167
+ </div>
168
+
169
+ <button class="w-full mt-6 py-2 rounded-full neon-btn-green font-bold">
170
+ <i class="fas fa-feather-alt mr-2"></i> Tweet
171
+ </button>
172
+ </div>
173
+
174
+ <!-- Middle Feed -->
175
+ <div class="w-2/4 space-y-4">
176
+ <!-- Tweet Composer -->
177
+ <div class="neon-border-blue rounded-lg p-4 neon-bg-blue">
178
+ <div class="flex space-x-3">
179
+ <img src="https://via.placeholder.com/50" alt="Profile" class="w-12 h-12 rounded-full neon-border-green">
180
+ <textarea class="w-full neon-textarea rounded-lg p-3 resize-none" placeholder="What's happening in the neon world?"></textarea>
181
+ </div>
182
+ <div class="flex justify-between items-center mt-4">
183
+ <div class="flex space-x-4">
184
+ <i class="fas fa-image neon-blue cursor-pointer hover:text-green-400"></i>
185
+ <i class="fas fa-poll neon-blue cursor-pointer hover:text-green-400"></i>
186
+ <i class="fas fa-smile neon-blue cursor-pointer hover:text-green-400"></i>
187
+ <i class="fas fa-calendar-alt neon-blue cursor-pointer hover:text-green-400"></i>
188
+ </div>
189
+ <button class="px-4 py-2 rounded-full neon-btn-green font-bold">
190
+ Tweet
191
+ </button>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Tweets Feed -->
196
+ <div class="space-y-4">
197
+ <!-- Tweet 1 -->
198
+ <div class="neon-border-green rounded-lg p-4 neon-bg-green">
199
+ <div class="flex space-x-3">
200
+ <img src="https://via.placeholder.com/50" alt="Profile" class="w-12 h-12 rounded-full neon-border-blue">
201
+ <div class="flex-1">
202
+ <div class="flex items-center space-x-2">
203
+ <span class="font-bold neon-blue">CyberPunk</span>
204
+ <span class="text-gray-400 text-sm">@cyberpunk</span>
205
+ <span class="text-gray-400 text-sm">路 2h</span>
206
+ </div>
207
+ <p class="mt-1">Just discovered this amazing neon cityscape. The colors are out of this world! #NeonVibes</p>
208
+ <div class="mt-3 flex justify-between text-gray-400">
209
+ <div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer">
210
+ <i class="far fa-comment"></i>
211
+ <span>24</span>
212
+ </div>
213
+ <div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer">
214
+ <i class="fas fa-retweet"></i>
215
+ <span>56</span>
216
+ </div>
217
+ <div class="flex items-center space-x-1 hover:text-pink-400 cursor-pointer">
218
+ <i class="far fa-heart"></i>
219
+ <span>128</span>
220
+ </div>
221
+ <div class="flex items-center space-x-1 hover:text-blue-400 cursor-pointer">
222
+ <i class="fas fa-share"></i>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Tweet 2 -->
230
+ <div class="neon-border-blue rounded-lg p-4 neon-bg-blue">
231
+ <div class="flex space-x-3">
232
+ <img src="https://via.placeholder.com/50" alt="Profile" class="w-12 h-12 rounded-full neon-border-green">
233
+ <div class="flex-1">
234
+ <div class="flex items-center space-x-2">
235
+ <span class="font-bold neon-green">TechGuru</span>
236
+ <span class="text-gray-400 text-sm">@techguru</span>
237
+ <span class="text-gray-400 text-sm">路 4h</span>
238
+ </div>
239
+ <p class="mt-1">The future of UI is here with these amazing neon designs. The contrast and glow effects create such an immersive experience!</p>
240
+ <div class="mt-3 flex justify-between text-gray-400">
241
+ <div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer">
242
+ <i class="far fa-comment"></i>
243
+ <span>42</span>
244
+ </div>
245
+ <div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer">
246
+ <i class="fas fa-retweet"></i>
247
+ <span>89</span>
248
+ </div>
249
+ <div class="flex items-center space-x-1 hover:text-pink-400 cursor-pointer">
250
+ <i class="far fa-heart"></i>
251
+ <span>256</span>
252
+ </div>
253
+ <div class="flex items-center space-x-1 hover:text-blue-400 cursor-pointer">
254
+ <i class="fas fa-share"></i>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Tweet 3 -->
262
+ <div class="neon-border-green rounded-lg p-4 neon-bg-green">
263
+ <div class="flex space-x-3">
264
+ <img src="https://via.placeholder.com/50" alt="Profile" class="w-12 h-12 rounded-full neon-border-blue">
265
+ <div class="flex-1">
266
+ <div class="flex items-center space-x-2">
267
+ <span class="font-bold neon-blue">DesignMaster</span>
268
+ <span class="text-gray-400 text-sm">@designmaster</span>
269
+ <span class="text-gray-400 text-sm">路 6h</span>
270
+ </div>
271
+ <p class="mt-1">Working on a new cyberpunk-inspired project. The combination of black backgrounds with neon green and blue accents is just perfect for that futuristic feel.</p>
272
+ <div class="mt-3 flex justify-between text-gray-400">
273
+ <div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer">
274
+ <i class="far fa-comment"></i>
275
+ <span>18</span>
276
+ </div>
277
+ <div class="flex items-center space-x-1 hover:text-green-400 cursor-pointer">
278
+ <i class="fas fa-retweet"></i>
279
+ <span>34</span>
280
+ </div>
281
+ <div class="flex items-center space-x-1 hover:text-pink-400 cursor-pointer">
282
+ <i class="far fa-heart"></i>
283
+ <span>187</span>
284
+ </div>
285
+ <div class="flex items-center space-x-1 hover:text-blue-400 cursor-pointer">
286
+ <i class="fas fa-share"></i>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Right Sidebar -->
296
+ <div class="w-1/4 space-y-4">
297
+ <!-- Search -->
298
+ <div class="neon-border-blue rounded-lg p-3 neon-bg-blue">
299
+ <div class="relative">
300
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
301
+ <input type="text" placeholder="Search NeonTweet" class="w-full bg-gray-900 bg-opacity-50 border border-gray-700 rounded-full py-2 pl-10 pr-4 text-white focus:outline-none focus:border-green-400">
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Trends -->
306
+ <div class="neon-border-green rounded-lg p-4 neon-bg-green">
307
+ <h3 class="font-bold text-lg neon-blue mb-4">Trends for you</h3>
308
+ <div class="space-y-4">
309
+ <div class="cursor-pointer hover:bg-gray-800 p-2 rounded-lg">
310
+ <p class="text-xs text-gray-400">Technology 路 Trending</p>
311
+ <p class="font-bold neon-blue">#NeonUI</p>
312
+ <p class="text-xs text-gray-400">5,234 Tweets</p>
313
+ </div>
314
+ <div class="cursor-pointer hover:bg-gray-800 p-2 rounded-lg">
315
+ <p class="text-xs text-gray-400">Gaming 路 Trending</p>
316
+ <p class="font-bold neon-green">#Cyberpunk2077</p>
317
+ <p class="text-xs text-gray-400">12.8K Tweets</p>
318
+ </div>
319
+ <div class="cursor-pointer hover:bg-gray-800 p-2 rounded-lg">
320
+ <p class="text-xs text-gray-400">Music 路 Trending</p>
321
+ <p class="font-bold neon-blue">#Synthwave</p>
322
+ <p class="text-xs text-gray-400">8,542 Tweets</p>
323
+ </div>
324
+ <div class="cursor-pointer hover:bg-gray-800 p-2 rounded-lg">
325
+ <p class="text-xs text-gray-400">Art 路 Trending</p>
326
+ <p class="font-bold neon-green">#NeonArt</p>
327
+ <p class="text-xs text-gray-400">3,127 Tweets</p>
328
+ </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Who to follow -->
333
+ <div class="neon-border-blue rounded-lg p-4 neon-bg-blue">
334
+ <h3 class="font-bold text-lg neon-green mb-4">Who to follow</h3>
335
+ <div class="space-y-4">
336
+ <div class="flex items-center justify-between">
337
+ <div class="flex items-center space-x-3">
338
+ <img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full neon-border-green">
339
+ <div>
340
+ <p class="font-bold neon-blue">UI Designer</p>
341
+ <p class="text-xs text-gray-400">@uidesigner</p>
342
+ </div>
343
+ </div>
344
+ <button class="px-3 py-1 text-xs rounded-full neon-btn-green">Follow</button>
345
+ </div>
346
+ <div class="flex items-center justify-between">
347
+ <div class="flex items-center space-x-3">
348
+ <img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full neon-border-blue">
349
+ <div>
350
+ <p class="font-bold neon-green">Code Master</p>
351
+ <p class="text-xs text-gray-400">@codemaster</p>
352
+ </div>
353
+ </div>
354
+ <button class="px-3 py-1 text-xs rounded-full neon-btn-blue">Follow</button>
355
+ </div>
356
+ <div class="flex items-center justify-between">
357
+ <div class="flex items-center space-x-3">
358
+ <img src="https://via.placeholder.com/40" alt="Profile" class="w-10 h-10 rounded-full neon-border-green">
359
+ <div>
360
+ <p class="font-bold neon-blue">Future Tech</p>
361
+ <p class="text-xs text-gray-400">@futuretech</p>
362
+ </div>
363
+ </div>
364
+ <button class="px-3 py-1 text-xs rounded-full neon-btn-green">Follow</button>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Bottom Navigation (Mobile) -->
373
+ <div class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-90 p-3 flex justify-around items-center md:hidden neon-border-green">
374
+ <i class="fas fa-home text-2xl neon-blue cursor-pointer"></i>
375
+ <i class="fas fa-search text-2xl neon-green cursor-pointer"></i>
376
+ <i class="fas fa-bell text-2xl neon-blue cursor-pointer"></i>
377
+ <i class="fas fa-envelope text-2xl neon-green cursor-pointer"></i>
378
+ </div>
379
+
380
+ <script>
381
+ // Simple tweet functionality
382
+ document.addEventListener('DOMContentLoaded', function() {
383
+ const tweetBtn = document.querySelector('.neon-btn-green:last-child');
384
+ const tweetTextarea = document.querySelector('.neon-textarea');
385
+
386
+ tweetBtn.addEventListener('click', function() {
387
+ const tweetContent = tweetTextarea.value.trim();
388
+ if (tweetContent) {
389
+ // In a real app, this would send to a server
390
+ alert(`Tweet posted: "${tweetContent}"`);
391
+ tweetTextarea.value = '';
392
+ } else {
393
+ alert("Please write something to tweet!");
394
+ }
395
+ });
396
+
397
+ // Add hover effects to all neon buttons
398
+ const neonBtns = document.querySelectorAll('.neon-btn-green, .neon-btn-blue');
399
+ neonBtns.forEach(btn => {
400
+ btn.addEventListener('mouseenter', function() {
401
+ this.style.transform = 'scale(1.05)';
402
+ });
403
+ btn.addEventListener('mouseleave', function() {
404
+ this.style.transform = 'scale(1)';
405
+ });
406
+ });
407
+ });
408
+ </script>
409
+ <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=dmoedbeck/neontweet" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
410
+ </html>