<!DOCTYPE html>
<html>
<head>
  <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-TXXHKBTD');</script>
  <!-- End Google Tag Manager -->
  <title>Mental Load - Game</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="64x64" href="/icons8-brain-64.png">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="/css/styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-144184532-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-144184532-1');
</script>

  
</head>
<body>
  <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TXXHKBTD"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
  <div>
    <h1>Bemvindo ao Carga Mental!</h1>
    <div id="instructions">
      <p>Vamos dar início ao jogo.</p>
      <p>Para jogar é bem simples:</p>
      <ul style="list-style:none; text-align: justify;">
        <li>1. Escolha uma caixinha branca, ou da esquerda ou da direita, e tente encontrar a nota de 100 reais.</li>
        <li>2. No início de cada rodada posicione o mouse no círculo vermelho.</li>
        <li>3. Cuidado! Se demorar muito para escolher, voltará para o início do jogo.</li>
      </ul>
      <form action="play" method="post">
        <input type="hidden" name="arr" id="arr" value="">
        <input type="hidden" name="percentage" id="percentage" value="<%= percentage%>">
        <input type="hidden" name="rounds1" id="rounds1" value="<%= rounds1%>">    
        <input type="hidden" name="rounds2" id="rounds2" value="<%= rounds2%>">    
        <input type="hidden" name="limit" id="limit" value="<%= limit%>">  
        <button class="button" type="submit"><i class="fa-solid fa-play" style="font-size:xx-large; color: #000000;"></i></button>
      </form>
    </div>  
  </div>   
  <script src="/js/utils.js"></script>
  <script>
    $(document).ready(function() {
      game(percentage.value, rounds1.value, limit.value);
    });
  </script>
</body>
</html>
