gh-pages

分支 (1)

管理

管理

gh-pages

sky-live-Height-inquiry
/
index.html

<!DOCTYPE html>
<html lang="zh-CN" class="mdui-theme-auto">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" />
    <meta name="renderer" content="webkit" />

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-icon" href="./src/icon.png" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="stylesheet" href="mdui/mdui.css">
    <script src="mdui/mdui.global.js"></script>
    <link href="mdui/icon+round.css" rel="stylesheet">
    <title>🍊橙子小工具</title>
</head>

<body>
  <mdui-snackbar placement="top" id="snackbar"></mdui-snackbar>
    <mdui-navigation-drawer modal close-on-esc close-on-overlay-click>
        <mdui-list>
            <mdui-list-item rounded nonclickable>
                <div slot="custom" style="display: flex; align-items: center; justify-content: space-between;">
                    <mdui-button-icon icon="close--rounded" id="侧边栏关闭" style="margin-right: 30px;"></mdui-button-icon>
                </div>
            </mdui-list-item>
            <mdui-list-item rounded icon="group_add--rounded" id="qqgroup">加入群聊</mdui-list-item>
        </mdui-list>
    </mdui-navigation-drawer>
    <div style="position: relative;overflow: hidden">
        <mdui-top-app-bar scroll-behavior="elevate">
            <mdui-button-icon icon="menu--rounded" id="侧边栏开启"></mdui-button-icon>
            <mdui-top-app-bar-title>🍊橙子小工具</mdui-top-app-bar-title>
            <div style="flex-grow: 1"></div>
        </mdui-top-app-bar>

        <div style="max-width: 400px; overflow: auto; margin-left: auto; margin-right: auto;">
            <mdui-card variant="filled"
                style="--shape-corner: 20px; display: flex; padding: 16px 16px 16px; align-items: center; flex-direction: column;">
                <h4 style="text-align: center;">小工具查身高限时免费，快叫上好友一起查吧</h4>
            </mdui-card>
            <mdui-card variant="filled"
                style="--shape-corner: 20px; display: flex; padding: 16px 24px 24px; margin-top: 15px; align-items: center; flex-direction: column;">
                <h1 style="font-size: 1.5rem; font-weight: 400;line-height: 1.334;letter-spacing: 0em;">在线查身高</h1>
                <div style="width:80%;">
                    <mdui-segmented-button-group id="type" required selects="single" full-width
                        style="--shape-corner :10px">
                        <mdui-segmented-button value="live" selected-icon="check_circle_outline--rounded"
                            disabled="false">国际服(免)</mdui-segmented-button>
                        <mdui-segmented-button value="beta" selected-icon="check_circle_outline--rounded"
                            disabled="false">测试服(免)</mdui-segmented-button>
                    </mdui-segmented-button-group>
                    <mdui-text-field clearable autosize variant="filled" id="longid" label="光遇账号ID" helper="请输入您的长ID"
                        helper-on-focus required="true" enterkeyhint="down"></mdui-text-field>
                    <mdui-button full-width style="--shape-corner:10px" id="already">查询</mdui-button>
                </div>
            </mdui-card>
          <mdui-card variant="outlined"
                style="--shape-corner: 20px; display: flex; padding: 0px 24px 24px; margin-top: 15px; align-items: center; flex-direction: column;">
                <div style="width:100%;">
                    <mdui-tabs value="tab-1" placement="top" variant="secondary">
                        <mdui-tab value="tab-1">国际服/测试服教程</mdui-tab>
                        <mdui-tab-panel slot="panel" value="tab-1">
                            <div style="width:100%;">
                                <img src="./live%26beta.png"
                                    style="width: 100%;height: auto;object-fit: contain;">
                            </div>
                        </mdui-tab-panel>
                    </mdui-tabs>
                </div>
            </mdui-card>
        </div>
    </div>
</body>
<script src="src/app.js"></script>
<script>
    mdui.setColorScheme('#7CCD7C');

    window.addEventListener("load", (event) => {
        let istypeValid = false;

        document.getElementById('type').addEventListener("change", (event) => {
            if (event.target.value == '') {
                istypeValid = false;
            } else {
                istypeValid = true;
                type = event.target.value;
            }
        });

        document.getElementById("already").addEventListener("click", () => {
            const longid = document.getElementById('longid');

            const islongidValid = longid.reportValidity();

            if (islongidValid && istypeValid) {
                const formData = new FormData();
                formData.append('longid', longid.value);

                let uurl;
                if (type == "live") {
                    uurl = "https://ovoav.com/api/sky/sgwz/gjf?key=ez2yBl9AzXMCN&id=";
                } else if (type == "beta") {
                    uurl = "https://ovoav.com/api/sky/sgwz/csf?key=ez2yBl9AzXMCN&id=";
                }

                if (uurl) {
                    document.getElementById('already').disabled = true;
                    document.getElementById('already').loading = true;
                    fetch(uurl + longid.value, {
                        method: 'GET'
                    })
                        .then(response => {
                            document.getElementById('already').disabled = false;
                            document.getElementById('already').loading = false;
                            if (!response.ok) {
                                throw new Error('网络请求异常');
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.code === 200) {
                                var result = "身高解析结果:<br>" +
                                    "体型值: " + data.data.scale + "<br>" +
                                    "身高值: " + data.data.height + "<br>" +
                                    "当前身高: " + data.data.currentHeight + "<br>" +
                                    "最高: " + data.data.maxHeight + "<br>" +
                                    "最矮: " + data.data.minHeight + "<br><br>" +
                                    "当前角色服装:<br>" +
                                    "斗篷: " + data.adorn.cloak + "<br>" +
                                    "背饰: " + data.adorn.prop + "<br>" +
                                    "颈饰: " + data.adorn.neck + "<br>" +
                                    "面具: " + data.adorn.mask + "<br>" +
                                    "耳饰: " + data.adorn.horn + "<br>" +
                                    "发型: " + data.adorn.hair + "<br>" +
                                    "裤子: " + data.adorn.pants + "<br>" +
                                    "鞋子: " + data.adorn.feet + "<br>" +
                                    "叫声: " + data.action.voice + "<br>" +
                                    "站姿: " + data.action.attitude;
                                var dom = document.createElement('div');
                                dom.innerHTML = result;
                                mdui.dialog({
                                    description: dom,
                                    actions: [
                                        {
                                            text: "OK",
                                            onClick: () => {
                                                return true;
                                            },
                                        }
                                    ]
                                });
                            } else {
                                showsnackbar(data.msg);
                            };
                        })
                        .catch(error => {
                            showsnackbar(error.message);
                        });
                }
            } else {
    showsnackbar("请填写ID并选择服务器");
}

        });
    });

  function showsnackbar(message) {
            document.getElementById('snackbar').textContent = message;
            document.getElementById('snackbar').open = true;
        }
        document.getElementById("qqgroup").addEventListener("click", () => {
            location.assign(qqurl);
        });
        document.getElementById("侧边栏开启").addEventListener("click", () => {
            document.querySelector("mdui-navigation-drawer").open = true;
        });
        document.getElementById("侧边栏关闭").addEventListener("click", () => {
            document.querySelector("mdui-navigation-drawer").open = false;
        });

</script>

</html>