commit 8f55bff0cc8fa70cce1ce8a87e0bb54a1bf739e4 Author: Iain R. Learmonth <irl@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; } } -@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"> </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"/>