Spaces:
Running
Running
| <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) ; | |
| 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, "<").replace(/>/g, ">")}</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> |