<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OverlayX</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="dark-theme">
  <div class="container">
    <div class="header">
      <!-- Title Logo (PNG) -->
      <img src="assets/icons/logo.png" alt="OverlayX Logo" class="header-logo">
      <div class="header-buttons">
        <!-- Add Directory Button -->
        <button id="addDirectory" class="neumorphic-btn" data-tooltip="Add Overlay Directory or Files">
          <!-- ICON: folder-plus -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-plus">
            <path d="M12 10v6"/>
            <path d="M9 13h6"/>
            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/>
          </svg>
        </button>
        <!-- Settings Button -->
        <button id="settingsButton" class="neumorphic-btn" data-tooltip="Open Settings">
          <!-- ICON: settings -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings">
            <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
            <circle cx="12" cy="12" r="3"/>
          </svg>
        </button>
      </div>
    </div>
    <div class="search-bar">
      <input type="text" id="searchInput" placeholder="Search overlays..." class="neumorphic-input">
    </div>
    <div class="filter-bar">
      <button class="filter-btn active" data-filter="all" data-tooltip="Show all overlays">
        <!-- ICON: layers -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-layers">
          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
        </svg> All
      </button>
      <button class="filter-btn" data-filter="image" data-tooltip="Show image overlays">
        <!-- ICON: image -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image">
          <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
          <circle cx="9" cy="9" r="2"/>
          <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
        </svg> Images
      </button>
      <button class="filter-btn" data-filter="video" data-tooltip="Show video overlays">
        <!-- ICON: video -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-video">
          <path d="m22 8-6 4 6 4V8Z"/>
          <rect width="14" height="12" x="2" y="6" rx="2" ry="2"/>
        </svg> Videos
      </button>
      <button class="filter-btn" data-filter="other" data-tooltip="Show other overlays">
        <!-- ICON: file -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file">
          <path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/>
          <polyline points="14 2 14 8 20 8"/>
        </svg> Others
      </button>
    </div>
    <div id="directoryList" class="directory-list"></div>
  </div>

  <!-- Audio Player -->
  <audio id="audioPlayer" controls style="display: none;">
    <source id="audioSource" src="" type="audio/mpeg">
    Your browser does not support the audio element.
  </audio>

  <!-- Custom Confirmation Modal -->
  <div id="customConfirmModal" class="custom-modal">
    <div class="custom-modal-content">
      <h2>Delete Directory</h2>
      <p>Are you sure you want to delete this directory?</p>
      <div class="custom-modal-buttons">
        <button id="confirmDelete" data-tooltip="Confirm deletion">
          <!-- ICON: check -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check">
            <path d="M20 6 9 17l-5-5"/>
          </svg> OK
        </button>
        <button id="cancelDelete" data-tooltip="Cancel deletion">
          <!-- ICON: x -->
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x">
            <path d="M18 6 6 18"/>
            <path d="m6 6 12 12"/>
          </svg> Cancel
        </button>
      </div>
    </div>
  </div>

  <!-- Settings Modal -->
  <div id="settingsModal" class="custom-modal">
    <div class="custom-modal-content">
      <h2 id="settingsTitle">Settings</h2>
      <div class="settings-section">
        <label id="themeLabel">Theme:</label>
        <select id="themeSelect">
          <option value="dark">Dark</option>
          <option value="light">Light</option>
        </select>
      </div>
      <div class="settings-section">
        <label id="languageLabel">Language:</label>
        <select id="languageSelect">
          <option value="en">English</option>
          <option value="ar">Arabic</option>
          <option value="ru">Russian</option>
          <option value="es">Spanish</option>
          <option value="fr">French</option>
          <option value="hi">Hindi</option>
        </select>
      </div>
      <div class="settings-section">
        <h3 id="contactTitle">Contact</h3>
        <div class="contact-links">
          <a href="https://www.tiktok.com/@.ilyxh" target="_blank" id="tiktokLink" data-tooltip="Visit TikTok">
            <!-- ICON: music -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-music">
              <path d="M9 18V5l12-2v13"/>
              <circle cx="6" cy="18" r="3"/>
              <circle cx="18" cy="16" r="3"/>
            </svg> TikTok
          </a>
          <a href="https://www.instagram.com/_iluvxh/" target="_blank" id="instagramLink" data-tooltip="Visit Instagram">
            <!-- ICON: camera -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera">
              <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/>
              <circle cx="12" cy="13" r="3"/>
            </svg> Instagram
          </a>
          <a href="https://discord.gg/J4B2pMJSqJ" target="_blank" id="discordLink" data-tooltip="Join Discord">
            <!-- ICON: message-circle -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-circle">
              <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/>
            </svg> Discord
          </a>
        </div>
      </div>
      <button id="closeSettings" data-tooltip="Close Settings">
        <!-- ICON: x -->
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x">
          <path d="M18 6 6 18"/>
          <path d="m6 6 12 12"/>
        </svg> Close
      </button>
    </div>
  </div>

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