Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>MySpace Rewind</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <!-- Top blue bar --> | |
| <header class="top-bar"> | |
| <div class="logo">myspace rewind</div> | |
| <nav class="main-nav"> | |
| <a href="#">Home</a> | |
| <a href="#" class="active">Profile</a> | |
| <a href="#">Friends</a> | |
| <a href="#">Messages</a> | |
| <a href="#">Settings</a> | |
| </nav> | |
| <div class="search-box"> | |
| <input type="text" placeholder="Search..." /> | |
| <button>Go</button> | |
| </div> | |
| </header> | |
| <!-- Main layout: left / center / right --> | |
| <main class="page"> | |
| <!-- LEFT COLUMN: profile info --> | |
| <section class="col-left"> | |
| <div class="profile-card"> | |
| <h2>Johnny Gallardo</h2> | |
| <div class="online-status"> | |
| <span class="online-dot"></span> | |
| ONLINE NOW | |
| </div> | |
| <p class="tagline">"MySpace Enthusiast"</p> | |
| <div class="avatar" style="height:180px;"> | |
| <img src="https://huggingface.co/spaces/enzostvs/deepsite/resolve/82c01269cca36b731fee5e6f5247bdcea5c0b3c6/20160925_111954.jpg" alt="Johnny Gallardo" style="width:100%; height:100%; object-fit:cover; border-radius:10px;"> | |
| </div> | |
| <div class="stats"> | |
| <div><span>1,234</span> Friends</div> | |
| <div><span>56</span> Photos</div> | |
| <div><span>89</span> Comments</div> | |
| </div> | |
| <button class="btn-primary">View My Profile</button> | |
| </div> | |
| <div class="profile-edit-box"> | |
| <h3>Profile</h3> | |
| <label> | |
| Display Name<br /> | |
| <input type="text" value="John Doe" /> | |
| </label> | |
| <label> | |
| Headline<br /> | |
| <input type="text" value="Living that 2005 life" /> | |
| </label> | |
| <button class="btn-secondary">Save Changes</button | |
| > | |
| </div> | |
| <!-- About Me + Who I'd Like to Meet --> | |
| <div class="contact-box"> | |
| <h3>Contacting John</h3> | |
| <div class="contact-grid"> | |
| <a href="#" class="contact-btn">Add to Friends</a> | |
| <a href="#" class="contact-btn">Send Message</a> | |
| <a href="#" class="contact-btn">Instant Message</a> | |
| <a href="#" class="contact-btn">Add to Favorites</a> | |
| </div> | |
| </div> | |
| <div class="info-box"> | |
| <h3>About Me</h3> | |
| <div class="info-content"> | |
| <p> | |
| Hi, I'm John Doe. I like old-school MySpace vibes, gaming, and breaking the | |
| space-time continuum with my AI buddy. ✌️ | |
| </p> | |
| </div> | |
| </div> | |
| <div class="info-box"> | |
| <h3>Who I'd Like to Meet</h3> | |
| <div class="info-content"> | |
| <p> | |
| People who still remember dial-up tones, burnt CDs, and the pain of losing | |
| your spot in someone’s Top 8. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CENTER COLUMN: feed / comments --> | |
| <section class="col-center"> | |
| <div class="status-box"> | |
| <h3>What’s your mood?</h3> | |
| <textarea placeholder="What’s on your mind?"></textarea> | |
| <div class="status-actions"> | |
| <button class="btn-secondary">Photo</button> | |
| <button class="btn-primary">Post</button> | |
| </div> | |
| </div> | |
| <article class="post"> | |
| <header class="post-header"> | |
| <div class="post-avatar"></div> | |
| <div> | |
| <div class="post-author">Tom Anderson</div> | |
| <div class="post-time">2 hours ago</div> | |
| </div> | |
| </header> | |
| <p class="post-text"> | |
| Just added some new features to the shelf! Check out the new profile customization options. | |
| </p> | |
| <div class="post-photo"></div> | |
| <footer class="post-footer"> | |
| <button>👍 42</button> | |
| <button>💬 8 comments</button> | |
| </footer> | |
| </article> | |
| </section> | |
| <!-- RIGHT COLUMN: Top Friends + Music --> | |
| <aside class="col-right"> | |
| <div class="top-friends"> | |
| <h3>Top Friends</h3> | |
| <div class="friend-grid"> | |
| <a href="#" class="friend-link"> | |
| <div class="friend-card"> | |
| <div class="friend-photo"> | |
| <img src="https://picsum.photos/seed/tom/90/70" alt="Tom" /> | |
| </div> | |
| <div class="friend-name">Tom</div> | |
| </div> | |
| </a> | |
| <a href="#" class="friend-link"> | |
| <div class="friend-card"> | |
| <div class="friend-photo"> | |
| <img src="https://picsum.photos/seed/chris/90/70" alt="Chris DeWolfe" /> | |
| </div> | |
| <div class="friend-name">Chris DeWolfe</div> | |
| </div> | |
| </a> | |
| <a href="#" class="friend-link"> | |
| <div class="friend-card"> | |
| <div class="friend-photo"> | |
| <img src="https://picsum.photos/seed/jane/90/70" alt="Jane Smith" /> | |
| </div> | |
| <div class="friend-name">Jane Smith</div> | |
| </div> | |
| </a> | |
| <a href="#" class="friend-link"> | |
| <div class="friend-card"> | |
| <div class="friend-photo"> | |
| <img src="https://picsum.photos/seed/amber/90/70" alt="Amber" /> | |
| </div> | |
| <div class="friend-name">Amber</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="music-player"> | |
| <h3>Music Player</h3> | |
| <div class="track-info"> | |
| <div class="track-title" id="track-title">The Ocean</div> | |
| <div class="track-artist" id="track-artist">Super Fuzz</div> | |
| </div> | |
| <!-- Equalizer bars --> | |
| <div class="eq-visualizer"> | |
| <div class="eq-bar"></div> | |
| <div class="eq-bar"></div> | |
| <div class="eq-bar"></div> | |
| <div class="eq-bar"></div> | |
| <div class="eq-bar"></div> | |
| <div class="eq-bar"></div> | |
| <div class="eq-bar"></div> | |
| <div class="eq-bar"></div> | |
| <div class="eq-bar"></div> | |
| <div class="eq-bar"></div> | |
| </div> | |
| <div class="player-controls"> | |
| <button id="prev-btn">⏮</button> | |
| <button id="play-pause-btn">▶</button> | |
| <button id="next-btn">⏭</button> | |
| </div> | |
| <input | |
| id="seek-bar" | |
| type="range" | |
| min="0" | |
| max="100" | |
| value="0" | |
| /> | |
| <!-- Hidden audio element that actually plays the sound --> | |
| <audio id="audio-player"></audio> | |
| </div> | |
| </aside> | |
| </main> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |