Spaces:

everett1997
/

anycoder-3b929ac1

Running

App Files Files Community

everett1997 commited on Dec 25, 2025

Commit

fa77479

verified ·

1 Parent(s): 7dd5f2f

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1064 -429

index.html CHANGED Viewed

@@ -1,454 +1,1089 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MySpace 2006</title>
-    <style>
-        /* Reset and base styles */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: Arial, sans-serif;
-        }
-        body {
-            background-color: #f0f0f0;
-            color: #333;
-            font-size: 14px;
-            line-height: 1.5;
-        }
-        /* Header styles */
-        header {
-            background-color: #3b5998;
-            color: white;
-            padding: 10px 15px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            position: fixed;
-            top: 0;
-            width: 100%;
-            z-index: 1000;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-        }
-        .logo {
-            font-size: 24px;
-            font-weight: bold;
-            text-decoration: none;
-            color: white;
-        }
-        .nav-links {
-            display: flex;
-            gap: 15px;
-        }
-        .nav-links a {
-            color: white;
-            text-decoration: none;
-            font-size: 12px;
-        }
-        /* Main content */
-        .container {
-            margin-top: 60px;
-            padding: 15px;
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
-        }
-        /* Profile section */
-        .profile {
-            background-color: white;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-            padding: 15px;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-        }
-        .profile-header {
-            display: flex;
-            align-items: center;
-            margin-bottom: 15px;
-            border-bottom: 1px solid #eee;
-            padding-bottom: 15px;
-        }
-        .profile-pic {
-            width: 100px;
-            height: 100px;
-            border-radius: 5px;
-            margin-right: 15px;
-            object-fit: cover;
-            border: 1px solid #ddd;
-        }
-        .profile-info h2 {
-            color: #3b5998;
-            margin-bottom: 5px;
-        }
-        .profile-info p {
-            color: #666;
-            font-size: 12px;
-        }
-        /* Profile sections */
-        .profile-section {
-            margin-bottom: 20px;
-        }
-        .profile-section h3 {
-            background-color: #f0f0f0;
-            padding: 5px 10px;
-            border-bottom: 1px solid #ddd;
-            color: #333;
-            font-size: 14px;
-            margin-bottom: 10px;
-        }
-        /* Friends section */
-        .friends-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
-        }
-        .friend {
-            text-align: center;
-        }
-        .friend img {
-            width: 60px;
-            height: 60px;
-            border-radius: 5px;
-            border: 1px solid #ddd;
-            object-fit: cover;
-        }
-        .friend p {
-            font-size: 11px;
-            margin-top: 5px;
-        }
-        /* Comments section */
-        .comment {
-            display: flex;
-            margin-bottom: 15px;
-            padding-bottom: 15px;
-            border-bottom: 1px solid #eee;
-        }
-        .comment:last-child {
-            border-bottom: none;
-        }
-        .comment-pic {
-            width: 50px;
-            height: 50px;
-            border-radius: 5px;
-            margin-right: 10px;
-            object-fit: cover;
-            border: 1px solid #ddd;
-        }
-        .comment-content {
-            flex: 1;
-        }
-        .comment-header {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 5px;
-        }
-        .comment-author {
-            font-weight: bold;
-            color: #3b5998;
-        }
-        .comment-date {
-            color: #999;
-            font-size: 11px;
-        }
-        /* Navigation */
-        .main-nav {
-            display: flex;
-            justify-content: space-around;
-            background-color: #3b5998;
-            padding: 10px 0;
-            position: fixed;
-            bottom: 0;
-            width: 100%;
-        }
-        .nav-item {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            color: white;
-            text-decoration: none;
-            font-size: 12px;
-        }
-        .nav-icon {
-            font-size: 20px;
-            margin-bottom: 3px;
-        }
-        /* Custom profile styles - mimicking MySpace customization */
-        .profile-custom {
-            background-color: #f9f9f9;
-            border: 1px solid #e1e1e1;
-            padding: 10px;
-            margin-bottom: 15px;
-        }
-        .profile-custom h4 {
-            color: #ff6600;
-            margin-bottom: 10px;
-            font-size: 16px;
-        }
-        /* Blingee style elements */
-        .blingee {
-            position: relative;
-            display: inline-block;
-            margin: 5px;
-        }
-        .blingee img {
-            border: 3px solid pink;
-            border-radius: 10px;
-            padding: 5px;
-            background-color: #fff;
-        }
-        /* Status update */
-        .status-update {
-            background-color: #f0f0f0;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 15px;
-        }
-        .status-update textarea {
-            width: 100%;
-            height: 60px;
-            border: 1px solid #ddd;
-            border-radius: 3px;
-            padding: 5px;
-            resize: none;
-            margin-bottom: 5px;
-        }
-        .status-update button {
-            background-color: #3b5998;
-            color: white;
-            border: none;
-            padding: 5px 10px;
-            border-radius: 3px;
-            font-size: 12px;
-        }
-        /* Responsive adjustments */
-        @media (min-width: 600px) {
-            .container {
-                max-width: 600px;
-                margin-left: auto;
-                margin-right: auto;
-            }
-            .friends-grid {
-                grid-template-columns: repeat(4, 1fr);
-            }
-        }
-    </style>
 </head>
 <body>
-    <header>
-        <a href="#" class="logo">MySpace</a>
-        <div class="nav-links">
-            <a href="#">Home</a>
-            <a href="#">Browse</a>
-            <a href="#">Search</a>
-            <a href="#">Invite</a>
-            <a href="#">Mail</a>
         </div>
-    </header>
-    <div class="container">
-        <div class="profile">
-            <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>Male, 30 years old</p>
-                    <p>Los Angeles, California</p>
-                    <p>Last Login: 5/15/2006</p>
-                </div>
             </div>
-            <div class="status-update">
-                <textarea placeholder="What's on your mind?"></textarea>
-                <button>Update Status</button>
             </div>
-            <div class="profile-section">
-                <h3>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>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!</p>
             </div>
-            <div class="profile-section">
-                <h3>My Interests</h3>
-                <p><strong>General:</strong> Music, Technology, Internet, Surfing</p>
-                <p><strong>Music:</strong> The Beatles, Green Day, Blink-182, Weezer</p>
-                <p><strong>Movies:</strong> The Matrix, Star Wars, Fight Club</p>
             </div>
-            <div class="profile-section">
-                <h3>My Blingee</h3>
-                <div class="blingee">
-                    <img src="https://i.imgur.com/5XvjJzW.png" alt="Blingee" width="100">
-                </div>
             </div>
-            <div class="profile-section">
-                <h3>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>
             </div>
-            <div class="profile-section">
-                <h3>Comments (42)</h3>
-                <div class="comment">
-                    <img src="https://i.imgur.com/5XvjJzW.png" alt="Commenter" class="comment-pic">
-                    <div class="comment-content">
-                        <div class="comment-header">
-                            <span class="comment-author">Sarah</span>
-                            <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!</p>
-                    </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">
-                            <span class="comment-author">Mike</span>
-                            <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</p>
-                    </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">
-                            <span class="comment-author">Jessica</span>
-                            <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*</p>
-                    </div>
                 </div>
             </div>
         </div>
     </div>
-    <nav class="main-nav">
-        <a href="#" class="nav-item">
-            <span class="nav-icon">🏠</span>
-            <span>Home</span>
-        </a>
-        <a href="#" class="nav-item">
-            <span class="nav-icon">👥</span>
-            <span>Friends</span>
-        </a>
-        <a href="#" class="nav-item">
-            <span class="nav-icon">✉️</span>
-            <span>Mail</span>
-        </a>
-        <a href="#" class="nav-item">
-            <span class="nav-icon">🔍</span>
-            <span>Search</span>
-        </a>
-        <a href="#" class="nav-item">
-            <span class="nav-icon">⚙️</span>
-            <span>Settings</span>
-        </a>
-    </nav>
-    <script>
-        // Simple JavaScript for MySpace functionality
-        document.addEventListener('DOMContentLoaded', function() {
-            // Status update functionality
-            const statusUpdateBtn = document.querySelector('.status-update button');
-            if (statusUpdateBtn) {
-                statusUpdateBtn.addEventListener('click', function() {
-                    const statusTextarea = document.querySelector('.status-update textarea');
-                    if (statusTextarea.value.trim() !== '') {
-                        alert('Status updated: ' + statusTextarea.value);
-                        statusTextarea.value = '';
-                    }
-                });
-            }
-            // Navigation active state
-            const navItems = document.querySelectorAll('.nav-item');
-            navItems.forEach(item => {
-                item.addEventListener('click', function(e) {
-                    e.preventDefault();
-                    navItems.forEach(i => i.style.opacity = '0.7');
-                    this.style.opacity = '1';
-                    // In a real app, this would load different content
-                    alert('Navigating to: ' + this.querySelector('span:last-child').textContent);
-                });
-            });
-            // Friend click handler
-            const friends = document.querySelectorAll('.friend');
-            friends.forEach(friend => {
-                friend.addEventListener('click', function() {
-                    const friendName = this.querySelector('p').textContent;
-                    alert('Viewing ' + friendName + "'s profile");
-                });
-            });
         });
-    </script>
 </body>
 </html>

 <!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>