[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]

[tor-commits] [metrics-web/release] Adds extended introduction and services to the home page (See: #23169)



commit 8f55bff0cc8fa70cce1ce8a87e0bb54a1bf739e4
Author: Iain R. Learmonth <irl@xxxxxxxx>
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;
     }
 }
-@media (max-width: 1199.99999px) {
+@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;
+}
+@media only screen and (max-width : 991px) { .jumbotron h1 { font-size: 46px; } }
+@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;
+}
+@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">&nbsp;</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 &raquo;</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"/>



_______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits