commit b324c54e8551153c33024728cadbce1c214d0dd5 Author: Karsten Loesing karsten.loesing@gmx.net Date: Tue Dec 20 21:36:50 2016 +0100
Apply new design to start page. --- website/etc/categories.json | 24 ++-- website/etc/web.xml | 4 +- .../src/org/torproject/metrics/web/Category.java | 6 + .../org/torproject/metrics/web/IndexServlet.java | 2 +- website/web/WEB-INF/bottom.jsp | 41 +++++++ website/web/WEB-INF/index.jsp | 77 +++++-------- website/web/WEB-INF/top.jsp | 125 +++++++++++++++++++++ 7 files changed, 216 insertions(+), 63 deletions(-)
diff --git a/website/etc/categories.json b/website/etc/categories.json index 9a10aea..766108a 100644 --- a/website/etc/categories.json +++ b/website/etc/categories.json @@ -1,8 +1,9 @@ [ { "id": "clients", + "icon": "fa-users", "header": "Users", - "summary": "Where are Tor users from and how they connect to Tor.", + "summary": "Where Tor users are from and how they connect to Tor.", "description": "We estimate the number of users by analyzing the requests induced by Tor clients. These papers detail on how we count users and how we count bridge users.", "metrics": [ "userstats-relay-country", @@ -18,7 +19,8 @@ }, { "id": "servers", - "header": "Relays and Bridges", + "icon": "fa-server", + "header": "Servers", "summary": "How many relays and bridges are online and what we know about them.", "description": "Country and ISP diversity are approximated by resolving IP addresses to a country code an an autonomous system. We process the capabilities and properties relays and bridges reported to directory authorities.", "metrics": [ @@ -33,9 +35,10 @@ }, { "id": "traffic", + "icon": "fa-road", "header": "Traffic", - "summary": "How much traffic can the Tor network can handle and how much traffic there is.", -"description": "We measure total available bandwidth and current capacity by aggregating what relays and bridges report to directory authorities.", + "summary": "How much traffic the Tor network can handle and how much traffic there is.", + "description": "We measure total available bandwidth and current capacity by aggregating what relays and bridges report to directory authorities.", "metrics": [ "bandwidth", "bandwidth-flags", @@ -48,9 +51,10 @@ }, { "id": "performance", + "icon": "fa-dashboard", "header": "Performance", "summary": "How fast and reliable the Tor network is.", -description": "We use <a href="https://gitweb.torproject.org/torperf.git%5C%22%3ETorperf</a> to run performance measurements. It works by fetching files of different sizes over Tor and measuring how long that takes.", + "description": "We use <a href="https://gitweb.torproject.org/torperf.git%5C%22%3ETorperf</a> to run performance measurements. It works by fetching files of different sizes over Tor and measuring how long that takes.", "metrics": [ "torperf", "torperf-failures", @@ -59,20 +63,14 @@ description": "We use <a href="https://gitweb.torproject.org/torperf.git%5C%22%3ETorp }, { "id": "onion-services", + "icon": "fa-map-signs", "header": "Onion Services", - "summary": "How many onion services are there and how much traffic they pull.", + "summary": "How many onion services there are and how much traffic they pull.", "description": "Onion services are services that are only accessible via the Tor network.", "metrics": [ "hidserv-dir-onions-seen", "hidserv-rend-relayed-cells", "hidserv-frac-reporting" ] - }, - { - "id": "downloads", - "header": "Downloads", - "summary": "How many downloaded Tor application with respect to version updates.", - "description": "We measure how many people downloaded which versions of Tor by using a web stats.", - "metrics": [] } ] diff --git a/website/etc/web.xml b/website/etc/web.xml index 0e9011a..69fa359 100644 --- a/website/etc/web.xml +++ b/website/etc/web.xml @@ -228,7 +228,9 @@ </servlet> <servlet-mapping> <servlet-name>ToolsServlet</servlet-name> - <url-pattern>/tools.html</url-pattern> + <url-pattern>/sources.html</url-pattern> + <url-pattern>/operation.html</url-pattern> + <url-pattern>/development.html</url-pattern> </servlet-mapping>
<servlet> diff --git a/website/src/org/torproject/metrics/web/Category.java b/website/src/org/torproject/metrics/web/Category.java index 172929f..935dc14 100644 --- a/website/src/org/torproject/metrics/web/Category.java +++ b/website/src/org/torproject/metrics/web/Category.java @@ -9,6 +9,8 @@ public class Category {
private String id;
+ private String icon; + private String header;
private String summary; @@ -21,6 +23,10 @@ public class Category { return this.id; }
+ public String getIcon() { + return this.icon; + } + public String getHeader() { return this.header; } diff --git a/website/src/org/torproject/metrics/web/IndexServlet.java b/website/src/org/torproject/metrics/web/IndexServlet.java index b287102..f3bb218 100644 --- a/website/src/org/torproject/metrics/web/IndexServlet.java +++ b/website/src/org/torproject/metrics/web/IndexServlet.java @@ -25,7 +25,7 @@ public class IndexServlet extends HttpServlet { ContentProvider.getInstance().getCategoriesList()) { categories.add(new String[] { category.getMetrics().isEmpty() ? "" : category.getMetrics().get(0), - category.getHeader(), category.getSummary() }); + category.getHeader(), category.getSummary(), category.getIcon() }); } this.categories = categories; } diff --git a/website/web/WEB-INF/bottom.jsp b/website/web/WEB-INF/bottom.jsp new file mode 100644 index 0000000..5549cc8 --- /dev/null +++ b/website/web/WEB-INF/bottom.jsp @@ -0,0 +1,41 @@ + <div class="container-fluid" id="footer"> + + <div class="container no-gutter"> + <div class="col-xs-6"> + <p> + © 2009–2016 The Tor Project + </p> + </div> + <div class="col-xs-6"> + <p class="pull-right"> + + <a href="?page=about#contact">Contact</a> + + </p> + </div> + </div> + + <div class="container small"> + + <p>This material is supported in part by the National Science Foundation +under Grant No. CNS-0959138. Any opinions, finding, and conclusions or +recommendations expressed in this material are those of the author(s) and do not +necessarily reflect the views of the National Science Foundation. "Tor" and the +"Onion Logo" are <a href="https://www.torproject.org/docs/trademark-faq.html.en" +target="_blank">registered trademarks</a> of The Tor Project, Inc.. Data on this +site is freely available under a <a +href="http://creativecommons.org/publicdomain/zero/1.0/" target="_blank">CC0 no +copyright declaration</a>: To the extent possible under law, the Tor Project has +waived all copyright and related or neighboring rights in the data. Graphs are +licensed under a <a href="http://creativecommons.org/licenses/by/3.0/us/" +target="_blank">Creative Commons Attribution 3.0 United States License</a>.</p> + + </div> + + </div><!-- /footer --> + +</div><!-- /wrapper --> + +</body> +</html> + diff --git a/website/web/WEB-INF/index.jsp b/website/web/WEB-INF/index.jsp index 55c882a..e55b389 100644 --- a/website/web/WEB-INF/index.jsp +++ b/website/web/WEB-INF/index.jsp @@ -1,56 +1,37 @@ <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> -<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> -<html> -<head> - <title>Tor Metrics</title> - <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> - <link href="css/stylesheet-ltr.css" type="text/css" rel="stylesheet"> - <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"> - <link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon"> -</head> -<body> - <div class="center"> - <div class="main-column"> - <h2><a href="/"><img src="images/metrics-logo.png" width="153" height="200" alt="Metrics logo"><img src="images/metrics-wordmark.png" width="384" height="50" alt="Metrics wordmark"></a></h2> - <br> - -<p>"Tor metrics are the ammunition that lets Tor and other security -advocates argue for a more private and secure Internet from a position -of data, rather than just dogma or perspective." -<i>- Bruce Schneier (June 1, 2016)</i></p> - - <!-- Navigation start --> - Metrics | - <a href="about.html">About</a> | - <a href="news.html">News</a> | - <a href="tools.html">Tools</a> | - <a href="research.html">Research</a> - <br> - <br> - <!-- Navigation end --> - - <h1>Welcome!</h1> - <p>What would you like to know about the Tor network?</p> - -<div> - -<c:forEach var="category" items="${categories}"> -<c:if test="${fn:length(category[0]) > 0}"><a href="${category[0]}.html"></c:if><h2>${category[1]}</h2><c:if test="${fn:length(category[0]) > 0}"></a></c:if> -<p>${category[2]}</p> -</c:forEach> -<br> - -</div> +<jsp:include page="top.jsp"> + <jsp:param name="pageTitle" value="Welcome to Tor Metrics"/> + <jsp:param name="navActive" value="Home"/> +</jsp:include> + + <!-- empty breadcrumb, just to keep everything in line... --> + <div class="container"> + <ul class="breadcrumb"> + <li class="active"> </li> + </ul> + </div>
-<p>Let us know if we're missing anything, or if we should measure something -else.</p> + <div class="container"> + <h1>Welcome!</h1> + <p> + What would you like to know about the Tor network? + </p> + </div>
+ <div class="container dashboard"> + <div class="row"> + <c:forEach var="category" items="${categories}"> + <div class="col-sm-4"> + <a href="${category[0]}.html"><i class="fa ${category[3]} fa-fw fa-4x" aria-hidden="true"></i> <h2>${category[1]}</h2> <p>${category[2]}</p></a> + </div> + </c:forEach> </div> </div> - <div class="bottom" id="bottom"> - <%@ include file="footer.jsp"%> + + <div class="container"> + <p><a href="?page=about&sub=contact" target="_blank">Let us know</a> if we're missing anything, or if we should measure something else.</p> </div> -</body> -</html> + +<jsp:include page="bottom.jsp"/>
diff --git a/website/web/WEB-INF/top.jsp b/website/web/WEB-INF/top.jsp new file mode 100644 index 0000000..93397f0 --- /dev/null +++ b/website/web/WEB-INF/top.jsp @@ -0,0 +1,125 @@ +<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> +<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> +<!DOCTYPE HTML> +<html lang="en" style="min-height:100%;"> +<head> + + <title>${param.pageTitle}</title> + + <meta charset="utf-8"> + <link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon"> + + <!-- yes, we are handheld friendly :) --> + <meta name="HandheldFriendly" content="True"> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> + <meta name="apple-mobile-web-app-capable" content="yes"> + + <!-- icons for mobile devices --> + <link rel="apple-touch-icon" href="images/apple-touch-icon-152x152.png"> + <link rel="shortcut icon" href="images/android-icon.png" sizes="196x196"> + <meta name="msapplication-square70x70logo" content="images/smalltile.png"> + <meta name="msapplication-square150x150logo" content="images/mediumtile.png"> + <meta name="msapplication-wide310x150logo" content="images/widetile.png"> + <meta name="msapplication-square310x310logo" content="images/largetile.png"> + + <!-- jQuery --> + <script src="js/jquery-3.1.1.min.js"></script> + + <!-- Bootstrap --> + <link rel="stylesheet" href="css/bootstrap.min.css"> + <script src="js/bootstrap.min.js"></script> + + <!-- Fonts --> + <link rel="stylesheet" href="css/font-awesome.min.css"> + <link rel="stylesheet" href="fonts/source-sans-pro.css"> + + <!-- custom styles and javascript --> + <link rel="stylesheet" href="css/style.css"> + <script src="js/script.js"></script> + +</head> + +<body class="noscript" style="background-image:url(images/ajax-loader.gif);background-repeat:no-repeat;background-position:center center;"> + +<!-- Using evil inline stylesheets to hide the FOUC for slow connections... --> + +<div id="wrapper" style="display:none;"> + +<!-- backToTop-Button and Anchor --> +<noscript> +<div class="topButton" style="display:block;"><a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a></div> +</noscript> +<script type="text/javascript"> +document.write('<div class="topButton" style="display:none;"><a href="#top"><i class="fa fa-chevron-up" aria-hidden="true"></i></a></div>'); +</script> +<a name="top" id="anchor-top"></a> + +<!-- secondary navigation --> +<nav class="navbar navbar-default navbar-secondary"> + <div class="container-fluid"> + <input type="checkbox" id="navbar-toggle-checkbox"> + <div class="navbar-header"> + <label for="navbar-toggle-checkbox" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-secondary" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </label> + <a class="navbar-brand visible-xs" href="index.html"><img src="images/metrics-wordmark-white.png" width="384" height="50" alt="Tor Metrics"></a> + </div> + + <!-- Collect the nav links, forms, and other content for toggling --> + <div class="collapse navbar-collapse" id="bs-example-navbar-secondary"> + <ul class="nav navbar-nav navbar-right"> + + <!-- we have to copy the primary navigation items here for mobile accessibility --> + <li class="visible-xs<c:if test="${'Home'.equals(param.navActive)}"> active</c:if>"><a href="index.html"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a></li> + <c:forEach var="category" items="${categories}"> + <li class="visible-xs<c:if test="${category[1].equals(param.navActive)}"> active</c:if>"><a href="${category[0]}.html"><i class="fa ${category[3]} fa-fw" aria-hidden="true"></i> ${category[1]}</a></li> + </c:forEach> + <!-- /end of primary copy --> + + <!-- secondary navigation items --> + <li <c:if test="${'News'.equals(param.navActive)}"> class="active"</c:if>><a href="news.html"><i class="fa fa-newspaper-o fa-fw" aria-hidden="true"></i> News</a></li> + <li <c:if test="${'Sources'.equals(param.navActive)}"> class="active"</c:if>><a href="sources.html"><i class="fa fa-archive fa-fw" aria-hidden="true"></i> Sources</a></li> + <li <c:if test="${'Operation'.equals(param.navActive)}"> class="active"</c:if>><a href="operation.html"><i class="fa fa-cogs fa-fw" aria-hidden="true"></i> Operation</a></li> + <li <c:if test="${'Development'.equals(param.navActive)}"> class="active"</c:if>><a href="development.html"><i class="fa fa-code fa-fw" aria-hidden="true"></i> Development</a></li> + <li <c:if test="${'Research'.equals(param.navActive)}"> class="active"</c:if>><a href="research.html"><i class="fa fa-university fa-fw" aria-hidden="true"></i> Research</a></li> + <li <c:if test="${'About'.equals(param.navActive)}"> class="active"</c:if>><a href="about.html"><i class="fa fa-lightbulb-o fa-fw" aria-hidden="true"></i> About</a></li> + <!-- /secondary navigation items --> + + </ul> + </div><!-- /.navbar-collapse --> + </div><!-- /.container-fluid --> +</nav> +<!-- /secondary navigation --> + +<!-- page header for every single page --> +<div class="page-header hidden-xs"> + <a href="index.html"><img src="images/metrics-logo.png" width="102" height="133" alt="" id="metrics-logo"></a> + <a href="index.html"><img src="images/metrics-wordmark-white.png" width="384" height="50" alt="Tor Metrics" id="metrics-wordmark"></a> + <div> + <p> + <i>“Tor metrics are the ammunition that lets Tor and other security advocates argue for a more private and secure Internet from a position of data, rather than just dogma or perspective.”</i><br> + –Bruce Schneier (June 1, 2016) + </p> + </div> + <div class="clearfix"></div> +</div> +<!-- /page header --> + +<!-- primary navigation --> +<nav class="navbar navbar-default hidden-xs"> + <div class="container-fluid"> + <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-primary"> + <ul class="nav navbar-nav"> + <li <c:if test="${'Home'.equals(param.navActive)}"> class="active"</c:if>><a href="index.html"><i class="fa fa-home fa-fw hidden-sm" aria-hidden="true"></i> Home</a></li> + <c:forEach var="category" items="${categories}"> + <li <c:if test="${category[1].equals(param.navActive)}"> class="active"</c:if>><a href="${category[0]}.html"><i class="fa ${category[3]} fa-fw hidden-sm" aria-hidden="true"></i> ${category[1]}</a></li> + </c:forEach> + </ul> + </div><!-- /.navbar-collapse --> + </div><!-- /.container-fluid --> +</nav> +<!-- /primary navigation --> +