Hugging Face's logo

Spaces:
StinsonOne
/
space-me
Running

App Files Community
StinsonOne commited on
Commit
30be4a6
·
verified ·
1 Parent(s): 647f442

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +777 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Space Me
3
- emoji: 📉
4
- colorFrom: yellow
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: space-me
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: blue
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,777 @@
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="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ConnectSphere - Privates Netzwerk</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .post-card {
14
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
15
+ }
16
+ .post-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
19
+ }
20
+ .upload-container {
21
+ border: 2px dashed #a777e3;
22
+ transition: all 0.3s;
23
+ }
24
+ .upload-container:hover {
25
+ border-color: #6e8efb;
26
+ background-color: rgba(110, 142, 251, 0.05);
27
+ }
28
+ .floating-btn {
29
+ box-shadow: 0 5px 15px rgba(0,0,0,0.2);
30
+ }
31
+ .avatar-upload {
32
+ position: relative;
33
+ }
34
+ .avatar-upload input {
35
+ display: none;
36
+ }
37
+ .avatar-upload label {
38
+ cursor: pointer;
39
+ }
40
+ .avatar-preview {
41
+ width: 100px;
42
+ height: 100px;
43
+ border-radius: 50%;
44
+ background-size: cover;
45
+ background-position: center;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="bg-gray-100 font-sans">
50
+ <!-- Login/Register Modal -->
51
+ <div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
52
+ <div class="bg-white rounded-lg w-full max-w-md p-6 mx-4">
53
+ <div class="flex justify-between items-center mb-6">
54
+ <h2 class="text-2xl font-bold text-gray-800">ConnectSphere</h2>
55
+ <button id="closeAuthModal" class="text-gray-500 hover:text-gray-700">
56
+ <i class="fas fa-times"></i>
57
+ </button>
58
+ </div>
59
+
60
+ <div id="authTabs" class="flex border-b mb-6">
61
+ <button class="tab-btn active py-2 px-4 font-medium text-purple-600 border-b-2 border-purple-600" data-tab="login">Anmelden</button>
62
+ <button class="tab-btn py-2 px-4 font-medium text-gray-500" data-tab="register">Registrieren</button>
63
+ </div>
64
+
65
+ <!-- Login Form -->
66
+ <div id="loginTab" class="auth-tab active">
67
+ <form id="loginForm">
68
+ <div class="mb-4">
69
+ <label class="block text-gray-700 mb-2" for="loginEmail">E-Mail</label>
70
+ <input type="email" id="loginEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
71
+ </div>
72
+ <div class="mb-6">
73
+ <label class="block text-gray-700 mb-2" for="loginPassword">Passwort</label>
74
+ <input type="password" id="loginPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
75
+ </div>
76
+ <button type="submit" class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition duration-300">Anmelden</button>
77
+ </form>
78
+ <div class="mt-4 text-center">
79
+ <a href="#" id="forgotPassword" class="text-purple-600 hover:underline">Passwort vergessen?</a>
80
+ </div>
81
+ </div>
82
+
83
+ <!-- Register Form -->
84
+ <div id="registerTab" class="auth-tab hidden">
85
+ <form id="registerForm">
86
+ <div class="mb-4">
87
+ <label class="block text-gray-700 mb-2" for="fullName">Vollständiger Name</label>
88
+ <input type="text" id="fullName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
89
+ </div>
90
+ <div class="mb-4">
91
+ <label class="block text-gray-700 mb-2" for="email">E-Mail</label>
92
+ <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
93
+ </div>
94
+ <div class="mb-4">
95
+ <label class="block text-gray-700 mb-2" for="password">Passwort</label>
96
+ <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
97
+ </div>
98
+ <div class="mb-6">
99
+ <label class="block text-gray-700 mb-2" for="confirmPassword">Passwort bestätigen</label>
100
+ <input type="password" id="confirmPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500" required>
101
+ </div>
102
+ <div class="mb-6">
103
+ <div class="avatar-upload flex flex-col items-center">
104
+ <div class="avatar-preview mb-2 bg-gray-200"></div>
105
+ <label class="text-purple-600 cursor-pointer">
106
+ <i class="fas fa-camera mr-2"></i>
107
+ <span>Profilbild hochladen</span>
108
+ <input type="file" id="avatar" accept="image/*">
109
+ </label>
110
+ </div>
111
+ </div>
112
+ <div class="mb-6 flex items-center">
113
+ <input type="checkbox" id="terms" class="mr-2" required>
114
+ <label for="terms" class="text-gray-700">Ich akzeptiere die <a href="#" class="text-purple-600 hover:underline">Nutzungsbedingungen</a></label>
115
+ </div>
116
+ <button type="submit" class="w-full bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700 transition duration-300">Konto erstellen</button>
117
+ </form>
118
+ </div>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Main App (hidden until auth) -->
123
+ <div id="appContainer" class="hidden">
124
+ <!-- Navigation -->
125
+ <nav class="bg-white shadow-lg">
126
+ <div class="max-w-6xl mx-auto px-4">
127
+ <div class="flex justify-between h-16">
128
+ <div class="flex items-center">
129
+ <a href="#" class="flex items-center py-2 px-2 text-2xl font-bold text-purple-600">
130
+ <i class="fas fa-users mr-2"></i>
131
+ <span>ConnectSphere</span>
132
+ </a>
133
+ </div>
134
+ <div class="hidden md:flex items-center space-x-1">
135
+ <a href="#" class="nav-link active"><i class="fas fa-home mr-1"></i> Start</a>
136
+ <a href="#" class="nav-link"><i class="fas fa-user-friends mr-1"></i> Netzwerk</a>
137
+ <a href="#" class="nav-link"><i class="fas fa-bell mr-1"></i> Benachrichtigungen</a>
138
+ <a href="#" class="nav-link"><i class="fas fa-envelope mr-1"></i> Nachrichten</a>
139
+ </div>
140
+ <div class="flex items-center">
141
+ <div class="relative" id="searchContainer">
142
+ <input type="text" placeholder="Suchen..." class="px-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-purple-500 w-56">
143
+ <button class="absolute right-3 top-2 text-gray-500">
144
+ <i class="fas fa-search"></i>
145
+ </button>
146
+ </div>
147
+ <div class="ml-4 dropdown relative">
148
+ <button id="userDropdown" class="flex items-center">
149
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-8 w-8 rounded-full object-cover">
150
+ <span class="ml-2 hidden md:inline">Nina M.</span>
151
+ </button>
152
+ <div class="dropdown-menu absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden">
153
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-purple-50"><i class="fas fa-user mr-2"></i> Profil</a>
154
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-purple-50"><i class="fas fa-cog mr-2"></i> Einstellungen</a>
155
+ <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-purple-50"><i class="fas fa-sign-out-alt mr-2"></i> Abmelden</a>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </nav>
162
+
163
+ <!-- Main Content -->
164
+ <div class="max-w-6xl mx-auto px-4 py-6">
165
+ <div class="flex flex-col md:flex-row gap-6">
166
+ <!-- Left Sidebar -->
167
+ <div class="w-full md:w-1/4 flex flex-col gap-4">
168
+ <div class="bg-white rounded-lg shadow p-4">
169
+ <div class="flex flex-col items-center">
170
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-24 w-24 rounded-full object-cover border-4 border-white shadow mb-4">
171
+ <h3 class="font-bold text-lg">Nina Müller</h3>
172
+ <p class="text-gray-600 text-sm">Web Developer</p>
173
+ <div class="border-t border-gray-200 w-full my-3"></div>
174
+ <div class="flex justify-between w-full text-sm mb-2">
175
+ <span>Beiträge</span>
176
+ <span class="font-bold">124</span>
177
+ </div>
178
+ <div class="flex justify-between w-full text-sm mb-2">
179
+ <span>Freunde</span>
180
+ <span class="font-bold">532</span>
181
+ </div>
182
+ <div class="flex justify-between w-full text-sm">
183
+ <span>Gruppen</span>
184
+ <span class="font-bold">8</span>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="bg-white rounded-lg shadow p-4">
190
+ <h3 class="font-bold mb-3">Kurznachrichten</h3>
191
+ <div class="space-y-3">
192
+ <div class="flex items-start">
193
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-10 w-10 rounded-full mr-2">
194
+ <div>
195
+ <p class="text-sm font-medium">Tom Weber</p>
196
+ <p class="text-xs text-gray-500">Wie war dein Wochenende?</p>
197
+ </div>
198
+ </div>
199
+ <div class="flex items-start">
200
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" class="h-10 w-10 rounded-full mr-2">
201
+ <div>
202
+ <p class="text-sm font-medium">Sarah Klein</p>
203
+ <p class="text-xs text-gray-500">Hast du den neuen Bericht gesehen?</p>
204
+ </div>
205
+ </div>
206
+ <div class="flex items-start">
207
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" class="h-10 w-10 rounded-full mr-2">
208
+ <div>
209
+ <p class="text-sm font-medium">Markus Vogel</p>
210
+ <p class="text-xs text-gray-500">Wir sollten uns bald treffen!</p>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ <button class="w-full mt-3 text-purple-600 text-sm font-medium hover:underline">Alle Nachrichten anzeigen</button>
215
+ </div>
216
+
217
+ <div class="bg-white rounded-lg shadow p-4">
218
+ <h3 class="font-bold mb-3">Beliebte Gruppen</h3>
219
+ <div class="space-y-4">
220
+ <div class="flex items-center">
221
+ <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-2">
222
+ <i class="fas fa-code"></i>
223
+ </div>
224
+ <div>
225
+ <p class="text-sm font-medium">Web Developers</p>
226
+ <p class="text-xs text-gray-500">342 Mitglieder</p>
227
+ </div>
228
+ </div>
229
+ <div class="flex items-center">
230
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-2">
231
+ <i class="fas fa-paint-brush"></i>
232
+ </div>
233
+ <div>
234
+ <p class="text-sm font-medium">Kreative Köpfe</p>
235
+ <p class="text-xs text-gray-500">189 Mitglieder</p>
236
+ </div>
237
+ </div>
238
+ <div class="flex items-center">
239
+ <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-2">
240
+ <i class="fas fa-leaf"></i>
241
+ </div>
242
+ <div>
243
+ <p class="text-sm font-medium">Nachhaltiges Leben</p>
244
+ <p class="text-xs text-gray-500">526 Mitglieder</p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ <button class="w-full mt-3 text-purple-600 text-sm font-medium hover:underline">Alle Gruppen anzeigen</button>
249
+ </div>
250
+ </div>
251
+
252
+ <!-- Main Feed -->
253
+ <div class="w-full md:w-2/4 flex flex-col gap-4">
254
+ <!-- Create Post -->
255
+ <div class="bg-white rounded-lg shadow p-4">
256
+ <div class="flex mb-4">
257
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-10 w-10 rounded-full mr-2">
258
+ <input type="text" placeholder="Was möchtest du teilen?" class="bg-gray-100 rounded-full px-4 w-full focus:outline-none" id="postInput">
259
+ </div>
260
+ <div class="flex justify-between border-t pt-3">
261
+ <label for="imageUpload" class="flex items-center text-gray-500 hover:text-purple-600 cursor-pointer">
262
+ <i class="fas fa-image mr-2"></i>
263
+ <span>Bild/Video</span>
264
+ <input type="file" id="imageUpload" accept="image/*,video/*" class="hidden">
265
+ </label>
266
+ <label class="flex items-center text-gray-500 hover:text-purple-600 cursor-pointer">
267
+ <i class="fas fa-user-tag mr-2"></i>
268
+ <span>Personen markieren</span>
269
+ </label>
270
+ <label class="flex items-center text-gray-500 hover:text-purple-600 cursor-pointer">
271
+ <i class="fas fa-map-marker-alt mr-2"></i>
272
+ <span>Ort hinzufügen</span>
273
+ </label>
274
+ <button id="postBtn" class="bg-purple-600 text-white px-4 py-1 rounded-full hover:bg-purple-700">Posten</button>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Post Feed -->
279
+ <div id="postFeed" class="space-y-4">
280
+ <!-- Sample Post 1 -->
281
+ <div class="bg-white rounded-lg shadow post-card">
282
+ <div class="p-4">
283
+ <div class="flex justify-between items-start mb-3">
284
+ <div class="flex items-center">
285
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-10 w-10 rounded-full mr-2">
286
+ <div>
287
+ <h4 class="font-bold">Tom Weber</h4>
288
+ <p class="text-xs text-gray-500">Vor 2 Stunden · <i class="fas fa-globe-americas"></i></p>
289
+ </div>
290
+ </div>
291
+ <button class="text-gray-500 hover:text-gray-700">
292
+ <i class="fas fa-ellipsis-h"></i>
293
+ </button>
294
+ </div>
295
+ <p class="mb-3">Heute war ein produktiver Tag! Hab endlich mein neues Projekt fertiggestellt. Wer möchte sich das Ergebnis ansehen?</p>
296
+ <div class="mb-3 rounded-lg overflow-hidden">
297
+ <img src="https://source.unsplash.com/random/600x400/?code" class="w-full h-auto">
298
+ </div>
299
+ <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3">
300
+ <button class="flex items-center hover:text-purple-600">
301
+ <i class="far fa-thumbs-up mr-1"></i>
302
+ <span>Gefällt mir</span>
303
+ </button>
304
+ <button class="flex items-center hover:text-purple-600">
305
+ <i class="far fa-comment mr-1"></i>
306
+ <span>Kommentieren</span>
307
+ </button>
308
+ <button class="flex items-center hover:text-purple-600">
309
+ <i class="fas fa-share mr-1"></i>
310
+ <span>Teilen</span>
311
+ </button>
312
+ </div>
313
+ <div class="flex items-center mb-2">
314
+ <div class="flex -space-x-2">
315
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" class="h-5 w-5 rounded-full border-2 border-white">
316
+ <img src="https://randomuser.me/api/portraits/men/91.jpg" class="h-5 w-5 rounded-full border-2 border-white">
317
+ </div>
318
+ <p class="text-xs ml-2">12 Personen gefällt das</p>
319
+ </div>
320
+ <div class="flex items-center mt-2">
321
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-8 w-8 rounded-full mr-2">
322
+ <div class="flex-grow">
323
+ <input type="text" placeholder="Schreibe einen Kommentar..." class="bg-gray-100 rounded-full px-3 py-1 w-full focus:outline-none">
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Sample Post 2 -->
330
+ <div class="bg-white rounded-lg shadow post-card">
331
+ <div class="p-4">
332
+ <div class="flex justify-between items-start mb-3">
333
+ <div class="flex items-center">
334
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" class="h-10 w-10 rounded-full mr-2">
335
+ <div>
336
+ <h4 class="font-bold">Sarah Klein</h4>
337
+ <p class="text-xs text-gray-500">Gestern · <i class="fas fa-user-friends"></i></p>
338
+ </div>
339
+ </div>
340
+ <button class="text-gray-500 hover:text-gray-700">
341
+ <i class="fas fa-ellipsis-h"></i>
342
+ </button>
343
+ </div>
344
+ <p class="mb-3">War gestern bei diesem großartigen Konzert! Hier ein paar Eindrücke:</p>
345
+ <div class="grid grid-cols-3 gap-1 mb-3 rounded-lg overflow-hidden">
346
+ <img src="https://source.unsplash.com/random/300x300/?concert1" class="w-full h-32 object-cover">
347
+ <img src="https://source.unsplash.com/random/300x300/?concert2" class="w-full h-32 object-cover">
348
+ <img src="https://source.unsplash.com/random/300x300/?concert3" class="w-full h-32 object-cover">
349
+ </div>
350
+ <div class="mb-3">
351
+ <div class="flex items-center text-sm text-gray-500">
352
+ <i class="fas fa-map-marker-alt mr-1"></i>
353
+ <span>Berlin, Deutschland</span>
354
+ </div>
355
+ <div class="flex items-center text-sm text-gray-500 mt-1">
356
+ <i class="fas fa-user-tag mr-1"></i>
357
+ <span>Tom Weber, Nina Müller</span>
358
+ </div>
359
+ </div>
360
+ <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3">
361
+ <button class="flex items-center hover:text-purple-600">
362
+ <i class="far fa-thumbs-up mr-1"></i>
363
+ <span>Gefällt mir</span>
364
+ </button>
365
+ <button class="flex items-center hover:text-purple-600">
366
+ <i class="far fa-comment mr-1"></i>
367
+ <span>Kommentieren</span>
368
+ </button>
369
+ <button class="flex items-center hover:text-purple-600">
370
+ <i class="fas fa-share mr-1"></i>
371
+ <span>Teilen</span>
372
+ </button>
373
+ </div>
374
+ <div class="flex items-center mb-2">
375
+ <div class="flex -space-x-2">
376
+ <img src="https://randomuser.me/api/portraits/women/33.jpg" class="h-5 w-5 rounded-full border-2 border-white">
377
+ <img src="https://randomuser.me/api/portraits/men/91.jpg" class="h-5 w-5 rounded-full border-2 border-white">
378
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-5 w-5 rounded-full border-2 border-white">
379
+ </div>
380
+ <p class="text-xs ml-2">23 Personen gefällt das</p>
381
+ </div>
382
+ <div class="space-y-2">
383
+ <div class="flex">
384
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" class="h-6 w-6 rounded-full mr-2 mt-1">
385
+ <div class="bg-gray-100 rounded-lg p-2 text-sm">
386
+ <p class="font-medium">Tom Weber</p>
387
+ <p>Sieht super aus! Könnten wir das nächste Mal zusammen gehen :)</p>
388
+ </div>
389
+ </div>
390
+ </div>
391
+ <div class="flex items-center mt-3">
392
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-8 w-8 rounded-full mr-2">
393
+ <div class="flex-grow">
394
+ <input type="text" placeholder="Schreibe einen Kommentar..." class="bg-gray-100 rounded-full px-3 py-1 w-full focus:outline-none">
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </div>
399
+ </div>
400
+ </div>
401
+
402
+ <!-- Right Sidebar -->
403
+ <div class="w-full md:w-1/4 flex flex-col gap-4">
404
+ <div class="bg-white rounded-lg shadow p-4">
405
+ <h3 class="font-bold mb-3">Veranstaltungen</h3>
406
+ <div class="space-y-3">
407
+ <div class="flex items-start">
408
+ <div class="bg-purple-100 text-purple-600 rounded-lg p-2 mr-3 text-center">
409
+ <p class="font-bold text-lg">15</p>
410
+ <p class="text-xs">MAI</p>
411
+ </div>
412
+ <div>
413
+ <p class="font-medium">Web Developer Meetup</p>
414
+ <p class="text-xs text-gray-500">Berlin, 18:00 Uhr</p>
415
+ </div>
416
+ </div>
417
+ <div class="flex items-start">
418
+ <div class="bg-blue-100 text-blue-600 rounded-lg p-2 mr-3 text-center">
419
+ <p class="font-bold text-lg">22</p>
420
+ <p class="text-xs">MAI</p>
421
+ </div>
422
+ <div>
423
+ <p class="font-medium">Team Workshop</p>
424
+ <p class="text-xs text-gray-500">Remote, 10:00 Uhr</p>
425
+ </div>
426
+ </div>
427
+ <div class="flex items-start">
428
+ <div class="bg-green-100 text-green-600 rounded-lg p-2 mr-3 text-center">
429
+ <p class="font-bold text-lg">30</p>
430
+ <p class="text-xs">MAI</p>
431
+ </div>
432
+ <div>
433
+ <p class="font-medium">Firmenfeier</p>
434
+ <p class="text-xs text-gray-500">Hauptbüro, 19:00 Uhr</p>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ <button class="w-full mt-3 text-purple-600 text-sm font-medium hover:underline">Alle Veranstaltungen anzeigen</button>
439
+ </div>
440
+
441
+ <div class="bg-white rounded-lg shadow p-4">
442
+ <h3 class="font-bold mb-3">Empfohlene Kontakte</h3>
443
+ <div class="space-y-3">
444
+ <div class="flex items-center justify-between">
445
+ <div class="flex items-center">
446
+ <img src="https://randomuser.me/api/portraits/men/92.jpg" class="h-10 w-10 rounded-full mr-2">
447
+ <div>
448
+ <p class="font-medium">Alexander Becker</p>
449
+ <p class="text-xs text-gray-500">5 gemeinsame Freunde</p>
450
+ </div>
451
+ </div>
452
+ <button class="text-purple-600 border border-purple-600 rounded-full px-3 py-1 text-sm hover:bg-purple-50">Hinzufügen</button>
453
+ </div>
454
+ <div class="flex items-center justify-between">
455
+ <div class="flex items-center">
456
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" class="h-10 w-10 rounded-full mr-2">
457
+ <div>
458
+ <p class="font-medium">Lisa Sommer</p>
459
+ <p class="text-xs text-gray-500">Projektmanager</p>
460
+ </div>
461
+ </div>
462
+ <button class="text-purple-600 border border-purple-600 rounded-full px-3 py-1 text-sm hover:bg-purple-50">Hinzufügen</button>
463
+ </div>
464
+ <div class="flex items-center justify-between">
465
+ <div class="flex items-center">
466
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" class="h-10 w-10 rounded-full mr-2">
467
+ <div>
468
+ <p class="font-medium">Michael Braun</p>
469
+ <p class="text-xs text-gray-500">3 gemeinsame Gruppen</p>
470
+ </div>
471
+ </div>
472
+ <button class="text-purple-600 border border-purple-600 rounded-full px-3 py-1 text-sm hover:bg-purple-50">Hinzufügen</button>
473
+ </div>
474
+ </div>
475
+ <button class="w-full mt-3 text-purple-600 text-sm font-medium hover:underline">Mehr vorschlagen</button>
476
+ </div>
477
+
478
+ <div class="bg-white rounded-lg shadow p-4">
479
+ <h3 class="font-bold mb-3">Aktuelle Aktivitäten</h3>
480
+ <div class="space-y-3">
481
+ <div class="flex items-start">
482
+ <div class="bg-purple-100 text-purple-600 rounded-full p-2 mr-3">
483
+ <i class="fas fa-user-plus"></i>
484
+ </div>
485
+ <div>
486
+ <p class="text-sm"><span class="font-medium">Tom Weber</span> hat dich zu seiner Freundesliste hinzugefügt</p>
487
+ <p class="text-xs text-gray-500">Vor 15 Minuten</p>
488
+ </div>
489
+ </div>
490
+ <div class="flex items-start">
491
+ <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3">
492
+ <i class="fas fa-heart"></i>
493
+ </div>
494
+ <div>
495
+ <p class="text-sm"><span class="font-medium">Lisa Sommer</span> gefällt dein Beitrag</p>
496
+ <p class="text-xs text-gray-500">Vor 2 Stunden</p>
497
+ </div>
498
+ </div>
499
+ <div class="flex items-start">
500
+ <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3">
501
+ <i class="fas fa-comment"></i>
502
+ </div>
503
+ <div>
504
+ <p class="text-sm"><span class="font-medium">Markus Vogel</span> hat deinen Beitrag kommentiert</p>
505
+ <p class="text-xs text-gray-500">Gestern</p>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Floating Create Button (Mobile) -->
515
+ <button id="mobilePostBtn" class="md:hidden fixed bottom-6 right-6 bg-purple-600 text-white rounded-full p-4 shadow-lg floating-btn">
516
+ <i class="fas fa-plus text-lg"></i>
517
+ </button>
518
+
519
+ <!-- Mobile Post Modal -->
520
+ <div id="mobilePostModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
521
+ <div class="bg-white rounded-lg w-full max-w-sm mx-4">
522
+ <div class="p-4 border-b">
523
+ <div class="flex justify-between items-center">
524
+ <h3 class="font-bold text-lg">Beitrag erstellen</h3>
525
+ <button id="closeMobilePostModal" class="text-gray-500 hover:text-gray-700">
526
+ <i class="fas fa-times"></i>
527
+ </button>
528
+ </div>
529
+ </div>
530
+ <div class="p-4">
531
+ <div class="flex mb-4">
532
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-10 w-10 rounded-full mr-2">
533
+ <input type="text" placeholder="Was möchtest du teilen?" class="bg-gray-100 rounded-full px-4 w-full focus:outline-none">
534
+ </div>
535
+ <div class="upload-container rounded-lg p-10 text-center mb-4 cursor-pointer">
536
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
537
+ <p class="text-gray-500">Bild oder Video hochladen</p>
538
+ <input type="file" class="hidden">
539
+ </div>
540
+ <div class="flex justify-between space-x-2">
541
+ <label class="flex-1 flex flex-col items-center text-gray-500 p-3 border rounded-lg cursor-pointer">
542
+ <i class="fas fa-image mb-1"></i>
543
+ <span class="text-xs">Foto</span>
544
+ <input type="file" accept="image/*" class="hidden">
545
+ </label>
546
+ <label class="flex-1 flex flex-col items-center text-gray-500 p-3 border rounded-lg cursor-pointer">
547
+ <i class="fas fa-user-tag mb-1"></i>
548
+ <span class="text-xs">Taggen</span>
549
+ </label>
550
+ <label class="flex-1 flex flex-col items-center text-gray-500 p-3 border rounded-lg cursor-pointer">
551
+ <i class="fas fa-map-marker-alt mb-1"></i>
552
+ <span class="text-xs">Ort</span>
553
+ </label>
554
+ </div>
555
+ <button class="w-full mt-4 bg-purple-600 text-white py-2 px-4 rounded-lg hover:bg-purple-700">Posten</button>
556
+ </div>
557
+ </div>
558
+ </div>
559
+ </div>
560
+
561
+ <script>
562
+ // Auth Modal Logic
563
+ document.addEventListener('DOMContentLoaded', function() {
564
+ const authModal = document.getElementById('authModal');
565
+ const appContainer = document.getElementById('appContainer');
566
+ const closeAuthModal = document.getElementById('closeAuthModal');
567
+ const tabButtons = document.querySelectorAll('.tab-btn');
568
+ const authTabs = document.querySelectorAll('.auth-tab');
569
+ const registerForm = document.getElementById('registerForm');
570
+ const loginForm = document.getElementById('loginForm');
571
+ const avatarInput = document.getElementById('avatar');
572
+ const avatarPreview = document.querySelector('.avatar-preview');
573
+ const mobilePostBtn = document.getElementById('mobilePostBtn');
574
+ const mobilePostModal = document.getElementById('mobilePostModal');
575
+ const closeMobilePostModal = document.getElementById('closeMobilePostModal');
576
+
577
+ // Show auth modal on load
578
+ authModal.classList.remove('hidden');
579
+
580
+ // Tab switching
581
+ tabButtons.forEach(button => {
582
+ button.addEventListener('click', function() {
583
+ const tabName = this.getAttribute('data-tab');
584
+
585
+ // Update active tab button
586
+ tabButtons.forEach(btn => {
587
+ btn.classList.remove('active', 'text-purple-600', 'border-purple-600');
588
+ btn.classList.add('text-gray-500');
589
+ });
590
+ this.classList.add('active', 'text-purple-600', 'border-purple-600');
591
+ this.classList.remove('text-gray-500');
592
+
593
+ // Show corresponding tab
594
+ authTabs.forEach(tab => {
595
+ tab.classList.add('hidden');
596
+ tab.classList.remove('active');
597
+ if(tab.id === `${tabName}Tab`) {
598
+ tab.classList.remove('hidden');
599
+ tab.classList.add('active');
600
+ }
601
+ });
602
+ });
603
+ });
604
+
605
+ // Close auth modal
606
+ closeAuthModal.addEventListener('click', function() {
607
+ authModal.classList.add('hidden');
608
+ });
609
+
610
+ // Register form submission
611
+ registerForm.addEventListener('submit', function(e) {
612
+ e.preventDefault();
613
+ const fullName = document.getElementById('fullName').value;
614
+ const email = document.getElementById('email').value;
615
+ const password = document.getElementById('password').value;
616
+ const confirmPassword = document.getElementById('confirmPassword').value;
617
+
618
+ if(password !== confirmPassword) {
619
+ alert('Passwörter stimmen nicht überein!');
620
+ return;
621
+ }
622
+
623
+ // Here you would normally send data to server
624
+ console.log('Registering:', {fullName, email, password});
625
+
626
+ // Simulate successful registration
627
+ simulateSuccessfulAuth();
628
+ });
629
+
630
+ // Login form submission
631
+ loginForm.addEventListener('submit', function(e) {
632
+ e.preventDefault();
633
+ const email = document.getElementById('loginEmail').value;
634
+ const password = document.getElementById('loginPassword').value;
635
+
636
+ // Here you would normally send data to server
637
+ console.log('Logging in:', {email, password});
638
+
639
+ // Simulate successful login
640
+ simulateSuccessfulAuth();
641
+ });
642
+
643
+ // Avatar upload preview
644
+ avatarInput.addEventListener('change', function(e) {
645
+ const file = e.target.files[0];
646
+ if (file) {
647
+ const reader = new FileReader();
648
+ reader.onload = function(event) {
649
+ avatarPreview.style.backgroundImage = `url(${event.target.result})`;
650
+ };
651
+ reader.readAsDataURL(file);
652
+ }
653
+ });
654
+
655
+ // Mobile post button
656
+ mobilePostBtn.addEventListener('click', function() {
657
+ mobilePostModal.classList.remove('hidden');
658
+ });
659
+
660
+ closeMobilePostModal.addEventListener('click', function() {
661
+ mobilePostModal.classList.add('hidden');
662
+ });
663
+
664
+ // User dropdown
665
+ const userDropdown = document.getElementById('userDropdown');
666
+ const dropdownMenu = document.querySelector('.dropdown-menu');
667
+
668
+ userDropdown.addEventListener('click', function() {
669
+ dropdownMenu.classList.toggle('hidden');
670
+ });
671
+
672
+ // Close dropdown when clicking outside
673
+ document.addEventListener('click', function(event) {
674
+ if (!event.target.closest('.dropdown')) {
675
+ dropdownMenu.classList.add('hidden');
676
+ }
677
+ });
678
+
679
+ // Image upload preview (for posts)
680
+ const imageUpload = document.getElementById('imageUpload');
681
+ const postBtn = document.getElementById('postBtn');
682
+ const postInput = document.getElementById('postInput');
683
+ const postFeed = document.getElementById('postFeed');
684
+
685
+ postBtn.addEventListener('click', function() {
686
+ const postText = postInput.value.trim();
687
+ if(postText) {
688
+ const now = new Date();
689
+ const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
690
+
691
+ const newPost = document.createElement('div');
692
+ newPost.className = 'bg-white rounded-lg shadow post-card';
693
+ newPost.innerHTML = `
694
+ <div class="p-4">
695
+ <div class="flex justify-between items-start mb-3">
696
+ <div class="flex items-center">
697
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-10 w-10 rounded-full mr-2">
698
+ <div>
699
+ <h4 class="font-bold">Nina Müller</h4>
700
+ <p class="text-xs text-gray-500">Gerade jetzt · <i class="fas fa-globe-americas"></i></p>
701
+ </div>
702
+ </div>
703
+ <button class="text-gray-500 hover:text-gray-700">
704
+ <i class="fas fa-ellipsis-h"></i>
705
+ </button>
706
+ </div>
707
+ <p class="mb-3">${postText}</p>
708
+ ${imageUpload.files.length > 0 ?
709
+ `<div class="mb-3 rounded-lg overflow-hidden">
710
+ <img src="${URL.createObjectURL(imageUpload.files[0])}" class="w-full h-auto">
711
+ </div>` : ''}
712
+ <div class="flex justify-between text-gray-500 border-t border-b py-2 mb-3">
713
+ <button class="flex items-center hover:text-purple-600">
714
+ <i class="far fa-thumbs-up mr-1"></i>
715
+ <span>Gefällt mir</span>
716
+ </button>
717
+ <button class="flex items-center hover:text-purple-600">
718
+ <i class="far fa-comment mr-1"></i>
719
+ <span>Kommentieren</span>
720
+ </button>
721
+ <button class="flex items-center hover:text-purple-600">
722
+ <i class="fas fa-share mr-1"></i>
723
+ <span>Teilen</span>
724
+ </button>
725
+ </div>
726
+ <div class="flex items-center mt-2">
727
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" class="h-8 w-8 rounded-full mr-2">
728
+ <div class="flex-grow">
729
+ <input type="text" placeholder="Schreibe einen Kommentar..." class="bg-gray-100 rounded-full px-3 py-1 w-full focus:outline-none">
730
+ </div>
731
+ </div>
732
+ </div>
733
+ `;
734
+
735
+ postFeed.prepend(newPost);
736
+ postInput.value = '';
737
+ imageUpload.value = '';
738
+ }
739
+ });
740
+
741
+ // Like buttons functionality
742
+ document.addEventListener('click', function(e) {
743
+ if (e.target.closest('.far.fa-thumbs-up')) {
744
+ const likeBtn = e.target.closest('.far.fa-thumbs-up');
745
+ likeBtn.classList.toggle('far');
746
+ likeBtn.classList.toggle('fas');
747
+ likeBtn.classList.toggle('text-purple-600');
748
+ }
749
+ });
750
+
751
+ // Simulate successful authentication
752
+ function simulateSuccessfulAuth() {
753
+ authModal.classList.add('hidden');
754
+ appContainer.classList.remove('hidden');
755
+
756
+ // Show welcome notification
757
+ setTimeout(() => {
758
+ const notification = document.createElement('div');
759
+ notification.className = 'fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg flex items-center z-50';
760
+ notification.innerHTML = `
761
+ <i class="fas fa-check-circle text-green-500 text-2xl mr-3"></i>
762
+ <div>
763
+ <p class="font-medium">Willkommen zurück!</p>
764
+ <p class="text-sm text-gray-600">Schön dich wiederzusehen, Nina.</p>
765
+ </div>
766
+ `;
767
+ document.body.appendChild(notification);
768
+
769
+ setTimeout(() => {
770
+ notification.remove();
771
+ }, 3000);
772
+ }, 500);
773
+ }
774
+ });
775
+ </script>
776
+ <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=StinsonOne/space-me" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
777
+ </html>