Initial commit — Seth Calendar & Decimal Time clock site
Pages: /, /simple, /decimal, /seth, /calendar, /astro, /convert, /timegov Features: Seth Calendar (10×36 + holidays), decimal time, moon phases, astronomy (sun/moon), bidirectional time converter, Seth date display, leap day split cell in calendar grid.
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* @file
|
||||
* Header and Footer styles
|
||||
*
|
||||
*/
|
||||
|
||||
/* Header Styles */
|
||||
.nist-header {
|
||||
background: #000;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
padding: 10px 16px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nist-header__logo-link {
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.nist-header__logo-icon {
|
||||
fill: #fff;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.nist-header__logo-image {
|
||||
fill: #fff;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
/* Limit main content area width */
|
||||
.nist-main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1200px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Make sure body has no margin or padding when using only this header component */
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Footer styles */
|
||||
|
||||
.nist-footer {
|
||||
background: #333333;
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nist-footer__inner {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1200px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.nist-footer__inner:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.nist-footer {
|
||||
background: #333333;
|
||||
color: white;
|
||||
padding: 10px 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nist-footer a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nist-footer .nist-footer__logo img {
|
||||
/* width: 30%; 300px;*/
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
margin-left: 5%; /*margin-left: 10%;*/
|
||||
margin-right: 5%; /*margin-right: 10%auto;*/
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.nist-footer__menu {
|
||||
clear: both;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.nist-footer__menu.first {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.nist-footer__menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nist-footer__menu-item {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nist-footer__menu-item:after {
|
||||
content: '|';
|
||||
margin-right: 1.6px;
|
||||
display: inherit;
|
||||
position: static;
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nist-footer__menu-item:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.nist-footer__menu-item a {
|
||||
font-weight: normal;
|
||||
margin-right: 6px;
|
||||
white-space: nowrap;
|
||||
padding: 0.5em 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Stick footer to bottom of page
|
||||
* Source: https://css-tricks.com/couple-takes-sticky-footer/
|
||||
*/
|
||||
|
||||
html.nist-footer-bottom,
|
||||
html.nist-footer-bottom body {
|
||||
height: 100%;
|
||||
}
|
||||
html.nist-footer-bottom body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
html.nist-footer-bottom #main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
html.nist-footer-bottom .nist-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
///////////////////////////////////////////////////////////////////////////
|
||||
////////////////////// ANALOG CLOCK FUNCTIONS ///////////////////////////
|
||||
///////////////// Clock code used from W3Schools.com ////////////////////
|
||||
//////// Refer to their site about applicable use of the code ///////////
|
||||
///////////////////////////////////////////////////////////////////////////
|
||||
|
||||
var canvas = document.getElementById("analog-clock");
|
||||
var ctx = canvas.getContext("2d");
|
||||
var radius = canvas.height / 2;
|
||||
ctx.translate(radius, radius);
|
||||
radius = radius * 0.90
|
||||
setInterval(drawClock, 1000);
|
||||
|
||||
// add 0 to single digit time min, sec
|
||||
function checkTime(i) {
|
||||
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
|
||||
return i;
|
||||
}
|
||||
|
||||
function drawClock() {
|
||||
drawFace(ctx, radius);
|
||||
drawNumbers(ctx, radius);
|
||||
drawTime(ctx, radius);
|
||||
}
|
||||
|
||||
function drawFace(ctx, radius) {
|
||||
var grad;
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2*Math.PI);
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fill();
|
||||
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
|
||||
grad.addColorStop(0, '#333');
|
||||
grad.addColorStop(0.5, 'white');
|
||||
grad.addColorStop(1, '#333');
|
||||
ctx.strokeStyle = grad;
|
||||
ctx.lineWidth = radius*0.1;
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function drawNumbers(ctx, radius) {
|
||||
var ang;
|
||||
var num;
|
||||
ctx.font = radius*0.15 + "px arial";
|
||||
ctx.textBaseline="middle";
|
||||
ctx.textAlign="center";
|
||||
for(num = 1; num < 13; num++){
|
||||
ang = num * Math.PI / 6;
|
||||
ctx.rotate(ang);
|
||||
ctx.translate(0, -radius*0.85);
|
||||
ctx.rotate(-ang);
|
||||
ctx.fillText(num.toString(), 0, 0);
|
||||
ctx.rotate(ang);
|
||||
ctx.translate(0, radius*0.85);
|
||||
ctx.rotate(-ang);
|
||||
}
|
||||
}
|
||||
|
||||
function drawTime(ctx, radius){
|
||||
|
||||
var deviceClock = new Date();
|
||||
var hour = deviceClock.getHours();
|
||||
var minute = deviceClock.getMinutes();
|
||||
var second = deviceClock.getSeconds();
|
||||
|
||||
var ampm = hour >= 12 ? 'P.M.' : 'A.M.';
|
||||
hour = hour % 12;
|
||||
hour = hour ? hour : 12; // the hour '0' should be '12'
|
||||
//minute = minute < 10 ? '0'+minute : minute;
|
||||
|
||||
// CHECKTIME FUNC ADDS LEADING '0' if <10
|
||||
hour = checkTime(hour);
|
||||
minute = checkTime(minute);
|
||||
second = checkTime(second);
|
||||
|
||||
//digital time display
|
||||
var myDigTime = hour + ":" + minute +":" + second;
|
||||
document.getElementById('myTime').innerHTML = myDigTime + ' ' + ampm;
|
||||
|
||||
var dd = deviceClock.getDate();
|
||||
var mm = deviceClock.getMonth();
|
||||
mm++; //Increment because Jan is month 0
|
||||
dd = checkTime(dd);
|
||||
mm = checkTime(mm);
|
||||
var yyyy = deviceClock.getFullYear();
|
||||
|
||||
var todaysDate = mm + '/' + dd + '/' + yyyy;
|
||||
document.getElementById("myDate").innerHTML = "Today: " + todaysDate;
|
||||
|
||||
// OFFSET
|
||||
var utcOffset = deviceClock.getTimezoneOffset()/60;
|
||||
if (utcOffset > 0) {
|
||||
utcOffset = "(UTC-" + utcOffset + ")";
|
||||
} else {
|
||||
utcOffset = "(UTC+" + Math.abs(utcOffset) + ")";
|
||||
};
|
||||
document.getElementById("myTimeTitle").innerHTML = utcOffset;
|
||||
|
||||
//hour
|
||||
hour=hour%12;
|
||||
hour=(hour*Math.PI/6)+
|
||||
(minute*Math.PI/(6*60))+
|
||||
(second*Math.PI/(360*60));
|
||||
drawHand(ctx, hour, radius*0.5, radius*0.07);
|
||||
//minute
|
||||
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
|
||||
drawHand(ctx, minute, radius*0.8, radius*0.07);
|
||||
// second
|
||||
second=(second*Math.PI/30);
|
||||
drawHand(ctx, second, radius*0.9, radius*0.02);
|
||||
}
|
||||
|
||||
function drawHand(ctx, pos, length, width) {
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = width;
|
||||
ctx.lineCap = "round";
|
||||
ctx.moveTo(0,0);
|
||||
ctx.rotate(pos);
|
||||
ctx.lineTo(0, -length);
|
||||
ctx.stroke();
|
||||
ctx.rotate(-pos);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
// ONLOAD OPERATIONS FOR THE SITE
|
||||
window.onload = function() {
|
||||
|
||||
/* PARSE THE URL FOR 12/24 VARIABLE*/
|
||||
var getT = location.search;
|
||||
var tArr = getT.split("=");
|
||||
var t = tArr[1];
|
||||
|
||||
// CREATE A VAR FOR THE CHECKBOX
|
||||
var twentyFour = document.getElementById("twenty-four");
|
||||
|
||||
// CHECK VALUE OF 12/24 URL VAR "t" AND SET CHECKBOX ACCORDINGLY
|
||||
if (t === "24") {
|
||||
twentyFour.checked = true;
|
||||
} else {
|
||||
// DEFAULT TO 12HR DISPLAY
|
||||
twentyFour.checked = false;
|
||||
}
|
||||
|
||||
var noMoreAlerts = false;
|
||||
// NOTIFICATION BOX FOR BOOKMARKING 24-HOUR SETTINGS PAGE
|
||||
var twentyFour = document.getElementById("twenty-four");
|
||||
twentyFour.addEventListener("click", function(event) {
|
||||
var hourLabelDiv = document.getElementsByClassName("am-pm")[0];
|
||||
var url = window.location.toString();
|
||||
if(timeDotGov.data.twentyFour()) {
|
||||
window.history.replaceState(url, "", "/timegov/?t=24");
|
||||
if (!noMoreAlerts) {
|
||||
alert("Bookmarking this page will save your preference for 24-hour time display.");
|
||||
}
|
||||
noMoreAlerts = true;
|
||||
} else {
|
||||
window.history.replaceState(url, "", "/timegov/");
|
||||
}
|
||||
timeDotGov.clockController.handleonrefresh(new Date());
|
||||
|
||||
});
|
||||
|
||||
//? timeZoneChange = function(event) {
|
||||
//? timeDotGov.clockController.getnewOffset(event.target.value);
|
||||
//? }
|
||||
|
||||
// LOAD DST DATES AND LEAP DATE
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.open("GET", "/api/timegov/auxdata.xml", false); // false for synchronous request
|
||||
xmlHttp.send(null);
|
||||
timeDotGov.auxdata = xmlHttp.responseText;
|
||||
|
||||
timeDotGov.clockController.auxdata();
|
||||
|
||||
timeDotGov.clockController.checkservertime();
|
||||
document.getElementById('responseTime').innerHTML = timeDotGov.data.zoneOffset;
|
||||
|
||||
// SET REFRESH RATE TO CHECK FOR TOP OF NEW SECOND, SO THE DISPLAY DOES NOT HAVE TO BE REFRESHED MORE THAN NECESSARY
|
||||
setInterval(function() {
|
||||
if(timeDotGov.data.currentTime) {
|
||||
timeDotGov.clockController.runningclocks();
|
||||
}
|
||||
}, 20); // 20 milliseconds
|
||||
|
||||
// FUNCTION REFRESHES PAGE EVERY 10 MIN
|
||||
setInterval(function() {
|
||||
location.reload();
|
||||
}, 600000);
|
||||
|
||||
};
|
||||
|
||||
@@ -0,0 +1,363 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="title" content="Atermiter-X79 Official Time" />
|
||||
<meta property="og:site_name" content="Atermiter-X79" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://clock.atermiter-x79.xyz/timegov/" />
|
||||
<meta property="og:title" content="Official U.S. Time | Atermiter-X79" />
|
||||
<meta property="og:description" content="Self-hosted official U.S. time style display with U.S. map and synchronized clocks." />
|
||||
<meta property="og:image" content="/timegov/img/map-elements/united-states-map.svg" />
|
||||
<meta name="dcterms.title" content="Atermiter-X79 Official Time" />
|
||||
<meta name="description" content="Self-hosted official U.S. time display with synchronized clock data." />
|
||||
<meta name="dcterms.subject" content="Working with industry and science to advance innovation and improve quality of life." />
|
||||
<meta name="google-site-verification" content="" />
|
||||
<meta name="dcterms.type" content="text" />
|
||||
<meta name="dcterms.format" content="text/html" />
|
||||
<meta name="dcterms.identifier" content="https://clock.atermiter-x79.xyz/timegov/" />
|
||||
<meta name="twitter:title" content="Official U.S. Time | Atermiter-X79" />
|
||||
<meta name="twitter:description" content="Self-hosted official U.S. time style display with synchronized clocks." />
|
||||
<meta name="twitter:image" content="/img/map-elements/og_map.png" />
|
||||
|
||||
<title>Atermiter-X79 Official Time</title>
|
||||
<link rel="shortcut icon" href="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" />
|
||||
<link rel="stylesheet" href="css/main.css" />
|
||||
<link rel="stylesheet" href="css/NIST-styles.css" />
|
||||
|
||||
|
||||
<!-- FUNC FOR TOP BAR INFO BTN -->
|
||||
<script type="text/javascript">
|
||||
function info_exp(id, id2) {
|
||||
var n = document.getElementById(id);
|
||||
if (n.style.display != 'none') {
|
||||
n.style.display = 'none';
|
||||
document.getElementById(id2).setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
n.style.display = 'block';
|
||||
document.getElementById(id2).setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
|
||||
<!-- TOP GREY BAR -->
|
||||
<div id="top-grey">
|
||||
<div class="inner">
|
||||
<img src="img/us_flag_small.png" class="left gap" alt="U.S. Flag"><span class="left gap">Official self-hosted time service</span> <div id="info-btn"><a href="index.html#" onclick="info_exp('top-grey-exp', 'arrow');">Service details <span id="arrow" aria-expanded="false"></span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXPANDED TOP GREY BAR -->
|
||||
<div id="top-grey-exp" style="display:none;">
|
||||
<div class="inner">
|
||||
<div class="col-50">
|
||||
<div class="pad-4">
|
||||
<img src="img/icon-dot-gov.svg" alt="icon dot gov" class="img10"><br>
|
||||
<strong>Self-hosted service notice.</strong>
|
||||
<p class="no-marg">This is a privately hosted clock service designed to mirror the time.gov experience in a homelab environment.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<div class="pad-4">
|
||||
<img src="img/icon-https.svg" alt="icon https" class="img10"><br>
|
||||
<strong>Encrypted transport.</strong>
|
||||
<p class="no-marg">The <strong>https://</strong> indicates encrypted traffic between your browser and this host.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BLACK TITLE BAR AREA -->
|
||||
<div id="title-area">
|
||||
<div class="inner">
|
||||
<center>
|
||||
<span class="title"><img src="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" id="logo" alt="Atermiter-X79"/>OFFICIAL U.S. TIME</span>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ANNOUNCEMENT GREY BAR -->
|
||||
<div id="callout-bar"><p></p></div> <!-- Blank between <p> </p> unless there is an upcoming announcement -->
|
||||
|
||||
</header>
|
||||
|
||||
<!-- MAIN CONTENT AREA -->
|
||||
<div id="content">
|
||||
|
||||
<!-- LEFT COLUMN -->
|
||||
<div id="col-left">
|
||||
<div class="pad-2">
|
||||
|
||||
<div id="noncontTitle">Non-Contiguous U.S. and Territories</div>
|
||||
|
||||
<div id="ak-col">
|
||||
<!-- ALASKA TIME -->
|
||||
<div class="clock-box blue dst-clock">
|
||||
<div class="title">Alaska <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">AK<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">9</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=9></time></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ALASKA MAP GRAPHIC -->
|
||||
<img src="img/map-elements/alaska.svg" class="side-img" alt="Alaska Map">
|
||||
|
||||
<!-- ALEUTIAN TIME -->
|
||||
<div class="clock-box blue dst-clock">
|
||||
<div class="title">Aleutian <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">HA<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">10</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=10></time></div>
|
||||
</div>
|
||||
<!-- <div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hi-col">
|
||||
<!-- HAWAIIAN TIME -->
|
||||
<div class="clock-box purple">
|
||||
<div class="title">Hawaii Standard Time</div>
|
||||
<div class="sub-title">HST (UTC-10)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=10></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
|
||||
<!-- HAWAII MAP GRAPHIC -->
|
||||
<img src="img/map-elements/hawaii.svg" class="side-img" alt="Hawaii Map">
|
||||
|
||||
<!-- SAMOA TIME -->
|
||||
<div class="clock-box dk-blue">
|
||||
<div class="title">Samoa Standard Time</div>
|
||||
<div class="sub-title">SST (UTC-11)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=11></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
|
||||
<!-- CHAMORRO TIME -->
|
||||
<div class="clock-box dk-blue">
|
||||
<div class="title">Chamorro Standard Time</div>
|
||||
<div class="sub-title">CHST (UTC+10)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=-10></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
|
||||
<!-- PUERTO RICO LT COL-->
|
||||
<div id="pr-lt" class="pad-2 margTop15">
|
||||
<div class="clock-box dk-blue">
|
||||
<div class="title">Atlantic Standard Time</div>
|
||||
<div class="sub-title"><b>Puerto Rico / US Virgin Islands</b></div>
|
||||
<div class="sub-title">AST (UTC-4)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=4></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div> </div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN COLUMN -->
|
||||
<div id="col-main">
|
||||
<div class="pad-2">
|
||||
<div style="height: 0px;"> </div>
|
||||
|
||||
<!-- ROW FOR MAINLAND US CLOCK AREA -->
|
||||
<div class="main-top">
|
||||
|
||||
<!-- PACIFIC TIME -->
|
||||
<div class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box orange dst-clock">
|
||||
<div class="title">Pacific <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">P<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">8</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=8 />SYNCHRONIZING</time></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MOUNTAIN TIME -->
|
||||
<div class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box green dst-clock">
|
||||
<div class="title">Mountain <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">M<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">7</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=7>SYNCHRONIZING</time></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CENTRAL TIME -->
|
||||
<div class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box yellow dst-clock">
|
||||
<div class="title">Central <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">C<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">6</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=6>SYNCHRONIZING</time></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EASTERN TIME -->
|
||||
<div class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box red dst-clock">
|
||||
<div class="title">Eastern <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">E<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">5</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=5>SYNCHRONIZING</time></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<!-- END TOP ROW -->
|
||||
|
||||
|
||||
<div id="mainland">
|
||||
<!-- ARIZONA/MOUNTAIN STANDARD TIME -->
|
||||
<div id="az-clock" class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box green">
|
||||
<div class="title">Arizona Mountain<br>Standard Time</div>
|
||||
<div class="sub-title">MST (UTC-7)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=7></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BEGIN MAIN MAP AREA -->
|
||||
<img src="img/map-elements/united-states-map.svg" class="full-img" alt="United States Time Zone Map">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN -->
|
||||
<div id="col-right">
|
||||
<div class="pad-4">
|
||||
|
||||
<!-- 24HR CHECKBOX -->
|
||||
<div class='hours-wrapper'>
|
||||
<div class='am-pm'></div>
|
||||
<input id='twenty-four' type='checkbox' class="css-checkbox">
|
||||
<label class='css-label' for='twenty-four'>24-Hour Clock Display</label>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div id="clock-utc">
|
||||
<p class="text-xs">Coordinated Universal Time (UTC)</p>
|
||||
<div class="clock text-lg"><time id="timeUTC"></time></div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
|
||||
</div>
|
||||
<p class="sub-title ital">UTC is always displayed as a 24-hour clock.</p>
|
||||
|
||||
<!-- MAIN CLOCK AREA -->
|
||||
<div id="main-time-area">
|
||||
<p>Your Device's Clock <span id="myTimeTitle">UTC-0</span> <br>
|
||||
<div id='myDate'></div>
|
||||
<canvas id="analog-clock" width=200 height=200></canvas>
|
||||
<br>
|
||||
<span id="myTime"></span><br><br>
|
||||
Your clock is off by: <br><span id="realTimeDif"></span> s</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- PUERTO RICO RT COL-->
|
||||
<div id="pr-rt" class="pad-2 margTop15">
|
||||
<div class="clock-box dk-blue">
|
||||
<div class="title">Atlantic Standard Time</div>
|
||||
<div class="sub-title"><b>Puerto Rico / US Virgin Islands</b></div>
|
||||
<div class="sub-title">AST (UTC-4)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=4></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rightColBot">
|
||||
<a href="/simple/">Simple View</a>
|
||||
<a href="/api/time">Time API</a>
|
||||
<div class="imgSmText">
|
||||
<img src="img/stripes.svg" class="striped-box" alt="Hashed image for Daylight Saving Time not observed"> = DAYLIGHT SAVING TIME NOT OBSERVED
|
||||
<p>Clocks are corrected for network delay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<footer class="nist-footer">
|
||||
<div class="nist-footer__inner">
|
||||
<div class="nist-footer__menu" role="navigation">
|
||||
<ul>
|
||||
<li class="nist-footer__menu-item"><a href="/timegov/">Map View</a></li>
|
||||
<li class="nist-footer__menu-item"><a href="/simple/">Simple View</a></li>
|
||||
<li class="nist-footer__menu-item"><a href="/api/time">JSON Time API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nist-footer__logo">
|
||||
<center><img src="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" alt="Atermiter-X79 logo" /><p>Atermiter-X79 Official Time</p></center>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class='time-zone-container' style='display:none'>
|
||||
<div class='dropdown-container'>
|
||||
<select id='dst-time-zone'>
|
||||
</select>
|
||||
<select id='no-dst-time-zone'>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="responseTime"></div>
|
||||
<script src="scripts/jquery-3.7.1.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript" src="scripts/analogClock.js"></script>
|
||||
<script type="text/javascript" src="scripts/application.js"></script>
|
||||
<script type="text/javascript" src="scripts/zzz__bd08fcbbc8bd600a5f9e994be2de69f7cb26b9f4.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,550 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
|
||||
}
|
||||
|
||||
.inner {
|
||||
padding: 0 5%;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.gap {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#top-grey {
|
||||
padding-bottom: .25rem;
|
||||
padding-top: .25rem;
|
||||
min-height: 0;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
#arrow {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#arrow[aria-expanded=false] {
|
||||
background-image: url(../img/arrow-down.svg);
|
||||
}
|
||||
#arrow[aria-expanded=true] {
|
||||
background-image: url(../img/arrow-up.svg);
|
||||
}
|
||||
|
||||
#top-grey-exp {
|
||||
background-color: #f0f0f0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.col-50 {
|
||||
width: 50%;
|
||||
float: left;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.no-marg {
|
||||
margin: 0;
|
||||
}
|
||||
.pad-4 {
|
||||
padding: 4%;
|
||||
}
|
||||
.pad-2 {
|
||||
padding: 2%;
|
||||
}
|
||||
#col-main .pad-2 {
|
||||
padding: 2% 2% 0px 2%;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
.img10 {
|
||||
width: 10%;
|
||||
height: auto;
|
||||
}
|
||||
#title-area {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 4px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.55em;
|
||||
font-weight: 700;
|
||||
}
|
||||
#logo {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-right: 12px;
|
||||
vertical-align: -0.12em;
|
||||
}
|
||||
#logo2 { /* added for USNO logo and increased margins */
|
||||
width: 44px;
|
||||
height: auto;
|
||||
margin-left: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#clock-utc {
|
||||
border: solid 1px #000;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.ital {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
#myDate {
|
||||
margin-top: 15px;
|
||||
}
|
||||
#myTime {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.imgSmText {
|
||||
font-size: 0.7em;
|
||||
line-height: 1.5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#rightColBot a {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: #000;
|
||||
}
|
||||
#rightColBot {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #000;
|
||||
}
|
||||
.text-xs {
|
||||
font-size: 0.8em;
|
||||
margin: 5px 10px 0;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: 1.8em;
|
||||
font-weight: bold;
|
||||
margin: 0 10px;
|
||||
}
|
||||
#callout-bar {
|
||||
color: #fff;
|
||||
background-color: #999;
|
||||
padding: .25rem 0;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
#callout-bar p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content{
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
#col-left {
|
||||
width: 15%;
|
||||
background-color: #d9e8f6;
|
||||
display: table-cell;
|
||||
}
|
||||
#col-main {
|
||||
width: 70%;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#col-right {
|
||||
width: 15%;
|
||||
background-color: #e2e2e2;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
}
|
||||
.col-25 {
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#noncontTitle,
|
||||
#contTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pr-lt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
STYLES FOR CLOCK AREAS
|
||||
*/
|
||||
.clock-box {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#col-main .clock-box {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.clock-box .title {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
/*color: #000000 !important;*/
|
||||
}
|
||||
.sub-title {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.time-display {
|
||||
display: table;
|
||||
width: 90%;
|
||||
}
|
||||
.color-area {
|
||||
width: 5%;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
background-color: #000;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 1.4em;
|
||||
padding: 5px;
|
||||
display: table-cell;
|
||||
}
|
||||
.side-img {
|
||||
max-width: 90%;
|
||||
display: block;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
.margTop15 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
#twenty-hour {
|
||||
float: left;
|
||||
}
|
||||
#main-time-area {
|
||||
background-color: #000;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.full-img {
|
||||
width: 94.5%;
|
||||
display: block;
|
||||
margin: 0 2.3%;
|
||||
}
|
||||
#mainland {
|
||||
position: relative;
|
||||
}
|
||||
#az-clock {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
bottom: 0;
|
||||
left: 5%;
|
||||
}
|
||||
.hours-wrapper {
|
||||
padding: 5px;
|
||||
background: #eee;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.striped-box {
|
||||
max-height: .75rem;
|
||||
max-width: .75rem;
|
||||
}
|
||||
#analog-clock {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#responseTime {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* CUSTOM CHECKBOX STYLES */
|
||||
input[type=checkbox].css-checkbox {
|
||||
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
|
||||
}
|
||||
|
||||
input[type=checkbox].css-checkbox + label.css-label {
|
||||
padding-left:20px;
|
||||
height:15px;
|
||||
display:inline-block;
|
||||
line-height:15px;
|
||||
background-repeat:no-repeat;
|
||||
background-position: 0 0;
|
||||
vertical-align:middle;
|
||||
cursor:pointer;
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
input[type=checkbox].css-checkbox:checked + label.css-label {
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
|
||||
label.css-label {
|
||||
background-image:url(../img/csscheckbox.png);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.no-saving {
|
||||
background-image: url(../img/diagonal-white.png);
|
||||
}
|
||||
.blue .color-area {
|
||||
background-color: #0060a8;
|
||||
}
|
||||
.blue .title {
|
||||
color: #0060a8;
|
||||
}
|
||||
.purple .color-area {
|
||||
background-color: #aa378d;
|
||||
}
|
||||
.purple .title {
|
||||
color: #aa378d;
|
||||
}
|
||||
.dk-blue .color-area {
|
||||
background-color: #1b0459;
|
||||
}
|
||||
.dk-blue .title {
|
||||
color: #1b0459;
|
||||
}
|
||||
.orange .color-area {
|
||||
background-color: #d66733;
|
||||
}
|
||||
.orange .title {
|
||||
color: #d66733;
|
||||
}
|
||||
.green .color-area {
|
||||
background-color: #63a952;
|
||||
}
|
||||
.green .title {
|
||||
color: #63a952;
|
||||
}
|
||||
.yellow .color-area {
|
||||
background-color: #e6a730;
|
||||
}
|
||||
.yellow .title {
|
||||
color: #e6a730;
|
||||
}
|
||||
.red .color-area {
|
||||
background-color: #cc2131;
|
||||
}
|
||||
.red .title {
|
||||
color: #cc2131;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ///////////////////////////////////////////////////////////
|
||||
////////////////////// RESPONSIVE STYLES //////////////////
|
||||
///////////////////////////////////////////////////////////
|
||||
*/
|
||||
|
||||
@media only screen and (min-width : 300px) and (max-width : 1260px) {
|
||||
|
||||
.title {
|
||||
font-size: 2.0em; /* was 1.8 */
|
||||
}
|
||||
#content {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
display: -webkit-flex; /* Safari */
|
||||
-webkit-flex-flow: wrap; /* Safari 6.1+ */
|
||||
}
|
||||
|
||||
#col-main {
|
||||
width: 100%;
|
||||
display: block;
|
||||
order: 1;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#col-left {
|
||||
width: 70%;
|
||||
display: block;
|
||||
order: 2;
|
||||
}
|
||||
#noncontTitle, #contTitle {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#col-right {
|
||||
width: 30%;
|
||||
display: block;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#main-time-area {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
#ak-col, #hi-col {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#pr-lt {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#pr-rt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rightColBot {
|
||||
border-top: 1px solid #000;
|
||||
margin-top: 30px;
|
||||
position: relative;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.clock-box .title {
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
input[type=checkbox].css-checkbox + label.css-label {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.imgSmText {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 740px) {
|
||||
|
||||
.title {
|
||||
font-size: 2.1em; /* was 2.3 */
|
||||
}
|
||||
#content {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
display: -webkit-flex; /* Safari */
|
||||
-webkit-flex-flow: wrap; /* Safari 6.1+ */
|
||||
}
|
||||
|
||||
#col-main {
|
||||
width: 100%;
|
||||
display: block;
|
||||
order: 1;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#col-left {
|
||||
width: 70%;
|
||||
display: block;
|
||||
order: 2;
|
||||
}
|
||||
#noncontTitle, #contTitle {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#col-right {
|
||||
width: 30%;
|
||||
display: block;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#main-time-area {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
#ak-col, #hi-col {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#pr-lt {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#pr-rt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rightColBot {
|
||||
border-top: 1px solid #000;
|
||||
margin-top: 30px;
|
||||
position: relative;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.clock-box .title {
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
input[type=checkbox].css-checkbox + label.css-label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.imgSmText {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ///////////////////////////////////////////////////////////
|
||||
/////// STYLES AND DESIGN USED WITH PERMISSION /////////
|
||||
///////////////// MORGANFEBREY.COM ////////////////////////
|
||||
///////////////////////////////////////////////////////////
|
||||
*/
|
||||
|
||||
@@ -0,0 +1,370 @@
|
||||
|
||||
timeDotGov = {};
|
||||
timeDotGov.clock = {};
|
||||
timeDotGov.clockController = {};
|
||||
timeDotGov.clockController.dsClock = {}
|
||||
|
||||
timeDotGov.data = {
|
||||
"then": null,
|
||||
"serverTime": null,
|
||||
"responseTime": null,
|
||||
"RThalf": null,
|
||||
"realTimeDif": null,
|
||||
"requestTime": null,
|
||||
"leapsecond": null,
|
||||
"dststart": null,
|
||||
"dstend": null,
|
||||
"currYear": null,
|
||||
"dstDates": null,
|
||||
"leapDate": null,
|
||||
"clockinstances": [],
|
||||
"leapFlag": null,
|
||||
"leapsec60": null,
|
||||
"myhour0": "0",
|
||||
"myhour1": "0",
|
||||
"mysec0": "0",
|
||||
"mysec1": "0",
|
||||
"currentTime": null,
|
||||
"twentyFour": function() {
|
||||
twentyFour = document.getElementById("twenty-four");
|
||||
return twentyFour.checked;
|
||||
}
|
||||
}
|
||||
|
||||
var offsetCheck = true;
|
||||
var daylightTitles = false;
|
||||
|
||||
// CREATE ARRAY THAT WILL STORE WHICH CLOCK NUMS HAVE BEEN UPDATED
|
||||
var dstClocksUpdated = [];
|
||||
timeDotGov.clockController.getParameterByName = function(name) {
|
||||
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
||||
results = regex.exec(location.search);
|
||||
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
|
||||
}
|
||||
|
||||
timeDotGov.clockController.getleapdate = function() {
|
||||
var leap = new Date();
|
||||
var temp1 = timeDotGov.data.leapdate.split(" ");
|
||||
var leapdateYear = temp1[0];
|
||||
var leapdateMonth = temp1[1];
|
||||
|
||||
leapdateMonth = leapdateMonth - 1; // month convention = 0-11 (Jan = 0)
|
||||
|
||||
var leapdateDay = temp1[2];
|
||||
|
||||
leap.setUTCFullYear(leapdateYear, leapdateMonth, leapdateDay);
|
||||
leap.setUTCHours(0, 0, 0, 0);
|
||||
|
||||
timeDotGov.data.leapsecond = leap.getTime();
|
||||
}
|
||||
|
||||
// GET TIME FROM SERVER
|
||||
timeDotGov.clockController.dsClock.doRequest = function() {
|
||||
d = new Date();
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
////// USE OF THIS .CGI BY OUTSIDE SITES OR APPLICATIONS IS STRICTLY PROHIBITED ////
|
||||
// OR USING THE TIME FROM THIS SITE IN ANY WAY FOR OTHER SITES IS ALSO PROHIBITED //
|
||||
///////////////////////////////////////////////////////////////////////////////////
|
||||
xmlHttp.open("GET", "/zzz__2fbc6c3300df7e4483acd44c5044098a9fcc61d6.cgi?disablecache=" + d.getTime(), false);
|
||||
xmlHttp.send(null);
|
||||
return xmlHttp.responseText;
|
||||
}
|
||||
|
||||
// GET t1, t2, t3, t4 in doRequest AND CALCULATE DELAYS IN doData
|
||||
timeDotGov.clockController.checkservertime = function() {
|
||||
var o = new Object();
|
||||
var d = new Date();
|
||||
var currentTimeObj = new Date();
|
||||
timeDotGov.data.requestTime = currentTimeObj.getTime();
|
||||
timeDotGov.data.currentTime = timeDotGov.clockController.dsClock.doRequest(); // GET NIST TIME FROM SERVER
|
||||
timeDotGov.clockController.doData();
|
||||
}
|
||||
// PARSE DATA FROM AUXDATA.XML
|
||||
timeDotGov.clockController.doAuxData = function() {
|
||||
parser = new DOMParser();
|
||||
xmlDoc = parser.parseFromString(timeDotGov.auxdata, "text/xml");
|
||||
timeDotGov.data.curryear = xmlDoc.getElementsByTagName("currYear")[0].childNodes[0].nodeValue;
|
||||
timeDotGov.data.dstdates = xmlDoc.getElementsByTagName("DstDates")[0].childNodes[0].nodeValue;
|
||||
timeDotGov.data.leapdate = xmlDoc.getElementsByTagName("LeapDate")[0].childNodes[0].nodeValue;
|
||||
}
|
||||
|
||||
timeDotGov.clockController.getDSTdates = function() {
|
||||
var dstStartDate = new Date();
|
||||
var dstEndDate = new Date();
|
||||
var temp=timeDotGov.data.dstdates.split(" "); // makes an array of the string elements
|
||||
var startmonth = temp[0];
|
||||
|
||||
startmonth = startmonth - 1; // to follow js convention of month = 0-11 (Jan = 0)
|
||||
|
||||
var startday = temp[1];
|
||||
var endmonth = temp[2];
|
||||
|
||||
endmonth = endmonth - 1;
|
||||
|
||||
var endday = temp[3];
|
||||
|
||||
dstStartDate.setUTCFullYear(timeDotGov.data.curryear, startmonth, startday);
|
||||
dstStartDate.setUTCHours(2, 0, 0, 0);
|
||||
dstEndDate.setUTCFullYear(timeDotGov.data.curryear, endmonth, endday);
|
||||
dstEndDate.setUTCHours(1, 0, 0, 0);
|
||||
timeDotGov.data.dstStart = dstStartDate.getTime();
|
||||
timeDotGov.data.dstEnd = dstEndDate.getTime();
|
||||
|
||||
}
|
||||
|
||||
timeDotGov.clockController.auxdata = function() {
|
||||
this.doAuxData();
|
||||
this.getDSTdates();
|
||||
this.getleapdate();
|
||||
}
|
||||
|
||||
timeDotGov.clockController.doData = function() {
|
||||
|
||||
var parser = new DOMParser();
|
||||
var xmlDoc = parser.parseFromString(timeDotGov.data.currentTime, "text/xml");
|
||||
|
||||
var t2 = xmlDoc.getElementsByTagName("timestamp")[0].getAttribute("time2");
|
||||
var t3 = xmlDoc.getElementsByTagName("timestamp")[0].getAttribute("time3");
|
||||
var serverDelay = Math.round((t3 - t2) / 1000); // server delay in milliseconds
|
||||
timeDotGov.data.serverTime = Math.round(t3/1000); // Server time in milliseconds
|
||||
|
||||
var currentTimeObj2 = new Date();
|
||||
timeDotGov.data.responseTime = currentTimeObj2.getTime(); // t4
|
||||
timeDotGov.data.RThalf = ((timeDotGov.data.responseTime - timeDotGov.data.requestTime) - serverDelay) / 2; // (t4 - t1) - (t3 -t2) NTP EQ
|
||||
timeDotGov.data.realTimeDif = timeDotGov.data.serverTime - timeDotGov.data.responseTime; // t3-t4 used for correction to local clock for official time
|
||||
|
||||
////////////////////////////////////////////////////////////
|
||||
// USE OFFSET CHECK VAR TO ONLY CHECK CLIENT CLOCK ONCE ///
|
||||
////////////////////////////////////////////////////////////
|
||||
if (offsetCheck) {
|
||||
// ROUND TO MILLISECONDS - USE (* -1) to invert timediff pos/neg display value
|
||||
var diff = (timeDotGov.data.realTimeDif/1000) * -1;
|
||||
var diffDisplay = diff.toFixed(3);
|
||||
if (diffDisplay > 0 ) {
|
||||
diffDisplay = "+" + diffDisplay;
|
||||
}
|
||||
document.getElementById("realTimeDif").innerHTML = diffDisplay;
|
||||
offsetCheck = false;
|
||||
}
|
||||
|
||||
timeDotGov.clockController.runningclocks();
|
||||
timeDotGov.data.leapFlag = "false";
|
||||
} // END OF doData FUNCTION
|
||||
|
||||
// REFRESHES CLOCKS AT THE TOP OF EACH *ACTUAL* SECOND
|
||||
timeDotGov.clockController.runningclocks = function() {
|
||||
var deviceClock = new Date();
|
||||
var fractionalZone =(Math.abs((deviceClock.getTimezoneOffset()/60))) % 1; // IF CLIENT IS IN A ZONE WITH A FRACTIONAL HOUR, MAKE ADJUSTMENT (MODULO 1 TO GET THE FRACTIONAL HOUR)
|
||||
if (fractionalZone != 0) {
|
||||
fractionalZone = (1 - fractionalZone); // SUBTRACT FROM 1 TO GET VALID CORRECTION FOR 30 AND 45 MIN ZONES
|
||||
}
|
||||
var fractionalZoneMilli = fractionalZone * 3600000; // CONVERT PARTIAL HOUR TO MILLISECONDS, TO BE SUBTRACTED FROM ADJUSTED TIME
|
||||
var s = new Date(); // convert PC time and delay back to seconds (this is UTC)
|
||||
|
||||
s.setTime(s.getTime() + timeDotGov.data.realTimeDif + timeDotGov.data.RThalf - fractionalZoneMilli); // CORRECT FOR PC CLOCK ERROR, HALF NETWORK DELAY AND CLIENT IN PARTIAL TIME ZONE
|
||||
|
||||
var sec = s.getSeconds();
|
||||
if (sec != timeDotGov.data.previousSec) { // call handleonrefresh as soon as you see a new second
|
||||
timeDotGov.data.previousSec = sec;
|
||||
timeDotGov.clockController.handleonrefresh(s);
|
||||
}
|
||||
}
|
||||
|
||||
// CHECK IF USER CHANGED CLOCK or IF NEW DST STATE or LEAP SECOND, THEN REFRESH ALL CLOCKS
|
||||
timeDotGov.clockController.handleonrefresh = function(s) {
|
||||
//var mins = s.getMinutes();
|
||||
var now = s.getTime(); // convert time to ms since epoch (UTC)
|
||||
//if (0 <= mins < 30) {
|
||||
// now = now + fractionalZoneMilli;
|
||||
//} else {
|
||||
// now = now - fractionalZoneMilli;
|
||||
//}
|
||||
|
||||
if (timeDotGov.data.then == null) {
|
||||
timeDotGov.data.then = now; // if it's the first round, don't let it fail
|
||||
}
|
||||
|
||||
var DidUserChangeClock = Math.abs(now - timeDotGov.data.then);
|
||||
if (DidUserChangeClock >= 2000) { // if pc clock changed then reset (|now-then| should only be 1 s)
|
||||
location.reload();
|
||||
timeDotGov.data.then = now;
|
||||
} else {
|
||||
timeDotGov.data.then = now;
|
||||
}
|
||||
|
||||
if (timeDotGov.data.leapsecond / 1000 == Math.floor(now / 1000)) {
|
||||
timeDotGov.data.leapFlag = "true"
|
||||
}
|
||||
|
||||
var clocks = document.getElementsByClassName("clock");
|
||||
|
||||
var clockNum; // SET TO VALUE OF 'i' IN THE FOLLOWING LOOP TO REPRESENT EACH CLOCK INSTANCE
|
||||
|
||||
// SET ALL OF THE CLOCKS BY CALLING setCurrentTime FOR EACH CLOCK INSTANCE
|
||||
for(var i =0; i < clocks.length; i++ ){
|
||||
|
||||
var clock = clocks[i].getElementsByTagName("time")[0];
|
||||
var zoneOffset = clocks[i].getElementsByTagName("time")[0].getAttribute("zoneOffset") || 0;
|
||||
// GIVE VAR CLOCKNUM VALUE OF i
|
||||
clockNum = i;
|
||||
clock.innerHTML = timeDotGov.clock.setCurrentTime(timeDotGov.data.clockinstances[i], now, timeDotGov.data.twentyFour(), timeDotGov.data.dstStart, timeDotGov.data.dstEnd, zoneOffset, timeDotGov.data.leapFlag, timeDotGov.data.leapsec60, timeDotGov.data.RThalf, clockNum);
|
||||
document.getElementById('timeUTC').innerHTML = timeDotGov.clock.setCurrentTime(timeDotGov.data.clockinstances[i], now, true, timeDotGov.data.dstStart, timeDotGov.data.dstEnd, 0, timeDotGov.data.leapFlag, timeDotGov.data.leapsec60, timeDotGov.data.RThalf, 999); // LAST VAR IS CLOCKNUM, PASSING AS '999' TO AVOID DUPLICATE 'i' VARIABLE VALUE SEND TO SETCURRENTTIME FUNCTION
|
||||
}
|
||||
|
||||
} // END OF handleonrefresh FUNCTION
|
||||
|
||||
// CREATES CLOCK DIGITS AND DST/ST LABELS FOR EACH CLOCK INSTANCE
|
||||
timeDotGov.clock.setCurrentTime = function(clock, now, twentyFour, dstStart, dstEnd, zoneOffset, leapFlag, leapsec60, RThalf, clockNum) {
|
||||
|
||||
var displayTime = new Date();
|
||||
now = (now - (zoneOffset * 3600000));
|
||||
|
||||
if (leapFlag == "true"){
|
||||
now = now - 1000; // if leap has occurred, show (seconds - 1) until next sync
|
||||
var leapsec60 = "true"; // var to show a 60 instead of 59
|
||||
}
|
||||
|
||||
displayTime.setTime(now);
|
||||
|
||||
var year = displayTime.getUTCFullYear();
|
||||
var hourNum = displayTime.getUTCHours();
|
||||
var minNum = displayTime.getMinutes();
|
||||
var secNum = displayTime.getSeconds();
|
||||
|
||||
// CREATE ARRAY OF THE CLOCK NUMS WHO FOLLOW DST
|
||||
// ALSO CREATE ARRAY OF DST LABEL CLASSES ////////////////////////
|
||||
var DSTclocksArray = [ 0, 1, 6, 7, 8, 9 ]; // THESE ARE THE clockNums FOR THE ZONES THAT FOLLOW DST
|
||||
var dstLabels = document.getElementsByClassName("DSTterm"); // CREATE ARRAY FOR DST LABELS
|
||||
var dstLetters = document.getElementsByClassName("DSTletter"); // CREATE ARRAY FOR DST ABBREVIATION
|
||||
var dstNums = document.getElementsByClassName("DSTnum"); // CREATE ARRAY FOR DST OFFSET NUM
|
||||
|
||||
if ( now >= dstStart && now <= dstEnd ) { // CHECK IF THIS SECOND IS DST OR NOT
|
||||
|
||||
// CHECK IF CLOCK NUM IS IN DST ARRAY, IF SO, ADD THE DST HOUR AND LABELS
|
||||
// if ( DSTclocksArray.includes(clockNum) ) {
|
||||
if ( DSTclocksArray.indexOf(clockNum) > -1 ) { // indexOf fixes a chance in ie
|
||||
hourNum = hourNum + 1;
|
||||
// AT END OF FUNC ADD/PUSH CLOCKNUM TO dstClocksUpdated ARRAY, IF CLOCKNUM IS IN THERE, DONT UPDATE AGAIN
|
||||
// if ( !dstClocksUpdated.includes( clockNum ) ) {
|
||||
if ( dstClocksUpdated.indexOf( clockNum ) == -1 ) { // indexOf fixes a chance in ie
|
||||
dstLabels[clockNum].innerHTML = "DAYLIGHT";
|
||||
dstLetters[clockNum].innerHTML = "D";
|
||||
var standardNum = Number(dstNums[clockNum].innerHTML);
|
||||
dstNums[clockNum].innerHTML = standardNum - 1;
|
||||
dstClocksUpdated.push(clockNum); // ADD CLOCK NUM TO ARRAY OF CLOCKS UPDATED
|
||||
}
|
||||
}
|
||||
}
|
||||
// IF DST OR INCREMENTED HOUR GOES INTO NEXT DAY, RESET TO HOUR ZERO AND ADD A DAY
|
||||
if (hourNum > 23) {
|
||||
hourNum = 0;
|
||||
now = (now + 3600000) // advance now by one hour
|
||||
displayTime.setTime(now); // reset displaytime so day/date/month are correct with new day
|
||||
}
|
||||
// CHECK FOR AND IMPLEMENT LEAP SECOND
|
||||
if (leapFlag == "true") {
|
||||
if (leapsec60 == "true") {
|
||||
if (minNum == "59") {
|
||||
if (secNum == "59") { // if leapsec, and 59:59 then show 60 and reset
|
||||
secNum = "60";
|
||||
leapsec60 = "false";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var hourLabel = "";
|
||||
|
||||
// 12-HOUR OR 24-HOUR DISPLAY
|
||||
|
||||
// BOX NOT CHECKED SO 12-HOUR DISPLAY
|
||||
if (!(twentyFour)) {
|
||||
|
||||
if (hourNum > 11) {
|
||||
hourNum -= 12;
|
||||
am_pm = "P.M.";
|
||||
} else {
|
||||
am_pm = "A.M.";
|
||||
}
|
||||
} else {
|
||||
am_pm = "";
|
||||
}
|
||||
|
||||
var newVal;
|
||||
// SET HOURS
|
||||
if(hourNum > 9) {
|
||||
newVal = Number(String(hourNum).charAt(0));
|
||||
if(timeDotGov.data.myhour0 != newVal) {
|
||||
timeDotGov.data.myhour0 = newVal;
|
||||
}
|
||||
}
|
||||
else if(Number(timeDotGov.data.myhour0) != 0) {
|
||||
timeDotGov.data.myhour0 = "0";
|
||||
}
|
||||
|
||||
if(Number(hourNum) > 9){
|
||||
newVal=Number(String(hourNum).charAt(1));
|
||||
if(timeDotGov.data.myhour1 != newVal) {
|
||||
timeDotGov.data.myhour1 = newVal;
|
||||
}
|
||||
} else if (Number(timeDotGov.data.myhour1) != Number(hourNum)) {
|
||||
timeDotGov.data.myhour1 = Number(hourNum);
|
||||
}
|
||||
|
||||
if ((hourNum < 1) && (!(twentyFour))) { // if not 24hour time force the 12 so it's not 00
|
||||
timeDotGov.data.myhour0 = 1;
|
||||
timeDotGov.data.myhour1 = 2;
|
||||
}
|
||||
|
||||
// SET MINUTES
|
||||
if(minNum > 9) {
|
||||
newVal = Number(String(minNum).charAt(0));
|
||||
if (timeDotGov.data.mymin0 != newVal) {
|
||||
timeDotGov.data.mymin0 = newVal;
|
||||
}
|
||||
} else if(Number(timeDotGov.data.mymin0) != 0) {
|
||||
timeDotGov.data.mymin0 = 0;
|
||||
}
|
||||
|
||||
if(Number(minNum) > 9) {
|
||||
newVal = Number(String(minNum).charAt(1));
|
||||
if(timeDotGov.data.mymin1 != newVal) {
|
||||
timeDotGov.data.mymin1 = newVal;
|
||||
}
|
||||
}
|
||||
else if(Number(timeDotGov.data.mymin1) != Number(minNum)) {
|
||||
timeDotGov.data.mymin1 = Number(minNum);
|
||||
}
|
||||
|
||||
// SET SECONDS
|
||||
if(secNum > 9) {
|
||||
newVal = Number(String(secNum).charAt(0));
|
||||
if(timeDotGov.data.mysec0 != newVal) {
|
||||
timeDotGov.data.mysec0 = newVal;
|
||||
}
|
||||
}
|
||||
else if(Number(timeDotGov.data.mysec0) != 0) {
|
||||
timeDotGov.data.mysec0 = 0;
|
||||
}
|
||||
|
||||
if(Number(secNum) > 9) {
|
||||
newVal=Number(String(secNum).charAt(1));
|
||||
if(timeDotGov.data.mysec1 != newVal) {
|
||||
timeDotGov.data.mysec1 = newVal;
|
||||
}
|
||||
}
|
||||
else if(Number(timeDotGov.data.mysec1) != Number(secNum)) {
|
||||
timeDotGov.data.mysec1 = Number(secNum);
|
||||
}
|
||||
|
||||
// CREATE CLOCK DIGITS STRING TO DISPLAY
|
||||
var clockdigits = (timeDotGov.data.myhour0 + "" + timeDotGov.data.myhour1 + ":" + timeDotGov.data.mymin0 + timeDotGov.data.mymin1 + ":" + timeDotGov.data.mysec0 + timeDotGov.data.mysec1);
|
||||
clock = clockdigits + " " + am_pm;
|
||||
return clock;
|
||||
|
||||
} // END OF setCurrentTime FUNCTION
|
||||
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
/**
|
||||
* @file
|
||||
* Header and Footer styles
|
||||
*
|
||||
*/
|
||||
|
||||
/* Header Styles */
|
||||
.nist-header {
|
||||
background: #000;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
padding: 10px 16px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.nist-header__logo-link {
|
||||
display: inline-block;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.nist-header__logo-icon {
|
||||
fill: #fff;
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.nist-header__logo-image {
|
||||
fill: #fff;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
/* Limit main content area width */
|
||||
.nist-main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1200px;
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Make sure body has no margin or padding when using only this header component */
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Footer styles */
|
||||
|
||||
.nist-footer {
|
||||
background: #333333;
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nist-footer__inner {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 1200px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.nist-footer__inner:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.nist-footer {
|
||||
background: #333333;
|
||||
color: white;
|
||||
padding: 10px 0px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nist-footer a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nist-footer .nist-footer__logo img {
|
||||
/* width: 30%; 300px;*/
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
margin-left: 5%; /*margin-left: 10%;*/
|
||||
margin-right: 5%; /*margin-right: 10%auto;*/
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.nist-footer__menu {
|
||||
clear: both;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.nist-footer__menu.first {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.nist-footer__menu ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nist-footer__menu-item {
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nist-footer__menu-item:after {
|
||||
content: '|';
|
||||
margin-right: 1.6px;
|
||||
display: inherit;
|
||||
position: static;
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nist-footer__menu-item:last-child:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.nist-footer__menu-item a {
|
||||
font-weight: normal;
|
||||
margin-right: 6px;
|
||||
white-space: nowrap;
|
||||
padding: 0.5em 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Stick footer to bottom of page
|
||||
* Source: https://css-tricks.com/couple-takes-sticky-footer/
|
||||
*/
|
||||
|
||||
html.nist-footer-bottom,
|
||||
html.nist-footer-bottom body {
|
||||
height: 100%;
|
||||
}
|
||||
html.nist-footer-bottom body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
html.nist-footer-bottom #main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
html.nist-footer-bottom .nist-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -0,0 +1,550 @@
|
||||
@charset "utf-8";
|
||||
/* CSS Document */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
|
||||
}
|
||||
|
||||
.inner {
|
||||
padding: 0 5%;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.gap {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#top-grey {
|
||||
padding-bottom: .25rem;
|
||||
padding-top: .25rem;
|
||||
min-height: 0;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
#arrow {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#arrow[aria-expanded=false] {
|
||||
background-image: url(../img/arrow-down.svg);
|
||||
}
|
||||
#arrow[aria-expanded=true] {
|
||||
background-image: url(../img/arrow-up.svg);
|
||||
}
|
||||
|
||||
#top-grey-exp {
|
||||
background-color: #f0f0f0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.col-50 {
|
||||
width: 50%;
|
||||
float: left;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
.no-marg {
|
||||
margin: 0;
|
||||
}
|
||||
.pad-4 {
|
||||
padding: 4%;
|
||||
}
|
||||
.pad-2 {
|
||||
padding: 2%;
|
||||
}
|
||||
#col-main .pad-2 {
|
||||
padding: 2% 2% 0px 2%;
|
||||
}
|
||||
.clear {
|
||||
clear: both;
|
||||
}
|
||||
.img10 {
|
||||
width: 10%;
|
||||
height: auto;
|
||||
}
|
||||
#title-area {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
padding: 4px 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.title {
|
||||
font-size: 1.55em;
|
||||
font-weight: 700;
|
||||
}
|
||||
#logo {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
margin-right: 12px;
|
||||
vertical-align: -0.12em;
|
||||
}
|
||||
#logo2 { /* added for USNO logo and increased margins */
|
||||
width: 44px;
|
||||
height: auto;
|
||||
margin-left: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
#clock-utc {
|
||||
border: solid 1px #000;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.ital {
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
#myDate {
|
||||
margin-top: 15px;
|
||||
}
|
||||
#myTime {
|
||||
font-size: 1.4em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.imgSmText {
|
||||
font-size: 0.7em;
|
||||
line-height: 1.5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#rightColBot a {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: #000;
|
||||
}
|
||||
#rightColBot {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #000;
|
||||
}
|
||||
.text-xs {
|
||||
font-size: 0.8em;
|
||||
margin: 5px 10px 0;
|
||||
}
|
||||
.text-lg {
|
||||
font-size: 1.8em;
|
||||
font-weight: bold;
|
||||
margin: 0 10px;
|
||||
}
|
||||
#callout-bar {
|
||||
color: #fff;
|
||||
background-color: #999;
|
||||
padding: .25rem 0;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
#callout-bar p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#content{
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
#col-left {
|
||||
width: 15%;
|
||||
background-color: #d9e8f6;
|
||||
display: table-cell;
|
||||
}
|
||||
#col-main {
|
||||
width: 70%;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#col-right {
|
||||
width: 15%;
|
||||
background-color: #e2e2e2;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
}
|
||||
.col-25 {
|
||||
width: 25%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#noncontTitle,
|
||||
#contTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pr-lt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
STYLES FOR CLOCK AREAS
|
||||
*/
|
||||
.clock-box {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#col-main .clock-box {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.clock-box .title {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
/*color: #000000 !important;*/
|
||||
}
|
||||
.sub-title {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.7em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.time-display {
|
||||
display: table;
|
||||
width: 90%;
|
||||
}
|
||||
.color-area {
|
||||
width: 5%;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
background-color: #000;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 1.4em;
|
||||
padding: 5px;
|
||||
display: table-cell;
|
||||
}
|
||||
.side-img {
|
||||
max-width: 90%;
|
||||
display: block;
|
||||
margin: 0 auto 15px;
|
||||
}
|
||||
.margTop15 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
#twenty-hour {
|
||||
float: left;
|
||||
}
|
||||
#main-time-area {
|
||||
background-color: #000;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 15px 0;
|
||||
}
|
||||
.full-img {
|
||||
width: 94.5%;
|
||||
display: block;
|
||||
margin: 0 2.3%;
|
||||
}
|
||||
#mainland {
|
||||
position: relative;
|
||||
}
|
||||
#az-clock {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
bottom: 0;
|
||||
left: 5%;
|
||||
}
|
||||
.hours-wrapper {
|
||||
padding: 5px;
|
||||
background: #eee;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.striped-box {
|
||||
max-height: .75rem;
|
||||
max-width: .75rem;
|
||||
}
|
||||
#analog-clock {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
#responseTime {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* CUSTOM CHECKBOX STYLES */
|
||||
input[type=checkbox].css-checkbox {
|
||||
position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
|
||||
}
|
||||
|
||||
input[type=checkbox].css-checkbox + label.css-label {
|
||||
padding-left:20px;
|
||||
height:15px;
|
||||
display:inline-block;
|
||||
line-height:15px;
|
||||
background-repeat:no-repeat;
|
||||
background-position: 0 0;
|
||||
vertical-align:middle;
|
||||
cursor:pointer;
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
input[type=checkbox].css-checkbox:checked + label.css-label {
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
|
||||
label.css-label {
|
||||
background-image:url(../img/csscheckbox.png);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.no-saving {
|
||||
background-image: url(../img/diagonal-white.png);
|
||||
}
|
||||
.blue .color-area {
|
||||
background-color: #0060a8;
|
||||
}
|
||||
.blue .title {
|
||||
color: #0060a8;
|
||||
}
|
||||
.purple .color-area {
|
||||
background-color: #aa378d;
|
||||
}
|
||||
.purple .title {
|
||||
color: #aa378d;
|
||||
}
|
||||
.dk-blue .color-area {
|
||||
background-color: #1b0459;
|
||||
}
|
||||
.dk-blue .title {
|
||||
color: #1b0459;
|
||||
}
|
||||
.orange .color-area {
|
||||
background-color: #d66733;
|
||||
}
|
||||
.orange .title {
|
||||
color: #d66733;
|
||||
}
|
||||
.green .color-area {
|
||||
background-color: #63a952;
|
||||
}
|
||||
.green .title {
|
||||
color: #63a952;
|
||||
}
|
||||
.yellow .color-area {
|
||||
background-color: #e6a730;
|
||||
}
|
||||
.yellow .title {
|
||||
color: #e6a730;
|
||||
}
|
||||
.red .color-area {
|
||||
background-color: #cc2131;
|
||||
}
|
||||
.red .title {
|
||||
color: #cc2131;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ///////////////////////////////////////////////////////////
|
||||
////////////////////// RESPONSIVE STYLES //////////////////
|
||||
///////////////////////////////////////////////////////////
|
||||
*/
|
||||
|
||||
@media only screen and (min-width : 300px) and (max-width : 1260px) {
|
||||
|
||||
.title {
|
||||
font-size: 2.0em; /* was 1.8 */
|
||||
}
|
||||
#content {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
display: -webkit-flex; /* Safari */
|
||||
-webkit-flex-flow: wrap; /* Safari 6.1+ */
|
||||
}
|
||||
|
||||
#col-main {
|
||||
width: 100%;
|
||||
display: block;
|
||||
order: 1;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#col-left {
|
||||
width: 70%;
|
||||
display: block;
|
||||
order: 2;
|
||||
}
|
||||
#noncontTitle, #contTitle {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#col-right {
|
||||
width: 30%;
|
||||
display: block;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#main-time-area {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
#ak-col, #hi-col {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#pr-lt {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#pr-rt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rightColBot {
|
||||
border-top: 1px solid #000;
|
||||
margin-top: 30px;
|
||||
position: relative;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.clock-box .title {
|
||||
font-size: 1em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: .7em;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
input[type=checkbox].css-checkbox + label.css-label {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.imgSmText {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (min-device-width : 320px) and (max-device-width : 740px) {
|
||||
|
||||
.title {
|
||||
font-size: 2.1em; /* was 2.3 */
|
||||
}
|
||||
#content {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
display: -webkit-flex; /* Safari */
|
||||
-webkit-flex-flow: wrap; /* Safari 6.1+ */
|
||||
}
|
||||
|
||||
#col-main {
|
||||
width: 100%;
|
||||
display: block;
|
||||
order: 1;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
#col-left {
|
||||
width: 70%;
|
||||
display: block;
|
||||
order: 2;
|
||||
}
|
||||
#noncontTitle, #contTitle {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 15px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#col-right {
|
||||
width: 30%;
|
||||
display: block;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
#main-time-area {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
#ak-col, #hi-col {
|
||||
width: 50%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#pr-lt {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#pr-rt {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rightColBot {
|
||||
border-top: 1px solid #000;
|
||||
margin-top: 30px;
|
||||
position: relative;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.clock-box .title {
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.time-text {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
input[type=checkbox].css-checkbox + label.css-label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.imgSmText {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ///////////////////////////////////////////////////////////
|
||||
/////// STYLES AND DESIGN USED WITH PERMISSION /////////
|
||||
///////////////// MORGANFEBREY.COM ////////////////////////
|
||||
///////////////////////////////////////////////////////////
|
||||
*/
|
||||
|
||||
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 90 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 284.929 284.929"><path d="M282.082 76.51L267.808 62.24c-1.902-1.906-4.093-2.856-6.57-2.856-2.47 0-4.66.95-6.563 2.856L142.465 174.44 30.263 62.24c-1.903-1.905-4.093-2.855-6.567-2.855-2.475 0-4.665.95-6.567 2.856L2.856 76.516C.95 78.417 0 80.607 0 83.082c0 2.473.953 4.663 2.856 6.565L135.9 222.693c1.9 1.903 4.092 2.854 6.566 2.854s4.66-.95 6.562-2.854L282.082 89.647c1.902-1.903 2.847-4.093 2.847-6.565 0-2.475-.946-4.665-2.848-6.57z" fill="#005ea2"/></svg>
|
||||
|
After Width: | Height: | Size: 536 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 284.929 284.929"><path d="M282.082 195.285L149.028 62.24c-1.9-1.903-4.088-2.856-6.562-2.856s-4.665.953-6.567 2.856L2.855 195.285C.95 197.19 0 199.378 0 201.853c0 2.474.953 4.664 2.856 6.566l14.272 14.27c1.903 1.903 4.093 2.854 6.567 2.854s4.664-.95 6.567-2.854l112.204-112.202 112.208 112.21c1.902 1.902 4.093 2.847 6.563 2.847 2.478 0 4.668-.95 6.57-2.848l14.274-14.277c1.903-1.902 2.848-4.093 2.848-6.566 0-2.476-.944-4.666-2.846-6.57z" fill="#1a4480"/></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><defs><style>.cls-1{fill:#2378c3;}.cls-2{fill:none;stroke:#005ea2;stroke-miterlimit:10;}</style></defs><title>dot gov icon</title><path class="cls-1" d="M36.5,20.91v1.36H35.15a0.71,0.71,0,0,1-.73.68H18.23a0.71,0.71,0,0,1-.73-0.68H16.14V20.91l10.18-4.07Zm0,13.57v1.36H16.14V34.48a0.71,0.71,0,0,1,.73-0.68h18.9A0.71,0.71,0,0,1,36.5,34.48ZM21.57,23.62v8.14h1.36V23.62h2.71v8.14H27V23.62h2.71v8.14h1.36V23.62h2.71v8.14h0.63a0.71,0.71,0,0,1,.73.68v0.68H17.5V32.45a0.71,0.71,0,0,1,.73-0.68h0.63V23.62h2.71Z"/><circle class="cls-2" cx="27" cy="27.12" r="26"/></svg>
|
||||
|
After Width: | Height: | Size: 651 B |
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54"><defs><style>.cls-1{fill:#719f2a;}.cls-2{fill:none;stroke:#538200;stroke-miterlimit:10;}</style></defs><title>https icon</title><path class="cls-1" d="M34.72,34.84a1.29,1.29,0,0,1-1.29,1.29H20.57a1.29,1.29,0,0,1-1.29-1.29V27.12a1.29,1.29,0,0,1,1.29-1.29H21V23.26a6,6,0,0,1,12,0v2.57h0.43a1.29,1.29,0,0,1,1.29,1.29v7.72Zm-4.29-9V23.26a3.43,3.43,0,0,0-6.86,0v2.57h6.86Z"/><circle class="cls-2" cx="27" cy="27.12" r="26"/></svg>
|
||||
|
After Width: | Height: | Size: 518 B |
|
After Width: | Height: | Size: 36 KiB |
@@ -0,0 +1,161 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 272 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:3.84999;" shape-rendering="geometricPrecision">
|
||||
<g transform="matrix(1,0,0,1,0,-2129.92)">
|
||||
<g id="Lines">
|
||||
</g>
|
||||
<g id="Hawaii---New-Colors" serif:id="Hawaii - New Colors" transform="matrix(1.86867,0,0,1.75,-964.299,2625.17)">
|
||||
<rect x="516.034" y="-283" width="145.558" height="64" style="fill:none;"/>
|
||||
<g transform="matrix(0.374018,0,0,0.399381,595.786,-396.165)">
|
||||
<g transform="matrix(22.8926,0,0,22.8926,63.0186,371.75)">
|
||||
<path d="M0.543,-0.311L0.543,-0L0.689,-0L0.689,-0.723L0.543,-0.723L0.543,-0.433L0.227,-0.433L0.227,-0.723L0.081,-0.723L0.081,-0L0.227,-0L0.227,-0.311L0.543,-0.311Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(22.8926,0,0,22.8926,80.6459,371.75)">
|
||||
<rect x="0.081" y="-0.723" width="0.146" height="0.723" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(0.93185,0,0,1.12321,36.9225,37.8028)">
|
||||
<g transform="matrix(0.10475,0,0,0.0927968,548.768,-284.626)">
|
||||
<path d="M608.98,451.46L616.4,446.42L621.6,441.8L626,441.25L631.76,437.13L636.13,430.51L642.37,425.4L646.45,423.64L648.18,417.03L644.89,410.92L639.62,400.74L638.61,392.2L641.81,380.23L647.91,378.31L656.11,381.93L665.25,387.83L669.84,393.21L679.65,400.33L685.35,405.41L691.57,404.95L700.1,408.57L717.33,417.74L734.85,427.79L749.89,441.35L755.84,448.32L761.2,455.44L759.22,467.66L759.12,475.25L765.86,474.06L771.97,474.74L775.2,482.69L775.4,491.74L779.25,496.57L793.27,506.66L799,510.21L798.31,514.76L787.76,524.33L776.35,531.29L763.55,537.97L748.3,542.85L740.65,545.58L733.24,546.02L724.18,543.02L716.13,545.9L708.01,551.63L703.15,552.35L692.45,558.98L684.06,560.32L675.05,570.14L668.47,579.13L664.19,584.52L659.92,588.57L654.16,591.77L646.45,582.82L634.53,574.58L622.98,569.79L618.86,559.55L620.53,547.18L623.35,535.04L625.87,528.96L627.02,521.37L624.93,510.55L623.11,504.32L619.45,498.78L617.8,487.71L617.29,479.45L614.8,473.74L610.02,472.07L609.66,469.02L605.83,458.93L608.98,451.46ZM471.91,257.03L479.82,255.39L490.95,257.42L500.35,263.37L505.36,268.88L509,276.13L503.36,284.3L494.94,286.43L491.93,286.92L482.73,286.54L479.96,279.75L480.72,271.82L478.28,267.12L471.3,261.51L471.91,257.03ZM527.63,262.44L531.64,253.47L541.98,247.14L550.56,249.96L556.28,260.34L561.1,269.82L573.45,268.43L584.9,264.87L598.72,267.77L605.34,275.75L614.43,281.59L624.86,290.76L633.33,294.05L635.27,302.36L631.94,309.3L624.87,313.77L610.86,318.14L598.39,316.61L586.32,320.33L571.52,321.53L563.44,317.51L562.62,308.28L561.75,295.43L561.47,292.67L560.36,286.73L555.49,284.8L550.2,287.52L547.72,286.03L536.39,279.17L528.96,267.33L527.63,262.44ZM525.69,319.24L535.58,315.03L542.55,314.07L545.85,318.36L545.45,326.6L537.92,328.26L524.96,327.87L520.26,322.95L525.69,319.24ZM442.84,214.72L447.58,211.18L446.67,204.53L455.57,206.62L466.63,210.78L480.04,214.06L484.19,213L489.07,211.76L492.33,212.16L497.98,219.65L498.48,219.71L510.23,221.27L525.71,221.76L530.51,225.1L524.98,231.95L514.47,237.73L502.56,239.15L491.02,235.13L480.28,230.23L472.11,227.2L457.85,227.27L445.3,226.23L436.58,222.96L442.84,214.72ZM304.39,129.64L320.8,131.33L328.65,125.78L334,119.63L343.7,115.04L347.42,114.77L352.93,125.26L358.65,138.05L363.94,145.93L361.37,155.64L365.7,160.39L373.69,158.07L380.12,159.22L378.73,167.92L379.96,175.19L388.13,183.3L387.54,183.94L384.27,187.52L379.71,190.15L371.19,186.85L367.44,188.4L362.72,188.99L356.88,183.99L351.32,179.79L342.09,177.65L337.43,176.51L330.68,176.68L320.91,177.04L320.65,177.05L318.33,176.89L315.27,169.04L314.19,164.29L308.83,158.75L308.83,154.65L302.28,144.65L303.31,139.03L297.31,129.5L304.39,129.64ZM1,49.47L5.92,38.42L12.05,34.05L21.34,31.28L23.93,29.4L26.15,24.57L32.53,24.25L34.43,25.64L35.2,28.21L31.87,30.43L28.65,35.79L28.93,40.82L21.58,42.78L16.52,43.42L13.17,46.26L10.3,49.73L6.82,56.05L3.32,53.89L1,49.47ZM77.87,21.23L84.49,17.01L87.71,10.71L91.96,8.24L107.2,3.77L112.36,1L117.96,2.11L122.59,5.68L126.65,2.12L134.99,4.85L139.72,3.53L145.53,7.32L152.31,13.24L153.9,23.06L148.67,32.13L145.76,34.86L145.1,41.52L143.24,48.93L135.11,53.93L125.02,59.46L112.85,55.26L105.79,52.8L101.39,52.25L95.26,44.71L87.04,39.13L80.26,35.49L76.35,28.36L77.87,21.23Z" style="fill:rgb(211,111,175);"/>
|
||||
</g>
|
||||
<g id="No-Daylight-Savings" serif:id="No Daylight Savings" transform="matrix(0.689936,0,0,0.611207,461.087,-486.077)">
|
||||
<clipPath id="_clip1">
|
||||
<path d="M219.545,398.139L220.671,397.373L221.461,396.672L222.129,396.588L223.003,395.963L223.667,394.958L224.614,394.182L225.234,393.915L225.496,392.911L224.997,391.984L224.197,390.438L224.043,389.141L224.529,387.324L225.455,387.032L226.7,387.582L228.088,388.478L228.785,389.295L230.274,390.376L231.14,391.147L232.084,391.077L233.379,391.627L235.995,393.019L238.655,394.545L240.939,396.604L241.842,397.662L242.656,398.743L242.355,400.598L242.34,401.75L243.363,401.57L244.291,401.673L244.781,402.88L244.812,404.254L245.396,404.987L247.525,406.519L248.395,407.058L248.29,407.749L246.688,409.202L244.956,410.259L243.013,411.273L240.697,412.014L239.536,412.428L238.411,412.495L237.035,412.04L235.813,412.477L234.58,413.347L233.842,413.456L232.218,414.463L230.944,414.666L229.576,416.157L228.577,417.522L227.927,418.34L227.279,418.955L226.404,419.441L225.234,418.082L223.424,416.831L221.67,416.104L221.045,414.549L221.298,412.671L221.727,410.828L222.109,409.905L222.284,408.753L221.966,407.11L221.69,406.164L221.134,405.323L220.884,403.642L220.807,402.388L220.429,401.521L219.703,401.268L219.648,400.805L219.067,399.273L219.545,398.139ZM198.734,368.619L199.935,368.37L201.625,368.678L203.052,369.582L203.813,370.418L204.365,371.519L203.509,372.759L202.231,373.083L201.774,373.157L200.377,373.099L199.956,372.069L200.072,370.865L199.701,370.151L198.642,369.299L198.734,368.619ZM207.194,369.44L207.803,368.079L209.373,367.118L210.675,367.546L211.544,369.122L212.275,370.561L214.151,370.35L215.889,369.809L217.987,370.25L218.992,371.461L220.372,372.348L221.956,373.74L223.242,374.24L223.536,375.501L223.031,376.555L221.957,377.234L219.83,377.897L217.937,377.665L216.105,378.23L213.857,378.412L212.631,377.801L212.506,376.4L212.374,374.449L212.332,374.03L212.163,373.128L211.424,372.835L210.621,373.248L210.244,373.022L208.524,371.98L207.396,370.183L207.194,369.44ZM206.899,378.064L208.401,377.425L209.459,377.279L209.96,377.931L209.899,379.182L208.756,379.434L206.788,379.374L206.075,378.627L206.899,378.064ZM194.321,362.195L195.04,361.658L194.902,360.648L196.253,360.966L197.932,361.597L199.968,362.095L200.599,361.934L201.339,361.746L201.834,361.807L202.692,362.944L202.768,362.953L204.552,363.19L206.902,363.264L207.631,363.771L206.792,364.811L205.196,365.689L203.388,365.904L201.636,365.294L200.005,364.55L198.764,364.09L196.599,364.101L194.694,363.943L193.37,363.446L194.321,362.195ZM173.3,349.278L175.792,349.535L176.984,348.692L177.796,347.758L179.269,347.061L179.833,347.02L180.67,348.613L181.538,350.555L182.342,351.751L181.951,353.225L182.609,353.947L183.822,353.594L184.798,353.769L184.587,355.09L184.774,356.194L186.014,357.425L185.925,357.522L185.428,358.066L184.736,358.465L183.442,357.964L182.873,358.199L182.156,358.289L181.27,357.53L180.425,356.892L179.024,356.567L178.317,356.394L177.292,356.42L175.808,356.475L175.769,356.476L175.417,356.452L174.952,355.26L174.788,354.539L173.974,353.698L173.974,353.075L172.98,351.557L173.136,350.704L172.225,349.257L173.3,349.278ZM127.238,337.106L127.985,335.428L128.916,334.765L130.326,334.344L130.719,334.059L131.056,333.326L132.025,333.277L132.313,333.488L132.43,333.878L131.925,334.215L131.436,335.029L131.478,335.793L130.362,336.09L129.594,336.188L129.086,336.619L128.65,337.146L128.122,338.105L127.59,337.777L127.238,337.106ZM138.909,332.819L139.914,332.178L140.403,331.221L141.048,330.846L143.362,330.168L144.145,329.747L144.995,329.916L145.698,330.458L146.315,329.917L147.581,330.332L148.299,330.131L149.181,330.707L150.211,331.605L150.452,333.096L149.658,334.473L149.216,334.888L149.116,335.899L148.834,337.024L147.599,337.783L146.067,338.623L144.22,337.985L143.148,337.612L142.48,337.528L141.549,336.383L140.301,335.536L139.272,334.984L138.678,333.901L138.909,332.819Z"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g id="Lines1" serif:id="Lines" transform="matrix(1,0,0,1,2,-7)">
|
||||
<g id="No-Daylight-Savings1" serif:id="No Daylight Savings">
|
||||
<g id="Lines2" serif:id="Lines">
|
||||
<g transform="matrix(0.978609,-0.96912,-0.978603,-0.969126,176.003,588.009)">
|
||||
<path d="M71.318,155.942L172.818,155.942" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978616,-0.969113,-0.978596,-0.969133,174.834,590.801)">
|
||||
<path d="M73.355,153.905L174.855,153.905" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978602,-0.969127,-0.97861,-0.969119,173.67,593.592)">
|
||||
<path d="M75.392,151.868L176.892,151.868" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969124,-0.978606,-0.969123,172.5,596.385)">
|
||||
<path d="M77.43,149.83L178.93,149.83" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978603,-0.969126,-0.978609,-0.96912,171.333,599.177)">
|
||||
<path d="M79.467,147.793L180.967,147.793" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978582,-0.969147,-0.97863,-0.9691,170.172,601.968)">
|
||||
<path d="M81.503,145.757L183.003,145.757" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,168.998,604.759)">
|
||||
<path d="M83.54,143.721L185.039,143.721" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,167.831,607.549)">
|
||||
<path d="M85.575,141.685L187.075,141.685" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978609,-0.96912,-0.978603,-0.969127,166.663,610.339)">
|
||||
<path d="M87.611,139.649L189.111,139.649" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,165.497,613.129)">
|
||||
<path d="M89.646,137.613L191.147,137.613" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978609,-0.96912,-0.978603,-0.969126,164.329,615.919)">
|
||||
<path d="M91.682,135.578L193.182,135.578" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969124,-0.978606,-0.969123,163.163,618.709)">
|
||||
<path d="M93.718,133.542L195.217,133.542" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978609,-0.96912,-0.978603,-0.969127,161.996,621.499)">
|
||||
<path d="M95.754,131.507L197.253,131.507" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,160.829,624.289)">
|
||||
<path d="M97.789,129.471L199.289,129.471" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978603,-0.969126,-0.978609,-0.969121,159.663,627.079)">
|
||||
<path d="M99.825,127.435L201.325,127.435" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978602,-0.969127,-0.97861,-0.96912,158.497,629.869)">
|
||||
<path d="M101.861,125.399L203.361,125.399" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,190.525)">
|
||||
<path d="M118.761,161.9L190.532,90.129L193.183,87.478" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,194.05)">
|
||||
<path d="M120.796,161.364L192.568,89.592L196.719,85.441" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,197.915)">
|
||||
<path d="M122.832,160.579L194.603,88.808L200.004,83.406" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,201.782)">
|
||||
<path d="M124.868,159.793L196.639,88.021L203.29,81.371" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,205.308)">
|
||||
<path d="M126.903,159.257L198.675,87.485L206.826,79.335" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.38396,-8.39218e-17,8.4743e-17,1.37055,-26.0821,218.253)">
|
||||
<path d="M128.939,151.847L200.71,80.076L203.486,77.3" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,150.327,649.399)">
|
||||
<path d="M116.11,111.149L217.61,111.149" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969124,-0.978606,-0.969123,149.159,652.189)">
|
||||
<path d="M118.146,109.113L219.646,109.113" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978602,-0.969127,-0.97861,-0.96912,147.994,654.979)">
|
||||
<path d="M120.182,107.078L221.682,107.078" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978603,-0.969126,-0.978609,-0.96912,146.826,657.769)">
|
||||
<path d="M122.218,105.042L223.717,105.042" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978599,-0.96913,-0.978613,-0.969117,145.66,660.559)">
|
||||
<path d="M124.252,103.006L225.753,103.006" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,144.492,663.349)">
|
||||
<path d="M126.289,100.971L227.789,100.971" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,143.325,666.139)">
|
||||
<path d="M128.325,98.936L229.825,98.936" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,142.158,668.929)">
|
||||
<path d="M130.36,96.899L231.86,96.899" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978612,-0.969117,-0.9786,-0.969129,140.989,671.719)">
|
||||
<path d="M132.396,94.864L233.896,94.864" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,139.824,674.509)">
|
||||
<path d="M134.432,92.828L235.932,92.828" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978613,-0.969116,-0.978599,-0.96913,138.655,677.298)">
|
||||
<path d="M136.467,90.792L237.967,90.792" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,137.489,680.089)">
|
||||
<path d="M138.504,88.756L240.002,88.756" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978603,-0.969126,-0.978609,-0.96912,136.323,682.88)">
|
||||
<path d="M140.539,86.721L242.039,86.721" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978603,-0.969127,-0.978609,-0.96912,135.157,685.67)">
|
||||
<path d="M142.575,84.686L244.074,84.686" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,133.989,688.46)">
|
||||
<path d="M144.61,82.649L246.11,82.649" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978605,-0.969124,-0.978607,-0.969123,132.822,691.249)">
|
||||
<path d="M146.646,80.614L248.146,80.614" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.978606,-0.969123,-0.978606,-0.969123,131.655,694.039)">
|
||||
<path d="M148.682,78.578L250.182,78.578" style="fill:none;fill-rule:nonzero;stroke:rgb(158,30,126);stroke-width:1.21px;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Outline" transform="matrix(0.10475,0,0,0.0927968,548.768,-284.626)">
|
||||
<path d="M608.98,451.46L616.4,446.42L621.6,441.8L626,441.25L631.76,437.13L636.13,430.51L642.37,425.4L646.45,423.64L648.18,417.03L644.89,410.92L639.62,400.74L638.61,392.2L641.81,380.23L647.91,378.31L656.11,381.93L665.25,387.83L669.84,393.21L679.65,400.33L685.35,405.41L691.57,404.95L700.1,408.57L717.33,417.74L734.85,427.79L749.89,441.35L755.84,448.32L761.2,455.44L759.22,467.66L759.12,475.25L765.86,474.06L771.97,474.74L775.2,482.69L775.4,491.74L779.25,496.57L793.27,506.66L799,510.21L798.31,514.76L787.76,524.33L776.35,531.29L763.55,537.97L748.3,542.85L740.65,545.58L733.24,546.02L724.18,543.02L716.13,545.9L708.01,551.63L703.15,552.35L692.45,558.98L684.06,560.32L675.05,570.14L668.47,579.13L664.19,584.52L659.92,588.57L654.16,591.77L646.45,582.82L634.53,574.58L622.98,569.79L618.86,559.55L620.53,547.18L623.35,535.04L625.87,528.96L627.02,521.37L624.93,510.55L623.11,504.32L619.45,498.78L617.8,487.71L617.29,479.45L614.8,473.74L610.02,472.07L609.66,469.02L605.83,458.93L608.98,451.46ZM471.91,257.03L479.82,255.39L490.95,257.42L500.35,263.37L505.36,268.88L509,276.13L503.36,284.3L494.94,286.43L491.93,286.92L482.73,286.54L479.96,279.75L480.72,271.82L478.28,267.12L471.3,261.51L471.91,257.03ZM527.63,262.44L531.64,253.47L541.98,247.14L550.56,249.96L556.28,260.34L561.1,269.82L573.45,268.43L584.9,264.87L598.72,267.77L605.34,275.75L614.43,281.59L624.86,290.76L633.33,294.05L635.27,302.36L631.94,309.3L624.87,313.77L610.86,318.14L598.39,316.61L586.32,320.33L571.52,321.53L563.44,317.51L562.62,308.28L561.75,295.43L561.47,292.67L560.36,286.73L555.49,284.8L550.2,287.52L547.72,286.03L536.39,279.17L528.96,267.33L527.63,262.44ZM525.69,319.24L535.58,315.03L542.55,314.07L545.85,318.36L545.45,326.6L537.92,328.26L524.96,327.87L520.26,322.95L525.69,319.24ZM442.84,214.72L447.58,211.18L446.67,204.53L455.57,206.62L466.63,210.78L480.04,214.06L484.19,213L489.07,211.76L492.33,212.16L497.98,219.65L498.48,219.71L510.23,221.27L525.71,221.76L530.51,225.1L524.98,231.95L514.47,237.73L502.56,239.15L491.02,235.13L480.28,230.23L472.11,227.2L457.85,227.27L445.3,226.23L436.58,222.96L442.84,214.72ZM304.39,129.64L320.8,131.33L328.65,125.78L334,119.63L343.7,115.04L347.42,114.77L352.93,125.26L358.65,138.05L363.94,145.93L361.37,155.64L365.7,160.39L373.69,158.07L380.12,159.22L378.73,167.92L379.96,175.19L388.13,183.3L387.54,183.94L384.27,187.52L379.71,190.15L371.19,186.85L367.44,188.4L362.72,188.99L356.88,183.99L351.32,179.79L342.09,177.65L337.43,176.51L330.68,176.68L320.91,177.04L320.65,177.05L318.33,176.89L315.27,169.04L314.19,164.29L308.83,158.75L308.83,154.65L302.28,144.65L303.31,139.03L297.31,129.5L304.39,129.64ZM1,49.47L5.92,38.42L12.05,34.05L21.34,31.28L23.93,29.4L26.15,24.57L32.53,24.25L34.43,25.64L35.2,28.21L31.87,30.43L28.65,35.79L28.93,40.82L21.58,42.78L16.52,43.42L13.17,46.26L10.3,49.73L6.82,56.05L3.32,53.89L1,49.47ZM77.87,21.23L84.49,17.01L87.71,10.71L91.96,8.24L107.2,3.77L112.36,1L117.96,2.11L122.59,5.68L126.65,2.12L134.99,4.85L139.72,3.53L145.53,7.32L152.31,13.24L153.9,23.06L148.67,32.13L145.76,34.86L145.1,41.52L143.24,48.93L135.11,53.93L125.02,59.46L112.85,55.26L105.79,52.8L101.39,52.25L95.26,44.71L87.04,39.13L80.26,35.49L76.35,28.36L77.87,21.23Z" style="fill:none;stroke:black;stroke-width:9.59px;stroke-linejoin:round;stroke-miterlimit:2;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Time_Zones1">
|
||||
</g>
|
||||
<g id="States">
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 390 KiB |
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 46 KiB |
@@ -0,0 +1,22 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 11 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-58.7899,-489.903)">
|
||||
<g id="Lines">
|
||||
</g>
|
||||
<g id="Artboard5" transform="matrix(0.55,0,0,0.270127,40.6399,374.754)">
|
||||
<rect x="33" y="426.278" width="20" height="40.722" style="fill:none;"/>
|
||||
<clipPath id="_clip1">
|
||||
<rect x="33" y="426.278" width="20" height="40.722"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(1.81818,0,0,3.70196,-73.8908,-1387.32)">
|
||||
<rect x="58.79" y="489.903" width="11" height="11" style="fill:white;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.98807,0,0,4.04786,-42.4869,-1558.5)">
|
||||
<path d="M37.97,493.257L37.97,490.327L40.928,490.327L37.97,493.257ZM37.97,496.021L43.719,490.327L46.704,490.327L37.97,498.976L37.97,496.021ZM39.335,500.387L48.03,491.776L48.03,494.732L42.319,500.387L39.335,500.387ZM45.111,500.387L48.03,497.496L48.03,500.387L45.111,500.387Z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 176 B |
@@ -0,0 +1,369 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="title" content="SethPC Official Time" />
|
||||
<meta property="og:site_name" content="SethPC" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://clock.sethpc.xyz/timegov/" />
|
||||
<meta property="og:title" content="Official U.S. Time | SethPC" />
|
||||
<meta property="og:description" content="Self-hosted official U.S. time style display with U.S. map and synchronized clocks." />
|
||||
<meta property="og:image" content="/timegov/img/map-elements/united-states-map.svg" />
|
||||
<meta name="dcterms.title" content="SethPC Official Time" />
|
||||
<meta name="description" content="Self-hosted official U.S. time display with synchronized clock data." />
|
||||
<meta name="dcterms.subject" content="Working with industry and science to advance innovation and improve quality of life." />
|
||||
<meta name="google-site-verification" content="" />
|
||||
<meta name="dcterms.type" content="text" />
|
||||
<meta name="dcterms.format" content="text/html" />
|
||||
<meta name="dcterms.identifier" content="https://clock.sethpc.xyz/timegov/" />
|
||||
<meta name="twitter:title" content="Official U.S. Time | SethPC" />
|
||||
<meta name="twitter:description" content="Self-hosted official U.S. time style display with synchronized clocks." />
|
||||
<meta name="twitter:image" content="/img/map-elements/og_map.png" />
|
||||
|
||||
<title>SethPC Official Time</title>
|
||||
<link rel="shortcut icon" href="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" />
|
||||
<link rel="stylesheet" href="css/main.css" />
|
||||
<link rel="stylesheet" href="css/NIST-styles.css" />
|
||||
|
||||
|
||||
<!-- FUNC FOR TOP BAR INFO BTN -->
|
||||
<script type="text/javascript">
|
||||
function info_exp(id, id2) {
|
||||
var n = document.getElementById(id);
|
||||
if (n.style.display != 'none') {
|
||||
n.style.display = 'none';
|
||||
document.getElementById(id2).setAttribute('aria-expanded', 'false');
|
||||
} else {
|
||||
n.style.display = 'block';
|
||||
document.getElementById(id2).setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
|
||||
<!-- TOP GREY BAR -->
|
||||
<div id="top-grey">
|
||||
<div class="inner">
|
||||
<img src="img/us_flag_small.png" class="left gap" alt="U.S. Flag"><span class="left gap">Official self-hosted time service</span> <div id="info-btn"><a href="index.html#" onclick="info_exp('top-grey-exp', 'arrow');">Service details <span id="arrow" aria-expanded="false"></span></a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EXPANDED TOP GREY BAR -->
|
||||
<div id="top-grey-exp" style="display:none;">
|
||||
<div class="inner">
|
||||
<div class="col-50">
|
||||
<div class="pad-4">
|
||||
<img src="img/icon-dot-gov.svg" alt="icon dot gov" class="img10"><br>
|
||||
<strong>Self-hosted service notice.</strong>
|
||||
<p class="no-marg">This is a privately hosted clock service designed to mirror the time.gov experience in a homelab environment.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<div class="pad-4">
|
||||
<img src="img/icon-https.svg" alt="icon https" class="img10"><br>
|
||||
<strong>Encrypted transport.</strong>
|
||||
<p class="no-marg">The <strong>https://</strong> indicates encrypted traffic between your browser and this host.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BLACK TITLE BAR AREA -->
|
||||
<div id="title-area">
|
||||
<div class="inner">
|
||||
<center>
|
||||
<span class="title"><img src="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" id="logo" alt="SethPC"/>OFFICIAL U.S. TIME</span>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ANNOUNCEMENT GREY BAR -->
|
||||
<div id="callout-bar"><p></p></div> <!-- Blank between <p> </p> unless there is an upcoming announcement -->
|
||||
|
||||
</header>
|
||||
|
||||
<!-- MAIN CONTENT AREA -->
|
||||
<div id="content">
|
||||
|
||||
<!-- LEFT COLUMN -->
|
||||
<div id="col-left">
|
||||
<div class="pad-2">
|
||||
|
||||
<div id="noncontTitle">Non-Contiguous U.S. and Territories</div>
|
||||
|
||||
<div id="ak-col">
|
||||
<!-- ALASKA TIME -->
|
||||
<div class="clock-box blue dst-clock">
|
||||
<div class="title">Alaska <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">AK<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">9</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=9></time></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ALASKA MAP GRAPHIC -->
|
||||
<img src="img/map-elements/alaska.svg" class="side-img" alt="Alaska Map">
|
||||
|
||||
<!-- ALEUTIAN TIME -->
|
||||
<div class="clock-box blue dst-clock">
|
||||
<div class="title">Aleutian <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">HA<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">10</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=10></time></div>
|
||||
</div>
|
||||
<!-- <div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="hi-col">
|
||||
<!-- HAWAIIAN TIME -->
|
||||
<div class="clock-box purple">
|
||||
<div class="title">Hawaii Standard Time</div>
|
||||
<div class="sub-title">HST (UTC-10)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=10></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
|
||||
<!-- HAWAII MAP GRAPHIC -->
|
||||
<img src="img/map-elements/hawaii.svg" class="side-img" alt="Hawaii Map">
|
||||
|
||||
<!-- SAMOA TIME -->
|
||||
<div class="clock-box dk-blue">
|
||||
<div class="title">Samoa Standard Time</div>
|
||||
<div class="sub-title">SST (UTC-11)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=11></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
|
||||
<!-- CHAMORRO TIME -->
|
||||
<div class="clock-box dk-blue">
|
||||
<div class="title">Chamorro Standard Time</div>
|
||||
<div class="sub-title">CHST (UTC+10)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=-10></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
|
||||
<!-- PUERTO RICO LT COL-->
|
||||
<div id="pr-lt" class="pad-2 margTop15">
|
||||
<div class="clock-box dk-blue">
|
||||
<div class="title">Atlantic Standard Time</div>
|
||||
<div class="sub-title"><b>Puerto Rico / US Virgin Islands</b></div>
|
||||
<div class="sub-title">AST (UTC-4)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=4></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div> </div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN COLUMN -->
|
||||
<div id="col-main">
|
||||
<div class="pad-2">
|
||||
<div style="height: 0px;"> </div>
|
||||
|
||||
<!-- ROW FOR MAINLAND US CLOCK AREA -->
|
||||
<div class="main-top">
|
||||
|
||||
<!-- PACIFIC TIME -->
|
||||
<div class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box orange dst-clock">
|
||||
<div class="title">Pacific <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">P<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">8</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=8 />SYNCHRONIZING</time></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MOUNTAIN TIME -->
|
||||
<div class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box green dst-clock">
|
||||
<div class="title">Mountain <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">M<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">7</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=7>SYNCHRONIZING</time></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CENTRAL TIME -->
|
||||
<div class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box yellow dst-clock">
|
||||
<div class="title">Central <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">C<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">6</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=6>SYNCHRONIZING</time></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EASTERN TIME -->
|
||||
<div class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box red dst-clock">
|
||||
<div class="title">Eastern <span class="DSTterm">Standard</span> Time</div>
|
||||
<div class="sub-title">E<span class="DSTletter">S</span>T (UTC-<span class="DSTnum">5</span>)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area"></div>
|
||||
<div class="clock time-text"><time zoneOffset=5>SYNCHRONIZING</time></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<!-- END TOP ROW -->
|
||||
|
||||
|
||||
<div id="mainland">
|
||||
<!-- ARIZONA/MOUNTAIN STANDARD TIME -->
|
||||
<div id="az-clock" class="col-25">
|
||||
<div class="pad-2">
|
||||
<div class="clock-box green">
|
||||
<div class="title">Arizona Mountain<br>Standard Time</div>
|
||||
<div class="sub-title">MST (UTC-7)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=7></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- BEGIN MAIN MAP AREA -->
|
||||
<img src="img/map-elements/united-states-map.svg" class="full-img" alt="United States Time Zone Map">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN -->
|
||||
<div id="col-right">
|
||||
<div class="pad-4">
|
||||
|
||||
<!-- 24HR CHECKBOX -->
|
||||
<div class='hours-wrapper'>
|
||||
<div class='am-pm'></div>
|
||||
<input id='twenty-four' type='checkbox' class="css-checkbox">
|
||||
<label class='css-label' for='twenty-four'>24-Hour Clock Display</label>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<div id="clock-utc">
|
||||
<p class="text-xs">Coordinated Universal Time (UTC)</p>
|
||||
<div class="clock text-lg"><time id="timeUTC"></time></div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
|
||||
</div>
|
||||
<p class="sub-title ital">UTC is always displayed as a 24-hour clock.</p>
|
||||
|
||||
<!-- MAIN CLOCK AREA -->
|
||||
<div id="main-time-area">
|
||||
<p>Your Device's Clock <span id="myTimeTitle">UTC-0</span> <br>
|
||||
<div id='myDate'></div>
|
||||
<canvas id="analog-clock" width=200 height=200></canvas>
|
||||
<br>
|
||||
<span id="myTime"></span><br><br>
|
||||
Your clock is off by: <br><span id="realTimeDif"></span> s</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- PUERTO RICO RT COL-->
|
||||
<div id="pr-rt" class="pad-2 margTop15">
|
||||
<div class="clock-box dk-blue">
|
||||
<div class="title">Atlantic Standard Time</div>
|
||||
<div class="sub-title"><b>Puerto Rico / US Virgin Islands</b></div>
|
||||
<div class="sub-title">AST (UTC-4)</div>
|
||||
<div class="time-display">
|
||||
<div class="color-area no-saving"></div>
|
||||
<div class="clock time-text"><time zoneOffset=4></time></div>
|
||||
</div>
|
||||
<div class="null"><span class="DSTterm"></span><span class="DSTletter"></span><span class="DSTnum"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rightColBot">
|
||||
<a href="/simple/">Simple View</a>
|
||||
<a href="/decimal/">Decimal Time</a>
|
||||
<a href="/seth/">Seth Date</a>
|
||||
<a href="/calendar/">Seth Calendar</a>
|
||||
<a href="/api/time">Time API</a>
|
||||
<div class="imgSmText">
|
||||
<img src="img/stripes.svg" class="striped-box" alt="Hashed image for Daylight Saving Time not observed"> = DAYLIGHT SAVING TIME NOT OBSERVED
|
||||
<p>Clocks are corrected for network delay</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
|
||||
<footer class="nist-footer">
|
||||
<div class="nist-footer__inner">
|
||||
<div class="nist-footer__menu" role="navigation">
|
||||
<ul>
|
||||
<li class="nist-footer__menu-item"><a href="/timegov/">Map View</a></li>
|
||||
<li class="nist-footer__menu-item"><a href="/simple/">Simple View</a></li>
|
||||
<li class="nist-footer__menu-item"><a href="/decimal/">Decimal Time</a></li>
|
||||
<li class="nist-footer__menu-item"><a href="/seth/">Seth Date</a></li>
|
||||
<li class="nist-footer__menu-item"><a href="/calendar/">Seth Calendar</a></li>
|
||||
<li class="nist-footer__menu-item"><a href="/api/time">JSON Time API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nist-footer__logo">
|
||||
<center><img src="https://storage.googleapis.com/sethfreiberg.com/sethflix/favicon.png" alt="SethPC logo" /><p>SethPC Official Time</p></center>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class='time-zone-container' style='display:none'>
|
||||
<div class='dropdown-container'>
|
||||
<select id='dst-time-zone'>
|
||||
</select>
|
||||
<select id='no-dst-time-zone'>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div id="responseTime"></div>
|
||||
<script src="scripts/jquery-3.7.1.min.js" type="text/javascript"></script>
|
||||
<script type="text/javascript" src="scripts/analogClock.js"></script>
|
||||
<script type="text/javascript" src="scripts/application.js"></script>
|
||||
<script type="text/javascript" src="scripts/zzz__bd08fcbbc8bd600a5f9e994be2de69f7cb26b9f4.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,126 @@
|
||||
///////////////////////////////////////////////////////////////////////////
|
||||
////////////////////// ANALOG CLOCK FUNCTIONS ///////////////////////////
|
||||
///////////////// Clock code used from W3Schools.com ////////////////////
|
||||
//////// Refer to their site about applicable use of the code ///////////
|
||||
///////////////////////////////////////////////////////////////////////////
|
||||
|
||||
var canvas = document.getElementById("analog-clock");
|
||||
var ctx = canvas.getContext("2d");
|
||||
var radius = canvas.height / 2;
|
||||
ctx.translate(radius, radius);
|
||||
radius = radius * 0.90
|
||||
setInterval(drawClock, 1000);
|
||||
|
||||
// add 0 to single digit time min, sec
|
||||
function checkTime(i) {
|
||||
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
|
||||
return i;
|
||||
}
|
||||
|
||||
function drawClock() {
|
||||
drawFace(ctx, radius);
|
||||
drawNumbers(ctx, radius);
|
||||
drawTime(ctx, radius);
|
||||
}
|
||||
|
||||
function drawFace(ctx, radius) {
|
||||
var grad;
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius, 0, 2*Math.PI);
|
||||
ctx.fillStyle = 'white';
|
||||
ctx.fill();
|
||||
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
|
||||
grad.addColorStop(0, '#333');
|
||||
grad.addColorStop(0.5, 'white');
|
||||
grad.addColorStop(1, '#333');
|
||||
ctx.strokeStyle = grad;
|
||||
ctx.lineWidth = radius*0.1;
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function drawNumbers(ctx, radius) {
|
||||
var ang;
|
||||
var num;
|
||||
ctx.font = radius*0.15 + "px arial";
|
||||
ctx.textBaseline="middle";
|
||||
ctx.textAlign="center";
|
||||
for(num = 1; num < 13; num++){
|
||||
ang = num * Math.PI / 6;
|
||||
ctx.rotate(ang);
|
||||
ctx.translate(0, -radius*0.85);
|
||||
ctx.rotate(-ang);
|
||||
ctx.fillText(num.toString(), 0, 0);
|
||||
ctx.rotate(ang);
|
||||
ctx.translate(0, radius*0.85);
|
||||
ctx.rotate(-ang);
|
||||
}
|
||||
}
|
||||
|
||||
function drawTime(ctx, radius){
|
||||
|
||||
var deviceClock = new Date();
|
||||
var hour = deviceClock.getHours();
|
||||
var minute = deviceClock.getMinutes();
|
||||
var second = deviceClock.getSeconds();
|
||||
|
||||
var ampm = hour >= 12 ? 'P.M.' : 'A.M.';
|
||||
hour = hour % 12;
|
||||
hour = hour ? hour : 12; // the hour '0' should be '12'
|
||||
//minute = minute < 10 ? '0'+minute : minute;
|
||||
|
||||
// CHECKTIME FUNC ADDS LEADING '0' if <10
|
||||
hour = checkTime(hour);
|
||||
minute = checkTime(minute);
|
||||
second = checkTime(second);
|
||||
|
||||
//digital time display
|
||||
var myDigTime = hour + ":" + minute +":" + second;
|
||||
document.getElementById('myTime').innerHTML = myDigTime + ' ' + ampm;
|
||||
|
||||
var dd = deviceClock.getDate();
|
||||
var mm = deviceClock.getMonth();
|
||||
mm++; //Increment because Jan is month 0
|
||||
dd = checkTime(dd);
|
||||
mm = checkTime(mm);
|
||||
var yyyy = deviceClock.getFullYear();
|
||||
|
||||
var todaysDate = mm + '/' + dd + '/' + yyyy;
|
||||
document.getElementById("myDate").innerHTML = "Today: " + todaysDate;
|
||||
|
||||
// OFFSET
|
||||
var utcOffset = deviceClock.getTimezoneOffset()/60;
|
||||
if (utcOffset > 0) {
|
||||
utcOffset = "(UTC-" + utcOffset + ")";
|
||||
} else {
|
||||
utcOffset = "(UTC+" + Math.abs(utcOffset) + ")";
|
||||
};
|
||||
document.getElementById("myTimeTitle").innerHTML = utcOffset;
|
||||
|
||||
//hour
|
||||
hour=hour%12;
|
||||
hour=(hour*Math.PI/6)+
|
||||
(minute*Math.PI/(6*60))+
|
||||
(second*Math.PI/(360*60));
|
||||
drawHand(ctx, hour, radius*0.5, radius*0.07);
|
||||
//minute
|
||||
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
|
||||
drawHand(ctx, minute, radius*0.8, radius*0.07);
|
||||
// second
|
||||
second=(second*Math.PI/30);
|
||||
drawHand(ctx, second, radius*0.9, radius*0.02);
|
||||
}
|
||||
|
||||
function drawHand(ctx, pos, length, width) {
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = width;
|
||||
ctx.lineCap = "round";
|
||||
ctx.moveTo(0,0);
|
||||
ctx.rotate(pos);
|
||||
ctx.lineTo(0, -length);
|
||||
ctx.stroke();
|
||||
ctx.rotate(-pos);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
// ONLOAD OPERATIONS FOR THE SITE
|
||||
window.onload = function() {
|
||||
|
||||
/* PARSE THE URL FOR 12/24 VARIABLE*/
|
||||
var getT = location.search;
|
||||
var tArr = getT.split("=");
|
||||
var t = tArr[1];
|
||||
|
||||
// CREATE A VAR FOR THE CHECKBOX
|
||||
var twentyFour = document.getElementById("twenty-four");
|
||||
|
||||
// CHECK VALUE OF 12/24 URL VAR "t" AND SET CHECKBOX ACCORDINGLY
|
||||
if (t === "24") {
|
||||
twentyFour.checked = true;
|
||||
} else {
|
||||
// DEFAULT TO 12HR DISPLAY
|
||||
twentyFour.checked = false;
|
||||
}
|
||||
|
||||
var noMoreAlerts = false;
|
||||
// NOTIFICATION BOX FOR BOOKMARKING 24-HOUR SETTINGS PAGE
|
||||
var twentyFour = document.getElementById("twenty-four");
|
||||
twentyFour.addEventListener("click", function(event) {
|
||||
var hourLabelDiv = document.getElementsByClassName("am-pm")[0];
|
||||
var url = window.location.toString();
|
||||
if(timeDotGov.data.twentyFour()) {
|
||||
window.history.replaceState(url, "", "/timegov/?t=24");
|
||||
if (!noMoreAlerts) {
|
||||
alert("Bookmarking this page will save your preference for 24-hour time display.");
|
||||
}
|
||||
noMoreAlerts = true;
|
||||
} else {
|
||||
window.history.replaceState(url, "", "/timegov/");
|
||||
}
|
||||
timeDotGov.clockController.handleonrefresh(new Date());
|
||||
|
||||
});
|
||||
|
||||
//? timeZoneChange = function(event) {
|
||||
//? timeDotGov.clockController.getnewOffset(event.target.value);
|
||||
//? }
|
||||
|
||||
// LOAD DST DATES AND LEAP DATE
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
xmlHttp.open("GET", "/api/timegov/auxdata.xml", false); // false for synchronous request
|
||||
xmlHttp.send(null);
|
||||
timeDotGov.auxdata = xmlHttp.responseText;
|
||||
|
||||
timeDotGov.clockController.auxdata();
|
||||
|
||||
timeDotGov.clockController.checkservertime();
|
||||
document.getElementById('responseTime').innerHTML = timeDotGov.data.zoneOffset;
|
||||
|
||||
// SET REFRESH RATE TO CHECK FOR TOP OF NEW SECOND, SO THE DISPLAY DOES NOT HAVE TO BE REFRESHED MORE THAN NECESSARY
|
||||
setInterval(function() {
|
||||
if(timeDotGov.data.currentTime) {
|
||||
timeDotGov.clockController.runningclocks();
|
||||
}
|
||||
}, 20); // 20 milliseconds
|
||||
|
||||
// FUNCTION REFRESHES PAGE EVERY 10 MIN
|
||||
setInterval(function() {
|
||||
location.reload();
|
||||
}, 600000);
|
||||
|
||||
};
|
||||
|
||||
@@ -0,0 +1,370 @@
|
||||
|
||||
timeDotGov = {};
|
||||
timeDotGov.clock = {};
|
||||
timeDotGov.clockController = {};
|
||||
timeDotGov.clockController.dsClock = {}
|
||||
|
||||
timeDotGov.data = {
|
||||
"then": null,
|
||||
"serverTime": null,
|
||||
"responseTime": null,
|
||||
"RThalf": null,
|
||||
"realTimeDif": null,
|
||||
"requestTime": null,
|
||||
"leapsecond": null,
|
||||
"dststart": null,
|
||||
"dstend": null,
|
||||
"currYear": null,
|
||||
"dstDates": null,
|
||||
"leapDate": null,
|
||||
"clockinstances": [],
|
||||
"leapFlag": null,
|
||||
"leapsec60": null,
|
||||
"myhour0": "0",
|
||||
"myhour1": "0",
|
||||
"mysec0": "0",
|
||||
"mysec1": "0",
|
||||
"currentTime": null,
|
||||
"twentyFour": function() {
|
||||
twentyFour = document.getElementById("twenty-four");
|
||||
return twentyFour.checked;
|
||||
}
|
||||
}
|
||||
|
||||
var offsetCheck = true;
|
||||
var daylightTitles = false;
|
||||
|
||||
// CREATE ARRAY THAT WILL STORE WHICH CLOCK NUMS HAVE BEEN UPDATED
|
||||
var dstClocksUpdated = [];
|
||||
timeDotGov.clockController.getParameterByName = function(name) {
|
||||
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
||||
results = regex.exec(location.search);
|
||||
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
|
||||
}
|
||||
|
||||
timeDotGov.clockController.getleapdate = function() {
|
||||
var leap = new Date();
|
||||
var temp1 = timeDotGov.data.leapdate.split(" ");
|
||||
var leapdateYear = temp1[0];
|
||||
var leapdateMonth = temp1[1];
|
||||
|
||||
leapdateMonth = leapdateMonth - 1; // month convention = 0-11 (Jan = 0)
|
||||
|
||||
var leapdateDay = temp1[2];
|
||||
|
||||
leap.setUTCFullYear(leapdateYear, leapdateMonth, leapdateDay);
|
||||
leap.setUTCHours(0, 0, 0, 0);
|
||||
|
||||
timeDotGov.data.leapsecond = leap.getTime();
|
||||
}
|
||||
|
||||
// GET TIME FROM SERVER
|
||||
timeDotGov.clockController.dsClock.doRequest = function() {
|
||||
d = new Date();
|
||||
var xmlHttp = new XMLHttpRequest();
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
////// USE OF THIS .CGI BY OUTSIDE SITES OR APPLICATIONS IS STRICTLY PROHIBITED ////
|
||||
// OR USING THE TIME FROM THIS SITE IN ANY WAY FOR OTHER SITES IS ALSO PROHIBITED //
|
||||
///////////////////////////////////////////////////////////////////////////////////
|
||||
xmlHttp.open("GET", "/zzz__2fbc6c3300df7e4483acd44c5044098a9fcc61d6.cgi?disablecache=" + d.getTime(), false);
|
||||
xmlHttp.send(null);
|
||||
return xmlHttp.responseText;
|
||||
}
|
||||
|
||||
// GET t1, t2, t3, t4 in doRequest AND CALCULATE DELAYS IN doData
|
||||
timeDotGov.clockController.checkservertime = function() {
|
||||
var o = new Object();
|
||||
var d = new Date();
|
||||
var currentTimeObj = new Date();
|
||||
timeDotGov.data.requestTime = currentTimeObj.getTime();
|
||||
timeDotGov.data.currentTime = timeDotGov.clockController.dsClock.doRequest(); // GET NIST TIME FROM SERVER
|
||||
timeDotGov.clockController.doData();
|
||||
}
|
||||
// PARSE DATA FROM AUXDATA.XML
|
||||
timeDotGov.clockController.doAuxData = function() {
|
||||
parser = new DOMParser();
|
||||
xmlDoc = parser.parseFromString(timeDotGov.auxdata, "text/xml");
|
||||
timeDotGov.data.curryear = xmlDoc.getElementsByTagName("currYear")[0].childNodes[0].nodeValue;
|
||||
timeDotGov.data.dstdates = xmlDoc.getElementsByTagName("DstDates")[0].childNodes[0].nodeValue;
|
||||
timeDotGov.data.leapdate = xmlDoc.getElementsByTagName("LeapDate")[0].childNodes[0].nodeValue;
|
||||
}
|
||||
|
||||
timeDotGov.clockController.getDSTdates = function() {
|
||||
var dstStartDate = new Date();
|
||||
var dstEndDate = new Date();
|
||||
var temp=timeDotGov.data.dstdates.split(" "); // makes an array of the string elements
|
||||
var startmonth = temp[0];
|
||||
|
||||
startmonth = startmonth - 1; // to follow js convention of month = 0-11 (Jan = 0)
|
||||
|
||||
var startday = temp[1];
|
||||
var endmonth = temp[2];
|
||||
|
||||
endmonth = endmonth - 1;
|
||||
|
||||
var endday = temp[3];
|
||||
|
||||
dstStartDate.setUTCFullYear(timeDotGov.data.curryear, startmonth, startday);
|
||||
dstStartDate.setUTCHours(2, 0, 0, 0);
|
||||
dstEndDate.setUTCFullYear(timeDotGov.data.curryear, endmonth, endday);
|
||||
dstEndDate.setUTCHours(1, 0, 0, 0);
|
||||
timeDotGov.data.dstStart = dstStartDate.getTime();
|
||||
timeDotGov.data.dstEnd = dstEndDate.getTime();
|
||||
|
||||
}
|
||||
|
||||
timeDotGov.clockController.auxdata = function() {
|
||||
this.doAuxData();
|
||||
this.getDSTdates();
|
||||
this.getleapdate();
|
||||
}
|
||||
|
||||
timeDotGov.clockController.doData = function() {
|
||||
|
||||
var parser = new DOMParser();
|
||||
var xmlDoc = parser.parseFromString(timeDotGov.data.currentTime, "text/xml");
|
||||
|
||||
var t2 = xmlDoc.getElementsByTagName("timestamp")[0].getAttribute("time2");
|
||||
var t3 = xmlDoc.getElementsByTagName("timestamp")[0].getAttribute("time3");
|
||||
var serverDelay = Math.round((t3 - t2) / 1000); // server delay in milliseconds
|
||||
timeDotGov.data.serverTime = Math.round(t3/1000); // Server time in milliseconds
|
||||
|
||||
var currentTimeObj2 = new Date();
|
||||
timeDotGov.data.responseTime = currentTimeObj2.getTime(); // t4
|
||||
timeDotGov.data.RThalf = ((timeDotGov.data.responseTime - timeDotGov.data.requestTime) - serverDelay) / 2; // (t4 - t1) - (t3 -t2) NTP EQ
|
||||
timeDotGov.data.realTimeDif = timeDotGov.data.serverTime - timeDotGov.data.responseTime; // t3-t4 used for correction to local clock for official time
|
||||
|
||||
////////////////////////////////////////////////////////////
|
||||
// USE OFFSET CHECK VAR TO ONLY CHECK CLIENT CLOCK ONCE ///
|
||||
////////////////////////////////////////////////////////////
|
||||
if (offsetCheck) {
|
||||
// ROUND TO MILLISECONDS - USE (* -1) to invert timediff pos/neg display value
|
||||
var diff = (timeDotGov.data.realTimeDif/1000) * -1;
|
||||
var diffDisplay = diff.toFixed(3);
|
||||
if (diffDisplay > 0 ) {
|
||||
diffDisplay = "+" + diffDisplay;
|
||||
}
|
||||
document.getElementById("realTimeDif").innerHTML = diffDisplay;
|
||||
offsetCheck = false;
|
||||
}
|
||||
|
||||
timeDotGov.clockController.runningclocks();
|
||||
timeDotGov.data.leapFlag = "false";
|
||||
} // END OF doData FUNCTION
|
||||
|
||||
// REFRESHES CLOCKS AT THE TOP OF EACH *ACTUAL* SECOND
|
||||
timeDotGov.clockController.runningclocks = function() {
|
||||
var deviceClock = new Date();
|
||||
var fractionalZone =(Math.abs((deviceClock.getTimezoneOffset()/60))) % 1; // IF CLIENT IS IN A ZONE WITH A FRACTIONAL HOUR, MAKE ADJUSTMENT (MODULO 1 TO GET THE FRACTIONAL HOUR)
|
||||
if (fractionalZone != 0) {
|
||||
fractionalZone = (1 - fractionalZone); // SUBTRACT FROM 1 TO GET VALID CORRECTION FOR 30 AND 45 MIN ZONES
|
||||
}
|
||||
var fractionalZoneMilli = fractionalZone * 3600000; // CONVERT PARTIAL HOUR TO MILLISECONDS, TO BE SUBTRACTED FROM ADJUSTED TIME
|
||||
var s = new Date(); // convert PC time and delay back to seconds (this is UTC)
|
||||
|
||||
s.setTime(s.getTime() + timeDotGov.data.realTimeDif + timeDotGov.data.RThalf - fractionalZoneMilli); // CORRECT FOR PC CLOCK ERROR, HALF NETWORK DELAY AND CLIENT IN PARTIAL TIME ZONE
|
||||
|
||||
var sec = s.getSeconds();
|
||||
if (sec != timeDotGov.data.previousSec) { // call handleonrefresh as soon as you see a new second
|
||||
timeDotGov.data.previousSec = sec;
|
||||
timeDotGov.clockController.handleonrefresh(s);
|
||||
}
|
||||
}
|
||||
|
||||
// CHECK IF USER CHANGED CLOCK or IF NEW DST STATE or LEAP SECOND, THEN REFRESH ALL CLOCKS
|
||||
timeDotGov.clockController.handleonrefresh = function(s) {
|
||||
//var mins = s.getMinutes();
|
||||
var now = s.getTime(); // convert time to ms since epoch (UTC)
|
||||
//if (0 <= mins < 30) {
|
||||
// now = now + fractionalZoneMilli;
|
||||
//} else {
|
||||
// now = now - fractionalZoneMilli;
|
||||
//}
|
||||
|
||||
if (timeDotGov.data.then == null) {
|
||||
timeDotGov.data.then = now; // if it's the first round, don't let it fail
|
||||
}
|
||||
|
||||
var DidUserChangeClock = Math.abs(now - timeDotGov.data.then);
|
||||
if (DidUserChangeClock >= 2000) { // if pc clock changed then reset (|now-then| should only be 1 s)
|
||||
location.reload();
|
||||
timeDotGov.data.then = now;
|
||||
} else {
|
||||
timeDotGov.data.then = now;
|
||||
}
|
||||
|
||||
if (timeDotGov.data.leapsecond / 1000 == Math.floor(now / 1000)) {
|
||||
timeDotGov.data.leapFlag = "true"
|
||||
}
|
||||
|
||||
var clocks = document.getElementsByClassName("clock");
|
||||
|
||||
var clockNum; // SET TO VALUE OF 'i' IN THE FOLLOWING LOOP TO REPRESENT EACH CLOCK INSTANCE
|
||||
|
||||
// SET ALL OF THE CLOCKS BY CALLING setCurrentTime FOR EACH CLOCK INSTANCE
|
||||
for(var i =0; i < clocks.length; i++ ){
|
||||
|
||||
var clock = clocks[i].getElementsByTagName("time")[0];
|
||||
var zoneOffset = clocks[i].getElementsByTagName("time")[0].getAttribute("zoneOffset") || 0;
|
||||
// GIVE VAR CLOCKNUM VALUE OF i
|
||||
clockNum = i;
|
||||
clock.innerHTML = timeDotGov.clock.setCurrentTime(timeDotGov.data.clockinstances[i], now, timeDotGov.data.twentyFour(), timeDotGov.data.dstStart, timeDotGov.data.dstEnd, zoneOffset, timeDotGov.data.leapFlag, timeDotGov.data.leapsec60, timeDotGov.data.RThalf, clockNum);
|
||||
document.getElementById('timeUTC').innerHTML = timeDotGov.clock.setCurrentTime(timeDotGov.data.clockinstances[i], now, true, timeDotGov.data.dstStart, timeDotGov.data.dstEnd, 0, timeDotGov.data.leapFlag, timeDotGov.data.leapsec60, timeDotGov.data.RThalf, 999); // LAST VAR IS CLOCKNUM, PASSING AS '999' TO AVOID DUPLICATE 'i' VARIABLE VALUE SEND TO SETCURRENTTIME FUNCTION
|
||||
}
|
||||
|
||||
} // END OF handleonrefresh FUNCTION
|
||||
|
||||
// CREATES CLOCK DIGITS AND DST/ST LABELS FOR EACH CLOCK INSTANCE
|
||||
timeDotGov.clock.setCurrentTime = function(clock, now, twentyFour, dstStart, dstEnd, zoneOffset, leapFlag, leapsec60, RThalf, clockNum) {
|
||||
|
||||
var displayTime = new Date();
|
||||
now = (now - (zoneOffset * 3600000));
|
||||
|
||||
if (leapFlag == "true"){
|
||||
now = now - 1000; // if leap has occurred, show (seconds - 1) until next sync
|
||||
var leapsec60 = "true"; // var to show a 60 instead of 59
|
||||
}
|
||||
|
||||
displayTime.setTime(now);
|
||||
|
||||
var year = displayTime.getUTCFullYear();
|
||||
var hourNum = displayTime.getUTCHours();
|
||||
var minNum = displayTime.getMinutes();
|
||||
var secNum = displayTime.getSeconds();
|
||||
|
||||
// CREATE ARRAY OF THE CLOCK NUMS WHO FOLLOW DST
|
||||
// ALSO CREATE ARRAY OF DST LABEL CLASSES ////////////////////////
|
||||
var DSTclocksArray = [ 0, 1, 6, 7, 8, 9 ]; // THESE ARE THE clockNums FOR THE ZONES THAT FOLLOW DST
|
||||
var dstLabels = document.getElementsByClassName("DSTterm"); // CREATE ARRAY FOR DST LABELS
|
||||
var dstLetters = document.getElementsByClassName("DSTletter"); // CREATE ARRAY FOR DST ABBREVIATION
|
||||
var dstNums = document.getElementsByClassName("DSTnum"); // CREATE ARRAY FOR DST OFFSET NUM
|
||||
|
||||
if ( now >= dstStart && now <= dstEnd ) { // CHECK IF THIS SECOND IS DST OR NOT
|
||||
|
||||
// CHECK IF CLOCK NUM IS IN DST ARRAY, IF SO, ADD THE DST HOUR AND LABELS
|
||||
// if ( DSTclocksArray.includes(clockNum) ) {
|
||||
if ( DSTclocksArray.indexOf(clockNum) > -1 ) { // indexOf fixes a chance in ie
|
||||
hourNum = hourNum + 1;
|
||||
// AT END OF FUNC ADD/PUSH CLOCKNUM TO dstClocksUpdated ARRAY, IF CLOCKNUM IS IN THERE, DONT UPDATE AGAIN
|
||||
// if ( !dstClocksUpdated.includes( clockNum ) ) {
|
||||
if ( dstClocksUpdated.indexOf( clockNum ) == -1 ) { // indexOf fixes a chance in ie
|
||||
dstLabels[clockNum].innerHTML = "DAYLIGHT";
|
||||
dstLetters[clockNum].innerHTML = "D";
|
||||
var standardNum = Number(dstNums[clockNum].innerHTML);
|
||||
dstNums[clockNum].innerHTML = standardNum - 1;
|
||||
dstClocksUpdated.push(clockNum); // ADD CLOCK NUM TO ARRAY OF CLOCKS UPDATED
|
||||
}
|
||||
}
|
||||
}
|
||||
// IF DST OR INCREMENTED HOUR GOES INTO NEXT DAY, RESET TO HOUR ZERO AND ADD A DAY
|
||||
if (hourNum > 23) {
|
||||
hourNum = 0;
|
||||
now = (now + 3600000) // advance now by one hour
|
||||
displayTime.setTime(now); // reset displaytime so day/date/month are correct with new day
|
||||
}
|
||||
// CHECK FOR AND IMPLEMENT LEAP SECOND
|
||||
if (leapFlag == "true") {
|
||||
if (leapsec60 == "true") {
|
||||
if (minNum == "59") {
|
||||
if (secNum == "59") { // if leapsec, and 59:59 then show 60 and reset
|
||||
secNum = "60";
|
||||
leapsec60 = "false";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var hourLabel = "";
|
||||
|
||||
// 12-HOUR OR 24-HOUR DISPLAY
|
||||
|
||||
// BOX NOT CHECKED SO 12-HOUR DISPLAY
|
||||
if (!(twentyFour)) {
|
||||
|
||||
if (hourNum > 11) {
|
||||
hourNum -= 12;
|
||||
am_pm = "P.M.";
|
||||
} else {
|
||||
am_pm = "A.M.";
|
||||
}
|
||||
} else {
|
||||
am_pm = "";
|
||||
}
|
||||
|
||||
var newVal;
|
||||
// SET HOURS
|
||||
if(hourNum > 9) {
|
||||
newVal = Number(String(hourNum).charAt(0));
|
||||
if(timeDotGov.data.myhour0 != newVal) {
|
||||
timeDotGov.data.myhour0 = newVal;
|
||||
}
|
||||
}
|
||||
else if(Number(timeDotGov.data.myhour0) != 0) {
|
||||
timeDotGov.data.myhour0 = "0";
|
||||
}
|
||||
|
||||
if(Number(hourNum) > 9){
|
||||
newVal=Number(String(hourNum).charAt(1));
|
||||
if(timeDotGov.data.myhour1 != newVal) {
|
||||
timeDotGov.data.myhour1 = newVal;
|
||||
}
|
||||
} else if (Number(timeDotGov.data.myhour1) != Number(hourNum)) {
|
||||
timeDotGov.data.myhour1 = Number(hourNum);
|
||||
}
|
||||
|
||||
if ((hourNum < 1) && (!(twentyFour))) { // if not 24hour time force the 12 so it's not 00
|
||||
timeDotGov.data.myhour0 = 1;
|
||||
timeDotGov.data.myhour1 = 2;
|
||||
}
|
||||
|
||||
// SET MINUTES
|
||||
if(minNum > 9) {
|
||||
newVal = Number(String(minNum).charAt(0));
|
||||
if (timeDotGov.data.mymin0 != newVal) {
|
||||
timeDotGov.data.mymin0 = newVal;
|
||||
}
|
||||
} else if(Number(timeDotGov.data.mymin0) != 0) {
|
||||
timeDotGov.data.mymin0 = 0;
|
||||
}
|
||||
|
||||
if(Number(minNum) > 9) {
|
||||
newVal = Number(String(minNum).charAt(1));
|
||||
if(timeDotGov.data.mymin1 != newVal) {
|
||||
timeDotGov.data.mymin1 = newVal;
|
||||
}
|
||||
}
|
||||
else if(Number(timeDotGov.data.mymin1) != Number(minNum)) {
|
||||
timeDotGov.data.mymin1 = Number(minNum);
|
||||
}
|
||||
|
||||
// SET SECONDS
|
||||
if(secNum > 9) {
|
||||
newVal = Number(String(secNum).charAt(0));
|
||||
if(timeDotGov.data.mysec0 != newVal) {
|
||||
timeDotGov.data.mysec0 = newVal;
|
||||
}
|
||||
}
|
||||
else if(Number(timeDotGov.data.mysec0) != 0) {
|
||||
timeDotGov.data.mysec0 = 0;
|
||||
}
|
||||
|
||||
if(Number(secNum) > 9) {
|
||||
newVal=Number(String(secNum).charAt(1));
|
||||
if(timeDotGov.data.mysec1 != newVal) {
|
||||
timeDotGov.data.mysec1 = newVal;
|
||||
}
|
||||
}
|
||||
else if(Number(timeDotGov.data.mysec1) != Number(secNum)) {
|
||||
timeDotGov.data.mysec1 = Number(secNum);
|
||||
}
|
||||
|
||||
// CREATE CLOCK DIGITS STRING TO DISPLAY
|
||||
var clockdigits = (timeDotGov.data.myhour0 + "" + timeDotGov.data.myhour1 + ":" + timeDotGov.data.mymin0 + timeDotGov.data.mymin1 + ":" + timeDotGov.data.mysec0 + timeDotGov.data.mysec1);
|
||||
clock = clockdigits + " " + am_pm;
|
||||
return clock;
|
||||
|
||||
} // END OF setCurrentTime FUNCTION
|
||||
|
||||
|
||||