<!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" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings-2"><path d="M20 7h-9"/><path d="M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" 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" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minimize-2"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" x2="21" y1="10" y2="3"/><line x1="3" x2="10" y1="21" y2="14"/></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: TT -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-music-2"><circle cx="8" cy="18" r="4"/><path d="M12 18V2l7 4"/></svg> TikTok
          </a>
          <a href="https://www.instagram.com/_iluvxh/" target="_blank" id="instagramLink" data-tooltip="Visit Instagram">
            <!-- ICON: IG -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-instagram"><rect width="20" height="20" x="2" y="2" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"/></svg> Instagram
          </a>
          <a href="https://itsxh.art" target="_blank" id="discordLink" data-tooltip="Join Discord">
            <!-- ICON: Store -->
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-store"><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"/></svg> Store
          </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" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minimize-2"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" x2="21" y1="10" y2="3"/><line x1="3" x2="10" y1="21" y2="14"/></svg> Close
      </button>
    </div>
  </div>

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