Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MySpace 2006 | Native Website</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --myspace-blue: #3b5998; | |
| --myspace-dark-blue: #2d4373; | |
| --myspace-light-blue: #dfe3ee; | |
| --myspace-orange: #ff6600; | |
| --myspace-pink: #ff99cc; | |
| --text-dark: #333333; | |
| --text-light: #f0f0f0; | |
| --border-radius: 8px; | |
| --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f5f5; | |
| color: var(--text-dark); | |
| font-size: 16px; | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* Header styles */ | |
| header { | |
| background: linear-gradient(135deg, var(--myspace-blue), var(--myspace-dark-blue)); | |
| color: white; | |
| padding: 12px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| position: sticky; | |
| top: 0; | |
| width: 100%; | |
| z-index: 1000; | |
| box-shadow: var(--box-shadow); | |
| } | |
| .logo { | |
| font-size: 28px; | |
| font-weight: 800; | |
| text-decoration: none; | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .logo i { | |
| font-size: 24px; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .nav-links a { | |
| color: white; | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 500; | |
| padding: 6px 12px; | |
| border-radius: var(--border-radius); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .user-controls { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .user-controls img { | |
| width: 36px; | |
| height: 36px; | |
| border-radius: 50%; | |
| border: 2px solid white; | |
| object-fit: cover; | |
| } | |
| .search-bar { | |
| display: flex; | |
| align-items: center; | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 5px 10px; | |
| } | |
| .search-bar input { | |
| border: none; | |
| outline: none; | |
| padding: 5px; | |
| width: 180px; | |
| } | |
| .search-bar button { | |
| background: none; | |
| border: none; | |
| color: var(--myspace-blue); | |
| cursor: pointer; | |
| } | |
| /* Main content */ | |
| .main-container { | |
| display: flex; | |
| flex: 1; | |
| max-width: 1200px; | |
| margin: 20px auto; | |
| width: 100%; | |
| gap: 20px; | |
| padding: 0 20px; | |
| } | |
| .sidebar { | |
| width: 250px; | |
| flex-shrink: 0; | |
| } | |
| .sidebar-section { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| box-shadow: var(--box-shadow); | |
| } | |
| .sidebar-section h3 { | |
| color: var(--myspace-blue); | |
| margin-bottom: 15px; | |
| font-size: 16px; | |
| border-bottom: 1px solid var(--myspace-light-blue); | |
| padding-bottom: 8px; | |
| } | |
| .sidebar-nav { | |
| list-style: none; | |
| } | |
| .sidebar-nav li { | |
| margin-bottom: 10px; | |
| } | |
| .sidebar-nav a { | |
| color: var(--text-dark); | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 8px; | |
| border-radius: var(--border-radius); | |
| transition: var(--transition); | |
| } | |
| .sidebar-nav a:hover { | |
| background-color: var(--myspace-light-blue); | |
| color: var(--myspace-blue); | |
| } | |
| .sidebar-nav i { | |
| width: 20px; | |
| text-align: center; | |
| } | |
| .quick-friends { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| } | |
| .quick-friend { | |
| text-align: center; | |
| } | |
| .quick-friend img { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 2px solid var(--myspace-light-blue); | |
| transition: var(--transition); | |
| } | |
| .quick-friend img:hover { | |
| border-color: var(--myspace-blue); | |
| } | |
| .quick-friend p { | |
| font-size: 12px; | |
| margin-top: 5px; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| /* Profile content */ | |
| .profile-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .profile-card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 20px; | |
| box-shadow: var(--box-shadow); | |
| } | |
| .profile-header { | |
| display: flex; | |
| align-items: flex-start; | |
| margin-bottom: 20px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid var(--myspace-light-blue); | |
| } | |
| .profile-pic { | |
| width: 120px; | |
| height: 120px; | |
| border-radius: var(--border-radius); | |
| margin-right: 20px; | |
| object-fit: cover; | |
| border: 3px solid var(--myspace-light-blue); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .profile-info { | |
| flex: 1; | |
| } | |
| .profile-info h2 { | |
| color: var(--myspace-blue); | |
| margin-bottom: 8px; | |
| font-size: 24px; | |
| } | |
| .profile-info p { | |
| color: #666; | |
| font-size: 14px; | |
| margin-bottom: 5px; | |
| } | |
| .profile-actions { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .btn { | |
| padding: 8px 16px; | |
| border-radius: var(--border-radius); | |
| border: none; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .btn-primary { | |
| background-color: var(--myspace-blue); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--myspace-dark-blue); | |
| } | |
| .btn-secondary { | |
| background-color: var(--myspace-light-blue); | |
| color: var(--myspace-blue); | |
| } | |
| .btn-secondary:hover { | |
| background-color: #d0d6e2; | |
| } | |
| /* Status update */ | |
| .status-update { | |
| background-color: #f8f9fa; | |
| padding: 15px; | |
| border-radius: var(--border-radius); | |
| margin-bottom: 20px; | |
| } | |
| .status-update textarea { | |
| width: 100%; | |
| height: 80px; | |
| border: 1px solid #ddd; | |
| border-radius: var(--border-radius); | |
| padding: 12px; | |
| resize: none; | |
| margin-bottom: 10px; | |
| font-family: inherit; | |
| transition: var(--transition); | |
| } | |
| .status-update textarea:focus { | |
| outline: none; | |
| border-color: var(--myspace-blue); | |
| box-shadow: 0 0 0 2px rgba(59, 89, 152, 0.2); | |
| } | |
| .status-actions { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .status-options { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .status-option { | |
| background: none; | |
| border: none; | |
| color: #666; | |
| cursor: pointer; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| transition: var(--transition); | |
| } | |
| .status-option:hover { | |
| color: var(--myspace-blue); | |
| } | |
| /* Profile sections */ | |
| .profile-section { | |
| margin-bottom: 25px; | |
| } | |
| .profile-section h3 { | |
| background-color: #f8f9fa; | |
| padding: 10px 15px; | |
| border-radius: var(--border-radius); | |
| color: var(--myspace-blue); | |
| font-size: 18px; | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .profile-section h3 i { | |
| font-size: 16px; | |
| } | |
| /* Custom profile sections */ | |
| .profile-custom { | |
| background-color: #fff9f5; | |
| border-left: 4px solid var(--myspace-orange); | |
| padding: 15px; | |
| margin-bottom: 20px; | |
| border-radius: 0 var(--border-radius) var(--border-radius) 0; | |
| } | |
| .profile-custom h4 { | |
| color: var(--myspace-orange); | |
| margin-bottom: 10px; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* Friends section */ | |
| .friends-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); | |
| gap: 15px; | |
| } | |
| .friend { | |
| text-align: center; | |
| transition: var(--transition); | |
| } | |
| .friend:hover { | |
| transform: translateY(-3px); | |
| } | |
| .friend img { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 3px solid var(--myspace-light-blue); | |
| transition: var(--transition); | |
| } | |
| .friend:hover img { | |
| border-color: var(--myspace-blue); | |
| } | |
| .friend p { | |
| font-size: 13px; | |
| margin-top: 8px; | |
| font-weight: 500; | |
| } | |
| /* Comments section */ | |
| .comments-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .comment { | |
| display: flex; | |
| padding: 15px; | |
| border-radius: var(--border-radius); | |
| background-color: #f8f9fa; | |
| transition: var(--transition); | |
| } | |
| .comment:hover { | |
| background-color: #f0f2f5; | |
| } | |
| .comment-pic { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| margin-right: 15px; | |
| object-fit: cover; | |
| border: 2px solid var(--myspace-light-blue); | |
| } | |
| .comment-content { | |
| flex: 1; | |
| } | |
| .comment-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 8px; | |
| align-items: center; | |
| } | |
| .comment-author { | |
| font-weight: 600; | |
| color: var(--myspace-blue); | |
| text-decoration: none; | |
| } | |
| .comment-date { | |
| color: #999; | |
| font-size: 12px; | |
| } | |
| .comment-actions { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 10px; | |
| } | |
| .comment-action { | |
| color: #666; | |
| font-size: 12px; | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 5px; | |
| transition: var(--transition); | |
| } | |
| .comment-action:hover { | |
| color: var(--myspace-blue); | |
| } | |
| /* Blingee style elements */ | |
| .blingee-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| } | |
| .blingee { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .blingee img { | |
| width: 120px; | |
| height: 120px; | |
| border: 4px solid var(--myspace-pink); | |
| border-radius: 15px; | |
| padding: 8px; | |
| background-color: #fff; | |
| object-fit: cover; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| transition: var(--transition); | |
| } | |
| .blingee:hover img { | |
| transform: scale(1.05); | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); | |
| } | |
| .blingee::after { | |
| content: "Blingee!"; | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| background-color: var(--myspace-pink); | |
| color: white; | |
| font-size: 10px; | |
| font-weight: bold; | |
| padding: 3px 6px; | |
| border-radius: 10px; | |
| transform: rotate(15deg); | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: var(--myspace-dark-blue); | |
| color: white; | |
| padding: 20px; | |
| text-align: center; | |
| margin-top: 40px; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-bottom: 15px; | |
| flex-wrap: wrap; | |
| } | |
| .footer-links a { | |
| color: white; | |
| text-decoration: none; | |
| font-size: 14px; | |
| transition: var(--transition); | |
| } | |
| .footer-links a:hover { | |
| text-decoration: underline; | |
| } | |
| .copyright { | |
| font-size: 12px; | |
| color: rgba(255, 255, 255, 0.7); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 992px) { | |
| .main-container { | |
| flex-direction: column; | |
| } | |
| .sidebar { | |
| width: 100%; | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 15px; | |
| } | |
| .sidebar-section { | |
| flex: 1; | |
| min-width: 200px; | |
| margin-bottom: 0; | |
| } | |
| .friends-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| flex-direction: column; | |
| gap: 15px; | |
| padding: 15px; | |
| } | |
| .nav-links { | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .user-controls { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .search-bar { | |
| width: 100%; | |
| } | |
| .search-bar input { | |
| flex: 1; | |
| } | |
| .profile-header { | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .profile-pic { | |
| margin-right: 0; | |
| margin-bottom: 15px; | |
| } | |
| .profile-actions { | |
| justify-content: center; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .sidebar-section { | |
| min-width: 100%; | |
| } | |
| .status-actions { | |
| flex-direction: column; | |
| gap: 10px; | |
| align-items: flex-start; | |
| } | |
| .friends-grid { | |
| grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); | |
| gap: 10px; | |
| } | |
| .friend img { | |
| width: 60px; | |
| height: 60px; | |
| } | |
| } | |
| /* Animation for nostalgic effect */ | |
| @keyframes myspaceGlow { | |
| 0% { box-shadow: 0 0 5px rgba(59, 89, 152, 0.5); } | |
| 50% { box-shadow: 0 0 20px rgba(59, 89, 152, 0.8); } | |
| 100% { box-shadow: 0 0 5px rgba(59, 89, 152, 0.5); } | |
| } | |
| .myspace-glow { | |
| animation: myspaceGlow 2s infinite; | |
| } | |
| /* 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); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-users"></i> | |
| <span>MySpace</span> | |
| </a> | |
| <div class="nav-links"> | |
| <a href="#"><i class="fas fa-home"></i> Home</a> | |
| <a href="#"><i class="fas fa-compass"></i> Browse</a> | |
| <a href="#"><i class="fas fa-search"></i> Search</a> | |
| <a href="#"><i class="fas fa-user-plus"></i> Invite</a> | |
| <a href="#"><i class="fas fa-envelope"></i> Mail</a> | |
| <a href="#"><i class="fas fa-cog"></i> Settings</a> | |
| </div> | |
| <div class="user-controls"> | |
| <div class="search-bar"> | |
| <input type="text" placeholder="Search MySpace..."> | |
| <button><i class="fas fa-search"></i></button> | |
| </div> | |
| <img src="https://i.imgur.com/JqYeYn7.jpg" alt="User Profile"> | |
| </div> | |
| </header> | |
| <div class="main-container"> | |
| <aside class="sidebar"> | |
| <div class="sidebar-section"> | |
| <h3><i class="fas fa-user-circle"></i> My Profile</h3> | |
| <ul class="sidebar-nav"> | |
| <li><a href="#"><i class="fas fa-user"></i> View Profile</a></li> | |
| <li><a href="#"><i class="fas fa-edit"></i> Edit Profile</a></li> | |
| <li><a href="#"><i class="fas fa-lock"></i> Privacy Settings</a></li> | |
| <li><a href="#"><i class="fas fa-paint-brush"></i> Customize Profile</a></li> | |
| </ul> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h3><i class="fas fa-users"></i> Quick Friends</h3> | |
| <div class="quick-friends"> | |
| <div class="quick-friend"> | |
| <img src="https://i.imgur.com/5XvjJzW.png" alt="Friend"> | |
| <p>Sarah</p> | |
| </div> | |
| <div class="quick-friend"> | |
| <img src="https://i.imgur.com/7n7mQ6a.jpg" alt="Friend"> | |
| <p>Mike</p> | |
| </div> | |
| <div class="quick-friend"> | |
| <img src="https://i.imgur.com/8kZf3Qa.jpg" alt="Friend"> | |
| <p>Jessica</p> | |
| </div> | |
| <div class="quick-friend"> | |
| <img src="https://i.imgur.com/9aZ2b3c.jpg" alt="Friend"> | |
| <p>Chris</p> | |
| </div> | |
| <div class="quick-friend"> | |
| <img src="https://i.imgur.com/1bX3q4d.jpg" alt="Friend"> | |
| <p>Amanda</p> | |
| </div> | |
| <div class="quick-friend"> | |
| <img src="https://i.imgur.com/2c3d4e5.jpg" alt="Friend"> | |
| <p>David</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h3><i class="fas fa-calendar-alt"></i> Events</h3> | |
| <ul class="sidebar-nav"> | |
| <li><a href="#"><i class="fas fa-music"></i> Concert: Green Day</a></li> | |
| <li><a href="#"><i class="fas fa-utensils"></i> Dinner Party</a></li> | |
| <li><a href="#"><i class="fas fa-gamepad"></i> LAN Party</a></li> | |
| </ul> | |
| </div> | |
| <div class="sidebar-section myspace-glow"> | |
| <h3><i class="fas fa-star"></i> Featured</h3> | |
| <p>Check out the new MySpace Music Player! Add your favorite songs to your profile.</p> | |
| <button class="btn btn-primary" style="margin-top: 10px; width: 100%;"> | |
| <i class="fas fa-music"></i> Add Music | |
| </button> | |
| </div> | |
| </aside> | |
| <main class="profile-content"> | |
| <div class="profile-card"> | |
| <div class="profile-header"> | |
| <img src="https://i.imgur.com/JqYeYn7.jpg" alt="Profile Picture" class="profile-pic"> | |
| <div class="profile-info"> | |
| <h2>Tom from MySpace</h2> | |
| <p><i class="fas fa-user"></i> Male, 30 years old</p> | |
| <p><i class="fas fa-map-marker-alt"></i> Los Angeles, California</p> | |
| <p><i class="fas fa-clock"></i> Last Login: 5/15/2006</p> | |
| <div class="profile-actions"> | |
| <button class="btn btn-primary"><i class="fas fa-comment"></i> Send Message</button> | |
| <button class="btn btn-secondary"><i class="fas fa-user-plus"></i> Add Friend</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="status-update"> | |
| <textarea placeholder="What's on your mind, Tom?"></textarea> | |
| <div class="status-actions"> | |
| <div class="status-options"> | |
| <button class="status-option"><i class="fas fa-camera"></i> Photo</button> | |
| <button class="status-option"><i class="fas fa-video"></i> Video</button> | |
| <button class="status-option"><i class="fas fa-music"></i> Music</button> | |
| </div> | |
| <button class="btn btn-primary">Update Status</button> | |
| </div> | |
| </div> | |
| <div class="profile-section"> | |
| <h3><i class="fas fa-user"></i> About Me</h3> | |
| <p>Hey! I'm Tom, the original MySpace friend. I love connecting with people and helping them build their online | |
| presence. When I'm not working on MySpace, you can find me surfing in Malibu or playing guitar.</p> | |
| </div> | |
| <div class="profile-custom"> | |
| <h4><i class="fas fa-heart"></i> Who I'd like to meet</h4> | |
| <p>I'd like to meet anyone who's passionate about music, technology, or just wants to make new friends online! | |
| Let's connect and share our interests!</p> | |
| </div> | |
| <div class="profile-section"> | |
| <h3><i class="fas fa-heart"></i> My Interests</h3> | |
| <p><strong>General:</strong> Music, Technology, Internet, Surfing, Photography</p> | |
| <p><strong>Music:</strong> The Beatles, Green Day, Blink-182, Weezer, The Offspring</p> | |
| <p><strong>Movies:</strong> The Matrix, Star Wars, Fight Club, Eternal Sunshine</p> | |
| <p><strong>Books:</strong> The Hitchhiker's Guide to the Galaxy, Neuromancer</p> | |
| </div> | |
| <div class="profile-section"> | |
| <h3><i class="fas fa-images"></i> My Blingee</h3> | |
| <div class="blingee-container"> | |
| <div class="blingee"> | |
| <img src="https://i.imgur.com/5XvjJzW.png" alt="Blingee"> | |
| </div> | |
| <div class="blingee"> | |
| <img src="https://i.imgur.com/6Y7Z8x9.jpg" alt="Blingee"> | |
| </div> | |
| <div class="blingee"> | |
| <img src="https://i.imgur.com/9aZ2b3c.jpg" alt="Blingee"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="profile-card"> | |
| <div class="profile-section"> | |
| <h3><i class="fas fa-users"></i> Friends (1,234,567)</h3> | |
| <div class="friends-grid"> | |
| <div class="friend"> | |
| <img src="https://i.imgur.com/JqYeYn7.jpg" alt="Friend"> | |
| <p>Tom</p> | |
| </div> | |
| <div class="friend"> | |
| <img src="https://i.imgur.com/5XvjJzW.png" alt="Friend"> | |
| <p>Sarah</p> | |
| </div> | |
| <div class="friend"> | |
| <img src="https://i.imgur.com/7n7mQ6a.jpg" alt="Friend"> | |
| <p>Mike</p> | |
| </div> | |
| <div class="friend"> | |
| <img src="https://i.imgur.com/8kZf3Qa.jpg" alt="Friend"> | |
| <p>Jessica</p> | |
| </div> | |
| <div class="friend"> | |
| <img src="https://i.imgur.com/9aZ2b3c.jpg" alt="Friend"> | |
| <p>Chris</p> | |
| </div> | |
| <div class="friend"> | |
| <img src="https://i.imgur.com/1bX3q4d.jpg" alt="Friend"> | |
| <p>Amanda</p> | |
| </div> | |
| <div class="friend"> | |
| <img src="https://i.imgur.com/2c3d4e5.jpg" alt="Friend"> | |
| <p>David</p> | |
| </div> | |
| <div class="friend"> | |
| <img src="https://i.imgur.com/3e4f5g6.jpg" alt="Friend"> | |
| <p>Emily</p> | |
| </div> | |
| <div class="friend"> | |
| <img src="https://i.imgur.com/4f5g6h7.jpg" alt="Friend"> | |
| <p>Brian</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="profile-card"> | |
| <div class="profile-section"> | |
| <h3><i class="fas fa-comments"></i> Comments (42)</h3> | |
| <div class="comments-container"> | |
| <div class="comment"> | |
| <img src="https://i.imgur.com/5XvjJzW.png" alt="Commenter" class="comment-pic"> | |
| <div class="comment-content"> | |
| <div class="comment-header"> | |
| <a href="#" class="comment-author">Sarah</a> | |
| <span class="comment-date">5/14/2006 3:45 PM</span> | |
| </div> | |
| <p>Hey Tom! Just wanted to say thanks for being my first friend on MySpace. This site is awesome! Can't wait to customize my profile with glitter text and a background song. 😊</p> | |
| <div class="comment-actions"> | |
| <a href="#" class="comment-action"><i class="fas fa-reply"></i> Reply</a> | |
| <a href="#" class="comment-action"><i class="fas fa-thumbs-up"></i> Like</a> | |
| <a href="#" class="comment-action"><i class="fas fa-flag"></i> Report</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="comment"> | |
| <img src="https://i.imgur.com/7n7mQ6a.jpg" alt="Commenter" class="comment-pic"> | |
| <div class="comment-content"> | |
| <div class="comment-header"> | |
| <a href="#" class="comment-author">Mike</a> | |
| <span class="comment-date">5/13/2006 9:12 AM</span> | |
| </div> | |
| <p>Dude, your profile is sick! How did you get that background? HTML is so confusing lol. I tried to add a song but it messed up my whole layout. Any tips?</p> | |
| <div class="comment-actions"> | |
| <a href="#" class="comment-action"><i class="fas fa-reply"></i> Reply</a> | |
| <a href="#" class="comment-action"><i class="fas fa-thumbs-up"></i> Like</a> | |
| <a href="#" class="comment-action"><i class="fas fa-flag"></i> Report</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="comment"> | |
| <img src="https://i.imgur.com/8kZf3Qa.jpg" alt="Commenter" class="comment-pic"> | |
| <div class="comment-content"> | |
| <div class="comment-header"> | |
| <a href="#" class="comment-author">Jessica</a> | |
| <span class="comment-date">5/12/2006 7:30 PM</span> | |
| </div> | |
| <p>OMG I can't believe I'm friends with THE Tom from MySpace! *fangirl scream* Your profile is so cool! I spent like 3 hours yesterday picking my top 8 friends. This is the best website ever!!!</p> | |
| <div class="comment-actions"> | |
| <a href="#" class="comment-action"><i class="fas fa-reply"></i> Reply</a> | |
| <a href="#" class="comment-action"><i class="fas fa-thumbs-up"></i> Like</a> | |
| <a href="#" class="comment-action"><i class="fas fa-flag"></i> Report</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="margin-top: 15px;"> | |
| <textarea placeholder="Write a comment..." style="width: 100%; height: 60px; padding: 10px; border-radius: var(--border-radius); border: 1px solid #ddd;"></textarea> | |
| <button class="btn btn-primary" style="margin-top: 10px;"><i class="fas fa-paper-plane"></i> Post Comment</button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <footer> | |
| <div class="footer-links"> | |
| <a href="#">About</a> | |
| <a href="#">Careers</a> | |
| <a href="#">Privacy</a> | |
| <a href="#">Terms</a> | |
| <a href="#">Advertise</a> | |
| <a href="#">Help</a> | |
| <a href="#">Safety</a> | |
| <a href="#">Feedback</a> | |
| </div> | |
| <div class="copyright"> | |
| © 2003-2006 MySpace.com. All Rights Reserved. <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: white;">Built with anycoder</a> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Status update functionality | |
| const statusUpdateBtn = document.querySelector('.status-update .btn-primary'); | |
| if (statusUpdateBtn) { | |
| statusUpdateBtn.addEventListener('click', function() { | |
| const statusTextarea = document.querySelector('.status-update textarea'); | |
| if (statusTextarea.value.trim() !== '') { | |
| // In a real app, this would send to server | |
| const statusContainer = document.createElement('div'); | |
| statusContainer.className = 'profile-section'; | |
| statusContainer.innerHTML = ` | |
| <div class="comment"> | |
| <img src="https://i.imgur.com/JqYeYn7.jpg" alt="Profile" class="comment-pic"> | |
| <div class="comment-content"> | |
| <div class="comment-header"> | |
| <span class="comment-author">You</span> | |
| <span class="comment-date">Just now</span> | |
| </div> | |
| <p>${statusTextarea.value}</p> | |
| <div class="comment-actions"> | |
| <a href="#" class="comment-action"><i class="fas fa-thumbs-up"></i> Like</a> | |
| <a href="#" class="comment-action"><i class="fas fa-comment"></i> Comment</a> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| // Insert after the status update box | |
| const profileCard = document.querySelector('.profile-card'); | |
| profileCard.insertBefore(statusContainer, profileCard.children[3]); | |
| statusTextarea.value = ''; | |
| // Show success message | |
| const originalText = statusUpdateBtn.textContent; | |
| statusUpdateBtn.innerHTML = '<i class="fas fa-check"></i> Posted!'; | |
| setTimeout(() => { | |
| statusUpdateBtn.innerHTML = originalText; | |
| }, 2000); | |
| } | |
| }); | |
| } | |
| // Comment functionality | |
| const commentBtn = document.querySelector('.profile-card:last-child .btn-primary'); | |
| if (commentBtn) { | |
| commentBtn.addEventListener('click', function() { | |
| const commentTextarea = document.querySelector('.profile-card:last-child textarea'); | |
| if (commentTextarea.value.trim() !== '') { | |
| const commentsContainer = document.querySelector('.comments-container'); | |
| const newComment = document.createElement('div'); | |
| newComment.className = 'comment'; | |
| newComment.innerHTML = ` | |
| <img src="https://i.imgur.com/JqYeYn7.jpg" alt="Profile" class="comment-pic"> | |
| <div class="comment-content"> | |
| <div class="comment-header"> | |
| <span class="comment-author">You</span> | |
| <span class="comment-date">Just now</span> | |
| </div> | |
| <p>${commentTextarea.value}</p> | |
| <div class="comment-actions"> | |
| <a href="#" class="comment-action"><i class="fas fa-thumbs-up"></i> Like</a> | |
| <a href="#" class="comment-action"><i class="fas fa-flag"></i> Report</a> | |
| </div> | |
| </div> | |
| `; | |
| commentsContainer.prepend(newComment); | |
| commentTextarea.value = ''; | |
| // Update comment count | |
| const commentHeader = document.querySelector('.profile-card:last-child h3'); | |
| const currentCount = parseInt(commentHeader.textContent.match(/\((\d+)\)/)[1]); | |
| commentHeader.textContent = commentHeader.textContent.replace(/\(\d+\)/, `(${currentCount + 1})`); | |
| } | |
| }); | |
| } | |
| // Friend click handler | |
| const friends = document.querySelectorAll('.friend, .quick-friend'); | |
| friends.forEach(friend => { | |
| friend.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const friendName = this.querySelector('p').textContent; | |
| // Highlight the clicked friend | |
| friends.forEach(f => f.style.opacity = '0.7'); | |
| this.style.opacity = '1'; | |
| setTimeout(() => { | |
| friends.forEach(f => f.style.opacity = '1'); | |
| }, 1000); | |
| // Show friend profile (simulated) | |
| alert(`Loading ${friendName}'s profile...`); | |
| }); | |
| }); | |
| // Navigation active state | |
| const navLinks = document.querySelectorAll('.nav-links a, .sidebar-nav a'); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| navLinks.forEach(l => l.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Simulate content loading | |
| const mainContent = document.querySelector('.profile-content'); | |
| if (mainContent) { | |
| mainContent.style.opacity = '0.5'; | |
| setTimeout(() => { | |
| mainContent.style.opacity = '1'; | |
| }, 300); | |
| } | |
| }); | |
| }); | |
| // Set first nav item as active by default | |
| if (navLinks.length > 0) { | |
| navLinks[0].classList.add('active'); | |
| } | |
| // Add hover effect to buttons | |
| const buttons = document.querySelectorAll('.btn'); | |
| buttons.forEach(button => { | |
| button.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-2px)'; | |
| }); | |
| button.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |