73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
import { Hype } from 'hype'
|
|
import { define, stylesToCSS } from '@because/forge'
|
|
|
|
const app = new Hype()
|
|
|
|
const Body = define('ClockBody', {
|
|
base: 'body',
|
|
margin: 0,
|
|
padding: 0,
|
|
overflow: 'hidden',
|
|
})
|
|
|
|
const Container = define('ClockContainer', {
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100vh',
|
|
width: '100vw',
|
|
background: '#000',
|
|
})
|
|
|
|
const Clock = define('Clock', {
|
|
fontFamily: "'DS-Digital', monospace",
|
|
fontSize: '12vw',
|
|
fontWeight: 'normal',
|
|
color: '#0f0',
|
|
textShadow: '0 0 2px rgba(0, 255, 0, 0.45)',
|
|
letterSpacing: '0.05em',
|
|
userSelect: 'none',
|
|
})
|
|
|
|
const clockScript = `
|
|
function updateClock() {
|
|
const now = new Date();
|
|
const hours = String(now.getHours()).padStart(2, '0');
|
|
const minutes = String(now.getMinutes()).padStart(2, '0');
|
|
const seconds = String(now.getSeconds()).padStart(2, '0');
|
|
document.getElementById('clock').textContent = hours + ':' + minutes + ':' + seconds;
|
|
}
|
|
|
|
updateClock();
|
|
setInterval(updateClock, 1000);
|
|
`
|
|
app.get('/styles.css', c => c.text(stylesToCSS(), 200, {
|
|
'Content-Type': 'text/css; charset=utf-8',
|
|
}))
|
|
|
|
app.get('/', c => c.html(
|
|
<html>
|
|
<head>
|
|
<title>Clock</title>
|
|
<style dangerouslySetInnerHTML={{
|
|
__html: `
|
|
@font-face {
|
|
font-family: 'DS-Digital';
|
|
src: url('/digital.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
`}} />
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<Body>
|
|
<Container>
|
|
<Clock id="clock">00:00:00</Clock>
|
|
</Container>
|
|
<script dangerouslySetInnerHTML={{ __html: clockScript }} />
|
|
</Body>
|
|
</html >
|
|
))
|
|
|
|
export default app.defaults
|