Hugging Face's logo

Spaces:
everett1997
/
anycoder-b8344c38
Running

App Files Community
everett1997 commited on
Commit
bd96142
·
verified ·
1 Parent(s): 23b1cfa

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +680 -19
index.html CHANGED
@@ -1,19 +1,680 @@
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>FriendSpace Dating - The 2005 Experience</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ * {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ font-family: 'Arial', sans-serif;
14
+ }
15
+
16
+ :root {
17
+ --myspace-blue: #3b5998;
18
+ --myspace-dark-blue: #2d4373;
19
+ --myspace-light-blue: #8b9dc3;
20
+ --myspace-gray: #f7f7f7;
21
+ --myspace-border: #dddfe2;
22
+ --myspace-text: #1d2129;
23
+ }
24
+
25
+ body {
26
+ background-color: #e9ebee;
27
+ color: var(--myspace-text);
28
+ line-height: 1.6;
29
+ }
30
+
31
+ .container {
32
+ max-width: 1200px;
33
+ margin: 0 auto;
34
+ padding: 0 15px;
35
+ }
36
+
37
+ /* Header Styles */
38
+ header {
39
+ background: linear-gradient(to bottom, var(--myspace-blue), var(--myspace-dark-blue));
40
+ color: white;
41
+ padding: 10px 0;
42
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
43
+ }
44
+
45
+ .header-top {
46
+ display: flex;
47
+ justify-content: space-between;
48
+ align-items: center;
49
+ }
50
+
51
+ .logo {
52
+ display: flex;
53
+ align-items: center;
54
+ font-size: 24px;
55
+ font-weight: bold;
56
+ }
57
+
58
+ .logo i {
59
+ margin-right: 10px;
60
+ }
61
+
62
+ .nav-menu {
63
+ display: flex;
64
+ list-style: none;
65
+ }
66
+
67
+ .nav-menu li {
68
+ margin-left: 20px;
69
+ }
70
+
71
+ .nav-menu a {
72
+ color: white;
73
+ text-decoration: none;
74
+ font-size: 14px;
75
+ transition: color 0.3s;
76
+ }
77
+
78
+ .nav-menu a:hover {
79
+ color: var(--myspace-light-blue);
80
+ }
81
+
82
+ .search-bar {
83
+ display: flex;
84
+ margin: 10px 0;
85
+ }
86
+
87
+ .search-bar input {
88
+ padding: 8px;
89
+ border: none;
90
+ border-radius: 3px 0 0 3px;
91
+ width: 200px;
92
+ }
93
+
94
+ .search-bar button {
95
+ background: var(--myspace-light-blue);
96
+ border: none;
97
+ padding: 8px 12px;
98
+ border-radius: 0 3px 3px 0;
99
+ cursor: pointer;
100
+ color: white;
101
+ }
102
+
103
+ /* Main Content Styles */
104
+ .main-content {
105
+ display: grid;
106
+ grid-template-columns: 250px 1fr 300px;
107
+ gap: 20px;
108
+ margin: 20px 0;
109
+ }
110
+
111
+ /* Sidebar Styles */
112
+ .sidebar {
113
+ background-color: white;
114
+ border-radius: 3px;
115
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
116
+ padding: 15px;
117
+ }
118
+
119
+ .profile-card {
120
+ text-align: center;
121
+ margin-bottom: 20px;
122
+ }
123
+
124
+ .profile-pic {
125
+ width: 150px;
126
+ height: 150px;
127
+ border-radius: 5px;
128
+ object-fit: cover;
129
+ margin: 0 auto 10px;
130
+ border: 3px solid var(--myspace-blue);
131
+ }
132
+
133
+ .profile-name {
134
+ font-weight: bold;
135
+ margin-bottom: 5px;
136
+ }
137
+
138
+ .profile-status {
139
+ color: #666;
140
+ font-size: 12px;
141
+ margin-bottom: 15px;
142
+ }
143
+
144
+ .sidebar-menu {
145
+ list-style: none;
146
+ }
147
+
148
+ .sidebar-menu li {
149
+ margin-bottom: 10px;
150
+ }
151
+
152
+ .sidebar-menu a {
153
+ color: var(--myspace-text);
154
+ text-decoration: none;
155
+ display: flex;
156
+ align-items: center;
157
+ padding: 8px;
158
+ border-radius: 3px;
159
+ transition: background 0.3s;
160
+ }
161
+
162
+ .sidebar-menu a:hover {
163
+ background-color: var(--myspace-gray);
164
+ }
165
+
166
+ .sidebar-menu i {
167
+ margin-right: 10px;
168
+ width: 20px;
169
+ text-align: center;
170
+ }
171
+
172
+ /* Center Content Styles */
173
+ .center-content {
174
+ background-color: white;
175
+ border-radius: 3px;
176
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
177
+ padding: 15px;
178
+ }
179
+
180
+ .content-header {
181
+ border-bottom: 1px solid var(--myspace-border);
182
+ padding-bottom: 10px;
183
+ margin-bottom: 15px;
184
+ display: flex;
185
+ justify-content: space-between;
186
+ align-items: center;
187
+ }
188
+
189
+ .content-title {
190
+ font-size: 18px;
191
+ font-weight: bold;
192
+ }
193
+
194
+ .status-update {
195
+ display: flex;
196
+ margin-bottom: 20px;
197
+ padding-bottom: 15px;
198
+ border-bottom: 1px solid var(--myspace-border);
199
+ }
200
+
201
+ .status-input {
202
+ flex: 1;
203
+ padding: 10px;
204
+ border: 1px solid var(--myspace-border);
205
+ border-radius: 3px;
206
+ margin-right: 10px;
207
+ }
208
+
209
+ .status-button {
210
+ background-color: var(--myspace-blue);
211
+ color: white;
212
+ border: none;
213
+ border-radius: 3px;
214
+ padding: 10px 15px;
215
+ cursor: pointer;
216
+ }
217
+
218
+ .feed-item {
219
+ margin-bottom: 20px;
220
+ padding-bottom: 15px;
221
+ border-bottom: 1px solid var(--myspace-border);
222
+ }
223
+
224
+ .feed-header {
225
+ display: flex;
226
+ align-items: center;
227
+ margin-bottom: 10px;
228
+ }
229
+
230
+ .feed-profile-pic {
231
+ width: 40px;
232
+ height: 40px;
233
+ border-radius: 50%;
234
+ object-fit: cover;
235
+ margin-right: 10px;
236
+ }
237
+
238
+ .feed-user {
239
+ font-weight: bold;
240
+ }
241
+
242
+ .feed-time {
243
+ color: #666;
244
+ font-size: 12px;
245
+ margin-left: 10px;
246
+ }
247
+
248
+ .feed-content {
249
+ margin-bottom: 10px;
250
+ }
251
+
252
+ .feed-actions {
253
+ display: flex;
254
+ color: #666;
255
+ font-size: 12px;
256
+ }
257
+
258
+ .feed-actions span {
259
+ margin-right: 15px;
260
+ cursor: pointer;
261
+ }
262
+
263
+ .feed-actions span:hover {
264
+ text-decoration: underline;
265
+ }
266
+
267
+ /* Right Sidebar Styles */
268
+ .right-sidebar {
269
+ background-color: white;
270
+ border-radius: 3px;
271
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
272
+ padding: 15px;
273
+ }
274
+
275
+ .friend-requests, .online-friends {
276
+ margin-bottom: 20px;
277
+ }
278
+
279
+ .section-title {
280
+ font-size: 16px;
281
+ font-weight: bold;
282
+ margin-bottom: 10px;
283
+ border-bottom: 1px solid var(--myspace-border);
284
+ padding-bottom: 5px;
285
+ }
286
+
287
+ .friend-item {
288
+ display: flex;
289
+ align-items: center;
290
+ margin-bottom: 10px;
291
+ padding: 5px;
292
+ border-radius: 3px;
293
+ transition: background 0.3s;
294
+ }
295
+
296
+ .friend-item:hover {
297
+ background-color: var(--myspace-gray);
298
+ }
299
+
300
+ .friend-pic {
301
+ width: 40px;
302
+ height: 40px;
303
+ border-radius: 50%;
304
+ object-fit: cover;
305
+ margin-right: 10px;
306
+ }
307
+
308
+ .friend-info {
309
+ flex: 1;
310
+ }
311
+
312
+ .friend-name {
313
+ font-weight: bold;
314
+ font-size: 14px;
315
+ }
316
+
317
+ .friend-status {
318
+ color: #666;
319
+ font-size: 12px;
320
+ }
321
+
322
+ .friend-actions {
323
+ display: flex;
324
+ }
325
+
326
+ .friend-action {
327
+ background: none;
328
+ border: none;
329
+ cursor: pointer;
330
+ margin-left: 5px;
331
+ color: var(--myspace-blue);
332
+ }
333
+
334
+ .online-indicator {
335
+ width: 8px;
336
+ height: 8px;
337
+ background-color: #4CAF50;
338
+ border-radius: 50%;
339
+ margin-right: 5px;
340
+ }
341
+
342
+ /* Footer Styles */
343
+ footer {
344
+ background-color: var(--myspace-dark-blue);
345
+ color: white;
346
+ padding: 20px 0;
347
+ margin-top: 30px;
348
+ text-align: center;
349
+ font-size: 12px;
350
+ }
351
+
352
+ .footer-links {
353
+ display: flex;
354
+ justify-content: center;
355
+ list-style: none;
356
+ margin-bottom: 10px;
357
+ }
358
+
359
+ .footer-links li {
360
+ margin: 0 10px;
361
+ }
362
+
363
+ .footer-links a {
364
+ color: var(--myspace-light-blue);
365
+ text-decoration: none;
366
+ }
367
+
368
+ .footer-links a:hover {
369
+ text-decoration: underline;
370
+ }
371
+
372
+ .built-with {
373
+ margin-top: 10px;
374
+ }
375
+
376
+ .built-with a {
377
+ color: white;
378
+ text-decoration: none;
379
+ }
380
+
381
+ .built-with a:hover {
382
+ text-decoration: underline;
383
+ }
384
+
385
+ /* Responsive Styles */
386
+ @media (max-width: 992px) {
387
+ .main-content {
388
+ grid-template-columns: 200px 1fr;
389
+ }
390
+ .right-sidebar {
391
+ display: none;
392
+ }
393
+ }
394
+
395
+ @media (max-width: 768px) {
396
+ .main-content {
397
+ grid-template-columns: 1fr;
398
+ }
399
+ .sidebar {
400
+ display: none;
401
+ }
402
+ .header-top {
403
+ flex-direction: column;
404
+ align-items: flex-start;
405
+ }
406
+ .nav-menu {
407
+ margin-top: 10px;
408
+ }
409
+ .search-bar {
410
+ width: 100%;
411
+ margin-top: 10px;
412
+ }
413
+ .search-bar input {
414
+ width: 100%;
415
+ }
416
+ }
417
+ </style>
418
+ </head>
419
+ <body>
420
+ <header>
421
+ <div class="container">
422
+ <div class="header-top">
423
+ <div class="logo">
424
+ <i class="fas fa-heart"></i>
425
+ FriendSpace Dating
426
+ </div>
427
+ <ul class="nav-menu">
428
+ <li><a href="#"><i class="fas fa-home"></i> Home</a></li>
429
+ <li><a href="#"><i class="fas fa-user-friends"></i> Browse</a></li>
430
+ <li><a href="#"><i class="fas fa-search"></i> Search</a></li>
431
+ <li><a href="#"><i class="fas fa-envelope"></i> Messages</a></li>
432
+ <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
433
+ </ul>
434
+ </div>
435
+ <div class="search-bar">
436
+ <input type="text" placeholder="Search for friends...">
437
+ <button><i class="fas fa-search"></i></button>
438
+ </div>
439
+ </div>
440
+ </header>
441
+
442
+ <div class="container">
443
+ <div class="main-content">
444
+ <!-- Left Sidebar -->
445
+ <div class="sidebar">
446
+ <div class="profile-card">
447
+ <img src="https://via.placeholder.com/150" alt="Profile Picture" class="profile-pic">
448
+ <div class="profile-name">John Doe</div>
449
+ <div class="profile-status">"Looking for someone special"</div>
450
+ <button class="status-button">Edit Profile</button>
451
+ </div>
452
+ <ul class="sidebar-menu">
453
+ <li><a href="#"><i class="fas fa-user"></i> My Profile</a></li>
454
+ <li><a href="#"><i class="fas fa-images"></i> My Photos</a></li>
455
+ <li><a href="#"><i class="fas fa-calendar-alt"></i> My Events</a></li>
456
+ <li><a href="#"><i class="fas fa-users"></i> My Friends</a></li>
457
+ <li><a href="#"><i class="fas fa-comments"></i> My Comments</a></li>
458
+ <li><a href="#"><i class="fas fa-music"></i> My Playlist</a></li>
459
+ <li><a href="#"><i class="fas fa-video"></i> My Videos</a></li>
460
+ <li><a href="#"><i class="fas fa-blog"></i> My Blog</a></li>
461
+ </ul>
462
+ </div>
463
+
464
+ <!-- Center Content -->
465
+ <div class="center-content">
466
+ <div class="content-header">
467
+ <div class="content-title">News Feed</div>
468
+ <div class="content-actions">
469
+ <button class="status-button">Post Update</button>
470
+ </div>
471
+ </div>
472
+
473
+ <div class="status-update">
474
+ <input type="text" class="status-input" placeholder="What's on your mind?">
475
+ <button class="status-button">Post</button>
476
+ </div>
477
+
478
+ <div class="feed">
479
+ <div class="feed-item">
480
+ <div class="feed-header">
481
+ <img src="https://via.placeholder.com/40" alt="User" class="feed-profile-pic">
482
+ <div class="feed-user">Sarah Johnson</div>
483
+ <div class="feed-time">2 hours ago</div>
484
+ </div>
485
+ <div class="feed-content">
486
+ Just had an amazing date with someone I met here! Thanks FriendSpace! ❤️
487
+ </div>
488
+ <div class="feed-actions">
489
+ <span><i class="fas fa-thumbs-up"></i> Like</span>
490
+ <span><i class="fas fa-comment"></i> Comment</span>
491
+ <span><i class="fas fa-share"></i> Share</span>
492
+ </div>
493
+ </div>
494
+
495
+ <div class="feed-item">
496
+ <div class="feed-header">
497
+ <img src="https://via.placeholder.com/40" alt="User" class="feed-profile-pic">
498
+ <div class="feed-user">Mike Thompson</div>
499
+ <div class="feed-time">5 hours ago</div>
500
+ </div>
501
+ <div class="feed-content">
502
+ Looking for someone to go to the concert with this weekend. Anyone interested?
503
+ </div>
504
+ <div class="feed-actions">
505
+ <span><i class="fas fa-thumbs-up"></i> Like</span>
506
+ <span><i class="fas fa-comment"></i> Comment</span>
507
+ <span><i class="fas fa-share"></i> Share</span>
508
+ </div>
509
+ </div>
510
+
511
+ <div class="feed-item">
512
+ <div class="feed-header">
513
+ <img src="https://via.placeholder.com/40" alt="User" class="feed-profile-pic">
514
+ <div class="feed-user">Jennifer Lopez</div>
515
+ <div class="feed-time">1 day ago</div>
516
+ </div>
517
+ <div class="feed-content">
518
+ Just joined FriendSpace! Excited to meet new people in my area. Feel free to message me!
519
+ </div>
520
+ <div class="feed-actions">
521
+ <span><i class="fas fa-thumbs-up"></i> Like</span>
522
+ <span><i class="fas fa-comment"></i> Comment</span>
523
+ <span><i class="fas fa-share"></i> Share</span>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </div>
528
+
529
+ <!-- Right Sidebar -->
530
+ <div class="right-sidebar">
531
+ <div class="friend-requests">
532
+ <div class="section-title">Friend Requests</div>
533
+ <div class="friend-item">
534
+ <img src="https://via.placeholder.com/40" alt="User" class="friend-pic">
535
+ <div class="friend-info">
536
+ <div class="friend-name">Emily Davis</div>
537
+ <div class="friend-status">Mutual Friends: 3</div>
538
+ </div>
539
+ <div class="friend-actions">
540
+ <button class="friend-action"><i class="fas fa-check"></i></button>
541
+ <button class="friend-action"><i class="fas fa-times"></i></button>
542
+ </div>
543
+ </div>
544
+ <div class="friend-item">
545
+ <img src="https://via.placeholder.com/40" alt="User" class="friend-pic">
546
+ <div class="friend-info">
547
+ <div class="friend-name">Robert Wilson</div>
548
+ <div class="friend-status">Mutual Friends: 7</div>
549
+ </div>
550
+ <div class="friend-actions">
551
+ <button class="friend-action"><i class="fas fa-check"></i></button>
552
+ <button class="friend-action"><i class="fas fa-times"></i></button>
553
+ </div>
554
+ </div>
555
+ </div>
556
+
557
+ <div class="online-friends">
558
+ <div class="section-title">Online Now</div>
559
+ <div class="friend-item">
560
+ <span class="online-indicator"></span>
561
+ <img src="https://via.placeholder.com/40" alt="User" class="friend-pic">
562
+ <div class="friend-info">
563
+ <div class="friend-name">Jessica Miller</div>
564
+ <div class="friend-status">Active now</div>
565
+ </div>
566
+ </div>
567
+ <div class="friend-item">
568
+ <span class="online-indicator"></span>
569
+ <img src="https://via.placeholder.com/40" alt="User" class="friend-pic">
570
+ <div class="friend-info">
571
+ <div class="friend-name">David Brown</div>
572
+ <div class="friend-status">Active 5 min ago</div>
573
+ </div>
574
+ </div>
575
+ <div class="friend-item">
576
+ <span class="online-indicator"></span>
577
+ <img src="https://via.placeholder.com/40" alt="User" class="friend-pic">
578
+ <div class="friend-info">
579
+ <div class="friend-name">Amanda Taylor</div>
580
+ <div class="friend-status">Active now</div>
581
+ </div>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+
588
+ <footer>
589
+ <div class="container">
590
+ <ul class="footer-links">
591
+ <li><a href="#">About</a></li>
592
+ <li><a href="#">Careers</a></li>
593
+ <li><a href="#">Privacy</a></li>
594
+ <li><a href="#">Terms</a></li>
595
+ <li><a href="#">Help</a></li>
596
+ <li><a href="#">Safety</a></li>
597
+ </ul>
598
+ <div>FriendSpace Dating © 2005</div>
599
+ <div class="built-with">
600
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
601
+ </div>
602
+ </div>
603
+ </footer>
604
+
605
+ <script>
606
+ // Simple functionality for the dating website
607
+ document.addEventListener('DOMContentLoaded', function() {
608
+ // Status update functionality
609
+ const statusInput = document.querySelector('.status-input');
610
+ const statusButton = document.querySelector('.status-update .status-button');
611
+
612
+ statusButton.addEventListener('click', function() {
613
+ if (statusInput.value.trim() !== '') {
614
+ const feed = document.querySelector('.feed');
615
+ const newPost = document.createElement('div');
616
+ newPost.className = 'feed-item';
617
+ newPost.innerHTML = `
618
+ <div class="feed-header">
619
+ <img src="https://via.placeholder.com/40" alt="User" class="feed-profile-pic">
620
+ <div class="feed-user">John Doe</div>
621
+ <div class="feed-time">Just now</div>
622
+ </div>
623
+ <div class="feed-content">
624
+ ${statusInput.value}
625
+ </div>
626
+ <div class="feed-actions">
627
+ <span><i class="fas fa-thumbs-up"></i> Like</span>
628
+ <span><i class="fas fa-comment"></i> Comment</span>
629
+ <span><i class="fas fa-share"></i> Share</span>
630
+ </div>
631
+ `;
632
+ feed.insertBefore(newPost, feed.firstChild);
633
+ statusInput.value = '';
634
+
635
+ // Add like functionality to new post
636
+ const likeSpan = newPost.querySelector('.feed-actions span');
637
+ likeSpan.addEventListener('click', function() {
638
+ this.classList.toggle('liked');
639
+ if (this.classList.contains('liked')) {
640
+ this.innerHTML = '<i class="fas fa-thumbs-up"></i> Liked';
641
+ this.style.color = 'var(--myspace-blue)';
642
+ } else {
643
+ this.innerHTML = '<i class="fas fa-thumbs-up"></i> Like';
644
+ this.style.color = '#666';
645
+ }
646
+ });
647
+ }
648
+ });
649
+
650
+ // Like functionality for existing posts
651
+ document.querySelectorAll('.feed-actions span:first-child').forEach(likeSpan => {
652
+ likeSpan.addEventListener('click', function() {
653
+ this.classList.toggle('liked');
654
+ if (this.classList.contains('liked')) {
655
+ this.innerHTML = '<i class="fas fa-thumbs-up"></i> Liked';
656
+ this.style.color = 'var(--myspace-blue)';
657
+ } else {
658
+ this.innerHTML = '<i class="fas fa-thumbs-up"></i> Like';
659
+ this.style.color = '#666';
660
+ }
661
+ });
662
+ });
663
+
664
+ // Friend request functionality
665
+ document.querySelectorAll('.friend-action').forEach(button => {
666
+ button.addEventListener('click', function() {
667
+ const friendItem = this.closest('.friend-item');
668
+ if (this.querySelector('.fa-check')) {
669
+ alert('Friend request accepted!');
670
+ friendItem.remove();
671
+ } else {
672
+ alert('Friend request declined.');
673
+ friendItem.remove();
674
+ }
675
+ });
676
+ });
677
+ });
678
+ </script>
679
+ </body>
680
+ </html>