Spaces:

everett1997
/

anycoder-4139c66a

Running

App Files Files Community

everett1997 commited on Dec 3, 2025

Commit

b9eba7e

verified ·

1 Parent(s): 46c9871

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +894 -19

index.html CHANGED Viewed

@@ -1,19 +1,894 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>FriendSpace Dating - The 2005 Experience</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Arial', sans-serif; }
+    :root {
+      --myspace-blue: #3b5998;
+      --myspace-dark-blue: #2d4373;
+      --myspace-light-blue: #8b9dc3;
+      --myspace-gray: #f7f7f7;
+      --myspace-border: #dddfe2;
+      --myspace-text: #1d2129;
+      --myspace-accent: #FF6B9D;
+      --myspace-success: #4CAF50;
+      --myspace-gradient: linear-gradient(135deg, #3b5998 0%, #FF6B9D 100%);
+    }
+    body {
+      background: linear-gradient(135deg, #e9ebee 0%, #f0f2f5 100%);
+      color: var(--myspace-text);
+      line-height: 1.6;
+      min-height: 100vh;
+      background-attachment: fixed;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 15px;
+    }
+    /* Header */
+    header {
+      background: var(--myspace-gradient);
+      color: white;
+      padding: 10px 0;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+    }
+    .header-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .logo {
+      display: flex;
+      align-items: center;
+      font-size: 28px;
+      font-weight: bold;
+      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+      transition: transform 0.3s;
+    }
+    .logo:hover {
+      transform: scale(1.05);
+    }
+    .logo i {
+      margin-right: 10px;
+      color: var(--myspace-accent);
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0% { transform: scale(1); }
+      50% { transform: scale(1.1); }
+      100% { transform: scale(1); }
+    }
+    .nav-menu {
+      display: flex;
+      list-style: none;
+    }
+    .nav-menu li {
+      margin-left: 20px;
+      position: relative;
+    }
+    .nav-menu a {
+      color: white;
+      text-decoration: none;
+      font-size: 14px;
+      transition: color 0.3s;
+      padding: 5px 10px;
+      border-radius: 4px;
+    }
+    .nav-menu a:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      color: white;
+    }
+    .nav-menu a i {
+      margin-right: 5px;
+    }
+    .search-bar {
+      display: flex;
+      margin: 10px 0;
+      max-width: 300px;
+    }
+    .search-bar input {
+      padding: 10px;
+      border: none;
+      border-radius: 3px 0 0 3px;
+      width: 100%;
+      font-size: 14px;
+    }
+    .search-bar button {
+      background: var(--myspace-accent);
+      border: none;
+      padding: 10px 15px;
+      border-radius: 0 3px 3px 0;
+      cursor: pointer;
+      color: white;
+      transition: background 0.3s;
+    }
+    .search-bar button:hover {
+      background: #ff4d8a;
+    }
+    /* Layout */
+    .main-content {
+      display: grid;
+      grid-template-columns: 250px 1fr 300px;
+      gap: 20px;
+      margin: 20px 0;
+    }
+    .sidebar, .center-content, .right-sidebar {
+      background-color: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      padding: 20px;
+      transition: transform 0.3s, box-shadow 0.3s;
+    }
+    .sidebar:hover, .center-content:hover, .right-sidebar:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
+    }
+    /* Left Sidebar */
+    .profile-card {
+      text-align: center;
+      margin-bottom: 20px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--myspace-border);
+    }
+    .profile-pic {
+      width: 150px;
+      height: 150px;
+      border-radius: 50%;
+      object-fit: cover;
+      margin: 0 auto 10px;
+      border: 4px solid var(--myspace-blue);
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
+      transition: transform 0.3s;
+    }
+    .profile-pic:hover {
+      transform: rotate(5deg);
+    }
+    .profile-name {
+      font-weight: bold;
+      margin-bottom: 5px;
+      font-size: 18px;
+    }
+    .profile-status {
+      color: #666;
+      font-size: 12px;
+      margin-bottom: 15px;
+      font-style: italic;
+    }
+    .sidebar-menu {
+      list-style: none;
+    }
+    .sidebar-menu li {
+      margin-bottom: 10px;
+    }
+    .sidebar-menu a {
+      color: var(--myspace-text);
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      padding: 12px;
+      border-radius: 5px;
+      transition: all 0.3s;
+      background: linear-gradient(to right, transparent 50%, var(--myspace-gray) 50%);
+      background-size: 200% 100%;
+      background-position: right bottom;
+    }
+    .sidebar-menu a:hover {
+      background-position: left bottom;
+      color: var(--myspace-blue);
+      transform: translateX(5px);
+    }
+    .sidebar-menu i {
+      margin-right: 10px;
+      width: 20px;
+      text-align: center;
+    }
+    /* Feed */
+    .content-header {
+      border-bottom: 1px solid var(--myspace-border);
+      padding-bottom: 10px;
+      margin-bottom: 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .content-title {
+      font-size: 22px;
+      font-weight: bold;
+      background: var(--myspace-gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .status-update {
+      display: flex;
+      margin-bottom: 20px;
+      padding-bottom: 15px;
+      border-bottom: 1px solid var(--myspace-border);
+    }
+    .status-input {
+      flex: 1;
+      padding: 12px;
+      border: 1px solid var(--myspace-border);
+      border-radius: 5px;
+      margin-right: 10px;
+      font-size: 14px;
+      transition: border 0.3s;
+    }
+    .status-input:focus {
+      outline: none;
+      border-color: var(--myspace-blue);
+      box-shadow: 0 0 5px rgba(59, 89, 152, 0.3);
+    }
+    .status-button {
+      background: var(--myspace-gradient);
+      color: white;
+      border: none;
+      border-radius: 5px;
+      padding: 12px 20px;
+      cursor: pointer;
+      font-weight: bold;
+      transition: transform 0.3s, box-shadow 0.3s;
+    }
+    .status-button:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    }
+    .feed-item {
+      margin-bottom: 20px;
+      padding-bottom: 15px;
+      border-bottom: 1px solid var(--myspace-border);
+      transition: transform 0.3s;
+    }
+    .feed-item:hover {
+      transform: translateX(5px);
+    }
+    .feed-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+    .feed-profile-pic {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      object-fit: cover;
+      margin-right: 10px;
+      border: 2px solid var(--myspace-blue);
+    }
+    .feed-user {
+      font-weight: bold;
+      color: var(--myspace-blue);
+    }
+    .feed-time {
+      color: #666;
+      font-size: 12px;
+      margin-left: 10px;
+    }
+    .feed-content {
+      margin-bottom: 10px;
+      padding: 10px;
+      background-color: var(--myspace-gray);
+      border-radius: 5px;
+      line-height: 1.5;
+    }
+    .feed-actions {
+      display: flex;
+      color: #666;
+      font-size: 12px;
+    }
+    .feed-actions span {
+      margin-right: 15px;
+      cursor: pointer;
+      padding: 5px 10px;
+      border-radius: 3px;
+      transition: all 0.3s;
+    }
+    .feed-actions span:hover {
+      background-color: var(--myspace-gray);
+      color: var(--myspace-blue);
+    }
+    .liked {
+      color: var(--myspace-blue) !important;
+      font-weight: bold;
+    }
+    /* Right Sidebar */
+    .section-title {
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 15px;
+      border-bottom: 2px solid var(--myspace-blue);
+      padding-bottom: 5px;
+      color: var(--myspace-dark-blue);
+    }
+    .friend-item {
+      display: flex;
+      align-items: center;
+      margin-bottom: 15px;
+      padding: 10px;
+      border-radius: 5px;
+      transition: all 0.3s;
+      border: 1px solid transparent;
+    }
+    .friend-item:hover {
+      background-color: var(--myspace-gray);
+      border-color: var(--myspace-border);
+      transform: translateX(5px);
+    }
+    .friend-pic {
+      width: 50px;
+      height: 50px;
+      border-radius: 50%;
+      object-fit: cover;
+      margin-right: 10px;
+      border: 2px solid var(--myspace-blue);
+    }
+    .friend-info {
+      flex: 1;
+    }
+    .friend-name {
+      font-weight: bold;
+      font-size: 14px;
+    }
+    .friend-status {
+      color: #666;
+      font-size: 12px;
+    }
+    .friend-actions {
+      display: flex;
+    }
+    .friend-action {
+      background: none;
+      border: none;
+      cursor: pointer;
+      margin-left: 5px;
+      color: var(--myspace-blue);
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.3s;
+    }
+    .friend-action:hover {
+      background-color: var(--myspace-blue);
+      color: white;
+    }
+    .online-indicator {
+      width: 10px;
+      height: 10px;
+      background-color: var(--myspace-success);
+      border-radius: 50%;
+      margin-right: 10px;
+      box-shadow: 0 0 5px var(--myspace-success);
+      animation: blink 2s infinite;
+    }
+    @keyframes blink {
+      0% { opacity: 1; }
+      50% { opacity: 0.5; }
+      100% { opacity: 1; }
+    }
+    /* Footer */
+    footer {
+      background: var(--myspace-gradient);
+      color: white;
+      padding: 30px 0;
+      margin-top: 30px;
+      text-align: center;
+      font-size: 14px;
+    }
+    .footer-links {
+      display: flex;
+      justify-content: center;
+      list-style: none;
+      margin-bottom: 15px;
+      flex-wrap: wrap;
+    }
+    .footer-links li {
+      margin: 0 15px;
+    }
+    .footer-links a, .built-with a {
+      color: white;
+      text-decoration: none;
+      transition: color 0.3s;
+      padding: 5px 10px;
+      border-radius: 3px;
+    }
+    .footer-links a:hover, .built-with a:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+    .built-with {
+      margin-top: 15px;
+      font-weight: bold;
+    }
+    /* Responsive */
+    @media (max-width: 992px) {
+      .main-content {
+        grid-template-columns: 200px 1fr;
+      }
+      .right-sidebar {
+        display: none;
+      }
+    }
+    @media (max-width: 768px) {
+      .main-content {
+        grid-template-columns: 1fr;
+      }
+      .sidebar {
+        display: none;
+      }
+      .header-top {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      .nav-menu {
+        margin-top: 10px;
+        flex-wrap: wrap;
+      }
+      .nav-menu li {
+        margin: 5px;
+      }
+      .search-bar {
+        width: 100%;
+        margin-top: 10px;
+      }
+      .search-bar input {
+        width: 100%;
+      }
+    }
+    /* Custom Scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #f1f1f1;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--myspace-blue);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--myspace-dark-blue);
+    }
+    /* Notification Badge */
+    .notification-badge {
+      position: absolute;
+      top: -5px;
+      right: -5px;
+      background-color: var(--myspace-accent);
+      color: white;
+      border-radius: 50%;
+      width: 18px;
+      height: 18px;
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    /* Loading Animation */
+    .loading {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border: 3px solid rgba(255,255,255,.3);
+      border-radius: 50%;
+      border-top-color: #fff;
+      animation: spin 1s ease-in-out infinite;
+    }
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="container">
+      <div class="header-top">
+        <div class="logo"><i class="fas fa-heart"></i> FriendSpace Dating</div>
+        <ul class="nav-menu">
+          <li><a href="#"><i class="fas fa-home"></i> Home</a></li>
+          <li><a href="#"><i class="fas fa-user-friends"></i> Browse</a></li>
+          <li><a href="#"><i class="fas fa-search"></i> Search</a></li>
+          <li>
+            <a href="#"><i class="fas fa-envelope"></i> Messages</a>
+            <span class="notification-badge">3</span>
+          </li>
+          <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
+        </ul>
+      </div>
+      <div class="search-bar">
+        <input type="text" placeholder="Search for friends...">
+        <button><i class="fas fa-search"></i></button>
+      </div>
+    </div>
+  </header>
+  <div class="container">
+    <div class="main-content">
+      <div class="sidebar">
+        <div class="profile-card">
+          <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=150&q=80" alt="Profile Picture" class="profile-pic">
+          <div class="profile-name">John Doe</div>
+          <div class="profile-status">"Looking for someone special"</div>
+          <button class="status-button">Edit Profile</button>
+        </div>
+        <ul class="sidebar-menu">
+          <li><a href="#"><i class="fas fa-user"></i> My Profile</a></li>
+          <li><a href="#"><i class="fas fa-images"></i> My Photos</a></li>
+          <li><a href="#"><i class="fas fa-calendar-alt"></i> My Events</a></li>
+          <li><a href="#"><i class="fas fa-users"></i> My Friends</a></li>
+          <li><a href="#"><i class="fas fa-heart"></i> Matches</a></li>
+          <li><a href="#"><i class="fas fa-star"></i> Favorites</a></li>
+        </ul>
+      </div>
+      <div class="center-content">
+        <div class="content-header">
+          <div class="content-title">News Feed</div>
+          <div class="content-actions"><button class="status-button">Post Update</button></div>
+        </div>
+        <div class="status-update">
+          <input type="text" class="status-input" placeholder="What's on your mind?">
+          <button class="status-button">Post</button>
+        </div>
+        <div class="feed">
+          <div class="feed-item">
+            <div class="feed-header">
+              <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="feed-profile-pic">
+              <div class="feed-user">Sarah Johnson</div>
+              <div class="feed-time">2 hours ago</div>
+            </div>
+            <div class="feed-content">Just had an amazing date with someone I met here! Thanks FriendSpace! ❤️ We went to that new Italian restaurant downtown. The food was incredible and the conversation was even better!</div>
+            <div class="feed-actions">
+              <span><i class="fas fa-thumbs-up"></i> Like</span>
+              <span><i class="fas fa-comment"></i> Comment</span>
+              <span><i class="fas fa-share"></i> Share</span>
+            </div>
+          </div>
+          <div class="feed-item">
+            <div class="feed-header">
+              <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="feed-profile-pic">
+              <div class="feed-user">Mike Thompson</div>
+              <div class="feed-time">5 hours ago</div>
+            </div>
+            <div class="feed-content">Looking for someone to go to the concert with this weekend. Anyone interested? It's the new indie band everyone's talking about. I have an extra ticket!</div>
+            <div class="feed-actions">
+              <span><i class="fas fa-thumbs-up"></i> Like</span>
+              <span><i class="fas fa-comment"></i> Comment</span>
+              <span><i class="fas fa-share"></i> Share</span>
+            </div>
+          </div>
+          <div class="feed-item">
+            <div class="feed-header">
+              <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="feed-profile-pic">
+              <div class="feed-user">Emily Davis</div>
+              <div class="feed-time">1 day ago</div>
+            </div>
+            <div class="feed-content">Just joined FriendSpace and already loving the community! Can't wait to meet new people and see where this journey takes me. Any tips for a newbie?</div>
+            <div class="feed-actions">
+              <span><i class="fas fa-thumbs-up"></i> Like</span>
+              <span><i class="fas fa-comment"></i> Comment</span>
+              <span><i class="fas fa-share"></i> Share</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right-sidebar">
+        <div class="friend-requests">
+          <div class="section-title">Friend Requests <span class="notification-badge">2</span></div>
+          <div class="friend-item">
+            <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="friend-pic">
+            <div class="friend-info">
+              <div class="friend-name">Emily Davis</div>
+              <div class="friend-status">Mutual Friends: 3</div>
+            </div>
+            <div class="friend-actions">
+              <button class="friend-action"><i class="fas fa-check"></i></button>
+              <button class="friend-action"><i class="fas fa-times"></i></button>
+            </div>
+          </div>
+          <div class="friend-item">
+            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="friend-pic">
+            <div class="friend-info">
+              <div class="friend-name">Alex Rodriguez</div>
+              <div class="friend-status">Mutual Friends: 5</div>
+            </div>
+            <div class="friend-actions">
+              <button class="friend-action"><i class="fas fa-check"></i></button>
+              <button class="friend-action"><i class="fas fa-times"></i></button>
+            </div>
+          </div>
+        </div>
+        <div class="online-friends">
+          <div class="section-title">Online Now</div>
+          <div class="friend-item">
+            <span class="online-indicator"></span>
+            <img src="https://images.unsplash.com/photo-1534751516642-a1af1ef26a56?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="friend-pic">
+            <div class="friend-info">
+              <div class="friend-name">Jessica Miller</div>
+              <div class="friend-status">Active now</div>
+            </div>
+          </div>
+          <div class="friend-item">
+            <span class="online-indicator"></span>
+            <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="friend-pic">
+            <div class="friend-info">
+              <div class="friend-name">Sophia Williams</div>
+              <div class="friend-status">Online</div>
+            </div>
+          </div>
+        </div>
+        <div class="suggested-friends">
+          <div class="section-title">Suggested Friends</div>
+          <div class="friend-item">
+            <img src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="friend-pic">
+            <div class="friend-info">
+              <div class="friend-name">Ryan Cooper</div>
+              <div class="friend-status">5 mutual interests</div>
+            </div>
+          </div>
+          <div class="friend-item">
+            <img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="friend-pic">
+            <div class="friend-info">
+              <div class="friend-name">Lisa Chen</div>
+              <div class="friend-status">Lives nearby</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <footer>
+    <div class="container">
+      <ul class="footer-links">
+        <li><a href="#">About</a></li>
+        <li><a href="#">Privacy</a></li>
+        <li><a href="#">Terms</a></li>
+        <li><a href="#">Safety</a></li>
+        <li><a href="#">Help</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+      <div>FriendSpace Dating © 2005 - Relive the nostalgia!</div>
+      <div class="built-with"><a href="https://huggingface.co/spaces/akhaliq/anycoder">Built with anycoder</a></div>
+    </div>
+  </footer>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+      const statusInput = document.querySelector('.status-input');
+      const statusButton = document.querySelector('.status-update .status-button');
+      // Add notification badges animation
+      const badges = document.querySelectorAll('.notification-badge');
+      badges.forEach(badge => {
+        badge.addEventListener('click', function() {
+          this.style.transform = 'scale(1.2)';
+          setTimeout(() => {
+            this.style.transform = 'scale(1)';
+          }, 300);
+        });
+      });
+      // Function to add event listeners to a feed item's actions (like)
+      function addFeedActionsListeners(postElement) {
+        const likeSpan = postElement.querySelector('.feed-actions span:nth-child(1)');
+        const commentSpan = postElement.querySelector('.feed-actions span:nth-child(2)');
+        const shareSpan = postElement.querySelector('.feed-actions span:nth-child(3)');
+        if (likeSpan) {
+          likeSpan.addEventListener('click', function() {
+            this.classList.toggle('liked');
+            if (this.classList.contains('liked')) {
+              this.innerHTML = '<i class="fas fa-thumbs-up"></i> Liked';
+              this.style.color = 'var(--myspace-blue)';
+            } else {
+              this.innerHTML = '<i class="fas fa-thumbs-up"></i> Like';
+              this.style.color = '#666';
+            }
+          });
+        }
+        if (commentSpan) {
+          commentSpan.addEventListener('click', function() {
+            alert('Comment feature coming soon!');
+          });
+        }
+        if (shareSpan) {
+          shareSpan.addEventListener('click', function() {
+            alert('Share feature coming soon!');
+          });
+        }
+      }
+      // Add listeners to existing feed items on load
+      document.querySelectorAll('.feed-item').forEach(addFeedActionsListeners);
+      // Post new status
+      statusButton.addEventListener('click', function() {
+        if (statusInput.value.trim() !== '') {
+          // Show loading state
+          const originalText = statusButton.innerHTML;
+          statusButton.innerHTML = '<div class="loading"></div>';
+          statusButton.disabled = true;
+          setTimeout(() => {
+            const feed = document.querySelector('.feed');
+            const newPost = document.createElement('div');
+            newPost.className = 'feed-item';
+            const now = new Date();
+            const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
+            newPost.innerHTML = `
+              <div class="feed-header">
+                <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=50&q=80" alt="User" class="feed-profile-pic">
+                <div class="feed-user">John Doe</div>
+                <div class="feed-time">Just now (${timeString})</div>
+              </div>
+              <div class="feed-content">${statusInput.value.replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>
+              <div class="feed-actions">
+                <span><i class="fas fa-thumbs-up"></i> Like</span>
+                <span><i class="fas fa-comment"></i> Comment</span>
+                <span><i class="fas fa-share"></i> Share</span>
+              </div>`;
+            feed.insertBefore(newPost, feed.firstChild);
+            statusInput.value = '';
+            // Restore button state
+            statusButton.innerHTML = originalText;
+            statusButton.disabled = false;
+            // Add hover animation
+            newPost.style.opacity = '0';
+            setTimeout(() => {
+              newPost.style.transition = 'opacity 0.5s';
+              newPost.style.opacity = '1';
+            }, 10);
+            addFeedActionsListeners(newPost);
+          }, 800);
+        }
+      });
+      // Allow posting with Enter key
+      statusInput.addEventListener('keypress', function(e) {
+        if (e.key === 'Enter') {
+          statusButton.click();
+        }
+      });
+      // Friend Request Buttons
+      document.querySelectorAll('.friend-actions .friend-action').forEach(button => {
+        button.addEventListener('click', function() {
+          const friendItem = this.closest('.friend-item');
+          const isAccept = this.querySelector('.fa-check');
+          if (isAccept) {
+            friendItem.style.backgroundColor = 'rgba(76, 175, 80, 0.1)';
+            setTimeout(() => {
+              friendItem.remove();
+              updateFriendRequestCount();
+            }, 1000);
+          } else {
+            friendItem.style.backgroundColor = 'rgba(244, 67, 54, 0.1)';
+            setTimeout(() => {
+              friendItem.remove();
+              updateFriendRequestCount();
+            }, 1000);
+          }
+        });
+      });
+      function updateFriendRequestCount() {
+        const badge = document.querySelector('.friend-requests .notification-badge');
+        const currentCount = parseInt(badge.textContent);
+        if (currentCount > 1) {
+          badge.textContent = currentCount - 1;
+        } else {
+          badge.remove();
+        }
+      }
+      // Profile picture hover effect
+      const profilePics = document.querySelectorAll('.profile-pic, .feed-profile-pic, .friend-pic');
+      profilePics.forEach(pic => {
+        pic.addEventListener('mouseenter', function() {
+          this.style.transform = 'scale(1.1)';
+          this.style.transition = 'transform 0.3s';
+        });
+        pic.addEventListener('mouseleave', function() {
+          this.style.transform = 'scale(1)';
+        });
+      });
+    });
+  </script>
+</body>
+</html>