130 строки
5.4 KiB
HTML
130 строки
5.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="IE=edge">
|
|
<title>Lightbeam</title>
|
|
<meta name="description" content="Lightbeam 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/lightbeam-48.png" type="image/x-icon">
|
|
<link rel="icon" href="images/lightbeam-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/d3.min.js"></script>
|
|
<script src="js/viz.js" type="text/javascript"></script>
|
|
<script src="js/lightbeam.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<aside class="max-graph">
|
|
<header>
|
|
<img class="logo" role="banner" src="images/lightbeam_150x45.png">
|
|
</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 graph">Graph</button>
|
|
<button class="list unimplemented">List</button>
|
|
</div>
|
|
<h2>Data</h2>
|
|
<div>
|
|
<!-- @todo add click to save data -->
|
|
<button class="download" id="save-data-button">Save Data</button>
|
|
<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:lightbeam-feedback@mozilla.org">Give Us Feedback</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>
|
|
<!-- @todo add tracking protection and toggle functionality -->
|
|
<div class="tracking-protection unimplemented">
|
|
<label for="tracking-protection-control">Tracking Protection</label>
|
|
<div class="toggle-switch">
|
|
<!-- @todo couple checkbox status (checked/unchecked) with toggle status -->
|
|
<input type="checkbox" id="tracking-protection-control">
|
|
<span class="toggle"></span>
|
|
<!-- @todo toggle-switch text (off/on) to reflect state of tracking protection -->
|
|
<span class="toggle-status">Off</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="vis">
|
|
<div class="vis-header max-graph">
|
|
<!-- @todo update filter with current filter state -->
|
|
<h1 id="filter">Recent Site</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-controls info-panel-controls unimplemented">
|
|
<!-- @todo check purpose of website icon -->
|
|
<button class="info-panel website"></button>
|
|
<!-- @todo add help sidebar -->
|
|
<button class="info-panel help"></button>
|
|
<!-- @todo add about sidebar -->
|
|
<button class="info-panel about"></button>
|
|
</div>
|
|
<div class="vis-content" id="visualization">
|
|
<div id="tooltip"></div>
|
|
</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>
|
|
</body>
|
|
</html>
|