index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Synhestesis - Test</title>
  </head>
      <style type="text/css">
        div.fileinputs {
            position: relative;
        }
        div.fakefile {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
        }
        div.fakefile input[type=button] {
            /* enough width to completely overlap the real hidden file control */
            cursor: pointer;
        }
        div.fileinputs input.file {
            position: relative;
            text-align: right;
            -moz-opacity:0 ;
            filter:alpha(opacity: 0);
            opacity: 0;
            z-index: 2;
        }
    </style>
  <body>
    <div style="margin-top:5%;margin-left:auto;margin-right:auto;width:80%;height:100px;z-index:4;" id="onTop">
	    <span id="compteur"></span>
	    <span id="ratio"></span>
        
    <div class="fileinputs">
        <input type="file" class="file" id="getFile" />

        <div class="fakefile">
            <input type="button" value="Open" />
        </div>
        <select name="select" id="select">
            <option value="hiragana_romaji.json">Hiragana</option>
            <option value="katakana_romaji.json">Katakana</option>
        </select>
    </div>
    </div>
  <div id="output" style="margin-left:auto;margin-right:auto;width:300px;height:300px;">
  </div>
  <script type="text/javascript" src="./synhestesis.js"></script>
  </body>
</html>