<html>
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Extension | Groupy</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="./groupy-extension.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
  <header class="sticky-top">
    <div class="container d-flex align-items-center justify-content-between">
      <img src="./logo.png" width="30%" />
      <div class="search-container">
        <i class="fa fa-search search-icon" id="searchIcon"></i>
        <input type="text" id="appSearch" class="form-control" autocomplete="off" placeholder="Connecting..." disabled/>
      </div>
    </div>

    <div class="category-filters">
      <button class="btn btn-outline-light category-filter active" data-category="all" id="all-category" disabled>
        📁 All
      </button>
      <button class="btn btn-outline-light category-filter" data-category="design" id="design-category" disabled>
        🎨 Design
      </button>
      <button class="btn btn-outline-light category-filter" data-category="music" id="music-category" disabled>
        🎵 Music & Sound
      </button>
      <button class="btn btn-outline-light category-filter" data-category="education" id="education-category" disabled>
        🎓 Education
      </button>
      <button class="btn btn-outline-light category-filter" data-category="streaming" id="streaming-category" disabled>
        📺 Streaming Services
      </button>
      <button class="btn btn-outline-light category-filter" data-category="productivity" id="productivity-category" disabled>
        💡 Productivity
      </button>
      <button class="btn btn-outline-light category-filter" data-category="utilities" id="utilities-category" disabled>
        🔧 Utilities
      </button>
    </div>
  </header>

<body>
    <div class="card text-center card-body gpy">
        <div id="loading" class="full-page-container fadeIn">
          <div class="bouncing-loader">
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
        <div id="loaded" class="mt-4 row menu d-none fadeIn">
        </div>
        <div id="outdated" class="full-page-container fadeIn d-none">
          <p>Extension version is outdated. Please update to the latest version.</p>
        </div>
        <div id="unusual" class="full-page-container fadeIn d-none">
          <p>Unusual activity detected from your system.</p>
        </div>
    </div>
    <div class="py-2 card-footer">
      <div class="icon-container">
        <i id="safeLogout" class="fas fa-right-from-bracket icon"></i>
        <i id="refreshButton" class="fas fa-sync-alt icon"></i>
      </div>
      <span class="text-white footer-text" id="footer">Groupy &copy; 2023-2024</span>
    </div>
  <script src="./jquery-3.7.1.min.js"></script>
  <script src="./groupy-extension.js"></script>
</body>
</html>