1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/src/firefoxos/main.html Mon Apr 22 22:00:43 2013 +0200
1.3 @@ -0,0 +1,147 @@
1.4 +<!DOCTYPE html>
1.5 +<!--
1.6 +OTPWCalc - One time password challenge response calculator client
1.7 +Copyright © 2013 Michael Schloh von Bennewitz <michael@schloh.com>
1.8 +
1.9 +OTPWCalc is free software: you can redistribute it and/or modify
1.10 +it under the terms of the European Union Public Licence, either
1.11 +version 1.1 of the license, or (at your option) any later version.
1.12 +
1.13 +OTPWCalc is distributed in the hope that it will be useful,
1.14 +but WITHOUT ANY WARRANTY; without even the implied warranty
1.15 +of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See
1.16 +the European Union Public License for more details.
1.17 +
1.18 +You should have received a copy of the European Union Public
1.19 +Licence along with OTPWCalc. If not, please refer to
1.20 +<http://joinup.ec.europa.eu/software/page/eupl/>.
1.21 +
1.22 +This file is part of project OTWPCalc, a one time password challenge
1.23 +response calculator client and is found at http://otpwcalc.europalab.com/
1.24 +
1.25 +main.html: W3C HTML implementation
1.26 +-->
1.27 +
1.28 +<html>
1.29 + <head>
1.30 + <meta charset="utf-8">
1.31 + <!--<meta http-equiv="Content-Type" content="text/html;charset=utf-8">-->
1.32 + <meta name="viewport" content="width=device-width, initial-scale=1">
1.33 + <title>OTPWCalc</title>
1.34 + <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.3.1.min.css" />
1.35 + <link rel="stylesheet" href="main.css" />
1.36 + <!--<script src="sjcl-0.0/sjcl.js"></script>-->
1.37 + <script src="hashes/md5.js"></script>
1.38 + <script src="hashes/sha1.js"></script>
1.39 + <script src="hashes/rmd160.js"></script>
1.40 + <script src="otpalg/dict.js"></script>
1.41 + <script src="otpalg/otpalg.js"></script>
1.42 + <script src="jquery.core/jquery-1.9.1.js"></script>
1.43 + <script src="main.js"></script>
1.44 + <script src="jquery.mobile/jquery.mobile-1.3.1.min.js"></script>
1.45 +</head>
1.46 +<body>
1.47 + <!-- Data attributes reserved by JQuery Mobile:
1.48 + data-theme, data-ajax, data-filter, data-icon, data-grid,
1.49 + data-rel, data-icon, data-url, data-role, and data-type -->
1.50 + <!-- http://api.jquerymobile.com/data-attribute/ -->
1.51 + <!--<div data-role="page" data-fullscreen="true" class="type-interior">-->
1.52 + <div data-role="page" class="type-interior">
1.53 + <!-- H1 header data-role good for Search Engine Optimization -->
1.54 + <!--<div data-role="header" data-position="inline">-->
1.55 + <div data-role="header" data-position="fixed" data-id="headmain">
1.56 + <a href="about.html" data-prefetch="true" data-transition="turn" data-rel="dialog" style="margin-left: 8px; width: 5em">About</a>
1.57 + <h1>OTPWCalc</h1>
1.58 + <a href="help.html" data-prefetch="true" data-transition="flow" style="margin-right: 8px; width: 5em">Help</a>
1.59 + </div><!-- /header -->
1.60 + <div data-role="content">
1.61 + <div class="content-primary">
1.62 +
1.63 + <!-- This describes how to use AJAX without a server side script -->
1.64 + <!-- http://www.terminally-incoherent.com/blog/2011/12/05/making-ajax-driven-websites-without-server-side-scripting/ -->
1.65 +
1.66 + <form method="post" onsubmit="return dosubmit();" onreset="return doreset();" data-ajax="false">
1.67 + <ul data-role="listview">
1.68 + <!--<h2>OTPWCalc</h2>-->
1.69 +
1.70 + <!-- Implement embedded help system later
1.71 + <p>Type the given hash value and sequence number, your
1.72 + secret passphrase, and choose the encryption algorythm
1.73 + to receive a one time password (OTPW) for login.</p>
1.74 + -->
1.75 +
1.76 + <li>
1.77 + <div data-role="collapsible" data-collapsed="false" data-theme="e" data-content-theme="c">
1.78 + <h3>Input Values</h3>
1.79 + <fieldset class="ui-grid-a">
1.80 + <div class="ui-block-a" style="padding-right: 1em;">
1.81 + <input type="text" name="seedid" id="seedid" value="" placeholder="Seed ID" pattern="[0-9A-Za-z]*" required />
1.82 + </div>
1.83 + <div class="ui-block-b">
1.84 + <input type="number" name="crement" id="crement" pattern="[0-9]*" value="" placeholder="Sequence #" min="1" required />
1.85 + </div>
1.86 + </fieldset>
1.87 +
1.88 + <div data-role="fieldcontain" style="text-align: right; border: none;">
1.89 + <label for="selectdecr" style="float: left; width: 40%;">Automatic<br />Decrement</label>
1.90 + <select name="selectdecr" id="selectdecr" data-iconpos="left" data-inline="true">
1.91 + <option value="0">Disabled</option>
1.92 + <option value="1">Offset 1</option>
1.93 + <option value="2">Offset 2</option>
1.94 + <option value="3">Offset 3</option>
1.95 + <option value="4">Offset 4</option>
1.96 + </select>
1.97 + </div>
1.98 +
1.99 + <input type="password" data-clear-btn="true" name="paswrd" id="paswrd" value="" placeholder="Secret" />
1.100 +
1.101 + <!-- JQM miscalculated spacing -->
1.102 + <div style="height: 0.25em;"></div>
1.103 +
1.104 + <a type=button name="viewpass" id="viewpass" data-theme="b" data-icon="otpwcalc-seepass" onmousedown="$('#paswrd').get(0).type='text'; return false;" onmouseup="$('#paswrd').get(0).type='password'; return false;">Press to Reveal Secret</a>
1.105 + </div>
1.106 + </li>
1.107 +
1.108 + <li>
1.109 + <div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="c">
1.110 + <h3>Output Format</h3>
1.111 + <fieldset data-role="controlgroup" data-type="horizontal" style="width: 100%;">
1.112 + <!--<input type="radio" name="radio-choice-b" id="radio-choice-a" value="off" />
1.113 + <label for="radio-choice-a">MD4</label>-->
1.114 + <input type="radio" name="radiohash" id="hashmd5" value="on" checked="checked" style="width: 33%;" />
1.115 + <label for="hashmd5">MD5</label>
1.116 + <input type="radio" name="radiohash" id="hashsha1" value="off" style="width: 33%;" />
1.117 + <label for="hashsha1">SHA1</label>
1.118 + <input type="radio" name="radiohash" id="hashr160" value="off" style="width: 33%;" />
1.119 + <label for="hashr160">R160</label>
1.120 + </fieldset>
1.121 +
1.122 + <!-- JQM miscalculated spacing -->
1.123 + <div style="height: 0.25em;"></div>
1.124 +
1.125 + <fieldset data-role="controlgroup">
1.126 + <input type="radio" name="radiodisplay" id="displaysix" class="custom" value="on" checked="checked" />
1.127 + <label for="displaysix">Display six words</label>
1.128 + <input type="radio" name="radiodisplay" id="displayhex" class="custom" value="off" />
1.129 + <label for="displayhex">Display hexadecimal</label>
1.130 + </fieldset>
1.131 + </div>
1.132 + </li>
1.133 +
1.134 + <li>
1.135 + <div class="ui-body" style="text-align: center; height: 2em; padding-left: 0; padding-right: 0; padding-top: 0.5em; padding-bottom: 0.5em;">
1.136 + <label><div id="outext" style="color: rgb(192,0,0); font-size: 1.125em;">Please Click Submit For A OTP</div></label>
1.137 + </div>
1.138 +
1.139 + <fieldset class="ui-grid-a">
1.140 + <div class="ui-block-a"><button type="reset" data-theme="c" data-icon="delete">Reset</button></div>
1.141 + <div class="ui-block-b"><button type="submit" data-theme="b" data-icon="check">Submit</button></div>
1.142 + </fieldset>
1.143 + </li>
1.144 + </ul>
1.145 + </form>
1.146 + </div><!-- /content-primary -->
1.147 + </div><!-- /content -->
1.148 + </div><!-- /page -->
1.149 +</body>
1.150 +</html>
