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; | |
| } | |
| body { | |
| background-color: #e9ebee; | |
| color: var(--myspace-text); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 15px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background: linear-gradient(to bottom, var(--myspace-blue), var(--myspace-dark-blue)); | |
| color: white; | |
| padding: 10px 0; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .header-top { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| font-size: 24px; | |
| font-weight: bold; | |
| } | |
| .logo i { | |
| margin-right: 10px; | |
| } | |
| .nav-menu { | |
| display: flex; | |
| list-style: none; | |
| } | |
| .nav-menu li { | |
| margin-left: 20px; | |
| } | |
| .nav-menu a { | |
| color: white; | |
| text-decoration: none; | |
| font-size: 14px; | |
| transition: color 0.3s; | |
| } | |
| .nav-menu a:hover { | |
| color: var(--myspace-light-blue); | |
| } | |
| .search-bar { | |
| display: flex; | |
| margin: 10px 0; | |
| } | |
| .search-bar input { | |
| padding: 8px; | |
| border: none; | |
| border-radius: 3px 0 0 3px; | |
| width: 200px; | |
| } | |
| .search-bar button { | |
| background: var(--myspace-light-blue); | |
| border: none; | |
| padding: 8px 12px; | |
| border-radius: 0 3px 3px 0; | |
| cursor: pointer; | |
| color: white; | |
| } | |
| /* Main Content Styles */ | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: 250px 1fr 300px; | |
| gap: 20px; | |
| margin: 20px 0; | |
| } | |
| /* Sidebar Styles */ | |
| .sidebar { | |
| background-color: white; | |
| border-radius: 3px; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| padding: 15px; | |
| } | |
| .profile-card { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .profile-pic { | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 5px; | |
| object-fit: cover; | |
| margin: 0 auto 10px; | |
| border: 3px solid var(--myspace-blue); | |
| } | |
| .profile-name { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| } | |
| .profile-status { | |
| color: #666; | |
| font-size: 12px; | |
| margin-bottom: 15px; | |
| } | |
| .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: 8px; | |
| border-radius: 3px; | |
| transition: background 0.3s; | |
| } | |
| .sidebar-menu a:hover { | |
| background-color: var(--myspace-gray); | |
| } | |
| .sidebar-menu i { | |
| margin-right: 10px; | |
| width: 20px; | |
| text-align: center; | |
| } | |
| /* Center Content Styles */ | |
| .center-content { | |
| background-color: white; | |
| border-radius: 3px; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| padding: 15px; | |
| } | |
| .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: 18px; | |
| font-weight: bold; | |
| } | |
| .status-update { | |
| display: flex; | |
| margin-bottom: 20px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid var(--myspace-border); | |
| } | |
| .status-input { | |
| flex: 1; | |
| padding: 10px; | |
| border: 1px solid var(--myspace-border); | |
| border-radius: 3px; | |
| margin-right: 10px; | |
| } | |
| .status-button { | |
| background-color: var(--myspace-blue); | |
| color: white; | |
| border: none; | |
| border-radius: 3px; | |
| padding: 10px 15px; | |
| cursor: pointer; | |
| } | |
| .feed-item { | |
| margin-bottom: 20px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid var(--myspace-border); | |
| } | |
| .feed-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .feed-profile-pic { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| margin-right: 10px; | |
| } | |
| .feed-user { | |
| font-weight: bold; | |
| } | |
| .feed-time { | |
| color: #666; | |
| font-size: 12px; | |
| margin-left: 10px; | |
| } | |
| .feed-content { | |
| margin-bottom: 10px; | |
| } | |
| .feed-actions { | |
| display: flex; | |
| color: #666; | |
| font-size: 12px; | |
| } | |
| .feed-actions span { | |
| margin-right: 15px; | |
| cursor: pointer; | |
| } | |
| .feed-actions span:hover { | |
| text-decoration: underline; | |
| } | |
| /* Right Sidebar Styles */ | |
| .right-sidebar { | |
| background-color: white; | |
| border-radius: 3px; | |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); | |
| padding: 15px; | |
| } | |
| .friend-requests, .online-friends { | |
| margin-bottom: 20px; | |
| } | |
| .section-title { | |
| font-size: 16px; | |
| font-weight: bold; | |
| margin-bottom: 10px; | |
| border-bottom: 1px solid var(--myspace-border); | |
| padding-bottom: 5px; | |
| } | |
| .friend-item { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| padding: 5px; | |
| border-radius: 3px; | |
| transition: background 0.3s; | |
| } | |
| .friend-item:hover { | |
| background-color: var(--myspace-gray); | |
| } | |
| .friend-pic { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| margin-right: 10px; | |
| } | |
| .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); | |
| } | |
| .online-indicator { | |
| width: 8px; | |
| height: 8px; | |
| background-color: #4CAF50; | |
| border-radius: 50%; | |
| margin-right: 5px; | |
| } | |
| /* Footer Styles */ | |
| footer { | |
| background-color: var(--myspace-dark-blue); | |
| color: white; | |
| padding: 20px 0; | |
| margin-top: 30px; | |
| text-align: center; | |
| font-size: 12px; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| list-style: none; | |
| margin-bottom: 10px; | |
| } | |
| .footer-links li { | |
| margin: 0 10px; | |
| } | |
| .footer-links a { | |
| color: var(--myspace-light-blue); | |
| text-decoration: none; | |
| } | |
| .footer-links a:hover { | |
| text-decoration: underline; | |
| } | |
| .built-with { | |
| margin-top: 10px; | |
| } | |
| .built-with a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| .built-with a:hover { | |
| text-decoration: underline; | |
| } | |
| /* Responsive Styles */ | |
| @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; | |
| } | |
| .search-bar { | |
| width: 100%; | |
| margin-top: 10px; | |
| } | |
| .search-bar input { | |
| width: 100%; | |
| } | |
| } | |
| </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></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"> | |
| <!-- Left Sidebar --> | |
| <div class="sidebar"> | |
| <div class="profile-card"> | |
| <img src="https://via.placeholder.com/150" 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-comments"></i> My Comments</a></li> | |
| <li><a href="#"><i class="fas fa-music"></i> My Playlist</a></li> | |
| <li><a href="#"><i class="fas fa-video"></i> My Videos</a></li> | |
| <li><a href="#"><i class="fas fa-blog"></i> My Blog</a></li> | |
| </ul> | |
| </div> | |
| <!-- Center Content --> | |
| <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://via.placeholder.com/40" 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! ❤️ | |
| </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://via.placeholder.com/40" 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? | |
| </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://via.placeholder.com/40" alt="User" class="feed-profile-pic"> | |
| <div class="feed-user">Jennifer Lopez</div> | |
| <div class="feed-time">1 day ago</div> | |
| </div> | |
| <div class="feed-content"> | |
| Just joined FriendSpace! Excited to meet new people in my area. Feel free to message me! | |
| </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> | |
| <!-- Right Sidebar --> | |
| <div class="right-sidebar"> | |
| <div class="friend-requests"> | |
| <div class="section-title">Friend Requests</div> | |
| <div class="friend-item"> | |
| <img src="https://via.placeholder.com/40" 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://via.placeholder.com/40" alt="User" class="friend-pic"> | |
| <div class="friend-info"> | |
| <div class="friend-name">Robert Wilson</div> | |
| <div class="friend-status">Mutual Friends: 7</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://via.placeholder.com/40" 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://via.placeholder.com/40" alt="User" class="friend-pic"> | |
| <div class="friend-info"> | |
| <div class="friend-name">David Brown</div> | |
| <div class="friend-status">Active 5 min ago</div> | |
| </div> | |
| </div> | |
| <div class="friend-item"> | |
| <span class="online-indicator"></span> | |
| <img src="https://via.placeholder.com/40" alt="User" class="friend-pic"> | |
| <div class="friend-info"> | |
| <div class="friend-name">Amanda Taylor</div> | |
| <div class="friend-status">Active now</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <div class="container"> | |
| <ul class="footer-links"> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Careers</a></li> | |
| <li><a href="#">Privacy</a></li> | |
| <li><a href="#">Terms</a></li> | |
| <li><a href="#">Help</a></li> | |
| <li><a href="#">Safety</a></li> | |
| </ul> | |
| <div>FriendSpace Dating © 2005</div> | |
| <div class="built-with"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple functionality for the dating website | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Status update functionality | |
| const statusInput = document.querySelector('.status-input'); | |
| const statusButton = document.querySelector('.status-update .status-button'); | |
| statusButton.addEventListener('click', function() { | |
| if (statusInput.value.trim() !== '') { | |
| const feed = document.querySelector('.feed'); | |
| const newPost = document.createElement('div'); | |
| newPost.className = 'feed-item'; | |
| newPost.innerHTML = ` | |
| <div class="feed-header"> | |
| <img src="https://via.placeholder.com/40" alt="User" class="feed-profile-pic"> | |
| <div class="feed-user">John Doe</div> | |
| <div class="feed-time">Just now</div> | |
| </div> | |
| <div class="feed-content"> | |
| ${statusInput.value} | |
| </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 = ''; | |
| // Add like functionality to new post | |
| const likeSpan = newPost.querySelector('.feed-actions span'); | |
| 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'; | |
| } | |
| }); | |
| } | |
| }); | |
| // Like functionality for existing posts | |
| document.querySelectorAll('.feed-actions span:first-child').forEach(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'; | |
| } | |
| }); | |
| }); | |
| // Friend request functionality | |
| document.querySelectorAll('.friend-action').forEach(button => { | |
| button.addEventListener('click', function() { | |
| const friendItem = this.closest('.friend-item'); | |
| if (this.querySelector('.fa-check')) { | |
| alert('Friend request accepted!'); | |
| friendItem.remove(); | |
| } else { | |
| alert('Friend request declined.'); | |
| friendItem.remove(); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |