-
Notifications
You must be signed in to change notification settings - Fork 2
/
extension.html
196 lines (185 loc) · 13.3 KB
/
extension.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html style="font-size: 16px;" lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="page_type" content="np-template-header-footer-from-plugin">
<title>extension</title>
<link rel="stylesheet" href="nicepage.css" media="screen">
<link rel="stylesheet" href="extension.css" media="screen">
<script class="u-script" type="text/javascript" src="jquery.js" defer=""></script>
<script class="u-script" type="text/javascript" src="nicepage.js" defer=""></script>
<script class="u-script" type="text/javascript" src="scroll.js" defer=""></script>
<meta name="generator" content="Nicepage 4.6.5, nicepage.com">
<link rel="icon" href="images/favicon.png">
<link id="u-theme-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Martel:200,300,400,600,700,800,900">
<link id="u-page-google-font" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i">
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "Organization",
"name": "TL-DR",
"logo": "images/HackCUTL-DRLogo1.png"
}</script>
<meta name="theme-color" content="#5c5c9f">
<meta property="og:title" content="extension">
<meta property="og:description" content="">
<meta property="og:type" content="website">
</head>
<body class="u-body u-xl-mode"><header class="u-clearfix u-header u-header" id="sec-a4a3"><div class="u-clearfix u-sheet u-sheet-1">
<a href="index.html" data-page-id="588211795" class="u-image u-logo u-image-1" data-image-width="500" data-image-height="500" title="index">
<img src="images/HackCUTL-DRLogo1.png" class="u-logo-image u-logo-image-1">
</a>
<nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1">
<div class="menu-collapse" style="font-size: 1.25rem; letter-spacing: 0px; font-weight: 700;">
<a class="u-button-style u-custom-active-border-color u-custom-border u-custom-border-color u-custom-borders u-custom-color u-custom-hover-border-color u-custom-left-right-menu-spacing u-custom-padding-bottom u-custom-text-active-color u-custom-text-color u-custom-text-hover-color u-custom-top-bottom-menu-spacing u-nav-link u-text-active-palette-1-base u-text-hover-palette-2-base" href="#">
<svg class="u-svg-link" viewBox="0 0 24 24"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-hamburger"></use></svg>
<svg class="u-svg-content" version="1.1" id="menu-hamburger" viewBox="0 0 16 16" x="0px" y="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g><rect y="1" width="16" height="2"></rect><rect y="7" width="16" height="2"></rect><rect y="13" width="16" height="2"></rect>
</g></svg>
</a>
</div>
<div class="u-custom-menu u-nav-container">
<ul class="u-custom-font u-heading-font u-nav u-spacing-20 u-unstyled u-nav-1"><li class="u-nav-item"><a class="u-border-active-grey-30 u-border-hover-grey-30 u-button-style u-nav-link u-text-active-custom-color-1 u-text-grey-90 u-text-hover-custom-color-3" href="extension.html" style="padding: 10px 30px;">extension</a>
</li><li class="u-nav-item"><a class="u-border-active-grey-30 u-border-hover-grey-30 u-button-style u-nav-link u-text-active-custom-color-1 u-text-grey-90 u-text-hover-custom-color-3" href="visuals.html" style="padding: 10px 26px 10px 30px;">visuals</a>
</li></ul>
</div>
<div class="u-custom-menu u-nav-container-collapse">
<div class="u-black u-container-style u-inner-container-layout u-opacity u-opacity-95 u-sidenav">
<div class="u-inner-container-layout u-sidenav-overflow">
<div class="u-menu-close"></div>
<ul class="u-align-center u-nav u-popupmenu-items u-unstyled u-nav-2"><li class="u-nav-item"><a class="u-button-style u-nav-link" href="extension.html" style="padding: 10px;">extension</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link" href="visuals.html" style="padding: 10px;">visuals</a>
</li></ul>
</div>
</div>
<div class="u-black u-menu-overlay u-opacity u-opacity-70"></div>
</div>
</nav>
</div></header>
<section class="u-align-center u-clearfix u-custom-color-1 u-section-1" id="sec-0610">
<div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
<div class="u-container-style u-group u-group-1">
<div class="u-container-layout u-container-layout-1">
<h5 class="u-align-center u-text u-text-default u-text-1">
<a class="u-active-none u-border-none u-btn u-button-link u-button-style u-hover-none u-none u-text-body-alt-color u-btn-1" href="https://github.com/Oceanestars/Super-Knockout">download</a>
</h5>
<h2 class="u-align-center u-custom-font u-font-montserrat u-text u-text-default u-text-2">TL-DR</h2>
<p class="u-align-center u-text u-text-3"><b>
<span style="font-weight: 400; font-style: normal;">This Chrome extension provides users with highlights of the terms and conditions of websites that are known to collect data. They will provide this information when people are considering signing up for a service and when they are using the service.</span> </b>
</p>
</div>
</div>
</div>
</section>
<section class="hideme u-clearfix u-section-2" id="sec-7b3a">
<div class="u-clearfix u-sheet u-sheet-1">
<h1 class="u-align-center u-text u-text-default u-text-1">features</h1>
<div class="u-clearfix u-expanded-width u-gutter-10 u-layout-wrap u-layout-wrap-1">
<div class="u-layout">
<div class="u-layout-row">
<div class="u-align-left u-container-style u-layout-cell u-left-cell u-size-20 u-size-20-md u-white u-layout-cell-1" src="">
<div class="u-container-layout u-valign-top u-container-layout-1" src="">
<h2 class="u-align-right u-text u-text-2">sleek and simple interface</h2>
</div>
</div>
<div class="u-align-left u-container-style u-image u-image-contain u-layout-cell u-size-20 u-size-20-md u-image-1" src="" data-image-width="610" data-image-height="600">
<div class="u-container-layout u-valign-middle u-container-layout-2" src=""></div>
</div>
<div class="u-align-left u-container-style u-layout-cell u-right-cell u-size-20 u-size-20-md u-white u-layout-cell-3">
<div class="u-container-layout u-valign-bottom u-container-layout-3">
<p class="u-text u-text-3">Clicking on the extension opens up a panel that is both easy to read and navigate. This panel has three options to toggle between: Terms Made Easy, Read the Full Terms, and Resources.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hideme u-align-center u-clearfix u-section-3" id="sec-45b3">
<div class="u-clearfix u-sheet u-valign-middle-lg u-valign-middle-md u-valign-middle-sm u-valign-middle-xl u-sheet-1">
<div class="u-expanded-width u-tabs u-tabs-1">
<ul class="u-border-1 u-border-grey-25 u-tab-list u-unstyled" role="tablist">
<li class="u-tab-item" role="presentation">
<a class="active u-active-white u-border-2 u-border-active-grey-15 u-border-hover-grey-15 u-border-no-bottom u-button-style u-tab-link u-text-active-palette-2-base u-text-hover-custom-color-3 u-tab-link-1" id="link-tab-0da5" href="#tab-0da5" role="tab" aria-controls="tab-0da5" aria-selected="true">Terms Made Easy</a>
</li>
<li class="u-tab-item u-tab-item-2" role="presentation">
<a class="u-active-white u-border-2 u-border-active-grey-15 u-border-hover-grey-15 u-border-no-bottom u-button-style u-tab-link u-text-active-palette-2-base u-text-hover-custom-color-3 u-tab-link-2" id="link-tab-6ddf" href="#tab-6ddf" role="tab" aria-controls="tab-6ddf" aria-selected="false">Read the Full Terms</a>
</li>
<li class="u-tab-item u-tab-item-3" role="presentation">
<a class="u-active-white u-border-2 u-border-active-grey-15 u-border-hover-grey-15 u-border-no-bottom u-button-style u-tab-link u-text-active-palette-2-base u-text-hover-custom-color-3 u-tab-link-3" id="link-tab-c9ec" href="#tab-c9ec" role="tab" aria-controls="tab-c9ec" aria-selected="false">Resources</a>
</li>
</ul>
<div class="u-tab-content">
<div class="u-align-left u-container-style u-tab-active u-tab-pane u-white" id="tab-0da5" role="tabpanel" aria-labelledby="link-tab-0da5">
<div class="u-container-layout u-container-layout-1">
<img alt="" class="u-expanded-width-xs u-image u-image-contain u-image-default u-image-1" data-image-width="610" data-image-height="600" src="images/netflix-short2.png">
<h4 class="u-text u-text-1">Terms Made Easy</h4>
<ul class="u-spacing-31 u-text u-text-2">
<li>
<div class="class u-list-icon"></div>
<span style="font-size: 1.25rem;">Viewer-friendly bullet pointed list of information</span>
</li>
<li>
<div class="class u-list-icon"></div>
<span style="font-size: 1.25rem;">Outlines important terms and conditions of viewed site</span>
</li>
<li>
<div class="class u-list-icon"></div>
<span style="font-size: 1.25rem;">Encourages users to stay informed</span>
</li>
</ul>
</div>
</div>
<div class="u-align-left u-container-style u-tab-pane u-white u-tab-pane-2" id="tab-6ddf" role="tabpanel" aria-labelledby="link-tab-6ddf">
<div class="u-container-layout u-container-layout-2">
<img alt="" class="u-expanded-width-xs u-image u-image-default u-image-2" data-image-width="1291" data-image-height="729" src="images/netflix-full.png">
<h4 class="u-text u-text-3">Read the Full Terms</h4>
<ul class="u-spacing-31 u-text u-text-4">
<li>
<div class="class u-list-icon"></div>
<span style="font-size: 20px;">View the full terms of a platform in a popout page</span>
</li>
<li>
<div class="class u-list-icon"></div>
<span style="font-size: 1.25rem;">Allows for comparison between full and simplified terms and conditions</span>
</li>
</ul>
</div>
</div>
<div class="u-align-left u-container-style u-tab-pane u-white u-tab-pane-3" id="tab-c9ec" role="tabpanel" aria-labelledby="link-tab-c9ec">
<div class="u-container-layout u-container-layout-3">
<h4 class="u-text u-text-5">Resources</h4>
<img alt="" class="u-expanded-width-xs u-image u-image-contain u-image-default u-image-3" data-image-width="595" data-image-height="558" src="images/resources2.png">
<ul class="u-spacing-31 u-text u-text-6">
<li>
<span style="font-size: 1.25rem;"> Links to additional information, includes both readings and videos</span>
</li>
<li>
<span style="font-size: 1.25rem;">Consider: Why Read Terms and Conditions?<br>
</span>
</li>
<li>
<span style="font-size: 1.25rem;">Consider: How to Scan Terms and Conditions?</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hideme u-clearfix u-image u-image-contain u-section-4" id="sec-e93e" data-image-width="1920" data-image-height="1080">
<div class="u-clearfix u-sheet u-sheet-1"></div>
</section>
<footer class="u-align-center u-clearfix u-footer u-grey-80 u-footer" id="sec-4299"><div class="u-clearfix u-sheet u-valign-middle u-sheet-1">
<p class="u-align-center u-small-text u-text u-text-variant u-text-1">
<span style="font-style: italic;"><i> </i>
<span style="font-style: normal;">Copyright 2022</span><i>
<a href="https://github.com/Oceanestars/Super-Knockout" class="u-active-none u-border-none u-btn u-button-link u-button-style u-hover-none u-none u-text-active-custom-color-2 u-text-body-alt-color u-text-hover-custom-color-3 u-btn-1">TL-DR</a> </i>
</span>| Made with <a href="https://nicepage.com/c/pricing-html-templates" class="u-active-none u-border-none u-btn u-button-link u-button-style u-hover-none u-none u-text-active-custom-color-2 u-text-body-alt-color u-text-hover-custom-color-3 u-btn-2">Nicepage</a>
<br>
</p>
</div></footer>
</body>
</html>