forked from naitup/CookieViz
-
Notifications
You must be signed in to change notification settings - Fork 0
/
en.cookieviz.html
126 lines (115 loc) · 6.21 KB
/
en.cookieviz.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
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/cookieviz.css">
<link rel="stylesheet" href="css/browser.css" />
<link rel="stylesheet" type="text/css" href="css/hist.css">
<link rel="stylesheet" type="text/css" href="css/voronoi.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav id="navigation-bar" style="height: 50px;">
<div id='wrapper' style='color:white;padding: 5px;display: table-cell; align-items: center;vertical-align: middle;'>
<div style="font-size: 24px;float:left;">
<span>CookieViz</span>
<span style="color:red">|</span>
</div>
<div style="font-size: 10px;float:left;text-align: left;padding-left: 5px;height: 120px;display: block;
margin: 5px;">
<span>View cookies</span> <br>
<span>of your navigation</span>
</div>
</div>
</nav>
<div class="container" style="margin-top:80px;" ng-app="cookieVizApp" ng-controller="cookieVizCtrl">
<div class="row justify-content-md-center">
<div class="col-md-8">
<span style="font-weight: bold;font-size:18px;color:#282E42">Your navigation</span><br>
<div class="row justify-content-md-center">
<div class="col-md-6">
<span style="font-size:14px;color:#5D5D6C">You have visited <span style="color:blue">{{nb_visited}} websites</span>.
</span> <br>
<span style="font-size:12px;color:#C2C0C7">{{nb_visited_with_cookie}}% of them stored at least one cookie.</span>
</div>
<div class="col-md-6">
<span style="font-size:14px;color:#5D5D6C">These cookies potentially <span style="color:red">exchange</span>
information with <span style="color:orange">{{nb_third}} third parties</span>.</span>
</div>
</div>
<div class="row" id="cookieviz" style="margin:30px"> </div>
<div class="row justify-content-md-center" style="margin-top:550px;">
<div class="col-md-4">
<form autocomplete="off">
<div class="autocomplete">
<input id="searchVisited" style="height:20px;width:100%;" type="text"
placeholder="Search for a website">
</div>
</form>
</div>
<div class="col-md-2">
<button type='button' title="Recharger le graphe" class="fas fa-sync nav-btn"
onclick="filter_node=null;"></button>
</div>
</div>
</div>
<div class="col-md-4" id="hist_div" style="display:block;">
<div class="row">
<span style="font-weight: bold;font-size:18px;color:#282E42">Presence of third parties on websites</span>
<span style="font-size:14px;color:#5D5D6C">During your navigation, third parties may deposit cookies to, among other things, track navigation.
</span>
<span style="font-size:14px;color:#5D5D6C;">Between <span style="color:#fb8761">{{most_third[0]}} and {{most_third[1]}} third parties</span> store cookies on 20% of visited websites.</span>
<span style="font-size:14px;color:#5D5D6C;">Between <span style="color:#b5367a"> {{rest_third[0]}} and {{rest_third[1]}} third parties</span> store cookies on 80% of visited websites.</span>
</div>
<div id="hist" class="row"></div>
<div class="row justify-content-md-center" style="margin-top: 30px;">
<div class="btn-group-sm" role="group">
<button type="button" class="btn btn-primary">Presence of third parties</button>
<button type="button"
onclick="document.getElementById('voronoi_div').style.display='block';document.getElementById('hist_div').style.display='none';"
class="btn btn-secondary">Use of cookies</button>
</div>
</div>
</div>
<div class="col-md-4" id="voronoi_div" style="display:none;">
<div class="row">
<span style="font-weight: bold;font-size:18px;color:#282E42">Use of cookies on websites</span>
<span style="font-size:14px;color:#5D5D6C">The <span style="color:#fb8761;">orange area</span> shows the coverage of domains
dropping cookies explicitly indicated as being used for advertisement purposes in ads.txt files when visiting websites.</span>
<span style="font-size:14px;color:#5D5D6C">The <span style="color:#b5367a;">purple area</span> indicates the coverage of domains dropping cookies and not listed in ads.txt files when visiting websites.</span>
</div>
<div id="treemap" class="row"></div>
<div class="row justify-content-md-center" style="margin-top: 30px;">
<div class="btn-group-sm" role="group">
<button type="button"
onclick="document.getElementById('voronoi_div').style.display='none';document.getElementById('hist_div').style.display='block';"
class="btn btn-secondary">Presence of third parties</button>
<button type="button" class="btn btn-primary">Use of cookies</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../js/d3.v4.min.js"></script>
<script src="../../js/d3-legend.min.js"></script>
<script src="../../js/d3-scale-chromatic.v1.min.js"></script>
<script src="js/d3-weighted-voronoi.js"></script>
<script src="js/d3-voronoi-map.js"></script>
<script src="js/d3-voronoi-treemap.js"></script>
<script src="../../browser.config.js"></script>
<script src="js/angular.min.js"></script>
<script src="../../core/database.js"></script>
<script src="./core/cookieviz.js"></script>
<script src="visualization/graph.js"></script>
<script src="visualization/hist.js"></script>
<script src="visualization/voronoi.js"></script>
<script src="visualization/search.js"></script>
</body>
</html>