-
Notifications
You must be signed in to change notification settings - Fork 35
/
fr.cookieviz.html
135 lines (124 loc) · 6.31 KB
/
fr.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
127
128
129
130
131
132
133
134
135
<!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>Voir les cookies</span> <br>
<span>de sa 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">Votre navigation</span><br>
<div class="row justify-content-md-center">
<div class="col-md-6">
<span style="font-size:14px;color:#5D5D6C">Vous avez visité <span style="color:blue">{{nb_visited}}
sites</span>.
</span> <br>
<span style="font-size:12px;color:#C2C0C7">{{nb_visited_with_cookie}}% d’entre eux ont déposé au moins un
cookie.</span>
</div>
<div class="col-md-6">
<span style="font-size:14px;color:#5D5D6C">Ces cookies <span style="color:red">échangent</span>
potentiellement des informations avec <span style="color:orange">{{nb_third}} domaines
tiers</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="Sélectionner un site visité">
</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">Présence des tiers sur les sites visités</span>
<span style="font-size:14px;color:#5D5D6C">Lors de votre visite d’un site, des tiers peuvent déposer des
cookies pour, entre autre, faire du suivi de navigation.</span>
<span style="font-size:14px;color:#5D5D6C;">Entre <span style="color:#fb8761">{{most_third[0]}} et
{{most_third[1]}} tiers</span> déposent des cookies
sur 20% des sites visités.</span>
<span style="font-size:14px;color:#5D5D6C;">Entre <span style="color:#b5367a"> {{rest_third[0]}} et
{{rest_third[1]}} tiers</span> déposent des cookies
sur 80% des sites visites.</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">Présence des tiers</button>
<button type="button"
onclick="document.getElementById('voronoi_div').style.display='block';document.getElementById('hist_div').style.display='none';"
class="btn btn-secondary">Usage des 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">Usage des cookies</span>
<span style="font-size:14px;color:#5D5D6C">La <span style="color:#fb8761;">zone orange</span> indique la
couverture de tiers
déclarés comme publicitaires dans les fichiers ads.txt des sites visités.</span>
<span style="font-size:14px;color:#5D5D6C">La <span style="color:#b5367a;">zone violette</span> indique la
couverture des tiers non déclarés dans les fichiers ads.txt des sites visités.</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">Présence des tiers</button>
<button type="button" class="btn btn-primary">Usage des 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>