[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]
[tor-commits] [metrics-web/master] Apply new design to start page.
commit b324c54e8551153c33024728cadbce1c214d0dd5
Author: Karsten Loesing <karsten.loesing@xxxxxxx>
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\";>Torperf</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\";>Torperf</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\";>Torp
},
{
"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 -->
+
_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits