<!--
            dddddddd
            d::::::d                                     iiii          lllllll   iiii  kkkkkkkk                                                                                                                                          tttt
            d::::::d                                    i::::i         l:::::l  i::::i k::::::k                                                                                                                                       ttt:::t
            d::::::d                                     iiii          l:::::l   iiii  k::::::k                                                                                                                                       t:::::t
            d:::::d                                                    l:::::l         k::::::k                                                                                                                                       t:::::t
    ddddddddd:::::d   aaaaaaaaaaaaa  nnnn  nnnnnnnn    iiiiiii          l::::l iiiiiii  k:::::k    kkkkkkk eeeeeeeeeeee        ssssssssss              mmmmmmm    mmmmmmm      ooooooooooo   nnnn  nnnnnnnn        ssssssssss   ttttttt:::::ttttttt        eeeeeeeeeeee    rrrrr   rrrrrrrrr
  dd::::::::::::::d   a::::::::::::a n:::nn::::::::nn  i:::::i          l::::l i:::::i  k:::::k   k:::::kee::::::::::::ee    ss::::::::::s           mm:::::::m  m:::::::mm  oo:::::::::::oo n:::nn::::::::nn    ss::::::::::s  t:::::::::::::::::t      ee::::::::::::ee  r::::rrr:::::::::r
 d::::::::::::::::d   aaaaaaaaa:::::an::::::::::::::nn  i::::i          l::::l  i::::i  k:::::k  k:::::ke::::::eeeee:::::eess:::::::::::::s         m::::::::::mm::::::::::mo:::::::::::::::on::::::::::::::nn ss:::::::::::::s t:::::::::::::::::t     e::::::eeeee:::::eer:::::::::::::::::r
d:::::::ddddd:::::d            a::::ann:::::::::::::::n i::::i          l::::l  i::::i  k:::::k k:::::ke::::::e     e:::::es::::::ssss:::::s        m::::::::::::::::::::::mo:::::ooooo:::::onn:::::::::::::::ns::::::ssss:::::stttttt:::::::tttttt    e::::::e     e:::::err::::::rrrrr::::::r
d::::::d    d:::::d     aaaaaaa:::::a  n:::::nnnn:::::n i::::i          l::::l  i::::i  k::::::k:::::k e:::::::eeeee::::::e s:::::s  ssssss         m:::::mmm::::::mmm:::::mo::::o     o::::o  n:::::nnnn:::::n s:::::s  ssssss       t:::::t          e:::::::eeeee::::::e r:::::r     r:::::r
d:::::d     d:::::d   aa::::::::::::a  n::::n    n::::n i::::i          l::::l  i::::i  k:::::::::::k  e:::::::::::::::::e    s::::::s              m::::m   m::::m   m::::mo::::o     o::::o  n::::n    n::::n   s::::::s            t:::::t          e:::::::::::::::::e  r:::::r     rrrrrrr
d:::::d     d:::::d  a::::aaaa::::::a  n::::n    n::::n i::::i          l::::l  i::::i  k:::::::::::k  e::::::eeeeeeeeeee        s::::::s           m::::m   m::::m   m::::mo::::o     o::::o  n::::n    n::::n      s::::::s         t:::::t          e::::::eeeeeeeeeee   r:::::r
d:::::d     d:::::d a::::a    a:::::a  n::::n    n::::n i::::i          l::::l  i::::i  k::::::k:::::k e:::::::e           ssssss   s:::::s         m::::m   m::::m   m::::mo::::o     o::::o  n::::n    n::::nssssss   s:::::s       t:::::t    tttttte:::::::e            r:::::r
d::::::ddddd::::::dda::::a    a:::::a  n::::n    n::::ni::::::i        l::::::li::::::ik::::::k k:::::ke::::::::e          s:::::ssss::::::s        m::::m   m::::m   m::::mo:::::ooooo:::::o  n::::n    n::::ns:::::ssss::::::s      t::::::tttt:::::te::::::::e           r:::::r
 d:::::::::::::::::da:::::aaaa::::::a  n::::n    n::::ni::::::i ...... l::::::li::::::ik::::::k  k:::::ke::::::::eeeeeeee  s::::::::::::::s  ...... m::::m   m::::m   m::::mo:::::::::::::::o  n::::n    n::::ns::::::::::::::s       tt::::::::::::::t e::::::::eeeeeeee   r:::::r
  d:::::::::ddd::::d a::::::::::aa:::a n::::n    n::::ni::::::i .::::. l::::::li::::::ik::::::k   k:::::kee:::::::::::::e   s:::::::::::ss   .::::. m::::m   m::::m   m::::m oo:::::::::::oo   n::::n    n::::n s:::::::::::ss          tt:::::::::::tt  ee:::::::::::::e   r:::::r
   ddddddddd   ddddd  aaaaaaaaaa  aaaa nnnnnn    nnnnnniiiiiiii ...... lllllllliiiiiiiikkkkkkkk    kkkkkkk eeeeeeeeeeeeee    sssssssssss     ...... mmmmmm   mmmmmm   mmmmmm   ooooooooooo     nnnnnn    nnnnnn  sssssssssss              ttttttttttt      eeeeeeeeeeeeee   rrrrrrr
-->


<html lang="en">
<head>
    <meta property="og:title" content="dani" />
    <meta property="og:description" content="welcome to my webpage" />
    <meta property="og:url" content="https://dani.likes.monster" />
    <meta property="og:image" content="https://dani.likes.monster/favicon.png" />
    <meta name="theme-color" content="#070709" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta charset="UTF-8" />
    <title>dani.likes.monster</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        :root { --bg: #0c0c0c; --panel: #161616; --panel-2: #222; --line: #333; --text: #eee; --muted: #888; --radius: 12px; --radius-sm: 8px; --max-width: 640px; }
        body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; min-height: 100vh; padding: 40px 20px 60px; display: flex; justify-content: center; user-select: none; -webkit-user-select: none; cursor: url('/cursor.png') 16 16, auto; }
        .wrap { width: 100%; max-width: var(--max-width); display: flex; flex-direction: column; align-items: center; gap: 18px; }
        .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; width: 100%; transition: border-color 0.2s; }
        .panel:hover { border-color: rgba(255, 255, 255, 0.06); }
        .profile-banner { height: 96px; background: var(--panel-2); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; transition: background-image 0.4s ease; }
        .profile-banner .banner-fallback { width: 100%; height: 100%; background: var(--panel-2); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .profile-body { padding: 0 24px 20px; }
        .avatar-row { display: flex; align-items: flex-end; justify-content: space-between; margin-top: -38px; flex-wrap: wrap; gap: 12px; }
        .avatar-wrapper { display: flex; align-items: flex-end; gap: 16px; flex: 1; min-width: 0; }
        .avatar { width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--panel); background: var(--panel-2); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; flex-shrink: 0; }
        .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: none; position: relative; z-index: 1; }
        .avatar .fallback { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); border-radius: 50%; background: var(--panel-2); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; }
        .avatar .decoration { position: absolute; top: -6px; left: -6px; width: calc(100% + 12px); height: calc(100% + 12px); border-radius: 50%; pointer-events: none; z-index: 2; background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.9; }
        .status-dot { position: absolute; right: 2px; bottom: 2px; width: 20px; height: 20px; border-radius: 50%; background: #747f8d; border: 4px solid var(--panel); transition: background 0.3s; z-index: 3; }
        .name-group { display: flex; flex-direction: column; flex: 1; min-width: 0; }
        .name-group .display-name { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 600; line-height: 1.2; color: #eee; }
        .username-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 0; }
        .username-row .username { font-size: 13px; color: var(--muted); }
        .username-row .username .discrim { color: #555; }
        .plat-inline { display: none; width: 14px; height: 14px; opacity: 0.35; transition: opacity 0.2s ease; flex-shrink: 0; color: #bbb; position: relative; }
        .plat-inline.active { display: inline-block; opacity: 0.55; }
        .plat-inline.active:hover { opacity: 0.9; }
        .plat-inline svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .plat-inline + .plat-inline { margin-left: 1px; }
        .clock-box { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; position: relative; }
        .clock-chip { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--radius-sm); white-space: nowrap; position: relative; }
        .clock-offset { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #555; white-space: nowrap; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 2px; }
        .profile-activities { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); }
        .profile-activities .act-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
        .profile-activities .act-label .count { background: var(--panel-2); padding: 0 8px; border-radius: 10px; border: 1px solid var(--line); font-size: 10px; }
        .activity-mini-list { display: flex; flex-direction: column; gap: 8px; }
        .activity-mini { display: flex; gap: 12px; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; transition: border-color 0.2s; }
        .activity-mini:hover { border-color: rgba(255, 255, 255, 0.08); }
        .activity-mini .mini-icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; background: var(--panel); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--line); }
        .activity-mini .mini-icon img { width: 100%; height: 100%; object-fit: cover; }
        .activity-mini .mini-body { flex: 1; min-width: 0; }
        .activity-mini .mini-body .mini-name { font-size: 13px; font-weight: 600; color: #eee; }
        .activity-mini .mini-body .mini-detail { font-size: 12px; color: #aaa; margin-top: 0; }
        .activity-mini .mini-body .mini-state { font-size: 11px; color: var(--muted); margin-top: 0; }
        .activity-mini .mini-body .mini-timer { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 2px; }
        .no-activities { color: var(--muted); font-size: 12px; padding: 4px 0; }
        .about-section { padding: 20px 22px; }
        .about-section h3 { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #ccc; }
        .about-section p { font-size: 14px; line-height: 1.6; color: #bbb; }
        .about-section strong { color: #fff; font-weight: 600; }
        .about-section .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); margin-top: 14px; margin-bottom: 4px; }
        .tooltip-trigger { position: relative; border-bottom: 1px dotted var(--muted); }
        .tooltip-box { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 1px solid var(--line); padding: 4px 8px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
        .tooltip-trigger:hover .tooltip-box { opacity: 1; }
        .clock-chip:hover .tooltip-box { opacity: 1; }
        .plat-inline:hover .tooltip-box { opacity: 1; }
        .views-counter { position: fixed; bottom: 16px; left: 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: 6px 12px; border-radius: var(--radius-sm); }
        .activity-mini .mini-icon.is-art { background-size: cover; background-position: center; background-repeat: no-repeat; }
        .spotify-progress { height: 4px; background: rgba(255, 255, 255, 0.08); border-radius: 2px; margin-top: 8px; overflow: hidden; }
        .spotify-progress-bar { height: 100%; width: 0%; background: #eee; border-radius: 2px; }
        .spotify-times { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); margin-top: 4px; }
        .guestbook-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
        .guestbook-form input, .guestbook-form textarea, .guestbook-form button {
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            color: var(--text);
            background: var(--panel-2);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            padding: 8px 12px;
            outline: none;
            width: 100%;
        }
        .guestbook-form input:focus, .guestbook-form textarea:focus { border-color: rgba(255, 255, 255, 0.18); }
        .guestbook-form textarea { min-height: 64px; resize: vertical; }
        .guestbook-form button {
            width: auto;
            align-self: flex-end;
            cursor: pointer;
            color: var(--muted);
            transition: color 0.2s, border-color 0.2s;
        }
        .guestbook-form button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.18); }
        .gb-status { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); min-height: 14px; margin-bottom: 10px; }
        .guestbook-list { display: flex; flex-direction: column; gap: 8px; }
        .guestbook-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
        .gb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
        .gb-name { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: #eee; }
        .gb-when { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); white-space: nowrap; }
        .gb-msg { font-size: 13px; line-height: 1.5; color: #bbb; }
        @media (max-width: 480px) { body { padding: 20px 12px 40px; cursor: auto; } .profile-banner { height: 72px; } .avatar { width: 68px; height: 68px; } .avatar .fallback { font-size: 26px; } .name-group .display-name { font-size: 20px; } .profile-body { padding: 0 16px 16px; } .avatar-row { margin-top: -32px; } .clock-chip { font-size: 10px; padding: 4px 10px; } .plat-inline { width: 12px; height: 12px; } .activity-mini { padding: 8px 12px; } .activity-mini .mini-icon { width: 32px; height: 32px; } .activity-mini .mini-body .mini-name { font-size: 12px; } .activity-mini .mini-body .mini-detail { font-size: 11px; } }
        @media (max-height: 500px) and (orientation: landscape) { body { padding: 12px 20px 16px; cursor: auto; } .wrap { gap: 10px; } .profile-banner { height: 56px; } .avatar { width: 56px; height: 56px; border-width: 3px; } .avatar .fallback { font-size: 22px; } .avatar .decoration { top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); } .status-dot { width: 14px; height: 14px; border-width: 3px; } .avatar-row { margin-top: -26px; gap: 8px; } .name-group .display-name { font-size: 18px; } .username-row .username { font-size: 12px; } .profile-body { padding: 0 16px 14px; } .profile-activities { margin-top: 16px; padding-top: 10px; } .activity-mini { padding: 6px 10px; } .activity-mini .mini-icon { width: 28px; height: 28px; } .activity-mini .mini-body .mini-name { font-size: 12px; } .activity-mini .mini-body .mini-detail, .activity-mini .mini-body .mini-state { font-size: 11px; } .about-section { padding: 14px 18px; } .about-section p { font-size: 13px; line-height: 1.5; } .clock-chip { font-size: 10px; padding: 4px 8px; } .clock-offset { font-size: 9px; } .views-counter { bottom: 8px; left: 8px; font-size: 10px; padding: 4px 8px; } }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="panel">
            <div class="profile-banner" id="profileBanner">
                <div class="banner-fallback">banner</div>
            </div>
            <div class="profile-body">
                <div class="avatar-row">
                    <div class="avatar-wrapper">
                        <div class="avatar" id="avatarContainer">
                            <img id="avatarImg" alt="avatar" />
                            <span class="fallback" id="avatarFallback">d</span>
                            <span class="status-dot" id="statusDot"></span>
                            <div class="decoration" id="avatarDecoration" style="display:none;"></div>
                        </div>
                        <div class="name-group">
                            <div class="display-name" id="displayName">dani</div>
                            <div class="username-row">
                                <span class="username" id="usernameLine">@actofpassion<span class="discrim">#0</span></span>
                                <span class="plat-inline" data-platform="desktop"><svg viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg><span class="tooltip-box">desktop</span></span>
                                <span class="plat-inline" data-platform="web"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg><span class="tooltip-box">web</span></span>
                                <span class="plat-inline" data-platform="mobile"><svg viewBox="0 0 24 24"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg><span class="tooltip-box">mobile</span></span>
                                <span class="plat-inline" data-platform="embedded"><svg viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="13" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="19"/></svg><span class="tooltip-box">embedded</span></span>
                                <span class="plat-inline" data-platform="vr"><svg viewBox="0 0 24 24"><path d="M4 14v-3a8 8 0 0 1 16 0v3"/><path d="M18 14c0 1.5-1.5 3-3 3h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1c1.5 0 3 .5 3 2z"/><path d="M6 14c0 1.5 1.5 3 3 3h1a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H9c-1.5 0-3 .5-3 2z"/></svg><span class="tooltip-box">vr</span></span>
                            </div>
                        </div>
                    </div>
                    <div class="clock-box">
                        <div class="clock-chip"><svg style="width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> <span id="clock">--:--</span><span class="tooltip-box" style="bottom: calc(100% + 8px);">Europe/Bucharest</span></div>
                        <div class="clock-offset" id="clockOffset"></div>
                    </div>
                </div>
                <div class="profile-activities" id="profileActivities">
                    <div class="act-label">
                        <span>activities</span>
                        <span class="count" id="activityCount">0</span>
                    </div>
                    <div class="activity-mini-list" id="activityMiniList">
                        <div class="no-activities" id="noActMsg">no active activities.</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel about-section">
            <h3>about</h3>
            <p>hey, i'm <strong>dani</strong>, a <span class="tooltip-trigger"><span id="static-age">14</span> year old<span class="tooltip-box" id="animated-age"></span></span> from <strong>romania</strong></p>
            <div class="eyebrow">interests</div>
            <p>i like gaming, music, coding and spending all of my time on my computer</p>
        </div>
        <div class="panel about-section">
            <h3>guestbook</h3>
            <form class="guestbook-form" id="guestbookForm">
                <input id="gbName" maxlength="32" placeholder="name" required autocomplete="off" />
                <textarea id="gbMessage" maxlength="200" placeholder="message" required></textarea>
                <button type="submit">sign</button>
            </form>
            <div class="gb-status" id="gbStatus"></div>
            <div class="guestbook-list" id="guestbookList">
                <div class="no-activities">no messages yet.</div>
            </div>
        </div>
    </div>
    <div class="views-counter">
        <span>views: </span><span id="viewCount">...</span>
    </div>
    <script>
        const DISCORD_ID = '852991682748219392';
        let lastBannerUrl = null;
        let spotifyData = null;
        function tickClock() {
            const d = new Date();
            document.getElementById('clock').textContent = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: 'Europe/Bucharest' });
            const localOffset = -d.getTimezoneOffset() / 60;
            const bucharestStr = d.toLocaleString('en-US', { timeZone: 'Europe/Bucharest', hour: 'numeric', hour12: false });
            const bucharestHour = parseInt(bucharestStr);
            const localHour = d.getHours();
            let diff = bucharestHour - localHour;
            if (diff > 12) diff -= 24;
            if (diff < -12) diff += 24;
            const offsetEl = document.getElementById('clockOffset');
            if (diff === 0) { offsetEl.textContent = 'same time as you'; }
            else if (diff > 0) { offsetEl.textContent = `${diff}h ahead of you`; }
            else { offsetEl.textContent = `${Math.abs(diff)}h behind you`; }
            updateSpotifyProgress();
            document.querySelectorAll('.mini-timer[data-start]').forEach(el => {
                el.textContent = `⏱ ${formatDuration(Date.now() - Number(el.dataset.start))}`;
            });
        }
        tickClock();
        setInterval(tickClock, 1000);
        const STATUS_COLORS = { online: '#3ddc84', idle: '#f5b942', dnd: '#f04747', offline: '#747f8d' };
        function formatDuration(ms) {
            if (!ms) return '—';
            const totalSec = Math.floor(ms / 1000);
            const h = Math.floor(totalSec / 3600);
            const m = Math.floor((totalSec % 3600) / 60);
            const s = totalSec % 60;
            if (h > 0) return `${h}h ${m}m ${s}s`;
            if (m > 0) return `${m}m ${s}s`;
            return `${s}s`;
        }
        function formatSpotifyTime(ms) {
            if (!ms || ms < 0) return '0:00';
            const totalSec = Math.floor(ms / 1000);
            const m = Math.floor(totalSec / 60);
            const s = totalSec % 60;
            return `${m}:${s.toString().padStart(2, '0')}`;
        }
        function updateSpotifyProgress() {
            if (!spotifyData) return;
            const { start, end } = spotifyData;
            const now = Date.now();
            const bar = document.getElementById('spotifyProgress');
            const elapsedEl = document.getElementById('spotifyElapsed');
            const durationEl = document.getElementById('spotifyDuration');
            if (!bar || !elapsedEl || !durationEl) return;
            if (start && end) {
                const progress = Math.min(1, Math.max(0, (now - start) / (end - start)));
                bar.style.width = `${progress * 100}%`;
                elapsedEl.textContent = formatSpotifyTime(now - start);
                durationEl.textContent = formatSpotifyTime(end - start);
            } else {
                bar.style.width = '0%';
                elapsedEl.textContent = '';
                durationEl.textContent = '';
            }
        }
        function escapeHtml(s) {
            return String(s).replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
        }
        async function resolveActivityIconUrl(activity) {
            if (!activity) return null;
            const assets = activity.assets;
            const appId = activity.application_id;
            const image = assets?.large_image || assets?.small_image;

            if (!image) {
                if (!appId) return null;
                return `https://dcdn.dstn.to/app-icons/${appId}`;
            }

            if (image.startsWith('mp:external/')) {
                return image.replace('mp:external/', 'https://media.discordapp.net/external/');
            }

            if (image.startsWith('spotify:')) {
                return `https://i.scdn.co/image/${image.replace('spotify:', '')}`;
            }

            if (!appId) return null;

            return /^\d+$/.test(image)
                ? `https://cdn.discordapp.com/app-assets/${appId}/${image}.png?size=512`
                : `https://cdn.discordapp.com/app-icons/${appId}/${image}.png?size=512`;
        }
        async function renderPresence(data) {
            try {
                const user = data.discord_user;
                const status = data.discord_status || 'offline';
                const bannerEl = document.getElementById('profileBanner');
                const fallbackDiv = bannerEl.querySelector('.banner-fallback');
                try {
                    const bannerRes = await fetch(`https://dcdn.dstn.to/profile/${DISCORD_ID}`);
                    const bannerData = await bannerRes.json();
                    if (bannerData.user?.banner) {
                        const ext = bannerData.user.banner.startsWith('a_') ? 'gif' : 'png';
                        const bannerUrl = `https://cdn.discordapp.com/banners/${DISCORD_ID}/${bannerData.user.banner}.${ext}?size=1024`;
                        if (bannerUrl !== lastBannerUrl) {
                            const img = new Image();
                            img.onload = function () { bannerEl.style.backgroundImage = `url("${bannerUrl}")`; bannerEl.style.backgroundColor = 'transparent'; fallbackDiv.style.display = 'none'; lastBannerUrl = bannerUrl; };
                            img.src = bannerUrl;
                        }
                    } else {
                        bannerEl.style.backgroundImage = 'none';
                        bannerEl.style.backgroundColor = 'var(--panel-2)';
                        fallbackDiv.style.display = 'flex';
                        fallbackDiv.textContent = 'banner';
                    }
                } catch (e) {
                    if (!lastBannerUrl) { bannerEl.style.backgroundImage = 'none'; bannerEl.style.backgroundColor = 'var(--panel-2)'; fallbackDiv.style.display = 'flex'; fallbackDiv.textContent = 'banner'; }
                }
                const avatarImg = document.getElementById('avatarImg');
                const fallback = document.getElementById('avatarFallback');
                if (user.avatar) { avatarImg.src = `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png?size=128`; avatarImg.style.display = 'block'; fallback.style.display = 'none'; }
                else { avatarImg.style.display = 'none'; fallback.style.display = 'flex'; const initial = (user.global_name || user.username || 'u')[0] || 'u'; fallback.textContent = initial.toLowerCase(); }
                const decoContainer = document.getElementById('avatarDecoration');
                if (user.avatar_decoration_data && user.avatar_decoration_data.asset) { const asset = user.avatar_decoration_data.asset; const decoUrl = `https://cdn.discordapp.com/avatar-decoration-presets/${asset}.png?size=128`; decoContainer.style.backgroundImage = `url(${decoUrl})`; decoContainer.style.display = 'block'; }
                else { decoContainer.style.display = 'none'; }
                const displayName = user.global_name || user.username || 'dani';
                document.getElementById('displayName').textContent = displayName;
                const usernameLine = document.getElementById('usernameLine');
                const discrim = user.discriminator && user.discriminator !== '0' ? `#${user.discriminator}` : '';
                usernameLine.innerHTML = `@${user.username || 'actofpassion'}<span class="discrim">${discrim}</span>`;
                document.getElementById('statusDot').style.background = STATUS_COLORS[status] || STATUS_COLORS.offline;
                const activeMap = { desktop: data.active_on_discord_desktop || false, web: data.active_on_discord_web || false, mobile: data.active_on_discord_mobile || false, embedded: data.active_on_discord_embedded || false, vr: data.active_on_discord_vr || false };
                document.querySelectorAll('.plat-inline').forEach(el => { const p = el.dataset.platform; if (activeMap[p]) el.classList.add('active'); else el.classList.remove('active'); });
                const activities = data.activities || [];
                const displayActivities = activities.filter(a => a.type !== 4);
                document.getElementById('activityCount').textContent = displayActivities.length;
                const listEl = document.getElementById('activityMiniList');
                spotifyData = data.spotify?.song
                    ? { start: data.spotify.timestamps?.start, end: data.spotify.timestamps?.end }
                    : null;
                if (displayActivities.length === 0) {
                    spotifyData = null;
                    listEl.innerHTML = `<div class="no-activities">no active activities.</div>`;
                }
                else {
                    let html = '';
                    for (const act of displayActivities) {
                        const isSpotify = act.name === 'Spotify' && data.spotify?.song;
                        if (isSpotify) {
                            const sp = data.spotify;
                            const start = sp.timestamps?.start;
                            const end = sp.timestamps?.end;
                            let width = 0, elapsed = '', duration = '';
                            if (start && end) {
                                const now = Date.now();
                                width = Math.min(1, Math.max(0, (now - start) / (end - start))) * 100;
                                elapsed = formatSpotifyTime(now - start);
                                duration = formatSpotifyTime(end - start);
                            }
                            const art = sp.album_art_url ? `background-image:url("${escapeHtml(sp.album_art_url)}");` : '';
                            html += `<div class="activity-mini"><div class="mini-icon is-art" style="${art}"></div><div class="mini-body"><div class="mini-name">${escapeHtml(sp.song)}</div>${sp.artist ? `<div class="mini-detail">${escapeHtml(sp.artist)}</div>` : ''}<div class="spotify-progress"><div class="spotify-progress-bar" id="spotifyProgress" style="width:${width}%"></div></div><div class="spotify-times"><span id="spotifyElapsed">${elapsed}</span><span id="spotifyDuration">${duration}</span></div></div></div>`;
                            continue;
                        }
                        const appName = act.name || 'unknown';
                        const detail = act.details || '';
                        const state = act.state || '';
                        const startTs = act.timestamps?.start;
                        let elapsed = '';
                        if (startTs) { const now = Date.now(); elapsed = `⏱ ${formatDuration(now - startTs)}`; }
                        const iconUrl = await resolveActivityIconUrl(act);
                        let iconHtml = '';
                        if (iconUrl) { iconHtml = `<img src="${escapeHtml(iconUrl)}" alt="${escapeHtml(appName)}" loading="lazy" />`; }
                        else { iconHtml = `<div style="width:100%;height:100%;background:var(--panel-2);border-radius:6px;"></div>`; }
                        html += `<div class="activity-mini"><div class="mini-icon">${iconHtml}</div><div class="mini-body"><div class="mini-name">${escapeHtml(appName)}</div>${detail ? `<div class="mini-detail">${escapeHtml(detail)}</div>` : ''}${state ? `<div class="mini-state">${escapeHtml(state)}</div>` : ''}${startTs ? `<div class="mini-timer" data-start="${startTs}">${elapsed}</div>` : ''}</div></div>`;
                    }
                    listEl.innerHTML = html;
                    updateSpotifyProgress();
                }
            } catch (e) {
                console.warn('presence render error:', e);
                spotifyData = null;
                document.getElementById('usernameLine').textContent = '@actofpassion · presence unavailable';
                document.getElementById('activityMiniList').innerHTML = `<div class="no-activities">⚠️ could not load presence.</div>`;
            }
        }

        async function loadDiscord() {
            try {
                const res = await fetch(`https://api.lanyard.rest/v1/users/${DISCORD_ID}`);
                const json = await res.json();
                if (!json.success) throw new Error('lanyard: user not found');
                await renderPresence(json.data);
            } catch (e) {
                console.warn('lanyard error:', e);
                spotifyData = null;
                document.getElementById('usernameLine').textContent = '@actofpassion · presence unavailable';
                document.getElementById('activityMiniList').innerHTML = `<div class="no-activities">⚠️ could not load presence.</div>`;
            }
        }

        let lanyardSocket = null;
        let lanyardHeartbeat = null;
        let lanyardRetry = 0;
        function connectLanyard() {
            try { if (lanyardSocket) lanyardSocket.close(); } catch (e) {}
            lanyardSocket = new WebSocket('wss://api.lanyard.rest/socket');
            lanyardSocket.onopen = () => { lanyardRetry = 0; };
            lanyardSocket.onmessage = (e) => {
                let msg;
                try { msg = JSON.parse(e.data); } catch (err) { return; }
                if (msg.op === 1) {
                    lanyardSocket.send(JSON.stringify({ op: 2, d: { subscribe_to_id: DISCORD_ID } }));
                    clearInterval(lanyardHeartbeat);
                    lanyardHeartbeat = setInterval(() => {
                        if (lanyardSocket?.readyState === WebSocket.OPEN) {
                            lanyardSocket.send(JSON.stringify({ op: 3 }));
                        }
                    }, msg.d?.heartbeat_interval || 30000);
                }
                if (msg.op === 0 && msg.d && msg.d.discord_user) {
                    renderPresence(msg.d);
                }
            };
            lanyardSocket.onclose = () => {
                clearInterval(lanyardHeartbeat);
                lanyardRetry = Math.min(lanyardRetry + 1, 5);
                setTimeout(connectLanyard, 1000 * lanyardRetry);
            };
            lanyardSocket.onerror = () => { lanyardSocket.close(); };
        }

        loadDiscord();
        connectLanyard();
        document.addEventListener('contextmenu', e => e.preventDefault());

        const BIRTH_DATE = new Date('2012-01-26');
        function updateAge() {
            const now = new Date();
            const diff = now - BIRTH_DATE;
            const years = diff / (365.25 * 24 * 60 * 60 * 1000);
            document.getElementById('static-age').textContent = Math.floor(years);
            document.getElementById('animated-age').textContent = years.toFixed(10);
        }
        updateAge();
        setInterval(updateAge, 100);

        async function fetchViews() {
            try {
                const r = await fetch('/api/views/current');
                const d = await r.json();
                document.getElementById('viewCount').textContent = d.count.toLocaleString();
            } catch (e) {}
        }

        fetch('/api/views').then(r => r.json()).then(d => {
            document.getElementById('viewCount').textContent = d.count.toLocaleString();
        }).catch(() => fetchViews());

        setInterval(fetchViews, 30000);

        function renderGuestbook(messages) {
            const el = document.getElementById('guestbookList');
            if (!messages || messages.length === 0) {
                el.innerHTML = '<div class="no-activities">no messages yet.</div>';
                return;
            }
            el.innerHTML = messages.map(m => {
                const when = new Date(m.created_at).toLocaleDateString([], { month: 'short', day: 'numeric' });
                return `<div class="guestbook-item"><div class="gb-head"><span class="gb-name">${escapeHtml(m.name)}</span><span class="gb-when">${when}</span></div><div class="gb-msg">${escapeHtml(m.message)}</div></div>`;
            }).join('');
        }

        async function loadGuestbook() {
            try {
                const r = await fetch('/api/guestbook');
                const d = await r.json();
                renderGuestbook(d.messages || []);
            } catch (e) {}
        }

        document.getElementById('guestbookForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const nameEl = document.getElementById('gbName');
            const msgEl = document.getElementById('gbMessage');
            const statusEl = document.getElementById('gbStatus');
            const name = nameEl.value.trim();
            const message = msgEl.value.trim();
            if (!name || !message) return;
            statusEl.textContent = 'sending...';
            try {
                const r = await fetch('/api/guestbook', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ name, message }),
                });
                const d = await r.json();
                if (d.messages) {
                    renderGuestbook(d.messages);
                    msgEl.value = '';
                    statusEl.textContent = 'signed.';
                    setTimeout(() => { if (statusEl.textContent === 'signed.') statusEl.textContent = ''; }, 2000);
                } else {
                    statusEl.textContent = d.error || 'failed to post.';
                }
            } catch (err) {
                statusEl.textContent = 'failed to post.';
            }
        });

        loadGuestbook();
    </script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "b0e8ffb3ea66400995d6e3b218df9900"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>