<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://nguyenthanh1995.github.io/my.js"></script>
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<link href="https://nguyenthanh1995.github.io/lib/bootstrap.min.css" rel='stylesheet' type='text/css'>
<meta name=viewport content='width=device-width, initial-scale=1.0'/>
<script src="https://nguyenthanh1995.github.io/mycv.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #000;
font-family: Orbitron;
}
canvas {
width: 100%;
}
.d-inline > * {
font-size: .8rem;
letter-spacing: 0px;
color: #00ff0055;
width: 100%;
display: inline-block;
}
.d-inline > .my-active {
color: #00ff00 !important;
}
.d-inline {
margin: 0;
padding: 0;
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
</style>
<script>
function setup () {
ch = (100 + 2) * 2
fn()
function fn () {
my('.clock').html(getTime())
my('.date').html(getDate())
my('ul > li')
.eq(new Date().getDay() - 1)
.addClass('my-active')
timeout(1000)
}
function toFixed (e) {
return e < 10 ? '0' + e : e
}
function toHours (e) {
return e > 12 ? e - 12 : e
}
function getTime () {
var n = new Date()
var hour = toFixed(toHours(n.getHours()))
var min = toFixed(n.getMinutes())
var sec = toFixed(n.getSeconds())
return [hour, min, sec].join(':')
}
function getDate () {
var month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
var n = new Date()
return n.getDate() + ' ' + month[n.getMonth()] + ', ' + n.getFullYear()
}
}
function honkai () {
clear()
var n = new Date;
var h = n.getHours()
h = h > 12 ? h - 12 : h
var min = n.getMinutes()
var s = n.getTime() / 1000
GREY = 'rgb(177, 177, 177)'
GREEN = 'rgb(0, 255, 0)'
for (var i = 0; i < 12; i++) {
begin()
lineWidth(3)
var m = map(i, 0, 12, 0, pi * 2)
line(
center.x + 30 * sin(m),
center.y - 30 * cos(m),
center.x + 40 * sin(m),
center.y - 40 * cos(m)
)
stroke(h === (i || 12) ? GREEN : GREY)
close()
}
for (var i = 0; i < 60; i++) {
begin()
lineWidth(2)
var m = map(i, 0, 60, 0, pi * 2)
line(
center.x + 60 * sin(m),
center.y - 60 * cos(m),
center.x + 70 * sin(m),
center.y - 70 * cos(m)
)
stroke(i > min ? GREY : GREEN)
close()
}
begin()
lineCap('round')
arc(
center.x, center.y,
100,
0,
map(s % 60, 0, 60, 0, 360)
)
stroke(GREEN)
close()
loop()
}
</script>
</head>
<body>
<div class='container text-center'>
<div class=row>
<div class=col>
<span class='h3 date' style=color:#00ff00>04/12/2019</span>
</div>
</div>
<div class='row mt-5'>
<div class=col>
<canvas data-type=my.context2d></canvas>
</div>
</div>
<div class='row mt-3'>
<div class=col>
<span style=color:#00ff00 class='h5 clock'>
04:00:00
</span>
</div>
</div>
<div class='row mt-3'>
<div class=col>
<ul class='d-inline day'>
<li>MON</li>
<li>TUE</li>
<li>WED</li>
<li>THU</li>
<li>FRI</li>
<li>SAT</li>
<li>SUN</li>
</ul>
</div>
</div>
</div>
</body>
</html>