-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
173 lines (169 loc) · 7.23 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Brightbeam</title>
<meta name="description" content="Brightbeam is a Firefox add-on that uses interactive visualizations to show you the relationships between third parties and the sites you visit.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="images/brightbeam-48.png" type="image/x-icon">
<link rel="icon" href="images/brightbeam-48.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="js/storeChild.js" type="text/javascript"></script>
<script src="ext-libs/sigmajs/sigma.min.js"></script>
<script src="ext-libs/sigmajs/plugins/sigma.layout.forceAtlas2.min.js"></script>
<script src="ext-libs/sigmajs/plugins/sigma.parsers.json.min.js"></script>
<script src="ext-libs/sigmajs/plugins/sigma.exporters.svg.min.js"></script>
<script src="ext-libs/sigmajs/plugins/sigma.plugins.relativeSize.min.js"></script>
<script src="ext-libs/dialog-polyfill.js"></script>
<script src="js/brightbeam.js" type="text/javascript"></script>
</head>
<body>
<aside class="max-graph">
<header>
<img class="logo" role="banner" src="images/brightbeam_150x45.png" alt="Brightbeam">
</header>
<nav role="navigation">
<h2>Visualization</h2>
<div class="toggle-menu">
<!-- @todo add click to toggle view between graph and list, highlighting active view -->
<button class="active list" id="view-list-button">List</button>
<button class="graph" id="view-graph-button">Graph</button>
</div>
<h2>Data</h2>
<div>
<!-- @todo add click to save data -->
<button class="download" id="save-json-button">Save Data (JSON)</button>
<button class="download" id="save-csv-button">Save Data (CSV)</button>
<button class="download" id="save-gdf-button">Save Data (GDF)</button>
</div>
<h2>Control</h2>
<div>
<div class="pause-toggle">
<div class="toggle-switch">
<label for="pause-collection">
<input type="checkbox" id="pause-collection">
<span class="toggle"></span>
</label>
</div>
<label>Pause Capture</label>
</div>
<button class="reset" id="reset-data-button">Reset Data</button>
</div>
<div class="nav-links">
<!-- @todo confirm feedback URL -->
<a class="thumbs-up" href="mailto:[email protected]">Give Us Feedback</a>
<a class="github" href="https://github.com/digitalmethodsinitiative/brightbeam">Code @ GitHub</a>
</div>
</nav>
</aside>
<main role="main">
<section class="top-bar max-graph">
<dl class="info-headings">
<div>
<dt>Data Gathered Since</dt>
<dd>
<time id="data-gathered-since" datetime=""></time>
</dd>
</div>
<div>
<dt>You Have Visited</dt>
<dd>
<var id="num-first-parties"></var>
</dd>
</div>
<div>
<dt>You Have Connected With</dt>
<dd>
<var id="num-third-parties"></var>
</dd>
</div>
</dl>
</div>
</section>
<section class="vis">
<div class="vis-header max-graph">
<!-- @todo update filter with current filter state -->
<h1 id="filter">Recent captured data</h1>
<!-- @todo update view with current view state -->
<h2><span id="view">Graph</span> View</h2>
<!-- @todo display list or graph view, update view based on filter and controls -->
<!-- @todo remove the hard-coded width, height values -->
</div>
<div class="vis-content" id="visualization">
<div id="vis-list">
<ol id="site-list">
</ol>
</div>
<div id="vis-progress"><img src="images/lightbeam_icon_reset.png" alt=""> Rendering...</div>
<div id="vis-graph" class="hidden">
</div>
<div id="graph-legend">
<span class="badge social_media">social_media</span>
<span class="badge advertising">advertising</span>
<span class="badge site_analytics">site_analytics</span>
<span class="badge customer_interaction">customer_interaction</span>
<span class="badge audio_video_player">audio_video_player</span>
<span class="badge comments">comments</span>
<span class="badge essential">essential</span>
<span class="badge pornvertising">pornvertising</span>
</div>
</div>
<div class="vis-controls">
<label>Show unrecognised third party sites</label>
<div class="toggle-switch">
<label for="unrecognised-control">
<input type="checkbox" id="unrecognised-control">
<span class="toggle"></span>
</label>
</div>
</div>
<div id="tooltip"></div>
</section>
<footer class="unimplemented">
<div class="footer-toggle unimplemented">
<div class="footer-heading">
<h2>Toggle Controls</h2>
</div>
<!-- @todo highlight active controls, add click to toggle controls -->
<div class="footer-toggle-buttons controls">
<button class="visited-sites active">Visited Sites</button>
<button class="watched-sites two-icons active">Watched Sites</button>
<button class="cookies active">Cookies</button>
<button class="third-party-sites active">Third Party Sites</button>
<button class="blocked-sites two-icons active">Blocked Sites</button>
<button class="connections active">Connections</button>
</div>
</div>
<div class="footer-filter unimplemented">
<div class="footer-heading">
<h2>Filter</h2>
<!-- @todo add click for hide to toggle filter menu-->
<h2 class="hide">Hide</h2>
</div>
<div class="filter-menu">
<!-- @todo highlight active filter, add click to toggle filter -->
<button class="active">Recent Site</button>
<button>Last 10 Sites</button>
<button>Daily</button>
<button>Weekly</button>
</div>
</div>
</footer>
</main>
<dialog id="reset-data-dialog" aria-labelledby="reset-data-dialog-title">
<form method="dialog" class="dialog-wrapper">
<h1 id="reset-data-dialog-title" class="dialog-title">Reset Data</h1>
<img class="dialog-icon" src="images/brightbeam_dialog_warningreset.png" alt="">
<div class="dialog-content">
<p>Pressing OK will delete all Brightbeam information including connection history, user preferences, block sites list, etc.</p>
<p>Your browser will be returned to the state of a fresh install of Brightbeam.</p>
</div>
<menu class="dialog-options">
<button type="submit" value="" autofocus>Cancel</button>
<button type="submit" value="confirm">OK</button>
</menu>
</form>
</dialog>
</body>
</html>