xiongzhu
/
chat-front


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
							<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta charset="UTF-8" />
        <!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <!-- <link rel="apple-touch-icon" type="image/svg+xml" href="/favicon.svg" /> -->
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
        />
        <title>走马AI助手</title>
        <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
        <script type="text/javascript" charset="utf-8" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    </head>

    <body class="dark:bg-black">
        <div id="app">
            <style>
                .loading-wrap {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100vh;
                }

                .balls {
                    width: 4em;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    justify-content: space-between;
                }

                .balls div {
                    width: 0.8em;
                    height: 0.8em;
                    border-radius: 50%;
                    background-color: #4b9e5f;
                }

                .balls div:nth-of-type(1) {
                    transform: translateX(-100%);
                    animation: left-swing 0.5s ease-in alternate infinite;
                }

                .balls div:nth-of-type(3) {
                    transform: translateX(-95%);
                    animation: right-swing 0.5s ease-out alternate infinite;
                }

                @keyframes left-swing {
                    50%,
                    100% {
                        transform: translateX(95%);
                    }
                }

                @keyframes right-swing {
                    50% {
                        transform: translateX(-95%);
                    }

                    100% {
                        transform: translateX(100%);
                    }
                }

                @media (prefers-color-scheme: dark) {
                    body {
                        background: #121212;
                    }
                }
            </style>
            <div class="loading-wrap">
                <div class="balls">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
        <script type="module" src="/src/main.ts"></script>

        <!-- <div id="splash-screen">
            <img src="/img1.png" class="img1" alt="" />
            <img src="/img2.png" class="img2" alt="" />
            <div id="splash-robot"></div>
            <img src="/img-logo.png" class="img-logo" alt="" />
        </div> -->
        <style>
            #splash-screen {
                position: fixed;
                width: 100vw;
                height: 100vh;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 9999;
                object-fit: cover;
                opacity: 1;
                transition: opacity 0.8s ease-in-out;
                background-color: #090a20;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            #splash-screen .img1 {
                width: 100%;
                height: auto;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 999;
            }

            #splash-screen .img2 {
                width: 100%;
                height: auto;
                display: block;
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 999;
            }
            #splash-screen .img-logo {
                width: 110px;
                height: 20px;
                position: absolute;
                bottom: 40px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 999;
            }
            #splash-robot {
                width: 100%;
                height: 100%;
                max-width: 500px;
            }
        </style>
        <script
            src="/bodymovin_5.11.0_lottie.min.js"
            type="text/javascript"
        ></script>
        <script>
            var animation = bodymovin.loadAnimation({
                container: document.getElementById('splash-robot'),
                renderer: 'svg',
                loop: true,
                autoplay: true,
                path: '<%- baseUrl %>splash.json'
            })
        </script>
    </body>
</html>