<!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>日志</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="preconnect" href="https://fonts.loli.net">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        * {
            transition-duration: 300ms;
        }

        .btn {
            text-shadow: rgb(133, 133, 130) 1px 2px 3px;
        }

        .btn-xs.dark {
            background-color: rgb(70, 59, 150);
            color: white;
        }

        .btn-info.dark {
            color: #fff;
            background-color: #027396;
            border-color: #46b8da;
        }

        code.dark {
            background-color: rgb(70, 59, 150);
        }

        .noshadow {
            text-shadow: none;
        }

        .dark ::selection {
            color: white;
            text-decoration: underline wavy #FF3028;
            text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
            background-color: black;
        }

        .dark {
            color: white;
            background-color: black;
        }

        .btn-dang {
            transition-duration: 1000ms;
        }

        .btn-dang.dark {
            outline: 10px transparent
        }

        .btn-dang:is(:hover, :hover:focus) {
            outline: 15px solid rgba(58, 58, 58, 0.8)
        }

        .btn-dang.dark:hover {
            outline: 4000px solid rgba(0, 0, 0, 0.1)
        }

        .btn-dang:is(:hover:active:focus, :active) {
            scale: 80%;
            transform: translate(-7px, -7px);
            outline: 150px double rgba(162, 6, 6, 0.5)
        }

        hr {
            overflow: visible;
            /* For IE */
            padding: 0;
            border: none;
            border-top: medium double #333;
            color: #333;
            text-align: center;
        }

        hr.dark:after {
            scale: 0;
            transition-delay: 0s;
            transition-duration: 100ms;
        }

        hr:after {
            transition-duration: 300ms;
            content: "§";
            display: inline-block;
            position: relative;
            top: -0.7em;
            font-size: 1.5em;
            padding: 0 0.25em;
            background: floralwhite;
            transition-delay: 1s;
        }

        hr.dark {
            border-top: medium double rgb(70, 59, 150);
            color: rgb(70, 59, 150);
        }
    </style>
    <script>
        $().ready(function () {
            $('.btn-danger').on('click', function (e) {
                $('body,.btn,.btn-xs,code,pre,hr').toggleClass('dark')
                console.log(e)
            })
            fetch('data.json', {
                method: 'GET',
                headers: {
                    'Content-type': 'application/json',
                }
            }).then(res => {
                res.json().then(resj => {
                    var d = resj.content;
                    for (var i = d.length - 1; i >= 0; i--) {
                        $('.main').append(d[i])
                    }
                });
            })
            dat = new Date();
            dat.setHours(dat.getHours() + 8)
            $('#new').text(dat.toISOString().split('T')[0].replace(/-/g, '.'))
        })
        function upload(str, small) {
            str = '<p>' + str.replace(/\n/g, '</p><p>') + '</p>'
            str = `<h3 id='${dat.toISOString().split('T')[0].replace(/-/g, '.').slice(2)}'>${dat.toISOString().split('T')[0].replace(/-/g, '.')} <small>${small}</small></h3>${str}`
            str += '<hr>'
            console.log(str)
            if (!str) alert('no')
            fetch('/log', {
                method: 'POST',
                headers: {
                    'Content-type': 'application/json',
                },
                body: JSON.stringify({ content: str })
            }).then(res => {
                res.text().then(resj => {
                    if (resj == 'ok') {
                        console.log('ok!')
                        $('.uploadIndicator').removeClass('glyphicon-cloud-upload')
                        $('.uploadIndicator').addClass('glyphicon-ok')
                        location.reload();
                    }
                });
            })
        }
    </script>
</head>

<body>
    <a class="btn btn-info" href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
    <div class="page-header">
        <h1>网站日志
            <button class="btn btn-default noshadow" onclick="$('.add').toggle();$(this).children().toggleClass('glyphicon-arrow-down')"><span class="glyphicon glyphicon-plus"></span></button>
        </h1>
    </div>
    <div class="add" style="display: none;">
        <h3 id='new'>d</h3>
        <div class="input-group">
            <input id="smallInput" type="text" class="form-control" autocomplete="off" placeholder="title">
            <textarea id="chatInput" type="text" class="form-control" autocomplete="off" style="resize:vertical" placeholder="content"></textarea>
            <span class="input-group-btn">
                <button type="button" class="btn btn-default noshadow" onclick="upload($('#chatInput').val(),$('#smallInput').val())" id="chatBtn"><span class="uploadIndicator glyphicon glyphicon-cloud-upload"></span></button>
            </span>
        </div>
        <hr>
    </div>
    <div class="main"></div>
    <hr>
    <p><button class="btn btn-danger btn-dang"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
    </p>
    <pre style="font-family: 'Courier New';font-size: 10pt;white-space: pre;margin: 1em 0px;line-height: 10pt;">
    .▄▄ ·  ▄▄·  ▄ .▄▄▄▄▄▄       ▐ ▄  ▐ ▄ 
    ▐█ ▀. ▐█ ▌▪██▪▐█•██  ▪     •█▌▐█•█▌▐█
    ▄▀▀▀█▄██ ▄▄██▀▐█ ▐█.▪ ▄█▀▄ ▐█▐▐▌▐█▐▐▌
    ▐█▄▪▐█▐███▌██▌▐▀ ▐█▌·▐█▌.▐▌██▐█▌██▐█▌
     ▀▀▀▀ ·▀▀▀ ▀▀▀ · ▀▀▀  ▀█▄▀▪▀▀ █▪▀▀ █▪
    </pre>
    <a href="/a.log" style="color:floralwhite">(真正的日志)</a>
</body>