<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

  <title>Symbols Drive</title>

<link rel="icon" href="/shared/favicon.ico">

  <!--http://www.html5rocks.com/en/mobile/mobifying/-->
  <meta name="viewport"
    content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui=true" />

  <!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="format-detection" content="telephone=no">

  <!-- force webkit on 360 -->
  <meta name="renderer" content="webkit" />
  <meta name="force-rendering" content="webkit" />
  <!-- force edge on IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="msapplication-tap-highlight" content="no">

  <!-- force full screen on some browser -->
  <meta name="full-screen" content="yes" />
  <meta name="x5-fullscreen" content="true" />
  <meta name="360-fullscreen" content="true" />

  <!-- 强制竖屏 -->
  <meta name="screen-orientation" content="portrait">

  <!--fix fireball/issues/3568 -->
  <!--<meta name="browsermode" content="application">-->
  <meta name="x5-page-mode" content="app">

  <!--<link rel="apple-touch-icon" href=".png" />-->
  <!--<link rel="apple-touch-icon-precomposed" href=".png" />-->

  <link rel="stylesheet" type="text/css" href="<%= cssUrl %>" />

  <style>
    #VideoWrapper,
    #RB7Wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index: 9999;
    }

    #video1 {
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      max-height: 100%;
      max-width: 100%;
      margin: auto;

      object-fit: contain;
      overflow-clip-margin: content-box;
      overflow: clip;
    }


    #VideoWrapper,
    #RB7Wrapper {
      display: none;
    }
  </style>

</head>

<body>
  <!-- Video elements -->
  <div id="VideoWrapper">
    <img id="video1" src="/shared/LogoAnimation.png" style="display: block;">
  </div>

  <!-- 新增RB7动画容器 -->
  <div id="RB7Wrapper">
    <div id="rb7Animation"></div>
  </div>

  <div id="GameDiv" cc_exact_fit_screen="true">
    <div id="Cocos3dGameContainer">
      <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="99"></canvas>
    </div>
  </div>

  <!-- 添加 Service Worker 注册代码 -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./service-worker.js')
          .then(registration => {
          })
          .catch(err => {
          });
      });
    }

  </script>
  <%- include(cocosTemplate, {}) %>
</body>

</html>