<!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> 返回</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 <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> sans</a></li>
</ul>
</div>
<a class="btn btn-info" id="random" href="random/"><span class="glyphicon glyphicon-random"></span> random</a>
<a class="btn btn-success" id="paint" href="/paint/"><span class="glyphicon glyphicon-pencil"></span> 绘画板</a>
<a class="btn btn-success" id="chess" href="/chess/"><span class="glyphicon glyphicon-record"></span> 五子棋</a>
<a class="btn btn-info" id="gravity" href="gravity/"><span class="glyphicon glyphicon-magnet"></span> 引力</a>
<a class="btn btn-warning" id="raytrack" href="raytrace/"><span class="glyphicon glyphicon-certificate"></span> 1k光追</a>
<a class="btn btn-info" id="article" href="article/"><span class="glyphicon glyphicon-book"></span> 一些好玩的文章</a>
<a class="btn btn-info" id="music" href="music/"><span class="glyphicon glyphicon-music"></span> 音乐</a>
<a class="btn btn-info" id="test" href="test/"><span class="glyphicon glyphicon-transfer"></span> Websocket 测试</a>
<a class="btn btn-info" id="chat" href="chat/"><span class="glyphicon glyphicon-comment"></span> ChatGPT 测试</a>
<a class="btn btn-success" id="gravity" href="https://太帅了.cn" title="中国人不懂浪漫，这么好的域名让我注册了"><span class="glyphicon glyphicon-link"></span> 太帅了.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>