examples/pnacl/converter/converter/index.html

   1 <!--# This file is part of NIT ( http://www.nitlanguage.org )
   2 #
   3 # Copyright 2014 Johan Kayser <kayser.johan@gmail.com>
   4 #
   5 # Licensed under the Apache License, Version 2.0 (the "License");
   6 # you may not use this file except in compliance with the License.
   7 # You may obtain a copy of the License at
   8 #
   9 #     http://www.apache.org/licenses/LICENSE-2.0
  10 #
  11 # Unless required by applicable law or agreed to in writing, software
  12 # distributed under the License is distributed on an "AS IS" BASIS,
  13 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14 # See the License for the specific language governing permissions and
  15 # limitations under the License.
  16 -->
  17 <!DOCTYPE html>
  18 <html>
  19 <head>
  20         <title>Converter</title>
  21         <script src="js/pnacl_js.js"></script>
  22         <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  23 </head>
  24 <body>
  25         <h1>Currency converter<small> with PNaCl and Nit</small></h1>
  26         <form class="form-horizontal bg-success" role="form" style="padding-top:15px;padding-bottom:1px;">
  27           <div class="form-group">
  28             <label for="inputConvert" class="col-sm-2 control-label">Convert</label>
  29             <div class="col-sm-9">
  30                 <div class="row">
  31                   <div id="pre-input" class="col-xs-2">
  32                     <input id="input" type="text" class="form-control" placeholder="ex: 300" required>
  33                   </div>
  34                   <div class="col-xs-3">
  35                     <select id="from" class="form-control" required>
  36                           <option selected="selected" disabled="disabled">Currency</option>
  37                           <option>EUR</option>
  38                           <option>CAD</option>
  39                           <option>USD</option>
  40                     </select>
  41                   </div>
  42                 </div>
  43             </div>
  44           </div>
  45           <div class="form-group">
  46             <label for="inputTo" class="col-sm-2 control-label">to</label>
  47             <div class="col-sm-9">
  48                     <div class="row">
  49                           <div class="col-xs-2">
  50                             <input id="rez" type="text" class="form-control" placeholder=".col-xs-2" disabled="disabled" style="visibility: hidden">
  51                           </div>
  52                           <div class="col-xs-3">
  53                             <select id="to" class="form-control" required>
  54                                 <option selected="selected" disabled="disabled">Currency</option>
  55                                 <option>EUR</option>
  56                                 <option>CAD</option>
  57                                 <option>USD</option>
  58                             </select>
  59                           </div>
  60                         </div>
  61                     </div>
  62             </div>
  63           </div>
  64           <div class="form-group">
  65             <div class="col-sm-offset-2 col-sm-10">
  66               <button id="button" type="button" class="btn btn-success">Convert</button>
  67             </div>
  68           </div>
  69         </form>
  70         <p>
  71                 <div id="listener">
  72                         <!-- Listeners calling functions in pnacl_js.js -->
  73                         <script type="text/javascript">
  74                                 var listener = document.getElementById('listener');
  75                                 listener.addEventListener('load', moduleDidLoad, true);
  76                                 listener.addEventListener('message', handleMessage, true);
  77                         </script>
  78                         <!-- Embed bloc referencing to the manifest -->
  79                         <embed id="converter"
  80                                 width=0 height=0
  81                                 src="converter.nmf"
  82                                 type="application/x-pnacl" />
  83                 </div>
  84         </p>
  85         <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  86         <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  87         <script src="js/functions.js"></script>
  88 </body>
  89 </html>