<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>忍者追击</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,target-densitydpi=device-dpi"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>

    <meta name="full-screen" content="true"/>
    <meta name="screen-orientation" content="landscape"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>

    <style>
        body {
            text-align: center;
            background: #000000;
            padding: 0;
            border: 0;
            margin: 0;
            height: 100%;
        }
        html {
            -ms-touch-action: none; /* Direct all pointer events to JavaScript code. */
            overflow: hidden;
        }
        div, canvas {
            display:block;
            position:absolute;
            margin: 0 auto;
            padding: 0;
            border: 0;
        }
        .pay:hover {
            color: yellowgreen;
        }
        .box {
            position: fixed;
            background-color: #fff;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            padding: 20px 40px;
            cursor: pointer;
        }
        #copyright {
            position: fixed;
            left: 50%;
            bottom: 10px;
            transform: translate(-50%);
            display: flex;
            flex-wrap: wrap;
            color: #fff;
            justify-content: center;
            font-size: 12px;
            width: 400px;
        }
        #copyright p {
            margin: 0;
        }
        #copyright a {
            color: #dc972f;
        }
        #game-title {
            position: fixed;
            z-index: 10;
            left: 50%;
            top: 10%;
            color: #cb3d62;
            font-size: 55px;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
<div style="position:relative;" id="gameDiv"></div>
<script>var document_class = "Main";</script><!--这部分内容在编译时会被替换，要修改文档类，请到工程目录下的egretProperties.json内编辑。-->
<!--This part will be replaced during compiling, and to modify the document class, please go to the project directory and edit in the file of egretProperties. Jsonr-->
<script src="launcher/egret_require.js"></script>
<script src="launcher/egret_loader.js"></script>
<script src="launcher/game-min.js"></script>
<script>
    var support = [].map && document.createElement("canvas").getContext;
    if (support) {
        egret_h5.startGame();
    }
    else {
        alert("Egret 不支持您当前的浏览器")
    }
</script>
<div>
    <div id="user" style="position: fixed;
    left: calc((100vw - 1123px) / 2);
    top: 0;
    font-weight: bold;
    color: #dd9d2c;
    padding: 10px;"
    onclick="login1()">
        点击登录
    </div>
    <div id="game-title">忍者追击</div>
    <div id="login" class="box" style="display: none;">
        <div style="text-align: right;width: 80%;" onclick="login2()">
            <span>X</span>
        </div>
        <nav>
            <span>用户名：</span>
            <input id="username" type="text"/>
        </nav>
        <nav>
            <span>密码：</span>
            <input id="password" type="password"/>
        </nav>
        <button onclick="login()" style="margin-top: 10px;">登录</button>
    </div>
    <div id="dialog" class="box" 
        style="
        display: none;">
        <div style="text-align: right;width: 80%;" onclick="closePay()">
            <span>X</span>
        </div>
        <ul>
            <li class="pay" onclick="showCode()">微信支付</li>
            <li class="pay" onclick="showCode()">支付宝支付</li>
        </ul>
        <div id="qr-code" class="pt-10" style="display: none;
        position: relative;
        width: 150px;">
            <img src="./resource/assets/qrcode.png" alt="" style="width: 100%;">
        </div>
    </div>
    <footer id="copyright">
        <p>版权所属:广州游牧蚁网络科技有限公司</p>
        <p>Copyright © 2022 广州游牧蚁网络科技有限公司.All right reserved</p>
        <p style="width: 300px;">
            <a href="http://beian.miit.gov.cn/#/Integrated/index" target="_blank">
                <span>粤ICP备2020130345号</span>
            </a>
        </p>
        <p>
            <a class="flex justify-center" target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011302003413">
                <img style="width: 10px;"  src="./resource/police.png" />
                <span>粤公网安备 44011302003413号</span>
            </a>
        </p>
    </footer>
</div>
</body>
<script>
    let name = ''
    function openPay () {
        document.getElementById('dialog').style.display = 'block'
    }
    function closePay () {
        document.getElementById('dialog').style.display = 'none'
    }
    function showCode () {
        document.getElementById('qr-code').style.display = 'block'
    }
    function login () {
        var name = document.getElementById('username').value
        var password = document.getElementById('password').value
        if (!password || !name) return
        localStorage.setItem('username', name)
        document.getElementById('user').innerHTML = '用户名：' + name
        document.getElementById('login').style.display = 'none'
    }
    function login1 () {
        document.getElementById('login').style.display = 'block'
    }
    function login2 () {
        document.getElementById('login').style.display = 'none'
    }
    window.onload = () => {
        if (localStorage.getItem('username')) {
            document.getElementById('user').innerHTML = '用户名：' + localStorage.getItem('username')
        } else {
            document.getElementById('login').style.display = 'block'
        }
    }
</script>
</html>  