<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="Your Username">
<meta name="description" content="$$">
<meta property="og:type" content="profile">
<meta property="og:title" content="Your Username">
<meta property="og:description" content="Professional code enjoyer | Cyber security enthusiast">
<meta property="og:image" content="YOUR_AVATAR_URL">
<meta property="og:url" content="YOUR_WEBSITE_URL">
<meta property="theme-color" content="#00ff00">

<!-- Twitter Card (Optional but recommended) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Username">
<meta name="twitter:description" content="$$">
<meta name="twitter:image" content="YOUR_AVATAR_URL">
    <title>geek'n $$</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --dox-bg: #000000;
            --dox-card: #0a0a0a;
            --dox-text: #00ff00;
            --dox-accent: #1a1a1a;
            --dox-hover: #131313;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', monospace;
        }

        body {
            background-color: var(--dox-bg);
            color: var(--dox-text);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .profile-container {
            background-color: var(--dox-card);
            width: 100%;
            max-width: 800px;
            border: 1px solid var(--dox-text);
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
        }

        .banner {
            height: 150px;
            background-size: cover;
            background-position: center;
            border: 1px solid var(--dox-text);
            margin-bottom: 20px;
        }

        .profile-header {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 20px;
        }

        .avatar-wrapper {
            position: relative;
        }

        .avatar {
            width: 120px;
            height: 120px;
            border: 2px solid var(--dox-text);
        }

        .status {
            position: absolute;
            bottom: 5px;
            right: 5px;
            width: 15px;
            height: 15px;
            border: 2px solid var(--dox-card);
        }

        .user-info {
            flex-grow: 1;
        }

        .username {
            font-size: 24px;
            color: var(--dox-text);
            margin-bottom: 10px;
            text-shadow: 0 0 5px var(--dox-text);
        }

        .about-me {
            background-color: var(--dox-accent);
            border: 1px solid var(--dox-text);
            padding: 15px;
            margin: 15px 0;
        }

        .about-me h3 {
            color: var(--dox-text);
            font-size: 16px;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .activity-card {
            background-color: var(--dox-accent);
            border: 1px solid var(--dox-text);
            padding: 15px;
            margin-top: 15px;
        }

        .spotify-card {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .spotify-album-art {
            width: 80px;
            height: 80px;
            border: 1px solid var(--dox-text);
        }

        .spotify-info {
            flex-grow: 1;
        }

        .spotify-song {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .spotify-artist {
            font-size: 14px;
            opacity: 0.8;
        }

        .spotify-progress {
            width: 100%;
            height: 4px;
            background: var(--dox-accent);
            margin-top: 10px;
            border: 1px solid var(--dox-text);
        }

        .spotify-progress-bar {
            height: 100%;
            background: var(--dox-text);
            transition: width 1s linear;
        }

        .spotify-time {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            margin-top: 5px;
        }

        .badges {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 15px 0;
        }

        .badge {
            padding: 5px 10px;
            background: var(--dox-accent);
            border: 1px solid var(--dox-text);
            font-size: 14px;
        }

        .game-activity {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .game-icon {
            width: 80px;
            height: 80px;
            border: 1px solid var(--dox-text);
        }

        .game-info {
            flex-grow: 1;
        }

        .game-name {
            font-size: 18px;
            margin-bottom: 5px;
        }

        .game-details {
            font-size: 14px;
            opacity: 0.8;
        }

        /* Terminal-style typing animation */
        .typing-animation {
            border-right: 2px solid var(--dox-text);
            animation: blink 1s step-end infinite;
        }

        @keyframes blink {
            50% { border-color: transparent; }
        }

        /* Glitch effect */
        .glitch {
            position: relative;
        }

        .glitch::before,
        .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .glitch::before {
            left: 2px;
            text-shadow: -2px 0 #ff00ff;
            animation: glitch-1 2s infinite linear alternate-reverse;
        }

        .glitch::after {
            left: -2px;
            text-shadow: 2px 0 #00ffff;
            animation: glitch-2 2s infinite linear alternate-reverse;
        }

        @keyframes glitch-1 {
            0% { clip-path: inset(20% 0 30% 0); }
            100% { clip-path: inset(10% 0 40% 0); }
        }

        @keyframes glitch-2 {
            0% { clip-path: inset(40% 0 10% 0); }
            100% { clip-path: inset(30% 0 20% 0); }
        }
    </style>
</head>
<body>
    <div class="profile-container">
        <div class="banner" id="banner"></div>
        <div class="profile-header">
            <div class="avatar-wrapper">
                <img id="avatar" class="avatar" src="" alt="Avatar">
                <div class="status" id="status"></div>
            </div>
            <div class="user-info">
                <div class="username glitch" id="username" data-text=""></div>
                <div class="custom-status typing-animation" id="custom-status"></div>
                
                <div class="badges">
                    <div class="badge">DEVELOPER</div>
                    <div class="badge">GAMBLER</div>
                    <div class="badge">HEISENBERG</div>


                </div>

                <div class="about-me">
                    <h3>> About.txt</h3>
                    <p>$ cat about.txt<br>
                       > Professional nigga fucker<br>
                       > Cyber security geeker<br>
                       > Terminal dweller</p>
                </div>
            </div>
        </div>
        <div id="activities"></div>
    </div>

    <script>



        const DISCORD_ID = '1142940852726014137';
        const API_URL = `https://api.lanyard.rest/v1/users/${DISCORD_ID}`;
        const CUSTOM_BANNER_URL = 'https://cdn.discordapp.com/banners/1142940852726014137/a_10f27708ac7dc7cd97c3d3d2358c6eed.gif?size=512';

        function formatTime(ms) {
            const seconds = Math.floor(ms / 1000);
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
        }

        function updateMetaTags(data) {
    const username = data.discord_user.global_name || data.discord_user.username;
    const avatarUrl = `https://cdn.discordapp.com/avatars/${DISCORD_ID}/${data.discord_user.avatar}`;
    
    document.querySelector('meta[property="og:title"]').setAttribute('content', username);
    document.querySelector('meta[property="og:image"]').setAttribute('content', avatarUrl);
    
    document.querySelector('meta[name="twitter:title"]').setAttribute('content', username);
    document.querySelector('meta[name="twitter:image"]').setAttribute('content', avatarUrl);
}


        async function fetchUserData() {
            try {
                const response = await fetch(API_URL);
                const data = await response.json();
                updateProfile(data.data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        }

        function updateProfile(data) {
            const avatarUrl = `https://cdn.discordapp.com/avatars/${DISCORD_ID}/${data.discord_user.avatar}`;
            document.getElementById('avatar').src = avatarUrl;

            const usernameElement = document.getElementById('username');
            const username = data.discord_user.global_name || data.discord_user.username;
            usernameElement.textContent = username;
            usernameElement.setAttribute('data-text', username);

            const statusElement = document.getElementById('status');
            statusElement.style.backgroundColor = `var(--dox-text)`;

            const customStatus = document.getElementById('custom-status');
            if (data.activities.find(a => a.type === 4)) {
                const status = data.activities.find(a => a.type === 4);
                customStatus.textContent = `$ ${status.state}`;
            }



            if (data.spotify) {
                const now = Date.now();
                const start = data.spotify.timestamps.start;
                const end = data.spotify.timestamps.end;
                const progress = now - start;
                const duration = end - start;
                const progressPercent = (progress / duration) * 100;

                const spotifyCard = `
                    <div class="activity-card spotify-card">
                        <img src="${data.spotify.album_art_url}" class="spotify-album-art">
                        <div class="spotify-info">
                            <div class="spotify-song">> ${data.spotify.song}</div>
                            <div class="spotify-artist">$ by ${data.spotify.artist}</div>
                            <div class="spotify-progress">
                                <div class="spotify-progress-bar" style="width: ${progressPercent}%"></div>
                            </div>
                            <div class="spotify-time">
                                <span>${formatTime(progress)}</span>
                                <span>${formatTime(duration)}</span>
                            </div>
                        </div>
                    </div>
                `;
                document.getElementById('activities').innerHTML = spotifyCard;
            }

            data.activities.forEach(activity => {
                if (activity.type === 0) {
                    const gameCard = `
                        <div class="activity-card game-activity">
                            ${activity.application_id ? 
                                `<img src="https://cdn.discordapp.com/app-icons/${activity.application_id}/${activity.assets?.large_image}.png" class="game-icon">` 
                                : ''}
                            <div class="game-info">
                                <div class="game-name">> ${activity.name}</div>
                                <div class="game-details">$ ${activity.details || ''}</div>
                                <div class="game-state">$ ${activity.state || ''}</div>
                            </div>
                        </div>
                    `;
                    document.getElementById('activities').innerHTML += gameCard;
                }
            });
            updateMetaTags(data);

            document.getElementById('banner').style.backgroundImage = `url(${CUSTOM_BANNER_URL})`;
        }

        fetchUserData();

        setInterval(fetchUserData, 1000);
    </script>
</body>
</html>