schtonn
/
public


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
							<!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="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">
    <link rel="stylesheet" href="/css/style.css">
    <!-- <link rel="stylesheet" href="/css/style.css"> -->
    <style>
        *:not(svg, path, g) {
            transition-duration: 300ms;
        }

        /* https://i.328888.xyz/2022/12/23/Dn9eo.jpeg */


        .btn {
            text-shadow: rgb(133, 133, 130) 1px 2px 3px;
            transition-duration: 100ms;
            transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
        }

        .btn:not(.btn-sm) {
            margin-top: 5px;
        }

        /* .btn:hover {
            text-shadow: rgb(33, 33, 30, 0.8) 3px 3px 5px;
            transform: rotate(2deg) translate(-2px, -4px);
        } */

        #random:hover {
            text-shadow: -3px -3px 3px rosybrown, 3px 3px 3px royalblue, 3px -3px 5px whitesmoke, -3px 3px 5px whitesmoke, -3px -3px 5px yellow;
        }

        #paint:hover {
            text-shadow: -3px -3px 3px rgb(95, 192, 150), 3px 3px 3px rgb(131, 221, 226), 3px -3px 5px rgb(151, 124, 225), -3px 3px 5px whitesmoke, -3px -3px 5px yellow;
        }

        #chess:hover {
            text-shadow: rgb(13, 13, 10, 0.8) -1px -2px 3px, whitesmoke 1px 2px 3px, whitesmoke -1px 2px 3px;
        }

        #gravity:hover {
            text-shadow: seagreen -1px -2px 3px, grey 1px 2px 3px, whitesmoke -1px 2px 3px;
        }

        img {
            border: 3px dotted grey;
            width: 300px;
        }

        .btn.nohover:hover {
            transform: none;
            outline: none;
            text-shadow: none;
        }

        body {
            background: url('../fun/chat/ai-game/1/duck.png'), #f88;
            background-blend-mode: screen
        }

        .btn {
            position: relative;
            top: 0px;
            transition: all 0.2s;
        }

        .btn:hover {
            top: -2px;
        }

        .btn:active {
            top: 5px;
        }

        svg {
            margin-top: 1rem;
            width: 30vmin;
            height: auto;
            filter: url(#shadow-large);
        }
    </style>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>

    <script>
        const zeroPadded = number => ((number >= 10) ? number.toString() : `0${number}`);
        const twelveClock = (twentyFourClock) => {
            if (twentyFourClock === 0) {
                return 12;
            } if (twentyFourClock > 12) {
                return twentyFourClock - 12;
            }
            return twentyFourClock;
        };
        var tot = 0;
        function getTime() {
            setTimeout(() => {
                var click = new Audio('clock.mp3');
                click.volume = .3;
                click.preload = true;
                click.play();
            }, 900);
            var now = new Date();
            var hours = now.getHours();
            var minutes = now.getMinutes();
            if (now.getSeconds() == 0) tot++;
            console.log(tot, now.getSeconds())
            var seconds = now.getSeconds() + tot * 60;
            var time = {
                hours: twelveClock(hours), // 1-12
                minutes, // 0-59
                seconds, // 0-59
            };

            var rotation = {
                hours: twelveClock(hours),
                minutes,
                seconds,
            };

            var entries = Object.entries(time);
            entries.forEach(([key, value]) => {
                console.log((key === 'hours') ? `rotate(${-15 + value * 30})` : `rotate(${value * 6})`)
                anime({
                    targets: `g.${key}`,
                    transform: (key === 'hours') ? `rotate(${-15 + value * 30})` : `rotate(${value * 6})`,
                    duration: 400,
                });
            });
        }
        $().ready(function () {
            const clockFace = $('svg g.clock--face')[0];
            for (let i = 0; i < 12; i += 1) {
                clockFace.innerHTML += `<text transform="rotate(${-90 + 30 * (i + 1)}) translate(34 0) rotate(${90 - 30 * (i + 1)})" >${zeroPadded(i + 1)}</text>`;
            }
            getTime();
            setInterval(getTime, 1000);
        })
    </script>
</head>

<body>
    <a class="btn btn-info" href="/"><span class="glyphicon glyphicon-home"></span>&nbsp;返回</a>
    <div class="page-header">
        <h2>> 娱乐 <small>首页放不下了，根目录也太挤了，再有千奇百怪的想法我都往这扔</small></h2>
    </div>
    <div>
        <a class="btn btn-warning" href="core/">Core</a>
        <div class="btn-group">
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">sans&nbsp;<span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li><a href="sans/">sans</a></li>
                <li><a href="sans-cheat/"><span class="glyphicon glyphicon-wrench"></span>&nbsp;&nbsp;sans</a></li>
            </ul>
        </div>
        <a class="btn btn-info" id="random" href="random/"><span class="glyphicon glyphicon-random"></span>&nbsp;&nbsp;random</a>
        <a class="btn btn-success" id="paint" href="/paint/"><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;绘画板</a>
        <a class="btn btn-success" id="chess" href="/chess/"><span class="glyphicon glyphicon-record"></span>&nbsp;&nbsp;五子棋</a>
        <a class="btn btn-info" id="gravity" href="gravity/"><span class="glyphicon glyphicon-magnet"></span>&nbsp;&nbsp;引力</a>
        <a class="btn btn-warning" id="raytrack" href="raytrace/"><span class="glyphicon glyphicon-certificate"></span>&nbsp;&nbsp;1k光追</a>
        <a class="btn btn-info" id="article" href="article/"><span class="glyphicon glyphicon-book"></span>&nbsp;&nbsp;一些好玩的文章</a>
        <a class="btn btn-info" id="music" href="music/"><span class="glyphicon glyphicon-music"></span>&nbsp;&nbsp;音乐</a>
        <a class="btn btn-info" id="test" href="test/"><span class="glyphicon glyphicon-transfer"></span>&nbsp;&nbsp;Websocket 测试</a>
        <!-- <a class="btn btn-info" id="chat" href="chat/"><span class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;ChatGPT 测试</a> -->
        <a class="btn btn-success" id="gravity" href="https://太帅了.cn" title="中国人不懂浪漫，这么好的域名让我注册了"><span class="glyphicon glyphicon-link"></span>&nbsp;&nbsp;太帅了.cn</a>
        <a class="btn btn-success" href="/minecraft">Minecraft</a>
        <div style="text-align:right">
            <span class="btn btn-xs btn-warning nohover">纯搬运</span> - <span class="btn btn-xs btn-info nohover">小工程</span> -
            <span class="btn btn-xs btn-success nohover">大工程</span>
        </div>
    </div>
    <hr>
    <svg viewBox="0 0 100 100" width="100" height="100">
        <defs>
            <filter id="shadow-large">
                <feDropShadow dx="0" dy="0" stdDeviation="4" />
            </filter>
            <filter id="shadow-small">
                <feDropShadow dx="0" dy="0" stdDeviation="0.2" />
            </filter>

            <mask id="mask">
                <g transform="translate(50 50)">
                    <g class="hours" transform="rotate(-15)">
                        <circle cx="0" cy="0" r="50" fill="#fff"> </circle>
                        <path d="M 0 -50 v 50 l 28.86 -50" fill="#000"> </path>
                    </g>
                </g>
            </mask>
        </defs>

        <circle cx="50" cy="50" r="46" fill="#303335"> </circle>

        <circle cx="50" cy="50" r="42" fill="#EA3F3F" filter="url(#shadow-large)"> </circle>

        <g class="clock--face" font-size="8px" transform="translate(50 50)" text-anchor="middle" dominant-baseline="middle"></g>
        <circle mask="url(#mask)" cx="50" cy="50" r="50" fill="#303335"></circle>
        <circle cx="50" cy="50" r="4" filter="url(#shadow-small)" fill="#303335"></circle>
        <g class="hands" transform="translate(50 50)">
            <g class="minutes" transform="rotate(240)">
                <path fill="#fff" d="M -0.4 8 h 0.8 v -33 h -0.8 z"></path>
                <circle fill="#303335" cx="0" cy="0" r="0.6"></circle>
            </g>
            <g class="seconds" transform="rotate(80)">
                <path fill="#EA3F3F" d="M -0.4 10 h 0.8 v -45 h -0.8 z"></path>
                <circle stroke-width="0.4" stroke="#EA3F3F" fill="#303335" cx="0" cy="0" r="0.8"></circle>
            </g>
        </g>
    </svg>
</body>