forked from Erkan-Yilmaz/ToS-DR
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.html
417 lines (367 loc) · 23.7 KB
/
search.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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Terms of Service; Didn't Read</title>
<meta name="description" content="Nobody wants to read the long Terms of Service many websites have. But it is important to understand what they say – these ratings make it easier.">
<meta name="author" content="Unhosted">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="shortcut icon" href="img/tosdr-icon-16.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/tosdr-icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/tosdr-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/tosdr-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="img/tosdr-icon-57.png">
<script src="js/jquery-1.7.1.min.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <!--http://j.mp/mobileviewport-->
<script>
function renderDataPoint(service, dataPoint) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'points/'+dataPoint+'.json', true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var obj, badge, icon, sign, score;
try {
obj = JSON.parse(xhr.responseText);
} catch(e) {
alert('Could not load data for data point '+dataPoint+', sorry! Refreshing the page might sometimes help.');
return;
}
if(obj.tosdr.point == 'good') {
badge = 'badge-success';
icon = 'thumbs-up';
sign = '+';
} else if(obj.tosdr.point == 'mediocre') {
badge = 'badge-warning';
icon = 'thumbs-down';
sign = '-';
} else if(obj.tosdr.point == 'alert') {
badge = 'badge-important';
icon = 'remove';
sign = '×';
} else if(obj.tosdr.point == 'not bad') {
badge = 'badge-neutral';
icon = 'hand-right';
sign = '→';
} else {
badge = '';
icon = 'question-sign';
sign = '?';
}
document.getElementById('point-'+service+'-'+dataPoint).innerHTML =
'<span class="badge '+badge+'" title="'+obj.tosdr.score+'">'
+'<i class="icon-'+icon+' icon-white">'+sign+'</i></span> '+obj.name+'</li>';
document.getElementById('popup-point-'+service+'-'+dataPoint).innerHTML =
'<div class="'+obj.tosdr.point+'"><h5><span class="badge '+badge
+'" title="'+obj.tosdr.point+'"><i class="icon-'+icon+' icon-white">'+sign+'</i></span> '+obj.name+' <a href="'+obj.discussion+'" target="_blank" class="label context">Discussion</a> <!--a href="'+obj.source.terms+'" class="label context" target="_blank">Terms</a--></h5><p>'
+obj.tosdr.tldr+'</p></div></li>';
}
}
};
xhr.send();
}
var serviceObjects = {};
function getServiceObject(name, cb) {
if(serviceObjects[name]) {
cb(serviceObjects[name]);
} else {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'services/'+name+'.json', true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
var obj;
try {
obj = JSON.parse(xhr.responseText);
serviceObjects[name]=obj;
} catch(e) {
console.log(xhr.responseText);
console.log(JSON.parse(xhr.responseText));
alert('Could not load data for '+name+', sorry! Refreshing the page might sometimes help.');
}
if(obj) {
cb(obj);
}
}
}
};
xhr.send();
}
}
function renderDetails(name, points) {
console.log('renderDetails '+name);
console.log(points);
getServiceObject(name, function(obj) {
var header = '<h3><img src="logo/'+name+'.png" class="favlogo" alt=""><a data-toggle="modal" href="#'+name+'-tosdr">'+obj.name+'</a>';
var rating;
var ratingText = {
0: "We haven't sufficiently reviewed the terms yet. Please contribute to our group: <a href=\"https:\/\/groups.google.com/d/forum/tosdr\">[email protected]</a>.",
"false": "We haven't sufficiently reviewed the terms yet. Please contribute to our group: <a href=\"https:\/\/groups.google.com/d/forum/tosdr\">[email protected]</a>.",
"A": "The terms of service treat you fairly, respect your rights and follows the best practices.",
"B": "The terms of services are fair towards the user but they could be improved.",
"C": "The terms of service are okay but some issues need your consideration.",
"D": "The terms of service are very uneven or there are some important issues that need your attention.",
"E": "The terms of service raise very serious concerns."
};
if(!obj.tosdr) {
obj.tosdr = {rated: false};
}
if(obj.tosdr.rated) {
rating = '<div id="'+name+'-rating" class="service-rating"><a data-toggle="modal" href="#'+name+'-tosdr"><span class="label '+obj.tosdr.rated+'">Class '+obj.tosdr.rated+'</span></a></div></h3>';
} else {
rating = '<div id="'+name+'-rating" class="service-rating"><a data-toggle="modal" href="#'+name+'-tosdr"><span class="label '+obj.tosdr.rated+'">No Class Yet</span></a></div></h3>';
}
var issues = '<section class="specificissues"><ul class="tosdr-points">'
for(var i=0; i<points.length; i++) {
issues += '<li id="point-'+name+'-'+points[i]+'"></li>';
}
issues += '</ul>';
document.getElementById(name).innerHTML=header+rating+issues+
'<a data-toggle="modal" href="#'+name+'-tosdr" class="btn"><i class="icon icon-eye-open"></i> Expand</a></section>';
renderPopup(name, obj.name, obj.url, obj.tosdr.rated, ratingText[obj.tosdr.rated], points);
for(var i=0; i<points.length; i++) {
renderDataPoint(name, points[i]);
}
});
}
function renderPopup(name, longName, domain, verdict, ratingText, points){
var headerHtml = '<div class="modal-header"><button data-dismiss="modal" class="close" type="button">×</button>'
+'<img src="logo/'+name+'.png" alt="" class="pull-left favlogo" height="36" >'
+'<h3>'+longName+' <small class="service-url"><i class="icon icon-globe"></i> <a href="http://'+domain+'" target="_blank">'+domain+'</a></small></h3></div> ';
var classHtml = '<div class="tosdr-rating"><label class="label '+verdict+'">'
+(verdict?'Class '+verdict:'No Class Yet')+'</label><p>'+ratingText+'</p></div>';
var pointsHtml = '';
for(var i=0; i<points.length; i++) {
pointsHtml += '<li id="popup-point-'+name+'-'+points[i]+'" class="point"></li>';
}
var footerHtml = '<div class="modal-footer"><a class="btn btn-primary" href="https://groups.google.com/forum/#!newtopic/tosdr">Feedback</a><a class="btn" data-dismiss="modal" href="#">Close</a></div>';
var bodyHtml = '<div class="modal-body">'+classHtml+'<section class="specificissues"> <ul class="tosdr-points">'+pointsHtml+'</ul></section><!--section><h4>Read the Terms</h4><ul class="tosback2"><li><a href="https://github.com/site/terms">Terms of Service</a></li><li><a href="https://help.github.com/privacy-policy">Privacy Policy</a></li><li><a href="https://help.github.com/security/">Security</a></li></ul></section--></div>';
document.getElementById(name+'-tosdr').innerHTML = headerHtml+bodyHtml+footerHtml;
}
function go() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'index/services.json', true);
xhr.onreadystatechange = function() {
if(xhr.readyState==4) {
if(xhr.status==200) {
try {
var services = JSON.parse(xhr.responseText);
console.log(services);
var last;
for(var i in services) {
if(last) {
document.getElementById('services-list').innerHTML += '<div class="row-fluid">'
+'<div id="'+last+'" class="span6 service-nutshell"></div>'
+'<div id="'+i+'" class="span6 service-nutshell"></div>'
+'</div>';
renderDetails(last, services[last]);
renderDetails(i, services[i]);
last=undefined;
} else {
last = i;
}
document.getElementById('popups').innerHTML +=
'<div id="'+i+'-tosdr" class="modal hide tosdr-infos" role="dialog"> </div>';
}
if(last) {
document.getElementById('services-list').innerHTML += '<div class="row-fluid">'
+'<div id="'+last+'" class="span6 service-nutshell"></div>'
+'</div>';
renderDetails(last, services[i]);
}
} catch(e) {
}
}
}
};
xhr.send();
}
</script>
</head>
<body onload="go();" id="index-html" >
<div class="navbar navbar-fixed-top" id="menu-options">
<div class="navbar-inner">
<div class="container">
<button type="button"class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">ToS;DR</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class=""><a href="#getinvolved">Get Involved</a></li>
<li class=""><a href="#services">Rated Services</a></li>
<li class=""><a href="#wthru">About</a></li>
<li class=""><a href="#classification">Classification</a></li>
<!-- <li class=""><a href="#categories">Categories</a></li>-->
</ul>
<p class="pull-right" style="padding-top:0.7em;">
<a class="twitter-follow-button" data-dnt="true" data-lang="en" data-show-count="false" href="https://twitter.com/tosdr">@tosdr on twitter</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</p>
</div>
<div id="remotestorage-connect"></div>
</div>
</div>
</div>
<div class="hero-unit">
<section class="container">
<div class="page-header"><h1>Terms of Service; Didn't Read</div>
<h2>“<em>I have read and agree to the Terms</em>” is the biggest lie on the web.
We aim to fix that.</h2>
<p>We are a user rights initiative to rate and label website terms & privacy policies, from very good <span class="label A">class A</span> to very bad <span class="label E">class E</span></p>
</section>
</div><!--hero-unit-->
<div class="container" id="tosdr-content" role="main">
<section id="getinvolved">
<div class="page-header"><h2><strong>Work in Progress</strong> – Get involved! <small>Analysis for terms, APIs, discussions</small></h2></div>
<p>ToS;DR is a young project started in June 2012. The data is subject to important changes. This is your opportunity to help us fix the “biggest lie on the web”: join us if you have information to contribute related to specific terms or if you have a comment, check out our <a href="get-involved.html">guide to get involved</a>.
</p>
<p>
ToS;DR aims at creating a transparent and peer-reviewed process to rate and analyse Terms of Service and Privacy Policies in order to create a rating from Class A to Class E. We need more legal expertise, please also join the working-group. We also need people to contribute source code. Everything is JavaScript and JSON. The data is freely available (CC-BY-SA) and ready to be used for other tools, like browser extensions.
</p>
<p class="pull-left">
<a href="https://groups.google.com/d/forum/tosdr" class="btn"><img src="img/icons/group.png" style="width:20px; opacity:0.6;" /> Join the working group</a>
<br />
<small>No Google account? <a href="mailto:[email protected]">Join by email</a></small>
</p>
<p>
<a href="http://webchat.freenode.net/?channels=#tosdr" class="btn"><img src="img/icons/conversation.png" style="width:20px; opacity:0.6;" /> Chat #tosdr on IRC</a>
<a href="http://github.com/didnotread/didnotread.org" class="btn"><img src="img/github.png" /> Source Code and Issues</a>
</p>
</section>
<section id="services">
<h2>Rated Services <small>What we have so far</small></h2>
<form class="well form-search" id="filter-services">
<div class="control-group">
<div class="controls">
<div class="input-append">
The input below should make use of the typeahead plugin from boostrap/Jquery see http://twitter.github.com/bootstrap/javascript.html#typeahead . So for instance, the user should automatically get suggestion for Fa… "Facebook"
<input type="text" size="16" data-provide="typeahead" data-items="4" data-source="" class="input-long search-query" id="appendedInputButtons" placehloder="Which service?" class="span2"><button type="button" class="btn">Search</button><!--button type="button" class="btn">Options</button-->
</div>
<div class="examples">
<small style="color:#999">e.g. Facebook, twitter.com, social network, search engine</small>
</div>
</div>
<div class="results">
<p>
We have found these services.
<a href="#">Not what you were looking for?</a>
</p>
</div>
</div>
<div class="options">
<label for="optionsCheckboxList" class="control-label">Options</label>
<div>
<!-- For now these options for free software and exportable data shoulf be left out-->
<label class="checkbox">
<input type="checkbox" value="option1" name="optionsCheckboxList1" unchecked >
Based on Free Software
</label>
<label class="checkbox">
<input type="checkbox" value="option2" name="optionsCheckboxList2" unchecked >
Exportable Data
</label>
<label class="show-only-label">
<br />Show only
<span class="label A"><a href="#" class="active">Class A</a></span> <span class="label B"><a href="#" class="active">Class B</a></span> <span class="label C"><a href="#" class="active">Class C</a></span> <span class="label D"><a href="#" class="active">Class D</a></span> <span class="label E"><a href="#" class="active">Class E</a></span>
</label>
</div>
</div>
</form>
<div id="services-list">
<div class="ajax-loading">
<img src="img/ajax-loader.gif" alt="" />
<span>You need to enable JavaScript.<br />
It is also possible that you have a unsupported browser,
in this case, please describe the bug using the "Feedback"
on the right. Thanks</span>
</div>
</div>
</section>
<section id="wthru">
<div class="page-header"><h2>About <small>this Unhosted project</small></h2></div>
<p>
The rough idea behind ToS;DR emerged during the <a href="http://events.ccc.de/camp/2011/wiki/ToS;DR">2011 Chaos Communication Camp</a> near Berlin, with people from <a href="http://unhosted.org">Unhosted</a> a movement to create web apps that give users control over their valuable user data and privacy. Since June 2012, <a href="http://hugoroy.eu/index.en.html">Hugo Roy</a> (<a href="http://twitter.com/hugoroyd">@hugoroyd</a>) has taken the lead for the project, and started the legal analysis. Ultimately, all the work is transparent and the discussions happen in public. Our work is funded by non-profits organisations and individual <a href="https://flattr.com/thing/821090/ToSDR">donations</a> and gets released as <a href="http://fsfe.org/about/basics/freesoftware.html">free software</a> and open data.</a>
</p>
<div class="row-fluid">
<div class="span1">
<img src="http://hugoroy.eu/favatar.png" style="margin:1em 0 0 1em;border-radius: 140px 140px 140px 140px;" alt="" />
</div>
<div class="span3">
<h3><a href="http://hugoroy.eu/index.en.html">Hugo Roy</a> Project Lead <small><a href="http://twitter.com/hugoroyd">@hugoroyd</a></small></h3>
<p>
Hugo is a Free Software hacktivist at <a href="http://fsfe.org">Free Software Foundation Europe</a> and a law student at <em>Sciences Po</em> university. He is currently living between Berlin and Paris, where he is often referred to as a Zappa Freak.
</p>
</div>
<div class="span1">
<img src="https://twimg0-a.akamaihd.net/profile_images/2194941545/picresized_th_5a6d23f1e8567cc9ccdac00ace4761c7_normal.jpg" style="margin:1em 0 0 1em;border-radius: 140px 140px 140px 140px;" alt="" />
</div>
<div class="span3">
<h3><a href="http://michielbdejong.com/">Michiel de Jong</a> <small><a href="http://twitter.com/michielbdejong">@michielbdejong</a></small></h3>
<p>
Michiel de Jong is an independent freedom hacker, travelling the world while programming for the revolution from his laptop. Apart from ToS;DR he is also involved in <a href="http://2012.unhosted.org">The Unhosted Unconference</a> and he is a co-author of <a href="http://www.w3.org/community/unhosted/wiki/RemoteStorage">the remoteStorage protocol</a>.
</p>
</div>
<div class="span1">
<img src="http://jancborchardt.net/img/share-clean.jpg" style="margin:1em 0 0 1em;border-radius: 140px 140px 140px 140px;" alt="" />
</div>
<div class="span3">
<h3><a href="http://jancborchardt.net">Jan-Christoph Borchardt</a> <small><a href="http://twitter.com/jancborchardt">@jancborchardt</a></small></h3>
<p>
Jan-Christoph Borchardt is a free culture interaction designer, advisor & educator. He curates <a href="http://libreprojects.net">open source web projects</a>, designs <a href="http://unhosted.org">unhosted web apps</a> & <a href="http://ownCloud.org">ownCloud</a> and <a href="http://jancborchardt.net/usability-in-free-software">teaches better usability</a>.
</p>
</div>
</div>
<h3>Roadmap</h3>
<ul>
<li>Mid-July: Finishing analysis of major terms: <a href="#facebook">social</a> <a href="#twitter">net</a><a href="#seenthis">works</a>, <a href="#duckduckgo">search</a> <a href="#google">engines</a>, <a href="#twitpic">pho</a><a href="#500px">to</a> <a href="#soundcloud">sharing</a>, blogs. (Done: 90%)</li>
<li>End-July: Implementation of comparisons by category or <a href="topics.html">specific topic</a>; Improvement of score and rating systems. (Done: 100%)</li>
<li>Mid-August: API, crowd-sourcing and integration with Tosback2, add ability to subscribe. (Done:10%)</li>
<li>End-August: <a href="http://www.campus-party.eu/2012/security.html#Keyun">Presentation of ToS;DR at Campus Party, Berlin</a></li>
<li>September: Discussing the future of the project.</li>
</ul>
</section>
<section id="classification">
<div class="page-header"><h2>Making the fine print easy to understand</h2></div>
<p>
Each data point will be assigned a weight in the rating of the website in question as soon as there is a rough consensus in the mailing list thread. So the classification of each website simply depends on how many positive and negative data points we have posted about it on the mailing list.
</p>
<p>
Each services gets a series of badges, either <span class="badge badge-success"><i class="icon-thumbs-up icon-white">+</i> Good</span>, <span class="badge badge-warning"><i class="icon-thumbs-down icon-white">-</i> Mediocre</span>, <span class="badge badge-important"><i class="icon-remove icon-white">×</i> Alert</span>, or <span class="badge"><i class="icon-hand-right icon-white">→</i> Informative</span>; depending on how fair they are compared to other services. One way to compare is to <a href="topics.html">analyse by topics</a>. When we collect all the points, each service gets assigned a class.
</p>
<p>
<span class="label A" style="vertical-align:middle">Class A</span> are the best terms of services: they treat you fairly, respect your rights and will not abuse your data.
</p>
<p><span class="label B">Class B</span> The terms of services are fair towards the user but they could be improved.</p>
<p><span class="label C">Class C</span> The terms of service are okay but some issues need your consideration.</p>
<p><span class="label D">Class D</span> The terms of service are very uneven or there are some important issues that need your attention.</p>
<p><span class="label E">Class E</span> The terms of service raise very serious concerns.</p>
</section>
<footer id="bottom">
<p id="credits"><strong><a href="http://tos-dr.info">Terms of Service; Didn't Read</a></strong> is a project inspired by Aza Raskin's <a href="http://azarask.in/blog/post/privacy-icons/">Privacy Icons</a> and EFF's <a href="http://tosback.org">TOSBack</a>. Also related: <a href="http://www.opennotice.org/">OpenNotice</a>.</p>
<p id="legalinfo"><strong>Nothing here should be considered legal advice</strong>. We express our opinion with no guarantee and we do not endorse any service in any way. Please refer to a qualified attorney for legal advice. Disclaimer: a list of donors and supporters <a href="thanks.html">is published</a>.</p>
<p id="licensing"><a href="https://5apps.com/apps/4fd06274c439346fd700005e">ToS;DR</a> is Free Software, licensed under the GNU Affero General Public License (<a href="http://www.gnu.org/licenses/agpl-3.0-standalone.html" rel="license">AGPL-3.0</a>. <a href="https://github.com/didnotread/didnotread.org/zipball/master">Source (zip)</a>). The <code>.json</code> data inside the <a href="https://github.com/didnotread/didnotread.org/tree/master/services"><code>services/</code></a> and <a href="https://github.com/didnotread/didnotread.org/tree/master/points"><code>points/</code></a> directories are licensed under the Attribution - Share Alike (<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA 3.0</a>). Icons by <a href="http://glyphicons.com/glyphicons-licenses/">Glyphicons</a> used under a CC BY <a href="http://creativecommons.org/licenses/by/3.0/deed.en">3.0 Unported license</a>. </p>
</footer>
<!--here come the popups-->
<div id="popups"></div>
<!--"tos": {-->
<!--"terms": "https://flattr.com/terms",-->
<!--"privacy": "https://flattr.com/privacy"-->
<!--},-->
</div> <!-- /container -->
<script src="js/bootstrap-twipsy.js"></script>
<script src="bootstrap/js/bootstrap-collapse.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-typeahead.js"></script>
<script>
$(function() { $('a[title!=""]').twipsy({live:true})});
$(function() { $('abbr[title!=""]').twipsy({live:true})});
</script>
</body>
</html>