<!doctype html>
<html>
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-K76PSKSSGX"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());

        gtag('config', 'G-K76PSKSSGX');
    </script>
    <meta charset="utf-8">
    <title>人人影视下载分享</title>

    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
    <link href="/css/normalize.min.css" rel="stylesheet">
    <style>
        h1 {
            font-family: Pacifico, sans-serif;
            font-size: 4em;
            color: #3eb5f1;
            margin: 0;
        }

        h2 {
            font-weight: 300;
            font-family: sans-serif;
        }

        .centered {
            /*position: fixed;*/
            top: 50%;
            left: 50%;
            /*transform: translate(-50%, -50%);*/
            text-align: center;
        }

        #ferris {
            width: 75%;
        }

        /*a::after {*/
        /*    content: attr(title);*/
        /*    display: none;*/
        /*}*/

        /*a:hover::after {*/
        /*    display: block;*/
        /*}*/
        /* Style the tab */
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;

            /*background-color: #f1f1f1;*/
        }

        /* Style the buttons inside the tab */
        .tab button {
            text-align: center;
            background-color: inherit;
            float: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

        /* Style the tab content */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }

        a {
            text-decoration: none;
        }

        .footer {
            text-decoration: none;
            color: green;
        }
    </style>


</head>
<body>
<div class="centered">
    <h1>人人影视下载分享 By Benny</h1>
    <h2>
        <a href="https://www.buymeacoffee.com/bennythink" target="_blank"><img src="/img/default-green.png"
                                                                               alt="Buy Me A Coffee"
                                                                               style="height: 55px !important;width: 200px !important;"></a>
        <a href="https://afdian.net/@BennyThink" target="_blank"><img src="/img/afdian.png" alt="爱发电"
                                                                      style="height: 55px !important;width: 200px !important;"></a>
    </h2>
    <h2>本站数据库<b><a style="color: skyblue" href="/help.html">永久开源免费</a></b>，<abbr
            style="text-decoration: none" title="你也爬不下来啊">请不要做无意义的爬虫。</abbr>
        <a href="help.html" style="color: deepskyblue">使用帮助？</a>
    </h2>

    <form action="search.html">
        <label>
            <input name="keyword" type="text">
        </label>
        <input type="submit" value="搜索">
    </form>
    <br>
    <h2>大家都在看🤔……每月重置排行榜</h2>
    <div class="tab">

    </div>

    <div id="topContent">

    </div>

    <h2>相关资源⬇️</h2>
    <h3>
        联系我 <a class="footer" href="https://t.me/BennyThink">Benny 小可爱</a>・
        YYeTs 机器人<a class="footer" href="https://t.me/yyets_bot">Telegram Bot</a>・
        Telegram <a class="footer" href="https://t.me/mikuri520">Channel</a>・
        开源 <a class="footer" href="https://github.com/tgbot-collection/YYeTsBot">GitHub</a>・
        我的博客 <a class="footer" href="https://dmesg.app/">土豆不好吃</a>
    </h3>
</div>
<form method="post" style="display: none" id="login-form">
    <label>
        <input type="text" required="required" placeholder="用户名" name="username"/>
    </label>
    <label>
        <input type="password" required="required" placeholder="密码" name="password"/>
    </label>
    <button class="but" type="submit" onclick="login()">登录</button>
</form>

</body>
<script src="js/axios.min.js"></script>
<script src="js/common.js"></script>
<link href="css/noty.css" rel="stylesheet">
<script src="js/noty.min.js"></script>

<script>
    accessMetrics("access");

    // get top
    axios.get('/api/top')
        .then(function (response) {
            showTop(response.data)
        })
        .catch(function (error) {
            // handle error
            new Noty({
                type: 'error',
                layout: 'topRight',
                theme: 'relax',
                text: error.response.data,
                timeout: 1500
            }).show();
            console.log(error);
        })
        .then(function () {
            // always executed
        });


    function showTop(data) {
        const code2Name = data["class"];
        let buttonParent = document.getElementsByClassName("tab")[0]
        let topParent = document.getElementById("topContent")
        delete data["class"];
        for (let code in data) {
            let button = `<button class="tablinks" onclick="openCity(event, '${code}')">${code2Name[code]}</button>`;
            let div = `<div id="${code}" class="tabcontent"></div>`;

            let buttonChild = document.createElement('button');
            buttonChild.innerHTML = button;
            buttonChild = buttonChild.firstChild;
            buttonParent.appendChild(buttonChild);

            let divChild = document.createElement('div');
            divChild.innerHTML = div;
            divChild = divChild.firstChild;
            topParent.appendChild(divChild);

            // render data
            let countryInfo = data[code]
            // let div = HTMLElement
            for (let each in countryInfo) {
                let info = countryInfo[each]["data"]["info"];
                let divParent = document.getElementById(code);
                let name = `${info.cnname} ${info.enname} ${info.aliasname}`;
                let html = `<h4><a title="浏览量 ${info.views}" style="text-decoration: none;color: cornflowerblue" href="/resource.html?id=${info.id}">${name}</a></h4>`;

                let divChild = document.createElement('h4');
                divChild.innerHTML = html;
                divChild = divChild.firstChild;
                divParent.appendChild(divChild);

            }

        }
        document.getElementsByClassName("tab")[0].firstElementChild.className += " active"
        document.getElementById("ALL").style.display = "block"

        let like = document.getElementById("LIKE");
        let user_cookie = getCookie("username");
        let login_form = document.getElementById("login-form");
        if (user_cookie === "") {
            like.innerHTML = "请登录，未注册用户将会自动注册<br><br>" + login_form.innerHTML + "<br>"
        }

    }

    function login() {
        let username = document.getElementsByName("username")[0].value
        let password = document.getElementsByName("password")[0].value
        axios.post('/api/user', {
            username: username,
            password: password
        })
            .then(function (response) {
                let message = response.status === 201 ? "注册成功" : "登录成功"
                new Noty({
                    type: 'success',
                    layout: 'topRight',
                    theme: 'relax',
                    text: message,
                    timeout: 1500
                }).show();
                setTimeout(function () {
                    location.reload();
                }, 3000);
            })
            .catch(function (error) {
                new Noty({
                    type: 'error',
                    layout: 'topRight',
                    theme: 'relax',
                    text: error.response.data,
                    timeout: 1500
                }).show();

            });
    }


    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }

</script>
</html>