schtonn
/
public


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

<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.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/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>
        * {
            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;
            text-align: center;
        }

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

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

        .word {
            background: radial-gradient(transparent, rgb(15 15 15 / 25%));
            transition-duration: 100ms;
            display: inline-block;
            padding: 3px 6px;
            border: 5px double grey;
            z-index: 10;
            vertical-align: middle;
        }

        .red {
            filter: drop-shadow(0 0 2px red);
            outline: 5px dashed rgba(234, 71, 71, 0.5);
        }

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

        .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;
        }

        .highlight.black {
            filter: drop-shadow(0 0 5px black);
        }

        .highlight.white {
            filter: drop-shadow(0 0 5px white);
        }

        .red:active {
            background: radial-gradient(transparent, rgb(15 15 15 / 25%));
        }

        .word:focus:not(:focus-visible):not(.red),
        .word:active:not(:focus-visible):not(.red),
        .word:hover:not(.red) {
            background: radial-gradient(transparent, rgb(15 15 15 / 25%));
            outline: 0;
        }

        .red:focus {
            outline: 5px dashed rgba(234, 71, 71, 0.5);
        }

        .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;
            z-index: 10;
        }

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

        .noshadow {
            text-shadow: none;
        }

        input {
            outline-style: none;
            text-shadow: rgb(85, 85, 85) 3px 2px 4px;
            border: 1px solid #ccc;
            border-radius: 2px;
            background: rgb(215 215 215 / 50%);
        }

        input:hover {
            outline-style: none;
            text-shadow: rgb(85, 85, 85) 3px 2px 4px;
            border: 1px solid #ccc;
            border-radius: 2px;
            background: rgb(215 215 215 / 40%);
        }
    </style>
</head>

<body>
    <div id="five">
        <div class="controls">
            <a class="btn btn-info" href="/"><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>
            <div class="btn-group">
                <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>
                <button class="btn btn-info" id="check"><i class=" glyphicon glyphicon-exclamation-sign" aria-hidden="true"></i>&nbsp;下哪了</button>
            </div>
            <a class="btn btn-default noshadow" onclick="$('.help').toggle()" href="#help"><i class="glyphicon glyphicon-question-sign"></i></a>
            <div class="led mylight"></div>
            <div class="led light"></div>
            <button class="btn btn-danger word message1">快</button>
            <button class="btn btn-danger word message2">再想想？</button>
            <button class="btn btn-danger word message3">拜拜</button>
            <button class="btn btn-danger word message4"><input id="messageText"></button>
        </div>
        <div id="game" class="center-block">
            <span class="black pointer"></span>
        </div>
        <p>Websocket：<i class="glyphicon glyphicon-remove ws" aria-hidden="true"></i></p>
        <div style="display:inline-block">在线人数：<il class="label label-default" id="messageServer"></il>
        </div>
        <div class="help" style="display:none">
            <h4 id="help">说明</h4>
            <p>普通五子棋，需双人对战，同一设备只能使用一种颜色。（找不到同伴可以自己用两个设备玩）</p>
            <p>右侧按钮可用于发送信号，但请勿频繁点击。</p>
            <p>两个指示灯分别表示自身颜色和当前颜色，两者相同时说明该你了。</p>
        </div>
    </div>
    </div>
    <script src="/js/chess.js"></script>
</body>