Hugging Face's logo

Spaces:
bdsmgdjfv
/
anycoder-e37012b8
Running

App Files Community
bdsmgdjfv commited on
Commit
fafeb40
·
verified ·
1 Parent(s): 6d3ad83

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +453 -499
index.html CHANGED
@@ -1,563 +1,517 @@
1
  <!DOCTYPE html>
2
- <html lang="ar" dir="rtl">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>تطبيق نتفلكس</title>
 
 
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
- <style>
9
- :root {
10
- --primary: #e50914;
11
- --dark: #141414;
12
- --light: #f3f3f3;
13
- --gray: #999;
14
- --transition: all 0.3s ease;
15
- }
16
-
17
- * {
18
- margin: 0;
19
- padding: 0;
20
- box-sizing: border-box;
21
- font-family: 'Arial', sans-serif;
22
- }
23
-
24
- body {
25
- background-color: var(--dark);
26
- color: var(--light);
27
- overflow-x: hidden;
28
- }
29
-
30
- /* Header */
31
- header {
32
- position: fixed;
33
- top: 0;
34
- left: 0;
35
- width: 100%;
36
- z-index: 100;
37
- padding: 20px 50px;
38
- display: flex;
39
- justify-content: space-between;
40
- align-items: center;
41
- background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
42
- transition: var(--transition);
43
- }
44
-
45
- header.scrolled {
46
- background-color: var(--dark);
47
- }
48
-
49
- .logo {
50
- height: 40px;
51
- }
52
-
53
- .logo img {
54
- height: 100%;
55
- }
56
-
57
- .nav-links {
58
- display: flex;
59
- gap: 20px;
60
- }
61
-
62
- .nav-links a {
63
- color: var(--light);
64
- text-decoration: none;
65
- font-size: 14px;
66
- transition: var(--transition);
67
- }
68
-
69
- .nav-links a:hover {
70
- color: var(--gray);
71
- }
72
-
73
- .user-menu {
74
- display: flex;
75
- align-items: center;
76
- gap: 20px;
77
- }
78
-
79
- .search-box {
80
- position: relative;
81
- }
82
-
83
- .search-box input {
84
- background-color: rgba(0,0,0,0.5);
85
- border: 1px solid var(--gray);
86
- color: var(--light);
87
- padding: 5px 10px;
88
- border-radius: 4px;
89
- width: 0;
90
- opacity: 0;
91
- transition: var(--transition);
92
- }
93
-
94
- .search-box.active input {
95
- width: 200px;
96
- opacity: 1;
97
- }
98
-
99
- .search-box i {
100
- cursor: pointer;
101
- }
102
-
103
- .profile {
104
- display: flex;
105
- align-items: center;
106
- gap: 10px;
107
- }
108
-
109
- .profile img {
110
- width: 32px;
111
- height: 32px;
112
- border-radius: 4px;
113
- }
114
-
115
- /* Hero Section */
116
- .hero {
117
- height: 100vh;
118
- position: relative;
119
- background: linear-gradient(to top, var(--dark) 0%, transparent 100%);
120
- }
121
-
122
- .hero::before {
123
- content: '';
124
- position: absolute;
125
- top: 0;
126
- left: 0;
127
- width: 100%;
128
- height: 100%;
129
- background: url('https://assets.nflxext.com/ffe/siteui/vlv3/9d3533b2-0e2b-40b2-95e0-ecd7979cc88b/a3873901-5b7c-46eb-b9fa-12fea5197bd3/EG-en-20240311-popsignuptwoweeks-perspective_alpha_website_large.jpg') no-repeat center center/cover;
130
- z-index: -1;
131
- }
132
-
133
- .hero-content {
134
- position: absolute;
135
- bottom: 20%;
136
- left: 50px;
137
- max-width: 600px;
138
- }
139
-
140
- .hero-content h1 {
141
- font-size: 3rem;
142
- margin-bottom: 20px;
143
- }
144
-
145
- .hero-content p {
146
- font-size: 1.2rem;
147
- margin-bottom: 20px;
148
- }
149
-
150
- .hero-buttons {
151
- display: flex;
152
- gap: 10px;
153
- }
154
-
155
- .btn {
156
- padding: 10px 25px;
157
- border-radius: 4px;
158
- border: none;
159
- font-weight: bold;
160
- cursor: pointer;
161
- transition: var(--transition);
162
- display: flex;
163
- align-items: center;
164
- gap: 10px;
165
- }
166
-
167
- .btn-primary {
168
- background-color: var(--primary);
169
- color: var(--light);
170
- }
171
-
172
- .btn-secondary {
173
- background-color: rgba(109, 109, 110, 0.7);
174
- color: var(--light);
175
- }
176
-
177
- .btn:hover {
178
- opacity: 0.8;
179
- }
180
-
181
- /* Content Sections */
182
- .content {
183
- padding: 50px;
184
- margin-top: -100px;
185
- position: relative;
186
- z-index: 10;
187
- }
188
-
189
- .section {
190
- margin-bottom: 50px;
191
- }
192
-
193
- .section-title {
194
- font-size: 1.5rem;
195
- margin-bottom: 20px;
196
- }
197
-
198
- .carousel {
199
- display: flex;
200
- gap: 10px;
201
- overflow-x: auto;
202
- scroll-snap-type: x mandatory;
203
- scrollbar-width: none;
204
- padding-bottom: 20px;
205
- }
206
-
207
- .carousel::-webkit-scrollbar {
208
- display: none;
209
  }
210
-
211
- .movie-card {
212
- flex: 0 0 auto;
213
- width: 200px;
214
- scroll-snap-align: start;
215
- position: relative;
216
- transition: var(--transition);
217
  }
218
-
219
- .movie-card:hover {
220
- transform: scale(1.05);
221
- z-index: 20;
222
  }
223
-
224
- .movie-card img {
225
- width: 100%;
226
  border-radius: 4px;
227
  }
228
-
229
- .movie-info {
230
- position: absolute;
231
- bottom: 0;
232
- left: 0;
233
- right: 0;
234
- background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
235
- padding: 20px 10px;
236
- opacity: 0;
237
- transition: var(--transition);
238
  }
239
 
240
- .movie-card:hover .movie-info {
241
- opacity: 1;
 
 
 
242
  }
243
-
244
- .movie-info h3 {
245
- font-size: 16px;
246
- margin-bottom: 5px;
247
- }
248
-
249
- .movie-info p {
250
- font-size: 12px;
251
- color: var(--gray);
252
  }
253
-
254
- /* Footer */
255
- footer {
256
- background-color: var(--dark);
257
- padding: 50px;
258
- text-align: center;
259
- color: var(--gray);
260
- font-size: 14px;
261
- }
262
-
263
- .footer-links {
264
- display: flex;
265
- justify-content: center;
266
- flex-wrap: wrap;
267
- gap: 20px;
268
- margin-bottom: 20px;
269
- }
270
-
271
- .footer-links a {
272
- color: var(--gray);
273
- text-decoration: none;
274
- }
275
-
276
- .footer-links a:hover {
277
- text-decoration: underline;
278
- }
279
-
280
- .built-with {
281
- margin-top: 20px;
282
- }
283
-
284
- .built-with a {
285
- color: var(--primary);
286
- text-decoration: none;
287
- }
288
-
289
- /* Responsive */
290
- @media (max-width: 768px) {
291
- header {
292
- padding: 20px;
293
- }
294
-
295
- .hero-content {
296
- left: 20px;
297
- max-width: 80%;
298
- }
299
-
300
- .hero-content h1 {
301
- font-size: 2rem;
302
- }
303
-
304
- .hero-content p {
305
- font-size: 1rem;
306
- }
307
-
308
- .content {
309
- padding: 20px;
310
- }
311
-
312
- .movie-card {
313
- width: 150px;
314
- }
315
- }
316
-
317
- @media (max-width: 480px) {
318
- .nav-links {
319
- display: none;
320
- }
321
-
322
- .hero-content {
323
- text-align: center;
324
- left: 50%;
325
- transform: translateX(-50%);
326
- }
327
-
328
- .hero-buttons {
329
- flex-direction: column;
330
- }
331
-
332
- .section-title {
333
- font-size: 1.2rem;
334
- }
335
-
336
- .movie-card {
337
- width: 120px;
338
- }
339
  }
340
  </style>
341
  </head>
342
- <body>
343
- <header>
344
- <div class="logo">
345
- <img src="https://upload.wikimedia.org/wikipedia/commons/0/08/Netflix_2015_logo.svg" alt="Netflix Logo">
346
- </div>
347
- <nav class="nav-links">
348
- <a href="#">الرئيسية</a>
349
- <a href="#">مسلسلات</a>
350
- <a href="#">أفلام</a>
351
- <a href="#">المحتوى الجديد</a>
352
- <a href="#">قائمتي</a>
353
- </nav>
354
- <div class="user-menu">
355
- <div class="search-box">
356
- <i class="fas fa-search"></i>
357
- <input type="text" placeholder="بحث...">
358
- </div>
359
- <div class="profile">
360
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile">
361
- <i class="fas fa-caret-down"></i>
362
  </div>
363
  </div>
364
- </header>
365
 
366
- <section class="hero">
367
- <div class="hero-content">
368
- <h1>مسلسل الحفرة</h1>
369
- <p>تدور أحداث المسلسل حول عائلة "كوشوفالي" التي تسيطر على حي "الحفرة" في إسطنبول، وما يحدث عندما يقرر شاب يدعى "ياماج" الانتقام منهم.</p>
370
- <div class="hero-buttons">
371
- <button class="btn btn-primary"><i class="fas fa-play"></i> تشغيل</button>
372
- <button class="btn btn-secondary"><i class="fas fa-info-circle"></i> معلومات</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
  </div>
374
  </div>
375
- </section>
376
 
377
- <main class="content">
378
- <section class="section">
379
- <h2 class="section-title">المسلسلات العربية</h2>
380
- <div class="carousel">
381
- <div class="movie-card">
382
- <img src="https://via.placeholder.com/200x300?text=مسلسل+1" alt="مسلسل 1">
383
- <div class="movie-info">
384
- <h3>مسلسل 1</h3>
385
- <p>2023 | دراما</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
386
  </div>
387
  </div>
388
- <div class="movie-card">
389
- <img src="https://via.placeholder.com/200x300?text=مسلسل+2" alt="مسلسل 2">
390
- <div class="movie-info">
391
- <h3>مسلسل 2</h3>
392
- <p>2023 | أكشن</p>
 
393
  </div>
 
394
  </div>
395
- <div class="movie-card">
396
- <img src="https://via.placeholder.com/200x300?text=مسلسل+3" alt="مسلسل 3">
397
- <div class="movie-info">
398
- <h3>مسلسل 3</h3>
399
- <p>2023 | كوميدي</p>
 
400
  </div>
 
401
  </div>
402
- <div class="movie-card">
403
- <img src="https://via.placeholder.com/200x300?text=مسلسل+4" alt="مسلسل 4">
404
- <div class="movie-info">
405
- <h3>مسلسل 4</h3>
406
- <p>2023 | رومانسي</p>
 
407
  </div>
 
408
  </div>
409
- <div class="movie-card">
410
- <img src="https://via.placeholder.com/200x300?text=مسلسل+5" alt="مسلسل 5">
411
- <div class="movie-info">
412
- <h3>مسلسل 5</h3>
413
- <p>2023 | تشويق</p>
414
- </div>
 
415
  </div>
416
- <div class="movie-card">
417
- <img src="https://via.placeholder.com/200x300?text=مسلسل+6" alt="مسلسل 6">
418
- <div class="movie-info">
419
- <h3>مسلسل 6</h3>
420
- <p>2023 | تاريخي</p>
421
- </div>
 
 
 
 
 
 
 
422
  </div>
423
  </div>
424
- </section>
425
 
426
- <section class="section">
427
- <h2 class="section-title">الأفلام العربية</h2>
428
- <div class="carousel">
429
- <div class="movie-card">
430
- <img src="https://via.placeholder.com/200x300?text=فيلم+1" alt="فيلم 1">
431
- <div class="movie-info">
432
- <h3>فيلم 1</h3>
433
- <p>2023 | دراما</p>
 
 
 
 
 
 
 
 
 
434
  </div>
 
 
 
435
  </div>
436
- <div class="movie-card">
437
- <img src="https://via.placeholder.com/200x300?text=فيلم+2" alt="فيلم 2">
438
- <div class="movie-info">
439
- <h3>فيلم 2</h3>
440
- <p>2023 | أكشن</p>
441
- </div>
442
  </div>
443
- <div class="movie-card">
444
- <img src="https://via.placeholder.com/200x300?text=فيلم+3" alt="فيلم 3">
445
- <div class="movie-info">
446
- <h3>فيلم 3</h3>
447
- <p>2023 | كوميدي</p>
448
- </div>
449
  </div>
450
- <div class="movie-card">
451
- <img src="https://via.placeholder.com/200x300?text=فيلم+4" alt="فيلم 4">
452
- <div class="movie-info">
453
- <h3>فيلم 4</h3>
454
- <p>2023 | رومانسي</p>
 
 
 
 
455
  </div>
456
- </div>
457
- <div class="movie-card">
458
- <img src="https://via.placeholder.com/200x300?text=فيلم+5" alt="فيلم 5">
459
- <div class="movie-info">
460
- <h3>فيلم 5</h3>
461
- <p>2023 | تشويق</p>
462
  </div>
463
  </div>
464
- </div>
465
- </section>
466
 
467
- <section class="section">
468
- <h2 class="section-title">الأكثر مشاهدة</h2>
469
- <div class="carousel">
470
- <div class="movie-card">
471
- <img src="https://via.placeholder.com/200x300?text=الأكثر+1" alt="الأكثر 1">
472
- <div class="movie-info">
473
- <h3>الأكثر 1</h3>
474
- <p>2023 | دراما</p>
475
- </div>
 
 
 
 
 
476
  </div>
477
- <div class="movie-card">
478
- <img src="https://via.placeholder.com/200x300?text=الأكثر+2" alt="الأكثر 2">
479
- <div class="movie-info">
480
- <h3>الأكثر 2</h3>
481
- <p>2023 | أكشن</p>
 
 
 
 
 
 
 
 
 
 
482
  </div>
 
 
 
483
  </div>
484
- <div class="movie-card">
485
- <img src="https://via.placeholder.com/200x300?text=الأكثر+3" alt="الأكثر 3">
486
- <div class="movie-info">
487
- <h3>الأكثر 3</h3>
488
- <p>2023 | كوميدي</p>
489
- </div>
490
  </div>
491
- <div class="movie-card">
492
- <img src="https://via.placeholder.com/200x300?text=الأكثر+4" alt="الأكثر 4">
493
- <div class="movie-info">
494
- <h3>الأكثر 4</h3>
495
- <p>2023 | رومانسي</p>
 
496
  </div>
497
  </div>
498
- <div class="movie-card">
499
- <img src="https://via.placeholder.com/200x300?text=الأكثر+5" alt="الأكثر 5">
500
- <div class="movie-info">
501
- <h3>الأكثر 5</h3>
502
- <p>2023 | تشويق</p>
503
- </div>
 
 
 
 
 
 
 
504
  </div>
505
  </div>
506
- </section>
507
- </main>
508
 
509
- <footer>
510
- <div class="footer-links">
511
- <a href="#">حول نتفلكس</a>
512
- <a href="#">مركز المساعدة</a>
513
- <a href="#">الوظائف</a>
514
- <a href="#">شروط الاستخدام</a>
515
- <a href="#">خصوصيتنا</a>
516
- <a href="#">تفضيلات الكوكيز</a>
517
- <a href="#">معلومات الشركة</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
518
  </div>
519
- <p>© 2023 Netflix, Inc.</p>
520
- <div class="built-with">
521
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
 
 
 
522
  </div>
523
- </footer>
524
 
525
  <script>
526
- // Header scroll effect
527
- window.addEventListener('scroll', () => {
528
- const header = document.querySelector('header');
529
- if (window.scrollY > 100) {
530
- header.classList.add('scrolled');
531
- } else {
532
- header.classList.remove('scrolled');
533
- }
534
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
535
 
536
- // Search box toggle
537
- const searchIcon = document.querySelector('.search-box i');
538
- const searchInput = document.querySelector('.search-box input');
539
-
540
- searchIcon.addEventListener('click', () => {
541
- document.querySelector('.search-box').classList.toggle('active');
542
- if (document.querySelector('.search-box').classList.contains('active')) {
543
- searchInput.focus();
 
 
 
 
544
  }
545
- });
546
 
547
- // Movie carousel hover effect
548
- const movieCards = document.querySelectorAll('.movie-card');
549
- movieCards.forEach(card => {
550
- card.addEventListener('mouseenter', () => {
551
- card.style.zIndex = '20';
552
  });
553
- card.addEventListener('mouseleave', () => {
554
- card.style.zIndex = '1';
555
  });
556
- });
557
-
558
- // RTL direction for Arabic content
559
- document.documentElement.setAttribute('dir', 'rtl');
560
- document.documentElement.setAttribute('lang', 'ar');
561
  </script>
562
  </body>
563
  </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>Campus Connect - Social Feed</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <script>
11
+ tailwind.config = {
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ campus: {
16
+ blue: '#1877F2',
17
+ dark: '#1c1e21',
18
+ gray: '#f0f2f5',
19
+ text: '#050505',
20
+ secondary: '#65676b'
21
+ }
22
+ },
23
+ fontFamily: {
24
+ sans: ['Inter', 'sans-serif'],
25
+ }
26
+ }
27
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
29
+ </script>
30
+ <style>
31
+ /* Custom Scrollbar for a polished feel */
32
+ ::-webkit-scrollbar {
33
+ width: 8px;
 
 
34
  }
35
+ ::-webkit-scrollbar-track {
36
+ background: #f1f1f1;
 
 
37
  }
38
+ ::-webkit-scrollbar-thumb {
39
+ background: #c1c1c1;
 
40
  border-radius: 4px;
41
  }
42
+ ::-webkit-scrollbar-thumb:hover {
43
+ background: #a8a8a8;
 
 
 
 
 
 
 
 
44
  }
45
 
46
+ /* Animations */
47
+ @keyframes like-bounce {
48
+ 0% { transform: scale(1); }
49
+ 50% { transform: scale(1.3); }
50
+ 100% { transform: scale(1); }
51
  }
52
+ .animate-like {
53
+ animation: like-bounce 0.3s ease-in-out;
 
 
 
 
 
 
 
54
  }
55
+
56
+ .story-ring {
57
+ background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  }
59
  </style>
60
  </head>
61
+ <body class="bg-campus-gray text-campus-text font-sans antialiased overflow-hidden h-screen flex flex-col">
62
+
63
+ <!-- Top Navigation Bar -->
64
+ <nav class="bg-white shadow-sm h-16 flex items-center justify-between px-4 sticky top-0 z-50">
65
+ <!-- Left: Logo & Search -->
66
+ <div class="flex items-center gap-4 flex-1">
67
+ <a href="#" class="text-campus-blue text-3xl"><i class="fa-brands fa-facebook"></i></a>
68
+ <div class="relative hidden md:block">
69
+ <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
70
+ <input type="text" placeholder="Search Campus Connect" class="bg-campus-gray rounded-full py-2 pl-10 pr-4 w-64 focus:outline-none focus:ring-2 focus:ring-campus-blue transition-all">
 
 
 
 
 
 
 
 
 
 
71
  </div>
72
  </div>
 
73
 
74
+ <!-- Center: Main Nav Icons -->
75
+ <div class="flex items-center justify-center gap-2 md:gap-8 flex-1 h-full">
76
+ <button class="h-full px-4 md:px-8 border-b-4 border-campus-blue text-campus-blue hover:bg-gray-100 transition-colors relative group">
77
+ <i class="fa-solid fa-house text-xl"></i>
78
+ <span class="absolute top-1 right-2 bg-red-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full hidden group-hover:block">1</span>
79
+ </button>
80
+ <button class="h-full px-4 md:px-8 border-b-4 border-transparent text-gray-500 hover:bg-gray-100 transition-colors">
81
+ <i class="fa-solid fa-tv text-xl"></i>
82
+ </button>
83
+ <button class="h-full px-4 md:px-8 border-b-4 border-transparent text-gray-500 hover:bg-gray-100 transition-colors">
84
+ <i class="fa-solid fa-store text-xl"></i>
85
+ </button>
86
+ <button class="h-full px-4 md:px-8 border-b-4 border-transparent text-gray-500 hover:bg-gray-100 transition-colors">
87
+ <i class="fa-solid fa-users text-xl"></i>
88
+ </button>
89
+ </div>
90
+
91
+ <!-- Right: User Actions -->
92
+ <div class="flex items-center justify-end gap-3 flex-1">
93
+ <div class="bg-gray-200 rounded-full p-2 hover:bg-gray-300 cursor-pointer transition relative">
94
+ <i class="fa-solid fa-bell text-gray-800"></i>
95
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold w-5 h-5 flex items-center justify-center rounded-full border-2 border-white">3</span>
96
+ </div>
97
+ <div class="bg-gray-200 rounded-full p-2 hover:bg-gray-300 cursor-pointer transition">
98
+ <i class="fa-solid fa-comment-dots text-gray-800"></i>
99
+ </div>
100
+ <div class="flex items-center gap-2 cursor-pointer hover:bg-gray-100 p-1 rounded-full transition pr-3">
101
+ <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="User" class="w-9 h-9 rounded-full object-cover border border-gray-300">
102
+ <span class="font-semibold text-sm hidden lg:block">Alex</span>
103
  </div>
104
  </div>
105
+ </nav>
106
 
107
+ <!-- Main Layout -->
108
+ <div class="flex flex-1 overflow-hidden max-w-[1600px] mx-auto w-full">
109
+
110
+ <!-- Left Sidebar -->
111
+ <aside class="hidden lg:flex flex-col w-1/4 pt-6 px-4 overflow-y-auto pb-20">
112
+ <ul class="space-y-2">
113
+ <li>
114
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
115
+ <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-9 h-9 rounded-full" alt="Profile">
116
+ <span class="font-semibold">Alex Johnson</span>
117
+ </a>
118
+ </li>
119
+ <li>
120
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition text-campus-blue">
121
+ <i class="fa-solid fa-user-group w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i>
122
+ <span class="font-medium">Friends</span>
123
+ </a>
124
+ </li>
125
+ <li>
126
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
127
+ <i class="fa-solid fa-clock-rotate-left w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i>
128
+ <span class="font-medium">Memories</span>
129
+ </a>
130
+ </li>
131
+ <li>
132
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
133
+ <i class="fa-solid fa-bookmark w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i>
134
+ <span class="font-medium">Saved</span>
135
+ </a>
136
+ </li>
137
+ <li>
138
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
139
+ <i class="fa-solid fa-flag w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i>
140
+ <span class="font-medium">Pages</span>
141
+ </a>
142
+ </li>
143
+ <li>
144
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
145
+ <i class="fa-solid fa-calendar-day w-9 h-9 flex items-center justify-center bg-gray-200 rounded-full text-lg"></i>
146
+ <span class="font-medium">Events</span>
147
+ </a>
148
+ </li>
149
+ </ul>
150
+
151
+ <div class="mt-6 border-t border-gray-300 pt-4">
152
+ <h3 class="text-gray-500 font-semibold text-sm mb-3 px-2">Your Shortcuts</h3>
153
+ <ul class="space-y-2">
154
+ <li>
155
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
156
+ <div class="w-9 h-9 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600">
157
+ <i class="fa-solid fa-graduation-cap"></i>
158
+ </div>
159
+ <span class="font-medium text-sm">Study Grads</span>
160
+ </a>
161
+ </li>
162
+ <li>
163
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
164
+ <div class="w-9 h-9 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600">
165
+ <i class="fa-solid fa-martini-glass-citrus"></i>
166
+ </div>
167
+ <span class="font-medium text-sm">Friday Night Mixer</span>
168
+ </a>
169
+ </li>
170
+ <li>
171
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
172
+ <div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center text-green-600">
173
+ <i class="fa-solid fa-futbol"></i>
174
+ </div>
175
+ <span class="font-medium text-sm">Intramural Soccer</span>
176
+ </a>
177
+ </li>
178
+ </ul>
179
+ </div>
180
+ </aside>
181
+
182
+ <!-- Main Feed Area -->
183
+ <main class="flex-1 flex flex-col items-center overflow-y-auto pt-6 px-0 md:px-4 pb-10 w-full max-w-2xl mx-auto">
184
+
185
+ <!-- Stories Section -->
186
+ <div class="w-full flex gap-2 overflow-x-auto pb-4 px-2 no-scrollbar mb-4">
187
+ <!-- Create Story -->
188
+ <div class="relative flex-shrink-0 w-28 h-48 bg-white rounded-xl shadow-sm overflow-hidden cursor-pointer group border border-gray-200">
189
+ <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" class="w-full h-3/4 object-cover group-hover:scale-105 transition duration-300">
190
+ <div class="absolute bottom-0 w-full h-1/2 bg-white flex flex-col items-center justify-end pb-3">
191
+ <div class="absolute -top-5 bg-campus-blue text-white rounded-full w-8 h-8 flex items-center justify-center border-4 border-white">
192
+ <i class="fa-solid fa-plus"></i>
193
+ </div>
194
+ <span class="font-semibold text-xs">Create Story</span>
195
  </div>
196
  </div>
197
+
198
+ <!-- Story 1 -->
199
+ <div class="relative flex-shrink-0 w-28 h-48 rounded-xl shadow-sm overflow-hidden cursor-pointer group">
200
+ <img src="https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-105 transition duration-300 brightness-75">
201
+ <div class="absolute top-2 left-2 w-9 h-9 rounded-full p-0.5 story-ring">
202
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-full h-full rounded-full border-2 border-white object-cover">
203
  </div>
204
+ <span class="absolute bottom-2 left-2 text-white font-semibold text-xs drop-shadow-md">Sarah M.</span>
205
  </div>
206
+
207
+ <!-- Story 2 -->
208
+ <div class="relative flex-shrink-0 w-28 h-48 rounded-xl shadow-sm overflow-hidden cursor-pointer group">
209
+ <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-105 transition duration-300 brightness-75">
210
+ <div class="absolute top-2 left-2 w-9 h-9 rounded-full p-0.5 story-ring">
211
+ <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-full h-full rounded-full border-2 border-white object-cover">
212
  </div>
213
+ <span class="absolute bottom-2 left-2 text-white font-semibold text-xs drop-shadow-md">Mike T.</span>
214
  </div>
215
+
216
+ <!-- Story 3 -->
217
+ <div class="relative flex-shrink-0 w-28 h-48 rounded-xl shadow-sm overflow-hidden cursor-pointer group">
218
+ <img src="https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" class="w-full h-full object-cover group-hover:scale-105 transition duration-300 brightness-75">
219
+ <div class="absolute top-2 left-2 w-9 h-9 rounded-full p-0.5 story-ring">
220
+ <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-full h-full rounded-full border-2 border-white object-cover">
221
  </div>
222
+ <span class="absolute bottom-2 left-2 text-white font-semibold text-xs drop-shadow-md">Jessica L.</span>
223
  </div>
224
+ </div>
225
+
226
+ <!-- Create Post Widget -->
227
+ <div class="w-full bg-white rounded-xl shadow-sm p-4 mb-4">
228
+ <div class="flex gap-3 items-center mb-3">
229
+ <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover">
230
+ <input type="text" placeholder="What's on your mind, Alex?" class="bg-gray-100 hover:bg-gray-200 transition flex-1 rounded-full py-2 px-4 focus:outline-none cursor-text">
231
  </div>
232
+ <div class="border-t border-gray-200 pt-3 flex justify-between">
233
+ <button class="flex items-center gap-2 hover:bg-gray-100 px-3 py-2 rounded-lg transition flex-1 justify-center">
234
+ <i class="fa-solid fa-video text-red-500"></i>
235
+ <span class="text-gray-500 font-medium text-sm">Live Video</span>
236
+ </button>
237
+ <button class="flex items-center gap-2 hover:bg-gray-100 px-3 py-2 rounded-lg transition flex-1 justify-center">
238
+ <i class="fa-solid fa-images text-green-500"></i>
239
+ <span class="text-gray-500 font-medium text-sm">Photo/Video</span>
240
+ </button>
241
+ <button class="flex items-center gap-2 hover:bg-gray-100 px-3 py-2 rounded-lg transition flex-1 justify-center">
242
+ <i class="fa-regular fa-face-smile text-yellow-500"></i>
243
+ <span class="text-gray-500 font-medium text-sm">Feeling</span>
244
+ </button>
245
  </div>
246
  </div>
 
247
 
248
+ <!-- Feed Post -->
249
+ <div class="w-full bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
250
+ <!-- Post Header -->
251
+ <div class="p-4 flex justify-between items-start">
252
+ <div class="flex gap-3">
253
+ <div class="relative">
254
+ <img src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover border border-gray-200">
255
+ <div class="absolute -bottom-1 -right-1 bg-blue-500 w-3 h-3 rounded-full border-2 border-white"></div>
256
+ </div>
257
+ <div>
258
+ <h4 class="font-bold text-sm hover:underline cursor-pointer">Marcus Chen</h4>
259
+ <div class="flex items-center gap-1 text-xs text-gray-500">
260
+ <span>2 hrs</span>
261
+ <span>·</span>
262
+ <i class="fa-solid fa-earth-americas"></i>
263
+ </div>
264
+ </div>
265
  </div>
266
+ <button class="text-gray-500 hover:bg-gray-100 w-8 h-8 rounded-full flex items-center justify-center transition">
267
+ <i class="fa-solid fa-ellipsis"></i>
268
+ </button>
269
  </div>
270
+
271
+ <!-- Post Content -->
272
+ <div class="px-4 pb-3">
273
+ <p class="text-sm mb-3">Finally finished our group project! Couldn't have done it without this amazing crew. Late nights at the library paid off! 📚✨ <span class="text-campus-blue cursor-pointer hover:underline">#StudyGrads</span> <span class="text-campus-blue cursor-pointer hover:underline">#UniversityLife</span></p>
 
 
274
  </div>
275
+
276
+ <!-- Post Image (The Core Request) -->
277
+ <div class="w-full relative group cursor-pointer">
278
+ <img src="https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=90" alt="Students on Campus Quad" class="w-full h-auto max-h-[600px] object-cover">
279
+ <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-5 transition duration-300"></div>
 
280
  </div>
281
+
282
+ <!-- Post Stats -->
283
+ <div class="px-4 py-2 flex justify-between items-center border-b border-gray-100">
284
+ <div class="flex items-center gap-1">
285
+ <div class="flex -space-x-1">
286
+ <div class="w-5 h-5 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs border border-white z-20"><i class="fa-solid fa-thumbs-up"></i></div>
287
+ <div class="w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center text-xs border border-white z-10"><i class="fa-solid fa-heart"></i></div>
288
+ </div>
289
+ <span class="text-sm text-gray-500 hover:underline cursor-pointer ml-1" id="like-count-1">124</span>
290
  </div>
291
+ <div class="flex gap-3 text-sm text-gray-500">
292
+ <span class="hover:underline cursor-pointer">12 Comments</span>
293
+ <span class="hover:underline cursor-pointer">5 Shares</span>
 
 
 
294
  </div>
295
  </div>
 
 
296
 
297
+ <!-- Post Actions -->
298
+ <div class="px-2 py-1 flex justify-between">
299
+ <button onclick="toggleLike(this)" class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group">
300
+ <i class="fa-regular fa-thumbs-up text-xl group-hover:text-campus-blue transition-colors"></i>
301
+ <span>Like</span>
302
+ </button>
303
+ <button class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group">
304
+ <i class="fa-regular fa-comment text-xl group-hover:text-gray-700 transition-colors"></i>
305
+ <span>Comment</span>
306
+ </button>
307
+ <button class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group">
308
+ <i class="fa-solid fa-share text-xl group-hover:text-green-600 transition-colors"></i>
309
+ <span>Share</span>
310
+ </button>
311
  </div>
312
+ </div>
313
+
314
+ <!-- Second Post (Event) -->
315
+ <div class="w-full bg-white rounded-xl shadow-sm mb-4 overflow-hidden">
316
+ <div class="p-4 flex justify-between items-start">
317
+ <div class="flex gap-3">
318
+ <img src="https://images.unsplash.com/photo-1560439514-4e9645039924?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-10 h-10 rounded-full object-cover">
319
+ <div>
320
+ <h4 class="font-bold text-sm hover:underline cursor-pointer">Campus Events</h4>
321
+ <div class="flex items-center gap-1 text-xs text-gray-500">
322
+ <span>Sponsored</span>
323
+ <span>·</span>
324
+ <i class="fa-solid fa-earth-americas"></i>
325
+ </div>
326
+ </div>
327
  </div>
328
+ <button class="text-gray-500 hover:bg-gray-100 w-8 h-8 rounded-full flex items-center justify-center transition">
329
+ <i class="fa-solid fa-ellipsis"></i>
330
+ </button>
331
  </div>
332
+ <div class="px-4 pb-3">
333
+ <p class="text-sm mb-3">Don't miss the Friday Night Mixer this week! Live music, food trucks, and great company. See you there! 🎉</p>
 
 
 
 
334
  </div>
335
+ <div class="w-full bg-gray-100 border-t border-b border-gray-200 flex flex-col">
336
+ <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80" class="w-full h-64 object-cover">
337
+ <div class="p-3 bg-white">
338
+ <div class="text-xs text-gray-500 uppercase font-semibold">Student Union</div>
339
+ <div class="font-bold text-lg">Friday Night Mixer</div>
340
+ <div class="text-sm text-gray-500">Fri, Oct 24, 8:00 PM – 11:00 PM</div>
341
  </div>
342
  </div>
343
+ <div class="px-2 py-1 flex justify-between border-t border-gray-100">
344
+ <button onclick="toggleLike(this)" class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group">
345
+ <i class="fa-regular fa-thumbs-up text-xl group-hover:text-campus-blue transition-colors"></i>
346
+ <span>Like</span>
347
+ </button>
348
+ <button class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group">
349
+ <i class="fa-regular fa-comment text-xl group-hover:text-gray-700 transition-colors"></i>
350
+ <span>Comment</span>
351
+ </button>
352
+ <button class="flex-1 flex items-center justify-center gap-2 py-2 hover:bg-gray-100 rounded-lg transition text-gray-500 font-medium group">
353
+ <i class="fa-solid fa-share text-xl group-hover:text-green-600 transition-colors"></i>
354
+ <span>Share</span>
355
+ </button>
356
  </div>
357
  </div>
 
 
358
 
359
+ </main>
360
+
361
+ <!-- Right Sidebar (Contacts) -->
362
+ <aside class="hidden xl:block w-1/4 pt-6 px-4 overflow-y-auto pb-20">
363
+ <div class="flex justify-between items-center mb-4 px-2">
364
+ <h3 class="font-semibold text-gray-500 text-sm">Contacts</h3>
365
+ <div class="flex gap-2 text-gray-500">
366
+ <i class="fa-solid fa-video hover:bg-gray-200 p-1.5 rounded-full cursor-pointer"></i>
367
+ <i class="fa-solid fa-magnifying-glass hover:bg-gray-200 p-1.5 rounded-full cursor-pointer"></i>
368
+ <i class="fa-solid fa-ellipsis hover:bg-gray-200 p-1.5 rounded-full cursor-pointer"></i>
369
+ </div>
370
+ </div>
371
+
372
+ <ul class="space-y-1">
373
+ <li>
374
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition relative">
375
+ <div class="relative">
376
+ <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover">
377
+ <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div>
378
+ </div>
379
+ <span class="font-medium text-sm">Emily Zhang</span>
380
+ </a>
381
+ </li>
382
+ <li>
383
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition relative">
384
+ <div class="relative">
385
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover">
386
+ <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div>
387
+ </div>
388
+ <span class="font-medium text-sm">David Kim</span>
389
+ </a>
390
+ </li>
391
+ <li>
392
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition relative">
393
+ <div class="relative">
394
+ <img src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover">
395
+ <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-gray-400 border-2 border-white rounded-full"></div>
396
+ </div>
397
+ <span class="font-medium text-sm">Sarah Jenkins</span>
398
+ <span class="text-xs text-gray-400 ml-auto">1h</span>
399
+ </a>
400
+ </li>
401
+ <li>
402
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition relative">
403
+ <div class="relative">
404
+ <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover">
405
+ <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div>
406
+ </div>
407
+ <span class="font-medium text-sm">Chris Evans</span>
408
+ </a>
409
+ </li>
410
+ </ul>
411
+
412
+ <div class="mt-6 border-t border-gray-300 pt-4">
413
+ <h3 class="font-semibold text-gray-500 text-sm mb-3 px-2">Group Conversations</h3>
414
+ <ul class="space-y-1">
415
+ <li>
416
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
417
+ <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
418
+ <i class="fa-solid fa-users text-gray-600 text-xs"></i>
419
+ </div>
420
+ <span class="font-medium text-sm">CS 101 Study Group</span>
421
+ </a>
422
+ </li>
423
+ <li>
424
+ <a href="#" class="flex items-center gap-3 p-2 hover:bg-gray-200 rounded-lg transition">
425
+ <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center">
426
+ <i class="fa-solid fa-plus text-gray-600 text-xs"></i>
427
+ </div>
428
+ <span class="font-medium text-sm">Create New Group</span>
429
+ </a>
430
+ </li>
431
+ </ul>
432
+ </div>
433
+ </aside>
434
+ </div>
435
+
436
+ <!-- Floating Chat Widget (Visual Only) -->
437
+ <div class="fixed bottom-0 right-4 bg-white w-80 shadow-lg rounded-t-lg border border-gray-200 hidden md:flex flex-col z-50">
438
+ <div class="flex items-center justify-between p-2 bg-gray-100 rounded-t-lg cursor-pointer hover:bg-gray-200 transition">
439
+ <div class="flex items-center gap-2">
440
+ <div class="relative">
441
+ <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" class="w-8 h-8 rounded-full object-cover">
442
+ <div class="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 border-2 border-white rounded-full"></div>
443
+ </div>
444
+ <span class="font-semibold text-sm">Emily Zhang</span>
445
+ </div>
446
+ <div class="flex gap-2 text-gray-500">
447
+ <i class="fa-solid fa-video hover:bg-gray-300 p-1 rounded-full text-xs"></i>
448
+ <i class="fa-solid fa-phone hover:bg-gray-300 p-1 rounded-full text-xs"></i>
449
+ <i class="fa-solid fa-xmark hover:bg-gray-300 p-1 rounded-full text-xs"></i>
450
+ </div>
451
+ </div>
452
+ <div class="h-64 bg-white p-2 overflow-y-auto flex flex-col gap-2">
453
+ <div class="self-start bg-gray-100 p-2 rounded-lg rounded-tl-none text-sm max-w-[80%]">Hey! Are you coming to the mixer?</div>
454
+ <div class="self-end bg-campus-blue text-white p-2 rounded-lg rounded-tr-none text-sm max-w-[80%]">Yeah, I'll be there around 8!</div>
455
  </div>
456
+ <div class="p-2 border-t border-gray-200 flex gap-2">
457
+ <button class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-circle-plus"></i></button>
458
+ <button class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-image"></i></button>
459
+ <button class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-note-sticky"></i></button>
460
+ <input type="text" placeholder="Aa" class="bg-gray-100 rounded-full px-3 py-1 text-sm flex-1 focus:outline-none">
461
+ <button class="text-campus-blue"><i class="fa-solid fa-thumbs-up"></i></button>
462
  </div>
463
+ </div>
464
 
465
  <script>
466
+ // Interactive Like Button Logic
467
+ function toggleLike(btn) {
468
+ const icon = btn.querySelector('i');
469
+ const text = btn.querySelector('span');
470
+
471
+ // Toggle State
472
+ if (icon.classList.contains('fa-regular')) {
473
+ // Like
474
+ icon.classList.remove('fa-regular');
475
+ icon.classList.add('fa-solid', 'text-campus-blue', 'animate-like');
476
+ text.classList.add('text-campus-blue');
477
+
478
+ // Remove animation class after it plays so it can play again
479
+ setTimeout(() => {
480
+ icon.classList.remove('animate-like');
481
+ }, 300);
482
+
483
+ // Update count (Simulated)
484
+ const countSpan = document.getElementById('like-count-1');
485
+ if(countSpan) {
486
+ let count = parseInt(countSpan.innerText);
487
+ countSpan.innerText = count + 1;
488
+ }
489
 
490
+ } else {
491
+ // Unlike
492
+ icon.classList.remove('fa-solid', 'text-campus-blue');
493
+ icon.classList.add('fa-regular');
494
+ text.classList.remove('text-campus-blue');
495
+
496
+ // Update count (Simulated)
497
+ const countSpan = document.getElementById('like-count-1');
498
+ if(countSpan) {
499
+ let count = parseInt(countSpan.innerText);
500
+ countSpan.innerText = count - 1;
501
+ }
502
  }
503
+ }
504
 
505
+ // Simple Search Focus Effect
506
+ const searchInput = document.querySelector('input[type="text"]');
507
+ if(searchInput) {
508
+ searchInput.addEventListener('focus', () => {
509
+ searchInput.parentElement.classList.add('ring-2', 'ring-campus-blue', 'rounded-full');
510
  });
511
+ searchInput.addEventListener('blur', () => {
512
+ searchInput.parentElement.classList.remove('ring-2', 'ring-campus-blue', 'rounded-full');
513
  });
514
+ }
 
 
 
 
515
  </script>
516
  </body>
517
  </html>