<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>服务器未回应</title>
    <link href="/css/index.css" rel="stylesheet"/>
    <style>
        body,
        html {
            padding: 0;
            margin: 0;
            font-family: 'Quicksand', sans-serif;
            font-weight: 400;
            overflow: hidden;
        }

        .writing {
            width: 320px;
            height: 200px;
            background-color: #3f3f3f;
            border: 1px solid #bbbbbb;
            border-radius: 6px 6px 4px 4px;
            position: relative;
        }

        .writing .topbar{
            position: absolute;
            width: 100%;
            height: 12px;
            background-color: #f1f1f1;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .writing .topbar div{
            height: 6px;
            width: 6px;
            border-radius: 50%;
            margin: 3px;
            float: left;
        }

        .writing .topbar div.green{
            background-color: #60d060;
        }
        .writing .topbar div.red{
            background-color: red;
        }
        .writing .topbar div.yellow{
            background-color: #e6c015;
        }

        .writing .code {
            padding: 15px;
        }

        .writing .code ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .writing .code ul li {
            background-color: #9e9e9e;
            width: 0;
            height: 7px;
            border-radius: 6px;
            margin: 10px 0;
        }

        .container {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 100%;
            -webkit-transition: -webkit-transform .5s;
            transition: -webkit-transform .5s;
            transition: transform .5s;
            transition: transform .5s, -webkit-transform .5s;
        }

        .stack-container {
            position: relative;
            width: 420px;
            height: 210px;
            -webkit-transition: width 1s, height 1s;
            transition: width 1s, height 1s;
        }

        .pokeup {
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

        .pokeup:hover {
            -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
            -webkit-transition: .3s ease;
            transition: .3s ease;
        }


        .error {
            width: 400px;
            padding: 40px;
            text-align: center;
        }

        .error h1 {
            font-size: 125px;
            padding: 0;
            margin: 0;
            font-weight: 700;
        }

        .error h2 {
            margin: -30px 0 0 0;
            padding: 0px;
            font-size: 47px;
            letter-spacing: 12px;
        }

        .perspec {
            -webkit-perspective: 1000px;
            perspective: 1000px;
        }

        .writeLine{
            -webkit-animation: writeLine .4s linear forwards;
            animation: writeLine .4s linear forwards;
        }

        .explode{
            -webkit-animation: explode .5s ease-in-out forwards;
            animation: explode .5s ease-in-out forwards;
        }

        .card {
            -webkit-animation: tiltcard .5s ease-in-out 1s forwards;
            animation: tiltcard .5s ease-in-out 1s forwards;
            position: absolute;
        }

        @-webkit-keyframes tiltcard {
            0% {
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }

            100% {
                -webkit-transform: rotateY(-30deg);
                transform: rotateY(-30deg);
            }
        }

        @keyframes tiltcard {
            0% {
                -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
            }

            100% {
                -webkit-transform: rotateY(-30deg);
                transform: rotateY(-30deg);
            }
        }

        @-webkit-keyframes explode {
            0% {
                -webkit-transform: translate(0, 0) scale(1);
                transform: translate(0, 0) scale(1);
            }

            100% {
                -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
            }
        }

        @keyframes explode {
            0% {
                -webkit-transform: translate(0, 0) scale(1);
                transform: translate(0, 0) scale(1);
            }

            100% {
                -webkit-transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
                transform: translate(var(--spreaddist), var(--vertdist)) scale(var(--scaledist));
            }
        }

        @-webkit-keyframes writeLine {
            0% {
                width:0;
            }

            100% {
                width: var(--linelength);
            }
        }

        @keyframes writeLine {
            0% {
                width:0;
            }

            100% {
                width: var(--linelength);
            }
        }

        @media screen and (max-width: 1000px) {
            .container {
                -webkit-transform: scale(.85);
                transform: scale(.85);
            }
        }

        @media screen and (max-width: 850px) {
            .container {
                -webkit-transform: scale(.75);
                transform: scale(.75);
            }
        }

        @media screen and (max-width: 775px) {
            .container {
                -ms-flex-wrap: wrap-reverse;
                flex-wrap: wrap-reverse;
                -webkit-box-align: inherit;
                -ms-flex-align: inherit;
                align-items: inherit;
            }
        }

        @media screen and (max-width: 370px) {
            .container {
                -webkit-transform: scale(.6);
                transform: scale(.6);
            }
        }
    </style>
</head>
<body>
<div class="header"><div class="header_box">
    <div class="header_left">
        <div class="logo">
            <a href="/index">
                <img src="/images/logo.png" alt=""/>
            </a>
        </div>

    </div>
    <div class="header_right">
        
        
            <div class="user_info">
                <i class="iconfont icon-yonghu"></i>
                <div class="uer_text"><a href="/login">请登录</a></div>
            </div>
            <div class="register"><a href="/index/logoutUser?type=register">注册</a></div>
            <!--<div class="my_orderForm">
                <i class="iconfont icon-dingdan"></i>
                <div class="orderForm_text">我的订单</div>
                <i class="iconfont icon-xiajiantou"></i>
            </div>-->
        
<!--        <div class="vertical_line"></div>-->
<!--        <div class="customer">-->
<!--            <i class="iconfont icon-kefu"></i>-->
<!--        </div>-->
    </div>
</div>
<script src="/utils/jquery/jquery-3.7.1.min.js"></script>
<script src="/js/header.js"></script>
<script>
    $('.user_menu_header').click(function() {
        location.href = '/index/resetUserInfo';
    });
    $('.changyongxinxi').click(function() {
        location.href = '/index/resetUserInfo';
    });
</script></div>
<div class="container">
    <div class="error">
        <h1>500</h1>
        <h2>error</h2>
        <p>服务器正在休息</p>
    </div>
    <div class="stack-container">
        <div class="card-container">
            <div class="perspec" style="--spreaddist: 125px; --scaledist: .75; --vertdist: -25px;">
                <div class="card">
                    <div class="writing">
                        <div class="topbar">
                            <div class="red"></div>
                            <div class="yellow"></div>
                            <div class="green"></div>
                        </div>
                        <div class="code">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-container">
            <div class="perspec" style="--spreaddist: 100px; --scaledist: .8; --vertdist: -20px;">
                <div class="card">
                    <div class="writing">
                        <div class="topbar">
                            <div class="red"></div>
                            <div class="yellow"></div>
                            <div class="green"></div>
                        </div>
                        <div class="code">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-container">
            <div class="perspec" style="--spreaddist:75px; --scaledist: .85; --vertdist: -15px;">
                <div class="card">
                    <div class="writing">
                        <div class="topbar">
                            <div class="red"></div>
                            <div class="yellow"></div>
                            <div class="green"></div>
                        </div>
                        <div class="code">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-container">
            <div class="perspec" style="--spreaddist: 50px; --scaledist: .9; --vertdist: -10px;">
                <div class="card">
                    <div class="writing">
                        <div class="topbar">
                            <div class="red"></div>
                            <div class="yellow"></div>
                            <div class="green"></div>
                        </div>
                        <div class="code">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-container">
            <div class="perspec" style="--spreaddist: 25px; --scaledist: .95; --vertdist: -5px;">
                <div class="card">
                    <div class="writing">
                        <div class="topbar">
                            <div class="red"></div>
                            <div class="yellow"></div>
                            <div class="green"></div>
                        </div>
                        <div class="code">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-container">
            <div class="perspec" style="--spreaddist: 0px; --scaledist: 1; --vertdist: 0px;">
                <div class="card">
                    <div class="writing">
                        <div class="topbar">
                            <div class="red"></div>
                            <div class="yellow"></div>
                            <div class="green"></div>
                        </div>
                        <div class="code">
                            <ul>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div><div id="footerLayer" class="relativeFooterLayer">
    <div class="fl_footer_wrap_ow234">
        <div class="fl_layout_wrap_g-sIE fl_normal_footer_YgQc1">
            <div class="fl_footer_link_list_OWItH">
                <div class="fl_footer_item_layout_gZ1W6 fl_no_derive_G1PJ2" style="visibility: hidden">
                    <dl class="fl_footer_item_vp3yx fl_item_tel_list_3nBrm">
                        <dd>
                            <div class="fl_list_item_first_CsArf">
                                <div>24x7热线：</div>
                                <div class="fl_tel_number_list_Y0Y2g">
                                    <span>xxxxxxxxxx</span>
                                </div>
                            </div>
                        </dd>
                    </dl>
                    <dl class="fl_footer_item_vp3yx fl_item_qrcode_Sf-pF">
                        <dd>
                            <div>
                                <img alt="" style="width: 120px; height: auto" src="/images/avatar12.jpg" />
                                <p class="fl_qr_title_oIhLw">领客时代旅游</p>
                            </div>
                        </dd>
                    </dl>
                </div>
                <div class="fl_footer_item_layout_gZ1W6">
                    <dl class="fl_footer_item_vp3yx">
                        <dt>加盟合作</dt>
                        <dd class="fl_ft_link_item_8Hler">
                            <a href="#" rel="nofollow" target="_blank">代理合作</a>
                        </dd>
                        <dd class="fl_ft_link_item_8Hler">
                            <a href="#" rel="nofollow" target="_blank">友情链接</a>
                        </dd>
                        <dd class="fl_ft_link_item_8Hler">
                            <a href="#"
                               rel="nofollow" target="_blank">酒店加盟</a>
                        </dd>
                    </dl>
                </div>
                <div class="fl_footer_item_layout_gZ1W6 fl_no_derive_G1PJ2">
                    <dl class="fl_footer_item_vp3yx">
                        <dt>关于领客</dt>
                        <dd class="fl_ft_link_item_8Hler">
                            <a href="https://www.linkstay.cn" rel="nofollow" target="_blank">关于领客</a>
                        </dd>
                        <dd class="fl_ft_link_item_8Hler">
                            <a href="https://www.linkstay.cn" rel="nofollow" target="_blank">联系我们</a>
                        </dd>
                        <dd class="fl_ft_link_item_8Hler">
                            <a href="https://www.linkstay.cn" rel="nofollow" target="_blank">诚聘英才</a>
                        </dd>
                        <dd class="fl_ft_link_item_8Hler">
                            <a href="/htm/hotel-booking-service-user-agreement.htm" rel="nofollow"
                               target="_blank">用户协议</a>
                        </dd>
                        <dd class="fl_ft_link_item_8Hler">
                            <a href="/htm/user-privacy-policy.htm" rel="nofollow"
                               target="_blank">隐私政策</a>
                        </dd>
                        <dd class="fl_ft_link_item_8Hler">
                            <a href="#" rel="nofollow" target="_blank">营业执照</a>
                        </dd>
<!--                        <dd class="fl_ft_link_item_8Hler">-->
<!--                            <a href="#" rel="nofollow" target="_blank">安全中心</a>-->
<!--                        </dd>-->
                    </dl>
                </div>
                <div class="fl_footer_item_layout_gZ1W6 fl_no_derive_G1PJ2" style="visibility: hidden">
                    <dl class="fl_footer_item_vp3yx fl_item_tel_list_3nBrm">
                        <dd>
                            <div class="fl_list_item_first_CsArf">
                                <div>客服热线：</div>
                                <div class="fl_tel_number_list_Y0Y2g">
                                    <span>027-59268135</span>
                                </div>
                            </div>
                        </dd>
                    </dl>
                    <dl class="fl_footer_item_vp3yx fl_item_qrcode_Sf-pF">
                        <dd>
                            <div>
                                <img alt="" style="width: 120px; height: auto" src="/images/avatar12.jpg" />
                                <p class="fl_qr_title_oIhLw">领客时代旅游</p>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="fl_footer_copyright_wrapper_xaEbt">
                <p>
                    <a rel="nofollow" href="#"
                       id="copyright">Copyright©</a>2024,&nbsp;<a href="/">linkstay.com</a>.
                    All rights reserved.&nbsp;|&nbsp;<a rel="nofollow" target="_blank"
                                                        href="#">ICP证：鄂ICP备2024048755号-1</a>
                </p>
<!--                <p class="fl_gns_wrapper_wMJ0P">-->
<!--                    <a href="#"><i-->
<!--                            class="footerLayer-lazy fl_icon-gns_iPpG5"></i>鄂公网备xxxxx号</a>-->
<!--                    |-->
<!--                    <a href="#" rel="nofollow">旅游度假资质</a>-->
<!--                    |-->
<!--                    <a href="#" rel="nofollow">平台信息</a>-->
<!--                </p>-->
                <p class="fl_supervision-call_gsdM8">
                    <span>违法和不良信息举报电话 027-87880809丨全国旅游投诉热线12345</span>
                </p>
            </div>
        </div>
    </div>
</div></div>
</body>
<script>
    const stackContainer = document.querySelector('.stack-container');
    const cardNodes = document.querySelectorAll('.card-container');
    const perspecNodes = document.querySelectorAll('.perspec');
    const perspec = document.querySelector('.perspec');
    const card = document.querySelector('.card');

    let counter = stackContainer.children.length;

    //生成随机数的函数
    function randomIntFromInterval(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    card.addEventListener('animationend', function () {
        perspecNodes.forEach(function (elem, index) {
            elem.classList.add('explode');
        });
    });

    perspec.addEventListener('animationend', function (e) {
        if (e.animationName === 'explode') {
            cardNodes.forEach(function (elem, index) {

                //添加悬停动画类
                elem.classList.add('pokeup');

                //添加事件列表以在单击时投掷卡片
                elem.addEventListener('click', function () {
                    let updown = [800, -800]
                    let randomY = updown[Math.floor(Math.random() * updown.length)];
                    let randomX = Math.floor(Math.random() * 1000) - 1000;
                    elem.style.transform = `translate(${randomX}px, ${randomY}px) rotate(-540deg)`
                    elem.style.transition = "transform 1s ease, opacity 2s";
                    elem.style.opacity = "0";
                    counter--;
                    if (counter === 0) {
                        stackContainer.style.width = "0";
                        stackContainer.style.height = "0";
                    }
                });

                //生成4到10之间的随机代码行，并添加到每张卡上
                let numLines = randomIntFromInterval(5, 10);

                //循环遍历并将它们添加到DOM中
                for (let index = 0; index < numLines; index++) {
                    let lineLength = randomIntFromInterval(25, 97);
                    var node = document.createElement("li");
                    node.classList.add('node-' + index);
                    elem.querySelector('.code ul').appendChild(node).setAttribute('style', '--linelength: ' + lineLength + '%;');


                    if (index == 0) {
                        elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
                    } else {
                        elem.querySelector('.code ul .node-' + (index - 1)).addEventListener('animationend', function (e) {
                            elem.querySelector('.code ul .node-' + index).classList.add('writeLine');
                        });
                    }
                }
            });
        }
    });
</script>
</html>
