laira
/
iFractions-doc


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304
							<!-- LInE - Free Education, Private Data - http://www.usp.br/line -->
<!DOCTYPE html>
<html lang='pt-br'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>

  <meta name="description" content="Collection of educational games for teaching fractions" />
  <meta name="keywords" content="ifractions, ifrações, fraction, game, private data, math, moodle" />

  <link rel="icon" type="image/ico" href="../../assets/flag_icon.png">
  <link rel="stylesheet" href="../../style/bootstrap/bootstrap.min.css">
  <link rel='stylesheet' href="../../style/style.css">

  <title>iFractions | ...</title>
</head>

<body class="container-flex">

  <!-- menu superior -->
  <nav class="navbar navbar-expand-lg navbar-dark ifr__color__blue">
  </nav>

  <!-- botao de voltar ao inicio da pagina -->
  <button onclick="backToTop()" type="button" id="ifr__btn__backToTop" title="Go to top"
    class="btn btn-primary">&uparrow;</button>

  <!-- modal -->
  <div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="myModal-img" src="">
    <div id="caption"></div>
  </div>

  <!-- header -->
  <header class="jumbotron jumbotron-flex p-5">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="../../index.html">Início</a></li>
        <li class="breadcrumb-item active" aria-current="page">...</li>
        <li class="breadcrumb-item active" aria-current="page">...</li>
      </ol>
    </nav>
    <h1 class="display-4">Conhecendo o iFractions</h1>
    <p class="lead">...</p>
    <hr class="display-4">
  </header>

  <!-- game frame -->
  <iframe src=" http://localhost/Ifractions-web" frameborder="0" style="width:100%; height:800px;"></iframe>

  <!-- pagina -->
  <main class='container-flex'>
    <div class="row">
      <!-- menu de navegacao lateral -->
      <div class="col-lg-2 text-start p-1 ifr__noBullet"></div>

      <div class="col-lg-8 px-5">

        <section>
          <h2>Cores</h2>

          <p>Name space: <code>colors</code></p>

          <table class="table">
            <tr>
              <td class="p-3" style="background: #003cb3;"></td>
              <td>blue<br>#003cb3</td>

              <td class="p-3" style="background: #cce5ff;"></td>
              <td>blueBckg<br>#cce5ff</td>

              <td class="p-3" style="background: #b30000;"></td>
              <td>red<br>#b30000</td>

              <td class="p-3" style="background: #00804d;"></td>
              <td>green<br>#00804d</td>

              <td class="p-3" style="background: #708090;"></td>
              <td>gray<br>#708090</td>

              <td class="p-3" style="background: #ffef1f;"></td>
              <td>yellow<br>#ffef1f</td>
            </tr>

            <tr>
              <td class="p-3" style="background: #183780;"></td>
              <td>darkBlue<br>#183780</td>

              <td class="p-3" style="background: #a8c0e6;"></td>
              <td>blueBckgInsideLevel<br>#a8c0e6</td>

              <td class="p-3" style="background: #330000;"></td>
              <td>darkRed<br>#330000</td>

              <td class="p-3" style="background: #1e2f2f;"></td>
              <td>darkGreen<br>#1e2f2f</td>

              <td class="p-3" style="background: #000;"></td>
              <td>black<br>#000</td>

              <td></td>
              <td></td>
            </tr>

            <tr>
              <td></td>
              <td></td>


              <td class="p-3" style="background: #adc8e6;"></td>
              <td>blueBckgOff<br>#adc8e6</td>

              <td class="p-3" style="background: #d27979;"></td>
              <td>lightRed<br>#d27979</td>


              <td class="p-3" style="background: #83afaf;"></td>
              <td>lightGreen<br>#83afaf</td>

              <td class="p-3" style="background: #efeff5;"></td>
              <td>white<br>#efeff5</td>

              <td></td>
              <td></td>
            </tr>

            <tr>
              <td></td>
              <td></td>

              <td class="p-3" style="background: #b7cdf4;"></td>
              <td>blueMenuLine<br>#b7cdf4</td>

              <td></td>
              <td></td>

              <td class="p-3" style="background: #00d600;"></td>
              <td>intenseGreen<br>#00d600</td>

              <td></td>
              <td></td>

              <td></td>
              <td></td>

            </tr>
          </table>

          <section id="tipografia" class="mt-5 pt-5">
            <h2>Tipografia</h2>

            <p>Name space: <code>textStyles</code></p>

            <table class="table">
              <tr>
                <td></td>
                <td>
                  <h1>h1</h1>
                  (32px)
                </td>
                <td>
                  <h2>h2</h2>
                  (26px)
                </td>
                <td>
                  <h3>h3</h3>
                  (23px)
                </td>
                <td>
                  <h4>h4</h4>
                  (20px)
                </td>
                <td>
                  <p>p</p>
                  (14px)
                </td>
              </tr>
              <tr>
                <th>green</th>
                <td>
                  <!-- caixa alta manualmente -->
                  <p style="font-size: 32px; color: #00804d">H1_GREEN</p>
                  <br>
                  <h1 style="color: #00804d">H1_GREEN</h1>
                </td>
                <td>
                  <p style="font-size: 26px; color: #00804d">H2_GREEN</p>
                  <br>
                  <h2 style="color: #00804d">H2_GREEN</h2>
                </td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
              <tr style="background: #a8c0e6">
                <th>white</th>
                <td>
                  <p style="font-size: 32px; color: #efeff5">h1_white</p>
                  <br>
                  <h1 style="color: #efeff5">h1_white</h1>
                </td>
                <td>
                  <p style="font-size: 26px; color: #efeff5">h2_white</p>
                  <br>
                  <h2 style="color: #efeff5">h2_white</h2>
                </td>
                <td>
                  <p style="font-size: 23px; color: #efeff5">h3__white</p>
                  <br>
                  <h3 style="color: #efeff5">h3__white</h3>
                </td>
                <td>
                  <p style="font-size: 20px; color: #efeff5">h4_white</p>
                  <br>
                  <h4 style="color: #efeff5">h4_white</h4>
                </td>
                <td>
                  <p style="font-size: 14px; color: #efeff5">p_white</p>
                  <br>
                  <p style="color: #efeff5">p_white</p>
                </td>
              </tr>
              <tr>
                <th>darkRed</th>
                <td></td>
                <td>
                  <p style="font-size: 26px; color: #330000">h2_brown</p>
                  <br>
                  <h2 style="color: #330000">h2_brown</h2>
                </td>
                <td></td>
                <td>
                  <p style="font-size: 20px; color: #330000">h4_brown</p>
                  <br>
                  <h4 style="color: #330000">h4_brown</h4>
                </td>
                <td>
                  <p style="font-size: 14px; color: #330000">p_brown</p>
                  <br>
                  <p style="color: #330000">p_brown</p>
                </td>
              </tr>
              <tr>
                <th>blue</th>
                <td></td>
                <td>
                  <p style="font-size: 26px; color: #003cb3">h2_blue_2</p>
                  <br>
                  <h2 style="color: #003cb3">h2_blue_2</h2>
                </td>
                <td></td>
                <td>
                  <p style="font-size: 20px; color: #003cb3">h4_blue_2</p>
                  <br>
                  <h4 style="color: #003cb3">h4_blue_2</h4>
                </td>
              </tr>
              <tr>
                <th>darkBlue</th>
                <td></td>
                <td>
                  <p style="font-size: 26px; color: #183780">h2_blue</p>
                  <br>
                  <h2 style="color: #183780">h2_blue</h2>
                </td>
                <td></td>
                <td>
                  <p style="font-size: 20px; color: #183780">h4_blue</p>
                  <br>
                  <h4 style="color: #183780">h4_blue</h4>
                </td>
                <td>
                  <p style="font-size: 14px; color: #183780">p_blue</p>
                  <br>
                  <p style="color: #183780">p_blue</p>
                </td>
              </tr>
            </table>
          </section>

          <div class="d-flex justify-content-between mt-5">
            <a class="btn btn-primary" href='./index.html' role="button">Início</a>
          </div>

      </div>

      <div class="col-lg-2 p-1"></div>
    </div>
  </main>

  <!--rodape -->
  <footer id='footer' class="container-flex mt-5 py-5 text-center"></footer>

</body>

<script src="../../script/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../../script/index.js"></script>
<script>
  updateMenu(2);
</script>

</html>