[tor-commits] [metrics-web/master] Adds extended introduction and services to the home page (See: #23169)
karsten at torproject.org
karsten at torproject.org
Sun Mar 4 19:46:02 UTC 2018
commit 8f55bff0cc8fa70cce1ce8a87e0bb54a1bf739e4
Author: Iain R. Learmonth <irl at fsfe.org>
Date: Thu Mar 1 13:44:20 2018 +0000
Adds extended introduction and services to the home page (See: #23169)
---
src/main/resources/web/css/style.css | 68 +++++++++++++++++++++--------
src/main/resources/web/jsps/index.jsp | 81 +++++++++++++++++++++++++++--------
2 files changed, 115 insertions(+), 34 deletions(-)
diff --git a/src/main/resources/web/css/style.css b/src/main/resources/web/css/style.css
index b2485ff..97e91b8 100644
--- a/src/main/resources/web/css/style.css
+++ b/src/main/resources/web/css/style.css
@@ -14,7 +14,7 @@ body #wrapper {
/* Page header - override bootstrap defaults */
.page-header {
- padding: 0em 2.0em 2.0em 2.0em;
+ padding: 0em 2.0em 2.0em 2.0em;
margin: 0;
border-bottom: 0;
color:#fff;
@@ -33,20 +33,20 @@ body #wrapper {
max-width:40%;
height:auto;
}
-.page-header img#metrics-logo {
- height:75px;
- width:auto !important;
-}
+.page-header img#metrics-logo {
+ height:75px;
+ width:auto !important;
+}
.page-header div {
text-align:right;
position:absolute;
right:2.5em;
- bottom: 0.9em;
- max-width: 400px;
+ bottom: 0.9em;
+ max-width: 400px;
}
.page-header div p {
- font-size: 14px;
- line-height: 16px;
+ font-size: 14px;
+ line-height: 16px;
}
@media (max-width: 767.99999px) {
.page-header {
@@ -59,7 +59,7 @@ body #wrapper {
display:none;
}
}
- at media (max-width: 1199.99999px) {
+ at media (max-width: 1199.99999px) {
.page-header div {
max-width:330px;
}
@@ -136,9 +136,9 @@ body {
.navbar-secondary .section-header:first-of-type {
margin-top:0px;
}
-.navbar-secondary .navbar-nav>li>a {
- margin-bottom: 0px !important;
-}
+.navbar-secondary .navbar-nav>li>a {
+ margin-bottom: 0px !important;
+}
/* images */
@@ -336,10 +336,27 @@ body .topButton {
color: #5bc0de;
}
+/* home jumbotron */
+.jumbotron {
+ padding-bottom: 10px;
+}
+.jumbotron h1 {
+ margin-top: -20px;
+ font-size: 50px;
+}
+ at media only screen and (max-width : 991px) { .jumbotron h1 { font-size: 46px; } }
+ at media only screen and (max-width : 352px) {
+ .jumbotron h1 {
+ font-size: 38px;
+ }
+ .jumbotron p {
+ display: none;
+ }
+}
/* home dashboard page */
.dashboard {
- padding:3em 5em 0 5em;
+ padding:0em 5em 0 5em;
}
.dashboard .col-sm-4 {
margin-bottom:2em;
@@ -353,10 +370,27 @@ body .topButton {
padding:2em 2em 1em 2em;
color:#999;
}
-.dashboard h2, .dashboard p {
- color:#999;
+.dashboard h2 {
+ font-size: 42px;
+ color: rgb(125, 70, 152);
+ padding-top: 0;
+ margin-top: 0;
+}
+.dashboard h3 {
+ font-size: 26px;
+}
+ at media (max-width: 992px) {
+ .dashboard h3 {
+ font-size: 20px;
+ }
+}
+.dashboard h3, .dashboard p {
+ color: #999;
+}
+.dashboard p.lead {
+ color: #333;
}
-.dashboard a[href], .dashboard a[href]:hover, .dashboard a[href]:focus, .dashboard a[href]:active, .dashboard a[href] h2 {
+.dashboard a[href], .dashboard a[href]:hover, .dashboard a[href]:focus, .dashboard a[href]:active, .dashboard a[href] h3 {
color:#68b030;
}
.dashboard a[href]:hover {
diff --git a/src/main/resources/web/jsps/index.jsp b/src/main/resources/web/jsps/index.jsp
index 56e2afa..5968727 100644
--- a/src/main/resources/web/jsps/index.jsp
+++ b/src/main/resources/web/jsps/index.jsp
@@ -5,32 +5,79 @@
<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>
-
<div class="container">
- <h1>Welcome!</h1>
- <p>
- What would you like to know about the <a href="https://www.torproject.org/" target="_blank">Tor</a> network?
- </p>
+ <div class="jumbotron">
+ <h1>Welcome to Tor Metrics!</h1>
+ <div class="row">
+ <div class="col-md-6">
+ <p>The <a href="https://www.torproject.org/" target="_blank">Tor</a>
+ network is one of the largest deployed anonymity networks, consisting of <a
+ href="/networksize.html"><span
+ id="latest_relay_count">thousands</span></a> of volunteer-run
+ relays and <a
+ href="/userstats-relay-country.html"><span
+ id="latest_user_count">millions</span></a> of users.
+ Users, advocates, relay operators, and journalists can better understand the Tor network
+ through data and analysis made available by Tor Metrics.</p>
+ </div>
+ <div class="col-md-6">
+ <p>Analyzing a live anonymity system must be performed with great care so that
+ the users' privacy is not put at risk. Any metrics collected <i>must
+ not</i> undermine the anonymity or security properties of the Tor
+ network. <a href="/about.html">Read more »</a></p>
+ </div>
+ </div>
</div>
- <div class="container dashboard">
+ <div class="dashboard">
+ <h2><i class="fa fa-line-chart"></i> Analysis</h2>
+ <p class="lead">View visualizations of statistics collected from the public Tor network and from Tor Project infrastructure.</p>
<div class="row">
- <c:forEach var="category" items="${categories}">
<div class="col-sm-4">
- <a<c:if test="${fn:length(category[0]) > 0}"> href="${category[0]}.html"</c:if>><i class="fa ${category[3]} fa-fw fa-4x" aria-hidden="true"></i> <h2>${category[1]}</h2> <p>${category[2]}</p></a>
+ <a href="userstats-relay-country.html"><i class="fa fa-users fa-fw fa-4x" aria-hidden="true"></i> <h3>Users</h3> <p>Where Tor users are from and how they connect to Tor.</p></a>
+ </div>
+
+ <div class="col-sm-4">
+ <a href="networksize.html"><i class="fa fa-server fa-fw fa-4x" aria-hidden="true"></i> <h3>Servers</h3> <p>How many relays and bridges are online and what we know about them.</p></a>
+ </div>
+
+ <div class="col-sm-4">
+ <a href="bandwidth.html"><i class="fa fa-road fa-fw fa-4x" aria-hidden="true"></i> <h3>Traffic</h3> <p>How much traffic the Tor network can handle and how much traffic there is.</p></a>
+ </div>
+
+ <div class="col-sm-4">
+ <a href="torperf.html"><i class="fa fa-dashboard fa-fw fa-4x" aria-hidden="true"></i> <h3>Performance</h3> <p>How fast and reliable the Tor network is.</p></a>
+ </div>
+
+ <div class="col-sm-4">
+ <a href="hidserv-dir-onions-seen.html"><i class="fa fa-map-signs fa-fw fa-4x" aria-hidden="true"></i> <h3>Onion Services</h3> <p>How many onion services there are and how much traffic they pull.</p></a>
</div>
- </c:forEach>
+
+ <div class="col-sm-4">
+ <a href="webstats-tb.html"><i class="fa fa-download fa-fw fa-4x" aria-hidden="true"></i> <h3>Applications</h3> <p>How many Tor applications, like Tor Browser, have been downloaded or updated.</p></a>
+ </div>
+
</div>
</div>
- <div class="container">
- <p><a href="about.html#contact">Let us know</a> if we're missing anything, or if we should measure something else.</p>
+ <div class="dashboard">
+ <h2><i class="fa fa-cogs"></i> Services</h2>
+ <p class="lead">Perform interactive queries for more detailed information relating to relays or bridges in the public Tor network.</p>
+ <div class="row">
+ <div class="col-sm-4">
+ <a href="/rs.html#search"><i class="fa fa-search fa-fw fa-4x" aria-hidden="true"></i> <h3>Relay Search</h3> <p>Look up information on a particular Tor relay or bridge.</p></a>
+ </div>
+
+ <div class="col-sm-4">
+ <a href="/rs.html#aggregate"><i class="fa fa-compress fa-fw fa-4x" aria-hidden="true"></i> <h3>Aggregated Relay Search</h3> <p>Look up aggregated statistics on groups of relays.</p></a>
+ </div>
+
+ <div class="col-sm-4">
+ <a href="https://exonerator.torproject.org/"><i class="fa fa-history fa-fw fa-4x" aria-hidden="true"></i> <h3>Network Archive</h3> <p>Look up if a particular IP address was used as a Tor relay on a particular date.</p></a>
+ </div>
+
+ </div>
+ </div>
</div>
<jsp:include page="bottom.jsp"/>
More information about the tor-commits
mailing list