<!--

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⣠⣴⣶⣿⣷⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⡿⣿⢿⣶⣄⣴⣿⠟⠋⠁⠀⠈⢿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⣠⣾⣿⢳⡽⣎⡟⣾⣻⣯⠀⠀⠀⠀⠀⠀⠈⣿⣇⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢠⣶⣿⡿⢿⣿⣶⣶⣦⣤⣠⣤⣶⣾⣿⠿⠿⠟⢻⡿⣧⢟⣳⣿⣾⣷⣿⣿⡿⣷⣶⣄⣤⣶⣿⢿⡿⣿⣦⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣾⡟⠀⠀⠀⠀⠀⠈⠉⠛⠛⠋⠁⠀⠀⠀⠀⠀⣿⡿⣵⣫⢿⣿⢧⣿⣟⡳⣟⣧⣛⣿⣿⣿⣼⢏⣾⢳⣿⡆⠀⠀⠀⠀⠀
⠀⠀⠀⢸⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⣟⣶⢫⣟⣻⣿⣿⣯⢳⣛⡶⣛⣾⣿⣟⣿⡿⣎⣯⣿⠇⠀⠀⠀⠀⠀
⠀⠀⠀⠘⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⣼⡿⣼⣣⣿⣿⣿⣟⣿⣣⣿⣿⣿⣿⣿⢿⣸⣻⡿⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢿⣧⣠⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠙⠛⠛⠋⠉⠀⠀⠙⠛⠛⠉⢿⣾⣳⢭⣯⣷⣿⣧⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠈⣿⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠛⠛⠉⠀⢻⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢠⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣼⣿⡷⠶⠿⠛⠓
⠀⠀⠀⠀⣼⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠙⠉⠉⣿⡇⠀⠀⠀⠀
⠀⠀⠀⠀⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢺⣿⣿⡆⠀⠀⠀⠀⢠⣤⣿⣷⣤⣦⣤⡄
⠀⠀⠀⠀⢿⣧⠀⢀⡀⠀⠀⠀⠀⢠⣴⣤⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢿⡿⠁⠀⠀⠀⠀⠀⢁⣿⡇⠀⠀⠀⠀
⢠⣴⣶⡾⢿⣿⡟⠛⠛⠀⠀⠀⠀⣿⣿⣿⠆⠀⠀⠀⠀⠀⠀⢠⣴⣶⣶⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣤⣼⣿⣀⡀⠀⠀⠀
⠈⠁⠀⠀⠀⢻⣧⡀⢀⡀⠀⠀⠀⠈⠉⠉⠀⠀⠀⠀⠀⠀⠀⢻⣧⣮⣼⠿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣼⡿⠋⠙⠛⡿⠷⠀
⠀⠀⠀⢀⣤⣶⢿⣿⡋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⣶⢿⣿⣤⣀⡀⠀⠀⠀⠀
⠀⠀⠀⠙⠋⠀⠀⠙⢿⣦⣴⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣾⡿⠁⠀⠈⠉⠙⢿⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢀⣴⡿⠛⠿⣿⣶⣤⣄⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣤⣤⣴⣾⡿⠿⠛⠉⢿⣧⠀⠀⠀⠀⠀⠈⣿⡇⠀⠀
⠀⠀⠀⠀⠀⠰⠟⠋⠀⠀⠀⢀⣬⣽⣿⣿⣿⣿⣿⣿⣾⡾⢿⠿⠿⠿⠟⠛⠛⣿⡿⢯⢿⣿⣄⠀⠀⠈⢻⣷⡄⠀⠀⠀⣸⣿⠁⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣀⣤⣤⣾⣟⠋⠁⣠⣿⣿⡹⡽⣿⣇⠀⠀⠀⠀⠀⠀⠀⣸⣿⣻⢽⡺⣟⣿⣆⠀⠀⠀⠻⣿⣄⣠⣾⠟⠁⠀⠀⠀
⠀⠀⠀⠀⠀⢠⣾⠟⠉⠉⠘⢿⣷⣰⣿⣿⣼⣷⣟⣾⣻⣷⣤⣤⣀⣤⣤⣾⣿⢏⣷⣯⣷⣭⣿⣿⣧⣠⣤⣶⡿⠟⠋⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢈⣿⠇⠀⠀⠀⣠⣿⠿⠛⠉⠉⠉⠛⢿⣷⡽⣏⣿⣛⣯⢿⣹⣺⣿⠿⠛⠉⠉⠉⠙⠻⣿⣏⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢸⣿⠀⠀⠀⣾⡟⠁⠀⠀⠀⠀⠀⠀⠀⠙⣿⣯⣶⢻⣼⢳⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠈⢻⣷⡄⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⢻⣷⣄⣸⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⣿⣞⣳⡽⣺⣿⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣧⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⠛⣿⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⣷⢻⣜⢿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣿⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⢯⣻⢼⣻⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⠇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢿⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⡿⣏⡾⣭⠷⣿⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣼⡿⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⣧⡀⠀⠀⠀⠀⠀⠀⣠⣿⣿⣷⣿⣿⣿⣿⣾⣿⣿⣄⡀⠀⠀⠀⠀⠀⣠⣾⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣶⣤⣤⣤⣶⡿⠟⠋⠉⠁⠀⠀⠀⠀⠉⠉⠙⠻⠿⣷⣶⣤⣶⡾⠟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>ｊａｉｌ．ｒｉｐ</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" type="image/png" href="./icon.png" />
</head>
<body>
  <audio id="bgMusic" src="./blue-eyes.mp3" preload="auto" loop></audio>
  <audio id="fbNotifSound" src="./fb-noti.mp3" preload="auto"></audio>

  <div class="desktop">
    <div class="desktop-icons">
      <button class="desktop-icon" data-target="bioWindow">
        <div class="desktop-icon-img" style="background-image:url('./computer.png');"></div>
        <span class="desktop-icon-label">user profile</span>
      </button>

      <button class="desktop-icon" data-target="ytWindow">
        <div class="desktop-icon-img" style="background-image:url('./internet.png');"></div>
        <span class="desktop-icon-label">Dantube</span>
      </button>

      <button class="desktop-icon" data-target="fbWindow">
        <div class="desktop-icon-img" style="background-image:url('./internet.png');"></div>
        <span class="desktop-icon-label">Jailbook</span>
      </button>

      <button class="desktop-icon" data-target="tipWindow">
        <div class="desktop-icon-img" style="background-image:url('./bin.png');"></div>
        <span class="desktop-icon-label">Notepad</span>
      </button>
    </div>

    <div class="tip-window" id="tipWindow" style="display:none;">
      <div class="tip-titlebar" id="tipTitlebar">
        <div class="tip-icon"></div>
        <div class="tip-title-text">Untitled - Notepad</div>
        <button class="tip-close-btn" id="tipCloseBtn">×</button>
      </div>
      <div class="tip-body">
        <div class="tip-menu-bar">
          <span class="tip-menu-item" data-tip-menu="file">File</span>
          <span class="tip-menu-item" data-tip-menu="edit">Edit</span>
          <span class="tip-menu-item" data-tip-menu="format">Format</span>
          <span class="tip-menu-item" data-tip-menu="view">View</span>
          <span class="tip-menu-item" data-tip-menu="help">Help</span>
        </div>
        <div class="tip-notepad" id="tipNotepad" contenteditable="true"></div>
        <div class="tip-statusbar" id="tipStatusbar">
          <span class="tip-status-left">Ln 1, Col 1</span>
          <span class="tip-status-right">Press Ctrl+S to “save”</span>
        </div>
      </div>
    </div>

    <div class="bio-window" id="bioWindow">
      <div class="bio-titlebar">
        <div class="title-icon"></div>
        <div class="bio-titlebar-text">user profile</div>
        <div class="window-buttons">
          <div class="win-btn">_</div>
          <div class="win-btn">□</div>
          <div class="win-btn close" id="closeBtn">X</div>
        </div>
      </div>

      <div class="menu-bar">
        <div class="menu-item">File</div>
        <div class="menu-item">Edit</div>
        <div class="menu-item">View</div>
        <div class="menu-item">Tools</div>
        <div class="menu-item">Help</div>
      </div>

      <div class="bio-inner">
        <div class="profile">
          <div class="pfp-wrap">
            <img class="pfp" src="./pfp.png" alt="pfp" />
            <div class="pfp-overlay"></div>
          </div>
          <div class="profile-main">
            <div class="name">danny</div>
            <div class="tagline">
              he/him • placeholder • <span>placeholder</span>
            </div>
            <div class="status-chip">
              <div class="led"></div>
              blue eyes - echo2k
            </div>
            <div class="mini-eq">
              <div class="mini-bar"></div>
              <div class="mini-bar"></div>
              <div class="mini-bar"></div>
              <div class="mini-bar"></div>
            </div>
          </div>
        </div>

        <hr />

        <div class="tabs">
          <button class="tab-btn active" data-tab="about">about</button>
          <button class="tab-btn" data-tab="links">links</button>
          <button class="tab-btn" data-tab="contact">contact</button>
        </div>

        <div class="tab-panels">
          <div class="tab-panel active" id="tab-about">
            <div class="bio-text">
              <p>I do not want followers who are righteous, rather I want followers who are too busy doing good that they won’t have time to do bad.</p>
              <p>
                i build <span>little sites</span>, placeholder
              </p>
              <p>placeholder</p>
            </div>
            <div class="scroll-hint">scroll if it glitches off screen ▌</div>
          </div>

          <div class="tab-panel" id="tab-links">
            <div class="links-list">
              <div class="link-item">
                <div class="link-icon"></div>
                <div class="link-label">main discord</div>
                <a class="link-btn" href="https://discord.gg/" target="_blank">join</a>
              </div>

              <div class="link-item">
                <div class="link-icon"></div>
                <div class="link-label">telegram – no shady shit</div>
                <a class="link-btn" href="https://t.me/" target="_blank">msg</a>
              </div>

              <div class="link-item">
                <div class="link-icon"></div>
                <div class="link-label">instagram – probably private</div>
                <a class="link-btn" href="https://instagram.com/vegs/" target="_blank">stalk</a>
              </div>

              <div class="link-item">
                <div class="link-icon"></div>
                <div class="link-label">spotify / playlists</div>
                <a
                  class="link-btn"
                  href="https://open.spotify.com/user/31l4t2cxyvyzsm75dnfui52mrcky"
                  target="_blank"
                >follow</a>
              </div>
            </div>
            <div class="scroll-hint">add / remove links in the html ▌</div>
          </div>

          <div class="tab-panel" id="tab-contact">
            <div class="contact-grid">
              <div>
                <div class="field-label">your name</div>
                <div class="fake-input" contenteditable="true">anonymous</div>

                <div class="field-label" style="margin-top: 6px;">
                  where you found me
                </div>
                <div class="fake-input" contenteditable="true">
                  discord / youtube / somewhere weird
                </div>
              </div>
              <div>
                <div class="field-label">message</div>
                <div class="fake-textarea" contenteditable="true">type anything here…</div>
              </div>
            </div>
            <div class="send-row">
              <div class="contact-note">
                actual email:
                <span class="email-link">dan@rich.st</span>
              </div>
              <button class="send-btn" id="fakeSendBtn">send</button>
            </div>
            <div class="scroll-hint">
              this form is aesthetic only, email me for real ▌
            </div>
          </div>
        </div>

        <div class="bottom-strip">
          <div>
            status:
            <span class="highlight">
              probably idle, i never shut down my macbook
            </span>
          </div>
          <div class="tiny-leds">
            <div class="tiny-dot on"></div>
            <div class="tiny-dot"></div>
            <div class="tiny-dot"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="yt-window" id="ytWindow">
      <div class="yt-titlebar" id="ytTitlebar">
        <div class="yt-title-left">
          <div class="yt-favicon"></div>
          <div class="yt-title-text">
            dantube - 2010 ui + playlist
          </div>
        </div>
        <div class="yt-window-buttons">
          <div class="win-btn" id="ytFakeMin">_</div>
          <div class="win-btn" id="ytMaxBtn">□</div>
          <div class="win-btn close" id="ytCloseBtn">X</div>
        </div>
      </div>

      <div class="yt-chrome">
        <div class="yt-chrome-btns">
          <div class="chrome-dot red"></div>
          <div class="chrome-dot yellow"></div>
          <div class="chrome-dot green"></div>
        </div>
        <div class="yt-address-bar">
          <div class="yt-lock-icon"></div>
          <div class="yt-address-text" id="ytAddressText">
            http://www.youtube.com/watch?v=...
          </div>
        </div>
      </div>

      <div class="yt-inner">
        <div class="yt-header">
          <div class="yt-logo">
            dan<span>tube</span>
          </div>
          <div class="yt-search">
            <input type="text" value="furry porn" />
            <button type="button">Search</button>
          </div>
        </div>

        <div class="yt-main">
          <div class="yt-main-left">
            <div class="yt-player-frame" id="ytPlayerFrame">
              <iframe
                id="ytPlayer"
                src=""
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowfullscreen
              ></iframe>
            </div>
            <div class="yt-video-meta">
              <div class="yt-video-title" id="ytVideoTitle">
                loading video…
              </div>

              <div class="yt-channel-row">
                <div class="yt-channel-info">
                  <div class="yt-channel-avatar">
                    <img
                      id="ytChannelAvatar"
                      src="./yt.png"
                      alt="channel avatar"
                    />
                  </div>
                  <div class="yt-channel-text">
                    <div class="yt-channel-name" id="ytChannelName">
                      unknown channel
                    </div>
                    <div class="yt-channel-tagline">67 subscribers</div>
                  </div>
                </div>
                <button class="yt-sub-btn" type="button">Subscribe</button>
              </div>
            </div>
          </div>

          <div class="yt-sidebar">
            <div class="yt-side-heading">Related videos</div>
            <div class="yt-sidebar-list" id="ytSidebarList"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="fb-window" id="fbWindow">
      <div class="fb-titlebar" id="fbTitlebar">
        <div class="fb-title-left">
          <div class="fb-favicon"></div>
          <div class="fb-title-text">jailbook - profile of danny</div>
        </div>
        <div class="fb-window-buttons">
          <div class="win-btn" id="fbMinBtn">_</div>
          <div class="win-btn close" id="fbCloseBtn">X</div>
        </div>
      </div>

      <div class="fb-header">
        <div class="fb-logo">jailbook</div>
        <div class="fb-search">
          <input type="text" value="search friends" />
          <button type="button">Search</button>
        </div>
        <div class="fb-header-links">
          <span>Home</span>
          <span>Profile</span>
          <span id="fbNavMessages" class="fb-nav-messages">
            Messages
            <span class="fb-badge" id="fbMessagesBadge">1</span>
          </span>
          <span>Logout</span>
        </div>
      </div>

      <div class="fb-main">
        <div class="fb-left">
          <div class="fb-user-card">
            <div class="fb-user-pic">
              <img src="./pfp.png" alt="danny" />
            </div>
            <div class="fb-user-name">danny</div>
            <div class="fb-user-links">
              <div>Wall</div>
              <div>Info</div>
              <div>Photos</div>
              <div>Friends</div>
            </div>
          </div>

          <div class="fb-left-nav">
            <div class="fb-left-title">Shortcuts</div>
            <ul>
              <li>News Feed</li>
              <li>Messages</li>
              <li>Events</li>
              <li>Groups</li>
            </ul>
          </div>
        </div>

        <div class="fb-feed">
          <div class="fb-composer">
            <div class="fb-composer-title">What's on your mind, danny?</div>
            <textarea id="fbComposerInput" rows="2"></textarea>
            <div class="fb-composer-actions">
              <button id="fbPostBtn" type="button">Post</button>
            </div>
          </div>

          <div class="fb-feed-list" id="fbFeedList">
            <div class="fb-post">
              <div class="fb-post-header">
                <img class="fb-post-avatar" src="./pfp.png" alt="danny" />
                <div>
                  <div class="fb-post-author">danny</div>
                  <div class="fb-post-meta">2 hrs ago · <span class="fb-post-privacy">Friends</span></div>
                </div>
              </div>
              <div class="fb-post-body">
                testing this old facebook tl thing. if ur seeing this, ur too close.
              </div>
            </div>

            <div class="fb-post">
              <div class="fb-post-header">
                <img class="fb-post-avatar" src="./pfp.png" alt="danny" />
                <div>
                  <div class="fb-post-author">danny</div>
                  <div class="fb-post-meta">yesterday · <span class="fb-post-privacy">Friends</span></div>
                </div>
              </div>
              <div class="fb-post-body">
                mails go to danny@rich.st
              </div>
            </div>

            <div class="fb-post">
              <div class="fb-post-header">
                <img class="fb-post-avatar" src="./pfp.png" alt="danny" />
                <div>
                  <div class="fb-post-author">danny</div>
                  <div class="fb-post-meta">yesterday · <span class="fb-post-privacy">Friends</span></div>
                </div>
              </div>
              <div class="fb-post-body">
                if im not for myself, who will be? and when im for myself, what am i? and if not now, then when?
              </div>
            </div>

            <div class="fb-post">
              <div class="fb-post-header">
                <img class="fb-post-avatar" src="./pfp.png" alt="danny" />
                <div>
                  <div class="fb-post-author">danny</div>
                  <div class="fb-post-meta">yesterday · <span class="fb-post-privacy">Friends</span></div>
                </div>
              </div>
              <div class="fb-post-body">
                this site is under construction, i will add more to ts soon..
              </div>
            </div>

            <div class="fb-post">
              <div class="fb-post-header">
                <img class="fb-post-avatar" src="./pfp.png" alt="danny" />
                <div>
                  <div class="fb-post-author">danny</div>
                  <div class="fb-post-meta">yesterday · <span class="fb-post-privacy">Friends</span></div>
                </div>
              </div>
              <div class="fb-post-body">
                deleted my real facebook years ago, this one is trapped in 2010 on purpose.
              </div>
            </div>
          </div>
        </div>

        <div class="fb-right">
          <div class="fb-right-block">
            <div class="fb-right-title">People you may know</div>
            <div class="fb-right-user">
              <div class="fb-right-avatar">
                <img src="./friend1.png" />
              </div>
              <div>
                <div class="fb-right-name">akshit</div>
                <div class="fb-right-meta">12 mutual friends</div>
              </div>
            </div>
            <div class="fb-right-user">
              <div class="fb-right-avatar">
                <img src="./sarah.png" />
              </div>
              <div>
                <div class="fb-right-name">sarah</div>
                <div class="fb-right-meta">5 mutual friends</div>
              </div>
            </div>
          </div>

          <div class="fb-right-block">
            <div class="fb-right-title">Sponsored</div>
            <p>ads blocked. good for you.</p>
          </div>
        </div>
      </div>

      <div class="fb-messages-panel" id="fbMessagesPanel">
        <div class="fb-messages-header">
          <div class="fb-messages-title">
            <img id="fbCharlieAvatar" src="./kirk.png" alt="charlie kirk" />
            <span>Charlie Kirk</span>
          </div>
          <button class="fb-messages-close" id="fbMessagesCloseBtn">×</button>
        </div>
        <div class="fb-messages-body">
          <div class="fb-message-row incoming">
            <div class="fb-message-bubble">
              <div
                id="fbMessageText"
                data-full-text="We are Charlie Kirk, we carry the flame
                We’ll fight for the Gospel, we’ll honor his name
                We are Charlie Kirk, his courage our own
                Together unbroken, we’ll make Heaven known"
              >
PLACEHOLDER: edit this Charlie Kirk message text in the HTML.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="taskbar">
    <button class="start-btn" id="startBtn">
      <span class="logo"></span>
      <span>start</span>
    </button>

    <div class="task-label active" id="bioTaskBtn">
      user profile
    </div>

    <button class="task-item" id="tipTaskBtn">
      notepad
    </button>

    <button class="task-item" id="ytTaskBtn">
      dantube
    </button>

    <button class="task-item" id="fbTaskBtn">
      jailbook
    </button>

    <div class="task-clock" id="taskClock">12:00 AM</div>
  </div>

  <div class="mobile-notice">
    view on desktop for more features.
  </div>

  <div class="fb-toast" id="fbToast">
    new message from <strong>charlie kirk</strong>
  </div>

  <div class="start-menu" id="startMenu">
    <div class="start-menu-shell">
      <div class="start-menu-top">
        <div class="start-menu-userpic">
          <img src="./pfp.png" alt="danny" />
        </div>
        <div class="start-menu-username">danny</div>
      </div>

      <div class="start-menu-columns">
        <div class="start-menu-left">
          <a href="/" class="start-program-item">
            <span class="start-program-icon icon-internet"></span>
            <span class="start-program-text">
              <span class="prog-name">internet</span>
              <span class="prog-desc">jail.rip homepage</span>
            </span>
          </a>

          <a href="/mail" class="start-program-item">
            <span class="start-program-icon icon-email"></span>
            <span class="start-program-text">
              <span class="prog-name">e-mail</span>
              <span class="prog-desc">dan@rich.st</span>
            </span>
          </a>

          <a href="/life" class="start-program-item">
            <span class="start-program-icon icon-notepad"></span>
            <span class="start-program-text">
              <span class="prog-name">life</span>
              <span class="prog-desc">about life...</span>
            </span>
          </a>

          <a href="/map" class="start-program-item">
            <span class="start-program-icon icon-folder"></span>
            <span class="start-program-text">
              <span class="prog-name">site map</span>
              <span class="prog-desc">pages + routes</span>
            </span>
          </a>

          <div class="start-program-separator"></div>

          <div class="start-program-all">
            <span class="all-programs-text">all programs</span>
            <span class="all-programs-arrow">▶</span>
          </div>
        </div>

        <div class="start-menu-right">
          <a href="/url" class="start-right-item">
            <span class="right-icon right-docs"></span>
            domains list
          </a>
          <a href="/404" class="start-right-item">
            <span class="right-icon right-recents"></span>
            error page
          </a>
          <a href="/nohello" class="start-right-item">
            <span class="right-icon right-pictures"></span>
            nohello
          </a>
          <a href="/tools" class="start-right-item">
            <span class="right-icon right-music"></span>
            random tools
          </a>
          <a href="https://instagram.com/vegs" class="start-right-item">
            <span class="right-icon right-computer"></span>
            instagram
          </a>

          <div class="start-right-separator"></div>

          <a href="/tos" class="start-right-item">
            <span class="right-icon right-control"></span>
            control panel
          </a>
          <a href="/404" class="start-right-item">
            <span class="right-icon right-help"></span>
            help and support
          </a>
          <a href="/404" class="start-right-item">
            <span class="right-icon right-search"></span>
            search
          </a>
          <a href="/404" class="start-right-item">
            <span class="right-icon right-run"></span>
            run...
          </a>
        </div>
      </div>

      <div class="start-menu-bottom">
        <a href="/" class="start-bottom-btn logoff">log off danny...</a>
        <a href="/" class="start-bottom-btn shutdown">turn off computer</a>
      </div>
    </div>
  </div>

  <script src="script.js" defer></script>

<script async id="netlify-rum-container" src="/.netlify/scripts/rum" data-netlify-rum-site-id="dae90fe6-627c-4e14-9573-c7860d5a061c" data-netlify-deploy-branch="" data-netlify-deploy-context="production" data-netlify-cwv-token="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzaXRlX2lkIjoiZGFlOTBmZTYtNjI3Yy00ZTE0LTk1NzMtYzc4NjBkNWEwNjFjIiwiYWNjb3VudF9pZCI6IjY5MWZjNWM3ZTYxYjYxOWRhODdlNDFhZCIsImRlcGxveV9pZCI6IjY5NWVmOGE1NTVlMGI0NmQ1ZTdkMGNmMSIsImlzc3VlciI6Im5mc2VydmVyIn0.K6CynbFSDs7ryLFm1A1nJ7XKAws0BU9whTWCOB8OkOc"></script></body>
</html>