lightbeam/data/index.html

506 строки
34 KiB
HTML
Исходник Обычный вид История

2013-01-17 05:32:37 +04:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Collusion</title>
2013-01-24 02:05:59 +04:00
<link rel="stylesheet" type="text/css" href="OpenSans.css" />
2013-01-29 03:20:32 +04:00
<link rel="stylesheet" type="text/css" href="font-awesome.css" />
2013-01-17 05:32:37 +04:00
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body role="application">
2013-01-17 05:32:37 +04:00
<div class="main">
<aside class="controls" role="navigation">
2013-07-10 01:54:18 +04:00
<header>
<div class="collusion-icon"></div>
<img class="logo" src="icons/Collusion---Wordmark-Beta.png" />
2013-07-10 01:54:18 +04:00
</header>
<div class="section-header all-cap-header">VISUALIZATION</div>
<div class="btn_group visualization" role="menu">
<div data-list class="dropdown_options">
<a data-value="Graph" role="menuitem" tabIndex="1" aria-label="Graph Visualization">
2013-07-09 23:07:39 +04:00
<img src="image/collusion_icon_graph.png" />graph
</a>
<a data-value="Clock" role="menuitem" tabIndex="2" aria-label="Clock Visualization">
2013-07-09 23:07:39 +04:00
<img src="image/collusion_icon_clock.png" />clock
</a>
<a data-value="List" role="menuitem" tabIndex="3" aria-label="List. Display data in tabular format.">
2013-07-09 23:07:39 +04:00
<img src="image/collusion_icon_list.png" />list
</a>
2013-01-29 01:59:32 +04:00
</div>
</div>
<div class="section-header all-cap-header">DATA</div>
2013-07-09 23:07:39 +04:00
<div class="btn">
<a class="download">
<img src="image/collusion_icon_download2.png" />Download
2013-07-09 23:07:39 +04:00
</a>
</div>
<div class="btn">
<a class="reset-data">
<img src="image/collusion_icon_reset.png" />Reset
2013-07-09 23:07:39 +04:00
</a>
</div>
<div class="links">
<img src="image/collusion_icon_feedback.png"> <a href="https://docs.google.com/a/mozillafoundation.org/forms/d/1QeVKe8xDwmaJMqiWDBs1eCR8kpDGaUDdanUWIn-xn1Q/viewform" target="_blank">Give Us Feedback</a></br>
<a href="http://www.mozilla.org/collusion" target="_blank">mozilla.org/collusion</a>
2013-07-10 01:02:49 +04:00
</div>
2013-01-17 05:32:37 +04:00
</aside>
2013-02-07 02:44:05 +04:00
<div class="content-flex">
<div class="top-bar">
<div class="stats-section">
<section>
<div class="all-cap-header">DATA GATHERED SINCE</div>
<div class="stat date-gathered large-header"></div>
</section>
<section>
<div class="all-cap-header">YOU HAVE VISITED</div>
<div class="stat first-party-sites large-header"></div>
</section>
<section>
<div class="all-cap-header">YOU HAVE CONNECTED WITH</div>
<div class="stat third-party-sites large-header"></div>
</section>
</div>
<div class="sharing-section">
<div class="label all-cap-header">CONTRIBUTING DATA</div>
<div class="toggle-btn share-btn">
<label><input type="checkbox" name="" id="" />
<div class="toggle-btn-innner">
<div class="switch"></div>
<div class="on-off-text">OFF</div>
</div>
</label>
</div>
</div>
</div>
<div id="content">
2013-01-17 05:32:37 +04:00
<aside class="info">
<div class="holder">
<!-- Site Profile starts ================================= -->
<div class="site-profile-content hidden">
<div>
<header class="title large-header"></header>
<!--span class="blue-text">You are currently browsing this site</span-->
2013-09-12 02:19:58 +04:00
<span class="all-cap-header"><b>First Access </b></span><span class="info-first-access">Date</span><br/>
<span class="all-cap-header"><b>Last Access </b></span><span class="info-last-access">Date</span>
2013-09-12 02:19:58 +04:00
<div class="pref-tag hidden">
<br/>
<img src="" />
This site is currently
<b><span></span></b>.
</div>
<div class="map-section">
<header class="blue-text large-header">Server Location</header>
<div><span id="country">&nbsp;</span></div>
<!-- SVG world map code starts; based on BlankMap-World6,_compact.svg by Canuckguy et al. ========================= -->
<object type="image/svg+xml" data="map.svg" class="world-map"></object>
</div>
</div>
<div class="connections-list">
<header class="large-header">
2013-09-10 00:28:25 +04:00
Connected to <b class="num-connected-sites"></b> since first access.
</header>
<ul>
</ul>
</div>
2013-03-18 20:34:04 +04:00
</div>
<!-- Site Profile ends ================================= -->
<!-- Help Sections starts ================================= -->
<div class="help-content">
<!-- Graph View Help -->
<div class="graph-view-help hidden">
<header class="large-header"><img src="image/collusion_icon_help.png" /> Visualization Help</header>
<div>
<div class="grey-label all-cap-header">VISUALIZATION</div> Graph View</br>
<div class="grey-label all-cap-header">BEST for</div> Seeing site relationships</br>
</div>
<section>
<div class="blue-text all-cap-header">DESCRIPTION</div>
<p>
2013-09-16 23:41:12 +04:00
In this Graph visualization, <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="visitedSites" cx="8" cy="8" r="6" /></svg> <b>circular nodes</b> are websites you have visited and <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><polygon class="unvisitedSites" points="0,14 7,2 14,14" /></svg> <b>triangular nodes</b> are third party sites. Over time, this graph will become a network of <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><line class="connectionLine" x1="14" y1="2" x2="2" y2="14" /></svg> <b>connections</b> and nodes to visualize your activity on the web.
</p>
<p>
2013-09-16 23:41:12 +04:00
This graph may get complex quickly; to reduce the amount of information displayed, use <b>FILTERS</b> to help focus on a set of data.
</p>
</section>
<section>
<div class="blue-text all-cap-header">FEATURES</div>
<div>
<div><span class="feature-name">Zoom In + Out</span> - on scroll</div>
<div><span class="feature-name">Pan</span> - on click + drag</div>
<div><span class="feature-name">Tooltips</span> - on hover</div>
<div><span class="feature-name">Website Profile</span> - on click</div>
</div>
</section>
<section>
<div class="blue-text all-cap-header">LEGENDS AND CONTROLS</div>
<p>
2013-09-16 23:41:12 +04:00
These buttons serve as toggles to help <u>identify</u> various elements on the graph.
</p>
<p>
<ul>
<li><svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line class="cookies" x1="14" y1="2" x2="2" y2="14" />
2013-09-16 23:41:12 +04:00
</svg> <span class="cookie-text"><b>Cookies</b></span> identify when a site has stored some data in your browser.</li>
</ul><br/>
When you set your site preferences:
<ul>
<li><img src="icons/collusion_icon_block.png" /><span class="block-text">Block</span> means they are blocked from connecting to your browser.</li>
<li><img src="icons/collusion_icon_watch.png" /><span class="watch-text">Watch</span> means they are highlighted.</li>
</ul>
2013-09-16 23:41:12 +04:00
These preferences can be set in the List Visualization.
</p>
</section>
</div>
<!-- Clock View Help -->
<div class="clock-view-help hidden">
<header class="large-header"><img src="image/collusion_icon_help.png" /> Visualization Help</header>
<div>
<div class="grey-label all-cap-header">VISUALIZATION</div> Clock View</br>
<div class="grey-label all-cap-header">BEST for</div> Seeing site patterns with time</br>
</div>
<section>
<div class="blue-text all-cap-header">DESCRIPTION</div>
<p>
In this clock visualization, you can see <svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle class="visitedSites" cx="8" cy="8" r="6" /></svg> <b>circular nodes</b> in <span style="color:#128764"><b>green</b></span> represents websites you have visited and <span style="color:#F1C40F"><b>yellow</b></span> nodes that are sites you have not but still connected to you and the connections between them. Over time, this view reveals patterns across the arch that represent your browsing behavirous according to time and your relationship with the web.
</p>
<p>
This visualization becomes populated as 15 minutes increments on the arc and the previous (24 hour) session is seen faded to compare data from the previous day.
</p>
</section>
<section>
<div class="blue-text all-cap-header">FEATURES</div>
<div>
<div><span class="feature-name">Zoom In + Out</span> - on scroll</div>
<div><span class="feature-name">Pan</span> - on click + drag</div>
<div><span class="feature-name">Tooltips</span> - on hover</div>
<div><span class="feature-name">Website Profile</span> - on click</div>
</div>
</section>
<section>
<div class="blue-text all-cap-header">LEGENDS AND CONTROLS</div>
<p>
2013-09-16 23:41:12 +04:00
These buttons serve as toggles to help <u>identify</u> various elements on the graph.
</p>
<p>
2013-09-16 23:41:12 +04:00
When you set your site preferences:
<ul>
<li><img src="icons/collusion_icon_block.png" /><span class="block-text">Block</span> means they are blocked from connecting to your browser.</li>
<li><img src="icons/collusion_icon_watch.png" /><span class="watch-text">Watch</span> means they are highlighted.</li>
</ul>
2013-09-16 23:41:12 +04:00
These preferences can be set in the List Visualization.
</p>
</section>
</div>
<!-- List View Help -->
<div class="list-view-help hidden">
<header class="large-header"><img src="image/collusion_icon_help.png" /> Visualization Help</header>
<div>
<div class="grey-label all-cap-header">VISUALIZATION</div> List View</br>
<div class="grey-label all-cap-header">BEST for</div> Seeing a text database</br>
</div>
<section>
<div class="blue-text all-cap-header">DESCRIPTION</div>
<p>
In this list visualization, you can see al ist of all websites you have visited and sites you have not visited but still connect to you. This view assists with sorting and filtering large numbers of sites.
</p>
<p>
This list may get quite extensive and to reduce the amount of information displayed use <b>SESSIONS</b> to help you focus on a set list of data.
</p>
</section>
<section>
<div class="blue-text all-cap-header">FEATURES</div>
<div>
2013-08-13 03:26:30 +04:00
<div><span class="feature-name"><img src="image/collusion_icon_checkbox.png" /> Checkboxes</span> - click + apply site preference</div>
<div><span class="feature-name"><img src="image/collusion_icon_sortby.png" /> SORT BY</span> - Type, Preference, WEbsite(A-Z), Date</div>
</div>
</section>
<section>
<div class="blue-text all-cap-header">LEGENDS AND CONTROLS</div>
<p>
2013-09-16 23:41:12 +04:00
These buttons <u>apply actions</u> to specific sites.
</p>
<p>
2013-09-16 23:41:12 +04:00
When you set your site preferences:
<ul>
2013-09-16 23:41:12 +04:00
<li><img src="icons/collusion_icon_block.png" /><span class="block-text">Block</span> means sites are blocked from connecting to your browser.</li>
<li><img src="icons/collusion_icon_hide.png" /><span class="hide-text">Hide</span> means sites are not seen in the visualization.</li>
<li><img src="icons/collusion_icon_watch.png" /><span class="watch-text">Watch</span> means sites are highlighted.</li>
</ul>
</p>
</section>
</div>
2013-03-18 20:34:04 +04:00
</div>
<!-- Help Sections ends ================================= -->
2013-07-23 01:41:28 +04:00
<!-- About Section starts ================================= -->
<div class="about-content">
<div class="graph-view-help">
<header class="large-header"><img src="image/collusion_icon_about.png" /> About Collusion</header>
2013-07-23 01:41:28 +04:00
<div>
2013-09-09 22:57:01 +04:00
<div class="grey-label all-cap-header">VERSION</div> v0.9</br>
<div class="grey-label all-cap-header">BY</div> Mozilla Foundation</br>
2013-07-23 01:41:28 +04:00
</div>
<section>
<div class="blue-text all-cap-header">ABOUT THIS ADD-ON</div>
2013-07-23 01:41:28 +04:00
<p>
2013-09-16 23:41:12 +04:00
Collusion is a Firefox add-on that tracks the trackers—and shows you which third parties are receiving information about your movements across the web. Using interactive visualizations, Collusion shows the relationships between the websites you visit and the third parties who receive data about your visit—often without you even knowing.
2013-07-23 01:41:28 +04:00
</p>
</section>
<section>
<div class="blue-text all-cap-header">Privacy Policy</div>
2013-09-10 23:09:02 +04:00
<!-- Collusion Privacy Policy. FIXEME: temp placeholder for v0.9 -->
<div class="privacy-policy">
<p>
<header><b>Collusion Privacy</b></header>
<div>We care about your privacy. Collusion is a browser add-on that collects and helps you visualize third party requests on any site you visit. If you choose to send Collusion data to Mozilla (thats us), our privacy policy describes how we handle that data. </div>
</p>
<p>
<header><b>Things you should know</b></header>
<ul>
<li>
After you install Collusion, the add-on collects data to help you visualize third party requests when you visit sites.
<ul>
<li>When you visit a site and that site contacts a third party, Collusion collects the following type of data: URLs of the visited sites and third parties, the existence of cookies, and a rough timestamp of when the site was visited. To see a complete list, please visit <a href="https://github.com/mozilla/collusion/blob/master/doc/data_format.v1.1.md" target="_blank" >here</a>.</li>
</ul>
</li>
<li>By default, data collected by Collusion remains in your browser and is not sent to us. </li>
<li>
You can choose to share your Collusion data with us. Information from Collusion can help us and others to understand third party relationships on the web and promote further research in the field of online tracking and privacy.
<ul>
<li>If you do share Collusion data with us, your browser will send us your de-identified Collusion data (you can see a list of the kind of data involved <a href="https://github.com/mozilla/collusion/blob/master/doc/data_format.v1.1.md" target="_blank">here</a>) along with a randomly generated browser ID which helps us understand how many unique browsers are sharing data. We will post your data along with data from others in an aggregated and open database. Users will benefit by making more informed decisions based on the collective information and patterns about trackers.</li>
<li>If you turn off data sharing, the randomly generated browser ID is reset and if you turn data sharing on again, a new randomly generated user ID will be created.</li>
<li>Uninstalling Collusion prevents collection of any further Collusion data and will delete the data stored locally in your browser.</li>
</ul>
</li>
</ul>
</p>
</div>
<!-- Collusion Privacy Policy ends -->
2013-07-23 01:41:28 +04:00
</section>
2013-09-16 23:41:12 +04:00
<section>
<div class="blue-text all-cap-header">Contact</div>
<p>
IRC channel is #collusion on irc.mozilla.org. <br/>
GitHub: <a href="https://github.com/mozilla/collusion" target="_blank">https://github.com/mozilla/collusion</a>
</p>
</section>
2013-07-23 01:41:28 +04:00
</div>
</div>
2013-07-23 01:41:28 +04:00
<!-- About Section starts ================================= -->
2013-01-17 05:32:37 +04:00
</div>
</aside>
<div class="info-panel-controls">
<ul>
<li class="toggle-site-profile disabled"><img src="image/collusion_icon_website.png" /><i class="icon-chevron-right hidden"></i></li>
<li class="toggle-help"><a class="help"><img src="image/collusion_icon_help.png" /><i class="icon-chevron-right hidden"></i></a></li>
<li class="toggle-about"><a class="about"><img src="image/collusion_icon_about.png" /></a><i class="icon-chevron-right hidden"></i></li>
</ul>
2013-07-13 04:58:03 +04:00
</div>
<div class="stage-stack" role="main">
2013-07-09 06:03:20 +04:00
<div class="stage">
<div class="filter-display hidden">
<header></header>
<div class="blue-text all-cap-header">Graph View</div>
</div>
2013-07-09 06:03:20 +04:00
<svg class="vizcanvas" width="100%" height="100%" viewBox="-350 -450 700 500">
<defs>
<radialGradient fy="50%" fx="50%" r="50%" cy="50%" cx="50%" id="selected-glow">
<stop style="stop-color:rgb(255,255,255);stop-opacity:1" offset="0%"></stop>
<stop style="stop-color:rgb(0,0,0);stop-opacity:0" offset="100%"></stop>
</radialGradient>
<radialGradient fy="50%" fx="50%" r="50%" cy="50%" cx="50%" id="connected-glow">
<stop style="stop-color:#73A4B8;stop-opacity:1" offset="0%"></stop>
<stop style="stop-color:#73A4B8;stop-opacity:0.5" offset="40%"></stop>
<stop style="stop-color:rgb(0,0,0);stop-opacity:0" offset="100%"></stop>
</radialGradient>
2013-07-09 06:03:20 +04:00
</defs>
</svg>
</div><!-- .stage -->
<!-- LEGEND & CONTROLS for Graph ================================ -->
2013-07-11 22:40:23 +04:00
<div class="graph-footer hidden">
<section class="legend-header">
<div><header class="blue-text all-cap-header">LEGEND & CONTROLS</header></div>
<div><a class="legend-toggle blue-text">Hide</a></div>
</section>
<section class="legend-controls">
<section class="column">
<div class="btn legend-toggle-visited active">
<a>
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="visitedSites" cx="8" cy="8" r="6" />
</svg>
Visited Sites
</a>
</div>
<div class="btn legend-toggle-never-visited active">
<a>
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<polygon class="unvisitedSites" points="0,14 7,2 14,14" />
</svg>
Third Party Sites
</a>
</div>
<div class="btn legend-toggle-connections active">
<a>
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line class="connectionLine" x1="14" y1="2" x2="2" y2="14" />
</svg>
Connections
</a>
</div>
</section>
<section class="column">
<div class="btn legend-toggle-watched">
<a>
<svg class="legend-canvas-large" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="watchedSites" cx="8" cy="8" r="6" />
<polygon class="watchedSites" points="18,14 25,2 32,14" />
</svg>
Watched Sites
</a>
</div>
<div class="btn legend-toggle-blocked">
<a>
<svg class="legend-canvas-large" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="blockedSites" cx="8" cy="8" r="6" />
<line class="blockedSites" x1="11" y1="3" x2="4.5" y2="14" />
<polygon class="blockedSites" points="18,14 25,2 32,14" />
<line class="blockedSites" x1="27.5" y1="4.5" x2="23" y2="14" />
</svg>
Blocked Sites
</a>
</div>
</section>
<section class="column">
<div class="btn legend-toggle-cookies">
<a>
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line class="cookies" x1="14" y1="2" x2="2" y2="14" />
</svg>
Cookies
</a>
</div>
</section>
<div class="btn_group session">
<div data-list class="dropdown_options align-right">
<a data-value="recent">recent site</a>
<a data-value="last10sites">last 10 sites</a>
<a data-value="daily">daily</a>
<a data-value="weekly">weekly</a>
</div>
<div class="all-cap-header align-right">
Filter:
</div>
</div>
</section>
</div>
<!-- LEGEND & CONTROLS for Clock ================================ -->
2013-07-11 22:40:23 +04:00
<div class="clock-footer hidden">
<section class="legend-header">
<div><header class="blue-text all-cap-header">LEGEND & CONTROLS</header></div>
<div><a class="legend-toggle blue-text">Hide</a></div>
</section>
<section class="legend-controls">
2013-09-12 02:30:37 +04:00
<section class="column">
<div class="legend-label">
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="source-sites" cx="8" cy="8" r="6" />
</svg>
Visited Sites
</div>
<div class="legend-label">
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="target-sites" cx="8" cy="8" r="6" />
</svg>
Third Party Sites
</div>
</section>
<section class="column">
<div class="btn legend-toggle-watched">
<a>
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="watchedSites" cx="8" cy="8" r="6" />
</svg>
Watched Sites
</a>
</div>
<div class="btn legend-toggle-blocked">
<a>
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="blockedSites" cx="8" cy="8" r="6" />
<line class="blockedSites" x1="11" y1="3" x2="4.5" y2="14" />
</svg>
Blocked Sites
</a>
</div>
</section>
</section>
</div>
<!-- SITE PREFERENCES for List ================================ -->
<div class="list-footer">
<section class="legend-header">
<div><header class="blue-text all-cap-header">SITE PREFERENCES</header></div>
<div><a class="legend-toggle blue-text">Hide</a></div>
</section>
<section class="legend-controls">
<section class="align-left">
<input id="block-pref" type="radio" name="pref-options" value="" >
<label for="block-pref" class="btn disabled">
<div class="radio-dot"></div>
<img src="icons/collusion_icon_block.png" />
Block Site
</label>
<input id="hide-pref" type="radio" name="pref-options" value="">
<label for="hide-pref" class="btn disabled">
<div class="radio-dot"></div>
<img src="icons/collusion_icon_hide.png" />
Hide Site
</label>
<input id="watch-pref" type="radio" name="pref-options" value="">
<label for="watch-pref" class="btn disabled">
<div class="radio-dot"></div>
<img src="icons/collusion_icon_watch.png" />
Watch Site
</label>
<input id="no-pref" type="radio" name="pref-options" value="">
<label for="no-pref" class="btn disabled">
<div class="radio-dot"></div>
Clear Preference
</label>
</section>
<section class="align-right">
<div class="toggle-hidden btn">
<a>
Hide Hidden Sites
</a>
</div>
</section>
</section>
2013-07-09 06:03:20 +04:00
</div>
</div><!-- .stage-stack -->
2013-01-17 05:32:37 +04:00
</div>
</div>
</div>
2013-02-27 02:58:49 +04:00
<div id="tooltip"></div>
2013-08-22 04:44:22 +04:00
2013-07-29 23:09:48 +04:00
<script src="d3.v3.min.js"></script>
2013-08-22 04:44:22 +04:00
<script src="events.js" type="application/javascript;version=1.8"></script>
<script src="infobar.js" type="application/javascript;version=1.8"></script>
<script src="collusion.js" type="application/javascript;version=1.8"></script>
<script src="svgdataset.js" type="application/javascript;version=1.8"></script>
<script src="aggregate.js" type="application/javascript;version=1.8"></script>
2013-07-30 02:05:24 +04:00
<!-- from https://github.com/Nycto/PicoModal -->
<script src="picoModal-1.0.0.min.js"></script>
2013-08-22 04:44:22 +04:00
<script src="tooltip.js" type="application/javascript;version=1.8"></script>
<script src="dialog.js" type="application/javascript;version=1.8"></script>
<script src="ui.js" type="application/javascript;version=1.8"></script>
2013-03-18 20:34:04 +04:00
<!-- Map -->
2013-08-22 04:44:22 +04:00
<script src="parseuri.js" type="application/javascript;version=1.8"></script>
2013-02-07 02:44:05 +04:00
<!-- Visualizations -->
2013-08-22 04:44:22 +04:00
<script src="clock.js" type="application/javascript;version=1.8"></script>
<script src="graph.js" type="application/javascript;version=1.8"></script>
<script src="list.js" type="application/javascript;version=1.8"></script>
2013-01-17 05:32:37 +04:00
</body>
</html>