App-ECE/index.html at master · lfishk/App-ECE · GitHub

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html style="height:100%;">
  <head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <body style="padding:0px;margin:0px;height:100%;">
    <script>
    function change_coef(el)
    {
      var coef = el.textContent;
      coef++;
      if (coef == 4) coef = 0;
      el.innerHTML = coef;
    }

    function change_note(el)
    {
      var note = el.textContent;
      if (note == 'A') el.innerHTML = 'B';
      if (note == 'B') el.innerHTML = 'C';
      if (note == 'C') el.innerHTML = 'D';
      if (note == 'D') el.innerHTML = 'A';
    }
    </script>


      <table style="width:100%;height:100%;">
        <tr style="height:20%">
          <td style="width:20%;text-align:center;">S'APPROPRIER</td>
          <td style="width:20%;text-align:center;">ANALYSER</td>
          <td style="width:20%;text-align:center;">REALISER</td>
          <td style="width:20%;text-align:center;">VALIDER</td>
          <td style="width:20%;text-align:center;">COMMUNIQUER</td>
        </tr>
        <tr style="height:20%">
          <td><div id="rea_note" data-id="note" onclick="change_note(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">A</div></td>
          <td><div id="rea_note" data-id="note" onclick="change_note(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;">A</div></td>
          <td><a id="rea_note" onclick="change_note(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;">A</a></td>
          <td><a id="rea_note" onclick="change_note(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;">A</a></td>
          <td><a id="rea_note" onclick="change_note(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;">A</a></td>
        </tr>
        <tr style="height:20%">
          <td><a id="rea_coef" onclick="change_coef(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;">0</a></td>
          <td><a id="rea_coef" onclick="change_coef(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;">0</a></td>
          <td><a id="rea_coef" onclick="change_coef(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;">0</a></td>
          <td><a id="rea_coef" onclick="change_coef(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;">0</a></td>
          <td><a id="rea_coef" onclick="change_coef(this)" class="waves-effect waves-light btn" style="width:100%;height:100%;">0</a></td>
        </tr>
      </table>


      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script src="js/jquery.fittext.js"></script>
    	<script type="text/javascript">
    		$('[data-id=note]').fitText(0.2);
    	</script>

  </body>
</html>