schtonn
/
public


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
							<head>
    <meta charset="UTF-8">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="stylesheet" href="../css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <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">
    <title>paint</title>
    <style>
        .hd,
        .hdt,
        #now-color,
        .pixel {
            transition-duration: 100ms;
        }

        .box {
            display: inline-block;
            margin: auto;
            margin-top: 10px;
            margin-bottom: 10px;
            cursor: pointer;
            width: 180px;
            height: 7px;
            background-color: rgba(215, 215, 215, 0.7);
            position: relative;
            vertical-align: middle;
        }

        .box .hd {
            width: 16px;
            height: 16px;
            background-color: rgba(215, 215, 215, 1);
            border-radius: 6px;
            position: absolute;
            left: 0;
            top: -6px;
            cursor: pointer;
            margin: 0;
            transform: translateX(-9px);
            z-index: 2;
        }

        .box .hdt {
            position: absolute;
            top: 0;
            left: 0;
            height: 7px;
            width: 0;
            margin: 0;
        }

        #box-r .hd {
            background-image: linear-gradient(60deg, #e57070, rgba(215, 215, 215, 0.5));
            border: 1px solid #ef2929
        }

        #box-g .hd {
            background-image: linear-gradient(60deg, #5dbd79, rgba(215, 215, 215, 0.5));
            border: 1px solid #22b14c
        }

        #box-b .hd {
            background-image: linear-gradient(60deg, #91b0d2, rgba(215, 215, 215, 0.5));
            border: 1px solid #729fcf
        }

        #box-r .hdt {
            background-image: linear-gradient(60deg, #eb9696, #ef2929);
        }

        #box-g .hdt {
            background-image: linear-gradient(60deg, #88be98, #22b14c);
        }

        #box-b .hdt {
            background-image: linear-gradient(60deg, #b8c7d7, #729fcf);
        }

        .box-text {
            user-select: none;
            width: 25px;
            z-index: -1;
            transform: translate(-105px, -10px);
            background-color: rgba(215, 215, 215, 0.7);
            border: 2px solid rgba(215, 215, 215, 0.7);
            border-radius: 5px;
        }

        * {
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }

        #main {
            display: flex;
            flex-direction: row;
            width: 900px;
            margin: 0 auto;
            margin-top: -20px;
            text-align: center;
        }

        #draw {
            width: 640px;
            height: 640px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: auto;
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transform-origin: 0px 0px;
            border: 1px solid rgb(211, 211, 211);
        }


        .pixel {
            width: 5px;
            height: 5px;
        }

        #color-list {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            padding: 0;
            margin: auto;
        }

        #tools {
            display: flex;
            flex-direction: column;
            width: 250px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            background-color: rgba(15, 15, 15, 0.1);
            border: 5px solid rgba(15, 15, 15, 0.1);
            border-radius: 15px;
            backdrop-filter: blur(5px);
        }

        .color-item {
            cursor: pointer;
            height: 20px;
            width: 20px;
        }

        #now-color {
            width: 80px;
            height: 80px;
            margin: auto;
            border: 1px solid rgb(147, 147, 147);
            border-radius: 15px;
            background-color: #000;
        }

        li {
            list-style: none;
            margin-bottom: 3px;
            display: block;
            box-sizing: border-box;
        }

        .btn {
            text-shadow: rgb(85, 85, 85) 3px 2px 4px;
            display: inline-block;
        }

        .noshadow {
            text-shadow: none;
        }

        #controls {
            position: fixed;
            text-align: left;
            left: 0;
            right: 0;
            margin: 0 auto;
            bottom: 10px;
            width: 700px;
            padding-left: 3px;
            padding-right: 5px;
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            border: 5px solid rgba(15, 15, 15, 0.1);
            border-radius: 15px;
            background-color: rgba(15, 15, 15, 0.1);
            backdrop-filter: blur(5px);
        }

        #version {
            background-color: rgba(215, 215, 215, 0.7);
            border-radius: 5px;
            padding-right: 3px;
        }
    </style>
    <script src="../js/av-min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="../js/paint.js">
    </script>
</head>

<body>
    <a class="btn btn-info" href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
    <div id="main" style="text-align:center">
        <div id="draw"></div>
        <div id="tools">
            <button class="btn" id="toggle" style="background:rgba(215, 215, 215,0.7)"><span
                    class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button>
            <div id="now-color"></div>
            <div class="box canToggle" id="box-r">
                <i class="hd blurred"></i>
                <i class="hdt"></i>
                <input class="box-text" id="box-r-text" onfocus="this.select()" />
            </div>
            <div class="box canToggle" id="box-g">
                <i class="hd blurred"></i>
                <i class="hdt"></i>
                <input class="box-text" id="box-g-text" onfocus="this.select()" />
            </div>
            <div class="box canToggle" id="box-b">
                <i class="hd blurred"></i>
                <i class="hdt"></i>
                <input class="box-text" id="box-b-text" onfocus="this.select()" />
            </div>
            <ul class="canToggle" id="color-list"></ul>
        </div>
    </div>
    <div id="controls">
        <button class="btn btn-default noshadow" id="help"
            onclick="alert('说明：左键绘制，右键擦除。\n键盘AD键或屏幕下方按键可浏览历史版本，鼠标悬停于版本上可查看时间。\n点击上传后，同一设备一天内的编辑将会保存在一个版本中，并对所有人可见。')"><span
                class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></button>
        <button class="btn btn-info" id="zoom"><span class="glyphicon glyphicon-zoom-in"
                aria-hidden="true"></span>&nbsp;缩放</button>
        <button class="btn btn-primary" id="upload"><span class="glyphicon glyphicon-cloud-upload"
                aria-hidden="true"></span>&nbsp;上传</button>
        <button class="btn btn-primary" id="reset"><span class="glyphicon glyphicon-cloud-download"
                aria-hidden="true"></span>&nbsp;同步</button>
        <a id="lbtn" tabindex="0" class="btn btn-default noshadow" onclick="prevVer()">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"><kbd>A</kbd></span>
        </a>
        <a id="rbtn" tabindex="0" class="btn btn-default noshadow" onclick="nextVer()">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"><kbd>D</kbd></span>
        </a>
        <span id="version" style="margin-right:auto"></span>
    </div>
</body>