icons and popup

about.html

@@ -51,7 +51,7 @@
 
 			<div class="big-card">
 				<h2 class="quote">“A fresh start for the people.”</h2>
-				<img src="assets/test.jpg" alt="" />
+				<img src="images/test.jpg" alt="" />
 			</div>
 		</main>
 	</body>

accordion.js

@@ -0,0 +1,46 @@
+const accordions = document.querySelectorAll(".accordion");
+
+chrome.storage.sync.get(["selected"], (result) => {
+	syncCategories(result.selected);
+});
+
+const syncCategories = function (selected) {
+	for (const accordion of accordions) {
+		let expandButton = accordion.querySelector('.more-info input[type="checkbox"]');
+		let content = accordion.querySelector(".content");
+		accordion.style.height = expandButton.addEventListener("change", (e) => {
+			if (e.target.checked) {
+				content.style.maxHeight = content.scrollHeight + "px";
+				content.style.marginTop = "24px";
+			} else {
+				content.style.marginTop = 0;
+				content.style.maxHeight = null;
+			}
+		});
+
+		let checkbox = accordion.querySelector(".switch input");
+		let category = checkbox.id;
+		console.log(category);
+		checkbox.checked = selected.includes(category);
+
+		checkbox.addEventListener("change", () => {
+			checkbox.checked
+				? selected.push(category)
+				: selected.splice(selected.indexOf(category), 1);
+			chrome.storage.sync.set({ selected });
+		});
+	}
+};
+
+window.addEventListener("resize", (e) => {
+	for (const accordion of accordions) {
+		let content = accordion.querySelector(".content");
+		if (accordion.querySelector('.more-info input[type="checkbox"]').checked) {
+			content.style.maxHeight = content.scrollHeight + "px";
+			content.style.marginTop = "24px";
+		} else {
+			content.style.marginTop = 0;
+			content.style.maxHeight = null;
+		}
+	}
+});

background.js

@@ -3,6 +3,10 @@ let categories = {
 		title: "Collection of Data",
 		keywords: ["data", "collect"],
 	},
+	usage: {
+		title: "How do they use this data",
+		keywords: ["usage", "use"],
+	},
 	third: {
 		title: "Usage of Data",
 		keywords: ["share", "third", "companies", "party"],
@@ -25,7 +29,7 @@ let categories = {
 	},
 };
 
-let selected = ["location"];
+let selected = [];
 
 chrome.runtime.onInstalled.addListener(() => {
 	chrome.storage.sync.set({ selected, categories });

categories.html

@@ -35,7 +35,7 @@
 						<span>?</span>
 					</label>
 					<label class="switch">
-						<input type="checkbox" />
+						<input type="checkbox" id="collect" />
 						<span class="slider round"></span>
 					</label>
 				</div>
@@ -53,7 +53,7 @@
 						<span>?</span>
 					</label>
 					<label class="switch">
-						<input type="checkbox" />
+						<input type="checkbox" id="usage" />
 						<span class="slider round"></span>
 					</label>
 				</div>
@@ -68,7 +68,7 @@
 						<span>?</span>
 					</label>
 					<label class="switch">
-						<input type="checkbox" />
+						<input type="checkbox" id="third" />
 						<span class="slider round"></span>
 					</label>
 				</div>
@@ -86,7 +86,7 @@
 						<span>?</span>
 					</label>
 					<label class="switch">
-						<input type="checkbox" />
+						<input type="checkbox" id="location" />
 						<span class="slider round"></span>
 					</label>
 				</div>
@@ -101,7 +101,7 @@
 						<span>?</span>
 					</label>
 					<label class="switch">
-						<input type="checkbox" />
+						<input type="checkbox" id="permission" />
 						<span class="slider round"></span>
 					</label>
 				</div>
@@ -118,7 +118,7 @@
 						<span>?</span>
 					</label>
 					<label class="switch">
-						<input type="checkbox" />
+						<input type="checkbox" id="upload" />
 						<span class="slider round"></span>
 					</label>
 				</div>
@@ -135,7 +135,7 @@
 						<span>?</span>
 					</label>
 					<label class="switch">
-						<input type="checkbox" />
+						<input type="checkbox" id="suspension" />
 						<span class="slider round"></span>
 					</label>
 				</div>

options.html

@@ -4,20 +4,23 @@
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Parse Policies - Options</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="stylesheet" href="options.css" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <script src="options.js" defer></script>
+		<link
+			href="https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap"
+			rel="stylesheet"
+		/>
+		<link rel="stylesheet" href="style.css" />
+		<title>Document</title>
 	</head>
 	<body>
-		
+		<main class="welcome">
-		<a href="start.html">Go to start</a>
+			<img src="images/logo.svg" class="title" alt="U Control" />
-		<h1>Parse Policies - Options</h1>
+			<div class="description">
-			<ul id="categories">
+				You are one step closer <br />
-				<li class="category reference">
+				<strong>more control</strong> over your data
-					<label for=""></label>
-					<input type="checkbox" name="" id="" />
-				</li>
-			</ul>
 			</div>
+			<a href="categories.html" class="button">Get Started</a>
+		</main>
 	</body>
 </html>

popup.css

@@ -1,5 +1,16 @@
-body {
+* {
-	width: 200px;
+	box-sizing: border-box;
+}
+
+html {
+	width: 300px;
+}
+
+body,
+html {
+	font-family: "Sora";
+	margin: 0px;
+	padding: 8px;
 }
 
 button {
@@ -8,33 +19,117 @@ button {
 	outline: none;
 	border-radius: 2px;
 	cursor: pointer;
-	border: 1px solid currentColor;
+	background: white;
+	border: 1px solid #b6c2e2;
 }
 
-button:active {
+button.active {
-	background-color: currentColor;
+	background-color: #1834e9;
 }
 
 button.current {
 	box-shadow: 0 0 0 2px white, 0 0 0 4px black;
 }
 
-h1,
+header {
-h2 {
+	display: flex;
-	font-size: 1rem;
+	justify-content: space-between;
-	margin: 8px 0;
 }
 
-ul {
+h1 {
+	color: #1834e9;
+	font-weight: bold;
+	font-size: 24px;
 	margin: 0;
+}
+
+#selected-list {
+	margin: 0;
+	margin-top: 32px;
 	padding: 0;
 	list-style: none;
 }
 
+.category + .category {
+	border-top: 1px solid #eef1f8;
+}
+
 #preferences {
 	background: none;
 	padding: 0;
 	margin: 8px 0;
 	border: none;
-	border-bottom: 1px solid currentColor;
+	color: #1834e9;
+}
+
+.category {
+	display: flex;
+
+	justify-content: space-between;
+	align-items: baseline;
+	padding: 12px 0;
+}
+
+.category .title {
+	margin: 0;
+}
+
+.switch {
+	position: relative;
+	display: inline-block;
+	width: 30px;
+	height: 17px;
+}
+
+.switch input {
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.slider {
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #eef1f8;
+
+	border: 1px solid #b6c2e2;
+	transition: 0.4s;
+}
+
+.slider:before {
+	position: absolute;
+	content: "";
+	height: 13px;
+	width: 13px;
+	left: 2px;
+	bottom: 1px;
+	background-color: white;
+	transition: 0.4s;
+}
+
+input:checked + .slider {
+	background-color: #1834e9;
+}
+
+input:focus + .slider {
+	box-shadow: 0 0 1px #b6c2e2;
+}
+
+input:checked + .slider:before {
+	-webkit-transform: translateX(12px);
+	-ms-transform: translateX(12px);
+	transform: translateX(12px);
+}
+
+/* Rounded sliders */
+.slider.round {
+	border-radius: 17px;
+}
+
+.slider.round:before {
+	border-radius: 50%;
 }

popup.html

@@ -2,15 +2,28 @@
 <html>
 	<head>
 		<link rel="stylesheet" href="popup.css" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap"
+			rel="stylesheet"
+		/>
 		<script src="popup.js" defer></script>
 	</head>
 	<body>
-		<h1>Parse Policies</h1>
+		<header>
+			<h1>Ucontrol</h1>
 			<button id="activate"></button>
-		<div>
+		</header>
-			<h2>Selected categories</h2>
+		<ul id="selected-list">
-			<ul id="selected-list"></ul>
+			<li class="category reference">
+				<h3 class="title">The</h3>
+				<label class="switch">
+					<input type="checkbox" id="collect" />
+					<span class="slider round"></span>
+				</label>
+			</li>
+		</ul>
 		<button id="preferences">Preferences</button>
-		</div>
 	</body>
 </html>

popup.js

@@ -8,11 +8,25 @@ chrome.storage.sync.get(["categories", "selected"], (result) => {
 
 const listCategories = function (categories, selected) {
 	let selectedList = document.getElementById("selected-list");
-	for (const category of selected) {
+	let reference = selectedList.querySelector(".category.reference");
-		item = document.createElement("li");
+
-		item.innerHTML = categories[category].title;
+	for (const [key, category] of Object.entries(categories)) {
+		item = reference.cloneNode(true);
+		item.classList.remove("reference");
+		item.querySelector(".title").innerHTML = category.title;
+
+		let checkbox = item.querySelector(".switch input");
+		checkbox.checked = selected.includes(key);
+
+		checkbox.addEventListener("change", () => {
+			checkbox.checked ? selected.push(key) : selected.splice(selected.indexOf(key), 1);
+			chrome.storage.sync.set({ selected });
+		});
+
 		selectedList.appendChild(item);
 	}
+
+	reference.remove();
 };
 
 const preferences = document.getElementById("preferences");
@@ -22,6 +36,8 @@ preferences.addEventListener("click", () => {
 
 const activate = document.getElementById("activate");
 activate.addEventListener("click", async () => {
+	activate.classList.toggle("active");
+
 	let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
 
 	chrome.scripting.executeScript({

start.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-<body>
-    Start test
-</body>
-</html>

style.css

@@ -113,7 +113,7 @@ header .description {
 }
 
 main.tips {
-	padding: 64px;
+	padding: 24px;
 	display: flex;
 	justify-content: center;
 	align-items: flex-start;
@@ -133,7 +133,7 @@ main.tips .card {
 }
 
 .tips .card .title {
-	font-weight: 600;
+	font-weight: 400;
 	font-size: 32px;
 	text-align: center;
 	color: var(--color);
@@ -298,7 +298,7 @@ input:checked + .slider:before {
 
 .accordion .header {
 	display: flex;
-	align-items: center;
+	align-items: baseline;
 }
 
 .accordion + .accordion {

test.html

@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Document</title>
-	</head>
-	<body>
-		<p>
-			Tempor dolore voluptate aute velit. Anim laboris deserunt ut Lorem sunt. Occaecat
-			consectetur ex proident culpa consectetur aliqua minim nulla consequat amet enim. Ipsum
-			excepteur fugiat reprehenderit laboris sint.
-		</p>
-
-		<p>Location tempor eheh ahah</p>
-
-		<p>Usage of data</p>
-	</body>
-</html>

uc-front/accordion.js

@@ -1,28 +0,0 @@
-const accordions = document.querySelectorAll(".accordion");
-
-for (const accordion of accordions) {
-	let expandButton = accordion.querySelector('.more-info input[type="checkbox"]');
-	let content = accordion.querySelector(".content");
-	accordion.style.height = expandButton.addEventListener("change", (e) => {
-		if (e.target.checked) {
-			content.style.maxHeight = content.scrollHeight + "px";
-			content.style.marginTop = "24px";
-		} else {
-			content.style.marginTop = 0;
-			content.style.maxHeight = null;
-		}
-	});
-}
-
-window.addEventListener("resize", (e) => {
-	for (const accordion of accordions) {
-		let content = accordion.querySelector(".content");
-		if (accordion.querySelector('.more-info input[type="checkbox"]').checked) {
-			content.style.maxHeight = content.scrollHeight + "px";
-			content.style.marginTop = "24px";
-		} else {
-			content.style.marginTop = 0;
-			content.style.maxHeight = null;
-		}
-	}
-});

uc-front/assets/logo type.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1117 479" style="enable-background:new 0 0 1117 479;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#1834E9;}
-	.st1{fill:#FFFFFF;}
-	.st2{font-family:'Sora-ExtraBold';}
-	.st3{font-size:121.1839px;}
-</style>
-<rect x="0.9" y="-1.2" class="st0" width="1115.1" height="481.2"/>
-<g>
-	<text transform="matrix(1 0 0 1 278.1071 276.7521)" class="st1 st2 st3">CONTROL</text>
-</g>
-<g>
-	<g>
-		<path class="st1" d="M251,242.7c0.1-1.2,0.1-2.3,0.1-3.5v-52.4h-22.6v52.9c0,1.1-0.1,2.1-0.2,3H251z"/>
-		<path class="st1" d="M217.3,256.1c-1.7,0.4-3.6,0.7-5.7,0.7c-3.6,0-6.7-0.7-9.2-2.1c-2.5-1.4-4.4-3.4-5.8-6c-1.3-2.6-2-5.6-2-9.1
-			v-52.9H172v52.4c0,7.9,1.5,14.8,4.6,20.6c3.1,5.8,7.6,10.3,13.4,13.4c5.9,3.2,13.1,4.7,21.6,4.7c2,0,3.8-0.1,5.7-0.3V256.1z"/>
-	</g>
-	<path class="st1" d="M242.1,256.7c-0.3,2-0.9,3.8-1.7,5.4c-1.3,2.6-3.2,4.5-5.7,5.9c-1.1,0.6-2.3,1.1-3.6,1.4V291
-		c6.1-0.6,11.4-2,15.9-4.5c5.9-3.2,10.3-7.6,13.4-13.4c2.5-4.7,3.9-10.2,4.4-16.4H242.1z"/>
-</g>
-</svg>

uc-front/index.html

@@ -1,26 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="preconnect" href="https://fonts.googleapis.com" />
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-		<link
-			href="https://fonts.googleapis.com/css2?family=Sora:wght@400;700&display=swap"
-			rel="stylesheet"
-		/>
-		<link rel="stylesheet" href="style.css" />
-		<title>Document</title>
-	</head>
-	<body>
-		<main class="welcome">
-			<img src="assets/logo.svg" class="title" alt="U Control" />
-			<div class="description">
-				You are one step closer <br />
-				<strong>more control</strong> over your data
-			</div>
-			<a href="categories.html" class="button">Get Started</a>
-		</main>
-	</body>
-</html>