<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iwkms</title>

  <!-- Link para a fonte Poppins -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

  <!-- Link para o Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>

  <!-- TailwindCSS via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>

  <script>
    // Função para copiar o nome de usuário
    function copyToClipboard() {
      const nick = "zjft";
      navigator.clipboard.writeText(nick).then(() => {
        alert("Nick copiado: " + nick);
      }).catch(err => {
        console.error("Erro ao copiar: ", err);
      });
    }
  </script>

  <style>
    body {
      background-color: #000;
      font-family: 'Poppins', sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    .card {
      background-color: #1a1a1a;
      color: #fff;
      padding: 1.5rem;
      border-radius: 1rem;
      text-align: center;
      box-shadow: 0 0 15px rgba(89, 169, 255, 0.5), 0 0 30px rgba(78, 164, 255, 0.3);
      width: 280px;
    }

    .profile-pic {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: 0 auto 1rem;
      object-fit: cover;
    }

    .name {
      font-size: 1.25rem;
      font-weight: bold;
    }

    .description {
      color: #aaa;
      font-size: 0.875rem;
      margin-bottom: 1rem;
    }

    .social-icons {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .social-icons a {
      color: #fff;
      font-size: 1.25rem;
      transition: color 0.3s ease;
    }

    .social-icons a:hover {
      color: #007bff;
    }

    .music-player {
      background-color: #000;
      padding: 0.75rem;
      border-radius: 0.5rem;
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
    }

    .music-player p {
      font-size: 0.875rem;
      margin: 0 0 0.5rem;
    }

    .music-controls {
      display: flex;
      justify-content: center;
      gap: 0.5rem;
    }

    .music-controls button {
      background: none;
      border: none;
      color: #fff;
      font-size: 1.25rem;
      cursor: pointer;
      transition: color 0.3s ease;
    }

    .music-controls button:hover {
      color: #007bff;
    }

    #progress-bar {
      width: 100%;
      margin-top: 0.5rem;
      height: 4px;
      appearance: none;
      background: #444;
      border-radius: 2px;
      outline: none;
    }

    #progress-bar::-webkit-slider-thumb {
      appearance: none;
      width: 10px;
      height: 10px;
      background: #007bff;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="card">
    <img class="profile-pic" src="https://i.pinimg.com/736x/d4/27/d9/d427d9edf0ab0f0cbd9f7e75a29ebdcc.jpg" alt="Profile Picture">
    <h1 class="name">Shiinay</h1>
    <p class="description">Dev & Pentester</p>

    <div class="social-icons">
      <a href="https://www.instagram.com/leeshiinay/"><i class="fab fa-instagram"></i></a>
      <a href="https://x.com/leeshiinay"><i class="fab fa-twitter"></i></a>
      <a href="https://open.spotify.com/user/xovgw3jprptjjw6kdekh1trj4"><i class="fab fa-spotify"></i></a>
      <a href="https://br.pinterest.com/leeshiinay/"><i class="fab fa-pinterest"></i></a>
      <a href="https://t.me/ida32"><i class="fab fa-telegram"></i></a>
      <a href="https://www.last.fm/pt/user/shiinay"><i class="fab fa-lastfm"></i></a>
      <a href="javascript:void(0);" onclick="copyToClipboard()"><i class="fab fa-discord"></i></a>
    </div>

    <div class="music-player">
      <p id="current-song">No track playing</p>
      <div class="music-controls">
        <button id="prev-button"><i class="fas fa-backward"></i></button>
        <button id="play-button"><i class="fas fa-play"></i></button>
        <button id="next-button"><i class="fas fa-forward"></i></button>
      </div>
      <input type="range" id="progress-bar" value="0" max="100">
    </div>
  </div>

  <script>
    // Player de música
    const songs = [
      { title: "Lost", url: "lost.mp3" },
      { title: "Star shopping", url: "star.mp3" },
      { title: "Yugoslavskiy groove", url: "yu.mp3" },
      { title: "Under your spell", url: "under.mp3" },
    ];

    let currentSongIndex = 0;
    const audio = new Audio(songs[currentSongIndex].url);

    const currentSongEl = document.getElementById("current-song");
    const playButton = document.getElementById("play-button");
    const prevButton = document.getElementById("prev-button");
    const nextButton = document.getElementById("next-button");
    const progressBar = document.getElementById("progress-bar");

    const updateSongInfo = () => {
      currentSongEl.textContent = songs[currentSongIndex].title;
      audio.src = songs[currentSongIndex].url;
    };

    playButton.addEventListener("click", () => {
      if (audio.paused) {
        audio.play();
        playButton.innerHTML = '<i class="fas fa-pause"></i>';
      } else {
        audio.pause();
        playButton.innerHTML = '<i class="fas fa-play"></i>';
      }
    });

    prevButton.addEventListener("click", () => {
      currentSongIndex = (currentSongIndex - 1 + songs.length) % songs.length;
      updateSongInfo();
      audio.play();
      playButton.innerHTML = '<i class="fas fa-pause"></i>';
    });

    nextButton.addEventListener("click", () => {
      currentSongIndex = (currentSongIndex + 1) % songs.length;
      updateSongInfo();
      audio.play();
      playButton.innerHTML = '<i class="fas fa-pause"></i>';
    });

    audio.addEventListener("timeupdate", () => {
      progressBar.value = (audio.currentTime / audio.duration) * 100 || 0;
    });

    progressBar.addEventListener("input", () => {
      audio.currentTime = (progressBar.value / 100) * audio.duration;
    });

    audio.addEventListener("ended", () => {
      currentSongIndex = (currentSongIndex + 1) % songs.length;
      updateSongInfo();
      audio.play();
      playButton.innerHTML = '<i class="fas fa-pause"></i>';
    });

    updateSongInfo();
  </script>
</body>
</html>