<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="Neo Ighodaro">
        <title>Mazebase Game</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <style>
              :root {
                --input-padding-x: .75rem;
                --input-padding-y: .75rem;
              }
              html,
              body, body > div {
                height: 100%;
              }
              body > div {
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                align-items: center;
                padding-top: 40px;
                padding-bottom: 40px;
                background-color: #f5f5f5;
              }
              .form-signin {
                width: 100%;
                max-width: 800px;
                padding: 15px;
                margin: auto;
              }
              .form-label-group {
                position: relative;
                margin-bottom: 1rem;
              }
              .form-label-group > input,
              .form-label-group > label {
                padding: var(--input-padding-y) var(--input-padding-x);
              }
              .form-label-group > label {
                position: absolute;
                top: 0;
                left: 0;
                display: block;
                width: 100%;
                margin-bottom: 0; /* Override default `<label>` margin */
                line-height: 1.5;
                color: #495057;
                cursor: text; /* Match the input under the label */
                border: 1px solid transparent;
                border-radius: .25rem;
                transition: all .1s ease-in-out;
              }
              .form-label-group input::-webkit-input-placeholder {
                color: transparent;
              }
              .form-label-group input:-ms-input-placeholder {
                color: transparent;
              }
              .form-label-group input::-ms-input-placeholder {
                color: transparent;
              }
              .form-label-group input::-moz-placeholder {
                color: transparent;
              }
              .form-label-group input::placeholder {
                color: transparent;
              }
              .form-label-group input:not(:placeholder-shown) {
                padding-top: calc(var(--input-padding-y) + var(--input-padding-y) * (2 / 3));
                padding-bottom: calc(var(--input-padding-y) / 3);
              }
              .form-label-group input:not(:placeholder-shown) ~ label {
                padding-top: calc(var(--input-padding-y) / 3);
                padding-bottom: calc(var(--input-padding-y) / 3);
                font-size: 12px;
                color: #777;
              }
              /* Fallback for Edge
              -------------------------------------------------- */
              @supports (-ms-ime-align: auto) {
                .form-label-group > label {
                  display: none;
                }
                .form-label-group input::-ms-input-placeholder {
                  color: #777;
                }
              }
              /* Fallback for IE
              -------------------------------------------------- */
              @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
                .form-label-group > label {
                  display: none;
                }
                .form-label-group input:-ms-input-placeholder {
                  color: #777;
                }
              }
        </style>
      </head>

      <body>

        <div id="app">


           <div class="row mx-5" style="height: 70vh">

                <div class="col-8">
                <h2 class="h3 mb-3 font-weight-normal text-center">Safety and Consent</h2>
                <div class="mb-4">
                <p>Read the following instructions carefully. By accepting the HIT, you agree that you have agreed to participate, agree to the terms described and affirm that you meet all eligibility standards. </p>
                <p>By accepting the HIT you affirm that you are of legal age in your country and are 18 years old, whichever is higher. </p>
                <p>By accepting the HIT you affirm that you have no underlying health concerns that may be exacerbated by video games or using electronic screens. </p>
                <p>By accepting the HIT, you affirm that you are a fluent speaker of English. </p>
                <p>No personally identifying information will be collected from you during participation in this activity. </p>
              </div>

                </div>


                <!-- <div class="col-6">
                <h2 class="h3 mb-3 font-weight-normal text-center">Description of HIT</h1>

                <div class="text-center mb-4">
                  <p>When you agree to the HIT, you will be assigned a goal for the game, such as "create a shovel".</p>
                  <p>Given the game board and the goal, you will be tasked with giving a short set of instructions to the other player on how to complete the goal - You should give each instruction one by one.  Click on the button on the side called "Show Instructions" for crafting recipes that will help you get to the goal. Your instructions will be recorded. No other information will be stored.</p>
                  <p>In the second task, you receive the instructions provided by another player. Given these instructions and the game board, you will enter game inputs in the user interface (up, down, left, right, etc.) to follow the instructions. For information about each of the control buttons, click the "Show Instructions" button. Only these inputs, and no other information will be recorded. </p>
                  <p>The game should take approximately 5 minutes, and contains no violent, embarrassing or potentially distressing content.</p>
                </div>

                </div> -->


                <div class="text-center mb-4">
                <p>Press I accept below to acknowledge that you have read the above points. The next slide will provide an example walkthrough of the task. </p>
                </div>

                <button class="btn btn-lg btn-primary btn-block" type="submit" @click.prevent="login">I accept</button>

            </div>

        </div>


       <!--  <div id="app">
          <form class="form-signin">
            <h2 class="h3 mb-3 font-weight-normal text-center">Safety and Consent</h1>
            <div class="text-center mb-4">
              <p>Read the following instructions carefully. By accepting the HIT, you agree that you have agreed to participate, agree to the terms described and affirm that you meet all eligibility standards. </p>
              <p>By accepting the HIT you affirm that you are of legal age in your country and are 18 years old, whichever is higher. </p>
              <p>By accepting the HIT you affirm that you have no underlying health concerns that may be exacerbated by video games or using electronic screens. </p>
              <p>By accepting the HIT, you affirm that you are a fluent speaker of English. </p>
              <p>No personally identifying information will be collected from you during participation in this activity. </p>
            </div>
            <h2 class="h3 mb-3 font-weight-normal text-center">Description of HIT</h1>
            <div class="text-center mb-4">
              <p>When you agree to the HIT, you will be assigned to complete one of two tasks.</p>
              <p>In the first task, you will be dropped into a simple grid game and be given a goal for the game, such as “create a shovel.” Given the game state and the goal, you will be tasked with writing a short set of instructions on how to complete the goal. Your responses will be recorded. No other information will be stored.</p>
              <p>In the second task, you receive the instructions provided by another player. Given these instructions and the game state, you will enter game inputs in the user interface (up, down, left, right, etc.) to follow the instructions. Only these inputs, and no other information will be recorded. </p>
              <p>The game should take approximately 5 minutes, and contains no violent, embarrassing or potentially distressing content.</p>
              <p>Press I accept below to proceed to the task. </p>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit" @click.prevent="login">I accept</button>
          </form>
        </div> -->


        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

        <script>
        var app = new Vue({
          el: '#app',
          created () {

            let url = new URL(window.location.href);
            let name = url.searchParams.get("username");
            let code = url.searchParams.get("code");
            if (name) {
              this.username = name
              this.code = code
            }
          },

          data: {
            username: '',
          },
          methods: {
            login: function () {
              let username = this.username
              let code = this.code
              window.location.replace(`/demo?username=${username}&code=${code}`);
            }
          }
        })
        </script>
    </body>

</html>
