<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>opel</title>
  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('https://raw.githubusercontent.com/opelzafiri/opelzafiri.github.io/refs/heads/main/assets/c1b17acbff4b8e7a44885b3ab289591d.png') no-repeat center center/cover;
      color: white;
      font-family: Arial, sans-serif;
      height: 100vh;
      overflow: hidden;
      cursor: pointer; /* Change cursor to indicate interaction */
    }
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(30, 30, 47, 0.8);
      border-radius: 50%;
      width: 450px; /* Increased size */
      height: 450px; /* Increased size */
      padding: 20px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      text-align: center;
    }
    img {
      border-radius: 50%;
      width: 120px; /* Adjusted size */
      height: 120px; /* Adjusted size */
      object-fit: cover;
      margin-bottom: 10px;
    }
    .profile-text {
      font-size: 16px;
      font-weight: 400;
      color: #ddd;
      margin-bottom: 15px;
    }
    .seek-allah {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 20px;
    }
    .buttons {
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }
    .buttons a {
      text-decoration: none;
      padding: 5px 10px;
      border-radius: 5px;
      background: #444;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background 0.3s;
    }
    .buttons a:hover {
      background: #555;
    }
    .buttons a i {
      font-size: 16px;
    }
    .audio-player {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #444;
      padding: 10px 15px;
      border-radius: 10px;
      margin-top: 20px;
      width: 80%;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
    .audio-player button {
      background: transparent;
      border: none;
      color: white;
      font-size: 18px;
      cursor: pointer;
      transition: color 0.3s;
    }
    .audio-player button:hover {
      color: #aaa;
    }
    .audio-player input[type="range"] {
      width: 100%;
      margin: 0 10px;
      appearance: none;
      height: 5px;
      background: #666;
      border-radius: 5px;
      outline: none;
      cursor: pointer;
    }
    .audio-player input[type="range"]::-webkit-slider-thumb {
      appearance: none;
      width: 10px;
      height: 10px;
      background: white;
      border-radius: 50%;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- Rounded Frame -->
  <div class="container">
    <!-- Seek Allah Text -->
    <p class="seek-allah">Seek Allah</p>

    <!-- Profile Picture -->
    <img src="https://raw.githubusercontent.com/opelzafiri/opelzafiri.github.io/refs/heads/main/assets/pfp.png" alt="Profile Picture">

    <!-- Profile Text -->
    <p class="profile-text">Opelzafiri</p>

    <!-- Buttons -->
    <div class="buttons">
      <a href="https://Opelzafiri.github.io/search" target="_blank">
        <i class="fas fa-globe"></i> artarrangement search
      </a>
      <a href="https://discord.gg/Nalgini" target="_blank">
        <i class="fab fa-discord"></i> Discord
      </a>
      <a href="https://github.com/Opelzafiri" target="_blank">
        <i class="fab fa-github"></i> GitHub
      </a>
    </div>

    <!-- Custom Audio Player -->
    <div class="audio-player">
      <button id="play-pause"><i class="fas fa-play"></i></button>
      <input id="seekbar" type="range" min="0" max="100" value="25"> <!-- Starts at 25% -->
      <button id="volume"><i class="fas fa-volume-up"></i></button>
    </div>
  </div>

  <script>
    const audio = new Audio('https://github.com/opelzafiri/opelzafiri.github.io/raw/refs/heads/main/assets/song.mp3');
    const playPauseBtn = document.getElementById('play-pause');
    const seekbar = document.getElementById('seekbar');
    const volumeBtn = document.getElementById('volume');

    let isPlaying = false;
    let hasClicked = false; // Flag to track first click

    // Set the volume to 25% (0.25) initially
    audio.volume = 0.25;

    // Play audio when clicking anywhere on the page for the first time
    document.body.addEventListener('click', () => {
      if (!hasClicked) {
        audio.play();
        playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
        isPlaying = true;
        hasClicked = true; // Set flag to true after the first click
      }
    });

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

    audio.addEventListener('timeupdate', () => {
      seekbar.value = (audio.currentTime / audio.duration) * 100;
    });

    seekbar.addEventListener('input', (e) => {
      audio.currentTime = (e.target.value / 100) * audio.duration;
    });

    volumeBtn.addEventListener('click', () => {
      if (audio.muted) {
        audio.muted = false;
        volumeBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
      } else {
        audio.muted = true;
        volumeBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
      }
    });
  </script>
</body>
</html>
