src/chrome/content/aboutTor/aboutTor.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--
   3    - Copyright (c) 2018, The Tor Project, Inc.
   4    - See LICENSE for licensing information.
   5    - vim: set sw=2 sts=2 ts=8 et syntax=xml:
   6   -->
   7
   8 <!DOCTYPE html [
   9   <!ENTITY % htmlDTD
  10     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  11     "DTD/xhtml1-strict.dtd">
  12   %htmlDTD;
  13   <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
  14   %globalDTD;
  15   <!ENTITY % aboutTorDTD SYSTEM "chrome://torbutton/locale/aboutTor.dtd">
  16   %aboutTorDTD;
  17 ]>
  18
  19 <html xmlns="http://www.w3.org/1999/xhtml">
  20 <head>
  21   <title>&aboutTor.title;</title>
  22   <link rel="stylesheet" type="text/css" media="all"
  23         href="resource://torbutton-assets/aboutTor.css"/>
  24 <script type="text/javascript">
  25  <![CDATA[
  26 window.addEventListener("pageshow", function() {
  27   let evt = new CustomEvent("AboutTorLoad", { bubbles: true });
  28   document.dispatchEvent(evt);
  29 });
  30 ]]>
  31 </script>
  32 </head>
  33 <body dir="&locale.dir;">
  34   <div class="torcontent-container">
  35     <div id="torstatus-version"/>
  36     <div id="torstatus" class="top">
  37       <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
  38         <div class="heading1">&aboutTor.ready.label;</div>
  39         <br/>
  40         <div class="heading2">&aboutTor.ready2.label;</div>
  41       </div>
  42       <div id="torstatus-off-container" class="hideIfTorOn torstatus-container">
  43         <div class="heading1">&aboutTor.failure.label;</div>
  44         <br/>
  45         <div class="heading2">&aboutTor.failure2.label;</div>
  46       </div>
  47     </div>
  48
  49     <div class="searchbox hideIfTorOff"> <!-- begin form based search -->
  50       <form action="&aboutTor.searchDDGPost.link;" method="post">
  51         <div class="searchwrapper">
  52           <label class="searchlabel" for="search-text">&nbsp;</label>
  53           <input name="q" id="search-text" placeholder="&aboutTor.search.label;"
  54                  autocomplete="off" type="text"/>
  55           <input name="b" id="search-button" value=""
  56                  title="&aboutTor.search.label;"
  57                  alt="&aboutTor.search.label;" type="submit"/>
  58         </div>
  59       </form>
  60     </div>
  61
  62     <div id="bottom">
  63       <p class="showForManual moreInfoLink">&aboutTor.torbrowser_user_manual_questions.label;
  64         <a id="manualLink">&aboutTor.torbrowser_user_manual_link.label;</a></p>
  65       <p>&aboutTor.tor_mission.label;
  66         <a href="&aboutTor.getInvolved.link;">&aboutTor.getInvolved.label;</a></p>
  67     </div>
  68   </div>
  69
  70 <!--
  71    - The abstract onion pattern begins here. There are two
  72    - "onion-pattern-row" elements, each containing 14 circles. The width
  73    - of "onion-pattern-row" is fixed at a value that is wide enough so the
  74    - circles are not distorted by the flex-based layout. The parent
  75    - "onion-pattern-container" element has overflow: hidden and is designed
  76    - to expand to the width of the page, until it reaches a maximum width
  77    - that can accommodate all 14 circles. Since the rows are wider than
  78    - most browser windows, typically the two rows of onions will fill the
  79    - bottom of the page. On really wide pages, the onions are centered at
  80    - the bottom of the page.
  81   -->
  82   <div class="onion-pattern-container">
  83     <div class="onion-pattern-row">
  84       <div class="circle solid"></div>
  85
  86       <div class="circle border"></div>
  87
  88       <div class="circle border">
  89         <div class="inner border"></div>
  90         <div class="inner border"></div>
  91         <div class="inner border"></div>
  92       </div>
  93
  94       <div class="circle">
  95         <div class="half solid"></div>
  96         <div class="half dotted"></div>
  97       </div>
  98
  99       <div class="circle dotted"></div>
 100
 101       <div class="circle dotted">
 102         <div class="inner dotted"></div>
 103         <div class="inner dotted"></div>
 104         <div class="inner dotted"></div>
 105       </div>
 106
 107       <div class="circle dashed"></div>
 108
 109       <div class="circle dashed">
 110         <div class="inner dashed"></div>
 111         <div class="inner dashed"></div>
 112         <div class="inner dashed"></div>
 113       </div>
 114
 115       <div class="circle bold"></div>
 116
 117       <div class="circle solid"></div>
 118
 119       <div class="circle dotted">
 120         <div class="inner dotted"></div>
 121         <div class="inner dotted"></div>
 122         <div class="inner dotted"></div>
 123       </div>
 124
 125       <div class="circle border">
 126         <div class="inner border"></div>
 127         <div class="inner border"></div>
 128         <div class="inner border"></div>
 129       </div>
 130
 131       <div class="circle">
 132         <div class="half solid"></div>
 133         <div class="half solid"></div>
 134       </div>
 135
 136      <div class="circle dashed">
 137         <div class="inner dashed"></div>
 138         <div class="inner dashed"></div>
 139         <div class="inner dashed"></div>
 140       </div>
 141     </div>
 142
 143     <div class="onion-pattern-row onion-pattern-offset-row">
 144       <div class="circle dashed">
 145         <div class="inner dashed"></div>
 146         <div class="inner dashed"></div>
 147         <div class="inner dashed"></div>
 148       </div>
 149
 150       <div class="circle bold"></div>
 151
 152       <div class="circle solid"></div>
 153
 154       <div class="circle dotted">
 155         <div class="inner dotted"></div>
 156         <div class="inner dotted"></div>
 157         <div class="inner dotted"></div>
 158       </div>
 159
 160       <div class="circle border">
 161         <div class="inner border"></div>
 162         <div class="inner border"></div>
 163         <div class="inner border"></div>
 164       </div>
 165
 166       <div class="circle">
 167         <div class="half solid"></div>
 168         <div class="half solid"></div>
 169       </div>
 170
 171      <div class="circle dashed">
 172         <div class="inner dashed"></div>
 173         <div class="inner dashed"></div>
 174         <div class="inner dashed"></div>
 175       </div>
 176
 177       <div class="circle solid"></div>
 178
 179       <div class="circle border"></div>
 180
 181       <div class="circle border">
 182         <div class="inner border"></div>
 183         <div class="inner border"></div>
 184         <div class="inner border"></div>
 185       </div>
 186
 187       <div class="circle">
 188         <div class="half solid"></div>
 189         <div class="half dotted"></div>
 190       </div>
 191
 192       <div class="circle dotted"></div>
 193
 194       <div class="circle dotted">
 195         <div class="inner dotted"></div>
 196         <div class="inner dotted"></div>
 197         <div class="inner dotted"></div>
 198       </div>
 199
 200       <div class="circle dashed"></div>
 201     </div>
 202   </div>
 203 </body>
 204 </html>