Hugging Face's logo

Spaces:
flen-crypto
/
nexus
Running

App Files Community
flen-crypto commited on
Commit
5f30b26
·
verified ·
1 Parent(s): c67c523

App where it gives you a custom feed of news articles related to your interests sleek future tech use and incredible dynamic functions to be included . also include some functions that are unique to this , make it an executble mini ap via html - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +545 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Nexusfeed
3
- emoji: 🚀
4
- colorFrom: gray
5
- colorTo: pink
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: nexusfeed
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,545 @@
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>NexusFeed - Your Personalized News Hub</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 float {
11
+ 0% { transform: translateY(0px); }
12
+ 50% { transform: translateY(-10px); }
13
+ 100% { transform: translateY(0px); }
14
+ }
15
+
16
+ .floating {
17
+ animation: float 6s ease-in-out infinite;
18
+ }
19
+
20
+ .gradient-bg {
21
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
22
+ }
23
+
24
+ .article-card {
25
+ transition: all 0.3s ease;
26
+ transform-style: preserve-3d;
27
+ }
28
+
29
+ .article-card:hover {
30
+ transform: translateY(-5px) rotateX(5deg);
31
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
32
+ }
33
+
34
+ .glow {
35
+ box-shadow: 0 0 15px rgba(100, 149, 237, 0.5);
36
+ }
37
+
38
+ .holographic {
39
+ position: relative;
40
+ overflow: hidden;
41
+ }
42
+
43
+ .holographic::before {
44
+ content: '';
45
+ position: absolute;
46
+ top: -50%;
47
+ left: -50%;
48
+ width: 200%;
49
+ height: 200%;
50
+ background: linear-gradient(
51
+ to bottom right,
52
+ rgba(255, 255, 255, 0.1) 0%,
53
+ rgba(255, 255, 255, 0) 20%,
54
+ rgba(255, 255, 255, 0) 80%,
55
+ rgba(255, 255, 255, 0.1) 100%
56
+ );
57
+ transform: rotate(30deg);
58
+ pointer-events: none;
59
+ }
60
+
61
+ .typewriter {
62
+ overflow: hidden;
63
+ border-right: 2px solid #4cc9f0;
64
+ white-space: nowrap;
65
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
66
+ }
67
+
68
+ @keyframes typing {
69
+ from { width: 0 }
70
+ to { width: 100% }
71
+ }
72
+
73
+ @keyframes blink-caret {
74
+ from, to { border-color: transparent }
75
+ 50% { border-color: #4cc9f0 }
76
+ }
77
+
78
+ .neon-text {
79
+ text-shadow: 0 0 5px #4cc9f0, 0 0 10px #4cc9f0, 0 0 15px #4cc9f0;
80
+ }
81
+
82
+ .parallax {
83
+ background-attachment: fixed;
84
+ background-position: center;
85
+ background-repeat: no-repeat;
86
+ background-size: cover;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="gradient-bg min-h-screen text-gray-100 font-sans">
91
+ <!-- App Container -->
92
+ <div class="container mx-auto px-4 py-8 max-w-7xl">
93
+ <!-- Header with Floating Elements -->
94
+ <header class="flex flex-col items-center mb-12 relative">
95
+ <div class="absolute -top-20 -left-20 w-40 h-40 bg-blue-500 rounded-full filter blur-3xl opacity-20 floating"></div>
96
+ <div class="absolute -bottom-20 -right-20 w-40 h-40 bg-purple-500 rounded-full filter blur-3xl opacity-20 floating" style="animation-delay: 2s;"></div>
97
+
98
+ <div class="flex items-center mb-6">
99
+ <i class="fas fa-atom text-4xl text-cyan-400 mr-3"></i>
100
+ <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-500">
101
+ Nexus<span class="neon-text">Feed</span>
102
+ </h1>
103
+ </div>
104
+
105
+ <p class="text-lg text-center mb-8 max-w-2xl opacity-90">
106
+ <span class="typewriter">Your hyper-personalized news experience powered by AI</span>
107
+ </p>
108
+
109
+ <!-- User Profile & Settings -->
110
+ <div class="flex items-center space-x-4 mb-8">
111
+ <div class="relative group">
112
+ <div class="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center cursor-pointer hover:glow transition-all">
113
+ <i class="fas fa-user text-white"></i>
114
+ </div>
115
+ <div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-lg shadow-xl z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
116
+ <div class="py-1">
117
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Profile</a>
118
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Settings</a>
119
+ <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-700">Sign out</a>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="relative">
125
+ <button id="settingsBtn" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg flex items-center transition-all">
126
+ <i class="fas fa-sliders-h mr-2 text-cyan-400"></i>
127
+ <span>Customize Feed</span>
128
+ </button>
129
+
130
+ <!-- Settings Panel -->
131
+ <div id="settingsPanel" class="absolute left-0 mt-2 w-64 bg-gray-800 rounded-lg shadow-xl z-10 p-4 hidden">
132
+ <h3 class="font-medium mb-3 text-cyan-400">Feed Preferences</h3>
133
+
134
+ <div class="mb-4">
135
+ <label class="block text-sm mb-2">Interests</label>
136
+ <div class="flex flex-wrap gap-2">
137
+ <span class="px-3 py-1 bg-blue-900 rounded-full text-xs flex items-center">
138
+ Technology <button class="ml-1 text-gray-400 hover:text-white">&times;</button>
139
+ </span>
140
+ <span class="px-3 py-1 bg-blue-900 rounded-full text-xs flex items-center">
141
+ Science <button class="ml-1 text-gray-400 hover:text-white">&times;</button>
142
+ </span>
143
+ <span class="px-3 py-1 bg-blue-900 rounded-full text-xs flex items-center">
144
+ AI <button class="ml-1 text-gray-400 hover:text-white">&times;</button>
145
+ </span>
146
+ <button class="text-cyan-400 text-xs flex items-center">
147
+ <i class="fas fa-plus mr-1"></i> Add
148
+ </button>
149
+ </div>
150
+ </div>
151
+
152
+ <div class="mb-4">
153
+ <label class="block text-sm mb-2">Reading Time</label>
154
+ <select class="w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-sm">
155
+ <option>Quick Reads (1-3 min)</option>
156
+ <option selected>Standard (3-10 min)</option>
157
+ <option>Deep Dives (10+ min)</option>
158
+ </select>
159
+ </div>
160
+
161
+ <div class="mb-4">
162
+ <label class="flex items-center">
163
+ <input type="checkbox" class="form-checkbox h-4 w-4 text-cyan-500" checked>
164
+ <span class="ml-2 text-sm">Show multimedia content</span>
165
+ </label>
166
+ </div>
167
+
168
+ <button class="w-full bg-cyan-600 hover:bg-cyan-700 text-white py-2 rounded-lg text-sm transition-all">
169
+ Apply Preferences
170
+ </button>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </header>
175
+
176
+ <!-- Main Content -->
177
+ <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">
178
+ <!-- Left Sidebar - Trending Topics -->
179
+ <aside class="lg:col-span-1">
180
+ <div class="bg-gray-800 bg-opacity-50 rounded-xl p-6 backdrop-blur-sm border border-gray-700 holographic">
181
+ <h2 class="text-xl font-semibold mb-4 flex items-center">
182
+ <i class="fas fa-fire text-orange-400 mr-2"></i>
183
+ <span>Trending Topics</span>
184
+ </h2>
185
+
186
+ <div class="space-y-4">
187
+ <div class="flex items-start group cursor-pointer">
188
+ <div class="bg-blue-900 bg-opacity-50 rounded-lg p-2 mr-3 group-hover:bg-opacity-70 transition-all">
189
+ <i class="fas fa-microchip text-blue-300"></i>
190
+ </div>
191
+ <div>
192
+ <h3 class="font-medium group-hover:text-cyan-400 transition-all">Quantum Computing</h3>
193
+ <p class="text-xs text-gray-400">+1,245 articles today</p>
194
+ </div>
195
+ </div>
196
+
197
+ <div class="flex items-start group cursor-pointer">
198
+ <div class="bg-purple-900 bg-opacity-50 rounded-lg p-2 mr-3 group-hover:bg-opacity-70 transition-all">
199
+ <i class="fas fa-robot text-purple-300"></i>
200
+ </div>
201
+ <div>
202
+ <h3 class="font-medium group-hover:text-cyan-400 transition-all">AI Regulation</h3>
203
+ <p class="text-xs text-gray-400">+892 articles today</p>
204
+ </div>
205
+ </div>
206
+
207
+ <div class="flex items-start group cursor-pointer">
208
+ <div class="bg-green-900 bg-opacity-50 rounded-lg p-2 mr-3 group-hover:bg-opacity-70 transition-all">
209
+ <i class="fas fa-leaf text-green-300"></i>
210
+ </div>
211
+ <div>
212
+ <h3 class="font-medium group-hover:text-cyan-400 transition-all">Climate Tech</h3>
213
+ <p class="text-xs text-gray-400">+1,532 articles today</p>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="flex items-start group cursor-pointer">
218
+ <div class="bg-yellow-900 bg-opacity-50 rounded-lg p-2 mr-3 group-hover:bg-opacity-70 transition-all">
219
+ <i class="fas fa-dna text-yellow-300"></i>
220
+ </div>
221
+ <div>
222
+ <h3 class="font-medium group-hover:text-cyan-400 transition-all">CRISPR Breakthrough</h3>
223
+ <p class="text-xs text-gray-400">+756 articles today</p>
224
+ </div>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="mt-6 pt-4 border-t border-gray-700">
229
+ <h3 class="text-sm font-medium mb-3">Your Reading Stats</h3>
230
+ <div class="flex justify-between text-xs mb-1">
231
+ <span>This week</span>
232
+ <span>42 articles</span>
233
+ </div>
234
+ <div class="w-full bg-gray-700 rounded-full h-1.5">
235
+ <div class="bg-gradient-to-r from-cyan-500 to-blue-600 h-1.5 rounded-full" style="width: 70%"></div>
236
+ </div>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- AI Assistant -->
241
+ <div class="mt-6 bg-gray-800 bg-opacity-50 rounded-xl p-6 backdrop-blur-sm border border-gray-700 holographic">
242
+ <div class="flex items-center mb-4">
243
+ <div class="relative">
244
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center">
245
+ <i class="fas fa-robot text-white"></i>
246
+ </div>
247
+ <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-400 rounded-full border-2 border-gray-800"></div>
248
+ </div>
249
+ <h3 class="ml-3 font-medium">Nexus AI Assistant</h3>
250
+ </div>
251
+
252
+ <div class="bg-gray-900 rounded-lg p-3 mb-3 text-sm">
253
+ <p>Hi there! I can summarize articles, find related content, or answer questions about what you're reading.</p>
254
+ </div>
255
+
256
+ <div class="flex">
257
+ <input type="text" placeholder="Ask me anything..." class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-3 py-2 text-sm focus:outline-none focus:border-cyan-500">
258
+ <button class="bg-cyan-600 hover:bg-cyan-700 px-4 rounded-r-lg transition-all">
259
+ <i class="fas fa-paper-plane"></i>
260
+ </button>
261
+ </div>
262
+ </div>
263
+ </aside>
264
+
265
+ <!-- Main Feed -->
266
+ <section class="lg:col-span-2 space-y-6">
267
+ <!-- Feed Filters -->
268
+ <div class="flex flex-wrap items-center justify-between bg-gray-800 bg-opacity-50 rounded-xl p-4 backdrop-blur-sm border border-gray-700">
269
+ <div class="flex space-x-2 mb-2 sm:mb-0">
270
+ <button class="px-3 py-1 bg-cyan-600 rounded-lg text-sm">For You</button>
271
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm">Latest</button>
272
+ <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm">Bookmarked</button>
273
+ </div>
274
+
275
+ <div class="flex items-center">
276
+ <span class="text-sm mr-2">Sort by:</span>
277
+ <select class="bg-gray-700 border border-gray-600 rounded px-3 py-1 text-sm">
278
+ <option>Relevance</option>
279
+ <option>Newest</option>
280
+ <option>Popular</option>
281
+ </select>
282
+ </div>
283
+ </div>
284
+
285
+ <!-- Article Cards -->
286
+ <article class="article-card bg-gray-800 bg-opacity-50 rounded-xl overflow-hidden border border-gray-700 backdrop-blur-sm hover:border-cyan-500 transition-all">
287
+ <div class="p-6">
288
+ <div class="flex items-center justify-between mb-3">
289
+ <div class="flex items-center">
290
+ <div class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center mr-2">
291
+ <i class="fas fa-newspaper text-blue-300 text-xs"></i>
292
+ </div>
293
+ <span class="text-sm">TechChronicle • 2h ago</span>
294
+ </div>
295
+ <button class="text-gray-400 hover:text-cyan-400">
296
+ <i class="fas fa-bookmark"></i>
297
+ </button>
298
+ </div>
299
+
300
+ <h2 class="text-xl font-semibold mb-2 hover:text-cyan-400 cursor-pointer">
301
+ Quantum Supremacy Achieved: New Processor Solves Problem in 200 Seconds
302
+ </h2>
303
+
304
+ <p class="text-gray-300 mb-4">
305
+ Researchers at Quantum Labs have demonstrated a quantum processor that solved a problem in 200 seconds that would take the world's fastest supercomputer 10,000 years...
306
+ </p>
307
+
308
+ <div class="flex flex-wrap gap-2 mb-4">
309
+ <span class="px-2 py-1 bg-blue-900 bg-opacity-50 rounded-full text-xs">Quantum Computing</span>
310
+ <span class="px-2 py-1 bg-blue-900 bg-opacity-50 rounded-full text-xs">Physics</span>
311
+ <span class="px-2 py-1 bg-blue-900 bg-opacity-50 rounded-full text-xs">Breakthrough</span>
312
+ </div>
313
+
314
+ <div class="flex items-center justify-between">
315
+ <div class="flex items-center space-x-4">
316
+ <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
317
+ <i class="fas fa-eye mr-1"></i> 4.2K
318
+ </button>
319
+ <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
320
+ <i class="fas fa-comment mr-1"></i> 156
321
+ </button>
322
+ <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
323
+ <i class="fas fa-share-alt mr-1"></i>
324
+ </button>
325
+ </div>
326
+
327
+ <button class="text-sm bg-cyan-600 hover:bg-cyan-700 px-4 py-1 rounded-lg transition-all flex items-center">
328
+ <span>Read</span>
329
+ <i class="fas fa-arrow-right ml-1 text-xs"></i>
330
+ </button>
331
+ </div>
332
+ </div>
333
+ </article>
334
+
335
+ <article class="article-card bg-gray-800 bg-opacity-50 rounded-xl overflow-hidden border border-gray-700 backdrop-blur-sm hover:border-cyan-500 transition-all">
336
+ <div class="p-6">
337
+ <div class="flex items-center justify-between mb-3">
338
+ <div class="flex items-center">
339
+ <div class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center mr-2">
340
+ <i class="fas fa-brain text-purple-300 text-xs"></i>
341
+ </div>
342
+ <span class="text-sm">AI Frontiers • 5h ago</span>
343
+ </div>
344
+ <button class="text-gray-400 hover:text-cyan-400">
345
+ <i class="fas fa-bookmark"></i>
346
+ </button>
347
+ </div>
348
+
349
+ <h2 class="text-xl font-semibold mb-2 hover:text-cyan-400 cursor-pointer">
350
+ GPT-5: Leaked Details Suggest Human-Level Reasoning Capabilities
351
+ </h2>
352
+
353
+ <p class="text-gray-300 mb-4">
354
+ Internal documents suggest the next generation of OpenAI's language model may achieve human-level reasoning on certain benchmarks, with potential release in early 2024...
355
+ </p>
356
+
357
+ <div class="flex flex-wrap gap-2 mb-4">
358
+ <span class="px-2 py-1 bg-purple-900 bg-opacity-50 rounded-full text-xs">Artificial Intelligence</span>
359
+ <span class="px-2 py-1 bg-purple-900 bg-opacity-50 rounded-full text-xs">LLMs</span>
360
+ <span class="px-2 py-1 bg-purple-900 bg-opacity-50 rounded-full text-xs">OpenAI</span>
361
+ </div>
362
+
363
+ <div class="flex items-center justify-between">
364
+ <div class="flex items-center space-x-4">
365
+ <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
366
+ <i class="fas fa-eye mr-1"></i> 8.7K
367
+ </button>
368
+ <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
369
+ <i class="fas fa-comment mr-1"></i> 432
370
+ </button>
371
+ <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
372
+ <i class="fas fa-share-alt mr-1"></i>
373
+ </button>
374
+ </div>
375
+
376
+ <button class="text-sm bg-cyan-600 hover:bg-cyan-700 px-4 py-1 rounded-lg transition-all flex items-center">
377
+ <span>Read</span>
378
+ <i class="fas fa-arrow-right ml-1 text-xs"></i>
379
+ </button>
380
+ </div>
381
+ </div>
382
+ </article>
383
+
384
+ <article class="article-card bg-gray-800 bg-opacity-50 rounded-xl overflow-hidden border border-gray-700 backdrop-blur-sm hover:border-cyan-500 transition-all">
385
+ <div class="p-6">
386
+ <div class="flex items-center justify-between mb-3">
387
+ <div class="flex items-center">
388
+ <div class="w-8 h-8 rounded-full bg-green-900 flex items-center justify-center mr-2">
389
+ <i class="fas fa-bolt text-green-300 text-xs"></i>
390
+ </div>
391
+ <span class="text-sm">Energy Pulse • 8h ago</span>
392
+ </div>
393
+ <button class="text-gray-400 hover:text-cyan-400">
394
+ <i class="fas fa-bookmark"></i>
395
+ </button>
396
+ </div>
397
+
398
+ <h2 class="text-xl font-semibold mb-2 hover:text-cyan-400 cursor-pointer">
399
+ Breakthrough in Solid-State Batteries Could Double EV Range
400
+ </h2>
401
+
402
+ <p class="text-gray-300 mb-4">
403
+ A team at MIT has developed a new solid-state battery design that promises to double the energy density of current lithium-ion batteries while being safer and charging faster...
404
+ </p>
405
+
406
+ <div class="flex flex-wrap gap-2 mb-4">
407
+ <span class="px-2 py-1 bg-green-900 bg-opacity-50 rounded-full text-xs">Battery Tech</span>
408
+ <span class="px-2 py-1 bg-green-900 bg-opacity-50 rounded-full text-xs">Electric Vehicles</span>
409
+ <span class="px-2 py-1 bg-green-900 bg-opacity-50 rounded-full text-xs">Clean Energy</span>
410
+ </div>
411
+
412
+ <div class="flex items-center justify-between">
413
+ <div class="flex items-center space-x-4">
414
+ <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
415
+ <i class="fas fa-eye mr-1"></i> 6.1K
416
+ </button>
417
+ <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
418
+ <i class="fas fa-comment mr-1"></i> 289
419
+ </button>
420
+ <button class="flex items-center text-sm text-gray-400 hover:text-cyan-400">
421
+ <i class="fas fa-share-alt mr-1"></i>
422
+ </button>
423
+ </div>
424
+
425
+ <button class="text-sm bg-cyan-600 hover:bg-cyan-700 px-4 py-1 rounded-lg transition-all flex items-center">
426
+ <span>Read</span>
427
+ <i class="fas fa-arrow-right ml-1 text-xs"></i>
428
+ </button>
429
+ </div>
430
+ </div>
431
+ </article>
432
+
433
+ <!-- Load More Button -->
434
+ <div class="flex justify-center mt-6">
435
+ <button class="px-6 py-2 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded-lg flex items-center transition-all">
436
+ <i class="fas fa-sync-alt mr-2"></i>
437
+ <span>Load More Articles</span>
438
+ </button>
439
+ </div>
440
+ </section>
441
+ </main>
442
+
443
+ <!-- Floating Action Button -->
444
+ <div class="fixed bottom-8 right-8">
445
+ <button id="fab" class="w-14 h-14 rounded-full bg-gradient-to-br from-cyan-500 to-blue-600 shadow-lg flex items-center justify-center text-white hover:glow transition-all">
446
+ <i class="fas fa-magic text-xl"></i>
447
+ </button>
448
+
449
+ <!-- FAB Menu -->
450
+ <div id="fabMenu" class="absolute bottom-16 right-0 w-56 bg-gray-800 rounded-lg shadow-xl p-2 hidden">
451
+ <button class="w-full flex items-center px-3 py-2 text-sm hover:bg-gray-700 rounded">
452
+ <i class="fas fa-search mr-2 text-cyan-400"></i>
453
+ <span>Search Articles</span>
454
+ </button>
455
+ <button class="w-full flex items-center px-3 py-2 text-sm hover:bg-gray-700 rounded">
456
+ <i class="fas fa-filter mr-2 text-cyan-400"></i>
457
+ <span>Advanced Filters</span>
458
+ </button>
459
+ <button class="w-full flex items-center px-3 py-2 text-sm hover:bg-gray-700 rounded">
460
+ <i class="fas fa-moon mr-2 text-cyan-400"></i>
461
+ <span>Dark/Light Mode</span>
462
+ </button>
463
+ <button class="w-full flex items-center px-3 py-2 text-sm hover:bg-gray-700 rounded">
464
+ <i class="fas fa-cog mr-2 text-cyan-400"></i>
465
+ <span>Settings</span>
466
+ </button>
467
+ </div>
468
+ </div>
469
+ </div>
470
+
471
+ <script>
472
+ // Toggle Settings Panel
473
+ document.getElementById('settingsBtn').addEventListener('click', function() {
474
+ const panel = document.getElementById('settingsPanel');
475
+ panel.classList.toggle('hidden');
476
+ });
477
+
478
+ // Close Settings Panel when clicking outside
479
+ document.addEventListener('click', function(event) {
480
+ const settingsBtn = document.getElementById('settingsBtn');
481
+ const settingsPanel = document.getElementById('settingsPanel');
482
+
483
+ if (!settingsBtn.contains(event.target) && !settingsPanel.contains(event.target)) {
484
+ settingsPanel.classList.add('hidden');
485
+ }
486
+ });
487
+
488
+ // Toggle FAB Menu
489
+ document.getElementById('fab').addEventListener('click', function() {
490
+ const fabMenu = document.getElementById('fabMenu');
491
+ fabMenu.classList.toggle('hidden');
492
+ });
493
+
494
+ // Close FAB Menu when clicking outside
495
+ document.addEventListener('click', function(event) {
496
+ const fab = document.getElementById('fab');
497
+ const fabMenu = document.getElementById('fabMenu');
498
+
499
+ if (!fab.contains(event.target) && !fabMenu.contains(event.target)) {
500
+ fabMenu.classList.add('hidden');
501
+ }
502
+ });
503
+
504
+ // Article Card Click Effect
505
+ document.querySelectorAll('.article-card').forEach(card => {
506
+ card.addEventListener('click', function(e) {
507
+ // Don't trigger if clicking on interactive elements
508
+ if (e.target.tagName === 'BUTTON' || e.target.tagName === 'I' || e.target.tagName === 'A') {
509
+ return;
510
+ }
511
+
512
+ // In a real app, this would navigate to the article
513
+ alert('Navigating to article: ' + this.querySelector('h2').textContent);
514
+ });
515
+ });
516
+
517
+ // Simulate loading more articles
518
+ document.querySelector('button:contains("Load More Articles")').addEventListener('click', function() {
519
+ const loader = document.createElement('div');
520
+ loader.className = 'flex justify-center my-4';
521
+ loader.innerHTML = '<i class="fas fa-circle-notch fa-spin text-2xl text-cyan-400"></i>';
522
+
523
+ this.parentNode.insertBefore(loader, this);
524
+
525
+ // Simulate network delay
526
+ setTimeout(() => {
527
+ loader.remove();
528
+
529
+ // In a real app, this would append new articles
530
+ alert('More articles would be loaded here in a real application');
531
+ }, 1500);
532
+ });
533
+
534
+ // Dynamic theme switcher (simplified)
535
+ document.querySelector('button:contains("Dark/Light Mode")').addEventListener('click', function() {
536
+ document.body.classList.toggle('gradient-bg');
537
+ document.body.classList.toggle('bg-gray-100');
538
+ document.body.classList.toggle('text-gray-100');
539
+ document.body.classList.toggle('text-gray-800');
540
+
541
+ alert('Theme would switch between dark/light modes in a real application');
542
+ });
543
+ </script>
544
+ <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=flen-crypto/nexusfeed" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
545
+ </html>