mendix-role-inspector/popup.html at main · lightningcell/mendix-role-inspector · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title data-i18n="roleInspector">Role Inspector</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>
        <img src="icons/icon32.png" alt="Role Inspector" class="logo">
        <span data-i18n="roleInspector">Role Inspector</span>
      </h1>
      <div class="language-selector">
        <select id="language-select" title="Language / Dil">
          <option value="en">English</option>
          <option value="tr">Türkçe</option>
        </select>
      </div>
    </header>

    <main>
      <div id="loading" class="loading">
        <div class="spinner"></div>
        <p data-i18n="checkingRoleInfo">Checking role information...</p>
      </div>

      <div id="error" class="error hidden">
        <div class="error-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon-large error-svg"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
        </div>
        <p id="error-message"></p>
      </div>

      <div id="mendix-info" class="hidden">
        <div class="roles-section">
          <h3 class="section-title">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="icon-medium"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
            <span data-i18n="userRoles">User Roles</span>
          </h3>
          <div class="search-container">
            <input type="text" id="role-search" data-i18n-placeholder="searchRole" placeholder="Search roles..." />
            <div class="search-icon">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon-small"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
            </div>
          </div>
          <div id="roles-container">

          </div>
        </div>
      </div>
    </main>

    <footer>
      <button id="refresh-btn" class="refresh-btn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="icon-small"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M463.5 224H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1c-87.5 87.5-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5z"/></svg>
        <span data-i18n="refresh">Refresh</span>
      </button>
      <div class="developer-credit">
        Developed by <a href="https://www.linkedin.com/in/hamitlightning/" target="_blank" rel="noopener noreferrer">Hamit Şimşek</a>
      </div>
    </footer>
  </div>

  <script src="language-manager.js"></script>
  <script src="i18n.js"></script>
  <script src="popup.js"></script>
</body>
</html>