Andrew Zambazos
102 lines
3.0 KiB
HTML
102 lines
3.0 KiB
HTML
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
* { -webkit-user-select: none; }
|
|
body {
|
|
background: url('background.jpg');
|
|
background-size: 450px 700px;
|
|
color: white;
|
|
font-family: -apple-system, 'Segoe UI Light', Arial, sans-serif;
|
|
font-weight: 200;
|
|
padding-top: 16px;
|
|
overflow: hidden;
|
|
}
|
|
div {
|
|
text-align: center;
|
|
}
|
|
#time { font-size: 78px; }
|
|
#date { font-size: 22px; }
|
|
#bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: -1;
|
|
/* Royalty Free Photo from: https://unsplash.com/photos/DYGNNwkfx_Y */
|
|
background: url('background.jpg') no-repeat center center;
|
|
background-size: cover;
|
|
transform: scale(1.1);
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
function updateTime() {
|
|
const dayNames = ["Sunday",
|
|
"Monday",
|
|
"Tuesday",
|
|
"Wednesday",
|
|
"Thursday",
|
|
"Friday",
|
|
"Saturday"]
|
|
const monthNames = ["January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"October",
|
|
"November",
|
|
"December"];
|
|
var date = new Date();
|
|
var h = (date.getHours() + 24) % 12 || 12;
|
|
var m = date.getMinutes();
|
|
m = m < 10 ? "0" + m : m;
|
|
var timeStr = h + ":" + m;
|
|
var dateStr = dayNames[date.getDay()] + ", " +
|
|
monthNames[date.getMonth()] + " " + date.getDate();
|
|
document.getElementById('time').innerText = timeStr;
|
|
document.getElementById('date').innerText = dateStr;
|
|
var t = setTimeout(updateTime, 500);
|
|
}
|
|
</script>
|
|
<script>
|
|
var lFollowX = 0,
|
|
lFollowY = 0,
|
|
x = 0,
|
|
y = 0,
|
|
range = 500,
|
|
friction = 1 / 6;
|
|
|
|
function moveBackground() {
|
|
x += (lFollowX - x) * friction;
|
|
y += (lFollowY - y) * friction;
|
|
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
|
|
document.getElementById('bg').style.transform = translate;
|
|
window.requestAnimationFrame(moveBackground);
|
|
}
|
|
|
|
function handleMouseMove(e) {
|
|
var lMouseX = Math.max(-range,
|
|
Math.min(range, window.innerWidth / 2 - e.clientX));
|
|
var lMouseY = Math.max(-range,
|
|
Math.min(range, window.innerHeight / 2 - e.clientY));
|
|
lFollowX = (20 * lMouseX) / range;
|
|
lFollowY = (20 * lMouseY) / range;
|
|
}
|
|
|
|
function load() {
|
|
updateTime();
|
|
window.onmousemove = handleMouseMove;
|
|
moveBackground();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="load();">
|
|
<div id="bg"></div>
|
|
<div id="time"></div>
|
|
<div id="date"></div>
|
|
</body>
|
|
</html> |