<html>
  <head>
    <title>AR INDMOILK SCAN PACK</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="icon" href="assets/image/pokemon.png" type="image/png" />
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Knewave&family=Nunito:wght@200..1000&display=swap');
    * {
      font-family: "Nunito", sans-serif;
      font-optical-sizing: auto;
      font-weight: normal;
      font-style: normal;
    }
    @keyframes loading {
      0%   {transform: rotate(0deg); }
      100%  {transform: rotate(270deg);}
    }
    @keyframes loading2 {
      0%   {transform: translateY(7%); }
      100%  {transform: translateY(-7%);}
    }
    .block-image img{
      display: block;
      width: 100%;
    }

    .popup{
      position: absolute;
      z-index: 10;
      width: 100%;height: 100%;
      top: 0;left: 0;
      display: flex;align-items: center;justify-content: center;
      transition: all ease 300ms;
    }
      .popup .box{width: 80%;}
        .popup .box .box-content{
          background-color: #F9F7EA;
          color: #371C03;
          padding: 20px;
          border-right: 5px solid #8E6E25;
          border-left: 5px solid #8E6E25;
          width: 80%;
          margin: 0 auto;
          text-align: center;
        }
        .popup .box .box-pokemon{
          position: relative;margin-top: 10px;
          display: flex;align-items: center;justify-content: center;
        }
          .popup .box .box-pokemon span{
            position: absolute;width: 100%;height: 90%;top: 0;left: 0;bottom: 0;right: 0;
            display: flex;align-items: center;justify-content: center;
            color: #8E6E25;font-family: "Knewave", system-ui;
            font-size:7vw;text-transform: uppercase;line-height: 1;
          }
          .popup .box .box-pokemon span.mod{
            font-size: 5.5vw;
          }
        .box-loading{
          margin-top: 18px;
        }
          .box-loading .block-image{
            width: 9%;
            margin: 0 auto 8px;
            animation: loading 750ms ease infinite alternate;
          }
          .box-loading p{
            margin: 0;font-size: 12px;line-height: 1.1;
            animation: loading2 450ms linear infinite alternate;
          }
      .popup.hide{
        opacity: 0;
        pointer-events: none;
      }
    .info{
      margin: 15px 0 0;font-size: 14px;line-height: 1.1;font-weight: bold;
    }
    .arahkan{
      position: absolute;
      z-index: 10;
      width: 100%;height: 100%;
      top: 0;left: 0;
      display: flex;align-items: center;justify-content: center;
      transition: all ease 300ms;
    }
      .arahkan.mod{flex-flow: column;transform: translateY(-3%);}
      .arahkan .block-image{
        width: 50%;
      }
      .arahkan .block-image:last-child{
        width: 50%;
        opacity: 0;
      }
        .arahkan .block-image img{
          display: block;
          width: 100%;
        }
        .arahkan.hide{
          opacity: 0;
          pointer-events: none;
        }
        .arahkan img{
          width: 90%;
        }
    .mindar-ui-scanning .scanning{
      width: 94vw !important;
      height: 94vw !important;
    }
    .mindar-ui-scanning .scanning .inner{
      background: url(./assets/image/scan.png) !important;
      background-size: cover !important;
    }
    .mindar-ui-scanning .scanning .inner .scanline{
      background: #FCDB37 !important;
      height: 6px !important;
    }
    .mindar-ui-loading .loader {
      border: 16px solid #8E6E25 !important;
      border-top: 16px solid #FCDB37 !important;
    }
    </style>

    <script src="./scripts/libs/jquery-3.1.0.js"></script>
    <script src="./scripts/libs/polyfill.min.js"></script>
    <script src="./scripts/libs/howler.js"></script>
    <script src="./scripts/libs/ml-root.js"></script>
    <script src="./scripts/libs/ml.js"></script>

  </head>
  <body>
    <div class="arahkan mod hide" id="boxScan">
      <div class="block-image"><img src="./assets/image/scan-title.png" alt="POKEMON"></div>
      <div class="block-image"><img src="./assets/image/box.png" alt="POKEMON"></div>
    </div>
    <div class="arahkan mod hidex" id="scanLoading">
      <div class="block-image" style="opacity: 1 !important;width: 75%;margin-top: 290px;"><img src="./assets/image/disiapkan.png" alt="POKEMON"></div>
    </div>
    <div class="popup hide" id="boxPokemon">
      <div class="box">
        <div class="block-image"><img src="./assets/image/popup-line.png" alt="POKEMON"></div>
        <div class="box-content">
          <h4 style="margin: 0;font-weight: 700;font-family: 'Knewave', system-ui;">KAMU SUDAH MENANGKAP POKÉMON INI</h4>
          <!--<div class="block-image" style="width: 45%;margin: 6px auto 0;"><img src="./assets/image/pokemon.png" alt="POKEMON"></div>
          <div class="box-pokemon">
            <span id="namaPokemon">-</span>
            <div class="block-image"><img src="./assets/image/box-text.png" alt="POKEMON"></div>
          </div> -->
          <p class="info">kamu sudah menangkap POKÉMON yang baru saja di scan</p>
          <p class="info">temukan POKÉMON yang belum kamu tangkap dan scan sekarang</p>
          <div class="box-loading">
            <div class="block-image"><img src="./assets/image/loading.png" alt="POKEMON"></div>
            <p><strong style="font-weight: 900;">Tetap arahkan kamera ke kemasan,</strong> <br>tunggu, sistem sedang memproses..</p>
          </div>
        </div>
        <div class="block-image"><img src="./assets/image/popup-line.png" alt="POKEMON"></div>
      </div>
    </div>
    <a-scene mindar-image="imageTargetSrc: ./assets/tracker/pokemon-targets-v2-50.mind;autoStart: true;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">

      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>

      <a-entity id="target-0" mindar-image-target="targetIndex: 0"></a-entity>
      <a-entity id="target-1" mindar-image-target="targetIndex: 1"></a-entity>
      <a-entity id="target-2" mindar-image-target="targetIndex: 2"></a-entity>
      <a-entity id="target-3" mindar-image-target="targetIndex: 3"></a-entity>
      <a-entity id="target-4" mindar-image-target="targetIndex: 4"></a-entity>
      <a-entity id="target-5" mindar-image-target="targetIndex: 5"></a-entity>
      <a-entity id="target-6" mindar-image-target="targetIndex: 6"></a-entity>
      <a-entity id="target-7" mindar-image-target="targetIndex: 7"></a-entity>
      <a-entity id="target-8" mindar-image-target="targetIndex: 8"></a-entity>
      <a-entity id="target-9" mindar-image-target="targetIndex: 9"></a-entity>
      <a-entity id="target-10" mindar-image-target="targetIndex: 10"></a-entity>
      <a-entity id="target-11" mindar-image-target="targetIndex: 11"></a-entity>
      <a-entity id="target-12" mindar-image-target="targetIndex: 12"></a-entity>
      <a-entity id="target-13" mindar-image-target="targetIndex: 13"></a-entity>
      <a-entity id="target-14" mindar-image-target="targetIndex: 14"></a-entity>
      <a-entity id="target-15" mindar-image-target="targetIndex: 15"></a-entity>
      <a-entity id="target-16" mindar-image-target="targetIndex: 16"></a-entity>
      <a-entity id="target-17" mindar-image-target="targetIndex: 17"></a-entity>
      <a-entity id="target-18" mindar-image-target="targetIndex: 18"></a-entity>
      <a-entity id="target-19" mindar-image-target="targetIndex: 19"></a-entity>
      <a-entity id="target-20" mindar-image-target="targetIndex: 20"></a-entity>
      <a-entity id="target-21" mindar-image-target="targetIndex: 21"></a-entity>
      <a-entity id="target-22" mindar-image-target="targetIndex: 22"></a-entity>
      <a-entity id="target-23" mindar-image-target="targetIndex: 23"></a-entity>
      <a-entity id="target-24" mindar-image-target="targetIndex: 24"></a-entity>
      <a-entity id="target-25" mindar-image-target="targetIndex: 25"></a-entity>
      <a-entity id="target-26" mindar-image-target="targetIndex: 26"></a-entity>
      <a-entity id="target-27" mindar-image-target="targetIndex: 27"></a-entity>
      <a-entity id="target-28" mindar-image-target="targetIndex: 28"></a-entity>
      <a-entity id="target-29" mindar-image-target="targetIndex: 29"></a-entity>
      <a-entity id="target-30" mindar-image-target="targetIndex: 30"></a-entity>
      <a-entity id="target-31" mindar-image-target="targetIndex: 31"></a-entity>
      <a-entity id="target-32" mindar-image-target="targetIndex: 32"></a-entity>
      <a-entity id="target-33" mindar-image-target="targetIndex: 33"></a-entity>
      <a-entity id="target-34" mindar-image-target="targetIndex: 34"></a-entity>
      <a-entity id="target-35" mindar-image-target="targetIndex: 35"></a-entity>
      <a-entity id="target-36" mindar-image-target="targetIndex: 36"></a-entity>
      <a-entity id="target-37" mindar-image-target="targetIndex: 37"></a-entity>
      <a-entity id="target-38" mindar-image-target="targetIndex: 38"></a-entity>
      <a-entity id="target-39" mindar-image-target="targetIndex: 39"></a-entity>
      <a-entity id="target-40" mindar-image-target="targetIndex: 40"></a-entity>
      <a-entity id="target-41" mindar-image-target="targetIndex: 41"></a-entity>
      <a-entity id="target-42" mindar-image-target="targetIndex: 42"></a-entity>
      <a-entity id="target-43" mindar-image-target="targetIndex: 43"></a-entity>
      <a-entity id="target-44" mindar-image-target="targetIndex: 44"></a-entity>
      <a-entity id="target-45" mindar-image-target="targetIndex: 45"></a-entity>
      <a-entity id="target-46" mindar-image-target="targetIndex: 46"></a-entity>
      <a-entity id="target-47" mindar-image-target="targetIndex: 47"></a-entity>
      <a-entity id="target-48" mindar-image-target="targetIndex: 48"></a-entity>
      <a-entity id="target-49" mindar-image-target="targetIndex: 49"></a-entity>
    </a-scene>

    <script src="./scripts/app-dev.js"></script>
  </body>
</html>