Skip to content

Instantly share code, notes, and snippets.

@simonstastny

simonstastny/clock

Last active June 27, 2025 07:49
Show Gist options
  • Save simonstastny/c530fdf9356b0eaeffd79441f4d64f13 to your computer and use it in GitHub Desktop.
Save simonstastny/c530fdf9356b0eaeffd79441f4d64f13 to your computer and use it in GitHub Desktop.
Download ZIP
clock.html
Raw
clock
two clocks included
Raw
clock_sbf.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clock</title>
<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=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
html, body {
height: 100%;
}
body {
background: #0f3854;
background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
background-size: 100%;
}
p {
margin: 0;
padding: 0;
}
#clock {
font-family: 'Share Tech Mono', monospace;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #daf6ff;
text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
.time {
letter-spacing: 0.05em;
font-size: 15em;
padding: 5px 0;
}
.date {
letter-spacing: 0.1em;
font-size: 5em;
}
.text {
letter-spacing: 0em;
font-size: 2em;
padding: 50px 0 0;
list-style: none;
text-decoration: underline;
}
.event {
letter-spacing: 0em;
font-size: 3em;
padding: 20px 0 0;
list-style: none;
}
}
</style>
</head>
<body>
<div id="clock">
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
<p class="text">{{ today }}</p>
<ol>
<li v-for="item in todaysEvents" class="event">
{{ item }}
</li>
</ol>
<p class="text">Upcoming:</p>
<ol>
<li v-for="item in upcomingEvents" class="event">
{{ item }}
</li>
</ol>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script>
var clock = new Vue({
el: '#clock',
data: {
time: '',
date: '',
today: '',
todaysEvents: [],
upcomingEvents: [],
},
});
var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
setInterval(updateTime, 1000);
setInterval(updateDayEvents, 3600 * 1000);
function updateTime() {
var cd = new Date();
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
}
function updateDayEvents() {
var cd = new Date();
let date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2);
function getEventString(event) {
switch (event.type) {
case 'nameday':
case 'birthday':
return `${event.name} has ${event.type}`
case 'startday':
return `${event.name} has work anniversary (${event.value})`
default:
return `${event.name}`
}
}
fetch('https://opensheet.elk.sh/1dc4dymM5ByL_iRfmrRUib42a6fk6XcvlyJKGXJo9nGc/Sheet1')
.then((res) => res.json())
.then((data) => {
clock.todaysEvents = []
data.filter((event) => event.date === date)
.forEach(event => clock.todaysEvents.push(getEventString(event)));
if (clock.todaysEvents.length > 0) {
clock.today = 'Today\'s events: '
}
let nextIndex = data.findIndex((row) => row.date > date);
clock.upcomingEvents = []
for (let i = nextIndex; i < nextIndex + 3; i++) {
let event = data[i]
clock.upcomingEvents.push(`${getEventString(event)} (${event.date}) `)
}
},
)
}
function zeroPadding(num, digit) {
var zero = '';
for (var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
updateTime();
updateDayEvents();
</script>
</body>
</html>
Raw
clock_spw.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clock</title>
<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=Share+Tech+Mono&display=swap" rel="stylesheet">
<style>
html, body {
height: 100%;
}
body {
background: #0f3854;
background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
background-size: 100%;
}
p {
margin: 0;
padding: 0;
}
#clock {
font-family: 'Share Tech Mono', monospace;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #daf6ff;
text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
.time {
letter-spacing: 0.05em;
font-size: 15em;
padding: 5px 0;
}
.date {
letter-spacing: 0.1em;
font-size: 5em;
}
.text {
letter-spacing: 0em;
font-size: 2em;
padding: 50px 0 0;
list-style: none;
text-decoration: underline;
}
.event {
letter-spacing: 0em;
font-size: 3em;
padding: 20px 0 0;
list-style: none;
}
}
</style>
</head>
<body>
<div id="clock">
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
<p class="text">{{ today }}</p>
<ol>
<li v-for="item in todaysEvents" class="event">
{{ item }}
</li>
</ol>
<p class="text">Upcoming:</p>
<ol>
<li v-for="item in upcomingEvents" class="event">
{{ item }}
</li>
</ol>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<script>
var clock = new Vue({
el: '#clock',
data: {
time: '',
date: '',
today: '',
todaysEvents: [],
upcomingEvents: [],
},
});
var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
setInterval(updateTime, 1000);
setInterval(updateDayEvents, 3600 * 1000);
function updateTime() {
var cd = new Date();
clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
}
function updateDayEvents() {
var cd = new Date();
let date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2);
function getEventString(event) {
switch (event.type) {
case 'nameday':
case 'birthday':
return `${event.name} has ${event.type}`
case 'startday':
return `${event.name} has work anniversary (${event.value})`
default:
return `${event.name}`
}
}
fetch('https://opensheet.elk.sh/12BwTiNRFpPyu8WjiHsB-2cno8jov2WHKyA5rzmhJQN4/Sheet1')
.then((res) => res.json())
.then((data) => {
clock.todaysEvents = []
data.filter((event) => event.date === date)
.forEach(event => clock.todaysEvents.push(getEventString(event)));
if (clock.todaysEvents.length > 0) {
clock.today = 'Today\'s events: '
}
let nextIndex = data.findIndex((row) => row.date > date);
clock.upcomingEvents = []
for (let i = nextIndex; i < nextIndex + 3; i++) {
let event = data[i]
clock.upcomingEvents.push(`${getEventString(event)} (${event.date}) `)
}
},
)
}
function zeroPadding(num, digit) {
var zero = '';
for (var i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
updateTime();
updateDayEvents();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment