<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="STEMChat">
  <title>STEMChat</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="/css/register.css" />
  <link rel="stylesheet" href="/css/pure_css.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>

  <div class="_topnav" id='#nav'>
    <!--
    <a href="javascript:void(0);" class="_icon" onclick="_myFunction2()">
      <i>â˜°</i>
    </a>
  -->
    <a href="/" class="_active">StemGames <img src='stemlogo.png' alt='stem logo' id='mylogo' /></a>

    <!-- Navigation links (hidden by default) -->
    <div id="myLinks">
      <a href="/register">Login</a>

    </div>
    <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->

  </div>


    <div id="main">
      <center>
        <div class="header">
          <h1>WELCOME TO <img src="./stemgames.png" alt="COOOL STEM Games" id="site-logo" class="logo"> <img src='stemlogo.png' alt='stem logo' id='mylogo' /></h1>

          <h2>Welcome to metaStudio platform! Here we collaboratively do STEM projects and converse about the projects. We
            do investigations as well as innovation projects.</h2>
        </div>
      </center>
      <div class="content" id='content'>
        <h1 id='message'><%=status%></h1>
        <form class="pure-form pure-form-stacked" id="SignUp" action="/register" method="post">
          <fieldset>
            <legend>Register</legend>
            <div class="pure-g">
              <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-name">Name</label>
                <input placeholder="Full name" type="text" id="multi-name" class="pure-u-23-24" name='name' required="" />
              </div>
              <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-email">E-Mail</label>
                <input type="email" id="multi-email" class="pure-u-23-24" required="" name='email' placeholder="Never Shown to Public" />
              </div>
              <div class="pure-u-1 pure-u-md-1-3">
                <label for="aligned-password">Password</label>
                <input type="password" id="aligned-password" class="pure-u-23-24" name='pass1' required='' placeholder="Atleast 10 characters long" />
              </div>
              <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-username1">UserName</label>
                <input type="text" id="multi-username1" class="pure-u-23-24" name='username1' required='' placeholder="unique, no spaces, short" />
              </div>
              <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-role">Default Identity</label>
                <select id="multi-role" name='identity' required="" placeholder='Select an Option'>
                  <option value="" disabled selected>Select your option</option>
                  <option value="Curious">Curious Member</option>
                  <option value="Student">Student</option>
                  <option value="Teacher">Teacher</option>
                  <option value="Researcher">Researcher</option>
                  <option value="Teacher Educator">Teacher Educator</option>
                  <option value="Citizen Scientist">Citizen Scientist</option>
                  <option value="STEM Activist">STEM Activist</option>
                  <option value="Administrator">Administrator</option>
                  <option value="Social Worker">Social Worker</option>
                  <option value="Home Schooling Parent">Home Schooling Parent</option>
                </select>
              </div>
            </div>
            <button type="submit" class="pure-button pure-button-primary" name='signup'>SignUp</button>
            <style scoped="">
              .button-secondary {
                color: white;
                border-radius: 4px;
                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
              }

              .button-secondary {
                background: rgb(28, 184, 65);
              }
            </style>
            <br><br>
            <label for="choice" id='val1'>
              <button type="button" class="button-secondary pure-button" id='choice1'>Login</button>
            </label>
          </fieldset>
        </form>


        <form class="hidden pure-form pure-form-stacked" id="Login" action="/register" method='post'>
          <fieldset>
            <legend>Login</legend>
            <div class="pure-g">
              <div class="pure-u-1 pure-u-md-1-3">
                <label for="multi-username">UserName</label>
                <input placeholder="username" type="text" id="multi-username" class="pure-u-23-24" name='username2' required='' />
              </div>
              <div class="pure-u-1 pure-u-md-1-3">
                <label for="password">Password</label>
                <input type="password" value="" placeholder="Password" class="pure-u-23-24 " name="pass2" required=''>
              </div>
            </div>
            <button type="submit" class="pure-button pure-button-primary" name='login'>Login</button>
            <style scoped="">
              .button-secondary {
                color: white;
                border-radius: 4px;
                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
              }

              .button-secondary {
                background: rgb(28, 184, 65);
              }
            </style>
            <br><br>
            <label for="choice" id='val2'>Not Registered?
              <button type="button" class="button-secondary pure-button" id='choice2'>SignUp</button>
            </label>

          </fieldset>
        </form>

  </div>

      <center>
        <!--
        <div class='foot'>
            <p> MADE BY BITS 2020</p>
        </div>
        -->
      </center>
  </div>


  <script src="/js/register.js" charset="utf-8"></script>
  <script src="/js/ui.js" charset='utf-8'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
  <script type="text/javascript">
    var _0x124a=['submit','#SignUp','encrypt','AES','#Login','val','input[name=\x22pass1\x22]','input[name=\x22pass2\x22]','toString'];(function(_0x2d7249,_0x124a11){var _0x34dba3=function(_0x383661){while(--_0x383661){_0x2d7249['push'](_0x2d7249['shift']());}};_0x34dba3(++_0x124a11);}(_0x124a,0x123));var _0x34db=function(_0x2d7249,_0x124a11){_0x2d7249=_0x2d7249-0x0;var _0x34dba3=_0x124a[_0x2d7249];return _0x34dba3;};$(_0x34db('0x7'))[_0x34db('0x6')](()=>{$('input[name=\x22pass1\x22]')[_0x34db('0x2')](CryptoJS[_0x34db('0x0')][_0x34db('0x8')]($(_0x34db('0x3'))['val'](),passPhrase)[_0x34db('0x5')]());return!![];});$(_0x34db('0x1'))[_0x34db('0x6')](()=>{$(_0x34db('0x4'))[_0x34db('0x2')](CryptoJS[_0x34db('0x0')][_0x34db('0x8')]($(_0x34db('0x4'))[_0x34db('0x2')](),passPhrase)[_0x34db('0x5')]());return!![];});
  </script>
  <script>
    function _myFunction2() {
      var x = document.getElementById("myLinks");
      if (x.style.display === "block") {
        x.style.display = "none";
      } else {
        x.style.display = "block";
      }
    }
  </script>

</body>
<style>
  /* --------------- */
/*Navbar*/


  ._topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;
  }

  ._topnav #myLinks {
    display: none;
  }

  /* Style navigation menu links */
  ._topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
    background-color: #333;
    text-align: center;
  }

  /* Style the hamburger menu */
  ._topnav a._icon {
    background: #333;
    float: left;
    display: block;
  }

  /* Add a grey background color on mouse-over */
  ._topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Style the active link (or home/logo) */
  ._topnav a._active {
    background-color: #4CAF50;
    color: white;
    text-align: center;
  }

  ._topnav img._logo {
    width: 1rem;

  }
</style>

</html>
