src/chrome/content/aboutTor/aboutTor.xhtml

   1 <?xml version="1.0" encoding="UTF-8"?>
   2 <!--
   3    - Copyright (c) 2019, 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   <meta name="viewport" content="width=device-width, initial-scale=1"/>
  22   <title>&aboutTor.title;</title>
  23   <link rel="stylesheet" type="text/css" media="all"
  24         href="resource://torbutton-assets/aboutTor.css"/>
  25 <script type="text/javascript">
  26  <![CDATA[
  27 window.addEventListener("pageshow", function() {
  28   let evt = new CustomEvent("AboutTorLoad", { bubbles: true });
  29   document.dispatchEvent(evt);
  30 });
  31 ]]>
  32 </script>
  33 </head>
  34 <body dir="&locale.dir;">
  35   <div class="torcontent-container">
  36     <div id="torstatus-version"/>
  37     <img class="torcontent-logo" src="resource://torbutton-assets/torbrowser_mobile_logo.png"/>
  38     <div id="torstatus" class="top">
  39       <div id="torstatus-on-container" class="hideIfTorOff torstatus-container">
  40         <div class="heading1">&aboutTor.ready.label;</div>
  41         <br/>
  42         <div class="heading2">&aboutTor.ready2.label;</div>
  43       </div>
  44       <div id="torstatus-off-container" class="hideIfTorOn torstatus-container">
  45         <div class="heading1">&aboutTor.failure.label;</div>
  46         <br/>
  47         <div class="heading2">&aboutTor.failure2.label;</div>
  48       </div>
  49     </div>
  50
  51     <div class="searchbox hideIfTorOff"> <!-- begin form based search -->
  52       <form action="&aboutTor.searchDDGPost.link;" method="post">
  53         <div class="searchwrapper">
  54           <label class="searchlabel" for="search-text">&nbsp;</label>
  55           <input name="q" id="search-text" placeholder="&aboutTor.search.label;"
  56                  autocomplete="off" type="text"/>
  57           <input name="b" id="search-button" value=""
  58                  title="&aboutTor.search.label;"
  59                  alt="&aboutTor.search.label;" type="submit"/>
  60         </div>
  61       </form>
  62     </div>
  63
  64     <div id="bottom">
  65       <p class="showForManual moreInfoLink">&aboutTor.torbrowser_user_manual_questions.label;
  66         <a id="manualLink" target="_blank">&aboutTor.torbrowser_user_manual_link.label;</a></p>
  67       <p>&aboutTor.tor_mission.label;
  68         <a href="&aboutTor.getInvolved.link;">&aboutTor.getInvolved.label;</a></p>
  69     </div>
  70   </div>
  71
  72 <!--
  73    - The abstract onion pattern begins here. There are two
  74    - "onion-pattern-row" elements, each containing 14 circles. The width
  75    - of "onion-pattern-row" is fixed at a value that is wide enough so the
  76    - circles are not distorted by the flex-based layout. The parent
  77    - "onion-pattern-container" element has overflow-x: hidden and is designed
  78    - to expand to the width of the page, until it reaches a maximum width
  79    - that can accommodate all 14 circles. Since the rows are wider than
  80    - most browser windows, typically the two rows of onions will fill the
  81    - bottom of the page. On really wide pages, the onions are centered at
  82    - the bottom of the page.
  83   -->
  84   <div class="onion-pattern-container">
  85     <div class="onion-pattern-row">
  86       <div class="circle solid"></div>
  87
  88       <div class="circle border"></div>
  89
  90       <div class="circle border">
  91         <div class="inner border"></div>
  92         <div class="inner border"></div>
  93         <div class="inner border"></div>
  94       </div>
  95
  96       <div class="circle">
  97         <div class="half solid"></div>
  98         <div class="half dotted"></div>
  99       </div>
 100
 101       <div class="circle dotted"></div>
 102
 103       <div class="circle dotted">
 104         <div class="inner dotted"></div>
 105         <div class="inner dotted"></div>
 106         <div class="inner dotted"></div>
 107       </div>
 108
 109       <div class="circle dashed"></div>
 110
 111       <div class="circle dashed">
 112         <div class="inner dashed"></div>
 113         <div class="inner dashed"></div>
 114         <div class="inner dashed"></div>
 115       </div>
 116
 117       <div class="circle bold"></div>
 118
 119       <div class="circle solid"></div>
 120
 121       <div class="circle dotted">
 122         <div class="inner dotted"></div>
 123         <div class="inner dotted"></div>
 124         <div class="inner dotted"></div>
 125       </div>
 126
 127       <div class="circle border">
 128         <div class="inner border"></div>
 129         <div class="inner border"></div>
 130         <div class="inner border"></div>
 131       </div>
 132
 133       <div class="circle">
 134         <div class="half solid"></div>
 135         <div class="half solid"></div>
 136       </div>
 137
 138      <div class="circle dashed">
 139         <div class="inner dashed"></div>
 140         <div class="inner dashed"></div>
 141         <div class="inner dashed"></div>
 142       </div>
 143
 144       <div class="circle dotted"></div>
 145
 146       <div class="circle dotted">
 147         <div class="inner dotted"></div>
 148         <div class="inner dotted"></div>
 149         <div class="inner dotted"></div>
 150       </div>
 151
 152       <div class="circle dashed"></div>
 153
 154       <div class="circle dashed">
 155         <div class="inner dashed"></div>
 156         <div class="inner dashed"></div>
 157         <div class="inner dashed"></div>
 158       </div>
 159
 160       <div class="circle bold"></div>
 161
 162       <div class="circle solid"></div>
 163     </div>
 164
 165     <div class="onion-pattern-row onion-pattern-offset-row">
 166       <div class="circle dashed">
 167         <div class="inner dashed"></div>
 168         <div class="inner dashed"></div>
 169         <div class="inner dashed"></div>
 170       </div>
 171
 172       <div class="circle bold"></div>
 173
 174       <div class="circle solid"></div>
 175
 176       <div class="circle dotted">
 177         <div class="inner dotted"></div>
 178         <div class="inner dotted"></div>
 179         <div class="inner dotted"></div>
 180       </div>
 181
 182       <div class="circle border">
 183         <div class="inner border"></div>
 184         <div class="inner border"></div>
 185         <div class="inner border"></div>
 186       </div>
 187
 188       <div class="circle">
 189         <div class="half solid"></div>
 190         <div class="half solid"></div>
 191       </div>
 192
 193      <div class="circle dashed">
 194         <div class="inner dashed"></div>
 195         <div class="inner dashed"></div>
 196         <div class="inner dashed"></div>
 197       </div>
 198
 199       <div class="circle solid"></div>
 200
 201       <div class="circle border"></div>
 202
 203       <div class="circle border">
 204         <div class="inner border"></div>
 205         <div class="inner border"></div>
 206         <div class="inner border"></div>
 207       </div>
 208
 209       <div class="circle">
 210         <div class="half solid"></div>
 211         <div class="half dotted"></div>
 212       </div>
 213
 214       <div class="circle dotted"></div>
 215
 216       <div class="circle dotted">
 217         <div class="inner dotted"></div>
 218         <div class="inner dotted"></div>
 219         <div class="inner dotted"></div>
 220       </div>
 221
 222       <div class="circle dashed"></div>
 223
 224       <div class="circle solid"></div>
 225
 226       <div class="circle dashed">
 227         <div class="inner dashed"></div>
 228         <div class="inner dashed"></div>
 229         <div class="inner dashed"></div>
 230       </div>
 231
 232       <div class="circle border">
 233         <div class="inner border"></div>
 234         <div class="inner border"></div>
 235         <div class="inner border"></div>
 236       </div>
 237
 238       <div class="circle">
 239         <div class="half solid"></div>
 240         <div class="half solid"></div>
 241       </div>
 242
 243       <div class="circle dotted">
 244         <div class="inner dotted"></div>
 245         <div class="inner dotted"></div>
 246         <div class="inner dotted"></div>
 247       </div>
 248
 249       <div class="circle">
 250         <div class="half solid"></div>
 251         <div class="half dotted"></div>
 252       </div>
 253
 254       <div class="circle dotted"></div>
 255     </div>
 256   </div>
 257 </body>
 258 </html>