<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta charset="UTF-8" />
    <title>HandsFree</title>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils"></script>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <!-- Modern Dropdown for Camera Selection -->
    <select id="cameraSelect">
      <option value="" disabled selected>Select Camera</option>
    </select>

    <!-- Video Display and Canvas for Mediapipe -->
    <video id="video" autoplay playsinline></video>
    <canvas id="output"></canvas>

    <!-- Circular Play/Pause Button -->
    <div class="play-btn" id="playButton" onclick="toggleAudio()">
      <!-- Play Icon -->
      <svg
        id="playIcon"
        xmlns="http://www.w3.org/2000/svg"
        class="ionicon"
        viewBox="0 0 512 512"
      >
        <path
          d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
          fill="none"
          stroke="white"
          stroke-miterlimit="10"
          stroke-width="32"
        />
        <path
          d="M216.32 334.44l114.45-69.14a10.89 10.89 0 000-18.6l-114.45-69.14a10.78 10.78 0 00-16.32 9.31v138.26a10.78 10.78 0 0016.32 9.31z"
          fill="white"
        />
      </svg>

      <!-- Pause Icon (Hidden by Default) -->
      <svg
        id="pauseIcon"
        xmlns="http://www.w3.org/2000/svg"
        class="ionicon"
        viewBox="0 0 512 512"
        style="display: none"
      >
        <path
          d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z"
          fill="none"
          stroke="white"
          stroke-miterlimit="10"
          stroke-width="32"
        />
        <path
          fill="white"
          stroke="white"
          stroke-linecap="round"
          stroke-miterlimit="10"
          stroke-width="32"
          d="M208 192v128M304 192v128"
        />
      </svg>
    </div>

    <audio
      id="audioPlayer"
      src="https://flyhigh.inglesuniversal.com/api/php-curl-class/shoutcast.php?url=http://142.44.163.163:8002/stream"
      preload="auto"
    ></audio>

    <script src="js/script.js"></script>
  </body>
</html>
