  <!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>{{{ PRODUCT_NAME }}}</title>
    <link rel="shortcut icon" href="TemplateData/favicon.ico">
    <link rel="stylesheet" href="TemplateData/style.css">
    
<script src = blippar-webar-sdk.....
webar-mode="surface-tracking"
static-camera = "true"
auto-start="false"
auto-init="false"
enable-photo-ui="true"
render-scene-on-desktop= "false"
show-qr-card-on-desktop= "false"
enable-tracking-on-desktop= "false"
enable-mirroring-on-desktop= "false"
hide-reset-button= "false"
auto-marker-detection ="true"
show-guide-animation-url=""
rendering-engine="unity"
logo-src="images/blippar_logo.png"
logo-height="200px"
logo-width="200px"
loading-progress-type="default"
progress-dot-ring-scale="0.30"
progress-dot-ring-color="#F7A400"
progress-ring-scale="0.36"
progress-ring-color="#F7A400"
progress-ring-line-width="5"

alert-border-color=""
alert-border-width=""
alert-border-radius=""
alert-background-color=""
alert-message-text-color=""
alert-button-color=""
alert-button-text-color=""
alert-button-height=""
alert-button-border-radius=""
alert-box-font-size=""
alert-box-height=""
alert-box-width=""
alert-camera-permission-text=""
alert-camera-permission-button-text=""
alert-motion-permission-text=""
alert-motion-permission-button-text=""
    
ui-background-color="#FFFFFF"
ui-portrait-text="This experience is optimized for portrait display"
ui-text-color="#000000"
desktop-logo-src="images/blippar_logo.png"
desktop-logo-width="150px"
desktop-logo-height="150px"
issue-img-src="images/test_issue_img.png"
issue-img-width="116px"
issue-img-height="116px"

auto-scan-instruction="Find a marker to scan..."
auto-scan-instruction-detect="Marker detecting..."
auto-scan-instruction-idle="Shake your phone to start detection"
auto-scan-instruction-text-style="color: orange;"
auto-scan-style="Display: block; position: absolute; top: 90%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: auto; height: auto; text-alogn: center; "
auto-scan-style-display="block"

scan-btn-display="block"
scan-btn-height="100px"
scan-btn-width="100px"
scan-btn-img-height="50"
scan-btn-img-width="50"
scan-btn-img-src="images/user_scan-btn-image_here.png"
scan-btn-img-transform="translate(-25, -25)"
scan-btn-img-x-coordinate="50%"
scan-btn-img-y-coordinate="50%"

scan-btn-instruction="Tap to scan"
scan-btn-instruction-style="color: white;"
scan-btn-progress-bar-color="blue"
scan-btn-progress-bar-cx-coordinate="50"
scan-btn-progress-bar-cy-coordinate="50"
scan-btn-progress-bar-radius="35"
scan-btn-progress-bar-transform="rotate(-90 50 50)"
scan-btn-progress-circle-cx-coordinate="50%"
scan-btn-progress-circle-cy-coordinate="50%"
scan-btn-progress-circle-radius="35"
scan-btn-progress-circle-style="fill: none; stroke: cyan; stroke-width: 6;"
ios-camera-permission= "false"
auto-scan-instruction-idle-on-desktop="Reload to detect a marker"

show-guide-view="true"></script>

  </head>
  <body class="{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}">
      <div id="unity-container" class="unity-desktop">
        <canvas id="unity-canvas" style="position: absolute;"></canvas>
      </div>
<script>

var Yrotvalue = undefined;
var UNITYINSTANCE = undefined;
const cameraObjectName = "";
const stageObjectName = "";
      const buildUrl = "Build";
      const loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
      const config = {
        dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
        frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
        codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
#if MEMORY_FILENAME
        memoryUrl: buildUrl + "/{{{ MEMORY_FILENAME }}}",
#endif
#if SYMBOLS_FILENAME
        symbolsUrl: buildUrl + "/{{{ SYMBOLS_FILENAME }}}",
#endif
        streamingAssetsUrl: "StreamingAssets",
        companyName: "{{{ COMPANY_NAME }}}",
        productName: "{{{ PRODUCT_NAME }}}",
        productVersion: "{{{ PRODUCT_VERSION }}}",
      };

      const container = document.querySelector("#unity-container");
      const canvas = document.querySelector("#unity-canvas");

      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        container.className = "unity-mobile";
        config.devicePixelRatio = 1;
      }
      else {
        // Desktop Unity Container: set the container/canvas for full screen
        container.style.width = "100%";
        container.style.height = "100%";
        // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
        canvas.style.width = window.innerWidth + 'px';
        canvas.style.height = window.innerHeight + 'px';
      }
#if BACKGROUND_FILENAME
      canvas.style.background = "url('" + buildUrl + "/{{{ BACKGROUND_FILENAME.replace(/'/g, '%27') }}}') center / cover";
#endif

      const script = document.createElement("script");
      script.src = loaderUrl;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {

        }).then((unityInstance) => {
          UNITYINSTANCE  = unityInstance;
          }).catch((message) => {
          alert(message);
        });
      };

      //WEBAR SDK INIT function 
      document.body.appendChild(script);
	    function GetCommand(str){
		        Yrotvalue=(str);
        }

    WEBARSDK.InitUnityWebGL(canvas.id, cameraObjectName, stageObjectName, canvas.clientWidth, canvas.clientHeight);
      </script>
  </body>
</html>
