schtonn
/
public


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
							<!DOCTYPE html>
<html lang="en">

<head>
    <!-- <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="../css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" 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">
    <script src="../js/av-live-query-min.js"></script>
    <title>五子</title>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #five {
            background: #ccc;
            height: 100%;
        }

        .controls {
            /* position: absolute; */
            top: 20px;
            margin: 5px;
        }

        #game {
            width: 580px;
            height: 580px;
            /* box-shadow: 2px 2px 5px #333333; */
            /* text-align: center; */
            padding: 10px;
            background: rgba(0, 0, 0, 0.2);
        }

        table {
            width: 560px;
            border-collapse: collapse;
            border-spacing: 0;
        }

        td {
            width: 35px;
            height: 35px;
            /* display: flex;
    justify-content: center;
    align-items: center; */
            text-align: center;
        }

        span {
            transition-duration: 100ms;
            display: inline-block;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            vertical-align: middle;
            cursor: pointer;
        }

        .light {
            transition-duration: 100ms;
            display: inline-block;
            border: 5px double grey;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            z-index: 10;
        }

        span::after {
            content: "";
            height: 0;
            display: inline-block;
            vertical-align: middle;
        }

        .table {
            margin: 0;
        }

        .black {
            box-shadow: 1px 1px 2px rgba(115, 115, 115, 0.7);
            background: #000;
            cursor: default;
        }

        .white {
            box-shadow: 1px 1px 2px rgba(115, 115, 115, 0.7);
            background: #fff;
            cursor: default;
        }

        .green {
            box-shadow: 1px 1px 2px rgba(115, 115, 115, 0.7);
            background-image: linear-gradient(black,white,90deg);
            cursor: default;
        }

        .tables {
            top: 0;
            left: 0;
            z-index: 3;
        }

        #xq-tips {
            position: absolute;
            top: 20%;
            left: 0;
            width: 100%;
            height: 150px;
            background: rgba(0, 0, 0, 0);
            display: none;
            z-index: 4;
            backdrop-filter: blur(5px);
        }

        .xq-txt {
            position: relative;
            height: 150px;
            background: rgba(35, 35, 35, 0.5);
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            margin: auto;
            color: #fff;
            font-size: 40px;
            text-align: center;
            line-height: 150px;
        }

        #agin {
            display: none;
        }

        #regret {
            display: none;
        }

        .pointer {
            display: none;
            transition-duration: 100ms;
            pointer-events: none;
            position: absolute;
            opacity: 50%;
            left: 0;
            top: 0;
        }
    </style>

    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="five">
        <div class="controls">
            <a class="btn btn-info" href="/" style="text-shadow: rgb(85, 85, 85) 3px 2px 4px;"><i
                    class="glyphicon glyphicon-home" aria-hidden="true"></i>&nbsp;返回</a>
            <button class="btn btn-primary" id="begin"><i class=" glyphicon glyphicon-ban-circle"
                    aria-hidden="true"></i>&nbsp;开始游戏</button>
            <button class="btn btn-primary" id="agin"><i class=" glyphicon glyphicon-repeat"
                    aria-hidden="true"></i>&nbsp;重新游戏</button>
            <button class="btn btn-warning" id="regret"><i class=" glyphicon glyphicon-backward"
                    aria-hidden="true"></i>&nbsp;悔棋</button>
            <div class="light"></div>
        </div>
        <div id="game" class="center-block">
            <span class="black pointer"></span>
        </div>
    </div>
    <script src="../js/chess.js"></script>
</body>

</html>