lightbeam/data/index.html

485 строки
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>
2013-07-09 23:07:39 +04:00
<div class="btn_group visualization">
<div data-view class="dropdown_button">
2013-07-09 23:07:39 +04:00
<span>VISUALIZATION</span>
<div class="arrow">
<i class="icon-sort-down hidden"></i><i class="icon-sort-up"></i>
2013-07-09 23:07:39 +04:00
</div>
</div>
<div data-list class="dropdown_options expanded">
<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>
2013-07-09 23:07:39 +04:00
<div class="btn_group session">
<div data-view class="dropdown_button">
2013-07-09 23:07:39 +04:00
<span>SESSION</span>
<div class="arrow">
<i class="icon-sort-down hidden"></i><i class="icon-sort-up"></i>
2013-07-09 23:07:39 +04:00
</div>
</div>
<div data-list class="dropdown_options expanded">
2013-07-09 23:07:39 +04:00
<a data-selected 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>
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>
2013-07-10 01:02:49 +04:00
<div class="collusion-url">
<a href="http://www.mozilla.org/collusion" target="_blank">www.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">
2013-07-17 01:33:28 +04:00
DATA HAS GATHERED SINCE
<div class="stat date-gathered">
</div>
AND YOU VISITED
<div class="stat first-party-sites">
</div>
WEBSITES AND CONNECTED TO
<div class="stat third-party-sites">
</div>
2013-07-17 01:33:28 +04:00
THRID PARTY WEBSITES
</div>
<div class="sharing-section">
<div class="label">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>
<h2 class="title"></h2>
<!--span class="blue-text">You are currently browsing this site</span-->
<span class="blue-text"><b>First Access </b></span><span class="info-first-access">Date</span><br>
<span class="blue-text"><b>Last Access </b></span><span class="info-last-access">Date</span>
<div class="map-section">
<h3 class="blue-text">Server Location</h3>
<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>
<h3 class="connections-head dark-blue-text"><b class="blue-text num-connected-sites"></b> Connected Sites</h3>
</div>
<div class="connections-list">
<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">
<h4><img src="image/collusion_icon_help.png" /> Visualization Help</h4>
<div>
<div class="grey-label">VISUALIZATION</div> Graph View</br>
<div class="grey-label">BEST for</div> Seeing site relationships</br>
</div>
<section>
<div class="blue-label">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-label">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-label">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">
<h4><img src="image/collusion_icon_help.png" /> Visualization Help</h4>
<div>
<div class="grey-label">VISUALIZATION</div> Clock View</br>
<div class="grey-label">BEST for</div> Seeing site patterns with time</br>
</div>
<section>
<div class="blue-label">DESCRIPTION</div>
<p>
2013-07-29 23:09:48 +04:00
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:#72AC45"><b>green</b></span> represents websites you have visited and <span style="color:#968BCD"><b>purple</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-label">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-label">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">
<h4><img src="image/collusion_icon_help.png" /> Visualization Help</h4>
<div>
<div class="grey-label">VISUALIZATION</div> List View</br>
<div class="grey-label">BEST for</div> Seeing a text database</br>
</div>
<section>
<div class="blue-label">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-label">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-label">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">
<h4><img src="image/collusion_icon_about.png" /> About Collusion</h4>
<div>
<div class="grey-label">VERSION</div> v1.0</br>
<div class="grey-label">BY</div> ____</br>
</div>
<section>
<div class="blue-label">ABOUT THIS ADD-ON</div>
<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-label">MISSION STATEMENT</div>
<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-label">Privacy Policy</div>
<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-label">CONTACT</div>
<p>
<i>You can contact us at:</i>
</p>
</section>
<section>
<div class="blue-label">WEBSITE</div>
<p>
<i>For more information please visit: <a href="www.mozilla.org/collusion" target="_blank">www.mozilla.org/collusion/</a></i>
</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">LEGEND & CONTROLS</header></div>
<div><a class="legend-toggle">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">LEGEND & CONTROLS</header></div>
<div><a class="legend-toggle">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="sourceSites" 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="targetSites" 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>
<div class="list-footer">
<section class="legend-header">
<div><header class="blue-text">SITE PREFERENCES</header></div>
<div><a class="legend-toggle">Hide</a></div>
</section>
<section class="legend-controls">
<section class="column">
<div class="block-pref btn active">
<a>
<img src="icons/collusion_icon_block.png" />
Block Site
</a>
</div>
<div class="hide-pref btn active">
<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 active">
<a>
<img src="icons/collusion_icon_watch.png" />
Watch Site
</a>
</div>
2013-07-11 04:04:07 +04:00
</section>
<section class="column">
<div class="no-pref btn active">
<a>
Remove Preference
</a>
</div>
2013-07-11 04:04:07 +04:00
</section>
<section class="column">
<div class="toggle-hidden btn active orange">
<a>
Hide Hidden
</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-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>