ui/accessibility/extensions/caretbrowsing/options.html

   1 <html>
   2 <head>
   3   <title>Caret Browsing Options</title>
   4   <style>
   5     body {
   6       font-family: Lucida Grande, sans-serif, arial, helvetica;
   7       width: 920px;
   8       margin-left: auto;
   9       margin-right: auto;
  10     }
  11     .banner {
  12       width: 100%;
  13       float: left;
  14     }
  15     .banner_left {
  16       padding: 8px;
  17       float: left;
  18     }
  19     .banner_right {
  20       padding: 8px;
  21     }
  22     .body_wrapper {
  23       width: 100%;
  24       float: left;
  25     }
  26     .body_left {
  27       border: 0;
  28       padding: 0;
  29       margin: 0;
  30       width: 50%;
  31       float: left;
  32     }
  33     .body_right {
  34       border: 0;
  35       padding: 0;
  36       margin: 0;
  37       width: 46%;
  38       float: left;
  39     }
  40     .body_inner {
  41       padding: 0 32px;
  42     }
  43     body.mac .nonmac {
  44       display: none;
  45     }
  46     body.nonmac .mac {
  47       display: none;
  48     }
  49     body.cros .noncros {
  50       display: none;
  51     }
  52     body.noncros .cros {
  53       display: none;
  54     }
  55     .key {
  56       border: 1px solid #666;
  57       color: #444;
  58       padding: 0.2em 0.8em;
  59       margin: 0 0.3em;
  60       background: #eee;
  61     }
  62     p {
  63       line-height: 1.6em;
  64     }
  65     fieldset {
  66       margin-bottom: 1em;
  67     }
  68     fieldset div {
  69       margin: 0.6em 0;
  70     }
  71     p.cros img {
  72       vertical-align: middle;
  73     }
  74   </style>
  75   <link href="caretbrowsing.css" rel="stylesheet" type="text/css">
  76   <script src="axs_testing.js"></script>
  77   <script src="traverse_util.js"></script>
  78   <script src="caretbrowsing.js"></script>
  79   <script src="options.js"></script>
  80 </head>
  81 <body caretbrowsing="on">
  82
  83 <div class="banner">
  84   <div class="banner_left">
  85     <img src="caret_128.png" class="logo" alt="">
  86   </div>
  87   <div class="banner_right">
  88     <h1 i18n-content="caret_browsing_appName"></h1>
  89     <p i18n-content="caret_browsing_subheading1"></p>
  90     <p i18n-content="caret_browsing_subheading2"></p>
  91   </div>
  92 </div>
  93
  94 <div class="body_wrapper">
  95   <div class="body_left">
  96     <div class="body_inner">
  97       <h2 i18n-content="caret_browsing_keyboardCommands"></h2>
  98
  99       <p class="noncros" i18n-content="caret_browsing_enableDisableNonCros"></p>
 100       <p class="cros" i18n-content="caret_browsing_enableDisableCros"></p>
 101
 102       <div i18n-content="caret_browsing_navHelp"></div>
 103
 104       <p class="nonmac" i18n-content="caret_browsing_moveByWordsNonMac"></p>
 105       <p class="mac" i18n-content="caret_browsing_moveByWordsMac"></p>
 106
 107       <div i18n-content="caret_browsing_focusHelp"></div>
 108     </div>
 109   </div>
 110   <div class="body_right">
 111     <div class="body_inner">
 112       <h2></h2>
 113
 114       <fieldset>
 115         <legend i18n-content="caret_browsing_whenEnabled"></legend>
 116
 117         <div>
 118         <input type="radio" id="onenable_anim" name="onenable" value="anim">
 119         <label for="onenable_anim" i18n-content="caret_browsing_animation"></label>
 120         </div>
 121
 122         <div>
 123         <input type="radio" id="onenable_flash" name="onenable" value="flash">
 124         <label for="onenable_flash" i18n-content="caret_browsing_flash"></label>
 125         </div>
 126
 127         <div>
 128         <input type="radio" id="onenable_nothing" name="onenable" value="none">
 129         <label for="onenable_nothing" i18n-content="caret_browsing_noFeedback"></label>
 130         </div>
 131
 132       </fieldset>
 133
 134       <fieldset>
 135         <legend i18n-content="caret_browsing_jump"></legend>
 136
 137         <div>
 138         <input type="radio" id="onjump_anim" name="onjump" value="anim">
 139         <label for="onjump_anim" i18n-content="caret_browsing_animation"></label>
 140         </div>
 141
 142         <div>
 143         <input type="radio" id="onjump_flash" name="onjump" value="flash">
 144         <label for="onjump_flash" i18n-content="caret_browsing_flash"></label>
 145         </div>
 146
 147         <div>
 148         <input type="radio" id="onjump_nothing" name="onjump" value="none">
 149         <label for="onjump_nothing" i18n-content="caret_browsing_noFeedback"></label>
 150         </div>
 151
 152       </fieldset>
 153
 154     </div>
 155   </div>
 156 </div>
 157
 158 </body>
 159 </html>