lightbeam/data/index.html

481 строка
28 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>
<div class="main">
<aside class="controls">
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>
2013-07-09 23:07:39 +04:00
<div class="btn_group visualization">
<div data-list class="dropdown_options">
<a data-value="Graph">
2013-07-09 23:07:39 +04:00
<img src="image/collusion_icon_graph.png" />graph
</a>
<a data-value="Clock">
2013-07-09 23:07:39 +04:00
<img src="image/collusion_icon_clock.png" />clock
</a>
<a data-value="List">
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">FILTER</div>
2013-07-09 23:07:39 +04:00
<div class="btn_group session">
<div data-list class="dropdown_options">
2013-07-30 04:16:51 +04:00
<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>
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/forms/d/1_sSOmEVpGlKG_w6E88neasohfWXGAGdxqgk_T6Azyo0/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
2013-07-10 03:49:55 +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">SHARING 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-->
<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>
<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"><b class="num-connected-sites"></b> Connected Sites</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>
In this graph 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> that are websites you have visited, <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 site and <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> between them.
2013-07-29 23:09:48 +04:00
Over time, this graph will become a network of connections and nodes to visualize your relationship with the web.
</p>
<p>
This graph may get complex quickly and to reduce the amount of info displayed use <b>SESSIONS</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>
These buttons serve as toggles to help identify various elements on the graph.
</p>
<p>
When you set your site preferecnes:
<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" />
</svg> <span class="cookie-text"><b>Cookies</b></span> means the site stored some data in your browser.</li>
<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>
</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>
These buttons serve as toggles to help identify various elements on the graph.
</p>
<p>
When you set your site preferecnes:
<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>
</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>
<div><span class="feature-name">(_icon_) Checkboxes</span> - click + apply site preference</div>
<div><span class="feature-name">(_icon_) _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>
These buttons serve as toggles to help identify various elements on the graph.
</p>
<p>
When you set your site preferecnes:
<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>
</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>
<div class="grey-label all-cap-header">VERSION</div> v1.0</br>
<div class="grey-label all-cap-header">BY</div> ____</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>
Collusion is an experimental add-on for Firefox that allows you to see which sites are suing third-party cookies to track your movements across the Web. It shows, in realtime, how that data creates a spiderwed of interaction between companies and other trackers.
</p>
</section>
<section>
<div class="blue-text all-cap-header">MISSION STATEMENT</div>
2013-07-23 01:41:28 +04:00
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus eu quam consectetur vestibulum. Vivamus elementum faucibus commodo. Nullam bibendum ac justo in convallis. Ut ac lacinia nibh. Suspendisse ac eleifend enim. Donec ornare, metus eu suscipit tempor, nisl leo bibendum quam, ac fermentum eros est a mi.
</p>
</section>
<section>
<div class="blue-text all-cap-header">Privacy Policy</div>
2013-07-23 01:41:28 +04:00
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel lectus eu quam consectetur vestibulum. Vivamus elementum faucibus commodo. Nullam bibendum ac justo in convallis. Ut ac lacinia nibh. Suspendisse ac eleifend enim. Donec ornare, metus eu suscipit tempor, nisl leo bibendum quam, ac fermentum eros est a mi.
</p>
</section>
<section>
<div class="blue-text all-cap-header">CONTACT</div>
2013-07-23 01:41:28 +04:00
<p>
<i>You can contact us at:</i>
</p>
</section>
<section>
<div class="blue-text all-cap-header">WEBSITE</div>
2013-07-23 01:41:28 +04:00
<p>
<i>For more information please visit: <a href="www.mozilla.org/collusion" target="_blank">mozilla.org/collusion/</a></i>
2013-07-23 01:41:28 +04:00
</p>
</section>
</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>
2013-07-09 06:03:20 +04:00
<div class="stage-stack">
<div class="stage">
<svg class="vizcanvas" width="100%" height="100%" viewBox="-350 -450 700 500">
<defs>
</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 Site
</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>
Never Visited Site
</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>
Connection
</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>
</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">
<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="source-sites" cx="8" cy="8" r="6" />
</svg>
Visited Site("source")
</a>
</div>
<div class="btn legend-toggle-target active">
<a>
<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 Site("target")
</a>
</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 class="column">
<div class="legend-label">
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="selectedSites" cx="8" cy="8" r="6" />
</svg>
Selected Site
</div>
<div class="legend-label">
<svg class="legend-canvas-small" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="colludedSites" cx="8" cy="8" r="6" />
</svg>
"Colluded Sites"
</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">
<div class="block-pref btn disabled">
<a>
<img src="icons/collusion_icon_block.png" />
Block Site
</a>
</div>
<div class="hide-pref btn disabled">
<a>
<img src="icons/collusion_icon_hide.png" />
Hide Site
</a>
2013-07-10 03:49:55 +04:00
</div>
<div class="watch-pref btn disabled">
<a>
<img src="icons/collusion_icon_watch.png" />
Watch Site
</a>
</div>
2013-07-11 04:04:07 +04:00
</section>
<section class="align-right">
<div class="no-pref btn disabled">
<a>
Clear Preference
</a>
</div>
<div class="toggle-hidden disabled 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-07-29 23:09:48 +04:00
<script src="d3.v3.min.js"></script>
2013-02-07 02:44:05 +04:00
<script src="events.js"></script>
2013-07-17 21:18:14 +04:00
<script src="infobar.js"></script>
2013-02-07 02:44:05 +04:00
<script src="collusion.js"></script>
2013-02-27 02:54:06 +04:00
<script src="svgdataset.js"></script>
<script src="aggregate.js"></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-02-27 02:15:06 +04:00
<script src="tooltip.js"></script>
2013-02-07 02:44:05 +04:00
<script src="ui.js"></script>
2013-03-18 20:34:04 +04:00
<!-- Map -->
<script src="parseuri.js"></script>
2013-02-07 02:44:05 +04:00
<!-- Visualizations -->
<script src="clock.js"></script>
2013-03-08 03:51:48 +04:00
<script src="graph.js"></script>
2013-03-26 03:47:48 +04:00
<script src="list.js"></script>
2013-01-17 05:32:37 +04:00
</body>
</html>