frontend
parent
e7e73b3460
commit
9446848335
@ -0,0 +1,12 @@
|
||||
<!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>
|
||||
@ -0,0 +1,58 @@
|
||||
<!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>About</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="categories.html">Categories</a>
|
||||
<a href="tips.html">Tips & tricks</a>
|
||||
<a href="about.html" class="current">About</a>
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<h1 class="title">What Ucontrol is</h1>
|
||||
</header>
|
||||
|
||||
<main class="about">
|
||||
<p>
|
||||
U control is a Chrome extension that is all about regaining control. <br />
|
||||
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.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<div class="big-card">
|
||||
<h2 class="quote">“A fresh start for the people.”</h2>
|
||||
<img src="assets/test.jpg" alt="" />
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,28 @@
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -0,0 +1,24 @@
|
||||
<?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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
@ -0,0 +1,12 @@
|
||||
<svg width="750" height="110" viewBox="0 0 750 110" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M156.398 94.4236C148.4 94.4236 141.533 93.0502 135.797 90.3034C130.061 87.4757 125.335 83.7998 121.619 79.2756C117.902 74.6706 115.156 69.7021 113.378 64.37C111.601 59.0379 110.712 53.8674 110.712 48.8585V46.1924C110.712 40.6179 111.601 35.1647 113.378 29.8326C115.236 24.4197 118.024 19.5319 121.74 15.1693C125.537 10.8067 130.263 7.33277 135.918 4.74751C141.574 2.16226 148.198 0.869629 155.793 0.869629C163.872 0.869629 171.021 2.40462 177.242 5.47462C183.544 8.46382 188.593 12.7053 192.39 18.1989C196.187 23.6118 198.409 29.9134 199.055 37.1036H176.515C175.95 34.0336 174.738 31.3676 172.88 29.1055C171.021 26.8434 168.638 25.1064 165.73 23.8946C162.821 22.6019 159.509 21.9556 155.793 21.9556C152.319 21.9556 149.168 22.5616 146.34 23.7734C143.593 24.9852 141.251 26.7222 139.312 28.9843C137.453 31.1656 135.999 33.8317 134.949 36.9824C133.979 40.1332 133.495 43.6879 133.495 47.6466C133.495 51.6053 133.979 55.16 134.949 58.3108C135.999 61.4616 137.494 64.168 139.433 66.4301C141.452 68.6922 143.876 70.4292 146.704 71.641C149.531 72.7721 152.763 73.3376 156.398 73.3376C162.054 73.3376 166.82 71.9642 170.698 69.2174C174.657 66.4705 177.04 62.7946 177.848 58.1896H200.388C199.661 64.8143 197.439 70.8735 193.723 76.3672C190.007 81.8609 184.998 86.2639 178.696 89.5762C172.395 92.8078 164.962 94.4236 156.398 94.4236Z" fill="white"/>
|
||||
<path d="M255.619 94.4236C247.54 94.4236 240.511 93.0502 234.533 90.3034C228.554 87.4757 223.586 83.7998 219.627 79.2756C215.668 74.6706 212.72 69.7021 210.781 64.37C208.842 59.0379 207.872 53.8674 207.872 48.8585V46.1924C207.872 40.6179 208.882 35.1647 210.902 29.8326C212.922 24.4197 215.951 19.5319 219.991 15.1693C224.03 10.8067 228.999 7.33277 234.896 4.74751C240.875 2.16226 247.782 0.869629 255.619 0.869629C263.375 0.869629 270.201 2.16226 276.099 4.74751C282.077 7.33277 287.086 10.8067 291.126 15.1693C295.165 19.5319 298.195 24.4197 300.214 29.8326C302.315 35.1647 303.365 40.6179 303.365 46.1924V48.8585C303.365 53.8674 302.355 59.0379 300.336 64.37C298.397 69.7021 295.448 74.6706 291.489 79.2756C287.531 83.7998 282.562 87.4757 276.584 90.3034C270.605 93.0502 263.617 94.4236 255.619 94.4236ZM255.619 73.3376C259.497 73.3376 262.971 72.6913 266.041 71.3987C269.111 70.106 271.736 68.2883 273.918 65.9454C276.099 63.6025 277.755 60.8961 278.886 57.8261C280.017 54.6753 280.583 51.2821 280.583 47.6466C280.583 43.7687 279.977 40.2544 278.765 37.1036C277.634 33.9528 275.978 31.2464 273.796 28.9843C271.615 26.7222 268.989 24.9852 265.919 23.7734C262.849 22.5616 259.416 21.9556 255.619 21.9556C251.741 21.9556 248.267 22.5616 245.197 23.7734C242.127 24.9852 239.501 26.7222 237.32 28.9843C235.139 31.2464 233.483 33.9528 232.351 37.1036C231.22 40.2544 230.655 43.7687 230.655 47.6466C230.655 51.2821 231.22 54.6753 232.351 57.8261C233.483 60.8961 235.139 63.6025 237.32 65.9454C239.501 68.2883 242.127 70.106 245.197 71.3987C248.267 72.6913 251.741 73.3376 255.619 73.3376Z" fill="white"/>
|
||||
<path d="M316.969 91.9999V3.53568H353.93L383.378 74.0647H387.619L385.196 76.246V3.53568H406.282V91.9999H369.078L339.63 21.4709H335.389L337.813 19.2896V91.9999H316.969Z" fill="white"/>
|
||||
<path d="M441.881 91.9999V20.7438H464.421V91.9999H441.881ZM417.644 23.1675V3.53568H488.658V23.1675H417.644Z" fill="white"/>
|
||||
<path d="M500.047 91.9999V2.80857H522.587V91.9999H500.047ZM553.368 91.9999L528.525 54.4329H553.004L579.301 91.9999H553.368ZM516.891 64.8547V47.5254H538.098C540.764 47.5254 543.067 47.0003 545.006 45.95C546.945 44.8998 548.439 43.4052 549.49 41.4662C550.621 39.5273 551.186 37.2652 551.186 34.6799C551.186 32.0139 550.621 29.7114 549.49 27.7725C548.439 25.8335 546.945 24.3389 545.006 23.2887C543.067 22.2384 540.764 21.7133 538.098 21.7133H516.891V2.80857H536.765C544.44 2.80857 551.065 3.98001 556.64 6.32291C562.214 8.58501 566.496 11.9782 569.485 16.5024C572.474 20.9458 573.969 26.4798 573.969 33.1045V35.0435C573.969 41.6682 572.434 47.2023 569.364 51.6457C566.375 56.0083 562.093 59.3207 556.518 61.5828C551.025 63.7641 544.44 64.8547 536.765 64.8547H516.891Z" fill="white"/>
|
||||
<path d="M632.188 94.4236C624.109 94.4236 617.081 93.0502 611.102 90.3034C605.124 87.4757 600.155 83.7998 596.197 79.2756C592.238 74.6706 589.289 69.7021 587.35 64.37C585.411 59.0379 584.442 53.8674 584.442 48.8585V46.1924C584.442 40.6179 585.452 35.1647 587.471 29.8326C589.491 24.4197 592.521 19.5319 596.56 15.1693C600.6 10.8067 605.568 7.33277 611.466 4.74751C617.444 2.16226 624.352 0.869629 632.188 0.869629C639.944 0.869629 646.771 2.16226 652.668 4.74751C658.647 7.33277 663.656 10.8067 667.695 15.1693C671.735 19.5319 674.764 24.4197 676.784 29.8326C678.884 35.1647 679.935 40.6179 679.935 46.1924V48.8585C679.935 53.8674 678.925 59.0379 676.905 64.37C674.966 69.7021 672.017 74.6706 668.059 79.2756C664.1 83.7998 659.131 87.4757 653.153 90.3034C647.175 93.0502 640.186 94.4236 632.188 94.4236ZM632.188 73.3376C636.066 73.3376 639.54 72.6913 642.61 71.3987C645.68 70.106 648.306 68.2883 650.487 65.9454C652.668 63.6025 654.325 60.8961 655.456 57.8261C656.587 54.6753 657.152 51.2821 657.152 47.6466C657.152 43.7687 656.546 40.2544 655.334 37.1036C654.203 33.9528 652.547 31.2464 650.366 28.9843C648.185 26.7222 645.559 24.9852 642.489 23.7734C639.419 22.5616 635.985 21.9556 632.188 21.9556C628.31 21.9556 624.836 22.5616 621.766 23.7734C618.696 24.9852 616.071 26.7222 613.89 28.9843C611.708 31.2464 610.052 33.9528 608.921 37.1036C607.79 40.2544 607.224 43.7687 607.224 47.6466C607.224 51.2821 607.79 54.6753 608.921 57.8261C610.052 60.8961 611.708 63.6025 613.89 65.9454C616.071 68.2883 618.696 70.106 621.766 71.3987C624.836 72.6913 628.31 73.3376 632.188 73.3376Z" fill="white"/>
|
||||
<path d="M693.539 91.9999V3.53568H716.079V91.9999H693.539ZM713.655 91.9999V72.3681H749.526V91.9999H713.655Z" fill="white"/>
|
||||
<path d="M79 61.1318C79.1 59.9318 79.1 58.8318 79.1 57.6318V5.23177H56.5V58.1318C56.5 59.2318 56.4 60.2318 56.3 61.1318H79Z" fill="white"/>
|
||||
<path d="M45.3 74.5318C43.6 74.9318 41.7 75.2318 39.6 75.2318C36 75.2318 32.9 74.5318 30.4 73.1318C27.9 71.7318 26 69.7318 24.6 67.1318C23.3 64.5318 22.6 61.5318 22.6 58.0318V5.13176H0V57.5318C0 65.4318 1.50001 72.3318 4.60001 78.1318C7.70001 83.9318 12.2 88.4318 18 91.5318C23.9 94.7318 31.1 96.2318 39.6 96.2318C41.6 96.2318 43.4 96.1318 45.3 95.9318V74.5318Z" fill="white"/>
|
||||
<path d="M70.1 75.1318C69.8 77.1318 69.2 78.9318 68.4 80.5318C67.1 83.1318 65.2 85.0318 62.7 86.4318C61.6 87.0318 60.4 87.5318 59.1 87.8318V109.432C65.2 108.832 70.5 107.432 75 104.932C80.9 101.732 85.3 97.3318 88.4 91.5318C90.9 86.8318 92.3 81.3318 92.8 75.1318H70.1Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
@ -0,0 +1,149 @@
|
||||
<!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;600;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script src="accordion.js" defer></script>
|
||||
<title>Ucontrol - Categories</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="categories.html" class="current">Categories</a>
|
||||
<a href="tips.html">Tips & tricks</a>
|
||||
<a href="about.html">About</a>
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<h1 class="title">Categories</h1>
|
||||
<div class="description">Fill in your preferences about topics that you care about</div>
|
||||
</header>
|
||||
|
||||
<main class="categories">
|
||||
<div class="accordion">
|
||||
<div class="header">
|
||||
<h3 class="title">The data they collect</h3>
|
||||
<label class="more-info">
|
||||
<input type="checkbox" />
|
||||
<span>?</span>
|
||||
</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="content">
|
||||
The data that platforms are allowed to collect from you when you accept their
|
||||
privacy policy.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="header">
|
||||
<h3 class="title">How do they use this data</h3>
|
||||
<label class="more-info">
|
||||
<input type="checkbox" />
|
||||
<span>?</span>
|
||||
</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="content">How this personal data is used by that platform.</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="header">
|
||||
<h3 class="title">Sharing data with other companies</h3>
|
||||
<label class="more-info">
|
||||
<input type="checkbox" />
|
||||
<span>?</span>
|
||||
</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="content">
|
||||
How your data or interactions on that relevant platform are passed on to other
|
||||
companies.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="header">
|
||||
<h3 class="title">Location use</h3>
|
||||
<label class="more-info">
|
||||
<input type="checkbox" />
|
||||
<span>?</span>
|
||||
</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="content">How they can use or track your location</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="header">
|
||||
<h3 class="title">The permission you give them</h3>
|
||||
<label class="more-info">
|
||||
<input type="checkbox" />
|
||||
<span>?</span>
|
||||
</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="content">
|
||||
The approval you give platforms by agreeing to their privacy policy.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="header">
|
||||
<h3 class="title">When you upload content</h3>
|
||||
<label class="more-info">
|
||||
<input type="checkbox" />
|
||||
<span>?</span>
|
||||
</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="content">
|
||||
What right they have if you upload content on their platform.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion">
|
||||
<div class="header">
|
||||
<h3 class="title">Account suspension or termination</h3>
|
||||
<label class="more-info">
|
||||
<input type="checkbox" />
|
||||
<span>?</span>
|
||||
</label>
|
||||
<label class="switch">
|
||||
<input type="checkbox" />
|
||||
<span class="slider round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="content">
|
||||
When you don't follow the guidelines of that platform and your account will be
|
||||
suspended or terminated.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<!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>
|
||||
@ -0,0 +1,364 @@
|
||||
:root {
|
||||
--color: #1834e9;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-size: 24px;
|
||||
line-height: 1.6;
|
||||
font-family: "Sora", sans-serif;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main.welcome {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
padding: 48px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
color: #ffffff;
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
.welcome .title {
|
||||
font-size: 128px;
|
||||
line-height: 1.2;
|
||||
margin: 24px 0;
|
||||
font-weight: 800;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.welcome .description {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.welcome .button {
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
background-color: #8bebbb;
|
||||
color: var(--color);
|
||||
margin-top: 64px;
|
||||
border-radius: 8px;
|
||||
padding: 8px 32px;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 32px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: currentColor;
|
||||
text-decoration: none;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
nav a {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
nav a + a {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
a.current {
|
||||
color: var(--color);
|
||||
font-weight: 600;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
a.current:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 96px 24px;
|
||||
}
|
||||
|
||||
header .title {
|
||||
color: var(--color);
|
||||
margin: 16px 0;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
header .description {
|
||||
max-width: 40ch;
|
||||
margin: 0 auto;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
main.tips {
|
||||
padding: 64px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
main.tips .card {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
flex-basis: 30%;
|
||||
display: inline-block;
|
||||
padding: 24px;
|
||||
|
||||
border: 1px solid #f2f5f8;
|
||||
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tips .card .title {
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
color: var(--color);
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card li {
|
||||
color: #333;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.card li:before {
|
||||
content: "—";
|
||||
font-weight: 800;
|
||||
color: #8bebbb;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.card li + li {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
main.about {
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
main.about p {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
max-width: 54ch;
|
||||
}
|
||||
|
||||
main.about p + p {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.big-card {
|
||||
margin: 96px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.big-card > .quote {
|
||||
width: 50%;
|
||||
font-size: 56px;
|
||||
color: var(--color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.big-card > img {
|
||||
width: 50%;
|
||||
max-height: 75vh;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.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: 25px;
|
||||
width: 25px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: var(--color);
|
||||
}
|
||||
|
||||
input:focus + .slider {
|
||||
box-shadow: 0 0 1px #b6c2e2;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
-webkit-transform: translateX(26px);
|
||||
-ms-transform: translateX(26px);
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
/* Rounded sliders */
|
||||
.slider.round {
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider.round:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.more-info {
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: 32px;
|
||||
position: relative;
|
||||
transition: all 0.4s;
|
||||
|
||||
color: #b6c2e2;
|
||||
}
|
||||
|
||||
.more-info input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.more-info span {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.more-info:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
padding: 24px 24px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
transition: height 0.4s ease;
|
||||
}
|
||||
|
||||
.accordion .header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.accordion + .accordion {
|
||||
border-top: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
.accordion .header .title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.accordion .content {
|
||||
max-width: 40ch;
|
||||
color: #999;
|
||||
transition: all 0.4s;
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
html,
|
||||
body {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
nav {
|
||||
font-size: 1rem;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
nav a + a {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
main.tips {
|
||||
display: block;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.tips .card .title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.tips .card + .card {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.big-card {
|
||||
display: block;
|
||||
margin: 24px;
|
||||
}
|
||||
.big-card .quote,
|
||||
.big-card img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.big-card .quote {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
<!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>About</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="categories.html">Categories</a>
|
||||
<a href="tips.html" class="current">Tips & tricks</a>
|
||||
<a href="about.html">About</a>
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<h1 class="title">Tips & tricks</h1>
|
||||
<div class="description">
|
||||
Here are some tips and tricks to improve your data use if you still want to use that
|
||||
certain platform
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="tips">
|
||||
<div class="card">
|
||||
<h3 class="title">Settings</h3>
|
||||
<ul>
|
||||
<li>
|
||||
By agreeing to the terms you automatically grant access to everything. You
|
||||
can also manually disable features to better protect your data. Turn off
|
||||
your location tracker. You can do this in your settings on your phone. This
|
||||
way you cannot be followed continuously.
|
||||
</li>
|
||||
<li>
|
||||
Disable access to the camera in your phone's settings for the apps that use
|
||||
them. Turn them off manually so that platforms you have an app from cannot
|
||||
continuously monitor your camera.
|
||||
</li>
|
||||
<li>
|
||||
Check the settings in the web account of the app you have. Many companies
|
||||
don't advertise with it but give you the option to turn off settings. These
|
||||
are often in the account settings under the headings: privacy and security,
|
||||
your data and your information.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3 class="title">While reading</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Watch out for sentences with <em>we may</em> in them. According to the law,
|
||||
privacy conditions must justify why they do something to users. They can
|
||||
justifying their actions by only using these words. After these words you
|
||||
often find sneaky phrases that you want to know more about.
|
||||
</li>
|
||||
<li>
|
||||
<em>Reason for processing</em>, <em>your rights</em> and
|
||||
<em>data leave third parties</em>. If any of these phrases are used in a
|
||||
sentence, you need to be extra careful as they are important sentences.
|
||||
</li>
|
||||
<li>
|
||||
If sentences are very long and are mainly made up of commas with, these are
|
||||
also sentences that you want to pay extra attention to. The confusing
|
||||
sentence structure is used to confuse the user while reading.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3 class="title">In general</h3>
|
||||
<ul>
|
||||
<li>
|
||||
Try to use the
|
||||
<a href="https://brave.com" target="_blank">Brave browser</a>. Brave blocks
|
||||
trackers and third-party cookies that monitor your activity as you travel
|
||||
across the web. But the browser also gives you control over what you do and
|
||||
don't want to be blocked.
|
||||
</li>
|
||||
<li>
|
||||
If you don't want Chrome recording your browsing history or websites
|
||||
tracking your activity, go into Incognito Mode. To open an incognito window
|
||||
in Chrome, click the three-dot icon on the top-right corner of the browser
|
||||
and select New incognito window.
|
||||
</li>
|
||||
<li>
|
||||
If you use Chrome as a browser, turn off certain functions manually. Go to
|
||||
three-dot icon on the top-right corner of the browser and go to settings.
|
||||
Then click on privacy and security and site settings. Click on the settings
|
||||
Do not allow sites to see your location and do not allow sites to use your
|
||||
camera to protect this data.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue