-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.html
432 lines (391 loc) · 26.6 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
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="production.css">
<script src="popup.js"></script>
</head>
<body>
<div id="loggedIn">
<section id="main-extension-content" class="pb-2">
<div class="mb-2.5">
<div class="flex flex-row items-center mb-3 font-semibold text-gray-900">
<img id="site-favicon" class="w-5 h-5 mr-2" src="docdecoderlogo.png" alt="logo">
<span class="flex-col">
<p id="domain-top" class="text-base font-semibold mb-0 DDLogoAccount"></p>
</span>
<div class="ml-auto flex flex-row">
<div id="premium-button" class=" bg-white rounded-lg shadow p-0.5 mr-1.5 animated-bg-container">
<a href="#" class="text-white flex-row flex items-baseline" style="padding-right: 0.2rem;">
<p class="m-auto px-1 z-10" style="padding-left: 0.325rem;">Premium</p>
<img title="premium" src="premium-logo.png" alt="account" id="premiumButton" class="w-5 h-5 invert" style="margin-top: -1px;">
</a>
</div>
<div class="bg-white rounded-lg shadow p-0 mr-1.5">
<a href="#">
<img title="help" src="question-mark.png" alt="help" id="helpButton" class="w-6 h-6">
</a>
</div>
<div class="bg-white rounded-lg shadow p-0.5">
<a href="#">
<img title="account" src="account-icon.png" alt="account" id="accountButton" class="w-5 h-5">
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col justify-center font-mono w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5">
<h4 class="text-lg font-semibold m-0">Hello <span id="welcomeName"></span> 👋</h4>
<p class="mb-0" id="welcomeContainer"></p>
</div>
<div
class="flex justify-center font-mono w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5">
<h4 class="text-lg font-semibold m-0"><span id="checkbox-count">0 summaries found</span> for this
this website</h4>
</div>
<div id="rateLimitMessage" style="display: none;" class="mb-2.5 mt-2 p-4 border-l-4 border-red-500 bg-red-100">
<p class="m-0"></p>
</div>
<div id="errorContainer" style="display: none;">
</div>
<p id="differentSitePrompt" style="display: none;"
class="mt-2.5 p-3 border-l-4 border-blue-500 bg-blue-100 rounded-r-lg">The policy you just summarised is located on a different website. To see it, please open the extension on that website.</p>
<p id="errorPrompt" style="display: none;"
class="mt-2.5 p-3 border-l-4 border-yellow-500 bg-yellow-100 rounded-r-lg">We've detected a consent checkbox on this page. Before accepting, you can generate a summary using the form below.</p>
<div id="gensum-btn" class="flex flex-col cursor-pointer text-gray-900 bg-white focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full w-full font-mono md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5" style="border: 1px solid lightgray;">
<div class="flex flex-row justify-center">
<h4 class="text-lg font-semibold mb-0">Generate a summary</h4>
</div>
</div>
<div id="summary-section-main" class="flex flex-col w-full bg-white rounded-r-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5 rounded-l-none" style="border-left: 3px solid rgb(239 68 68);">
<div id="preloader-icon" class="preloader" style="display: none;"></div>
<div id="preloader-container" class="text-[0.825rem]"></div>
<div id="summary-menu" class="flex mb-2 flex-wrap" style="display: none;"></div>
<hr id="menu-sep" class="my-[0.625rem]" style="display: none;">
<div id="summaries-container" class="-mt-4">
<h4 id="summaries-container-placeholder" class="text-base font-mono font-semibold mb-0 mt-4">Summaries will be displayed here.</h4>
</div>
</div>
<div id="premiumFeatureMessage" style="display: none;" class="mb-4 p-4 border-l-4 border-red-500 bg-red-100">
<p class="mb-0">This is a premium feature. Please <a href="#" id="premium-subscribe-txt" class="underline">subscribe</a> to access it.</p>
</div>
<p class="-mb-4 text-center text-gray-300">Created by <a href="https://www.instagram.com/joshwallerr/" target="_blank">Josh Waller</a> | support@docdecoder.app</p>
</section>
<div id="gensum-container" style="display: none;" tabindex="-1" class="flex justify-center fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 !h-[calc(100%-1rem)] max-h-full">
<div class="fixed inset-0 bg-black opacity-50"></div>
<div class="relative w-full max-w-md max-h-full my-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow">
<!-- Modal header -->
<div class="flex items-center justify-between px-5 py-4 border-b rounded-t">
<h3 class="text-xl font-medium text-gray-900 mb-0">
Generate a summary
</h3>
<div class="ml-auto bg-white rounded-lg p-0.5">
<a href="#">
<img title="back" src="close(x).png" alt="go back" id="exit-gensum-container" class="w-5 h-5 p-[0.075rem]">
</a>
</div>
</div>
<!-- Modal body -->
<form id="customSummaryForm">
<div class="px-6 space-y-5 py-4">
<div class="flex flex-col justify-center">
<p>If we haven't summarised a policy yet, you can create your own summary using the form below.</p>
<p class="font-semibold">Each summary you generate costs 1 summary token.</p>
<input type="url" name="policyLink" id="policyLink" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 mx-auto rounded-t-2xl" placeholder="Link to policy (e.g. https://example.com/terms)" required="">
<input type="text" id="policyName" class="bg-gray-50 border border-t-0 border-gray-300 text-gray-900 sm:text-sm focus:ring-primary-600 focus:border-primary-600 w-full p-2.5 mx-auto rounded-b-2xl" placeholder="Policy name (e.g. Terms and Conditions)" required="" pattern="^[^.$]*$">
</div>
<div id="suggested-links" class="text-xs">
<p class="font-semibold text-sm mb-1">Suggested links:</p>
</div>
</div>
<div class="flex items-center px-6 py-4 space-x-2 border-t border-gray-200 rounded-b">
<button type="submit" class="border-gray-300 bg-custom-blue">Generate (1 summary token)</button>
</div>
</form>
</div>
</div>
</div>
<section id="premium-container" style="display: none;" class="pb-2">
<div class="flex flex-row items-start mb-2 font-semibold text-gray-900">
<h1 class="font-semibold text-gray-900 text-2xl ml-1">Choose your plan</h1>
<div class="ml-auto bg-white rounded-lg shadow p-0.5">
<a href="#">
<img title="back" src="back-arrow.png" alt="go back" id="exit-premium-container-tomain" class="w-5 h-5 p-0.5">
<img title="back" src="back-arrow.png" alt="go back" id="exit-premium-container-toacct" class="w-5 h-5 p-0.5">
</a>
</div>
</div>
<div class="flex space-y-8 lg:grid lg:grid-cols-3 sm:gap-6 xl:gap-10 lg:space-y-0 mb-2.5">
<!-- Pricing Card -->
<div class="fixed-column flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-l-lg border border-gray-100 shadow pt-6">
<h3 class="text-2xl font-semibold mb-2">Free Forever</h3>
<p class="font-light text-gray-500 sm:text-lg mb-0">See what DocDecoder is capable of for free.</p>
<div class="flex justify-center items-baseline my-4 mt-2 mb-2">
<span class="mr-2 text-3xl font-extrabold font-mono">$0</span>
<span class="text-gray-500">/month</span>
</div>
<div id="premium-sumCount" class="space-x-4 ml-auto mr-auto mb-5 mt-1 font-semibold"></div>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
<span><span class="font-semibold">2</span> summary tokens every month</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span>Access to AI assistant</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<span>Consent Label Notifications</span>
</li>
</ul>
<a id="current-plan-btn" href="#" style="background-color: #838383;" class="text-white focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center pointer-events-none">Current plan</a>
</div>
<!-- Pricing Card -->
<div class="fixed-column flex flex-col p-6 mx-auto max-w-lg text-center text-gray-900 bg-white rounded-r-lg border border-gray-100 shadow !mt-0 relative">
<h3 class="mb-2 text-2xl font-semibold">Premium</h3>
<p class="font-light text-gray-500 sm:text-lg mb-0">Access to all features of premium, <span class="font-semibold" id="billed-text">billed monthly</span>.</p>
<div class="flex justify-center items-baseline my-4 mt-2">
<span class="mr-2 text-3xl font-extrabold font-mono" id="premium-price">$7.99</span>
<span id="slash-term-txt" class="text-gray-500">/month</span>
</div>
<label for="Toggle1" class="cursor-pointer flex items-center space-x-4 ml-auto mr-auto mb-[2.2rem]">
<span>Monthly</span>
<span class="relative !ml-2">
<input id="Toggle1" type="checkbox" class="hidden peer">
<div class="w-9 h-5 rounded-full shadow-inner bg-gray-400 peer-checked:bg-custom-blue"></div>
<div class="absolute inset-y-0 left-0 w-4 h-4 m-1 rounded-full shadow peer-checked:right-0 peer-checked:left-auto bg-gray-800 mt-[0.1rem]" style="margin-left: 0.14rem; background-color: white; margin-right: 0.24rem;"></div>
</span>
<span class="!ml-2">Yearly </span>
</label>
<!-- List -->
<ul role="list" class="mb-8 space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
<span><span class="font-semibold">Unlimited</span> summary creation</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
<span>Access to AI assistant</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg class="flex-shrink-0 w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
<span>Consent Label Notifications</span>
</li>
</ul>
<a id="monthly" href="#" class="text-white bg-custom-blue hover:bg-blue-500 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Choose plan</a>
<a id="yearly" style="display: none;" href="#" class="text-white bg-custom-blue hover:bg-blue-500 focus:ring-4 focus:ring-primary-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Choose plan</a>
</div>
</div>
<div class="flex flex-col justify-center text-black w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5">
<h4 class="text-lg mb-2 font-semibold font-mono">📜 Unlimited Summaries</h4>
<p class="mb-0">Generate as many summaries as you want, with no limits.</p>
<hr class="my-4">
<h4 class="text-lg mb-2 font-semibold font-mono">🤖 AI Assistant</h4>
<p>Ask GPT-3 anything about a policy.</p>
<img id="ai-gif" data-src="https://media.giphy.com/media/c8DOz6DirY32rNGOEF/giphy.gif" alt="AI Assistant Demo GIF" loading="lazy" class="mt-2 mb-0">
<hr class="my-4">
<h4 class="text-lg mb-2 font-semibold font-mono">📩 Consent Label Notifications</h4>
<p>Recieve a notification reminding you to check the extension whenever you're on a page that's asking you to accept a policy.</p>
<p>For example, if there's a checkbox on the page that says <span style="font-style: italic;">"I have read and accept the Terms & Conditions"</span>, you'll recieve a notification</p>
<p>*Notifications can be turned off in your account settings.</p>
</div>
<div class="flex flex-col justify-center text-black w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5">
<h4 class="text-lg mb-2 font-semibold">Side note:</h4>
<p>At the moment, this app is ran by one person, and all costs are covered through personal funding.</p>
<p>I've added the Premium plan as a way of making back some of the losses incurred from free users. <span class="font-semibold">If you cannot currently afford to pay for Premium, please email me at josh@docdecoder.app, and let me know what you can afford to pay</span>.</p>
</div>
</section>
<section id="plan-info" style="display: none;" class="pb-2">
<div class="flex flex-row items-start mb-2 font-semibold text-gray-900">
<!-- <img class="w-8 h-8 mr-2" src="docdecoderlogo.png" alt="logo">
<span class="flex-col">
<p class="text-base font-semibold -mb-1 DDLogoAccount">DocDecoder</p>
<p class="-mb-1 text-xs font-normal">AI-Powered Policy Summariser</p>
</span> -->
<h1 class="font-semibold text-gray-900 text-2xl ml-1">Your account</h1>
<div class="ml-auto bg-white rounded-lg shadow p-0.5">
<a href="#">
<img title="back" src="back-arrow.png" alt="go back" id="exit-account" class="w-5 h-5 p-0.5">
</a>
</div>
</div>
<div class="flex flex-col justify-center font-mono w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5">
<h2 class="text-xl font-semibold mb-2">Welcome <span id="nameDisplay"></span></h2>
<p class="mb-[0.625rem]">Your current plan: <span id="current-plan" class="font-semibold"></span></p>
<div class="mb-0">
<p id="usage-info" class="mb-0"></p>
<p id="upgrade-premium-txt">Want unlimited usage? <a href="#" class="underline text-custom-blue">Upgrade to premium</a>.</p>
</div>
<!-- <p class="text-xs">For all enquiries, please contact support@docdecoder.app</p> -->
</div>
<div id="notifs-container" class="flex flex-col justify-center font-mono w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5 relative">
<h4 class="text-lg mb-2 font-semibold">Notifications</h4>
<p>Recieve a reminder to check the extension whenever you encounter a consent checkbox.</p>
<label for="notifs-toggle" class="cursor-pointer flex items-center space-x-4 ml-0 mr-auto mb-2 mt-2">
<span>Off</span>
<span class="relative !ml-2">
<input id="notifs-toggle" type="checkbox" class="hidden peer" checked>
<div class="w-9 h-5 rounded-full shadow-inner bg-gray-400 peer-checked:bg-custom-blue"></div>
<div class="absolute inset-y-0 left-0 w-4 h-4 m-1 rounded-full shadow peer-checked:right-0 peer-checked:left-auto bg-gray-800 mt-[0.1rem]" style="margin-left: 0.14rem; background-color: white; margin-right: 0.24rem;"></div>
</span>
<span class="!ml-2">On </span>
</label>
</div>
<div class="flex flex-col justify-center font-mono w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5">
<h4 class="text-lg mb-2 font-semibold">Contact</h4>
<p>For everything from feature requests, to account support, please email <span class="font-semibold">support@docdecoder.app</span></p>
<p>All feedback is welcome :)</p>
</div>
<div class="flex flex-col justify-center font-mono w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5">
<button id="upgrade-btn" class="">Upgrade Plan</button>
<button id="manage-subscription-btn" style="display: none;" class="">Manage Subscription (Stripe)</button>
<button id="logoutButton" class="bg-black mt-3">Logout</button>
</div>
</section>
<!-- <div id="plan-info" class="hidden fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center">
<div class="bg-white p-8 rounded-lg">
<button id="exit-account" class="absolute top-4 right-4 btn-primary">X</button>
<p class="mb-4">Your current plan: <span id="current-plan" class="font-medium"></span></p>
<p id="usage-info" class="mb-4"></p>
<button id="upgrade-btn" class="btn-primary">Upgrade Plan</button>
<div id="upgrade-container" class="hidden mt-8">
<h2 class="text-2xl mb-4">Choose Your Plan</h2>
<button id="monthly" class="btn-primary mb-4">Monthly Plan ($3.99)</button>
<button id="yearly" class="btn-primary">Yearly Plan ($39.99)</button>
<button id="close-upgrade" class="btn-secondary mt-4">Close</button>
</div>
<button id="manage-subscription-btn" class="hidden btn-secondary mt-4">Manage Subscription</button>
</div>
</div> -->
<section id="aiResponsePopup" style="display: none;" class="ai-response-popup">
<div class="ai-response-content rounded-lg">
<span class="close-popup-btn">×</span>
<h2>AI says:</h2>
<p id="aiResponseText" class="max-h-[28rem] overflow-auto"></p>
</div>
</section>
</div>
<div id="small-modal" style="display: none;" tabindex="-1" class="flex justify-center fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 !h-[calc(100%-1rem)] max-h-full">
<div class="fixed inset-0 bg-black opacity-50"></div>
<div class="relative w-full max-w-md max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow">
<!-- Modal header -->
<div class="flex items-center justify-between px-5 py-4 border-b rounded-t">
<h3 class="text-xl font-medium text-gray-900 mb-0">
How it works 🤔
</h3>
</div>
<!-- Modal body -->
<div class="px-6 space-y-5 py-4">
<p class="text-base leading-relaxed text-gray-500 mb-0">
🔍 Whenever you visit a website, the extension will retrieve all stored '<strong>summaries</strong>' for that domain.
</p>
<!-- <div class="flex justify-center !mt-2" style="border: 1px solid grey;">
<input type="checkbox" name="example-consentbox" id="example-consentbox" class="">
<label for="example-consentbox" class="ml-1.5">I have read and accept the <a href="#" class="underline">Terms & Conditions</a></label>
</div> -->
<p class="text-base leading-relaxed text-gray-500 mb-0">
📜 Each <strong>summary</strong> is an AI generated breakdown of one of the site's legal policies (Terms & Conditions, Privacy Policy, etc.). They are structured like this:
<div class="flex text-sm font-mono leading-relaxed text-gray-500 !mt-2">
<ul class="px-2.5 text-black">
<li>> Key considerations</li>
<li>> Things to watch out for</li>
<li>> AI recommendations</li>
<li>> Predicted FAQs</li>
</ul>
</div>
</p>
<p class="text-base leading-relaxed text-gray-500 mb-0">
✍ If one of the site's policies is not yet summarised, you can create your own summary in real time by clicking the "Generate a summary" button.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center px-6 py-4 space-x-2 border-t border-gray-200 rounded-b">
<button id="close-intro" data-modal-hide="small-modal" type="button" class="text-white focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 focus:z-10 bg-custom-blue hover:bg-blue-500">Let's go!</button>
</div>
</div>
</div>
</div>
<div id="hiddenelementfortailwindbuilding" class="hidden w-4 h-4 rotate-180 transition-transform flex-grow items-center justify-between ml-auto flex-shrink mt-5"></div>
<div id="hiddenelementfortailwindbuilding2" style="display: none !important;" class="w-full mb-auto mt-4 rounder-r-lg border-l-green-500 py-3 px-4 block border-gray-200 shadow-sm rounded-l-md text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 bg-gray-100"></div>
<div id="hiddenelementfortailwindbuilding3" style="display: none !important;" class="py-3 px-4 inline-flex flex-shrink-0 justify-center items-center gap-2 rounded-r-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all text-sm rounded-l-none"></div>
<div id="hiddenelementfortailwindbuilding4" style="display: none !important;" class="!border-l-green-500 !rounded-r-lg !bg-white mb-auto mt-auto"></div>
<!-- <div id="loggedIn" style="display: none;">
<section class="bg-white">
<div id="main-extension-content" class="max-w-2xl mx-auto">
<h1 class="text-4xl font-semibold mb-4">Term Trimmer</h1>
<h2 class="text-2xl mb-4">Welcome <span id="nameDisplay" class="font-medium"></span>!</h2>
<button id="logoutButton" class="btn-primary">Logout</button>
<button id="accountButton" class="btn-primary ml-4">Account</button>
<form id="myForm" class="mt-8">
<div id="premiumFeatureMessage" class="hidden mb-4 p-4 border-l-4 border-red-500 bg-red-100">
<p>This is a premium feature. Please subscribe to access it.</p>
</div>
<p id="errorPrompt" class="hidden mb-4 p-4 border-l-4 border-yellow-500 bg-yellow-100">We've detected a checkbox, but can't find a policy associated with it. Please create a custom summary using the form below.</p>
<div class="mb-4">
<p class="mb-2">Step 1: Give the summary a name (e.g. Privacy Policy, Terms, User Agreement).</p>
<label for="policyName" class="block text-sm font-medium text-gray-700">Policy Name:</label>
<input type="text" id="policyName" name="policyName" required class="mt-1 p-2 w-full border rounded-md">
</div>
<div class="mb-4">
<p class="mb-2">Step 2: Open the page that contains the policy you want to summarize, and hit CTRL + A to copy the entire page contents.</p>
<p class="mb-2">Step 3: Paste the content in the box below and click "Create Summary".</p>
<label for="policyContent" class="block text-sm font-medium text-gray-700">Policy content:</label>
<textarea id="policyContent" name="policyContent" required class="mt-1 p-2 w-full h-40 border rounded-md"></textarea>
</div>
<input type="submit" value="Create Summary" class="btn-primary">
</form>
<form id="manual-input-form" class="hidden mt-8">
<textarea id="manual-input" placeholder="Paste the terms and conditions here..." class="p-2 w-full h-40 border rounded-md"></textarea>
<button type="submit" class="btn-primary mt-4">Summarize</button>
</form>
<div id="content-container" class="mt-8">
<div id="preloader-container"></div>
<div id="summaries-container"></div>
</div>
</div>
<div id="aiResponsePopup" class="hidden fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center">
<div class="bg-white p-8 rounded-lg">
<span class="absolute top-4 right-4 btn-primary cursor-pointer close-popup-btn">×</span>
<h2 class="text-2xl mb-4">AI says:</h2>
<p id="aiResponseText"></p>
</div>
</div>
</div>
</section> -->
</body>
</html>