zebratime
Version:
Zulu time for humans
325 lines (322 loc) • 13.2 kB
HTML
<html>
<head>
<title>Zebra Time</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
--bg-color:#d1d1de;
--bg-hilite:rgba(209,209,222,0.1);
--txt-color:#1d1d1f;
--txt-light-color:#2d2d2f;
--txt-box:rgba(29,29,31,0.2);
--spacer:20px;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--bg-color);
color:var(--txt-color);
font-family: poppins-semibold,poppins,sans-serif;
font-size: 22px;
line-height: 1.3;
width:100%;
height:100%;
margin:0;
padding:0;
box-sizing: border-box;
}
#content-container {
position:relative;
left:0;
right:0;
top:100px;
display:flex;
flex-direction: column;
}
#content-header {
position:fixed;
display:flex;
left:0;
right:0;
top:0;
align-items: center;
height:60px;
background-color: var(--txt-color);
color: var(--bg-color);
padding:10px 15%;
z-index:10;
}
#header-time {
flex:1 0 auto;
text-align: right;
font-size:1.5em;
}
#header-title {
flex:1 0 auto;
font-size:1.5em;
}
#header-menu > * {
font-size:.8em;
padding:20px;
cursor:pointer;
color:var(--bg-color) ;
}
#header-menu > *:hover {
text-decoration: underline;
}
.page {
position:relative;
display:flex;
flex-direction:column;
flex:auto;
align-content:space-evenly;
padding:130px 15% 30px 15%;
margin-top:-100px;
}
.page-title {
border-top:1px solid black;
margin:0 15%;
line-height:1;
}
.page-title > span {
color:var(--bg-color);
background-color:var(--txt-color);
padding:0 20px;
}
.horizontal {
flex-direction:row;
}
.page-box {
flex:1 1;
}
.strong {
font-weight:bold;
}
pre {
font-size:0.8em;
background-color:var(--txt-box);
padding:0 10px;
}
p {
margin-block-start:.5em;
margin-block-end:.5em;
}
</style>
</head>
<body>
<section id="content-header">
<div id="header-title">Zebra Time</div>
<div id="header-menu">
<a href="#home">[ home ]</a>
<a href="#code">[ code ]</a>
<a href="#clock">[ clock ]</a>
</div>
<div id="header-time"></div>
</section>
<section id="content-container">
<section id="home" class="page">
<p>Why is it <span class="zebra-hour strong"></span> o'clock?
Because it is <span class="zebra-hour strong"></span> o'clock
everywhere.</p>
<p>Clocks emerged locally, based on the position of the sun. Universal time,
Greenwich Mean Time, was invented as we globalized and needed
to label a shared moment unrelated to lunch. But Universal Time (UTC)
relies on the same syntax as local time, making
it unnatural to distinguish these different meanings to the question,
what time is it?</p>
<p><span class="zulu-ampm-hour"></span> means something to you.
I'm guessing <span class="zulu-activity"></span>. Your local time is
<span class="local-ampm-hour"></span>. If you happen to live in London that
might be the same or an hour off. If you happen to live in Sydney it's
going to be some 9 or 10 hours different.</p>
<p>We are inured to how complicated this is. "Is that your 2 o'clock or mine?"
Meanwhile, nearly all computers everywhere agree that now is
<span class="computer-time strong"></span>.</p>
<p>With Zebra Time you can develop a sense of
<span class="zebra-hour"></span>:00 that is distinct from
<span class="local-hour"></span>:00. Have lunch at 12:30 but schedule
a call with Helsinki and Hanoi at K:30.</p>
<p>Mechanically, Zebra Time is UTC with a letter representing the hour
rather than a number. That's useful for computer programmers, but
somewhat irrelevant. Tell me it's <span class="zebra-hour"></span>
o'clock, and I can agree with you. Tell me it's <span class="local-hour"></span>
o'clock, and I have to ask where.</p>
</section>
<section id="code-title" class="page-title"><span>code</span></section>
<section id="code" class="page">
<p>ZebraTime is open source from concept to code. It
is a project to give people a simple language for universal time so
we can dispense with the timezone date math.</p>
<p>This site and a basic ES6 module are available on
<a href="https://github.com/mespr/zebratime">github.com/mespr/zebratime</a>
and npmjs.com</p>
<pre><code>
npm i zebratime
</code></pre>
<pre><code>
<script type='module' src='zebratime.js'><script>
</code></pre>
<p>Invoke ZebraTime() to get an instance based on the current time or
pass a date object as the first argument</p>
<pre><code>
let zebra = ZebraTime();
console.log("zebra time is "+zebra);
// zebra time is A:10
console.log("zebra time is "+zebra.precision("second"));
// zebra time is A:10:45
</code></pre>
For a DOM element that presents the time and stays current, use timeElement.
<pre><code>
myElement.append(ZebraTime().timeElement());
</code></pre>
</section>
<section id="wall-clock-title" class="page-title"><span>clocks</span></section>
<section id="clock" class="page horizontal">
<section class="page-box" style="
background-image:url(img/zebra_clock.png);
background-size:contain;
background-repeat:no-repeat;
flex-grow:0.5;
min-height:250px;
margin:30px 30px 0 0">
</section>
<section class="page-box">
<p>This clock is handmade, built with a plastic disc and a 24 clock
mechanism. The face was drawn with dry erase markers. I've made half
a dozen and installed them various place.</p>
<p>The colors indicate the relative active time of people in
the world's populous zones. It's not intended to be very accurate. It just
gives a cue as to who might be up and about.</p>
</section>
</section>
<section id="cityclock" class="page horizontal">
<section class="page-box" style="
background-image:url(img/zebra_clock_cities.png);
background-size:contain;
background-repeat:no-repeat;
flex-grow:0.5;
min-height:250px;
margin:30px 30px 0 0">
</section>
<section class="page-box">
<p>The face has evolved. Another version uses capital cities around the
perimeter.</p>
<p>This is informative, but wants to be adjustable to choose cities and adapt
for time zones. One could do it manually with an eraser and markers, but
no one will do that. We need the SVG version.</p>
</section>
</section>
<section id="paperclock" class="page horizontal">
<section class="page-box" style="
background-image:url(img/zebra_clock_paper.png);
background-size:contain;
background-repeat:no-repeat;
flex-grow:0.5;
min-height:250px;
margin:30px 30px 0 0">
</section>
<section class="page-box">
<p>The first analog clock was made with a paper plate
and a reversed azimuthal map. Unless I flipped it as well, the zebra
hours had to be offset by 12. Backwards and upside down was exceedingly
confusing.</p>
<p>I also tried sticking a "sun" to the hour hand and flipping the letters
so the current zebra hour meant noonish. This was all wrong as it
drew the clock back into location, when simultaneity is the purpose</p>
<p>It also made it harder to map directly to computer time</p>
</section>
</section>
<section id="hybridclock" class="page horizontal">
<section class="page-box" style="
background-image:url(img/hybrid_clock.jpg);
background-size:contain;
background-repeat:no-repeat;
flex-grow:0.5;
min-height:250px;
margin:30px 30px 0 0">
</section>
<section class="page-box">
<p>This version adds a transparent and movable plate that can
align Zebratime to local time. As a New Yorker, in January,
P:30 is 10:30AM. In a few months it will be 11:30AM</p>
</section>
</section>
<section id="mapclock" class="page horizontal">
<section class="page-box" style="
flex-grow:0.5;
max-height:120px;
margin:30px 30px 0 0">
</section>
<section class="page-box">
<p>This is a widget available in the ZebraTime module. It shows the
up-and-about window as the day evolves. The letters are adjusted
to roughly align with midday on the map.</p>
<p><pre><code>div.append(zebra.mapElement());</code></pre></p>
<p>This doesn't show where sunlight is. To do so one would need to
adjust for the spin of the earth. The top of the map gets a small window
of daylight in winter. But again, not the point. If you live in
Greenland your work time is probably around F through M.</p>
</section>
</section>
<section id="horizonclock" class="page horizontal">
<section class="page-box" style="
background-image:url(img/horizon_clock.png);
background-size:contain;
background-repeat:no-repeat;
flex-grow:0.5;
min-height:250px;
margin:30px 30px 0 0">
</section>
<section class="page-box">
<p>Here we acknowledge that the primary interest is local time, but also introduce
horizon to a 24 hour clock. The hour hand points up when the sun is up, loosely speaking.
6Am and 6PM bracket left and right and the disk in the middle shows zebratime that can be
spun to align your timezone. The swirl in the middle indicates up-and-about time for
the Americas (blue), Asia (red), Europe (green)</p>
</section>
</section>
</section>
<script type="module">
import ZebraTime from "./zebratime.js";
document.addEventListener("DOMContentLoaded", function() {
let headerTime = document.getElementById("header-time");
let zebra = ZebraTime();
headerTime.append(zebra.timeElement());
document.querySelectorAll(".zebra-hour").forEach((e)=>e.textContent = zebra.hour);
document.querySelectorAll(".zulu-hour").forEach((e)=>e.textContent = zebra.date.getUTCHours());
document.querySelectorAll(".zulu-ampm-hour").forEach((e)=>e.textContent = ampm(zebra.date.getUTCHours()));
document.querySelectorAll(".zulu-activity").forEach((e)=>e.textContent = activity(zebra.date.getUTCHours()));
document.querySelectorAll(".local-hour").forEach((e)=>e.textContent = twelve(zebra.date.getHours()));
document.querySelectorAll(".local-ampm-hour").forEach((e)=>e.textContent = ampm(zebra.date.getHours()));
document.querySelectorAll(".computer-time").forEach((e)=>e.textContent = zebra.date.getTime());
// mapclock
let mapElem = zebra.mapElement();
mapElem.style.borderRadius = "12px";
document.querySelector("#mapclock section:first-child").append(mapElem);
});
function twelve(h) {
h = h > 12?h-12:h;
if (h === 0) h = 12;
return h;
}
function ampm(h) {
let ampm = h>11?"PM":"AM";
h = twelve(h);
return h+ampm;
}
function activity(h) {
if (h <= 5) return "night time";
else if (h <= 7) return "morning time";
else if (h <= 8) return "breakfast time";
else if (h <= 12) return "work time";
else if (h <= 13) return "lunch time";
else if (h <= 18) return "work time";
else if (h <= 20) return "dinner time";
else if (h <= 22) return "evening time";
else return "night time";
}
</script>
</body>
</html>