MaskIt/popup.html at main · UnarchiveTech/MaskIt · 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
  <title>MaskIt</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <header class="app-header">
    <div class="logo-container">
      <h1 class="app-title">MaskIt</h1>
    </div>
    <div class="app-subtitle">Blur, Replace, or Hide Social Media Names</div>
  </header>

  <div class="platform-tabs">
    <button class="platform-tab-button active" data-tab="instagram">
      <i class="fab fa-instagram"></i> Instagram
    </button>
    <button class="platform-tab-button" data-tab="twitter">
      <i class="fab fa-twitter"></i> X/Twitter
    </button>
    <button class="platform-tab-button" data-tab="linkedin">
      <i class="fab fa-linkedin"></i> LinkedIn
    </button>
    <button class="platform-tab-button" data-tab="global">
      <i class="fas fa-globe"></i> Global
    </button>
  </div>

  <div class="content-area">
    <!-- Container for platform-specific settings (IG, Twitter, LinkedIn) -->
    <div id="platform-settings" class="platform-content active">
      <div class="profile-info-group" id="username-section">
          <div class="profile-info">
            <div class="info-container">
              <span class="label"><i class="fas fa-at"></i> Username:</span>
              <span class="value" id="username-display">Loading...</span>
            </div>
            <label class="toggle-switch" title="Toggle username masking">
              <input type="checkbox" id="username-blur">
              <span class="slider"></span>
            </label>
          </div>
          <div class="profile-option">
              <div class="option-modes">
                  <label class="radio-label"><input type="radio" name="username-mode" value="blur" checked> <i class="fas fa-eye-slash"></i> Blur</label>
                  <label class="radio-label"><input type="radio" name="username-mode" value="replace"> <i class="fas fa-exchange-alt"></i> Replace</label>
              </div>
              <div class="replace-input-container" id="username-replace-container">
                  <input type="text" id="username-replace-text" class="replace-input" placeholder="e.g., [username]">
              </div>
          </div>
      </div>

      <div class="profile-info-group" id="fullname-section">
          <div class="profile-info">
            <div class="info-container">
              <span class="label"><i class="fas fa-user"></i> Full Name:</span>
              <span class="value" id="fullname-display">Loading...</span>
            </div>
            <label class="toggle-switch" title="Toggle full name masking">
              <input type="checkbox" id="fullname-blur">
              <span class="slider"></span>
            </label>
          </div>
          <div class="profile-option">
              <div class="option-modes">
                  <label class="radio-label"><input type="radio" name="fullname-mode" value="blur" checked> <i class="fas fa-eye-slash"></i> Blur</label>
                  <label class="radio-label"><input type="radio" name="fullname-mode" value="replace"> <i class="fas fa-exchange-alt"></i> Replace</label>
              </div>
              <div class="replace-input-container" id="fullname-replace-container">
                  <input type="text" id="fullname-replace-text" class="replace-input" placeholder="e.g., [name]">
              </div>
          </div>
      </div>
    </div>

    <!-- Container for global settings -->
    <div id="global-settings" class="platform-content">
      <div class="profile-info-group">
          <div class="profile-info">
            <div class="info-container">
              <span class="label"><i class="fas fa-filter"></i> Custom Words:</span>
              <span class="value">(hide on all sites)</span>
            </div>
            <label class="toggle-switch" title="Toggle custom words masking">
              <input type="checkbox" id="custom-words-blur">
              <span class="slider"></span>
            </label>
          </div>
          <div class="profile-option">
              <div class="option-modes">
                  <label class="radio-label"><input type="radio" name="custom-words-mode" value="blur" checked> <i class="fas fa-eye-slash"></i> Blur</label>
                  <label class="radio-label"><input type="radio" name="custom-words-mode" value="replace"> <i class="fas fa-exchange-alt"></i> Replace</label>
              </div>
              <div class="replace-input-container" id="custom-words-replace-container">
                  <input type="text" id="custom-words-replace-text" value="[hidden]" class="replace-input">
              </div>
          </div>
          <div class="custom-words-list-container">
              <div class="input-label"><i class="fas fa-list"></i> Words to mask:</div>
              <input type="text" id="custom-words-list" placeholder="Enter words, e.g., projectx, company_name" class="replace-input">
              <div class="help-text">Separate multiple words with commas</div>
          </div>
      </div>
    </div>
  </div>

  <div class="error" id="error">
    <i class="fas fa-exclamation-circle"></i> Navigate to a supported profile page to see options.
  </div>

  <div class="footer">
    <button id="refresh-button" class="button-primary" title="Forces a full re-scan of the page content to apply masking.">
      <i class="fas fa-sync-alt"></i> Force Re-scan Page
    </button>
  </div>


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