-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpopup.html
338 lines (281 loc) · 12.8 KB
/
popup.html
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
<!DOCTYPE html>
<html>
<head>
<title>Service Progress Result Collect</title>
<style>
body {
width: 798px;
/* height: 550px; */
margin: 1px;
overflow: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
color: #333;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd;
}
h1, h2, h3 {
text-align: center;
}
.buttons {
display: flex;
width: 500px;
gap: 10px;
--b: 3px; /* the border thickness */
--h: 1.5em; /* the height */
margin:auto;
}
.buttons button {
--_c: #88C100;
flex: calc(1 + var(--_s,0));
min-width: 0;
font-size: 25px;
font-weight: bold;
height: var(--h);
cursor: pointer;
color: var(--_c);
border: var(--b) solid var(--_c);
background:
conic-gradient(at calc(100% - 1.3*var(--b)) 0,var(--_c) 209deg, #0000 211deg)
border-box;
clip-path: polygon(0 0,100% 0,calc(100% - 0.577*var(--h)) 100%,0 100%);
padding: 0 calc(0.288*var(--h)) 0 0;
margin: 0 calc(-0.288*var(--h)) 0 0;
box-sizing: border-box;
transition: flex .4s;
}
.buttons button + button {
--_c: #FF003C;
flex: calc(1 + var(--_s,0));
background:
conic-gradient(from -90deg at calc(1.3*var(--b)) 100%,var(--_c) 119deg, #0000 121deg)
border-box;
clip-path: polygon(calc(0.577*var(--h)) 0,100% 0,100% 100%,0 100%);
margin: 0 0 0 calc(-0.288*var(--h));
padding: 0 0 0 calc(0.288*var(--h));
}
.buttons button:focus-visible {
outline-offset: calc(-2*var(--b));
outline: calc(var(--b)/2) solid #000;
background: none;
clip-path: none;
margin: 0;
padding: 0;
}
.buttons button:focus-visible + button {
background: none;
clip-path: none;
margin: 0;
padding: 0;
}
.buttons button:has(+ button:focus-visible) {
background: none;
clip-path: none;
margin: 0;
padding: 0;
}
button:hover,
button:active:not(:focus-visible) {
--_s: .75;
}
button:active {
box-shadow: inset 0 0 0 100vmax var(--_c);
color: #fff;
}
.container {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
}
.centered {
text-align: center;
}
textarea {
width: 600px;
height: 100px;
}
.line {
width: 100%;
height: 2px;
background-color: black;
}
.collapsible {
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.sub_collapsible {
color: rgb(0, 0, 0);
cursor: pointer;
padding: 8px;
width: 100%;
border: none;
text-align: center;
}
</style>
</head>
<body>
<!-- Current service -->
<!-- <h2 id="service" style="display: inline;">
Service not detected
</h2> -->
<!-- <br><br> -->
<div style="text-align: center;">
<img src="images/extension_logo.png" alt="Service Progress Result Collector" width=80%; height=80%>
</div>
<!-- Project Introduction -->
<button class="collapsible" id="projectIntro" style="font-size: 20px; font-weight: bold; background-color: #370C6A;">> Project Introduction</button>
<div class="collapsible_content" style="display: none; text-align: center;" id="introContent">
<div class="'logo">
<br><span style="font-weight: bold; font-size: 22px;">Project organizers:<span><br><br>
<img src="images/queen_mary_logo.png" alt="HKUST(GZ)" width=15%; height=15%>    
<img src="images/brave_logo.png" alt="brave" width=15%; height=15%>    
<img src="images/hkust_logo.png" alt="brave" width=20%; height=20%>
</div>
<br>
<div style="width: 85%; margin: 0 auto">
<p style="text-align: center; font-size: 18px; font-weight: bold; color: #370C6A;">Thank you for your interest in participating in our research study!</p>
<p style="text-align: justify; font-size: 14px;">
The purpose of this study is to evaluate the effectiveness of services that help individuals remove personal information from data broker databases,
hereinafter referred to as "service".
We wish to study for these services to help individuals regain control over their personal information and privacy.
Your participation will contribute valuable insights that can help improve these services
and empower individuals to protect their privacy in the modern world.<br><br>
As a participant in this study,
your role will be to use the designated services to request the removal of your own personal information from data broker databases.
You will then be asked to send us weekly progress on service removal.
The study is for <u>one month</u>, meaning you will send us removal progress data <u>4 times</u> at the same time each week.
Sending the results will take <u>less than one minute</u>.<br><br>
Your participation in this study is voluntary,
and you may withdraw at any time. You are required to enter your personal data
(e.g. full name, email, address, phone number, date of birth, etc.)
in the service to make the service work properly.
However, <u>we do not collect any private data about you</u> - we only collect data about the effectiveness of the service.<br><br>
Participants in this study will receive the following benefits:
<ul style="text-align: left; font-size: 14px;">
<li>We will cover the subscription cost of the services, allowing you to use them for free to learn about the exposure of your private information and to protect your privacy. This is worth an average of <u>$17</u>.</li>
<li>We will pay you an additional <u>$15</u> as a bonus after you send us the updates on the removal progress of your service.</li>
</ul>
</p>
<p style="text-align: justify; font-size: 14px;">
The study was co-sponsored by Queen Mary University of London,
Brave and The Hong Kong University of Science and Technology (GZ).
If you have any questions or concerns about the study, please do not hesitate to contact us at <u>jhe976@connect.hkust-gz.edu.cn</u><br><br>
</p>
</div>
</div>
<!-- Task 1: verify the subscription -->
<button class="collapsible" id="collBotton1" style="font-size: 20px; font-weight: bold; background-color: #386A9B;">> Task 1: Verify Your Subscription <span id="task1_state" style="font-weight: bold; color: #88C100;"></span></button>
<div class="collapsible_content" style="display: none; text-align: center;" id="task1Content">
<!-- Step 1: Input Prolific ID -->
<div class="container">
<p style="font-size: 18px;"><span style="color: #386A9B; font-weight: bold">Step 1</span>: Please copy your <span style="font-weight: bold;">Prolific ID</span> here (mandatory):</p>
<input type="text" id="prolificId_1" placeholder="Prolific ID", style="width: 200px;">
<p id="idError_1" style="color:red; font-size: 12px;"></p>
<p style="font-weight: bold; font-size: 14px;"><u>*Please make sure the Prolific ID is correct, we will use the Prolific ID as your identifier and pay you by Prolific ID.</u></p><br>
</div>
<div style="border-bottom: dashed #386A9B; width: 100%; height: 2px;"></div>
<!-- Step 2: Verify subscription -->
<p style="font-size: 18px;"><span style="color: #386A9B; font-weight: bold">Step 2</span>: Please click the button below to verify that you have subscribed to the service.</p>
<button id="verify" disabled>Verify Subscription</button>
<p id="verify_result"></p>
<p id="completion_code_1" style="font-size: 18px; font-weight: bold; color: #386A9B;"></p>
</div>
<!-- Task 2: send the result -->
<button class="collapsible" id="collBotton2" style="font-size: 20px; font-weight: bold; background-color: #3BCBCE;">> Task 2: Send Service Progress Result <span id="task2_state"></span></button>
<div class="collapsible_content" style="display: none;" id="task2Content">
<!-- Step 1: Input Prolific ID -->
<div class="container">
<p style="font-size: 18px;"><span style="color: #3BCBCE; font-weight: bold">Step 1</span>: Please copy your <span style="font-weight: bold;">Prolific ID</span> here (mandatory):</p>
<input type="text" id="prolificId_2" placeholder="Prolific ID", style="width: 200px;">
<p id="idError_2" style="color:red; font-size: 12px;"></p>
<p style="font-weight: bold; font-size: 14px;"><u>*Please make sure the Prolific ID is correct, we will use the Prolific ID as your identifier and pay you by Prolific ID.</u></p><br>
</div>
<div style="border-bottom: dashed #3BCBCE; width: 100%; height: 2px;"></div>
<!-- Step 2: Check Data -->
<p class="container" style="font-size: 18px;"><span style="color: #3BCBCE; font-weight: bold">Step 2</span>: Check that the data has been correctly extracted. Please check:</p>
<div style="justify-content: center; display: flex;">
<ul style="text-align: left; font-size: 14px;">
<li>Whether the data contains a large number of Null or None values</li>
<li>Whether the data table is empty</li>
</ul>
</div>
<p class="container" style="font-size: 18px; color: #3BCBCE; font-weight: bold"><u>We commit not to collect any private data about you</u></p>
<!-- Only for mozilla monitor copy data -->
<div id="copyData" class="container" style="display: none">
<br>
<textarea type="text" id="inputField" placeholder="Please copy the page here!"></textarea><br>
<button id="processButton" disabled>Process data</button><br><br>
</div>
<button class="sub_collapsible" id="dataTable" style="font-size: 20px; font-weight: bold; text-align: center;">>> Click here to check extracted data <span id="fetchDataTime"></span> <<</button>
<div class="collapsible_content" style="display: none;" id="dataTableContent">
<!-- Display stat data -->
<p id="remove_stat" style="font-size: 18px; text-align: center;"></p>
<!-- Display table -->
<div id="table-container"></div>
</div>
<br><br>
<div style="border-bottom: dashed #3BCBCE; width: 100%; height: 2px;"></div>
<!-- Step 3: Send Data -->
<p class="container" style="font-size: 18px;"><span style="color: #3BCBCE; font-weight: bold">Step 3</span>: Send data</p>
<div style="justify-content: center; display: flex;">
<ul style="text-align: left; font-size: 14px;">
<li>If all data is displayed correctly, click the <span style="color: #88C100; font-weight: bold;">Send Data</span> button.</li>
<li>Otherwise, please refresh the page and wait a few seconds to re-extract.</li>
<li>If refreshing still doesn't work, click the <span style="color: #FF003C; font-weight: bold; ">Report Error</span> button.</li>
</ul>
</div>
<br>
<div class="buttons">
<button id="send" disabled>Send Data</button>
<button id="error" disabled>Report Error</button>
</div>
<!-- Error report options -->
<div id="errorOption" class="container" style="display: none; text-align: center;">
<br>
<h3 style="font-size: 16px;">Please select the reason for the error:</h3>
<p style="text-align: center; font-size: 14px;"><u>*Please note that when you submit an error report we record whether the current data is valid or not. <br>Deliberately sending a bug report may result in loss of bonus.</u></p>
<div class="content">
<input type="radio" name="option" id="notWorking" value="plugin_not_work">
<label for="notWorking">Browser plug-ins not working properly</label><br>
<!-- <input type="radio" name="option" id="sensitiveInfo" value="contain_sensitive_info">
<label for="sensitiveInfo">Data contains sensitive personal information</label><br> -->
<input type="radio" name="option" id="refuseShare" value="refuse_share_data">
<label for="sensitiveInfo">I refuse to share this data.</label><br><br>
<div class="centered">
<button id="errorReport">Send Error Report</button>
<h3 id="errorResult"></h3>
</div>
</div>
</div>
<h2 id="result", style="font-weight: bold; font-size: 22px;"></h2>
<p id="completion_code_2" style="font-size: 18px; font-weight: bold; text-align: center;"></p>
</div>
<div id="mozillaResult">
</div>
<script src="popup.js"></script>
</body>
</html>