src/firefoxos/main.html@698b4dda1f76 (annotated)
src/firefoxos/main.html
Sat, 13 Jul 2013 09:33:12 +0200
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Sat, 13 Jul 2013 09:33:12 +0200
- changeset 11
- 698b4dda1f76
- parent 8
- 9b8205e1e4a4
- child 13
- deac632e477c
- permissions
- -rw-r--r--
Update to new JQuery core version and correct missing mouse/touch events.
| michael@0 | 1 | <!DOCTYPE html> |
| michael@0 | 2 | <!-- |
| michael@0 | 3 | OTPWCalc - One time password challenge response calculator client |
| michael@0 | 4 | Copyright © 2013 Michael Schloh von Bennewitz <michael@schloh.com> |
| michael@0 | 5 | |
| michael@0 | 6 | OTPWCalc is free software: you can redistribute it and/or modify |
| michael@0 | 7 | it under the terms of the European Union Public Licence, either |
| michael@0 | 8 | version 1.1 of the license, or (at your option) any later version. |
| michael@0 | 9 | |
| michael@0 | 10 | OTPWCalc is distributed in the hope that it will be useful, |
| michael@0 | 11 | but WITHOUT ANY WARRANTY; without even the implied warranty |
| michael@0 | 12 | of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See |
| michael@0 | 13 | the European Union Public License for more details. |
| michael@0 | 14 | |
| michael@0 | 15 | You should have received a copy of the European Union Public |
| michael@0 | 16 | Licence along with OTPWCalc. If not, please refer to |
| michael@0 | 17 | <http://joinup.ec.europa.eu/software/page/eupl/>. |
| michael@0 | 18 | |
| michael@0 | 19 | This file is part of project OTWPCalc, a one time password challenge |
| michael@0 | 20 | response calculator client and is found at http://otpwcalc.europalab.com/ |
| michael@0 | 21 | |
| michael@0 | 22 | main.html: W3C HTML implementation |
| michael@0 | 23 | --> |
| michael@0 | 24 | |
| michael@0 | 25 | <html> |
| michael@0 | 26 | <head> |
| michael@0 | 27 | <meta charset="utf-8"> |
| michael@0 | 28 | <!--<meta http-equiv="Content-Type" content="text/html;charset=utf-8">--> |
| michael@0 | 29 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| michael@0 | 30 | <title>OTPWCalc</title> |
| michael@11 | 31 | <link rel="stylesheet" type="text/css" href="jquery.mobile/jquery.mobile-1.3.1.min.css" /> |
| michael@11 | 32 | <link rel="stylesheet" type="text/css" href="main.css" /> |
| michael@0 | 33 | <!--<script src="sjcl-0.0/sjcl.js"></script>--> |
| michael@0 | 34 | <script src="hashes/md5.js"></script> |
| michael@0 | 35 | <script src="hashes/sha1.js"></script> |
| michael@0 | 36 | <script src="hashes/rmd160.js"></script> |
| michael@0 | 37 | <script src="otpalg/dict.js"></script> |
| michael@0 | 38 | <script src="otpalg/otpalg.js"></script> |
| michael@11 | 39 | <script src="jquery.core/jquery-1.10.2.min.js"></script> |
| michael@0 | 40 | <script src="main.js"></script> |
| michael@0 | 41 | <script src="jquery.mobile/jquery.mobile-1.3.1.min.js"></script> |
| michael@0 | 42 | </head> |
| michael@0 | 43 | <body> |
| michael@0 | 44 | <!-- Data attributes reserved by JQuery Mobile: |
| michael@0 | 45 | data-theme, data-ajax, data-filter, data-icon, data-grid, |
| michael@0 | 46 | data-rel, data-icon, data-url, data-role, and data-type --> |
| michael@0 | 47 | <!-- http://api.jquerymobile.com/data-attribute/ --> |
| michael@0 | 48 | <!--<div data-role="page" data-fullscreen="true" class="type-interior">--> |
| michael@4 | 49 | <div data-role="page" class="type-interior oc-swipage" id="mainhaupt"> |
| michael@0 | 50 | <!-- H1 header data-role good for Search Engine Optimization --> |
| michael@0 | 51 | <!--<div data-role="header" data-position="inline">--> |
| michael@0 | 52 | <div data-role="header" data-position="fixed" data-id="headmain"> |
| michael@0 | 53 | <a href="about.html" data-prefetch="true" data-transition="turn" data-rel="dialog" style="margin-left: 8px; width: 5em">About</a> |
| michael@0 | 54 | <h1>OTPWCalc</h1> |
| michael@4 | 55 | <a href="help/help.html" data-prefetch="true" data-transition="slide" style="margin-right: 8px; width: 5em">Help</a> |
| michael@0 | 56 | </div><!-- /header --> |
| michael@0 | 57 | <div data-role="content"> |
| michael@0 | 58 | <div class="content-primary"> |
| michael@0 | 59 | |
| michael@0 | 60 | <!-- This describes how to use AJAX without a server side script --> |
| michael@0 | 61 | <!-- http://www.terminally-incoherent.com/blog/2011/12/05/making-ajax-driven-websites-without-server-side-scripting/ --> |
| michael@0 | 62 | |
| michael@0 | 63 | <form method="post" onsubmit="return dosubmit();" onreset="return doreset();" data-ajax="false"> |
| michael@0 | 64 | <ul data-role="listview"> |
| michael@0 | 65 | <!--<h2>OTPWCalc</h2>--> |
| michael@0 | 66 | |
| michael@0 | 67 | <!-- Implement embedded help system later |
| michael@0 | 68 | <p>Type the given hash value and sequence number, your |
| michael@0 | 69 | secret passphrase, and choose the encryption algorythm |
| michael@0 | 70 | to receive a one time password (OTPW) for login.</p> |
| michael@0 | 71 | --> |
| michael@0 | 72 | |
| michael@0 | 73 | <li> |
| michael@0 | 74 | <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c"> |
| michael@0 | 75 | <h3>Input Values</h3> |
| michael@0 | 76 | <fieldset class="ui-grid-a"> |
| michael@0 | 77 | <div class="ui-block-a" style="padding-right: 1em;"> |
| michael@0 | 78 | <input type="text" name="seedid" id="seedid" value="" placeholder="Seed ID" pattern="[0-9A-Za-z]*" required /> |
| michael@0 | 79 | </div> |
| michael@0 | 80 | <div class="ui-block-b"> |
| michael@0 | 81 | <input type="number" name="crement" id="crement" pattern="[0-9]*" value="" placeholder="Sequence #" min="1" required /> |
| michael@0 | 82 | </div> |
| michael@0 | 83 | </fieldset> |
| michael@0 | 84 | |
| michael@0 | 85 | <div data-role="fieldcontain" style="text-align: right; border: none;"> |
| michael@0 | 86 | <label for="selectdecr" style="float: left; width: 40%;">Automatic<br />Decrement</label> |
| michael@0 | 87 | <select name="selectdecr" id="selectdecr" data-iconpos="left" data-inline="true"> |
| michael@0 | 88 | <option value="0">Disabled</option> |
| michael@0 | 89 | <option value="1">Offset 1</option> |
| michael@0 | 90 | <option value="2">Offset 2</option> |
| michael@0 | 91 | <option value="3">Offset 3</option> |
| michael@0 | 92 | <option value="4">Offset 4</option> |
| michael@0 | 93 | </select> |
| michael@0 | 94 | </div> |
| michael@0 | 95 | |
| michael@0 | 96 | <input type="password" data-clear-btn="true" name="paswrd" id="paswrd" value="" placeholder="Secret" /> |
| michael@0 | 97 | |
| michael@0 | 98 | <!-- JQM miscalculated spacing --> |
| michael@0 | 99 | <div style="height: 0.25em;"></div> |
| michael@0 | 100 | |
| michael@11 | 101 | <a type=button name="viewpass" id="viewpass" data-theme="b" data-icon="otpwcalc-seepass" onmousedown="$('#paswrd').get(0).type='text'; return false;" ontouchstart="$('#paswrd').get(0).type='text'; return false;" onmouseup="$('#paswrd').get(0).type='password'; return false;" ontouchend="$('#paswrd').get(0).type='password'; return false;">Press to Reveal Secret</a> |
| michael@0 | 102 | </div> |
| michael@0 | 103 | </li> |
| michael@0 | 104 | |
| michael@0 | 105 | <li> |
| michael@0 | 106 | <div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="c"> |
| michael@0 | 107 | <h3>Output Format</h3> |
| michael@0 | 108 | <fieldset data-role="controlgroup" data-type="horizontal" style="width: 100%;"> |
| michael@0 | 109 | <!--<input type="radio" name="radio-choice-b" id="radio-choice-a" value="off" /> |
| michael@0 | 110 | <label for="radio-choice-a">MD4</label>--> |
| michael@0 | 111 | <input type="radio" name="radiohash" id="hashmd5" value="on" checked="checked" style="width: 33%;" /> |
| michael@0 | 112 | <label for="hashmd5">MD5</label> |
| michael@0 | 113 | <input type="radio" name="radiohash" id="hashsha1" value="off" style="width: 33%;" /> |
| michael@0 | 114 | <label for="hashsha1">SHA1</label> |
| michael@0 | 115 | <input type="radio" name="radiohash" id="hashr160" value="off" style="width: 33%;" /> |
| michael@0 | 116 | <label for="hashr160">R160</label> |
| michael@0 | 117 | </fieldset> |
| michael@0 | 118 | |
| michael@0 | 119 | <!-- JQM miscalculated spacing --> |
| michael@0 | 120 | <div style="height: 0.25em;"></div> |
| michael@0 | 121 | |
| michael@0 | 122 | <fieldset data-role="controlgroup"> |
| michael@0 | 123 | <input type="radio" name="radiodisplay" id="displaysix" class="custom" value="on" checked="checked" /> |
| michael@0 | 124 | <label for="displaysix">Display six words</label> |
| michael@0 | 125 | <input type="radio" name="radiodisplay" id="displayhex" class="custom" value="off" /> |
| michael@0 | 126 | <label for="displayhex">Display hexadecimal</label> |
| michael@0 | 127 | </fieldset> |
| michael@0 | 128 | </div> |
| michael@0 | 129 | </li> |
| michael@0 | 130 | |
| michael@0 | 131 | <li> |
| michael@0 | 132 | <div class="ui-body" style="text-align: center; height: 2em; padding-left: 0; padding-right: 0; padding-top: 0.5em; padding-bottom: 0.5em;"> |
| michael@0 | 133 | <label><div id="outext" style="color: rgb(192,0,0); font-size: 1.125em;">Please Click Submit For A OTP</div></label> |
| michael@0 | 134 | </div> |
| michael@0 | 135 | |
| michael@0 | 136 | <fieldset class="ui-grid-a"> |
| michael@0 | 137 | <div class="ui-block-a"><button type="reset" data-theme="c" data-icon="delete">Reset</button></div> |
| michael@0 | 138 | <div class="ui-block-b"><button type="submit" data-theme="b" data-icon="check">Submit</button></div> |
| michael@0 | 139 | </fieldset> |
| michael@0 | 140 | </li> |
| michael@0 | 141 | </ul> |
| michael@0 | 142 | </form> |
| michael@0 | 143 | </div><!-- /content-primary --> |
| michael@0 | 144 | </div><!-- /content --> |
| michael@0 | 145 | </div><!-- /page --> |
| michael@0 | 146 | </body> |
| michael@0 | 147 | </html> |
