Spaces:

everett1997
/

anycoder-3b929ac1

Running

File size: 31,293 Bytes

<!DOCTYPE html>
<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">
      &copy; 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>