Skip to content

Commit 5684450

Browse files
driedpampasdriedpampas
authored
feat: consent page (firefox only)
1 parent 3b9ce1a commit 5684450

File tree

3 files changed

+246
-254
lines changed

3 files changed

+246
-254
lines changed

‎src/html/consent.html‎

Lines changed: 59 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,63 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>FastForward</title>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<script src="base.js"></script>
8-
<style>
9-
/* Add your custom CSS styles here */
10-
body {
11-
font-family: Arial, sans-serif;
12-
background-color: #f5f5f5;
13-
margin: 20px;
14-
}
15-
.container {
16-
background-color: #ffffff;
17-
border-radius: 5px;
18-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
19-
padding: 20px;
20-
max-width: 500px;
21-
margin: 0 auto;
22-
text-align: center;
23-
}
24-
h1 {
25-
color: #333;
26-
}
27-
p {
28-
color: #555;
29-
font-size: 16px;
30-
line-height: 1.5;
31-
}
32-
button {
33-
background-color: #0073e6;
34-
color: #fff;
35-
border: none;
36-
padding: 10px 20px;
37-
font-size: 18px;
38-
cursor: pointer;
39-
border-radius: 5px;
40-
transition: background-color 0.3s ease;
41-
}
42-
button:hover {
43-
background-color: #005bbd;
44-
}
45-
.popup {
46-
display: none;
47-
position: fixed;
48-
top: 50%;
49-
left: 50%;
50-
transform: translate(-50%, -50%);
51-
background-color: #fff;
52-
padding: 20px;
53-
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
54-
z-index: 1000;
55-
}
56-
</style>
57-
</head>
58-
<body>
59-
<nav class="uk-navbar-container uk-light" style="background:#1e87f0" uk-navbar>
60-
<div class="uk-navbar-left">
61-
<a class="uk-navbar-item uk-logo" href="#">FastForward</a>
62-
<ul class="uk-navbar-nav">
63-
<li><a href="https://fastforward.team/changelog" target="_blank" data-message="changelog"></a></li>
64-
<li><a href="https://fastforward.team/faq" target="_blank" data-message="faq"></a></li>
65-
<li><a href="https://fastforward.team/contributors" target="_blank" data-message="contributors"></a></li>
66-
</ul>
67-
</div>
68-
</nav>
69-
<div class="container">
70-
<h1>Welcome to Your FastForward</h1>
71-
<p>
72-
warning!! are you sure you want this extension to do what it says it does? here at fastforward we care about your privacy and want to make sure you don't accidentally use this extension because that could be disastrous. are you sure you want this button that you don't have to press to function when you press it?
73-
</p>
74-
<p>
75-
this message was brought to you because of mozilla"
76-
</p>
77-
<button id="consentButton">I Agree</button>
78-
<button id="declineButton">I Decline</button>
79-
80-
<div id="popup" class="popup">
81-
<p>You have declined consent. This extension cannot work.</p>
82-
<button id="uninstallPopupButton">Uninstall Extension</button>
83-
</div>
84-
85-
</div>
86-
87-
<script src="consent.js"></script>
3+
<head>
4+
<title>FastForward</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<script src="base.js"></script>
8+
<link rel="stylesheet" href="style.css" />
9+
<style>
10+
.container {
11+
border-radius: 5px;
12+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
13+
padding: 20px;
14+
width: 80%;
15+
max-width: 600px;
16+
margin: 0 auto;
17+
text-align: center;
18+
}
19+
p {
20+
color: #ffffff;
21+
font-size: 28px;
22+
line-height: 1.5;
23+
}
24+
.buttons {
25+
border: none; /* Increase border width for better visibility */
26+
border-image: linear-gradient(
27+
135deg,
28+
var(--ff-aqua) 0%,
29+
var(--ff-blue) 50%,
30+
var(--ff-purple) 100%
31+
) 1;
32+
background-color: transparent;
33+
border: none;
34+
padding: 18px 36px; /* Increase padding for a larger button */
35+
font-size: 24px; /* Use a font size of 24px for better readability */
36+
cursor: pointer;
37+
border-radius: 8px; /* Increase border radius for a softer look */
38+
transition: background-color 0.3s ease;
39+
}
8840

89-
</body>
41+
</style>
42+
</head>
43+
<body>
44+
<nav>
45+
<ul>
46+
<div class="logo-wrapper"><img class="logo" src="../icon/branding.png" alt="FastForward"></div>
47+
</ul>
48+
</nav>
49+
<div class="uk-margin-top uk-margin-bottom uk-margin-left uk-margin-right">
50+
<div class="container">
51+
<h2>Thank you for installing FastForward</h2>
52+
<p>
53+
This extension collects the tab url when you choose to add a website to the whitelist.
54+
</p>
55+
<p>
56+
If you consent to this data collection hit "Agree" to continue. Otherwise hit "Refuse" and the extension will be uninstalled.
57+
</p>
58+
<button id="agree" class="buttons">Agree</button>
59+
<button id="refuse" class="buttons">Refuse</button>
60+
</div>
61+
<script src="consent.js"></script>
62+
</body>
9063
</html>

‎src/html/consent.js‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
1-
// Check if the user has already given or declined consent
2-
const consentStatus = localStorage.getItem('consentStatus');
1+
// Function to save consent status
2+
async function saveConsentStatus(consentStatus) {
3+
return browser.storage.local.set({ consentStatus: consentStatus });
4+
}
35

4-
// Handle the "I Agree" button click event
5-
document.getElementById("consentButton").addEventListener("click", function () {
6-
// Save consent in localStorage
7-
localStorage.setItem('consentStatus', 'granted');
6+
// Function to get consent status
7+
async function getConsentStatus() {
8+
return new Promise((resolve) => {
9+
browser.storage.local.get('consentStatus').then((result) => {
10+
resolve(result.consentStatus);
11+
});
12+
});
13+
}
814

9-
// You can add additional logic here, such as performing actions that require consent.
10-
11-
// Example: Redirect to another page after consent
15+
// Event listener for "Agree" button
16+
document.querySelector('#agree').addEventListener('click', async function () {
17+
console.log("Agree button clicked.");
18+
await saveConsentStatus('consent-granted');
1219
window.location.href = 'options.html';
1320
});
1421

15-
document.getElementById("declineButton").addEventListener("click", function () {
16-
// Save decline status in localStorage
17-
localStorage.setItem('consentStatus', 'declined');
18-
console.log("Decline button clicked");
19-
20-
// Show the popup
21-
document.getElementById("popup").style.display = "block";
22-
});
23-
24-
// Handle the "Uninstall" button click event within the popup
25-
document.getElementById("uninstallPopupButton").addEventListener("click", function () {
26-
// Uninstall the extension
22+
// Event listener for "Refuse" button
23+
document.querySelector('#refuse').addEventListener('click', async function () {
24+
console.log("Uninstalling extension.");
2725
browser.management.uninstallSelf();
28-
});
26+
});

0 commit comments

Comments
 (0)