templates/index.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="utf-8">
   5     <title>Tor Metrics</title>
   6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   7     <meta name="description" content="Tor relay stats">
   8     <meta name="author" content="Sathyanarayanan Gunasekaran">
   9
  10     <!-- Le styles -->
  11     <link href="{{ url_for('static', filename='css/bootstrap.css') }}" rel="stylesheet">
  12     <style type="text/css">
  13       body {
  14         padding-top: 60px;
  15         padding-bottom: 40px;
  16       }
  17     </style>
  18
  19     <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
  20     <!--[if lt IE 9]>
  21       <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  22     <![endif]-->
  23   </head>
  24
  25   <body>
  26
  27     <div class="navbar navbar-fixed-top">
  28       <div class="navbar-inner">
  29         <div class="container">
  30           <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
  31             <span class="icon-bar"></span>
  32             <span class="icon-bar"></span>
  33             <span class="icon-bar"></span>
  34           </a>
  35           <a class="brand" href="{{
  36         url_for('index') }}">Tor Metrics</a>
  37           <div class="nav-collapse">
  38             <ul class="nav">
  39               <li class="active"><a href="{{
  40         url_for('index') }}">Home</a></li>
  41               <li><a href="https://trac.torproject.org/projects/tor/ticket/6498">Trac
  42               Ticket #6498</a></li>
  43             </ul>
  44           </div><!--/.nav-collapse -->
  45         </div>
  46       </div>
  47     </div>
  48
  49     <div class="container">
  50       <div class="hero-unit">
  51         <form class="form-horizontal" action=""
  52               method=get id="form">
  53           <fieldset>
  54             <legend>Tor Relay Stats</legend>
  55             <div class="control-group">
  56               <h3> Filter </h3>
  57               <label class="control-label" for="inactive">Inactive</label>
  58             <div class="controls">
  59               <label class="checkbox">
  60                 <input type="checkbox" id="inactive" value="True" name="inactive">
  61                   include relays in selection that aren't currently running </label>
  62             </div>
  63             <label class="control-label" for="guards">Guards</label>
  64             <div class="controls">
  65               <label class="checkbox">
  66                 <input type="checkbox" id="guards" value="True" name="guards_only">
  67                  select only relays suitable for guard position
  68               </label>
  69             </div>
  70             <label class="control-label" for="exit">Exits</label>
  71             <div class="controls">
  72               <label class="checkbox">
  73                 <input type="checkbox" id="exit" value="True" name="exits_only">
  74                   select only relays suitable for exit position</label>
  75             </div>
  76             <label class="control-label" for="family">Family</label>
  77               <div class="controls">
  78                 <input type="text" class="input-xlarge" id="family" name="family"
  79                        placeholder="A59E1E7C7EAEE083D756EE1FF6EC31CA3D8651D7">
  80                   <span class="help-inline">Select family by fingerprint or nickname</span>
  81               </div>
  82             <label class="control-label" for="asNo">AS Number</label>
  83               <div class="controls">
  84                 <input type="text" class="input-xlarge" id="asNo" name="ases"
  85                        placeholder="AS39138">
  86                   <span class="help-inline">select only relays from AS number</span>
  87               </div>
  88             <label class="control-label" for="cc">Country Code</label>
  89               <div class="controls">
  90                 <input type="text" class="input-xlarge" id="cc" name="country"
  91                        placeholder="de">
  92                   <span class="help-inline">select only relays from country with code</span>
  93               </div>
  94             </div>
  95             <label class="control-label" for="exits">Exits</label>
  96             <div class="controls">
  97               <label class="radio">
  98                 <input type="radio" name="exits" id="all_relays" value="all_relays" checked>
  99                   All relays
 100                 </label>
 101                 <label class="radio">
 102                   <input type="radio" name="exits" id="exits_only" value="fast_exits_only">
 103                     Fast exit relays (95+ Mbit/s, 5000+ KB/s,
 104                     80/443/554/1755, 2 relays per /24)
 105                   </label>
 106                 <label class="radio">
 107                   <input type="radio" name="exits" id="almost_fast_relays" value="almost_fast_exits_only">
 108                     Almost fast exit relays (80+ Mbit/s, 2000+ KB/s, 80/443, not in set of fast exits)
 109                   </label>
 110                 <label class="radio">
 111                   <input type="radio" name="exits" id="exit_relays_any_nw" value="fast_exits_only_any_network">
 112                     Fast exits relays any network (95+ Mbit/s, 5000+ KB/s, 80/443/554/1755)
 113                   </label>
 114                 </div>
 115             <div class="control-group">
 116               <h3> Group </h3>
 117               <label class="control-label" for="country">Country</label>
 118             <div class="controls">
 119               <label class="checkbox">
 120                 <input type="checkbox" id="country" value="True" name="by_country">
 121                  group relays by country </label>
 122             </div>
 123               <label class="control-label" for="as">AS</label>
 124             <div class="controls">
 125                 <input type="checkbox" id="as" value="True" name="by_as">
 126                  group relays by AS </label>
 127             </div>
 128             </div>
 129
 130             <div class="control-group">
 131               <h3> Display </h3>
 132             <label class="control-label" for="top">Number of results</label>
 133               <div class="controls">
 134                 <input type="text" class="input-xlarge" id="top" name="top"
 135                        placeholder="-1" value="-1">
 136                   <span class="help-inline">display only the top results (-1 for all)</span>
 137               </div>
 138             </div>
 139             <div class="form-actions">
 140             <button type="submit" class="btn btn-primary">Submit</button>
 141             <button class="btn" type=reset>Reset</button>
 142           </div>
 143           </fieldset>
 144         </form>
 145       </div>
 146
 147       <hr>
 148
 149       <div id="result"></div>
 150
 151       <footer>
 152         The Tor Project - 2012<br>
 153         <a href="https://gitweb.torproject.org/compass.git">Source code</a> -
 154         <a href="https://trac.torproject.org/projects/tor/newticket?component=Compass">Report a bug</a> -
 155         <a href="mailto:tor-assistants@lists.torproject.org">Contact</a>
 156       </footer>
 157
 158     </div> <!-- /container -->
 159
 160     <!-- Le javascript
 161     ================================================== -->
 162     <!-- Placed at the end of the document so the pages load faster
 163     -->
 164     <script src="{{ url_for('static', filename='js/jquery-1.8.0.min.js') }}"></script>
 165     <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
 166     <script src="{{ url_for('static', filename='js/custom.js') }}"></script>
 167     <script>
 168       doAjax();
 169     var myForm = document.getElementById('form');
 170
 171       myForm.onsubmit = function() {
 172          var allInputs = myForm.getElementsByTagName('input');
 173          var input, i;
 174          for(i = 0; input = allInputs[i]; i++) {
 175             if(input.getAttribute('name') && !input.value) {
 176                input.setAttribute('name', '');
 177             }
 178          }
 179       };
 180
 181
 182     </script>
 183   </body>
 184 </html>