1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
---
template=post
title=Time
#published=2023-09-14 10:22pm CDT
---
[@paragraphs off]
<style>
#counter h1,
#counter h2 {
text-align: center;
font-family: 'Recursive', sans-serif;
font-variation-settings:
"MONO" 1,
"CASL" 0,
"wght" 200,
"slnt" 0,
"CRSV" 0;
}
#counter {
width: 100%;
}
@media (min-width: 50rem) {
#counter-repad {
/* body is offset */
margin-left: calc(-1 * var(--left-pad));
}
#counter {
/* it looks weird perfectly center. the div-2 helps that */
padding-left: calc(var(--left-pad) / 2);
}
}
#days {
font-size: 5rem;
}
#time {
font-size: 4rem;
}
</style>
<!-- Dosis: https://github.com/impallari/Dosis -->
<div id="counter-repad">
<section id="counter">
<h1 id="days"></h1>
<h2 id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></h2>
</section>
</div>
<script>
// don't misuse this, love.
const BIRTH = Date.parse("2001-04-13T02:56:00-05:00");
const SEC_DAY = 60 * 60 * 24;
function calculate() {
let now = Date.now();
let lif = Math.floor((now - BIRTH) / 1000);
let day = Math.floor(lif / SEC_DAY);
let sub_day = lif % (60 * 60 * 24);
let hou = Math.floor(sub_day / (60 * 60));
let min = Math.floor((sub_day % (60 * 60)) / 60);
let sec = sub_day % 60;
return {
days: day,
hours: hou,
minutes: min,
seconds: sec
}
}
let days_reposition = 0;
function display() {
let time = calculate();
let day = document.getElementById('days');
let hour = document.getElementById('hours');
let minute = document.getElementById('minutes');
let second = document.getElementById('seconds');
day.innerText = time.days;
hour.innerText = human(time.hours);
minute.innerText = human(time.minutes);
second.innerText = human(time.seconds);
// We're using a monospace font now. Keep the code, though, but always fail the condition.
if (false && days_reposition % 60 == 0) {
let time_width = document.getElementById('time').clientWidth;
let days = document.getElementById('days');
// Perfect half looks weird? Cheat left
let pad = (time_width - days.clientWidth) / 2.5;
days.style.paddingLeft = `${pad}px`;
}
days_reposition++;
}
function human(n) {
if (n < 10) {
return '0' + n;
} else {
return n;
}
}
setInterval(display, 1000);
display();
</script>
|
