import { Hype } from '@because/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(
Clock
00:00:00
))
export default app.defaults