Hugging Face's logo

Spaces:
triton7777
/
futureconnectv0
Running

App Files Community
triton7777 commited on
Commit
3c55d75
·
verified ·
1 Parent(s): 72d60bb

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +652 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Futureconnectv0
3
- emoji: 🌍
4
- colorFrom: pink
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: futureconnectv0
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
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,652 @@
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>FutureConnect | The Social Network of Tomorrow</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
+ /* Custom CSS for futuristic elements */
11
+ .holographic-card {
12
+ background: rgba(255, 255, 255, 0.08);
13
+ backdrop-filter: blur(10px);
14
+ -webkit-backdrop-filter: blur(10px);
15
+ border: 1px solid rgba(255, 255, 255, 0.18);
16
+ box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
17
+ }
18
+
19
+ .neon-text {
20
+ text-shadow: 0 0 5px #00f7ff, 0 0 10px #00f7ff;
21
+ }
22
+
23
+ .gradient-text {
24
+ background: linear-gradient(90deg, #00f7ff, #0084ff);
25
+ -webkit-background-clip: text;
26
+ background-clip: text;
27
+ color: transparent;
28
+ }
29
+
30
+ .pulse-animation {
31
+ animation: pulse 2s infinite;
32
+ }
33
+
34
+ @keyframes pulse {
35
+ 0% { transform: scale(1); }
36
+ 50% { transform: scale(1.05); }
37
+ 100% { transform: scale(1); }
38
+ }
39
+
40
+ .ai-assistant {
41
+ position: fixed;
42
+ bottom: 20px;
43
+ right: 20px;
44
+ z-index: 100;
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-gray-900 text-white min-h-screen">
49
+ <!-- Navigation Bar -->
50
+ <nav class="bg-gray-800 h-16 flex items-center justify-between px-6 fixed w-full z-50">
51
+ <div class="flex items-center space-x-2">
52
+ <i class="fas fa-robot text-2xl gradient-text"></i>
53
+ <span class="text-xl font-bold gradient-text">FutureConnect</span>
54
+ </div>
55
+
56
+ <div class="hidden md:flex items-center space-x-6">
57
+ <a href="#" class="hover:text-blue-400 transition"><i class="fas fa-home"></i> Home</a>
58
+ <a href="#" class="hover:text-blue-400 transition"><i class="fas fa-network-wired"></i> Network</a>
59
+ <a href="#" class="hover:text-blue-400 transition"><i class="fas fa-vr-cardboard"></i> Metaverse</a>
60
+ <a href="#" class="hover:text-blue-400 transition"><i class="fas fa-brain"></i> AI Hub</a>
61
+ </div>
62
+
63
+ <div class="flex items-center space-x-4">
64
+ <div class="relative">
65
+ <input type="text" placeholder="Search FutureConnect..." class="bg-gray-700 rounded-full py-1 px-4 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 w-40 md:w-64">
66
+ <i class="fas fa-search absolute right-3 top-2 text-gray-400"></i>
67
+ </div>
68
+ <div class="flex items-center space-x-2">
69
+ <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
70
+ <span class="text-xs font-bold">JD</span>
71
+ </div>
72
+ <span class="hidden md:inline">John Doe</span>
73
+ </div>
74
+ </div>
75
+ </nav>
76
+
77
+ <!-- Main Content -->
78
+ <div class="pt-16 pb-20 flex">
79
+ <!-- Left Sidebar -->
80
+ <div class="hidden lg:block w-64 bg-gray-800 h-screen fixed overflow-y-auto">
81
+ <div class="p-4">
82
+ <div class="flex items-center space-x-3 mb-6">
83
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
84
+ <span class="text-sm font-bold">JD</span>
85
+ </div>
86
+ <span>John Doe</span>
87
+ </div>
88
+
89
+ <div class="space-y-2">
90
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
91
+ <i class="fas fa-user-friends w-5 text-center"></i>
92
+ <span>Friends</span>
93
+ </a>
94
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
95
+ <i class="fas fa-users w-5 text-center"></i>
96
+ <span>Communities</span>
97
+ </a>
98
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
99
+ <i class="fas fa-store w-5 text-center"></i>
100
+ <span>Marketplace</span>
101
+ </a>
102
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
103
+ <i class="fas fa-gamepad w-5 text-center"></i>
104
+ <span>Gaming</span>
105
+ </a>
106
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
107
+ <i class="fas fa-chart-line w-5 text-center"></i>
108
+ <span>Analytics</span>
109
+ </a>
110
+ </div>
111
+
112
+ <div class="mt-8">
113
+ <h3 class="text-gray-400 uppercase text-xs font-bold mb-2">Your Shortcuts</h3>
114
+ <div class="space-y-2">
115
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
116
+ <i class="fas fa-atom w-5 text-center text-purple-400"></i>
117
+ <span>Quantum Computing</span>
118
+ </a>
119
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
120
+ <i class="fas fa-rocket w-5 text-center text-red-400"></i>
121
+ <span>Space Exploration</span>
122
+ </a>
123
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
124
+ <i class="fas fa-dna w-5 text-center text-green-400"></i>
125
+ <span>Biohacking</span>
126
+ </a>
127
+ </div>
128
+ </div>
129
+
130
+ <div class="mt-8">
131
+ <h3 class="text-gray-400 uppercase text-xs font-bold mb-2">AI Assistants</h3>
132
+ <div class="space-y-2">
133
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
134
+ <i class="fas fa-robot w-5 text-center text-blue-400"></i>
135
+ <span>Personal AI</span>
136
+ </a>
137
+ <a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition">
138
+ <i class="fas fa-brain w-5 text-center text-yellow-400"></i>
139
+ <span>Mind Sync</span>
140
+ </a>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Main Feed -->
147
+ <div class="flex-1 lg:ml-64 p-4">
148
+ <!-- Stories -->
149
+ <div class="bg-gray-800 rounded-xl p-4 mb-6 holographic-card">
150
+ <h2 class="text-xl font-bold mb-4 gradient-text">Today's Stories</h2>
151
+ <div class="flex space-x-4 overflow-x-auto pb-2">
152
+ <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gradient-to-b from-blue-500 to-purple-600 relative">
153
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl">
154
+ <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 flex items-center justify-center">
155
+ <i class="fas fa-plus"></i>
156
+ </div>
157
+ <span class="text-xs mt-6 block">Create Story</span>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gray-700 relative overflow-hidden">
162
+ <img src="https://source.unsplash.com/random/300x500/?tech" alt="Story" class="w-full h-full object-cover">
163
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl">
164
+ <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 overflow-hidden">
165
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover">
166
+ </div>
167
+ <span class="text-xs mt-6 block">Sarah K.</span>
168
+ </div>
169
+ </div>
170
+
171
+ <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gray-700 relative overflow-hidden">
172
+ <img src="https://source.unsplash.com/random/300x500/?future" alt="Story" class="w-full h-full object-cover">
173
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl">
174
+ <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 overflow-hidden">
175
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full object-cover">
176
+ </div>
177
+ <span class="text-xs mt-6 block">Mike T.</span>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gray-700 relative overflow-hidden">
182
+ <img src="https://source.unsplash.com/random/300x500/?ai" alt="Story" class="w-full h-full object-cover">
183
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl">
184
+ <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 overflow-hidden">
185
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile" class="w-full h-full object-cover">
186
+ </div>
187
+ <span class="text-xs mt-6 block">Lisa R.</span>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="flex-shrink-0 w-32 h-48 rounded-xl bg-gray-700 relative overflow-hidden">
192
+ <img src="https://source.unsplash.com/random/300x500/?space" alt="Story" class="w-full h-full object-cover">
193
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent rounded-b-xl">
194
+ <div class="w-10 h-10 rounded-full border-4 border-blue-400 bg-gray-800 absolute -top-5 left-3 overflow-hidden">
195
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Profile" class="w-full h-full object-cover">
196
+ </div>
197
+ <span class="text-xs mt-6 block">David L.</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Create Post -->
204
+ <div class="bg-gray-800 rounded-xl p-4 mb-6 holographic-card">
205
+ <div class="flex items-center space-x-3 mb-4">
206
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
207
+ <span class="text-sm font-bold">JD</span>
208
+ </div>
209
+ <input type="text" placeholder="What's on your mind, John?" class="bg-gray-700 rounded-full py-2 px-4 flex-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
210
+ </div>
211
+ <div class="flex justify-between border-t border-gray-700 pt-3">
212
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition">
213
+ <i class="fas fa-video text-red-400"></i>
214
+ <span>Live Video</span>
215
+ </button>
216
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition">
217
+ <i class="fas fa-images text-green-400"></i>
218
+ <span>Photo/Video</span>
219
+ </button>
220
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition">
221
+ <i class="fas fa-smile text-yellow-400"></i>
222
+ <span>Feeling/Activity</span>
223
+ </button>
224
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition">
225
+ <i class="fas fa-brain text-purple-400"></i>
226
+ <span>AI Thought</span>
227
+ </button>
228
+ </div>
229
+ </div>
230
+
231
+ <!-- Posts -->
232
+ <div class="space-y-6">
233
+ <!-- Post 1 -->
234
+ <div class="bg-gray-800 rounded-xl p-4 holographic-card">
235
+ <div class="flex justify-between items-start mb-4">
236
+ <div class="flex items-center space-x-3">
237
+ <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center">
238
+ <span class="text-sm font-bold">AI</span>
239
+ </div>
240
+ <div>
241
+ <h3 class="font-bold">Quantum AI Network</h3>
242
+ <p class="text-xs text-gray-400">Sponsored · <i class="fas fa-globe"></i></p>
243
+ </div>
244
+ </div>
245
+ <button class="text-gray-400 hover:text-white">
246
+ <i class="fas fa-ellipsis-h"></i>
247
+ </button>
248
+ </div>
249
+
250
+ <p class="mb-4">The future of AI is here! Quantum AI Networks are revolutionizing how we process information. Join our beta program to experience computing at the speed of thought.</p>
251
+
252
+ <div class="mb-4 rounded-xl overflow-hidden">
253
+ <img src="https://source.unsplash.com/random/800x400/?quantum" alt="Quantum Computing" class="w-full h-auto">
254
+ </div>
255
+
256
+ <div class="flex justify-between text-gray-400 text-sm mb-4">
257
+ <div class="flex items-center space-x-1">
258
+ <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-xs">
259
+ <i class="fas fa-thumbs-up"></i>
260
+ </div>
261
+ <span>1.2K</span>
262
+ </div>
263
+ <div>
264
+ <span>248 comments · 56 shares</span>
265
+ </div>
266
+ </div>
267
+
268
+ <div class="flex justify-between border-t border-gray-700 pt-3">
269
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
270
+ <i class="fas fa-thumbs-up"></i>
271
+ <span>Like</span>
272
+ </button>
273
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
274
+ <i class="fas fa-comment"></i>
275
+ <span>Comment</span>
276
+ </button>
277
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
278
+ <i class="fas fa-share"></i>
279
+ <span>Share</span>
280
+ </button>
281
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
282
+ <i class="fas fa-brain"></i>
283
+ <span>Mind Sync</span>
284
+ </button>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Post 2 -->
289
+ <div class="bg-gray-800 rounded-xl p-4 holographic-card">
290
+ <div class="flex justify-between items-start mb-4">
291
+ <div class="flex items-center space-x-3">
292
+ <div class="w-10 h-10 rounded-full overflow-hidden">
293
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover">
294
+ </div>
295
+ <div>
296
+ <h3 class="font-bold">Sarah K.</h3>
297
+ <p class="text-xs text-gray-400">Yesterday at 3:45 PM · <i class="fas fa-globe"></i></p>
298
+ </div>
299
+ </div>
300
+ <button class="text-gray-400 hover:text-white">
301
+ <i class="fas fa-ellipsis-h"></i>
302
+ </button>
303
+ </div>
304
+
305
+ <p class="mb-4">Just experienced my first neural link session! The ability to control devices with my thoughts is mind-blowing. The future is now! 🚀 #NeuralTech #FutureIsHere</p>
306
+
307
+ <div class="mb-4 rounded-xl overflow-hidden">
308
+ <img src="https://source.unsplash.com/random/800x400/?neural" alt="Neural Interface" class="w-full h-auto">
309
+ </div>
310
+
311
+ <div class="flex justify-between text-gray-400 text-sm mb-4">
312
+ <div class="flex items-center space-x-1">
313
+ <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-xs">
314
+ <i class="fas fa-thumbs-up"></i>
315
+ </div>
316
+ <span>892</span>
317
+ </div>
318
+ <div>
319
+ <span>143 comments · 28 shares</span>
320
+ </div>
321
+ </div>
322
+
323
+ <div class="flex justify-between border-t border-gray-700 pt-3">
324
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
325
+ <i class="fas fa-thumbs-up"></i>
326
+ <span>Like</span>
327
+ </button>
328
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
329
+ <i class="fas fa-comment"></i>
330
+ <span>Comment</span>
331
+ </button>
332
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
333
+ <i class="fas fa-share"></i>
334
+ <span>Share</span>
335
+ </button>
336
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
337
+ <i class="fas fa-brain"></i>
338
+ <span>Mind Sync</span>
339
+ </button>
340
+ </div>
341
+
342
+ <!-- Comments -->
343
+ <div class="mt-4 pt-4 border-t border-gray-700">
344
+ <div class="flex items-start space-x-3 mb-4">
345
+ <div class="w-8 h-8 rounded-full bg-yellow-500 flex items-center justify-center text-xs font-bold">
346
+ MK
347
+ </div>
348
+ <div class="flex-1 bg-gray-700 rounded-xl p-3">
349
+ <div class="font-bold text-sm">Mark K.</div>
350
+ <p class="text-sm">That's amazing! How was the calibration process? I've heard it can be intense for first-timers.</p>
351
+ <div class="flex space-x-4 text-xs text-gray-400 mt-2">
352
+ <span>Like</span>
353
+ <span>Reply</span>
354
+ <span>2h</span>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <div class="flex items-center space-x-3">
360
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
361
+ <i class="fas fa-plus text-xs"></i>
362
+ </div>
363
+ <input type="text" placeholder="Write a comment..." class="bg-gray-700 rounded-full py-1 px-4 flex-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
364
+ </div>
365
+ </div>
366
+ </div>
367
+
368
+ <!-- Post 3 -->
369
+ <div class="bg-gray-800 rounded-xl p-4 holographic-card">
370
+ <div class="flex justify-between items-start mb-4">
371
+ <div class="flex items-center space-x-3">
372
+ <div class="w-10 h-10 rounded-full overflow-hidden">
373
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-full h-full object-cover">
374
+ </div>
375
+ <div>
376
+ <h3 class="font-bold">Mike T.</h3>
377
+ <p class="text-xs text-gray-400">Shared from NeuralTech · 2 days ago · <i class="fas fa-globe"></i></p>
378
+ </div>
379
+ </div>
380
+ <button class="text-gray-400 hover:text-white">
381
+ <i class="fas fa-ellipsis-h"></i>
382
+ </button>
383
+ </div>
384
+
385
+ <p class="mb-4">Our team just achieved a breakthrough in holographic communication! Soon you'll be able to project yourself anywhere in the world in real-time 3D. The future of remote work and social interaction is about to change forever.</p>
386
+
387
+ <div class="mb-4 rounded-xl overflow-hidden">
388
+ <div class="relative aspect-video bg-gradient-to-r from-blue-900 to-purple-900 flex items-center justify-center">
389
+ <i class="fas fa-play-circle text-5xl text-white opacity-70"></i>
390
+ <div class="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black to-transparent">
391
+ <span class="text-sm">2:45</span>
392
+ </div>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="flex justify-between text-gray-400 text-sm mb-4">
397
+ <div class="flex items-center space-x-1">
398
+ <div class="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center text-xs">
399
+ <i class="fas fa-thumbs-up"></i>
400
+ </div>
401
+ <span>3.4K</span>
402
+ </div>
403
+ <div>
404
+ <span>512 comments · 198 shares</span>
405
+ </div>
406
+ </div>
407
+
408
+ <div class="flex justify-between border-t border-gray-700 pt-3">
409
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
410
+ <i class="fas fa-thumbs-up"></i>
411
+ <span>Like</span>
412
+ </button>
413
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
414
+ <i class="fas fa-comment"></i>
415
+ <span>Comment</span>
416
+ </button>
417
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
418
+ <i class="fas fa-share"></i>
419
+ <span>Share</span>
420
+ </button>
421
+ <button class="flex items-center space-x-2 text-gray-300 hover:bg-gray-700 px-4 py-1 rounded-lg transition flex-1 justify-center">
422
+ <i class="fas fa-brain"></i>
423
+ <span>Mind Sync</span>
424
+ </button>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- Right Sidebar -->
431
+ <div class="hidden xl:block w-80 bg-gray-800 h-screen fixed right-0 overflow-y-auto p-4">
432
+ <div class="mb-6">
433
+ <h2 class="text-lg font-bold mb-4 gradient-text">Sponsored</h2>
434
+ <div class="space-y-4">
435
+ <div class="bg-gray-700 rounded-xl overflow-hidden">
436
+ <img src="https://source.unsplash.com/random/300x200/?mars" alt="Mars Colony" class="w-full h-auto">
437
+ <div class="p-3">
438
+ <h3 class="font-bold">Mars Colony Initiative</h3>
439
+ <p class="text-sm text-gray-400">Be among the first settlers on Mars. Applications open now!</p>
440
+ </div>
441
+ </div>
442
+
443
+ <div class="bg-gray-700 rounded-xl overflow-hidden">
444
+ <img src="https://source.unsplash.com/random/300x200/?quantum" alt="Quantum" class="w-full h-auto">
445
+ <div class="p-3">
446
+ <h3 class="font-bold">Quantum Computing 101</h3>
447
+ <p class="text-sm text-gray-400">Free course on the future of computing</p>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="mb-6">
454
+ <div class="flex justify-between items-center mb-4">
455
+ <h2 class="text-lg font-bold gradient-text">Contacts</h2>
456
+ <div class="flex space-x-3 text-gray-400">
457
+ <button><i class="fas fa-video"></i></button>
458
+ <button><i class="fas fa-search"></i></button>
459
+ <button><i class="fas fa-ellipsis-h"></i></button>
460
+ </div>
461
+ </div>
462
+
463
+ <div class="space-y-3">
464
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
465
+ <div class="relative">
466
+ <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center">
467
+ <span class="text-sm font-bold">AM</span>
468
+ </div>
469
+ <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-green-400 border-2 border-gray-800"></div>
470
+ </div>
471
+ <span>Alex M.</span>
472
+ </div>
473
+
474
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
475
+ <div class="relative">
476
+ <div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center">
477
+ <span class="text-sm font-bold">JR</span>
478
+ </div>
479
+ <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-green-400 border-2 border-gray-800"></div>
480
+ </div>
481
+ <span>Jessica R.</span>
482
+ </div>
483
+
484
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
485
+ <div class="relative">
486
+ <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center">
487
+ <span class="text-sm font-bold">DP</span>
488
+ </div>
489
+ </div>
490
+ <span>David P.</span>
491
+ </div>
492
+
493
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
494
+ <div class="relative">
495
+ <div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center">
496
+ <span class="text-sm font-bold">SM</span>
497
+ </div>
498
+ <div class="absolute bottom-0 right-0 w-3 h-3 rounded-full bg-green-400 border-2 border-gray-800"></div>
499
+ </div>
500
+ <span>Sarah M.</span>
501
+ </div>
502
+
503
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
504
+ <div class="relative">
505
+ <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
506
+ <span class="text-sm font-bold">TK</span>
507
+ </div>
508
+ </div>
509
+ <span>Thomas K.</span>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <div>
515
+ <h2 class="text-lg font-bold mb-4 gradient-text">Group Conversations</h2>
516
+ <div class="space-y-3">
517
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
518
+ <div class="relative">
519
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center">
520
+ <i class="fas fa-atom"></i>
521
+ </div>
522
+ </div>
523
+ <span>Quantum Physics Club</span>
524
+ </div>
525
+
526
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
527
+ <div class="relative">
528
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-orange-600 flex items-center justify-center">
529
+ <i class="fas fa-rocket"></i>
530
+ </div>
531
+ </div>
532
+ <span>Space Exploration</span>
533
+ </div>
534
+
535
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
536
+ <div class="relative">
537
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center">
538
+ <i class="fas fa-dna"></i>
539
+ </div>
540
+ </div>
541
+ <span>Biohackers United</span>
542
+ </div>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="mt-6">
547
+ <h2 class="text-lg font-bold mb-4 gradient-text">Your AI Assistants</h2>
548
+ <div class="space-y-3">
549
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
550
+ <div class="relative">
551
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-cyan-500 flex items-center justify-center">
552
+ <i class="fas fa-robot"></i>
553
+ </div>
554
+ </div>
555
+ <span>Personal Assistant</span>
556
+ </div>
557
+
558
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
559
+ <div class="relative">
560
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
561
+ <i class="fas fa-brain"></i>
562
+ </div>
563
+ </div>
564
+ <span>Creative Partner</span>
565
+ </div>
566
+
567
+ <div class="flex items-center space-x-3 p-2 rounded hover:bg-gray-700 transition cursor-pointer">
568
+ <div class="relative">
569
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-yellow-400 to-orange-500 flex items-center justify-center">
570
+ <i class="fas fa-chart-line"></i>
571
+ </div>
572
+ </div>
573
+ <span>Analytics Expert</span>
574
+ </div>
575
+ </div>
576
+ </div>
577
+ </div>
578
+ </div>
579
+
580
+ <!-- Mobile Bottom Navigation -->
581
+ <div class="fixed bottom-0 left-0 right-0 bg-gray-800 flex justify-around items-center h-16 lg:hidden z-50">
582
+ <button class="p-2 text-blue-400">
583
+ <i class="fas fa-home text-xl"></i>
584
+ </button>
585
+ <button class="p-2 text-gray-400">
586
+ <i class="fas fa-network-wired text-xl"></i>
587
+ </button>
588
+ <button class="p-2 text-gray-400">
589
+ <i class="fas fa-vr-cardboard text-xl"></i>
590
+ </button>
591
+ <button class="p-2 text-gray-400">
592
+ <i class="fas fa-bell text-xl"></i>
593
+ </button>
594
+ <button class="p-2 text-gray-400">
595
+ <i class="fas fa-bars text-xl"></i>
596
+ </button>
597
+ </div>
598
+
599
+ <!-- AI Assistant Floating Button -->
600
+ <div class="ai-assistant">
601
+ <button id="aiAssistantBtn" class="w-14 h-14 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center shadow-lg pulse-animation">
602
+ <i class="fas fa-robot text-2xl"></i>
603
+ </button>
604
+ <div id="aiAssistantPanel" class="hidden absolute bottom-16 right-0 w-72 bg-gray-800 rounded-xl shadow-xl p-4">
605
+ <div class="flex justify-between items-center mb-3">
606
+ <h3 class="font-bold gradient-text">AI Assistant</h3>
607
+ <button id="closeAIPanel" class="text-gray-400 hover:text-white">
608
+ <i class="fas fa-times"></i>
609
+ </button>
610
+ </div>
611
+ <div class="bg-gray-700 rounded-lg p-3 mb-3">
612
+ <p class="text-sm">Hello John! How can I assist you today?</p>
613
+ </div>
614
+ <input type="text" placeholder="Ask me anything..." class="w-full bg-gray-700 rounded-full py-2 px-4 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
615
+ <div class="mt-3 grid grid-cols-3 gap-2">
616
+ <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Post Idea</button>
617
+ <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Schedule</button>
618
+ <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Research</button>
619
+ <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Translate</button>
620
+ <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Summarize</button>
621
+ <button class="bg-gray-700 hover:bg-gray-600 rounded-lg py-1 px-2 text-xs">Mind Sync</button>
622
+ </div>
623
+ </div>
624
+ </div>
625
+
626
+ <script>
627
+ // AI Assistant Toggle
628
+ const aiAssistantBtn = document.getElementById('aiAssistantBtn');
629
+ const aiAssistantPanel = document.getElementById('aiAssistantPanel');
630
+ const closeAIPanel = document.getElementById('closeAIPanel');
631
+
632
+ aiAssistantBtn.addEventListener('click', () => {
633
+ aiAssistantPanel.classList.toggle('hidden');
634
+ });
635
+
636
+ closeAIPanel.addEventListener('click', () => {
637
+ aiAssistantPanel.classList.add('hidden');
638
+ });
639
+
640
+ // Simulate loading more posts when scrolling
641
+ window.addEventListener('scroll', () => {
642
+ if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
643
+ // In a real app, you would fetch more posts here
644
+ console.log('Loading more posts...');
645
+ }
646
+ });
647
+
648
+ // Responsive menu toggle (for mobile)
649
+ // This would be expanded in a real implementation
650
+ </script>
651
+ <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=triton7777/futureconnectv0" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
652
+ </html>