diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..0ea64b5 --- /dev/null +++ b/TODO.md @@ -0,0 +1,16 @@ +- tips icon ✅ +- tips highlight ✅ +- link style ✅ +- footer logo ✅ +- footer sentence ✅ +- reduce general fontsize ✅ +- read more about ✅ +- change picture ✅ + +- style filtered page (max-width) +- highlight fitltered page ✅ +- fix small typo in filtered page ✅ + +- style popup button +- style popup link + diff --git a/about.html b/about.html index 1126fd9..a9a5b0e 100644 --- a/about.html +++ b/about.html @@ -4,6 +4,7 @@ +
-

- U control is a Chrome extension that is all about regaining control.
- For my graduation I researched the topic of privacy policy's. During my research I - found out that a large proportion do not read these terms and thus have no idea what - they are agreeing to. This document which should be for the user only makes it - unattractive for the consumer to read it. This is due to the long texts, unappealing - design and legal terms. -

+
+
+

+ U control is a Chrome extension that is all about regaining control.
+ For my graduation I researched the topic of privacy policy's. During my + research I found out that a large proportion do not read these terms and + thus have no idea what they are agreeing to. This document which should be + for the user only makes it unattractive for the consumer to read it. This is + due to the long texts, unappealing design and legal terms. +

-

- By agreeing to this condition you lose some control over your personal data. I want - to give this piece of control and awareness back to the user with my tool. The tool - was created by and for the user because I listened to the user's needs for a change. - The tool helps you while reading because it simplifies the texts of conditions and - the legal meaning. -

-

- With this tool, I'm not saying that you shouldn't use these big platforms like - Instagram and Facebook because of their long and difficult terms. I only want to - inform you as user about the dangers and then give tips on how he/she can turn off - certain functions so that less data is collected from you, for example. So we don't - have to be completely against privacy terms, we just need a fair transparent start. -

+

+ By agreeing to this condition you lose some control over your personal data. + I want to give this piece of control and awareness back to the user with my + tool. The tool was created by and for the user because I listened to the + user's needs for a change. The tool helps you while reading because it + simplifies the texts of conditions and the legal meaning. +

+

+ With this tool, I'm not saying that you shouldn't use these big platforms + like Instagram and Facebook because of their long and difficult terms. I + only want to inform you as user about the dangers and then give tips on how + he/she can turn off certain functions so that less data is collected from + you, for example. So we don't have to be completely against privacy terms, + we just need a fair transparent start. +

+
+ +

“A fresh start for the people.”

- + User testing Ucontrol
diff --git a/categories.html b/categories.html index 5f4742b..be9a4e9 100644 --- a/categories.html +++ b/categories.html @@ -147,36 +147,37 @@ diff --git a/images/Facebook.png b/images/Facebook.png deleted file mode 100644 index 64d5402..0000000 Binary files a/images/Facebook.png and /dev/null differ diff --git a/images/Instagram.png b/images/Instagram.png deleted file mode 100644 index 6be51fe..0000000 Binary files a/images/Instagram.png and /dev/null differ diff --git a/images/Snapchat.png b/images/Snapchat.png deleted file mode 100644 index 02f0456..0000000 Binary files a/images/Snapchat.png and /dev/null differ diff --git a/images/Telegram.png b/images/Telegram.png deleted file mode 100644 index c36fb03..0000000 Binary files a/images/Telegram.png and /dev/null differ diff --git a/images/TikTok.png b/images/TikTok.png deleted file mode 100644 index 2bf2104..0000000 Binary files a/images/TikTok.png and /dev/null differ diff --git a/images/WeChat.png b/images/WeChat.png deleted file mode 100644 index 180b67a..0000000 Binary files a/images/WeChat.png and /dev/null differ diff --git a/images/Whatsapp.png b/images/Whatsapp.png deleted file mode 100644 index f28aa61..0000000 Binary files a/images/Whatsapp.png and /dev/null differ diff --git a/images/Youtube.png b/images/Youtube.png deleted file mode 100644 index 973dee6..0000000 Binary files a/images/Youtube.png and /dev/null differ diff --git a/images/blue/Facebook_blue-02.svg b/images/blue/Facebook_blue-02.svg new file mode 100644 index 0000000..e95009c --- /dev/null +++ b/images/blue/Facebook_blue-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/blue/Telegram_blue-02.svg b/images/blue/Telegram_blue-02.svg new file mode 100644 index 0000000..4c6dbef --- /dev/null +++ b/images/blue/Telegram_blue-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/blue/TikTok-02.svg b/images/blue/TikTok-02.svg new file mode 100644 index 0000000..33814a5 --- /dev/null +++ b/images/blue/TikTok-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/blue/WeChat-02.svg b/images/blue/WeChat-02.svg new file mode 100644 index 0000000..03b228a --- /dev/null +++ b/images/blue/WeChat-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/blue/Whatsapp_blue-02.svg b/images/blue/Whatsapp_blue-02.svg new file mode 100644 index 0000000..605475a --- /dev/null +++ b/images/blue/Whatsapp_blue-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/blue/instagram_blue-02.svg b/images/blue/instagram_blue-02.svg new file mode 100644 index 0000000..f5df64e --- /dev/null +++ b/images/blue/instagram_blue-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/blue/snapchat_blue-02.svg b/images/blue/snapchat_blue-02.svg new file mode 100644 index 0000000..f6bfea4 --- /dev/null +++ b/images/blue/snapchat_blue-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/blue/youtube_blue-02.svg b/images/blue/youtube_blue-02.svg new file mode 100644 index 0000000..642bd0b --- /dev/null +++ b/images/blue/youtube_blue-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/cover.jpg b/images/cover.jpg new file mode 100644 index 0000000..185dbfc Binary files /dev/null and b/images/cover.jpg differ diff --git a/images/icon/arrow-02.svg b/images/icon/arrow-02.svg new file mode 100644 index 0000000..bb4d189 --- /dev/null +++ b/images/icon/arrow-02.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon/aware-02.svg b/images/icon/aware-02.svg new file mode 100644 index 0000000..d1bcefc --- /dev/null +++ b/images/icon/aware-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon/brave-02.svg b/images/icon/brave-02.svg new file mode 100644 index 0000000..379a330 --- /dev/null +++ b/images/icon/brave-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon/chrome-02.svg b/images/icon/chrome-02.svg new file mode 100644 index 0000000..acac52c --- /dev/null +++ b/images/icon/chrome-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon/incognito-02.svg b/images/icon/incognito-02.svg new file mode 100644 index 0000000..ef3f4a9 --- /dev/null +++ b/images/icon/incognito-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon/longtekst-02.svg b/images/icon/longtekst-02.svg new file mode 100644 index 0000000..cedf513 --- /dev/null +++ b/images/icon/longtekst-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon/photo-02.svg b/images/icon/photo-02.svg new file mode 100644 index 0000000..751496a --- /dev/null +++ b/images/icon/photo-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon/reading-02.svg b/images/icon/reading-02.svg new file mode 100644 index 0000000..a422ab7 --- /dev/null +++ b/images/icon/reading-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon/search-02.svg b/images/icon/search-02.svg new file mode 100644 index 0000000..3ea1695 --- /dev/null +++ b/images/icon/search-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon/setting-02.svg b/images/icon/setting-02.svg new file mode 100644 index 0000000..65cab0c --- /dev/null +++ b/images/icon/setting-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icon/settingsoff-02.svg b/images/icon/settingsoff-02.svg new file mode 100644 index 0000000..46a9c04 --- /dev/null +++ b/images/icon/settingsoff-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/test.jpg b/images/test.jpg deleted file mode 100644 index 1e87e0c..0000000 Binary files a/images/test.jpg and /dev/null differ diff --git a/popup.js b/popup.js index 42d7c17..279e0db 100644 --- a/popup.js +++ b/popup.js @@ -57,21 +57,16 @@ function highlightSelected(active) { "*:not(html, body, head, script, meta, style, noscript, link)" )) { el.style.display = active ? "none" : ""; - - // el.style.visibility = active ? "hidden" : "visible"; - // el.style.backgroundColor = ""; - // el.style.color = ""; } if (active) { let container = document.createElement("div"); container.id = "UcontrolFiltered"; - container.style.position = "absolute"; - container.style.top = 0; - container.style.left = 0; + container.style.padding = "32px"; - container.style.fontSize = "24px"; + container.style.fontSize = "36px"; container.style.lineHeight = 1.6; + container.style.maxWidth = "65ch"; let marker = document.createElement("span"); marker.style.display = "inline-block"; @@ -92,29 +87,17 @@ function highlightSelected(active) { if (!container.textContent.includes(finding.textContent)) { let wrapped = document.createElement("div"); wrapped.style.marginBottom = "16px"; - wrapped.innerHTML = finding.textContent; + wrapped.innerHTML = finding.textContent + .replace(/^[\W_]+/g, "") + .replace("we may", highlight("we may")) + .replace("We may", highlight("We may")) + .replace("your rights", highlight("your rights")) + .replace("rights", highlight("rights")); wrapped.prepend(marker.cloneNode()); container.appendChild(wrapped); } - // v1 - - // wrapped.style.visibility = "visible"; - // wrapped.style.backgroundColor = "#1834e9"; - // wrapped.style.color = "white"; - - // let target = finding.parentElement; - // target.replaceChild(wrapped, finding); - - // v0 - - // wrapped.style.display = ""; - // let upper = target; - // while (upper.parentElement) { - // upper.style.display = ""; - // upper = upper.parentElement; - // } } document.body.appendChild(container); } @@ -123,6 +106,15 @@ function highlightSelected(active) { } }); + var highlight = function (text) { + let stroke = document.createElement("span"); + stroke.style.color = "white"; + stroke.style.backgroundColor = "#1834e9"; + stroke.style.padding = "0 4px"; + stroke.innerHTML = text; + return stroke.outerHTML; + }; + var rejectScriptTextFilter = { acceptNode: function (node) { if (node.parentNode.nodeName !== "SCRIPT") { diff --git a/readmore.js b/readmore.js new file mode 100644 index 0000000..763edf0 --- /dev/null +++ b/readmore.js @@ -0,0 +1,11 @@ +const readMore = document.querySelector("#read-more"); + +window.addEventListener("load", () => { + const contents = document.querySelector(".about .accordion .contents"); + contents.style.maxHeight = contents.querySelector(".excerpt").clientHeight + "px"; + + readMore.addEventListener("click", () => { + contents.style.maxHeight = contents.scrollHeight + "px"; + readMore.remove(); + }); +}); diff --git a/style.css b/style.css index e1a7183..9c4b729 100644 --- a/style.css +++ b/style.css @@ -8,7 +8,7 @@ html, body { - font-size: 24px; + font-size: 21px; line-height: 1.6; font-family: "Sora", sans-serif; color: #333; @@ -65,15 +65,23 @@ nav { } a { - color: currentColor; + position: relative; + color: var(--color); text-decoration: none; - font-style: italic; +} + +a:after { + content: "🡕"; } nav a { font-style: normal; } +nav a:after { + content: ""; +} + nav a + a { margin-left: 32px; } @@ -95,6 +103,13 @@ a.current:after { background-color: var(--color); } +strong { + background-color: var(--color); + color: white; + font-weight: normal; + padding: 0 4px; +} + header { text-align: center; padding: 96px 24px; @@ -113,7 +128,7 @@ header .description { } main.tips { - padding: 24px; + padding: 8px; display: flex; justify-content: center; align-items: flex-start; @@ -134,7 +149,7 @@ main.tips .card { .tips .card .title { font-weight: 400; - font-size: 32px; + font-size: 28px; text-align: center; color: var(--color); margin-bottom: 48px; @@ -149,12 +164,12 @@ main.tips .card { list-style: none; } -.card li:before { +/* .card li:before { content: "—"; font-weight: 800; color: #8bebbb; margin-right: 4px; -} +} */ .card li + li { margin-top: 24px; @@ -320,10 +335,22 @@ input:checked + .slider:before { } footer { - margin-top: 128px; + margin-top: 64px; margin-bottom: 32px; display: flex; justify-content: center; + flex-wrap: wrap; +} + +footer a:after { + content: ""; +} + +footer .outro { + text-align: center; + flex-basis: 100%; + margin: 24px auto; + font-size: 18px; } .logo { @@ -347,6 +374,29 @@ footer { transform: scale(1.1); } +img.icon { + display: inline-block; + width: 1.5em; + height: 1.5em; + vertical-align: middle; +} + +.about .accordion .contents { + overflow: hidden; + transition: all 0.4s ease; +} + +.about .accordion button { + cursor: pointer; + background: none; + color: var(--color); + border: none; + font-size: 18px; + display: block; + margin: 0 auto; + margin-top: 24px; +} + @media (max-width: 991.98px) { html, body { diff --git a/tips.html b/tips.html index 17b0f28..e7c710e 100644 --- a/tips.html +++ b/tips.html @@ -33,17 +33,20 @@

Settings