project_group
/
game_shoubo


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
							
<html>
  
<head>  

  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-132977570-1', {
        'referrer' : document.referrer.split('?')[0],
        'location': window.location.href.split("?")[0],
    });
    
  </script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta 
    name='viewport' 
    content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no , viewport-fit=cover' 
  />
  <meta name="apple-mobile-web-app-title" content="ShadowPlay" />
  <meta name="apple-mobile-web-app-capable" content="yes">

  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <title>Shadow Art</title>

  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link rel="stylesheet" href="third_party/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="third_party/css/bootstrap-datepicker3.css"/>

 <style>
    body {
      margin: 0;
    }
  </style>

  
</head>
<body>    

  <div class="my-container forSafari">
      <div id="parent-wrapper">
        <div id="fade-wrapper" class="center-message inner"><img id="loading_img" width="10%" height="auto" src="content/ui/en-us/loading_cycle.gif"/></div>
      </div>

    <div id="display_container" class="display-camera-container rcorners">
      <p id="camrea_tips"></p>
    </div>
    <div id="out_line_diagrame" class="display-camera-container rcorners_2">
      <div id="calibrate_message" class="center-message" >Calibrating...</div>

      <img id="hand_guide_diagram" class="rcorners_2" src="content/hand_guide_diagram/empty.png"  width="500" height="500">

    </div>
    
    <div id="sample_container" class="col s6 m4">
    </div>
    <div id="draw_container" class="col s6 m4">
    </div>

    <div id="draw_test" class="col s6 m4">
    </div>
    
    
    <a id="btn_practice" href="#" class="float center-message btn-message-color">
        Practice
    </a> 
    <a id="btn_play" href="#" class="center-message btn-message-color">
        
    </a>

    <a id="btn_play_end" href="#" class="float center-message btn-message-color">
        
    </a>
  </div>

  <a  id="select_zodiac" href="#" class="float center-message btn-message-color">
  </a> 
  

  <a  id="select_year" href="#" class="datepicker float center-message noselect ">
      <p id="year_text" class="noselect center-message" style="padding-top:1.75vw;font-size:2.2vw;font-family: SupermercadoOneRegular">22</p>
  </a> 


  <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog  modal-dialog-centered">
      <div class="modal-content" style="border-radius: 50px;">
        
        <div class="modal-body">
          <div class="container" >
            <div class="col-sm-12">
              <div class="row">
                <div id="modal_zodiac_body" class="col-sm-8 ">
              
                </div>
                <div class=" col-sm-4 btn-select-zodiac">             
                  <a id="btn_select_zodiac" href="#" class="center-message btn-message-color btn-select-zodiac" data-dismiss="modal" ></a>
                </div>             
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="modal-footer" style="padding: 0.5rem">
          <button id="btn_select_zodiac" class="btn" data-dismiss="modal">Select</button>
        </div> -->
      </div>
    </div>
  </div>


  <a id="btn_next" href="#" class="float center-message btn-message-color">
        
  </a>
  <a id="btn_begin" href="#" class="float center-message btn-message-color">
        
  </a>
 
  <a id="btn_save" href="#" class="float center-message btn-message-color">
        
  </a>
 
  <!-- <a id="btn_fb" href="#" class="float center-message btn-message-color">
        
  </a>


  <a id="btn_twitter" href="#" class="float center-message btn-message-color">
        
  </a>
   -->

  <div id="bgm">
    <div></div>
  </div>

  <div id="logo">
    <img src="./content/ui/myLogo.png" alt="">
  </div>

  <div id="dropdown_select_lang" class="center-message dropdown-select-lang">
      <select id="dropdown_select" class="customs-dropdown-select">
        <option value="en-us">English</option>
        <option value="zh-cn">简体中文</option>
      </select>
    </div>

  <button id="play_again_btn" class="play-again-btn"></button>

  <div id="end_tips">
    游戏结束，您未解锁任何生肖。可点击右侧按钮，重新开始游戏
  </div>

  <div class="foucstips">
    <div class="con">
      <p>
        在镜头校准时，请对准简洁空白的背景（如墙面），并保持静止镜头内切勿出现面部，因为您的细部表情会导致校准失败
      </p>

      <div class="btncon">
        <div class="yes">我知道了，开始校准</div>
      </div>

    </div>
  </div>

  <div class="comfirmcon">
    <div class="con">
      <p>
        真厉害！想要解锁其他11个生肖吗？
      </p>

      <div class="btncon">
        <div class="no">残忍拒绝</div>
        <div class="yes">继续解锁</div>
      </div>

    </div>
  </div>

  <div class="selectList">
    <ul>
      <li>
        <img src="./images/normal/ox.png" alt="">
      </li>
    </ul>

    <p id="success_end">游戏结束，恭喜您共解锁了 4 个生肖，可点击下方查看</p>
    
  </div>

  <div id="mobiletips">
    <div class="mtipsheader">
      <img src="content/ui/zh-cn/header.png" alt="">
    </div>
    <div class="mbtips">
      <div class="img"></div>
      <p>为保证您的游戏体验本游戏仅支持在PC浏览器中游玩</p>
    </div>

    <div class="mbbtn">
      <div class="mbcopy">复制链接</div>
      <ul class="mblang">
        <li data-lang="zh-cn">中文</li>
        <li data-lang="en-us">English</li>
      </ul>
    </div>
  </div>

  <script src="third_party/js/jquery-3.3.1.min.js" charset="utf-8"></script>
  <script src="third_party/js/popper.min.js"></script>
  <script src="third_party/js/bootstrap.min.js"></script>
  <script src="third_party/js/bootstrap-datepicker.min.js"></script>
  <script src="third_party/locales/bootstrap-datepicker.zh-CN.min.js"></script>
  <script src="third_party/js/mobile-detect.min.js"></script>
  <script src="third_party/js/tf.min.js"> </script>
  <script src="third_party/js/jquery.i18n/src/jquery.i18n.js"></script>
	<script src="third_party/js/jquery.i18n/src/jquery.i18n.messagestore.js"></script>
	<script src="third_party/js/jquery.i18n/src/jquery.i18n.fallbacks.js"></script>
	<script src="third_party/js/jquery.i18n/src/jquery.i18n.parser.js"></script>
	<script src="third_party/js/jquery.i18n/src/jquery.i18n.emitter.js"></script>
	<script src="third_party/js/jquery.i18n/src/jquery.i18n.language.js"></script>
  <script src="js/lunar_year_calculate.js" charset="utf-8"></script> 
  <script src="third_party/js/pc-autocompletion.js" charset="utf-8"></script>
  <script src="third_party/js/opencv.js" charset="utf-8"></script>
  <script src="js/processing/preprocessing.js" charset="utf-8"></script>
  <script src="js/processing/shadow.js" charset="utf-8"></script>
  <script src="js/processing/morph.js" charset="utf-8"></script>
  <script src="third_party/js/preloadjs.min.js"></script>
  <script src="js/core.js" charset="utf-8"></script>
  <script src="js/zodiac_manager.js" charset="utf-8"></script>
  <script src="js/sprite.js" charset="utf-8"></script>
  <script src="js/utils.js" charset="utf-8"></script>  
  <script src="js/mode/endMode.js" charset="utf-8"></script>
  <script src="js/mode/landingMode.js" charset="utf-8"></script>
  <script src="js/mode/selectMode.js" charset="utf-8"></script>
  <script src="js/mode/playMode.js" charset="utf-8"></script>
  <script src="js/app.js" charset="utf-8"></script>
  <script type="text/javascript">
    var timer = null;
    document.onscroll =  function(event) {
      if(timer !== null) {
        clearTimeout(timer);        
      }
      timer = setTimeout(function() {
        window.scrollTo(0, 1);
      }, 75);
      event.preventDefault();
    }
    document.addEventListener('gesturestart', function (e) {
      e.preventDefault();
    });
    document.ontouchmove = function(e){ e.preventDefault(); }
    document.ontouchstart =  function(e){ e.preventDefault(); }
  </script>

</body>

</html>