<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Page</title>
    <link href="/beta.css" rel="stylesheet" type="text/css" media="all">
    <style>
      body {
        background-image: url('https://neurex.neocities.org/CPUX5BjFaff9K9-F6wY4NigEtBjcJs8XqXuJfyfKs4123Z0.png');
      }

      .taskbar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #ffffff;
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(138, 135, 135, 1) 89%, rgba(255, 255, 255, 1) 95%, rgba(122, 122, 122, 1) 100%);
        display: flex;
        justify-content: flex-start;
        padding: 2px;
        height: 35px;
        align-items: center;
        font-size: 14px;
        box-sizing: border-box;
      }

      .start-btn {
        /* The image needs to be positioned absolute */
        position: absolute;
        /* Position it 0 pixels from the bottom edge */
        bottom: 0px;
        /* Position it 0 pixels from the left edge */
        left: 0;
        width: auto;
      }

      /* ===== WINAMP PLAYER STYLES ===== */
      .player-container {
        position: fixed !important; /* Changed to fixed for dragging */
        display: block;
        width: 345px;
        height: 213px;
        margin: 0 !important; /* Remove auto margin */
        overflow: hidden;
        cursor: grab;
        z-index: 1000;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
      }

      .player-container:active {
        cursor: grabbing;
      }

      .player-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        image-rendering: pixelated;
        pointer-events: none; /* Allow clicking through image to the container */
      }

      .song-display {
        position: absolute;
        top: 100px;
        left: 135px;
        width: 140px;
        height: 20px;
        overflow: hidden;
        padding: 2px 4px;
        pointer-events: none; /* Don't interfere with dragging */
      }

      /* Упрощенная анимация прокрутки без сброса */
      @keyframes song-marquee {
        0% {
          transform: translateX(140px);
        }
        100% {
          transform: translateX(-100%);
        }
      }

      /* Анимация смены песен */
      @keyframes song-change-cycle {
        0%, 11.11% {
          content: "Deftones - Headup";
        }
        11.12%, 22.22% {
          content: "Sepultura - Spit";
        }
        22.23%, 33.33% {
          content: "Shuvel - Jump In";
        }
        33.34%, 44.44% {
          content: "The Prodigy - Out of Space";
        }
        44.45%, 55.55% {
          content: "Soulfly - Pain";
        }
        55.56%, 66.66% {
          content: "Limp Bizkit - Stuck";
        }
        66.67%, 77.77% {
          content: "Linkin Park - Crawling";
        }
        77.78%, 88.88% {
          content: "Folder - Left";
        }
        88.89%, 100% {
          content: "Korn - Good God";
        }
      }

      /* Применяем анимации к псевдоэлементу */
      .song-display::before {
        content: "Deftones - Headup";
        position: absolute;
        top: 2px;
        left: 0;
        font-family: 'Bank Gothic Medium', 'Bank Gothic', 'Arial Narrow', Arial, sans-serif;
        font-size: 14px !important;
        color: #d1ffd9 !important;
        text-shadow: 0 0 2px #00ff00, 0 0 3px #00ff00 !important;
        white-space: nowrap;

        /* Две параллельные анимации без сброса */
        animation:
          song-change-cycle 90s steps(1, end) infinite,
          song-marquee 10s linear infinite;
      }
