-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtutorial.html
174 lines (174 loc) · 11.1 KB
/
tutorial.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Blacklist
</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="project.css">
</head>
<body>
<div id="topbar">
<ul id="navbar">
<li><a href="#Mission" id="navList">Mission</a></li>
<li><a href="#Tutorial" id="navList">Tutorial</a></li>
<li><a href="#Download" id="navList">Download</a></li>
<li><a href="#Presets" id="navList">Presets</a></li>
</ul>
</div>
<div id= "title">
<h1> Blacklist</h1>
</div>
<div id="Mission">
<div id = "statement">
<p>"Giving content control back to the user."</p>
</div>
<div id = 'mission'>
<h1> Our Mission </h1>
<p> INFORMATION IS EVERYWHERE. More recorded information has been produced in the past two years than in all
the previous history of the human race.
<br>
<p> With a surplus of information so readily available on the internet, it is easy to come across content that one would
not wish to view. Blacklist seeks to give users control over the content that they view on a daily basis through
a user-friendly Chrome extension. The Chrome extension uses redaction to block out text that has been "blacklisted"
so that the content is not visible to the users on any website that is viewed. Whether it is a veteran suffering PTSD attemping
to avoid media coverage of war or a parent striving to monitor their child's online activity, Blacklist seeks to serve a
diverse range of users.</p>
</div>
</div>
<marquee behavior="scroll" direction="left">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBCE83pHTGHUz6hbqO-fnDW0NYTPkTUl73MWhzUoHrU1juy3is" width="500" height="300" alt="kidcell"/>
<img src="http://divimir.com/wp-content/uploads/2017/10/avatarka.jpg" width="500" height="300" alt="Parents" />
<img src="https://news.psu.edu/sites/default/files/styles/threshold-992/public/iStock-881635170.jpg?itok=icW3RdIs" width="500" height="300" alt="adults"/>
<img src="http://programminglibrarian.org/sites/default/files/resized_high-school-students-at-computers.jpg" width="500" height="300" alt="Teens"/>
<img src="http://www.slate.com/content/dam/slate/articles/technology/future_tense/2013/10/131018_FT_LASchoolStudentsiPadHack.jpg.CROP.original-original.jpg" width="500" height="300" alt="placeholder"/>
<img src="http://www.faronics.com/assets/computers-can-actually-help-with-attention-spans-in-the-class_16001213_800825615_0_0_14022646_300.jpg" width="500" height="300" alt="Class"/>
<img src="https://ak0.picdn.net/shutterstock/videos/13145150/thumb/1.jpg" width="500" height="300" alt="adultcell"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTadxtk5yUeFzaBazC8RjiZC7IoPFYOYMLp7ScRBbyHu0aOIjP7" width="500" height="300" alt="Work"/>
<img src="https://www.lifewire.com/thmb/sUZzuO_42a6ZqpFjTX22r3qLRL8=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-112228848-5825fd543df78c6f6ac39b7b.jpg" width="500" height="300" alt="kidtablet"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTBCE83pHTGHUz6hbqO-fnDW0NYTPkTUl73MWhzUoHrU1juy3is" width="500" height="300" alt="kidcell"/>
<img src="http://divimir.com/wp-content/uploads/2017/10/avatarka.jpg" width="500" height="300" alt="Parents" />
<img src="https://news.psu.edu/sites/default/files/styles/threshold-992/public/iStock-881635170.jpg?itok=icW3RdIs" width="500" height="300" alt="adults"/>
<img src="http://programminglibrarian.org/sites/default/files/resized_high-school-students-at-computers.jpg" width="500" height="300" alt="Teens"/>
<img src="http://www.slate.com/content/dam/slate/articles/technology/future_tense/2013/10/131018_FT_LASchoolStudentsiPadHack.jpg.CROP.original-original.jpg" width="500" height="300" alt="placeholder"/>
<img src="http://www.faronics.com/assets/computers-can-actually-help-with-attention-spans-in-the-class_16001213_800825615_0_0_14022646_300.jpg" width="500" height="300" alt="Class"/>
<img src="https://ak0.picdn.net/shutterstock/videos/13145150/thumb/1.jpg" width="500" height="300" alt="adultcell"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTadxtk5yUeFzaBazC8RjiZC7IoPFYOYMLp7ScRBbyHu0aOIjP7" width="500" height="300" alt="Work"/>
<img src="https://www.lifewire.com/thmb/sUZzuO_42a6ZqpFjTX22r3qLRL8=/768x0/filters:no_upscale():max_bytes(150000):strip_icc()/GettyImages-112228848-5825fd543df78c6f6ac39b7b.jpg" width="500" height="300" alt="kidtablet"/>
</marquee>
<div id="Tutorial">
<br><br><br><br>
<h2>Tutorial</h2>
<br>
<b> Step One: Download the Extension </b>
<p>Click on the "Download extension" button below to download all the files that will make up the extension. A pop-up
will appear at the bottom of your screen- click on this to view the downloaded folder titled "Blacklist Content" that will
contain the files needed to run the extension.</p>
<br>
<b> Step Two: Enable Chrome Developer Mode </b>
<p> Chrome doesn’t allow the installation of extensions from anywhere
other than the Chrome Web Store, but getting around that is as simple- copy "chrome://extensions" into your URL
and check the box that says “Developer mode.” </p>
<br>
<b> Step Three: Preview Extension </b>
<p>A couple new buttons will appear right below, and you want to click “Load
unpacked extension,” which will open up to the file directory. Choose the
"Blacklist Content" folder you downloaded and confirm it by clicking “Select.”</p>
<br>
<img id="tutImage" src="https://9to5google.com/wp-content/uploads/sites/4/2015/06/extensionspagewborder.png">
<p> Now your extension should block your list of words! </p>
<br>
<b> Step Four: Open the Options </b>
<p> Click on the options icon in the top right corner (it looks like a square with an o inside) of your browser. From here you can
customize your options and enable the Blacklist of your choice.</p>
<ul class="enable">
<li>Redaction Color: This will be the color that blocks out the content on the page. Choose from white, black, or customize your
own color!</li>
<li>Click the checkbox to choose which Blacklist you want to enable.</li>
</ul>
<b> Disable at any time by visiting chrome://extensions and unchecking the enable box. </b>
</div>
<div id="Download">
<h5>Download</h5>
<!--<button onclick="window.open('https://drive.google.com/open?id=1RzO7JU6IkQJpQrmISVnVHqMC8ErhlAXF', '_blank')"type="button" class="btn"><i class="fa fa-download"></i>
Download extension</button> -->
<button type="button" class="btn"><i class="fa fa-download"></i><a href="css/blacklistextension.zip" download="blacklist-extension">
Download extension</a></button>
<br>
<br>
</div>
<div id="Presets">
<h1>Preset Blacklists</h1>
<p> The following section gives more background info about the blacklists that are found within the extension as well
as a sample of the blacklisted words.</p>
</div>
<div id="flex-container">
<div class="flex-item">
<h1>General Trauma</h1>
<p> When one faces domestic violence or suicide, it can be difficult to view certain content while coming to terms
with what occured.This preset enables users to freely search the web as they recover from any trauma they faced
without having to worry about viewing sensitive content.</p>
<i>Sample Words: violence, death, blood, assault</i>
<br>
<br>
<b>Resources: </b>
<ul class="resourceList">
<li><a href="https://www.sprc.org/">Suicide Prevention Resource Center</a></li>
<li><a href="http://www.thehotline.org/resources/">The National Domestic Violence Hotline</a></li>
<li><a href="https://rainn.org/about-national-sexual-assault-telephone-hotline">The National Sexual Assault Telephone Hotline</a></li>
</ul>
</div>
<div class="flex-item">
<h1>Military PTSD</h1>
<p> According to the U.S. Department of Veteran Affairs, veterans who experience PTSD may see their symptoms worsen
if they are exposed to reminders of their experiences through media coverage.
<p> This preset enables vets to browse the web freely without fear of coming across content that may raise stress
levels and worsen PTSD symptoms.
<br>
<br>
<i>Sample Words: war, terrorists, IED, gunshots, explosion</i>
<br>
<br>
<b>Resources: </b>
<ul class="resourceList">
<li><a href="https://www.ptsd.va.gov/public/types/war/terrorism-war-affect-vets.asp">U.S. Department of Veteran Affairs</a></li>
<li><a href="http://www.operationwearehere.com/PTSD.html">Operation We Are Here</a></li>
</ul>
</div>
<div class="flex-item">
<h1>Alcohol Abuse</h1>
<p> Individuals who have dealt with alcohol abuse have different triggers that may cause them to relapse. According to
Recovery.org, one of these triggers is societal pressures.</p>
<p>This preset enables individuals to browse the web, including
social media sites that may contain content that would make them more susceptible to relapse.</p>
<br>
<i>Sample Words: drinking, beer, social drinking </i>
<br>
<br>
<b>Resources: </b>
<ul class="resourceList">
<li><a href="https://www.aa.org/">Alcoholics Anonymous</a></li>
<li><a href="https://www.samhsa.gov/find-help/national-helpline">SAMHSA</a></li>
</ul>
</div>
<div class="flex-item">
<h1>Parental Controls</h1>
<p>According to the Pew Research Center, 1 in 3 parents are concerned about their children's digital habits.
From learning "bad words" to being exposed to explicit content, parents must monitor the activities of their
kids.</p>
<p> Parenting is hard. This preset makes your job a little easier by filtering out text content to protect your children
while online.</p>
<br>
<b>Resources: </b>
<ul class="resourceList">
<li><a href="https://www.safehome.org/resources/kid-safety-digital-age/">Safe Home</a></li>
<li><a href="https://www.unicefusa.org/stories/protecting-childrens-rights-digital-world/34346">Unicef USA</a></li>
</ul>
</div>
</div>
<div id= "trademark">
<p>Created by: Thomas Quintanilla, Abi Kunkle, and Marissa Beighley @ Google Computer Science Summer Institute 2018</p>
</div>
</body>
</html>