<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile // MySpace Retro</title>
    <style>
        /* --- THE CORE VIBE --- */
        :root {
            --myspace-blue: #6699cc;
            --jazz-teal: #00a1a1;
            --jazz-purple: #8b2f8b;
            --bg-white: #ffffff;
            --border-color: #6699cc;
        }

        body {
            background-color: #bee3f8; /* Light blue nostalgic background */
            font-family: Arial, Helvetica, sans-serif;
            font-size: 12px;
            margin: 0;
            padding: 20px;
        }

        /* --- LAYOUT --- */
        .profile-container {
            max-width: 800px;
            margin: 0 auto;
            background-color: var(--bg-white);
            border: 2px solid var(--border-color);
            padding: 20px;
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 20px;
        }

        /* --- LEFT COLUMN --- */
        .left-col h1 {
            font-size: 1.5em;
            margin: 0 0 10px 0;
        }

        .profile-pic {
            width: 100%;
            border: 1px solid #ccc;
            display: block;
            margin-bottom: 10px;
        }

        .status-box {
            border: 2px solid orange;
            padding: 5px;
            text-align: center;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .contact-box {
            border: 2px solid var(--myspace-blue);
            margin-top: 10px;
        }

        .contact-box header {
            background-color: var(--myspace-blue);
            color: white;
            padding: 3px;
            font-weight: bold;
        }

        .contact-links {
            display: grid;
            grid-template-columns: 1fr 1fr;
            padding: 5px;
            gap: 5px;
        }

        /* --- RIGHT COLUMN --- */
        .orange-text {
            color: #ff6600;
            font-weight: bold;
            font-size: 1.2em;
            border-bottom: 1px solid #ff6600;
            margin-bottom: 10px;
            display: block;
        }

        .blurb-section {
            margin-bottom: 20px;
        }

        .friends-space {
            background-color: #fff;
        }

        .friend-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            text-align: center;
        }

        .friend-grid img {
            width: 60px;
            height: 60px;
            border: 1px solid #000;
        }

        /* --- UTILITY --- */
        .online-now {
            color: #ff0000;
            font-weight: bold;
        }

        marquee {
            background: #eee;
            border: 1px solid #ccc;
            padding: 2px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <div class="profile-container">
        
        <div class="left-col">
            <h1>User Name</h1>
            
            <img src="profile.png" alt="Profile Picture" class="profile-pic" dldanalyzed="true" style="filter: blur(0px);">

            <div class="status-box">
                "Thinking about CSS and pixel art..."
            </div>

            <p><b>View my:</b> <a href="#">Pics</a> | <a href="#">Videos</a></p>
            
            <div class="contact-box">
                <header>Contacting User</header>
                <div class="contact-links">
                    <a href="#">Send Message</a>
                    <a href="#">Add to Friends</a>
                    <a href="#">Instant Message</a>
                    <a href="#">Add to Group</a>
                </div>
            </div>

            <div style="margin-top:20px;">
                <p><b>Status:</b> <span id="online-status" class="online-now" style="">Online Now!</span></p>
                <p><b>Sex:</b> Random</p>
                <p><b>Age:</b> 99</p>
                <p><b>City:</b> The Internet</p>
            </div>
        </div>

        <div class="right-col">
            
            <marquee scrollamount="3">Welcome to my profile! Don't forget to sign the guestbook!</marquee>

            <div class="blurb-section">
                <span class="orange-text">User's Blurbs</span>
                <p><b>About me:</b></p>
                <p>I am building a cool Neocities site called <i>sweetEMBED</i>. I love tiling backgrounds, custom cursors, and the smell of fresh HTML in the morning.</p>
                
                <p><b>Who I'd like to meet:</b></p>
                <p>Anyone who remembers the sound of a dial-up modem or likes trading 88x31 buttons!</p>
            </div>

            <div class="friends-space">
                <span class="orange-text">User's Friend Space</span>
                <p><b>User has <span style="color:red">8</span> friends.</b></p>
                
                <div class="friend-grid">
                    <div class="friend">
                        <p>Tom</p>
                        <img src="https://sweetembed.neocities.org/templates/tom.jpg" alt="Tom" dldanalyzed="true" style="filter: blur(30px); pointer-events: none;">
                    </div>
                    <div class="friend"><p>Friend 2</p><div style="width:60px;height:60px;background:#ccc;margin:auto;"></div></div>
                    <div class="friend"><p>Friend 3</p><div style="width:60px;height:60px;background:#ccc;margin:auto;"></div></div>
                    <div class="friend"><p>Friend 4</p><div style="width:60px;height:60px;background:#ccc;margin:auto;"></div></div>
                </div>
                <p style="text-align:right;"><a href="#">View All Friends</a></p>
            </div>

        </div>
    </div>

    <script>
        // Simple script to make the "Online Now" text flicker slightly 
        // to give it that old-school gif/web feel.
        const status = document.getElementById('online-status');
        
        setInterval(() => {
            status.style.visibility = (status.style.visibility === 'hidden' ? '' : 'hidden');
        }, 800);
    </script>


<img id="sweetembed-tracking-pixel" src="https://sweetembed.neocities.org/se_spacer.png" alt="" width="1" height="1" style="position: absolute; visibility: hidden; filter: blur(0px);"></body></html>