diff --git a/uc-front/about.html b/about.html similarity index 98% rename from uc-front/about.html rename to about.html index 3c5ecbb..5480651 100644 --- a/uc-front/about.html +++ b/about.html @@ -51,7 +51,7 @@

“A fresh start for the people.”

- +
diff --git a/accordion.js b/accordion.js new file mode 100644 index 0000000..e32bf6b --- /dev/null +++ b/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; + } + } +}); diff --git a/background.js b/background.js index 69418af..21fbf99 100644 --- a/background.js +++ b/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 }); diff --git a/uc-front/categories.html b/categories.html similarity index 92% rename from uc-front/categories.html rename to categories.html index 3f47a11..080b7eb 100644 --- a/uc-front/categories.html +++ b/categories.html @@ -35,7 +35,7 @@ ? @@ -53,7 +53,7 @@ ? @@ -68,7 +68,7 @@ ? @@ -86,7 +86,7 @@ ? @@ -101,7 +101,7 @@ ? @@ -118,7 +118,7 @@ ? @@ -135,7 +135,7 @@ ? diff --git a/images/icon_128.png b/images/icon_128.png index 6b7ecb0..bf3cc09 100644 Binary files a/images/icon_128.png and b/images/icon_128.png differ diff --git a/images/icon_16.png b/images/icon_16.png index 08cde15..58422fa 100644 Binary files a/images/icon_16.png and b/images/icon_16.png differ diff --git a/images/icon_32.png b/images/icon_32.png index 15da1c5..bed4194 100644 Binary files a/images/icon_32.png and b/images/icon_32.png differ diff --git a/images/icon_48.png b/images/icon_48.png index 7270784..285c823 100644 Binary files a/images/icon_48.png and b/images/icon_48.png differ diff --git a/uc-front/assets/logo.svg b/images/logo.svg similarity index 100% rename from uc-front/assets/logo.svg rename to images/logo.svg diff --git a/uc-front/assets/test.jpg b/images/test.jpg similarity index 100% rename from uc-front/assets/test.jpg rename to images/test.jpg diff --git a/options.html b/options.html index da81222..c6bfa5e 100644 --- a/options.html +++ b/options.html @@ -4,20 +4,23 @@ - Parse Policies - Options - - + + + + + Document - - Go to start -

Parse Policies - Options

- - +
+ U Control +
+ You are one step closer
+ more control over your data +
+ Get Started +
diff --git a/popup.css b/popup.css index a4f8164..9c4d8fb 100644 --- a/popup.css +++ b/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 { - background-color: currentColor; +button.active { + background-color: #1834e9; } button.current { box-shadow: 0 0 0 2px white, 0 0 0 4px black; } -h1, -h2 { - font-size: 1rem; - margin: 8px 0; +header { + display: flex; + justify-content: space-between; } -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%; } diff --git a/popup.html b/popup.html index 198bd60..535c611 100644 --- a/popup.html +++ b/popup.html @@ -2,15 +2,28 @@ + + + -

Parse Policies

- -
-

Selected categories

- - -
+
+

Ucontrol

+ +
+ + diff --git a/popup.js b/popup.js index 3ce10db..a2926c8 100644 --- a/popup.js +++ b/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) { - item = document.createElement("li"); - item.innerHTML = categories[category].title; + let reference = selectedList.querySelector(".category.reference"); + + 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({ diff --git a/start.html b/start.html deleted file mode 100644 index adf4a97..0000000 --- a/start.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - Document - - - Start test - - \ No newline at end of file diff --git a/uc-front/style.css b/style.css similarity index 98% rename from uc-front/style.css rename to style.css index 2ee79e0..97168eb 100644 --- a/uc-front/style.css +++ b/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 { diff --git a/test.html b/test.html deleted file mode 100644 index f263d74..0000000 --- a/test.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - Document - - -

- 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. -

- -

Location tempor eheh ahah

- -

Usage of data

- - diff --git a/uc-front/tips.html b/tips.html similarity index 100% rename from uc-front/tips.html rename to tips.html diff --git a/uc-front/accordion.js b/uc-front/accordion.js deleted file mode 100644 index 59b5f19..0000000 --- a/uc-front/accordion.js +++ /dev/null @@ -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; - } - } -}); diff --git a/uc-front/assets/logo type.svg b/uc-front/assets/logo type.svg deleted file mode 100644 index cd16cc5..0000000 --- a/uc-front/assets/logo type.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - CONTROL - - - - - - - - - diff --git a/uc-front/assets/logo.png b/uc-front/assets/logo.png deleted file mode 100644 index 51573b0..0000000 Binary files a/uc-front/assets/logo.png and /dev/null differ diff --git a/uc-front/index.html b/uc-front/index.html deleted file mode 100644 index e28a44e..0000000 --- a/uc-front/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - - - - - Document - - -
- U Control -
- You are one step closer
- more control over your data -
- Get Started -
- -